App development with GWT, Cordova and Netbeans Part 3

This is the first 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 previous parts we did create a MGWT project and did put a "Hello world" button on the screen.

This is shown just nice on any browser, but is not yet a native mobile app.

In this part we will use the adobe phonegap build service to package our small web app as a native app which can be put in a app store of the big players.

Packaging the app for the different target systems is a tedious work, since you must install the different SDK, in the correct versions. And you can't develop all version on a single platform. For example iOS apps need a OS-X system to build them.

Fortunally there exists a build service from adobe which allows you to upload your web app as zip file (or take the source from a git repository) and then build the app for all the target platforms you wish.

The free version of the service allows you to build one private app and as many opensource apps as you wish.

If you need to build more private (or better closed source ) apps, then you can buy a upgrade for $9.99/Month which allows you to build up to 25 private applications.

We will continue with the free account and use this to build our closed source app, directly from inside netbeans. So you won't have to upload the zip file manually and can fully automate your builds.

The first step to build a native app, is extending the maven build to include the build service. Fortunally Chris has written a maven plugin which handles this very well.

In your pom.xml you just add the dependency to the new plugin:

<plugin>
    <groupId>com.github.chrisprice</groupId>
    <artifactId>phonegap-build-maven-plugin</artifactId>
    <version>0.0.7</version>
    <executions>
        <execution>
            <id>phonegap-build</id>
            <goals>
                <goal>clean</goal>
                <goal>build</goal>
            </goals>
        </execution>
    </executions>
    <configuration>
        <platforms>            
            <!-- <platform>ios</platform> -->
            <platform>android</platform> 
            <platform>winphone</platform>
        </platforms>
    </configuration>                                   
</plugin>

With this your build process will push the zip file to the adobe build service and retrieve the final platform packages.

Since the build service is password protected, you need to specify your credentials.

This can simply be done by specifying which server should be used for building in your pom.xml file. (Almost on top of it)

<properties>
    <gwtversion>2.5.0</gwtversion>
    <phonegap-build.server>phonegap-build</phonegap-build.server>
</properties>

The second part is to specify your personal credentials. As it's a bad idea to put them in the pom.xml, you should put them in default maven settings file.

The maven settings file is called settings.xml and is usually located in the .m2 directory of the users home folder.

The content should look like this:

<settings xmlns="http://maven.apache.org/SETTINGS/1.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0 http://maven.apache.org/xsd/settings-1.0.0.xsd">
    <servers>
        <server>
            <id>phonegap-build</id>
            <username>yourlogin@adobe.com</username>
            <password>MySecurePassword</password>
        </server>
    </servers>
</settings>

The last step before starting the build is to specify a config.xml file, to instruct the build service what should be done.

This file is located under src/main/phonegap-build and should have this content:

<?xml version="1.0" encoding="UTF-8"?>
    <widget xmlns = "http://www.w3.org/ns/widgets"
        xmlns:gap = "http://phonegap.com/ns/1.0"
        id        = "org.company.project"
        versionCode=""
        version   = "1.0.0">
        <name>My test project</name>
        <description></description>
        <author href="http://www.aarboard.ch" email="support@aarboard.ch">André Schild</author>
        <preference name="phonegap-version" value="3.4.0" />
        <preference name="orientation" value="default" />
        <preference name="fullscreen" value="true" />
        <preference name="target-device" value="universal" />
        <preference name="webviewbounce" value="true" />
        <preference name="prerendered-icon" value="true" />
        <preference name="stay-in-webview" value="true" />
        <preference name="ios-statusbarstyle" value="black-opaque" />
        <preference name="detect-data-types" value="true" />
        <preference name="exit-on-suspend" value="true" />
        <preference name="show-splash-screen-spinner" value="true" />
        <preference name="auto-hide-splash-screen" value="true" />
        <preference name="EnableViewportScale" value="false" />
        <preference name="MediaPlaybackRequiresUserAction" value="false" />
        <preference name="AllowInlineMediaPlayback" value="false" />
        <preference name="BackupWebStorage" value="cloud" />
        <preference name="TopActivityIndicator" value="gray" />
        <preference name="KeyboardDisplayRequiresUserAction" value="true" />
        <preference name="HideKeyboardFormAccessoryBar" value="false" />
        <preference name="SuppressesIncrementalRendering" value="false" />
        <preference name="android-minSdkVersion" value="7" />
        <preference name="android-installLocation" value="auto" />
        <preference name="SplashScreenDelay" value="5000" />
        <preference name="ErrorUrl" value=""/>
        <preference name="BackgroundColor" value=""/>
        <preference name="KeepRunning" value="false"/>
        <preference name="DisallowOverscroll" value="false"/>
        <preference name="LoadUrlTimeoutValue" value="20000" />
        <preference name="disable-cursor" value="true" />
        <gap:platform name="android" />
        <gap:platform name="winphone" />
        <access origin="http://127.0.0.1*" />
    </widget>

You can now rebuild your project and should have the two app packages in the target/phonegap-build folder.

One is a .apk file for android, the other a .xap file for windows phone.

You could now transfer these files to your mobile device and test them, or you can go to the adobe build service page and scan the QR code from there.

If you modify your code, you can then just rebuild the app and reinstall it on your phone.

If subsequent builds fail, then you have to specify which APP number to use. Otherwise the build service thinks you wish to cretae multiple private apps.

To prevent this, you note the app id from the build service (see screenshot above) and then add this to your pom.xml file in the plugin section.

    </platforms>
    <appId>9xxxxxx</appId>                            </configuration>                   

As you may have noted, we did now build the app for Android and Windows phone. When you wish to build your app for iOS, then you need a developer account from apple. This account costs $99.-/Year.

You have to create a account here and then register for iOS development. You will then receive a signing key, with which you have to sign ANY iOS application you develop. There is no other way to install software on your iOS devices (unless you root the device)

In the next and last part of the serie we will look at what is required to access native features for your mobile device. In short you need to integrate the cordova plugins and initialize them correctly.