使用actionscript binding function

今天有同事問到如何使用純as動態綁定函數於是順便研究一下相關作法.
以下範例主要是透過BindingUtils.bindProperty並傳入自己創建的Chain object來完成動態綁定函數及額外的參數更新.

<?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" creationComplete="init()"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <fx:Script> <![CDATA[ import flash.utils.getTimer; import flash.utils.setInterval; import mx.binding.utils.BindingUtils; import mx.events.FlexEvent; protected function init():void { initBinding(lbl2, "this is lbl2"); setInterval(function():void { dispatchEvent(new Event("sayHello")); }, 1000) } protected function initBinding(obj:Object, value:String):void { var chain:Object = { name: "sayHello", value: value }; chain.getter = function(host:Object):String { return host.sayHello(chain.value); } BindingUtils.bindProperty(obj, "text", this, chain); } [Bindable(event = "sayHello")] public function sayHello(value:String):String { return "sayHello:" + value + ", time:" + getTimer(); } ]]> </fx:Script> <s:VGroup paddingTop="5" paddingLeft="5"> <s:Label id="lbl" text="{sayHello('this is lbl')}"/> <s:Label id="lbl2" text=""/> </s:VGroup> </s:Application>

(Read more...)

從MX Datagrd 升級至 Spark Datagrid 的簡易筆記心得

從MX Datagrd 升級至 Spark Datagrid 的簡易筆記心得

最近因為Flex 4.5版relase了spark版本的datagrid, 剛好手頭上案子正在進行改版的動作,於是趁這次機會順便升級成spark datagrid, 因為flex4引入了skin的機制, 在UI切換的使用上更潮靈活.不過畢竟兩種組件設計架構的差異性很大, 在升級中時常會遇到一些轉換上的問題.
以下為遇到與之前mx datagird不同行為的簡單筆記與解法 :




1 . 沒有ListEvent.ITEM_CLICK事件
解法 : 可以監聽datagrid.grid.addEventListener(GridEvent.GRID_CLICK, gridClickHandler);

2. 沒有ListEvent.ITEM_DOUBLE_CLICK事件
解法 : 可以實作itemrenderer並在itemrenderer dispatch doublie click event.

3. 沒有DataGridEvent.HEADER_RELEASE事件
解法 : 可以監聽datagrid.columnHeaderGroup.addEventListener(GridEvent.GRID_CLICK, headerReleaseHandler);


*4. 重新設定新的datagrid column IList collection時, 這在mx datagrid會保持原本的selectedItem/selectedIndex,
但spark datafrid會在下一個影格將selectedItem/selectedIndex重新設為null.
解法 :
- 不要重新設定新的colleciton, 保持一份collcetion以removeall/addItem function來做更新.
- 如果還是要設定新的collection,可以使用UIComponent.callLater重新更新datagrid selectedIndex迴避這個問題
ex :
var tIndex:uint = datagrid.selectedIndex; this.callLater(function():void { datagrid.selectedIndex = tIndex; }); 5. 沒有useRollOver="false" style可以設定.
解法 :
如果不要rollover效果可以新建一個spark.skins.spark.DataGridSkin把裡面的hoverIndicator移除掉.

先筆記到這裡, 有時間在更新其他升級相關遇到的問題...
以上這些解法也許有更好的解決方法, 也歡迎大家留言告知, 大感謝!
(Read more...)

Flex4 速記

把一些常用的觀念先記下來, 日後有需要的再補上。

- Layout與組件脫離降低耦合度, 能更加靈活運用Layout.
Differences between Flex 3 and Flex 4 beta

- Group / Scroller
Introduction to viewports and scrolling in Flex 4 beta

- State狀態屬性切換更為直覺並增加易讀性
Differences between Flex 3 and Flex 4 beta

- effects : Animate/Transitions
 Effects in Adobe Flex 4 beta

- CSS
    *宣告namespace
    *多樣式設置
    *針對id設置
    *針對狀態樣式設置
How to use the new CSS syntax in Flex 4

- 雙向資料繫結 two-way data binding
How to use two-way data binding in Flex 4


(Read more...)