Tvorba RIA aplikací v Adobe Flex 4
První kapitola – úvod do problematiky Co je to Flex Adobe Flex je ActionSript (AS) framework pro tvorbu Rich Internet Aplications (RIA), tedy knihovna AS tříd pro Flash. Flex používáme k vytvoření SWF souboru spustitelného ve Flash Playeru, nebo za pomoci runtime Adobe AIR, samostatné desktopové aplikace. Poslední verzí frameworku je Flex 4.
Co budeme potřebovat •
Samotná tvorba aplikací bude probíhat v prostředí Adobe Flash Builder, které je pro studijní účely zdarma.
•
Základní znalost programování v libovolném „C-like“ jazyce. Budeme využívat ActionScript 3.0.
•
Základní znalost XML, či jiných značkovacích jazyků.
•
Adobe Flash Player pro spouštění cvičných aplikací.
Základy programování v jazyce ActionScript 3.0 AS je objektově orientovaný jazyk určený k programování pro Flash Player. Je podobný JavaScriptu, Javě, či dalším podobným jazykům. Poslední verzí jazyka je ActionScript 3.0.
Kód v AS 3 je již striktně case sensitive, tedy rozlišuje malá a velká písmena!
Deklarace proměnných •
Používáme klíčové slovo var
•
např. var myVariable:String = “Hello World”; Chápeme jako proměnnou s názvem myVariable typu string inicializovanou na hodnotu Hello World.
•
Ve flexu používáme tyto základní datové typy: •
Boolean – logická proměnná nabývající hodnot true, nebo false var prom:Boolean = true;
•
int – celé číslo var prom:int = 42;
•
Number – číslo s pohyblivou desetinnou čárkou var prom:Number = 14.3;
•
String – řetězec znaků var prom:String = “Hello“;
1
Tvorba RIA aplikací v Adobe Flex 4 •
Array – dynamické pole var prom:Array = [“prvek1“,“prvek2“];
•
Atributy přístupnosti k proměnným (např. private var i:int = 42;): •
public – Veškerý kód aplikace může přistupovat k této proměnné.
•
private – Pouze kód aktuální komponenty, nebo třídy má přístup.
•
protected – Stejné jako u private, ale přístup mají i podtřídy.
•
internal – Stejné jako u private, ale přístup mají i veškeré komponenty, nebo třídy ve stejném balíčku (package).
Názvy proměnných vždy začínají malým písmenem a nesmí být stejné jako klíčová slova!
Komentáře (poznámky) •
Jednořádkový komentář - //
•
Víceřádkový komentář - /*
*/
Deklarace třídy a funkcí (metod) Public class myClass { // Neveřejná proměnná řetězce znaků. private var myProm:String; // Konstanta private const MAX:int = 5; // Konstruktor třídy. public function myClass(parametr:String){ myProm = parametr; } //Hlavička metody s prázdným návratovým typem. private function myFunction():void // Metody get a set. public function get myProm():String{ return myProm; } public function set myProm(hodnota:String):void{ myProm = hodnota; } }
2
Tvorba RIA aplikací v Adobe Flex 4
Operátory +
Matematický součet
var result:Number = 20 + 20;
-
Matematický rozdíl
var result:Number = 20 - 20;
*
Matematický součin
var result:Number = 20 * 2;
/
Matematický podíl
var result:Number = 20 / 2;
%
Modulo
var result:int = 12 % 5;
==
Rovnost
Var is:Boolean = {value1 == value2};
!=
Nerovnost
Var is:Boolean = {value1 != value2};
<
Menší než
if(value > 3){}
>
Větší než
if(value < 3){}
&&
Logický součin AND
if(value > 3 && value < 10){}
||
Logický rozdíl OR
if(value > 3 || value < 10){}
Podmínky a cykly // Podmínka if, else if, else if (nějaký logický výraz){ něco vykonej; } else if (podmínka){ vykonej něco jiného; } else{ vykonej něco úplně jiného; } // Ternární operátor (podmínka) ? True_výsledek : false_výsledek;
3
Tvorba RIA aplikací v Adobe Flex 4
// Switch switch (nějaký výraz){ case hodnota1: něco vykonej break case hodnota2: vykonej něco jiného break default: vykonej další věc } // For cyklus. For (var i:int=0; 1<10; i++){ vykonej něco desetkrát; } // While cyklus. Var i:int = 0; while (i<10){ něco vykonej; i++; }
4
Tvorba RIA aplikací v Adobe Flex 4
Seznámení s prostředím Adobe Flash Builder
Adobe Flash Builder (dále jen FB), dříve nazývaný Flex Builder je integrované vývojové prostředí (IDE) založené na Eclipse platformě zaměřené na vývoj RIA a cross-platform desktopových aplikací (AIR). Kód generujeme prostřednictvím MXML kódu, ActionScriptu a nabízí nám také WYSIWYG editor (what you see is what you get). Flash buider nám poskytuje také interaktivní debugger. Na obrázku můžeme vidět hlavní okno aplikace. •
Nahoře máme panel s oknami pro vytvoření nového projektu, spuštění aplikace, testování, debuggování apod.
•
Nalevo manager projektů a panel s komponentami, layouty atd., které stačí přetáhnout do pracovní plochy. FB nám automaticky vygeneruje kód, který můžeme doplnit, či upravit přímo v kódu, nebo jednotlivé komponenty nastavovat v panelu s vlastnostmi, který je napravo.
•
Nad pracovní plochou máme záložky pro přepínání mezi projekty, dále přepínání designového módu (WYSIWYG) a zobrazení samotného kódu aplikace (source). Můžeme zde také přepínat tzv. Stavy aplikace (states).
•
Úplně dole nám aplikace nabízí panel s výpisem chyb, varování, konzolí a dalšími možnostmi.
•
Ve středu aplikace je pracovní plocha s náhledem aplikace, či v source režimu samotným kódem aplikace.
5
Tvorba RIA aplikací v Adobe Flex 4
Základy psaní v MXML kódu MXML je značkovací jakzyk založený na XML. Zkratka nemá žádný oficiální význam, můžeme ji ale chápat prostě jako Macromedia eXtensible Markup Language (Jazyk byl poprvé předveden společností Macromedia). Kód ve FB je v podstatě kombinací MXML jazyka a ActionScriptu. MXML je kompilováno přímo do SWF souborů. Ukázka kódu ve FB: <s:Application 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:Button id="tlacitko" label="Stiskni" click="" left="10" top="15" ... /> <s:HGroup> <s:Button label="btn" /> <s:Label text="Nějaký popisek." />
6
Tvorba RIA aplikací v Adobe Flex 4
Obsah První kapitola – úvod do problematiky................................................................................................1 Co je to Flex.....................................................................................................................................1 Co budeme potřebovat.....................................................................................................................1 Základy programování v jazyce ActionScript 3.0...........................................................................1 Deklarace proměnných................................................................................................................1 Komentáře (poznámky)...............................................................................................................2 Deklarace třídy a funkcí (metod)................................................................................................2 Operátory....................................................................................................................................3 Podmínky a cykly........................................................................................................................3 Seznámení s prostředím Adobe Flash Builder.................................................................................5 Základy psaní v MXML kódu..........................................................................................................6
7