University of Tasmania

quaggafoulInternet and Web Development

Dec 14, 2013 (7 years and 7 months ago)


IMOS is supported by the Australian Government through the National Collaborative Research Infrastructure Strategy and the Super Science Initiative
It is led by the University of Tasmania on behalf of the Australian marine and climate community
Building an ExtJS user interface for
Current Ocean Portal
ZK for rich web
application UI
• ZK is a server based client
• OpenLayers is a javascript library – runs in the
• Not really compatible
• Difficult to track down problems
• Difficult to change
• Lots of changes in the pipeline
• Upgrade to latest ZK version
– Includes better support for interacting with client
• Use different Framework for development
– Grails/JQuery
– Grails/ExtJS
• Grails/ExtJS chosen
– jQuery an excellent library
– ExtJS good for larger applications
What is Grails?
• Rapid web application development framework
– Coding by convention
• Open source
• Written in Groovy
– Runs in a JVM
– Can leverage existing java libraries
• Built on Spring/Hibernate
• Used with great success already on the project
What is ExtJS?

Javascript library for building interactive web

Runs in the browser

Uses techniques such as AJAX, DHTML, DOM

Server technology independent

Developed by Sencha
What's in it for the End-user?

Resizable windows

Tab panels



Tree components


Drag and drop

Much more ...
Desktop application capabilities in your web application
Examples from the Sencha Web Site
What's in it for the Developer?
Extensive range of components, controls (widgets) and
utility functions
Object oriented programming emulation
Can extend ExtJS components
Supports component based development
Event based programming model
Friendly to other javascript libraries – jQuery, prototype etc
Excellent community support
Well defined API and Documentation
ExtJS Licensing options
Commercial Software License
For development of closed source commercial applications
Commercial OEM License
For commercially licensed SDK's or web application
Open Source License
For open source applications licensed compatibly with the
GNU GPL License V3
GeoExt – ExtJS for Map Clients
OpenGeo project
Combines ExtJS and OpenLayers

UI components for building map clients

Provides additional functionality

Back capability for map navigation!

Print capability (with appropriate server components)

Simplified creation of map windows and panels

ExtJS compatible stores and components
NOTE: GeoExt 1.0 is not compatible with latest ExtJS
release (v4)
GeoNetwork and ExtJS
• ExtJS components first used in GeoNetwork 2.6
• In GeoNetwork 2.8 used to build the new experimental
User Interface
– Usage configured during installation (config-gui.xml)
What are we doing?
Portal map and search client
ExtJS Application services (JSON)
- menus, configured layers etc
Portal Configuration pages
- menus, configured layers etc
Authentication/Authorisation services (Shiro plugin)
Catalogue service
Catalogue Search Options
• Use GeoNetwork ExtJS components to build I/F
– Functionality available through GeoNetwork
experimental I/F
– Heavy weight for portal search client
– Use core components only – catalogue
searching, search results stores, search
parameter suggestion readers and stores
• Use standard ExtJS components and hook them up to
GeoNetwork services
• Call GeoNetwork search service from application
service layer
In Progress!
Lessons Learned
Use ExtJS components where you can

Building your own rich UI widgets is time consuming
Follow the ExtJS model

Or start doing it all yourself
To really leverage the power of ExtJS takes time

To understand the Object Oriented Programming
emulation model used

To understand how ExtJS components work and how
they can be extended
Good Reference Material Helps

ExtJS in Action - Jesus Garcia

Learning ExtJS – Shea Frederick, Steve 'Cutter'
Blades and Colin Ramsay

Excellent API documentation provided by Sencha

Samples and demos on the Sencha web site

Sencha forum

Follow the example of the experts – the ExtJS source
code itself
Integrated Marine Observing System
University of Tasmania
Private Bag 110
Hobart Tasmania 7001
Where's the markup?

HTML is optional in an ExtJS application

Paradigm shift for many web developers

Can be very similar to developing desktop applications

Can be 'object oriented'