Construir una aplicacin mvil de titanio pizza Orden: Seleccin de la corteza parte 1

En esta serie de tutoriales de varias partes, voy a estar enseando cmo construir una aplicacin mvil de titanio de principio a fin. En concreto, usted aprender cmo construir una aplicacin de Pizza Shop que permitir a los clientes para pedir una pizza de encargo en el camino. En este tutorial, voy a demostrar cmo configurar el proyecto y crear una "Seleccin de la corteza" de la pantalla. Paso 1: Crear un proyecto nuevo Abre de titanio y crear un proyecto nuevo mvil. Ahora es un buen momento para seguir adelante y descargar el archivo zip adjuntos a este mensaje tambin. El archivo zip adjuntos a este mensaje contiene una subcarpeta llamada "imgenes". Una vez que hayas creado tu proyecto vaco, coloque la carpeta "Imgenes" en su nuevo proyecto de "recursos" carpeta. Mientras que dentro de los "recursos" de carpetas, siga adelante y crear una nueva subcarpeta llamada "main_windows", as como una subcarpeta llamada "incluye". Paso 2: Editar App.js Vaya a la pgina de Recursos / archivo app.js. Hay un montn de cosas en este archivo ya que no necesitamos. Sigue adelante y quita todo y sustituirlo por el siguiente:

view plaincopy to clipboardprint? 1. Titanium.UI.setBackgroundColor('#8C0221'); 2. 3. //-- Create our main window that will contain all our sub windows 4. var main = Ti.UI.createWindow({ 5. url:'main_windows/main.js', 6. height:Ti.Platform.displayCaps.platformHeight, 7. width:Ti.Platform.displayCaps.platformWidth, 8. fullscreen:true, 9. navBarHidden:true 10. }); 11. main.open();

Lo que hicimos aqu se encuentra nuestro color de fondo, hizo una nueva ventana llamada "main", y luego la abri. Principal mantendr la totalidad de nuestras ventanas como sub costras y coberturas. Aviso de la propiedad URL en la ventana. En la carpeta de recursos, hacer una nueva carpeta llamada "main_windows" si no lo ha hecho y llam a un nuevo archivo de JS main.js. La propiedad URL le dice al compilador que utilice main.js como nuestra ventana. Si te saltas esta parte, titanio generar un error feo rojo en el emulador. Paso 3: Adicin de un fondo y un reloj Si an no lo ha hecho un archivo main.js y lo ha guardado en la carpeta main_windows, hgalo ahora. Main.js abierto y aadir lo siguiente:

view plaincopy to clipboardprint? 1. var win = Ti.UI.currentWindow;

2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12.

//-- 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');

Si usted no ha creado una "incluye" la carpeta en la carpeta de recursos, lo hagan ahora. A continuacin, cree un nuevo archivo llamado JS clock.js. Gurdelo en la "incluye" la carpeta y aadir lo siguiente: view plaincopy to clipboardprint? 1. var time = Ti.UI.createLabel({ 2. text:'', 3. font:{ 4. fontFamily:'Verdana', 5. fontWeight:'bold', 6. fontSize:14 7. }, 8. color:'#fff', 9. shadowColor:'#333', 10. shadowOffset:{x:1,y:1}, 11. textAlign:'right', 12. width:Ti.Platform.displayCaps.platformWidth, 13. height:20, 14. top:45, 15. left:-13 16. }); 17. 18. function getFormattedTime() 19. { 20. var amPM = ''; 21. var d = new Date(); 22. var currentHour = d.getHours(); 23. 24. if (currentHour < 12) 25. { 26. amPM = 'AM'; 27. } 28. else 29. { 30. amPM = 'PM'; 31. } 32. 33. if (currentHour == 0) 34. {

35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54.

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);

As que lo que hicimos fue crear tres sub ventanas, poner nuestro fondo e incluye un reloj que se actualiza cada 5 segundos. La razn para el reloj es nuestra aplicacin est en modo de pantalla completa, por lo que el dispositivo por defecto la barra de estado y el tiempo no se mostrar. Seguir adelante y compilar. Su pantalla debe parecerse a la imagen de abajo:

Paso 4: Crear y abrir la ventana de costras Crear un nuevo archivo llamado JS crusts.js y guardarlo en la carpeta main_windows. Usted puede dejar en blanco por ahora. Volver a main.js. Tenemos que aadir un mtodo que abre la ventana costras, por lo que aadir lo siguiente a main.js

view plaincopy to clipboardprint? 1. function openCrust(e) 2. { 3. crusts.url = 'crusts.js'; 4. crusts.open(); 5. } 6. openCrust({});

Para explicar lo anterior: hemos hecho un mtodo llamado openCrust (), que establece la propiedad URL en la ventana de costras "crusts.js", y luego lo abrimos. La razn por la que estamos pasando un objeto vaco se debe a que ms adelante en esta serie de tutoriales, que en realidad se pasan los datos a este mtodo. No es necesario compilar todava como se ver ningn cambio visible. Paso 5: Editar el archivo de crusts.js Este archivo contendr una visin de desplazamiento que permite que el usuario pase a travs de las costras y servicios ofrecidos por nuestra tienda de pizza. Tambin vamos a aadir un botn al lado que llevar al usuario a la ventana de ingredientes:

view plaincopy to clipboardprint? 1. var win = Ti.UI.currentWindow; 2. 3. //-- Our crust views 4. var handMade = Ti.UI.createView({width:216,height:156,backgroundImage:'../images/crust/hand.pn g'}); 5. var natural = Ti.UI.createView({width:216,height:156,backgroundImage:'../images/crust/natural.png' }); 6. var panCrust = Ti.UI.createView({width:216,height:156,backgroundImage:'../images/crust/pan.png'}) ; 7. var stuffedCrust = Ti.UI.createView({width:216,height:156,backgroundImage:'../images/crust/stuffed Crust.png'}); 8. var thinNCrispy = Ti.UI.createView({width:216,height:156,backgroundImage:'../images/crust/thinNc rispy.png'}); 9. var returnCrust; 10. 11. //-- Crust reference 12. var crusts = [

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. 55. 56. 57. 58. 59. 60. 61. 62. 63.

{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. Choose a crust', 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:{

64. fontFamily:'Verdana', 65. fontWeight:'bold', 66. fontSize:16 67. }, 68. color:'#fff', 69. shadowColor:'#333', 70. shadowOffset:{x:1,y:1}, 71. textAlign:'center', 72. width:Ti.Platform.displayCaps.platformWidth, 73. height:20, 74. top:170, 75. opacity:0 76. }); 77. 78. //-- Next Button 79. var next = Ti.UI.createButton({ 80. width:137, 81. height:75, 82. backgroundImage:'../images/toppings_next.png', 83. top:385, 84. opacity:0 85. }); 86. 87. //-- If android OS, use the image property instead of backgroundImage (Ti SDK bug) 88. if (Ti.Platform.osname == 'android') 89. { 90. next.image = '../images/toppings_next.png'; 91. } 92. 93. next.addEventListener('click',function(e){ 94. Ti.App.fireEvent('toppings',{ 95. crust:crusts[scrollView.currentPage].title, 96. path:crusts[scrollView.currentPage].path 97. }); 98. }); 99. 100. win.add(scrollView); 101. win.add(crustTitleView); 102. win.add(crustType); 103. win.add(next); 104. 105. //-- Fade the scrollview in 106. scrollView.animate({ 107. opacity:1, 108. duration:500 109. }); 110. 111. //-- Fade the crust title in 112. crustTitleView.animate({ 113. opacity:1, 114. duration:500

115. 116. 117. 118. 119. 120. 121. 122. 123. 124. 125. 126. 127. 128. 129. 130. 131.

}); 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; });

As que hemos creado nuestros puntos de vista la corteza, una vista de desplazamiento, y aade los puntos de vista la corteza a la vista de desplazamiento. Tambin hemos creado un ttulo personalizado y un botn de siguiente. Seguir adelante y compilar. Su aplicacin debe parecerse a esto y tener la funcionalidad de escaneo. A medida que pase, te dars cuenta el ttulo por encima de la imagen de la pizza va a cambiar a lo que la corteza que se encuentra. Esto es gracias al "scroll" caso de que en nuestro punto de vista de desplazamiento.

Conclusin En la parte 1 de esta serie, hemos creado nuestra ventana principal que contiene las ventanas secundarias. Hemos creado un mtodo openCrust que se desarrollar a travs de esta serie de tutoriales. Es bastante bsico en estos momentos. Hemos creado nuestra primera pantalla esencial, la ventana de costras. Esto permite que el usuario pase a travs de las costras que ofrecemos. La siguiente, o ingredientes, el botn de disparo es un evento personalizado en el fondo. En la siguiente parte de este tutorial, vamos a ver de nuevo a nuestro archivo main.js y detectar el evento personalizado que nos permitir comenzar a aadir ingredientes a la pizza!