Rich Interactive Dashboards in Uberfire

    Uberfire is one of the latest & coolest projects within JBoss middleware. The Uberfire project was kicked off about two years ago. Despite it's still on the release 0.5  I think is mature enough to start bringing some of the Dashbuilder features to it. Uberfire leverages the GWT & Errai technologies and provides a rich framework to develop desktop-like rich internet applications.

 The next video (don't forget to select HD) shows a live showcase with some interactive sample dashboards built using the Dashbuilder client API.  All the dashboards are fed from a dynamically generated client data set. So there is no interaction with the backend. All the operations (group, filter, sort) are performed on the client side. The Dashbuilder architecture allows for handling data sets on both client & server though. For demo purposes we have gone for the client approach as it is easier to implement.

   In next blog entries we will walk through the architecture internals as well as the APIs. Today, I'm just going to give an overview of how these sample dashboards have been built.

   The four dashboards (see screenshots below) are fed from a dynamically generated data set (the sales opportunities data set - SalesDataSetGenerator.java),  which is a Bean type data set generator that registers a data set at Showcase initialization time.  The dashboards themselves are just GWT UI Binder widgets composed by a bunch of data viewer instances spread on the same page layout.

Sales goals	Sales pipeline
Sales distribution by country	Sales table reports

   Let's take for instance the first dashboard. The UI Binder template (SalesGoals.ui.xml) is used to lay out all the charts properly.  Each chart is assigned a unique identifier used within the dashboard  (SalesGoals.java).

Dashboard UI binder template

   The chart definition is composed by two parts, both defined using a very simple but powerful API.

• A data set reference the chart is going to display. Here we can specify a plain data set or a data set lookup which is just a sequence of operations (filter, sort, group) performed over an existing data set.

• A display configuration or how we want to visualize the data. There are several types of visualizations - pie, bar, line, area, meter, map bubble charts, tables, hierarchical trees, etc... The display settings will depend on the type of visualization chosen.

Data Displayer API sample

    As I said, we'll dive into the API internals in next blog entries. For now, just taking a look at the examples is the quickest way to figure out how this API works.

    One last note worth to mention is that, right now, the default rendering technology used is the Google Charts Visualization library. We went for Google because it was the quickest road to follow in order to get an early prototype. Nevertheless, the data viewer layer is not tied to any specific rendering technology as it supports the concept of pluggable renderers. So, in the future, it'll be possible to have several renderers available and have every chart decide which particular one to use.
 
   The project is hosted on Github. Despite it's in a very early stage of development we're pushing hard to bring many new features in the next few months:

• Data visualization editors
• Drag&drop dashboard composer
• Renderer based on the D3 library
• Support for real-time dashboards
• RESTful API for remote dashboard interaction

That's all. I encourage you to clone the project, build, run it and play with the examples.

Enjoy it!