Спонсор: Microsoft
Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 314 / 17 | Длительность: 11:36:00
Специальности: Программист
Практическая работа 8:

Работа с данными в памяти мобильного устройства

< Лекция 10 || Практическая работа 8: 1234 || Лекция 11 >
Аннотация: На этом занятии разрабатывается мобильный виджет с временным и долговременным хранением данных непосредственно на мобильном устройстве с использованием контейнеров sessionStorage и localStorage. Виджет содержат фрагмент заказа товаров из виртуального магазина.

Ход выполнения:

  1. Создайте проект Cordova с произвольным именем, например, Storage.
  2. Замените содержимое таблицы стилей файла 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;
    }
  3. В папку img добавьте три небольших изображения, которые потребуются для оформления создаваемой для заказа товаров страницы:
    za.jpg

    za.jpg
    tab.jpg

    tab.jpg
    tel.jpg

    tel.jpg

    Новое содержимое обозревателя решений с добавленными изображениями:

  4. Замените содержимое главного файла проекта - 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:

  5. Добавьте в папку www три новые страницы, соответствующие гиперссылкам "Список товаров", "Корзина", "Заказы":
    • Product.html - будет выдавать список товаров и давать пользователю возможность выбрать товары для корзины, используя флажки; сохранит данные указанных пользователем товаров из корзины в постоянном хранилище localStorage.
    • Basket.html - загрузит (прочитает) сохраненные в localStorage данные об отобранных в корзину товарах и выдаст их список.
    • Like.html - даст пользователю возможность ввести название фирмы - производителя, которой будет отправлен заказ, а также ввести характеристики заказа. Введенные данные будут сохраняться во временном хранилище sessionStorage только на время работы приложения.
< Лекция 10 || Практическая работа 8: 1234 || Лекция 11 >
Дмитрий Белов
Дмитрий Белов

Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле
for (i = 0; i < 3; i++) {
for (j = 0; j < 4; j++) {
sx = 300 * i; sy = 350 * j;
contextNow.drawImage(img, sx, sy);}
поставить точку останова, то при запуске отладки проекта точка становится пустой окружностью с сообщением: В настоящий момент попадание в точку останова не произойдет. Нет загруженных символов для этого документа. Как все-таки создать точку останова и пройти по шагам весь код?

Александр Бут-Гусаим
Александр Бут-Гусаим
Россия, Тула
Виктор Ефремов
Виктор Ефремов
Россия