První kapitola úvod do problematiky

Transkript

1 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

2 Array dynamické pole var prom:array = [ prvek1, prvek2 ]; Tvorba RIA aplikací v Adobe Flex 4 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

3 Operátory + Matematický součet var result:number = ; - 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

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

5 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

6 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: <?xml version="1.0" encoding="utf-8"?> <s:application xmlns:fx=" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minwidth="955" minheight="600"> <fx:declarations> <!-- Nevizuální komponenty jako služby apod. --> </fx:declarations> <fx:script> <![CDATA[ // Zde píšeme samotný kód v ActionScriptu. // Deklarujeme proměnné, metody apod. ]]> </fx:script> <!-- Takto zapisujeme v MXML komentáře. Níže můžete vidět ukázku komponenty Button. Některé prvky nemusí mít párové tagy, jsou tedy ukončeny />. Do parametru click bychom mohli například uvést referenci na nějaký click handler, či metodu.--> <s:button id="tlacitko" label="stiskni" click="" left="10" top="15"... /> <!-- Blok layoutu HGroup s dvěma značkami, mezi které můžeme vkládat další komponenty apod. --> <s:hgroup> <s:button label="btn" /> <s:label text="nějaký popisek." /> </s:hgroup> </s:application> 6

7 Obsah První kapitola úvod do problematiky...1 Co je to Flex...1 Co budeme potřebovat...1 Základy programování v jazyce ActionScript 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