This post is part of a series of blogposts that show the usage of some mgwt / gwt-phonegap components.
With mgwt and gwt-phonegap you can deploy your GWT apps into any app store or let your users use them as a website.
Both projects are available under apache 2.0 license from maven central.
mgwt provides mobile widgets that are compatible with UIBinder and the Editor Framework. mgwt integrates touch events and animation events with its own DOM implementation and provides gesture recognizers on top of that.
There are themes for iPhone, iPad, android phones, android tablets and blackberry. For going offline there is an automatically generated HTML5 offline manifest.
In dev mode gwt-phonegap can emulate the Phonegap API so that developing of Phonegap apps can happen inside GWT dev mode. gwt-phonegap also provides utilities to make GWT RPC work in a Phonegap environment.
mgwt uses GWT core concepts like Client Bundles, deferred binding, GWT MVP and many more. mgwt tries to leverage GWT features as much as possible, enabling the GWT Compiler to do optimizations.
mgwt leverages the GWT Compiler and HTML5 to get really good performance on mobile. Here are a few examples:
Most of the styling can be done only by using CSS3. This reduces apps size significantly. The following screenshots do not contain any images
[Image1 - Slider on iPhone] [Image2 - Slider on Android]
Theming with Client Bundles
mgwt uses GWT Client Bundles for styling to ensure that unused CSS can be removed by the GWT Compiler. This means e.g. if an app is not using the slider widget the CSS won`t be inside that app.
Going offline aka no download
Mobile devices are not always connected to the internet. Therefore mobile web apps need to be able to start while being offline. This can be achieved with the HTML5 offline manifest. The GWT compiler sees all artifacts during compilation. This is why mgwt can generate the manifest files for different permutations at compile time. This means that an android device will only download and store the necessary android files, while an iPhone sees a different manifest.
Keeping your DOM minimal makes your apps run fast. mgwt tries to use as few DOM elements as possible, while doing styling in CSS.
Layout with the flexible box model
With HTML5 there is the flexible box model which is supported by all important mobile devices and can be used to achieve any layout that you need for mobile. mgwt uses the flexible box model heavily to build its layouts.
Animations with CSS3
mgwt uses different kinds of CSS animations depending on the platform so that animations always feel fast.
Want to learn more? Checkout the mgwt homepage and the blog. There is also a 90 minutes talk on mgwt from the dutch GTUG.