Browser Container Tutorial

This tutorial demonstartes some of the uses of the web container component that is available with Lotus Notes 8.5 and Lotus Expeditor 6.2.

You can use the web container to extract information from a Web page. and publish information to Web based forms. This tutorial demonstrates both

sending information to, and extracting information from a web page.

Prerequisites

The HTML file attached to this tutorial contains a form that will be used to demonstrate how a container can recieve information.

When working with web containers it is useful to have tools that extract layout and field information from a Web page. The tools used to create this tutorial are available as plug-ins for Mozilla Firefox.

• Firebug - Examines HTML code

• XPather - Generates Xpath to elements in a page.

This tutorial uses the Lotus Notes 8.5 "Notes Contacts View" component, and the Generic Browser Container component. For the Web Container component we will use a Web site that displays financial information for companies, http://www.hemscott.com.

Creating the our application

1. Create a blank application and open it in the Composite Application Editor.

2. Next add two components to the application, the Generic Browser Container and the Notes Contacts View component.

3. Right-click on the browser container in the navigator and select “Edit Component Properties”. In the properties dialog, select the “Advanced" tab.

4. Change the value of the initialURL property to "http://www.hemscott.com".

5. Click OK. When the container loads again, the Hemscott home page will be displayed in the container. This page contains a search field that we will populate with a contact’s company name, from our contacts database.

Creating landmarks

1. Right-click the browser container in the navigator and select Edit Component Properties. In the properties dialog, select the Advanced tab.

2. Create a new property called “companyName”. Leave the value as “value”. This property will be used for wiring the container to the contacts component.

3. Next we Check the box in the Wireable column to set the property as wireable.

4. Switch to the “Landmarks” tab to create landmarks.

5. In the Type of Landmark dropdown menu, select “URL” and click “Add Landmark”.

6. The Landmark field should display the default URL. Add a ‘*’ to the end of the URL, so that the landmark is valid on every page that begins with the homepage URL.

7. Click “Add Event”, and select “DataChange” from the drop down menu. This data change event will be triggered when the container receives a value from the wire.

8. Next we need to do something with that value.Click “Add Operation” to add an operation. The operation will use the property created in Step 3 to receive the information, so select “Receive” from the dropdown menu. The next dropdown menu contains several IDs and names, which were extracted from the page. To select the search field enter ‘id:company-search-box’. *

Note: *To specify the search field, you can use the tools mentioned earlier in the prerequisites. You can use Firebug to find the ID of the field, or use XPather to find the Xpath location of the search field and enter “xpath:” followed by the Xpath value, instead of using the ID. The use of Xpath will be seen later in the tutorial.

9. Click OK to exit the properties dialog and save the changes.

Wiring the application

The last thing to do is create a wire between the contacts component and the container component.

1. Right-click the contacts component in the navigator and select “Wiring”.

2. Create a wire from the “Company name changed” property of the contacts component to the “Set companyName” action of the container component.

3. Click OK to save and exit wiring.

Now when we select a contact from the contacts component, the name of the contact's company will be entered in the search field of the Hemscott home page so that we can search for this company, provided of course that the company field of the contact is not empty.

The next step is to extract some information from the our container and send it to another component.

Extracting Information from the Browser Container

1. Save the form.html file attached to this tutorial to a local drive.

2. Add another web container to the application, to house the HTML file, which contains a simple form to hold the information that we will extract from the Hemscott company information page.

3. Rename the web components to avoid confusing them. Right-click the new container and select “Edit Component Properties”. In the properties dialog, select the “Component Settings” tab, change the title to “Form Page”, and click OK. Do the same for the first container, but change the title to “Stock Market Page”.

4. Change the initial URL of the Form Page container. On the Advanced tab of the components properties dialog, change the 'initialURL' preference to “C:\form.html” (assuming you added form.html file to the C drive). Click OK to save the change.

5. Set up new properties so that the Stock Market Page container can publish values. On the Advanced tab of the component properties dialog, add three new properties. Name them “name”, “stock”, and “turnover”. Make each new property wireable.

  

   

6. Create a new landmark. Select the Landmarks tab and click “Add Landmark”. The URL for this landmark will be “*hemscott.com/companies/company-summary*”. This landmark will fire when a page contains this string in its address, the company information pages all contain this string. The event to listen for is “Content Complete”, so that the operations will take place when the Web page has loaded.

7. Define the operations:

• Click “Add Operation” and select “name” from the first drop down menu. Select “Publish” from the next drop down menu, and in the next field, enter the following XPath statement: xpath:/html/body/div[@id='container']/div[@id='main']/div[1]/div[@id='company-header']/div/h1/span[2]

• Click “Add Operation” again, and select “Stock” and “Publish” a nd add the following XPath statement: xpath:/html/body/div[@id='container']/div[@id='main']/div[1]/div[@id='company-header']/p[1]/strong

• Click “Add Operation” again, and select “turnover” and “Publish”, and add the following XPath statement: xpath:/html/body/div[@id=' container']/div[@id='main']/div[1]/div[3]/div[2]/table/tbody/tr[1]/td[3].

8. Click OK to save the new landmarks.

The next step is to configure the new container to receive the values that will be published as a result of the new landmarks.

Configuring the Form Component

1. Add some new properties to the Form Page container for consuming stock information. On the advanced tab of the component properties dialog, add three new properties, “name”, “stock”, and “turnover”, and make each one wireable. These properties will receive the values from the Stock Market Page container.

2. On the Landmarks tab, set the type of landmark to “Title” and add a new landmark. The landmark title should be “StockForm”. Add a new “Data Change” event.

3. Add three new operations:

• name – receive – id:nameInput

• stock – receive – id:stockPriceInput

• turnover – receive – id:turnoverInput

    Each operation will set the value of one of the inputs in the HTML form.

   

4. Click OK to save the new landmark configuration.

Wiring the application

1. Right-click the Stock Market Page container in the navigator and select “Wiring”.

2. In the Wiring view, create three new wires:

• Stock Market Page. name         -> Form Page.Set name

• StockMarketPage.stock        -> Form Page.Set stock

• Stock Market Page.turnover    -> Form Page.Set turnover

3. Click ok to save the wires and exit the wiring view. Our application is now ready to use. Exit the composite application editor and save the changes

   

When you select a name from your contacts, that person’s company name will populate the search field of the Hemscott home page (provided the person’s contact information contains a company).

Click Go to search. When the resulting page loads, the Company Stock Info form will be populated with information about the company.