Worldlex Wiki Sencha Touch est une bibliothèque JavaScript d'interface utilisateur (UI) , ou framework web , conçue spécifiquement pour le web mobile . Elle permet aux développeurs web de créer des interfaces pour applications web mobiles offrant une expérience utilisateur similaire à celle des applications natives sur les appareils mobiles compatibles. Elle repose sur des standards web tels que HTML5 , CSS3 et JavaScript . L'objectif de Sencha Touch est de simplifier et d'accélérer le développement d'applications mobiles HTML5 fonctionnant sur Android , iOS , Windows , Tizen et BlackBerry , tout en leur conservant une apparence et une ergonomie natives.
Historique des versions et assistance
Sencha Touch est un produit de Sencha, né de la fusion des bibliothèques JavaScript populaires Ext JS , jQTouch et Raphaël . La première version de Sencha Touch, la version bêta 0.90, a été mise à disposition le 17 juillet 2010. Cette version bêta était compatible avec les appareils Android et iOS ( iPhone , iPod Touch et iPad ).
Par la suite, la première version stable, la 1.0, a été publiée en novembre 2010. La version 1.1.0 a ajouté la prise en charge des appareils fonctionnant sous BlackBerry OS 6.0.
La dernière version, Sencha Touch 2.4.2, a été publiée en juin 2015 et est conçue pour fonctionner sur les navigateurs et plateformes suivants :
- Navigateur Android, Google Chrome pour Android
- BlackBerry 10
- Navigateur mobile Bada
- Navigateur Kindle Fire
- Tizen
- Windows Phone 8 et Windows 8 IE10
- Safari mobile
Aucun projet de prise en charge de Firefox Mobile n'a été annoncé .
Caractéristiques
Architecture MVC
Sencha Touch suit le modèle MVC qui sépare les données de l'application, le code de contrôle et l'interface. Cette séparation permet aux applications de grande envergure d'être flexibles et faciles à maintenir.
Composants de widgets et thèmes personnalisables
Sencha Touch possède une interface de manipulation DOM intégrée qui élimine la dépendance à d'autres frameworks d' interface utilisateur comme jQuery. Il comprend un ensemble de contrôles (ou composants) d'interface utilisateur graphique (GUI ) destinés à être utilisés dans des applications web mobiles. Ces composants sont optimisés pour les entrées tactiles. Les composants sont :
- Boutons avec thèmes et effets spécifiques à l'appareil
- Éléments de formulaire tels que les champs de texte pour les e-mails
- Sélecteur de date et adresse
- Curseurs, sélecteurs et listes déroulantes
- Un composant de liste avec défilement inertiel et une barre d'index
- Un ensemble d'icônes minimaliste
- Barres d'outils et menus
- Onglets déplaçables, barres d'outils inférieures
- Un composant de carte prenant en charge les gestes multitouch tels que le pincement et le zoom
- Carrousels
Tous les composants peuvent être personnalisés en fonction de l'appareil cible. Ceci est réalisé grâce à Sass , un langage de feuilles de style basé sur CSS. Parmi les thèmes imitant les interfaces natives, on trouve Cupertino Classic (pour iOS 6.x et versions antérieures), Cupertino (pour iOS 7) et Mountain View (pour Android).
Transitions, animations et interface utilisateur adaptative
Sencha Touch propose huit effets de transition intégrés, notamment le glissement au-dessus ou en dessous de l'élément courant, l'effet pop, le retournement et l'effet cube. Il prend en charge les gestes tactiles courants basés sur les événements tactiles , qui sont des standards Web mais ne sont pris en charge que par Android , iOS et certains appareils tactiles. Ces gestes sont : toucher, double-tap, balayage, défilement et pincement.
Puisque Sencha Touch est basé sur HTML5, les mises en page qu'il propose sont extrêmement adaptatives.
Cartographie
Sencha Touch prend également en charge les composants graphiques, notamment les diagrammes circulaires, les histogrammes, les courbes, etc., avec des légendes explicatives. Ces composants offrent une interactivité telle que le pincement et le zoom. À l'instar des composants Grid d' ExtJS , Sencha Touch propose la fonctionnalité TouchGrid.
Profils
Le profilage dans Sencha Touch permet de créer différents profils adaptés à différentes tailles d'écran. Au chargement de l'application, le framework détermine le type d'appareil, et le profil correspondant détermine les composants et fonctionnalités à remplacer, ainsi que les vues et contrôleurs spécifiques à appeler, évitant ainsi au développeur de créer une application différente pour chaque type d'appareil.
Structure de répertoire d'application de base
Les applications Sencha Touch ont une structure de fichiers et de répertoires de base comme suit :
Outils et plugins pour développeurs
Sencha Touch propose des extensions pour environnements de développement intégrés (IDE) afin de simplifier le développement. Ces extensions offrent notamment la génération et la saisie semi-automatique de code , la refactorisation de code et une navigation aisée dans le code source du framework et les classes personnalisées. Sencha Touch est compatible avec les IDE les plus populaires tels que JetBrains , Visual Studio et Eclipse .
Il existe un outil de création d'applications visuelles, Sencha Architect, pour développer des applications HTML5 multiplateformes. Il offre des fonctionnalités supplémentaires telles que la personnalisation de l'interface et l'intégration de la ligne de commande .
Exemple d'utilisation
Sencha Touch facilite l'utilisation d'une carte dans votre application grâce au composant Ext.Map. L'inclusion du fichier JavaScript « Google Maps API » est essentielle au fonctionnement de l' API Google Maps .
Ext.setup() est le point de départ pour initialiser l'application, en configurant la fenêtre d'affichage et le système d'événements.
Comparaison avec les applications natives
Sencha Touch prend en charge les API PhoneGap et Apache Cordova pour l'accéléromètre , l'appareil photo, la boussole, la géolocalisation , la capture d'écran , le navigateur intégré, les médias, les notifications, l'écran de démarrage , le stockage (SQLite) , etc., fonctionnalités auparavant réservées aux applications natives. Sencha Touch exploite JavaScript pour créer la plupart des composants d'interface utilisateur et modifier dynamiquement le CSS des éléments DOM . Grâce à des moteurs JavaScript plus performants et plus rapides, les applications web offrent une fluidité quasi identique à celle des applications natives.