Анатомия на флекс : част 1

Автор: Rado

Тъй.
За хората, които за първи път пипат флекс : 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 компонент.
След него следва , което означава 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)

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