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

Référence : T44A-030

Infos pratiques

  • Durée : 5 jours soit 35 heures
  • Population visée : Ouvrier – Employé – Employé qualifié – Cadre – Cadre supérieur
  • Public concerné : Toute personne souhaitant apprendre le framework Sencha Ext JS 6.5

Programme

Objectifs pédagogiques

A l’issue de cette formation, l’apprenant sera capable de :

  • 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

Pré-requis

  • Connaître les notions fondamentales de la création de pages Web HTML
  • Programmer en JavaScript

Objectifs opérationnels et contenu de la formation

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

Méthodes et moyens

 Explications théoriques suivies de pratiques guidées puis de mises en autonomie


Votre formation a lieu en présentiel :

  • 1 vidéoprojecteur par salle
  • 1 ordinateur

Votre formation se déroule à distance avec :

  • 1 ordinateur
  • 1 connexion Internet
  • 1 adresse e-mail valide
  • 1 équipement audio (micro et enceintes ou casque)
  • 1 Webcam (facultatif – dans l’idéal)
  • 1 deuxième écran (facultatif – dans l’idéal)

Votre formation se déroule sur notre plate-forme de formation avec :

  • 1 ordinateur
  • 1 connexion Internet
  • 1 adresse e-mail valide
  • 1 équipement audio (micro et enceintes ou casque - facultatif)

Méthodes d’évaluation des acquis

L’acquisition des compétences de la formation se fait à travers le suivi du formateur tout au long de la formation (séquences synchrones et asynchrones). Elle s’appuie également sur la réalisation d’exercices et de TP. Enfin, des quiz s’ajoutent aux différents outils de validation de l’acquisition des compétences visées.
Une évaluation est systématiquement réalisée par chaque stagiaire, à l’issue de la formation.

Profil formateur

Nos formateurs sont certifiés à l’issue d’un parcours organisé par nos soins. Ils bénéficient d’un suivi de maintien et d’évolution de leurs compétences aussi bien au niveau technique que pédagogique.
Chacun de nos formateurs a bénéficié d’une formation spécifique à l’animation de classe virtuelle et à l’utilisation des solutions de formation à distance du Groupe ARKESYS.

Support stagiaire

À l’issue de la formation, les exercices et travaux pratiques réalisés, leurs corrigés ainsi qu’un support de cours dématérialisé sera fourni à chaque stagiaire par e-mail ou via la plate-forme FOAD.

Accessible à tous

Cette formation est accessible à toute personne en situation de handicap. Notre référent handicap prendra contact avec les stagiaires concernés pour adapter l’animation à leurs besoins et rendre l’apprentissage accessible à tous. Enfin, nos centres de formation sont accessibles aux personnes à mobilité réduite.