GridTree component for Flex 2

In flash, flex March 2, 2006 - 9:02 pm

*current feature sets include:

- accept resultset(from php/java), ArrayCollection or Array as the dataProvider, no need to use XML or similar data structure (which is handy if the original data is not in hierarchy format)

-unlimited siblings and rows as long as the datagrid can stand

-addNode and removeNode at current selected item, which will automatically update the dataProvider

-select and de-select node, when all children nodes are selected, parent node will be auto-selected too; also, if any of the children( siblings ) is not selected, parent node will be auto de-selected.

-triangle icon and checkbox can be switched during runtime or by authoring time (with custom skin or graphics)

*todo list

-sort and filter capability (using ArrayCollection inside) when datagrid column header pressed.

-drag and drop between nodes

*special thanks

-to Adobe engineers for making AS3/datagrid/cell renderer so fast that make this possible, you guys/gals rock !

-to Rita, for intensive testing and suggestions.

*note

any suggestions and ideas please feel free to leave a message, thanks.

＊簡介

DataGrid 是一個很常見也非常好用的 UI control, 複雜的資料透過它可以很有效率的呈現、檢索與操弄。

Tree 則是特別適合階層式的資料結構呈現，例如email 信箱，檔案總管等。

如果能將 DataGrid 與 Tree 結合，就可以同時享用兩者的好處，不是很棒嗎？

在.NET與JAVA裏早已有許多成熟的 3rd party vendor 提供這種元件，一般可能會稱為 TreeGrid, TableGrid ，但在flash/flex的世界則很少見到。

去年曾經在國外flex 站看到一個類似的control，但效能不是很好，也只能顯示三層的node，因此那時曾自立自強用AS2寫了一個 GridTree應急，但寫完也結案後才發現AS2的效能真的非常糟糕，尤其再加上那原本就巨大無比的 DataGrid 與惡名昭獐的特慢速 cell renderer，根本無法應付大量且快速的資料運算，所以整個 gridtree的操作就變的很sluggish，最後只好忍痛放棄先丟一邊等有緣再續。

最近有幾天空閒開始為新案子做準備，就想說再拿出來試試看，如果成功的話下個案子或許就可以派上用場，當時主要的想法是：
1、AS3 與新 VM效能好很多，在 10x 的運算速度下當初許多我想做的事現在應該都是可行的。
2、flex 2裏的 DataGrid 已重新寫過，現在速度非常快幾乎不會有lag。
3、cellRenderer 運作方式也有很大改良，bug也比以前少。

經過三天約20小時的 porting 與重新設計改寫，今天差不多完成第一版，雖然 feature list上還有一堆項目沒完成同時bug list 也不太短，但…總之是個可以拿出來見人的東西了。

請大家玩玩如果有意見歡迎留言告訴我。

by admin

22 Comments Add your own

1. james&hellip | March 2nd, 2006 at 6:46 pm

國內真的有粉多大廠在用FLEX嗎?
2. jeremy&hellip | March 2nd, 2006 at 9:03 pm

有沒有大廠是一回事，怎麼用才是重點。

大勢所趨、事在人為囉
3. james&hellip | March 2nd, 2006 at 9:15 pm

SORRY!!無意冒犯你，只是覺得學FLEX資訊中文較少。
中文的範例和SHOWCASE好像粉少看到，還有要進入FLEX的領域，學的東西又不一樣。
好奇，jermy您真的”學”法力無邊阿!!
Qrz一下!!
4. jeremy&hellip | March 2nd, 2006 at 11:49 pm

呃不用道歉啊~完全是誤會一場…

我完全沒有被冒犯的感覺，「大勢所趨、事在人為」八個字是在被問過這問題數百次後歸納出來的最佳解。

至於 showcase 或 killer app或代表性大廠這件事其實我也在很多場合跟很多不同角色的人討論過，我比較傾向相信有好的用途(use case)會比有知名大廠跳進來更實用。

更何況，要找大廠，放眼國際比比皆是，yahoo map, cnn, bank of America都已經採用，SAP更直接把 flex 包進 NetWeaver裏成為production tool 的一環，所以簡單講，台灣有在用SAP的各大企業(台積電、華邦….)有一天都會在某次系統升級後開始用到 flex app，這些都是遲早的事。

至於學習資源，呃，其實我一向認為技術人員應該先學好英文再學技術，畢竟那樣才掌握了技術最根本的源頭…

言歸正傳，這個時間點正逢青黃不接之際，由於flex2剛出來不久，舊的教材沒人想要，新的教材(不論是書或課程)都還在製作中，再加上台灣會有興趣摸這個題材的人實在不多，所以出版社翻譯或撰寫的機率都不大，這是高階市場永遠的宿命，只能期待奇磧出現(或，積極一點，快學好英文就不用求人了…)

但行有餘力我會儘量提供多一點中文資訊，如果真的有心想學的人，歡迎儘量來交流。
5. milan&hellip | March 3rd, 2006 at 1:09 am

hi, this is really nice,
will you release sources or
it will be commercial?
thanks in advance for reply.
br,
milan
6. cmanwalking&hellip | March 3rd, 2006 at 3:52 pm

非常感谢老师的苦心，我有同感：不学好英文，很难跟得上发展。而且在大陆，所谓的中文翻译，好多是破绽百出，误人子弟而已！能有老师这样的心志，吾心感慨呀！
7. jeremy&hellip | March 3rd, 2006 at 6:58 pm

hi Milan,

this component will be released publicly in swc format after the on-going project is over and I have time to refurbish the code.
8. milan&hellip | March 4th, 2006 at 8:02 am

thanks, I’m looking forward to test it.
9. saicn&hellip | March 5th, 2006 at 11:21 am

well done!it’s so nice
10. sleep2death&hellip | March 7th, 2006 at 10:30 am

我偏向ajax和flex的结合，毕竟我觉得在html里应用单纯的文本和图片更加灵活。flex有些笨重，但在真正的富媒体应用中有着无法比拟的高度集成性和简易性。相信你们都看了mm lab 上用flex 2.0 15分钟建立和flickr同步的教学视频，只能说——That’s amazing!
And Let’s Do It!
11. abai&hellip | April 26th, 2006 at 4:21 am

really interesting sample, can i have the source to explore too? thanks a lots.
12. jeremy&hellip | April 26th, 2006 at 8:10 am

not really, this is developed for an on-going project hence it’s under NDA, but I would like to answer any related question to it.
13. Zeng&hellip | August 30th, 2006 at 8:44 am

我不知道要做这样一个TreeGrid组件的原理是什么。是不是和这个例子的原理一样呢http://www.cayambe.com/wordpress/?p=36
还是要重写DataGrid。
14. jeremy&hellip | August 30th, 2006 at 10:54 am

基本的思考方向是：

1、這是一個 List-based component

2、但它有者 Tree API (就是一般的 Tree structure，node 與 node 之間有者 linking 的關係)

3、它唯一特殊之處就是多欄，因此看起來像 DataGrid 而非 List 的單欄架構

我會建議從 Flash 8 裏的 V2 Tree component 下手研究，那是比較快的方法。
15. lightrain&hellip | September 7th, 2006 at 2:43 pm

Hi
有幸能看到你的大作
相當佩服
有機會能和你交流一下嗎
我的msn帳號和email相同
16. jeremy&hellip | September 8th, 2006 at 12:45 am

to lightrain: 歡迎來玩，有問題的話請隨時留言或來信
jx at twmug com 能力所及我會盡力回覆的。
17. hljlgj&hellip | October 2nd, 2006 at 3:13 pm

可以把GridTree的源代码或者思路给我发一份吗，最近有一个项目用到这个，谢谢！
18. Aya&hellip | October 2nd, 2006 at 5:20 pm

Hello,

I want to develop GridTree and I don’t understand Chineese (perhaps it is japan).
Could you help me in english ?

Thanks,
19. jeremy&hellip | October 4th, 2006 at 2:22 am

to everyone who asked about the source or swc for treegrid component:

I have scheduled time later this month to revise the component then release , it will be freely available to everyone.

So please just check back probably at the end of this month, thanks.
20. deng&hellip | October 16th, 2006 at 11:03 pm

someone else privide a solution here, for TreeGrid:
http://www.flex2.org/node/67
21. jeremy&hellip | October 17th, 2006 at 12:40 am

cool, good to know that, thanks for the info.
22. HK&hellip | December 7th, 2006 at 10:21 am

Are you still planning to release the component?

Trackback this post | Subscribe to the comments via RSS Feed

GridTree component for Flex 2

22 Comments Add your own

留言回應