![Page 1: Créer des applications multi devices avec ExtJs 6 - …files.meetup.com/3547912/Sencha_Meetup_201505.pdfExtJs 6 un framework multi devices •Merge d’ExtJs et de Sencha Touch •2](https://reader033.vdocuments.mx/reader033/viewer/2022050301/5f6ada4208ceaf68c954a355/html5/thumbnails/1.jpg)
Créer des applications multi devices avec ExtJs 6
Sencha Paris Meetup - Mardi 12 mai 2015
Nicolas Meunier
![Page 2: Créer des applications multi devices avec ExtJs 6 - …files.meetup.com/3547912/Sencha_Meetup_201505.pdfExtJs 6 un framework multi devices •Merge d’ExtJs et de Sencha Touch •2](https://reader033.vdocuments.mx/reader033/viewer/2022050301/5f6ada4208ceaf68c954a355/html5/thumbnails/2.jpg)
Remerciements
Merci a notre sponsor KPMG pour le prêt de la salle et le buffet.
![Page 3: Créer des applications multi devices avec ExtJs 6 - …files.meetup.com/3547912/Sencha_Meetup_201505.pdfExtJs 6 un framework multi devices •Merge d’ExtJs et de Sencha Touch •2](https://reader033.vdocuments.mx/reader033/viewer/2022050301/5f6ada4208ceaf68c954a355/html5/thumbnails/3.jpg)
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)
![Page 4: Créer des applications multi devices avec ExtJs 6 - …files.meetup.com/3547912/Sencha_Meetup_201505.pdfExtJs 6 un framework multi devices •Merge d’ExtJs et de Sencha Touch •2](https://reader033.vdocuments.mx/reader033/viewer/2022050301/5f6ada4208ceaf68c954a355/html5/thumbnails/4.jpg)
Architecture ExtJs 6
Core
Classic(Ext JS)
Modern(Sencha Touch)
• Views
• Models• Stores• Controllers
…
![Page 5: Créer des applications multi devices avec ExtJs 6 - …files.meetup.com/3547912/Sencha_Meetup_201505.pdfExtJs 6 un framework multi devices •Merge d’ExtJs et de Sencha Touch •2](https://reader033.vdocuments.mx/reader033/viewer/2022050301/5f6ada4208ceaf68c954a355/html5/thumbnails/5.jpg)
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
![Page 6: Créer des applications multi devices avec ExtJs 6 - …files.meetup.com/3547912/Sencha_Meetup_201505.pdfExtJs 6 un framework multi devices •Merge d’ExtJs et de Sencha Touch •2](https://reader033.vdocuments.mx/reader033/viewer/2022050301/5f6ada4208ceaf68c954a355/html5/thumbnails/6.jpg)
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
![Page 7: Créer des applications multi devices avec ExtJs 6 - …files.meetup.com/3547912/Sencha_Meetup_201505.pdfExtJs 6 un framework multi devices •Merge d’ExtJs et de Sencha Touch •2](https://reader033.vdocuments.mx/reader033/viewer/2022050301/5f6ada4208ceaf68c954a355/html5/thumbnails/7.jpg)
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 ./
![Page 8: Créer des applications multi devices avec ExtJs 6 - …files.meetup.com/3547912/Sencha_Meetup_201505.pdfExtJs 6 un framework multi devices •Merge d’ExtJs et de Sencha Touch •2](https://reader033.vdocuments.mx/reader033/viewer/2022050301/5f6ada4208ceaf68c954a355/html5/thumbnails/8.jpg)
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
![Page 9: Créer des applications multi devices avec ExtJs 6 - …files.meetup.com/3547912/Sencha_Meetup_201505.pdfExtJs 6 un framework multi devices •Merge d’ExtJs et de Sencha Touch •2](https://reader033.vdocuments.mx/reader033/viewer/2022050301/5f6ada4208ceaf68c954a355/html5/thumbnails/9.jpg)
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
![Page 10: Créer des applications multi devices avec ExtJs 6 - …files.meetup.com/3547912/Sencha_Meetup_201505.pdfExtJs 6 un framework multi devices •Merge d’ExtJs et de Sencha Touch •2](https://reader033.vdocuments.mx/reader033/viewer/2022050301/5f6ada4208ceaf68c954a355/html5/thumbnails/10.jpg)
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
![Page 11: Créer des applications multi devices avec ExtJs 6 - …files.meetup.com/3547912/Sencha_Meetup_201505.pdfExtJs 6 un framework multi devices •Merge d’ExtJs et de Sencha Touch •2](https://reader033.vdocuments.mx/reader033/viewer/2022050301/5f6ada4208ceaf68c954a355/html5/thumbnails/11.jpg)
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
![Page 12: Créer des applications multi devices avec ExtJs 6 - …files.meetup.com/3547912/Sencha_Meetup_201505.pdfExtJs 6 un framework multi devices •Merge d’ExtJs et de Sencha Touch •2](https://reader033.vdocuments.mx/reader033/viewer/2022050301/5f6ada4208ceaf68c954a355/html5/thumbnails/12.jpg)
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
![Page 13: Créer des applications multi devices avec ExtJs 6 - …files.meetup.com/3547912/Sencha_Meetup_201505.pdfExtJs 6 un framework multi devices •Merge d’ExtJs et de Sencha Touch •2](https://reader033.vdocuments.mx/reader033/viewer/2022050301/5f6ada4208ceaf68c954a355/html5/thumbnails/13.jpg)
Vues Classic vs Modern
Classic Modern
![Page 14: Créer des applications multi devices avec ExtJs 6 - …files.meetup.com/3547912/Sencha_Meetup_201505.pdfExtJs 6 un framework multi devices •Merge d’ExtJs et de Sencha Touch •2](https://reader033.vdocuments.mx/reader033/viewer/2022050301/5f6ada4208ceaf68c954a355/html5/thumbnails/14.jpg)
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.
![Page 15: Créer des applications multi devices avec ExtJs 6 - …files.meetup.com/3547912/Sencha_Meetup_201505.pdfExtJs 6 un framework multi devices •Merge d’ExtJs et de Sencha Touch •2](https://reader033.vdocuments.mx/reader033/viewer/2022050301/5f6ada4208ceaf68c954a355/html5/thumbnails/15.jpg)
Lier les vues au ViewController
Classic Modern
![Page 16: Créer des applications multi devices avec ExtJs 6 - …files.meetup.com/3547912/Sencha_Meetup_201505.pdfExtJs 6 un framework multi devices •Merge d’ExtJs et de Sencha Touch •2](https://reader033.vdocuments.mx/reader033/viewer/2022050301/5f6ada4208ceaf68c954a355/html5/thumbnails/16.jpg)
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
![Page 17: Créer des applications multi devices avec ExtJs 6 - …files.meetup.com/3547912/Sencha_Meetup_201505.pdfExtJs 6 un framework multi devices •Merge d’ExtJs et de Sencha Touch •2](https://reader033.vdocuments.mx/reader033/viewer/2022050301/5f6ada4208ceaf68c954a355/html5/thumbnails/17.jpg)
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)
![Page 18: Créer des applications multi devices avec ExtJs 6 - …files.meetup.com/3547912/Sencha_Meetup_201505.pdfExtJs 6 un framework multi devices •Merge d’ExtJs et de Sencha Touch •2](https://reader033.vdocuments.mx/reader033/viewer/2022050301/5f6ada4208ceaf68c954a355/html5/thumbnails/18.jpg)
Vue Responsive
Quelques exemples de configurations:
• 'width < 800'
• 'width >= 800'
• 'desktop || width > 800'
• '!(desktop || width > 800)'
![Page 19: Créer des applications multi devices avec ExtJs 6 - …files.meetup.com/3547912/Sencha_Meetup_201505.pdfExtJs 6 un framework multi devices •Merge d’ExtJs et de Sencha Touch •2](https://reader033.vdocuments.mx/reader033/viewer/2022050301/5f6ada4208ceaf68c954a355/html5/thumbnails/19.jpg)
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
![Page 20: Créer des applications multi devices avec ExtJs 6 - …files.meetup.com/3547912/Sencha_Meetup_201505.pdfExtJs 6 un framework multi devices •Merge d’ExtJs et de Sencha Touch •2](https://reader033.vdocuments.mx/reader033/viewer/2022050301/5f6ada4208ceaf68c954a355/html5/thumbnails/20.jpg)
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
![Page 21: Créer des applications multi devices avec ExtJs 6 - …files.meetup.com/3547912/Sencha_Meetup_201505.pdfExtJs 6 un framework multi devices •Merge d’ExtJs et de Sencha Touch •2](https://reader033.vdocuments.mx/reader033/viewer/2022050301/5f6ada4208ceaf68c954a355/html5/thumbnails/21.jpg)
Utilisations des profiles
Desktop Phone
Active la vue Home dans : app/view/desktop Active la vue Home dans : app/view/phone
![Page 22: Créer des applications multi devices avec ExtJs 6 - …files.meetup.com/3547912/Sencha_Meetup_201505.pdfExtJs 6 un framework multi devices •Merge d’ExtJs et de Sencha Touch •2](https://reader033.vdocuments.mx/reader033/viewer/2022050301/5f6ada4208ceaf68c954a355/html5/thumbnails/22.jpg)
Utilisations des profiles
Exemple d’utilisation d’une vue:Définition de la vue d’un profile: