A Simple Master/Detail Application

This article explains how a simple Spark master/detail application can be created with a Form that's linked to a DataGrid's selectedItem property.

The value of the DataGrid's selectedItem property is the dataProvider item that's currently selected. This example contains a Datagrid and a Form, and the Form displays various aspects of the selectedItem. Elements of the Form bind to the DataGrid's selectedItem, so when the selection changes the form is updated automatically.  In a configuration like this, the DataGrid is the "master" view and the Form is the "detail" view.

Here's the live example and the source code.  Changing the selected item in the master view, causes the elements of the detail view to be updated.  The detail view also allows one dataProvider item property to be changed: if the "call" property is true, it can be set to false by pressing the "Call Now" button.

MasterDetailExample.mxml

The Form's selectedItem bindings are not valid unless there's a non-null selection, so we've specified requireSelection="true" for the DataGrid to ensure that there's always a valid selection.  Some of the bindings in the detail view  are just simple references to properties of the selected item:

    <s:Label text="{dataGrid.selectedItem.name}"/>


The bindings that connect to prices use a Spark CurrencyFormatter object (cf in the code below) to covert Numbers to nicely formatted localized strings:

    <s:Label text="Tax: {cf.format(dataGrid.selectedItem.price * 0.0975)}"/>

And finally this binding converts a boolean value to either "Yes" or "No":

    <s:Label text="{(dataGrid.selectedItem.call) ? 'Yes' : 'No'}"/>