Preface

For the past few months I’ve been workin with a content management portal to deliver my XHTML/JS/CSS I can’t stress how big a pain in the arse this is, as with any CMS there are limitations in the way that it works and problems when you try to use it for more than what it’s really made for. Limitations of a CMS can include:

1. not being able to add code/css to the header
2. the CMS just spitting out any old JS/CSS in the HTML
3. HTML not being formatted correctly, or just spitting out random XHTML tags

The list could go on, but I’m too tired to really carry on. It puts a big downer on you most of all when you’re so anal that all of your HTML is well formated and perfectly indented, only to find when the site goes live, all of your code is on one line or it looks like it’s been run over by a bus.

My main concern with coding for CMS’s that use portlet’s is the simple fact that each portlet is in essence it’s own self contained application/controller. It becomes a pain when you have to constantly check to see whethter a portlet exists in the DOM on runtime.

How can you work around this? Think like a CMS. You might be thinking, what the f**k is he talking about? The simple solution is to adapt the way you code to suit the CMS. Instead of having one big JS file for a page or site section, seperate your code into small chunks, this will also help you unit test your code which I’ll come to a bit later.

Example

At present my folder and file structure looks a bit like this…

./js/

./js/controller/ <– Contains the page controllers that manage the portlets and allow them to share data and interact with one another

./js/portlet/ <– Contains the individual portlet files, these can be broken down into folders

./js/lib/ <– Contains the libraries to be used in the web application i.e. jQuery and any plugins

Creating a Portlet

Ok so, let’s start by creating a simple portlet stub, it should look something like this…

var cms = cms || {};
cms.portlet = cms.portlet || {};

cms.portlet.vote = (function($){

	var elements = {

	},
	data = {

	},
	view = {
		init: function init(){

		}
	},
	events = {
		init: function init(){

		}
	}

	return {
		init: function init(){
			view.init();
			events.init();
		},
		getView: function getView(){
			return view;
		},
		getElements: function getElements(){
			return elements;
		}
	}

})(jQuery);

In here we have 4 objects for the “vote” portlet.

elements – This allows the controller to set elements to use within the portlet, the portlet JS should never be DOM aware (i.e. contain selectors) unless they are finding the children of elements set from the controller.

data – This allows the portlet to store data to be accessed during runtime, or after execution for debugging.

view – This object handled any DOM manipulation

events - This handles any DOM events within the page

Within some of these objects we have init methods, which would execute other methdos withing the object upon execution.

You’ll also notice that I’m returning an object with getters, this will allow you to access properties and methods within your portlet object for debugging or communicating to the controller and other portlet’s.

Creating a Controller

The controller is very easy to create, and it looks something like this…

var cms = cms || {};
cms.controller = cms.controller || {};

cms.controller.home = (function($){

	var portlet = {

		vote: null,
		initVote: function initVote(){

			this.vote = cms.portlet.vote;
			this.vote.init();

		},

		init: function init(){
			this.initVote();
		}
	}

	return {
		init: function init(){
			portlet.init();
		},
		getPortlet: function getPortlet(){
			return portlet;
		}
	}

})(jQuery);

This controlls the home page, as you can see,  from here you can initialise your portlet’s and get their instance for debugging using.

cms.controller.home.getPortlet().vote;

There you have it, this is by no means a final draft but more of a work in progress, so any input would be much apprecied!