Introduction

IBM Web Experience Factory has added support for a client-side web architecture, allowing the development of light-weight mobile web applications with a rich native look and feel. Leveraging HTML, Javascript, Dojo Mobile, client-side mobile web applications pre-load an aggregator page from the server with layouts or placeholders for each of the individual application pages, and then use REST/JSON requests to perform operations, obtain results and then process and transition to client application pages without additional HTML page requests/responses to/from the server. While the full power and flexibility of Web Experience Factory's server-side runtime and automation are still available, this new client-side support provides customers and partners with even more power and flexibility to meet the requirements and market expectations for today's rich mobile web applications.

Overview

Web Experience Factory has traditionally built server side page based web and portlet applications, automating the generation of JSPs including the HTML layout and data markup within the pages, and the navigational controls to navigate between the pages, where each form submission and page transition involves a round trip to the server to execute application logic and render a new page to be displayed. Web Experience Factory has now added support for a client-side web architecture where the initial page is loaded from the server and subsequent requests can be limited to data(JSON), which is then processed by the client to render an updated view on the browser. The IBM Web Experience Factory Client-Side Application support provides the following features.

• Models can optionally use a client-side web architecture based on HTML, JavaScript, CSS, Dojo Mobile, JSON, and REST Services.
• In client-side mode, data is accessed directly from the browser using REST services, generating the final HTML in the client using JavaScript.
• Client-side mode is focused primarily on mobile scenarios, including the use of Dojo Mobile.
• Client-side mode can provide performance and scalability benefits:
• Reduced server processing.
• Improved caching on client, since HTML Client Template pages can be cached without data.
• Reduced size of downloaded data - Only JSON data is downloaded instead of entire HTML page.
• All the Web Experience Factory data access and service builders can be used with client-side mode - a REST/JSON interface is automatically generated.
• When using client-side mode, you have a reduced set of builders available.
• Server-side mode with all existing Web Experience Factory functionality is still available.

Note :

• Client-Side Application support is currently targeted at mobile devices (Webkit browser based smart phones and tablets), and not for desktop web/portal applications, although you may use a Webkit based browser to run standalone from the designer during initial development and testing of the mobile web application.
• Requires Dojo 1.7. Running standalone, WEF provides Dojo 1.7 to the page. Running as a portlet, it is recommended that the portal page you are running on loads/provides Dojo, and for this functionality such portal pages should provide Dojo 1.7, not an earlier version of Dojo._

Getting Started

• Create a new project with the Client-Side Application feature set included.
• Explore the sample client models available for download from the IBM Web Experience Factory Wiki.
• Use the Client Dojo Mobile List and Details Service Consumer new model wizard to create a client-side Dojo mobile application leveraging a Web Experience Factory service provider.
• Use the Client Dojo Main and Page new model wizard to create a client-side mobile application, where you need to specify the individual client pages and operations/actions yourself (less common use case than the list and details service consumer).

Client-Side Application Sample Models

The following Client-Side Application sample models are provided to help get you started using the Client-Side mobile web application support available in this version of Web Experience Factory. Save the attached client_samples to a location on disk and then use the Web Experience Factory Designer's Import Web Experience Factory Archive menu action to import it into a project.

The sample client models are located under WEB-INF/models/samples/client and WEB-INF/models/samples/mobile/banking

As the copyrights in the models state, these are samples only, and not to be used as or copied directly into production applications. Please see your beta license agreement and the copyright in the samples for more information about their use and the use of this beta functionality, which is subject to change prior to release.

ClientDojoMobileViewForm
A sample of how a client-side mobile web application may be built using the beta functionality for a simple Client View and Form based list and details user interface, against a fictitious sales orders provider.



ClientDojoMobileViewFormTabletLayout
A variation of the previous sample, where a multi-view tablet layout base page is used in the Client Application builder's imported page input, to split the main aggregator page into a left hand pane (list view) and right hand pane (where the details and update client page views are transitioned in and out). Other than some layout modifications in the stylesheet and Data Field Settings builders, the main difference between this sample and the previous sample is just that layout page and the client view page locations specified in the Client Application builder. Try running this on a tablet device in landscape orientation, and/or in a Webkit based browser from Designer, sized to approximately the size of a tablet device.



ClientDojoMobileBankingMain
A sample using the Client Page Navigation builder, in addition to the Client View and Form builder used in the previous samples, showing how page navigation can be specified, above and beyond what Client View and Form automates.

Anatomy of a Client-Side Mobile Application

For more detail on how client-side mobile works, see IBM Web Experience Factory 8.0 Beta One Anatomy of a Client-Side Mobile Application