Sencha Touch - Guide rapide
Sencha Touch est un framework populaire de Sencha pour créer une interface utilisateur pour les applications mobiles. Il aide le développeur à créer une application mobile à l'aide de simples HTML, CSS, JS qui prend en charge de nombreux appareils mobiles tels que Android, IOS, BlackBerry et Windows. Il est basé sur l'architecture MVC. La dernière version de Sencha Touch est la 2.4.
Histoire de Sencha Touch
Après la sortie de l'autre produit de Sencha, ExtJs, destiné aux applications Web, il était nécessaire de développer un cadre qui fonctionne également sur les appareils mobiles.
La première version de Sencha Touch était la version bêta 0.9, qui prenait en charge les appareils Android et IOS. Plus tard, la première version principale de Sencha Touch version 1.0 était en novembre 2010, qui était la première version stable et supportait également les appareils Blackberry.
La dernière version de Sencha Touch est la version 2.4 publiée en juin 2015, qui prend en charge de nombreux appareils tels que Windows, Tizen avec Android, IOS, BlackBerry OS 10, Google Chrome pour Android et Safari mobile, etc.
Caractéristiques de Sencha Touch
Voici les caractéristiques les plus importantes de Sencha Touch -
Personnalisable et plus de 50 widgets d'interface utilisateur intégrés avec une collection d'interfaces utilisateur riches telles que des listes, des carrousels, des formulaires, des menus et des barres d'outils, spécialement conçus pour les plates-formes mobiles.
Compatibilité du code des nouvelles versions avec l'ancienne.
Un gestionnaire de mise en page flexible qui permet d'organiser l'affichage des données et du contenu sur plusieurs appareils mobiles avec différents systèmes d'exploitation.
Le framework comprend un package de données robuste qui peut consommer des données à partir de n'importe quelle source de données backend.
Des dispositions adaptatives, des animations et un défilement fluide pour une meilleure expérience d'application Web mobile pour l'utilisation.
Des thèmes natifs prêts à l'emploi pour chaque plate-forme majeure permettent de faire correspondre les applications Web et hybrides à l'apparence des plates-formes cibles.
Sencha Touch ─ Avantages
Sencha Touch est la principale norme pour le développement d'applications Web de niveau professionnel. Il offre les outils nécessaires pour créer des applications robustes pour la plupart des appareils mobiles fournissant une plate-forme unique pour le développement d'applications. Voici quelques-uns des avantages -
Fournit une fonction tactile réactive, permettant à l'utilisateur de naviguer facilement tout en utilisant l'application mobile.
Fournit la compatibilité avec toutes les dernières versions d'IOS, Android et Blackberry et Windows.
Fournit la vitesse la plus rapide possible pour toute application mobile.
Fournit une solution rentable avec sa compatibilité multiplateforme.
Basé sur les API natives et les langages de développement Web de base tels que HTML, CSS, JS, ce qui permet à un développeur de comprendre plus facilement Sencha Touch.
Sencha Touch ─ Limitations
L'API Sencha Touch n'a pas la capacité suivante -
L'application n'a pas accès à la caméra, aux contacts et à l'accéléromètre de l'appareil.
Il ne fournit pas la fonction de notification push. Pour cela, nous devons utiliser des websockets ou des sondages longs.
Selon la politique générale des licences publiques, il est gratuit pour les applications open source mais payant pour les applications commerciales.
Ce n'est pas bon pour les applications graphiques et d'animation hardcore telles que les applications de jeu.
Sencha Touch ─ Outils
SDK Sencha
Il s'agit du kit de développement Sencha utilisé pour créer un squelette du projet. Nous utilisons la commande «sencha -sdk path / to / touch generate app appName» pour créer une application avec le nom donné dans la commande.
Lorsque l'application est créée, vous pouvez voir les fichiers suivants dans l'application -
app - Ce dossier contient des fichiers de modèle, de vue, de contrôleur et de stockage pour l'application.
app.js- Il s'agit du fichier JS principal de votre application. À partir de ce fichier, le flux de code Sencha démarre.
app.json - Ceci est le fichier de configuration de l'application, tous les détails de configuration sont présentés ici.
index.html - Ceci est le fichier html principal dans lequel nous incluons le fichier app.js et d'autres fichiers liés à Sencha.
package.json - Ce fichier contient toutes les dépendances et autres informations liées à l'application.
resources - Ce dossier comprend tous les fichiers CSS et les images nécessaires à l'application.
Sencha CMD
Sencha CMD est un outil de ligne de commande, qui fournit les fonctionnalités de minification de code Sencha Touch, d'échafaudage, de génération de build et d'autres fonctionnalités utiles à des fins de production.
Nous utilisons la commande "Sencha app build package" dans l'invite de commande pour créer l'application pour cela. Accédez au répertoire de l'application dans l'invite de commande et tapez la commande ci-dessus. Une fois la construction réussie, nous verrons la version minifiée de l'application essentiellement utilisée à des fins de production.
Cela peut être téléchargé à partir de https://www.sencha.com/products/extjs/cmd-download/
Inspecteur Sencha
Sencha Inspector est un outil de débogage pour déboguer tout problème dans le code Sencha pendant le développement.
Configuration de l'environnement local
Cette section vous explique comment télécharger et configurer Sencha Touch sur votre appareil. Veuillez suivre les étapes pour configurer l'environnement.
Téléchargement de fichiers de bibliothèque
Téléchargez une version commerciale des fichiers de la bibliothèque Sencha Touch à partir du lien suivant https://www.sencha.com. Vous obtiendrez la version d'essai du site sur votre identifiant de messagerie enregistré, qui sera un dossier zippé nommé sencha-touch-2.4.2-commercial.
Décompressez le dossier et vous trouverez divers fichiers JavaScript et CSS à inclure dans votre application. Incluez principalement les fichiers suivants -
Javascript Files - Le fichier JS que vous pouvez trouver dans le dossier \ sencha-touch-2.4.2commercial \ touch-2.4.2 sont -
| Sr. Non | Description du fichier |
|---|---|
| 1 | sencha-touch.js Il s'agit du fichier principal qui contient toutes les fonctionnalités pour exécuter l'application. |
| 2 | sencha-touch-all.js Ce fichier contient tout le code minifié sans commentaires dans le fichier. |
| 3 | sencha-touch-debug.js Il s'agit de la version non réduite de sencha-touch-all.js à des fins de débogage. |
| 4 | sencha-touch-all-debug.js Ce fichier est également non réduit et est utilisé à des fins de développement car il contient tous les commentaires et les journaux de la console pour vérifier les erreurs / problèmes. |
Vous pouvez ajouter ces fichiers au dossier JS de vos projets ou vous pouvez fournir un chemin direct où les fichiers résident dans votre système.
CSS Files - Il existe un certain nombre de fichiers basés sur des thèmes que vous pouvez trouver dans le dossier I: \ sencha touch \ sencha-touch-2.4.2-commercial \ touch-2.4.2 \ resources \ css \ sencha-touch.css
Ces fichiers de bibliothèque seront ajoutés dans l'application Sencha Touch comme suit -
<html>
<head>
<script type = "text/javascript" src = "../sencha-touch-2.4.2-commercial/touch-2.4.2/sencha-touch-all.js"></script>
<link href = "../sencha-touch-2.4.2-commercial/touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type ="text/javascript" src = "app.js" > </script>
</head>
</html>Vous pouvez conserver le code de l'application Sencha Touch dans le fichier app.js.
Configuration CDN
CDN est un réseau de diffusion de contenu avec lequel vous n'avez pas besoin de télécharger les fichiers de la bibliothèque Sencha Touch, vous pouvez à la place ajouter directement un lien CDN pour ExtJS à votre programme comme suit -
<html>
<head>
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel="stylesheet" />
<script type = "text/javascript" src = "app.js" > </script>
</head>
</html>Rédacteurs populaires
Comme il s'agit d'un framework JavaScript utilisé pour développer des applications Web, le projet aura des fichiers HTML, JS, et pour écrire vos programmes Ext JS, vous aurez besoin d'un éditeur de texte. Il existe plusieurs IDE disponibles sur le marché. Mais pour l'instant, vous pouvez envisager l'un des éléments suivants -
Notepad - Sur une machine Windows, vous pouvez utiliser n'importe quel éditeur de texte simple tel que Notepad (recommandé pour ce tutoriel), Notepad ++.
Brackets - Un autre IDE populaire qui peut être téléchargé depuis http://brackets.io/ .
Sublime - Un autre IDE populaire qui peut être téléchargé depuis https://www.sublimetext.com/3/ .
Naming conventionest un ensemble de règles à suivre pour les identifiants. Cela rend le code facilement lisible et compréhensible pour les autres programmeurs.
La convention de dénomination dans Sencha Touch suit la convention JavaScript standard, qui n'est pas obligatoire mais une bonne pratique à suivre. Il doit suivre la syntaxe de cas de camel pour nommer la classe, la méthode, la variable et les propriétés.
Si le nom est combiné avec deux mots, le deuxième mot commencera toujours par une lettre majuscule. Par exemple, doLayout (), StudentForm, firstName, etc.
| N ° Sr. | Nom et convention |
|---|---|
| 1 | Class Name Il doit commencer par une lettre majuscule, suivie de la casse du chameau. Par exemple, StudentClass |
| 2 | Method Name Il doit commencer par une lettre minuscule, suivie de la casse du chameau. Par exemple, studentMethod () |
| 3 | Variable Name Il doit commencer par une lettre minuscule, suivie de la casse du chameau. Par exemple, studentName |
| 4 | Constant Name Il doit être uniquement en majuscules. Par exemple, COUNT, MAX_VALUE |
| 5 | Property Name Il doit commencer par une lettre minuscule, suivie de la casse du chameau. Par exemple, enableColumnResize = true |
La couche inférieure de toute application mobile est le système d'exploitation, en plus de cela, tout est construit. Ensuite, nous avons les navigateurs sur lesquels nous allons exécuter les applications. Cela pourrait être Chrome, Safari, IE n'importe quoi. La couche supérieure est une norme W3, qui est commune à tous. Sencha Touch repose ou est construit au-dessus des normes W3, qui n'est autre que HTML5, ce qui rend une seule application compatible avec différents navigateurs de différents appareils.
Sencha Touch est une combinaison de trois cadres - ExtJs, JqTouch et Raphael (dessin vectoriel). Il suit l'architecture MVC. MVC sépare le code en morceaux plus faciles à gérer.
Bien que l'architecture ne soit pas obligatoire pour le programme, il est recommandé de suivre cette structure pour rendre votre code hautement maintenable et organisé.
Structure du projet avec l'application Sencha Touch
----------src
----------resources
-------------------CSS files
-------------------Images
----------JavaScript
--------------------App Folder
-------------------------------Controller
------------------------------------Contoller.js
-------------------------------Model
------------------------------------Model.js
-------------------------------Store
------------------------------------Store.js
-------------------------------View
------------------------------------View.js
-------------------------------Utils
------------------------------------Utils.js
--------------------------------app.js
-----------HTML filesLe dossier de l'application Sencha Touch résidera dans le dossier JavaScript de votre projet.
L'application contiendra des fichiers de contrôleur, de vue, de modèle, de magasin et d'utilitaire avec app.js.
app.js- Le fichier principal à partir duquel le flux du programme démarrera. Il doit être inclus dans le fichier HTML principal en utilisant la balise <script>. L'application appelle le contrôleur de l'application pour le reste de la fonctionnalité.
Controller.js- C'est le fichier contrôleur de l'architecture Sencha Touch MVC. Il contient tout le contrôle de l'application, les écouteurs d'événements et la plupart des fonctionnalités du code. Il effectue les tâches suivantes: routage, intermédiaire entre la vue et le modèle, et exécute les événements.
View.js- Il contient la partie interface de l'application, qui apparaît à l'utilisateur. Sencha Touch utilise diverses vues riches de l'interface utilisateur, qui peuvent être étendues et personnalisées en fonction des besoins.
Store.js- Il contient les données mises en cache localement, qui doivent être rendues à la vue à l'aide d'objets de modèle. Store récupère les données à l'aide de proxys, dont le chemin est défini pour que les services récupèrent les données du backend.
Model.js- Il contient les objets qui lient les données du magasin à afficher. C'est la représentation de l'objet du monde réel, qui traite essentiellement de la base de données.
Utils.js- Il n'est pas inclus dans l'architecture MVC, mais il est recommandé de l'utiliser afin de rendre le code propre, moins complexe et plus lisible. Nous pouvons écrire des méthodes dans ce fichier et les appeler dans le contrôleur ou le moteur de rendu de vue si nécessaire. Il est également utile à des fins de réutilisation du code.
MVC signifie Model View Controller. Il s'agit d'un modèle architectural qui sépare l'application en composants logiques, ce qui la rend plus gérable.
Le diagramme suivant montre comment fonctionne l'architecture MVC -
Controller - Le contrôleur contrôle l'ensemble de l'application, il informe la vue si le modèle est modifié et effectue des actions en fonction des entrées de l'utilisateur.
View- Il contient la partie interface de l'application qui est visuelle pour l'utilisateur. Il informe le contrôleur de changer de modèle sur l'entrée de l'utilisateur.
Model- Il contient les objets qui lient les données du magasin à afficher. C'est une représentation de l'objet du monde réel qui traite essentiellement de la base de données. Il informe également le contrôleur de tout changement de vue.
Dans ce chapitre, nous allons lister les étapes pour écrire le premier programme Hello World dans Ext JS.
Étape 1
Créez une page index.htm dans un éditeur de notre choix. Incluez les fichiers de bibliothèque requis dans la section head de la page html comme suit.
index.htm
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js">
</script>
<script type = "text/javascript">
Ext.application( {
name: 'Sencha', launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true, items: [{
title: 'Home', iconCls: 'home', html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
<body>
</body>
</html>Explication
La méthode Ext.application () est le point de départ de l'application Sencha Touch. Il crée une variable globale appelée 'Sencha' déclarée avec la propriété name - toutes les classes de l'application telles que ses modèles, vues et contrôleurs résideront sous cet espace de noms unique, ce qui réduit les risques de collision entre les variables globales et les noms de fichiers.
La méthode launch () est appelée une fois que la page est prête et que tous les fichiers JavaScript sont chargés.
La méthode Ext.create () est utilisée pour créer un objet dans Sencha Touch. Ici, nous créons un objet de classe de panneau simple Ext.tab.Panel.
Ext.tab.Panel est la classe prédéfinie dans Sencha Touch pour créer un panneau.
Chaque classe Sencha Touch a des propriétés différentes pour exécuter certaines fonctionnalités de base.
La classe Ext.Panel a diverses propriétés telles que -
fullscreen La propriété est d'utiliser un écran complet, le panneau occupera donc de l'espace en plein écran.
items property est le conteneur de divers articles.
iconCls est la classe utilisée pour afficher différentes icônes.
title la propriété est de fournir le titre au panneau.
html property est le contenu html à afficher dans le panneau.
Étape 2
Ouvrez le fichier index.htm dans un navigateur standard et vous obtiendrez la sortie suivante.
La demande actuelle pour une application Web est de développer une application rapide avec moins d'efforts de développement. Sencha Touch vous aide à le faire avec facilité car il fournit un certain nombre de bibliothèques de construction parmi lesquelles choisir, en fonction du code de développement ou de production, ainsi que de la possibilité de créer une version personnalisée.
Les bibliothèques de construction Sencha Touch charge les classes de manière dynamique. Le chargement dynamique correspond aux classes qui sont chargées lorsque cela est nécessaire et seules les classes requises dans l'application seront incluses. Cela accélère l'exécution de l'application car le nombre de fichiers à charger diminue, ce qui diminue simultanément le temps de chargement.
Sencha Touch 2.x fournit les cinq bibliothèques de construction suivantes.
| N ° Sr. | Constructions et utilisation |
|---|---|
| 1 | sencha-touchdebug.js Cette version est utilisée lors du développement de l'application localement. Il s'agit d'une version non réduite avec tous les commentaires et journaux de débogage pour un débogage facile pendant le développement. |
| 2 | senchatouch.js Ce fichier est utilisé à des fins de production. C'est la version minifiée lorsque nous avons une version personnalisée. |
| 3 | sencha-touchall.js Ce fichier est utilisé à des fins de production. C'est la version minifiée lorsque nous n'avons pas de build personnalisé. |
| 4 | sencha-touchall-debug.js Ce fichier est utilisé pour le débogage en production. Il n'est pas minifié et contient tous les commentaires et les journaux de débogage. |
| 5 | sencha-touchall-compat.js Cette version est utilisée pour migrer la version 1.x vers la version 2.x. Il donne un avertissement lorsque le code de la version 1.x n'est pas compatible et nécessite une modification de code. |
Avec les builds mentionnés ci-dessus, Sencha Touch fournit une installation pour créer des builds personnalisés.
Avantages d'avoir une version personnalisée
La construction personnalisée ne charge pas tous les fichiers tactiles. Il ne charge que les fichiers que nous utilisons dans l'application, ce qui rend l'application plus rapide et facilement maintenable.
Sencha CMD est utilisé pour créer une version personnalisée. Pour créer une build personnalisée dans Sencha CMD, accédez au répertoire où réside le fichier d'application et tapez l'une des commandes suivantes pour créer une build.
| N ° Sr. | Commande et utilisation |
|---|---|
| 1 | sencha app build native Construit l'application et prépare un fichier appelé packager.temp.json que vous pouvez utiliser pour empaqueter une application - le packager.temp.json est le même que packager.json, mais contient des chemins supplémentaires. |
| 2 | sencha app build -run native Construit et conditionne automatiquement l'application, et lance le simulateur approprié. |
| 3 | sencha app build package Construit l'application avec la prise en charge de l'empaquetage, mais ne configure pas de fichier JSON du conditionneur. Ceci est utile pour les projets qui gèrent manuellement plusieurs fichiers packager.json. |
Une fois la construction réussie, elle générera le fichier all-classes.js que nous devons inclure dans notre index.html pour le rendre prêt pour la production.
Le code suivant montre les modifications à effectuer pour le code prêt pour la production.
Index.html before building application
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-debug.js"></script>
<script type = "text/javascript" src = "app.js"> </script>
</head>
<body>
</body>
</html>Index.html after building the application
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch.js"></script>
<script type = "text/javascript" src = "app.js"> </script>
<script type = "text/javascript" src = "app-classes.js"> </script>
</head>
<body>
</body>
</html>Sencha Touch est livré avec diverses rectifications de la version précédente.
Sencha Touch 2 est livré avec la version de compatibilité descendante, ce qui facilite le processus de migration de la version 1.x à 2.x.
Cette version facilite simplement le travail en fournissant un avertissement et les journaux chaque fois qu'un problème de migration se produit ou qu'une modification de code est nécessaire, afin que l'utilisateur sache où les modifications doivent être apportées, pour s'assurer que l'application fonctionne avec la dernière version.
La migration Sencha Touch 2.x nécessite les modifications de code suivantes.
Système de classe
Code in Sencha Touch 1.x -
MyApp.view.StudentPanel = Ext.extend(Ext.Panel, {
scroll: 'vertical',
html: 'Student Panel'
initComponent: function() {
Ext.getCmp('StudentIdDiv').update('This is a Student panel');
}
});Code in Sencha Touch 2.x -
Ext.define('MyApp.view.StudentPanel', {
extend: 'Ext.Panel',
config: {
scroll: 'vertical',
html: 'Student Panel'
},
initialize: function() {
Ext.getCmp('StudentIdDiv').setHtml('This is a Student panel')
}
});En regardant les deux versions, vous pouvez voir comment créer une classe est des changements qui sont maintenant inspirés par ExtJs tels que -
Ext.extend est remplacé par Ext.define.
Tous les paramètres de configuration liés à la classe sont maintenant définis sous le paramètre config.
L'initComponent est remplacé par la méthode initialize ().
Dans Sencha Touch 2.x, nous pouvons avoir des fonctions setHtml () et getHtml () pour mettre à jour html ou pour obtenir la valeur.
Architecture MVC
Le code Sencha Touch 1.x était modulaire et basé sur l'architecture MVC. Sencha Touch 2.x suit une syntaxe différente pour l'écriture du modèle, de la vue et du contrôleur. Voyons la différence entre les fichiers de modèle, de vue et de contrôleur dans différentes versions.
Modèle
Code in Sencha Touch 1.x -
Ext.regModel('MyApp.model.StudentModel', {
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int'}
]
});Code in Sencha Touch 2.x -
Ext.define('MyApp.model.StudentModel', {
extend: 'Ext.data.Model', config: {
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int'}
]
}
});Ext.regModel est changé en Ext.define qui étend Ext.data.Model.
Tous les champs sont maintenant dans la section config en version 2.x.
Vue
Code in Sencha Touch 1.x -
Ext.Panel("studentView", {
items: [{}]
});Code in Sencha Touch 2.x -
Ext.define('MyApp.view.StudentView', {
extend: 'Ext.tab.Panel',
items: [{}]
});La vue est presque la même, le seul changement étant que le nom de la vue suit l'espace de noms de la version 2.x tel que Myapp.view.StudentView et le code est écrit dans la méthode Ext.define comme modèle.
Manette
Code in Sencha Touch 1.x -
Ext.regController("studentController", {
someMethod: function() {
alert('Method is called');
}
});Code in Sencha Touch 2.x -
Ext.define('MyApp.controller.studentController', {
extend: 'Ext.app.Controller', someMethod: function() {
alert('Method is called');
}
});Identique au modèle du contrôleur. De plus, Ext.regController est changé en Ext.define, qui étend Ext.app.Controller.
Application
Code in Sencha Touch 1.x -
Ext.application({
name: 'MyApp',
launch: function() {
Ext.create('MyApp.view.StudentView');
}
});Code in Sencha Touch 2.x -
Ext.application({
name: 'MyApp',
models: ['studentModel'],
controllers: ['studentController'],
views: ['studentView'],
stores: ['studentStore'],
launch: function() {
Ext.create('MyApp.view.Main');
}
});La principale différence entre la version 1.x et la version 2.x est que, dans la version 2.x, nous déclarons tous les modèles, vues, contrôleurs et magasins dans l'application elle-même.
Sencha Touch a divers concepts de base tels que le système de classe, l'ajax, les contrôleurs, etc.
Le tableau suivant répertorie les liens vers les concepts de base de Sencha Touch.
| N ° Sr. | Lien Concept & Description |
|---|---|
| 1 | Système de classe |
| 2 | Composants |
| 3 | Contrôleurs |
| 4 | Prise en charge de BlackBerry |
| 5 | Utilisation d'Ajax |
Le paquet de données dans Sencha Touch est responsable de l'exécution de tout type de manipulation de données, que ce soit en stockant ou en chargeant les données.
Les packages de données sont liés au modèle, au magasin et aux proxys.
| N ° Sr. | Lien Concept & Description |
|---|---|
| 1 | Model C'est la collection de données et de champs avec laquelle nous affichons toutes les valeurs sur l'interface utilisateur. La description |
| 2 | Store Il s'agit d'une collection d'instances de modèle qui stocke essentiellement les données localement. En magasin, nous écrivons tous les événements et restons les appels pour obtenir des données. La description |
| 3 | Proxy Il est essentiellement responsable du chargement des données en magasin. La plupart du temps, nous utilisons un proxy ajax pour charger les données du magasin. La description |
Sencha Touch propose un certain nombre de thèmes à utiliser dans vos applications. Vous pouvez ajouter différents thèmes à la place du thème classique et voir la différence dans la sortie en fonction de l'appareil que nous utilisons pour l'application. Cela se fait simplement en remplaçant le fichier CSS du thème comme expliqué dans l'exemple suivant.
Thème de bureau
Considérez votre toute première application Hello World. Le CSS suivant de l'application est utilisé pour le thème du bureau.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssPour voir l'effet, essayez le programme suivant -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type="text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Cela produira le résultat suivant -
Thème Windows
Considérez votre toute première application Hello World. Supprimez le CSS suivant de l'application -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAjoutez le CSS suivant pour utiliser le thème Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.cssPour voir l'effet, essayez le programme suivant -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Cela produira le résultat suivant -
Thème IOS
Considérez votre toute première application Hello World. Supprimez le CSS suivant de l'application.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAjoutez le CSS suivant pour utiliser le thème Windows
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.cssPour voir l'effet, essayez le programme suivant -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Cela produira le résultat suivant -
Thème classique IOS
Considérez votre toute première application Hello World. Supprimez le CSS suivant de l'application -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAjoutez le CSS suivant pour utiliser le thème Windows -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.cssPour voir l'effet, essayez le programme suivant -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Cela produira le résultat suivant -
Thème Android
Considérez votre toute première application Hello World. Supprimez le CSS suivant de l'application.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAjoutez le CSS suivant pour utiliser le thème Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.cssPour voir l'effet, essayez le programme suivant -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Cela produira le résultat suivant -
Thème BlackBerry
Considérez votre toute première application Hello World. Supprimez le CSS suivant de l'application.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAjoutez le CSS suivant pour utiliser le thème Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.cssPour voir l'effet, essayez le programme suivant -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Cela produira le résultat suivant -
Dans le monde des technologies d'aujourd'hui, nous avons plusieurs appareils tels que les mobiles, les tablettes, les ordinateurs de bureau et les ordinateurs portables avec différentes tailles d'écran. Par conséquent, il est nécessaire de développer des applications, qui sont accessibles à partir de tous les appareils avec une bonne apparence. Cependant, développer un code différent pour différents appareils est très long et coûteux.
Sencha Touch nous aide à cet égard, en offrant une fonction de profil d'appareil. En fonction du profil actif, les différentes dépendances seront exécutées et applicables.
Nous pouvons déclarer le profil de l'appareil lors de l'écriture d'un code d'application. Nous pouvons avoir plusieurs appareils comme -
Ext.application({
name: 'MyApp',
profiles: ['Phone', 'Tablet']
});Une fois cela fait, les profils seront chargés comme -
- MyApp.profiles.Phone.js
- MyApp.profiles.Tablet.js
Rédaction d'un profil de téléphone simple
Ext.define('Mail.profile.Phone', {
extend: 'Ext.app.Profile',
config: {
name: 'Phone',
views: ['phoneView']
},
isActive: function() {
return Ext.os.is('Phone');
}
});Écrire un profil de tablette simple
Ext.define('Mail.profile.Tablet', {
extend: 'Ext.app.Profile',
config: {
name: 'Tablet',
views: ['tableView']
},
isActive: function() {
return Ext.os.is('Tablet');
}
});Comme nous pouvons le voir dans le profil, nous avons la fonction isActive qui détermine si le périphérique particulier est actif. Si le périphérique est actif, les dépendances correspondantes seront chargées et instanciées.
Comme mentionné dans l'exemple ci-dessus, si nous utilisons un appareil téléphonique, la fonction isActive du profil de téléphone retournera true et les dépendances liées à l'appareil téléphonique seront chargées; ici phoneView sera chargé. Si l'appareil est une tablette, la fonction isActive du profil de téléphone retournera false et la fonction isActive du profil de tablette retournera true et la dépendance tabletView sera chargée.
Processus de lancement
Un autre point à noter ici est que lorsque nous avons des profils dans l'application, le chargement et l'instanciation du code de l'application se feront dans l'ordre suivant -
- Les contrôleurs sont instanciés en premier et la fonction d'initialisation de chaque contrôleur sera chargée.
- La fonction de lancement du profil sera appelée.
- La fonction de lancement de l'application sera appelée.
Les fonctions de lancement du profil et de l'application sont facultatives, donc si nous ne définissons aucune d'entre elles, elles ne seront pas appelées.
Jetez un œil au code suivant pour vérifier où et comment les différentes fonctions de lancement et d'initialisation peuvent être définies.
Fonction init du contrôleur
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
init : function (){
Ext.Msg.alert('Controller's init method');
},
config: {
refs: {
tab: '#divId
}
}
});Fonction de lancement du profil
Ext.define('Mail.profile.Tablet', {
extend: 'Ext.app.Profile',
config: {
name: 'Tablet', views: ['tableView']
},
isActive: function() {
return Ext.os.is('Tablet');
}
launch : function() {
Ext.Msg.alert('profile's launch function');
}
});Fonction de lancement de l'application
Ext.application({
name: 'Sencha', launch: function() {
Ext.Msg.alert(Application's launch function);
}
});Il existe certaines méthodes définies dans Sencha Touch pour déclarer des dépendances, l'une dans l'application et l'autre dans les classes.
Jetons un coup d'œil aux différentes façons de définir les dépendances.
Dépendances au niveau de l'application
Ici, nous déclarons toutes les dépendances lorsque nous créons Ext.application.
Ext.application({
name: 'MyApp',
views: ['StudentsView'],
models: ['StudentsModel'],
controllers: ['StudentsController'],
stores: ['StudentsStore'],
profiles: ['Phone', 'Tablet']
});Désormais, lorsque l'application est chargée, toutes les dépendances seront chargées en même temps. Le chemin des autres fichiers sera -
- MyApp.views.StudentsView
- MyApp.models.StudentsModel
- MyApp.stores.StudentsStore etc.
La méthode de déclaration ci-dessus ne charge pas seulement le fichier, elle décide également du profil à conserver comme actif. Après avoir chargé le contrôleur, il s'assure de l'instancier. Une fois les magasins chargés, il les instancie et fournit un identifiant s'il n'est pas déjà donné.
Dépendances spécifiques au profil
Lorsque nous utilisons des profils dans une application, il se peut que peu de fonctionnalités ne soient requises que pour un profil spécifique.
Les dépendances spécifiques au profil sont déclarées dans les profils eux-mêmes au lieu de la déclaration au niveau de l'application.
Ext.define('MyApp.profile.Tablet', {
extend: 'Ext.app.Profile', config: {
views: ['StudentView'], controllers: ['StudentController'], models: ['StudentModel']
}
});Les dépendances sont chargées indépendamment du profil actif ou non. Cependant, en fonction du profil actif, un traitement supplémentaire tel que l'instanciation du contrôleur et des magasins se produit.
Dépendances imbriquées
Lorsque nous avons une application plus grande, nous avons plusieurs contrôleurs, modèles, vues et magasins.
Il est toujours bon de conserver la modularité dans les applications plus importantes. Pour cela, nous pouvons définir des sous-dossiers et lors de la déclaration des dépendances, nous pouvons utiliser le nom du sous-dossier pour déclarer.
Ext.application({
name: 'MyApp',
controllers: ['Controller', 'nested.NewController'],
views: ['class.Cview', 'SView']
});Dans le cas ci-dessus, les fichiers suivants seront chargés -
- MyApp.controllers.Controller
- MyApp.controllers.nested.NewController
- MyApp.Views.Sview
- MyApp.Views.class.Cview
Dépendances externes
Nous pouvons spécifier les dépendances en dehors de l'application en donnant des noms complets des classes comme -
Ext.Loader.setPath({
'Class': 'Class'
});
Ext.application({
views: ['Class.view.LoginForm', 'Welcome'],
controllers: ['Class.controller.Sessions', 'Main'],
models: ['Class.model.User']
});Dans le cas ci-dessus, les fichiers suivants seront chargés -
- Class/view/LoginForm.js
- Class/controller/Sessions.js
- Class/model/User.js
- app/view/Welcome.js
- app/controller/Main.js
Il vous aide à identifier le système d'exploitation que vous utilisez, le navigateur sur lequel vous travaillez et les fonctionnalités disponibles pour votre environnement.
Sencha Touch propose différentes fonctions pour obtenir des informations spécifiques à l'environnement. Toutes les méthodes mentionnées ci-dessous peuvent être archivées, si la condition est if (Ext.os.is.Windows) {} et est basée sur la condition, des tâches peuvent être effectuées.
Toutes les méthodes suivantes renvoient une valeur booléenne.
Système opérateur
Ext.os est une classe qui vous donne différentes méthodes pour savoir sur quel système d'exploitation nous travaillons.
| Sr. Non | Méthode et description |
|---|---|
| 1 | Ext.os.is.webOS Cette fonction retournera true si vous utilisez le système d'exploitation webos sinon elle retourne false. |
| 2 | Ext.os.is.RIMTable Cette fonction retournera true si vous utilisez le système d'exploitation RIMTable, sinon elle renvoie false. |
| 3 | Ext.os.is.Linux Cette fonction retournera true si vous utilisez le système d'exploitation Linux, sinon elle renvoie false. |
| 4 | Ext.os.is.Windows Cette fonction retournera true si vous utilisez le système d'exploitation Windows, sinon elle renvoie false. |
| 5 | Ext.os.is.MacOs Cette fonction retournera true si vous utilisez le système d'exploitation Mac, sinon elle renvoie false. |
| 6 | Ext.os.is.BlackBerry Cette fonction retournera true si vous utilisez le système d'exploitation BlackBerry, sinon elle renvoie false. |
| sept | Ext.os.is.iOS Cette fonction retournera true si vous utilisez le système d'exploitation IOS sinon elle retourne false. |
| 8 | Ext.os.is.Android Cette fonction retournera true si vous utilisez le système d'exploitation Android, sinon elle renvoie false. |
Détection de périphérique
| Sr. Non | Méthode et description |
|---|---|
| 1 | Ext.os.is.iPad Cette fonction retournera true si vous utilisez iPad sinon elle retourne false. |
| 2 | Ext.os.is.iPhone Cette fonction retournera true si vous utilisez l'iPhone sinon elle renvoie false. |
| 3 | Ext.os.is.iPod Cette fonction retournera true si vous utilisez un iPod sinon elle renvoie false. |
Version du système d'exploitation
| Sr. Non | Méthode et description |
|---|---|
| 1 | Ext.os.name Il renvoie le nom du système d'exploitation. |
| 2 | Ext.os.version.version Il donne la version du système d'exploitation que nous utilisons. |
Détection du navigateur
| Sr. Non | Méthode et description |
|---|---|
| 1 | Ext.browser.is.IE Cette fonction renvoie true si nous utilisons le navigateur Internet Explorer, sinon elle renvoie false. |
| 2 | Ext.browser.is.FF Cette fonction renvoie true si nous utilisons le navigateur FireFox sinon elle renvoie false. |
| 3 | Ext.browser.is.Chrome Cette fonction renvoie true si nous utilisons le navigateur Chrome, sinon elle renvoie false. |
| 4 | Ext.browser.is.Opera Cette fonction renvoie true si nous utilisons le navigateur Opera, sinon elle renvoie false. |
| 5 | Ext.browser.is.Safari Cette fonction renvoie true si nous utilisons le navigateur Safari, sinon elle renvoie false. |
Cette fonction Ext.browser fournit diverses autres fonctions -
| Sr. Non | Méthode et description |
|---|---|
| 1 | Ext.browser.userAgent Il renvoie le userAgent actuel. |
| 2 | Ext.browser.isSecure Il renvoie true si la page actuelle utilise SSL. |
| 3 | Ext.browser.isStrict Il renvoie true si le navigateur est en mode strict. |
| 4 | Ext.browser.engineName Il renvoie le nom du moteur du navigateur (WebKit, Gecko, Presto, Trident et autres). |
| 5 | Ext.browser.engineVersion Il renvoie la version du moteur de navigateur. |
traits
Ext.feature.has est de vérifier si le navigateur a la fonctionnalité suivante ou non.
| Sr. Non | Méthode et description |
|---|---|
| 1 | Ext.feature.has.Audio Cette méthode renvoie true si le navigateur prend en charge la fonctionnalité de balise audio de html5. |
| 2 | Ext.feature.has.Canvas Cette méthode renvoie true si le navigateur prend en charge la fonctionnalité de balise canvas de html5. |
| 3 | Ext.feature.has.classList Cette méthode renvoie true si le navigateur prend en charge la fonctionnalité de liste de classes de html5 qui est utilisée pour ajouter, supprimer et basculer des classes css pour l'élément html. |
| 4 | Ext.feature.has.Css3dTransforms Cette méthode renvoie true si le navigateur prend en charge la fonctionnalité Css 3d Transform de css3. |
| 5 | Ext.feature.has.CssAnimations Cette méthode renvoie true si le navigateur prend en charge les animations de css3. |
| 6 | Ext.feature.has.CssTransforms Cette méthode renvoie true si le navigateur prend en charge la fonctionnalité de transformation Css de css3. |
| sept | Ext.feature.has.CssTransitions Cette méthode renvoie true si le navigateur prend en charge la fonction de transition de css3. |
| 8 | Ext.feature.has.DeviceMotion Cette méthode renvoie true si le navigateur prend en charge la fonction de mouvement de l'appareil. |
| 9 | Ext.feature.has.Geolocation Cette méthode renvoie true si le navigateur prend en charge la fonction de géolocalisation de html5. |
| dix | Ext.feature.has.History Cette méthode retourne true si le navigateur prend en charge la fonction d'historique de html. |
| 11 | Ext.feature.has.Orientation Cette méthode renvoie true si le navigateur peut détecter l'orientation de l'appareil. |
| 12 | Ext.feature.has.OrientationChange Cette méthode renvoie true si le navigateur peut détecter un changement d'orientation de l'appareil. |
| 13 | Ext.feature.has.Range Range est un type de balise d'entrée HTML pour l'élément de curseur de plage, donc si le navigateur prend en charge le curseur, cette fonction renvoie true. |
| 14 | Ext.feature.has.SqlDatabase La base de données Web sql est une API de page Web permettant de stocker des données dans une base de données sur laquelle nous pouvons effectuer des opérations de requête. Cette méthode renvoie true si le navigateur prend en charge la base de données SQL Web. |
| 15 | Ext.feature.has.Svg Svg signifie Scalable Vector Graphics, cette méthode renvoie true si le navigateur prend en charge la fonction svg de html 5. |
| 16 | Ext.feature.has.Touch Cette méthode renvoie true si le navigateur dispose de la fonction Touch. |
| 17 | Ext.feature.has.Video Cette méthode renvoie true si le navigateur prend en charge les balises vidéo html 5. |
| 18 | Ext.feature.has.Vml Vml signifie langage de balisage vectoriel qui est un langage de balisage basé sur xml. Donc, cette méthode retourne true si le navigateur prend en charge vml. |
| 19 | Ext.feature.has.WebSockets Web socket est essentiellement un protocole de communication pour les ordinateurs qui prend en charge deux communications entre les clients et le serveur. Cette méthode renvoie true si le navigateur prend en charge WebSockets, sinon elle renvoie false. |
Les événements sont quelque chose qui est déclenché lorsque quelque chose arrive à la classe. Par exemple, lorsqu'un bouton est cliqué ou avant / après le rendu d'un élément.
Méthodes d'écriture des événements
Voici les méthodes d'écriture des événements.
- Événements intégrés utilisant des écouteurs.
- Joindre des événements plus tard
- Événements personnalisés
Événements intégrés utilisant des écouteurs
Sencha Touch fournit une propriété d'écoute pour écrire des événements et des événements personnalisés dans des fichiers Sencha Touch.
Écriture de l'auditeur dans Sencha Touch
Nous ajouterons l'auditeur dans le programme précédent lui-même en ajoutant la propriété listen au panneau, comme suit -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha', launch: function() {
Ext.create('Ext.Panel', {
html: 'My Panel', fullscreen: true, listeners: {
painted: function() {
Ext.Msg.alert('I was painted to the screen');
}
}
});
}
});
</script>
</head>
</html>Cela produira le résultat suivant -
De cette façon, nous pouvons également écrire plusieurs événements dans la propriété des écouteurs.
Plusieurs événements dans le même auditeur
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
var myButton = Ext.Viewport.add({
xtype: 'button',
centered: true,
text: 'Click me'
});
myButton.on({
tap: function() {
var randomWidth = 100 + Math.round(Math.random() * 200);
this.setWidth(randomWidth);
},
widthchange: function(button, newWidth, oldWidth) {
alert('My width changed from ' + oldWidth + ' to ' + newWidth);
}
});
}
});
</script>
</head>
</html>Il produira le résultat suivant -
Joindre un événement plus tard
Dans la méthode précédente d'écriture d'événements, nous avons écrit des événements dans les écouteurs au moment de la création des éléments.
L'autre façon d'attacher des événements est la suivante -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
var myButton = Ext.Viewport.add({
xtype: 'button',
centered: true,
text: 'Click me'
});
myButton.on('tap', function() {
alert("Event listener attached by .on");
});
}
});
</script>
</head>
</html>Il produira le résultat suivant -
Événements personnalisés
Nous pouvons écrire des événements personnalisés dans Sencha Touch et déclencher les événements avec la méthode fireEvent. L'exemple suivant explique comment écrire des événements personnalisés.
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
var myButton = Ext.Viewport.add({
xtype: 'button',
centered: true,
text: "Just wait 5 seconds",
listeners: {
myEvent: function(button, points) {
alert('myEvent was fired! You score ' + points + ' points');
}
}
});
Ext.defer(function() {
var number = Math.ceil(Math.random() * 100);
myButton.fireEvent('myEvent', myButton, number);
}, 5000);
}
});
</script>
</head>
</html>Une fois la page chargée et le document prêt, la page d'interface utilisateur avec bouton apparaîtra et comme nous déclenchons un événement après 5 secondes, une fois que le document est prêt, la boîte d'alerte apparaîtra après 5 secondes.
Ici, nous avons écrit l'événement personnalisé 'myEvent' et nous déclenchons des événements en tant que button.fireEvent (eventName);
La mise en page est la façon dont les éléments sont disposés dans un conteneur. Cela peut être horizontal, vertical ou autre. Sencha Touch a différentes mises en page définies dans sa bibliothèque bien que nous puissions toujours écrire des mises en page personnalisées.
| N ° Sr. | Disposition et description |
|---|---|
| 1 | hBox Cette disposition permet à l'élément d'être distribué de manière horizontale. |
| 2 | vBox Cette disposition permet à l'élément d'être distribué de manière verticale. C'est l'une des mises en page couramment utilisées. |
| 3 | En forme Dans cette mise en page, le conteneur est rempli d'un seul panneau et lorsqu'il n'y a pas d'exigence spécifique liée à la mise en page, cette mise en page est utilisée. |
| 4 | Carte (TabPanel) Cette mise en page organise différents composants sous forme d'onglets. Les onglets seront affichés en haut du conteneur. Chaque fois qu'un seul onglet est visible et chaque onglet est considéré comme un composant différent. |
Sencha Touch est livré avec une prise en charge complète de l'historique et des fonctionnalités de liens profonds.
Il dispose de la fonctionnalité de bouton retour la plus simple, qui aide l'utilisateur à naviguer entre les écrans, sans même actualiser la page ou l'application.
Il fournit également une fonctionnalité de routes, qui aide l'utilisateur à naviguer vers n'importe quelle URL. En fonction de l'URL fournie dans la fenêtre du navigateur, il appelle des fonctions spécifiques pour effectuer une tâche spécifique.
Regardez l'exemple suivant pour la fonctionnalité du bouton retour.
Cet exemple montre la liste imbriquée qui n'est rien d'autre qu'une liste dans une liste, donc lorsque vous cliquez sur l'un des éléments de la liste, il ouvre une autre liste et un bouton de retour apparaît en haut de l'écran.
Pour une base de code complète, vous pouvez vérifier Liste imbriquée sous la section de composant de vue.
Routage
Exemple d'itinéraires le plus simple
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
config: {
routes: {
login: 'showLogin',
'user/:id': 'userId'
}
},
showLogin: function() {
Ext.Msg.alert('This is the login page');
},
userId: function(id) {
Ext.Msg.alert('This is the login page specific to the used Id provided');
}
});Dans l'exemple ci-dessus, si l'URL du navigateur est https://myApp.com/#login, la fonction showLogin sera appelée.
Nous pouvons fournir des paramètres dans l'URL et en fonction du paramètre spécifique, la fonction peut être appelée. Par exemple, si l'URL est https://myApp.com/#user/3, une autre fonction userId sera appelée et l'ID spécifique pourra être utilisé dans les fonctions.
Routage avancé
Parfois, nous avons des paramètres avancés qui incluent des virgules, des espaces vides et des caractères spéciaux, etc. pour cela, si nous utilisons la manière ci-dessus d'écrire les routes, cela ne fonctionnera pas. Pour résoudre ce problème, Sencha touch fournit un routage conditionnel où nous pouvons spécifier la condition du type de données que le paramètre doit accepter.
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller', config: {
routes: {
login/:id: {
action: showLogin, conditions: {':id: "[0-9a-zA-Z\.]+" }
}
},
showLogin: function() {
Ext.Msg.alert('This is the login page with specific id which matches criteria');
}
}
});Donc, comme dans l'exemple ci-dessus, nous avons donné regex dans la condition qui indique clairement quel type de données doit être autorisé en tant que paramètre d'URL.
Partage de la même URL sur différents profils d'appareils
Comme Sencha touch fournit un profil de périphérique afin que le même code d'application puisse être utilisé sur plusieurs périphériques, il peut y avoir des possibilités que différents profils puissent avoir des fonctionnalités différentes pour la même URL.
Pour résoudre ce problème, Sencha touch nous donne la liberté d'écrire le routage dans le contrôleur principal et la fonction appelée à écrire dans tout le profil avec leurs profils spécifiques.
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller', config: {
routes: {
login: 'showLogin'
}
},
});
// For phone profile
Ext.define('MyApp.controller.phone.Main, {
extend: 'MyApp.controller.Main, showLogin: function() {
Ext.Msg.alert('This is the login page for mobile phone profile');
}
});
// For tablet profile
Ext.define('MyApp.controller.tablet.Main, {
extend: 'MyApp.controller.Main,showLogin: function() {
Ext.Msg.alert('This is the login page for tablet profile');
}
});Comme le montre l'exemple, nous avons un contrôleur principal qui a la fonction showLogin et nous avons deux profils différents (téléphone / tablette). Le profil a une fonction showLogin avec un code différent spécifique au profil.
De cette façon, nous pouvons partager la même URL sur plusieurs appareils de profil avec leurs fonctionnalités spécifiques.
Sencha Touch fournit une configuration XHR2 pour fonctionner avec le développement Ajax et Ajax2.
XHR2 est xmlHttpRequest niveau 2, qui utilisé pour demander des données au serveur. Pour toute application Web, les données résident sur le serveur et une fois la page chargée, les données doivent être accessibles à partir du serveur à l'aide de requêtes Ajax.
XHR2 dans Sencha Touch fournit la fonction de barre de progression, qui montre à l'utilisateur la quantité de données transférées pour une demande particulière. XHR2 est nouvellement ajouté, nous devons donc vérifier si le navigateur le prend en charge ou non.
Voici la fonction pour vérifier si le navigateur prend en charge XHR2 -
if (Ext.feature.has.XHR2) {
// Here we can write functionality to work if browser supports XHR2
}Nous pouvons même vérifier si le téléchargement progressif avec XHR2 est pris en charge par le navigateur ou non.
if (Ext.feature.has.XHRUploadProgress) {
// Here we can write functionality to work if browser supports progressive uploads
}Diverses nouvelles fonctionnalités XHR2 sont incluses dans Sencha Touch.
| Sr. Non | Caractéristiques et description |
|---|---|
| 1 | XHR2: true Ceci est utilisé pour activer et désactiver la fonctionnalité XHR2 dans l'application. |
| 2 | Ext.field.File Un nouveau champ de fichier est ajouté pour donner plus de précision sur le type de champ. |
| 3 | Ext.field.FileInput Ceci pour fournir FileInput. |
| 4 | Ext.progressIndicator Il s'agit de fournir le pourcentage exact de données transférées en termes de barre de progression. |
| 5 | xtype: fileinput Pour créer une instance de la classe fileInput. |
| 6 | xtype: filefield Pour créer une instance de classe de fichier. |
| sept | responseType : value Ce paramètre autorise différents types de réponses sous forme de texte, document, blob, etc. |
Voici les exemples pour envoyer une simple requête ajax avec et sans paramètre et télécharger des fichiers à l'aide d'ajax.
Requête Ajax simple sans paramètres - Succès
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.setup({
requires: [ 'Ext.Panel', 'Ext.Button', 'Ext.form.Panel'], onReady: function() {
var request = {
url: 'https://www.tutorialspoint.com/sencha_touch/index.htm',
method: 'POST',
xhr2: true,
success: function(response) {
Ext.Msg.alert('Ajax call successful');
},
failure: function(response) {
Ext.Msg.alert('Ajax call failed');
}
};
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Ajax",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>Il produira le résultat suivant -
L'exemple ci-dessus montre le succès de l'appel ajax car l'URL mentionnée est correcte. Dans cet exemple, nous ne transmettons aucun paramètre, c'est juste une simple requête ajax qui atteint l'URL mentionnée.
Si vous utilisez le navigateur Chrome dans l'outil de développement, accédez à la section réseau, vous pouvez voir la demande qui est envoyée et la réponse que nous obtenons.
Requête Ajax simple sans paramètres - Échec
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.setup({
requires: [
'Ext.Panel',
'Ext.Button',
'Ext.form.Panel'
],
onReady: function() {
var request = {
url: 'https://www.tutorialspoint.com/sencha_touch/indexx.htm',
method: 'POST',
xhr2: true,
success: function(response) {
Ext.Msg.alert('Ajax call successful');
},
failure: function(response) {
Ext.Msg.alert('Ajax call failed');
}
};
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Ajax",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>Il produira le résultat suivant -
Dans l'exemple ci-dessus, juste pour montrer comment fonctionne l'échec ajax, nous avons mentionné la mauvaise URL. Comparez ceci et l'exemple précédent, vous trouverez la différence.
Envoi de paramètres dans la requête Ajax
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.setup({
requires: [
'Ext.Panel',
'Ext.Button',
'Ext.form.Panel'
],
onReady: function() {
var formData = new FormData();
formData.append("firstName", "Hi");
formData.append("lastName", "Reader");
// Request will be sent as part of the payload instead of standard post data
var request = {
url: 'https://www.tutorialspoint.com/sencha_touch/sencha_json.php',
method: 'POST',
xhr2: true,
data: formData,
success: function(response) {
var out = Ext.getCmp("output");
response = Ext.JSON.decode(response.responseText, true);
Ext.Msg.alert(response.message);
},
failure: function(response) {
var out = Ext.getCmp("output");
Ext.Msg.alert('Ajax failed!');
}
};
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Ajax",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>Il produira le résultat suivant -
Dans cet exemple, nous passons des paramètres avec l'ajax en utilisant la propriété data de l'appel ajax.
Télécharger des fichiers à l'aide d'Ajax
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.setup({
requires: [
'Ext.Panel',
'Ext.MessageBox',
'Ext.Button',
'Ext.ProgressIndicator',
'Ext.form.Panel',
'Ext.field.FileInput'
],
onReady: function() {
var progressIndicator = Ext.create("Ext.ProgressIndicator", {
loadingText: "Uploading: {percent}%"
});
var request = {
url: 'https://www.tutorialspoint.com/sencha_touch/sencha_json.php',
method: 'POST',
xhr2: true,
progress:progressIndicator,
success: function(response) {
Ext.Msg.alert('File uploaded successfully.');
},
failure: function(response) {
Ext.Msg.alert('File upload failed.');
}
};
Ext.Viewport.add(progressIndicator);
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"fileinput",
accept:"image/jpeg"
},
{
xtype:"button",
text: "Upload",
ui: 'confirm',
handler: function(){
var input = Ext.Viewport.down("fileinput").input;
var files = input.dom.files;
if (files.length) {
request.binaryData = files[0];
Ext.Ajax.request(request);
}else {
Ext.Msg.alert("Please Select a JPG");
}
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>Il produira le résultat suivant -
Cet exemple montre comment télécharger des données à l'aide d'un appel ajax. Dans cet exemple, nous utilisons l'indicateur de la barre de progression pour afficher la progression lors du téléchargement du fichier.
Sencha Touch fournit divers composants d'interface utilisateur, qui peuvent être personnalisés en fonction des besoins.
| Sr.N0. | Composant et description |
|---|---|
| 1 | Carrousel Ce composant d'interface utilisateur est utilisé pour afficher le carrousel. |
| 2 | liste Ce composant d'interface utilisateur est utilisé pour afficher des listes. |
| 3 | Liste imbriquée Ce composant d'interface utilisateur est utilisé pour afficher la liste imbriquée. |
| 4 | Forme Ce composant d'interface utilisateur est utilisé pour afficher les formulaires. |
| 5 | Graphique Ce composant d'interface utilisateur est utilisé pour afficher différents types de graphiques. |
| 6 | Composant flottant Ce composant d'interface utilisateur est utilisé pour afficher le composant flottant. |
| sept | Panneau d'onglets Ce composant d'interface utilisateur est utilisé pour afficher la vue du panneau Onglet. |
| 8 | Vue de navigation Ce composant d'interface utilisateur est utilisé pour afficher la vue de navigation. |
| 9 | Menu Action Ce composant d'interface utilisateur est utilisé pour afficher la barre de menus d'actions. |
| dix | Vue des données Ce composant d'interface utilisateur est utilisé pour afficher la vue des données. |
| 11 | Carte Ce composant d'interface utilisateur est utilisé pour afficher la carte google. |
Sencha Touch est livré avec des fonctionnalités d'emballage natives.
Voici les liens vers les concepts d'emballage natifs de Sencha Touch.
| N ° Sr. | Lien Concept & Description |
|---|---|
| 1 | Provisionnement iOS natif |
| 2 | API natives |
Bonnes pratiques JavaScript de base
Il est recommandé de conserver tout le code lié à JavaScript dans un js (external JS) fichier, au lieu de l'écrire dans le <script> balise sous la section d'en-tête ou JavaScript intégré dans le corps du document.
Effectuez toujours une vérification nulle avant que l'élément ne soit utilisé dans une logique ultérieure.
Suivez toujours la convention de dénomination, car elle rend le code facile à comprendre par tout autre programmeur.
Pour rendre le code facilement compréhensible, il est toujours préférable d'écrire des commentaires pour les méthodes JS avec une logique claire derrière ce que fait une fonction.
Bonnes pratiques spécifiques à Sencha Touch
Utilisez la structure de dossier recommandée par Sencha Touch, qui sera utile lors de la compression ou de la minification JS.
Il est fortement recommandé d'utiliser l'écouteur (onclick / onblur, etc.) dans le contrôleur au lieu de l'écrire dans la page html elle-même.
Ne créez pas l'instance de magasin lorsque le magasin est appelé à partir de la vue.
Lorsque nous créons une instance d'un magasin, nous devons toujours la détruire, car cela a un impact sur les performances.
Lorsque vous utilisez Sencha Touch, ne spécifiez aucun autre fichier JavaScript simple. Utilisez toutes les fonctions des classes Ext (mentionnées dans controller ou utils).
Lorsque le mappage du modèle et le nom sont identiques, ne spécifiez pas le mappage. Seul le nom résoudra le but.
N'utilisez pas de propriétés inutiles dans la vue. N'utilisez que la propriété requise et sa valeur différente de la valeur par défaut.