Introduction: Currently, mashup applications become more and more popular, and there are many iWidgets that can be re-used in these applications. This paper will give a very brief introduction to the IBM mashup Center and the new Xpage feature of domino designer, and then will mainly focus on how to enable iWidgets in the domino web applications, both in web page and in Xpage in the form of customer control.
1. IBM mashup Center brief
IBM mashup Center is a graphical, browser-based tool that supports easy, on the glass assembly of mashups. It includes
1. A set of out-of-the-box widgets
2. A catalog capability which supports discovery and sharing of mashup components
3. A light weight Mashup server.
A mashup is typically characterized by the lightweight integration of applications via widgets. Widgets can be mashed and wired together in the browser. They use Web technologies such as HTTP, JSON, XML, JavaScript, ATOM and RSS to deliver application content. A widget is a portable piece of code that can run in any Web application without requiring a separate compilation.
There are a number of frameworks implementing this paradigm today with significant overlap in the concepts embedded within their component models. Due to the lack of open standards, these shared concepts are all surfaced in different manners, eliminating interoperability of the components between frameworks. IBM Mashups has adopted the evolving widget specification and is based on V1.0 of this spec.
2. Domino8.5 new feature with Xpage support
From version8.5, domino provides a new Xpages feature, It provides a new tool for domino web application, with JSF support, it makes domino web application development more easy and more J2EE like.
Domino XPages contain the text and user interface (UI) controls that users interact with while working with application XPages. You can design the look and functionality of XPages before you deploy them to the target server or servers.
Controls are visual elements such as images, text, and objects that allow users to manipulate data on an XPage. Examples of controls include edit fields, buttons, drop-down lists, and links for downloading and uploading files.
A custom control is a collection of controls that are stored as a single object. Similar to IBM Lotus Domino Designer Subforms, custom controls are design elements that can be created once and add to multiple XPages. When a custom control is updated, every XPage that uses that custom control automatically gets updated with the changes. This saves design time because do not have to update each XPage separately.
3. Using iWidgets in Domino Server
This section will introduce how to enable iWidgets in domino web page.
First step, copy Mashup Enabler from IBM mashup Center into the folder “domino\data\domino\html” in domino server installation directory to set up Mashup environment in the domino server.
Figure 1. mashup files
Second step, put one or more sample iWidgets under the “html” folder also. Figure 2 shows the stock iwidget from IBM mashup Center in the folder \html\mum\widgets.
Figure 2. Sample stock iwidget
Finally, create an html file to load the iWidget. The following script must be used in the html file to include the mashup Enabler codes and bring up iWidgets on the web page.
< script language="JavaScript" type="text/javascript">
var ibmConfig = {
"com.ibm.mashups.pro
xy.url": "/xsp/proxy/BasicProxy",
"com.ibm.mashups.contextroot": "/mum",
"com.ibm.mashups.contextroot.enabler": "/mum",
};
var djConfig={
isDebug:ibmConfig.isDebug,
popupConsole:ibmConfig.popupConsole,
locale:"en-us"
};
< /script>
<  title>IBM Lotus Mashups< /title>
<  link rel="shortcut icon" href="/mum/images/favicon.ico" type="image/x-icon">
<  link rel="icon" href="/mum/images/favicon.ico" type="image/x-icon">
<  link rel="stylesheet" href="/mum/_combined.css" type="text/css">
<  link rel="stylesheet" href="/mum/js/bluedojo/dijit/themes/tundra/tundra.css" type="text/css">
<  script type="text/javascript" src='/mum/js/bluedojo/dojo/dojo.js'>< /script>
<  script language="JavaScript" type="text/javascript">
dojo.registerModulePath("com.ibm.mm.enabler","/mum/js/com/ibm/mm/enabler");
dojo.registerModulePath("com.ibm.mashups.enabler","/mum/js/com/ibm/mashups/enabler");
dojo.registerModulePath("com.ibm.mm.data","/mum/js/com/ibm/mm/data");
< /script>
<  script type="text/javascript" src="/mum/js/com/ibm/mm/enabler/enabler.js">< /script>
<  script type="text/javascript" >
dojo.registerModulePath("com.ibm.mashups.livetext","/mum/js/com/ibm/mashups/livetext");
dojo.registerModulePath("com.ibm.mm.livetext","/mum/js/com/ibm/mm/livetext");
dojo.require("com.ibm.mm.livetext.serviceImpl");
var livetextService = new com.ibm.mm.livetext.serviceImpl();
TagService = SemTagSvc = livetextService;
dojo.addOnLoad(function(){
livetextService.init();
});
< /script>
In those JavaScript code, we set the Ajax HTTP Proxy of the Mashup Enabler to point to Domino iNotes Proxy server as bellowing:"com.ibm.mashups.proxy.url": "/xsp/proxy/BasicProxy"
Actually, depends on different IBM mashup Center or Enabler versions, these JavaScript may have some differences. These codes can be fetched from IBM mashup Center Web pages directly. The following steps will tell you how to get those above JavaScript codes.
First step, startup IBM mashup Center in tomcat server.
Second step, use http://localhost:8080/mum/enabler to access mashup center as shown in Figure 3.
Figure 3. Login page of mashup center
Third step, after Login IBM Mashup center, click the “create a new page” as shown in the Figure 4. Then select the newly created page.
Figure 4. create a test page in mashup center
Finally, as shown in Figure 5, drag and drop the “stock” iwidget into the test page, the stock iwidget will be displayed in the test page as shown in the Figure 6. then Right click the test page and select the “View Source” option, the html source with the above script code will be displayed. You can just copy and paste them to your iwidget web pages.
Figure 5. the stock iwidget in the mashup center
Figure 6. View Source
After insert the Mashup Enabler initialization codes into the web
pag e, you can write html code as bellowing to load iWidgets.
《span class="mm_iWidget" sty le="color:blue;font-size:12pt;font-fam ily: courier;fact-name:Verdan" id="2" 》
《a class="mm_Definition" href="widgets/stock.xml" 》《/a》
《span class="mm_ItemSet" title="attributes"》
《a class="mm_Item" href="#company" style="visibility:hidden"》YAHOO《/a》
《a class="mm_Item" href="#stock" style="visibility:hidden"》27《/a》
《a class="mm_Item" href="#broker"style="visibility:hidden" 》Ameritrade《 /a》
《/span》
《span class="mm_ReceivedEvent" 》
《a class="mm_SourceEvent"href="#1" style="visibility:hidden" 》sendStockData《/a》
《span class="mm_TargetEvent" style="visibility:hidden" 》onGetCompanyName《/span》
《!-- one per overridden handler attribute --》
《/span》
《/span》
《span class="mm_iWidget" style="color:green;font-size:12pt;font-family: courier;fact-name:Verdan" id="1" 》
《a class="mm_Definition" href="widgets/stock.xml" 》《/a》
《span class="mm_ItemSet" title="attributes"》
《a class="mm_Item" href="#company" style="visibility:hidden" 》IBM《/a》
《a clas
s="mm_Item" href="#stock" style="visibility:hidden" 》115《/a》
《/span》
《/span》
These above codes will insert 2 instance of stock iwidget into the web page with event wring setting.
Save your web page and Start the domino server, and then open the html file in the web Browser, the 2 stock iWidgets will be shown in the page as Figure 7. Click the “Send Data” button in the stock iwidget at the bottom, the events handler defined in the stock.js will be triggered and change the data of the top stock iwidget as shown in figure 8.
Figure 7. two stock widgets in domino web page
Figure 8. the result page
4. Using iWidgets in XPage
There are two ways to enable iWidgets in XPage.
One is using customer control to contain iWidgets, The following steps introduces this method.
1. Start the domino designer and click “File” > “new” > “Application” to create a new note application as shown in Figure 9.
2. Right click “Xpages” in your newly created application to create a new xpage and copy the Mashup Enabler initialization JavaScript codes into that Xpage file in source mode as shown in Figure 10.
Figure 9.create new XPage
Figure 10. XPage with Mashup Enabler initialization codes
3. Right click “Custom Controls” below “XPages” to create 2 custom control, and copy the Stock iwidget loading and Event wiring codes into the custom control separately as shown in figure 11 and figure 12.
Figure 11. stock widget1 with event wiring
< p>
Figure 12. stock widg
et2 with event wiring
4. Drag and drop these two Custom Control into Xpage as shown in Figure 13.
Figur e 13. add Custom Control into the XPage
5. Start your Domino Server and open your XPage, you will see the similar result as figure 7.
Another method to enable the sample Stock iwidget in Xpage is to use the html file given in section 3 directly as bellowing:
1. Create a new XPage file.
2. Copy and paste the content of the html file built in section 3 into the newly created XPage file.
3. Delete the “html”, “body”, “head” tags from the XPage file as shown in Figure 14.
4. Start the domino web server and open this XPage file in web browser, those 2 sample stock iwidgets can also be loaded and run correctly.
Figure 14. part codes of the XPage file