Планшет HP TouchPad является весьма незаурядным webOS-девайсом, обладающим свойством обратной совместимости с практически любым приложением для смартфонов на платформе webOS, созданным с помощью фирменной среды разработки Mojo SDK (далее Mojo-приложения). Единственным серьезным недостатком является то, что Mojo-приложения запускаются в привычном для смартфонов разрешении 320x480 точек, совершенно игнорируя дополнительное пространство экрана планшета.
Данная статья поможет вам быстро адаптировать телефонное приложение, созданное в среде разработки Mojo SDK, для нового планшета от HP.
Если, создавая свое приложение, разработчик проявил проницательность и реализовал возможность масштабируемости, то вместо утомительного портирования Mojo-приложения на планшет с помощью среды разработки
Enyo SDK, можно просто уделить пару минут своему приложению, чтобы сделать его полноэкранным и дружелюбным к пользователю TouchPad.
Итак, приступим…
Прежде, чем что-либо предпринимать, продумайте план. Пройдитесь по всем сценам приложения и запишите те сцены, выйти из которых можно только с помощью жеста «назад» в области жестов смартфона. Этот список понадобится нам в дальнейшем, чтобы реализовать отдельную кнопку возврата, поскольку TouchPad лишен области жестов.
Следующим шагом нужно внести изменения в файл appinfo.json, чтобы TouchPad убрал рамку вокруг нашего приложения и перешел в полноэкранный режим. Добавьте в файл appinfo.json file строку:
uiRevision: 2Теперь загрузите приложение в эмулятор или планшет и убедитесь, что все работает, как ожидалось.
Увеличилось изображение, но изменились в размере и кнопки (чтобы соответствовать ширине экрана 1024 пикселей вместо 320), что выглядит не слишком эстетично. Та же проблема может произойти с текстовыми полями и группами элементов. К исправлению этих недочетов мы вернемся чуть позже.
Определение TouchPad
Теперь нужно определить, запущено наше приложение на телефоне или на TouchPad. Пока существует только один планшет на webOS, можно использовать небольшой программный трюк, о котором пойдет речь дальше. Хотя, возможно, придется реализовать дополнительное определение размера экрана планшета, если выйдет обещанный 7-дюймовый Opal. Но пока этого хватит, а дальше все равно придется Enyo-изировать ваше приложение.
В зависимости от файловой структуры вашего приложения, возможно вы создали глобальный JavaScript-файл, содержащий основные функции. В таком случае, мы будет работать с ним. В противном случае, если ваше приложение безоконное, мы будем работать с файлов AppAssistant.js, или, если ваше приложение одноступенчатое, работа будет идти с файлом StageAssistant.js file. В любом случае, все дальнейшие отсылки будет к тому файлу, который вы считаете «глобальным».
В вашем глобальном файле создайте новую функцию. Хорошей практикой является наличие именованного объекта, доступного из любой части приложения, а если вы используете девелоперский сервис статистики Metrix, такой объект у вас уже есть. В ином случае, создайте такой объект:
var myApp = {};Убедитесь, что этот код находится вне любых других функций и размещен отдельной строкой, чтобы доступ к нему был глобальным. Теперь перейдем к созданию нашей функцию детектирования планшета TouchPad.
myApp.isTouchPad = function(){
};Первым делом, нам нужно вставить код, который сделает нашу функцию работающей. Мы будем взаимодействовать с объектом DeviceInfo из фреймворка Mojo. Ничего сложного тут нет, все очень просто и прямолинейно. Мы пройдем по всем этапам и шаг за шагом рассмотрим все необходимые операции.
if(Mojo.Environment.DeviceInfo.modelNameAscii.indexOf("ouch")>-1) {
return true;
}Этот блок просматривает текстовое имя устройства и ищет в нем строку “ouch”. Строка “ouch” выбрана, чтобы не было проблемы с регистрозависимостью, исключить возможное влияние пробелов, плюс сама строчка была короткой. Регулярное выражение подошло бы больше, но автору было лень писать его.
Но что, если программа будет запущена на другом webOS-устройстве с высоким разрешением экрана или в эмуляторе? На этот случай добавим еще две проверки, если первые проверки не прошла. Еще раз, это может быть не самый идеальный способ, но он работает и, в конце концов, вы все равно планируете переделывать свое приложения Enyo, не так ли? :)
if(Mojo.Environment.DeviceInfo.screenWidth==1024){ return true; }
if(Mojo.Environment.DeviceInfo.screenHeight==1024){ return true; }Здесь мы проверяем ширину и высоту экрана устройства, в зависимости от его ориентации.
И наконец, установим возвращаемое значение по умолчанию в false, если предыдущие проверки не определили ничего подходящего.
return false;Теперь объединим всё вышеперечисленное:
var myApp = {};
myApp.isTouchPad = function(){
if(Mojo.Environment.DeviceInfo.modelNameAscii.indexOf("ouch")>-1) {
return true;
}
if(Mojo.Environment.DeviceInfo.screenWidth==1024){ return true; }
if(Mojo.Environment.DeviceInfo.screenHeight==1024){ return true; }
return false;
};Еще раз, возможно есть более удачные и эффективные способы сделать это, но и этот работает отлично.
Обработка моментов, специфичных для TouchPad
Наконец-то есть шанс использовать нашу функцию. В сценах, где требуется отобразить кнопку возврата, вставим этот фрагмент кода:
if(myApp.isTouchPad()){
var menuModel = {
visible: true,
items: [
{ icon: "back", command: "goBack"}
]
};
this.controller.setupWidget(Mojo.Menu.commandMenu,
this.attributes = {
spacerHeight: 0,
menuClass: 'no-fade'
},
menuModel
);
}
Здесь мы используем виджет CommandMenu, но с таким же успехом могли бы использовать виджет ViewMenu или общую кнопку действия, или любой другой виджет. Этот сниппет просто отображает маленькую круглую кнопку со стрелкой «назад», чтобы пользователи могли вернуться в предыдущую сцену.
Возможно, Вам захочется вставить его в переключатель (switch) в функции handleCommand для вашей сцены
case 'goBack':
this.controller.stageController.popScene();
break;
или любой другой код, применимый к вашему приложению для возврата в предыдущую сцену.
Улучшаем внешний вид приложения
Как уже упоминалось выше, ваши кнопки и схожие элементы раздались в ширину, что выглядит не очень-то эстетично. Вот простой способ исправить это. Внутри сцены, там где определяется, что программа работает на TouchPad, добавьте этот небольшой код, добавляющий специальный стиль к виджету.
this.controller.get("search-button").addClassName("touchpad");Этот код добавит класс «touchpad» к виджету кнопки поиска. Теперь вы можете контролировать его через вашу таблицу стилей CSS. Например:
#search-button.touchpad {
width: 45% !important;
margin: 5px auto !important;
}Это оформление уменьшит кнопки и разместит их по центру экрана. Но что если в приложении у вас две связанные кнопки? Тогда вам нужно разместить их рядом друг с другом, например, так:
this.controller.get("save-button").addClassName("touchpad");
this.controller.get("cancel-button").addClassName("touchpad");А затем в вашем CSS сделать так:
#save-button.touchpad {
width: 45% !important;
margin-left: 10px !important;
float: left;
}
#cancel-button.touchpad {
width: 45% !important;
margin-right: 10px !important;
float: right;
}
Теперь кнопки располагаются рядом друг с другом. Возможно придется поиграть с параметрами, чтобы подобрать нужные для конкретного приложения (а также иметь элемент clear: both, чтобы контент соответствовал ожидаемому).
Прочие вещи, о которых нужно побеспокоится
Если в сцене используется фоновое изображение, убедитесь, что вы повторили его до заполнения всего экрана. Абсолютно все будет выглядеть супер-широким, поэтому лучше использовать отдельные изображения для TouchPad. Адаптируя свое приложение growlr, автор статьи не стал делать абсолютно все, чтобы оно выглядело идеально на TouchPad. Главная задачей было быстро получить работоспособное приложение. Улучшать внешний вид можно сколь угодно долго, но лучше потратить это время на портирование приложения на Enyo.
И это все! Если у вас есть замечания к статье, добро пожаловать в камменты здесь или на сайте автора.