From CyberGIS

Jump to: navigation, search



Please see Ext JS Widgets for a general description of the PGIST implementation using JSONP.

Structured Participation Toolkit Overview

Brainstorm (BCT)

The brainstorming component allows users to discuss their concerns/ideas/feedback. The current implementation supports the generation of keywords based on the users' comments, and filtering based on the keywords. It also supports replies and voting (agree/disagree with feedback and replies).

Synthesize (CST)

Categorize (CCT)

Review (DRT)

Implementation Details


The SPT uses the Ext.JSONPProxy to call DWR agents on the PGIST server. Data stores are configured with the proxy and the remote URL, which includes the DWR agent class and method to call:

Ext.define('', {
    extend: '',
	id: 'keywordStore',
    model: 'SPT.model.SPTKeyword',
    proxy: {
        type: 'jsonp',
        url : '',
        reader: {
            type: 'json',
	    root: 'reply'

Method parameters are added in the associated view:

var feedbackText = this.getFeedbackTextArea().getValue();
keywordStore.getProxy().url = '' + feedbackText;

The JSONP response is stored in the on the client, which is then read by the associated view component:

 Ext.define('SPT.model.SPTKeyword', {
    extend: '',
    fields:['tags', 'potentialtags', {name:'successful', type:'boolean'}]

Note: DWR currently cannot unmarshall java.lang.Map request objects so the Agent method signature has to be changed to String parameters.


The CyberGIS Token Service is used by the DWR.SystemAgent to verify the user and token. This is done at during widget initialization via a Ext.Controller:

Ext.define('SPT.controller.SPTLogin', {
    extend: '',

    init: function() {
    	 Ext.define('LoginUser', {
    		 extend: '',
    		 fields:[{name:'successful', type:'boolean'},{name:'error', type:'String'}]
         var username =;
    	 var token =;
    	 var loginStore = Ext.create('', {
    		 id: 'loginStore',
    		 model: 'LoginUser',
    		 proxy: {
    		    type: 'jsonp',
    		    url : 'http://',
    		    reader: {
    		       type: 'json',
    		       root: 'reply'
    	loginStore.getProxy().url = '' + username +'/' + token + '/'+ 'cybergis';
    	loginStore.load(function(records, operation, success) {


All open workflows are loaded via the the SPTWorkflowInit Controller into a select box.
The active PGIST workflow is initialized by the selection of the discussion topic. To make sure that the user is participating in the correct discussion, there is no default selection.


To Do:
- Improve layout, BCT widget currently uses a vertical scroll bar instead of growing dynamically when keywords are added.
- [GATEWAY Team] Document layout approach/component management, future SPT releases can then utilize to improve widget layout design/management.

Error Handling/Validation

To Do:
- [GATEWAY Team] Document exception/error handling approach.
- Add validators to SPT widgets instead of alert boxes for user messages?
- Change exception handling, currently logging to console.


SPT Application Structure

To leverage the Ext JS MVC architecture and widget initialization (see Security and Workflow above), SPT is structured as an Ext JS app:

See the Ext JS documentation for more info: MVC

Deployment Protocol

Step 1. Checkout (from SVN) SPT controller, model, store, view JavaScript files to CyberGIS Ext JS app folders.
Step 2. Change the App namespace, defined in the CyberGIS app.js file, in all of the SPT files (Ext.define). Find/replace 'SPT.'?
[GATEWAY Team]: Provide CyberGIS App namespace to widget developers so that they can make this change themselves, or determine if Ext JS can support multiple app namespace?
Step 3. Add the SPT controllers defined in SPT/app.js to CyberGIS app.js
Step 4. (Optional) Add the SPT views/layout defined in SPT/app.js to the CyberGIS Viewport.

Efficient coding for web and mobile app development

Comparison of SPT Application Structure and Web/Mobile App Prototype

SPT App Web/Mobile App Notes
app.js viewport defined autoCreateViewport Ext.Loader.setConfig? namespace = appFolder?
Controllers SPTLogin, SPTWorkflowInit, SPTBrainstorm N/A Controllers are REQUIRED for app initialization
but also used for component event handling
Store SPTConcerns, SPTKeyword, SPTWorkflow, SPTWorkflows ConcernStore, WorkflowStore What is 'cfg' variable?
Model SPTConcern, SPTKeyword, SPTWorkflow, SPTWorkflows Concern, Workflow SPT models REQUIRED to match JSON return from PGIST server
View Brainstorm, Workflow MainView, MyViewport, Viewport for SPT viewport specified in app.js, Ext.applyIf me?

To Do:
0. use secha cmd to build app, add new folders/files to SVN
1. swap index.html for index.php
2. add Mobile_Detect.php

Development pipeline

Generate web app framework

  • install Sencha Cmd (requires Ruby)
  • generate app framework
       sencha -sdk /path/to/extjs generate app pgist.web /opt/pgist/web
  • develop models, controllers, stores, and views in app/
  • refresh app
       sencha app refresh
  • build app. will create production package in build/
       sencha app build
  • deploy production version to www server

Generate mobile app framework

  • generate mobile app framework
       sencha -sdk /var/www/touch-2.1.1 generate app sptApp /var/www/test/pub/m
  • develop UI components
  • for common models and stores, symlink them
  • refresh app
       sencha app refresh
  • build app. will create production package in build/
       sencha app build
  • deploy production version to www server

Generate documentation

  • annotate code using jsduck syntax listed on jsduck website
  • generate app doc (as root)
       jsduck ./app --output /tmp/t2 --images /var/www/ext/docs/images

Testing SPT

Step 1. Create a pgist folder in your Apache htdocs folder.

Step 2. Copy your /extjs to the pgist folder (or download v4.2 to here - not sure if it will work with earlier versions, but you can try).

Step 3. Check out the following out from SVN to the Apache/htdocs/pgist folder (see FolderStructure.gif): /resources /spt app.js index.html

Step 4. Open a browser and load localhost/pgist/index.html, then choose a discussion topic from the dropdown (loaded dynamically from our server). Make comments, select keywords, submit feedback in 'Provide Feedback' tab. Switch to 'View Feedback' tab to see all comments (no voting, no keyword filtering yet). See SPTView1.gif & SPTView2.gif.

NOTE: Login should happen in the background if setting user & token from the & variables works. I have still not created a setLoginInfo method, because I am not sure how it is supposed to be called before the SPTLogin Controller initializes. If the global variables do not work you can uncomment the code in /spt/controller/SPTLogin that I use, and replace with your user name and token.

Still to do for real integration based on earlier discussions: 1. Create a deployment package with Sencha CMD so only necessary ExtJS files are included. HOWEVER, not sure about version conflict issues if you are using an earlier ExtJS version. 2. Create a setLoginInfo method - BUT - see note above 3. Add namespace:SPT to app.js - BUT not sure how we are combining app.js files