Uživatelské nástroje

Nástroje pro tento web


vyuka:flash_builder_ii

Flash Builder II


Práce s jednotlivými projekty:

Exportování projektu:

Pokud chceme náš projekt exportovat (pro možnost přenosu a případné další práce na projektu, teď se nejedná o export aplikace pro uživatele), \\musíme jej označit v Package Exploreru a vybrat menu File:Export Flash Builder project

fb_ii_15.jpg

Objeví se nám formulář exportu, jde nastavíme, který z projektů chceme exportovat a pod jakým názvem.

fb_ii_16.jpg
Dáme „OK“ a export je dokončen.

Uzavření projektu:

Pokud chceme vytvářet nový projekt, je pro nás nejlepší ten předchozí uzavřít - v případě, že to neuděláme,
se při příkazu „run project“ projdou všechny existující projekty, bez ohledu na to, že s nimi momentálně nepracujeme
a mohou se nám objevit „errory“ případně hlášení z těchto projektů. Proto je jednodušší pro lepší přehlednost projekty,
na kterých se nepracuje, uzavřít.

Možnost zavřít projekt, ale také ho úplně smazat, importovat, exportovat, přejmenovat, atd. najdeme v prackage exploreru při kliknutí na samotný objekt:

fb_ii_1.jpg

Další způsob, jak zavřít projekt, je označit ho myší, pak přes vrchní menu:Project:Close Project


fb_ii_2.jpg

Import projektu: Pokud chceme ve Flash Builderu otevřít nějaký existující projekt, musíme jej nejprve dovnitř importovat.
Poklepání na uzavřený objekt takto nefunguje, jen se vám pokusí projet otevřít v programu Flash Catalyst.
Jak importovat projekt do Flash Builderu?
Přes menu:File:Import Flash Builder Project
fb_ii_17.jpg

Otevře se vám toto okno, ve kterém vyberete, který projekt chcete otevřít a kam se vám má vytvořit jeho kopie,
kterou bude možné upravovat. Stačí kliknout na Finish a projekt se vám objeví v Package manageru.

fb_ii_18.jpg

Každý projekt je tvořený aplikacemi, ty se nachází v Název projektu/src/(default package).


Exportování projektu pro web:

Pokud chceme náš projekt umístit na web, potřebujeme k tomu řadu souborů, které se nám v průběhu tvorby projektu ukládají ve složce bin-debug:

fb_ii_3.jpg

Pokud tedy chceme náš soubor umístit na web, buď tam vložíme přímo tyto soubory, nebo je exportujeme do další složky pomocí příkazu Project:Export Release Build:

fb_ii_4.jpg

fb_ii_5.jpg

Co v tomto formuláři určujeme?

  • Project: Z kterého projektu chceme exportovat soubor
  • Application: Kterou mxml aplikaci chceme exportovat pro web
  • View source:
    • Enable view source: Jestli chceme vytvořit zvláštní html soubory s vypsaným kódem aplikace
  • Export:
    • Export to folder: Do jakého adresáře se nám projekt exportuje

Po exportu adresáře bin-debug získáme tyto soubory, které všechny musíme umístit na web, bez kteréhokoliv komponentu nebude náš projekt správně fungovat:

fb_ii_6.jpg

Náš projekt se bude spouštět přes html stránku MujPrvniFBProjekt.html, která bude odkazovat na všechny zbývající komponenty.


Nahrávání projektu na web:

Pro naše účely jsme vytvořili web http://hollarka.host22.com/ kam můžete nahrávat své projekty. Každý ročník má svou složku, stejně jako každý student. Jak ovšem soubory nahrát?

Data potřebná k přístupu jsou tato:


Musíme se dostat na ftp server. Pokud nemáte zkušenosti s nahráváním přes souborové manažery (např. Total commander, Filezilla), můžete využít cestu, kterou nabízí Internet Explorer a správce souborů:

fb_ii_7.jpg

Do navigovací lišty exploreru napište adresu serveru: ftp.hollarka.host22.com

Po objevení přihlašovacího formuláře zadejte:

  • jméno: a4144395
  • heslo: hollarka.host22

dostanete se na tuto stránku:
fb_ii_9.jpg

Nyní jsme sice uvnitř ftp, můžeme si prohlížet jeho obsah, ale nemůžeme jej nijak upravovat. Nejprve se potřebujeme dostat na ftp v programu Průzkumník Windows:

fb_ii_10.jpg

Po objevení přihlašovacího formuláře zadejte:

  • jméno: a4144395
  • heslo: hollarka.host22

Nyní se nacházíme v ftp a máme možnost jej upravovat podobně, jako pracujete s jakýmikoliv jinými soubory v Průzkumníku Windows:

V přístupové složce NIC NEMĚŇTE ANI NEPŘIDÁVEJTE!

fb_ii_11.jpg

Rovnou přejděte do složky public_html

Tady vyberte složku podle svého ročníku a uvnitř ní složku se svým jménem. Soubory, které se budou nacházet mimo složky jednotlivých studentů, budou vymazány!

fb_ii_12.jpg

Pro názornou ukázku nahrávání FB souborů na web, využiji složku VYUKA. Na ftp můžete vytvořit nové složky stejným způsobem jako ve svém počítači. Tyto složky můžete přejmenovat, přetahovat z místa na místo, nejde je ovšem kopírovat a následně vkládat.

fb_ii_13.jpg

Novou složku pojmenuji „FB“. Do ní už stačí jednoduchým přetažením zkopírovat soubory ze složky „export“. (Přetažením na ftp se soubor z původního místa nepřesune a nevymaže, jen se zkopíruje.)

fb_ii_14.jpg

Soubory jsou na ftp nahrané, jejich funkčnost můžeme otestovat v jakémkoliv prohlížeči na této adrese:

http://hollarka.host22.com/VYUKA/FB/MujPrvniFBProjekt.html


Druhý projekt:

Pokud vytváříme v aplikaci objekty, máme pro to dva způsoby tvorby:

  • pomocí mxml
  • pomocí actionscriptu

Ve skutečnosti oba způsoby „využívají“ actionscript, ovšem v případě tvorby pomocí mxml, se převod z mxml do actioncriptu provádí na pozadí aplikace až při jejím spuštění.
Tvorba pomocí mxml nám umožňuje využívat design mód a už v průběhu vytváření aplikace alespoň zhruba vidět, jak se pak aplikace zobrazí při spuštění (run project). To při vytváření čistě pomocí actioncriptu není možné - tam můžeme kontrolovat vzhled jedině až po spuštění aplikace. Současně je kód mxml mnohem jednodušší a není potřeba tak dlouhý zápis jako u actioncriptu. Na následujícím projektu si ukážeme srovnání těchto dvou způsobů:

Vytváření objektů pomocí kódu mxml:

Nový projekt:

Vytvoříme si nový projekt s názvem „MujDruhyProjekt“ - tato úloha napsána na základě tutorialu z výukového webu Lynda. Nebudeme přesně kopírovat postup tutorialu, ale principy budou popsány stejně.

Nejprve nastavíme barvu pozadí - což je atribut aplikace - do kódu aplikace napíšeme pod minimální výšku a šířku atribut backgroudColor a jeho hodnotu:

fb_ii_19.jpg

Pokud chceme do aplikace vkládat komponenty(například Label), máme dva způsoby zapisování:

fb_ii_20.jpg

	<s:Label text="Napište text"> 	</s:Label>
	<s:Label text="Dopište text"/>

Oba způsoby vytvoří Label s atributem „text“. Vzhledem k tomu, že jsme neurčili pozici těchto komponent, počítá se jejich pozice x a y jako nulová - levý horní roh objektů bude umístěn v levém horním rohu aplikace. Pokud se podíváme do Design módu, bude aplikace vypadat takto:

fb_ii_21.jpg

Label „Dopište text“ byl pouze příkladový, nyní ho smažeme. Pod náš první Labem vytvoříme TextInput. Aby jste si zjednodušili co nejvíc práci s kódem, je možné při psaní kódu co nejvíce využívat nápovědu, která se zobrazí po zmáčknutí Ctrl+Space. V tomto případě nám stačí napsat jen <Te, zmáčknout Ctrl+Space a vybrat možnost TextInput a kód se dám doplní:

fb_ii_22.jpg

Dopíšeme v Source módu ještě další komponentu - tlačítko (Button):

fb_ii_23.jpg

Když se nyní podíváme na náš projekt v design módu, můžeme vidět, že díky nenastaveným atributům x a y se všechny objekty shromáždily v levém horním rohu a vzájemně se překývají:

fb_ii_24.jpg

Vidíme, že na vrchu je komponenta, která je v kódu jako poslední (je tedy nejníže). Pozice těchto komponent budeme opravovat pomocí BorderContaineru.

Všechny objekty uvnitř Flash Builderu jsou seskupeny do jednotlivých Containerů - základní Container není vidět, proto se může zdát, že objekty na začátku v žádném nejsou.

Border Container je Container, kterému můžeme nastavit atributy barvy, okraje, ohraničení, odsazení, zarovnání a další. Můžeme v kódu vytvořit komponentu Border Container:

Všechny objekty, které chceme mít uvnitř tohoto kontejneru, musíme mít vložené do jeho těla

  <s:BorderContainer> //otevření kontejneru
	//tělo kontejneru
 
	<s:Label text="Napište text">
	</s:Label>
	<s:TextInput id="mujInput" />
	<s:Button label="Tlačítko" />
 
  </s:BorderContainer> //uzavření kontejneru

V Design módu bude vypadat kontejner takto: (vidíme, že všechny tři objekty jsou uvnitř Border Containeru - díky tomu že zatím nemá žádný z objektů nastavenou pozici, tak jsou všechny stále v levém horním rohu seskládány nad sebou, podle posloupnosti, jak jsou zapsány v kódu - kontejner nejníže)

fb_ii_26.jpg

Úprava pozice objektů

Díky kontejneru můžeme upravovat jejich vzájemnou pozici jednoduše tím, že nastavíme určité vlastnosti chování kontejneru - layout.

K tomu potřebujeme vytvořit Layout komponentu - a současně uvnitř ní komponentu horizontal layout. Tyto dva objekty budou ovládat všechny komponenty uvnitř kontejneru:

<?xml version="1.0" encoding="utf-8"?>
<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" 
			   backgroundColor="#9DB3E1">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:BorderContainer>
		<s:layout>
			<s:HorizontalLayout verticalAlign="middle"   //zarovnání na střed
					    paddingLeft="10"         //odsazení objektů vlevo
				            paddingRight="10" />     //odsazení objektů vpravo
 
		</s:layout>
 
	<s:Label text="Napište text">
	</s:Label>
	<s:TextInput id="mujInput" />
	<s:Button label="Tlačítko" />
 
	</s:BorderContainer>
</s:Application>

V Design módu nyní vypadá náš projekt takto:

fb_ii_27.jpg

Nyní můžeme nastavit atributy pro samotný kontejner (BorderContainer) - výšku, rámeček, barvu rámečku, šířku rámečku v pixelech:

fb_ii_28.jpg

výsledek v Design módu:

fb_ii_29.jpg

BorderConaineru můžeme nastavit určitou pozici (stejně jako ostatní objekty bere nedefinované x a y jako nulové). A to dvěma způsoby: V source módu napsáním atributů x a y do řádku s vlastnostmi Border Containeru:

<s:BorderContainer height="50" borderStyle="inset" borderColor="#CCCCCC" borderWeight="6" x="50" y="50">

Nebo v Design módu - manuálně myší jednoduchým uchopením a tažením kontejneru. Nebo nastavením pozice X a Y v panelu Properties:

fb_ii_30.jpg

Náš projekt bude nyní vypadat takto v Design módu:

fb_ii_31.jpg

Vytváření objektů pomocí actioncriptu:

Objekty v tomto případě nemůžeme nijak upravovat v design módu a to proto, že bez načtení aplikace se ani nezobrazí. Actionscript nám umožňuje objekty vygenerovat až na volání funkce „creationComplete=„applitacion1_creationCompleteHandler(event)““, to znamená ve chvíli, kdy se nám celá aplikace vygeneruje a načte, se začnou propočítávat objekty napsané pomocí actioncriptu.

Tady je kód pro zapsání stejných objektů, jaké jsme vytvářeli za pomoci mxml:

fb_ii_32.jpg

Kód s popisky:

<?xml version="1.0" encoding="utf-8"?> //určení typu xml a kódování
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" //atributy aplikace a umístění využitých komponent
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
  backgroundColor="#9DB3E1" //barva pozadí
  creationComplete="applitacion1_creationCompleteHandler(event)"> //inicializace funkce, která se spustí po načtení projektu!
  <fx:Script>
 
	  <![CDATA[
		  import mx.events.FlexEvent; //importování události typu FlexEvent z knihovny (její umístění)
 
		  import spark.components.Label; //importování spark komponenty Label z knihovny (její umístění)
		  import spark.components.TextInput;  //importování spark komponenty TextInput z knihovny (její umístění)
		  import spark.components.Button;  //importování spark komponenty Button z knihovny (její umístění)
 
 
	  protected function applitacion1_creationCompleteHandler(event:FlexEvent):void {  //definice funkce, která se spustí po načtení projektu
	  var myLabel:Label = new Label(); //generování proměnné myLabel typu Label (tzn, komponenty se vyvolávají jako proměnné)
	  myLabel.text = "Napište text"; //text v Labelu - definice atributu text
	  container.contentGroup.addElement(myLabel); //zařazení této komponenty do kontejneru contentGroup
	  var mujInput:TextInput = new TextInput(); //generování proměnné mujInput typu TextInput
	  mujInput.id = "mujInput"; //id Inputu - definice atributu id
	  container.contentGroup.addElement(mujInput);  //zařazení této komponenty do kontejneru contentGroup
	  var myButton:Button = new Button(); //generování proměnné myButton typu new Button
	  myButton.label = "Tlačítko"; //popiska tlačítka - definice atributu label
	  container.contentGroup.addElement(myButton);  //zařazení této komponenty do kontejneru contentGroup
 
	  }
	  ]]> 
  </fx:Script>
  <fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
  </fx:Declarations>
 
  <s:BorderContainer id="container"  //Border Container máme již stanovený na scéně pomocí mxml, jeho atributy jsou stejné jako v předchozím příkladu
    height="50" borderStyle="inset"
    borderColor="#CCCCCC" borderWeight="6" x="50" y="50">
    <s:layout>
      <s:HorizontalLayout verticalAlign="middle"
        paddingLeft="10" paddingRight="10"/>
    </s:layout>
  </s:BorderContainer>
 
</s:Application>

V Design módu tedy můžeme vidět jen prázdný kontejner (ostatní komponenty se zobrazí až při spuštění aplikace a po vykonání funkce „applitacion1_creationCompleteHandler(event)“

fb_ii_33.jpg

Pro zobrazení objektů musíme aplikaci spustit (run aplication) a v prohlížeči již uvidíme:

fb_ii_34.jpg

vyuka/flash_builder_ii.txt · Poslední úprava: 2011/12/14 12:16 autor: verca