Sencha touch - Proceso básico de desarrollo
Upcoming SlideShare
Loading in...5
×
 

Sencha touch - Proceso básico de desarrollo

on

  • 2,315 views

Online Demo: http://rauljimenez.info/dev/sencha/

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

Statistics

Views

Total Views
2,315
Views on SlideShare
2,313
Embed Views
2

Actions

Likes
0
Downloads
9
Comments
0

1 Embed 2

http://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Sencha touch - Proceso básico de desarrollo Sencha touch - Proceso básico de desarrollo Presentation Transcript

  • 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 production
  • Creando el esqueleto (generate app)
  • Estructura de la App./app.js:Define las vistas de la aplicación y los controladoresExt.application({ controllers: ["Main"], ... views: [Main,Home,Contact,Blog], ...});
  • Definimos el menú./app/view/Main.js:Ext.define("PideCurso.view.Main", { extend: Ext.tab.Panel, config: { tabBarPosition: bottom, items: [ {xtype: homepanel},... ], }});
  • Creamos una vista estática./app/view/Home.jsExt.define(GS.view.Home,{ extend: Ext.Panel, xtype: homepanel, config:{ ... html: [<h1>...] }});
  • 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(); } ...});
  • Creamos una vista dinámica
  • Añadimos el controlador./app/controller/Main.js:sencha generate controller MainExt.application({ controllers: ["Main"], ... views: [Main,Home,Contact,Blog], ...});
  • Minimizar hoja de estilos/resources/css/app.css Antes: 435 KB Después de ejecutar: compass compile resources/sass/ 186.1 KB
  • Minimizar para producción (build production)