Créer des applications multi devices avec ExtJs 6

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
Classic
(Ext JS)
Modern
(Sencha Touch)
Core
•
•
•
Models
Stores
Controllers
…
•
Views
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 :
sencha –sdk [path du sdk] generate app [nom de l’app] [path de l’app] [api]
Exemple :
sencha -sdk ../ext-6.0.0 generate app MyApp ./
Tester le nouveau projet
Commande Sencha Cmd (à exécuter dans le dossier de l’application)
sencha web start
Dans un navigateur taper l’url :
http://localhost:1841
http://localhost:1841/?device=modern
(device=modern ou classic pour forcer le type de device)
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) :
sencha –sdk [path du sdk] generate app [nom de l’app] [path de l’app] classic
Exemple :
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) :
sencha –sdk [path du sdk] generate app [nom de l’app] [path de l’app] modern
Exemple :
sencha -sdk ../ext-6.0.0 generate app MyApp ./ modern
Commandes utiles
Rafraichir l’application :
sencha app refresh
Peut être nécessaire après la modification du fichier app.json
Générer un modèle:
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 responsive
Permet de définir des règles liées à l’affichage de la vue
• Sencha Touch : profiles
Permet de créer des vues spécifiques à un device (phone, tablet)
• ExtJs 6 : responsive + profile
Disponible 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:
sencha generate profile device
Exemple :
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
Définition de la vue d’un profile:
Exemple d’utilisation d’une vue: