Анатомия на флекс : част 1
Тъй.
За хората, които за първи път пипат флекс : File --> new --> new flex project --> Наименувате го и finish

Сега ще ви запозная с основните неща на Adobe Flex builder 3.0.
За изчерпателна и всякава информация може да посетите Adobe.

Нека да започваме ;)
Флекс използва 2 езика : MXML и Action script 3.0, като в частност MXML-a при компилиране се превръща в Action script.


1.MXML
Това си е чист XML.Който си има на представа от XML, MXML-a няма да му се стори нищо особено.Главното му предназначение е да прави UI(user interface).Чрез MXML интерфейса се построява по-лесно от колкото да се пише изцяло на action script.

В кода по-долу ще видите как е построен MXML-a.

2.Action script 3.0
--> еми това е доста обширна тема.Може да се пише изцяло на него, може да се ползва само за логиката на апликацията.Като цяло AS3.0 може много неща :) Всеки ползва това, което му е удобно.

КОДА :


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Panel width="100%" height="100%" title="Flex rulz" layout="absolute">
<!-- tova e mazohisti4niq na4in kato normalen XML da se opisvat vsi4ki propertita na obekta -->
<mx:Image>
<mx:width>100</mx:width>
<mx:height>100</mx:height>
<mx:scaleContent>true</mx:scaleContent>
<mx:source>http://www.flyingvbarandgrill.com/images/tequila.jpg</mx:source>
</mx:Image>

<!-- a tova e po-4istiqt na4in -->
<mx:Image id="img2" width="300" height="300" scaleContent="true" x="591"/>
<mx:HBox x="235" y="462">
<mx:TextInput id="input" width="220"/>
<mx:Button label="load" click="load(event)" />
<mx:ProgressBar minimum="0" maximum="100"
labelPlacement="bottom"
direction="right" source="img2" />
</mx:HBox>
</mx:Panel>
<mx:Script>
<![CDATA[
private function load(event:MouseEvent):void {
// syvsem prosta logika --> za source na 2rata kartina prisvoqvame vuvedeniq url
//estestveno moje da se napravi proverka dali e URL ili da se sloji error event,
//ako zadadeniq link ne e snimka, no tova po-natatyk.
img2.source = input.text;
}
>>
</mx:Script>
</mx:Application>



Обяснение на кода :
Всяка апликация започва с деклариране на XML, след което следва Application tag.Това го считайте като роот-а.Цялата апликация влиза в него.
Application tag-a има property layout/vertical,horizontal,absolute/, като според него, по такъв начин се подреждат елементите.
След него следва контейнера Panel, на който съм задал дължина и широчина 100% от възможната и съм му задал абсолютен лейоут.Т.е елементите ще имат x и y координати.
След това в 2 примера съм показал как да опишете Image компонент.
След него следва <mx:HBox> , което означава horizontal box.Досещате се сами какво прави ;) ? Това също е контейнер и съдържа child елементи, за това има отварящ и затварящ таг.
Компонентите, които не са контейнери ( примера с Image) може да се затварят със самозатварящия таг " /> ".
Text input : Инпут за текст. Винаги задавайте id на всякакви input компоненти, за да може да се обръщате към тях по-късно в Action script-a

Има бутон, който праща click event, за да зададе соурс-а за img2 и да се зареди.
Сложил съм и progress bar, за да покажа и нещо по-различно от най-обикновенните компоненти.
Пропертитата на прогрес бара са следните :
минимум и максимум - от къде да почне и до колко да стигне.
labelPlacement - само говори, къде да е label-a на прогрес бара
direction -- на дясно да върви
source -- за кой компонент да дава прогреса на зареждането.


И скрипт блока , в който се пише логиката, която е съвсем проста и съм я описал с коментари в кода.
Натискате зеления бутон за компилиране и чакате да зареди!
Във флекс има code hinting - всичко си излиза като помощен тоолтип и можеш да избираш.Много е полезно !

Ако искате да видите пълното описание на някой компонент, отивате на него в кода, натискате някъде на името му и натискате shift + f2, което ще отвори livedocs във флекс.


За флекс има пълна документация, която може да намерите на сайта на Adobe.
И естествено демото, за да видите за какво става на въпрос :
http://www.thesexykitchen.com/images/tequila.jpg
Въведете този линк, за да може да видите и някакво зареждане в прогрес бара (това е голяма снимка, но ще излезе като малка заради зададените пропорции на имг2)

ДЕМО

Ако имате въпроси питайте.
Очаквайте още доста уроци свързани с флекс.






/ Трябва да сте регистриран за да напишете коментар /