ShowTable of Contents
This article will show you how you can use XPages components in IBM Mashups. It will first give you a brief overview to Components and how they can be built in Designer and then used in Composite Apps. Then we will show you how to use these same components as iWidgets in IBM Mashups.
Creating Components
In IBM Lotus Notes Domino 8.5.1 XPages components can be developed in Domino Designer. And these components can then be deployed in composite applications and Lotus Mashups. There are two screencasts available on this wiki -
http://www-10.lotus.com/ldd/ddwiki.nsf/dx/XPage_Components_in_Notes_851_Videos.htm and
http://www-10.lotus.com/ldd/ddwiki.nsf/dx/XPages_Components_in_the_Notes_8.5.1_Client_Demonstration_Video - and these demonstrates show how to create an XPages component, how to include them in a composite application, how to use component parameters to customize them, how you can integrate this component with other Notes client and web components to publish and receive events.
The components as show here can also be deployed to IBM Mashup
http://www-01.ibm.com/software/info/mashup-center/ .
Components in the XPages Demo App
The latest version of the Xpages Demo App 1.02 from OpenNTF (
http://www.openntf.org/projects/pmt.nsf/ProjectLookup/Demonstration%20Application%20for%20XPages) is a composite application and it's various pages are made up of XPages components.
And it's these components which we will be using to demonstrate how they can be used in an IBM Mashup page.
The 'xpagesDemoAppViewColumnPublish' component publishes two events, 'pubCity1' and 'pubCountry1'.
The actions for these events are configured in the 'widgetViewColumnPublish01' XPage.
These actions are configured Client Simple Actions. Here the we're using the Publish View Column Simple Action.
And here we're using the 'pubCity1' event to publish the 'City' column as a string.
For each publishing event we have a receiving event and for the above this is 'recCity' for 'pubCity1'.
The action for the 'recCity' event is, like the publishing event, configured in the 'widgetReceiveCity' XPage.
Component receiving event needs to be added first by selecting '
New Event...'. And from this case we've added an event with a server action.
Adding iWidgets to a Mashup
The latest version 2.0 of IBM Mashups has been released (
http://www-01.ibm.com/software/info/mashup-center/) and in this section we're going to demonstrate how you can take a XPages component and launch it inside a new Mashups page.
So, first step, is to create a new mashups page. Click on the Welcome Space text to show a drop down and select create a new space
Type in a Space name and choose a theme if desirable.
And save this.
Now create a new page on the new space
Now that we have a new page, we can now add iWidgets to this page, and before we can add XPages iWidgets we'll need to add these to the Catalog. The Catalog is part of the IBM Mashup Center and it's from here that widgets can be added and selected to become part of your Mashup.
So from the page select to open the Catalog.
Next we'll need to upload a XPages iWidget to the Catalog.
And then select next to upload a iWidget URL. Here add in the url to the XPages iWidget. This will be the name of the component from the database with the iWidget suffix from your Domino server. For example,
http://yourDominoServer/yourApp.nsf/yourComponent.iwidget
And from the XPages Demo App we are going to use the 'xpagesDemoAppViewColumnPublish' component -
http://ph0001a/apps/openntf/xpages.nsf/xpagesDemoAppViewColumnPublish.iwidget
You can verify that this iWidget url is correct by verifying it on a blank browser page
If the iWidget URL fails you should get something like this...
Add this URL which is to be uploaded.
Add a descriptive name to the iWidget and select Finish
Select Finish here...
The iwidget has now been successfully uploaded.
The next step is to add this to to the Mashup Builder
Here the Title and Description fields would be populated from the catalog entry. The only thing you might what to select here is the 'Category', and here we've selected 'Demo'.
And here select Finish
Now back on the Pages on the XPage space, select from the Demo drop down the iWidget just uploaded to the Mashup Builder. Select this and drop it to the page
Drag and drop the widget from the drop down to the page.
Place and resize the widget window.
Now save the changes made to the page.
and View the results
And there you have it. A Domino XPages Component in a IBM Mashup
Wiring iWidgets in a Mashup
Now that we've added a XPages iwidget to our page, we will now add two more which will receive events from the view column widget. And the two Xpages Components from the XPages Demo App we're using for this will be 'xpagesDemoAppViewColumnReceiveCity' and 'xpagesDemoAppViewColumnReceiveCountry'.
Again, verify that as iWidgets these XPages components URLs function by testing them on a blank browser page -
http://yourDominoServer/xpages.nsf/xpagesDemoAppViewColumnReceiveCity.iwidget - and
http://yourDominoServer/xpages.nsf/xpagesDemoAppViewColumnReceiveCountry.iwidget
Once you've uploaded these components add them to the Mashup builder. Here we've added them under the 'Demo' category as before.
Drag and drop these widgets to the page.
We are now going to show how you can wire these widgets up in Mashups. Bring the page back into Edit mode and on top any of the page widgets highlight and select the icon to wire the widgets.
This will launch the Wiring dialog. In this case we're starting with the wiring of the main publishing widget. And here the Wiring dialog will show the available publishing events.
Selecting one of these publishing events prompts the dialog to display the possible receiving events.
Then it's a matter of selecting the appropriate receiving event.
Do the same for the remaining publishing and receiving events on the Mashup page.
As in for the Receive Country widget.
Once you've wired up your widgets in the Mashup page, the Show Graph button on the Wiring dialog will display a representation of this wiring.
And here is the wiring in action.
Using and Sharing the Mashup Page
Now that you've created your Mashup page with XPages iWidgets you can now share this out to other users. One way to do this is by displaying the page in web page (select 'Display on a Web Page...') from the drop down on your mashup page.
This launches a floating dialog from which you can copy and paste the markup into a web page or even an XPage.