203 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
Bleedyellow.com has a new home
Sat, Nov 11th 2017 11
Life sign / Major update for Domino JNA on Github
Fri, Nov 10th 2017 10
New APIs for Domino JNA project, now available for XPages development
Mon, Jan 16th 2017 3
New APIs for Domino JNA project, now available for XPages development
Mon, Jan 16th 2017 2
My latest wish list for the Domino Java API
Thu, Nov 3rd 2016 4
My latest wish list for the Domino Java API
Thu, Nov 3rd 2016 3
Big update for Domino JNA project on Github
Mon, Jul 11th 2016 2
Top 10
Bleedyellow.com has a new home
Sat, Nov 11th 2017 11
Life sign / Major update for Domino JNA on Github
Fri, Nov 10th 2017 10
Tools we use to build web apps
Sun, Sep 21st 2014 7
XSS security fix in Domino R9 HTTP server may break existing web applications
Mon, Jun 3rd 2013 6
Quick tip: Fixing Dojo drag and drop issues in a Windows 8 VMWare on the Mac
Thu, Mar 7th 2013 6
Fast Notes view reading via Java API:New ViewNavigator cache methods in 8.5.3
Thu, Jan 17th 2013 6
Download links for IBM Connect 2013 session slides
Thu, Jan 31st 2013 5
Notes 9.0.1 64 bit for Mac OS X 10.11 El Capitan now available - warning our customer NOT to update for 30+ days!
Tue, Sep 29th 2015 5
New on Github: Domino JNA - Cross-platform access to IBM Notes/Domino C API methods from Java
Fri, Apr 8th 2016 5
Big update for Domino JNA project on Github
Mon, Jul 11th 2016 5


Customer project: Dojo 1.8 based portal on top of XPages and Domino 8.5.3
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
Karsten Lehmann    

The last months have been incredibly busy for us at Mindoo and I could not find much time for blogging. Tweeting about my findings on the web is just so much easier than to write a complete blog article.

We spent most of our time working on web applications for desktop browsers and the iPad (including Retina support), based on our favorite web toolkits Ext.JS from Sencha as well as the Dojo toolkit.
Since we like cutting edge development, we prefer to use the latest versions of toolkits. For Sencha Touch, this means 2.0.x, Ext.JS is available in version 4.1.x and for Dojo it's the brand new version 1.8 that we already used for a portal framework development during the past 3 weeks.

Portal framework


This portal framework is a customer project, so there is not much code I can share (I will try to write blog entries about specific technologies).
But I can describe the basic ideas in this blog post and provide some links to useful toolkits that helped us building the app.

The portal leverages Dojo's dojox.layout.GridContainer (click here for a portal sample app) to build the portal UI. Portlets can have two different render modes: IFrame and inline rendering. In IFrame rendering mode, the portlet content is completely independent from the parent page; in inline rendering mode, the portlet code can directly render its content into the container node of a dojox.widget.Portlet within the portal page.

The portal page acts as a communication mediator between the portlets (both with IFrame and inline rendering). Portlets can send JSON based messages to the portal, which - depending on the message content - can send a response to the portlet (e.g. to return loaded portlet state information), forward the message to another portlet (to update another portlets state) or send out a broadcast message to all portlets in the page (e.g. to publish selection changes in a Dojo grid).

More or less, the portal acts like a Composite Application on steroids. :-)
 
Cross-domain security


While sending messages between portlets with inline rendering is quite easy, we needed to find a way to cross the IFrame boundaries in order to send data from IFrame content to the main page back and forth.
This is not that easy, because browsers prevent this kind of communication to avoid cross-domain security issues.

Fortunately, there is easyxdm, a Javascript library that contains several solutions for cross-domain communication and automatically picks the right one for the current browser.

Portlet content rendering


Loading the portlet content for IFrame rendering mode is quite easy. All you need to do is create an IFRAME node with JavaScript and set its src attribute to the remote content URL.
This way, portlet content can get generated in external databases or even on different servers (including servers that are not Domino based).

This works quite well on desktop browsers. They have a good internet connection and plenty of RAM, so it's not a problem to load newer or older Dojo versions or other toolkits as part of the IFrame content.
Scrolling content that is larger than the portlet viewport is quite easy as well. This is all handled automatically by the desktop browser.

Unfortunately, this approach did not work well on mobile devices. Scrolling content with a Swipe gesture did not work at all and we noticed rendering issues: in many cases, the IFrame content did not render properly.
That lead us to the development of inline rendering mode: The whole portal content is stored in one DOM tree and shares the portal's Dojo 1.8 framework.
This is good and bad at the same time: Page load is faster, but portlets needs to be developed in a way that they don't interfere with each other and only load required resources once (like JavaScript code or CSS files).

In addition to adding the inline rendering mode, additional tweaks had to be applied to the portal rendering in order to support drag&drop of portlets on the iPad (Dojo's GridContainer layout is pretty hardcoded to mouse events) and change the portal column width with a pinch gesture.
To drag&drop portlets, we implemented a special edit mode, comparable to the "jiggle mode" in the springboard on iOS devices: Portlets in edit mode get a CSS based jiggle animation to illustrate that they can get moved with a swipe gesture (tap on the portlet and drag it to the target location).

Dynamic classloading

To implement the inline rendering mode of portlets in a clean way, we built the whole portal framework on top of Dojo's new AMD classloader architecture. This lets us define classes, implement class inheritance and lazily load portlet code so that it gets loaded when it is required for the first time, speeding up overall page load.
By following a tutorial on the Dojo website, we could also load specific classes from different locations than the portal page itself. This enables us to separate the portal code from the actual portlet code, making the application reusable and easy to extend.

In addition, we used the Ensure library to coordinate the loading of resources that are required for the portlet rendering process: Portlets send a JSON message to the portal with a list of required HTML, JS and CSS files and the portal only loads files that have not been fetched for other portlets before.
When all resources are loaded, Ensure calls our callback function which then notifies the portlet that all resources have been loaded and content rendering can start.

Modality


Portlets can be configured to be modal. A modal portlet gets displayed in a Dojo dialog on desktop browsers (including dialog-in-dialog) and gets opened in a separate dojox.mobile.View with transition effect on the iPad in order to use all the real estate on the iPad screen. Since portlets can exchange data via the portal page mediator, this can be used to provide special settings portlets to configure one portlet from another one.
Our first 'real life' portlets use this modality feature to display a list of documents in a document library database. A click on a list entry displays detail information of the entry in a separate dialog / mobile view including the full document richtext with inline images and attachments (leveraging a nice hidden url syntax of Domino).
Both the list and detail portlet use Dojo's powerful Django template language to generate the HTML content.

Backend


The portal and portlet code and data are stored in a Lotus Domino 8.5.3 server.

As you might know, Lotus Domino 8.5.3 contains Dojo version 1.6.x as part of the XPages runtime environment. That version is already pretty outdated and not sufficient for our portal framework usecase (e.g. no dojox.mobile.ScrollablePane).
There is some hope that 8.5.4 will contain Dojo 1.8, but we could not wait until Q1/2013 for the 8.5.4 release (the world out there does not wait for IBM dev).
Replacing the existing Dojo version of the server with a newer one is more or less a hack and not supported as well, so we decided to render the whole portal UI in our own code and develop a set of REST services to communicate between frontend and backend code.

Content rendering is done in an XAgent style XPage. The page loads one or more files from the database design (added in the Java perspective of Domino Designer), parses placeholders in the text content with a regular expression (e.g. to include other files or insert paths and multilingual text phrases coming from property files in the database design) and sends the output to the browser.

We've got REST services to load/store information about all the portlets on the portal page. Each portlet has a state and appearance information as a JSON object (the latter e.g. to store in which column of the portal a portlet should be displayed).
The REST services are implemented with a Java control similar to IBM's rest service in the Extension Library (using the XPages extensibility API), but we removed the SSJS functionality from the control and directly call Java code (that's much cleaner than writing SSJS code that then calls our Java classes).

For each portlet instance, we create a Notes document in the database. There is a document to store the overall state of the portal page itself and there are configuration documents in the database to configure which portlets can be added to the page by the current user.
By replacing the backend storage code, portlet data can optionally be stored temporarily in the user session (sessionScope, viewScope). And since the whole framework is developed in a modular way, the portal UI can also be replaced by something else, e.g. to display new tabs instead of portlets. Actually, we don't use the terms "portal" and "portlet" in the framework. They are called "WorkbenchPage" and "ViewPart", similar to Eclipse terminology and displaying them in a portal layout is just a single use case.  

Summary

Developing this application was really fun, especially the iPad and CSS animation part.
The only thing that was a real PITA was to get the whole stuff working on Internet Explorer 7 (fortunately, only the desktop part, not iPad mode).

Hopefully, some of the concepts and links in this article are helpful for others as well, although there is not a single line of code in it. :-)


---------------------
http://www.mindoo.com/web/blog.nsf/dx/18.09.2012001300KLEU38.htm
Sep 17, 2012
3 hits



Recent Blog Posts
11
Bleedyellow.com has a new home
Sat, Nov 11th 2017 11:16a   Karsten Lehmann
It took some time and the domain transfer is not 100% complete, but bleedyellow.com is on it's way from René Winkelmeyer to Mindoo. Our blog is currently configured to be the default website on www.bleedyellow.com We do not have any plans yet for the domain, but did not want to let it expire. If you have any suggestions, feel free to comment.
10
Life sign / Major update for Domino JNA on Github
Fri, Nov 10th 2017 4:25p   Karsten Lehmann
Wow - I haven't written a blog post in the last 9 months! It's just so much easier to write a Tweet than to produce long articles, when I split the week between three customers and my family with two children. Just wanted to let you know that we are alive and kicking and still doing very much Domino related work! :-) Technologies have as always shifted a bit. Most of the time we create pure JavaEE projects now for our customer web apps, developed in Eclipse and not Domino Designer (ok, u
3
New APIs for Domino JNA project, now available for XPages development
Mon, Jan 16th 2017 8:21a   Karsten Lehmann
It took some time (mainly because I was very busy and my main use case for the project is not XPages), but now the Domino JNA project is available for XPages development. That means that there is an XPages Extensibility API plugin available in the project's release section on Github that can be installed both in Domino Designer and on the Domino R9 server to use the API in your own applications. After installation, the API classes are available in SSJS and Java code including API source c
2
New APIs for Domino JNA project, now available for XPages development
Mon, Jan 16th 2017 6:21a   Karsten Lehmann
It took some time (mainly because I was very busy and my main use case for the project is not XPages), but now the Domino JNA project is available for XPages development. That means that there is an XPages Extensibility API plugin available in the project's release section on Github that can be installed both in Domino Designer and on the Domino R9 server to use the API in your own applications. After installation, the API classes are available in SSJS and Java code including API source c
3
My latest wish list for the Domino Java API
Thu, Nov 3rd 2016 9:10a   Karsten Lehmann
Last week I sent an email with enhancement ideas for the Domino Java API to IBM development. Most of the stuff listed here (except new @-functions) can be implemented by wrapping existing C API functions or simple copy&paste of already existing code. We already did this using our Domino JNA project, but I thought it would be a good idea to add this functionality to the standard API and provide full platform support. I don't really have unrealistic expectations whether this will ever be
2
Big update for Domino JNA project on Github
Mon, Jul 11th 2016 9:33p   Karsten Lehmann
Last weekend, I committed a big update for the Domino JNA project on Github. Here is what's new: Note (Document) APIs The last weeks since creating the project, I added basic APIs to work with database notes (documents). The main focus was to be able to read the classic note item value types, e.g. String, Number and Date/Time with single or multiple values per item, handle a few rarely known edge cases (e.g. multiline text values that Domino stores with delimiter between the lines
0
New on Github: Domino JNA - Cross-platform access to IBM Notes/Domino C API methods from Java
Fri, Apr 8th 2016 5:11p   Karsten Lehmann
I would like to introduce you to a pet project that I have been working on for the last months: Domino JNA - Cross-platform access to IBM Notes/Domino C API methods from Java As you might have already read in this blog in the past, we have been playing with the Domino C API for some time now and found out that you can speed up view reading dramatically when you talk directly to the C API instead of using IBM's Java classes. The C API also provides lots of other functionality for whic
1
Updated on OpenNTF: Release 1.1 of Open Eclipse Update Site with Mac 64 Bit Client support and other cool stuff
Thu, Mar 3rd 2016 11:23p   Karsten Lehmann
I have updated the OpenNTF project "Open Eclipse Update Site" with release version 1.1 and added the following useful features: added support for the Mac Notes Client with 64 bit new view action to extract selected features as an update site to disk (also available in headless mode via Java agents “(API)” and “(Java-API)“) new view actions to install/uninstall selected features via rcplauncher based deployment, which is used by software distribution systems and should
2
Notes 9.0.1 64 bit for Mac OS X 10.11 El Capitan now available - warning our customers NOT to update for 30+ days!
Tue, Sep 29th 2015 8:30a   Karsten Lehmann
One day before the general availability of Mac OS X 10.11 (El Capitan), IBM released an update for their IBM Notes Client 9.0.1 with 64 bit support: http://www-01.ibm.com/common/ssi/cgi-bin/ssialias?subtype=ca&infotype=an&appname=iSource&supplier=877&letternum=ENUSZP15-0483 Previous versions were using Java 1.6 32 Bit under the hood, which was maintained by Apple for the last 7 years. Since Apple dropped support for Java 1.6 in OS X 10.11, IBM had to update their IBM Mac No
1
New C API method NIFFindByKeyExtended2 in Domino 9.0 improves view lookups
Fri, Mar 6th 2015 12:48p   Karsten Lehmann
Once again I am digging into the Notes/Domino C API to implement fast and powerful view lookups. What caused it this time was a customer requirement for "Notes Client style keyboard navigation" in web views, meaning that you type a character, press enter and the cursor position should be moved to the relevant area of the view (e.g. where the content in the first sorted view column is greater or equal letter "L"). Using standard Java APIs for this purpose (ViewNavigator.getNextSibling(), unt




Created and Maintained by Yancy Lent - About - Planet Lotus Blog - Advertising - Mobile Edition