Application Development : Application Templates – List View Template

List View Template

Listing 3 gives the main.qml generated by the List view template. (Listing 4 defines the page that is displayed when a ListView item is selected. Listing 5 defines the data to be loaded in the ListView.)

Listing 3.  List View Template, main.qml

import bb.cascades 1.0
NavigationPane {
    id: nav
    Page {
        Container {
            ListView {
                dataModel: XmlDataModel {
                    source: "data.xml"
                }
                onTriggered: {
 
                    if (indexPath.length > 1) {
                        var chosenItem = dataModel.data(indexPath);
                        var contentpage = itemPageDefinition.createObject();
 
                        contentpage.itemPageTitle = chosenItem.name
                        nav.push(contentpage);
                    }
                }
            }
 
        }
 
    }
    attachedObjects: [
        ComponentDefinition {
            id: itemPageDefinition
            source: "ItemPage.qml"
        }
    ]
    onPopTransitionEnded: {
        page.destroy();
    }
}

Listing 4.  List View Template, ItemPage.qml

import bb.cascades 1.0
 
Page {
    property alias itemPageTitle: titlebar.title
    titleBar: TitleBar {
        id: titlebar
    }
    Container {
 
    }
}

Listing 5.  data.xml

<root>
    <header title="Header 1">
        <item  name="Item 1"/>
        <item  name="Item 2"/>
        <item  name="Item 3"/>
        <item  name="Item 4"/>
        <item  name="Item 5"/>
    </header>
    <header title="Header 2">
        <item  name="Item 1"/>
        <item  name="Item 2"/>
        <item  name="Item 3"/>
        <item  name="Item 4"/>
        <item  name="Item 5"/>
        <item  name="Item Gorilla"/>
    </header>
</root>

Here are the most important aspects of the code to consider:

• The root control is an instance of NavigationPane (again, this is a departure from the standard empty project that contained a Page control as the root container).  The NavigationPane provides the NavigationPane::push(bb::cascades::Page*) and the bb::cascades::Page* NavigationPane::pop() methods in order to implement navigation. If a page is pushed on the navigation stack, it will be displayed to the user. The opposite effect is achieved by popping the page off the stack. In this case, the page located at the top of the stack is displayed. You should note that a List view template is essentially a special case of a Navigation pane template where navigation is triggered by selecting data items in a ListView.
• A ListView uses a DataModel in order to load its data. The ListView component has been designed around the MVC pattern. The DataModel implements the model part, the ListView plays the role of the controller, and a ListItemComponent handles the list view’s visuals.
• The navigation pane’s attached object property includes a ComponentDefinition declaration, which is used to dynamically load a QML component (in this case, an instance of ItemPage, which is defined in ItemPage.qml, located in the same folder as main.qml). When you actually need to create the object, you will have to call ComponentDefinition.createObject().
• Notice how the indexPath array length is checked before navigating to ItemPage to ensure that the user has selected an item element and not a header.
• The root element index path will be the empty array. The header elements will have a one-element index path array and the item elements will have an index path array containing two elements.

Figure 3 illustrates the resulting application and Figure 4 UI when Item 2 is selected from the list.

Figure 3. Master view

Figure 4. Details view

By touching the Back icon, you will pop the current page from the NavigationPage’s stack and display the ListView, which will once again be at the top of the stack.