Developing modern web and mobile apps: 2012

Tuesday, December 4, 2012

GWT Survey results

Today David Booth came through and together with Vaadin composed the complete results of the GWT survey. A really big thanks for all the work they have done!

You will discover a lot of comments in the document from me, but let me outline a few important decisions. GWT is very healthy: about 90% of the people doing GWT would choose to use it for their next project as well.

I was amazed by the number of people who are using mgwt / phonegap to build their projects for mobile.
The three main things which I felt were missing from GWT (fast compiles, a better CSS3 parser and more great looking widgets) were named a lot in the survey. The good thing is we are already working on the compile time with super dev mode which will have it's best days still ahead.

Fast and beautiful widgets that leverage new browser features are still missing, but if you take a look at mgwt this can be done pretty easily. Why don't I build something for desktop as well?

Those are just some quick thought, read through the report yourself and make up your mind. GWT is healthy with a very good community.

Saturday, October 20, 2012

mgwt 1.1.2 released

Today I got around to releasing mgwt 1.1.2, this is a recommended update to all mgwt users. It is a a drop in replacement for mgwt 1.1.1, but it fixes a lot of bugs, such as:

Improved CellList
many css fixes
hide address bar support
better permutation control
Improvements to GestureRecognizers
Bug fixes on MSearchBox
fixing android quirks
home screen offline support for iOS

Here is a complete list.

I encourage you to download the new version.
It is also available from maven central:

<dependency>
      <groupId>com.googlecode.mgwt</groupId>
      <artifactId>mgwt</artifactId>
      <version>1.1.2</version>
</dependency>

Saturday, September 22, 2012

gwt-phonegap 2.0 released

I was finally able to release gwt-phonegap 2.0 today.

This is now fully compatible with Phonegap 2.0 and GWT 2.4 and GWT 2.5 rc1.

This version fully works with mgwt.
As always you can get the new version from google code or from maven central:

<dependency>
      <groupId>com.googlecode.gwtphonegap</groupId>
      <artifactId>gwtphonegap</artifactId>
      <version>2.0.0.0</version>
</dependency>

Wednesday, September 19, 2012

The future of GWT Survey

Vaadin Ltd., as part of the newly-formed GWT Steering Committee, has drafted an online survey for GWT users. The following is a guest blog post from David Booth of Vaadin Ltd.

Here is their original blog post on the Vaadin blog that announces the survey.

Please take a few minutes to take part in the survey so that we can get a better understanding of the GWT community and so that we can find out on what you want us to concentrate.

Information is king - So once we collect all the data from this survey, we’ll work together to build The Future of GWT Report. We’re happy to publicly share all the information we find with you, so that we can all make educated decisions about the future!

Can you take 10 mins to fill out The Future of GWT survey?

We are very thankful for your help!

Sunday, July 22, 2012

using gwt-phonegap

This post is part of a series of blogposts that show the usage of some mgwt / gwt-phonegap components.

For quite a while I wanted to write a blog post on how to use mgwt and phonegap together to write great mobile apps.
While mgwt provides all the mobile widgets, animations and touch support you need, gwt phonegap provides access to the phonegap api.
Combining them means being able to write mobile apps with GWT that look beautiful and behave exactly like native apps.

Some background
GWT compiles Java to Javascript. With Phonegap you can write Apps in Javascript. Basically we just need to take the output of the GWT Compiler and put it on the phone.

Which files to include
In general you will have a html host page, like you have with any GWT app. With a phonegap app this will include at least the javascript for the phonegap api (cordova-x.x.x.js) and your gwt no cache file.
An example html host file would look like this:

<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>name of your app
    <!-- phonegap api -->
    <script type="text/javascript" language="javascript" src="cordova-1.x.x.js"></script>
    <!-- gwt module include -->
    <script type="text/javascript" language="javascript" src="yourgwtmodule/yourgwtmodule.nocache.js">
  </head>

  <body>
   <!-- gwt history frame -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0">
  </body>
</html>

You can see the include for the phonegap api. Note: It is important that phonegap is included first!

I would recommend keeping the html host file seperate from the one you are using for a web app, since with a web app you will not have a phonegap include.
Your deployment script however needs to copy the complete module folder (gwt output) as well as other needed resources to the phonegap www folder.

In Phonegap all HTML + CSS + Javascript files need to be inside the www folder of your phonegap project. If you are using phonegap plugins you might also be adding code. (Java for Android, Objective-C for iOS and so on)
If you have never used phonegap you might also be interested in a good guide on how to setup phonegap.

The gwt phonegap part gives instructions on how to setup a GWT with gwt phonegap.
The main idea behind gwt phonegap is to provide two implementations of the phonegap api: one that is using the phonegap javascript API on a device and the other is a pure emulation api that enables developers to build phonegap apps while running gwt dev mode.
To ensure that there are no runtime penalties gwt phonegap uses deferred binding and compiles different implementations for emulation and phonegap environment. This is done by the phonegap.env variable.

This means that you can use any phonegap module inside the browser and still call all phonegap api. (For specific limitations see every modules documentation )

A simple Hello World Phonegap demo would look like this:

final PhoneGap phoneGap = GWT.create(PhoneGap.class);

phoneGap.addHandler(new PhoneGapAvailableHandler() {

 @Override
    public void onPhoneGapAvailable(PhoneGapAvailableEvent event) {
     // build your ui and caLet ll phonegap
        String phoneGapVersion = phoneGap.getDevice().getPhoneGapVersion();
        RootPanel.get().add(new HTML("Using phonegap version: " + phoneGapVersion));

    }
});

phoneGap.addHandler(new PhoneGapTimeoutHandler() {

    @Override
    public void onPhoneGapTimeout(PhoneGapTimeoutEvent event) {
        Window.alert("can not load phonegap");
    }
});

phoneGap.initializePhoneGap();

Summary - Setup Projects
Let me walk you through the necessary steps to get a GWT app on a phone with phonegap.
I am assuming that you set up a phonegap project as described in the phonegap documentation for your plattform.
This is the shell for your web app to run on a phone. It has a www folder where we will store our web app.

The next step is to setup a standard GWT project.
In this project you need to at the gwtphonegap-1.x.x.x.jar to your classpath. You can do this manually or use maven to do this.
After adding the jar to your classpath you need to add the following line to your gwt xml file:

     <inherits name='com.googlecode.gwtphonegap.PhoneGap' />

This tells the GWT compiler that you want to use the gwt phonegap project. After that you can start using the phonegap object in your code (see example).

At one point you want to get your application on an actual phone. Now you have to compile the app using the GWT compiler and copy the output of the GWT project (your module folder) to your www folder of your phonegap project.

For a a release of an app you only want to copy the relevant files for the actual permutation. mgwt has a special permutation map linker for that. It outputs xml that lets you easily find the necessary files for the right devices. This will be covered in another blog post.

Sunday, July 8, 2012

mgwt - Going mobile with GWT & Phonegap

This post is part of a series of blogposts that show the usage of some mgwt / gwt-phonegap components.

mgwt is a library for developing mobile apps and mobile websites with GWT from one code base. mgwt provides native looking widgets for many platforms, animations and many other things that are needed for writing mobile apps. gwt-phonegap enables GWT apps to use Phonegap. With Phonegap HTML5 apps can access the same device features that native apps can use from Javascript, such as the file system or contacts.
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.

Features
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.

Performance
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.
Mobile devices do have much slower CPUs, less bandwidth and are running on battery. Building inefficient apps means draining the users battery. Since GWT is very good at optimizing Javascript apps it is a natural fit for writing cross platform mobile apps.

mgwt leverages the GWT Compiler and HTML5 to get really good performance on mobile. Here are a few examples:

No Graphics
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.

Minimal markup
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
If layout feels fast the application feels fast. Therefore layout should not be done in Javascript, CSS should be used instead. The browser can calculate and apply the layout in its native code which is going to be much faster than doing calculations in Javascript.
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
For mobile applications it is quite common to have animations. If Javascript would be used for animating, the browser has no change to optimize. If you want fast animations you need to give the browser the knowledge of the whole animation, so that it can figure out a fast way to execute it. This can be done with CSS3 animations.
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.

Saturday, July 7, 2012

mgwt and the viewport

This post is part of a series of blogposts that show the usage of some mgwt / gwt-phonegap components.

If you are writing software for mobile phones you should know about the view port meta tag and what it can do for you.
There are different settings for the viewport that let you do different things.
Browsers on mobile phones are different from desktop browser in the sense that they have this notion of the viewport. The screen on an average mobile phone is not big enough to fit a normal webpage. This is why the viewport was invented. It allows mobile browsers to display webpages that are made for desktop devices by zooming and moving the viewport around.

If you don`t supply any information to the browser it will render your page zoomed out. It will try to give the user a good overview of the page so that he can decide on which part he needs to zoom in.
Normally text will not be readable.

You can control the initial scale, the maximum scale and the minimal scale of the viewport with a meta tag.

Setting an inital scale will set the value lets you control the zoom value at startup.
With mgwt it would look something like this:

   ViewPort viewPort = new MGWTSettings.ViewPort();
   //configure view port
   viewPort.setMinimumScale(0.2).setInitialScale(1.0).setMaximumScale(5);

   //create settings and set view port
   MGWTSettings settings = new MGWTSettings();
   settings.setViewPort(viewPort);

   //apply the setting e.g. create meta tag in page
   MGWT.applySettings(settings);

This code would result in a meta tag looking like this:

   <meta name="viewport" content="initial-scale=1.0,minimum-scale=0.2,maximum-scale=5">

If you are writing app you do not want the user to be able to zoom your app. The webpage should feel like a native app. This can be done by setting the initial screen scale to 1.0 and disabling scrolling.

With mgwt this would look like this:

   ViewPort viewPort = new MGWTSettings.ViewPort();
   viewPort.setUserScaleAble(false).setMinimumScale(1.0).setInitialScale(1.0).setMaximumScale(1.0);

   MGWTSettings settings = new MGWTSettings();
   settings.setViewPort(viewPort);
   settings.setPreventScrolling(true);

   MGWT.applySettings(settings);

This will create a meta tag that looks like this:

   <meta name="viewport" content="initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no">

Depending on what you are trying to do you need to set different values for the viewport.
mgwt gives you the freedom to set any value that make sense to you.

If you want to have the default settings for an app you can use a short handle like this:

   MGWT.applySettings(MGWTSettings.getAppSetting());

I hope gives you the necessary information to use viewport effectively to build your mobile app with mgwt.

As always feel free to leave any comments or suggestions.

Thursday, July 5, 2012

mgwt & super dev mode

This post is part of a series of blogposts that show the usage of some mgwt / gwt-phonegap components.

GWT Super Dev Mode is a very nice way of seeing your changes on a mobile device very quickly.

Unfortunately it`s not that easy to use with a mobile browser. This is why I built a direct support for it into mgwt.

The basic idea:

The GWT Super Dev Mode consists of a so called code server which skips many of the standard GWT optimizations and thus is able to produce Javascript from Java very fast. You can run it alongside your nomal GWT Dev Mode. On browsers that support source maps you can even do Java debugging in their Javascript Debugger.

Right now the support in mgwt is considered experimental, because I might change some bits based on your feedback.

Setting it up:

Requirements

GWT 2.5 rc1 (or later) from here
latest mgwt trunk (1.1.2-SNAPSHOT) from here

Configure SDK in Eclipse

Go to Prefrences -> Google -> Web Toolkit. Click on the add button and browse to the GWT 2.5 installation directory:

After adding the SDK, make it your default SDK. You list should look something like this:

Setting up your gwt.xml file & Entrypoint

In your gwt.xml file you need to add the following lines:

<add-linker name="xsiframe"/>
<set-configuration-property name="devModeRedirectEnabled" value="true"/>
<set-configuration-property name="mgwt.superdevmode" value="on" />

If you want to run your GWT CodeServer from a different host or port you also need to add:

<set-configuration-property name="mgwt.superdevmode_host" value="http://<yourhost>:<port>" />

In your Entrypoint you will have to add the following line, which will compile out if you turn off mgwt.superdevmode:

SuperDevModeUtil.showDevMode();

Setting up your Run Configuration to start Super Dev Mode

Inside Eclipse you need to create a Java Run Configuration. Go to your Run Configurations, select Java and press New:

On the first tab (Main) you can set a decent name and the project to use.
The main class you need to start is: com.google.gwt.dev.codeserver.CodeServer

In the arguments we need to pass a bindAddress as you know from a normal GWT dev mode, since with mobile devices we will not use it locally. Also we need to specify the Module to use. In my case it looks like this:
(Programm Arguments)
-bindAddress 0.0.0.0 com.googlecode.mgwt.examples.showcase.Showcase

In the VM Arguments make sure to give it some RAM, something along the lines of:
-Xmx1024m

In the class path tab you will need to add the gwt-codeserver.jar which you will find in your gwt installation directory and you will also need to add all folders with source code to the project. (The Codeserver operates on Java files)

You can add a folder by selecting User Entries, click on Advanced -> Add Folder and select the source folder of your project.

My classpath looks like this:

Now you can just start the code server. It will take some time but at the end it should print something like this:

The code server is ready.
Next, visit: http://:9876/

Compile your mgwt app once with the normal compiler

Now you need to compile your gwt module once the normal way and open it with your mobile phone / tablet. This is your normal gwt app that runs on the jetty server (http://yourpost:8888 by default) You should see something like:

If you click "Super Dev Mode On" you will see this:

Now you can hit compile, which will compile the app and reload the page:

Important: Super Dev Mode saves its state (turned on) inside session storage. So if you want to see the normal compiled app, you will need to hit "Super Dev Mode Off".

Round up

With this integration of Super Dev Mode into mgwt it will be much easier to test features on a device. I am seeing compile times less than 4s for many of my projects, which is a major improvement.

I am looking for feedback on this one. If you have some good suggestions on how to improve this, please let me know!

Friday, June 29, 2012

GWT Steering Committee

As you may have already heard from the google IO talk, I am now part of the GWT Steering Committee.

The job of the GWT Steering Committee is to drive GWT`s future by doing several things like:

Give a direction on the future of GWT
approve applicants to become committers
review code
administer releases
modify the process of how GWT is developed to meet new challenges
work as master committers

Initially the committee will consist of:

Ray Cromwell (Google)
Darrel Meyer (Sencha)
Mike Brock (Redhat)
Christian Goudreau (Arcbees)
Joonas Lehtinen (Vaadin)
Thomas Broyer
Stephan Haberman
Daniel Kurka (mgwt)

There will be a lot of exciting abouts in the next week about GWT so stay tuned!

This is also very great news for mgwt. I have been meeting with many different people this week on google IO demoing mgwt. I got so much great feedback and by being part of the steering committee all of the mgwt greatness will find its way somehow into GWT.

I have been talking a lot with Ray Cromwell and Rajeev Dayal from the GWT team about mgwt and they were quite excited about it.

All the discussion in the last month about the future of GWT and Dart were totally unfounded since Google is using GWT in so many ways and there is a vibrant community of external people building great stuff with GWT as well. This new process for GWT will ensure that GWT will stay one of the great open source projects where it is very easy for people to contribute and share their work. I am very excited about it and I hope you are too.

All the discussions from the steering committee are visible online, so feel free to listen on to the discussion!

Thursday, June 28, 2012

mgwt 1.1.1 released

I just released a new version of mgwt (1.1.1). This is mainly bugfixes and small changes.

Here are the fixed issues:

As always you can download the new release from google code or use maven:

<dependency>
      <groupId>com.googlecode.mgwt</groupId>
      <artifactId>mgwt</artifactId>
      <version>1.1.1</version>
</dependency>

Sunday, June 17, 2012

mgwt 1.1 released

Today mgwt 1.1 finally got released. A tremendous amount of work went into this release in the last 4 months and we were able to improve mgwt in a lot of ways.

It contains a lot of new features and many bug fixes such as:

a swipe panel
a grouping cell list with animated headers
a tabpanel with animating child elements
animations without using MVP
label support for form elements
gesture recognizers for swipe, pinch longtap and multitap
improved scrolling performance
improved Pull-To-Refresh widget

Here is a complete list of all the things in 1.1

Also I am starting a series of blog post on how to use certain things around mgwt and gwt-phonegap. Currently we are asking for suggestions for the upcoming 1.2 release on the mailing list. Please leave your comments and suggestions there.

Writing mobile apps with GWT is getting much better and easier with this release. I am really happy to see a so many people contributing and making mgwt a success. Thank you all!

You can download the release from the google code page or use maven:

<dependency>
      <groupId>com.googlecode.mgwt</groupId>
      <artifactId>mgwt</artifactId>
      <version>1.1.0</version>
</dependency>

For those of you taking a look at mgwt for the first time. You might be interested in an introductory talk I gave at the dutch GTUG, take a look at the showcase or ask question on the user group.

Saturday, June 16, 2012

using swipe recognizer

This post is part of a series of blogposts that show the usage of some mgwt / gwt-phonegap components.

This blog post show how to use a recognizer on a widget that does not have direct touch support by using TouchDelegate. Not that All widget that extends TouchWidget or TouchPanel have direct touch support. Most of the times you will be using TouchDelegate when you want touch / gestures on existing GWT widgets.

This demo uses the swipe recognizer and prints some data about the fired events into a panel.

1. Setup the viewport for the mobile browser:

MGWT.applySettings(MGWTSettings.getAppSetting());

2. Instantiate an AnimationHelper and attach it to the RootPanel:

AnimationHelper animationHelper = new AnimationHelper();
RootPanel.get().add(animationHelper);

3. Instantiate a LayoutPanel, GroupingCellList and HeaderList:

LayoutPanel layoutPanel = new LayoutPanel();

final RoundPanel roundPanel = new RoundPanel();
roundPanel.getElement().getStyle().setProperty("minHeight", "200px");
layoutPanel.add(roundPanel);

4. Use TouchDelegate to register swipe Handlers:

TouchDelegate touchDelegate = new TouchDelegate(roundPanel);
touchDelegate.addSwipeStartHandler(new SwipeStartHandler() {

 @Override
 public void onSwipeStart(SwipeStartEvent event) {
  roundPanel.clear();
  roundPanel.add(new HTML("swipe start detected at: " + event.getTouch().getPageX() + " " + event.getTouch().getPageY()));

 }
});

touchDelegate.addSwipeMoveHandler(new SwipeMoveHandler() {

 @Override
 public void onSwipeMove(SwipeMoveEvent event) {
  roundPanel.add(new HTML("swipe move detected at: " + event.getTouch().getPageX() + " " + event.getTouch().getPageY()));

 }
});

touchDelegate.addSwipeEndHandler(new SwipeEndHandler() {

 @Override
 public void onSwipeEnd(SwipeEndEvent event) {
  roundPanel.add(new HTML("swipe end detected"));

 }
});

5. Animate to the created UI:

animationHelper.goTo(layoutPanel, Animation.SLIDE);

The complete code for the example can be found here. If you want to see swipe recognizers in action take a look at the showcase.

using animation helper

This post is part of a series of blogposts that show the usage of some mgwt / gwt-phonegap components.

If you do not want to use GWT Activities and Places you can not use the AnimatingActivityManager from mgwt. This is why we created AnimationHelper. A simple class that lets you use animations with a very simple API.

1. Setup the viewport for the mobile browser:

MGWT.applySettings(MGWTSettings.getAppSetting());

2. Instantiate an AnimationHelper and attach it to the RootPanel:

AnimationHelper animationHelper = new AnimationHelper();
RootPanel.get().add(animationHelper);

3. Instantiate a LayoutPanel and a button. Attach the TapHandler to it and animate to another UI on Tap:

LayoutPanel layoutPanel = new LayoutPanel();
Button button = new Button();
button.setText("Animate");

button.addTapHandler(new TapHandler() {

 @Override
 public void onTap(TapEvent event) {
  //build second ui
  LayoutPanel layoutPanel = new LayoutPanel();
  Button button = new Button();
  button.setText("second");
  layoutPanel.add(button);
  animationHelper.goTo(layoutPanel, Animation.FLIP);

 }
});

layoutPanel.add(button);

4. Animate to the created UI:

animationHelper.goTo(layoutPanel, Animation.SLIDE);

A complete example can be found here. If you want to see the mgwt animation in action take a look at the showcase.

using mgwt header list

This post is part of a series of blogposts that show the usage of some mgwt / gwt-phonegap components.

The mgwt HeaderList is is a widget that can display data grouped within a list. It can render data similar to the contacts in the phone app of an iPhone.

It uses cells for the content and for the headers to do so. Rendering html with cell is much more efficient than using widgets directly. This is how it looks on an iPhone:

With HeaderList you need to specify two cell. One for the content and one for the headers.
Lets say we have two simple Java POJOs that we consider the model:

public class Header {
 private final String name;

 public Header(String name) {
  this.name = name;
 }

 public String getName() {
  return name;
 }

}

public class Content {

 private final String name;

 public Content(String name) {
  this.name = name;
 }

 public String getName() {
  return name;
 }

}

Then we need to build two cells that can render this into html:

private class ContentCell implements Cell {

 @Override
 public void render(SafeHtmlBuilder safeHtmlBuilder, Content model) {
  safeHtmlBuilder.appendEscaped(model.getName());

 }

 @Override
 public boolean canBeSelected(Content model) {
  return true;
 }

}

private class HeaderCell implements Cell {

 @Override
 public void render(SafeHtmlBuilder safeHtmlBuilder, Header model) {
  safeHtmlBuilder.appendEscaped(model.getName());
 }

 @Override
 public boolean canBeSelected(Header model) {
  return false;
 }

}

Note: within the cell you can render any html with any css classes. So if you want to add images or other things, this is the way to go.

After we have set this up cell list is very easy to use:

To build this you need to do the following steps:

1. Setup the viewport for the mobile browser:

MGWT.applySettings(MGWTSettings.getAppSetting());

2. Instantiate an AnimationHelper and attach it to the RootPanel:

AnimationHelper animationHelper = new AnimationHelper();
RootPanel.get().add(animationHelper);

3. Instantiate a LayoutPanel, GroupingCellList and HeaderList:

LayoutPanel layoutPanel = new LayoutPanel();
  
GroupingCellList<Header, Content> groupingCellList = new GroupingCellList<Header, Content>(new ContentCell(), new HeaderCell());

HeaderList<Header, Content> headerList = new HeaderList<Header, Content>(groupingCellList);

layoutPanel.add(headerList);

4. Animate to the created UI:

animationHelper.goTo(layoutPanel, Animation.SLIDE);

The complete source can be found here. If you want to see the widget in action you can visit the showcase.

using the mgwt swipe panel

This post is part of a series of blogposts that show the usage of some mgwt / gwt-phonegap components.

This blog post will show the use of the Carousel widget in mgwt. The widget can be used to display different content in a horizontal row. Users can access the content by swiping to it.

The widget looks like this:

To build this you need to do the following steps:

1. Setup the viewport for the mobile browser:

MGWT.applySettings(MGWTSettings.getAppSetting());

2. Instantiate an AnimationHelper and attach it to the RootPanel:

AnimationHelper animationHelper = new AnimationHelper();
RootPanel.get().add(animationHelper);

3. Instantiate a LayoutPanel and add in the Carousel widget:

LayoutPanel layoutPanel = new LayoutPanel();
  
Carousel carousel = new Carousel();
layoutPanel.add(carousel);

4. Add some content to the Carousel:

carousel.add(someWidget);

5. Animate to the created UI:

animationHelper.goTo(layoutPanel, Animation.SLIDE);

The complete code example can be found here. If you want to see the widget in action, take a look into the showcase.

using mgwt and gwt-phonegap

Today I am starting a series of blogposts on how to use mgwt and gwt-phonegap.

This post will list all posts of the series and will be updated every time there is a new post.

Thursday, June 14, 2012

gwt phonegap 1.8 released

gwt-phonegap 1.8 got released today.
It contains several bug fixes and makes working with GWT RPC much easier (it is no more necessary to manipulate the servlet).
This release is compatible with phonegap 1.8 which got released a few days ago.

As always you can get the new version from google code or from maven central:

<dependency>
      <groupId>com.googlecode.gwtphonegap</groupId>
      <artifactId>gwtphonegap</artifactId>
      <version>1.8.1.0</version>
</dependency>

Wednesday, May 23, 2012

mobile webkit alert dialog breaks touch event cycle

The mobile webkits on Android and iOS both contain a bug. If you make a call to alert during a touchend event, the browser ends up in a weird state where it refires the original touch start event as soon as you touch anywhere on the display.

This has led to a bug report on mgwt: http://code.google.com/p/mgwt/issues/detail?id=135
This has absolute no effect on desktop browsers and can only be observed on mobile webkits.

From now on mgwt fixes this in all aggregated events (like Tap, LongTap, etc.) with deferred binding without any runtime penalties for unaffected browsers. Internally we are scheduling a command to be executed so that the entry of your execution is no longer the touchend event.

Of course we need to file a bug with the webkit open source project to get this fixed in the long run.

Saturday, May 5, 2012

Talk about mgwt & gwt-phonegap at the dutch GTUG

Earlier this week I was invited to talk about mobile development with google technologies at the dutch google technology user group.

I had a very nice evening and talked to a lot of nice fellow developers. Especially I want to thank Rokesh Jankie and Qualogy for hosting the event. We also recorded a video of my talk and posted it on youtube:

This is around 90 minutes talk about the basic concepts of phonegap, gwt, gwt-phonegap & mgwt. If you are thinking of building mobile apps with HTML5 there is a lot of interesting content.
So enjoy watching.

Thursday, May 3, 2012

gwt phonegap 1.7 released

Today phonegap 1.7 got released, which contains some important fixes for all GWT Apps.
I have been working very hard behind the scenes to get those issues fixed
The phonegap team was very supportive and helpful and together we were able to get everything worked out.
With this release GWT and Phonegap will play very nicely together.

A new version is now available on google code or from maven central:

<dependency>
      <groupId>com.googlecode.gwtphonegap</groupId>
      <artifactId>gwtphonegap</artifactId>
      <version>1.7.0.0</version>
</dependency>

Monday, April 30, 2012

GWT RequestFactory and Phonegap

After being asked a lot of times if RequestFactory works with Phonegap, I finally decided to write my answer down.

The short answer is yes, but you need to do one thing.

If you are writing a mobile website with mgwt it works out of the box, of course!

This only applies if you are building apps with gwt-phonegap and RequestFactory as your RPC mechanism.

By default RequestFactory knows the url of your server (the script got loaded from there), but if your script runs inside an app on a phone, it does not know your server.

To fix this you need to set the RequestTransport for your Factory and give it the url, which would look something like this:

EmployeeRequestFactory factory = GWT.create(EmployeeRequestFactory.class);

DefaultRequestTransport requestTransport = new DefaultRequestTransport();
if(phoneGap.isPhoneGapDevice()){
 requestTransport.setRequestUrl("http://yourserver/rf-servlet");
}
factory.initialize(eventBus, requestTransport);

This is actually all you need to do. This is much easier if you compare it to GWT RPC and Phonegap.
Because it is much harder to configure GWT RPC for Phonegap there are utility methods in GWT Phonegap.

GWT RPC with Phonegap revisited

This post is part of a series of blog post that show the usage of some mgwt / gwt-phonegap components.

As some of you may know I posted a very popular blog post about a year ago about how to get Phonegap and GWT RPC working together.

A few weeks ago John Gentillin brought the issue up again on the mgwt user group.

He rightly suggested that this could be fixed by just changing the client and without touching the server at all. So today I decided to revisit the issue and see if I can find a nice way to handle it on the client.

To fix this you need some basic knowledge of how GWT RPC works on the client.
The compiler generates some classes around the RPC interface which do the actual communication.

We need to do two things:

set the url for the entry point
set the url for the gwt module base

Both parameters are passed with our request and help the server code find the serialization policy. With gwt-phonegap 1.7 I decided to introcude a utility method that handles all those things directly on the client. You just pass in your service, your module url (where you GWT app is deployed) and the relative path to your service.

The code would look like this:

GreetingServiceAsync service = GWT.create(GreetingService.class);
  
PhonegapUtil.prepareService(service, "http://www.yourserver.com/", "greet");

If you want to see how this is implemented take a look here: PhonegapUtilImplDevice.java

There is also an article on RequestFactory & Phonegap.

Sunday, April 15, 2012

GWT & Phonegap 1.6 - Issues with loading on android

Some of you might be experiencing issues while loading your GWT App in a phonegap environment.

The app might not be starting at all if you are using android 4.x with phonegap and you simply see a white screen instead. A suggested workaround (that many use) is to change to the cross site iframe linker in your gwt compile, which would mean that you would be using a different bootup mechanism for your gwt app. Which is a workaround for this situation and can help, but causes other issues.

So I did a little digging the last weekend and took a close look at the boot load of a GWT app in a phonegap environment. The standard GWT linker creates an iframe in which it loads the content of the GWT Compiler (a html file with javascript). This page is actually what you see in your phonegap app as a blank white page.

By default phonegap on android thinks that all local navigation (urls which start with file://) should be handled by phonegap and should load the url in the browser. This is fine for apps that need navigation like jquerymobile apps, but its not a good idea for GWT apps since it interferes with GWT bootup.

This is what happens in the CordovaWebClient by default:

// If our app or file:, then load into a new Cordova webview container by starting a new instance of our activity.
// Our app continues to run. When BACK is pressed, our app is redisplayed.
if (url.startsWith("file://") || url.indexOf(this.ctx.baseUrl) == 0 || ctx.isUrlWhiteListed(url)) {
this.ctx.loadUrl(url);
}

So we need to prevent this by implementing our own web client:

package de.kurka.cordova;

import org.apache.cordova.CordovaWebViewClient;

import org.apache.cordova.DroidGap;

import android.webkit.WebView;

public class GWTCordovaWebViewClient extends CordovaWebViewClient {

public GWTCordovaWebViewClient(DroidGap ctx) {

super(ctx);

}

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

if(url.startsWith("file://"))

{

return false;

}

return super.shouldOverrideUrlLoading(view, url);

}

And we need to override the init method of our man activity to use it like this:

package de.kurka.cordova;

import org.apache.cordova.CordovaChromeClient;

import org.apache.cordova.DroidGap;

import android.os.Bundle;

import android.webkit.WebView;

public class HelloCordovaActivity extends DroidGap {

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

super.loadUrl("file:///android_asset/www/index.html");

}

@Override

public void init() {

super.init(new WebView(this), new GWTCordovaWebViewClient(this), new CordovaChromeClient(this));

}

This fixes the white screen issue with phonegap 1.6 and GWT apps.

Sunday, April 1, 2012

gwt-phonegap 1.5 released

It's been a while since phonegap was updated to 1.5.0. Due to the change to cordova namespace in javascript I had to make some changes to gwt-phonegap to ensure a correct working version. A new version is now available on google code or from maven central:

<dependency>
      <groupId>com.googlecode.gwtphonegap</groupId>
      <artifactId>gwtphonegap</artifactId>
      <version>1.5.0.0</version>
</dependency>

The release contains an adjusted start up mechanism to fit the new cordova javascript object, as well as some minor bug fixes. This release is the only release working with phonegap 1.5, due to the changed javascript objects.

Thursday, February 16, 2012

mgwt and gwt designer support

As many of you have pointed out in countless emails and user group posts: Currently mgwt and the GWT Designer don`t really get along. There are some workarounds to make it work, but they are pretty ugly.

The cause behind this is that GWT Designer was not able to run property providers from GWT. But mgwt heavily relies on them to detect your platform and many other important things.
We discussed what changes would be necessary to mgwt to make it work and quickly saw that it can not be done in a pleasant way. Instead I decided to bring it up in the gwt contributer list and see if someone from google could instead make GWT Designer work with custom properties.

There already was an open issue and @kschlegov fixed it today. Many thanks to him for such a quick fix and I hope you will be enjoying a working GWT Designer starting with the next release of GWT Designer.

Sunday, February 12, 2012

mgwt and phonegap talk at webmontag in frankfurt

Tomorrow I am going to talk about the mobile web as well as mobile apps at the webmontag meetup in frankfurt germany.
I believe the talk will be in german, but it will be video recorded and I will post the link here after the talk. In the talk I will be talking about why mobile html5 apps are a good idea and how they can solve the upcoming problem of too much content for our devices.
There will also be a short introduction to phonegap and mgwt. The other talks and dates can be found on the webmontag homepage.

Hope to see you at the talk!

Update: As I suspected the talk would be in german, but I am going to post the video anyway. Thanks to the webmontag team who did a great job at organizing this event and made me feel very welcome.
Also I would like to thank the people that made the video and also provided it free of charge: http://www.sysops.tv/

Here is the youtube video:

Update2: After getting so many emails about a translation of the video, I decided just to rerecord in english with the same slides. I haven`t put that much work into it (just started talking and recording), so please don`t be to harsh on me. Here`s the video:

English Version

Saturday, February 4, 2012

mgwt 1.0.2 released

I am very happy to tell you about the newest release of mgwt 1.0.2

I would like to name a few of the improvements we made to mgwt:

consistent css class names and guides for styling
offline capabilities for mgwt apps (HTML5 offline support)
easier styling for many buttons with custom images
lots and lots of bug fixes

There has also been a significant improvements in the docs and in many places in the javadoc.

There is also an example project, which illustrates how to build your own custom theme.

Go check out www.m-gwt.com and enjoy the new version.

As always mgwt will be available from maven central very soon:

<dependency>
     <groupId>com.googlecode.mgwt</groupId>
     <artifactId>mgwt</artifactId>
     <version>1.0.2</version>
</dependency>