YOUR FEEDBACK
Jeremy Geelan wrote: In response to inquiries and suggestions from readers this lexicon has recently...


2008 East
DIAMOND SPONSOR:
Data Direct
Frontiers in Data Access: The Coming Wave in Data Services
PLATINUM SPONSORS:
Red Hat
The Opening of Virtualization
Intel
Virtualization – Path to Predictive Enterprise
Green Hills
IT Security in a Hostile World
JBoss / freedom oss
Practical SOA Approach
GOLD SPONSORS:
Software AG
The Art & Science of SOA: How Governance Enables Adoption
PlateSpin
Effective Planning for Virtual Infrastructure Growth
Fujitsu
Automated Business Process Discovery & Virtualization Service
Ceedo
Workspace Virtualization
Click For 2007 West
Event Webcasts

2008 East
PLATINUM SPONSORS:
Appcelerator
Think Fast: Accelerate AJAX Development with Appcelerator
GOLD SPONSORS:
DreamFace Interactive
The Ultimate Framework for Creating Personalized Web 2.0 Mashups
ICEsoft
AJAX and Social Computing for the Enterprise
Kaazing
Enterprise Comet: Real–Time, Real–Time, or Real–Time Web 2.0?
Nexaweb
Now Playing: Desktop Apps in the Browser!
Sun
jMaki as an AJAX Mashup Framework
POWER PANELS:
The Business Value
of RIAs
What Lies Beyond AJAX?
KEYNOTES:
Douglas Crockford
Can We Fix the Web?
Anthony Franco
2008: The Year of the RIA
Click For 2007 Event Webcasts
SYS-CON.TV
MXDJ TOP LINKS YOU MUST CLICK ON !


Tree Component - Horizontal Scrolling
A problem and a solution

I've been playing around with the Tree Component in great depth and have found a few discrepancies which I feel are major pit holes. After a lot of searching, it was also clear that many other developers have come across the same issues. My main gripe: the tree component's support for horizontal scrolling is not very useful. I expected it to work like the ScrollPane's horizontal scrollbar, but it doesn't.

Horizontal Scrolling: The Problem
Now I have a little application that allows you to add and remove nodes to a tree, whooppee. Ok, so what happens if the user adds enough levels to the tree such that they cannot be seen because they run outside of the tree components boundaries? Enter, horizontal scrolling.

The first thing I do is checkout a property which the Tree component inherits from the List component:
Tree.hScrollPolicy

It has two possible string values "on" or "off" - great, so no "auto."

Ok, so hopefully if I just set it to "on" then it should enable the scrollbar when it is needed so that users can scroll them in and out of view. Wrong. What it actually does, is show a disabled scrollbar at the bottom of the component. Luckily, thanks to good documentation I was quickly led to another property of the Tree component that's inherited from the List component:

Tree.maxHPosition

What this property does is specify the number of pixels that the scrollbar will horizontally scroll. In practice setting this value displays an enabled scrollbar that scrolls left and right 'x' amount of pixels even if it isnt needed. So, for the horizontal scrollbar to be useful, you actually need to update the property every time you add, remove or replace an item in the Tree to reflect the width of the widest item - which is a pain to say the least.

What makes it worse is that, when it comes to vertical scrolling, the Tree component automatically updates the size of the vertical scrollbar for you by default, unless you turn the vertical scrollbar off:

tree_mc.vScrollPolicy="off"

So, why not the horizontal scrollbar? I'm not really sure, but I think it has something to do with the component engineers worrying about the speed of the component.

Adding code to find the widest row in the tree wouldn't be hard, however it may become very slow code if you were to have 10,000 rows in the tree and every time you added, removed or replaced an item, that code would have to run again to determine the widest row and then update the scrollbars size. Not a problem if you are only adding one row to the tree, because all the code has to do is check the new row's width and compare it with the current largest row. However, it will be a problem if you are to add say 10,000 rows at once, by changing the dataProvider of a tree, because then you would have to loop through each of those new rows, and looping is very slow, when you have so many iterations. To add to that, you would only want to detect the width of the rows in the tree that are visible, i.e., their parent is open, not just those that are inside the viewable area. Which means you would also have to write code to get a list of all the visible rows and then use that list to determine the widest row. This also means that you would have to execute this code every time a Tree node is opened or closed.

So, I guess what I am saying is that maybe the engineers actually had a valid reason to not include an auto updating horizontal scrollbar. But then I would say, how often does somebody need a Tree component that will display 10,000 rows? Not often, I would imagine, and even if it was high priority to support large datasets, I'm sure there are ways to optimize those routines for speed.

The Solution
My findings were, that there isn't really a proper solution for this, it could get very messy, simply because of the way the Tree is rendered. Let me explain.

An instance of the Tree Component only ever contains "x" amount of row movieclips, where "x" is equal to the Tree.rowCount. So, if I specify Tree.rowCount to be 7 (which is the default), then there will be seven row movieclips created inside the component when it is rendered. This causes problems because ideally we need a visual representation of each row in the Tree to determine its width. In the end I decided to start writing my own Tree component that works how I would expect a Tree component to work.

About Guy Watson
Guy Watson (aka FlashGuru) has been a well-recognized figure in the Flash community for around four years, supporting the community with tutorials and source files, moderating the large Flash community forums, and running his own Flash resource Web site - FlashGuru's MX 101. Guy was one of the two developers that created the award-winning zoom interface for Relevare and now works for Endemol UK, the creative force behind reality television, producing programs such as Big Brother and The Salon. Guy now spends most of his time developing Flash games and applications for high-profile clients such as Channel 5 Television, Ladbrookes, and UK Style.

LATEST FLEX STORIES & POSTS
Enterprises are enthusiastically embracing the shift from traditional client/server computing to SaaS. Inspired by customers who have embraced the Web, developers are using RIA tools to create innovative new on-demand business applications. One important factor in the shift from tradit...
Adobe Flex and Flash are the ideal technology for Rich Internet Applications because you can build those applications with reusable components that are Loosely Coupled. In his session, learn how you can create an On-Demand Authoring Environment for creating Rich Internet Applications b...
Director of Ribbit's Developer Platform, Chuck Freedman, will explore an evolution in web communication. With the growing demand of RIA and voice-over-the-web solutions, developers finally have a full suite of communication APIs to add to Flash. Coding with Ribbit, Freedman will demons...
Rich Internet Applications offer the potential to fundamentally change the user experience and in doing so, yield significant business benefits. The theme of this October's AJAXWorld Conference & Expo 2008 West is 'Beyond AJAX to the RIA Era' and the Call for Papers, which is still ope...
Two of the biggest launches in Rich Internet Application history took place in 2007/2008 when Adobe launched AIR 1.0 in February '08 and Microsoft launched Silverlight (September '07). At the 6th International AJAXWorld RIA Conference & Expo in October SYS-CON Events is delighted to be...
Red Hat CTO Brian Stevens, Citrix CTO Simon Crosby, Egenera CTO Pete Manca, Allen Stewart, Group Manager, Windows Virtualization at Microsoft, and Brian Duckering, Sr. Director of Products and Alliances at Symantec were the top industry executives who joined Jeremy Geelan in the 4th Fl...
SUBSCRIBE TO THE WORLD'S MOST POWERFUL NEWSLETTERS
SUBSCRIBE TO OUR RSS FEEDS & GET YOUR SYS-CON NEWS LIVE!
Click to Add our RSS Feeds to the Service of Your Choice:
Google Reader or Homepage Add to My Yahoo! Subscribe with Bloglines Subscribe in NewsGator Online
myFeedster Add to My AOL Subscribe in Rojo Add 'Hugg' to Newsburst from CNET News.com Kinja Digest View Additional SYS-CON Feeds
Publish Your Article! Please send it to editorial(at)sys-con.com!

Advertise on this site! Contact advertising(at)sys-con.com! 201 802-3021


SYS-CON FEATURED WHITEPAPERS

ADS BY GOOGLE