mgwt: get ios look and feel

Question

I am creating a phonegap app with gwt phonegap. How can I create the iPhone Look and Feel?

Right now, I have en entry im my gwt.xml-file:

<inherits name="com.googlecode.mgwt.ui.client.theme.platform.Platform" />

I am testing the app using the Phonegap-Emulator. Altough the functionality works as expected, the app doesnt have the iPhone look.

Do I need to use certain Widgets to get that?

Answer 1

First off, I suggest you edit the title since this is an mgwt question that has nothing to do with gwtphonegap.

When you say that you use the 'Phonegap-Emulator' I assume that you mean something like Ripple, and not the iOS Simulator (which would be used by cordova emulate ios)

In the Platform.gwt.xml, the OS is determined via the user agent:

<define-property name="mgwt.os" values="android, ios" />
<property-provider name="mgwt.os"><![CDATA[
    // Detect mgwt.os from user agent.
    var ua = navigator.userAgent.toLowerCase();
    if (ua.indexOf("iphone") != -1 || ua.indexOf("ipod") != -1) {
        // iphone and ipod.
        return "ios";
    } else if (ua.indexOf("ipad") != -1) {
        // ipad.
        return "ios";
    } else if (ua.indexOf("android") != -1) {
        return "android";  
    }
    return "ios";
]]></property-provider>

The mgwt.os property is then used to determine the correct Appearance for your widgets, for example in Button.gwt.xml:

<replace-with class="com.googlecode.mgwt.ui.client.theme.platform.button.ButtonIOSAppearance">
    <when-type-is class="com.googlecode.mgwt.ui.client.widget.button.ButtonAppearance" />
<when-property-is name="mgwt.os" value="ios" />
    </replace-with>

To answer your question, make sure that the user agent in your emulator contains the string "iphone" or "ios", or, simply set the OS property to iOS by adding

<set-property name="mgwt.os" value="ios" />

to your gwt.xml.