ShowTable of Contents
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.
- 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.
- 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._
- 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.
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.
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.
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 Web Experience Factory 8.0 Beta One Anatomy of a Client-Side Mobile Application