Skip to end of metadata
Go to start of metadata

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.

App folder location



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.

The main index.xml view defines this view structure using platform and formFactor condition attributes on each top-level window control, as shown below.


The 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.


The 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.isHandheldAlloy.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.


The 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 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.


The row.xml view defines the layout and content of each TableViewRow


The row.js view-controller reads the values of the arguments passed to it by the createController() method, and assigns the proper values to the name and nickname Label elements.

See also

  • No labels