Javascript Port, Theme not "same" as other build(e.g.: Android)

[Manukaki]

My Android apps is using my own theme. And it is working properly. But if I compiled to Javascript port, the appearance "looks" like iphone. The menu appeared under the screen as single row button(s), and the "behavior" also not really same as in Android (phone and emulator).

• I see the compiled zip files, contain additional iphone theme together with my theme file, which it shouldn't, it should only have single theme. Please correct me if I am wrong.

Does it because of still in BETA? It should looks like same, doesn't it?

[shannah]

Since a javascript build is for all device types, we didn't want to bundle all possible base themes into an app. So the base theme we chose is iOS7.

In response to your query here, I have added the ability to dynamically override the native theme to anything you like. I have also added some docs in the javascript appendix of the developers guide as follows:

Changing the Native Theme

Since a web application could potentially be run on any platform, it isn't feasible to bundle all possible themes into the application (at least it wouldn't be efficient for most use cases). By default we have bundled the iOS7 theme for javascript applications. This means that the app will look like iOS7 on all devices: desktop, iOS, Android, WinPhone, etc...

You can override this behaviour dynamically by setting the javascript.native.theme Display property to a theme that you have included in your app. All of the native themes are available on GitHub, so you can easily copy these into your application. The best place to add the theme is in your native/javascript directory - so that they won't be included for other platforms.

Example: Using Android Theme on Android

First, download androidTheme.res from the Android port on GitHub, and copy it into your app's native/javascript directory.

Then in your app's init() method, add the following:

Display d = Display.getInstance();
if (d.getProperty("User-Agent", "Unknown").indexOf("Android") != -1) {
    d.setProperty("javascript.native.theme", "/androidTheme.res");
}

This update will be on the build server soon

[Manukaki]

Thank you for your reply.
I have tried to change the native them for my javascript build apps. But the "Back" command and the "Menu" not show up, in the browser (which for an android, there have a hardward back/menu button).

This make my apps cannot navigate "back" or select any command for particular form.

This situation not happen in the default ios theme.
Another issue when using iOS them, is the top status bar occupied space. Can remove that?

Can you please advice?

Thank you.

[shannah]

Did you add the back command to the toolbar?

getToolbar().addCommandToLeftBar(back);
setBackCommand(back);

[Manukaki]

I do not have toolbar on the form. Anyway, I tried to run the code, java.lang.NullPointerException triggered. This is at the getToolbar() return null.

I need the Command/Menu on Javascript/Android Theme build. If use default build(which is iOS theme), then no problem, because all the commands, is shown as "Toolbar" on the javascript build.

Do you have any solution to overcome this? I tried to accept the default iOS theme, but if use this theme, there is always a blank "gap" on all the forms, which is annoying.

Kindly advice.

@shannah does the iOS native theme still have the StatusBar style defined (identical to native iOS 7+ theme). If so just add the line to the JavaScript code init code to remove that by default from the theme properties:

themeProps.remove("StatusBar.padding");

I'd do it myself if the port was in the SVN.