Developing Web Applications for Smartphones with IBM WebSphere Portlet Factory 7.0
Introduction
Smartphone and mobile development challenges and opportunities
The recent months 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.
Fortunately, smartphone web applications are built with the same basic technologies - HTML, CSS, and Javascript - as traditional web applications. Modern smartphones and tablets, such as iPhone, iPad, Android, and Blackberry OS 6, have very capable web browsers with excellent support for advanced features such as webkit extensions and HTML 5 features. With appropriate coding, HTML, CSS, and Javascript can be used to deliver applications that are optimized for those mobile devices and have a native-looking user interface. Since those web technologies are the ones generated by Portlet Factory applications, you can use all the power and automation of Portlet Factory to create smartphone-optimized web applications. You can even leverage new HTML 5 capabilities such as geolocation on devices where they are supported.
Benefits of using Portlet Factory for smartphone and multi-channel development
When you use Portlet Factory for mobile development, the first big benefit you get is that your mobile applications can leverage all the features of Portlet Factory, such as:
- Rapid development of portlets and web applications with rich Web 2.0 capabilities
- Comprehensive integration capabilities (SAP, Domino, relational DB, web/REST services, PeopleSoft, Siebel, 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, Lotus Mashup Center)
In addition to those core benefits of Portlet Factory, there are three specific Portlet Factory capabilities that are especially valuable for supporting the development of smartphone-optimized web applications. Many of these capabilities are demonstrated in the samples that accompany this article. These three capabilities are as follows.
1. Highly configurable automated generation of web user interfaces
Portlet Factory 7.0 provides a number of techniques for controlling the generation of web UI in a highly automated, centralized way:
- 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.
- Portlet 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.
- Data Page HTML templates and imported HTML base layouts let you control the structure and layout of generated pages. For example, in some of the attached samples, a special HTML template and stylesheet are used to generate vertical scrolling lists for data instead of a tabular display.
The following screenshot shows how the standard View & Form builder can be used with a customized HTML Template and stylesheet to generate a scrolling list interface instead of a table display.
2. Dynamic Profiling and multi-channel support
The Dynamic Profiling feature of Portlet 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 Portlet 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.
The attached samples do not currently include any new builders for generating smartphone UI patterns. However, we expect mobile and smartphone builders to be a major focus for upcoming Portlet Factory product releases. 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 Portlet Factory make it an ideal framework for web application development in this multi-device environment.
Note about tested devices and smartphone support for specific Portlet Factory builders
The attached samples were developed and tested with smartphones that use the webkit engine: iPhone, iPad, Android, and BlackBerry Torch. Other browsers may not render all the stylings such as rounded corners correctly. However, for the multi-channel applications (WPF Mobile Sales Orders and WPF Mobile Orders Simple), the non-mobile "desktop" profile will render correctly on any of the browsers supported by Portlet Factory, since that profile uses the default HTML/CSS generated by Portlet Factory builders.
Note that some Portlet 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. The attached samples avoid the use of problematic builders; for example, the Rich Data Definition base library used in the samples does not use the Dojo date picker since it does not work well on smartphones. At this point we do not have a comprehensive list of builders or features which are problematic on smartphone devices.
Samples Technology Overview
Many of the provided samples leverage several key pieces of WebSphere Portlet 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 WebSphere Portlet Factory. The good news is if you are already using WebSphere Portlet Factory there's nothing new to learn. The following provides an overview of how these technologies are used in these smartphone device samples.
Page Automation
Page Automation is used to generate the application UI based on the schema for the data that is being presented. There are several way in which you can alter how the Page Automation UI is generated. This section describes how HTML Templates, Data Field Settings, Rich Data Definitions, HTML Data Layout, and Base Pages are used in the samples to generate smartphone style UI.
HTML Templates - The HTML Template provided in these samples is used by the Page Automation builders (Specifically View and Form and Data Service User Interface builders) to generate a list type layout in place of the traditional table/grid layout. The list generation template uses a HTML unordered list and list items( |