Mobilní aplikace

12.12.2011· Autor: Ondřej Brichta· Počet komentářů: 3

V dnešním článku si představíme tvorbu mobilní aplikace pomocí Flash Builderu a ukážeme si i způsob, jak takovou aplikaci exportovat pro běžné prohlížeče.

Mobilní aplikace - který editor?

Než se pustíme do vývoje mobilních aplikací, budeme vždy řešit prvotní otázku - v čem začít aplikaci vytvářet? Pokud máme zkušenosti s vývojem flashových aplikací a známe alespoň trochu ActionScript 3.0, pak si můžeme vybrat z celkem čtyř možností:

Adobe Flash CS5.5

Výhody

  1. export jednoho kódu pro iOS, Android, Blackberry
  2. výsledná velikost aplikace je menší (v porovnání s Flash Builderem) - řádově stovky KB
  3. snadná editace grafiky, animací

Nevýhody

  1. nutnost „ručního" doprogramování řady automatických funkcí jiných frameworků (přechodové efekty, popup okna, ukládání stavu, automatické pozicování, načítání a zpracování externích dat...)

 

Adobe Flash Builder 4.6 - Flex Mobile Project

Výhody

  1. export jednoho kódu pro iOS, Android, Blackberry
  2. extrémně rychlé sestavení výsledné aplikace z komponent
  3. velmi pokročilý nástroj editace a ladění ActionScriptu

Nevýhody

  1. Výsledná aplikace je mnohem větší (řádově MB)
  2. Výkonnost není stále taková, jako u nativních aplikací

Adobe Flash Builder 4.6 - ActionScript Mobile Project

Výhody

  1. výhody spočívají v pokročilých možnostech editace ActionScriptu

Nevýhody

  1. Stejné, jako v případě Flashe CS5.5

OpenPlug

Výhody

  1. OpenSource nástroj, který je kompletně zdarma
  2. export do nativního kódu pro Android, iOS, Symbian
  3. vysoký výkon výsledných aplikací díky překladu do nativního kódu
  4. standartní podpora funkcí typu InAppPurchase, Notifications která se ve FlashBuilderu musí řešit přes Native Extensions
  5. projekt je v neustálém vývoji, takže řada funkcí přibývá podle požadavků uživatelů

Nevýhody

  1. externí data pouze rastrová (pokud SWF, pak je potřeba připravit vlastní překladač)
  2. List(seznamy) jsou pouze vertikální
  3. není podporovaná vlastnost rotation
  4. bitmapy nejsou vyhlazovány - nutnost více velikostí pro různé rozlišení
  5. animace se musí řešit jako sekvence bitmap

 

Pokud nás tlačí čas a máme sestavit jednoduchou formulářovou aplikaci, nebo jinou, kde nevadí výše zmíněná omezení, zvolíme OpenPlug nástroj.

Pokud nás tlačí čas, potřebujeme plně využívat animační možnosti flashplayeru (animace po časové ose), načítat externí SWF nebo potřebujeme rychle převést stávající flashovou aplikaci na mobilní zařízení, pak použijeme Flash Builder a v něm Flex Mobile Project.

Pokud chceme mít vše pod svou kontrolou a času máme relativně více, využijeme Flash Builder a v něm ActionScript Mobile Project, případně OpenPlug, pokud nám nevadí stávající omezení zmíněná výše.

 

Flash Builder 4.6

Poslední verze Flash Builderu přináší řadu zajímavých novinek, díky kterým máme vývoj mobilních aplikací zase o něco snazší:

  • Native Extensions - možnost připojení částí nativního kódu, takže lze doplnit funkcionalitu, kterou mobilní flashové aplikace neumožňují (In App Purchase,Notifications)
  • Captive Runtime - možnost přibalení AIR běhového prostředí přímo do instalačního balíku aplikace. Neplatí pro iOS, kde už tento princip funguje od začátku.
  • Řada nových komponent: SplitViewNavigator, SpinnerList, ToggleSwitch, Callout menu

Pojďme se ale podívat na princip sestavení mobilní aplikace pomocí Flash Builderu:

Nejprve začneme novým projektem Flex Mobile Project:

000

okno1

Následuje výběr typu aplikace, zde zvolíme View-Based Application. Aplikace jsou založené na ViewNavigator komponentě, která v sobě střídá dílčí komponenty třídy View. Analogii nalezneme například u ViewStack komponenty, ovšem ViewNavigator navíc umožňuje automatickou tvorbu menu v horní části aplikace. Ještě větším zjednodušením si pak můžeme pod ViewNavigator komponentě představit objekt, který obsahuje v horní části menu a pomocí přechodových efektů mění svůj obsah vytvořený jako komponenty založené na třídě View.

00

Záložka Permissions umožňuje pro konkrétní platformy nastavit různá povolení:

01

Pro iOS pak můžeme určit, pro která zařízení bude aplikace vhodná:

02

 

Jakmile máme nastaveno, objeví se nám MXML kód hlavní aplikace, kde hlavním elementem v případě View-Based je s:ViewNavigatorApplication

Důležitým atributem hlavního tagu je atribut firstView: firstView="views.TestAppHomeView"
kterým se určuje první obrazovka, která se bude zobrazovat. U nového projketu se vždy vytvoří jedna ukázková, založená na třídě View:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 actionBarVisible="true" tabBarVisible="true" title="HomeView">
 <fx:Declarations>
 <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
</s:View>

 

Je automaticky uložená do balíčku (adresáře" views") kam bychom měli umisťovat i další obrazovky, které bude naše aplikace využívat. Pokud tedy chce přidat další obrazovku, vytvoříme novou komponentu založenou na třídě „View":

04

Pokud se v hlavní aplikaci budeme chtít přepínat mezi jednotlivými obrazovkami, pak použijeme metodu „pushView" třídy ViewNavigator. Pokud píšeme ActionScript v hlavní aplikaci, pak se k objektu ViewNavigator dostaneme přes vlastnost „navigator":

navigator.pushView(TestAppHomeView);

Přičemž parametrem této metody je název třídy, která představuje předem připravenou komponentu založenou na třídě View. Jakmile uvedený příkaz spustíme, dojde k animovanému přesunu na danou obrazovku.

Metoda „pushView" umožňuje předávat i data do nově vkládané obrazovky:

var string_data:String = "AHOJ";
navigator.pushView(MenuView,string_data);

Pokud budeme v cílové komponentě sledovat creationComplete událost, můžeme převzít předaný obsah dat, který se skrývá v proměnné „data" (analogie v ItemRenderer):

protected function view1_creationCompleteHandler(event:FlexEvent):void{
 lbl.text = data.toString();
}

 

Vizualizace dat - List


Pro vizualizaci používáme List komponenty, které využívají vlastní ItemRenderery, které jsou defaultně dva - textový (LabelItemRenderer) a textový s možností ikonky (IconItemRenderer).

Pokud chceme renderery upravit, připravíme si vlastní ItemRenderer:

05

 

Kde lze pro IconItemRenderer získat následující MXML:

<?xml version="1.0" encoding="utf-8"?>
<s:IconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
 xmlns:s="library://ns.adobe.com/flex/spark" labelField="title" messageField="description" >
</s:IconItemRenderer>

V našem případě je renderer upraven pro zobrazení dat z RSS:

<fx:Script>
 <![CDATA[
 import mx.collections.XMLListCollection;
 import mx.events.FlexEvent;
 [Bindable]
 private var xmlData:XMLListCollection;
 private function xmlReady(e:Event):void{
 xmlData = new XMLListCollection(XML(dataLoader.data).channel[0].item);
 }
 private var dataLoader:URLLoader;
 protected function application1_applicationCompleteHandler(event:FlexEvent):void
 {
 dataLoader = new URLLoader(new URLRequest("http://www.flash.cz/portal/export/rss-clanky.aspx"));
 dataLoader.addEventListener(Event.COMPLETE,xmlReady);
 } 
 ]]>
 </fx:Script>
 <s:List itemRenderer="MobileRenderer" dataProvider="{xmlData}" x="214" y="19" width="200" height="200"> 
 </s:List>

 

Mobilní aplikace v desktopovém prohlížeči

Komponenty odladěné pro mobilní aplikace nemusíme používat jenom pro mobilní zařízení, ale lze je využít i v klasických webových aplikacích. Potřebujeme pouze k běžnému webovému projektu připojit SWC mobilních komponent a skin mobilních komponent.

Nejprve musíme připojit SWC knihovnu mobilních komponent:

07

 

Následuje import a volba SWC mobilního téma:

06

 

 

V aplikaci pak můžeme použít standartní komponenty, v případě List pak musíme specifikovat jeho mobilní skin:

<?xml version="1.0" encoding="utf-8"?>
<s:Application applicationComplete="application1_applicationCompleteHandler(event)" xmlns:rss_clanky="services.rss_clanky.*" xmlns:fx="http://ns.adobe.com/mxml/2009" 
 xmlns:s="library://ns.adobe.com/flex/spark" 
 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
 <s:layout>
 <s:BasicLayout/>
 </s:layout>
 <fx:Script>
 <![CDATA[
 import mx.collections.XMLListCollection;
 import mx.events.FlexEvent;
 [Bindable]
 private var xmlData:XMLListCollection;
 private function xmlReady(e:Event):void{
 xmlData = new XMLListCollection(XML(dataLoader.data).channel[0].item);
 }
 private var dataLoader:URLLoader;
 protected function application1_applicationCompleteHandler(event:FlexEvent):void
 {
 dataLoader = new URLLoader(new URLRequest("http://www.flash.cz/portal/export/rss-clanky.aspx"));
 dataLoader.addEventListener(Event.COMPLETE,xmlReady);
 }
 protected function button1_clickHandler(event:MouseEvent):void
 {
 var mc:MenuCallout = new MenuCallout();
 mc.open(menuBtn,true);
 }
 ]]>
 </fx:Script>
 <fx:Declarations>
 </fx:Declarations>
 <s:SpinnerListContainer skinClass="spark.skins.mobile.SpinnerListContainerSkin" x="10" y="17" width="200" height="200">
 <s:SpinnerList height="100%" dataProvider="{xmlData}" labelField="title" skinClass="spark.skins.mobile.SpinnerListSkin" selectedIndex="1">
 </s:SpinnerList>
 </s:SpinnerListContainer>
 <s:List itemRenderer="MobileRenderer" skinClass="spark.skins.mobile.ListSkin" dataProvider="{xmlData}" x="214" y="19" width="200" height="200"> 
 </s:List>
 <s:DateSpinner x="10" y="227">
 </s:DateSpinner>
 <s:ToggleSwitch x="211" y="231">
 </s:ToggleSwitch>
 <s:Button id="menuBtn" click="button1_clickHandler(event)" x="437" y="14" label="CalloutButton"/>
</s:Application>

 

 

 

 

 

Ondřej Brichta Vývojář flashových a mobilních AIR aplikací, šéfredaktor Flash.cz, školitel produktů Flash, Flex, Flash Media Server

E-mail: ob(zavinac)obria.cz | Web: http://www.obria.cz |

Motto: <°))))><

Komentáře k článku  
Open Plug jh42 | 16.12.2011 22:35
RE: Open plug Raa | 19.12.2011 8:46
vývoj OBr | 19.12.2011 10:12

Přihlášení uživatele