Category: General

It was been very easy to use Titanium Mobile to implement Master Detail view on iPad Apps.

In computer user interface design, a master–detail interface displays a master list and the details for the currently selected item. A master area can be a form, list or tree of items, and a detail area can be a form, list or tree of items typically placed either below or next to the master area. Selecting an item from the master list causes the details of that item to be populated in the detail area.

Obviously, the master-detail interface shown in iPad is the master area located at left and detail area located at right. When the functions displays on iPhone, because of the smaller screen, master view takes up full width, and then a detail item clicked, the detail view will be opened as a new window view.

The key idea to implement in Titanium Mobile concept is that:

On iPhone, we mostly creating our master view, likely a tableview, and attach with a master window (masterWindow.add(tableView)). When click into detail item, we create new item window and then open using tab controller (Ti.currentTab.open(itemWindow)). So that when user can click “Back” button from the tab bar to go back to previous view and click to open another detail view.

On iPad, after we creating our widget, we will attach the widget to a View object, which attach to the main window object (masterView = Ti.UI.createView(); window.add(masterView)). We create another detailView and attach to the main window object (detailView = Ti.UI.createView(); window.add(detailView)). We set the width of the masterView as a certain width constant, and then we adjust detailView.left attribute to the width constant, to make it stand at the right.

On iPad, to handle orientation changes, we need to also adjust the detailView.left attribute and its width in order to fits to the screen after orientation changes. The key code here:

if(Ti.Platform.osname == 'ipad') {
  descArea.width = Ti.Platform.displayCaps.platformWidth - IPAD_DOUBLEVIEW_WIDTH;
  Ti.Gesture.addEventListener('orientationchange', function(e) {
   descArea.width = Ti.Platform.displayCaps.platformWidth - IPAD_DOUBLEVIEW_WIDTH;
  });
}

Attached the example screenshots that I capture from the demo apps I implement the master-detail view on iPad using Titanium Mobile.