This chapter is from the book
This chapter is from the book
This chapter is from the book
XPages Mobile Extensions
As mentioned earlier, at the time of writing, Domino 9.0.1 has just been released and includes many new mobile features. Also included in this release is a series of extension points within the XPages runtime and Domino Designer to enable new mobile features to be delivered outside of the normal Domino release cycle. The Extension Library project on OpenNTF is used as a vehicle to allow new features to be delivered on a continuous basis. These features include enhancements to the XPages runtime—for example, support for new properties or events and also features within Domino Designer to simplify the development of mobile applications. For example, within 6 weeks of the delivery of Domino 9.0.1, a new Extension Library release is available that includes two new features for mobile application development:
- Addition of the infiniteScroll property to the Data View (xe:dataView) control
- Addition of the Single Page Application Wizard
Infinite Scrolling
A new property called infiniteScroll has been added to the Data View control for use only in mobile XPages. When infinite scrolling is enabled, as the user scrolls through rows in the Data View control, additional rows will be automatically loaded. Rows are prefetched and added directly to the Data View.
Property:
infiniteScroll
Values:
- enable: Enable infinite scrolling in the Data View control. (This overrides the application default.)
- disable: Disable infinite scrolling in the Data View control. (This overrides the application default.)
- auto: Uses the application setting xsp.progressive.enhancement=[enable|disable]. (This is the default value.)
Listing 14.23 shows a page containing two Data View controls, both of which have infinite scrolling enabled. Each Data View control has 1,000 rows, and when you open the page on a mobile device, you can keep scrolling down, and pages are automatically loaded for you. The sample shows that two data views can be used on the sample page, each with infinite scrolling enabled.
Listing 14.23 Stacked Data Views with Infinite Scrolling
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:label value="First Data View" id="label1"></xp:label>
<xe:dataView id="dataView1" var="viewEntry"
collapsibleCategory="false" collapsibleDetail="false" rows="20"
collapsibleRows="false"
style="height:200px; border:2px solid blue; margin: 5px"
summary="Activity" infiniteScroll="enable"
value="#{javascript:1000}">
<xe:this.summaryColumn>
<xe:viewSummaryColumn
value="#{javascript:'First Data View - '+viewEntry}">
</xe:viewSummaryColumn>
</xe:this.summaryColumn>
</xe:dataView>
<xp:label value="Second Data View" id="label2"></xp:label>
<xe:dataView id="dataView2" var="viewEntry" collapsibleRows="true"
collapsibleDetail="true" columnTitles="true"
rows="20" showCheckbox="false"
style="height:200px; border:2px solid #008abf; margin: 5px;"
infiniteScroll="enable" value="#{javascript:1000}">
<xe:this.summaryColumn>
<xe:viewSummaryColumn
value="#{javascript:'Second Data View - '+viewEntry}">
</xe:viewSummaryColumn>
</xe:this.summaryColumn>
</xe:dataView>
<xe:tabBar id="tabBar1">Mastering XPages</xe:tabBar>
</xp:view>
Single Page Application Wizard
This is a new Domino Designer feature that has been delivered as part of the Extension Library. The feature provides a wizard that can guide you through the process of adding a Single Page Application (xe:singlePageApp) control to an XPage. The wizard automatically opens every time you add the Single Page Application control to a page. By default the wizard enforces the best practice of having a custom control for each Application Page you need to create. The wizard also enables you to specify how to navigate between the Application pages.
To start using this new wizard, you need to drop a Single Page Application control on to an XPage. Figure 14.25 shows the Single Page Application Wizard.
)
Figure 14.25 Single Page Application Wizard
The wizard has an option to create a custom control for the content of each application page. This is the recommended approach because it helps reduce the complexity of the single page application XPage and results in a more maintainable design. Occasionally, having a custom control per application page can be overkill, so you can turn off this option. The start screen of the wizard also enables you to add the application page by selecting the New button. Figure 14.26 shows the New Application Page dialog, which enables you to create different types of templated application pages.
)
Figure 14.26 New Application Page dialog
The following Application Page types are supported:
- General
- Application Navigator
- Document Collection
- Document Viewer
The wizard provides different options to configure each Application Page type. Figure 14.27 shows the general options available for an application page. It will have a page heading by default, and you can optionally use the wizard to add toolbar buttons, a back button, and tab bar buttons.
)
Figure 14.27 General Application Page options
An application navigator application is a special type of page used to navigate around the single page application. You can configure the same options that are supported by a general page. Figure 14.28 shows the options available for an application navigator page; you can create a set of links that allow users to navigate around the application.
)
Figure 14.28 Application Navigator Page options
For a document collection application page, the wizard guides you through the process of creating a data source to retrieve the document collection and a data view to display the data. Figure 14.29 shows the options to configure the data source for a document collection page.
)
Figure 14.29 Document collection data source configuration
Figure 14.30 shows the options to configure the data view used to display the document collection (including an option to enable infinite scrolling).
)
Figure 14.30 Document collection Data View configuration
For a document viewer application page, the wizard guides you through the process of creating a data source to retrieve the document and a set of controls to view the fields of the document. Figure 14.31 shows the options to configure the data source for a document viewer page.
)
Figure 14.31 Document Viewer data source configuration
Figure 14.32 shows the options to configure the controls used to display the document fields.
)
Figure 14.32 Document Viewer Fields configuration
The final step in the wizard is to specify the default application page to be shown in the single page application. Figure 14.33 shows a screen for the final step in the wizard.
)
Figure 14.33 Finish Single Application Page Wizard
You can see from these two examples that some important enhancements for mobile application development are being made available outside of the normal Domino release cycle.