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).


  1. Create Desktop
  2. Create and register Desktop Screens to Desktop
  3. Create and register window widgets to Desktop Screen
  4. Layout edit, saving and reset
  5. I18n support and event pooling




  1. 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.


  1. 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"});




  1. 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({








Here is the definition for each field




is the id of created widget




is the html file defining the content of widget



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('', 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



 Id for widget


  • optional

Html file for widget content



 Initial position for widget



Widget is draggable



Widget is resizable



Widget is removable [visibility can be reverted by resetting the layout]


  • optional

Backbone-style events


  • optional

Initialization method, will be called once

  • onI18nChanged
  • optional

Triggered by locale change


  • optional

Used to render the widget







  1. 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.

  1. 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('', this, this.onMessage, null);


onMessage : function(subject, eventDataObject, subscriberData){


Here '' 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("#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

Views: 882


web design, web development, localization

© 2024   Created by Daniel Leuck.   Powered by

Badges  |  Report an Issue  |  Terms of Service