Webix Блог Как да се създаде мобилно приложение, използвайки Webix
Едно от основните предимства Webix библиотека е, че приложения, изградени въз основа на това да работят еднакво добре на компютри, и за мобилни устройства. Уеб потребителски интерфейс, създаден с помощта Webix, показва добри резултати на двете платформи. Въпреки това, ние бихме искали да ви дам един съвет, който ще ви помогне в създаването на най-лесни за мобилни уеб приложения.
Тази статия описва най-важните компоненти на процеса на мобилно приложение за развитие. За да ги видите в детайли, ние ще създадем просто приложение "Контакти List". Това е стандартна приложение, което позволява на потребителите да създават списък с контакти, за да намерите правилните контакти и видите допълнителна информация за тях.
Изтеглете пълната изходния код на готовия приложението можете от хранилище на GitHub. Виж също онлайн демо.
Създаване на страница
Имаме Webix функция режим велик "цял екран", който позволява на приложението да се удължи, за да запълни екрана. Когато този режим е активиран, библиотеката се опитва да се скрие лентите с инструменти и браузъра, така че прилагането заема целия екран на мобилното устройство. За да активирате режима на "цял екран", трябва да добавите webix.ui.fullScreen () команда; преди инициализация интерфейс.
Промяна на размера на потребителския интерфейс
webix. UI # 40; # 123;
редове. # 123;
# 123; изглед. "Toolbar". височина. 50 # 125.
# 123; колони. # 91;
# 123; изглед. "Списък". гравитацията. 2 # 125.
# 123; изглед. "Шаблон" # 125;
# 93; # 125;
# 125;
# 125; # 41;
Резултатът от горния код ще бъде:
Има само един фиксиран размер - височината на лентата с инструменти. Височината и височината на шаблона за този списък ще се изчислява автоматично, както и ширината на всички компоненти. По този начин, за кандидатстване нашите размери на елементите могат да бъдат променяни по всяко размера на екрана. Освен това, в резултат на гравитацията собственост, шаблона винаги ще бъде два пъти по-широка от списъка на устройството с всеки размер на екрана.
Структурата на ПС
В повечето случаи, за създаването на уеб десктоп приложение започва с layauta. След това, по-малки компоненти, намиращи се в него. Този подход се прилага и за мобилни приложения. Въпреки това, поради малкия размер на мобилни устройства, за да се създаде мобилен интерфейс ще бъде по-удобно да се използва Multiview джаджа. Този елемент прави видима само активната страница, което ви позволява да превключвате между другите страници.
Например, в случай на десктоп приложение, можем да използваме следната конфигурация:
webix. UI # 40; # 123;
редове. # 123;
лента с инструменти
# 123; колони. # 91; списък. предварителен преглед # 93; # 125;
# 125;
# 125; # 41; ;
За мобилно устройство използва различна схема:
webix. UI # 40; # 123;
редове. # 123;
лента с инструменти
# 123; клетки. # 91; списък. предварителен преглед # 93; # 125;
# 125;
# 125; # 41; ;
настолно приложение, ще се появи под формата на списък с допълнителни подробности за правото. Що се отнася до мобилното устройство, на екрана ще се покаже списък с контакти, както и страница с информация за контакти. Потребителите могат да превключват между двата изгледа.
Динамични страници комутационни
Тъй като нашата молба показва списък с контакти, или шаблон със списък от данни за контакт, трябва да добавите логика да превключвате между двете страници. Има 2 подходи към управлението на видимата страница. Първият от тях е използването на специфичен контрол (като сегментирани бутон, например), за да се контролира видимостта:
webix. UI # 40; # 123;
редове. # 91;
# 123; изглед. "Сегментираният". Multiview. вярно. опции. # 91;
# 123; идентификатор. "Списък". стойност. "Списък" # 125.
# 123; идентификатор. "Темп". стойност. "Шаблон" # 125;
# 93; # 125.
# 123; клетки. # 91;
# 123; изглед. "Списък". идентификатор. "Списък" # 125.
# 123; изглед. "Шаблон". идентификатор. "Темп" # 125.
# 93; # 125;
# 93;
# 125; # 41; ;
Онлайн демо на този подход може да бъде намерена тук.
Ключови факти за решението са, както следва:
- ИД номер представяне съвпада с сегментиран бутон опции;
- Multiview функция сегментиран ключ е вярно.
Вторият подход се основава на манипулиране събитие и директни разговори view.show API.
webix. UI # 40; # 123;
редове. # 91;
# 123; изглед. "Бутон". стойност. "Назад". кликнете. "$$ (" списък "). Show ()" # 125.
# 123; клетки. # 91;
# 123; изглед. "Списък". идентификатор. "Списък". нататък. # 123;
onItemClick. функция # 40; # 41; # 123; $$ # 40; "Темп" # 41. шоу # 40; # 41; ; # 125;
# 125; # 125.
# 123; изглед. "Шаблон". идентификатор. "Темп" # 125.
# 93; # 125;
# 93;
# 125; # 41; ;
Онлайн демонстрация на втория метод може да бъде намерена тук.
И двата подхода могат да бъдат използвани в развитието на двете настолни и мобилни приложения. Първият подход изисква по-малко код, но броя на елементите, за които могат да се използват, е ограничен. Вторият подход позволява използването на всякакъв контрол или действия за промяна на активната страница, но кодът е ponadbitsya повече.
динамичната лента с инструменти
В един пример, кода по-горе, има бутона "Назад". Това е типичен сценарий за мобилно приложение, но този бутон, за да се покаже необходимо само когато сме на определена страница. Разбира се, можем да сложим лентата с инструменти в компонент Multiview, така че всяка страница ще има своя собствена лента с инструменти. Но има по-добро решение. Ние може да поиска от лентата с инструменти и бележка кои бутони трябва да се показват, когато дадена страница се вижда.
Var лента с инструменти = # 123;
изглед. "Toolbar".
височина. 50. visibleBatch. "Списък". идентификатор. "Toolbar".
елементи. # 91;
# 123; изглед. "Бутон". стойност. "Назад". партида. "Подробности" # 125.
# 123; изглед. "Търси". стойност. "". партида. "Списък" # 125;
# 93;
# 125; ;
Както можете да видите, всички бутони вече имат атрибут "партида", а най-много има лента с инструменти "visibleBatch" атрибут. По принцип, всички бутони от лентата с инструменти са разделени на групи в зависимост от настройката на "партида", и параметъра "visibleBatch" определя кои бутони трябва да се виждат. За да промените настройките за видимост, можете да се обадите на метод "showBatch ()":
$$ # 40; "Toolbar" # 41. showBatch # 40; "Подробности" # 41; ;
Този метод ще покаже всички бутони в коя настройка "партида" е настроен на "подробности", а всички останали ще бъдат скрити Knock. Тази техника позволява да се покажат различни бутони на една и съща лента с инструменти, когато превключвате между различните изгледи (параметър "партида" работи във всички layautnyh компоненти, така че използването на тази техника е възможно не само в лентата с инструменти).
Подкрепа за бутона "Назад"
webix. UI # 40; # 123;
редове. # 123;
лента с инструменти
# 123; клетки. # 91; списък. предварителен преглед # 93. идентификатор. "Multiview" # 125;
# 125;
# 125; # 41; ;
webix. история. път # 40; "Multiview". "Списък" # 41; ;
Ние използваме метод webix.history.track () да съхранява историята на превключване между възгледи. Методът се като параметри представяния идентификатори.
В горния първият идентификатор - един Multiview номер. Вторият - ID гледка, която се показва в началото. Сега всеки път, когато видим представителството се заменя с друга, то се съхранява в историята и при натискане на бутона "Назад" ще бъде показана отново.
Прилагането на стилове
За мобилните приложения по-добре да се увеличи размера на шрифта. Ние можем да направим това с блока "стил":
webix_view вход. webix_list_item # 123; шрифт - размер. 20px; линия - височина. 40px; # 125;
заключение
Можете да видите онлайн формуляра за кандидатстване, в които са били използвани всички описани техники, както и поглед към демонстрацията на githabe.
Както можете да видите, Webix не само осигурява необходимите инструменти, за да създадете десктоп уеб приложения, но също така ви позволява да използвате потребителския интерфейс компоненти за създаване на прост и лесен за употреба мобилно приложение, съвместим с всички съвременни мобилни устройства.
Максим Кожух
Свързани статии