|
Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле |
Инспектор
Спонсор: Microsoft
Вы можете этот курс.
Опубликован: 19.03.2014 | Уровень: для всех | Доступ: платный
Практическая работа 8:
Работа с данными в памяти мобильного устройства
Аннотация: На этом занятии разрабатывается мобильный виджет с временным и долговременным хранением данных непосредственно на мобильном устройстве с использованием контейнеров sessionStorage и localStorage. Виджет содержат фрагмент заказа товаров из виртуального магазина.
Ход выполнения:
- Создайте проект Cordova с произвольным именем, например, Storage.
- Замените содержимое таблицы стилей файла www/css/index.css (полностью удалите старое содержимое) новыми правилами, содержащими селекторы body, h1, h2, h3, button, checkbox:
body { background-color:#fbf7e4; font-family:Verdana, Geneva, sans-serif; margin-left:20px; color:#8e001c; } h1 { background-color:#8E001C; color:#e7e8d1; font-family:"Arial Black", Gadget, sans-serif; text-align:center; } h2 { background-color:black; color:white; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; margin-left:5px; } h3 { background-color:black; color:white; font-family:"Trebuchet MS", Calibri, Helvetica, sans-serif; text-align:right; } #button { height: 50px; width: 150px; } #checkbox { height: 50px; width: 50px; } - В папку img добавьте три небольших изображения, которые потребуются для оформления создаваемой для заказа товаров страницы:
Новое содержимое обозревателя решений с добавленными изображениями:
- Замените содержимое главного файла проекта - index.html (полностью удалите старое содержимое) новым кодом разметки, содержащим элемент <style> для связи с созданной таблицей стилей index.css, а также теги <body>, <h1>, <h2> и <h3>, соответствующие правилам таблицы стилей. Новый код разметки страницы index.html:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/index.css"> <title>Shop</title> </head> <body> <h1> Простейший магазин</h1> <h2> <img src="img/tab.jpg" width="20" height="20"> <a href="Product.html"> Список товаров</a><br> <img src="img/tel.jpg" width="20" height="20"><a href="Basket.html"> Корзина</a><br> <img src="img/za.jpg" width="20" height="20"> <a href="Like.html"> Заказы</a><br> </h2> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> app.initialize(); </script> </body> </html>Приведенная разметка содержит обращения к трем, пока отсутствующим, страницам: Product.html, Basket.html и Like.html. Ее можно протестировать пока без этих страниц. Скриншот запуска приложения на мобильном устройстве Windows Phone:
- Добавьте в папку www три новые страницы, соответствующие гиперссылкам "Список товаров", "Корзина", "Заказы":
- Product.html - будет выдавать список товаров и давать пользователю возможность выбрать товары для корзины, используя флажки; сохранит данные указанных пользователем товаров из корзины в постоянном хранилище localStorage.
- Basket.html - загрузит (прочитает) сохраненные в localStorage данные об отобранных в корзину товарах и выдаст их список.
- Like.html - даст пользователю возможность ввести название фирмы - производителя, которой будет отправлен заказ, а также ввести характеристики заказа. Введенные данные будут сохраняться во временном хранилище sessionStorage только на время работы приложения.
Дмитрий Белов
