|
Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле |
Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 337 / 28 | Длительность: 11:36:00
Специальности: Программист
Лекция 10:
Работа с локальными данными, хранящимися в памяти мобильного устройства
Второй пример, содержащий средства рассматриваемого API в Cordova - приложении. В нем также используется контейнер localStorage для сохранения данных (имя пользователя, его хобби, страна проживания). Но в отличие от первого примера, данные в нем вводятся с виртуальной клавиатуры мобильного устройства и путем установки значений в переключателях. Разметка страницы, содержащей тег <form> для общения с пользователем, имеет вид:
<html lang="ru"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/my.css" />
<script type="text/javascript" src="js/my_API.js"></script>
<title>Долговременное хранение</title>
</head>
<body>
<article>
<header>
<h3>Учет увлечений</h3>
</header>
<section>
<form name="interest">
Имя <input name=userName placeholder="Введите имя">
<br>
<div id="hobbyTable">
<section id="getHobby">
<fieldset>
<legend>Любимое увлечение?</legend>
<label>
<input type=radio name=hobby value="Чтение">
Чтение</label>
<br>
<label>
<input type=radio name=hobby value="Путешествия">
Путешествия</label>
<br>
<label>
<input type=radio name=hobby value="Театр">
Театр </label>
<br>
<label>
<input type=radio name=hobby value="Балет">
Балет</label>
<br>
<label>
<input type=radio name=hobby value="Ралли внедорожников">
Ралли внедорожников</label>
<br>
</fieldset>
</section>
</div><br>
Страна проживания
<br><input type=text name=resState placeholder="Страна проживания">
<br>
<input type=button onClick="StorageMaster.setRegistration()" value="Сохранить">
<input type=button onClick="StorageMaster.getReg()" value="Найти"> <br>
<input type=button onClick="StorageMaster.clearReg()" value="Очистить форму">
</form>
</section>
<br>
<pre id="profile"></pre>
</article>
</body>
</html>Таблица стилей данной страницы (файл "css/my.css" ):
body{
background-color:#F2EBC7;
color:#962D3E;
font-family:Verdana, Geneva, sans-serif;
font-size:6px;
}
h3 {
color:#979C9C;
font-size:8px;
}
fieldset {
color:#348899;
}
#hobbyTable {
display:table;
}
#getHobby {
display:table-cell;
width:155px;
}
#profile {
display:table-cell;
background-color: #979C9C;
padding: 3px;
width:150px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:24px;
}Функции, добавленные в файл "js/my_API.js", содержащие методы объекта StorageMaster для работы с локальным контейнером:
StorageMaster = new Object();
//Сохраняем в контейнере данные формы interest
StorageMaster.setRegistration = function () {
this.hobbyNow = "";
this.topCount = document.interest.elements.length;
for (var count = 0; count < this.topCount; count++) {
if (document.interest.elements[count].checked) {
this.hobbyNow = document.interest.hobby[count - 2].value;
}
}
localStorage.setItem("uName", document.interest.userName.value);
localStorage.setItem("uHobby", this.hobbyNow);
localStorage.setItem("uState", document.interest.resState.value);
}
//Получаем значения из контейнера
StorageMaster.getReg = function () {
userProfile = "Данные о пользователе:\n";
nameNow = localStorage.getItem("uName") + "\n";
hobbyNow = localStorage.getItem("uHobby") + "\n";
stateNow = localStorage.getItem("uState") + "\n";
fileLength = localStorage.length + " записи о пользователе";
this.profile = userProfile + nameNow + hobbyNow + stateNow + fileLength;
document.getElementById("profile").innerHTML = this.profile;
}
//Очищаем локальное хранилище
StorageMaster.clearReg = function () {
localStorage.clear();
alert("Локальное хранилище очищено");
}Одной из особенностей данного примера является использование переключателей для передачи данных на хранение. Переключатели играют важную роль в мобильных устройствах, упрощая задачу выбора пользователем нужных вариантов.
Результат сохранения данных, выбранных и введенных пользователем во время работы Cordova - приложения (кадры соответствуют нажатиям на кнопки "Сохранить", "Найти", "Очистить форму"):
Дмитрий Белов