ShowTable of Contents
Smartphone and mobile development challenges and opportunities
Recent years have seen an explosion in the market for smartphones. Smartphone sales have risen dramatically, with consumers snapping up the latest models as the smartphone vendors compete to provide the best products with the newest technology. In this market, those consumers - your customers and employees - increasingly expect to be able to do many of the same things on their mobile devices that they've traditionally done on their laptop or desktop devices.
Given this trend, technology organizations are under pressure to quickly deliver smartphone and mobile access to web applications. They need tools and frameworks to help them quickly develop new mobile-enabled applications and adapt existing applications to mobile devices.
Mobile and Multi-Channel Features in Web Experience Factory
- Mobile List & Detail Service Consumer wizard for creating great-looking mobile and multi-channel applications in minutes
- Data Layout builder for scrolling lists with configurable options such as thumbnail images and multi-line text with multiple styles
- Page Navigation builder for native-looking navigation tabs and lists
- Geolocation builder for access to device geolocation without coding
- Mobile UI themes for smartphone-optimized look and feel, including optional “slide in” effect
- Mobile Rich Data Definition library for automatic support for mobile UI controls such as selectable lists, numeric keypad input, phone numbers, etc.
- Mobile Device Type profile set for multi-channel support
Benefits of using Web Experience Factory for smartphone, tablet and multi-channel development
When you use Web Experience Factory for mobile development, the first big benefit you get is that your mobile applications can leverage all the features of Web Experience Factory, such as:
- Rapid development of portlets and web applications with rich Web 2.0 capabilities
- Comprehensive integration capabilities (Domino, relational DB, web/REST services, 3rd party enterprise systems and more)
- Automated support for service-oriented development
- “Dynamic profiling” capability, to create multiple variations from a single source model
- Support for multiple deployment platforms (WebSphere Portal, WebSphere Application Server)
In addition to those core benefits of Web Experience Factory, there are three specific capabilities that are especially valuable for supporting the development of smartphone-optimized web applications. These three capabilities are as follows.
1. Highly configurable automated generation of web user interfaces
IBM Web Experience Factory provides a number of techniques for controlling the generation of web UI in a highly automated, centralized way:
The Data Layout Builder lets you transform a generated tabular layout typically seen in desktop based web applications, into various list based layouts more typically seen on mobile devices.
The Data Field Settings and Rich Data Definition builders provide centralized control over how all data fields are displayed, formatted, and validated. For example, if you want to automatically have every Integer field automatically display a smartphone numeric keypad for data input, you can do that by changing a single central entry in a Rich Data Definition base library.
Web Experience Factory's UI themes provide centralized control over the look and feel of an entire application. With a theme, you can control style sheets, Data Page HTML templates, imported base page layouts, and even the choice of builder to use for paging through large data sets. With the release of Web Experience Factory 7.0.1, multiple mobile theme options are included with the product.
2. Dynamic Profiling and multi-channel support
The Dynamic Profiling feature of Web Experience Factory allows you to automatically generate multiple variations of an application from a single source model. This feature is often used, for example, to generate different application variations according to membership in Portal groups. For smartphone and mobile development, you can use the Dynamic Profiling feature to support "multi-channel" applications, where a single source model can generate code that's optimized for both smartphone and desktop devices. In the Designer tool you can easily switch between profiles to see what will be generated for each device type.
The following diagram shows how multiple devices can be supported with a single source model through the use of Dynamic Profiling.
3. Builder automation of mobile-optimized UI patterns
At the heart of Web Experience Factory is a very flexible framework for creating builders that can automate the generation of code for any design pattern. Any new builder can easily leverage all the automation of any existing builders. For smartphone support, new builders can automate the generation of UI design patterns that are optimized for mobile devices, and these new builders can draw on all the functionality of existing builders. For example, new builders can generate a native-looking scrolling list with thumbnails, or native-looking tabs at the top or bottom of a screen.
Mobile and smartphone support is a major focus for IBM Web Experience Factory. We think that web application development tools going forward will need to support a wide range of devices, from traditional desktop and laptop computers, to smartphones and tablets, to other devices like TVs. We believe that the highly automated code generation and dynamic profiling features of Web Experience Factory make it an ideal framework for web application development in this multi-device environment.
Note about tested devices and smartphone support for specific Web Experience Factory builders
The screenshots shown here were developed and tested with smartphones that use the Webkit engine: iPhone, iPad, and Android. Other browsers may not render all the stylings such as rounded corners correctly. However, for the multi-channel applications (Mobile Sales Orders and Mobile Orders Simple), the non-mobile "desktop" profile will render correctly on any of the browsers supported by Web Experience Factory, since that profile uses the default HTML/CSS generated by Web Experience Factory builders.
Note that some Web Experience Factory builders may generate code that is not compatible with smartphone browsers, so it's important to test the features you want to use on the smartphones you want to support. For example, some of the Dojo input widgets such as the Dojo date/time picker and Dojo drop-down lists do not work well on smartphones. When developing mobile applications for Web Experience Factory, avoid the use of problematic builders; for example, the Rich Data Definition base library used for mobile applications should not use the Dojo date picker since it does not work well on smartphones. At this point there is not a comprehensive list of builders or features which are problematic on smartphone devices.
The applications described here leverage several key pieces of Web Experience Factory technology which allow you to easily create applications for smartphone devices. At a high level these technologies used are Profiling, Page Automation, and Themes, which are the same technologies used when creating traditional web and portlet applications with Web Experience Factory. The good news is if you are already using Web Experience Factory there's nothing new to learn. The following provides an overview of how these technologies are used in smartphone device based mobile web applications.
Page Automation is used to generate the application UI based on the schema for the data that is being presented. There are several ways in which you can alter how the Page Automation UI is generated. This section describes how Themes, Data Field Settings and Data Layout are used to generate smartphone style UIs.
- Mobile Themes are used to specify HTML base pages and corresponding style sheets with a mobile look and feel, for high level builders such as DSUI and View and Form. Mobile specific Theme builder calls are profiled against the Mobile Device Type profile set, so that they are only applied if the requesting user agent matches a known mobile device type, as specified in the configuration file for the Mobile Device Type profile selection handler ( WebContent/WEB-INF/config/selection_handlers/mobiledevicetype.properties ).
Data Field Settings
- The Data Field Settings builder lets you control all the page automation fields in a model. It is used to control the field types, but may also be used to hide certain fields when displaying data on a restricted smartphone device. When the same model is used to support multiple channels profiling is used to switch between different Data Field Settings builders in the model based on the current device. You can read more about the profiling aspect in the Profiling section. The Data Field Settings builder also allows you to override the project wide default Rich Data Definition file for a specific model.
Rich Data Definition
- A Rich Data Definition(RDD) lets you associate rich user interface descriptions with fields that are defined in a schema. A RDD typically contains a set of base types (Date, String, Email,..) that can be associated with the fields in a model. the association can be done using the Data Field Settings builder described above. A mobile Rich Data Definition file can also used to disable the Dojo date picker, which causes issues when popping up on some smartphone devices.
- The Data Layout builder transforms the standard tabular look and feel generated by the default desktop based HTML templates, into a list based mobile layout. A number of list based layout templates and corresponding stylesheets are provided with the product, and more can be created by developers to extend and customize the look and feel for your environment and needs.
HTML Data Layout
- The HTML Data Layout builder allows you to modify the layout of items that are created by Page Automation, for example, pages, tables, groups, and fields. You typically use the Designer to first export the Page Automation generated UI to a HTML file, which then gets imported back into your model using the HTML Data Layout builder. You can use any HTML editor to alter the page to get the exact layout you desire.
A Theme is a collection of UI related information that can be used to drive builder inputs in your model which provide the application UI. This can include but is not limited to items such as HTML Templates, Style Sheets, Base Pages, Highlighting Style, and Paging Style. More information on profiling the theme for multi-channel support is described in the Profiling section. In some cases the theme builder is also used to override individual builders inputs, or even instances of of builder call inputs. This technique can be used to change the default list to an edge to edge style list.
Find these artifacts in your Web Experience Factory project, for more information:
- Mobile Basic Theme - WebContent\WEB-INF\factory\themes\mobile\mobile_basic.uitheme (minimize page size and additional JS usage for limited bandwidth use cases)
- Mobile Theme - WebContent\WEB-INF\factory\themes\mobile\mobile.uitheme
- Mobile Gray Theme - WebContent\WEB-INF\factory\themes\mobile\mobile_gray.uitheme
- Mobile Slide Theme - WebContent\WEB-INF\factory\themes\mobile\mobile_slide.uitheme (Adds an animated slide in effect)
You may open each of the above theme definitions in the editor, for a look at the individual files they each reference.
Profiling is used to generate multiple application variations from a single source model. The profile variation can be tied to one of the many profile selection type such as a user's group or role, In order to provide multi-channel support you may use a custom profile selection handler that uses the incoming request's "user-agent" to determine the profile to generate the web application with. This multi-channel support allows you to use a single source model to render different UI based on the device whether it be a smartphone, desktop browser, or tablet device.
Please find the following related artifacts in your Web Experience Factory project:
- Device Profile Set - WebContent\WEB-INF\profiles\mobile_devicetype_base.pset
- Profile Selection Definition - WebContent\WEB-INF\config\selection_handlers\mobile_devicetype_handler.xml
- Selection Handler Configuration Properties - WebContent\WEB-INF\config\selection_handlers\mobiledevices.properties
To learn more
Please see the MultichannelOrdersServiceConsumer.model in the WEB-INF/models/samples/gettingstarted folder of your Web Experience Factory project, for more information.