Créer des applications multi devices avec ExtJs 6
Sencha Paris Meetup - Mardi 12 mai 2015
Nicolas Meunier
Remerciements
Merci a notre sponsor KPMG pour le prêt de la salle et le buffet.
ExtJs 6 un framework multi devices
• Merge d’ExtJs et de Sencha Touch
• 2 API• Classic (composants ExtJs)
• Modern (composants Sencha Touch)
• 3 types d’applications• Desktop (utilise l’API Classic)
• Mobile (utilise l’API Modern)
• Unisersel (API Classic et Modern en une seule application)
Architecture ExtJs 6
Core
Classic(Ext JS)
Modern(Sencha Touch)
• Views
• Models• Stores• Controllers
…
Ressources ExtJS 6
• ExtJs 6 Preview• ExtJs 6.0.0
• Sencha Cmd 6.0.0.92
Download: http://pages.sencha.com/Ext-JS-6-Early-Release.html
• Documentation: http://docs.sencha.com/extjs/6.0/
• Release prévue pour juin / juillet
Sencha Cmd
Outils en ligne de commande permettant de :
• Générer un nouveau projet
• Générer des composants du projet (model, controller…)
• Créer un server web pour tester le projet
• Créer des thèmes
• Packager une application
• Etc…
http://docs.sencha.com/cmd/index.html
Créer un nouveau projet
Commande Sencha Cmd :
Exemple :
sencha –sdk [path du sdk] generate app [nom de l’app] [path de l’app] [api]
sencha -sdk ../ext-6.0.0 generate app MyApp ./
Tester le nouveau projet
Commande Sencha Cmd (à exécuter dans le dossier de l’application)
Dans un navigateur taper l’url :
http://localhost:1841
http://localhost:1841/?device=modern
(device=modern ou classic pour forcer le type de device)
sencha web start
Architecture d’un projet
• App : dossier contenant les sources core de l’application
• Classic : vues « ExtJs » utilisées pour le mode desktop
• Modern : vues « Sencha Touch » utilisées pour le mode mobile
Créer un projet Classic
Commande Sencha Cmd pour générer un projet desktop (ExtJs) :
Exemple :
sencha –sdk [path du sdk] generate app [nom de l’app] [path de l’app] classic
sencha -sdk ../ext-6.0.0 generate app MyApp ./ classic
Créer un projet Modern
Commande Sencha Cmd pour générer un projet mobile (Sencha Touch) :
Exemple :
sencha –sdk [path du sdk] generate app [nom de l’app] [path de l’app] modern
sencha -sdk ../ext-6.0.0 generate app MyApp ./ modern
Commandes utiles
Rafraichir l’application :
Peut être nécessaire après la modification du fichier app.json
Générer un modèle:
sencha app refresh
sencha generate model User id:int,name,email
Vues Classic vs Modern
Classic Modern
Mutualiser le code avec les ViewControllers
Création du viewController (dans le code commun de l’application)
Dans les méthodes du controller, this.view donne une référence vers la vue appelante.
Lier les vues au ViewController
Classic Modern
Les outils pour des vues multi-devices
• ExtJs 5 : plugin responsivePermet de définir des règles liées à l’affichage de la vue
• Sencha Touch : profilesPermet de créer des vues spécifiques à un device (phone, tablet)
• ExtJs 6 : responsive + profileDisponible en mode Classic et Modern
Vue Responsive
Un tabPanel responsive: Les propriétés possibles :
• Landscape: orientation paysage (n’existe pas en desktop)
• Portrait: orientation portrait (n’existe pas en desktop)
• Tall: width < height
• Wide: width > height
• Width: largeur du viewport
• Height: hauteur du viewport
• Platform: (desktop, tablet, phone, touch, safari, chrome, windows, firefox, ios, android, blackberry, tizen)
Vue Responsive
Quelques exemples de configurations:
• 'width < 800'
• 'width >= 800'
• 'desktop || width > 800'
• '!(desktop || width > 800)'
Les profiles
Les profils permettent d’aller plus loin que les vues responsive, en proposant de changer de vue en fonction du device.
• Un profile correspond à un ou plusieurs device (phone, tablet, desktop)
• Permet de spécialiser une vue pour un profile
Ajouter un profile
Commande Sencha Cmd pour ajouter un profile au projet:
Exemple :
sencha generate profile device
sencha generate profile Phone
sencha generate profile Desktop
Utilisations des profiles
Desktop Phone
Active la vue Home dans : app/view/desktop Active la vue Home dans : app/view/phone
Utilisations des profiles
Exemple d’utilisation d’une vue:Définition de la vue d’un profile: