Intel XDK підтримує декілька HTML5 фреймворків: App Framework, Bootstrap, TopCoat and JQuery Mobile.App Designer також підтримує усі ці фреймворки. App Starter підтримує тільки App Framework. App Designer та App Starter являються будівельними інструментами для GUI.
App Framework\- це простий font-end фреймворк для конструювання гібридних мобільних додатків. Цей UI компонент використовується тільки для побудови таких додатків, які є адаптивними для всіх мобільних ОС. На всіх платформах ваш додаток буде виглядати та відчуватись нативним.
JQuery mobile \- "олдскульний" гібридний мобільний фреймворк для додатків. Він існує вже багато років і це один із найстаріших фреймворків.Один із найбільших плюсів цього фреймворку - велика бібліотека компонентів. Але нажаль JQuery mobile має великий недолік - низьку продуктивність, він дуже повільний і зовсім не створює відчуття нативності.
TopCoat - найменш відомий. Його не можна назвати у повній мірі фреймворком, але він має велику колекцію UI компонентів, які ви можете використати безпосередньо у вашому додатку.
**Bootstrap **- найбільш відомий фреймворк серед усіх. Він використовується для конструювання веб-сторінок і відзивчивих мобільних сайтів. Насправді дивно побачити Bootstrap у списку.
Отже, почнемо
Давайте почнемо зі створення нового проекту. Ви можете розпочати створення нового проекту із кнопки "Start New Project" зверху у нижньому кутку програми. Потім виберіть "App Starter" \- це початок проекту з готовим до використання App Framework.
Це прототип, того що ми створили:
Створіть style.css в папці css та app.js в папці js. Cтворіть каталог images, де пізніше ви будете розміщати ваші зображення. Так як ми не працюємо з REST APIs, будемо робити це "фейково", працюючи локально. З деякими мінорними змінами ви можете редагувати цей проект використовуючи будь-які зовнішні REST APIs.
Що потрібно спочатку зробити, так це "почистити" код, який Іntel зегенерував для вас. Після чистки коду вийде щось на зразок цього:
<meta content="text/html; charset=utf-8" http-equiv="Content-type">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="no-cache" http-equiv="Pragma">
<script charset="utf-8" src="intelxdk.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var isIntel=window.intel&&window.intel.xdk
//Цей обробник подій викликається один раз - коли бібліотеки intel готові
function onDeviceReady() {
//Приховує заставку, коли наш додаток готовий до роботи
intel.xdk.device.hideSplashScreen();
setTimeout(function () {
$.ui.launch();
}, 50);
}
//Початковий обробник події, щоб визначити, коли intel готовий почати
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
</script>
<script src="js/appframework.ui.min.js"></script>
<script>
if(isIntel)
$.ui.autoLaunch = false;
$.ui.useOSThemes = true; //Змінити це значення на false, щоб змусити пристрій "форсувати" тему
$.ui.blockPageScroll();
$(document).ready(function () {
if ($.ui.useOSThemes && (!$.os.ios||$.os.ios7))
$("#afui").removeClass("ios");
});
</script>
<link href="css/icons.css" rel="stylesheet" type="text/css">
<link href="css/af.ui.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<div>
</div>
<script src="js/data.js"></script>
<script src="js/app.js"></script>
У цьому прикладі ви можете побачити, що додано тільки app.js та style.css. Давайте глянемо на код та швидко його проаналізуємо. В хедері деякі meta теги які ви не повинні змінювати.
Перший Javascript блок ховає заставку, коли девайс готовий.
У другому блоці Javascript, ви можете обрати: використовувати власну платформу і подивитися, як цей пристрій працює, або змусити додаток використовувати iOS7 для кожного пристрою, на якому він запускається.
Перше, про що ви повинні знати, так це div з id="afui". Ви маєте специфічний
id з цим елементом. Це, як root у вашого додатку. Будь-що починається з цього
елемента. В середину нього мы встановляємо "header", "footer" та всі додатки
на сторінці.
<div>
<div class="header"></div>
</div>
Div з id="header" \- це елемент, який працює з "хедером". App Framework
виконує багато автоутворень в середині div'у, але ви можете додати і новий
контент, якщо захочете. Для прикладу ви можете вручну додати кнопку "Назад" і
вказати заголовок. Краще залишити як наймога більше автоутворень. Ніколи не
робіть щось вручну, коли фреймворк може це зробити автоматично. Ви отримує
менше коду і він буде виглядати чистіше.
Усі сторінки вашого додатку знаходяться всередині елементу id="content".
Туди ви додаєте панелі для кожної сторінки яку хочете відобразити, наприклад:
<div>
<div class="panel">
</div>
</div>
Коли створюєте panel, ви повинні додати деякі атрибути. Для прикладу
атрибут title відображаться в "хедері" сторінки, а атрибут ID
використовуэться для навігації між панелями. Властивість selected
встановляює властивість головної сторінки, тільки одна сторінка може мати цей
атрибут.
Остання річ, яку потрібно зробити, то це додати "футер".
<div>
<div class="header"></div>
<div>
.....
</div>
<div class="footer">
<a class="icon home" href="#main_pg">Home</a>
<a class="icon picture" href="#myphotos_pg">My Photos</a>
</div>
</div>
В середині "футера" ви можете додавати вкладки з текстом та іконками.
Зазвичай, це теги і href-атрибути, які визначають id панелі, на яку ви
хочете перейти коли клацаєте по вкладці. В цьому випадку це #main_pg. В
середині класу ви можете визначити, яку іконку ви хочете використовувати для
цієї вкладки. В цьому прикладі перша вкладка має іконку "головна" та друга -
"фото". На жаль, не має жодної документації про список іконок. Але є
Openicons.css в css каталозі для того, щоб знати які іконки ви можете
використати.
Ми додали друге посилання до "футеру" але немає панелі з цим посиланням. Додамо іншу panel до секції content.
<div>
<div class="panel">
</div>
<div class="panel">
<span>My Photos</span>
</div>
</div>
Протестуємо на емуляторі
Все працює, крім кнопки повернення.
<div>
<div class="header"></div>
<header id="myphotos_header">
<h1 id="pageTitle">My Photos</h1>
</header>
......
</div>
Давайте додамо новий header без кнопки повернення. Ми будемо користуватись цим
header, тільки для myphotos_pg panel.
Додаємо посилання до header в panel використовуючи data- header="myphotos_header". Значенням атрибуту data-header є id
використаного в header. myphotos_pg panel повинна виглядати приблизно так:
<div class="panel">
<span>My Photos</span>
</div>
Запустимо емулятор і побачимо, що все працює як потрібно:
Ще немає коментарів