Sencha Touch - Sencha Touch

Touche Sencha
P14.png
Une application Sencha Touch avec un thème iOS6
Développeur(s) Sencha
Version finale
2.4.2 / 15 juin 2015 ; Il y a 6 ans ( 2015-06-15 )
Écrit en JavaScript
Système opérateur Android , iOS , BlackBerry , Kindle , Windows Phone , Tizen
Disponible en Anglais
Taper bibliothèque JavaScript
Licence GPLv3 ou commerciale
Site Internet www .sencha .com /produits /touch

Sencha Touch est une bibliothèque JavaScript d'interface utilisateur (UI) ou un framework Web , spécialement conçu pour le Web mobile . Il peut être utilisé par les développeurs Web pour développer des interfaces utilisateur pour des applications Web mobiles qui ressemblent à des applications natives sur des appareils mobiles pris en charge. Il est basé sur des standards Web tels que HTML5 , CSS3 et JavaScript . L'objectif de Sencha Touch est de faciliter le développement rapide et facile d'applications mobiles basées sur HTML5 qui s'exécutent sur les appareils Android , iOS , Windows , Tizen et BlackBerry , permettant simultanément une apparence native aux applications.

Historique des versions et assistance

Sencha Touch est un produit de Sencha, qui a été formé après la combinaison des projets de bibliothèque JavaScript populaires Ext JS , jQTouch et Raphaël . La première version de Sencha Touch, la version 0.90 bêta, a été rendue disponible le 17 juillet 2010. Cette version bêta prenait en charge les appareils fonctionnant sous Android et iOS (sur iPhone , iPod touch , iPad ).

Par la suite, la première version stable, 1.0, a été publiée en novembre 2010. La version 1.1.0 a ajouté la prise en charge des terminaux exécutant 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 plates-formes suivants :

Il n'y a pas de plans annoncés pour prendre en charge Firefox Mobile .

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 la vue. Cette séparation permet aux applications à grande échelle d'être flexibles et faciles à entretenir.

Composants de widget et thèmes personnalisables

Sencha Touch a une interface de manipulation DOM intégrée qui annule la dépendance à d'autres frameworks d' interface utilisateur comme jQuery. Il comprend un ensemble de commandes (ou composants) basées sur l' interface utilisateur graphique à utiliser dans les applications Web mobiles. Ces composants sont optimisés pour la saisie tactile. 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 dynamique et une barre d'index
  • Un jeu d'icônes minimal
  • Barres d'outils et menus
  • Onglets mobiles, barres d'outils inférieures
  • Un composant de carte avec prise en charge des gestes multi-touch tels que le pincement et le zoom
  • Carrousels

Tous les composants peuvent être thématiques en fonction de l'appareil cible. Cela se fait à l'aide de Sass , un langage de feuille de style construit sur CSS. Certains des thèmes similaires natifs sont Cupertino Classic (pour iOS6.x et versions antérieures), Cupertino (pour iOS 7) et Mountain View (pour Android).

Transitions, animations et interface utilisateur adaptative

Sencha Touch dispose de huit effets de transition intégrés, notamment un glissement sur ou sous l'élément actuel, un pop, un retournement et un cube. Il prend en charge les gestes tactiles courants créés à partir d' événements tactiles , qui sont des normes Web mais pris en charge uniquement par Android , iOS et certains appareils tactiles. Il s'agit d'appuyer, d'appuyer deux fois, de glisser, de faire défiler et de pincer.

Étant donné que Sencha touch est basé sur HTML5, les mises en page qu'il propose sont de nature extrêmement adaptative.

Cartographie

Sencha Touch prend également en charge les composants graphiques, notamment les camemberts, les graphiques à barres, les séries de lignes, etc. avec des légendes explicatives. Ces composants prennent en charge l'interactivité comme le pincement et le zoom. Tout comme les composants Grid dans ExtJS , Sencha Touch offre la fonctionnalité TouchGrid.

Profils

Le profilage dans Sencha Touch vous permet de créer différents profils adaptés à différentes tailles d'écran. Lorsque l'application est chargée, le framework détermine le type de périphérique, et son profil correspondant détermine quels composants et fonctionnalités doivent être échangés, ainsi que les vues et les contrôleurs spécifiques qui doivent être invoqués, épargnant au développeur la tâche de créer un autre application pour chaque type d'appareil.

Structure de répertoire d'application de base

Les applications Sencha Touch ont une structure de base de fichiers et de répertoires comme suit :

Répertoire/Fichier La description
application Le répertoire principal qui contient les modèles, les vues, les contrôleurs, les magasins et les profils de l'application
app.js Fichier contenant les paramètres généraux de l'application. Les références à tous les modèles, vues, contrôleurs, magasins et profils peuvent être trouvées ici. Une fois ces références chargées, la fonction principale de lancement de l'application est appelée. Cette fonction charge la première vue et peut donc être considérée comme le premier point de l'application
index.html Fichier HTML principal de l'application. Il peut s'étendre sur plusieurs pages/écrans pour l'application mobile
Ressources Répertoire contenant toutes les images, CSS et tout autre fichier externe dont l'application a besoin
app.json Fichier de configuration de l'application
packager.json Fichier utilisé pour créer des packages natifs
ext-touch.js Ceci est la bibliothèque JavaScript de Sencha (ext-touchdebug.js recommandé pendant la phase de développement)
ext-touch.css Ceci est la bibliothèque CSS de Sencha

Outils de développement et plugins

Sencha Touch fournit des plugins IDE pour faciliter le développement. Les avantages de ces plugins incluent la génération et l' auto-complétion de code , la refactorisation du code et la facilité de navigation vers la base de code du framework et les classes personnalisées. Sencha Touch a des plugins pour les IDE populaires comme JetBrains , Visual Studio et Eclipse .

Il existe un générateur d'applications visuelles, Sencha Architect, pour créer des applications HTML5 multiplateformes. Il fournit des fonctionnalités de dépendance telles que l' intégration de thèmes et de lignes de commande .

Exemple d'utilisation

Sencha Touch facilite l'utilisation d'une carte dans votre application à l'aide du composant Ext.Map. L'inclusion du fichier JavaScript "Google Maps API" est essentielle pour que l' API GoogleMaps fonctionne.

<!DOCTYPE HTML>
<html>
<head>
<title>Touch Test</title>

<!-- Sencha Touch CSS -->
<link rel="stylesheet" type="text/css"
         href="sencha-touch/resources/css/sencha-touch-debug.css" />

<!-- Google Maps API -->
<script type="text/javascript"
              src="//maps.google.com/maps/api/js?sensor=true"></script>

<!-- Sencha Touch JavaScript code -->
<script type="text/javascript" src="sencha-touch/sencha-touch-debug.js"></script>

<!-- Application script -->
<script type="text/javascript">
  Ext.setup( {
    onReady: function() {
      // create the root panel
      new Ext.Panel({
        fullscreen: true,
        items: [
          {
            xtype: "map"  
          }
        ]
      });
    }
  });
</script>

</head>

<body>
</body>
</html>

Ext.setup() est le point de départ pour initialiser l'application, configurer la fenêtre 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, InAppBrowser, les médias, les notifications, l' écran de démarrage , le stockage (SQLite) , etc. qui n'étaient auparavant accessibles qu'aux applications natives. Sencha Touch utilise JavaScript pour créer la plupart des composants de l'interface utilisateur et modifier le CSS des éléments DOM à la volée. Les moteurs JavaScript étant plus efficaces et plus rapides qu'auparavant, les applications Web s'exécutent presque aussi facilement que les applications natives.

Voir également

Les références

Bibliographie

Liens externes