Aplicación web para iPhone con Html 5
Sencha Touch es un marco de Javascript creado por Sencha desarrollar aplicaciones orientadas a dispositivos modernos con pantallas táctiles y multitáctiles. Las solicitudes escritas en Sencha son una alternativa válida para quienes no están familiarizados conC objetivo, Appe lenguaje, y quiere desarrollarse en iPad es iPhone.
El Sencha es compatible con navegadores. HTML 5 de iPhone, iPad y Android. Sencha Touch permite a los desarrolladores explotar sus conocimientos para desarrollar aplicaciones similares a las nativas, utilizando tecnologías como HTML y CSS sin el uso de herramientas de desarrollo propietarias.
Las ventajas son considerables: todos los dispositivos presentes y futuros compatibles con Html 5 podrán utilizar nuestra aplicación y no es necesario pasar por los marketplaces oficiales para publicar nuestra aplicación.
Sin embargo, Sencha Touch todavía está en beta y, a pesar de ser estable y completo, también puede variar antes del lanzamiento oficial. Por el momento, el marco le permite aprovechar todas las funciones disponibles en el teléfono.
Configuración del entorno de desarrollo
Elegimos el editor de código, un navegador de desarrollo (Safari o Chrome), instalamos cualquier servidor web y descargamos el paquete Sencha Touch del sitio web oficial. El paquete es de 23 MB: además de la librería ext-touch en versión de depuración y producción, está lleno de ejemplos y documentación útil para empezar a desarrollar en Sencha Touch.
Si disponemos de un iPhone u otro smartphone compatible, cargamos uno de los ejemplos en la carpeta del navegador de nuestro dispositivo ejemplos para comenzar a explorar el marco.
Creemos nuestro primer archivo
Ahora creemos un archivo HTML 5 con Sencha Touch. Para el desarrollo usaremos la librería en versión debug: que nos permitirá identificar inmediatamente cualquier error a costa de una pequeña disminución en el rendimiento de nuestra aplicación. Aquí está nuestro archivo:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="Text/html; charset=utf-8"> <title>La mia prima Applicazione Sencha</title> <!--CSS Sencha Touch--> <link rel="stylesheet" href="https://www.informarea.it/web-app-per-iphone-con-html-5/sencha-touch/resources/css/ext-touch.css" type="text/css"> <!--Il tuo CSS--> <link rel="stylesheet" href="css/main.css" type="text/css"> <!--Javascript Sencha Touch--> <script type="text/javascript" src="sencha-touch/ext-debug.js"></script> <!--il Javascript della nostra applicazione--> <script type="text/javascript" src="js/index.js"></script> </head> <body> </body> </html>
El cuerpo está y permanecerá vacío: será Sencha quien creará los elementos de la página gracias a Javascript. También notamos el Encabezado HTML 5 y que, en orden, hemos insertado el Sencha CSS, nuestro eventual Css (que siempre debe seguir al Sencha), el Javascript de la biblioteca y nuestro archivo Javascript crearemos la aplicación.
Ext.setup({
onReady: function(){
new Ext.TabPanel({
fullscreen: true,
type:'dark',
sortable:true,
items:[{
title:'Tab 1',
html:'Questa è la prima tab della nostra applicazione',
cls:'card card5'
},
{
title:'Tab 2',
html:'Questa è la seconda tab della nostra applicazione e al suo interno c'è<a href="http://www.google.com">un link</a>',
cls:'card card4'
},
{
title:'Tab 3',
html:'<p>La terza tab contiene un'immagine</p><img src="images/logo.png" />',
cls:'card card3'
}]
});
}
});
Hemos creado un TabPanel con tres pestañas que podemos rellenar con el HTML que nos resulte más útil. Sencha gestionará la rotación de la pantalla para que la página sea siempre coherente con la pantalla: las pestañas también se pueden arrastrar y reordenar según las opciones del usuario.
Examinemos el código ingresado: la función Configuración externa () encierra todo el código. Es el que se ejecuta primero, y en su interior contiene el código que crea el nuestro. TabPanel. El TabPanel es un objeto que tiene algunas propiedades y contiene algunas artículos que, a su vez, tienen atributos, uno de los cuales es el código HTML a mostrar. El código Sencha es todo un anidamiento de elementos que luego crearán nuestro diseño.
Cada elemento se puede asociar con eventos, llamados Ajax, y el todo representa nuestra aplicación. Veamos otro ejemplo que aclare mejor el funcionamiento de este «anidando«:
Ext.setup({
onReady.function(){
new Ext.TabPanel({
fullscreen: true,
...
Dentro de nuestro TabPanel, las pestañas ahora están ubicadas en la parte inferior y contienen botones. Se inserta una barra de herramientas dentro del TabPanel y en los botones podemos insertar acciones o, como se hace para el botón de pestaña a continuación, un icono de notificación que contiene un pequeño texto o incluso solo un número. Repasemos también este fragmento de código y luego pasemos a algo más interesante.
Como podemos ver, el anidamiento aquí está más presente que arriba. El bar dockedItems contiene varios botones. En el botón Hogar está asociado con un controlador que lanza un alerta () al usuario. El código de la pestaña es prácticamente el mismo que en el ejemplo anterior, la diferencia radica en este fragmento de código:
tabBar:{
dock:'bottom',
layout:{
pack:'center'
}
},
Estas pocas líneas indican al TabPanel no usar el estilo predeterminado, sino colocar el muelle en la parte inferior y recoge los iconos en el centro de la barra. Como dijimos anteriormente, es importante utilizar la documentación para navegar por el mar de opciones presentes para cada componente. Partir de los ejemplos incluidos en la descarga y estudiar el código es un excelente punto de partida para quienes quieran desarrollar en Sencha.
Twitter en la palma de tu mano
Veamos cómo crear un pequeño cliente de Twitter con Sencha y le Abejas jsonp de Gorjeo. Nuestro ejemplo hará una búsqueda y mostrará los tweets en una lista con avatar y apodo, usando algunas líneas de CSS personalizado:
Ext.setup ({onReady.function () {var toolbar = new Ext.Toolbar ({dock: 'top', xtype: 'toolbar', title: 'Twitter'}); var twitter = new Ext.Component ({title : 'Twitter', cls: 'timeline', scroll: 'vertical', tpl:[
'<tpl for=".">',
....
L’esempio è di poche righe ma d’effetto. Sencha Touch arriva sui nostri computer già dotato di numerose utility per richiamare Ajax, tra cui Ext.util.JSONP. request che abbiamo usato in questo caso. La chiamata alle Api di Twitter è gestita in poche righe di codice. Aggiorneremo poi un Ext.Component(), un componente generico di cui dobbiamo creare il markup e fornire i segnaposto per le variabili ritornate dall’utility JSONP. Come possiamo vedere da questo piccolo pezzo di risultato tornato da Twitter:
{
"profile_image_url":"http://a0.twimg.com/profile_images/1015100480/avatar_normal.jpg",
"created_at":"Thu,26 Agu 2010 17:16:47+0000",
"from_user":"informarea",
"metadata":{
"result_type":"recent"
},
"to_user_id":null,
"text":"like disperato re:http://ff.im/pL2r6",
"id":22195095101,
"from_user_id":366099,
"geo":null,
"iso_language_code":"eo",
"source":"&It;a href="http://friendfeed.com"rel="nofollow">FriendFeed&It;/a>"
}
Il tweet è composto da diverse variabili. Alcune di queste sono mappate nel nostro script, come possiamo facilmente vedere: sono l’avatar, il tweet stesso e l’autore. Vediamo ora altre pecularità di Sencha Touch da esaminare.
Geocoding e Mappe
Grazie a Sencha Touch e alle Alpi Html 5, possiamo recuperare la nostra posizione e mastrarla sulla mappa. Sencha mette a disposizione un componente dedicato all’uso delle mappe, ma dobbiamo comunque includere il file Javascript delle Api fornito da Google con il parametro ?sensor=true.
In questo modo comunichiamo a Google che stiamo richiamando le sue Api da un dispositivo dotato di sensore GPS o AGPS.
Ext.setup({
onReady: function(){
var toolbar=new Ext.Toolbar({
dock:'top',
xtype:'toolbar',
title:'Esempio Google Maps'
});
....
La mappa creata è centrata sulla nostra posizione attuale. Possiamo zoomare e navigare la mappa con gli stessi eventi multitouch di Google Maps per iPhone e interagire con le mappe attraverso le Api Google Maps: la documentazione è all’indirizzo: http://code.google.com/intl/it/apis/maps/index.html.
I Form
Aspetto cruciale delle applicazioni è permettere agli utenti di interagire con i nostri dati. Sencha Touch mette a disposizione component per form ottimizzati per i dispositivi touchscreen, che possiamo vedere in questo esempio:
var formBase={
scroll:'vertical',
url:'pagina.php',
standardSubmit: false,
items:[
{
xtype:'fieldset',
title:'Informazioni',instructions:'Compila il modulo',
defaults:{
required:true,
labelAlign:'left',
},
items:[{
xtype:'textfield',
name:'name',
label:'Nome',
autoCapitalize:false
},{
....
E’ una panoramica di quello che possiamo realizzare: i component rispecchiano i classici componenti Html più quelli che possiamo vedere sull’iPhone.
Liste Annidate
Come ultimo componente daremo un’occhiata alle liste annidate. Si tratta di una specie di wizard presente in moltissime applicazioni iPhone. Permette di affinare la selezione di un particolare valore in base ai valori precedenti:
Ext.setup({
onReady:function(){
var nestedList=new Ext.NestedList({
fullscreen:true,
items:[{
text:'Opzione A',
items:[{
text:'Opzione A.1',
customAttribute:123,
items:[{
text:'Opzione A.1.a'
},{
text:'Opzione A.1.b'
}]
}, {text: 'Option A.2', customAttribute: 389}]}, {text: 'Option B', items:[{
text:'Opzione B.1',
customAttribute:233
},{
text:'Opzione B.2',
customAttribute:2390
}]
}, {text: 'Option C', items:[{text:'OptionC1'customAttribute:903}{text:'OptionC2'customAttribute:77
El componente es adecuado para navegación horizontal y vertical.
Crear aplicación para iPad
Sencha Touch también está diseñado para desarrollar aplicaciones para la tableta de Apple. Además de los clásicos, hay componentes específicos para iPad: el cubrir, eso es caja de texto que aparecen en posiciones predefinidas. La sintaxis para el desarrollo de la aplicación para iPad es idéntica a que el marco está diseñado para estandarizar los dispositivos. Sin embargo, si necesita distinguir entre iPhone y iPad, puede confiar en la utilidad Plataforma ext., lo que permite distinguir entre los diferentes dispositivos con métodos como Ext.platform.isIphone que vuelve cierto o falso dependiendo del dispositivo en el que se encuentre.