Uživatelské nástroje

Nástroje pro tento web


vyuka:flash_builder_i

Flash Builder I

(Dříve program Flex)


Jak představuje Flash Builder Adobe?

Software Adobe® Flash® Builder™ 4.5 je určen vývojářům, kteří potřebují rychle vyvíjet bohaté 
internetové aplikace (RIA) a obsah pro různé platformy, včetně mobilních s iOS, Androidem a RIM 
s využitím open source platformy Flex. Obsahuje podporu inteligentního kódování, odlaďování a 
vizuálního navrhování, i výkonné nástroje pro testování urychlující vývoj a zvyšující výkon 
výsledných aplikací.


Zjednodušeně:

Flash builder je výkonný program na vytváření webových stránek a aplikaci. Kombinuje html (včetně javascriptu) a swf. Flash builder užívá speciální XML kód.
Flash Builder zkompiluje několik .swf (a zbytek interaktivního obsahu projektu), vše se zkompiluje do jednoho souboru - jednodušší nahrávání na server.
Z Flashbuilderu je možné vytvořit aplikaci (např. na cd) s pomocí adobe AIR. Výsledkem je desktopová aplikace, která je možná instalovat offline.
Ve Flash Builderu je možné vytvářet také aplikace pro Iphone a Ipad. (Tyto zařízení nemají možnost přehrávat flash.)
Pro prohlížení webových stránek vytvořených ve Flash Builderu je potřeba mít instalovaný flash player.



Další články a materiály, které vám pomohou si udělat lepší představu o tom, jak Flash Builder pracuje a jak naopak pracovat s ním:



První seznámení

Při prvním spuštění programu Flash Builder se nám spustí tato Start page (uvítací obrazovka), nabízející řadu návodů pro práci s tímto programem:

Obrázek: Vstupní strana programu Flash Builder

fb_1.jpg

Package Explorer: Všimněte si, že rámec je v tento moment prázdný - zde se ukládá seznam projektů (ne jen aktuálně otevřených), na kterých uživatel
pracuje. Odstranit projekt ze seznamu se dá jen pravým kliknutím a výběrem možnosti „Close project“. Od té chvíle nebude v seznamu projektů uvedený.

Ukládání projektů: Pokud uživatel neurčí jinak, projekty se automaticky ukládají do složky: C:\Users\JmenoUzivatele\Adobe Flash Builder 4.5
Tato složka je „workspace“ Flesh Builderu - zde se ukládají veškerá data, která potřebuje pro své fungování
(krom projektů vytvořených uživatelem se zde nachází i další “.metadata“ a „cascaded“)

Vytvoření nového projektu:

Nový projekt lze založit těmito způsoby:

  • Přes Menu File/New/Flex Project
  • Stisknutím klávesové zkratky Alt+Shift+N
  • Přes ikonu „wizard“ (ikona rámečku s hvězdičkou přímo pod menu „File“) - buď výběrem rozšířených možností (černý trojuhelníček) a následně „Flex Project“

nebo napsáním „Flex Project“ do vyhledávacího pole

Obrázek: Vytvoření nového projektu přes Menu File/New/Flex Project

fb_2.jpg

Specifikace nového projektu:


U nového projektu určujeme tyto atributy:

  • Project Name (název) - nesmí obsahovat mezery!
  • Project location (umístění projektu) - pokud jej nenastavíme manuálně a využijeme „use default location“, projekt se uloží do složky C:\Users\JmenoUzivatele\Adobe Flash Builder 4.5
  • Application type (druh aplikace) - Web (běží v Adobe Flash Playeru, je určená pro spouštění na webu) nebo Deskop (běží přes Adobe AIR, je určená pro spuštění přímo v operačním systému po instalaci (např. z cd))
  • Flex SDK version (nastavení verze Flexe - doporučujeme nechat defaultní nastavení, default SDK je nejnovější verze )

Nastavením Server Settings a Build Paths se nebudeme pro začátek zabývat. Ve Flash Builderu 4 je možné server Settings dodat projektu i po jeho dokončení.

Obrázek: Vytváření nového projektu

fb_3.jpg

Nový projekt

Poté, co se nám nový projekt vytvoří (building) a nahraje (loading), se otevře tato obrazovka:

Obrázek: Nový projekt v Source módu

fb_4.jpg

Nacházíme se v tvz. Source módu. Flash Builder má dva režimy(módy), díky kterým můžeme pracovat s projektem na různých úrovních - programátorské (Source mód) a grafické (Design mód).

Na předchozím obrázku si můžete prohlédnout, jak vypadá pracovní plocha v Source módu: (odshora dolu podle popisků)

  • Run Project - je nástroj, který nám umožní projekt „rozběhnout“. Tzn. otestovat náš projekt v prohlížeči (v tom, který má uživatel nastavený jako primární). Díky tomu můžeme zjistit, jak by náš projekt vypadal a fungoval z pohledu uživatele. Současně tímto způsobem můžeme otestovat, jestli někde v projektu nejsou určité chyby (pak se projekt nespustí a v okně „Problems“ se vypíší chyby a jejich umístění
  • Source a Design mód - přepínač mezi oběma módy
  • Package explorer - Vidíme, že nyní je už náš projekt zobrazen v okně Package exploreru.
  • Kód projektu - zde je ve formátu kódu vypsán celý obsah našeho projektu.
  • Outline - toto okno nám vypisuje, jaké části(komponenty) kódu náš projekt momentálně obsahuje


Pokud klikneme na tlačítko „Design“ (přepínač Source a Design mód), přepneme se do tzv. Design módu - grafického znázornění našeho projektu.


Obrázek: Nový projekt v Design módu

fb_5.jpg

Teď se nacházíme v Design módu - zde můžeme upravovat jednotlivé grafické komponenty, stejně jako celkový layout aplikace. Rozdíly oproti Source módu: (odshora dolu podle popisků)

  • States (stavy) - Stavy nám umožňují přepínat se v projektu mezi jednotlivými „scénami“. Každý stav může mít jiné pozadí, jiné komponenty. Stavy by se daly nejlépe přirovnat ke Scénám ve Flashi.
  • Scéna projektu - zde je grafické zobrazení projektu. Na scéně jsou umístěny jednotlivé objekty. Scéna sama má editovatelné atributy (výška, šířka, barva).
  • Properties (vlastnosti) - V Properties se nastavují jednotlivé vlastnosti objektů (jméno, posluchače funkcí, pozice)
  • Components (komponenty) - tato záložka funguje jako knihovna komponent - potřebujeme-li některou komponentu, jednoduše ji odsud přetáhneme na scénu.

Jednotlivými okny a jejich funkcemi se budeme zaobírat ještě později. Důležité prozatím je, aby jste si zapamatovali jejich rozmístění.

Tvorba projektu

Projekt se ve Flash Builderu vytváří za pomoci obou módů - Source i Designu.
Nedá se říci, že by jeden z nich byl důležitější než druhý, oba módy se vzájemně doplňují. Některé akce jdou udělat jen v jednom z nich,
jiné jdou vykonat sice v obou, ale v jednom z nich je daná akce o mnoho jednodušší a rychlejší.

Využívejte proto plusů každého módu a přepínejte mezi nimi!

Pro začátek si určíme pár jednoduchých akcí, které

můžete udělat v Source módu:

  • přidávat objektům atributy
  • ! psát funkce !
  • měnit rychle názvy funkcí

můžete udělat v Design módu:

  • přidávat komponenty přetažením z knihovny Components
  • upravovat grafiku scény i komponent
  • přidávat objektům posluchače
Úprava aplikace (základní scény)

Co je vlastně aplikace? Zjednodušeně ji můžeme popsat jako velký kontejner, který nese všechny naše objekty.
Aplikace je vlastně scéna, prostor, uvnitř kterého se vše odehrává. V Design módu je scéna zobrazena jako velký (na začátku bílý) obdélník uprostřed.
Uvnitř scény (aplikace) se nachází každý objekt, každá funkce a každý kód, který vytvoříme. Obsah aplikace nikdy nemůže přesáhnout její hranice.
Cokoliv vytvoříme, zůstává uvnitř. (Samozřejmě můžeme pracovat s externími daty, nebo exportovat určitá data, ale to už je jiná problematika.)

V Source módu je hierarchie aplikace ještě názornější:

Obrázek: Hierarchie aplikace v Source módu

fb_7.jpg

Nejprve si nastavíme scénu, aby vyhovovala našim potřebám.

Můžeme ji upravovat několika způsoby - opět buď v Source nebo Design módu.

V Source módu můžeme jednoduše přepsat její stávající atributy zde:
(v rámci čtyř řádků, kde je definována, jak už bylo řečeno)

Obrázek: Úprava atributů aplikace v Source módu

fb_6.jpg

Jako jednotka jsou brány pixely - tzn. pokud bychom chtěli, aby šířka naší aplikace byla 700px, jednoduše přepíšeme width=„700“

Další tip: Ve Flash Builderu není možné psát poznámky do textu stejným způsobem, jako tomu bylo u Flashe - dvě lomítka tu prostě jako poznámky nefungují,
ani /* lomítka a hvězdičky */ , tím si naděláte v kódu jen chyby.
Poznámky se ve Flash Builderu píší takto:
<!– Toto je správně napsaná poznámka –>
Pokud se nechcete stále vypisovat s těmito znaky, stačí napsat text, který chcete mít jako poznámku, označit jej myší a zmáčknout klávesovou zkratku Ctrl+Shift+C
<!– A voila, text se vám takto zapoznámkuje –>

Úprava v Design módu:

Scénu můžeme upravit manuálně myší (uchopit ji za koncové strany a roztáhnout, nebo zmenšit).

Také ji můžeme upravit skrz panely Properties a Appearance. (Neprve je potřeba Scénu(Aplikaci) označit - buď na ni klepnout přímo myší, nebo kliknout v panelu „Outline“ na řádek „Application“

Obrázek: Panely Properties a Appearance

fb_8.jpg

fb_9.jpg





Můžeme upravit tyto atributy:

  • V panelu Properties:
    • Page title - název stránky, který se zobrazí v internetovém prohlížeči
    • Background: - pozadí
      • Color - Barva
      • Aplha - Průhlednost
    • Preloader - barva (než se nám načte samotná aplikace)
    • Size and Position - velikost a pozice
      • minimální šířka
      • minimální výška
      • výška(pevná)
      • šířku(pevná)
    • Layout
  • V panelu Appearance:
    • Current theme
    • Global application style
      • Text
      • Color
      • Content Background

Vytváření objektů


V Design módu jednoduše vytáhneme objekty z knihovny Components. Je tu několik desítek druhů objektů, pro začátek začneme s textovým polem - Label\\

Obrázek: Objekt Label v knihovně Components

fb_10.jpg

Vezmeme kurzorem komponent Label a přetáhneme ho na pracovní plochu - panel Properties se nám přizpůsobil vlastnostem Labelu:
fb_11.jpg

Ukázali jsme si nový Textový rámec (Label) v Design módu. V Source módu vypadá jeho zápis takto:
fb_12.jpg

Náš nový textový rámec zatím neměl specifikované jiné než základní vlastnosti - x a y mají defaultní počáteční velikost, text označuje v rámci vypsaný text.

Vrátíme se zpět do Design módu a upravíme jeho text, barvu a font:

fb_13.jpg
Změnili jsme tyto položky:

  • ID: text_1 - náš objekt se nyní může oslovovat při programování a dokážeme jej upravovat pomocí funkcí
  • Text: Ahoj! - tento text se nám v textovém rámci vypíše
  • Styl textu - máme nastavený font Georgia, velikost 32, bold a italiku, odstavec se zarovnává horizontálně i vertikálně na střed
  • Pozadí textového rámce má barvu „c7d2ff“
  • Změnili jsme jeho velikost - width - 120px, height - 60px
  • Je změněna i jeho pozice - X -537, Y - 122 (pozice se počítá vždy od levého horního rohu aplikace)



Zkusíme podobným způsobem vytvořit druhý textový rámec s těmito vlastnostmi:

  • ID: text_2
  • Text: Lidi!
  • Styl textu - Georgia, 24, bold, underline, horizontálně střed, vertikálně střed, barva „fffafa“
  • Pozadí textového rámce má barvu „bc3232“
  • Změnili jsme jeho velikost - width - 150px, height - 100px
  • Je změněna i jeho pozice - X - 350, Y - 200 (pozice se počítá vždy od levého horního rohu aplikace)


Další tip:

Objekty ve Flash Builderu nejde v Design módu kopírovat za pomocí altu jako ve Flashi - když jej zkopírujeme s ctrl+c a vložíme ctrl+v, nový objekt má stejné vlastnosti, jako první - včetně pozice! Proto leží přímo přes původní objekt!

V Design módu naše objekty vypadají takto:

fb_14.jpg

V Source módu:

fb_15.jpg


Tlačítka (Button)

Vytvoříme si na scéně tlačítka (Buttony) a objekty pro vkládání textu (TextInput) - ty nám umožňují při spuštěné aplikaci do sebe vepsat text, se kterým je dále možno pracovat. My tento text nahrajeme do našich textových rámců (Labelů)

Vytvoření tlačítek: Opět je přetáhneme na scénu z knihovny Components

fb_16.jpg

Vytvoření TextIputu:

Všechny nové objekty si pojmenujeme: Tlačítka

  • Button_1
  • Button_2

TextInput

  • TextI_1
  • TextI_2

TextInputu přidáme do kolonky Text (zobrazený text v rámci) „Sem napište text“
Buttonům přidáme do kolonky Label (zobrazený text tlačítka) „Vypiš“

Vytvoření funkce tlačítek:

Označíme tlačítko a v jeho properties přidáme posluchače On click: Generate Event Handler:
(Takto si jednoduše vytvoříme posluchače událostí myši - a nemusíme jej vypisovat, na rozdíl od vytváření posluchačů ve Flashi)

fb_18.jpg

Flash Builder nás automaticky přepne do Source módu. Zde vidíme, že nám vygeneroval nejen posluchače, ale automaticky i funkci, kterou posluchač spouští:

fb_19.jpg
Automaticky se nám v Aplikaci vytvořila i část Script - zde se budou vypisovat všechny funkce.
Stejným způsobem vytvoříme posluchače kliknutí i pro druhý Button:


fb_20.jpg

Psaní funkcí:

Nyní nám zbývá napsat funkce jednotlivým tlačítkům - stačí vypsat co má funkce vykonávat, do jejího těla:

		protected function Button_1_clickHandler(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				text_1.text=TextI_1.text // text Labelu se rovná textu v Inputu
 
			}
 
			protected function Button_2_clickHandler(event:MouseEvent):void //stejná funkce pro druhé tlačítko a druhý label
			{
				// TODO Auto-generated method stub
				text_2.text=TextI_2.text
 
			}

Další tip: CTRL+SPACE - nabízí možnosti při psaní kódu, může nám zjednodušit práci

Spuštění aplikace:

Zbývá nám náš projekt vyzkoušet - aplikace se spustí přes tlačítko run ve vrchní části programu:


Pak už stačí odkliknout, že se má projekt uložit a spustit, poté co se nám aplikace nahraje, otevře se v defaultním prohlížeči:

fb_22.jpg
Na závěr stačí otestovat:
fb_23.jpg

vyuka/flash_builder_i.txt · Poslední úprava: 2011/12/07 16:54 autor: verca