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: