Application Web pour iPhone avec Html 5

Touche Sencha est un framework Javascript créé par Sencha développer des applications orientées vers les appareils modernes avec écrans tactiles et multitouch. Les applications écrites en Sencha sont une alternative valable pour ceux qui ne connaissent pasObjective-C, le langage Appe, et il veut se développer sur iPad e iPhone.

Le Sencha est compatible avec les navigateurs HTML 5 sur iPhone, iPad et Android. Sencha Touch permet aux développeurs d'exploiter leurs connaissances pour développer des applications complètement similaires aux applications natives, en utilisant des technologies telles que HTML et CSS sans utiliser d'outils de développement propriétaires.

Les avantages sont considérables : tous les appareils actuels et futurs compatibles avec Html 5 pourront utiliser notre application et il n'est pas nécessaire de passer par les places de marché officielles pour publier notre application.

Cependant, Sencha Touch est toujours en version bêta et bien qu'il soit stable et complet, il peut également varier avant la sortie officielle. Pour le moment, le framework vous permet de profiter de toutes les fonctionnalités disponibles sur le téléphone.

Configuration de l'environnement de développement

Nous choisissons l'éditeur de code, un navigateur de développement (Safari ou Chrome), installons n'importe quel serveur Web et téléchargeons le package Sencha Touch depuis le site officiel. Le package fait 23 Mo : en plus de la bibliothèque ext-touch en version debug et production, il regorge d'exemples et de documentations utiles pour commencer à développer en Sencha Touch.

Si nous avons un iPhone ou un autre smartphone compatible disponible, chargez l'un des exemples dans le dossier du navigateur de notre appareil exemples pour commencer à explorer le cadre.

Créons notre premier fichier

Créons maintenant un fichier HTML 5 avec Sencha Touch. Pour le développement nous utiliserons la librairie en version debug : ce qui nous permettra d'identifier immédiatement d'éventuelles erreurs au prix d'une petite baisse des performances de notre application. Voici notre fichier :

Ma première application Sencha

Le corps est et restera vide : ce sera Sencha qui créera les éléments de la page grâce à Javascript. Nous notons également l'en-tête HTML 5 et que, dans l'ordre, nous avons inséré le CSS Sencha, notre éventuel Css (qui doit toujours suivre celui de Sencha), le Javascript de la bibliothèque et notre fichier Javascript nous allons créer l'application.

Ext.setup ({onReady: function () {new Ext.TabPanel ({fullscreen: true, type: 'dark', sortable: true, items: [{title: 'Tab 1', html: 'This is the first tab de notre application ', cls:' card card5 '}, {title:' Tab 2 ', html:' Ceci est le deuxième onglet de notre application et à l'intérieur il y a un lien ', cls:' card card4 '} , {title : 'Onglet 3', html : ' Le troisième onglet contient une image ', cls:' card card3 '}]}); }});

Nous avons créé un TabPanel avec trois onglets que nous pouvons remplir avec le code HTML qui nous est le plus utile. Sencha gérera la rotation de l'écran pour que la page soit toujours cohérente avec l'affichage : les onglets peuvent également être glissés et réordonnés selon les choix de l'utilisateur.

Examinons le code saisi : la fonction Ext.Setup() contient tout le code. C'est celui qui s'exécute en premier, et à l'intérieur il contient le code qui crée notre TabPanel. Le TabPanel est un objet qui possède certaines propriétés et contient des éléments qui, à leur tour, ont des attributs, dont l'un est le code HTML à afficher. Le code Sencha est tout un imbrication d'éléments qui vont ensuite créer notre mise en page.

Chaque élément peut être associé à des événements, appelés Ajax, et l'ensemble représente notre application. Voyons un autre exemple qui clarifie mieux le fonctionnement de ce "imbrication"

Ext.setup({ onReady.function(){ new Ext.TabPanel({ plein écran : vrai, ...

Au sein de notre TabPanel, les onglets sont désormais positionnés en bas et contiennent des boutons. Une barre d'outils est insérée à l'intérieur du TabPanel et sur les boutons, nous pouvons insérer des actions ou, comme pour le bouton d'onglet ci-dessous, une icône de notification contenant un petit texte ou même juste un nombre. Examinons également ce morceau de code, puis passons à quelque chose de plus intéressant.

Comme on peut le voir la nidification ici est plus présente que ci-dessus. Le bar éléments amarrés contient plusieurs boutons. Le bouton Accueil est associé à un gestionnaire qui lance une alerte () à l'utilisateur. Le code de tabulation est pratiquement le même que l'exemple précédent, la différence réside dans ce bout de code :

tabBar : {dock : 'bottom', layout : {pack : 'center'}},

Ces quelques lignes indiquent au TabPanel de ne pas utiliser le style par défaut, mais de positionner le dock en bas et de récupérer les icônes au centre de la barre. Comme nous l'avons dit plus tôt, il est important d'utiliser la documentation pour naviguer dans la mer d'options présentes pour chaque composant. Partir des exemples inclus dans le téléchargement et étudier le code est un excellent point de départ pour ceux qui souhaitent développer en Sencha.

Twitter dans la paume de votre main

Voyons comment créer un petit client Twitter avec Sencha et le API Jsonp di Twitter. Notre exemple fera une recherche et affichera les tweets dans une liste avec avatar et surnom, en utilisant quelques lignes de Css personnalisé :

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:[ ' ', ....

L'exemple est de quelques lignes mais impressionnant. Sencha Touch arrive sur nos ordinateurs déjà équipés de nombreux utilitaires pour invoquer Ajax, dont Ext.util.JSONP. demande que nous avons utilisée dans ce cas. L'appel à l'API Twitter est géré en quelques lignes de code. Nous mettrons ensuite à jour un Ext.Component(), un composant générique dont nous devons créer le balisage et fournir des espaces réservés pour les variables renvoyées par l'utilitaire JSONP. Comme on peut le voir sur ce petit bout de résultat renvoyé par Twitter :

{ "profile_image_url":"http://a0.twimg.com/profile_images/1015100480/avatar_normal.jpg", "created_at":"Jeu,26 Agu 2010 17:16:47+0000", "from_user":"Soultricks ", "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>" }

Le tweet est composé de plusieurs variables. Certains d'entre eux sont mappés dans notre script, comme nous pouvons facilement le voir : ce sont l'avatar, le tweet lui-même et l'auteur. Voyons maintenant d'autres particularités de Sencha Touch à examiner.

Géocodage et cartes

Grâce à Sencha Touch et Alpi Html 5, nous pouvons récupérer notre position et la mastrater sur la carte. Sencha fournit un composant dédié à l'utilisation des cartes, mais il nous reste à inclure le fichier API Javascript fourni par Google avec le paramètre ?sensor = vrai.

De cette façon, nous communiquons à Google que nous rappelons ses API à partir d'un appareil équipé d'un capteur GPS o AGPS.

Ext.setup({ onReady: function(){ var toolbar=new Ext.Toolbar({ dock:'top', xtype:'toolbar', title:'Esempio Google Maps' }); ....

La carte créée est centrée sur notre emplacement actuel. Nous pouvons zoomer et naviguer sur la carte avec les mêmes événements multitouch que Google Maps pour iPhone et interagir avec les cartes via le API Google Maps: la documentation est à : http://code.google.com/intl/it/apis/maps/index.html.

je forme

L'aspect crucial des applications est de permettre aux utilisateurs d'interagir avec nos données. Sencha Touch fournit des composants de formulaire optimisés pour les appareils à écran tactile, que nous pouvons voir dans cet exemple :

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 },{ ....

C'est un aperçu de ce que nous pouvons réaliser : les composants reflètent les composants HTML classiques plus ceux que nous pouvons voir sur l'iPhone.

Listes imbriquées

Comme dernier élément, nous examinerons les listes imbriquées. C'est une sorte d'assistant présent dans de nombreuses applications iPhone. Il permet d'affiner la sélection d'une valeur particulière en fonction des valeurs précédentes :

Ext.setup({ onReady:function(){ var nestedList=new Ext.NestedList({ fullscreen:true, items:[{ text:'Opzione A', items:[{ text:'Opzione A.1', customAttribute : 123, éléments :[{ text:'Opzione A.1.a' },{ text:'Opzione A.1.b' }] },{ text:'Opzione A.2', customAttribute:389 }] }, { text:'Opzione B', items:[{ text:'Opzione B.1', customAttribute:233 },{ text:'Opzione B.2', customAttribute:2390 }] },{ text:'Opzione C' , éléments :[{ text:'Opzione C.1', customAttribute:903 },{ text:'Opzione C.2', customAttribute:77 ....

Le composant est adapté à la navigation horizontale et verticale.

Créer une application pour iPad

Sencha Touch est également conçu pour développer des applications pour la tablette Apple. En plus des classiques, il existe des composants spécifiques pour iPad : les overlays, c'est-à-dire zone de texte qui apparaissent dans des positions prédéfinies. La syntaxe pour le développement de l'application iPad est identique car le cadre est conçu pour standardiser les appareils. Cependant, s'il est nécessaire de faire la distinction entre iPhone et iPad, vous pouvez vous fier à l'utilitaire Ext.platform, qui permet de faire la distinction entre les différents appareils avec des méthodes telles que Ext.platform.isIphone qui renvoie vrai ou faux selon l'appareil. sur lequel vous vous trouvez.