Introducing the New HomePortals CMS Plugin

A few days ago I released the latest update to the HomePortals framework and its counterpart management platform ColdBricks. Besides the obligatory bug fixes and improvements, there was one new major feature on this release: the CMS Plugin. The CMS Plugin is a HomePortals extension to provide content management and site administration features to any HomePortals-based application without requiring the use of an external application (like ColdBricks) or building your own administration features.

[More]

Available Update for HomePortals and ColdBricks

I just pushed new updated versions of HomePortals and ColdBricks to their respective sites and are now available for download. As usual the updates contain multiple bug fixes and small improvements here and there. However there are a couple of features that are worth mentioning.

[More]

Model-Glue / HomePortals Sample Application

A few weeks ago I wrote about how to use the layout management features of HomePortals on a ColdBox 3 application. This time I want to show how to do the same but with an application built with the Model-Glue framework and also explain a bit more of why would you want to do so in the first place.

[More]

miniwiki: a minimalist wiki

Miniwiki is a very basic and light wiki application for any CFML engine. Although it is designed to have a very small footprint, it can be easily customized in terms of skinning and layout.

miniwiki uses a subset of reStructuredText as the syntax for the wiki pages, although it is trivially simple to replace the rendering mechanism to use WikiMedia syntax using the WikiConverter project.

miniwiki uses HomePortals as the layout engine and also to manage and store the content.

miniwiki is entirely file-based, although since it uses HomePortals resource libraries to store content you can also make it store content in something more exotic as Amazon S3.

Here is a demo, and you can download the project from RIAForge here.

HomePortals/ColdBox Integration Revisited

A while ago I wrote a post about how to integrate the HomePortals layout rendering features into an a ColdBox application. Since then a lot has changed on both the HomePortals and ColdBox camps so I've been wanting to revisit that experiment and see if it could be made in an easier way now, using the advances on both frameworks. Read on for the findings.

[More]

ColdBricks 1.1 Update: Custom Resource Libraries & Extension Modules

A new update to ColdBricks CMS is now available for everyone to download and play. This is still part of the greater 1.1 release but it adds some new interesting features that I thought would be interesting to blog about. Besides the obligatory bug fixes/performance enhancements, the two most prominent features are Custom Resource Libraries and the completion of a full modular architecture, including the option to install/uninstall modules directly by the end user.

[More]

Launched 2 New Homeportals/ColdBricks powered Websites

I wanted to quickly share that two new ColdFusion websites have been launched recently: MSDynamicsWire.com (a news portal) and Meancycles Owners Galleries (a social network). Both sites were developed using HomePortals and ColdBricksCMS.

Both sites show different level of integration and customization, as each serves a very different function, but they are good examples of the wide range of solutions that can be obtained by combining the HomePortals framework with the ColdBricksCMS platform.

[More]

Anyone wants to help test the new ColdBricks CMS?

I am finally ready to enter the testing/packaging phase for the new version of ColdBricks. ColdBricks, if you don't know is a CF-based Content Management System (CMS) that is used to build sites on a modular fashion.

This new version includes some nice features such as:

- Template management (author and manage your own page templates and layouts) - Module maker (create and customize your own configurable modules/widgets) - Site monitor (monitor site, cache, and memory status of your sites from within ColdBricks) - Fully modular and extensible architecture (think 'custom plugins') - A new and more simpler page management format - Create your own catalog of resources to use in your site (great complement to the ModuleMaker) - Completely updated rendering engine (yes, that means HomePortals 3.1) - And more!

At this moment there is not an official distribution package, but if you want to play around with it (and help me test and/or provide feedback), here are the download links:

ColdBricks 1.1 (Beta)

Also you will need the new version of HomePortals: HomePortals 3.1

For both of these, just download and unzip on the root folder of your site, and go to http://your_domain/ColdBricks to get started.

Additionally some of the site templates in ColdBricks, like the StartPage and the Blog, require a couple of HomePortals plugins. Here are the links:

HomePortalsAccounts

HomePortalsModules

Again, just unzip on the root and thats it.

As for requirements, this version has been mostly developed on Railo 3, but was tested on CF 8.0.1. I did all my dev on a Windows machine, so if you test on a *nix or mac, let me know if you run into any upper/lowercase issue.

As always, documentation is still trailing behind (far behind), but i'll be happy to explain and even write some blog posts to clarify any doubt.

Feedback and bugs are **really** appreciated.

Cheers!

*** UPDATE: I updated the download links to point to the general downloads page for each project, rather than a specific release. From each download page, you may download the "Beta" version for each project.

So, How about a templating engine for BlogCFC?

Recently I finished overhauling the way HomePortals 3.1 handles page templates and wanted to find a real-life (and useful) way in which I could demonstrate its new features. So, in this post I want to show how the templating features in the new HomePortals version can be leveraged to provide layout management capabilities on top of an existing application like BlogCFC. Why BlogCFC? well, first because it has a great segmentation between the blogging engine (the actual blog.cfc) and its presentation layer, and second because I already use it on my own blog and have plenty of real-life data to play with.

[More]

Using jQuery.UI.layout to handle HomePortals layouts

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:

<?xml version="1.0" encoding="UTF-8"?>
<Page>
   <title>Using jquery UI Layout with HomePortals. Example 1</title>
   <skin id="sandbox" />
   <layout>
      <location name="header1" type="region" class="ui-layout-north" />
      <location name="column1" type="region" class="ui-layout-west"/>
      <location name="column2" type="region" class="ui-layout-center"/>
      <location name="column3" type="region" class="ui-layout-east"/>
      <location name="footer1" type="region" class="ui-layout-south"/>
   </layout>
   <eventListeners/>
   <body>
      <content id="c1" href="/uilayout/lorem.txt" location="header1" title="c1" />
      <content id="c2" href="/uilayout/lorem.txt" location="column1" title="c2" />
      <view id="c3" href="/uilayout/about.cfm" location="column2" title="c3" />
      <content id="c4" href="/uilayout/lorem.txt" location="column3" title="c4" />
      <content id="c5" href="/uilayout/lorem.txt" location="footer1" title="c5" container="false" />
   </body>
</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 beta, 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

<homePortals>
   <contentRoot>/uilayout/ex1/contentRoot/</contentRoot>
   <defaultPage>start</defaultPage>
   <layoutSections>region</layoutSections>
   <baseResources>
      <resource type="script" href="/uilayout/includes/jquery.js" />
      <resource type="script" href="/uilayout/includes/ui.core.js" />
      <resource type="script" href="/uilayout/includes/ui.draggable.js" />
      <resource type="script" href="/uilayout/includes/jquery.layout.js" />
      <resource type="script" href="/uilayout/ex1/init.js" />
   </baseResources>
   <renderTemplates>
      <renderTemplate type="page" href="/uilayout/ex1/config/page.xml" />
   </renderTemplates>
</homePortals>

The first two entries just tell HomePortals where to find the content pages and what page to load by default.

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" and declare it on the layoutSections tag.

Next comes all the 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

$(document).ready(function () {
   $('body').layout({ applyDefaultStyles: true });
});

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.

page.xml

<?xml version="1.0" encoding="UTF-8"?>
<renderTemplate>
   <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
         <title>$PAGE_TITLE$</title>
         <meta name="generator" content="HomePortals Portal Framework" />
         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
         <meta http-equiv="Expires" content="0" />
         <meta http-equiv="Pragma" CONTENT="no-cache" />
         <meta http-equiv="CACHE-CONTROL" CONTENT="NO-CACHE" />
         <meta name="expires" content="0" />
         $PAGE_HTMLHEAD$
      </head>

      <body onLoad="$PAGE_ONLOAD$">
         $PAGE_CUSTOMSECTION["HEADER"]$
         $PAGE_LAYOUTSECTION["REGION"]["DIV"]$
         $PAGE_CUSTOMSECTION["FOOTER"]$
      </body>
   </html>
</renderTemplate>

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.

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:

start.xml

<?xml version="1.0" encoding="UTF-8"?>
<Page>
   <title>Using jquery UI Layout with HomePortals. Example 1</title>
   <skin id="sandbox" />
   <layout>
      <location name="header1" type="region" class="ui-layout-north" />
      <location name="column1" type="region" class="ui-layout-west"/>
      <location name="column2" type="region" class="ui-layout-center"/>
      <location name="column3" type="region" class="ui-layout-east"/>
      <location name="footer1" type="region" class="ui-layout-south"/>
   </layout>
   <eventListeners/>
   <body>
      <content id="c1" href="/uilayout/lorem.txt" location="header1" title="c1" />
      <content id="c2" href="/uilayout/lorem.txt" location="column1" title="c2" />
      <view id="c3" href="/uilayout/about.cfm" location="column2" title="c3" />
      <content id="c4" href="/uilayout/lorem.txt" location="column3" title="c4" />
      <content id="c5" href="/uilayout/lorem.txt" location="footer1" title="c5" container="false" />
   </body>
</Page>

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.

More Entries

BlogCFC was created by Raymond Camden. This blog is running version 5.9. Contact Blog Owner