- •Учебно-исследовательская работа
- •Оглавление
- •1.Введение Зачем нужны мобильные приложения и кто их делает
- •2.Основная часть
- •2.1 Описание проекта ненативного приложения для PhoneGap и Exlipse
- •2.2.1 Html5 и его отличия от ранних версий
- •2.2.2 Css3 и её отличия от более ранних версий
- •2.2.3 Краткий обзор языка js и библиотеки jQuery
- •2.2.4 Фреймворки и их отличия
- •2.2.5 Фреймворк jQueryMobile
- •2.3 Написание ненативного приложения
- •2.3.1 Определение минимального функционала
- •2.3.2 Первый прототип интерфейса
- •2.3.3 Отрисовка экранов и настройка интерактивности
- •2.3.4 Написание кода
- •2.3.4.1 Html5
- •2.3.5 Отладка приложения
- •2.3.6 Сборка приложения под мобильные устройства
- •2.4 Размещение приложения на специализированных сервисах
- •3.Заключение
- •4.Список литературы
2.3.4 Написание кода
Весь код приложения составляет более 15 000 строк, поэтому я приведу общую модель построения и наиболее важные моменты.
2.3.4.1 Html5
Рассмотрим подключаемые файлы:
<!DOCTYPE html>
<html>
<head>
<title>inAtom version 1.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Подключение библиотеки jQuery
<script src="js/jQuery2.0.3/jquery2.0.3.js"></script>
Подключение freimwork jQueryMobile
Важно! Обязательно подключение именно в таком порядке, иначе произойдёт пересечение методов двух смежных библиотек!
<script src="js/jQueryMobile/jquery.mobile-1.3.2.min.js"></script>
Подключение файла стилей фреймворка
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
Подключение общего файла стилей приложения
<link rel="stylesheet" href="css/style.css">
Подключение общего файла скриптов для приложения
<script src="js/javascript.js"></script>
Подключение json файла для хранения данных о пользователе, его учётных записей и др.
<script src="js/user.js"></script>
Подключение json файла для хранения данных о материалах, доступа пользователей к этим материалам и др.
<script src="js/database.js"></script>
Подключение общего файла событий – иерархия событий довольно трудна, поэтому я принял решение вынести её из общего файла скриптов приложения. Это простой js код и он имеет право хранится в общем файле скриптов приложения.
<script src="js/swipe_events.js"></script>
</head>
Рассмотрим блочную модель html кода:
<body>
<div id="layer_0_start">
<img src="obj/rosatom_logo.png">
</div>
<div id="layer_signin">
<h1>
<img src="obj/inAtom_logo.png">
</h1>
<ul id="user_listwiev">
</ul>
<div id="user_signin_form" style="display: none;">
<form>
…
</form>
<img id="user_signin_form_submit" src="obj/sinhronization.png">
</div>
</div>
<div id="layer_1_menu">
<ul id="theme">
</ul>
</div>
<div id="layer_2_resume">
<div id="user_info">
…
</div>
…
</div>
<div id="layer_3_fragment">
…
<h1>
<img id="swipe_btn_left" src="obj/swipe_left.png">
<img id="swipe_btn_left_2" src="obj/inAtom_logo.png">
<img id="swipe_btn_right" src="obj/swipe_right.png" style="float: right;">
</h1>
…
<ul id="course">
…
</ul>
<div id="course_info">
…
</div>
<ul id="menu_panel">
<li>
<img src="obj/save_in_device.png">
<p>Загрузить</p>
</li>
…
</ul>
…
</div>
</body>
Можно наблюдать, что для вёрстки используется блочная модель, преимущественно использующая теги <div> и <ul>. Управление блоками происходит через атрибутыid.Classне используется, т.к. скорость отзыва у этого атрибута меньше, чем уid. Тег <ul> имеет отступы по условию, которые необходимо устранить вCSSкоде.
2.3.4.2 CSS3
Рассмотрим кусок код таблицы стилей:
body {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
overflow: hidden;
}
body p, h1, h2, h3, h4, h5, h6 {
text-shadow: none;
}
#layer_0_start, #layer_signin, #layer_1_menu, #layer_2_resume, #layer_3_fragment {
position: absolute;
display: none;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
#layer_0_start {
background: #FFF;
display: block;
z-index: 1000;
}
#layer_0_start img {
position: relative;
display: block;
left: calc(50% - 240px);
width: 480px;
}
#layer_signin {
background: rgba(255, 255, 255, 1);
display: block;
overflow-x: scroll;
z-index: 990;
}
…
Элемент, к которому применяются стили, можно указать тремя типами:
Тег или последовательность тегов
Индификатор (id)
Класс (class)
Типы можно смешивать, последовательностью можно управлять с помощью различных селекторов типа вложенности (<, >), последовательности (+), псевдоселекторов атрибутов ([type= “text”]), местонахождения (last-child,nth-child(2n),before) и др.
Стили контролируют абсолютно все параметры элемента, и, могут даже, переопределить назначение элемента, прикреплённое к нему стандартами HTML, но делать этого не советуют, т.к. код становится абсолютно нечитаемый.