Our minds cannot repel logic of that magnitude!
Posts tagged Flex
Flex 3: Forcing Numeric Sort of XML Data in a Data Grid
Nov 20th
Recently I’ve ran into some problems with AdvancedDataGrids in Flex with data loaded from a hierarchical data provider built from an XML object. When you try to sort on a column with numeric values, the data grid does not sort the values numerically. Instead it sorts them lexicographically. This is because Flex 3 treats all the attributes of an XML node as strings. So if you have an/some attribute(s) that is numeric amongst all of your nodes, Flex treats these as strings when sorting. It is apparently not smart enough to realize that the values are numeric and should be sorted as such.
Unfortunately, Flex doesn’t appear to provide an easy way to say that a certain column contains numeric values. A simple attribute of the AdvancedDataGridColumn element called valueType or something along those lines that you could simply say valueType=”Number” would be incredible, but that functionality does not exist. So what you have to do is write a sortCompareFunction for each of these columns. Well, if you have a bunch of different columns you would usually have to write one sortCompareFunction for each column.
That could get tedious and time consuming. Instead, declare the following function:
private function xmlDataGridNumericSorter(field:String):Function { return function (xml1:Object, xml2:Object):int { var diff:Number = ((Number)(xml1.attribute(field)) - (Number)(xml2.attribute(field))); return (diff > 0) ? 1 : ((diff < 0) ? -1 : 0); } }
What this function does is return a compare function that would compare the values of two XML node’s attribute (field:String). So what you do from there forth is loop over your columns that are numeric and do the following to each column, referenced in the example as col:
col.sortCompareFunction = xmlDataGridNumericSorter(col.dataField);
After that each of the columns you modified in this way will have a sortCompareFunction built to compare two XML nodes’ respective attributes numerically. Keep in mind with the above code that if your column’s dataField is prefixed with an at sign (@), which it very well should since you’re probably referencing an XML attribute, you will need to remove it when you are passing the dataField into the xmlDataGridNumericSorter function by adding .replace(“@”,”") after col.dataField.
I hope this helps people as much as it has helped me in the past few weeks!
A Simple Flex IRC Client
Nov 18th
For those of you who use Adobe Flex and IRC, the simple IRC client written in Flex that I use on The Brew Place is now available on Google Code and is released under the MIT License! Check it out here:
http://code.google.com/p/simpleflexirc/
More Adobe Flex and other projects are expected to make the migration to Google Code within the next few weeks, so keep yourselves posted!
Newest Project – The Code Beautification Utility
Jan 24th
Okay, so most of you are going to laugh at me for how this story goes, but I have to tell it because it speaks worlds about what kind of person I am. So the other day I’m at work and I’m trying to debug some problems with a ColdFusion Flex component. The only problem is that this component is over 600 lines of code long and, due to the immense amount of changes, there was absolutely no formatting of the code at all. It was probably my worst excuse for code to date; tabs were non-existent, code wasn’t indented properly – if any at all. Needless to say, I was very irritated at this and needed to do something about it. So what do I do? I start fixing the code myself, line by line, properly indenting code.
That trek did not last very long. I got to around line 80, realized that it was a futile attempt, scratched it, and went to get my lunch. Now I’m the kind of person who likes to eat at my desk, and continue doing some sort of work. So here’s where I got the idea – I’ll write a utility during my lunch break to format code. Voila! The Code Beautification Utility, or CBU for short, was born.
In a mere 43 minutes (what I consider to be record-breaking time or damn close to) I wrote a simple, yet somewhat effective, code formatter using my weapon of choice – C# of course!. At the current point, it only understands ColdFusion files (cfc and cfm) and HTML files. However, it understands the languages based off of embedded XML files – so it’s language knowledge can be easily expanded. Now for all of you GUI fans out there, I have some bad news for you – it’s a command line program, sorry. However, a GUI can be easily written for it, and I will probably do so. The output from the program also is very simple – if you decide to let it recursively fix all files in a directory, it doesn’t give you any indication as to it’s progress. Not yet, at least. You can pass just a single file to it as well, if you’re only looking to fix one file as I was.
And so, in a nutshell, there is my newest project and utility which I will be slowly expanding upon in the upcoming weeks. Hopefully relatively soon it will be a fully functional and stable utility. Check the project out in my project repository here.
Flex AdvancedDataGrid/DataGrid Optimizer
Nov 11th
Okay, this one is for all the fellow ActionScript/Flex programmers out there. Have you ever dumped data into a DataGrid or an AdvancedDataGrid only to have your column widths be completely off, or even your row heights be off? Don’t you hate it when the contents of your grid’s cells are cut short? Well here is an easy function that resizes your columns and your grid’s rowHeight so that your data is completely displayed (provided your grid is large enough, of course).
This function takes into account both width and height, and allows you to specify padding for the width and height. It analyzes the measured display height and width of each data cell and assigns the largest values for width to each column, and the largest value for height to the DataGrid/AdvancedDataGrid’s row height. Simply pass it the DataGrid/AdvancedDataGrid you want to optimize width and height for, and the padding values, should you want to put in padding. I call this the xGrid Optimizicator™. Hope it comes in useful!
import mx.controls.AdvancedDataGrid; import mx.controls.advancedDataGridClasses.*; import mx.controls.DataGrid; import mx.controls.dataGridClasses.*; private function optimizeDataGrid(dg:Object,widthPadding:uint = 0,heightPadding:uint = 0):void { if ((!dg is AdvancedDataGrid) && (!dg is DataGrid)) return; var col:uint; var tf:TextFormat; var renderer:UITextField; var widths:Array = new Array(dg.columnCount); var height:uint = 0; var dgCol:Object; if (dg.columnCount > 0 && dg.dataProvider != null) { for (col = 0; col < dg.columnCount; ++col) widths[col] = -1; for each (var item:Object in dg.dataProvider) { for (col = 0; col < dg.columnCount; ++col) { if (dg is AdvancedDataGrid) renderer = new AdvancedDataGridItemRenderer(); else renderer = new DataGridItemRenderer(); dg.addChild(renderer); dgCol = dg.columns[col]; renderer.text = dgCol.itemToLabel(item); widths[col] = Math.max(renderer.measuredWidth, widths[col]); height = Math.max(renderer.measuredHeight, height); dg.removeChild(renderer); } } for (col = 0; col < dg.columnCount; ++col) { // Added to take into account header text - thanks modtodd! renderer = new DataGridItemRenderer(); dg.addChild(renderer); renderer.text = dg.columns[col].headerText; widths[col] = Math.max(renderer.measuredWidth,widths[col]); dg.removeChild(renderer); if (widths[col] != -1) dg.columns[col].width = widths[col] + widthPadding; } if (height != 0) dg.rowHeight = height + heightPadding; } }
