Talk di Lorenzo Sarti alla GWTcon 2014

1. Webtram
A GWT app for the editing of the transport
network and the planning of the service
Lorenzo Sarti
Firenze
5th October 2014
Lorenzo Sarti 1

2. 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
Lorenzo Sarti 2

3. 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
Lorenzo Sarti 3

4. MTram Suite
MTRAM means advanced optimization applied to public transport
planning, programming and management.
Network design
Timetable design
The network design and editing module is WebTram
Lorenzo Sarti 4

5. 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
Lorenzo Sarti 5

6. 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
Lorenzo Sarti 6

7. 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
Lorenzo Sarti 7

8. 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
Lorenzo Sarti 8

9. 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
Lorenzo Sarti 9

10. 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
Lorenzo Sarti 10

11. 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
Lorenzo Sarti 11

12. JNSI Example - Display the map
public class MVMapViewWrapper{
//The reference to the MVMapView Js Object
private 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 URL
private 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();
}-*/;
}
Lorenzo Sarti 12

13. 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
Lorenzo Sarti 13

14. 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
Lorenzo Sarti 14

15. Future works with GWT
The timetable planning system exploits HTML5 canvas
●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
Lorenzo Sarti 15

16. 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)
Lorenzo Sarti 16

17. Grazie per l'attenzione
Autore
Lorenzo Sarti 17