Flex 4-т гарсан 10 өөрчлөлт

1. Adobe catalyst-тай нэгдсэн орчинг бий болгосон.
Flex 4-г хөгжүүлэгчдийн анхны зорилго нь Adobe catalyst-тай нэгдсэн орчинг бий болгох байсан. Аdobe catalyst-г товч тайлбарлахад: RIA-г код бичихгүйгээр үүсгэх Adobe-н шинэ дизайн гаргах хэрэгсэл юм.
Аpplication хөгжүүлэгч болон дизайнерууд нь хоорондоо ялгаатай ажил хийдэг гэдгийг бид мэднэ. Харин Catalyst гарснаараа хөгжүүлэгч болон дизайнеруудын хоорондын хамтын ажиллагааг бий болгож чадсан.
Уламжлалт аргуудад энэ арга боломжтой байсан харин Catalyst гарснаараа дээд түвшинд хүргэж чадсан. Flex 4 дээр гарсан үндсэн өөрчлөлт нь Flex болон Catalyst-н нэгдсэн орчин юм.


Adobe Catalyst тухай эндээс дэлгэрэнгүйг харна уу.
http://labs.adobe.com/technologies/flashcatalyst/

2. Spark Component-н бүтэц
Flex-н өмнөх хувилбаруудад application-нд хэрэглэгдэх бүх component-уудыг оруулж өгдөг байсан. Жишээ нь: datagrid, buttons, layout containers гэх мэт. Flex 4-т component-уудын үндсэн бүтцийг Spark гэж нэрлэдэг. Flex 3 дээр бол Halo гэдэг нэртэй байсан. Үндсэн өөрчлөлтийн хэсэг болох Catalyst-г дэмжих болсон ба component model-г холбоо хамаарлаар нь түвшингүүдэд хуваасан.
Spark component-уудын бүтэц болох core logic, skinning, layout гэх мэт component-уудын хоорондын хамаарлыг байхгүй болгосон. Spark component-н загвар нь Halo-гийн бүх бүтцийг аван бий болсон. Гол нь Halo-гийн үндсэн класс болох UIComponent-c удамшуулсан ба Flex 4 application-уудад Flex 3 component-дыг ашиглах боломжтой болсон юм.
Түүнчлэн Flex 4 дээр effect-д нь шинэчлэгдсэн. Object-д нь дурын байдлаар effect хйих бололцоотой мөн ашиглахад их амархан болсон. Flex 4-н effect-үүд нь “spark.effects” package-c implement хийх бололцоотой. Энэ нь бол шинээр гарсан component caн юм. Flex 4 дээр effect-үүд нь re-implement хийсэн юм. Flex 3-н effect-үүдийг орхисон.
Илүү дэлгэрэнгүй мэдээллийг доорхи хаягаас аваарай.

http://www.adobe.com/devnet/flex/articles/flex4_effects_pt1.html,
http://graphics-geek.blogspot.com/2009/02/video-gumbo-effects.html
мөн
http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+Component+Architecture

3. MXML 2009
MXML нь XML дээр суурилсан ба аctionscript 3 - р бий болсон. (энэ нь flash player программын хэл юм.) MXML нь программын харагдах байдал болон байрлалыг хийхэд хэрэглэгддэг. IDE дээр одоо бол Catalyst. MXML 2009 дээр хэд хэдэн өөрчлөлт гарсан ба ялгаатай объектуудыг дахин холбоход дэмжлэг үзүүлдэг. (core, skinning, layout) энэ нь шинэ component caн юм. Flex 4-н component-ууд нь өөрийнхөө (spark.components) package-д implement хийсэн. Flex 3 component-уудын байрлалыг орхисон. MXML 2009 нь шинэ namespace-тай болсон.

// Halo and Spark namespace:
<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/halo">

Thus, one can use a Flex 4 Button by doing the following:
<s:Button label="My Flex 4 Button" />
And, the following for a Flex 3 Button:
<mx:Button label="My Flex 3 Button" />

MXML 2009-н өөрчлөлтийн мэдээллийг доорхи хаягаас авна уу.
http://opensource.adobe.com/wiki/display/flexsdk/MXML+2009

4. View state-н сайжруулалт
Flex 2 хувилбар дээр state-н ойлголтыг оруулж өгсөн. State-н талаар өмнө нь бид үзэж байсан. link
Flex 4 хувилбар дээр view state-г шинэчилсэн ба ашиглахад их хялбар болсон байна.
State жишээ:


<m:states>
<m:state name="A"/>
<m:state name="B"/>
<m:state name="C"/>
</m:state>


<s:button label="Click Me" includein="A, B"/>


<s:button label="Button C" excludefrom="C"/>

View state-н өөрчлөлтийн нэмэлт мэдээллийг доорхи хаягаас авна уу.
http://opensource.adobe.com/wiki/display/flexsdk/Enhanced+States+Syntax

5. FXG-г дэмждэг болсон
Flash player нь engine зураж байгаа. Flash player 10 дээрээс FXG танилцуулсан. Мөн Flex дээр. FXG бол графикийн төрөл юм. Дизайнерууд Catalyst болон Illustrator дээр (дизайн хийгээд) түүнийг Flex application хөгжүүлэгчид ямар нэг засвар хийхгүй ашиглах боложмтой.

FXG-н талаар илүү дэлгэрэнгүй мэдээллийг доорхи хаягаас харна уу.
http://opensource.adobe.com/wiki/display/flexsdk/FXG+1.0+Specification

6. Skin-н сайжруулалт
Spark component загвар дээр орсон томоохон өөрчлөлт нь бол skin-г засварлах боломжтой болсон. Үндсэн component-с удамшуулан сomponent-н харагдах байдлыг удирдах боломжтой болсон. Тиймээс core logic-с хамааралгүйгээр component-н харагдах байдлыг засварлах боломжтой болсон юм.

PanelSkin.mxml файлыг харцгаая. Энэ бол Panel савын default skin юм.

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5">

<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.default.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Panel")]
]]>
</fx:Metadata>

<fx:Script>
/* Define the skin elements that should not be colorized.
For panel, border and title backround are skinned, but the content area and title text are not. */
static private const exclusions:Array = ["background", "titleField", "contentGroup"];

/**
* @copy spark.skins.SparkSkin#colorizeExclusions
*/
override public function get colorizeExclusions():Array {return exclusions;}

/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
static private const contentFill:Array = ["bgFill"];

/**
* @inheritDoc
*/
override public function get contentItems():Array {return contentFill};
</fx:Script>

<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>

. . . . .

<s:Rect left="1" right="1" top="31" height="1">
<s:fill>
<s:SolidColor color="0xC0C0C0" />
</s:fill>
</s:Rect>



<s:SimpleText id="titleField" lineBreak="explicit"
left="10" right="4" top="2" height="30"
verticalAlign="middle" fontWeight="bold">
</s:SimpleText>

<s:Group id="contentGroup" left="1" right="1" top="32" bottom="1">
</s:Group>

</s:SparkSkin>


7. Layout загвар шинэчлэгдсэн
Flex 3-т хэрэглэгддэг үндсэн container-д нь Gumbo component сангийн хэсэг биш юм. HBox, VBox-д хэрэггүй болсон. link
Доорхи жишээнд нэг аргаар layout-г тодорхойлж чадаж байна. Энэ жишээ нь button-г группид оруулахад ашиглагдана. Spark class нь энэхүү удирдлагыг хийнэ. Үр дүн нь нэг нээсээ зай аван орших 2 button хэвтээгээр байрлана. Flex 3 хувилбар дээрхи HBox-той адилхан.

<s:Group width="400" height="400">
<s:layout>
<s:HorizontalLayout paddingLeft="5" paddingTop="5" />
</s:layout>

<s:Button label="Button 1" />
<s:Button label="Button 2" />
</s:Group>

Нэмэлт мэдээллийг доорхи хаягаас авна уу.
http://blog.digitalbackcountry.com/2009/05/flex-4-layouts-on-tech-talk-with-ryan-stewart/

8. Flash Builder 4
Flash Builder 4 урьд нь бидний мэдэхээр Flex Builder. Энэ нь Eclipse IDE-р сүүлийн хувилбар нь гарсан. Сүүлийн хувилбар нь хэд хэдэн шинэчлэл хийсэн: conditional debug break points, more refactoring tools, and FlexUnit 4 support. Мөн MXML, ActionScript 3, CSS editors, Visual designer мөн Flex Profiler. (энэ нь зөвхөн professional хувилбар дээр)
Мөн өгөгдлийн сантай холбон ажиллахад их хялбар болсон.

Нэмэлт мэдээллийг доорхи хаягаас авна уу.
http://www.adobe.com/devnet/flex/articles/flex4builder_whatsnew.html

9. Compiler-н ажиллагаа
Flex 3 хувилбар дээр compiler тийм сайн байгаагүй. Тиймээс Adobe-н хөгжүүлэгч Peter Donovan Flex 4 Gumbo-г гарган compiler-г сайжруулсан. Гэхдээ энэ нь бол албан ёсных биш байсан. Peter дахин байгуулахгүйгээр ажиллагааг нь 25%-р өсгөж чадсан байна. Тэр 3-4 удаа сайжруулалт хийсэн байна. Тиймээс 2009 оны сүүлээр Flex 4-р application хийхийг хүсдэг болжээ.

Нэмэлт мэдээллийг доорхи хаягаас авна уу.
http://opensource.adobe.com/wiki/display/flexsdk/Notes+on+Compiler+Performance+Improvements

10. Шинэ text боломж
Flash дээр суурилсан application-д нь текстэй ажиллахад их хүчирхэг. (flex and non flex apps). Flash player 10 дээр Adobe шинэ текст engine танилцуулсан. Энэ нь RIA-ны шаардлагыг хангахуйц болсон. (multi-lingual, print, keyboard short-cuts гэх мэт). Gumbo дээр текстэй ажиллах шинэ классуудыг оруулж өгсөн. (RichText, SimpleText гэх мэт). Энэ нь Flex Framework-д орсон. Түүнчлэн Adobe-хон шинэ Text Layout Framework дээр ажиллаж байгаа бөгөөд ActionScript 3 хөгжүүлэгчидэд өгөх ба ингэснээр Flash player-н text engine хүчирхэг болох юм.
Тext Layout Framework талаар нэмэлт мэдээллийг доорхи хаягаас авна уу.
http://labs.adobe.com/technologies/textlayout/

Flex 4 талаар нэмэлт мэдээллийг доорхи хаягаас авна уу.
http://www.adobe.com/devnet/flex/articles/flex4sdk_whatsnew.html

http://www.infoq.com/articles/top-10-flex4-changes