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 as Client Simple Actions. Here the we're using the Publish View Column Simple Action.

We're using the 'pubCity1' event to publish the 'City' column from the view panel as a string.

For each publishing event we have a receiving event and for the above this is 'recCity' for 'pubCity1' in the 'xpagesDemoAppViewColumnReceiveCity' component.


The action for the 'recCity' event is, like the publishing event, configured in a XPages called 'widgetReceiveCity'.

Component receiving event needs to be added first by selecting 'New Event...'. And from this 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...

...by inputting a page into the edit box that appears. Hitting the Enter key saves this page.




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 for XPages Components we're going to select the 'iWidget URL' option.


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 - i.e. the Domino Server name plus the Domino Application NSF name plus the name of the Component plus iwidget. For example, http://yourDominoServer/yourApp.nsf/yourComponentName.iwidget
And from the XPages Demo App we are going to use the 'xpagesDemoAppViewColumnPublish' component which will become - http://theDominoServer/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 returned...



Add this URL which is to be uploaded.


Add a descriptive name to the iWidget and then select Finish


A Success page should now appear with a list of options on what to do next with the uploaded widget in the Catalog.



We're going to now add this widget to the Mashup Builder


Here the Title and Description fields would be pre-populated from the catalog entry. The only thing you might what to select here is the 'Category'. We're selecting 'Demo' here.
And here select Finish


Another Success page will now appear stating that we've added the widget to the Mashup builder.



Now back on the 'XPages iWidget' page on the XPage space, select from the Demo drop down the widget just uploaded to the Mashup Builder. Select this and drop it to the page


Drag and drop the widget from the drop down to anywhere on the page.


Place and resize the widget window.


Now save the changes made to the page.


and View the results


You've done 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.


Do the same as 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.


Select Done on the Wiring dialog, save the changes and view these changes.

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.