Using jQuery.UI.layout to handle HomePortals layouts

** Update: ** Updated code examples and attached file to be compatible with HomePortals 3.1.570

A few days ago I found out (via tweeter) about this plugin for jQuery. Apparently UI.Layout is a port or adaptation of extJS border-layout but done the jQuery way. Well, this is basically a plugin to create complex full-screen layouts, with resizable panels and everything... really cool stuff. So I started wondering if I could use this to leverage the way HomePortals deals with page layouts and see if I could use hp to declare the page modules/widgets/content but on a layout controlled by the UI.Layout plugin. It turns out in fact that I was able to mix both projects pretty easily. Here's how.

First of all, lets jump to the end and see what the finished product looks like

And this is the corresponding HomePortals page:

You can check out a live demo of this page here.

So, did I pick your interest? well, if yes, then keep reading to find out how this was implemented. At the end of this post you can find a zip with the entire example, but let me go over the important bits here.

** Note that this example requires HomePortals 3.1, and will not work in earlier versions. You can get the latest release here

First of all, we need to setup a HomePortals application for this example and set the appropriate environment. For the purpose of this example, our HomePortals application will live on a directory named "uilayout". You can find the complete dir structure and required files on the attached zip file.

For the main settings we will use the standard config xml file.

homePortals-config.xml.cfm

Here we declare all the necessary jQuery javascript files. These are ones required by the UI.Layout plugin plus one additional "init.js" to handle our jQuery initialization routine for this page.

init.js

The only thing this does is to initialize the layout plugin.

Then finally the final bit of configuration that we need to add is to define a "page" render template. This is because the overall HTML markup needed by the UI.Layout is way much simpler than the default HTML structure that comes out of the box in HomePortals. The "page" render template controls the overall HTML structure that will be used to render all HomePortals pages.

pageTemplate.htm

The relevant part here is the $PAGE_LAYOUTSECTION["REGION"]["DIV"]$ line. This just tells the HomePortals renderer to render all "region" sections one after another and use DIV tags around them. The HEADER and FOOTER custom sections are really not needed and not even used on this example.

The UI.Layout plugin uses CSS class names on DIV elements to determine the type of layout region. There are five types: center, north, south, east and west; each one with its own specific class name. So, since all our layout regions will be rendered the same, we will need only "one" kind of layout region. We will name this a "region".

So, once that is in place, we can just declare our pages and use the UI.Layout class definitions to create the layout. Like this:

default.xml

The layout section is where we declare the page layout using the UI.Layout class names for the different regions. So if we want to customize the layout, say, do not have a footer, or have only one left column, we can change that here easily by just removing the location tags that we don't need.

The next section body is where we declare what goes into which layout region. the content tags just display plain text or html content while the view tag does a cfinclude of a CFML template. Of course you can now use the whole HomePortals framework features to create your own tags and do whatever you need.

And since jQuery is so awesome, here is another example that uses pretty much the same setup but adds some drag & drop funkyness.