How to develop for tablet using Worklight? - ibm-mobilefirst

Question

I have develop my UI under common folder, then I create a skin for my tablet and name it as android.tablet. But when I run it on my tablet simulator, it looks like this:
I use below code in skinLoader.js:
var userAgent = navigator.userAgent;
var skinName = "default";
//android tablet
if(userAgent.toLowerCase().indexOf("android") != -1 &&
userAgent.toLowerCase().indexOf("mobile") == -1){
skinName = "android.tablet";
alert("tablet!");
}
//android phone
else if(userAgent.toLowerCase().indexOf("android") != -1 &&
userAgent.toLowerCase().indexOf("mobile") != -1){
skinName = "default";
alert("default!");
}
HTML:
<div data-role="page" id="homePage" class="fullWidth">
<div data-role="header" data-tap-toggle="false">
<div class="ui-title">...</div>
</div>
<div data-role="content" style="text-align: center">
Login
</div>
</div>
CSS:
.fullWidth{
width: 100% !important;
}
Why it can't be full screen? Any code I lack?

Answer 1

Have you made sure to read the Worklight Skins training module?
The basic premise for Worklight Skins is this:
Create a new Worklight project, application
Add a skins-supported environment (Android, BlackBerry 6/7/10, iPhone, iPad)
For the sake of simplicity, update skinLoader.js to point to the skin's folder ("android.skin" for example)
Create a CSS and JS files in the respective folders of the skin
Copy the HTML file from common to the skin folder
Do whatever you want in the CSS, JS and HTML in the skin folder, like changing color and adding an alart
Build all & Deploy
Verify the color and alert are displayed, ensuring it is the skin and not default that was loaded.
To preview the skin's web resources:
Right-click on the android environment folder
Choose Run As >> Preview...
Select the skin from the Skin dropdown
Click the Run button
You should now see the skin (previewing only displays web resources, not native parts if you have any).
If this fails, you can try altering the URL as follows.
This essentially strips away the MBS container and displays only the web resources.
From:
http://localhost:8080/_MobileBrowserSimulator/index.html?webpage=http://localhost:8080/apps/services/preview/your-app-name/android/1.0/your-skin-name-here/your-html-filename-here.html&devicesFilePath=devices.json&platform=android&ips=169.254.236.125,9.148.205.249,10.0.0.2
To:
http://localhost:8080/apps/services/preview/your-app-name/android/1.0/your-skin-folder-name/your-html-filename-here.html
This process will hopefully get more streamlined in a future release...
As for it being full screen or not, that's completely in the hands of the developer (your CSS, etc), and not Worklight's.
I see you're using jQuery Mobile, look at these:
http://jquerymobile.com/demos/1.2.1/docs/toolbars/bars-fullscreen.html
How to set header to full screen mode in jQuery Mobile?

Answer 2

If you want to develop for Android tablet make sure that element in AndroidManifest.xml (inside of Android project) declared that. By default only normalScreens support is set to true.
You might need to adjust CSS. By default it has fixed width of 320px and dynamic height, which pretty much is what you have on a screenshot.