Flex 3.4

  • Креатор на темата Креатор на темата Diferans
  • Време на започнување Време на започнување
D

Diferans

Гостин
Еве тема која фали на форумот за програмирање (и општо на македонскиот веб простор) и која се надевам ќе ги привлече сите заинтересирани за FLEX или FLASH апликации.
Мислам уште со наредниот пост да започнам со конкретни проблеми и нивни решенија во Actionscript или Flex. Туториали има еден куп на Интернет и Flex има стрмна крива на учење, а оваа тема нека служи како дополнување и многу потребно комуницирање и споделување на искуство.
Ме интересира какво е вашето искуство со оваа платформа, јас лично се надевам дека ќе наиде на интерес.
 
Менување на состојбата на компонентите

Истото може да се искористи и за правење на десктоп апликации (Adobe Integrated Runtime_ AIR, а притоа кодот во позадина да е ActionScript 3.0 .

Да, AIR... тоа не смее да се заборави - за креирање на cross-platform десктоп апликации. Ех, колку важна испадна таа независност од платформи, нешто што влезе во тренд со појавата на Java...


- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FLEX States

Flex има можност за работа со состојби - преку тагот <mx:States>. Ова е одличен таг и дозволува да си играте со додавање(преку <mx:AddChild/>) и бришење на елементи (<mx:RemoveChild>) од вашите компоненти. Но не застанува тука. Нуди нешто уште подобро - имено преку состојбите да се менуваат својствата (преку <mx:SetProperty>) и да се задаваат настани.

Еве конкретен пример каде може да ни е добредојдена употребата на состојби. Имаме слики кои сакаме да ги вчитаме во TileList компонента во главнатa апликација. Меѓутоа сакаме пред да се појават истите, за време на нивното вчитување да стои на нивно место друга сличичка со наслов - loading:

FlexTileList.mxml:
- - - - - - - - - - - -
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import PriceItemRenderer;

[Bindable]
private var niza:ArrayCollection = new ArrayCollection([{source:'http://static.guim.co.uk/sys-images/Travel/Pix/pictures/2009/3/20/1237549170688/Pupnatska-beach-Korcula-i-001.jpg'},
{source:'http://ftp.ntu.edu.tw/ftp/pub/MySQL/tech-resources/articles/ClashJimMikael.jpg'},
{source:'http://www.unitedholidays.lk/PackagePics/Olhuveli%2031.jpg'}
]);
]]>
</mx:Script>

<mx:TileList dataProvider="{niza}" width="400" columnCount="2" columnWidth="400" rowHeight="300"
itemRenderer="TileListItemRenderer">
</mx:TileList>
</mx:Application>


- - - - - - - - - - - -
Како што може да се забележи од примерот, TileList Компонентата ги зема податоците од низата niza, а нејзините елементи се од типот TileListItemRenderer:

TileListItemRenderer:
- - - - - - - - - - - -
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
verticalAlign="middle"
horizontalAlign="center"
horizontalScrollPolicy="off"
verticalScrollPolicy="off"
currentState="PreloaderState"
creationComplete="onCreate(event)"
>

<mx:Script>
<![CDATA[
import flash.events.*;

private function onCreate(e:Event):void{
loadedImg.addEventListener(Event.COMPLETE, onLoadedListener);
loadedImg.load(data.source);
}

private function onLoadedListener(e:Event):void{
currentState="LoadedState"
}
]]>
</mx:Script>

<mx:states >
<mx:State name="PreloaderState">
<mx:AddChild relativeTo="{this}">
<mx:Image id="preloadedImg" source="assets\loading.gif" />
</mx:AddChild>
</mx:State>

<mx:State name="LoadedState">
<mx:AddChild relativeTo="{this}" creationPolicy="all">
<mx:Image id="loadedImg" scaleContent="true" />
</mx:AddChild>
</mx:State>
</mx:states>


</mx:VBox>

- - - - - - - - - - - -
Главниот штос е во тоа што можеме преку задавање на состојбата преку код (currentState="LoadedState") на прилично едноставен начин да се 'отарасиме' од претходната состојба која ја покажува сликата за вчитување (PreloaderState). Во нашиот код оваа замена на состојбите се врши откако преку регистрираниот настан ќе добиеме известување дека сликата е вчитана.
Друго важно нешто е тоа што може да се зададе почетната состојба и во главниот контејнер - така кај нас во главниот VBox таг стои currentState="PreloaderState". Ако не ја за дадеме вака почетната состојба, тогаш се смета дека почетна состојба е основната состојба, т.е. онаа врз која не е интервенирано со <mx:State> и currentState својството.

Состојбите отвораат и некои други интересни теми - како онаа за Премини(Transitions) кои може да ги зададе при премин од една во друга состојба, но... за тоа во свое време.
 
[RemoteClass] и deep-copy во Flex

За оние кои некогаш правеле Flash Remoting секако дека наишле на [RemoteClass] тагот којшто стои на почетокот на класата и изгледа вака:
package primer
{
[RemoteClass(alias="nekojJavapaket.Contact")]
public class Contact {
...}
...
}
[RemoteClass] е суштинска за да покаже во која класа на серверот се
мапира нашата класа. AMF форматот преку којшто се изведува целата серијализација/
десеријализација ги праќа објектите како низа од бајти и ја задржува структурата на
целиот објект, но не и референцата за неговата класа. За да може
серверот да го знае тоа, мора да го испочитуваме овој таг.

Замислете си ако повикуваме некој метод на серверот и му праќаме како аргумент некој
објект. AMF си ја врши работата со серијализација/десеријализација и сите членови
на нашиот објект стасуваат до серверот, но не како објект од одредена класа. И ако
потоа на серверот сакаме да манипулираме со овој објект како инстанца од одредена класа
ќе наидеме на проблеми. Со употребата на овој таг се решава прашањето на класата на објектот.
- - - - - - - - - - - - - -

Важноста на овој таг не завршува тука. Со истиот проблем се соочуваме
и ако вршиме копирање на објект со помош на алатката ObjectUtil и
неговиот метод copy(). Овој метод служи за "длабочинско копирање" (deep-copy) на објектите,
односно се копираат заедно со зададениот објект и оние објекти до кои тој носи референци.
Тој во себе содржи едноставен механизам како следниот:
var buferce:ByteArray = new ByteArray();
buferce.writeObject(nekojObjekt);
buferce.position = 0;
var result:Object = buferce.readObject();
return result;
Но ако сакаме да копираме цел објект како што е во следниот случај, ќе имааме проблеми со casting, зашто иако цел објект е ископиран од "збор до збор", фали информација за класата.

var classCopy:someClass = someClass( ObjectUtil.copy( myObject ) );

Таа информација, како што е погоре кажано може да се додаде со
[RemoteClass] тагот, само што сеганема да покажува некаде надвор, туку на целосната патека на дефиницијата на класата.

[RemoteClass(alias="nekojFlexPaket.someClass ")];

------

Voila!
 
Значи вака, си зедов слобода да го променам името на темата.
Како прво, ActionScript е јазик кој се користи и во Flex и во Flesh и воопшто не ја дефинира дотичната технологија. Исто како што некој од програмските јазици кои се корситат кај Silverlight не го дефинира самиот Silverlight.
Моменално активен SDK е 3.4 што значи дека најадекватен назив на темата е Flex 3.4 SDK.

Туку, фино што е обратено внимание на, ако не, и најважниот концепт во Flex т.е. визуелните состојби. Посебно до израз иде ова ако паметно се програмира и ако се изгради целосно дрво на состојби користејќи рачно изработени компоненти. Колку само работа крати и какви можности дава, прекрасно е.

За користењето на AMF сум доста скептичен. Прво, сакам да имам опип на целата комуникација која што би се одвивала и плус сакам да ги знам нејзините перформанси, pits and falls, како и широчината на сообраќајот која би се зафатила. Поради тоа, одбегнувам користење на вакви механизми. Работата со HTTP и со класични веб сервиси во Flex е и повеќе од одлична, користењето на XML или JSON серијализација е исто така овозможено со додатните пакети и ако на сето ова се додаде малку дополнително програмирање за доовозможување на логиката, резултатот е феноменален.

Од она што е поново, веќе има излезено Flex 4 beta и е слободен за симнување на страната на Adobe.

За оние кои сакаат да научат, препорачувам една прекрасна книга со доста опфатени работи и модификувана за брз jump start: The Essential Guide to Flex 3
 
Додека Apple си играат на педери и на кој му е поголем со Adobe, Google фино лепо ја прошири соработка. На страна тоа што Android фуче со новиот Flash, ама сега иде и ова:

http://blogs.adobe.com/air/2010/05/air_android_prerelease.html

Чисто за потсетување, Apple се дрзнаа до тоа ниво што крос-компајлерот го забранија нели (AS3 to Objective-C), а камоли пак да го дозволат мултиплатформскиот AIR да им се приближи. Од друга страна, некој со тотална отвореност и прифатливост на други еве и proprietary технологии почнува партал да прави.
 

Kajgana Shop

Back
На врв Bottom