Posts tagged Halo

Flex FAQ #10: Flex 4 有幾多個 namespace

1
2 years ago
by Vicker in

知道點解要用 Spark 之後當然要實戰下啦
首先寫返個 Hello Spark application 先
以下o係 main application o既 source code
* 太簡單喇~ 無 build application 放上黎~ 抱歉

<?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">

	<s:Label text="Hello Spark!" />

</s:Application>

唔太複雜吧~ 不過都幾多野唔同~ 首先當然係 namespace 啦

Flex Builder 3 (FB3) 寫 Flex 3 app 時o既 namespace 真係簡單到不得了

xmlns:mx="http://www.adobe.com/2006/mxml"

一個 mx 走天涯~
一個已經包括左:
- language (Array, uint, Number, Object etc…) 同埋
- Halo components (Button, VBox, DataGrid etc…)

FB4 寫 Flex 3 namespace 基本上無變架~ 大家唔駛咁擔心

xmlns:mx="http://www.adobe.com/2006/mxml"

但係 FB4 寫 Flex 4 就複雜喇~
首先 Flex 4 namespace 唔再係一個 namespace 玩晒~
而係好 clear cut 咁分開左 language 同 component namespaces

Flex 4 o既 language namespace 係

xmlns:fx="http://ns.adobe.com/mxml/2009"

至於 Flex 4 o既 component namespace 分為 Halo 同 Spark

Flex 4 Halo namespace

xmlns:mx="library://ns.adobe.com/flex/mx"

!!!! 大家要留意 FB4 Beta 2 o既 Halo namespace 係 library://ns.adobe.com/flex/halo !!!!
!!!! 不過最新o既 internal build 用左 library://ns.adobe.com/flex/mx 暫時未知原因係乜 !!!!

Flex 4 Spark namespace

xmlns:s="library://ns.adobe.com/flex/spark"

所以如果大家用 FB4 寫 Flex 4 o既時候需要同時用 Halo 同 Spark 就要一次過用晒 fx, s 同 mx 3 個 namespaces
當然啦~ 將來當 Spark 有齊 Halo d component o既時候~ 應該可以一個 s namespace 攪掂晒~!

呢個 Hello Spark app 除左 namespace declaration 之外
比較特別o既就係 Spark Application 同 Spark Label
好明顯佢地係用黎 replace Halo Application 同 Halo Label ga la
至於有乜 improvement 就容後再講喇~

Flex FAQ #9: 點解要 Spark

2
2 years ago
by Vicker in , ,

認識 Spark 之前先要講下 Halo

Halo 係 Flex 3 o既主要骨格
由最 base o既 application (mx:Application)
去到 layout properties (horizontalAlign, padding)
再去到 UI control (mx:Button, mx:TextInput) 都係 Halo o既範圍
而 Spark 就係 Flex 4 o既主要骨格

好地地用緊 Halo 點解又要 Spark 呢?

用得 Flex 比較深入o既 developer 或者 designer… 又或者 dezeloper 都會發現 Halo 有幾個比較大o既問題

1) Skinning Skinning and Skinning

Halo control 要做 skin 係非常痛苦架
一係就只係用 CSS 做 d 好似無做過咁o既 styling
一係就用 Flash 畫好晒 d 野~ 之後 export SWF~ Flex embed SWF~ 再 CSS map class…
要改野咩? 開返個 Flash source 由頭做過啦

而且 Halo control o既 internal object 係 fixed 架
舉個例~ 一個 Halo button 裡面有一個 icon 同一個 text field~ 唔可以多亦唔可以少
如果想做一個有兩個 icon o既 button 就只可以由一個 Box container 開始砌~ 之後再自己加返 custom events…

2) 雞肋 States

Flex o既 States 本身係一樣好方便o既 function
只要 define 一個 base state~ 然後 further define 其他 state 多左或者少左o既野~ 就可以好易做到 transition
但係只要 state o既數量稍為多 d~ 又或者 state 同 state 之間變化比較多~ 就會開始 lost control…
究竟 B 呢個 state 有 d 乜呢… 睇返 state A 先~ 哦~ 原來乜都無…

3) Heavy

其實 Flex Application 本身係 SWF file 已經唔係太大 file size
不過如果你寫既 application 比較 large scale~ 又或者對於 memory consumption 好緊張~
就會好想幫 Flex 3 大瘦身~

Flex 3 為左將所有野簡單化~ 有時會將一 d 你未必需要用o既 item 都放左入去
舉個例~ Box container by default 係有 scroll bar 架~ 只係平時唔用o既時候無 display
但係無 display 代唔代表佢完全唔用 resources 呢?
大家只要睇下 super class Container 就會發現一大堆比 scroll 用o既 variables… 都幾多下…

幾個 Box 可能影響唔大
但係如果你用 data grid 再加埋 custom item renderer 仲要用 Box 做 layout… 咁就大件事喇…
你就會問… 明明我個 Box 唔駛 scroll… 點解要屈我 d resources

上面提到只係比較大o既問題
當然仲有好多其他野啦~ 例如 CSS 唔 standard 呀~ Animate color 會傻左呀~ 等等等等…
而 Spark o既開發就係為左解決上面呢堆問題~

呢度就暫時粗略講一講
之後我會詳細咁講每一 part~

1) Spark o既 control 大致上可以細分為 HostComponent 同 SkinClass
HostComponent 主要負責 event / state declaration 同埋 contain data
SkinClass 就負責控制所有 graphic elements, state content 同 data binding

好處在於 HostComponent 只係負責最 base o既 feature
而 SkinClass 就可以比你點玩都得~ 就算你想個 Button 係星形再加兩個 icon 都無問題

2) States o既 format 完全唔同晒~
State 裡面o既野唔再o係 state o既層面處理~ 而係o係 control o既層面處理
配合埋 Flash Builder o既 State editor 要知道 current state 有乜簡直易如反掌

3) Scroll bar 再唔o係 default component 會有o既野
要用就要自己 declare~ 唔用就當然慳好多 resources 啦~

仲有好多其他 changes~ 包括 improved CSS class~ custom layout~ PopUpAnchor~ TLF~
可以咁講… 要學o既野多過 Flex 2 上 Flex 3 好多好多倍~ 哈哈

Go to Top