User Guide

Create the user interface 15
Note: The field names must exactly match the names of their corresponding properties within the
XMLConnector component (@date = date, @billable = billable, @duration = duration), including
capitalization.
19. Select the Date field that you just created. Select the encoder setting and change it to
DateToNumber.
Note: The DataSet component needs to store date values in their numeric equivalents so that they
can be sorted correctly. This encoder converts a Date into a Number whenever the value is set. It
converts a Number into a Date whenever the value is accessed.
20. With the Date field still selected, double-click the Formatter field in the Component Inspector
and choose Date from the pop-up menu.
21. Double-click the Formatter Options field in the Component Inspector.
22. In the Date Formatter Settings dialog that appears, enter MM-DD-YYYY in the Format
text box.
23. Drag a DataGrid component to the Stage, and in the Property inspector enter the instance
name timeInfo_grd.
24. In the Component inspector, click the Bindings tab. Create a binding between the DataGrid
component’s
dataProvider property and the DataSet component’s dataProvider property.
Set the direction to In.
25. Add another binding between the DataGrid component’s selectedIndex property and the
DataSet component’s
selectedIndex property.
26. Drag a Button component to the Stage, and give it the instance name loadData_btn in the
Property inspector.
27. In the Component inspector, click the Parameters tab. In the Label field, type Load Data.
28. With the button still selected on the Stage, open the Behaviors Panel (Window > Development
Panels > Behaviors).
29. Click the Add Behavior (+) button, and select Data > Trigger Data Source. In the Trigger Data
Source dialog box, select the timeInfo_con component, and click OK.
30. Save the file in the same folder where the data.xml file resides.
31. Run the application, and click the Load Data button.
The XML data is retrieved, converted, and loaded into the DataSet component. The binding
between the DataSet and the DataGrid copies the data into the Grid for display.