使用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...)

Flex Menu客製化上下捲動子選單

這是實作Flex Menu加入客製化的上下捲動子選單, 在rollover up and down時捲動子選單.
以下為效果展示Demo:

(Read more...)

ListBase設定CSS後ComboxBox下拉選單字體顏色設定失效問題

在flex開發的專案中有用到css設定顏色的功能, 最近遇到ComboBox設定color下拉選單卻無法起作用的問題.後來發現如果在List組件 or ListBase 設CSS color, 會造成ComboBox設定CSS color失效, 造成的原因可能是ComboBox所顯示的下拉選單是ListBase Class的緣故.

我想這應該算是CSS繼承邏輯上的認知問題, 應該不算是什麼bug吧 :p
在這邊特此記錄一下以免又遇到相同狀況.
以下為示範的code :



<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Style> ListBase { color: #ff0000; } /* List { color: #0fffff; } //*/ ComboBox { /*設定失效*/ color: #0000ff; } </mx:Style> <mx:List width="200" height="200"> <mx:dataProvider> <mx:Array> <mx:Object label="1"/> <mx:Object label="2"/> <mx:Object label="3"/> <mx:Object label="4"/> </mx:Array> </mx:dataProvider> </mx:List> <mx:ComboBox x="220"> <mx:dataProvider> <mx:Array> <mx:Object label="1"/> <mx:Object label="2"/> <mx:Object label="3"/> <mx:Object label="4"/> </mx:Array> </mx:dataProvider> </mx:ComboBox> </mx:Application>
(Read more...)