Lab 09 XPages Composite Application Components.pdf

7/29/2019 Lab 09 XPages Composite Application Components.pdf

1/23

Domino's XPages Workshop

Lab Manual

Lab 9

XPages Composite Application

Components

COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 9 IBM ISV & DEVELOPER RELATIONS.

Page 1 of 23


2/23

Introduction:

XPages are now able to be customized as components, and can be implemented in Composite

Applications. This opens up new extensibility and scalable communications through the property broker.

Description:

This lab will walk you through the creation and manipulation of XPages as components of Composite

Applications.

Objective:

At the end of the lab, you should be able to:

Create a Component from an XPage application

Interact to other components through the property broker

Integrate the XPage component with a widget

Procedure:

SECTION 1: XPAGE COMPONENT

In this section you will learn how to componentize your XPages application. We

will re-use and assemble XPages components together with NSF and Webcomponents into a Composite Application.

Step 1 OpenDomino Designerfrom the desktop icon.

Step 2 Open yourxScrapbook application.

Step 3 Navigate to CompositeApplications > Components. Right-click on New Component.

Step 4 Name the new component MyViewComponent.


Page 2 of 23


3/23

Step 5 Select results as the XPage to use forView mode.

Step 6 Save the new component and navigate back to Lotus Notes. Create a new CompositeApplication MyScrapbookCA there. Select the Blank Composite Application template forthe new application.


Page 3 of 23


4/23

Step 7 The application opens in read mode, displaying an empty page. From the Actions menu,select Edit Application:

Step 8 From the right-hand palette, select My Palette, then, from the Add Component drop-down,select Add NSF Component.

Step 9 Name the new component MyScrapbook.Select Browse and from the Domino server choose your Scrapbook application. Locate theMyViewComponent.component element. Click OK twice.


Page 4 of 23


5/23

NOTE: You might notice the effect that, although you have selected theScrapbook application on the server, the Filename still points to some otherdatabase.

This effect has been reported to mostly occur in a VMWare scenario. To fix it,proceed with the following steps:

Close both Domino Designer and Lotus Notes.

Shutdown Lotus Domino (quit on the console) and restart the server.

Open the Composite Application in Notes and try again.

Step 10 Drag the MyScrapbook component from the right-hand palette into the empty middle area ofyour screen and drop it there. The result should look like this:


Page 5 of 23


6/23

Step 11 Click File > Save and Close. The application is getting opened in Notes.

NOTE: Notice that the previously displayed authentication dialog when youtested your XPage in a web browser has been skipped. In Lotus Notes, you arealready authenticated since you logged in.

This ID based authentication has been automatically mapped to thecorresponding Internet authentication a real Single SignOn!

SECTION 2: INTERFACINGWITH COMPOSITE APPLICATIONS

In this section, you will wire our previously XPages component to interact withyour inbox within a Composite Aplication.


Page 6 of 23


7/23

Step 1 Switch back to edit mode (via Actions > Edit Application), then right-click to Blank Page inthe left-hand navigator. Select Edit Page Properties.

Step 2 Name the page MyScrapbook.

Step 3 Save and Close your application. Notice that the tab name has been changed. While havingthe Scrapbook application opened in Notes, select Actions > Edit Application from the mainmenu.

Step 4 From the right-hand Component Palette switch to Component Library.


Page 7 of 23


8/23

Step 5 Drag the Notes Mail View component to the lower end of the middle area and drop it there.The result should look like this:

Step 6 Save and Close the editor.

Step 7 Switch back to Domino Designer and navigate to the MyViewComponent component. Add anevent sendTo which publishes a String property. Save the component.


Page 8 of 23


9/23

Step 8 Navigate to your custom controls. Open the profileForm.

Step 9 Next to the Email edit box, create a Send Email URL Link control.


Page 9 of 23


10/23

Step 10 Assign a new client-side Simple Action to that link. From the Category drop-down, selectComponent and let the link publish our new component property:

Step 11 Select Compute value to specify the Event Value.


Page 10 of 23


11/23

Step 12 Add the following code:

Step 13 Click OK and save the XPage. Back in Lotus Notes, turn your application into edit mode again.

Step 14 Right-click on the MyScrapbook page, then select Wiring from the menu.


Page 11 of 23


12/23

Step 15 Click the Disable strict type checking button on the lower end of the page. Then, drag thesendTo property from MyScrapbook onto the second Create new memo usingmailto actionof the Notes Mail View.

Step 16 Close the Wiring tab, then Save and Close the editor. The application comes up in Notes.Open a profile (e.g. Max Mustermann) and click on Send Email.

Step 17 A new mail should be created.

Step 18 Navigate back to the MyViewComponent component in Domino Designer. Add a secondevent authorEvent, which consumes a property sent from outside.

Step 19 Save the component. Then, right-click to the Custom Controls element in the navigator andselect New Custom Control.

Step 20 Name the new control authorEventHandler.


Page 12 of 23


13/23

Step 21 From the Events tab, create a New Component Event and name it authorEvent.

Step 22 We will add two Server-side Simple Actions there. First, let the event trigger a scriptexecution:


Page 13 of 23


14/23

Step 23 Second, let the event open the results page.

Step 24 Save and close the newly created custom control. Open the containercustom control. Dragthe authorEventHandlercustom control to the end of the current control.

Step 25 As the result, you should see the embedded custom control both on the page and as part of theOutline.


Page 14 of 23


15/23

Step 26 Save and close the current custom control.

Step 27 Back in Lotus Notes, edit your Composite Application again. Right-click on the MyScrapbookpage, then select Wiring from the menu.

Step 28 Right-click on the Notes Mail View component and click on Select as wire source.

Step 29 Drag the From property from the Notes Mail View onto the authorEvent action of theMyScrapbook component.

Step 30 Close the Wiring editor, then Save and Close the Composite Application Editor.

Step 31 From the application, create a Scrapbook profile for Domino Admin.


Page 15 of 23


16/23

Step 32 From the Inbox component, create two new mails: one sent to you, the other one sent tosomeone you might imagine (e.g. [email protected]).

At least one of the mails should contain the name of an (English) colleague - John Doe is agood example. The purpose of this will become more clearly in the next exercises.

Step 33 After sending, you should have two mails in your inbox (OK, the second one is a router-

generated delivery error, but just to show). Click on the mail you have sent to yourself.

NOTE: The corresponding profile from Scrapbook if existing - should beopened, while the search for Mail Router doesnt return any match.

SECTION 3: WIDGET WIRING

In this section you will learn how to componentize your XPages application.We will re-use and assemble XPages components together with NSF and Webcomponents into a Composite Application.

Step 1 Open the Lotus Notes preferences by selecting File > Preferences.


Page 16 of 23


17/23

Step 2 Navigate to the Widgets section. Enable the Show Widget Toolbar and the My WidgetsSidebar panel option.

Step 3 Save and close the preferences. Notice the new My Widgets sidebar component. From theupper right component header menu, select Get Started

Step 4 Our widget will consume a Web Page, therefore select the Web Page option.

Step 5 Specify www.yasni.com as our Web source.

Step 6 Specify a HTTP POST as the submit option of choice.


Page 17 of 23


18/23

Step 7 From the list of forms, select the one available. Click Next.

Step 8 Navigate to the Advanced tag and enable the Configure name property.

Step 9 Finish your widget creation.

Step 10 Open yourMyScrapbookCA application in Composite Application Editor (via Actions > EditApplication). Select My Palette from the right-hand menu and notice the now available widget

you created before.


Page 18 of 23


19/23


20/23

Step 16 Navigate to data\varand name the view collection variable rowData.

Step 17 Right-click to the Email column of the view and select Insert Column from the menu.

Step 18 Navigate to the View Column Headersection of the Properties and label it Search Yasni.


Page 20 of 23


21/23


22/23

Step 22 We will publish our component property searchTopic there:

Step 23 Add the following Event Value code:

Step 24 Let the property get published by clicking a link:

Step 25 Save and close the searchResults custom control.

Step 26 Back in Lotus Notes, open your Composite Application in edit mode. Open the Wiring editoragain. Connect the searchTopic property to the name action.

Step 27 Re-arrange (if you want) and test the resulting application.


Page 22 of 23


23/23

NOTE: The Search Yasni link should initiate a Yasni search based on theprofile chosen and return the corresponding results.

Summary:

Congratulations! You have completed the Comp App Components lab.

In this lab, you completed the following procedures:

Created a Comp App component from an XPage

Wired an action to and from this component to communicate inside theapplication.

Wired the XPage to a Widget

COPYRIGHT IBM CORPORATION 2010 ALL RIGHTS RESERVED LAB 9 IBM ISV & DEVELOPER RELATIONS

Page 23 of 23

Lab 09 XPages Composite Application Components.pdf

Documents

Transcript of Lab 09 XPages Composite Application Components.pdf