In the new IBM Multi-Channel FeaturePack For IBM Web Experience Factory v8.0 we have taken the sample Application Page builder [Application Page Sample Builder] and have made some updates to it and added it as a supported builder. We incorporated some of the comments that were made and some other changes based on the samples that we included to enhance the patterns that this builder supported.
This builder provides new high-level builder support for constructing various types of pages in Web Experience Factory (WEF). This builder creates a new page in a model and automates several common page design patterns that can be applied to that page. The builder's inputs are designed to present a simple, easy-to-use interface for common scenarios, but with optional access to more advanced features when you need them. This builder supports both server-side and client-side behavior exposing only the features that are available for that processing model.
The primary use cases for this builder are in situations where today you might use the Data Page builder or the Page builder, to create pages. The Application Page builder makes it easy to encapsulate the other builders and enhance them with integration with themes, model containment, page navigation and standard page buttons. These changes allow the you to make it easier to work with these pages since the page encapsulate more of the pages behavior within a single builder.
Another area that we have enhanced based on our previous samples are the model wizards we created to help you use these builders for some common patterns. These wizards are designed to ease the creation of some multiple page scenarios that the Application Page builder is good at handling.
- Model Contained Tabbed View - This wizard builds a model using the new feature pack themes and Application Page builder to create a multi-page tabbed view. The tabs are populated with models added using model containers.
- Multi-Page Form (Server or Client-side) -This wizard builds a model using the new feature pack themes and Application Page builder to create a multi-page form. This form calls the server as the pages are navigated through, performing validation. After the data is input , a confirmation page lets the user submit data to the server. On completion an acknowledgment page is displayed.
- Multi-channel Starter -This wizard builds a model using the new feature pack themes to match the user interface of models created from other multichannel wizards. It will optionally add a service consumer. Customize the model later by adding Application Page builders or other higher-level builders to create pages.
These wizards use the Application Page builder to implement some common user interface patterns with minimal user interaction allowing the user to create sophisticated page flows. They simplify the creation of these patterns but are not the only use for this builder. Another design pattern that the Application Page builder can be used to implement is merging different views of data on a single merged page there is a good example of this in the [Application Page Sample Builder] and you could also use this builder to create content that you can use in the dojo container builders. In the example model I am including with this article I use the Application Page builder in combination with the Client View & Form builder to create an application that allows a user to add a new user(using the Multi-Page Form wizard to create it), View the records (using the Client View & Form) and a details and update pages(using Application Page to create the tabbed page elements). This project also uses the [Sample XML File Data Service Builder] to provide the data, this data service is designed for rapid prototyping of your data and service operations.
So to start you should create a Web Experience Factory Project and include the Client-side Application feature set. Then download the Multi- Channel feature pack and import it into your project. This will add the Application Page builder to the project along with a bunch of cool responsive data layouts. You also need to download and import the Sample XML File Data Service builder. You then need to make sure the project is built so that the data service builder will be setup to be used. Once you have completed this your project will contain two models and a profile set that is needed for this application.
The profile set is a superset of our standard multi-channel profile set that extends that to allow a profiling of Desktop and Tablet as a setting in addition to the Desktop, Tablet, Smartphone or Mobile. The CustomerAccountsProvider model uses the XMLFileService builder and extends that service by adding a custom service operation, to control the layout of the fields on these pages I added Display Manager builder. The ManageCustomers model was created using the Multi-Page Form wizard using the Customer Account Provider, Selecting the addnewCustomer as the Data input operation. After testing my model I decided to add a way for the user to see a list of all the customers, To do this I added a client view and form builder and switched my program flow to display the list of items and add a button on the list view to add a customer.
After testing the new application flow I decided to display the detail record on individual tabs that match the field layout . To do this I needed to create the individual Application Pages for each of the tabs and then add these pages to the tabs by adding a Page Navigation builder. To make it easier to implement I decided to allow the Client View & Form builder to handle the navigation to the details page which fetches the correct record to display. To do this I hid all the fields that are displayed on the details page and targeted the page navigation tabs onto the details page and create the Application Pages based on the variable that was populated by the Client View & Form builder.