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.