ShowTable of Contents
In this workshop the student will get familiar with the managed browser component (which is based on the Generic Container framework). The student will walk through the creation of a composite application consisting of 3 components:
a) A managed browser of the ESPN web page containing MLB player’s profile
b) A Symphony spreadsheet with the income & expense data of the player
c) A web-based form which should be filled with info from the above two components.
The conceptual use case for this application is the profile of a MLB player (from the ESPN web page) and his income/expenses data (from the Symphony spreadsheet) is carried over into the web-based form automatically. You can download this full tutorial using the Symphony document version of it attached to this page.
Steps to create application
Prerequisites
Lotus Notes 8.5.1 is needed and please make sure the Composite Application Editor feature is installed
Copy the below files to c:\ :
a) wire_in2.html
b) profile2.ods
c) spreadsheet_landmark.xml
Step 1
Creating the composite app
a) Click File menu and select “Application | New…” to open New Application dialog
b) Type the name of the composite application (e.g., Wirein-form) in the Title field
c) Filename will be automatically created in File name field
d) Choose the template of the composite application as -Blank Composite Application-
e) Click [OK] button. That will open the composite application in the Lotus Notes client.
f) Now select the menu option “Actions | Edit Application” to open the application in the Composite Application Editor (CAE).
Step 2
Assembling the application
a) Under the CAE Palette on the right of the CAE editor, drag the “Managed Browser” component (under Browser category) onto the empty canvas. A browser is shown in the canvas area (with the default homepage set as http://www.ibm.com/us/en)
b) In the tree on the left, right click on the newly added component and select “Edit Component Properties”
c) Under Component Settings tab, change the component’s Title and Description as “Player’s profile” and set its new homepage (i.e., its Initial URL) as http://sports.espn.go.com/mlb/players
d) Now drag another Managed Browser component onto the screen and make it under the “Player’s profile”, change the new browser’s component’s Initial URL as c:\wire_in2.html
e) Open one of the MLB player’s profile webpage in Player’s Profile component. Select 
button from the inline editor toolbar, deselect “datachange” and reserve “contentComplete” selected.
f) Click 
from the inline editor toolbar, and highlight the data area you want to publish and click on it. The XPath info of this data area will be shown automatically on the inline editor toolbar.
g) Type the name of the property and click 
to add the action
h) Go ahead to create other properties & actions as needed.
i) Click 
on the inline editor toolbar to save and apply the changes to the landmark after all the properties and actions have been created
j) The updated landmark then can be viewed from the “Landmarks” tab as below.
k) Now let’s go on adding properties for the form component (i.e.., the 2nd added managed browser) to receive the data. Changed this browser component’s name as “Evaluation Form” and its initial URL as c:\wire_in2.html if you have not.
l) Add the properties as below from the Advanced tab (this is an alternative way to add the properties besides thru the inline editor toolbar):
m) And add its landmark in the “Landmarks” tab as below
Step 3
Wiring the components together
a) We will now wire from the Player’s Profile to Evaluation Form in this exercise. Right click on Player’s Profile component and select Wiring.
b) Select the source property from Player’s profile component on the left side and drag it to the target property in the Evaluation Form component on the right side.
c) The result should be similar as below
d) Your application should be fully functional at this point! Close the CAE and save the application to experience it in the runtime.
Step 4
Run the composite application
a) Navigate to different MLB player’s profile webpage, the player’s profile info will be filled into the form below automatically!
Step 5
Adding one more Symphony component into this composite application
a) Now we will enhance the composite application. Open CAE again, and add a Symphony Spreadsheet Container component into the CA
b) Edit the component with its title, description and initial file as below
c) In Landmarks tab, import the spreadsheet_landmark.xml from c:\
d) The landmark should look like below
e) Wire the income and outcome property in the Income & Expense spreadsheet component to correlated properties in the Evaluation Form component together as below:
f) Now save and exit CAE, click the My Income tab and fill something under Description and Total column, the total income will be filled in the form automatically.
g) You can try similar logic in My Expenses tab. Now you get a more powerful composite application which can not only automatically fill the form (on the bottom of the application) based on the MLB player’s profile webpage, but also can get the info form the MLB player’s personal income/expenses data stored in a Symphony spreadsheet!
Summary
In this workshop, you learned how to create composite application to wire a MLB player’s profile webpage, a Symphony spreadsheet component and a web-based form together. By leveraging managed browser component, the player’s profile info and the data in the Symphony spreadsheet is filled automatically into the web-based form, which decrease the manual workload as well as the possibility of generating errors.
Ready - Creating a basic web component