Sencha Touch le cadre des applications mobiles HTML5

Développer une application mobile nécessite de nombreuses décisions avant même que la première ligne de code ne soit écrite. Par exemple, devriez-vous aller avec une application Web ou une application native? Si oui, devriez-vous utiliser un cadre? Il n’ya pas de réponse fausse à l’une ou l’autre de ces questions, cela dépend de la situation. Aujourd'hui, nous allons parler d'une solution spécifique à ces questions: Sencha Touch.

Qu'est-ce que Sencha Touch??

De leur site web:

Sencha Touch permet à vos applications Web de ressembler à des applications natives. De superbes composants d'interface utilisateur et une gestion de données complète, tous optimisés par les normes Web HTML5 et CSS3 les plus récentes et compatibles avec les appareils Android et Apple iOS. Gardez-les sur le Web ou emballez-les pour les distribuer dans les magasins d'applications mobiles.

Les créateurs de Sencha, nouvellement nommés, ont une fois de plus créé un framework javascript vraiment puissant. Vous pouvez en savoir plus sur le cadre ici. Sencha touch peut reproduire à la perfection presque toutes les fonctionnalités de l'interface utilisateur native. À l’heure actuelle, Sencha Touch est probablement l’un des cadres d’applications Web mobiles les plus puissants et le mieux adapté pour gérer des applications Web complexes nécessitant la réplication d’une application native..

Cela étant dit, il y a encore des inconvénients, comme n'importe quoi. Pour commencer, pendant que ceci est écrit, c'est toujours en BETA. De tests personnels, je n'ai pas encore rencontré de bugs. Cela signifie également qu'ils sont encore entassés sur de nombreuses fonctionnalités du framework. Ce qui est en fait une bonne nouvelle car ce cadre est déjà incroyablement riche en fonctionnalités, mais vous pouvez toujours vous attendre à des choses comme le support de caméra à l'avenir. Mais l'accès à de telles fonctions n'est possible que si vous l'enveloppez dans PhoneGap, un autre framework permettant aux applications mobiles d'être des applications natives..

Cela soulève un autre point majeur. Un cadre d’application mobile tel que Sencha Touch convient-il même à mon projet? La réponse à cette question est difficile. Les deux solutions ont des avantages et des inconvénients et nous partons du principe que nous utilisons Sencha Touch uniquement comme une application Web:

Maintenant, vous devez décider si Sencha Touch est le bon cadre d’applications Web pour votre projet:

Sencha Touch en un coup d'oeil

  • Courbe d'apprentissage supérieure à la plupart des autres frameworks Web
  • Meilleure infrastructure d'applications Web pour les applications Web de haut niveau
  • Adapte facilement à différentes résolutions pour une compatibilité maximale avec différents iPhones, iPad et les différents téléphones Android.
  • Deux thèmes pour iOS et Android
  • HTML5 et CSS3 permettent une plus grande flexibilité
  • Excellent support pour les animations et les événements tactiles améliorés

Si tout cela vous semble intéressant pour votre projet, téléchargez-le. Si cela semble un peu excessif, vous voudrez peut-être regarder quelque chose comme jQTouch (cherchez un tutoriel bientôt).

Téléchargement de Sencha Touch

Pour télécharger une copie de Sencha Touch, rendez-vous sur leur site web, puis cliquez sur Télécharger maintenant.

Ouvrez le dossier Sencha Touch et cliquez sur des exemples. Puis cliquez sur index.html (dans le dossier des exemples)

Parcourez les exemples et explorez les différentes fonctionnalités des différentes applications. L'application la plus précieuse pour apprendre les véritables capacités de ce cadre est l'application Kitchen Sink. C'est ce que nous allons regarder:

Évier de cuisine

Explorez l'application et consultez la source de certaines choses pour comprendre le concept Sencha Touch..

Interface utilisateur

Si vous cliquez sur Interface utilisateur à gauche, un nouveau menu bien animé avec des éléments spécifiques de l'interface utilisateur vous est présenté. Bien qu'il ne semble pas qu'ils aient encore une interface coverflow, je suis sûr que c'est quelque chose que nous verrons un jour. Comme vous pouvez le constater, tous les éléments essentiels sont pris en charge. Voyons le code source des onglets pour avoir une idée du niveau de complexité de la création d'un élément d'interface utilisateur de base:

 demos.Tabs = new Ext.TabPanel (sortable: true, // Tapez longuement pour trier les éléments: [titre: 'Onglet 1', html: 'Les onglets ci-dessus sont également triables..
(touchez longuement) ', cls:' carte card5 ', titre:' Onglet 2 ', html:' Onglet 2 ', cls:' carte card4 ', titre:' Onglet 3 ', html:' Onglet 3 ', cls:' card card3 ']);

Comme vous pouvez le constater, c’est la façon habituelle de faire les choses avec ExtJS. Vous créez un nouveau composant, définissez la valeur de sortable, puis saisissez les informations nécessaires. Dans ce cas, le titre de l'onglet, son contenu et une classe identifiable. Cette puissante simplicité témoigne de la puissance de ce cadre.

Animations

Ce sont encore plus faciles. Pour animer un nouveau panneau dans le projet, voici tout ce dont vous avez réellement besoin:

 demos.Animations.slide = new Ext.Panel (html: 'Les diapositives peuvent être utilisées en tandem avec direction: "haut / bas / gauche / droite".', cls:' card card2 ');

La partie diapositive est ce qui détermine la transition que vous utilisez. Vous pouvez voir l’évier de cuisine pour plus d’exemples tels que pop, flip, cube et fade.

Je vous encourage à jouer un peu plus avec l'évier de cuisine et à analyser le code source pour tout ce qui vous intéresse. Comme cela est toujours en version bêta, il n’ya pratiquement aucune documentation à ce sujet, quelque chose d’extJS (maintenant Sencha) est un peu notoire pour.

Emballer

Maintenant que vous avez un peu plus de connaissances sur Sencha Touch, j'espère que vous pourrez l'ajouter à votre arsenal d'outils d'applications mobiles. Comme dans tout autre secteur du développement, vous devez choisir les bons outils pour le poste. Sencha Touch peut être le bon outil si vous construisez une application mobile de haut niveau via le Web. Assurez-vous simplement que votre projet convient le mieux avant d'aller plus loin. C’est tout pour le moment, laissez-moi savoir ce que vous pensez de Sencha Touch et des autres cadres dans les commentaires.!