usando formularios en sencha touch

http://www.extjs.mx/2011/12/19/usando-formularios-en-sencha-touch/

La mayoria de las aplicaciones requieren datos de entrada por parte del usuario usando formularios. Los formularios en Sencha Touch son extensiones de los formularios nativos de HTML5, con opciones y validaciones adicionales para recolectar y enviar los datos, aunado a una manera facil y practica de colocarlos y agregarles estilos visuales.

Creando un formulario

Un Panel de formulario es una coleccion de campos que proporcionan una conveniente forma de capturar y cargar datos. Usualmente un formulario solo contiene un conjunto de capos que quieres desplegar, ordenados dentro de otros componentes con configuraciones similares a esta:

  1. Ext.create(‘Ext.form.Panel’, {
  2.     fullscreen: true,
  3.     items: [
  4.         {
  5.             xtype: ‘textfield’,
  6.             name : ‘nombre’,
  7.             label: ‘Name’
  8.         },
  9.         {
  10.             xtype: ‘emailfield’,
  11.             name : ‘email’,
  12.             label: ‘Email’
  13.         },
  14.         {
  15.             xtype: ‘passwordfield’,
  16.             name : ‘password’,
  17.             label: ‘Password’
  18.         }
  19.     ]
  20. });

Continuar leyendo “usando formularios en sencha touch”

paquete de datos de sencha touch

http://www.extjs.mx/2011/12/21/paquete-de-datos-de-sencha-touch/

El paquete de datos es responsable de cargar y almacenar datos en la aplicacion de Sencha Touch. La mayoria de procedimientos con este modulo de almacenamiento de informacion esta relacionado con los modelos, stores y proxies:

  • Modelo: Un modelo representa una unidad, una entidad que utiliza la aplicacion, por ejemplo, un usuario, un contacto, una direccion o un producto prodria ser un modelo. En principio, un modelo representa una coleccion de campos para constituir un objeto con datos
  • Store: Un store es una coleccion de instancias de modelos. Representa un arreglo de registros, pero tambien proporciona algunas capacidades como ordenar, filtrar, agrupar, asi como controlar posibles eventos sobre la coleccion.
  • Proxy: Un Proxi es responsable de cargar y almacenar los datos. Usualmente se crea un tunel de comunicacion ajax para traerlos desde un servidor y guardarlos en el store.

Stores y modelos

Es simple, un modelo solo es una definicion de campos y sus datos. Las cuatro principales partes de las que se compone un Ext.data.Model son Campos, Proxies, Asociaciones y Validaciones.

 

Continuar leyendo “paquete de datos de sencha touch”

usando componentes en sencha touch

http://www.extjs.mx/2011/12/21/usando-componentes-en-sencha-touch/

Que es un Componente?

La mayoria de las clases visuales con las que interactua un usuario con Sencha Touch son Componentes. Cada componente en Sencha Touch es una subclase de Ext.Component, lo que significa que tienen la capacidad de:

  • Desplegarse ellos mismos en la pagina usando un template
  • Mostrarse y esconderse en cualquier momento
  • Centrarse en la pantalla
  • Habilitarse y deshabilitarse

Tambien pueden hacer otras cosas como:

  • Flotar visualmente sobre otros componentes (ventanas, cajas de mensajes entre otros)
  • Cambiar de tamano y posicion en la pantalla con efectos visuales
  • Acoplarse con otros componentes dentro de ellos mismos (util para los toolbars)

Que es un contenedor?

Todos los componentes tienen las caracteristicas y capacidades arriba definidas, sin embargo, las aplicaciones se fabrican con muchos componentes, usualmente unos dentro de otros.Los contenedores son simplemente componentes, pero adicionalmente a las capacidades descritas con anterioridad, permiten contener un conjunto de otros componentes dentro de ellos mismos. Una aplicacion adecuadamente disenada, deberia tener un contenedor global llamado Viewport, que toma el espacio de toda la pantalla disponible.
Los Contenedores proporcionan funcionalidades extras:
• Agregar componentes en las configuraciones y en tiempo de ejecucion
• Remover Componentes hijos
• Especificar un Layout de acoplamiento
Los layouts determinan como se acoplaran los componentes hijos, las posiciones con respecto a la pantalla que deberan tomar. Hay diferentes layouts en Sencha Touch 2, cada uno de ellos para posicionar y colocar los componentes de acuerto a la estructura que tu necesites para desarrollar tu aplicacion.

Continuar leyendo “usando componentes en sencha touch”

usando layouts en sencha touch

http://www.extjs.mx/2011/12/21/usando-layouts-en-sencha-touch/

Los Layouts describen y especifican las proporciones y posiciones de los componentes en tu aplicacion. Por ejemplo, un campo de email en un formulario debe desplegar mensajes descriptivos de alerta al usuario a la izquierda, con un tamano en específico y las proporciones adecuadas para ajustarse a la pantalla.

HBox

El ejemplo anterior puede ser desplegado utilizando un layout hbox que tiene la capacidade de ser ajustable de acuerdo a los componentes que contenga dentro de el. Flex significa que divide el area o espacio disponible de acuerdo al espacio que puedan ocupar cada uno de ellos, de esta manera podemos ejemplificar con la siguiente imagen y codigo:

Continuar leyendo “usando layouts en sencha touch”

comenzando con secha touch

http://www.extjs.mx/2011/12/19/comenzando-con-secha-touch/

Herramientas necesarias

Aqui esta lo que se necesita para iniciar:

  • El paquete de desarrollo
  • Un servidor web corriendo en tu maquina local
  • Un moderno navegador web, se recomienda Chrome o Safari

Descarga y descomprime la ultima versión del SDK. Copia la carpeta descompresa en la raiz de tu servidor local. Si no tienes un servidor web o no estás seguro, te recomendamos usar uno tan sencillo como WAMP o MAMP.

Una vez puesto la carpeta en el lugar correcto, abre un navegador web y sitúate en http://localhost/sencha-touch-folder (o el equivalente a la carpeta de acuerdo a las configuraciones de tu servidor) y podrás desplegar la pagina inicial de bienvenida de Sencha Touch . Si todo marcha a la perfección, estás listo para comenzar a trabajar con tu primer aplicación.

Iniciando con tu primer aplicación

Las aplicaciones en Sencha Touch funcionan mejor cuando siguen estructuras simples que el mismo framework proporciona. Son un conjunto de estandares, convenciones y clases que hacen que el código sea mantenible, especialmente cuando el trabajo es parte de un equipo.
El primer paso es establecer la estructura de la carpeta de la aplicación. Inicialmente lo único que se necesita son dos archivos y copiar la carpeta de Sencha Touch. Por convención, estos son:

  • index.html – una página inicial de HTML que incluye el archivo principal de Sencha Touch
  • app.js – EL archivo donde defines las configuraciones de tu aplicación
  • touch – La copia de la carpeta descargada de Sencha Touch

El contenido del index.html básicamente se compone de:

Continuar leyendo “comenzando con secha touch”