Tworzenie prostej mobilnej aplikacji w Titanium Developer

25 February 2010 Comments

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.

Struktura aplikacji Titanium

Mobilna aplikacja stworzona w Developerze ma następującą strukturę

build  CHANGELOG.txt  LICENSE  LICENSE.txt  manifest  README  Resources  tiapp.xml

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):

<window>
            <id>initial</id>
            <url>index.html</url>
            <backgroundColor>#FFFFFF</backgroundColor>
			<icon>ti://featured</icon>
			<barColor>#000</barColor>
			<fullscreen>false</fullscreen>
        </window>

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).

Jak wygląda tworzenie aplikacji?

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.

Prosta aplikacja

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.

Tworzę projekt mobilny w Developerze

W tiapp.xml definiuję dwa okna:

<windows>
        <window>
            <id>initial</id>
	    <title>Wersja Natywna</title>
	    <icon>static/native.png</icon>
            <url>index.html</url>
            <backgroundColor>#FFFFFF</backgroundColor>
	    <barColor>#000</barColor>
	    <fullscreen>false</fullscreen>
        </window>
	<window>
            <id>weblike</id>
	    <title>Wersja Webowa</title>
	    <icon>/static/weblike.png</icon>
            <url>weblike.html</url>
            <backgroundColor>#EE4508</backgroundColor>
	    <barColor>#000</barColor>
	    <fullscreen>false</fullscreen>
        </window>
    </windows>

Oprócz strony index.html tworzę weblike.html. Obie strony na starcie mają prosty kod:

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Filmaster Mobile</title>
	<script type="text/javascript" src="static/jquery.js"></script>
	<script type="text/javascript" src="static/jquery.jfeed.pack.js"></script>
	<script type="text/javascript" src="static/jquery.utils.min.js"></script>
	<script type="text/javascript" src="index.js"></script>
	<link href="index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
	<div id="logo"><img src="static/logo.png" alt="logo" /></div>
	<div id="rss">
		Loading RSS Channel
	</div>
</body>
</html>

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.

Obecnie aplikacja wygląda tak:

weblike.js zawiera taki kod:

window.onload = function()
{
	html = '';
	jQuery.getFeed({
        url: 'http://filmaster.pl/planeta/rss/',
        success: function(feed) {
		for(var i = 0; i < feed.items.length && i < 5; i++) {
		    var item = feed.items[i];
		    html = html + '<h4>' + item.title + '</h4><p>' + item.description + '</p>';
		    }
		
		jQuery('#rss').html(html);
		}    
	});

};

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().

Po poprawce nasz kod wygląda tak:

window.onload = function()
{
	html = '';
	jQuery.getFeed({
        url: 'http://filmaster.pl/planeta/rss/',
        success: function(feed) {
		for(var i = 0; i < feed.items.length && i < 5; i++) {
		    var item = feed.items[i];
		    html = html + '<h4>' + $.UTF8decode(item.title) + '</h4><p>' + $.UTF8decode(item.description) + '</p>';
		    }
		
		jQuery('#rss').html(html);
		}    
	});
};

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) {
            var data = [];
            var desc_data = [];
            for(var i = 0; i < feed.items.length && i < 5; i++) {
                var item = feed.items[i];
                data[i] = {title: $.UTF8decode(item.title), hasChild: true};
		desc_data[$.UTF8decode(item.title)] = $.UTF8decode(item.description);
            }
	
	var tableView = 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 Sink
		    var a = Titanium.UI.createAlertDialog();
		    a.setTitle(eventObject.rowData.title);
		    a.setMessage(desc_data[eventObject.rowData.title]);
		    a.show(); 
		
		});
	//add view to current window
	Titanium.UI.currentWindow.addView(tableView);
	// show view
	Titanium.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 ;)

Źródła

Pobierz paczkę ZIP

Po rozpakowaniu zaimportuj w Developerze projekt wskazując rozpakowany katalog.

RkBlog

Systemy wbudowane, 25 February 2010