Framework Javascriptpara desarrollo webmóvilRaúl Jiménez - @hhkaos
Lo que vamos a hacerbit.ly/IymjV0
Templates
Templates
Templates
Para el diseño usa
Comandossencha generate app [NOMBRE]sencha generate controller [NOMBRE]compass compile resources/sass/sencha app build pro...
Creando el esqueleto (generate app)
Estructura de la App./app.js:Define las vistas de la aplicación y los controladoresExt.application({   controllers: ["Main...
Definimos el menú./app/view/Main.js:Ext.define("PideCurso.view.Main", {   extend: Ext.tab.Panel,   config: {           tab...
Creamos una vista estática./app/view/Home.jsExt.define(GS.view.Home,{   extend: Ext.Panel,   xtype: homepanel,   config:{ ...
Creamos un formulario de contacto./app/view/Contact.jsExt.define(GS.view.Contact,{    extend: Ext.form.Panel,...    config...
Creamos una vista dinámica
Añadimos el controlador./app/controller/Main.js:sencha generate controller MainExt.application({   controllers: ["Main"], ...
Minimizar hoja de estilos/resources/css/app.css    Antes: 435 KB    Después de ejecutar: compass compile resources/sass/  ...
Minimizar para producción (build production)
Sencha touch - Proceso básico de desarrollo
Upcoming SlideShare
Loading in …5
×

Sencha touch - Proceso básico de desarrollo

1,930 views
1,716 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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,930
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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)

×