Tutoriel ExtJS N°2 : premières interactions utilisateur

Avec Objis, spécialiste formation ExtJS, créez votre première interaction avec l’utilisateur (démo). Comprenez un des atouts majeurs d’ExtJS par rapport à d’autres frameworks javascript : l’objet Config. Basé sur une notation JSON, il vous permet de bénéficier de paramètres par défaut des composants visuels, comme la MessageBox d’ExtJS. Il contribue également à une meilleure lisibilité de votre code ExtJS.

Prérequis

- Tutoriel ExtJS N°1 : votre première application ExtJS

Objectifs

- Comprendre 3 atouts de l’objet ’config’ pour la configuration (look + comportement) composants.
- Mise en oeuvre avec ajout (look) d’une icone à un MessageBox
- Mise en oeuvre avec ajout (comportement) gestion évènements à un MessageBox

Programme

- Nos petits déjeuners ExtJS
- Introduction objet ’config’
- Partie 1 : création boite de dialogue
- Partie 2 : ajout d’une icone à boîte de dialogue
- Partie 3 : gestion évènementielle boîte de dialogue
- Pour aller plus loin

Durée

- 1h

JPG - 24.7 ko

Petit-déjeuner ExtJS 6 vendredi 25 septembre - Paris

Découvrez les opportunités offertes par le framework ExtJS 6 pour le développement de vos applications Web et Mobile.

Depuis 2009, Objis accompagne (conseil + formation) les organisations possédant un Backoffice JAVA/PHP/.NET et désireuses de créer des interfaces utilisateurs Web et Mobile à forte valeur ajoutée. Nous avons développé un savoir-faire technique et pédagogique sur Sencha ExtJS , Sencha GXT et l’éditeur Sencha Architect.

INSCRIPTION Petit-déjeuner ExtJS 6

Introduction objet config

Avec ExtJS, la configuration des composants visuels se fait avec ce qu’on appelle l’objet config’ : un objet de configuration qui vous permet de manière flexible de paramétrer le look et le comportement de vos composants visuels.

Sans l’objet config

Analyser la technique suivante :

PNG - 3.4 ko
tutoriel-extjs-objet-config-notation-ancien

Notez les inconvénients de cette notation :
— 1) Impose de connaitre l’ordre des arguments
— 2) Ne décrit pas ce que représente les arguments
— 3) N’offre aucune flexibilité pour gérer des arguments optionnels

Avec l’objet config

Analyser la technique suivante :

PNG - 5.5 ko
tutoriel-extjs-objet-config-demo

- Expliquez les avantages de cette technique.

Partie 1 : Application boite de message

- Analysez le code javascript suivant :

PNG - 10.4 ko
tutoriel-extjs-objet-config-0

son rendu est le suivant.

PNG - 3.9 ko
tutoriel-extjs-objet-config-1

- Expliquez.

Partie 2 : ajout d’une icone

Par défaut, une boîte de dialogue ne possède pas d’icône. Si nous souhaitonns ajouter une icône pour notre boîte MessageBox, nous allons utiliser (surcharger) l’attribut ’icon’ de l’objet config de notre MessageBox.

Etape 1

PNG - 3.6 ko
tutoriel-extjs-objet-config-2

Etape 2

PNG - 10.8 ko
tutoriel-extjs-objet-config-4

- Expliquez.

Le rendu est le suivant :

PNG - 5.3 ko
tutoriel-extjs-objet-config-3

- Expliquez

Partie 3 : gestion évènements

Par défaut, il n’y a aucun gestionnaire d’évènement pour notre MessageBox. Si nous souhaitonns ajouter gestionnaire d’évènement pour notre boîte MessageBox, nous allons utiliser (surcharger) l’attribut ’fn’ de l’objet config de notre MessageBox.

Le framework nous permet via le paramètre de la fonction anonyme suivante , d’avoir accès au bouton que l’utilisateur a sélectionné.

- Analysez le code suivant :

PNG - 13.5 ko
tutoriel-extjs-objet-config-5

- Expliquez le résultat :

PNG - 2.3 ko
tutoriel-extjs-objet-config-6

Nous pouvons aller plus loin dans la gestion du choix utilisateur en définissant un comportement plus dynamique. Analysez le code suivant :

PNG - 28.7 ko
tutoriel-extjs-objet-config-7

Ecran ’yes’

L’écran suivant permettrait éventuellement d’envoyer l’adresse des tutos Objis à un ami.

PNG - 3.2 ko
tutoriel-extjs-objet-config-9

- Expliquez

QUESTION : quel est le lien entre Ext.Msg et Ext.window.MessageBox ?

Ecran ’no’

PNG - 2.9 ko
tutoriel-extjs-objet-config-10

- Expliquez

Ecran ’cancel’

PNG - 3.1 ko
tutoriel-extjs-objet-config-8

- Expliquez.

Correction (démo)

Zip - 3.2 ko
TP2_objet_config

Internationalisation (I18N) en Français

Analysez le rendu suivant (libellé boutons en Français) :

PNG - 6.5 ko
extjs-i18n-demo-fr

et le code de la page index associée :

PNG - 77.3 ko
extjs-i18n-demo-fr-2

En déduire une technique pour gérer le multilingue.

Zip - 2.8 ko
TP2_objet_config_fr

JPG - 24.7 ko

Pour aller plus loin

- Choix N°1 : Notre tutoriel ExtJS N°3 "manipulation DOM avec ExtJS"

- Choix N°2 : Assistez à notre Petit-déjeuner ExtJS 6

- Choix N°3 : Inscrivez-vous à notre formation ExtJS 6

- Choix N°4 : Contactez notre expert ExtJS Douglas MBIANDOU