Sencha Touch - Guía rápida
Sencha Touch es un marco popular de Sencha para crear una interfaz de usuario para aplicaciones móviles. Ayuda al desarrollador a crear una aplicación móvil usando HTML simple, CSS, JS que es compatible con muchos dispositivos móviles como Android, IOS, BlackBerry y Windows. Está basado en la arquitectura MVC. La última versión de Sencha Touch es 2.4.
Historia de Sencha Touch
Después de lanzar el otro producto de Sencha, ExtJs, que era para aplicaciones web, existía la necesidad de desarrollar un marco que también funcionara en dispositivos móviles.
La primera versión de Sencha Touch fue la versión beta 0.9, que admitía dispositivos Android e IOS. Más tarde, el primer lanzamiento principal de Sencha Touch versión 1.0 fue en noviembre de 2010, que fue la primera versión estable y también admitió dispositivos Blackberry.
La última versión de Sencha Touch es la versión 2.4 lanzada en junio de 2015, que admite muchos dispositivos como Windows, Tizen junto con Android, IOS, BlackBerry OS 10, Google Chrome para Android y Safari móvil, etc.
Características de Sencha Touch
Las siguientes son las características más destacadas de Sencha Touch:
Personalizable y más de 50 widgets de interfaz de usuario integrados con una colección de interfaces de usuario enriquecidas como listas, carruseles, formularios, menús y barras de herramientas, creadas específicamente para plataformas móviles.
Compatibilidad de código de nuevas versiones con la anterior.
Un administrador de diseño flexible que ayuda a organizar la visualización de datos y contenido en múltiples dispositivos móviles con diferentes sistemas operativos.
El marco incluye un paquete de datos robusto que puede consumir datos de cualquier fuente de datos backend.
Diseños adaptables, animaciones y desplazamiento suave para una mejor experiencia de uso de aplicaciones web móviles.
Los temas de apariencia nativa listos para usar para todas las plataformas principales permiten hacer que las aplicaciones web e híbridas coincidan con la apariencia de las plataformas de destino.
Sencha Touch ─ Beneficios
Sencha Touch es el estándar líder para el desarrollo de aplicaciones web de nivel empresarial. Ofrece las herramientas necesarias para crear aplicaciones robustas para la mayoría de los dispositivos móviles, proporcionando una plataforma única para desarrollar aplicaciones. A continuación se presentan algunos de los beneficios:
Proporciona una función táctil sensible, por lo que el usuario puede navegar fácilmente mientras usa la aplicación móvil.
Proporciona compatibilidad con todas las últimas versiones de IOS, Android y Blackberry y Windows.
Proporciona la velocidad más rápida posible deseable para cualquier aplicación móvil.
Proporciona una solución rentable con su compatibilidad multiplataforma.
Basado en las API nativas y lenguajes de desarrollo web básicos como HTML, CSS, JS, lo que facilita que un desarrollador comprenda Sencha Touch.
Sencha Touch ─ Limitaciones
Sencha Touch API no tiene la siguiente capacidad:
La aplicación no tiene acceso a la cámara, los contactos y el acelerómetro del dispositivo.
No proporciona la función de notificación automática. Para ello, tenemos que utilizar websockets o long polling.
De acuerdo con la política de licencia pública general, es gratuito para aplicaciones de código abierto, pero se paga para aplicaciones comerciales.
No es bueno para aplicaciones de animación y gráficos intensos, como aplicaciones de juegos.
Sencha Touch ─ Herramientas
Sencha SDK
Este es el kit de desarrollo de Sencha que se utiliza para crear un esqueleto del proyecto. Usamos el comando "sencha -sdk path / to / touch generate app appName" para crear una aplicación con el nombre dado en el comando.
Cuando se crea la aplicación, puede ver los siguientes archivos en la aplicación:
app - Esta carpeta contiene archivos de modelo, vista, controlador y tienda para la aplicación.
app.js- Este es el archivo JS principal de su aplicación. A partir de este archivo, se inicia el flujo de código Sencha.
app.json - Este es el archivo de configuración de la aplicación, todos los detalles de configuración se presentan aquí.
index.html - Este es el archivo html principal donde incluimos el app.js y otros archivos relacionados con Sencha.
package.json - Este archivo tiene toda la dependencia y otra información relacionada con la aplicación.
resources - Esta carpeta incluye todos los archivos CSS e imágenes necesarios para la aplicación.
Sencha CMD
Sencha CMD es una herramienta de línea de comandos, que proporciona las funciones de minificación de código Sencha Touch, andamios, generación de compilación y otras funciones útiles para fines de producción.
Usamos el comando "Paquete de compilación de la aplicación Sencha" en el símbolo del sistema para compilar la aplicación para esto. Vaya al directorio de la aplicación en el símbolo del sistema y escriba el comando anterior. Una vez que la compilación sea exitosa, veremos la versión minificada de la aplicación que se usa básicamente para fines de producción.
Esto se puede descargar desde https://www.sencha.com/products/extjs/cmd-download/
Inspector Sencha
Sencha Inspector es una herramienta de depuración para depurar cualquier problema en el código Sencha durante el desarrollo.
Configuración del entorno local
Esta sección le guía sobre cómo descargar y configurar Sencha Touch en su máquina. Siga los pasos para configurar el entorno.
Descarga de archivos de la biblioteca
Descargue una versión comercial de los archivos de la biblioteca Sencha Touch desde el siguiente enlace https://www.sencha.com. Obtendrá la versión de prueba del sitio en su identificación de correo registrada, que será una carpeta comprimida llamada sencha-touch-2.4.2-commercial.
Descomprima la carpeta y encontrará varios archivos JavaScript y CSS para incluir en su aplicación. Incluye principalmente los siguientes archivos:
Javascript Files - El archivo JS que puede encontrar en la carpeta \ sencha-touch-2.4.2commercial \ touch-2.4.2 son -
| No Señor | Descripción del archivo |
|---|---|
| 1 | sencha-touch.js Este es el archivo principal que contiene todas las funcionalidades para ejecutar la aplicación. |
| 2 | sencha-touch-all.js Este archivo contiene todo el código minimizado sin comentarios en el archivo. |
| 3 | sencha-touch-debug.js Esta es la versión no minificada de sencha-touch-all.js con fines de depuración. |
| 4 | sencha-touch-all-debug.js Este archivo tampoco está minimizado y se utiliza con fines de desarrollo, ya que contiene todos los comentarios y registros de la consola para comprobar cualquier error / problema. |
Puede agregar estos archivos a la carpeta JS de su proyecto o puede proporcionar una ruta directa donde residen los archivos en su sistema.
CSS Files - Hay varios archivos basados en temas que puede encontrar en la carpeta I: \ sencha touch \ sencha-touch-2.4.2-commercial \ touch-2.4.2 \ resources \ css \ sencha-touch.css
Estos archivos de biblioteca se agregarán en la aplicación Sencha Touch de la siguiente manera:
<html>
<head>
<script type = "text/javascript" src = "../sencha-touch-2.4.2-commercial/touch-2.4.2/sencha-touch-all.js"></script>
<link href = "../sencha-touch-2.4.2-commercial/touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type ="text/javascript" src = "app.js" > </script>
</head>
</html>Puede mantener el código de la aplicación Sencha Touch en el archivo app.js.
Configuración de CDN
CDN es una red de entrega de contenido con la que no necesita descargar los archivos de la biblioteca Sencha Touch, sino que puede agregar directamente el enlace CDN para ExtJS a su programa de la siguiente manera:
<html>
<head>
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel="stylesheet" />
<script type = "text/javascript" src = "app.js" > </script>
</head>
</html>Editores populares
Como es un marco de JavaScript utilizado para desarrollar aplicaciones web, el proyecto tendrá HTML, archivos JS, y para escribir sus programas Ext JS, necesitará un editor de texto. Hay varios IDE disponibles en el mercado. Pero por ahora, puede considerar uno de los siguientes:
Notepad - En una máquina con Windows, puede usar cualquier editor de texto simple como el Bloc de notas (recomendado para este tutorial), el Bloc de notas ++.
Brackets - Otro IDE popular que se puede descargar desde http://brackets.io/ .
Sublime - Otro IDE popular que se puede descargar desde https://www.sublimetext.com/3/ .
Naming conventiones un conjunto de reglas que se deben seguir para los identificadores. También hace que el código sea fácilmente legible y comprensible para otros programadores.
La convención de nomenclatura en Sencha Touch sigue la convención estándar de JavaScript, que no es obligatoria, pero es una buena práctica a seguir. Debe seguir la sintaxis de mayúsculas y minúsculas para nombrar la clase, el método, la variable y las propiedades.
Si el nombre se combina con dos palabras, la segunda palabra comenzará siempre con una letra mayúscula. Por ejemplo, doLayout (), StudentForm, firstName, etc.
| No Señor. | Nombre y Convención |
|---|---|
| 1 | Class Name Debe comenzar con una letra mayúscula, seguida de un camello. Por ejemplo, StudentClass |
| 2 | Method Name Debe comenzar con una letra minúscula, seguida de un camello. Por ejemplo, studentMethod () |
| 3 | Variable Name Debe comenzar con una letra minúscula, seguida de un camello. Por ejemplo, studentName |
| 4 | Constant Name Debe estar solo en mayúsculas. Por ejemplo, COUNT, MAX_VALUE |
| 5 | Property Name Debe comenzar con una letra minúscula, seguida de un camello. Por ejemplo, enableColumnResize = true |
La capa inferior para cualquier aplicación móvil es el sistema operativo, además de que todo o cualquier cosa está construido. Luego tenemos los navegadores en los que ejecutaremos las aplicaciones. Podría ser Chrome, Safari, IE cualquier cosa. La capa superior es un estándar W3, que es común para todos. Sencha Touch se basa o se basa en los estándares W3, que no es más que HTML5, lo que hace que una sola aplicación sea compatible con diferentes navegadores de diferentes dispositivos.
Sencha Touch es una combinación de tres marcos: ExtJs, JqTouch y Raphael (dibujo vectorial). Sigue la arquitectura MVC. MVC separa el código en fragmentos más manejables.
Aunque la arquitectura no es obligatoria para el programa, sin embargo, es una buena práctica seguir esta estructura para que su código sea altamente mantenible y organizado.
Estructura del proyecto con la aplicación Sencha Touch
----------src
----------resources
-------------------CSS files
-------------------Images
----------JavaScript
--------------------App Folder
-------------------------------Controller
------------------------------------Contoller.js
-------------------------------Model
------------------------------------Model.js
-------------------------------Store
------------------------------------Store.js
-------------------------------View
------------------------------------View.js
-------------------------------Utils
------------------------------------Utils.js
--------------------------------app.js
-----------HTML filesLa carpeta de la aplicación Sencha Touch residirá en la carpeta JavaScript de su proyecto.
La aplicación contendrá archivos de controlador, vista, modelo, tienda y utilidades con app.js.
app.js- El archivo principal desde donde comenzará el flujo del programa. Debe incluirse en el archivo HTML principal usando la etiqueta <script>. La aplicación llama al controlador de la aplicación para el resto de la funcionalidad.
Controller.js- Es el archivo controlador de la arquitectura Sencha Touch MVC. Contiene todo el control de la aplicación, los oyentes de eventos y la mayor parte de la funcionalidad del código. Realiza las siguientes tareas: enrutamiento, intermedio entre vista y modelo, y ejecuta eventos.
View.js- Contiene la parte de la interfaz de la aplicación, que se muestra al usuario. Sencha Touch utiliza varias vistas enriquecidas de IU, que se pueden ampliar y personalizar según los requisitos.
Store.js- Contiene los datos almacenados en caché local, que se mostrarán a la vista con la ayuda de objetos modelo. Store obtiene los datos mediante proxies, que tiene la ruta definida para que los servicios obtengan los datos del backend.
Model.js- Contiene los objetos que vinculan los datos de la tienda a ver. Es la representación del objeto del mundo real, que básicamente se ocupa de la base de datos.
Utils.js- No está incluido en la arquitectura MVC, pero es una buena práctica usarlo para hacer que el código sea más limpio, menos complejo y más legible. Podemos escribir métodos en este archivo y llamarlos en el controlador o en el renderizador de vista donde sea necesario. También es útil para fines de reutilización de código.
MVC son las siglas de Model View Controller. Es un patrón arquitectónico que separa la aplicación en componentes lógicos haciéndola más manejable.
El siguiente diagrama muestra cómo funciona la arquitectura MVC:
Controller - El controlador controla toda la aplicación, notifica a la vista si se cambia el modelo y realiza acciones basadas en las entradas del usuario.
View- Contiene la parte de la interfaz de la aplicación que es visual para el usuario. Notifica al controlador para cambiar el modelo en la entrada del usuario.
Model- Contiene los objetos que vinculan los datos de la tienda a ver. Es la representación del objeto del mundo real que básicamente se ocupa de la base de datos. También notifica al controlador sobre cualquier cambio en la vista.
En este capítulo, enumeraremos los pasos para escribir el primer programa Hello World en Ext JS.
Paso 1
Cree una página index.htm en un editor de nuestra elección. Incluya los archivos de biblioteca requeridos en la sección de cabecera de la página html de la siguiente manera.
index.htm
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js">
</script>
<script type = "text/javascript">
Ext.application( {
name: 'Sencha', launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true, items: [{
title: 'Home', iconCls: 'home', html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
<body>
</body>
</html>Explicación
El método Ext.application () es el punto de partida de la aplicación Sencha Touch. Crea una variable global llamada 'Sencha' declarada con la propiedad name: todas las clases de la Aplicación, como sus Modelos, Vistas y Controladores, residirán bajo este espacio de nombres único, lo que reduce las posibilidades de colisión de variables globales y nombres de archivos.
Se llama al método launch () una vez que la página está lista y todos los archivos JavaScript están cargados.
El método Ext.create () se utiliza para crear un objeto en Sencha Touch. Aquí, estamos creando un objeto de clase de panel simple Ext.tab.Panel.
Ext.tab.Panel es la clase predefinida en Sencha Touch para crear un panel.
Cada clase Sencha Touch tiene diferentes propiedades para realizar algunas funcionalidades básicas.
La clase Ext.Panel tiene varias propiedades como:
fullscreen propiedad es hacer uso de una pantalla completa, por lo tanto, el panel ocupará el espacio de pantalla completa.
items La propiedad es el contenedor de varios elementos.
iconCls es la clase utilizada para mostrar diferentes iconos.
title propiedad es proporcionar el título al panel.
html propiedad es el contenido html que se mostrará en el panel.
Paso 2
Abra el archivo index.htm en un navegador estándar y obtendrá el siguiente resultado.
La demanda actual de una aplicación web es desarrollar una aplicación rápida con menos esfuerzos de desarrollo. Sencha Touch ayuda a hacerlo con facilidad, ya que proporciona una serie de bibliotecas de compilación para elegir, según el código de desarrollo o producción junto con la posibilidad de crear una compilación personalizada.
Las bibliotecas de compilación de Sencha Touch cargan las clases de forma dinámica. La carga dinámica se refiere a las clases que se cargan cuando es necesario y solo se incluirán aquellas clases que sean necesarias en la aplicación. Esto hace que la aplicación se ejecute más rápido a medida que se reduce la cantidad de archivos a cargar, lo que al mismo tiempo disminuye el tiempo de carga.
Sencha Touch 2.x proporciona las siguientes cinco bibliotecas de compilación.
| No Señor. | Construcciones y uso |
|---|---|
| 1 | sencha-touchdebug.js Esta compilación se utiliza al desarrollar la aplicación localmente. Es una versión no reducida con todos los comentarios y registros de depuración para facilitar la depuración durante el desarrollo. |
| 2 | senchatouch.js Este archivo se utiliza para fines de producción. Es la versión minificada cuando tenemos una compilación personalizada. |
| 3 | sencha-touchall.js Este archivo se utiliza para fines de producción. Es la versión minificada cuando no tenemos una compilación personalizada. |
| 4 | sencha-touchall-debug.js Este archivo se utiliza para depurar en producción. No está minimizado y tiene todos los comentarios y registros de depuración. |
| 5 | sencha-touchall-compat.js Esta compilación se utiliza para migrar la versión 1.xa la versión 2.x. Da una advertencia cuando el código de la versión 1.x no es compatible y necesita modificación de código. |
Con las compilaciones mencionadas anteriormente, Sencha Touch ofrece la posibilidad de crear compilaciones personalizadas.
Ventajas de tener una construcción personalizada
La compilación personalizada no carga todos los archivos táctiles. Carga solo los archivos que estamos usando en la aplicación, lo que hace que la aplicación sea más rápida y fácil de mantener.
Sencha CMD se utiliza para crear una compilación personalizada. Para crear una compilación personalizada en Sencha CMD, vaya al directorio donde reside el archivo de la aplicación y escriba uno de los siguientes comandos para crear una compilación.
| No Señor. | Comando y uso |
|---|---|
| 1 | sencha app build native Compila la aplicación y prepara un archivo llamado packager.temp.json que puede usar para empaquetar una aplicación; el packager.temp.json es el mismo que packager.json, pero contiene rutas adicionales. |
| 2 | sencha app build -run native Construye y empaqueta automáticamente la aplicación e inicia el simulador apropiado. |
| 3 | sencha app build package Crea la aplicación con soporte de empaquetado, pero no configura un archivo JSON empaquetador. Esto es útil para proyectos que mantienen manualmente varios archivos packager.json. |
Una vez que la compilación sea exitosa, generará el archivo all-classes.js que debemos incluir en nuestro index.html para que esté listo para producción.
El siguiente código muestra los cambios que se deben realizar para el código listo para producción.
Index.html before building application
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-debug.js"></script>
<script type = "text/javascript" src = "app.js"> </script>
</head>
<body>
</body>
</html>Index.html after building the application
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch.js"></script>
<script type = "text/javascript" src = "app.js"> </script>
<script type = "text/javascript" src = "app-classes.js"> </script>
</head>
<body>
</body>
</html>Sencha Touch viene con varias rectificaciones de la versión anterior.
Sencha Touch 2 viene con la compilación de compatibilidad con versiones anteriores, lo que facilita el proceso de migración de la versión 1.xa 2.x.
Esta compilación simplemente facilita el trabajo al proporcionar una advertencia y los registros cada vez que se produce un problema de migración o se requiere un cambio de código, de modo que el usuario sepa dónde se deben realizar los cambios, para asegurarse de que la aplicación funcione con la última versión.
La migración de Sencha Touch 2.x requiere los siguientes cambios de código.
Sistema de clases
Code in Sencha Touch 1.x -
MyApp.view.StudentPanel = Ext.extend(Ext.Panel, {
scroll: 'vertical',
html: 'Student Panel'
initComponent: function() {
Ext.getCmp('StudentIdDiv').update('This is a Student panel');
}
});Code in Sencha Touch 2.x -
Ext.define('MyApp.view.StudentPanel', {
extend: 'Ext.Panel',
config: {
scroll: 'vertical',
html: 'Student Panel'
},
initialize: function() {
Ext.getCmp('StudentIdDiv').setHtml('This is a Student panel')
}
});Al observar ambas versiones, puede ver que la forma de crear clases son cambios que ahora están inspirados en ExtJ como:
Ext.extend se cambia a Ext.define.
Todos los parámetros de configuración relacionados con la clase ahora se definen en el parámetro de configuración.
El initComponent se cambia al método initialize ().
En Sencha Touch 2.x, podemos tener las funciones setHtml () y getHtml () para actualizar html o para obtener el valor.
Arquitectura MVC
El código Sencha Touch 1.x era modular y se basaba en la arquitectura MVC. Sencha Touch 2.x sigue una sintaxis diferente para escribir modelo, vista y controlador. Veamos la diferencia de archivos de modelo, vista y controlador en diferentes versiones.
Modelo
Code in Sencha Touch 1.x -
Ext.regModel('MyApp.model.StudentModel', {
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int'}
]
});Code in Sencha Touch 2.x -
Ext.define('MyApp.model.StudentModel', {
extend: 'Ext.data.Model', config: {
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int'}
]
}
});Ext.regModel se cambia a Ext.define que extiende Ext.data.Model.
Todos los campos vienen bajo la sección de configuración ahora en la versión 2.x.
Ver
Code in Sencha Touch 1.x -
Ext.Panel("studentView", {
items: [{}]
});Code in Sencha Touch 2.x -
Ext.define('MyApp.view.StudentView', {
extend: 'Ext.tab.Panel',
items: [{}]
});La vista es casi la misma, el único cambio es que el nombre de la vista sigue el espacio de nombres de la versión 2.x, como Myapp.view.StudentView, y el código se escribe en el método Ext.define como modelo similar.
Controlador
Code in Sencha Touch 1.x -
Ext.regController("studentController", {
someMethod: function() {
alert('Method is called');
}
});Code in Sencha Touch 2.x -
Ext.define('MyApp.controller.studentController', {
extend: 'Ext.app.Controller', someMethod: function() {
alert('Method is called');
}
});Igual que el modelo en el controlador. Además, Ext.regController se cambia a Ext.define, que extiende Ext.app.Controller.
Solicitud
Code in Sencha Touch 1.x -
Ext.application({
name: 'MyApp',
launch: function() {
Ext.create('MyApp.view.StudentView');
}
});Code in Sencha Touch 2.x -
Ext.application({
name: 'MyApp',
models: ['studentModel'],
controllers: ['studentController'],
views: ['studentView'],
stores: ['studentStore'],
launch: function() {
Ext.create('MyApp.view.Main');
}
});La principal diferencia entre la versión 1.xy la versión 2.x es que en 2.x declaramos todos los modelos, vistas, controladores y tiendas en la propia aplicación.
Sencha Touch tiene varios conceptos básicos, como sistema de clases, ajax, controladores, etc.
La siguiente tabla enumera el enlace para los conceptos básicos de Sencha Touch.
| No Señor. | Enlace de concepto y descripción |
|---|---|
| 1 | Sistema de clases |
| 2 | Componentes |
| 3 | Controladores |
| 4 | Soporte BlackBerry |
| 5 | Uso de Ajax |
El paquete de datos en Sencha Touch se encarga de realizar cualquier tipo de manipulación de datos ya sea almacenando o cargando los datos.
Los paquetes de datos están relacionados con el modelo, la tienda y los proxies.
| No Señor. | Enlace de concepto y descripción |
|---|---|
| 1 | Model Es la recopilación de datos y campos con los que mostramos todos los valores en la interfaz de usuario. Descripción |
| 2 | Store Es una colección de instancias modelo que básicamente almacena los datos localmente. En la tienda escribimos todos los eventos y las llamadas de descanso para obtener datos. Descripción |
| 3 | Proxy Básicamente se encarga de cargar los datos en la tienda. Principalmente usamos proxy ajax para cargar datos de la tienda. Descripción |
Sencha Touch proporciona una serie de temas para usar en sus aplicaciones. Puede agregar diferentes temas en lugar del tema clásico y ver la diferencia en la salida según el dispositivo que estamos usando para la aplicación. Esto se hace simplemente reemplazando el archivo CSS del tema como se explica en el siguiente ejemplo.
Tema de escritorio
Considere su primera aplicación Hello World. El siguiente CSS de la aplicación se utiliza para el tema de escritorio.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssPara ver el efecto, pruebe el siguiente programa:
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type="text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Esto producirá el siguiente resultado:
Tema de Windows
Considere su primera aplicación Hello World. Elimine el siguiente CSS de la aplicación:
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAgregue el siguiente CSS para usar el tema de Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.cssPara ver el efecto, pruebe el siguiente programa:
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Esto producirá el siguiente resultado:
Tema de iOS
Considere su primera aplicación Hello World. Elimine el siguiente CSS de la aplicación.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAgregue el siguiente CSS para usar el tema de Windows
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.cssPara ver el efecto, pruebe el siguiente programa:
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Esto producirá el siguiente resultado:
Tema clásico de iOS
Considere su primera aplicación Hello World. Elimine el siguiente CSS de la aplicación:
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAgregue el siguiente CSS para usar el tema de Windows:
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.cssPara ver el efecto, pruebe el siguiente programa:
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Esto producirá el siguiente resultado:
Tema de Android
Considere su primera aplicación Hello World. Elimine el siguiente CSS de la aplicación.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAgregue el siguiente CSS para usar el tema de Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.cssPara ver el efecto, pruebe el siguiente programa:
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Esto producirá el siguiente resultado:
Tema de BlackBerry
Considere su primera aplicación Hello World. Elimine el siguiente CSS de la aplicación.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAgregue el siguiente CSS para usar el tema de Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.cssPara ver el efecto, pruebe el siguiente programa:
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Esto producirá el siguiente resultado:
En el mundo de las tecnologías de hoy, tenemos múltiples dispositivos como móviles, tabletas, computadoras de escritorio y portátiles con diferentes tamaños de pantalla. Por lo tanto, existe la necesidad de desarrollar aplicaciones que sean accesibles desde todos los dispositivos con buena apariencia. Sin embargo, desarrollar un código diferente para diferentes dispositivos requiere mucho tiempo y es costoso.
Sencha Touch nos ayuda en este sentido al ofrecer una función de perfil de dispositivo. En función del perfil activo, se ejecutarán y aplicarán las diferentes dependencias.
Podemos declarar el perfil del dispositivo mientras escribimos un código de aplicación. Podemos tener varios dispositivos como:
Ext.application({
name: 'MyApp',
profiles: ['Phone', 'Tablet']
});Una vez hecho esto, los perfiles se cargarán como:
- MyApp.profiles.Phone.js
- MyApp.profiles.Tablet.js
Escribir un perfil de teléfono simple
Ext.define('Mail.profile.Phone', {
extend: 'Ext.app.Profile',
config: {
name: 'Phone',
views: ['phoneView']
},
isActive: function() {
return Ext.os.is('Phone');
}
});Escribir un perfil de tableta simple
Ext.define('Mail.profile.Tablet', {
extend: 'Ext.app.Profile',
config: {
name: 'Tablet',
views: ['tableView']
},
isActive: function() {
return Ext.os.is('Tablet');
}
});Como podemos ver en el perfil, tenemos la función isActive que determina si el dispositivo en particular está activo. Si el dispositivo está activo, las dependencias correspondientes se cargarán y se crearán instancias.
Como se mencionó en el ejemplo anterior, si estamos usando un dispositivo telefónico, la función isActive del perfil telefónico se volverá verdadera y se cargarán las dependencias relacionadas con el dispositivo telefónico; aquí se cargará phoneView. Si el dispositivo es una tableta, la función isActive del perfil del teléfono devolverá falso y la función isActive del perfil de la tableta devolverá verdadero y la dependencia tabletView se cargará.
Proceso de lanzamiento
Un punto más a tener en cuenta aquí es cuando tenemos perfiles en la aplicación, entonces la carga y creación de instancias del código de la aplicación será en el siguiente orden:
- Los controladores se instancian primero y se cargará la función de inicio de cada controlador.
- Se llamará a la función de inicio del perfil.
- Se llamará a la función de inicio de la aplicación.
Tanto el perfil como las funciones de lanzamiento de la aplicación son opcionales, por lo que si no definimos ninguna de ellas, no se llamarán.
Eche un vistazo al siguiente código para comprobar dónde y cómo se pueden definir las diferentes funciones de lanzamiento e inicio.
Función de inicio del controlador
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
init : function (){
Ext.Msg.alert('Controller's init method');
},
config: {
refs: {
tab: '#divId
}
}
});Función de lanzamiento del perfil
Ext.define('Mail.profile.Tablet', {
extend: 'Ext.app.Profile',
config: {
name: 'Tablet', views: ['tableView']
},
isActive: function() {
return Ext.os.is('Tablet');
}
launch : function() {
Ext.Msg.alert('profile's launch function');
}
});Función de lanzamiento de la aplicación
Ext.application({
name: 'Sencha', launch: function() {
Ext.Msg.alert(Application's launch function);
}
});Hay ciertas formas definidas en Sencha Touch para declarar dependencias, una dentro de la aplicación y la otra dentro de las clases.
Echemos un vistazo a las diferentes formas de definir dependencias.
Dependencias de nivel de aplicación
Aquí, declaramos todas las dependencias cuando creamos la aplicación Ext.
Ext.application({
name: 'MyApp',
views: ['StudentsView'],
models: ['StudentsModel'],
controllers: ['StudentsController'],
stores: ['StudentsStore'],
profiles: ['Phone', 'Tablet']
});Ahora, cuando se cargue la aplicación, todas las dependencias se cargarán al mismo tiempo. La ruta de los otros archivos será:
- MyApp.views.StudentsView
- MyApp.models.StudentsModel
- MyApp.stores.StudentsStore etc.
La forma de declaración anterior no solo carga el archivo, también decide qué perfil debe mantener como activo. Después de cargar el controlador, se asegura de crear una instancia. Una vez que se cargan las tiendas, las instancia y proporciona una identificación si aún no se ha proporcionado.
Dependencias específicas del perfil
Cuando estamos usando perfiles en una aplicación, puede haber posibilidades de que solo se requieran pocas funcionalidades para algún perfil específico.
Las dependencias específicas del perfil se declaran en los propios perfiles en lugar de la declaración de nivel de aplicación.
Ext.define('MyApp.profile.Tablet', {
extend: 'Ext.app.Profile', config: {
views: ['StudentView'], controllers: ['StudentController'], models: ['StudentModel']
}
});Las dependencias se cargan independientemente de que el perfil esté activo o no. Sin embargo, según el perfil activo, se produce un procesamiento adicional, como la creación de instancias del controlador y las tiendas.
Dependencias anidadas
Cuando tenemos una aplicación más grande, tenemos varios controladores, modelos, vistas y tiendas.
Siempre es bueno mantener la modularidad en aplicaciones más grandes. Para eso, podemos definir subcarpetas y al declarar dependencias podemos usar el nombre de la subcarpeta para declarar.
Ext.application({
name: 'MyApp',
controllers: ['Controller', 'nested.NewController'],
views: ['class.Cview', 'SView']
});En el caso anterior, se cargarán los siguientes archivos:
- MyApp.controllers.Controller
- MyApp.controllers.nested.NewController
- MyApp.Views.Sview
- MyApp.Views.class.Cview
Dependencias externas
Podemos especificar las dependencias fuera de la aplicación dando nombres completos de las clases como:
Ext.Loader.setPath({
'Class': 'Class'
});
Ext.application({
views: ['Class.view.LoginForm', 'Welcome'],
controllers: ['Class.controller.Sessions', 'Main'],
models: ['Class.model.User']
});En el caso anterior, se cargarán los siguientes archivos:
- Class/view/LoginForm.js
- Class/controller/Sessions.js
- Class/model/User.js
- app/view/Welcome.js
- app/controller/Main.js
Le ayuda a identificar qué sistema operativo está utilizando, en qué navegador está trabajando y cuáles son las funciones disponibles para su entorno.
Sencha Touch proporciona diferentes funciones para obtener información específica del entorno. Todos los métodos mencionados a continuación se pueden registrar, si la condición es if (Ext.os.is.Windows) {} y se basa en la condición, las tareas se pueden realizar.
Todos los métodos siguientes devuelven un valor booleano.
Sistema operativo
Ext.os es una clase que te brinda diferentes métodos para saber en qué sistema operativo estamos trabajando.
| No Señor | Método y descripción |
|---|---|
| 1 | Ext.os.is.webOS Esta función devolverá verdadero si está utilizando el sistema operativo webos; de lo contrario, devolverá falso. |
| 2 | Ext.os.is.RIMTable Esta función devolverá verdadero si está utilizando el sistema operativo RIMTable; de lo contrario, devolverá falso. |
| 3 | Ext.os.is.Linux Esta función devolverá verdadero si está utilizando el sistema operativo Linux; de lo contrario, devolverá falso. |
| 4 | Ext.os.is.Windows Esta función devolverá verdadero si está utilizando el sistema operativo Windows; de lo contrario, devolverá falso. |
| 5 | Ext.os.is.MacOs Esta función devolverá verdadero si está utilizando el sistema operativo Mac; de lo contrario, devolverá falso. |
| 6 | Ext.os.is.BlackBerry Esta función devolverá verdadero si está utilizando el sistema operativo BlackBerry; de lo contrario, devolverá falso. |
| 7 | Ext.os.is.iOS Esta función devolverá verdadero si está utilizando el sistema operativo IOS; de lo contrario, devolverá falso. |
| 8 | Ext.os.is.Android Esta función devolverá verdadero si está utilizando el sistema operativo Android; de lo contrario, devolverá falso. |
Detección de dispositivos
| No Señor | Método y descripción |
|---|---|
| 1 | Ext.os.is.iPad Esta función devolverá verdadero si está usando iPad, de lo contrario, devolverá falso. |
| 2 | Ext.os.is.iPhone Esta función devolverá verdadero si está usando iPhone, de lo contrario, devolverá falso. |
| 3 | Ext.os.is.iPod Esta función devolverá verdadero si está utilizando iPod, de lo contrario, devolverá falso. |
Versión del sistema operativo
| No Señor | Método y descripción |
|---|---|
| 1 | Ext.os.name Devuelve el nombre del sistema operativo. |
| 2 | Ext.os.version.version Da la versión del sistema operativo que estamos usando. |
Detección del navegador
| No Señor | Método y descripción |
|---|---|
| 1 | Ext.browser.is.IE Esta función devuelve verdadero si usamos el navegador Internet Explorer; de lo contrario, devuelve falso. |
| 2 | Ext.browser.is.FF Esta función devuelve verdadero si estamos usando el navegador FireFox, de lo contrario, devuelve falso. |
| 3 | Ext.browser.is.Chrome Esta función devuelve verdadero si estamos usando el navegador Chrome; de lo contrario, devuelve falso. |
| 4 | Ext.browser.is.Opera Esta función devuelve verdadero si estamos usando el navegador Opera; de lo contrario, devuelve falso. |
| 5 | Ext.browser.is.Safari Esta función devuelve verdadero si estamos usando el navegador Safari; de lo contrario, devuelve falso. |
Esta función Ext.browser proporciona varias otras funciones:
| No Señor | Método y descripción |
|---|---|
| 1 | Ext.browser.userAgent Devuelve el userAgent actual. |
| 2 | Ext.browser.isSecure Devuelve verdadero si la página actual usa SSL. |
| 3 | Ext.browser.isStrict Devuelve verdadero si el navegador está en modo estricto. |
| 4 | Ext.browser.engineName Devuelve el nombre del motor del navegador (WebKit, Gecko, Presto, Trident y otros). |
| 5 | Ext.browser.engineVersion Devuelve la versión del motor del navegador. |
Caracteristicas
Ext.feature.has es verificar si el navegador tiene la siguiente característica o no.
| No Señor | Método y descripción |
|---|---|
| 1 | Ext.feature.has.Audio Este método devuelve verdadero si el navegador admite la función de etiqueta de audio de html5. |
| 2 | Ext.feature.has.Canvas Este método devuelve verdadero si el navegador admite la función de etiqueta de lienzo de html5. |
| 3 | Ext.feature.has.classList Este método devuelve verdadero si el navegador admite la función de lista de clases de html5 que se usa para agregar, eliminar y alternar clases css para el elemento html. |
| 4 | Ext.feature.has.Css3dTransforms Este método devuelve verdadero si el navegador admite la función de transformación 3D de CSS de css3. |
| 5 | Ext.feature.has.CssAnimations Este método devuelve verdadero si el navegador admite animaciones de css3. |
| 6 | Ext.feature.has.CssTransforms Este método devuelve verdadero si el navegador admite la función de transformación Css de css3. |
| 7 | Ext.feature.has.CssTransitions Este método devuelve verdadero si el navegador admite la función de transición de css3. |
| 8 | Ext.feature.has.DeviceMotion Este método devuelve verdadero si el navegador admite la función de movimiento del dispositivo. |
| 9 | Ext.feature.has.Geolocation Este método devuelve verdadero si el navegador admite la función de ubicación geográfica de html5. |
| 10 | Ext.feature.has.History Este método devuelve verdadero si el navegador admite la función de historial de html. |
| 11 | Ext.feature.has.Orientation Este método devuelve verdadero si el navegador puede detectar cuál es la orientación del dispositivo. |
| 12 | Ext.feature.has.OrientationChange Este método devuelve verdadero si el navegador puede detectar cambios en la Orientación del dispositivo. |
| 13 | Ext.feature.has.Range El rango es un tipo de etiqueta de entrada html para el elemento del control deslizante de rango, por lo que si el navegador admite el control deslizante, esta función devuelve verdadero. |
| 14 | Ext.feature.has.SqlDatabase La base de datos web sql es una API de página web para almacenar datos en una base de datos en la que podemos realizar operaciones de consulta. Este método devuelve verdadero si el navegador admite la base de datos Sql web. |
| 15 | Ext.feature.has.Svg Svg significa Scalable Vector Graphics, este método devuelve verdadero si el navegador admite la función svg de html 5. |
| dieciséis | Ext.feature.has.Touch Este método devuelve verdadero si el navegador tiene la función táctil. |
| 17 | Ext.feature.has.Video Este método devuelve verdadero si el navegador admite etiquetas de video html 5. |
| 18 | Ext.feature.has.Vml Vml significa lenguaje de marcado vectorial, que es un lenguaje de marcado basado en xml. Por lo tanto, este método devuelve verdadero si el navegador admite vml. |
| 19 | Ext.feature.has.WebSockets El zócalo web es básicamente un protocolo de comunicación para computadoras que admite dos comunicaciones entre clientes y servidor. Este método devuelve verdadero si el navegador es compatible con WebSockets; de lo contrario, devuelve falso. |
Los eventos son algo que se activa cuando algo le sucede a la clase. Por ejemplo, cuando se hace clic en un botón o antes / después de que se renderice un elemento.
Métodos para escribir eventos
A continuación se muestran los métodos para escribir eventos.
- Eventos integrados que utilizan oyentes.
- Adjuntar eventos más tarde
- Eventos personalizados
Eventos integrados que utilizan oyentes
Sencha Touch proporciona propiedad de escucha para escribir eventos y eventos personalizados en archivos Sencha Touch.
Oyente de escritura en Sencha Touch
Agregaremos el oyente en el programa anterior agregando la propiedad listen al panel, que se muestra a continuación:
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha', launch: function() {
Ext.create('Ext.Panel', {
html: 'My Panel', fullscreen: true, listeners: {
painted: function() {
Ext.Msg.alert('I was painted to the screen');
}
}
});
}
});
</script>
</head>
</html>Esto producirá el siguiente resultado:
De esta forma también podemos escribir varios eventos en la propiedad de los oyentes.
Varios eventos en el mismo oyente
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
var myButton = Ext.Viewport.add({
xtype: 'button',
centered: true,
text: 'Click me'
});
myButton.on({
tap: function() {
var randomWidth = 100 + Math.round(Math.random() * 200);
this.setWidth(randomWidth);
},
widthchange: function(button, newWidth, oldWidth) {
alert('My width changed from ' + oldWidth + ' to ' + newWidth);
}
});
}
});
</script>
</head>
</html>Producirá el siguiente resultado:
Adjuntando evento más tarde
En el método anterior de escribir eventos, hemos escrito eventos en oyentes en el momento de crear elementos.
La otra forma de adjuntar eventos es la siguiente:
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
var myButton = Ext.Viewport.add({
xtype: 'button',
centered: true,
text: 'Click me'
});
myButton.on('tap', function() {
alert("Event listener attached by .on");
});
}
});
</script>
</head>
</html>Producirá el siguiente resultado:
Eventos personalizados
Podemos escribir eventos personalizados en Sencha Touch y disparar los eventos con el método fireEvent. El siguiente ejemplo explica cómo escribir eventos personalizados.
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
var myButton = Ext.Viewport.add({
xtype: 'button',
centered: true,
text: "Just wait 5 seconds",
listeners: {
myEvent: function(button, points) {
alert('myEvent was fired! You score ' + points + ' points');
}
}
});
Ext.defer(function() {
var number = Math.ceil(Math.random() * 100);
myButton.fireEvent('myEvent', myButton, number);
}, 5000);
}
});
</script>
</head>
</html>Una vez que se carga la página y el documento está listo, aparecerá la página de IU con el botón y como estamos disparando un evento después de 5 segundos, una vez que el documento esté listo aparecerá el cuadro de alerta después de 5 segundos.
Aquí hemos escrito el evento personalizado 'myEvent' y estamos disparando eventos como button.fireEvent (eventName);
El diseño es la forma en que se organizan los elementos en un contenedor. Eso podría ser horizontal, vertical o cualquier otro. Sencha Touch tiene diferentes diseños definidos en su biblioteca, aunque también podemos escribir diseños personalizados.
| No Señor. | Diseño y descripción |
|---|---|
| 1 | hBox Esta disposición permite distribuir el elemento de forma horizontal. |
| 2 | vBox Esta disposición permite distribuir el elemento de forma vertical. Este es uno de los diseños más utilizados. |
| 3 | Ajuste En este diseño, el contenedor se llena con un solo panel y cuando no hay un requisito específico relacionado con el diseño, se utiliza este diseño. |
| 4 | Tarjeta (TabPanel) Este diseño organiza diferentes componentes en forma de pestaña. Las pestañas se mostrarán en la parte superior del contenedor. Cada vez, solo una pestaña es visible y cada pestaña se considera un componente diferente. |
Sencha Touch viene con soporte de historial completo e instalaciones de enlaces profundos.
Tiene la funcionalidad de botón de retroceso más simple, que ayuda al usuario a navegar entre las pantallas, sin siquiera actualizar la página o la aplicación.
También proporciona la funcionalidad de rutas, que ayuda al usuario a navegar a cualquier URL. Basado en la URL proporcionada en la ventana del navegador, llama a funciones específicas para realizar una tarea específica.
Mire el siguiente ejemplo para ver la funcionalidad del botón Atrás.
Este ejemplo muestra la lista anidada que no es más que una lista dentro de una lista, por lo que cuando hace clic en cualquiera de los elementos de la lista, se abre otra lista y aparece un botón de retroceso en la parte superior de la pantalla.
Para obtener una base de código completa, puede consultar Lista anidada en la sección de componentes de vista.
Enrutamiento
El ejemplo más simple de rutas
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
config: {
routes: {
login: 'showLogin',
'user/:id': 'userId'
}
},
showLogin: function() {
Ext.Msg.alert('This is the login page');
},
userId: function(id) {
Ext.Msg.alert('This is the login page specific to the used Id provided');
}
});En el ejemplo anterior, si la URL del navegador es https://myApp.com/#login, se llamará a la función showLogin.
Podemos proporcionar parámetros en la URL y, en función del parámetro específico, se puede llamar a la función. Por ejemplo, si la URL es https://myApp.com/#user/3, se llamará a la otra función userId y la identificación específica se puede utilizar dentro de las funciones.
Enrutamiento avanzado
En algún momento tenemos parámetros avanzados que incluyen comas, espacios en blanco y caracteres especiales, etc. para esto, si usamos la forma anterior de escribir rutas, no funcionará. Para resolver este problema, Sencha touch proporciona un enrutamiento condicional donde podemos especificar la condición de qué tipo de datos debe aceptar el parámetro.
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller', config: {
routes: {
login/:id: {
action: showLogin, conditions: {':id: "[0-9a-zA-Z\.]+" }
}
},
showLogin: function() {
Ext.Msg.alert('This is the login page with specific id which matches criteria');
}
}
});Entonces, como en el ejemplo anterior, hemos dado regex en la condición que establece claramente qué tipo de datos deben permitirse como parámetro de URL.
Compartir la misma URL en diferentes perfiles de dispositivo
Como Sencha touch proporciona un perfil de dispositivo para que se pueda usar el mismo código de aplicación en varios dispositivos, puede haber posibilidades de que diferentes perfiles tengan diferentes funciones para la misma URL.
Para resolver este problema Sencha touch nos da libertad para escribir enrutamiento en el controlador principal y la función llamada para ser escrita en todos los perfiles con sus perfiles específicos.
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller', config: {
routes: {
login: 'showLogin'
}
},
});
// For phone profile
Ext.define('MyApp.controller.phone.Main, {
extend: 'MyApp.controller.Main, showLogin: function() {
Ext.Msg.alert('This is the login page for mobile phone profile');
}
});
// For tablet profile
Ext.define('MyApp.controller.tablet.Main, {
extend: 'MyApp.controller.Main,showLogin: function() {
Ext.Msg.alert('This is the login page for tablet profile');
}
});Como muestra el ejemplo, tenemos un controlador principal que tiene la función showLogin y tenemos dos perfiles diferentes (teléfono / tableta). Tanto el perfil tiene función showLogin con código diferente específico para el perfil.
De esta manera podemos compartir la misma URL en múltiples dispositivos de perfil con sus funcionalidades específicas.
Sencha Touch proporciona la configuración XHR2 para trabajar con el desarrollo Ajax y Ajax2.
XHR2 es xmlHttpRequest nivel 2, que solía solicitar datos del servidor. Para cualquier aplicación web, los datos residen en el servidor y, una vez que se carga la página, se debe acceder a los datos desde el servidor con la ayuda de solicitudes Ajax.
XHR2 en Sencha Touch proporciona la función de barra de progreso, que muestra al usuario la cantidad de datos transferidos para una solicitud en particular. XHR2 se agregó recientemente, por lo que debemos verificar si el navegador lo admite o no.
A continuación se muestra la función para verificar si el navegador es compatible con XHR2:
if (Ext.feature.has.XHR2) {
// Here we can write functionality to work if browser supports XHR2
}Incluso podemos comprobar si la subida progresiva con XHR2 es compatible con el navegador o no.
if (Ext.feature.has.XHRUploadProgress) {
// Here we can write functionality to work if browser supports progressive uploads
}Se incluyen varias funciones nuevas de XHR2 en Sencha Touch.
| No Señor | Características y descripción |
|---|---|
| 1 | XHR2: true Esto se usa para habilitar y deshabilitar la funcionalidad XHR2 en la aplicación. |
| 2 | Ext.field.File Se agrega un nuevo campo de archivo para brindar más información sobre el tipo de campo. |
| 3 | Ext.field.FileInput Esto para proporcionar FileInput. |
| 4 | Ext.progressIndicator Esto es para proporcionar el porcentaje exacto de datos transferidos en términos de barra de progreso. |
| 5 | xtype: fileinput Para crear una instancia de la clase fileInput. |
| 6 | xtype: filefield Para crear una instancia de clase de archivo. |
| 7 | responseType : value Este parámetro permite varios tipos de respuestas como texto, documento, blob, etc. |
A continuación se muestran los ejemplos para enviar una solicitud ajax simple con y sin parámetro y cargar archivos usando ajax.
Solicitud de Ajax simple sin parámetros: éxito
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.setup({
requires: [ 'Ext.Panel', 'Ext.Button', 'Ext.form.Panel'], onReady: function() {
var request = {
url: 'https://www.tutorialspoint.com/sencha_touch/index.htm',
method: 'POST',
xhr2: true,
success: function(response) {
Ext.Msg.alert('Ajax call successful');
},
failure: function(response) {
Ext.Msg.alert('Ajax call failed');
}
};
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Ajax",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>Producirá el siguiente resultado:
El ejemplo anterior muestra la llamada ajax exitosa ya que la URL mencionada es correcta. En este ejemplo, no estamos pasando ningún parámetro, es solo una simple solicitud ajax que llega a la URL mencionada.
Si está utilizando el navegador Chrome en la herramienta para desarrolladores, navegue a la sección de red, puede ver la solicitud que se envía y la respuesta que obtenemos.
Solicitud simple de Ajax sin parámetros - Fallo
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.setup({
requires: [
'Ext.Panel',
'Ext.Button',
'Ext.form.Panel'
],
onReady: function() {
var request = {
url: 'https://www.tutorialspoint.com/sencha_touch/indexx.htm',
method: 'POST',
xhr2: true,
success: function(response) {
Ext.Msg.alert('Ajax call successful');
},
failure: function(response) {
Ext.Msg.alert('Ajax call failed');
}
};
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Ajax",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>Producirá el siguiente resultado:
En el ejemplo anterior, solo para mostrar cómo funciona la falla de ajax, hemos mencionado la URL incorrecta. Compare este y el ejemplo anterior, encontrará la diferencia.
Envío de parámetros en solicitud Ajax
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.setup({
requires: [
'Ext.Panel',
'Ext.Button',
'Ext.form.Panel'
],
onReady: function() {
var formData = new FormData();
formData.append("firstName", "Hi");
formData.append("lastName", "Reader");
// Request will be sent as part of the payload instead of standard post data
var request = {
url: 'https://www.tutorialspoint.com/sencha_touch/sencha_json.php',
method: 'POST',
xhr2: true,
data: formData,
success: function(response) {
var out = Ext.getCmp("output");
response = Ext.JSON.decode(response.responseText, true);
Ext.Msg.alert(response.message);
},
failure: function(response) {
var out = Ext.getCmp("output");
Ext.Msg.alert('Ajax failed!');
}
};
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Ajax",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>Producirá el siguiente resultado:
En este ejemplo, estamos pasando parámetros con el ajax usando la propiedad de datos de la llamada ajax.
Subiendo archivos usando Ajax
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.setup({
requires: [
'Ext.Panel',
'Ext.MessageBox',
'Ext.Button',
'Ext.ProgressIndicator',
'Ext.form.Panel',
'Ext.field.FileInput'
],
onReady: function() {
var progressIndicator = Ext.create("Ext.ProgressIndicator", {
loadingText: "Uploading: {percent}%"
});
var request = {
url: 'https://www.tutorialspoint.com/sencha_touch/sencha_json.php',
method: 'POST',
xhr2: true,
progress:progressIndicator,
success: function(response) {
Ext.Msg.alert('File uploaded successfully.');
},
failure: function(response) {
Ext.Msg.alert('File upload failed.');
}
};
Ext.Viewport.add(progressIndicator);
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"fileinput",
accept:"image/jpeg"
},
{
xtype:"button",
text: "Upload",
ui: 'confirm',
handler: function(){
var input = Ext.Viewport.down("fileinput").input;
var files = input.dom.files;
if (files.length) {
request.binaryData = files[0];
Ext.Ajax.request(request);
}else {
Ext.Msg.alert("Please Select a JPG");
}
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>Producirá el siguiente resultado:
Este ejemplo muestra cómo cargar datos usando una llamada ajax. En este ejemplo, usamos el indicador de la barra de progreso para mostrar el progreso mientras se carga el archivo.
Sencha Touch proporciona varios componentes de interfaz de usuario, que se pueden personalizar según los requisitos.
| Sr.N0. | Descripción de Componente |
|---|---|
| 1 | Carrusel Este componente de la interfaz de usuario se utiliza para mostrar carrusel. |
| 2 | Lista Este componente de la interfaz de usuario se utiliza para mostrar listas. |
| 3 | Lista anidada Este componente de la interfaz de usuario se utiliza para mostrar una lista anidada. |
| 4 | Formar Este componente de la interfaz de usuario se utiliza para mostrar formularios. |
| 5 | Gráfico Este componente de la interfaz de usuario se utiliza para mostrar diferentes tipos de gráficos. |
| 6 | Componente flotante Este componente de la interfaz de usuario se utiliza para mostrar el componente flotante. |
| 7 | Panel de pestañas Este componente de la interfaz de usuario se utiliza para mostrar la vista del panel de pestañas. |
| 8 | Vista de navegación Este componente de la interfaz de usuario se utiliza para mostrar la vista de navegación. |
| 9 | Menú de acción Este componente de la interfaz de usuario se utiliza para mostrar la barra de menú de acciones. |
| 10 | Vista de datos Este componente de la interfaz de usuario se utiliza para mostrar la vista de datos. |
| 11 | Mapa Este componente de la interfaz de usuario se utiliza para mostrar el mapa de Google. |
Sencha Touch viene con características de empaque nativas.
A continuación se muestran los enlaces para los conceptos de empaquetado nativo de Sencha Touch.
| No Señor. | Enlace de concepto y descripción |
|---|---|
| 1 | Aprovisionamiento nativo de iOS |
| 2 | API nativas |
Práctica recomendada básica de JavaScript
Es una buena práctica mantener todo el código relacionado con JavaScript en un js (external JS) archivo, en lugar de escribirlo en el <script> etiqueta debajo de la sección de encabezado o JavaScript en línea en el cuerpo del documento.
Realice siempre una comprobación nula antes de que el elemento se utilice en lógica adicional.
Siga siempre la convención de nomenclatura, ya que hace que el código sea fácil de entender por cualquier otro programador.
Para que el código sea fácilmente comprensible, siempre se prefiere escribir comentarios para los métodos JS con una lógica clara detrás de lo que hace una función.
Mejores prácticas específicas de Sencha Touch
Utilice la estructura de carpetas recomendada por Sencha Touch, que será útil durante la compresión o minificación de JS.
Se recomienda encarecidamente utilizar el oyente (onclick / onblur, etc.) en el controlador en lugar de escribirlo en la propia página html.
No cree la instancia de la tienda cuando se llame a la tienda desde la vista.
Cuando creamos una instancia de una tienda, siempre debemos destruirla, ya que afecta el rendimiento.
Mientras usa Sencha Touch, no especifique ningún otro archivo JavaScript simple. Utilice todas las funciones de las clases Ext (mencionadas en controlador o utilidades).
Cuando el mapeo del modelo y el nombre son iguales, no especifique el mapeo. Solo el nombre resolverá el propósito.
No utilice propiedades innecesarias a la vista. Utilice solo la propiedad requerida y su valor que sea diferente del valor predeterminado.