Successfully reported this slideshow.

Sencha touch - Proceso básico de desarrollo

0

Share

Loading in …3
×
1 of 17
1 of 17

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Sencha touch - Proceso básico de desarrollo

  1. 1. Framework Javascript para desarrollo web móvil Raúl Jiménez - @hhkaos
  2. 2. Lo que vamos a hacer bit.ly/IymjV0
  3. 3. Templates
  4. 4. Templates
  5. 5. Templates
  6. 6. Para el diseño usa
  7. 7. Comandos sencha generate app [NOMBRE] sencha generate controller [NOMBRE] compass compile resources/sass/ sencha app build production
  8. 8. Creando el esqueleto (generate app)
  9. 9. Estructura de la App ./app.js: Define las vistas de la aplicación y los controladores Ext.application({ controllers: ["Main"], ... views: ['Main','Home','Contact','Blog'], ... });
  10. 10. Definimos el menú ./app/view/Main.js: Ext.define("PideCurso.view.Main", { extend: 'Ext.tab.Panel', config: { tabBarPosition: 'bottom', items: [ {xtype: 'homepanel'},... ], } });
  11. 11. Creamos una vista estática ./app/view/Home.js Ext.define('GS.view.Home',{ extend: 'Ext.Panel', xtype: 'homepanel', config:{ ... html: ['<h1>...'] } });
  12. 12. Creamos un formulario de contacto ./app/view/Contact.js Ext.define('GS.view.Contact',{ extend: 'Ext.form.Panel',... config:{ url: 'contact.php', items: [ ... xtype: 'textfield', name: 'name', label: 'Nombre' ,{ xtype: 'button', handler: function(){ this.up('contactForm').submit(); } ... });
  13. 13. Creamos una vista dinámica
  14. 14. Añadimos el controlador ./app/controller/Main.js: sencha generate controller Main Ext.application({ controllers: ["Main"], ... views: ['Main','Home','Contact','Blog'], ... });
  15. 15. Minimizar hoja de estilos /resources/css/app.css Antes: 435 KB Después de ejecutar: compass compile resources/sass/ 186.1 KB
  16. 16. Minimizar para producción (build production)

×