10.4 Office Supplies application 

Previous | Next

Note: You need to complete 10.3 Blogs service provider before you continue with this topic.

The final model needed for the sample application is the OfficeSupplies model, which manages the user interface (UI), the application logic, and in simplistic terms reads data from the Office Supplies catalog and writes to the Blog. The figure below shows the Outline of the builders that are needed for the OfficeSupplies model.

Create the OfficeSupplies model

1. Right-click the OfficeSupplies project, and select New -> WebSphere Portlet Factory Model.
2. The Choose Project dialog box opens and defaults to OfficeSupplies. Click Next.
3. Select Empty under Factory Starter Models from the Select Model dialog box. Click Next.
4. Expand the models folder, and highlight the redwiki folder to place the newly created model under that folder.
5. Enter OfficeSupplies in the Name field.
6. Click Finish.

Next, you add builders to the OfficeSupplies model.

Creating the Blogs Service Consumer

To create the Blogs Service Consumer, follow these steps.

1. Click Add a new builder call from the builder call list.
2. Select Service Consumer from the All category.
3. Enter blogsData in the name field.
4. Select redwiki/data/BlogsProvider from the picker dialog box for the provider model field.
5. Enable the Override Inputs option.
6. Leave the default for the remainder of the builder parameters.
7. Click OK to finish.

Creating the Office Supplies Service Consumer

To create the Office Supplies Service Consumer, follow these steps.

1. Click Add a new builder call from the builder call list.
2. Select Service Consumer from the All category.
3. Enter OfficeSuppliesData in the name field.
4. Select redwiki/data/OfficeSuppliesProvider from the picker dialog box for the provider model field.
5. Leave the default for the remainder of the builder parameters.
6. Click OK to finish.
   

Add View and Form builder to display the Office Supplies data

To display the Office Supplies data, follow these steps.
Note: If you are building this sample from scratch, you have to download the sample zip file and locate the two HTML files.

1. Click Add a new builder call from the builder call list.
2. Select View and Form from the All category.
3. Enter OfficeSupplies in the Name field.
4. Select DataServices/OfficeSuppliesData/getSupplies from the picker dialog box for the view data operation field.
5. De-select Use Theme.
6. Select /redwiki/pages/supplies_view_and_form_view.html from the picker dialog box for the view page HTML field.
   Note - If you are building from scratch you will need to Import the file. (The precise location where you import the file is not important, so long as it can be found by the application.)
7. Expand the Row Details Support section.
8. Enable the Create Link to Details option.
9. Select name from the details link column selection list.
10. Select the Get details data directly from the selected row option from the details action type selection list.
11. Select /redwiki/pages/supplies_detail_view_and_form_view.html from the picker dialog box for the details page HTML field.
    Note - If you are building from scratch you will need to Import the file. (The precise location where you import the file is not important, so long as it can be found by the application.)
12. At the bottom of the builder under Advanced, ensure the Generate Main option is selected.
13. Leave the default for the remainder of the builder parameters.
14. Click OK to finish and save.
    
    

Adding the header logo to the application

To add the header logo to the application, follow these steps.
Note: If you are building this sample from scratch, you have to download the sample zip file and locate this logo file.

1. Click Add a new builder call from the builder call list.
2. Select Image from the All category.
3. Enter Header Logo in the name field.
4. Make sure the On Named Tag is selected from the Location Technique radio button selection.
5. Select OfficeSupplies_ViewPage from the page drop down list.
6. Select header_logo from the tag.
7. Select /redwiki/images/connections-530x140.jpg from the image source picker dialog box.
   Note: If building from scratch, you have to import the image. (The precise location where you import the file is not important, so long as it can be found by the application.)
8. Leave the default for the remainder of the builder parameters.
9. Click OK to finish and save.
   

Adding Thumbnail to an Office Supply detail

To add Thumbnail to an Office Supply detail, follow these steps.

1. Click Add a new builder call from the builder call list.
2. Select Image from the All category.
3. Enter Thumbnail in the name field.
4. Make sure that the On Named Tag option is selected from the Location Technique radio button selection.
5. Select OfficeSupplies_DetailPage from the page selection list.
6. Select img_button from the tag.
7. Select ${Variables/OfficeSupplies_SelectedRowData/office_supply/img_file} from the image source picker dialog box, and append /redwiki/images/ in front of the variable for the computed value to be concatenated.
8. Leave the default for the remainder of the builder parameters.
9. Click OK to finish.
   

Note: If you are building this sample from scratch, you have to download the sample zip file and locate the thumbnail images, and then place them in the correct folder. For example, see the figure below from a Windows Explorer session.

Creating a success page

To create a success page, follow these steps.

1. Click Add a new builder call from the builder call list.
2. Select Page from the All category.
3. Enter postSuccess in the Name field.
4. Replace the content of the page contents (HTML) field with the following text:
   

   <html>
   

       <body>
   

           <form name="myForm" method="post">
   

               <div align="center">
   

               <span name="successText">You have successfully posted this product as the featured product of the month to your Blog</span>
   

               </div>
   

           </form>
   

       </body>
   

   </html>
   

5. Leave the default for the remainder of the builder parameters.
6. Click OK to finish.

Creating the setBlogContent method

To create the setBlogContent method, follow these steps.

1. Click Add a new builder call from the builder call list.
2. Select Method from the All category.
3. Enter setBlog Content in the name field.
4. Enter the following code in the Method Body:
   

   {
   

   //Get the text values of the selected supplies
   

   String suppliesName = webAppAccess.getVariables().getXmlText("OfficeSupplies_SelectedRow Data", "office_supply/name");
   

   String suppliesQty = webAppAccess.getVariables().getXmlText("OfficeSupplies_SelectedRowData", "office_supply/qty_instock");
   

   String suppliesImgFile = webAppAccess.getVariables().getXmlText("OfficeSupplies_SelectedRowData", "office_supply/img_file");
   

   String suppliesPrice = webAppAccess.getVariables().getXmlText("OfficeSupplies_SelectedRowData", "office_supply/price");
   

   //Build the content
   

   String strContent = "";
   

   strContent += "*<br>";
   

   strContent += "DISCLAIMER*<br>";
   

   strContent += "* This blog entry is automatically generated by a sample redwiki application, please ignore the content *<br>";
   

   	strContent += "*<br<br>";
   

                                            strContent += "Please check on our product of the month: <b" + suppliesName + "</b<br<br>";
   

     	strContent += "<img src='http:localhost:8080/Lotus_Connections/images/" + suppliesImgFile + "' name='header_logo'/<br>";
   

   strContent += "Hurry while supplies last! We currently have " + suppliesQty + " in stock. <br>";
   

   strContent += "You can get a " + suppliesName + " for $" + suppliesPrice + " each";
   

   //Set the blog content input
   

   IXml blogInput = webAppAccess.getVariables().getXml("blogsDataCreateBlogEntryInputs");
   

   blogInput.setText("arguments/content", strContent);
   

   }

5. Leave the default for the remainder of the builder parameters.
6. Click OK to finish.

Creating the postToBlog Action

To create the postToBlog Action, follow these steps.

1. Click Add a new builder call from the builder call list.
2. Select Action List from the All category.
3. Enter postToBlog in name field.
4. Leave Return Type as "Object"
5. Add the first action. Click the Picker button and select "Special/Assignment".
   Under "Target", click the Picker button and select "Show more".
   Under "Variables", select "blogsDataCreateBlogEntryInputs/arguments/title". Confirm the selection by clicking "OK".
   Under source, enter "Featured product of the month". Confirm the action by clicking "OK"
6. Add the second action. Click the Picker button and under "Methods", select "setBlogContent".
7. Add the third action. Click the Picker button and under "DataServices", select "blogs/createBlogEntry"
8. Add the fourth action. Click the Picker button and under "Pages", select "postSuccess"
9. Leave the default for the remainder of the builder parameters.
10. Click OK to finish.

Adding the postToBlog button

To add the postToBlog button, follow these steps.

1. Click Add a new builder call from the builder call list.
2. Select Button from the All category.
3. Enter postToBlog in name field.
4. Using the first drop down, select "OfficeSupplies_DetailsPage" for the Page field.
5. Using the second drop down, select "blog_button" for the Tag field.
6. Enter Post to My Blog in the label field.
7. Select Submit form and invoke action from the action type selection list.
8. Select postToBlog action from the picker dialog box.
9. Leave the default for the remainder of the builder parameters.
10. Click OK to finish.

This figure shows the builders of the finished model.

Summary

In summary, the Office Supplies Web application brings everything together. It consumes the data from the Office Supplies service provider, and it also consumes the blog posting service from the blogs service provider. That is why you created two service consumer builders to consume from both service providers.

To set up the layout of the page, you use the View and Form builder. The View and Form builder provides an easy access to the create, read, update, and delete (CRUD) features without having to write any code. Examine the builder after you download, and set it up using the instructions in 10.6 The Office Supplies application sample code. You see sections for view page, input page, row details, and update page. We do not use the input and update feature in this sample.

There is a lot going in this View and Form builder. Let's take a closer look.

On the View and Form builder, under the Advanced section, you can enable the "Generate Main" option. By having the builder generate a main, you do not have to explicitly create one. If you choose to, you can create a main using an Action List builder. You do not usually want to do so unless you have more operations to run other than simply displaying the main page that is generated by the View and Form builder.

In Web Experience Factory, every model must have a main in order for you to run it using the "Run" menu option or Ctrl+F11 shortcut menu. Having said that, you probably notice that some models (typically service provider models) do not have a main. This is fine, as long as you do not try to run the model. If you do, you will get an error message. Such models are usually set up without a main because they are never intended to run as an independent application (for example, a service provider).

Now, let us go back to the View and Form builder. If you click the link with WebApp Tree arrow that is next to the builder, it opens the application tree. You see that it generates several components. One of the components that it creates is OfficeSupplies_ViewPage, which is the page that is displayed when you run this application. The question is, how do you control the look and feel of this page?

If you want to customize the look and feel of this page, you can create your own HTML and specify /redwiki/pages/supplies_view_and_form_view.html as the view page under the "View Page Options" section in the View and Form builder.

If you look under the "Row Details Support" section of the View and Form builder, you notice that we enabled the "Create Link to Details" options, which creates a master or detail feature where you can click the name column. (we specify name as the details link column) and opens the detail data of the selected row. We also choose to customize the look and feel of the detail page by creating a custom HTML and setting the details page HTML to /redwiki/pages/supplies_detail_view_and_form_view.html. We added a thumbnail to the detail page using an Image builder that is dropped to the detail page. (The View and Form builder generates a page called OfficeSupplies_DetailsPage for the detail page.)

Next, we added a button in the detail page to enable users to add the current information to their blog entry. This button calls the postToBlog action list, which invokes the blog service provider operation, which connects to the Lotus Connections Blog service, and creates a new entry. The setBlogContent method is an assistant method to format the content before sending it to the blog service.

Finally, we displayed a success page that indicates that the user has posted the content of the selected office supplies data successfully into the blog entry.

Next step
You have created a web application that integrates with Lotus Connections. Now, if you want to create the Office Supplies portlet to deploy into an IBM WebSphere Portal server, continue to10.5 Deploying to the Portal Server

Note: You can download the sample code from 10.6 The Office Supplies application sample code

Parent topic: 10.0 IBM Web Experience Factory