První kapitola úvod do problematiky

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


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


// 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


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


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


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

První kapitola úvod do problematiky

Recommend Documents