You are currently browsing the category archive for the ‘Flex’ category.
Most XML data can be directly assigned to simple objects like strings and numbers, but when you have a more complex data type like a Date, you need to do a little parsing first.
Consider the following XML:
I’ve covered how to get the data in the ‘status’ node before, but to get the data in the ‘date’ attribute and assign it to a Date object, you’d do the following in your code:
Note that this will only work if the dateString is in an appropriate format, like “YYYY-MM-DD” or “YYYY-MM-DD HH:MM:SS”.
A while back I wrote a post on how to access XML using e4x, but I only covered how to get data directly from nodes. Well a few days ago I found myself needing to access a couple attributes from an XML response, so I thought I’d revisit the subject.
Consider the following XML:
To get the data in the ‘status’ node and ‘interesting’ attribute, you’d do the following in your code:
Simple enough, right?
Now let’s add a namespace declaration to the XML:
To get at this data, you first need to retrieve the default namespace. Then you can use a similar scheme to get the node and attribute data:
Pro Tip: Let’s say you just want to check if an XML attribute has a particular value. You can accomplish that with this little bit of e4x magic:
I ran into an issue a few days ago where the first label in my TabNavigator was being truncated when displayed within a popup window. It was baffling; the issue would only occur in a popup window. Further, if you hovered over the tab the full label would display, but the tab’s width wouldn’t change.
Needless to say, it was a trifle annoying. I finally found a solution here, which confirmed that it was a measuring issue in Flex when dealing with popups. While the solution at the aforementioned link worked, I noticed that it took a second for the change to register after the tabs were displayed. This means you would actually see the first label truncated for a moment before the tabs were remeasured.
Figuring I could do one better, I came up with my own custom component:
Nothing fancy here. Just like the other solution, I created a custom TabNavigator and call invalidateDisplayList() on the first tab in a creationComplete event handler.
However in my solution I also immediately call validateNow() which eliminates the truncated label before the tabs are displayed. I also added some error handling (for good measure) to make sure the first tab exists.
This is a bit of code for a custom header renderer that’ll allow you to toggle ascending and descending sorts on a data grid.
Here’s the code for the renderer:
When you click on a column header, not only will it toggle the appropriate sort, it will update the sort icon, and dispatch an event so the other columns know to hide their sort icons.
Finally, here’s how to set up your data grid to use the custom renderer:
It may seem counterintuitive to set
sortableColumns to false on the data grid, but you don’t want Flex messing things up by also trying to sort the columns. Let the custom renderer do all the heavy lifting here.
You’ll also need to specify the sort icons (up and down arrows) and set the column that you’d like to be sorted by default.
When making an asynchronous data call to populate a data grid, it’s nice to be able to display something while the data is being retrieved.
The following sample code will display a simple “Loading…” message:
Here’s the LoadingScreen component:
All you need to do is set the loadingData property to true when you make the data call, and set it back to false after the data has been retrieved. In this example, the column headers are always displayed, so the transition is subtle.
For a smoother transition, you can also add a Fade effect to the LoadingScreen component.