- приклад програми
- Використання jQTouch
- Налаштування розділу імпорту
- Лістинг 1. Заголовки, необхідні для автономної роботи jQTouch і HTML5
- включення HTML5
- Лістинг 2. Файл декларації кеша для прикладу цієї статті
- Розробка додатків з використанням jQTouch
- Сторінки вмісту jQTouch
- Лістинг 3. Домашня сторінка, визначена класом "current"
- Малюнок 1. Домашня сторінка в прикладі нашого застосування
- Лістинг 4. Статичний зміст додатки jQTouch
- Малюнок 2. Домашня сторінка тестового додатка
- Робота в онлайновому режимі
- Лістинг 5. Елемент відображається тільки при роботі в онлайновому режимі
- Лістинг 6. Код JavaScript для управління онлайновими ресурсами
- Тестування параметра window.navigator.onLine
- Отримання онлайнових даних
- Лістинг 7. Сторінка-заглушка jQTouch для онлайнового рецепта
- Відсутність ефекту ковзання при зміні сторінок або завантаженні Ajax
- Отримання даних за допомогою Ajax
- Лістинг 8. Дані JSON, що містять рецепт дня
- Лістинг 9. Вставка JSON-даних в сторінку-заглушку
- Малюнок 3. Динамічний рецепт в браузері
- Ресурси для скачування
Межплатформенному Web-додатки для онлайнового та автономного використання
HTML5 - це загальний термін для цілого ряду країн, що розвиваються Web-технологій, включаючи стандартизовані технології роботи з насиченим мультимедійним контентом і інтерактивність. HTML5 також може служити основою для розробки додатків, що забезпечують надійну роботу в автономному режимі. Для досвідчених Web-розробників використання HTML5 є більш привабливим у порівнянні з вивченням нових доступних мов, таких як Objective-C або Java ™, проте для розробки HTML5-додатків також необхідно мати певний рівень знань. З цієї статті ви дізнаєтеся, як реалізувати в вашому додатку роботу з онлайновим вмістом і в той же час надати можливість роботи користувачам, які не підключеним до мережі.
приклад програми
У нашому прикладі ми розглянемо додаток, що працює на різних мобільних пристроях. Додаток містить список рецептів приготування різних страв і напоїв. Три рецепта є постійними і доступні навіть при відсутності підключення до мережі, а при підключенні до мережі користувачі зможуть побачити "рецепт дня", який пристрій отримує за допомогою Web-сервісів Ajax.
Ключ до швидкої розробки Web-додатків - повторне використання технологій. У нашому додатку використовуються дві популярні бібліотеки з відкритим вихідним кодом.
- jQuery - надійний міжплатформений доступ до JavaScript і DOM
- jQTouch - інфраструктура для мобільних HTML5-додатків, що працюють в браузерах на основі WebKit
Для отримання додаткової інформації про jQuery і jQTouch зверніться до розділу ресурси .
Незважаючи на те, що HTML5-додатки можуть працювати в Google Chrome, для досягнення найкращих результатів використовуйте при їх розробці браузер Apple Safari версії 4 і вище.
Використання jQTouch
Найкраще керувати програмами jQTouch як простими HTML-документами. Кожна "сторінка" додатка є окремим HTML-елементом <div> з унікальним атрибутом id. Базова схема додатки jQTouch виглядає наступним чином.
- HTML-заголовок і розділ імпорту.
- Початковий елемент <div>.
- Необов'язкові додаткові сторінки у вигляді елементів <div> з унікальними ідентифікаторами.
Налаштування розділу імпорту
У початковій частині коду нашого застосування виконується імпорт коду CSS і JavaScript, а також налаштовується автономний кеш HTML5. У лістингу 1 показано вміст початкового розділу.
Лістинг 1. Заголовки, необхідні для автономної роботи jQTouch і HTML5
<! DOCTYPE html> <html manifest = "sample.manifest"> <head> <meta charset = "utf-8" /> <title> Sample recipe application </ title> <style type = "text / css"> @ import "jqtouch / jqtouch / jqtouch.min.css"; </ style> <style type = "text / css"> @ import "jqtouch / themes / jqt / theme.min.css"; </ style> <style type = "text / css"> @ import "sample.css"; </ style> <script src = "jqtouch / jqtouch / jquery.1.3.2.min.js" type = "text / javascript"> </ script> <script src = "jqtouch / jqtouch / jqtouch.min.js" type = "text / javascript"> </ script> <script src = "sample.js" type = "text / javascript"> </ script> </ head>
включення HTML5
Про розмітці HTML5
Якщо ви знайомі з DTD і XML, вам може здатися дивним спрощене оголошення типу документа DOCTYPE, оскільки його єдиним призначенням є режим за умовчанням відображення ( "standards mode") в Web-браузерах. Оскільки браузери ніколи не використовували перевірку, засновану на DTD (внаслідок повсюдної поширеності підходу HTML-коду, написаного в стилі "супу з тегів"), використання строгих оголошень DOCTYPE не дає ніяких переваг. Якщо ви розробляєте Web-додатки за допомогою XML-інструментів, ви можете використовувати визначення DOCTYPE HTML V4.01 або XHTML V1.0, але через розширень HTML5 документ не пройде повну перевірку.
Точно так же вам може здатися незнайомим оголошення кодування <meta charset = "utf-8">, але воно також є правильним кодом HTML5. Посилання на обговорення спрощеного синтаксису HTML5 міститься в розділі ресурси .
Додаток, що розглядається в прикладі цієї статті, може працювати в автономному режимі. Це досягається шляхом використання атрибута manifest. Значення цього атрибута повинен бути шлях до файлу декларації кешу, як показано нижче.
<Html manifest = "sample.manifest">
Файл декларації кешу зазвичай складається з двох розділів.
- Список ресурсів, які необхідно кешувати для використання в автономному режимі.
- Список ресурсів, які можуть бути доступні при онлайновому використанні документа.
Нескладний синтаксис файлу декларації кеша показаний в лістингу 2.
Лістинг 2. Файл декларації кеша для прикладу цієї статті
CACHE MANIFEST # Так позначаються коментарі # Файли, необхідні для нашого прикладу: sample.js sample.css # Файли, які є частиною jQTouch # (повний список можна знайти в розділі "Завантаження"): jqtouch / jqtouch / jqtouch.min.css NETWORK: # Наступні ресурси будуть доступні тільки при роботі в режимі підключення до мережі: sample.json
У першому рядку завжди міститься директива CACHE MANIFEST, після якої з нового рядка перераховуються всі ресурси, які можуть бути доступні автономно: HTML-сторінки, CSS, JavaScript, зображення та інші файли. Під час першої активації браузер переглядає файл декларації кешу, завантажує всі перераховані ресурси і зберігає їх для подальшого автономного використання.
Далі слід директива NETWORK :, після якої перераховуються всі ресурси, доступ до яких можна отримати тільки в онлайновому режимі. Незважаючи на те, що в лістингу вказано файл, можна використовувати неповні імена шляхів до файлів. Наприклад, можна вказати шлях / online / і помістити в цю директорію всі ресурси, які будуть доступні тільки в онлайновому режимі.
У разі якщо ви забудете помітити будь-які ресурси програми як, автономні або онлайнові, як правило, все додаток не зможе працювати в автономному режимі. Нижче перераховані інші особливості існуючої реалізації, які можуть привести до виникнення помилок.
- Web-сервер повинен обробляти файл декларації як файл типу text / cache-manifest.
- Файл, який вказує на декларацію кеша (в нашому прикладі це файл sample.html), не потрібно включати в список.
- Елементи, перераховані у файлі декларації кеша, будуть повторно завантажені тільки при зміні самого файлу декларації, але не при зміні цих елементів.
- Web-сервер повинен обробляти файл декларації з використанням заголовків відповіді no-cache.
- Якщо Web-сторінка посилається на недекларірованних файл, кеш для автономної роботи програми може не сформуватися. Часто браузери не повідомляють про цю помилку. У Safari четвертої і пізніших версій все попередження можна переглянути в панелі Activity.
Якщо автономне HTML5-додаток налаштоване правильно, має бути можливо один раз звернутися до нього за допомогою браузера і Web-сервера, потім вимкнути сервер або відключити доступ до мережі, оновити сторінку і продовжувати працювати з отриманим вмістом. Якщо браузер повідомляє про неможливість отримати доступ до додатка, перевірте всі конфігураційні налаштування відповідно до викладеного вище списком.
Розробка додатків з використанням jQTouch
Для використання бібліотеки jQTouch необхідно вказати в розділі імпорту кілька файлів.
- jqtouch.min.css - CSS для jQTouch.
- theme.min.css - CSS для поточної теми (в прикладі цієї статті використовується тема за замовчуванням).
- jquery.1.3.2.min.js або пізніших версій - сама бібліотека jQuery.
- jqtouch.min.js - основний JavaScript-файл jQTouch.
- samples.js - призначений для користувача код JavaScript, який визначає унікальну функціональність програми, що розглядається в цій статті.
Дотримуючись оптимальним методикам розробки Web-додатків, розміщуйте розділ імпорту в кінці HTML-документа, перед закриттям тега <body>. У розглянутому прикладі для простоти розуміння цей розділ розташований в тезі <head>.
Оскільки швидкість бездротових підключень невелика, на обробку HTTP-операцій витрачається багато ресурсів мобільних пристроїв. З цієї причини рекомендується поміщати кілька JavaScript-файлів в одну бібліотеку. Це робиться за допомогою автоматизованої операції компонування / розгортання; набагато простіше розробляти програми, використовуючи невеликі, чітко визначені окремі бібліотеки.
Також розгляньте можливість використання спрайтів SCC замість декількох зображень. Для спрощення розгортання компонуйте сторінки стилів в один документ.
Сторінки вмісту jQTouch
Кожна сторінка в додатку jQTouch є простим HTML-елементом <div>, який підпорядковується наступним правилам.
- Елемент повинен містити унікальний атрибут id.
- Ідентифікатор повинен бути пов'язаний з певним місцем в документі за допомогою якоря (звичайного HTML-елемента anchor).
- Домашньою сторінкою додатки jQTouch є елемент <div>, класом якого є current.
Бібліотека jQTouch містить ряд методів для анімації переходів зі сторінки на сторінку. За замовчуванням використовується перехід типу "swipe" з використанням CSS3. У багатьох реалізаціях WebKit ці переходи є апаратно прискореними, завдяки чому робота з додатком виглядає більш природною. У лістингу 3 показані посилання на сторінки jQTouch, розташовані на домашній сторінці програми.
Лістинг 3. Домашня сторінка, визначена класом "current"
<Div id = "home" class = "current"> <div class = "toolbar"> <h1> HTML5 Sample </ h1> </ div> <ul class = "rounded"> <li class = "arrow"> <a href="#recipe1"> Breakfast Circles </a> </ li> <li class = "arrow"> <a href="#recipe2"> Slowhand Jackson </a> </ li> <li class = "arrow"> <a href="#recipe3"> Potato Chip Cookies </a> </ li> <li class = "arrow online-required"> <a href="#recipe4"> Recipe of the Day </ a> </ li> </ ul> </ div>
Більшість сторінок jQTouch складаються із зовнішнього елемента <div> з його унікальним ідентифікатором, за яким слідує елемент <div> з атрибутом toolbar, що містить заголовок сторінки. Інша частина компонується у вигляді списку або додаткових абзаців.
Класи rounded та arrow визначені в головному стилі теми jQTouch. Залежно від встановленої теми їх вид може змінюватися. У прикладі додатка цієї статті використовується чорно-сіра тема за замовчуванням, показана на малюнку 1.
Малюнок 1. Домашня сторінка в прикладі нашого застосування
Перші три рецепта є статичними і визначені на одній HTML5-сторінці. Кожен з них має унікальний ідентифікатор (наприклад, recipe1). Ці ідентифікатори використовуються для переходу з домашньої сторінки на нову, як показано нижче.
<a href="#recipe1"> Breakfast Circles </a> </ li>
У лістингу 4 наведено вихідний код для першого рецепта. на малюнку 2 показаний вид сторінки після HTML-рендеринга.
Лістинг 4. Статичний зміст додатки jQTouch
<Div id = "recipe1" class = "recipe"> <div class = "toolbar"> <h1> Breakfast Circles </ h1> <a class="back" href="#"> Back </a> </ div> <ul class = "rounded"> <li> 2C flour </ li> <li> 1 / 2C sugar </ li> <li> 1 / 2C confectioners sugar </ li> <li> 2T Earl Grey tea leaves (about 6 bags) </ li> <li> 1 / 2t salt </ li> <li> 1t vanilla </ li> <li> 1 / 2C butter </ li> <li> Cold water </ li> < / ul> <p> Pulse dry ingredients in food processor to pulverize tea leaves. Add vanilla, butter and pulse, adding as little water as necessary to form loose dough. Divide into two 2 "logs and roll with parchment paper. Chill 30 min. </ P> <p> Cut into 1/4" -thick wafers and bake at 375 degrees on parchment until edges start to brown, about 12 min. </ P> </ div>
Зауважте, що елемент <div> містить одне нове значення класу: recipe. Таблиці стилів jQTouch за замовчуванням не містять відповідних засобів, що дозволяють управляти стилем вкладених елементів <p>, які використовуються в нашому додатку. Оскільки jQTouch - це всього лише Web-додаток, ви можете вільно задавати власні параметри стилю, як у випадку використання звичайних таблиць CSS.
У нашому прикладі файл sample.css містить кілька простих модифікацій, включаючи div.recipe p {margin: 1em; }, Які дозволяють сформувати акуратно виглядає поле з текстом рецепта.
Малюнок 2. Домашня сторінка тестового додатка
Всі три статичних рецепта будуть доступні користувачам, які не підключеним до мережі, оскільки їх вміст укладено всередині HTML-сторінки. В наступній частині статті буде показано, як з'єднати онлайнове і автономне вміст і створити гнучке розширюване Web-додаток, що підтримує роботу в автономному режимі.
Робота в онлайновому режимі
Останній рецепт (елемент списку, показаний в лістингу 5) містить додатковий HTML-клас online-required.
Лістинг 5. Елемент відображається тільки при роботі в онлайновому режимі
<Li class = "arrow online-required"> <a href="#recipe4"> Recipe of the Day </a> </ li>
В налаштуваннях CSS значенням властивості .online-required цього додатка є display: none. Це означає, що за замовчуванням програма має працювати в автономному режимі, і онлайнові ресурси приховані.
Як же додаток дізнається про те, що було виконано підключення до мережі? Код цієї функціональності міститься в призначеному для користувача JavaScript-сценарії sample.js, показаному в лістингу 6.
Лістинг 6. Код JavaScript для управління онлайновими ресурсами
/ * Ініціалізація jQTouch при запуску. [Повний лістинг наведено в розділі "Ресурси"] * / // Стандартний метод jQuery для виконання коду по // завершенні завантаження браузером всіх ресурсів jQuery (document) .ready (function () {// Відображення всіх онлайнових ресурсів при підключенні до мережі if (window.navigator.onLine) {jQuery ( '. online-required'). show ();} ...
У коді HTML5 визначається значення параметра API-інтерфейсу JavaScript window.navigator.onLine. Коли це значення істинно, браузер підключений до мережі і знаходиться в онлайновому режимі. Коли це значення помилково, браузер може отримати доступ тільки до автономних ресурсів, перерахованих у файлі декларації кеша. У нашому прикладі, якщо додаток працює в онлайновому режимі, будуть відображені всі DOM-елементи класу online-required.
Тестування параметра window.navigator.onLine
У Web-браузерах настільних комп'ютерів, які не підтримують HTML5, параметр window.navigator.onLine завжди буде мати значення true, навіть якщо комп'ютер не підключений до мережі. Для тестування програми вам доведеться підшукати підходящу інфраструктуру з можливістю емуляції автономного режиму або використовувати тільки мобільні пристрої.
Отримання онлайнових даних
Ефективним методом завантаження онлайнових даних в додаток jQTouch є завчасне створення каркасів сторінок, призначених для їх зберігання. У лістингу 7 показаний елемент <div> для рецепта, доступного тільки в онлайновому режимі.
Лістинг 7. Сторінка-заглушка jQTouch для онлайнового рецепта
<Div id = "recipe4" class = "recipe"> <div class = "toolbar"> <h1> Recipe of the Day </ h1> <a class="back" href="#"> Back </a> </ div> <! - Тут буде розміщений рецепт -> </ div>
Тепер в призначеному для користувача сценарії JavaScript необхідно створити обробник події для отримання рецепта і розміщення результатів на HTML-сторінці. Очевидно, можна було б визначити обробник події onclick для об'єкта з ідентифікатором # recipe4.
Однак jQTouch заміщає дана подія, виконуючи свої власні переходи зі сторінки на сторінку. Тому замість визначення обробника ви можете скористатися тим фактом, що при переходах CSS3 генеруються події початку і завершення операції. За допомогою jQuery можна виконати прив'язку коду до цих подій, навіть якщо ці події до jQuery не належать. Це робиться в такий спосіб.
jQuery ( '# recipe4'). bind ( 'pageAnimationStart', function () {...});
Відсутність ефекту ковзання при зміні сторінок або завантаженні Ajax
На момент написання цієї статті тільки браузери Safari версії 4 і 5, а також Mobile Safari могли відображати візуальні ефекти при переході зі сторінки на сторінку і запускати подія pageAnimationStart. Якщо вам потрібна підтримка цієї функціональності в інших браузерах на основі WebKit, використовуйте інші події.
Подія pageAnimationStart запускається майже відразу ж після клацання миші. По завершенні переходу запускається подія pageAnimationEnd. Я вважаю за краще призначати більшість дій подій запуску, оскільки поки користувач бачить анімований перехід, браузер має деяким часом для збору даних.
Отримання даних за допомогою Ajax
Нам залишилося лише додати в наш додаток деякі Ajax-взаємодії. У нашому прикладі передбачається, що результуючий формат буде являти собою JSON-дані. У цьому випадку дані беруться безпосередньо з JSON-файлу sample.json, показаного в лістингу 8.
Лістинг 8. Дані JSON, що містять рецепт дня
[{ "Title": "Doggie Delight", "ingredients": \ [ "1 cup dry kibble", "1 pound butter", "1 beef bouillon cube", \ "2 tbsp oregano"], "instructions": " Combine all ingredients in bowl. \ Season to taste. Serve immediately. " }]
У лістингу 9 представлений код для отримання даних та їх вставки в покажчик місця заповнення <div>.
Лістинг 9. Вставка JSON-даних в сторінку-заглушку
jQuery.ajax ({url: "sample.json", success: function (data) {// Задаємо назву рецепта jQuery ( '# recipe4 h1'). text (data [0] .title); // Створюємо маркований список UL і додаємо в нього інгредієнти var ul = jQuery ( '<ul class = "rounded">'); jQuery.each (data [0] .ingredients, function (index, item) {jQuery ( '<li>'). text (item) .appendTo (ul);}); // Додаємо текст рецепта jQuery ( '# recipe4'). append (ul) .append (jQuery ( '<p>'). text (data [0] .instructions) );
На малюнку 3 показаний остаточний вигляд динамічних даних.
Малюнок 3. Динамічний рецепт в браузері
висновок
З кожним днем на ринку з'являється все більше мобільних пристроїв. Хоча додатки можна розробляти окремо для кожної знову з'являється платформи і апаратної конфігурації, для невеликих динамічних груп розробників більш краща можливість створювати межплатформенному мобільні Web-додатки з порівнянними робочими характеристиками. Для розробників, знайомих з HTML, JavaScript і CSS, мобільні Web-додатки привабливі тим, що можуть створюватися як прототипи більш серйозних спеціалізованих додатків, а також як самостійні першокласні системи.
API-інтерфейси JavaScript, доступні в HTML5, дозволяють Web-додатків отримувати широкий доступ до апаратної конфігурації, включаючи мережевий статус, орієнтацію екрану, розташування користувача і багато інших параметрів. Як правило, всі популярні мобільні браузери забезпечують широку підтримку цих API-інтерфейсів.
Web-розробник НЕ повінні залішатіся осторонь від розробки мобільніх Додатків. Ваших знань може виявитися цілком достатньо, щоб почати створювати додатки для смартфонів, нетбуків і планшетних пристроїв.
Ресурси для скачування
Схожі тими
- Оригінал статті: Data-driven interactive applications with HTML5 and Ajax (EN).
- огляд HTML5 (EN) - ознайомтеся з термінологією і пов'язаними API-інтерфейсами HTML і XHTML на Web-сайті консорціуму W3C.
- відвідайте сторінку WebKit (EN) і дізнайтеся більше про Open Source-проект WebKit і доступних браузерах для різних платформ.
- у статті Building iPhone Apps with HTML, CSS, and JavaScript (EN) докладно описуються різні прийоми розробки мобільних Web-додатків.
- Не забудьте прочитати книгу Dive into HTML5 (EN), в якій проводиться глибокий аналіз і даються практичні приклади коду для розробників HTML5.
- Дізнайтеся более про інфраструктурі jQuery (EN), необхідної для написання JavaScript-додатків, що працюють у всіх сучасних браузерах, включаючи мобільні браузери.
- бібліотека jQTouch (EN) призначена для розробки Web-додатків для Apple iPhone, але може використовуватися і для пристроїв під управлінням Android і webOS.
Підпішіть мене на ПОВІДОМЛЕННЯ до коментарів
Як же додаток дізнається про те, що було виконано підключення до мережі?