17
Framework Javascript para desarrollo web móvil Raúl Jiménez - @hhkaos

Sencha touch - Proceso básico de desarrollo

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Sencha touch - Proceso básico de desarrollo

Framework Javascript para desarrollo web móvil

Raúl Jiménez - @hhkaos

Page 2: Sencha touch - Proceso básico de desarrollo

Lo que vamos a hacer

bit.ly/IymjV0

Page 3: Sencha touch - Proceso básico de desarrollo

Templates

Page 4: Sencha touch - Proceso básico de desarrollo

Templates

Page 5: Sencha touch - Proceso básico de desarrollo

Templates

Page 6: Sencha touch - Proceso básico de desarrollo

Para el diseño usa

Page 7: Sencha touch - Proceso básico de desarrollo
Page 8: Sencha touch - Proceso básico de desarrollo

Comandos

sencha generate app [NOMBRE]

sencha generate controller [NOMBRE]

compass compile resources/sass/

sencha app build production

Page 9: Sencha touch - Proceso básico de desarrollo

Creando el esqueleto (generate app)

Page 10: Sencha touch - Proceso básico de desarrollo

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'],...

});

Page 11: Sencha touch - Proceso básico de desarrollo

Definimos el menú

./app/view/Main.js:

Ext.define("PideCurso.view.Main", {extend: 'Ext.tab.Panel',config: { tabBarPosition: 'bottom', items: [

{xtype: 'homepanel'},...],

}});

Page 12: Sencha touch - Proceso básico de desarrollo

Creamos una vista estática

./app/view/Home.js

Ext.define('GS.view.Home',{extend: 'Ext.Panel',xtype: 'homepanel',config:{

...html: ['<h1>...']

}});

Page 13: Sencha touch - Proceso básico de desarrollo

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

});

Page 14: Sencha touch - Proceso básico de desarrollo

Creamos una vista dinámica

Page 15: Sencha touch - Proceso básico de desarrollo

Añadimos el controlador

./app/controller/Main.js: sencha generate controller Main

Ext.application({controllers: ["Main"],...views: ['Main','Home','Contact','Blog'],...

});

Page 16: Sencha touch - Proceso básico de desarrollo

Minimizar hoja de estilos/resources/css/app.css

Antes: 435 KB

Después de ejecutar: compass compile resources/sass/

186.1 KB

Page 17: Sencha touch - Proceso básico de desarrollo

Minimizar para producción (build production)