|
This tutorial will show how a Notes NSF can be used as both a database with fields and views, as well as a composite application. Components in the composite application can then use the underlying database content in the application.
In Section 1 basic overview information is provided and the sample application is introduced.
In Section 2 the Composite Application will be edited in Domino Designer so that the underlying Notes NSF database can be modified. Database fields, a form, a view, and actions will be created.
In Section 3 the Composite Application will be edited in the Composite Application Editor so the application can be assembled. A Notes container using the new view will be added to the composite application, as well as browser components provided with the tooling. These components will then be wired together.
The sample application
The sample application is a "Social Dashboard" that contains a list of contacts and their associated social networking site links.
The layout of the final application will look similar to this:
Clicking on a user in the contact list on the left will load their associated site links in the browser tabs on the right.
Planning the Social Dashboard application
Design elements:
- The contact list data will be stored in the composite application, in the underlying Notes NSF database.
- A form "SocialForm" will be created with fields for each of: Name, Blog, LinkedIn, Facebook, Technorati, Twitter, PlanetLotus. Each entry (contact) in the database will have each of these fields defined.
- A view "MainList" will be created to display these database fields, using the Name field as the displayed entry in the list.
- Actions will be added to the "MainList" view, to display the "SocialForm" form and add/remove/update data entries.
Composite application elements:
- A Notes container component will be added to the application to display the "MainList" view.
- Actions will be created to map the database fields to properties in the Notes container.
- Managed Browser components will be added to the application.
- Wires will be added from the container to the browsers to display the corresponding URLs.
Section 2:
Building the components
Create a new composite application
Launch IBM Lotus Domino Designer.
(This step could also be performed in IBM Lotus Notes, however following steps will require the application to be opened in Domino Designer.)
From the “File” menu choose “Application” then “New” to open the New Application dialog.
Specify the Title “Social Dashboard” (which will update the File name field to “Social Dashboard.nsf”). Specify the Template type as “Blank Composite Application”.
Choose “OK’ to close the dialog and create the application. The application will open in the Applications view, and in the main editing view.
There are two main design elements to be created in Domino Designer. A view will display the list of contacts in the database, and a form will display the URLs for an individual contact. The form will be created first since the fields used by both sections will be created on the form.
Create the Social Form
The Social Form will allow viewing and editing of a contact’s URL entries. It will be displayed as a dialog opened by action code that will be written later.
Create a new form
In the newly created “Social Dashboard” application in the main editor section, click the “New Form” button.
The New Form dialog will appear. Name the new form “Social Form” with an alias “sForm”.
Click OK to finish the form creation. The Social Form will be added under “Forms” in the Applications view, and opened in the main editor.
Create the layout region
With the Social form opened in the main editor, from the “Create” menu choose “Layout Region” then “New Layout Region”.
Expand the layout area by clicking and dragging the black squares.
Right click in the layout region and choose “Layout properties”.
The Layout properties dialog will appear.
Deselect “Show border” and select “3D style”.
After making the selections close the Layout dialog.
Add a new label and field
Click within the layout region to select it, and then from the “Create” menu choose “Layout Region” then “Text”.
Click to drag and resize the new text label as appropriate. Right click the object and choose “Object properties” to see the Object dialog. Change the Text property to “Name”
On the next tab you can change the text font. In this case it is changed to bold:
After making selections close the properties dialog. You should see the updated name label.
Click within the layout region to select it, and then from the Create menu choose “Field” to create a field object.
Click to drag and resize the new field as appropriate. Right click the field and choose “Object properties” to see the Field dialog. Change the Name property to “Name”
After making selections close the properties dialog. You should see the updated name label.
Create remaining labels and fields
Repeat the above steps to create a text label and a field for each of:
Blog
LinkedIn
Facebook
Technorati
Twitter
PlanetLotus
Review and save the form
Move and resize the labels and fields as appropriate.
(If manually editing the size and position properties via the object properties dialog, you can leave it open while clicking between labels and fields to more easily make the edits.)
The final form should look similar to the following:
Save the form.
Create the MainList view
This will be the view of the contacts in the database. This view will be displayed in the Composite Application.
Create a new view
In the Applications pane, expand the “Views” category.
Right click on the default “(untitled)” view and choose Rename. Rename it to “MainList”.
Click “OK” to close the dialog and complete the rename.
Edit the column properties
Double click the MainList view to open it in the main editor. A Column properties dialog will appear. (If closed you can reopen by right-clicking the column header in the upper left section of the view, and choosing “Column Properties”)
On the Column Info tab, change the Title to “ContactList”.
On the Sorting tab, change the Sort type to “Ascending”.
Edit the view properties
Switch from Contact properties to View properties in the dialog by selecting the arrow in the upper left of the dialog, and changing from “Column” to “View”
(An alternate method, if the dialog is closed is to right-click in the view and choose “View properties”)
On the Style tab, choose a color for “Alternate rows” to distinguish list elements more easily.
Close the dialog.
Set the value to display in the list
From the Objects tab, under “ContactList (Column)”, choose “Column Value”.
In the panel on the right choose the “Field” radio button.
From the Field list, select Name.
Save the view to save progress until this point.
Add code to display the edit dialog
Code will be added that will be called when a user double clicks a contact (or chooses “Open” or “Edit” via other menu options).
From the Objects tab, under “MainList (View)”, choose “Queryopendocument”.
In the code panel on the right, remove the existing code and paste the following:
Sub Queryopendocument(Source As Notesuiview, Continue As Variant)
Dim ws As New NotesUIWorkspace
If Source.Documents.GetFirstDocument Is Nothing Then
Continue = False
Return
End If
Dim doc As NotesDocument
Set doc = Source.Documents.GetFirstDocument
flag = ws.DialogBox("sForm",True,True,,,,,"Edit Person",doc)
If flag = True Then
doc.Save True, False
ws.ViewRebuild
ws.ViewRefresh
End If
Continue = False
End Sub
Save the view.
Create the new button
From the main panel right click and choose “Create Action”.
The Action properties dialog will appear.
Set the Name to “New”.
Ensure the Type is set to “Button”.
Check the box to "Include action in Action bar" and to "Only show icon in Action bar".
Select the "Notes" icon type.
Click the arrow selector by "Icon" to choose a new icon.
Close the Action properties dialog.
Add code for the new button
The New action should be selected in the Objects tab. Select the “Click” action.
In the code pane to the right, change the type from “Formula” to “Lotus Script”.
Remove the existing code and paste the following:
Sub Click(Source As Button)
Dim session As New NotesSession
Dim ws As New NotesUIWorkspace
Dim db As NotesDatabase
Dim doc As NotesDocument
Set db = session.CurrentDatabase
Set doc = db.CreateDocument
flag = ws.DialogBox( "sForm",True,True,,,,,"New Person",doc)
If flag = True Then
doc.Save True, False
ws.ViewRebuild
ws.CurrentView.View.Refresh
End If
End Sub
Create the delete button
From the right panel of the MainList view, right click and choose “Insert System Actions”
From the system actions that appear in the list, right-click the Delete item and choose “Action Properties”.
The Action properties dialog will appear.
Check the box to "Include action in Action bar" and to "Only show icon in Action bar".
Select the "Notes" icon type.
Click the arrow selector by "Icon" to choose a delete icon.
Close the dialog.
Save the changes.
The design updates are now complete. The remainder of the tutorial will use the IBM Lotus Notes client and the Composite Application editor.
Section 3:
Assembling the application
Open the application for editing
Launch IBM Lotus Notes.
From the “File” menu choose “Application” then “Open” and choose the “Social Dashboard” application.
From the “Actions” menu choose “Edit Application” to open the Composite Application Editor.
Add the Notes container and action data
Add the MainList view to the application
From the Component Palette, select the “Notes View Container".
Drag and drop this item onto the empty canvas in the center of the screen.
In the Page Navigator on the left, a "Notes View Container" will be added.
Right click this container and select “Edit Component Properties”.
The Edit Component Properties dialog will appear.
On the "Component Settings" tab, click the "Browse" button next to the "Notes URL" field. The Locate Object dialog will appear.
Under application choose "- Current database -".
Select the OK button. Your Notes URL field will be automatically updated. Remove the “?” and all following text and replace it with:
/MainList?OpenView
Your final Notes URL should look like the following:
On the Advanced tab, change the “com.ibm.notes.viewCustomization.hideActionBar” value to “false”.
Click OK to close the Edit Component Properties dialog.
You should now see the view in the canvas.
Add a test user
Using the new view, click the add button, and from the Social Form view add a new person entry.
An example user:
Create formula actions for each field
In this section we will be creating properties for each of the fields on the note. This will allow us to wire these properties later to the web browser components.
- In the upper left of the view container on the Canvas, custom action mappings can be created.
- On the left is a typed in action name that will be used later for wiring.
- In the middle is a dropdown selection list where Formula will be chosen.
- On the right is a dropdown selection list of fields and entries defined in the database where the fields created in part two will be chosen.
Create an action mapping for the “Blog” action name, of the type “Formula”, to the “Blog” field entry found in the database.
Click the “Add Action” button on the right to add the action to the list.
Repeat this for each of the types:
LinkedIn
Facebook
Technorati
Twitter
PlanetLotus
When all the entries have been added, click the “Save and Apply changes” button (to the right of the “Add Action” button).
Verify all of the actions have been added correctly by opening the Edit Component Properties dialog. (Right-click the Notes View Container in the Page Navigator and choose “Edit Component Properties”.) The entries just created will appear on the “Selection Output” tab.
Actions can also be added or edited directly from this page.
Add browser components and wiring
Add Managed Browsers to the application
In the upper left of the view container on the Canvas, create a formula entry mapping from the
From the Component Palette, select the “Managed Browser".
Drag this item onto the canvas at the right edge of the Notes View Container. When you see a black arrow pointing right and the highlight of the new view taking up half the screen complete the drop. The two components will now appear side by side.
Right click the “Managed Browser” that is now in the Page Navigator and choose to “Edit Component Properties”. On the “Component Settings” tab change the title to “Blog” so this browser will be distinguishable from other browsers. Choose OK to close the settings dialog. The name in the page navigator will be the new title.
Drag another Managed Browser onto the canvas to the title section of the existing Managed Browser so that the browser tabs will stack. Repeat this process, with changing the title for each browser, until you have created browser tabs for each of:
LinkedIn
Facebook
Technorati
Twitter
PlanetLotus
Create the composite application wiring
Choose “Blank Page” in the Page Navigator and right-click to choose “Wiring”.
This Wiring tool will be opened. Wires will be defined from the MainList container’s actions defined earlier to each of the browsers.
The wire source component will be selected in blue and on the left of the screen. If the Notes View Container is not already selected as the source, right-click its title bar and choose “Select as wire source”.
Select the “Disable strict type checking” button in the lower left to turn type checking off.
Similar to dragging and dropping to the canvas, the wires will be dragged from the source action to the destination property. Create a wire from the Notes View Container component’s “Blog” action entry to the Blog component’s “Set URL to browser and load” property entry. The wire will appear as a dotted line and the two entries will appear with a wire icon:
Repeat the process for each of the fields:
From the Notes View Container component’s “LinkedIn” action entry
to the LinkedIn component’s “Set URL to browser and load” property entry.
From the Notes View Container component’s “Facebook” action entry
to the Facebook component’s “Set URL to browser and load” property entry.
From the Notes View Container component’s “Technorati” action entry
to the Technorati component’s “Set URL to browser and load” property entry.
From the Notes View Container component’s “Twitter” action entry
to the Twitter component’s “Set URL to browser and load” property entry.
From the Notes View Container component’s “PlanetLotus” action entry
to the PlanetLotus component’s “Set URL to browser and load” property entry.
Select the “View All Wires” button on the upper left of the Wiring page to verify all the wires have been created properly:
Close the View All Wires dialog.
Choose Apply to save the wiring changes, then close the wiring tab.
Rename the application
Choose “Blank Page” in the Page Navigator and right-click to choose rename and give the application the name "Social Dashboard".
Verify the application
The application creation is now finished.
From the “File” menu choose “Save and Close” to save the changes to your application, close the Composite Application Editor, and reopen the application in the Lotus Notes client.
When a user is selected, their corresponding sites should appear in the browser tabs:
Summary
This tutorial showed how you can use the Notes view container, Lotus Script and browser components to create a hybrid application. This pattern can be used for many different kinds of applications. |