Webix Блог Създаване на мобилни приложения с PhoneGap и Webix
С Webix можете да създадете уеб приложения, които ще работят еднакво добре на мобилния и на dekstopnyh устройства. Въпреки това, тези приложения ще продължат да на HTML5 приложения. Да се разработи стандартните приложения, ще имате нужда от инструмент като PhoneGap.
PhoneGap - безплатна рамка с отворен код. С PhoneGap, можете да развиете мобилни приложения с стандартен уеб-API за всички платформи, които използвате. В допълнение, PhoneGap е базиран на HTML5 и позволява да се създадат местни приложения за всички основни мобилни операционни системи: IOS, Android, Windows Phone и др.
В тази статия, ние ще опишем процеса на създаване на прости приложения, използващи местни PhoneGap и Webix инструменти.
Вземи окончателния код е достъпно на GitHub.
Старт на развитие
За да започнете работа с PhoneGap, за първи път от следната връзка:
- най-новите nodejs. След тази операция, изпълнете командата "NPM инсталирате -g PhoneGap" за монтаж на PhoneGap.
Тъй като ние планираме да изпита нашата приложение на вашия Android устройство, трябва да имате инсталиран Android инструменти за развитие:
След инсталиране на Android SDK. и добавяне на папката "платформа инструменти" и «инструменти» по пътя:
Повече информация можете да намерите в документацията PhoneGap. (Ref)
След като сте готови с препаратите, описани по-горе, можете да започнете да се разработи мобилно приложение.
Създаване на приложение
Първото нещо, което трябва да направите - е да изпълните следната команда:
PhoneGap създаде Моето приложение
Това ще създаде папка «Моето приложение» с всички файлове вътре. "Www" - това е единственият подпапка, което ще ни е необходимо. В тази папка ще съхранява цялата HTML и JS код, необходим за изграждане на нашата молба.
Копирайте .js и .css файловете в "WWW / webix". Уверете се, че сте копирали папката от Webix пакет в директорията "WWW / webix". Това трябва да се направи, за да се покаже иконата след това в приложението си.
След това можем да започнете да пишете HTML код за нашия демо приложение.
PhoneGap вече създаден файл «index.html». Сега трябва да се добави позоваване на файловете Webix:
Нека добавим конфигурация на потребителския интерфейс:
webix. готов # 40; функция # 40; # 41; # 123;
Var лента с инструменти = # 123; изглед. "Toolbar".
елементи. # 91;
# 123; изглед. "Търси". стойност. "". нататък. # 123;
onTimedKeyPress. функция # 40; # 41; # 123;
$$ # 40; "Списък" # 41. филтър # 40; "FirstName". това. getValue # 40; # 41; # 41; ;
# 125;
# 125; # 125;
# 93;
# 125; ;
списък Var = # 123;
изглед. "Списък". идентификатор. "Списък". изберете. вярно.
шаблон. "Html-> item_list".
URL адрес. "Contacts.json".
нататък. # 123;
onItemClick. функция # 40; идентификатор # 41; # 123;
$$ # 40; "Подробности" # 41. шоу # 40; # 41; ;
$$ # 40; "Подробности" # 41. setValues # 40; това. getItem # 40; идентификатор # 41; # 41; ;
# 125;
# 125;
# 125; ;
Var шаблон = # 123; шаблон. "Html-> item_details". превъртане. вярно. идентификатор. "Подробности" # 125; ;
webix. UI. Fullscreen # 40; # 41; ;
webix. UI # 40; # 123;
редове. # 91;
лента с инструменти.
# 123; клетки. # 91; списък. шаблон # 93. идентификатор. "Multiview" # 125;
# 93;
# 125; # 41; ;
# 125; # 41; ;
В горния код ще създаде прост потребителски интерфейс, с филтър в горната част на списъка и да изберете / маркиране по-долу. След като кликнете върху някоя от позициите, включени в списъка, ще видите екран с "подробности".
два шаблона, използвани в кода - един за елементите на списъка, а вторият - за екрана "подробности". Нека да ги наричаме «index.html», както следва:
