TWiki> ArdaGrid Web>Dashboard>XbrowseFramework (revision 4)EditAttachPDF

xbrowse framework

This page documents the xbrowse framework.


xbrowse is small framework for developing large-scale JavaScript applications. It includes a simple client-side MVC implementation and a number of predefined views such as statistics matrix, plots, controls.

The core MVC implementation includes:

  • model.state: UI state, i.e. filters as set by the user. A hierarchical store backed by the URL hash.
  • Data as returned by AJAX calls. A simple store to share data between views.
  • view: Skeleton view extended in the predefined views. Views update the model.state in response to user input, and bind to model.state events to update the UI and load data via AJAX calls.
  • controller: Initialises the model and views and updates the model.state from the URL hash.

The predefined views include:

  • view_dates: Binds to the model.state "load" event to load the latest dates from the server and fire the model.state "refresh" event.
  • view: Creates the UI container.
  • view_sidebar: Creates the sidebar accordion for UI filter controls.
  • view_main: Creates the UI tabs. Binds to model.state "refresh" to show/hide tabs.
  • view_titlebar: Creates the titlebar with date-lock, refresh and API links. Update model.state in response to user input. Bind to "change" to title and API links.
  • view_ctrl_*: Create various UI filter controls (typically in the sidebar accordion). Update model.state in response to user input. Bind to model.state "refresh" to update controls.
  • view_matrix: Creates matrix tab and toolbar. Update model.state in response to user input. Binds to model.state "refresh" to call web API and update matrix.
  • view_errors: Creates error samples pane. Binds to model.state "refresh" to call web API and update error samples.
  • view_plots: Creates plots tab and toolbar. Update model.state in response to user input. Binds to model.state "refresh" to call web API and update plots.

xbrowse-based applications

xbrowse-based applications include:

Creating a new xbrowse-based UI

Any new xbrowse-based application should:

  • Define default key/values for model.state. See lib/model_adaptor.js file in example.
  • Adapt predefined views. See lib/view_*_adaptor.js files in example.
  • Bootstrap the UI. See lib/app.js file in the standalone example.
  • Include scripts in single HTML page. See index.html file in example.
  • Provide web API to serve JSON responses to AJAX calls from views. See ajax options of lib/view_*_adaptor.js files in example.
  • (optional) Add new application-specific views.


The various predefined views depend on a web API that responds with JSON to their AJAX calls.

Standalone demo

The zip xbrowse_demo_0-4-0.tgz contains a standalone demo of an xbrowse-based UI using core xbrowse code and demo UI code based on and accessing data from the WLCG Transfers Dashboard.

Please download the zip and have a play with it.

Here is the readme.txt file from the zip:

xbrowse standalone demo
This demo consists of the core xbrowse code with demo UI code, based on and
accessing data from the WLCG Transfers Dashboard [1]. To view it open
'demo-wlcg/index.html' in your browser.

The xbrowse core (release:0-4-0) and demo is extracted from SVN [2] using

To create an xbrowse-based UI you should only need to modify the UI code, see
demo-wlcg for examples. See the xbrowse twiki [3] for more details.

[2]: (OPEN)


The bash script (found in the zip) was used to generate the standalone demo zip.

Standalone demos

Further Information

-- DavidTuckett - 03-May-2012
Topic attachments
I Attachment History Action Size Date Who Comment
Unix shell scriptsh r1 manage 2.5 K 2012-05-04 - 16:50 DavidTuckett Build script to create standalone xbrowse example
Compressed Zip archivetgz xbrowse_demo_0-4-0.tgz r1 manage 303.3 K 2012-09-26 - 16:35 DavidTuckett Standalone xbrowse demo application
Compressed Zip archivetgz xbrowse_example_0-3-0_0-1-0.tgz r1 manage 289.2 K 2012-05-04 - 16:50 DavidTuckett Standalone xbrowse example application
Edit | Attach | Watch | Print version | History: r13 | r6 < r5 < r4 < r3 | Backlinks | Raw View | Raw edit | More topic actions...
Topic revision: r4 - 2012-09-26 - DavidTuckett
    • Cern Search Icon Cern Search
    • TWiki Search Icon TWiki Search
    • Google Search Icon Google Search

    ArdaGrid All webs login

This site is powered by the TWiki collaboration platform Powered by PerlCopyright & 2008-2022 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
or Ideas, requests, problems regarding TWiki? use Discourse or Send feedback