Rich Application for Carbon Market Transactions
Development of a fully Object-Oriented Javascript interface using the latest version of the EXT JS framework, a fully featured AJAX and GUI widget library based on Yahoo UI.
This was a 6 month project going live in September 2010 as part of the Markit Eco suite of environmental products. The Markit Environmental Registry is one of 3 secure locations used for tracing the ownership of carbon credits anywhere in the world (there are 2 other similar registries but the larger part of transactional volume is carried out by Markit).
While the work was primarily focused on individual paid-for access, there is also a complimentary public view interface that allows non-users to query database directly (written in plain HTML for SEO optimization).
Delivering Features with Optimal Usability
Deliverables include a fully-operating Graphic User Interface compatible with IE (6,7 and 8), Firefox (3.0 upwards), Chrome and Safari in the form of an 8,000 line JavaScript library with 43 compiled javascript classes using object-oriented inheritance for minimal code-repetition and Java nomenclature and namespace breakdown wherever possible (with a view to find a replacement Java programmer) .
The end result is a rich interface for a data-driven web application, with look-and-feel similar to that of a desktop application like Excel or Outlook. The users of the registry can access the following features:
Advanced Dockable Components
Standardised components such as grids (for record lists) allow for easily building functionality with components that can be docked in tab panels or within a popup window. Base components provide key functionality, such as layout, ordering, paging and searching and can be extended depending on the requirements for each section of the application.
Simplified Search Criteria
Search criteria is simplified and prioritised to hide items that are less relevant to the user. Searching requires minimal input from the user (usually mouse-scroll and click).
Predictive Search
An AJAX favourite. The implementation within the Registry is done using DOM buffering (only the items displayed are being rendered in the browser) which allows for thousands of records to be quickly filtered down to those that fit relevant criteria in milliseconds.
Context Menus (right mouse button)
Context menus are used for right-clicking on a piece of information to find out relevant actions that can be performed. This is ported from functionality found in desktop application such as Outlook or Excel.
Windowed Interface
Window “lightboxes” are used to display information about individual records. These are pop-ups rendered within the page as modal windows, which provide a high degree of responsiveness in the application and the look-and-feel of traditional desktop applications.
Server-Side Validation Messages
Intuitive and appealing server side validation messages (without needing to refresh the page). The fields a user has entered incorrectly are clearly highlighted and provide additional information when hovering above them.
Hierarchical Data Representation (expanding trees)
Data is presented hierarchically wherever relevant, for example a syndication “Basket” used for risk management, can be constructed to contain other items within in. The User Interface displays this as an expandable item, with other items within it.
Object-Oriented Inheritance
The interface is designed as a self-contained JavaScript class library with components (Classes) that inherit from each other. This is done to reduce code-duplication and make the software more manageable.
Feedback on the Registry
Some of the feedback received on this project:
Eli Goncalves (End User)
www.personalco2zero.com
13 Sep 2010 – Your new platform really became more practical. Congrats!
Helen Robinson (Founder)
www.markitenvironmental.com
20 Sep 2010 – You guys have done a wonderful job, thank you very much!
