ExtJS based UI for Eden

S3XRC being a powerful backend that serves XML and JSON in a RESTful manner has now got a front-end framework that can exploit its positives. S3UI - the new ExtJS based front-end help us not only utilize S3XRC but also save a lot of bandwidth by exchanging information in JSON instead of full page reloads. This in turn aims to create an easy and quick workflow for different tasks that a user does with Sahana Eden.

Architecture

S3UI Framework is has 4 major components

• Custom views - these views contain appropriate javascript and html required to render the S3UI widgets, however they are minimal and look almost similar to old views for matter of simplicity and similarity.
• Javascript -
  • _s3ui_list.js - generates the grid view, included by _s3ui_list and _s3ui_list_create views -
    • Setting up metadata
    • fetching column model
    • Parsing json data from s3xrc into an Ext Datastore
    • Configuring and rendering a Grid widget on desired DOM element
  • core.js -
    • Provides S3UI objects and S3UI_Elements list
    • Manages creation of different widgets - used in custom views
    • Naming convention -
      • data_FunctionName - any function pertaining to parsing, formatting or manipulating data, nothing that affects UI
      • tools_FunctionName - various helpers that aid larger widgets - Eg. plugin implementors, micro-widget generators (date picker, checkbox, combo box)
      • widget_FunctionName - Larger widgets that can be used directly to create new visible UI elements
  • plugins - various ExtJS based plugins used by core.js
  • Extcrud.py
    • Alters flow through pre, post hooks to plug in code required by new UI
    • list_fields is no longer relevant, the modified S3XRC has a url/listfileds.json handler that gives back list of fields needed by a resource, it is implemented in the post processing hook here.
    • Implements xrc_list - a replacement for shn_list. It doesn't do as much work as shn_list, but leaves the rendering of datagrid to the frontend, page loads fast but rest of the processing is done by core.js
    • contains S3XRC_FRONTEND switch. Whats that? setting S3XRC_FRONTEND = false results in disabling all S3UI functionalities and lets one fall back to old UI. Useful when S3UI fails, or for testing.

Widgets

Grid View Widget

RHeader Tabs

Form generation

Roadmap

FAQ