Posts Tagged ‘flex’

提昇Flex圖表效能

Friday, July 25th, 2008

提昇Flex圖表元件 (Charting Components) 的效能,當你遇到圖表元件的繪製速度慢到想殺人的時候,建議你先從資料開始檢查,再看看圖表元件本身。

  • 如果可以,移除掉圖表效果,像是陰影
    ChartBase.seriesFilters=[]

  • 圖表的data-provider別餵太複雜的物件,尤其是很肥大的XML應該盡量避免,真的必要,可以作adapter物件來繪製之。
  • 當需要畫出很多條不同的資料線時,不要來一筆資料餵一次series (chartBase.series),能的話,讀完了再一次餵,因為一旦執行
    ChartBase.series = your_new_series_list

    會逼迫ChartBase重繪*所有的*的視覺元件,包含標籤、矩陣線、圖表線、軸線…等,很恐怖唷!尤其是你的資料又長到個不行時,老闆不開心、自己也難過。

  • 作線性圖( Line Chart )時,別輕易地變更線的樣式,尤其”form”, “miter”, “joint”這幾個,你可以看看官方的原始碼,對於這些屬性有非常不同的繪製演算法。用預設值吧,我相信Flex開發團隊已經先最佳化過了。
  • Gutter (gutter top, left, right, bottom) 能的話先給預設值,可以省下運算時間
  • 小心使用軸線的單位(unit),針對你的資料多寡,給予適當的單位值,如果你的資料有一千年,把單位切成秒數就不是個明智的作法。

以下是本文的英文版:

Enhance Flex Charting Components Performance

  • Clear the beautiful shadows or any other filters.
    ChartBase.seriesFilters=[]
  • Optimize your data objects to be rendered. Do not pass a bunch of huge, complex objects to the data-provider.
  • While building a line chart, do NOT change the lineStroke attributes such as “miter”, “joint” if not necessary. Flex Data-Visualization components has optimized the drawing performance to default renderers. To change these attributes may bring up a terrible risk.
  • You can remove the grid lines.
  • Set explicit gutter values while defining a chart base object.
  • If you have to render multiple series in a single chart, try to finish loading all data-providers before you assign series list to chart. Calling this method:
    ChartBase.series = your_list

    will force the chart to remove *ALL* chart elements( label, grid, axis, series items…) and re-create them. It is really time consuming to refresh the chart if re-assign the series objects again and again.

  • Set a lower quality of your flash movie( not available for AIR)
  • Mind your axis units. Be very careful while showing up a time-based data set. It is very possible to be the key to skew up your chart performance if the unit is set too small. Given an appropriate unit is highly recommended.

Cool Down Button

Wednesday, May 7th, 2008

Blizzard公司出品的Warcraft III (魔獸爭霸III)遊戲介面中, 有些按鈕是有Cool-Down 的限制,也就是說,當你按下某個按鈕(通常是施展法術或是喝藥水),無法立刻按該按鈕,它會處於disabled的狀態,必須經過若干秒數(端看該法術設定)。

簡單地做了這個按鈕元件,沒什麼特別的,真的,以下是演示:
Flex Cool-Down Button Demo
( 進入Demo後按右鍵可以下載原始碼(view source) )

使用方法:

<controls:CoolDownButton
width="64"
height="64"
coolDownSeconds="10"
coolDownEnabled="true" 
cornerRadius="0"
/>

keynote: 數位典藏

Tuesday, April 22nd, 2008

RIA 在數位典藏的實作應用:

投影片:
RIA Demo 投影片

原始檔:
RIA Demo 範例原始檔

取得HierarchicalCollectoinView的第一筆物件

Tuesday, April 15th, 2008

這個標題看起來很蠢,不過,HierarchicalCollectionView 提供的API本身並無 getItem() , getItemAt() 之類的方法,因此如何取得資料結構中第一筆?

方法一:
用ViewCursor, 新建立的cursor就是指向第一筆

myHCV.createCursor().current;

方法二: (由不願具名的魔人提供的高級作法)

myHCV.mx_internal::treeData.getItemAt(0);

treeData 其實是HCV真正在操作的資料集合,它是一個ICollectionView,因此可以引用getItem()…等方法。

拖拉物件從ListBase 到 AdvancedListBase

Monday, April 7th, 2008

把傳統的ListBase item 拖拉到 AdvancedListBase 基本上是不會成功的,因為在DragSource::dataFormat,一個是”items”, 一個是”treeDataGridItems” ,我們可在DragDrop發生之前,用DragSource::addData()改變DragEvent::dragSource 內資料定義即可, 這樣ADG就會Accept Drop了(會顯示Drop Feedback)

function onDragEnter(event:DragEvent):void{
event.dragSource.addData( myObject , "treeDataGridItems" );
}

發現一些好用的方法:
可以得到目前拖放物件在List中的索引位置!

AdvancedListBase::calculateDropIndex ( event:DragEvent ) : int

藉由索引值取得對應的itemRenderer instance

AdvancedListBase::indexToItemRenderer( index :int ):IListItemRenderer

結合兩者:

function onDragDrop(event:DragEvent){
var ir:IListItemRenderer = adg.indexToItemRenderer( adg.calculateDropIndex (event ) );
var myData:Object = ir.data;
var hv:HierarchicalCollectionView = adg.dataProvider as HierarchicalCollectionView;
//取得父節點,插入新物件
var parentNode : Object = hv.getParentItem( myData );
var myNewData:Object = event.dragSource.dataForFormat("treeDataGridItems"); //取出新物件
hv.addChildAt( parentNode, myData , 0 ); //放入

adg.validateNow();
}

使ADG吃完資料且繪製完後自動展開

Tuesday, April 1st, 2008

答案出乎意料的簡單,特寫此文以表敬意, 請用:

AdvancedDataGrid::displayItemsExpanded =  true;

官方文件說明:
If true, expand the navigation tree to show all items. If a new branch is added, it will be shown expanded.
The default value is false.

奧妙往往都在手冊之中呢。

簡介Flex新套件: OLAP

Monday, March 3rd, 2008

kaleido scope

什麼是OLAP?

OLAP 是 Online Analytical Processing,線上資料分析的縮寫,對於知識管理、資料挖礦來說這是基本的工具,可以確定世界上資料只會越來越多,因此資料分析工具是必要的。

OLAP的結構

把OLAP想像成玩萬花筒,筒裡頭裝滿了彩色的資料碎片,當旋轉時會產生不同組合結果。這個萬花筒叫做OLAP Cube;資料碎片是Flat Data;筒內的鏡面叫OLAP Dimension;旋轉萬花筒的手如同OLAP Query;最後的彩色繽紛當然是OLAP Result了。

(more…)