В этой серии статей, состоящей из нескольких частей, я научу вас, как создавать приложение Titanium Mobile от начала до конца. В частности, вы узнаете, как создать приложение Pizza Shop, которое позволит клиентам заказывать пиццу на ходу. В этом уроке я покажу, как настроить проект и создать экран «Crust Selection».
Шаг 1: Создайте новый проект
Откройте Titanium и создайте новый мобильный проект. Сейчас самое время пойти и скачать zip-файл, прикрепленный к этому сообщению. ZIP-файл, прикрепленный к этому сообщению, содержит подпапку с названием «images». Создав пустой проект, поместите папку «images» в папку «resources» вашего нового проекта. Находясь внутри папки «resources», создайте новую подпапку с именем «main_windows», а также подпапку с именем «includes».
Шаг 2: Редактировать App.js
Перейдите к файлу Resources / app.js. В этом файле уже есть много материала, который нам не нужен. Идите дальше и удалите все и замените его следующим:
|
01
02
03
04
05
06
07
08
09
10
11
|
Titanium.UI.setBackgroundColor(‘#8C0221’);
//— Create our main window that will contain all our sub windows
var main = Ti.UI.createWindow({
url:’main_windows/main.js’,
height:Ti.Platform.displayCaps.platformHeight,
width:Ti.Platform.displayCaps.platformWidth,
fullscreen:true,
navBarHidden:true
});
main.open();
|
Здесь мы установили цвет фона, создали новое окно с именем «main» и открыли его. Главное будет содержать все наши подокна, как корки и начинки.
Обратите внимание на свойство URL в окне. В папке «Ресурсы» создайте новую папку с именем «main_windows», если вы еще этого не сделали, и новый файл JS с именем main.js. Свойство URL указывает компилятору использовать main.js в качестве нашего окна. Если вы пропустите эту часть, Titanium выдаст ужасную красную ошибку в эмуляторе.
Шаг 3: Добавление фона и часов
Если вы еще не создали файл main.js и не сохранили его в папке main_windows, сделайте это сейчас. Откройте main.js и добавьте следующее:
|
01
02
03
04
05
06
07
08
09
10
11
12
|
var win = Ti.UI.currentWindow;
//— Create the sub windows
var crusts = Ti.UI.createWindow();
var toppings = Ti.UI.createWindow();
var details = Ti.UI.createWindow();
//— We set the background here since this wont change
win.backgroundImage = ‘../images/bg_main.png’;
//— Include our clock
Ti.include(‘../includes/clock.js’);
|
Если вы еще не создали папку «include» в папке ресурсов, сделайте это сейчас. Затем создайте новый файл JS с именем clock.js. Сохраните его в папку «includes» и добавьте следующее:
|
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
52
53
54
|
var time = Ti.UI.createLabel({
text:»,
font:{
fontFamily:’Verdana’,
fontWeight:’bold’,
fontSize:14
},
color:’#fff’,
shadowColor:’#333′,
shadowOffset:{x:1,y:1},
textAlign:’right’,
width:Ti.Platform.displayCaps.platformWidth,
height:20,
top:45,
left:-13
});
function getFormattedTime()
{
var amPM = »;
var d = new Date();
var currentHour = d.getHours();
if (currentHour < 12)
{
amPM = ‘AM’;
}
else
{
amPM = ‘PM’;
}
if (currentHour == 0)
{
currentHour = 12;
}
if (currentHour > 12)
{
currentHour = currentHour — 12;
}
var currentMinute = d.getMinutes();
currentMinute = currentMinute + »;
if (currentMinute.length == 1)
{
currentMinute = ‘0’ + currentMinute;
}
time.text = currentHour + ‘:’ + currentMinute + ‘ ‘ + amPM;
}
var clockInterval = setInterval(getFormattedTime,5000);
getFormattedTime();
win.add(time);
|
Итак, мы создали 3 подокна, установили фон и включили часы, которые обновляются каждые 5 секунд. Причина для часов в том, что наше приложение установлено в полноэкранный режим, поэтому строка состояния устройства и время по умолчанию отображаться не будут. Идите вперед и скомпилируйте. Ваш экран должен выглядеть как на картинке ниже:
Шаг 4: Создание и открытие окна Crusts
Создайте новый файл JS с именем crusts.js и сохраните его в папке main_windows. Вы можете оставить это поле пустым. Вернуться на main.js. Нам нужно добавить метод, который открывает наше окно, поэтому добавьте следующее в main.js
|
1
2
3
4
5
6
|
function openCrust(e)
{
crusts.url = ‘crusts.js’;
crusts.open();
}
openCrust({});
|
Чтобы объяснить вышесказанное: мы создали метод openCrust (), мы установили свойство url в нашем окне crts на «crusts.js», а затем открыли его. Причина, по которой мы передаем пустой объект, заключается в том, что позже в этой серии учебников мы фактически передадим данные этому методу. Вам пока не нужно компилировать, так как вы не увидите видимых изменений.
Шаг 5: Редактирование файла crusts.js
Этот файл будет содержать представление прокрутки, которое позволяет пользователю пролистывать различные корочки, предлагаемые нашим магазином пиццы. Мы также добавим следующую кнопку, которая приведет пользователя в окно начинки:
|
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
var win = Ti.UI.currentWindow;
//— Our crust views
var handMade = Ti.UI.createView({width:216,height:156,backgroundImage:’../images/crust/hand.png’});
var natural = Ti.UI.createView({width:216,height:156,backgroundImage:’../images/crust/natural.png’});
var panCrust = Ti.UI.createView({width:216,height:156,backgroundImage:’../images/crust/pan.png’});
var stuffedCrust = Ti.UI.createView({width:216,height:156,backgroundImage:’../images/crust/stuffedCrust.png’});
var thinNCrispy = Ti.UI.createView({width:216,height:156,backgroundImage:’../images/crust/thinNcrispy.png’});
var returnCrust;
//— Crust reference
var crusts = [
{title:’Hand Made’,path:’../images/crust/hand.png’},
{title:’Natural’,path:’../images/crust/natural.png’},
{title:’Pan Crust’,path:’../images/crust/pan.png’},
{title:’Stuffed Crust’,path:’../images/crust/stuffedCrust.png’},
{title:’Thin N Crispy Crust’,path:’../images/crust/thinNcrispy.png’}
];
//— Our scroll view that contains our crust views
var scrollView = Ti.UI.createScrollableView({
views:[handMade,natural,panCrust,stuffedCrust,thinNCrispy],
showPagingControl:true,
clipViews:false,
top:180,
left:30,
right:30,
height:180,
opacity:0
});
//— Crust title
var crustTitle = Ti.UI.createLabel({
text:’1.
font:{
fontFamily:’Verdana’,
fontWeight:’bold’,
fontSize:24
},
color:’#A90329′,
shadowColor:’#333′,
shadowOffset:{x:1,y:1},
textAlign:’left’,
width:Ti.Platform.displayCaps.platformWidth,
height:58,
left:10
});
//— Crust title background
var crustTitleView = Ti.UI.createView({
width:328,
height:58,
backgroundImage:’../images/crustHeaderBg.png’,
top:100,
left:-6,
opacity:0
});
crustTitleView.add(crustTitle);
//— Crust type label
var crustType = Ti.UI.createLabel({
text:’Hand Made’,
font:{
fontFamily:’Verdana’,
fontWeight:’bold’,
fontSize:16
},
color:’#fff’,
shadowColor:’#333′,
shadowOffset:{x:1,y:1},
textAlign:’center’,
width:Ti.Platform.displayCaps.platformWidth,
height:20,
top:170,
opacity:0
});
//— Next Button
var next = Ti.UI.createButton({
width:137,
height:75,
backgroundImage:’../images/toppings_next.png’,
top:385,
opacity:0
});
//— If android OS, use the image property instead of backgroundImage (Ti SDK bug)
if (Ti.Platform.osname == ‘android’)
{
next.image = ‘../images/toppings_next.png’;
}
next.addEventListener(‘click’,function(e){
Ti.App.fireEvent(‘toppings’,{
crust:crusts[scrollView.currentPage].title,
path:crusts[scrollView.currentPage].path
});
});
win.add(scrollView);
win.add(crustTitleView);
win.add(crustType);
win.add(next);
//— Fade the scrollview in
scrollView.animate({
opacity:1,
duration:500
});
//— Fade the crust title in
crustTitleView.animate({
opacity:1,
duration:500
});
crustType.animate({
opacity:1,
duration:500
});
//— Fade the next button in
next.animate({
opacity:1,
duration:500
});
//— Changes the crust type label text when the user scrolls
scrollView.addEventListener(‘scroll’,function(){
crustType.text = crusts[scrollView.currentPage].title;
});
|
Таким образом, мы создали наши представления коры, представление прокрутки и добавили представления коры к представлению прокрутки. Мы также создали собственный заголовок и следующую кнопку. Идите вперед и скомпилируйте. Ваше приложение должно теперь выглядеть так и иметь функцию смахивания. Когда вы проведете пальцем, вы заметите, что название над изображением пиццы изменится на ту, на которой вы находитесь. Это благодаря событию «прокрутка», которое мы добавили в наше представление прокрутки.
Вывод
В первой части этой серии мы создали главное окно, которое будет содержать наши подокна. Мы создали метод openCrust, который будет развиваться в этой серии руководств. Это довольно просто прямо сейчас. Мы создали наш первый существенный экран, окно корок. Это позволяет пользователю пролистывать корки, которые мы предлагаем. Следующая или начальная кнопка запускает пользовательское событие в фоновом режиме. В следующей части этого урока мы вернемся к нашему файлу main.js и послушаем пользовательское событие, которое позволит нам начать добавлять начинки в нашу пиццу!