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