Monday, June 2, 2014

App development with GWT, Cordova and Netbeans Part 2

This is the second part of my blog series on how to develop mobile apps with GWT, Cordova and Netbeans. The initial description can be found here.

In the first part we did create a basic MGWT project from a maven template and did run it in the web browser of our choise.
It did just display a grey divider line on the screen, similiar to this.

Now we wish to show some real content on the page. For this we need to mobify the main class of the application.
The main application class is defined in your <project>.gwt.xml file.
Look for the  <entry-point> xml tag, this is where your application starts.

You can now open this java file and search for the start() method.
The simplest way to get our hello world is to modify the start() method to only show a button with hello world as caption.

So your start() method should look like this:

private void start() {
       
      //set viewport and other settings for mobile
            MGWT.applySettings(MGWTSettings.getAppSetting());
            LayoutPanel mainPanel= new LayoutPanel();
            mainPanel.setWidth("100%");
            Button button = new Button("Hello world");
            button.setWidth("100%");
            mainPanel.add(button);
            RootPanel.get().add(mainPanel);       
    }


Don't delete the onModuleLoad method, this one is required.
After a rebuild und run of the project, you should now see the "Hello world" button on your browser, similar to this printscreen.


Initial description
Part 1
In the next part we will now go to the magic, and put this in a android and windows phone app.