Version 7 (modified by Abhishek Mishra, 14 years ago) ( diff )


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.


S3UI Framework mind map

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


Grid View Widget

RHeader Tabs

Form generation



Attachments (1)

Download all attachments as: .zip

Note: See TracWiki for help on using the wiki.