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