W tym artykule zapoznamy się z podstawami tworzenia mobilnych aplikacji w Titanium Developerze. Mając gotowe do pracy środowisko obejmujące emulator androida i Titanium Developera można przystąpić do pracy. Wiele przykładów wykorzystania API znajdziemy w pokazowej aplikacji KitchenSink do tego przyda się także dokumentacja.
W katalogu build znajdują się binarne wersje naszej aplikacji pod Androida i iPhone, a w katalogu Resources cały kod naszej aplikacji. Plik tiapp.xml zawiera konfigurację aplikacji, w tym listę zakładek-okien (domyślnie dwie):
Jeżeli podamy tylko jedno okno to aplikacja nie będzie używać navbara (menu zakładek). W katalogu Resources znajdziemy:
about.html android index.css index.html index.js
index.html to strona główna naszej aplikacji. Dodatkowo katalogi "android" i "iphone" przeznaczone są na pliki specyficzne dla danego systemu (mogą one nadpisywać te znajdujące się w głównym katalogu).
Tworzenie aplikacji mobilnej za pomocą JS/HTML/CSS może wydawać się trochę nietypowe. Ogólnie zająć musimy się
Szablonami HTML, strukturą kodu
Stylami CSS
Kodem JavaScript implementującym całą logikę aplikacji
Główny element aplikacji to kod JavaScript operujący na drzewie DOM pliku HTML oraz wykorzystujący API Developera do implementacji całej logiki aplikacji. Ścieżki implementacji interfejsu aplikacji są dwie - własny kod HTML/CSS lub też wykorzystanie natywnych kontrolek i widżetów poprzez API Developera. Natywne kontrolki dopasowują swój wygląd do systemu operacyjnego i łatwo je skrypować z poziomu JavaScriptu. Własne rozwiązania pozwalają na znacznie większą swobodę twórczą, choć tracimy natywny interfejs, do którego użytkownik jest przyzwyczajony. Przykład aplikacji zbudowanej na natywnych kontrolkach znajdziemy w prezentacji Hybrid iPhone Apps with Titanium Mobile.
Titanium Developer nie jest zbyt dobrze udokumentowany, choć sytuacja poprawia się z miesiąca na miesiąc. Nie unikniemy testowania różnych fragmentów kodu i masowego debugowania z emulatorem.
Teraz stworzę prostą aplikację będącą klientem kanału RSS wybranego serwisu (jako punkt wyjścia do bardziej zaawansowanej aplikacji promującej serwis). Dla porównania jeden widok oprogramuję za pomocą natywnych kontrolek, drugi będzie czystym widokiem HTML/CSS.
Gdzie jquery.jfeed.pack.js to plugin jfeed jQuery (obsługa kanału RSS), jquery.utils.min.js to plugin jquery-utils (potrzebny do obsługi tekstu UTF-8 z polskimi znakami). Strona HTML wyświetla logo serwisu filmaster.pl na pomarańczowym tle i "komunikat" o ładowaniu kanału RSS. index.js i weblike.js dla drugiej zakładki będzie zawierał kod JS odpowiedzialny za implementację logiki widoków.
Powyższy kod korzystając z wtyczki jFeed pobierze kanał RSS z podanego adresu i wrzuci do drzewa DOM strony weblike.html
Obecnie nasza aplikacja wygląda tak (wersja webowa):
Występuje problem z obsługą polskich znaków. By to poprawić zastosujemy jquery-utils, funkcję $.UTF8decode().
Za pomocą webowych technologii, prostych wtyczek jQuery stworzyliśmy prostą aplikację agregującą dane z wybranego serwisu. Rozbudowując ten pomysł można stworzyć mobilny interfejs serwisu internetowego korzystający z możliwości sprzętowych telefonu, choć łatwiej je wykorzystać będzie stosując natywne API. Teraz zajmiemy się oprogramowaniem pierwszej zakładki wyświetlającą listę wpisów w natywnej kontrolce tabeli.
index.js wygląda w finalnej wersji tak:
window.onload=function(){jQuery.getFeed({url:'http://filmaster.pl/planeta/rss/',success:function(feed){vardata=[];vardesc_data=[];for(vari=0;i<feed.items.length&&i<5;i++){varitem=feed.items[i];data[i]={title:$.UTF8decode(item.title),hasChild:true};desc_data[$.UTF8decode(item.title)]=$.UTF8decode(item.description);}vartableView=Titanium.UI.createTableView({data:data,title:'Tytuł'},function(eventObject){// Now call some eventhandler function to handle the click event object// Took this from the Kitchen Sinkvara=Titanium.UI.createAlertDialog();a.setTitle(eventObject.rowData.title);a.setMessage(desc_data[eventObject.rowData.title]);a.show();});//add view to current windowTitanium.UI.currentWindow.addView(tableView);// show viewTitanium.UI.currentWindow.showView(tableView);}});};
Co przekłada się pod Androidem na widok:
W powyższym kodzie JS pojawia się Titanium.UI.createTableView (dokumentacja) - natywna kontrolka wystawiana przez API Titanium. Stosując przykład z dokumentacji wyświetlam w nim dane pozyskane z kanału RSS. Po kliknięciu w dany wpis wyświetli się pływające okno z treścią danego wpisu w kanale RSS dzięki Titanium.UI.createAlertDialog - dokumentacja (choć wypada to zrobić lepiej za pomocą dodatkowego widoku).
Titanium Developer ma spory potencjał przy tworzeniu społecznościowych, webowych aplikacji, lecz wciąż ma problemy z przyjemnością tego programowania. Do odważnych świat należy ;)
Comment article