AdvancedDataGrid: turns out its not so advanced
Here's one that got me for almost an entire day. A simple task such as loading data from my SQLite table and binding it to an AdvancedDataGrid component should not take me all day to figure out, but it did....
The ONE tutorial that deals with CF+Air+SQLite online/offline support has a simple two table database with a one-to-one mapping between the two (customer + address). To use this data in Flex+Air you create a class for each table mapping properties to table columns, which you also do on the server-side.
When you load, say the "customer" object the mappings in the Customer.as class has a one-to-one join setup to the Address.as class. So what you get back when loading the customer object is a nested array like: customer.fields, customer.address.fields.
This is really cool stuff. Now in the example they pump that array into a custom DataGridColumn component. When doing my proof of concept I thought, well I'll just use the standard AdvancedDataGridColumn instead of the custom extended one used in the example. I wasn't sure where that custom component came from, and for learning purposes I wanted to make my app different to see this online/offline working in different components.
What a mistake that was! I guess to a seasoned Flex developer this would have been simple to pick out, but not knowing the toolset very well I didn't realize that the DataGridColumn didn't support nested arrays (thus the DataGridColumnNested usage in the ONE example). This took me almost all day to figure out. My code looked like:
<mx:AdvancedDataGrid id="adg1"
allowMultipleSelection="true"
designViewDataType="flat"
width="100%" height="100%"
dropShadowVisible="false"
y="0" x="0">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="ID" dataField="ID"/>
<mx:AdvancedDataGridColumn headerText="Company Name" dataField="name"/>
<mx:AdvancedDataGridColumn headerText="Postal Code" dataField="address.postal_code"/>
<mx:AdvancedDataGridColumn headerText="Account Reference" dataField="account_reference"/>
</mx:columns>
</mx:AdvancedDataGrid>
Which did not throw an error at all, it just returned blank values in the Postal Code column. You can't imagine how many different ways I tried to reference "address.postal_code" to no evail. Carefully comparing the said example with my code I thought, let's try with their grid component... sure enough - there's my postal codes! If I would have started off looking in the DataGridColumnNested.as file I would have seen on the first line a link to this blog post that identifies the reason for this extended component.
Along the way to figuring this out I did find a few cool gems. First is debugging using the trace() function. To anyone like myself who is used to cfdump in ColdFusion, you will not likely be impressed - however this is what we get in Flex. It simply writes text to the console as you debug your application. To make use of it in this scenario (nested arrays), I found that I needed to call the trace function as:
trace(mx.utils.ObjectUtil.toString(event.result));
That gives a pretty nice textual display of the nested array using tab spacing to visualize the inheritency.