XPages series #13: XPiNC app development tool
Karsten Lehmann 2 February 2012 16:24:12
I was just working on an XPiNC integration of a quite large application and had some trouble getting it to work in the Notes Client (the app was working well on the web already). Finding out why it was not working was even harder in this case than when dealing with "normal" XPages applications, because the application is not based on the Dojo web toolkit, but uses Sencha's Ext JS for the UI and is completely based on our own web app development framework.The framework does not use XPages design elements at all, but follows a simple REST API architecture with standard servlets to produce the data and user interface.
The benefit of this approach is that web applications can be developed, run and debugged from a pure Eclipse environment. They can even run on an different servlet engine than the Domino server's http task and - thanks to our data abstraction layer - they can even store the whole app data in a non-Domino database and mix/merge data between different database types.
Another benefit is that almost all the code has been written by ourselves. So it's not a kind of blackbox, made by IBM, where it's hard to work around occuring issues, but we are able to track issues down right until the service(HttpServletRequest req, HttpServletResponse response) call coming from the web container.
The downside is of course, that apps developed with the framework do not make use of IBM's XPages Extension Library, that contains various powerful UI controls. So we needed to create them ourselves.
And regarding XPiNC development, there is another downside: JavaScript errors do not get logged/displayed in the Notes Client, unless you register your own global error handler (providing a function for window.onerror).
Normal XPiNC applications do already contain such an error handler (somewhere within the XSP API object), which uses an internal bridge to post the error content to the Notes Client's status bar.
The development tool
To make development of XPiNC applications easier, I have created a small Eclipse plugin that displays three icons in the Client's toolbar:
The third icon lauches a piece of code that injects Firebug lite into the currently visible XPage:
public void run(IAction action) {
IWorkbenchPart part =
PlatformUI.getWorkbench().getActiveWorkbenchWindow().getPartService().getActivePart();
if (part instanceof XspViewPart) {
XspViewPart xPart=(XspViewPart)part;
XspXulRunnerBrowser browser=xPart.getWebBrowser();
HTMLDocument doc=browser.getDocument();
NodeList headNodes=doc.getElementsByTagName("head");
if (headNodes!=null && headNodes.getLength()>0
&& headNodes.item(0) instanceof Element) {
//add this snippet to the HTML DOM tree:
//< script type="text/javascript"
// src="https://getfirebug.com/firebug-lite.js" > < /script >
String firebugUrl="https://getfirebug.com/firebug-lite-debug.js";
Element headNode=(Element) headNodes.item(0);
Element scriptNode=doc.createElement("script");
scriptNode.setAttribute("type", "text/javascript");
scriptNode.setAttribute("src", firebugUrl);
headNode.appendChild(scriptNode);
}
}
else {
MessageDialog.openError(Display.getDefault().getActiveShell(), "Error",
"This action does only work within an XPiNC application!");
}
} The result looks like this:
Using Firebug Lite, you can easily inspect the HTML DOM tree and CSS attributes of the current page. Another very useful feature is the Console API, which you may know already from classic browser development:
it lets you write log/debug messages to the browser console (by calling console.log('...')) and has other nice features like stacktrace dumping of JavaScript calls.
To our surprise we found out that the pure Xulrunner engine, that is used to display XPages in the Notes Client, does not register the global "console" at all. So Firebug lite came to the rescue. You can find all your log messages in the Console tab.
The other two toolbar actions are even more powerful. One lets you define a custom script library URL, e.g. to a script library design element on a public or intranet web server. The other actions will then create a script tag in the current XPage that points to the library. That way, you can inject any code you like into the XPiNC application.
Download
Finally, here is the download link with the Eclipse plugin project, feature project and update site:
xpinc-firebuglite-helper.zip
Hope this helps!
- Comments [1]