Invalid Cast | Web Dashboards

Web Dashboards

27. January 2009 by Martin Rue 0 Comments

Often you see web sites that allow a certain amount of customisation of the user interface. This usually varies. Maybe they allow you to change the ‘theme’ – loading a new style sheet that replaces some images and colours. Some web sites, such as the BBC go that extra mile and provide the ‘dashboard’ type of UI.

The BBC web site (as well as many others) allow the user to add or remove widgets. The widgets sit next to each other like playing cards laid out on a table and each widget provides a specific function. The user can remove pieces of the site that are irrelevant to them and add pieces that they’re interested in. Ultimately, the user gets to see exactly what they want, where they want to see it.

Widgets

A project I am working on requires a similar type of interactivity and initially I was a little lost about where to start. Having looked around a little, it became obvious that jQuery would be perfect for the job.

What is jQuery

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

What is jQuery UI

jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.

So, to briefly summarise, jQuery UI sits on top of jQuery and provides a metric ton of help when it comes to producing rich client side effects in the browser. Another benefit is that it’s widely compatible across the various browsers.

Essentially, a dashboard is composed of two parts. An HTML unordered list that holds the dashboard items and the jQuery initialisation code that makes it sortable.

A Simple Example

I’ll present a simple example as a starting point for anyone wanting to dig deeper into making their own dashboard. As mentioned above, we start with the HTML unordered list:

   1:  <div>

2:

   3:      <ul id="List1" class="List" style="float:left;">

4:

   5:          <li id="Item1" class="WidgetContainer">

   6:          Item 1<br />

   7:          Item 1<br />

   8:          Item 1<br />

   9:          </li>

10:

  11:          <li id="Item2" class="WidgetContainer">

  12:          Item 2<br />

  13:          Item 2<br />

  14:          Item 2<br />

  15:          </li>

16:

  17:          <li id="Item3" class="WidgetContainer">

  18:          Item 3<br />

  19:          Item 3<br />

  20:          Item 3<br />

  21:          </li>

22:

  23:      </ul>

24:

  25:      <ul id="List2" class="List" style="float:right;">

26:

  27:          <li id="Item4" class="WidgetContainer">

  28:          Item 4<br />

  29:          Item 4<br />

  30:          Item 4<br />

  31:          </li>

32:

  33:          <li id="Item5" class="WidgetContainer">

  34:          Item 5<br />

  35:          Item 5<br />

  36:          Item 5<br />

  37:          </li>

38:

  39:          <li id="Item6" class="WidgetContainer">

  40:          Item 6<br />

  41:          Item 6<br />

  42:          Item 6<br />

  43:          </li>

44:

  45:      </ul>

46:

  47:      <div style="clear:both;"></div>

48:

  49:  </div>

50:

  51:  <script type="text/javascript" src="jquery.js"></script>

  52:  <script type="text/javascript" src="jquery-ui.js"></script>

  53:  <script type="text/javascript">

54:

  55:      $(document).ready

  56:      (

  57:          function()

  58:          {

  59:              $("#List1").sortable(

  60:              {

  61:                  opacity: 0.6,

  62:                  revert: true,

  63:                  scroll: true,

  64:                  connectWith: $("#List2")

  65:              });

66:

  67:              $("#List2").sortable(

  68:              {

  69:                  opacity: 0.6,

  70:                  revert: true,

  71:                  scroll: true,

  72:                  connectWith: $("#List1")

  73:              });

  74:          }

  75:      );

76:

  77:  </script>

Lines 1 to 49 setup the HTML code for the dashboard. The example places two lists beside each other and creates 3 items in each list. The script that follows on line 55 allows the lists to be sortable. Line 59 is the jQuery UI call to make the first list sortable and connect it to the second list. Similarly, line 67 starts the call to make the second list sortable and connect it with the first. That’s all there is to it.

The sample produces the following:

Dashboard