You should have a basic familiarity with Web Experience Factory, . You should also know how to create and run models. To run these models you will need to follow the information provided in the wiki article Adding Security Certificates to a Deployment Server for Outbound Requests to configure your development environment.
Creating multi-channel user interfaces to display and update IBM Connections blogs and profiles status updates.
Being able to create applications that run on both mobile platforms and desk tops is easily done using Web Experience Factory. In this sample we will consume the service provider models we created for the “Introduction to creating services to integrate with IBM Connections blogs and profiles status updates” sample. We will be using profiling and builders to create service consumer models following the standard Service Oriented Architecture.
The sample will describe step by step the builders that we use and why. We will also demonstrate a way to use profiling to create applications that look and behave differently depending on the target platform.
Here are some of the techniques illustrated in the sample code:
These samples illustrate how to use the Service Consumer builder to consume data services that were previously created. The high level diagram below shows this architecture.
How to use multiple View and Form builders on the same page
Use of the Multi-Channel profile set to control which builders are used.
Creating a new theme that supports a tablet based application.
Add a Rich Data Definition file to format the rich text correctly
We wanted to make these model perform well on mobile devices so we decided to use the basic mobile rich theme. This theme does not use dojo minimizing the size of the objects that are down loaded. One issue with this theme is lack of support for text created using rich text editors which causes the rich text tags to be displayed. So I used this theme as is the tags would be displayed in these fields or we could create a new rich data definition file that will define a control that will filter out these characters. The mobile dojo rich data definition file does have a definition that does this without requiring dojo. So we created a new rich data definition /WEB-INF/demo/data_definitions/basic_mobile_rich_text_datadef.xml by copying the base mobile one and adding the Rich Text Editor definition from the mobile dojo file, and then using Theme builder referenced this file.
Blogs UI Model
This model creates the user interface for a user to view blog entries and comments and add comments to the blog from a phone, tablet or a desktop device. Here is what the user interface looks like. The first screen is a list of blog entries.
The user click on the arrows and it opens the selected blog entry and displays this blog entries comments. The user interface model uses View and Form and Inserted Page to to build these pages and combine the results of the get blog entry and the get blog comments service.
When the user clicks on the add comment the view switches to this form for the user to enter their comment.
Here is the list of builders in the model lets go through them.
The Service Consumer builder adds the data services we created in our service provider model. One thing that is unique in this consumer is that some of the inputs to the services are defined within the consumer builder. This allows us to use some of the data that was returned from one of the service operations to be passed back into the services as inputs. In this case the rest api for the blog's individual entry the URL for the service varies and by defining this within the Service Consumer builder we change what URL the rest api uses to provide that service.
We then have two Theme builders. The blogs_tablet builder uses the /WEB-INF/demo/themes/blogs_tablet.uitheme which is based on the mobile basic theme but replaces the base pages that are used on tablets and desktops to better use of the display. This builder is defined first and not profiled that sets the defaults for the theme in this model to use these theme settings. The second Theme builder uses the mobile_devicetype_base this profile set which is triggered by the type of client that makes the request. In this case we profiled this builder to change the theme information for handling mobile phones. In this builder we add the theme for basic mobile and update the RDD file that configures the controls to display the data correctly for the platform.
We then have two View and Form builders that create the data pages that are used. These create two of the pages the blog entry page and the blog comments entries page that are combine using the Inserted Page builder. The Event Handler builder is added so that as the blogs entry detail page is being loaded the blogs entries comments data service is called to fetch the data needed for comments view page.
We then added three Data Layout builders that are profiled to layout the entry page. These builders are also profiled for mobile ,tablet and desktop layout. For this user interface we decided that the table and the desktop would have the same layout.
For the blogs details view we add a Data Field Settings builder to set up the field types used for the data that is displayed.
We then add a Data Layout builder that lays out the blog comments view for all platforms. Along with some Text builders that add some headings to different sections of the pages. And a style sheet to define some of the styles we ant to include on all the pages.
The next group of builders include the Input Form builder for adding the comments. A Link builder that adds a link to the comments view page to open the form. And a Data Field Settings builder that sets the field types for the input form.
We than add a HTML builder that adds a tag into the header section of the blog entries view page that is used on Apple devices. The page loacation input in this builder is interesting in that it uses the advanced page location technique to reference he head section of the page. This technique can be used when ever you need to dynamically modify the head section of a page.
Status Update UI Model
This model creates the user interface for a user to view their news status and update the status from a phone, tablet or a desktop device.
Here is the list of builders in the model lets go through them.
The Service Consumer builder adds the data services we created in our service provider model and make the service operations available to this model.
We then have two Theme builders. The first theme builder updates the RDD file to /WEB-INF/demo/data_definitions/basic_mobile_rich_text_datadef.xml to be used on desktop and tablet devices. The mobile basic theme uses the mobile_devicetype_base this profile set is triggered by the type of client that makes the request. In this case we profiled the entire builder with the mobile basic builder is handling mobile phones. In this builder we add the theme for mobile and update the RDD file that configures the controls to display the data correctly for the platform.
The View and Form builder creates the pages and operations needed to display the list of news entries. This demonstrates the use of a high level builder to build a single page and the operations needed, View and Form can be used for just generating a view. The view is modified by the Data Layout builder to create a multi-line list. This lays out the the table as a multiline list. The first column is defined to be a thumbnail of the author. We did not include any images in this sample so we just display the field as text. But it demonstrates how you could display this data.
The Data Field Modifier builder is used to format the date field that is displayed. The updated field data is formatted by this builder to display the date in a more user friendly manner.
The Link builder adds a refresh link to the page that causes the latest news items to be displayed it calls an action created by the View and Form builder that refreshes the data and redisplays the page. The Text builder places a heading on the top of the page, This builder only adds this text onto mobile pages because the page location that is targeted only exists on mobile pages.
The next group of builders create an Input form (Input Form) insert it into the news view page (Inserted Page) and also updates the styles that are used on that input page (Style Setter) and then adds a builder to clear the status update field (Event Handler). The clearing of the status update field is done with an Event Handler builder that sets the value to the data service input argument to blank when the page is loaded.
Adding Security Certificates to a Deployment Server for Outbound Requests|
For mobile and multi-channel application development
For the service provider models