С Webix вы можете создавать веб-приложения, которые будут работать одинаково хорошо как на мобильных, так и на декстопных устройствах. Однако данные приложения по-прежнему будут html5-приложениями. Для разработки нативных приложений вам понадобится такой инструмент, как PhoneGap.
PhoneGap — бесплатный фреймворк с открытым исходным кодом. С PhoneGap вы можете разрабатывать мобильные приложения со стандартным веб-API для всех используемых вами платформ. Кроме того, Phonegap работает на базе HTML5 и позволяет создавать нативные приложения для всех основных мобильных ОС: IOS, Android, Windows Phone и других.
В этой статье мы опишем процесс создания простого нативного приложения с помощью инструментов Webix и PhoneGap.
Получить окончательный код приложения можно на GitHub.
Начало разработки
Чтобы начать работать с PhoneGap, сперва установите следующие зависимости:
-
- установите последний nodejs. После этого действия запустите команду “npm install -g phonegap”для установки самого PhoneGap.
Поскольку мы планируем протестировать наше приложение на Android устройстве, у вас должны быть установлены инструменты разработки Android:
- установите инструменты jdk и ant. После распаковки пакетов не забудьте установить оболочки переменных JAVA_HOME и ANT_HOME в папки с «jdk» и файлов «ant» инструментами, соответственно. Кроме того, вам нужно будет добавить путь из «bin»-папок обоих инструментов к переменной PATH:
Затем установите Android SDK, а также добавьте папки “platform-tools” и «tools» в PATH:
Более подробную информацию вы сможете найти в документации PhoneGap. (ссыль)
Как только вы закончите с описанными выше приготовлениями, можете начать разрабатывать мобильное приложение.
Создание приложения
Шаг 1
Первое, что вам нужно будет сделать — это выполнить следующую команду:
Эта команда создаст папку «myapp» со всеми необходимыми файлами внутри. “www” — это единственная подпапка, которая нам будет нужна. В этой папке мы будем хранить весь HTML и JS код, необходимый для построения нашего приложения.
Шаг 2
Скопируйте файлы .js and .css в “www/webix”. Убедитесь, чтобы вы скопировали папку из пакета Webix в директорий “www/webix”. Это нужно сделать, для того чтобы затем в вашем приложении отображались иконки.
После этого мы можем начинать писать HTML код для нашего демо-приложения.
PhoneGap уже создал файл «index.html». Теперь нам нужно добавить в него ссылки на файлы Webix:
Шаг 3
Давайте добавим конфигурацию пользовательского интерфейса:
var toolbar = { view:"toolbar",
elements:[
{ view:"search", value:"", on:{
onTimedKeyPress:function(){
$$('list').filter("firstname", this.getValue());
}
}}
]
};
var list = {
view:"list", id:"list", select:true,
template:"html->item_list",
url:"contacts.json",
on:{
onItemClick:function(id){
$$('details').show();
$$('details').setValues(this.getItem(id));
}
}
};
var template = { template:"html->item_details", scroll:true, id:"details" };
webix.ui.fullScreen();
webix.ui({
rows:[
toolbar,
{ cells:[ list, template], id:"multiview" }
]
});
});
Код выше создаст простой пользовательский интерфейс с с фильтром вверху и списком с возможностью выбора/выделения ниже. После того как вы нажмете на любой из пунктов списка, вы увидите экран с «деталями».
В коде использовались два шаблона: один — для элементов списка, второй — для экрана «детали». Давайте обозначим их в «index.html» следующим образом:
<div id="item_details" style="display: none;">
<h2>#firstname# #lastname#</h2>
<div class="infoline">
<h4>Email</h4>
#email#
</div>
<div class="infoline">
<h4>Phone</h4>
#phone#
</div>
<div class="infoline">
<h4>Address</h4>
#city# #zip#
</div>
<div class="infoline">
<h4>Works at</h4>
#work#
</div>
<p style="max-width: 320px;">#details#</p>
</div>
Шаг 4
Итак, теперь нам нужно указать источник данных. Для этого создайте в папке “www” файл «contacts.json» со следующим контентом:
{"firstname": "Nero", "lastname": "Perry", "phone": "1 30 449 3970-3976", "city": "Castiglione del Lago", "zip": "93674", "email": "et@Nunc.com", "details": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur sed tortor. Integer aliquam adipiscing lacus. Ut nec urna et arcu", "work": "Eget Lacus Mauris Inc."},
{"firstname": "Hayden", "lastname": "Knowles", "phone": "1 84 924 2122-4191", "city": "Grimbergen", "zip": "16780", "email": "ante@montesnascetur.co.uk", "details": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur sed tortor. Integer aliquam adipiscing lacus. Ut nec urna et arcu imperdiet ullamcorper. Duis at lacus. Quisque purus sapien, gravida", "work": "Arcu Vivamus Corporation"},
{"firstname": "Cade", "lastname": "Griffin", "phone": "1 85 309 5226-7368", "city": "Bungay", "zip": "43023", "email": "Class.aptent@Cras.edu", "details": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur sed tortor. Integer aliquam adipiscing", "work": "Fusce Mollis LLC"}
]
Вот и все. Чтобы проверить приложение, откройте файл «index.html» в вашем браузере. Проверьте, использовали ли вы веб-сервер, поскольку без него загрузка по “file://www/index.html” не будет работать.
Если все работает корректно, вы увидите работающее приложение следующего вида:
Применение приложения на устройстве
Для того чтобы запустить приложение на мобильнои устройстве, необходимо подключить его к компьютеру и выполнить следующую команду:
Эта команда должна быть запущена из папки, в которой находится приложение (папка «myapp» в данном случае). Если все в порядке, то вы увидите новое приложение «HelloWorld» на вашем устройстве. Это приложение будет иметь тот же интерфейс и логику, что и страница «index.html». Если размер интерфейса кажется вам маленьким, вы можете изменить следующую строку в файле «index.html»
на эту:
или даже на эту:
После каждого изменения необходимо выполнять команду “phonegap run android”, чтобы изменения из HTML кода переносились в родное приложение на мобильном устройстве.
Еще одно улучшение, которое можно добавить в приложение — это поддержка кнопки «Back». В настоящее время, нажатие на кнопку «Back» закроет ваше приложение.
Однако было бы неплохо использовать эту кнопку, для того чтобы возвращаться с экрана «детали» к основному списку. Чтобы реализовать эту функциональность, добавьте еще один обработчик в файл «index.html»:
document.addEventListener("backbutton", function(){
if (!$$("list").isVisible())
$$("list").show();
}, false);
}, false);
Перенесите изменения на ваше устройство ( путем запуска “phonegap run android” ). Теперь нажатие кнопки «Back» будет обрабатываться кодом выше. Таким образом, кнопка «Back» на экране “ детали” будет возвращать нас на главную страницу.
Добавим лоска приложению
Кнопка “Back”
Наше приложение почти готово. Однако его юзабилити еще требует доработок. Например, на странице «Details» нет видимой ссылки «Back» и пользователь полностью полагается на кнопку «Back» в браузере, что особенно неудобно при использовании приложения на IOS устройствах. Давайте исправим эту проблему.
В index.html мы можем настроить/отрегулировать код toolbar, добавив кнопку “Назад” и настроив логическую группу кнопок — batches. У нас будут две batches: одна для основного экрана (batch “главная”), вторая для экрана «детали» ( batch “детали”):
view:"toolbar",
id:"mainbar",
visibleBatch:"main",
elements:[
{ view:"search", value:"", on:{
onTimedKeyPress:function(){
$$('list').filter("firstname", this.getValue());
}
}, batch:"main" },
{ view:"button", value:"Back", width:150, batch:"details", click: function(){
$$("list").show();
$$("mainbar").showBatch("main");
}}
]
};
У кнопки, которую мы создали, будет обработчик кликов, который будет отображать главный экран и «главную» группу кнопок в панели инструментов.
Для синхронизации с нативным приложением обновите код экрана “детали”:
$$("mainbar").showBatch("details");
$$('details').show();
$$('details').setValues(this.getItem(id));
}
Здесь мы добавили команду showBatch. Она будет вызывать группу кнопок “детали”, при просмотре экрана “Детали”. Чтобы проверить новые функциональные возможности нашего приложения, откройте страницу в браузере или запустите команду “phonegap run android”.
Список сгруппированных данных
Главный экран нашего приложения представляет собой список пользователей. Однако было бы неплохо упростить навигацию по этому огромному списку. Мы можем улучшить наш список, заменив компонент Webix “List” на “Unitlist”, который сгруппирует все контакты по первой букве их фамилий.
Давайте изменим соответствующий код в index.html:
view:"unitlist", id:"list", //view:list changed to view:unitlist
uniteBy:function(obj){
return obj.lastname.substr(0,1);
},
template:"html->item_list",
Функция uniteBy определяет логику в соответствии с данными, которые будут сгруппированы.
Вот теперь наше приложение полностью готово. Запустите его в браузере или обновите на мобильном устройстве. Надеемся, что результат вас порадует.
Заключение
Мы создали родное приложение для устройства Android, затратив не так много ресурсов и времени. Вы можете сделать то же самое с любым Webix приложением, использовав возможности PhoneGap.
Итак, вы можете создавать html-приложения, а затем конвертировать их в «симпатичные» нативные приложения без каких-либо модификаций в коде. Данный метод подходит не только для устройств Android, но и для устройств, работающих на iOS, Firefox OS, Windows OS и других ОС.
