Hello World: Create and deploy WebSphere Portal components using Lotus Component Designer

Create a page for viewing blog entries

In this section, create a page and add a view control to it that displays the saved blog entries.

1. Select the HS_Blog component in the Designer Navigator to give it focus.
2. Right-click Pages in the Designer Navigator and select New Page.
3. In the New Page window, type viewBlogEntry in the Name field.
4. In the Description field, type This page is for viewing a list of blog entries.
5. In the Data section, select Do not create a data source.
6. In the Component list, select HS_Blog.
7. Check Create in default location. Your screen should look like Figure 10.
   
   Figure 10. New viewBlogEntry page
   
   
   
8. Click OK.

Now that you have created the viewBlogEntry page, add controls and a view to the page.

1. In the Container Controls section of the UI Controls palette, click Table and then drag it to the top portion of the viewBlogEntry page in the page editor.
2. From the main menu, select Table > Append Row(s) and type 2 in the Append Rows window, then click OK. You should now have two columns and four rows.
3. In the Core Controls section of the UI Controls palette, click Image and drag it to the first column cell/first row cell of the table.
4. In the Select Image window, shown in Figure 11, click Add Image.
   
   Figure 11. Select Image window
   
   
   
5. In the Import Image window, click Browse. Select a graphic from your filesystem (we'll use bloglogo.gif in this example), and then click OK to import the image.
6. In the Select Image window, select bloglogo.gif and click OK.
7. Next to the image in the first row, type Designer Hands-On Blog, as shown in Figure 12.
   
   Figure 12. Add image to page
   
   
   

Now add a view control to the page. This view will list all the blog entries that are created by a user.

1. In the Container Controls section of the UI Controls palette, click View and drag it to the fourth row and first column of the table. The Select View Query window opens:
   
   Figure 13. Select View Query window
   
   
   
2. In the Select Query for View window:
   1. In the Type of query list, select New View Query.
   2. In the Name field, type blogView.
   3. In the Outline Information section, put a checkmark next to blogEntry.
   4. Click OK.
   5. Choose File > Save, but do not close the viewBlogEntry page.

Your view control in the page editor should now look like Figure 14.

Next, update the view control to include the columns of data that you want to see.

1. Inside the view control, select the second row.
2. Choose View > Append Column. Repeat this step until you have three columns in the view.
3. Select the top row of the first column (Column1). This is the view column header.
4. In the Properties view, click the View Column Header tab.
5. In the Label field, change the default text to Author. Do not change the column headings for the second and third columns. Your screen should now look like Figure 15.
   
   Figure 15. View column data binding
   
   
   
6. In the page editor, click the Column1 view column.
7. In the Properties view, click the Data tab.
8. In the View Query Information section, verify that Column1 is selected in the View query column field, then click Edit. The Edit View Query Column window opens:
   
   Figure 16. Edit View Query Column window
   
   
   
9. In the Column name field, delete Column1 and type Author.
10. Leave String in the Data type field.
11. Select blogEntry.
12. In the Data binding tree structure, select blogEntry/s_Author[xs:string].
13. Click OK.
14. With the Author column still selected, click on the View Column tab in the Properties view.
15. On the right-hand side under Column Display, select Check box.
16. In the page editor, select the second column view.
17. In the Properties view, click the Data tab and then click Add. Your screen should look like Figure 17.
    
    Figure 17. View column data binding
    
    
    
18. Use the table below to complete the New View Query Column window, and then click OK.
    
    

    Field name	Data
    Column name	Subject
    Data type	String
    Schemas	blogEntry
    Data binding	/blogEntry/s_Subject[xs:string]

    
    
    
19. Repeat Steps 14 through 16 for the third view column, using the information in the table below.
    
    

    Field name	Data
    Column name	Date
    Data type	Date
    Schemas	blogEntry
    Data binding	/blogEntry/s_Date [xs:date]

    
    
    

Change the labels for the Subject and Date columns, if they are not labeled properly.

1. Click the Subject column header in the top row to give it focus.
2. In the Properties view, click the View Column Header tab.
3. In the Label field, type Subject.
4. Select the Date column header in the top row to give it focus. Repeat Steps 1 through 3, but this time type Date in the Label field.

To create a link to open the blog document:

1. In the page editor, select the Subject column.
2. In the Properties view, click on the View Column tab.
3. On the right side of the view, put a check in the box for Show values in this column as links.
4. For the Document open mode, select the Read-only radio button.
5. Save and close the viewBlogEntry page.

Your screen should now look like Figure 18.

6 of 12 | Previous | Next

Comments

Back to top

Table of contents

• Before you start
• Introduction
• Create a blog component using Lotus Component Designer.
• Create an XML schema for the component
• Create a page for recording blog content
• Create a page for viewing blog entries
• Add navigation options
• Deploy the blog component
• Add the blog component to a Portal Template page
• Conclusion
• Resources
• About the authors

---

6 of 12 | Previous | Next

Dig deeper into Lotus on developerWorks

IBM SmartCloud trial. No charge.

Unleash the power of hybrid cloud computing today!

---

Public and private solutions in one trial.

Special offers