Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sencha touch - Proceso básico de desarrollo

2,040 views

Published on

Online Demo: http://rauljimenez.info/dev/sencha/
Ejemplo simplificado del proceso de desarrollo de una aplicación muy sencilla con Sencha Touch

Published in: Education
  • Be the first to comment

  • Be the first to like this

Sencha touch - Proceso básico de desarrollo

  1. 1. Framework Javascriptpara desarrollo webmóvilRaúl Jiménez - @hhkaos
  2. 2. Lo que vamos a hacerbit.ly/IymjV0
  3. 3. Templates
  4. 4. Templates
  5. 5. Templates
  6. 6. Para el diseño usa
  7. 7. Comandossencha 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 controladoresExt.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.jsExt.define(GS.view.Home,{ extend: Ext.Panel, xtype: homepanel, config:{ ... html: [<h1>...] }});
  12. 12. Creamos un formulario de contacto./app/view/Contact.jsExt.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 MainExt.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)

×