Maintaining state on Tree Component while updating remote data

Daniel Eneström — Thu, 12 Mar 2009 15:29:01 +0000

I suppose I’m not the only one who’s had problems with maintaining the state of a flex tree component upon updating the data. Recently I encountered the problem again and decided to crack this nut once and for all. As it turned out it was a lot easier than I had anticipated.

The Scenario
In this particular case I had a tree component displaying a hierarchical view of the pages of a web site. Upon making some certain changes, like dragging and dropping pages to reorder them I felt the need to change the order server-side and reload the data, rather than changing the order inside the dataProvider. I just like it that way better.

The Problem
So before I reloaded the data I saved the tree’s open items in a variable called openTreeItems and when I received the new data I tried to reset it by using tree.openItems = openTreeItems.
Nothing happened.

The Research
So I started doing some research and quickly discovered that to make this work the component uses the uid property and on updating the data for the dataProvider Flex reassigns new uid’s to the items in the collection. So, in short, Flex doesn’t recognize the items as the same items after the reload, because of the new uid values.

I encountered this article in the Flex 3 Help pages and started experimenting with creating custom classes that implemented the IUID interface and soon discovered that this was way to complicated for the (actually) quite simple problem I had. The pages in my database had unique ID’s! Why the h*ll couldn’t I use these values as the uid values instead of the built-in values?

The Solution
I suddenly had an idea: what if I simply add the uid property to my data serverside by using the id value I already had? This could be done in many ways but I chose to alter my SQL query like so:
“SELECT pages.id, pages.id uid, … FROM pages…”. This way the value would be passed on into Flex the same way as all the other values.

And, voilà, it worked!
After this tiny alteration of my SQL query Flex recognized my items as the ones saved in the openTreeItems variable and when using tree.invalidateList() before the update and tree.validateNow() after the update there isn’t even a flicker upon updating the data. Sweetness!

Hope this helps anyone that has had the same problem.

MySQL Sample Data Creator

Daniel Eneström — Thu, 23 Oct 2008 14:30:21 +0000

A year or two back I was in a real need of a lot of sample data for testing a web tool I was working on, so I wrapped up a small tool to generate sample data by defining a few parameters and choosing how many rows to add, using Flex 2 (or perhaps 1.5, don’t remember). Well today the need arose again, so I went through my old backup files and found it again. I thought I’d put it up on the web so as maybe someone else could be helped by it. I know it’s not perfect and only spent a few hours creating it, but if you have any suggestions on how to improve it please write a comment and let me know what you think. I would be glad to update it and eventually make it a really useful tool.

Go to the MySQL Sample Data Creator 1.0

Daniel Eneström » MySQL

Maintaining state on Tree Component while updating remote data

MySQL Sample Data Creator