UI:ExtJS

From CyberGIS

Jump to: navigation, search

Contents

Ext JS Widgets

Sencha’s open-source Ext JS 4 framework provides an extensive library of ready-made, customizable, pluggable GUI widgets, and supports both cross-platform and cross-domain communication. These widgets can be easily deployed as JavaScript files to any technological platform. Ext JS provides a MVC-based web development framework for JavaScript, which makes it feel like a structured programming language, and excellent documentation.

See the Sencha Website for more information and examples: http://www.sencha.com/products/extjs

The following sections describe different implementation approaches used to develop and integrate UI functionality into the Gateway.

Gateway Implementation with AJAX

ToDo

PGIST Implementation with JSONP

The rich user-oriented experience of structured participation is provided by a sophisticated GUI and not by complex functional or data management services. For example, in the brainstorming component idea generation, keyword selection, keyword tag clouds, idea filtering and sorting, commenting, and voting are all enabled through JavaScript in the GUI supported by basic server-side create, retrieve, update, and delete (CRUD) operations. The synthesis component supports even more advanced GUI elements such as panels and trees for creating keywords categories, clustering keywords by category, creating category hierarchies, and comparing category hierarchies across users. The challenge for the integration of structured participation methods in, for example, the CyberGIS Gateway is the encapsulation of all of this functionality in pluggable, “smart” GUI widgets that can communicate in near-real time with remote CRUD processing services. These GUI widgets need to be implemented in a ubiquitous, standard web technology to allow their deployment in any online environment. The remote services must provide a standard, technology-agnostic interface to the processing logic and persistence layers.

Several implementation options were reviewed to fulfill the above criteria, leverage the existing PGIST JavaScript and Java code base, and support integration of structured participation methods in the CyberGIS Gateway and other analytic environments. Sencha’s open-source Ext JS 4 framework was selected for the development of the SPT because it provides an extensive library of ready-made, customizable, pluggable GUI widgets, and supports both cross-platform and cross-domain communication. Other options included HTML5, which is good for rich graphic and multi-media rendering but not for client-server communication, and the Google Widget Toolkit, which is simply an alternative to DWR (Direct Web Remoting) for the development of AJAX applications.

The Ext JS 4 widgets are written in JavaScript, and thus can be deployed to any technological platform. The widgets allow all of the existing PGIST JavaScript functionality to be reused with minimal modifications. EXT JS 4 also supports JSONP (JavaScript Object Notation - Padded). JSONP allows the client to send data to a remote server and circumvents browser security restrictions by injecting the server response into the <script/> on the client page. DWR, the web framework used for PGIST client-server communication, can also marshal Java objects to and from JSONP, which allows the PGIST processing logic and associated persistence layer to be exposed as remote services. The SPT widgets can be embedded directly into the Gateway interface, and the PGIST server will handle processing and persistence. Security, user management and application control, currently handled by PGIST and diverse web application frameworks, are delegated to the Gateway.

The following diagram shows the SPT proof of concept, a simple HTML page with ExtJS widgets that call the PGIST server via the Ext JS JSONP Proxy and invoke DWR Agents. PGISTExtJS.png

The following code sample demonstrates the call to the PGIST server via the JSONP Proxy. A data store with a JSONP Proxy is created to store the keywords returned from the BCTAgent. The feedback text is appended to the proxy invocation, which is in the form of a URL. The response (keywords) are stored and loaded, and checkboxes are generated dynamically for each one. PGISTExtJSCode.png

Further implementation details are described on the PGIST SPT Implementation page.

Differences between ExtJS 4.1.1 & 4.2

The following are known differences between the two ExtJS frameworks, please feel free to add categories (rows), or add details (columns).

ExtJS 4.1.1 ExtJS 4.2 Notes
Classpaths 1. Ext.ux.RowExpander 1. Ext.grid.plugin.RowExpander 1. Ext.ux.RowExpander deprecated, but still included in 4.2
Config 1. In app.js: Ext.Loader.setConfig({enabled: true}); Ext.Loader.setPath('Ext.ux', './extjs/src/ux'); 1. N/A 1. Both statements required prior to 4.2