Téléchargez et installez Sencha Cmd 6, outil indispensable permettant à votre code ExtJS de mettre en oeuvre standards de développement ainsi que processus qualité. Générez le squelette d’une application Sencha ExtJS 6. Analysez pour cette même application le rendu Web et le rendiu mobile. Comprenez le mode ‘Classic’ et le mode ‘modern’ d’ExtJS 6
prérequis
Tutoriel ExtJS : votre première application ExtJS
Objectifs
Télécharger Sencha Cmd 6
Créer un squelette d’application Web & Mobile
Programme
Partie 1 : Téléchargement Sencha Cmd 6
Partie 2 : installation Sencha Cmd 6
Partie 3 : création squelette appli web & Mobile
Durée
30min
Contexte : process et qualité de vos projets ExtJS / Touch
QUESTION : comment créer un logiciel de qualité professionnelle ? Quels sont les critères de qualité d’un logiciel ? Sencha Cmd apporte des réponses à ces questions, ce qui en fait un partenaure indispensable pour les équipes de développement d’application Sencha.
Sencha Cmd apporte les services d’une application moderne :
gestion de dépendances
optimisation de code
workflow centralisé
process de build reproductible
Squelettes d’application Web & Mobile avec ExtJS
Sencha Cmd vous permet de créer le squelette de vos applications Web et Mobile.
Toolkit
Framework Unifié : Le code commun ExtJS5 et Sencha Touch 2 a été extrait dans une librairie commune partagée par les deux frameworks.
Les spécificités Desktop et Mobile sont packagé à travers la notion de Toolkit :
— Toolkit ‘Classic’ (Code ExtJS 5)
— Toolkit ‘Modern’ (Code Touch 2)
Application universelle
l’outil Sencha Cmd 6 permet de créer des squelettes d’application type ‘Classic’, type ‘Modern’ ainsi que des applications dites ‘universelles’ : 1 seul point d’entrée (index.html) et un rendu en fonction du client Web ou Mobile ! le Microcontainer décide dynamiquement quel toolkit utiliser en fonction de certains critères.
Partie 1 : Téléchargement Sencha Cmd
Allez sur la page suivante : https://www.sencha.com/products/extjs/cmd-download/
Cliquez sur bouton ‘download’ et téléchargez l’archive correspondant à votre cas (32/64 bits) sur votre disque dur.
Ici nous avons choisi une 32 bits avec la JRE (Java Runtime Environment) incluse.
Dézippez l’archive obtenue
ça y est , le téléchargement est terminé. Reste à installer…
Partie 2 : installation
Doublez-cliquez sur l’exécutable. L’installation démarre…
Acceptez la licence
Choisissez un répertoire d’installation.
Accepter le paramétrage par défaut puis Next
ça y est : l’installation est terminée.
Analysez le répertoire d’installation. Notez la présence du programme sencha.exe qui nous servira à lancer des commandes Sencha Cmd.
Mise en oeuvre
valider que la bonne version du programme sencha.exe SDK se trouve dans votre variable d’environnement PATH Utilisateur.
en ligne de commande, lancez la commande ‘sencha’ qui permet d’avoir la version et l’ensemble des commandes et options.
Partie 3 : création squelette application ExtJS 6
Expliquez et constatez l’effet de la commande suivante :
sencha -sdk C:wampwwwlibextjs generate app Monappli C:wampwwwmonappli
Notez la création du répertoire ‘monappli’ dans WAMP
INFO : le répertoire ‘Ooverrides’ :
Redéfinir / surcharger un comportement du framework,
modifier l’implémentation d’une classe (Ex Ext.data.proxy.Proxy pour fournir un comportement spécifique pour le batch.
Modifier le code extJS après avoir trouvé un bug.
INFO : les fichiers classic.json et modern.json indexes toutes les classes utilisées et l’endroit ou ces classes se trouvent, respectivement pour les application Web et Mobile.
QUESTION : dans une ‘application universelle’ ExtJS6, expliquez la relation entre le code présent dans les 3 répertoires suivants :
1) répertoire ‘app’ présent à la racine
2) répertoire ‘src’ présent dans ‘modern’
3) répertoire ‘src’ présent dans ‘classic’
Vérifiez que WAMP est démarré puis allez sur http://localhost/monappli/
Voici le rendu sur Chrome :
Pour simuler un rendu sur Mobile, appuyez sur touche F12 et cliquez dans la console qui apparaît sur l’icone mobile en haut à gauche
En déduire le coté ‘Application Universelle’ Extjs 6 : un seul point d’entrée (index.html) mais plusieurs rendu en fonction du périphérique cible (Desktop / mobile)
Partie 4 : kit ‘modern’ et kit ‘classic’
Expliquez la différence entre les commandes suivantes :
1) sencha -sdk C:wampwwwlibextjs generate app –classic MonappliWeb C:wampwwwmonappliweb
2) sencha -sdk C:wampwwwlibextjs generate app –modern MonappliMobile C:wampwwwmonapplimobile
Quelle différence avec la commande lancée dans la partie 3 ? En particulier, expliquez la différence d’arborescence d’une application mobile avec ExtJS 6:
Conclusion
Dans ce tutoriel vous avez téléchargé, installé l’outil Sencha Cmd. Vous avez généré le squelette d’une application Web et Mobile avec Sencha Cmmd 6 et ExtJS 6.
