Hawaiʻi's Technology Community

Create a Multiple Desktops on Single Page (MDOSP) Web Application Framework using backbone, pagebus and jquery ui plugins

Recently we have evaluated different javascript frameworks to support Single-Page Application (SPA), especially with iGoogle’s style of configurable layout and reusable gadgets. Failed to find any out-of-box solution for the requirement, and inspired by James Padlsey’s amazing iNettuts post, we decided to write a simple javascript framework to support Multiple Desktops on Single Page (MDOSP).

Create Desktop
Create and register Desktop Screens to Desktop
Create and register window widgets to Desktop Screen
Layout edit, saving and reset
I18n support and event pooling

Create Desktop

window.mApp = new r9core.Desktop({ el:'#detailContainer'});

Here the attribute “el” is used by Backbone’s view as the dom root of the whole desktop app.

Create and register Desktop Screens to Desktop

You can create Desktop Screen first and then add it to the Desktop

gHomeScreenView = new DesktopScreen({sid:"home", el:'#homeContainer'});

window.mApp.addScreen( gHomeScreenView );

Here the attribute “sid” is the id and “el” is the dom root of created desktop screen.

Or you can create and register desktop screen in one step

var gHomeScreenView = new r9core.DesktopScreen({desktop: mApp, sid:"home"});

Create and register window widgets to Desktop Screen

3.1 Simplest way to add window widget to a given desktop screen

gHomeScreenView.addWidget(new r9core.SimpleWidget({

wid:"topcardSection",

template:"topcard.html",

position:"0:10:200:200"

}));

Here is the definition for each field

wid

required

is the id of created widget

template

required

is the html file defining the content of widget

position

required

is the position of the created widget

3.2 You can also define a widget in detail.

gCreateScreenView.addCustomWidget( {

options : {wid:"newsSection", template:"news.html", position:"0:250:200:280"},

events: { },

init : function(){ window.PageBus.subscribe('r9.core.i.am.interested', this, this.onMessage, null);

onMessage : function(subject, eventDataObject, subscriberData){

onI18nChanged : function(subject, eventDataObject, subscriberData){

alert("language changed to :" +eventDataObject.language);

drawing: function() {

var template ='<div class="widget color-orange">'

+ '<div class="widget-head">'

+ ' <h3>News</h3>'

+ ' </div>'

+ ' <div class="widget-content">'

+ ' <p>Headline news? </p>'

+ ' </div>'

+ '</div>';

var r = $.tmpl(template, null) ;

$(r).attr('id', this.wid());

r .appendTo(this.el);

return this;

}

});

Here is the definition for each field

Options.wid	required	Id for widget
Options.template	optional	Html file for widget content
Options.positions	required	Initial position for widget
Options.movable	Optional	Widget is draggable
Options.resizable	Optional	Widget is resizable
Options.removable	Optional	Widget is removable [visibility can be reverted by resetting the layout]
events	optional	Backbone-style events
init	optional	Initialization method, will be called once
onI18nChanged optional		Triggered by locale change
drawing	optional	Used to render the widget

Layout edit, saving and reset

Each widget can be dragged for customized layout and layout information is saved into the local storage or browser cookie.

Also layout can be reset to the initial status by using action on context menu.

I18n support and event pooling

Messaging service style event pooling can be achieved by using jquery’s event handler at document level, but I prefer to use Tibco’s pagebus as it is more scalable.

Event subscribing can be done inside the init() method of widget definition

init : function(){ window.PageBus.subscribe('r9.core.i.am.interested', this, this.onMessage, null);

onMessage : function(subject, eventDataObject, subscriberData){

Here 'r9.core.i.am.interested' is the topic name and ‘onMessage’ is the callback handler for the pagbus messaging service.

We also use pagebus to achieve the localization support.

r9core.loadMessageBundle( 'Messages', 'bundle/', 'both', 'cn', function() {

jQuery.i18n.prop('msg_home');

jQuery.i18n.prop('msg_cmenuRestore');

jQuery("#navHome").attr("title", msg_home);

jQuery("#cmenuRestore").text( msg_cmenuRestore );

}

);

jquery-i18n-properties plugin is used for underlying i18n support as it follows similar pattern as server side java i18n support does.

Each widget will subscribe to the topic of i18n language change by default. When the language is changed, pagebus will inform each widget as long as the widget implements the following method-

onI18nChanged : function(subject, eventDataObject, subscriberData){}

Here are some screenshots

-Editable layout and context menu, also demo i18n support

-Apple-style docking system to switch desktop screens, using jquery.jqDock plugin

-Top level slip-down panel for login and configuration, inspired by Jeremie Tisseau

Welcome to
TechHui

Sign Up
or Sign In

Or sign in with:

Create a Multiple Desktops on Single Page (MDOSP) Web Application Framework using backbone, pagebus and jquery ui plugins

Replies to This Discussion

Sponsors