Uživatelské nástroje

Nástroje pro tento web


vyuka:flash_builder_iv

Flash Builder IV

Náplň výuky:Stavy(states), přepínání mezi stavy, externí odkaz na obrázku, viewstack, toggleButtonBar, linkBar, akordeon

Vytvoříme fiktivní stránky o chlebu s jednotlivými stavy, různým obsahem, zobrazení pomocí viewstacku.

Vytvoříme si nový projekt (otevírání projektu a základnímu rozmístění nastavení se již věnovat ve větším měřítku nebudeme, vše najdete v předchozích lekcích)

Stavy (states)

Stavy jsou jednotlivé „stránky“ nebo také „scény“ naší aplikace. Základní nastavení aplikace zůstává jednotné (velikost, pozadí, styl), pomocí stavů můžeme nahrávat do každé scény jiný obsah. Např. pokud máme stránku s portfoliem, zůstává stejné záhlaví a „menu“(rozcestník), ale obsah jednotlivých stránek se mění (kontakt, galerie, úvod aj.)

Základní stav se jmenuje „State1“. Mezi jednotlivými stavy se můžeme přepínat v těchto panelech (jednoduchým kliknutím na název stavu):

Vytvoření nového stavu

Nový stav se vytvoří pomocí design módu v panelu „States“ (Stavy):

Přejmenování stavu

V panelu „States“ dvakrát poklepeme na stav, který chceme přejmenovat - první stav přejmenujeme na „stav1“

Vkládání obrázku z webu

Do stavu 1 vložíme komponentu obrázek „Image“. Nastavíme jí ID: ObrazekZWebu Zobrazí se jen ve stavu1 - In states:stav1 Source: odkaz z kterého se bude obrázek načítat

Obrázek se načte až při spuštění aplikace, v editoru nebude viditelný!

Příprava flashové komponenty

Ve stavu dvě si připravíme flashovou komponentu pro pozdější využití:

Vytvoření třetího stavu + viewstack

Vytvoříme třetí stav a předáme viewstack z palety komponentů. Viewstack by se dal popsat jako rámec, nebo okno, uvnitř kterého se může zobrazit různorodý obsah v závislosti na tom, který kontejner je aktivní. Viewstack se tedy skládá z libovolného počtu kontejnerů, jejichž viditelnost můžeme v editoru přepínat pomocí modrých šipek nad kontejnerem, přidávat je pomocí pusu a mínusu. Pro ovládání kontejneru ve spuštěné aplikaci bude potřeba přidat další ovládací komponenty (LinkBar, ToggleButtonBar)

V source módu vypadá viewstack takto: Zřetelněji je vidět, že viewstack je jen „kontejner“ který se skládá z jednotlivých kontejnerů s obsahem „NavigatorContent“

Ovládání viewstacku

LinkBar:

Vytáhneme LinkBar z menu Components, musíme ho umístit MIMO viewstack, jinak se nám automaticky zasune dovnitř a nebude správně fungovat!

Komponenta LinkBar začne fungovat až ve chvíli, kdy se připojí k viewstacku, po vytažení z knihovny (nenapojená na nic) vypadá takto:

V Properties LinkBaru napíšeme do kolonky „Data provider“ (poskytovatel dat) název komponenty, kterou má LinkBar ovládat. (V našem případě viewstack1). Poté se komponenta LinkBar změní:

To, co nyní zobrazuje, je název prvního kontejneru ve viewstacku s názvem „View“. Vytvoříme další kontejnery, celkem budeme mít tři:

Máme kontejnery „View“, „Druhý“ a „Třetí“. Mezi kontejnery můžeme v editoru přepínat buď pomocí modrých šipek, nebo klikáním na názvy v linkbaru. Pokud chceme změnit název nebo vlastnosti jednoho kontejneru, musíme se na něj přepnout a pak kliknout dovnitř pole viewstacku, poté se nám vypíší vlastnosti kontejneru v Properties. S položkou „Label“ změníme název kontejneru v linkBaru:

Do jednotlivých kontejnerů můžeme vložit jakýkoliv obsah, např. obrázky. Pak mezi nimi budeme moci přepínat za pomocí Linkbaru.

Dovnitř pole viewstacku přesuneme z panelu Components obrázek Image, najdeme si soubor obrázku v počítači, dáme vložit a poté se nám otevře okno, které nám nabízí zda zkopírovat zdrojový soubor do adresáře k projektu. Je vhodné téměř v každém případě si tento soubor zkopírovat, ušetříte si tím pozdější problémy, které by se mohly vyskytnout při manipulaci se souborem.

Stejným způsobem vložte obrázky i do zbylých kontejnerů.

Přepínání mezi stavy pomocí buttonů

Vytvořte si buttony pro každý stav:

  • Obrázek
  • Flash
  • Akordeon

Každému buttonu dodejde ID „tlacObrazek“, „tlacFlash“, „tlacAkordeon“ a label.

Pro každý button generujte posluchače událostí myši - kliknutí:

V source módu:

K poslucháčům událostí myši se nám vytvořily i funkce, pro každé tlačítko. Teď k nim dopíšeme formulaci určující, že tyto funkce přepnou aplikaci do určitého stavu.

currentState='jméno stavu'

Tato formulace vlastně říká „současný stav je teď 'jméno stavu'“.

V tuto chvíli se ale buttony nachází jen ve stavu 3. Zbývá nám nastavit buttonům, aby se zobrazovaly ve všech stavech:

Obrázek s odkazem do nového okna

Vytvoříme si obrázek, který bude plnit funkci záhlaví naší stránky a vložíme ho do naší aplikace. Pojmenujeme ho záhlaví a nastavíme mu, aby se zobrazoval ve všech stavech:

Protože nám u obrázku defaultní panel Properties nenabízí generovat posluchače kliknutí myši, vytvoříme ho takto: Označíme obrázek Přepneme panel properties do módu A-Z Najdeme položku „click“ a klikneme na ni - automaticky se nám vygeneruje posluchač i se spouštěnou funkcí a zobrazení se nám přepne do source módu

Do toho, co má funkce vykonat napíšeme příkaz

		navigateToURL(new URLRequest( 'http://cs.wikipedia.org/wiki/Chl%C3%A9b'), '_blank');

Tento příkaz vytvoří nové okno „_blank“, kde se otevře webová stránka - wikipedie, článek o chlebu

Protože nám Flash builder tuto funkci nastavil jako spustitelnou jen z třetího stavu, je nutné ještě poslední červený řádek v náhledu přepsat na:

 click="zahlavi_clickHandler(event)"/>

Pokračování článku (ToggleButtonBar a Acordeon a domácí úkol) - v pondělí.

Prozatimní funkční verze aplikace:

http://hollarka.host22.com/VYUKA/FB_24022012/release/ChlebaProjekt.html

ToggleButtonBar

Vrátíme se zpět k našemu viewstacku. ToggleButtonBar je další komponenta, kterou můžeme viewstack ovládat. Stejným způsobem, jakým jsme vložili do scény LinkBar, dáme na scénu i ToggleButtonBar a určíme jí poskytovatele dat (data provider):

ToggleButtonBar funguje podobným způsobem jako LinkBar, můžeme přepínat mezi jednotlivými kontejnery již v editoru.

Akordeon

Akordeon je komponenta, která stejně jako viewstack obsahuje kontejnery pro umístění různého obsahu. Svým vzhledem připomíná „akordeon“ - je složená z jednotlivých panelů, které se klikáním myší roztahují (přesoucají se nahoru nebo dolu) a ukazují svůj obsah. Je vhodnější pro zobrazování menších komponent.

Vložíme Akordeon na scénu:

V properties můžeme opět změnit popisky jednotlivých položek, pomocí „plus“ nad akordeonem přidáme další kontejnery a vložíme do nich obsah:

Projekt k vyzkoušení na webu:

http://hollarka.host22.com/VYUKA/FB_24022012/release/ChlebaProjekt.html

vyuka/flash_builder_iv.txt · Poslední úprava: 2012/02/27 12:16 autor: verca