MGWT – using GWT Map widget on mobile phone with mgwt

I am going to demonstrate with this short presentation the use of gwt-maps library with MGWT technology, and this is about how to develop a mobile application under Netbeans IDE, for all the mobile phones that supports webkit. The application will have a simple button component that the user clicks, a map appears on the screen, positioned to Satu Mare city, where I live.

If you have the Netbeans IDE ver 7.2 installed on your computer, or any other java editor, just follow the steps:

1. download and install(unzip) to your computer the GWT  SDK(google web toolkit)

https://developers.google.com/web-toolkit/download

2. if you have Netbeans IDE, download the latest GWT plugin for Netbeans, and install it from Tools->Plugins->Downloaded

http://plugins.netbeans.org/plugin/44509/gwt4nb

3. download and install(unzip) the latest version of MGWT sdk library(making gwt work with mobile)

http://www.m-gwt.com/

4. download and install(unzip) the gwt map library, version 1.1

http://code.google.com/p/gwt-google-apis/downloads/detail?name=gwt-maps-1.1.1.zip&can=2&q=

After these steps just create a web application with Netbeans and use for example the Tomcat Apache web server for running the program. Creating the application with Netbeans wizard, you will have the option to add to your project, the GWT sdk, at the end of the wizard, by checking it.

After creating your project, right click on project properties window, and add the library of MGWT(mgwt-1.1.1.jar) too and also the library of gwt-map(gwt-maps.jar).

In your project, find the *.gwt.xml file, open it, and add the following lines to the existing code:

    <inherits name="com.google.gwt.user.User"/>

    <inherits name='com.googlecode.mgwt.MGWT'/>

    <inherits name='com.google.gwt.maps.GoogleMaps'/>

//if you use firefox

<set-property name="user.agent" value="gecko1_8"/>

//or for example chrome

<set-property name="user.agent" value="safari"/>  

One more step.... :) add the following java code to onModuleLoad() procedure in your EntryPoint java file:

    public void onModuleLoad() {      

        //build some UI

        layoutPanel = new LayoutPanel();

        Button button = new Button("View the MAP!");               

        layoutPanel.add(button);

        //for click event

        button.addTapHandler(new TapHandler() {

        @Override

        public void onTap(TapEvent event) {

           Maps.loadMapsApi("", "2", false, new Runnable() {

              public void run() {

                // Open a map centered on Satu Mare, Romania

                LatLng SatuMareCity = LatLng.newInstance(47.792091, 22.885189);

                final MapWidget map = new MapWidget(SatuMareCity, 2);

                map.setSize("100%", "100%");

                // Add some controls for the zoom level

                map.addControl(new LargeMapControl());

                // Add a marker

                map.addOverlay(new Marker(SatuMareCity));

                // Add an info window to highlight a point of interest

                map.getInfoWindow().open(map.getCenter(),

                    new InfoWindowContent("The River Somes is here in Satu Mare"));

                final DockLayoutPanel dock = new DockLayoutPanel(Unit.PX);

                dock.addNorth(map, 500);

                // Add the map to the HTML host page

                layoutPanel.add(dock);

              }

            });

        }                   

        }) ;                                                                                                             

        RootPanel.get().add(layoutPanel);               

    }

Where the compoent layoutPanel is a global variable defined in the main class file, that implements EntryPoint, and where also the method above is situated.

LayoutPanel layoutPanel;

You can test your application under your browser,  but there are also emulators on the web which you can use to test mobile applicatons:

http://tablet-emulator.org/

If you run, the application above should look like: