Chronicles in flex land (the tree)

Filed under: Flash, Flex — Wrote by Campbell on Saturday, September 30th, 2006 @ 4:45 pm

Cool so we have a flex project. Making a UI in flex for a .net application. Just what I love, the flash player and .net. I had to make a wrapper framework which allowed the flex UI to be developed separately to a .Net API. so external interface commands are mapped to a dynamically loaded API dll. was very happy with how this all worked out and it allowed me the room to set standard Exception handleing from .net to be passed to flex for presentation.Wicked

so I am wandering along in flex land all is well ….la la la.. then I find I have to add functionality to the existing tree control. The dark clouds loom in and I begin panicing.

Ok so its not quite that bad but there are a few things to be learnt from where I have gone. If you are going to be developing a flex app that you know will make heavy use of the tree view or will require some extrafunctionailty there are a couple of things that will help you right off the bat.

  1. Try your very hardest to own or at least have rights to modify the data source.
  2. Make sure you client knows that as soon as they step away from the current functionality there is more time involved in developing thus features.

We had a problem on this project in that the data source (xml) was owned by the .net app. Next we will look at XSLT transforms for the flash input but for now we were stuck. So if your plugging into someone elses server for the xml….consider pulling that xml from their server to yours then to flash. This will allow you to tweak it server side first. 

There are also a few classes to extend when you want to play with the tree, and at first it seems a little overwhelming, but press on as it soon becomes clear how things are working, just be sure there are no surprises for your client.

The tree … the one control that by itself can show multidimensional data hierarchiesies (spelling?). It serves the purpose well and is understood by most users. In flex here is how it works (feel free to correct me in the comments).

You place the tree component on the stage which creates an instance of the tree class. mx.control.Tree;
Now its a good idea to check out how the flexteam built the tree and see whats going on under the hood. The source is included ( on my computer: "C:\Program Files\Adobe\Flex Builder 2\Flex SDK 2\frameworks\source\mx\controls\Tree.as" ).  Notice that the class extends List. Well the tree view is really just lots of lists (uh basically) a list for each level. So alot of the functionality is brought from the List class. 

So you set your dataprovider and your away laughing. Opps no hang on I dont want some of those node to display. Well you could try a filter function but you would soon learn that it isnt implemented on the tree control. Bugger. This is where you need to step into creating your own DefaultDataDescriptor. The DefaultDataDescriptor class provides a default implementation for accessing and manipulating data for use in controls such as Tree and Menu. Cool. so now you can override methods in your own class that extends the DefaultDataDescriptor and doo all sorts of funky things with the xml before it reaches the tree.  Dont forget to set it in your tree class though, this.dataDescriptor = new MySuperSpecialDataDescriptor(); You might want to override the getChildren method to show only certain things etc. One cool thing would be to use namespaces in your xml for lanuage support.

I wrote a static TreeFilter class that the DataDescriptor basically asked to filter the xml before sending it onto the tree for display.

Hmm ok so our tree is showing everything right but you want to change the way your nodes look based on the information in the xml?

Well enter the TreeItemRenderer which extends UIComponent. You can create your own that overrides methods in the base class and assign that to the tree as before. What the TreeItemRender does is for each node on the tree, it renders it. Well duh. So buy over-ridding the updateDisplayList method you could make the text bold if that xml node had an attribute bold="true", 

var nodeXML:XML = XML(TreeListData(super.listData).item);
if (nodeXML.attribute("bold") == true){
      setStyle("fontWeight", 'bold');
}

You could really draw anything in here, even other components like buttons etc using the

var indent:Number = TreeListData(super.listData).indent ;

indent to place the buttons at the right place. 

Also if you want to evaluate the nodes on dragging a node around there are a few things youll need to do but ill leave that for another post. 

So if your going to start extending the trees functionality its a good idea to look through the base mx classes first and get your head around whats going on and the variables available to you, then set out on you own tree adventure in flex land. If you get stuck give us a yell and ill see if I can help you out.

Also if you look through the  FlexTeams blog youll see that they are releasing all sorts of goodie components over the next wee while, and seeing the tree is such an important control that is the only one that displays many levels I think its safe to say we will see a few updates around this control.

MySql and SVN drivers for Flex (AS3) saaaweeeet!

Filed under: Flash, Flex — Wrote by Campbell on Saturday, September 30th, 2006 @ 3:43 pm

Man things are really heating up in AS3 land. People have had enough time to gain some experience and all sorts of little gems are popping up all over the place.

One example is on Ted Patricks site where he mentions that Beau Amber at Metaliq.com showed him a project using flash.net to browse through SVN data, and if that werent enough Ted is working on a MySQL Driver for flash.  Will be interesting to see how efficent that one is.

And not to be out done Josh Tynjala  has some super secret project going on in this area.

Alot of these examples are personal projects but I really think these are the sorts of things that drive the flash player forward, and maybe adobe should set something up to help these sorts of people out….just a thought. 

VOIP + Flash player = DamnCool++;

Filed under: Flash, Flex — Wrote by Campbell on Tuesday, September 26th, 2006 @ 1:32 am

Hahaha ok, so you get my feelings on this topic from my post title. I caught a link to an interesting article Via BeeDigital. And in that article a few interesting things were of note.

"Sources say, Dr. Henry Sinnreich, generally known as “The Godfather” of SIP (the Session Initiation Protocol) is helping the team" the team being the Dev team for what we used to know as Breeze. They also go on to say "The charter for the start-up is to enhance “Flash” and add support for various voice-over-IP protocols including SIP" in the article which I cant be sure how true that is.

We looked at parsing SIP headers a while back in flash and really the SIP protocol is very similar to HTTP headers, so it wasnt going to be to hard of a job. But imagine VOIP in your flash app. Like I said in the title DamnCool++;

I just thought this should be on everyones radar but time for one last quote from the article that might warm the cockles of your heart. "Sources say that touching Flash Player is like messing with God inside Adobe". Good on Adobe for not bloating the code base. Maybe its time to start breaking off functionality to be downloaded only when needed. Or would that approach break what a great reputation flash has built over the years. Im sure the Adobe Gods are fielding all suggestions, while guarding the pearly white gates at the front of flashes SVN repository.

Flex tree view.

Filed under: Flex — Wrote by Campbell on Thursday, September 21st, 2006 @ 12:48 am

We have a project on at the moment that uses Flex as a UI for .net. Very cool and Ill out line that a bit later. But what I have been spending some time with is the ItemRenderer and the Tree component. One of the major points for this customer was that a) it cant look like flex (so much so I have to build a custom right click menu and manager) and two there had to be alot of functionality built into the tree view as this was the basis for the whole project.

While the ItemRenderer is great, I cant help feel like im hacking the framework a bit when I have to override major class methods. I will post some examples next week after I have some more time under my belt with this control as there is a serious lack of these out there (and the documentation is a bit limited). Basically when you place a tree in your app, you can define an ItemRenderer for that tree. This is a class that extends the ItemRenderer interface and can override some methods where you add in your extra "stuff", say handeling the data change and changing the icon, adding custom drag details which is my major pain at the moment.

I am however loving working with the flex framework. It feels like I acheive so much so quickly. It almost takes more time to tweak the flex look out of the UI than develope the thing. Check out Scott Barnes post

Flex 2 Skinning needs more work.

for more about that.  

 

Next step on the whole Social networking thing…new Web idea

Filed under: General — Wrote by Campbell on Wednesday, September 20th, 2006 @ 11:43 pm

We were talking at work today while viewing myspace sites, and it occured to me how many degrees of separation there are between people. That is how many friends of friends are you away from knowing David Hasselhof?

What a quirky idea…. Make a site that you enter your myspace name and someone you want to know how many degrees of separation between you and them. The site starts spidering from both ends until it finds a match or reaches some predefined limit. Or even do it for websites….degrees of separation based on page links on websites.

You would probably need some Uberflash caching smarts and an Uber computer network to do it. Google if your listening Im willing to do a project if I can have access to your super computer. ;o) 

Slap on some advertising and you might even have a money spinner, (in which case a mac book pro swinging this way wouldnt go a miss). 

So if you have some time or have nothing better to do, go for it. Would love to see it. 

© Flex developer, Campbell Anderson, from New Zealand – xsive blog -