ShowTable of Contents
Wiring to the side shelf in CAE
Introduction
In this workshop the student will get familiar with the side shelf feature. The student will walk through the creation of a composite application and demonstrate how to add a component into side shelf and how to use the options of the side shelf as well as the wiring to the components. The conceptual use case is - when the user clicks the name on the left sideshelf, the person’s websites (blog, facebook…) are opened in the main area and the weather of the place where the person lives is shown in the widgets on the right sideshelf. When the user switches to other Notes application, the name list component on the left sideshelf becomes invisible, while the weather component on the right sideshelf is still visible until the whole composite application is closed. Please see the screen shot below for what the composite applications looks like.
Steps to create application
Step 1 –
Installing the client
a) Install Lotus Notes 8.5.1 and make sure Composite Application Editor feature is installed
b) Copy the users.nsf file to Notes data folder. The users.nsf file will be used as the contact component in the right side bar.
Step 2
Creating the widgets
The widgets here is used to show the weather information, which is configured from this Google Gadget: http://www.notkewl.com/myWeather/myWeather.xml
Creating widgets is not the scope of this tutorial, please see below link for more details about widgets.
http://www-10.lotus.com/ldd/compappwiki.nsf/dx/using-my-widgets-in-composite-applications
Step 3 – Creating the composite applications
a) Click File menu and select “Application | New…” to open New Application dialog
b) Type the name of the composite application (e.g., MyNewCA) 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 4
Assembling the application
a) Under the CAE palette on the right of the CAE editor, drag the “Notes View Container” component (under Containers) onto the left sidebar.
b) In Sidebars in the left, right click on the newly added component and select “Edit Component Properties”
c) In the advanced properties screen we will rename our component as “My New CA” under the Component Settings tab.
d) Selecting Notes URL by clicking “Browser…” button. “Locate Object” dialog will be opened, select “view” as kind of object, click folder browser button to select users.nsf file under Notes data folder, select MainList as view, then click “OK” button to close the dialog. You can see the Notes URL has been changed.
e) Got to “Selection Output” tab, click “Add” button, input “ZipCode” as Property name, select Formula as Type and select “ZipCode” as Formula. Add items for “Blog”, “Facebook” and “Twitter” as below screen shot shown.
f) Now drag 3 Managed Browser components onto blank canvas and make them appear under one tab folder.
g) Rich click the Blank Page, select “Rename…” menu item to make the tree node editable, input “websites” and press Enter key or just click other blank place to finish the rename operation.
h) Right click on one of newly added Managed Browsers in the left tree and select its “Edit Components Properties”. Change the name to “Blog” and change the description to “This component shows the blog page”. Change the Initial URL to “about:blank”.
i) Go to “Advanced” tab, changes the value of preferences “showURLEntry” and “showToolBar” to false.
j) Repeat Steps g), h) and i) on the rest 2 Managed Browsers, but rename them to “Facebook” and “Twitter”.
k) Change Palette to “My Palette” by selecting “My Palette” in component Palette combox. Drag the weather component to left side shelf.
l) Right Click the newly added theWeather component and select “Edit Component Properties” to open Properties dialog. Select “Whenever this application is open” radio on Component Visibility group.
Step 5
Wiring the components together
a) We will only be wiring from the My New CA in side bar to the 3 Managed Browsers in this exercise. Right click on the My New CA in left side bar, select “Edit Wiring” from pop-up menu to have wiring dialog opened.
b) Click “Disable restrict type checking” button on the lower right of the pane. Drag “Blog” attribute in the Source component “contacts” and drop it to attribute “Set URL to the browser and load” of Blog. You would see a wiring connect “Blog” to “Set URL to browser and load”. Drag “Facebook” attributes and drop it to attribute “Set URL to the browser and load” of Facebook component. Drag “Twitter” attributes and drop it to attribute “Set URL to the browser and load” of Twitter component. Drag “ZipCode” to “Zip_/_Location“of theWeather component. Then the wirings created look like below screen shot shown.
c) Click the “Apply” button to save the wiring. Click File->Save and Close menu to save and exit CAE.
Step 6
Run the composite application
a) Click on different person name on the left side, the related websites would be displayed and the weather information of city the person lives would be shown up in the right side bar.
b) Switch to other tab, the Weather component is still visible; however, the contact list is invisible.
Summary
In this workshop, you learned how to add a component on the sideshelf within a composite application, configure the sideshelf component to communicate with other components, as well as control the visibility of the sideshelf components through different options.