This sample 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.
The primary use cases for this builder are in situations where today you might use the Data Page builder, for view-only display or data entry forms. My hope is that with this builder available you'd almost never need to use Data Page by itself.
The builder imports a "base page" that includes placeholders for elements such as data forms and buttons, and it also implements one of the following page type options:
1. Data View.
This will invoke the Data Page builder in View-Only mode, for any type of view-only data display. You simply select the data you want to display.
2. Data Entry. This will invoke the Data Page builder in Data Entry mode, for creating an input or update form page. You select the data to use for the form, and it provides options for validating and submitting the form. It also can automatically add a button to validate and submit the form (using the x_NextAction support of Data Page).
3. Page Navigation. This will invoke the Page Navigation builder, for creating a page that lets users navigate to other pages/actions in the model. It has inputs that match the key inputs in the Page Navigation builder.
4. Model Container. This option invokes the Model Container builder, for creating a page that displays the UI of another model. One use case for this is to have a set of tabs where each tab displays a separate model, as shown in one of the examples.
5. Empty Page. This simply imports a base page that you can then apply builders to. For example, you could apply the Charts builder to create a chart page.
The builder has an option for generating a “main” method that displays the page when the model is first run. This option is intelligent and will not try to create a “main” method if there already is one created by some other builder earlier in the Builder Call list.
Here are the main builder inputs for a data entry form page. If you've created form pages using Data Page, you'll notice that this builder makes things a whole lot simpler than the series of steps and builders needed to create a form that way.
The “Optional Data Page Settings” can be used to access other less commonly used features of Data Page when you need them.
Example screenshots of several application page patterns
The attached sample models show various use cases where the Application Page builder is used multiple times in a model to create the different screens. They illustrate the different page types and some possible usage patterns. All the screens are very simple and use default out-of-the-box styling and layout. However, keep in mind that you can use the complete set of WEF's UI tools to customize and enhance and modify the pages generated by this builder.
1. Input, Confirm, and Post (InputConfirmAndPost.model)
Page 1: Data Entry page
Page 2: Data View page, with Buttons
Page 3: Data View page (alternatively could be View & Form), with Button
2. Multiple Views on a Page (MultipleViewsOnPage.model)
Page 1: Empty page, with an HTML builder that's used to create the overall layout, and with the other pages inserted using Inserted Page builder
Pages 2 - 4: Data View page (alternatively could be View & Form)
3. View and Update (ViewAndUpdate.model)
Page 1: Data View page, with Button
Page 2: Data Entry page, with Button for Cancel.
4. Multi-Page Form With Confirmation (MultiPageForm.model)
Pages 1-3: Data Entry page, with Buttons
Page 4: Data View page, with Buttons
Page 5: Empty page, with a Text builder adding a message and a Button builder to show list
5. Tab Navigation with Data View (TabNavigation.model)
Pages 1-3: Data View page (three times), with a Page Navigation builder applied to all pages so that the tabs are inserted at the top of all pages
6. Tab Navigation With Model Container (TabsWithModelContainer.model)
Pages 1-3: Model Container page, with a Page Navigation builder applied to all pages so that the tabs are inserted at the top of all pages
7. Page Navigation (PageNavigation.model)
Page 1: Page Navigation page
Pages 2-4: Data View page, with Button for “Back”
Here is the same model with mobile rendering
About UI theme support
Using a UI theme in WEF provides the benefit of defining all your look and feel in one place so that all your models automatically have a consistent look that you can change in one place. In the Application Page builder, the theme support lets you import a “base page” from the current WEF UI theme. You can then use the placeholders and styles that are defined in the theme. The base page used by the builder is one of the base pages defined for the View & Form builder. It uses those base pages because they're already defined in every UI theme so there's no need to have new base page theme entries especially for the Application Page builder.
The sample models use the WEF UI Themes provided with the Multichannel Feature Pack for WEF 8.0. However, the Application Page builder itself can work without the Feature Pack. The only feature of the builder that specifically leverages the Feature Pack is the optional “Page Heading Text” input, which by default expects a base page element with the name “page_header_text”. This element is present in the base pages provided by the Feature Pack themes but not in earlier out-of-the-box themes.
Working with the builder source, and a request for feedback
This builder is posted as a sample/prototype with complete source code. You can use the builder as-is or make modifications/enhancements if you like. All the builder code uses documented APIs, and if you look at the builder's regen class (ImportedDataPageBuilder.java) you'll see the builders it's calling under the covers. For more information on making builders, see the “making custom builders” section of the “Learning Web Experience Factory” page on the WEF wiki (http://www-10.lotus.com/ldd/pfwiki.nsf/dx/learning-websphere-portlet-factory#Creating+custom+builders).
We are considering adding a builder similar to this to a future version of WEF, and we're hoping to get feedback on it. Does it make things simpler/quicker for your model development? Are there options it's missing that prevent you from being able to use it more? Are there additional patterns you'd like it to support? You can leave comments on this page, or you can add comments to the blog posting in the WEF Community (http://ibm.co/factorycommunity).
Installing and running the builder and sample models
To install the builder and run the samples attached here:
– Create a Web Experience Factory project and publish it to your test server.
– Download and import the sample package available below under “Attachments”.
– Download and import the XML File Data Service builder available here: http://www-10.lotus.com/ldd/pfwiki.nsf/dx/Sample_XML_File_Data_Service_Builder. This step and the next aren't required if you just want to use the builder without running the sample models.
– Import the MultichannelResponsiveUI.zip archive that's provided with the Multichannel Feature Set for WEF 8.0, as described in the documentation.
– Open each of the sample models and click Run. All the sample models are in the samples/application_page folder.