Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Sencha Touch

No description
by

Juani Alarcon

on 25 November 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Sencha Touch

Comenzando...
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.
Componentes en Sencha Touch
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 deshabilitar
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)
Layouts
Describen y especifican las proporciones y posiciones de los componentes en tu aplicación
Sencha Touch
Paquete de datos
El paquete de datos es responsable de cargar y almacenar datos en la aplicación de Sencha Touch. La mayoría de procedimientos con este modulo de almacenamiento de información esta relacionado con:
Modelo
: Un modelo representa una unidad, una entidad que utiliza la aplicación, por ejemplo, un usuario, un contacto, una dirección o un producto podría ser un modelo. En principio, un modelo representa una colección de campos para constituir un objeto con datos.
Store
: Un store es una colección de instancias de modelos. Representa un arreglo de registros, pero también proporciona algunas capacidades como ordenar, filtrar, agrupar, así como controlar posibles eventos sobre la colección.
Proxy
: Un Proxi es responsable de cargar y almacenar los datos. Usualmente se crea un túnel de comunicación ajax para traerlos desde un servidor y guardarlos en el store.
Sencha Touch, un framework de aplicaciones HTML5 móvil de alto rendimiento, es la piedra angular de la plataforma Sencha HTML5. Construido para permitir experiencias de usuario de clase mundial, Sencha Touch es el único marco que permite a los desarrolladores crear aplicaciones de gran alcance que funcionan en iOS, Android, BlackBerry, Windows Phone, y más.
Componentes Básicos
Inicialmente solo necesitamos:
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
<!DOCTYPE html>
<html>
<head>
<title>Iniciando con el desarrollo en Sencha Touch</title>
<link rel="stylesheet" href="touch/resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="touch/sencha-touch-all.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</html>
Tiene la capacidad de ser ajustable de acuerdo a los componentes que contenga dentro de el
HBox
Layout VBox
VBox es igual al HBox, solo que es vertical en lugar de horizontal
El Card Layout toma el tamaño del contenedor y se lo aplica al componente activo para rellenar todoe ese espacio disponible completamente. Después, esconde el resto de los componentes , permitiendo que tu intercambies las vistas a tu conveniencia pero solo mostrando uno a la vez.
Layout Card
El layout Fit es probablemente el layout mas simple que existe. Todo lo que hace es que su componente hijo ocupe todo el espacio disponible de su contenedor padre.
Layout Fit
Acoplamiento
Cada layout es capaz de acoplar componentes dentro de el mismo. Este acoplamiento permite agregar elementos adicionales en los bordes de arriba, abajo, derecha o izquierda del contenedor padre, redimensionando los otros componentes como fuera necesario.
Se puede agregar una infinidad de paneles acoplados, simplemente proporcionando la configuración dock dentro de los componentes que queremos ajustar
Contenedores
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 aplicación adecuadamente diseñada, debería 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 ejecución
Remover Componentes hijos
Especificar un Layout de acoplamiento
Instanciación
Los componentes se crean de la misma manera que el resto de las clases en Sencha Touch – usando el metodo Ext.create
var panel = Ext.create('Ext.Panel', {
html: 'This is my panel'
});
Los componentes no se despliegan inmediatamente después de haber sido instanciados. Esto nos permite crear y manipular los componentes antes de ser mostrados al usuario, que es mas fácil que hacerlo después que han sido dibujados mediante el método
add
.
Xtype es una manera conveniente de crear componentes sin tener que ir inmediatamente al proceso que sigue Ext.create y especificar el nombre completo de la clase. En lugar de ello, solo se puede proporcionar el xtype correspondiente de la clase dentro de un objeto de configuración y el framework creara el componente.
Configuraciones
Todas las opciones de configuración de un componente se listan en la sección “Opciones de configuración” de la documentación de la clase. Se le puede pasar un numero ilimitado de configuraciones cuando se instancia un componente, y modificar cualquiera de ellos en un momento posterior.
Cada opción de configuración tiene un método publico para obtenerlo y establecerlo (set y get) – estos se crean automáticamente y siempre siguen el mismo patrón.
Cada componente en Sencha Touch puede ser ocultado o mostrado de acuerdo a las necesidades de la aplicación usando
hide
y
show
Eventos
Todos los componentes disparan eventos, que pueden ser “escuchados” y controlados en tiempo de ejecución
Ext.create('Ext.form.Text', {
label: 'Name',
listeners: {
change: function(field, newValue, oldValue) {
myStore.filter('name', newValue);
}
}
});
Destruyendo Componentes
Debido a que la mayoría de los dispositivos móviles tiene un espacio de memoria limitado, es una buena idea destruir los componentes una vez que sepas que no se volverán a utilizar.

mainPanel.destroy()
Stores y modelos
Es simple, un modelo solo es una definición de campos y sus datos. Las cuatro principales partes de las que se compone un Ext.data.Model son Campos, Proxies, Asociaciones y Validaciones.
Ext.define('Usuario', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'nombre', type: 'string' }
]
});
Los modelos se usan muy regularmente con los Stores, que son un conjunto o colección de instancias de modelos. Definir un Store y cargar los datos es simple:
Ext.create('Ext.data.Store', {
model: 'Usuario',
proxy: {
type: 'ajax',
url : 'usuarios.json',//o una url de php
reader: 'json'
},
autoLoad: true
});
Configuramos el store para traer los datos con un Proxi via Ajax, proporcionando la URL y que sera interpretada por un Reader para decodificar los datos y colocarlos finalmente en el Store. En este caso, el servidor responde en formato JSON, de esta manera, configuramos un Json Reader para leer la respuesta.
Los Stores tienen la capacidad de ordenar, filtrar y agrupar localmente y remotamente los datos:
Store
Modelo
Proxis
Son usados por los stores para controlar el cargado de los datos.Hay dos tipos de proxis: local(cliente) y remotos (servidor). Los proxis locales incluyen ordenamiento en la memoria del navegador y almacenamiento local con HTML 5 cuando esta disponible.Los proxis remotos controlan los datos via comunicacion Ajax, JsonP y Rest de un servidor.
Se basan en los modelos para definir los datos.
Esto ayuda en dos maneras.
Primero, cada store que utilice 1 modelo, cargara los datos de la misma manera, y de esa manera evitaremos la definición del proxi para cada store.
Segundo, ahora podemos guardar datos a partir de un modelo sin la necesidad de un store
Asociaciones
Los Models pueden estar relacionados entre si, con funcionalidades adecuadas implementadas en el framework.
La mayoría de las aplicaciones trabajan con una variedad de modelos, muchos de los cuales regularmente están relacionados
Validaciones
Los modelos en Sencha Touch 2 tienen la capacidad de validar sus tipos de datos.
presence Garantiza que el campo tenga el valor.
length Garantiza la longitud de la cadena entre un numero máximo o mínimo.
format Se asegura que la cadena concuerde con el formato de una expresión regular.
inclusion Garantiza que el valor este dentro de un conjunto especifico de valores.
exclusion Se asegura que el valor no esta en un conjunto especifico
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 fácil y practica de colocarlos y agregarles estilos visuales.
Formularios
Un DataView es la manera de desplegar los registros de una aplicación con estilos particulares y dinámicamente basados en las capacidades de un Store. Es ideal para mostrar mucha información y datos del servidor o cualquier otra fuente de datos y es la base de otros componentes como el Ext.List.
DataViews
Listas
Una lista es un componente que despliega registros de un Store como elementos de una lista en la pagina. Es una subclase de un DataView, dándole mayores capacidades, tales como:
Agrupar elementos, un index bar opcional y cabeceras
Iconos y etiquetas opcionales de para cada elemento
TabPanels
Los Tab Panels son una excelente manera de mostrar varios paneles al usuario pudiendo intercambiarlos en la pantalla completa. Cada componente en el Tab Panel tiene su propia pestaña, permitiendo al usuario visualizarlo presionandolo. Es posible posicionar las pestañas arriba o abajo del TabPanel, y opcionalmente permite configuraciones de icono y texto.
Phone Gap
Se trata de un entorno de despliegue open source, que permite empaquetar el código y los recursos Sencha Touch en una aplicación binaria - lista para distribuir a Apple, Android, Palm, Symbian y los dispositivos BlackBerry.
El otro fin es reducir la brecha entre las API que los dispositivos exponen y aplicaciones nativas. De este modo poder ingresar al sistema de archivos de una terminal inalámbrica, usar JavaScript para hacerla vibrar, utilizar la cámara, o incluso comprobar el estado actual de la red del dispositivo,
Ultimas características
Apache Cordova and PhoneGap
XHR2 (XMLHttpRequest)
Proporciona un nuevo indicador de progreso por lo que las aplicaciones pueden mantener a los usuarios informados sobre el progreso de transferencia de datos
Temas nuevos
Cupertino - Proporciona tema de iOS 7
CupertinoClassic - Proporciona tema pre-iOS7
MountainView - Proporciona Android
Soporte para Internet Explorer 10
Soporte CSS3 font-face
Plataforma de detección de temas
Full transcript