- огляд додатки
- Малюнок 1. Основні компоненти офлайнового Web-додатки
- приклад програми
- Малюнок 2. Зовнішній вигляд програми на iPhone
- Малюнок 3. Зовнішній вигляд програми на Palm Pre
- код HTML
- Лістинг 1. HTML-код
- Лістинг 2. Файл маніфесту
- Лістинг 3. JavaScript-код для ініціалізації
- Лістинг 4. JavaScript-код для побудови списку
- Лістинг 5. JavaScript-код для поновлення запису
- Лістинг 6. JavaScript-код для вибору елемента зі списку
- Лістинг 7. Код JavaScript-обробників
- Лістинг 8. Прикладні функції JavaScript
- висновок
- Ресурси для скачування
Web-додатки, що розробляються для мобільних пристроїв, стають все більш популярними. Однак нестабільність доступу до мереж є серйозною перешкодою для використання Web-технологій як частини хмарної інфраструктури. Традиційне Web-додаток просто не працює при відсутності доступу до мережі. Одним з рішень цієї проблеми є використання двох можливостей стандарту HTML5 (див. ресурси ):
- Офлайнові Web-додатки
- Зберігання даних в базі даних на стороні клієнта
Користувач мобільного пристрою може працювати з функціями хмарної інфраструктури або ж працювати в оффлайновом режимі з локальним додатком і локальною базою даних, синхронізуючи дані з хмарою при відновленні доступу до мережі.
У цій статті ми познайомимося з технічними деталями типового Web-додатки. Ми продемонструємо технологію HTML5 на прикладі прототипу простого додатка для управління майном.
завантажте вихідний код використовуваного в цій статті додатки за посиланням у наведеній нижче таблиці Завантаження.
огляд додатки
На малюнку 1 показані основні компоненти архітектури нашого прикладу програми.
Малюнок 1. Основні компоненти офлайнового Web-додатки
HTML-сторінка HTML-сторінка є основою програми, вона виконує роль моделі. Вона містить в собі відображаються дані і (за умовчанням) інформацію для виведення сторінки на екран. HTML-елементи сторінки організовані в ієрархію дерева об'єктної моделі HTML-документа (Document Object Model або DOM). Ініційовані користувачем події призводять до виконання традиційного циклу запит-відповідь, що включає в себе завантаження сторінки і виконання пов'язаних з нею JavaScript-функцій. Зауважимо, що наш додаток складається з однієї HTML-сторінки, тому немає необхідності завантажувати в циклах запит-відповідь інші HTML-сторінки. Всі дії виконуються на одній сторінці.
JavaScript В блоці JavaScript містяться керуючі функції програми. HTML-елементи зв'язуються з JavaScript-функціями за допомогою обробників подій. Код JavaScript має доступ до DOM-дереву HTML-елементів додатка, який містить всі елементи призначеного для користувача інтерфейсу, і може використовувати їх як джерело даних для обчислень. Результати обробки можуть бути представлені користувачеві за допомогою змін в HTML-сторінці. Каскадна таблиця стилів В каскадної таблиці стилів (Cascading Style Sheet, CSS) описується, як HTML-сторінка відображається в браузері. Для простоти рішення ми опустимо завдання створення вистави. На даному етапі HTML-елементи будуть відображатися відповідно до поведінкою, застосовуваним за замовчуванням.Для мобільних пристроїв існують різні JavaScript / CSS бібліотеки та інфраструктури, що дозволяють створити характерне для платформи оформлення (наприклад, iUi для iPhone). З більш детальною інформацією можна ознайомитися в розділі ресурси . Хоча застосування таких бібліотек необхідно для підвищення привабливості додатки для користувача, цей підхід має недолік - залежність від платформи.
База даних В стандарті HTML5 було введено зберігання даних в локальній базі даних. Вона реалізована в поточній версії браузера Safari від Apple®.®. У ньому є вбудована база даних SQLite, до якої можна звертатися з JavaScript за допомогою SQL-запитів. У цій базі даних зберігається бізнес-інформація моделі програми. Маніфест Файл маніфесту - це обов'язковий компонент офлайнового Web-додатки, що представляє собою дескриптор розгортання. У ньому просто перераховані всі файли, які потрібно завантажити.приклад програми
У цьому розділі ми представимо наш приклад програми. Воно називається MyHomeStuff (мої домашні речі). Це просте додаток для управління майном, яке дозволяє відстежувати належать вам речі. На малюнку 2 показано, як це додаток виглядає на iPhone.
Малюнок 2. Зовнішній вигляд програми на iPhone
Для простоти в додатку не реалізована синхронізація даних з сервером. На малюнку 3 показано, як виглядає додаток MyHomeStuff в Web-браузері пристрою Palm Pre.
Малюнок 3. Зовнішній вигляд програми на Palm Pre
У списку у верхній частині екрану перераховані всі внесені в додаток предмети (книги, комп'ютери і т.д.).
Коли користувач вибирає елемент зі списку, в середині форми відображається детальна інформація про цей елемент (ідентифікаційний номер, кількість, назва). Інформацію про вибраний елемент можна змінити, натиснувши кнопку Update. Також обраний елемент можна видалити, натиснувши кнопку Delete. Нові елементи можна створювати, вводячи в формі назву елемента і кількість і натискаючи кнопку Create.
У нижній частині екрана відображається статус додатка.
код HTML
HTML-сторінка містить декларації, метатеги для оптимізації відображення на мобільних пристроях, посилання на зовнішні файли (маніфест, сценарії JavaScript, css) і HTML-елементи, що формують базову структуру програми. У лістингу 1 показаний код.
Лістинг 1. HTML-код
<! DOCTYPE HTML> <html manifest = "MyHomeStuff.manifest"> <head> <meta name = "viewport" content = "width = device-width; initial-scale = 1.0; maximum-scale = 1.0; user-scalable = 0; "> <title> MyHomeStuff </ title> <script type =" text / javascript "src =" MyHomeStuff.js "> </ script> </ head> <body onload =" onInit () "> <h3> Overview </ h3> <ul id = "itemData"> </ ul> <h3> Details </ h3> <form name = "itemForm"> <label for = "id"> Id: </ label> <input type = "text" name = "id" id = "id" size = 2 disabled = "true" /> <label for = "amount"> Amount: </ label> <input type = "text" name = "amount" id = "amount" size = 3 /> <label for = "name"> Name: </ label> <input type = "text" name = "name" id = "name" size = 16 /> <br> < br> <input type = "button" name = "create" value = "create" onclick = "onCreate ()" /> <input type = "button" name = "update" value = "update" onclick = "onUpdate ( ) "/> <input type =" button "name =" delete "value =" delete "</ form> <h4> Status </ h4> <div id =" status "> </ div> </ body> < / html>В атрибутах обробки подій HTML-елементів вказуються JavaScript-функції, які слід виконати при завантаженні сторінки (onload) і натисканні на елемент-кнопку (onclick).
HTML-сторінка офлайнового Web-додатки починається з тега <! DOCTYPE HTML>. Файл маніфесту вказується за допомогою атрибута тега <html manifest = "MyHomeStuff.manifest">.
Як ми вже говорили, в маніфесті вказуються файли, які необхідно завантажити в кеш. Цей додаток складається з HTML-файлу і JavaScript-файлу. HTML-файл з посиланням на маніфест автоматично включається в кеш додатка. Наш файл маніфесту виглядає так:
Лістинг 2. Файл маніфесту
CACHE MANIFEST MyHomeStuff.jsкод JavaScript
Код JavaScript складається з трьох основних блоків:
- функції ініціалізації
- функції роботи з базою даних (crud - створення (create), читання (read), оновлення (update), видалення (delete) елементів) і функції поновлення уявлення
- невеликі прикладні функції
Як показано в лістингу 3, в першому блоці міститься обробник події onload, не започатковано додаток, а також код для ініціалізації бази даних.
Лістинг 3. JavaScript-код для ініціалізації
function onInit () {try {if (! window.openDatabase) {updateStatus ( "Error: DB not supported"); } Else {initDB (); createTables (); queryAndUpdateOverview (); }} Catch (e) {if (e == 2) {updateStatus ( "Error: Invalid database version."); } Else {updateStatus ( "Error: Unknown error" + e + "."); } Return; }} Function initDB () {var shortName = 'stuffDB'; var version = '1.0'; var displayName = 'MyStuffDB'; var maxSize = 65536; // in bytes localDB = window.openDatabase (shortName, version, displayName, maxSize); }Розглянемо показаний вище код:
- У функції onInit спочатку перевіряється існування обов'язкової функції openDatabase, відсутність якої сигналізує про те, що браузер не підтримує локальну базу даних.
- У функції initDB відкривається база даних браузера HTML5.
- Після успішного відкриття бази даних виконується код SQL DDL, що створює таблиці бази даних. На закінчення викликаються функції, які запитують існуючі записи і заповнюють HTML-сторінку даними.
Кожна JavaScript-функція з другого блоку складається з двох частин: логіки доступу до бази даних і логіки подання. Таке об'єднання логіки характерно для архітектури Model 1 (див. ресурси ), Яка є найзручнішим способом розробки простих Web-додатків. Для реальних завдань краще підходить архітектура MVC з чітким поділом логіки моделі (Model), подання (View) і контролерів (Controller).
Для побудови списку об'єктів використовується функція queryAndUpdate, яка викликається з обробників подій. У лістингу 4 показаний її код.
Лістинг 4. JavaScript-код для побудови списку
function queryAndUpdateOverview () {// видаляємо рядки старої таблиці var dataRows = document.getElementById ( "itemData"). getElementsByClassName ( "data"); while (dataRows.length> 0) {row = dataRows [0]; document.getElementById ( "itemData"). removeChild (row); }; // читаємо дані з бази даних і створюємо нові рядки таблиці var query = "SELECT * FROM items;"; try {localDB.transaction (function (transaction) {transaction.executeSql (query, [], function (transaction, results) {for (var i = 0; i <results.rows.length; i ++) {var row = results. rows.item (i); var li = document.createElement ( "li"); li.setAttribute ( "id", row [ 'id']); li.setAttribute ( "class", "data"); li. setAttribute ( "onclick", "onSelect (this)"); var liText = document.createTextNode (row [ 'amount'] + "x" + row [ 'name']); li.appendChild (liText); document.getElementById ( "itemData"). appendChild (li);}}, function (transaction, error) {updateStatus ( "Error:" + error.code + "<br> Message:" + error.message);});}) ; } Catch (e) {updateStatus ( "Error: Unable to select data from the db" + e + "."); }}У показаному вище коді виконується наступне:
- З DOM-дерева видаляються старі дані.
- Виконується запит для отримання всіх даних.
- Для кожного отриманого з бази даних елемента створюється HTML-елемент, який додається в результуючий список.
- До кожного елементу списку додається оброблювач події onSelect, який буде відповідати на клацання миші по цьому елементу.
У функціях цього блоку також містяться обробники подій для елементів з панелі кнопок: onUpdate, onDelete, onCreate і onSelect. У лістингу 5 показаний код функції onUpdate (функції onCreate і onDelete мають схожу структуру і тому тут не показані; посилання на повний вихідний код прикладу додатки приведена нижче в таблиці Завантаження ).
Лістинг 5. JavaScript-код для поновлення запису
function onUpdate () {var id = document.itemForm.id.value; var amount = document.itemForm.amount.value; var name = document.itemForm.name.value; if (amount == "" || name == "") {updateStatus ( " 'Amount' and 'Name' are required fields!"); } Else {var query = "update items set amount = ?, name =? Where id = ?;"; try {localDB.transaction (function (transaction) {transaction.executeSql (query, [amount, name, id], function (transaction, results) {if (! results.rowsAffected) {updateStatus ( "Error: No rows affected") ;} else {updateForm ( "", "", ""); updateStatus ( "Updated rows:" + results.rowsAffected); queryAndUpdateOverview ();}}, errorHandler);}); } Catch (e) {updateStatus ( "Error: Unable to perform an UPDATE" + e + "."); }}}У наведеному вище коді робиться наступне:
- Зчитуються і перевіряються значення полів форми.
- Якщо значення полів коректні, виконується запит для поновлення даних.
- Результат запиту показується на оновленій HTML-сторінці.
Функція onSelect викликається, коли користувач вибирає який-небудь елемент списку. При цьому інформація про вибраний елемент поміщається в форму. Цей код показаний в лістингу 6.
Лістинг 6. JavaScript-код для вибору елемента зі списку
function onSelect (htmlLIElement) {var id = htmlLIElement.getAttribute ( "id"); query = "SELECT * FROM items where id = ?;"; try {localDB.transaction (function (transaction) {transaction.executeSql (query, [id], function (transaction, results) {var row = results.rows.item (0); updateForm (row [ 'id'], row [ 'amount'], row [ 'name']);}, function (transaction, error) {updateStatus ( "Error:" + error.code + "<br> Message:" + error.message);}); }); } Catch (e) {updateStatus ( "Error: Unable to select data from the db" + e + "."); }}У наведеному вище коді робиться наступне:
- Визначається ідентифікатор обраного елемента.
- Виконується запит select.
- Викликається функція, поміщає в форму прочитані значення.
Останній блок коду JavaScript, що містить прикладні функції, починається з обробників даних, які використовуються в якості параметрів запитів.
Лістинг 7. Код JavaScript-обробників
errorHandler = function (transaction, error) {updateStatus ( "Error:" + error.message); return true; } NullDataHandler = function (transaction, results) {}Щоб уникнути надмірності, ми зробили функції для заповнення полів форми (updateForm) і поновлення статусу (updateStatus), які показані нижче.
Лістинг 8. Прикладні функції JavaScript
function updateForm (id, amount, name) {document.itemForm.id.value = id; document.itemForm.amount.value = amount; document.itemForm.name.value = name; } Function updateStatus (status) {document.getElementById ( 'status'). InnerHTML = status; }розгортаємо додаток
Для перевірки роботи нашого додатки на підтримують HTML5 мобільних пристроях ми використовували iPhone 3GS і Palm Pre. Також підійде браузер Safari на звичайному комп'ютері.
завантажте файли програми по посиланню з таблиці Завантаження і розмістіть їх на HTTP-сервері. HTTP-сервер потрібно налаштувати так, щоб він віддавав файл маніфесту з Mime-типом text / cache-manifest. Відкрийте програму на iPhone, збережіть для нього закладку і перейдіть в офлайновий режим ( «У літаку»). Після цього додаток можна відкрити за допомогою закладки, і воно буде працювати без доступу до мережі.
висновок
У цій статті ми розглянули технічний аспект офлайнових Web-додатків. Ми продемонстрували технологію HTML5 на прикладі простого додатка управління майном, яке може працювати в локальному режимі, використовуючи локальну базу даних.
Ресурси для скачування
Схожі теми
- Зустрітися з оригіналом статті: Create offline Web applications on mobile devices with HTML5 (DeveloperWorks, травень 2010 р.)
- У керівництві Safari Client-Side Storage and Offline Applications Programming Guide (Apple Inc., 20 січня 2010 року) докладно розповідається про підтримку в HTML5 баз даних, з якими можна працювати за допомогою JavaScript.
- у статті ABI Research: Cloud computing will transform mobile apps "(Dusan Belic, 2009 г.) розглядаються Web-технології як основна модель додатків для мобільних пристроїв, що вимагає тільки однієї версії додатка.
- " HTML 5 - A vocabulary and associated APIs for HTML and XHTML "(W3C Working Draft, 4 березня 2010 року) - вичерпний джерело інформації про HTML5.
- iUi: iPhone User Interface Framework - дізнайтеся більше про розробку Web-додатків для пристроїв класу iPhone. iUi - це інфраструктура для розробки складних Web-додатків для iPhone інших подібних йому мобільних пристроїв, що складається з JavaScript-бібліотеки, CSS-таблиць і зображень.
- Mobile app dev trends: Making life easier for developers (John K. Waters, липень 2009 року) - читайте дискусію про сучасні тенденції в Web-розробці для мобільних пристроїв.
- Дізнайтеся більше про Model 1 - моделі проектування Web-додатків на Java. В Model 1 запит надсилається до JSP-сторінці або сервлету, які і виконують всю роботу: обробляють запит, перевіряють дані, виконують бізнес-логіку і генерують відповідь.
Підпишіть мене на повідомлення до коментарів
Name =?Where id = ?
GetAttribute ( "id"); query = "SELECT * FROM items where id = ?