December 31, 2004
Sorting by Date in the DataGrid
The DataGrid's built-in sorting capabilities do not extend to Date objects. The DataGrid can easily sort Strings and Numbers, but it converts Dates to Strings before sorting them - which is not typically what you want to happen.
This article shows you one way to get the best performance sorting Date objects.
Behind the Scenes
The DataGrid's sort algorithm is a good one. But it works best with numbers, something which can be compared in byte-code in a few instructions. Comparisons between Strings for example, require looking at the length of the Strings, then comparing them character by character until a difference is found.
Dates are represented internally as the number of milliseconds since January 1, 1970. Unfortunately, the DataGrid has no way to extract that information from a Date object, so the Date's default String representation is used.
A way to circumvent this is to represent the Date information as a Number in the DataGrid's dataProvider. Beginning with the server-side representation of the data, the information is transferred to the Flex application (using any of the remote data services) as a Number, stored in the DataGrid as a Number, sorted as a Number, and finally displayed as a Date in your choice of format.
Supply and Demand
If your application is supplying the DataGrid from a remote object, send the data not as a formatted String (e.g., "May 17, 2004" or "17-05-04"), but as pseudo-date number: 20040517. This is simply the 4-digit year, followed by the 2-digit month, followed by the 2-digit day. This number is easily handled by the DataGrid's sort algorithm.
If you send Dates as pre-formatted Strings with the intention of sorting them as Numbers, you have to convert those Strings into Numbers in ActionScript. Parsing Strings is a slow process, even if you do it when the data arrives in the Flex application. Not only is it slow, you also violate the separation of model from presentation when the data is already in presentation form.
Note: you can send the internal Date representation only if you are using Java on the server-side (using java.util.Date.getTime). This is because only Java stores Dates using the same representation as ActionScript. If you fail to send the correct value, the Dates will appear incorrectly in your Flex application.
With the coded value stored in the DataGrid's dataProvider, the sort can take place. But the value stored is not what you want someone to see. You need a cell renderer to format the number as a date.
Presentation
The cell renderer can be written in ActionScript or MXML. In the code sample, open PseudoDateRenderer.as to see how the pseudo-date is converted into a Date for display.
Define a DataGridColumn for your DataGrid to associate the cell renderer with the column.
<mx:DataGridColumn columnName="dateasnumber" headerText="Date"
cellRenderer="PseudoDateRenderer" />
You may think that the cell renderer is too complex or that because of the calculations, will take away from any performance gained by the numeric sort. Not true. The cell renderer is applied only to those cells visible. If you have 2000 records in your dataProvider, but are only showing a single column of Dates with only 30 rows visible, then you will have only 30 instances of the cell renderer. The DataGrid has a very clever algorithm for recycling the cell renderer instances as the user scrolls through the data. By setting up a reusable Date (theDate in the cell renderer) and using the setFullYear function, you simply change the date being displayed.
Conclusion
You can make the DataGrid as efficient as possible when it comes to handing Dates if you do a little work on the back end and format the display on the front end. This keeps the presentation of the data separate from the data representation and gives a huge performance boost.
Posted by pent at 04:08 PM | Comments (3) | TrackBack
December 23, 2004
Gauge Component
I recently had the privilege of attending a customer-training session given by one of our Flex architects. The session covered component creation in Flex. I volunteered a component I wrote a while back as a test case to have our expert help us write better components.
This gauge component is one outcome of that session (another is an article I wrote which will appear on the Macromedia site early next year). Feel free to download the component. It includes some skin files, too. I placed comments throughout to help guide you when building your own components.
Posted by pent at 03:25 PM | Comments (7) | TrackBack
Cell Renderers
Cell Renderers in Flex is always a hot topic. I was recently involved with several cell renderer issues. The download contains several interesting examples.
Note: The solutions to some of these were a team effort.
CheckBoxCellRenderer is your typical cell renderer which replaces boolean values with a check box.
DateChooserCellRenderer pops up a DateChooser when the user clicks the cell or tabs into it. This seems simple enough, but the problem was that you had to click the date twice to select it. The fix was to pop up the DateChooser in response to a mouseDown event and not in the setValue method.
ComboBoxCellRenderer places a ComboBox into a cell. That isn't too hard, but the difference with this one is that each row item can have its own unique values. Plus this item shows you how you can include validation and get those nifty red borders and pop-up error messages!
MultilineListRenderer is a renderer for a List - but within a ComboBox. That is, when the ComboBox (actually, MultlineComboBox) is clicked, the dropdown doesn't have 1 line, but 2. You can modify this to have as many lines as you need.
Tip: Your cell renderer gets its data from a field in each row item. If the there is no matching field when your cell renderer updates the item, you may get random information displayed in the cell. For example, if the CheckCellRenderer is put onto a column with a columnName="pickme" and the dataProvider has no "pickme" fields, the check boxes will be selected at random!
Posted by pent at 11:49 AM | Comments (3) | TrackBack
December 22, 2004
Ticker
Here is a simple ticker, or marque, that moves text across the screen. The key is the doLater method which just advances the text by a specific amount.
The sample test file shows how you can change the text on the fly and adjust its speed, too.
Posted by pent at 05:05 PM | Comments (1) | TrackBack
December 16, 2004
Accessing SWFs from Flex and Vice-Versa
I've seen a number of questions regarding the interaction between a SWF and Flex. The idea is that you create some Flash content, perhaps a navigation bar, and you want to have events that happen within the SWF processed by the Flex app in which the SWF is embedded. Or you have the reverse: controls in the Flex app modify the behavior of an embedded SWF.
Both types of interactions are possible. You will be able to cook up more elaborate and elegant solutions, but this should get you started.
The sample file contains a Flash document and Flex application. The Flash document contains a spinning ball and a few functions. The Flex application controls the color of the ball and can pause or resume its spin. The ball in the Flash document is covered by an invisible button which when click, invokes a method in the Flex application.
The key here is the Flex Loader's content property. Once the SWF has loaded and the Loader fires its "complete" event, the content property is the SWF.
You can pass a reference to the Flex application (or any component) to the SWF in the complete event handler:
<mx:Loader source="Ball.swf" complete="event.target.content.flexApp=this" />
Within the SWF, you can now reference "flexApp" and invoke the "onBallClick" function.
Once the SWF has been loaded into the Flex application, you can invoke methods or set values in the SWF from the Flex application. For example, when you press the Pause (Flex) button, the SWF's pause() method is invoked:
loader.content.pause();
Use the sample files as a guide to building your own hybrid applications.
Tip: Try not to use any of the Halo (or V2) components in your Flash document. The Flex components and Flex components while similar are not 100% compatable. Besides, why would you use buttons, labels, and datagrids in Flash when you have Flex?!?
Posted by pent at 03:30 PM | Comments (9) | TrackBack
December 09, 2004
Initialized
I've finally gone and done it - I now work for a company that makes products that I use and love. I've been a big fan of Macromedia for a number of years and now I'm on 'the inside'.
My official title is "Senior Flex Product Support Engineer". I've been using Flex since 1.0 was introduced. I'll explain my passion for Flex later, but suffice to say that Flex and I were made for each other.
Before joining Macromedia I was a customer. I downloaded free trials, I read the online documentation, I looked at the samples, etc. I tried to write my own programs, use the tools, and so forth. I did the things our customers do.
I am going to try very hard not to lose the customer's perspective and bring that point of view inside Macromedia. I believe this will benefit everyone.
In my new role I will help you write better applications and get the most out of our products. There is a wealth of knowledge and talent here that can be tapped.
Macromedia's success is your success and I've never worked for a company more aware of that and more focused on making its customers successful. The team I am now part of is clearly committed to this.
I will use this weblog to post solutions to problems that I common to many customers. Check often to see if there's something you can use. And please write in if you find a solution.
If you are a new Macromedia user or customer, take some time to look at all of the products. You will find that many work together or compliment each other.
Also take the time to look at the user forums - there's one for each product. Here you'll find help from other Macromedia customers and staff.
Posted by pent at 11:22 AM