如何使用Worklight开发平板电脑？ [英] How to develop for tablet using Worklight?

问题描述

我在 common 文件夹下开发了我的UI，然后我为我的平板电脑创建了一个皮肤，并将其命名为 android.tablet 。但是当我在平板电脑模拟器上运行它时，它看起来像这样：

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:

我在 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">
        <a href="#" data-role="button" id="login" class="fullWidth">Login</a>
    </div>
</div>

CSS：

.fullWidth{
    width: 100% !important;
}

为什么不能全屏？我缺少的任何代码？

Why it can't be full screen? Any code I lack?

推荐答案

你确定阅读Worklight Skins培训模块？

Worklight Skins的基本前提是：

The basic premise for Worklight Skins is this:

1. 创建一个新的Worklight项目，应用程序


2. 添加皮肤支持的环境（Android，BlackBerry 6/7/10，iPhone，iPad）


3. 为简单起见，请更新skinLoader.js以指向皮肤的文件夹（android .skin例如


4. 在皮肤的相应文件夹中创建CSS和JS文件


5. 将HTML文件从common复制到皮肤文件夹


6. 在皮肤文件夹中的CSS，JS和HTML中执行任何操作，例如更改颜色和添加alart


7. 构建全部&部署


8. 确认显示颜色和警报，确保它是皮肤而不是默认值。

1. Create a new Worklight project, application
2. Add a skins-supported environment (Android, BlackBerry 6/7/10, iPhone, iPad)
3. For the sake of simplicity, update skinLoader.js to point to the skin's folder ("android.skin" for example)
4. Create a CSS and JS files in the respective folders of the skin
5. Copy the HTML file from common to the skin folder
6. Do whatever you want in the CSS, JS and HTML in the skin folder, like changing color and adding an alart
7. Build all & Deploy
8. Verify the color and alert are displayed, ensuring it is the skin and not default that was loaded.

预览皮肤的网络资源：

1. 右键单击android环境文件夹


2. 选择运行方式>>预览...


3. 从皮肤下拉列表中选择皮肤


4. 单击运行按钮

1. Right-click on the android environment folder
2. Choose Run As >> Preview...
3. Select the skin from the Skin dropdown
4. Click the Run button

您现在应该看到皮肤（预览只显示网络资源，如果有的话，则不显示原生部分）。

You should now see the skin (previewing only displays web resources, not native parts if you have any).

如果失败，您可以尝试按如下方式更改URL。

这实际上剥离了MBS容器并仅显示Web资源。

If this fails, you can try altering the URL as follows.
This essentially strips away the MBS container and displays only the web resources.

发件人：

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

收件人：

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

至于全屏与否，这完全掌握在开发人员手中（你的CSS等），而不是Worklight's。

As for it being full screen or not, that's completely in the hands of the developer (your CSS, etc), and not Worklight's.

我看到你正在使用jQuery Mobile，看看这些：

I see you're using jQuery Mobile, look at these:

• http://jquerymobile.com/demos/1.2。 1 / docs / toolbars / bars-fullscreen.html


• 如何在jQuery Mobile中将标题设置为全屏模式？

• http://jquerymobile.com/demos/1.2.1/docs/toolbars/bars-fullscreen.html
• How to set header to full screen mode in jQuery Mobile?

这篇关于如何使用Worklight开发平板电脑？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！