Yesterday I described how to bring up XPages in IBM Connections in fullpage mode. However this solved only half of the problem. Since XPages are embedded in iFrames there is some more work necessary so that the iFrames are resized when the sizes of the browser windows change.
Watch this short video to see what I’d like to achieve from a user experience perspective.
Essentially the iFrame with the XPage should always take up the maximal real estate. The width of the iFrame should be set to 100% in the widget.xml. However when the height of the iFrame is set to 100% it doesn’t work. One reason is that XPages can change their heights, for example when the browser window width is changed. Another reason is a timing issue. In order to show the XPage an HTTP post is done which takes a moment. When the parent sets the iFrame height initially it doesn’t know the initial height of the XPage.
In order to solve this I used the HTML5 window.postMessage functionality which allows communication from the embedded iFrame to the parent even if the two pages are not located on the same domain. I’ve submitted the snippets to XSnippets. I’d like to add some more samples and add everything then to the XPages for Connections project.