[HTML] How to Create a Simple Calculator

Здравейте, целта на тази статия е да покаже как можем да направим прост и функционален калкулатор чрез HTML и CSS. За пресмятане съм използвал прост javascript, който ще разясня подробно. Ето каква е крайната ни цел:

Както виждаме калкулаторът се състои от бутони и форма, в която пишем числата. Изграден е чрез таблица. Нека първо погледнем HTML-a. Както виждаме няма нищо особено – проста таблица с 5 реда. На самата таблица, за четимост (на CSS-a най-вече), съм дал id=“calc“. В заглавния ред, който се простира на четири колони (colspan=„4“) се намира нашата форма. В нея може да въвеждаме числа от клавиатурата, а както ще видим по-късно, и от бутоните на калкулатора. Нека първо да разясня атрибутите към тага input: 

• id=“display“ : Така даваме „име“ на формата, което по-късно ще използваме, за да я манипулираме.
• type=„text“ : Стандартно. Означава, че можем да пишем всякакъв текст вътре.
• placeholder=„0“ : Това е съдържанието, което ще виждаме, когато формата е празна. В случая е нула, както на повечето калкулатори.
• autofocus : При зараждане на страницата автоматично фокусира формата, за да можем директно да пишем.
• onkeypress=„searchKeyPress(event)“ : При натискане на бутон извиква фунцията searchKeyPress. Ще го разясня по-долу.

След първия ред на нашата таблица имаме още четири реда, с по черири колони, всяка от които съдържа по един бутон, като към всеки такъв присъства атрибутът onclick=„calculate()“, който извиква написаната от мен функция със съответният параметър (съвпадащ с изписаното върху бутона) при натискане.

Всичкият javascript, който съм използвал е това. Някакви си 15 реда код с две функции в него. Ето първата (calculate):

function calculate(input) {
var display = document.getElementById(‘display’).value;
switch(input) {
case „clear“: display = „“; break;
case „=“: display = eval(display); break;
default: display += input; break;
}
document.getElementById(‘display’).value = display;
}

Първият и последният ред са далеч от необходими, просто според мен така кодът се чете по-лесно, а и спестяват малко писане. В наталото на променлива display присвояваме стойността на нашата форма със същото име (където се съдържа всичко изписано). Използвам document.getElementById(‘display’).value, което общо взето означава „стойността на елемента с id=“display““ Като накрая обратно присвоявам стойността от променливата на елемента.

Същината на функцията е, че приема стойност и извършва действие с нея. Използвам съм проста switch-case конструкция. Каквото и да получим, освен „C“ или „=“ го добавяме към края на нашата форма (дисплей). В случай на „C“ (clear) просто нулираме формата (даваме й стойност празен стринг), а ако получим равно, използваме функцията eval(), която пресмята стойността на израза, след което я записваме на дисплеят. Тук е моментът да спомена, че използването на eval() по принцип се счита за лоша практика, но за нашият прост калкулатор върши работа. 🙂

Втората (и последна) функция е searchKeyPress(event), като единственото, което прави, е да проверява дали не сме натиснали клавиша „ENTER“ (неговит код е 13), и при натискането му, вместо да извършва действието по подразбиране, което в html е да събмитне и презереди формата (което води до нулиране нашият калкулатор), тя извиква calculate с параметър „=“, или с други думи връща нашият резултат. Това се прави единствено с цел калкулаторът ни да може да се използва пълноценно и само с клавиатура. Ако ще се ползват само бутоните по екрана, тази функция изобщо не е нужна.

И така, нашият калкулатор вече е готов и функционален. Трябва само да го направим красив. 🙂 Това принципно не ми е силната страна, но все пак ето и CSS-a, който използвам. Не е нещо особено, виждаме основно гласене на размерите и лейаута на таблицата. Вкарал съм и различен цвят, когато курсора е върху бутона с #calc button:hover. По-специфичен е последният блок – ::-webkit-input-placeholder {color: black;} чиято функция е да променя на черен цвета на плейсхолдъра (нуличката, която виждаме, когато дисплеят всъщност е празен), тъй като по подразбиране е светло сив. Възможно е да не работи на всички браузъри.

Така завършвам този пост, и както винаги, надявам се да съм помогнал на някого с нещо.

[Java] Using TreeMap + Extracting Data From .XLSX

Здравейте, в тази статия ще обясня как се работи на базово ниво с TreeMap и как се извлича информация от *.xlsx (екселски) файл.

Задачата, която ще използвам за пример изисква да се извлекат офисите от първата колона и приходите от последната такава в тази екселска таблица, след което да се изкарат сортирани, като срещу всеки офис стои общия му приход (без да се повтарят).

За да можем да прочетем информация от xls или xlsx файл ще ни е нужна външна библиотека. Използвам съм Apache POI библиотеката. Jar файловете, които ни трябват са:

dom4j-1.6.1.jar

poi-3.10-FINAL-20140208.jar

poi-ooxml-3.10-FINAL-20140208.jar

poi-ooxml-schemas-3.10-FINAL-20140208.jar

xmlbeans-2.3.0.jar

Слагаме ги в /lib поддиректория на проекта и ги включваме в него. Как става това съм обяснил по-подробно в началото на този пост.

Като за начало ето линк към готово решение. Poi библиотеката като цяло е много удобна и лесна за употреба и извличането на данните не е особено сложна задача. Това, което ме затрудни обаче, бе какъв тип данни да използвам за съхранението им. Първоначално се спрях се на познатия ми от C# тип Dictionary<key, value> който в джава намерих като HashМap<key, value> след което осъзнах, че TreeMap<key, value> ще бъде по-удобен (работят по идентичен начин, с разликата, че TreeMap сортира данните по ключ, следователно ще е по-лесно да ги изкарам накрая). Създаването на нова „карта“ става по следния начин:

TreeMap<String, Double> allOffices = new TreeMap<String, Double>();

За ключ ще изполвам името на офиса като стринг, а за стойност прихода във формат double.

Започвам като отварям файла в Try-With-Resources конструкция, която е препоръчително да се използва при работа с ресурси:

try (FileInputStream input = new FileInputStream(„Incomes-Report.xlsx“)) {

След което се възползвам от методите на POI Library, за да чета от него. Мисля, че кода говори сам – създавам нов workbook, след което от него взимам Sheet, който се казва „Incomes“ и хващам вторият ред от него (в програмирането се брои от нула). Тук трябва да имаме предвид, че има значение дали файлът е .XLSX или .XLS и ако сме намерили готов код за xls файл (както направих първоначално), той няма да работи, а освен това ще са необходими и други библиотеки.

XSSFWorkbook wb = new XSSFWorkbook(input);

XSSFSheet sheet = wb.getSheet(„Incomes“);

XSSFRow currentRow = sheet.getRow(1);

Продължавам с while цикъл, който проверява дали сме стигнали последния ред, и в края на който взимам следващия ред. От всеки един ред хващам необходимите ми клетки – първата и шестата и записвам стойностите им в променливи от тип string и double:

while (currentRow != null) {

         XSSFCell officeCell = currentRow.getCell(0);

         String currentOffice = officeCell.getStringCellValue();

         XSSFCell incomeCell = currentRow.getCell(5);

         double currentIncome = incomeCell.getNumericCellValue();

         ……

         currentRow = sheet.getRow(1 + currentRow.getRowNum());

}

Стойностите на тези променливи добавям в „картата“. Начинът, по който го правя може да ви се стори странен, но не открих по-добър… на джава, в тази структура, доколкото разбрах, не може да се добавя към определена стойност на ключ, както например в SortedDictionary() в C#. Ta какво правя аз – проверявам дали даден офис вече се съдържа в „картата“ и ако е така добавям прихода, чиято стойност пази ключа (офиса) а към текущия приход. Причината е, че когато вкарвам офис с .put старата му стойност (приход) се губи. По този начин, ако за първи път срещаме даден офис, го добавяме и като стойност му слагаме прихода, а ако вече го е имало, стойността която му слагаме е сбор от текущата стойност и предишната. Надявам се да съм го обяснил разбираемо 🙂

if (allOffices.containsKey(currentOffice)) {

         currentIncome += allOffices.get(currentOffice);

}

allOffices.put(currentOffice, currentIncome);

Накрая е необходимо да принтираме резултата. В началото доста се зачудих как да обходя такава колекция без var, но се справих. Използвам foreach цъкъл, който обхожда всички ключове (офисите) и ги принтира заедно с техните стойности (приходите):

for (String office: allOffices.keySet()) {

        double income = allOffices.get(office);

        System.out.printf(„%s -> %.2f“, office, income);

        System.out.println();

}

В задачате се изисква също така да се намери общия приход и да се принтира накрая, което става чрез допълнителна променлива totalIncome.

С това приключвам днешния гайд, ще се радвам ако съм помогнал с нещо. 🙂

[Java] Generate a PDF by External Library

Здравейте, в този пост ще се опитам да обясня как се генерира ПДФ файл на Java, използвайки външна библиотека. Във файлът ще вкараме стандартно тесте от 52 карти за игра.

Това е готовият ми сорс код, по който ще се движа.

Първото, което трябва да направим, е да изберем коя външна библиотека да използваме, тъй като има голям избор. Аз се спрях на може би най-разпространената – iTextPDF. A ето и линк за последната към момента версия 5.5.0. За момента ни е необходим само главният jar файл – itextpdf-5.5.0.jar. Добрата практика е да го поставим в /lib поддиректория в главната на нашия проект. След това (ако използвате еклипс) може да го включите в build-path-а по следния начин:

Така, вече сме добавили библиотеката е време да понапишем малко код 🙂 Ще се възползваме от методите, които ни предоставя iText.

Първо е нужно да създадем нов празен ПДФ файл и да го отворим, за да сме готови да пишем в него. Смятам, че кодът е self-explanatory:

Document document = new Document();

PdfWriter.getInstance(document, new FileOutputStream(„MyFirstFile.pdf“));

document.open();

 

После създаваме таблица, в която ще записваме нашите карти:

PdfPTable table = new PdfPTable(4);

table.setWidthPercentage(100);

table.getDefaultCell().setFixedHeight(180);

Параметърът, който подаваме на конструктура new PdfPTable() показва желаният от нас брой колони. При мен са 4, но може да се направи например със 2 или 8. Чрез table.setWidthPercentage() определяме каква да е максималната част, в проценти, от листа, която ще заема таблицата. Ако желаем да е цялата, както във случая трябва да вкараме 100, тъй като по default e 80. За да зададем желаната височина на всяка клетка използваме table.getDefaultCell().setFixedHeight(), като аз реших, че при 180 най-много ми допада как изглежда.

Следва нагласянето на фонта:

BaseFont baseFont = BaseFont.createFont(„times.ttf“, BaseFont.IDENTITY_H, true);

Font black = new Font(baseFont, 75f, 0, BaseColor.BLACK);

Font red = new Font(baseFont, 75f, 0, BaseColor.RED);

 

Първият параметър, който подаваме на BaseFont.createFont() е фонтов файл, намиращ се на твърдия диск. Може да се използва фонт по избор. Ако е в папката на проекта е позволено да се напише само името му, иначе трябва пълния път до него (например C:/Windows/Fonts/times.ttf), но тогава има вероятност програмата да не работи коректно на други машини. След като базовият фонт е създаден, правим два фонта, които се различават единтвено по цвета, който подаваме като червърти паремтър на конструктура new Font(). За втори параметър записваме желания размер на шрифта, който много зависи от това каква точно таблица сме направили.

Картите генерирам по стандартен начин с два вложени цикъла и суич-кейс конструкции, на които не смятам за нужно да се спирам. Другият вариант е да се хард-коуднат картите и боите с два масива.

Всяка карта + боя се добавя в клетка от таблицата с table.addCell(). Като параметър подавам параграф, който създавам с конструктура new Paragraph() приемащ 2 параметъра – стринг и фонт, който желаем да използваме (предварително създадохме 2 еднакви с различен цвят и имена black и red):

table.addCell(new Paragraph(card + color, black));

или

table.addCell(new Paragraph(card + color, red));

Вече всичко е почти готово, само трябва да добавим цялата създадене таблица в отворения от нас документ, след което задължително да го затворим:                       

document.add(table);

document.close();

Остава само да стартираме програмата.

Това е от мен засега, надявам се статията да бъде полезна на някого. 🙂