JavaScript and jQuery: Web Apps as Highly Interactive as Desktop Apps : Page 4

A Comprehensive Example

You have seen all the single-interaction elements on their own. It is now time to compose all of them together into a comprehensive example. Figure 6 and Figure 7 show a fictional dashboard for a card game: Magic, The Gathering. The browser window is completely dedicated to the interactive dashboard, where the user can rearrange cards, select and group them, zoom into their details, or observe the deck as a whole and pan from one side of the dashboard to the other. The whole setup is much more appealing when in motion, so view this YouTube video for a demonstration.

Figure 6. A Dashboard for Magic, The Gathering, with Cards Shuffled Around: Here is a fictional dashboard for a card game: Magic, The Gathering.

Figure 7. Organizing and Grouping Cards at a Different Zoom Level: Here is a fictional dashboard for a card game: Magic, The Gathering.

The required code is nothing more than a composition of the snippets you have seen so far. For an extra bit of fun, a Shuffle button randomly rearranges the cards on the dashboard with a smooth animation via the animate() method:

$('#shuffleCards').click(function() {
  // reset panning
  $('#universe').css('top', 0).
                 css('left', 0).
                 css('bottom', 0).
                 css('right', 0);

  var maxWidth = Math.round($('#container').width()*0.3) ;
  var maxHeight = Math.round($('#container').height()*0.3);

  $('.model').each(function(model) {
    var top = Math.round(
      $('#container').height() / 3 +
      Math.random()*maxHeight*2 - maxHeight);
    var left = Math.round(
      $('#container').width() / 3 +
      Math.random()*maxWidth*2 - maxWidth);

    var movement = {'top': top, 'left': left};
    $(this).animate(movement, 1000);
  });    
});

Much More to Explore

You have learned how to transform a static web page into an appealing interactive experience. You leveraged JavaScript and jQuery DOM manipulation functions to mimic complex interactions that are traditionally reserved for heavier client applications. Now these interactions can live in the lightweight environment of a browser window as well.

Many other features are left to explore, such as mouse gestures and keyboard events binding. A natural next step would be to evolve the demo interface into a complete desktop and layout manager backed by a model that supports real-time filtering, layout, data mutations, and interfacing with external data providers. For this purpose, I started an open-source project, Rhizosphere, for creating the ultimate JavaScript interactive experience and innovative data visualizations.

Previous Page