Demonstrates how to create a master-detail application that presents a list of items from which the user can select to view details about that item.The sample is designed to support handheld and tablet (iPad) form factors. On iPhone, a NavigationWindow control is used to display the master and detail windows; on iPad, a SplitWindow is used; and on Android, a standard Window control is used for both the master and detail views, as shown below.
index.xml view defines this view structure using
formFactor condition attributes on each top-level window control, as shown below.
master.xml view is used for all for all platforms and includes a TableView element to display the master list of items. An
onClick handler named openDetail is assigned to the TableView, which is invoked when an item in the table is selected. For Android builds, a headerView is conditionally added to the TableView to display the table name.
index.js controller is responsible for opening the right top-level window depending on which platform the application is running. It also defines a Backbone-based event handler for the "detail" event that is triggered when the user selects an item from the TableView. This event is triggered in the master.js view-controller, shown next.
The controller uses the Alloy.isHandheld, Alloy.isTablet and OS_IOS conditionals in the "detail" event handler to determine whether it needs to create a controller to display the details for the selected item (on iPhone) or simply use the existing view in the SplitWindow.
master.js view-controller, shown below, populates the TableView with TableViewRow objects. It uses the included Underscore library's each() function to iterate over each member of
Alloy.Globals.data collection (defined in
app/alloy.js) and creates a new TableViewRow from the
app/views/row.xml view. The first argument passed to the Alloy.createController() is the view-controller's base name ("row") followed by the specific data for that row to display. Each new view-controller is pushed onto a local array named
data, which is finally passed to the TableView object's setData() method.
row.xml view defines the layout and content of each
row.js view-controller reads the values of the arguments passed to it by the
createController() method, and assigns the proper values to the
nickname Label elements.