Uživatelské nástroje

Nástroje pro tento web


vyuka:flash_builder_iii

Flash Builder III

button, label, vkládání swf a ovládání pomocí tlačítka

Vytvoříme si nový projekt, půjde o praktické procvičování předchozí látky, pokud vám nebude cokoliv jasné, přečtěte si předchozí dvě lekce.


Náš projekt pojmenujeme „opakovani“:

V sekci „project location“ můžeme nastavit, kde se bude náš projekt ukládat. Pokud použijeme základní pozici pro ukládání - „use default location“, projekt se nám uloží do složky „c/users/jméno uživatele/Adobe Flash Builder 4.5/jméno projektu“

Pomocí Browse můžeme nastavit jakýkoliv adresář, kde se bude celý projekt ukládat.

V kolonce Application type nastavíme „Web“ - chceme aby náš výsledný projekt fungoval na Webu, kam se bude uživatel připojovat přes internet. (Pokud bychom chtěli aplikaci, která se bude spouštět, „instalovat“ jen v počítači bez připojení k internetu, je potřeba dát Desktop. Forma Web bez připojení k internetu nefunguje správně.

Poté klikneme na „Finish“ a vygeneruje se nám nový, „prázdný“ (jen se základním nastavením) projekt.

(rozbor jednotlivých řádek kódu najdete v předchozích lekcích)


Upravíme pozadí aplikace.

(Aplikace = „kontejnej“ obsahující všechny jednotlivé prvky. Aplikace je podkladová „stránka“ nebo také scéna, kde se všechny objekty nachází)

Buď v „Design módu“, kdy označíme v okně „Outline“ položku „Application“ a pak nastavíme v panelu „Properties“ vlastnosti „Background“ - „Color“.

Druhá možnost je upravit Aplikaci v „Source módu“, tam napíšeme samotný atribut backgroundColor=“#B82828“ do vlastností Aplikace.


Vytvoříme textový rámec - Label.

V „Design módu“

Otevřeme panel Components, najdeme vzor objektu Label, uchopíme ho myší a přetáhneme do aplikace (na scénu/plochu). Automaticky se nám vytvoří textový rámec s nápisem Label.

V „Source módu“

Napíšeme objekt Label - do prostoru ZA Declarations (Komponenty se umisťují za deklarace do těla aplikace.)


Nastavíme vlastnosti Labelu

ID: nadpis1

Zobrazovaný text: nějaký text

V „Design módu“

V „Source módu“


Vytvoříme TextInput s vlastnostmi

V „Design módu“

Přetáhneme komponentu „TextInput“ z panelu „Components“, umístíme ji na ploše aplikace, pak v panelu „Properties“ nastavíme její vlastnosti. ID „vstup1“ a text „Napište text“

V „Source módu“


Vytvoříme Button s vlastnostmi

V „Design módu“

V „Source módu“


Funkce tlačítka vkládající text Ipnutu vstupu1 do Labelu nadpis1

V „Design módu“

Označíme tlačítko a v panelu Properties klikneme na znak generování posluchače událostí (blesk za kolonkou „On click“ - tam bude později vygenerovaná procedura vypsaná). Klikneme na „Generate Event Handler“. To nás přesune do Source módu:

V „Source módu“

V source módu buď můžeme posluchače události takto napsat, nebo nás tam přesune generování z Design módu. Předpřipravená funkce která se spustí na kliknutí, by měla vypadat takto:

Dopíšeme už jen co má funkce po stisknutí tlačítka vykonat:

nadpis1.text=vstup1.text;

Pokud teď projekt otestujeme („run“ nebo CTRL+F1), bude se nám nadpis1 měnit podle textu napsaného v TextInputu.


Další label - nadpis2, který se bude automaticky měnit podle textu v inputu

Vytvoříme další Label (stejným způsobem jako první)

Do properties napíšteme tyto vlastnosti:

  • ID: nadpis2
  • Zobrazovaný text: {vstup1.text}

Takto můžeme určit přejímaný/odkazovaný text, který se bude menit v reálném čase. Ve formátu jménoObjektu.text

Text se bude měnit až ve chvíli, kdy bude aplikace spuštěná! (Run) V Editoru se tento label bude zobrazovat s popiskem {…}


Seskupení několika objektů do jedné skupiny (group)

Vložení objektů do skupiny nám umožňuje později jednodušší manipulaci se všemi tyto objekty. Nastavíme jejich pozici uvnitř skupiny a při manipulaci s celou skupinou se jejich pozice vůči ostatním objektům ve skupině nemění. Skupina se tedy chová jako „kontejner“.

V „Design módu“

Z okna „Components“ vytáhneme objekt „Group“ (pozor, schovává se v adresáři „Layout“) a přesuneme ho na plochu aplikace. Současně v properties nastavíme ID „skupina1“

V „Source módu“

Skupina je zatím vytvořená a prázdná. Objekty do ní můžeme přesunout opět dvěma způsoby:

V „Design módu“

Jednoduše vezmeme jednotlivé objekty myší na ploše aplikace a přesuneme je „nad“ skupinu. Rámeček skupiny zmodrá a když objekt pustíme, zařadí se „dovnitř“ skupiny.

V „Source módu“

Přesuneme jen kód jednotlivých objektů mezi tagy (<> </>)ohraničující skupinu:

To, že se objekty umístily ve skupině můžeme kontrolovat pomocí panelu „Outline“ v obou módech:

Když teď budeme přesouvat v Design módu celou skupinu po ploše, budou se spolu s ní pohybovat i vnořené objekty.


Modifikace pozice skupiny

Celé skupině můžeme nastavit konstantní pozici vzhledem k ploše aplikace. (Jelikož se aplikace zobrazuje v prohlížeči, její plocha má variabilní velikost.) Tato pozice se nastavuje v panelu „Properties“. Můžeme nastavit konstantní pozici s poměrem vzdálenosti k jednotlivým okrajům aplikace nebo středům stran. Pokud chceme, aby naše skupina byla při každém zobrazení na středu ve vrchní části plochy aplikace, nastavíme toto:

V „Design módu“

V „Source módu“

Protože má naše aplikace minimální šířku 955px, skupina zastaví při zmenšování okna svou pozici na 423px od levého okraje a dál už se nebude posunovat! Při zvětšování okna nad 995 px se bude vždy držet na středu.


Umístění aplikace na web

Zbývá nám poslední krok - umístit aplikaci na web. Pro tuto akci se musí celá aplikace exportovat se všemi potřebnými soubory a skripty!

Project se exportuje takto, přes menu Project: Export Release Built

V novém okně nastavíme

  • Project: který projekt má být exportován (u nás „Opakovani“)
  • Application: která z aplikací projektu má být exportována
  • Export: Do jaké složky se má projekt exportovat. (Doporučuji si exportovat projekt do nějaké lépe dohledatelné složky než je bin-release - složka vnořená uvnitř pracovního projektu)

Do této složky se nám exportují soubory:

Později je třeba je na server nahrát všechny!

Při spouštění projektu odkazujte vždy na soubor s koncovkou .html!

Návod na nahrávání souborů na server je již jinde, náš finální projekt můžeme otestovat zde:

http://hollarka.host22.com/VYUKA/FB_17022012/opakovaci/release/Opakovani.html

vyuka/flash_builder_iii.txt · Poslední úprava: 2012/02/17 15:35 autor: verca