senchacon 2016: developing cosmos using sencha ext js 5 - shenglin xu
TRANSCRIPT
Developing COSMOS using Sencha Ext JS 5
Shenglin XuGIS AnalystCity of Surrey, British ColumbiaCanada
COSMOS (City of Surrey Mapping Online System)
COSMOS - large scale web mapping application - over 400 layers of information- more than 15 tools- 20,000 unique visits per month- productized: SaaS model
2
Splash screen
Ext.window.Button’s transparency is achieved by setting button’s html tag with svg.
Search
The search box is a textfield with a trigger. The display list is a grid panel. Use can search layer, address, park and many other features.
Search Result
Click selected item on search list or use arrow down key to navigate and hit return key, the map will zoom to the selected feature and attributes will show on the left result panel.
Identify strata with more than 150 apartments
If user scrolls down to the bottom, then a prop up menu will show to let user to select next 150 addresses.
Documentation Search
Search property documentation saved in database or file folds by drawing a box on map.
Draw graphics
Draw point, line or polygon using ESRI functions.
Preview is implemented by setting container’s html tag with svg.
Measure
Us grid panel to show the results.
Print or export map to pdf or other image formats using ESRI functions.
Use loadMask to inform user the process.
More Tools
This tool is mainly for creating mailing list. Click an address on map, the tool will buffer the point and select all addresses within it and show them on panels.
Street view
Ext.window component. A nice feature of the window is buttons property.
Why rewrite?
- Chrome browser does not support Silverlight - Chrome browser desktop market share : 53.97%
- Chrome : one of the two browsers the city supports- Advancing of Javascript framework and HTML5- Edge browser does not support Silverlight
14
Rewrite - Challenges
Silverlight version COSMOS:
- Tree panel with up to 400 layers, four levels of sub folders
- Multiple levels of accordion panels
- Good performance
15
ESRI -- Environmental Systems Research Institute
- International supplier of geographic information system (GIS) software, web GIS and geodatabase management applications.
- 43 percent share of the GIS software market worldwide, more than any other vender
- 10 regional offices in the U.S. and a network of 80+ international distributors,[5] with about a million users in 200 countries
- Many Governments use ESRI software
16
Rewrite Challenges– Silverlight still something better?
17
ESRI Silverlight API ESRI Javascript API
Why use Sencha Ext JS ?- Rich UI components- Tree panel and grid panel - ESRI Javascript API works well with Ext JS- In house experience
18
COSMOS Mobile- light version of COSMOS
Surrey Request- Submit service request (award from the Union of BC Municipalities)
19
Required Preparation
- Purchased Sencha Ext JS- Sencha Training Ext JS
20
Sencha Components: COSMOS Layout
Sencha Components: COSMOS LayoutTool bar (north)
Accordion Panel(west) Map (center)
- Four levels of subfolders- Up to 400 layers
Sencha Components: Tree panel
Sencha Components: Tree panel The structure of the layer tree is set by a store.
leaf : false folder
leaf: true layer
text : layer Name
id: used to find layer source.
{ text: 'Community Services', id: 'Community Services', expanded: false, children: [ { text: 'Garbage and Recycling', id: 'Garbage and Recycling', leaf: false,
children: [{
text: 'Collection Route Boundaries', id: 'Name:Road,Source:Public', checked: false, leaf: true
},
Sencha Components: COSMOS ThemeComponent.scss
\packages\cosmos\sass\var folder is used for COSMOS base color, accordion color, button color and others.
$base-color: #e37f1c !default;
//accordion$accordion-header-background-color : #FFFFFF;$accordion-background-color : #F7F7F7;//$accordion-header-over-background-color : #e37f1c;$accordion-header-over-background-color : #faecde;
$accordion-padding : 1px;$accordion-header-padding : 1px;
$panel-base-color : #FFFFFF;$panel-body-background-color : #FFFFFF;$panel-frame-background-color : #FFFFFF;
//#808080 grey$panel-body-border-color: #808080;$panel-border-color : #808080;$panel-header-border-color : #808080;$panel-frame-header-inner-border-color : #808080;
//tab control and button$button-default-base-color : #808080;$button-default-background-color : #808080;$tabbar-base-color : #FFFFFF;
Panel.scss
\packages\cosmos\sass\src\panel folders is used to override neptune theme.
.x-grid-cell-inner { overflow: hidden; padding: 3px 3px; white-space: nowrap;}.x-panel-header-title-default { color: white; font-size: 13px; font-weight: bold; font-family: helvetica,arial,verdana,sans-serif; line-height: 16px;}.x-panel-header-title-default { color: black; // background-color: #F7F7F7 !important;;}.x-panel-header-default { background-image: none; background-color: transparent;}
Challenges: Accordion panel action- Collapse one panel without opening the next
- Override onBeforeComponentCollapse function in
Ext.layout.container.Accordion
Ext.define('cosmos.view.main.Accordion', { extend: 'Ext.layout.container.Accordion', /*Sxu, July 30, 2015 the folloiwng two lines are rquuired. */ alias: 'layout.accordion', type: 'accordion', onBeforeComponentCollapse: function(comp) { var me = this, owner = me.owner, toExpand, expanded, previousValue; if (me.owner.items.getCount() === 1) { // do not allow collapse if there is only one item return false; }
Challenges: Map component- ESRI shop
- Third party required
- Rich spatial functionality
// map panel { xtype: 'panel', id: 'mapPanel', // margin: '30 0 0 0', region: 'center', html: '<div id=\'map\'></div>', listeners: { resize : 'onMapPanelResize'
} }}
- One strata with multiple addresses (up to 500)- Creating 500 panels on the fly is slower than Silverlight version.
Challenges: Multiple Panels
Challenges: Multiple Panels- Solution: Reuse Panels- 150 panels in memory- idea is borrowed from our mobile app
if (!addressTitle){//create newaddressTitle = createTitlePanel(pAddress, pID);addressTitle.showAt([-500,-500]);showAddressList.push(addressTitle);
} else {if (!addressTitle.getCollapsed()){
//collapse open panels if anyadjustGridPanelHeight(addressTitle, false);addressTitle.collapse();addressTitle.setIconCls('iconArrowClose');
}//reuse panelsaddressTitle.setId(pID);addressTitle.setTitle(pAddress);
}
Under each address panel, there are six grid panels which show property data. Those grid panels are created only once.
Coding Efficiency: Multiple grid panels
Grid Panel Reuse
- Property data grid panels are stored in a list. The list will be added to its parent panel items when used.
- Load component or javascript file only when it is being used.
/* * initialize grid panels once */var initilizeGridPanels = function() {
try {
if (!propertyGridCmp){ propertyGridCmp = createPropertyGrid(); propertyGridCmp.showAt([-500,-500]);
propertGridList.push(propertyGridCmp);}
COSMOS code structure- Code structure is generated by Sencha CMD:
sencha -sdk C:\Develop\ext-5.1.2 generate app cosmos cosmos
- Three folders added for custom css, js and configure json files
MainController
- There are no actual code in main controller. Serve as a bridge to javascript file.
- its size is small.
/Ext.define('cosmos.view.main.MainController', { extend: 'Ext.app.ViewController',
requires: [ 'Ext.window.MessageBox' ],
alias: 'controller.main',
/* * Layer list tools */ onAerialPanelClick : function() {
CSLL.onAerialPanelClick(); }, onAerialPanelMouseover: function(e) {
CSLL.onAerialPanelMouseover(e); }, onAerialPanelMousel
Javascript file
Avoid global variables.
- js file is self executed
- handles view actions and map actions.
var CSLL = (function (window, Ext, undefined) {var theRef = "",
/* * */var getLabeLayerList = function() {
if (labelLayers.length === 0) {var rootNode = layerListStore.getRootNode();getLabelAllFolders(rootNode);
}
return labelLayers;};
Build and deploy
sencha app build
java -jar compiler.jar
server
Performance Test
Summary
- Good Performance- Better look & feel
- Satisfied Users- Browser Agnostic
Success!
What’s Next:
- Ext JS 6 upgrade- WROMS (White Rock Online Mapping System)- Agile release of enhancements- Mobile replacement- COSMOS “Product” work
- more configurable components- UI review
Recognition:
- GIS Section- Sencha Support
Thank you!
