This chapter is from the book
This chapter is from the book
This chapter is from the book
Single Page Application Design Pattern
The Single Page Application design pattern was created to address a number of Mobile Application Development best practices related to the conservative use of resources and improving user experience. Consider the following best practices that aim to improve the user experience:
- Bandwidth is typically more constrained on mobile networks; therefore, fewer but larger requests are recommended.
- Application start-time needs to be optimized.
- View switching must be fast and must support bookmarking and back button navigation.
One way to support these best practices is to load the application views either statically or dynamically without requiring a full page reload. Loading additional views is recommended to reduce the number of requests and provide for fast view switching. Associate fragment identifiers with each view, and use these for navigation and bookmarking. XPages includes the Single Page Application Control (xe:singlePageApp), which encapsulates all this functionality for you and provides the standard XPages declarative interface to allow you to configure and control its behavior. This and the other XPages mobile controls are available in their own category—that is, Mobile, within the Controls Palette. Figure 14.5 shows the Mobile controls category.
){kind=link}
Figure 14.5 Mobile controls
Before creating any XPages that use the Mobile controls, there is some configuration required to get the pages to render correctly.
Mobile XPage Properties
There is a specific theme for use in mobile XPages. This theme is required for the Mobile controls to render with the correct device look and feel. This can be enabled automatically by specifying a prefix for XPages that should use the mobile theme. The standard prefix is m_ but you can specify your own—for example, mobile_ is used in the Discussion template. To enable the mobile theme based on a page prefix, use these steps:
- Go to Application Configuration > Xsp Properties.
- Select the option to Use mobile theme for XPages with the prefix.
- Optionally specify the prefix to use.
Figure 14.6 shows the Mobile XPage properties.
)
Figure 14.6 Mobile XPage properties
All mobile pages must have the prefix you specified; otherwise, they will include the default theme and won’t render with the device look and feel. Mobile themes will be explored later in this chapter in the section, “Mobile Themes.”
In addition to the mobile theme prefix setting, there are additional mobile properties that can be configured:
- Mobile theme: Enables you to specify the mobile theme to use if you want to change from the Mobile default theme.
- Override on iOS: Enables users to specify a specific theme for iOS devices.
- Override on Android: Enables users to specify a specific theme for Android devices.
- Debug user agent: Enables users to override mobile device detection behavior and force all mobile pages to render as either iOS or Android.
Now you are ready to create some mobile specific XPages.
Single Page Application Control (xe:singlePageApp)
The Single Page Application Control enables you to define your entire application behavior within a single XPage. The control contains a collection of views that can either be loaded as part of the initial page request or can be dynamically retrieved as needed. Listing 14.4 shows the XPages markup for a mobile page using the Single Page Application control.
Listing 14.4 Mobile XPage
<?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">
<xe:singlePageApp id="singlePageApp1" selectedPageName="appPage1">
<xe:appPage id="appPage1" pageName="appPage1">
<xe:djxmHeading id="djxmHeading1">
<xe:this.label>Page 1</xe:this.label>
</xe:djxmHeading>
<xe:djxmLineItem id="djxmLineItem1" label="Go to Page 2"
moveTo="appPage2">
</xe:djxmLineItem>
</xe:appPage>
<xe:appPage id="appPage2" pageName="appPage2">
<xc:mobile_appPage2></xc:mobile_appPage2>
</xe:appPage>
</xe:singlePageApp>
</xp:view>
This XPage includes two Application Pages (xe:appPage), the first of which is included inline in the page. The second Application Page is included via a custom control and this is the recommended pattern to use. The XPage that includes the Single Page Application control can quickly become complex and difficult to maintain if all the pages are included inline. If you look in the Discussion template at the mobile.xsp XPage, you can see another example of this pattern being used. The sample in Listing 14.4 is available in the database that accompanies this chapter in two XPage design elements, one named m_SinglePageApplicationControl and one named SinglePageApplicationControl. If you run these samples, only the one with the m_ prefix will display correctly with the mobile theme.
Figure 14.7 shows the sample running with the mobile theme on an iPhone.
)
Figure 14.7 Single Page Application Control on iPhone
It is recommended you review the user interface guidelines for the devices you are targeting to ensure your application fits in on that device. These guidelines provide some basic principles for any mobile application and also specific details on designing for a specific version of a mobile operating system. The next section looks at how the XPages Mobile Controls enable you to build an application that adheres to the best practices in Mobile Application Navigation.