AIR приложение с HTML и JS
От много време съм фен на Adobe и откакто създадоха AIR все ми се иска да направя някакво приложение, използвайки тази технология. Отначало си мислех за някое desktop приложение, но откакто AIR вече върви и на мобилни телефони (а от известно време и аз вече имам такъв, който да поддържа AIR) си мисля и за мобилно приложение.
Преди две години даже веднъж се бях пробвал, но нещо ми се объркаха нещата с вградената база данни, при което се отказах. От тогава до сега не съм и докосвал AIR (все нямам време), но преди няколко дена вече най-сетне реших да опитам отново да направя нещо, пък ще се надявам този път да го завърша. Това, което започнах да разработвам е просто приложение за бележки — като sticky notes, само че на GSM-а. Цъкваш бутон и имаш нова бележка. Цъкваш върху бележката и можеш да редактираш съдържанието ѝ. И докато не я изтриеш тя си седи на екрана на приложението.
В неделя започнах разработването на въпросното приложение:
- направих си връзка към базата данни
- направих си и таблица за съхранение на бележките
- направих дори и дизайна на бележките
След това започнах и разработването на държанието на бележките. Добавих drag-and-drop функционалност, която по лично мое мнение не върви особено бързо — щеше ми се да е по-добре. Не съм сигурен дали не е поради факта, че го тествам все в debug режим (може би като го пусна като release версия ще е малко по-добре), но може и самият runtime да се предстява в известна степен по-зле отколкото същият ефект би вървял в обикновен браузър. Обещавам да направя няколко теста и да споделя какви са резултатите.
От голяма помощ в разработването на класа на бележките ми бяха няколко урока за OOP в JavaScript:
- http://phrogz.net/js/classes/OOPinJS.html
- http://phrogz.net/js/classes/OOPinJS2.html
- http://phrogz.net/js/classes/ExtendingJavaScriptObjectsAndClasses.html
В общи линии и преди съм хвърлял по един поглед на тези уроци и даже именно от тях съм заимствал в моя урок за достъпен слайдер, но едва преди няколко дена вече ги прочетох задълбочено.
Най-големият проблем, който за момента съм срещнал в разработването на приложението за бележки това, кога трябва да определя, че съдържанието на бележката трябва да се запише в базата данни.
От една страна звучи съвсем просто — връзваш се към един change event на бележката и си готов. Поне така си мислех отначало. Направих си event-и в определени моменти, даже си ги и dispatch-нах, ама когато дойде време да добавя eventListener за въпросните събития се оказа, че моят custom class няма метод addEventListener.
От една страна — логично да няма, след като не съм му направил, ама от друга страна — обикновените обекти в JS не поддържат ли автоматично подобна функционалност? За сравнение — в ActionScript 3 почти всичко extend-ва клас наречен EventDispatcher, който пък extend-ва директно Object класа, така че трябва наистина да се постараеш, за да нямаш addEventListener в ActionScript.
Проблемът с JS обаче си остава. Известно време се чудих какво да правя, а днес се консултирах и с моя добър приятел Сиян Панайотов, който ми даде идея сам да си имитирам простичка event функционалност. В най-общи линии идеята е да си направя addEventListener метод, който в един обект да има ключ за всеки тип събития, като на този ключ отговаря масив от callback функции. Така addEventListener просто добавя още една функция в съответния масив, а dispatch-ването на event-ите просто вика функциите от масива.
Чисто, просто, без някакви конкретни проблеми. Да, ама на мене самата идея да се симулират такива фалшиви event-и нещо не ми допада. Така де — за момента съм с тези псевдо събития, но след като ги имплементирах пак се зарових по какъв друг начин може да се реши проблемът. Ще ми се да е възможно най-оптимизирано, защото все пак приложението ще е предназначено за телефони, а там процесорите все още не са чак кой-знае-колко стабилни.
След продължилите ми търсения ми дойдоха на ум три идеи — или класът ми да extend-ва HTMLElement (DOM елемент, който може да dispatch-ва event-и и който има addEventListener метод), или да имам един основен HTML елемент в класа, като самият клас е просто wrapper около елемента (както и без това ми е почти устроен класът), или да зарежа HTML/JS и да си го направя цялото на Flex 😀 — хем в последния вариант и drap-and-drop функциите съм убеден, че ще вървят по-гладко.
Има и четвърти вариант, но него за сега мисля да го оставя на друг — да седна да науча Java, за да направя въпросното приложение за Android. Минусът тук е, че ще върви само на Android, а иначе ще мога да го пускам и на Windows Phone 7, и на BlackBerry и за iOS бих могъл да го пакетирам, а и трябва да науча Java :).
Като напредна малко и си пооправя кода мисля даже да го кача в GitHub и да го споделя с вас и всички останали. Дано само после не ми се смеят много хора на импровизациите.