Хотите узнать, как использовать PhoneGap, но не знаете, с чего начать? Присоединяйтесь к нам, когда мы собираем вместе «Sculder», не только дань отличного научно-фантастического сериала, но и полноценное мобильное приложение для верующих в вас!
В последних двух частях мы установили Phonegap, запустили Hello World, а затем взглянули на некоторые функции, которые предлагает нам Phonegap. В следующих двух частях мы создадим наше приложение и рассмотрим некоторые проблемы, которые могут возникнуть при этом.
Планирование заявки
Прежде чем приступить к написанию кода, нам нужно немного спланировать. Таким образом, мы точно знаем, чего хотим добиться приложения, и можем получить представление о пользовательском опыте. Вы могли бы добиться некоторой замечательной работы, просто сразу нажимая на код (что я делаю все время), но даже небольшое предварительное планирование может иметь большое значение. Продумывание сценариев в вашей голове позволит вам решать проблемы на раннем этапе.
Во-первых, нам нужно знать, какими будут основные функции приложения, как к ним будут обращаться и как они будут использоваться. Приложение, которое мы собираемся создать, будет иметь следующие функции:
- Найти НЛО прицельно по местоположению
- Сделайте прицельный снимок
- Список щебетать канал наблюдения НЛО
Если вы хотите создавать каркасы для своих проектов, всегда полезно убедиться, что вы знаете, что вы хотите, чтобы ваше приложение делало, а также примерно то, как вы хотите, чтобы оно выглядело. Если приложение должно быть большим и иметь много функций, я бы сделал несколько каркасов, но в этом случае я думаю, что приложение маленькое, и поэтому мы можем разобраться с довольно простой функциональностью при его создании.
Если вы хотите создать каркас, есть несколько довольно хороших инструментов, которые могут вам помочь.
Mockingbird — это онлайн-инструмент, где вы можете создавать каркасы в браузере. Вы можете попробовать это здесь
Balsamiq — это приложение Adobe Air с множеством шаблонов и элементов. Он имеет отрывочный стиль, очень похожий на Mockingbird. Вы можете скачать его здесь .
Omnigraffle — это приложение для Mac, которое вы можете получить 14-дневную бесплатную пробную версию здесь . Omnigraffle — мой личный фаворит, и на Graffletopia есть множество шаблонов, которые вы можете использовать.
Разработка приложения
Внешний вид — важный аспект любого приложения. Когда речь идет о мобильных приложениях, это область, в которой многие часто ошибаются (в основном из-за отсутствия понимания). Я не дизайнер, и я не претендую на то, чтобы быть им, поэтому, если у меня нет дизайнера под рукой, я обычно просто проектирую в браузере, когда кодирую (или на устройстве в этот случай).
Если вы хотите убедиться, что ваше приложение выглядит и чувствует себя хорошо, чтобы использовать (а вы не один) нанять его! Как разработчик, хорошие дизайнеры стоят денег. Хотя вы, возможно, не захотите раскошелиться на то, что вы можете сделать сами, лучше всего, чтобы кто-то, кто разбирается в дизайне, сделал это для вас. Ваше приложение будет в сто раз лучше!
На Mobiletuts + было несколько отличных учебных пособий по дизайну, которые дадут вам отличное понимание того, что требуется при погружении в дизайн для мобильных устройств.
Одним из наиболее важных соображений для вашего дизайна является количество изображений, которые вы используете. Если ваш дизайн потребует от вас нарезать PSD-файлы и использовать много изображений — что-то не так — мы хотим сделать как можно больше с помощью CSS, и поскольку мы создаем для довольно современных браузеров, мы можем использовать возможности многих новые методы CSS3 для желаемого результата. Когда вы начинаете использовать много изображений, это начинает влиять на производительность приложения. Когда нам нужно использовать изображения, что, скорее всего, мы должны создать спрайт (один файл изображения, содержащий все наши изображения) для сохранения HTTP-запросов. Также возможно кэшировать изображения на устройстве или использовать локальное хранилище.
Разметка для мобильных
Сейчас самое время заняться кодированием HTML, CSS и Javascript для нашего приложения.
Мы начнем с некоторого довольно простого HTML.
|
01
02
03
04
05
06
07
08
09
10
11
|
<!doctype html>
<html>
<head>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0″>
<meta name=»apple-mobile-web-app-capable» content=»yes» />
<title>Sculder</title>
</head>
<body>
</body>
</html>
|
Поддержка CSS на мобильных устройствах — это хорошо, но не очень. Несмотря на то, что поддерживается много общих стилей, есть и некоторые «гоча». Одним из моих любимых ресурсов для проверки поддержки является caniuse.com . Хотя сайт не включает в себя все браузеры для мобильных устройств, это полезная ссылка.
Создайте новую пустую таблицу стилей и включите ее в заголовок вашего HTML. Как вы уже можете делать с приложениями для настольного браузера, настройте некоторые базовые стили сброса.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
html, body{
margin: 0;
padding: 0;
border: 0;
}
body {
font-family:Arial, sans-serif;
line-height:1.5;
font-size:16px;
background: #fff;
padding:5px;
color: #000;
word-wrap: break-word;
-webkit-text-size-adjust: none;
}
h1, h2, h3, h4, h5, h6{ font-weight: normal;
p img { float: left;
img { border: 0;
|
Далее мы собираемся добавить несколько базовых HTML — заголовок и несколько элементов управления вкладками.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<header>
<h1>Sculder</h1>
</header>
<div id=»wrapper»>
<div id=»main-content»>
</div>
</div>
<footer>
</footer>
|
Сначала я задаю цвет фона, а затем задаю стиль верхнего и нижнего колонтитула. Я собираюсь пойти дальше и выложить их довольно средним способом, закрепив их сверху и снизу экрана и используя iScroll, чтобы дать нам возможность преодолеть отсутствие поддержки position:fixed в большинстве устройств.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
/* Main Styles */
body{
background: #222;
}
header{
top:0;
height:45px;
}
footer {
bottom:0;
height:48px;
background-color:#c27b00;
border-top:1px solid #eee;
}
header, footer{
background-color:#deb500;
padding:0;
position:absolute;
z-index:2;
font-size:20px;
width:100%;
text-align:center;
color:#f3f3f3;
font-weight:bold;
text-shadow:0 -1px 0 rgba(0,0,0,0.5);
line-height:45px;
}
h1{
margin:0;
text-transform: uppercase;
}
#wrapper {
position:absolute;
z-index:1;
top:45px;
width:100%;
overflow:auto;
}
#main-content {
position:absolute;
z-index:1;
width:100%;
padding:0;
}
|
Далее мы собираемся скачать iScroll 4 отсюда и включить файл iscroll-lite.js . Это дает нам базовую функциональность, которая нам понадобится. Мы также app.js файл app.js для обработки всех наших функций JavaScript. Включите эти файлы в index.html вашего index.html .
|
1
2
3
|
<link rel=»stylesheet» href=»css/style.css»>
<script src=»js/iscroll-lite.js»></script>
<script src=»js/app.js»></script>
|
В нашем файле Javascript нам нужно инициализировать iscroll.
|
1
2
3
4
5
6
|
var theScroll;
function scroll(){
theScroll = new iScroll(‘wrapper’);
}
document.addEventListener(‘DOMContentLoaded’, scroll, false);
|
Теперь мы собираемся добавить нашу панель вкладок в нижний колонтитул.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<ul id=»tab-bar»>
<li>
<a href=»#»>Map</a>
</li>
<li>
<a href=»#»>Camera</a>
</li>
<li>
<a href=»#»>Twitter</a>
</li>
</ul>
|
Мы собираемся стилизовать нашу панель вкладок так, чтобы каждый элемент занимал треть доступного пространства.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
#tab-bar{
margin:0;
padding:0;
}
#tab-bar li {
display: inline;
float:left;
width: 33.333%;
}
#tab-bar a {
color: #cdcdcd;
display: block;
font-weight: bold;
overflow: hidden;
position: relative;
text-align: center;
text-decoration: none;
-webkit-touch-callout:none;
}
|
Все это довольно обычный CSS, который вы можете использовать на веб-странице. Единственное, что может быть для вас странным, это -webkit-touch-callout:none . Это правило должно останавливать действие по умолчанию, когда пользователь удерживает ссылку.
Вот и все, что мы собираемся делать с панелью вкладок, но вы можете добавить значки к своим, как и большинство приложений. Просто не забудьте убедиться, что вы используете спрайты для своих изображений, чтобы минимизировать снижение производительности.
Paging
Теперь, когда у нас есть готовый скелет нашего приложения, мы можем рассмотреть его в приложении. Есть несколько хороших способов сделать это. Один из них заключается в том, чтобы загрузить все заранее и затем спрятать страницы, которые мы не хотим показывать вначале, а затем, щелкнув ссылку, мы можем использовать CSS, чтобы открыть новый контейнер. Другой вариант — использовать Ajax и сделать Ajax-запрос для файла HTML, а затем вставить его в поле зрения. Поскольку это относительно небольшое приложение, нет ничего плохого в том, чтобы загружать все заранее и использовать CSS для основной обработки страниц, как это делает jQuery Mobile.
Сначала мы настроим несколько страниц внутри нашего основного контейнера.
|
01
02
03
04
05
06
07
08
09
10
11
|
<div id=»pages»>
<div id=»map» class=»current»>
</div>
<div id=»camera»>
</div>
<div id=»twitter»>
</div>
</div>
|
Затем убедитесь, что ссылки href соответствуют этим.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<ul id=»tab-bar»>
<li>
<a href=»#map»>Map</a>
</li>
<li>
<a href=»#camera»>Camera</a>
</li>
<li>
<a href=»#twitter»>Twitter</a>
</li>
</ul>
|
Теперь мы будем скрывать все страницы и просто отображать страницу с current классом.
|
1
2
3
4
5
6
7
|
#pages > div {
display: none;
}
#pages > div.current {
display: block;
}
|
Далее мы должны погрузиться в некоторый JavaScript. Я собираюсь пойти дальше и использовать jQuery для остальной части проекта (не для jQuery mobile). Если хотите, вы можете jQuerify iScroll init (или нет). Убедитесь, что вы добавили уменьшенную версию jQuery в ваш каталог JS.
Во-первых, я собираюсь привязать щелчок к якорям на панели вкладок, так как мы используем jQuery 1.7, мы можем использовать новую .on() . Затем мы предотвратим действие ссылки по умолчанию, сохраним ссылку на nextPage ссылку в переменной nextPage , удалим current класс с текущей страницы и, наконец, добавим класс на нажатую страницу.
|
1
2
3
4
5
6
|
$(‘#tab-bar a’).on(‘click’, function(e){
e.preventDefault();
var nextPage = $(e.target.hash);
$(«#pages .current»).removeClass(«current»);
nextPage.addClass(«current»);
});
|
Теперь у вас будет несколько основных страниц, так как divs контента теперь будет скрываться и показываться при нажатии на ссылки.
Это и будет работать абсолютно нормально, но чтобы добавить немного больше к подкачке, мы собираемся использовать немного CSS и сделать переход между страницами более приятным с базовым постепенным исчезновением.
Во-первых, нам нужно убедиться, что наши страницы расположены таким образом, что дает нам некоторый контроль над их отображением. Добавьте следующий CSS.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
#pages{
position:relative;
}
/* Update this style */
#pages > div {
display: none;
position: absolute;
top:0;left:0;
width:100%;
}
|
Теперь мы собираемся использовать CSS-анимацию для анимации перехода страницы. Сначала мы начнем с некоторых общих настроек для функции анимации и времени.
|
1
2
3
4
|
.in, .out {
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 400ms;
}
|
Мы устанавливаем ключевые кадры для анимации ключевых кадров.
|
1
2
3
|
@-webkit-keyframes fade-in {
from { opacity: 0;
}
|
Наконец, мы устанавливаем Z-индекс, чтобы убедиться, что страница, которую мы только что исчезли, находится сверху.
|
1
2
3
4
5
6
7
8
|
.fade.in {
-webkit-animation-name: fade-in;
z-index: 5;
}
.fade.out {
z-index: 0;
}
|
Теперь нам нужно добавить еще немного JavaScript, чтобы добавлять и удалять CSS-классы по клику. Сначала нам нужна функция, которая примет параметр, который будет страницей для навигации, затем она добавит классы, необходимые для перехода на новую страницу, и webkitAnimationEnd функцию с webkitAnimationEnd , после чего будут удалены необходимые классы. Функция выглядит следующим образом.
|
1
2
3
4
5
6
7
8
9
|
function page(toPage) {
var toPage = $(toPage),
fromPage = $(«#pages .current»);
toPage.addClass(«current fade in»).one(«webkitAnimationEnd», function(){
fromPage.removeClass(«current fade out»);
toPage.removeClass(«fade in»)
});
fromPage.addClass(«fade out»);
}
|
Если вы никогда раньше не видели метод jQuery .one() , ознакомьтесь с документацией — это просто способ привязки, а затем отмены привязки.
Если вы сейчас проводите тестирование на своем устройстве, вы заметите, что если вы нажмете на ссылку текущей страницы, она исчезнет. Нам нужно вставить оператор if прежде чем мы запустим нашу функцию страницы, чтобы убедиться, что мы не на текущей странице — если мы есть, мы можем просто выйти из функции.
|
01
02
03
04
05
06
07
08
09
10
11
12
|
function page(toPage) {
var toPage = $(toPage),
fromPage = $(«#pages .current»);
if(toPage.hasClass(«current») || toPage === fromPage) {
return;
};
toPage.addClass(«current fade in»).one(«webkitAnimationEnd», function(){
fromPage.removeClass(«current fade out»);
toPage.removeClass(«fade in»)
});
fromPage.addClass(«fade out»);
}
|
Теперь вы можете записать текст в каждый контейнер страницы и протестировать его на устройстве.
Вывод
Теперь мы приступили к созданию веб-приложения и начали работать с нашим макетом и пейджингом. В следующей части мы начнем создавать наши страницы, отлаживать их на мобильных устройствах и начать интеграцию с PhoneGap.