Как разработать для планшета с помощью Worklight?

Я разработал свой интерфейс под common папку, затем я создаю скин для своего планшета и называю его как android.tablet, Но когда я запускаю его на симуляторе планшета, это выглядит так:

введите описание изображения здесь

Я использую ниже код в 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;
}

Почему оно не может быть полноэкранным? Какой код мне не хватает?

Источник

2 ответа

Решение

Вы обязательно прочитали учебный модуль Worklight Skins?

Основная предпосылка для Worklight Skins:

  1. Создать новый проект Worklight, приложение
  2. Добавить среду с поддержкой скинов (Android, BlackBerry 6/7/10, iPhone, iPad)
  3. Для простоты обновите skinLoader.js, чтобы он указывал на папку скина (например, "android.skin")
  4. Создайте файлы CSS и JS в соответствующих папках скина
  5. Скопируйте файл HTML из общего в папку скина
  6. Делайте что угодно в CSS, JS и HTML в папке скина, например, меняйте цвет и добавляйте alart
  7. Построить все и развернуть
  8. Убедитесь, что отображаются цвет и предупреждение, убедитесь, что загружен скин, а не стиль по умолчанию.

Для предварительного просмотра веб-ресурсов скина:

  1. Щелкните правой кнопкой мыши на папке среды Android
  2. Выберите Run As >> Preview...
  3. Выберите скин из выпадающего списка
  4. Нажмите кнопку "Выполнить"

Теперь вы должны увидеть скин (при предварительном просмотре отображаются только веб-ресурсы, а не нативные части, если они у вас есть).

Если это не удается, вы можете попробовать изменить URL следующим образом.
Это по существу удаляет контейнер MBS и отображает только веб-ресурсы.

От:

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

Надеемся, что этот процесс станет более упорядоченным в следующем выпуске...

Что касается полного экрана или нет, то это полностью в руках разработчика (ваш CSS и т. Д.), А не в Worklight.

Я вижу, что вы используете jQuery Mobile, посмотрите на это:

Источник
  1. Если вы хотите разрабатывать для планшета Android, убедитесь, что элемент в AndroidManifest.xml (внутри проекта Android) объявил это. По умолчанию для поддержки только NormalScreens установлено значение true.
  2. Возможно, вам придется настроить CSS. По умолчанию он имеет фиксированную ширину 320 пикселей и динамическую высоту, что в значительной степени соответствует тому, что вы видите на скриншоте.
Источник
Другие вопросы по тегам