ENI SERVICE

Développer des applications multiplateformes avec le framework Sencha Ext JS 6.5

Par ENI SERVICE

Objectifs

  • Installer Sencha Cmd v.6.5 et les outils de debug comme Illumination, App Inspector, and Sencha Fiddle
  • Utiliser des composants tels que Grid, Data View, les arbres, et les différents types de cartes, y compris les graphiques 3D ainsi que les charts et autres
  • Faire communiquer une application Ext JS 6.5 avec le côté serveur via l'API DATA et les stores et les proxies
  • Mettre en oeuvre le routage côté client ;
  • Mettre en œuvre l'accessibilité, la localisation
  • Personnaliser les thèmes

Programme

Démarrage avec Ext JS

  • Pourquoi Ext JS ?
  • Prise en charge multi-navigateur par Ext JS
  • Composants de l'interface Rich
  • 2 types de Binding à double sens
  • Décor architectural JavaScript
  • Simplifier l'opération compliquée
  • Facilité d'accès au DOM avec Ext JS
  • Routage client-serveur
  • Support de l'accessibilité

Une introduction à Ext JS

  • L'application Universelle

Configuration d'un environnement de développement pour Ext JS 6.5

  • Sencha Cmd 6.5
  • Java Runtime Environment (JRE) 8
  • Ruby 6 ++
  • Installation Sencha Cmd 6.5

Génération de l'application avec Sencha Cmd

  • L'architecture d'application
  • Model
  • View
  • Controller
  • View model
  • View model - MainModel.js
  • Controller - MainController.js
  • View - main.js

Explorer les commandes de Sencha Cmd

  • Syntaxe et format des commandes Ext JS
  • Mise à niveau de Sencha Cmd
  • Génération d'une application
  • Construction de l'application
  • Lancement de l'application
  • La génération de code
  • Mise à niveau de votre application

Débogage d'une application Ext JS

  • Les caractéristiques de l'outil Illumination
  • Object Naming
  • Elément en surbrillance

Inspecteur d'application

  • Sencha Fiddle

Comprendre le système de classe Ext JS

  • Ext
  • application
  • define
  • create
  • onReady
  • widget
  • getClass
  • getClassName
  • Ext.Base
  • Ext.Class
  • Ext.ClassManager
  • Ext.Loader

La gestion des événements dans le monde Ext JS

  • Ajout des listeners
  • Suppression des listeners
  • La gestion des événements de nœud DOM

Accès et manipulation du DOM

  • Ext.get
  • Ext.query
  • Ext.select
    • Les sélections multiples
    • Sélection racine
    • Sélection chaînée
  • Ext.ComponentQuery

Comprendre les notions de composants, conteneurs, et layouts

  • Components
  • Containers
  • Layouts
    • updateLayout
    • suspendLayout
    • absolute layout
    • accordion layout
    • anchor layout
    • border layout
    • card layout
    • center layout
    • column layout
    • fit Layout
    • hbox layout
    • table layout
    • VBox layout

Comprendre les composants basiques

  • Ext.Button
  • Ext.MessageBox
  • Formulaire et champs de formulaire
  • Ext.form.Panel
  • Les champs de formulaire
    • Ext.form.field.Text
    • Ext.form.field.Number
    • Ext.form.field.ComboBox
    • Ext.form.field.HtmlEditor
  • Validation des champs de formulaire
  • Gestion des événements des champs de formulaire
  • Les conteneurs de champs de formulaire
    • Ext.form.CheckboxGroup
    • Ext.form.FieldContainer
    • Ext.form.RadioGroup
  • Soumettre un formulaire
  • Menus et barre d'outils

TP : Calculatrice - un exemple de projet

  • La structure du dossier projet
    • App - app.js
    • Le modèle MVC et MVVM - revisité
    • Model
    • View
    • Controller
    • ViewController et Controller
    • View model
    • View - Main.js
    • Controller - MainController.js
    • ViewModel - MainViewModel.js

La gestion des données avec l'API DATA dans le monde Ext JS

  • Model
  • Field
    • La conversion des données
    • Les Validators
    • Les relations entre model
    • Type de champs personnalisés
  • Store
  • Le stockage des données en ligne
  • Filtrer et trier les données dans les composants Ext JS

Accédez au store Ext JS

  • Accédez au store en utilisant StoreManager
  • Accédez au store en utilisant Ext.app.ViewModel
  • Evénements au sein d'un store Ext JS
  • Comprendre le store dans le ViewModel

Connaître la puissance des différents Proxy

  • Le proxy Client-Serveur
  • Le proxy Memory
  • Le proxy LocalStorage
  • Le proxy SessionStorage
  • Le proxy Serveur-Client
  • TP : Un simple projet d'application RestFull

Travailler avec les Grids dans Ext JS

  • Les Grid de base
  • Le tri
  • Rendu et affichage des Grids
  • Filtre des Grids
  • La pagination
  • Edition cellulaire
  • L'édition de ligne
  • Regroupement des données
  • Le pivot de la grille
  • TP : Le répertoire de l'entreprise - un exemple de projet

Composants avancés

  • Le composant Tree Panel
  • Le composant Tree Basic
  • Le composant Tree Grid
  • Le composant Data Views

TP : L'explorateur des photos - Une simple application - Comprendre le Drag & Drop

  • Configurer les composants Drag & Drop
  • Créer la cible pour déposer
  • Réaliser l'opération déposer sur la cible

Travailler avec les Charts dans Ext JS

  • Types de Chart dans le monde Ext JS
  • Type de Chart Cartesian
  • Type de Chart Polar
  • Type de Chart Spacefilling

Type de Chart Bar et Column

  • Type de Chart Basic Column
  • Type de Chart Bar
  • Type de Chart Stacked
  • Type de Chart 3D Bar

Type de Chart Area et Line

  • Type de Chart the Area
  • Type de Chart the Line

Type de Chart The Pie

  • Type de Chart the Basic Pie
  • Type de Chart the Donut
  • Type de Chart the 3D Pie

TP : Expense analyzer - Une simple application

Une introduction à SASS

  • La notion des Variables
  • Mixins
  • Nesting

Theming

  • Création d'un thème personnalisé
  • SASS variables
  • Création d'un nouveau composant UI utilisant mixins SASS
  • JS overrides
  • Images
  • Appliquer du style à votre application Ext JS

Responsive design

  • responsiveConfig

Pédagogie

Formation avec un formateur, qui peut être suivie selon l’une des 3 modalités ci-dessous :

1 – Dans la salle de cours en présence du formateur.

2 – Dans l’une de nos salles de cours immersives, avec le formateur présent physiquement à distance. Les salles immersives sont équipées d’un système de visio-conférence HD et complétées par des outils pédagogiques qui garantissent le même niveau de qualité.

3 – Depuis votre domicile ou votre entreprise. Vous rejoignez un environnement de formation en ligne, à l’aide de votre ordinateur, tout en étant éloigné physiquement du formateur et des autres participants. Vous êtes en totale immersion avec le groupe et participez à la formation dans les mêmes conditions que le présentiel. Pour plus d’informations : Le téléprésentiel – notre solution de formation à distance.

Le nombre de stagiaires peut varier de 1 à 12 personnes (5 à 6 personnes en moyenne), ce qui facilite le suivi permanent et la proximité avec chaque stagiaire.

Chaque stagiaire dispose d’un poste de travail adapté aux besoins de la formation, d’un support de cours et/ou un manuel de référence au format numérique ou papier (pour les sessions inter-entreprises, dans le cas où le support de cours officiel est en anglais, nous offrons en complément, s’il existe, un ouvrage de référence des Editions ENI au format numérique rédigé en français).

Pour une meilleure assimilation, le formateur alterne tout au long de la journée les exposés théoriques, les démonstrations et la mise en pratique au travers d’exercices et de cas concrets réalisés seul ou en groupe.

En début et en fin de formation, les stagiaires réalisent une auto-évaluation de leurs connaissances et compétences en lien avec les objectifs de la formation. L’écart entre les deux évaluations permet ainsi de mesurer leurs acquis.

En complément, pour les stagiaires qui le souhaitent, certaines formations peuvent être validées officiellement par un examen de certification. Les candidats à la certification doivent produire un travail personnel important en vue de se présenter au passage de l’examen, le seul suivi de la formation ne constitue pas un élément suffisant pour garantir un bon résultat et/ou l’obtention de la certification.

Pour certaines formations certifiantes (ex : ITIL, Prince2, DPO, …), le passage de l’examen de certification est inclus et réalisé en fin de formation. Les candidats sont alors préparés par le formateur au passage de l’examen tout au long de la formation.

Feuille de présence, émargée par demi-journée par chaque stagiaire et le formateur ;

Evaluation qualitative de fin de formation, qui est ensuite analysée par l’équipe pédagogique ENI ;

Attestation de fin de formation, remise au stagiaire en main propre ou par courrier électronique.

La formation est animée par un professionnel de l'informatique et de la pédagogie, dont les compétences techniques, professionnelles et pédagogiques ont été validées par des certifications et/ou testées et approuvées par les éditeurs et/ou notre équipe pédagogique. Il est en veille technologique permanente et possède plusieurs années d'expérience sur les produits, technologies et méthodes enseignés. Il est présent auprès des stagiaires pendant toute la durée de la formation.

Formations de la même catégories (5)

IB Formation
Manipuler et transformer des données XMLPar IB Formation

XML (eXtensible Markup Language), largement adopté par les entreprises, est un métalangage qui permet de structurer des informations hétérogènes. Il s'est de fait imposé comme le nouveau standard utilisé pour l'échange de données. Cette formation de 4 jours permettra aux participants de maîtriser les éléments pour utiliser XML dans leurs applications futures.

Global Knowledge
Technologies XML, mise en œuvrePar Global Knowledge

Cette formation permet aux participants de découvrir les avantages et inconvénients du langage XML et apporter les compétences pour structurer et composer un document XML (éléments, attributs, entités ...), gérer les messages et échanges XML, positionner XML par rapport aux bases de données et sécuriser les échanges XML.

Dawan
Java et XMLPar Dawan

Maîtriser XML - Pouvoir prévoir ses cas et ses schémas d'utilisation - Savoir choisir et utiliser une implémentation java adéquate - Etre capable de réaliser des transformations complexes de documents

SQLI Institut
Java & XMLPar SQLI Institut
  • Connaître les différentes librairies java axées sur XML
  • Choisir la librairie adéquate
  • Manipuler des documents XML
Orsys
Développer avec XSL-T et XSL-FOPar Orsys

Vous maîtriserez les langages XSL-T et XPath. Vous apprendrez le langage XSL-FO pour la génération de documents PDF ainsi que le langage SVG pour la génération d'images et d'interfaces. Les participants mettront en place un environnement complet de production automatisée de documents contenant à la fois textes et images.