TechHui

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

               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

 

 

 

 

 

 

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

Views: 839

Sponsors

web design, web development, localization

© 2020   Created by Daniel Leuck.   Powered by

Badges  |  Report an Issue  |  Terms of Service