webtram: una webapp gwt per l'editing di dati cartografici e topologici di una rete del...
DESCRIPTION
Talk di Lorenzo Sarti alla GWTcon 2014TRANSCRIPT
1Lorenzo Sarti
Webtram
Lorenzo Sarti
Firenze5th October 2014
A GWT app for the editing of the transport network and the planning of the service
2Lorenzo Sarti
Agenda
● M.A.I.O.R. profile and MTRAM software suite
● WebTram:
● Back-end based on Oracle Technologies● Front-end based on GWT
● Wrapping a Map Viewer with JSNI
● Future works and conclusions
3Lorenzo Sarti
M.A.I.O.R profile
● Management, Artificial Intelligence, Operational Research ...● … was born as a spin-off of the University of Pisa in 1989
● … its customers are public transport authorities and operators
● … provides systems to manage, automate and optimize service planning, resource management, blocking, rostering, and performance analysis
4Lorenzo Sarti
MTram Suite
MTRAM means advanced optimization applied to public transport planning, programming and management.
Network designTimetable design
The network design and editing module is WebTram
5Lorenzo Sarti
WebTram
● WebTram allows the user a complete editing of all elements of the physical and topological network
● It integrates advanced automatic routing functionalities
● It provides an intuitive and easy-to-use GUI implemented by means of GWT
6Lorenzo Sarti
WebTram
● WebTram allows the user a complete editing of all elements of the physical and topological network
● It integrates advanced automatic routing functionalities
● It provides a intuitive and easy-to-use GUI implemented by means of GWT
7Lorenzo Sarti
WebTram back-end 1/2
● The back-end is developed exploiting Oracle technologies:● Database and Locator for managing both
plain and cartographic data
● MapBuilder for styles, themes, and base maps definition
● MapViewer as a programmable tool for rendering maps using spatial data
8Lorenzo Sarti
WebTram back-end 2/2
● MapViewer provides a suite of APIs that allow access to its features
● WebTram uses the AJAX-based Javascript API to render spatial data
9Lorenzo Sarti
Front-end – GWT features – 1/2
● WebTram GUI exploits several GWT features:● Sencha GXT - provides a comprehensive
library of high-performance data widgets
● Static String I18N: uses standard Java properties files to store translated strings and parameterized messages, then implements strongly-typed Java interfaces to retrieve their values
10Lorenzo Sarti
Front-End – GWT features – 2/2
● Client Bundles:● ImageResources: provide access to image
data at runtime in the most efficient way possible
● CssResources: syntax validation, minification, different Css for different browser
● JavaScript Native Interface: to create the wrapper for the MapViewer JavaScript API
11Lorenzo Sarti
Oracle MapViewer API Wrapper
● The main class of the API is MVMapView● JavaScript Native Interface methods have been
implemented to:● Display a map in a div element● Add/remove layers● Add navigation tool and zoom in/zoom out● Draw rectangles and polygons● Map browser and cartographic coordinates
12Lorenzo Sarti
JNSI Example - Display the map
public class MVMapViewWrapper{
//The reference to the MVMapView Js Objectprivate JavaScriptObject nativeMap = null;
public MVMapViewWrapper(){}
public void createAndDisplayMap(String aContainerId, String aMapviewerUrl, double aX, double aY, int aZoomLevel){
nativeMap = createNativeMap(aContainerId, aMapViewerUrl);if (nativeMap != null){
setCenterAndZoomLevel(nativeMap, aX, aY, aZoomLevel);display(nativeMap);
}}//The MVMapView Js Object creation. It needs an HTML container id and the MapViewer URLprivate native JavaScriptObject createNativeMap(String aContainerId, String aMapviewerUrl) /*-{
if ($wnd.document.getElementById(aContainerId) == null) {alert("$wnd.document.getElementById(" + aContainerId + ") == null");return null;
} else {
return new $wnd.MVMapView($wnd.document.getElementById(aContainerId), aMapviewerUrl);}
}-*/;
private native void setCenterAndZoomLevel(JavaScriptObject aNativeMap,double aX, double aY, int aZoomLevel) /*-{
aNativeMap.setCenterAndZoomLevel($wnd.MVSdoGeometry.createPoint(aX, aY), aZoomLevel);}-*/;
private native void display(JavaScriptObject aNativeMap) /*-{aNativeMap.display();}-*/;
}
13Lorenzo Sarti
WebTram Datasources
● Generally public transport authorities and operators own their spatial data – such data is stored in the Oracle Database
● WebTram can be attached to other spatial datasources:● OpenStreetMap;● Google Maps;● Nokia Maps
● We prefer to use Oracle Database in order to better control the whole process
14Lorenzo Sarti
Future works with GWT
● MAIOR will release a WebDesktop environment that integrates all the MTRAM modules (within 2015)
● MAIOR will release new versions of MTRAM planning and scheduling modules (within 2016), dedicated to:● Automatic Timetable generation● Vehicle blocks and Driver duties optimization
● The new modules will be developed using GWT
15Lorenzo Sarti
Future works with GWT
● MAIOR will release a WebDesktop environment that integrates all the MTRAM modules (within 2015)
● MAIOR will release new versions of MTRAM planning and scheduling modules (within 2016), dedicated to:● Automatic Timetable generation● Vehicle blocks and Driver duties optimization
● The new modules will be developed using GWT
The timetable planning system exploits HTML5 canvas
16Lorenzo Sarti
Conclusions
● WebTram represents a GWT success story:● .. has been released about one year ago.
Today, 10 operators in Italy and 2 in Finland uses WebTram
● GWT allows Maior to:● develop a cross-browser web app (very
important – Maior cannot control the browser of its customers)
● use its Java developers (with poor Js skills)
17Lorenzo Sarti
Grazie per l'attenzione
Autore