Evolution MM

Formations à l'informatique
Découvrez la différence ENI

Lien accueil

Téléchargez le Calendrier des formations

Nantes, Rennes, Niort, Nice, Paris

jusqu'à juillet 2019

Rechercher
Rechercher une formation
 

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

Public :

  • Développeurs, chefs de projets Internet, architectes.

Objectifs :

  • Installer Sencha Cmd v.6.5 et les outils de debug comme Illumination, App Inspector, and Sencha Fiddle ;
  • Comprendre et appliquer les concepts de base et les capacités d'interrogation de Ext JS 6.5 ;
  • Utiliser des composants puissants 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 ;
  • Créer des applications Web sensibles et définir le routage côté client ;
  • Acquérir et mettre en œuvre des connaissances sur l'accessibilité, la localisation et les capacités de glisser-déposer et la gestion des thèmes dans Ext JS 6.5.

Pré-requis :

  • Avoir suivi la formation " T4ACF-2 - Créer des contenus pour le Web en HTML5 et CSS3 ", ou posséder les connaissances et compétences équivalentes ;
  • Avoir suivi la formation " T44A-010 - Dynamisez vos sites Web avec JavaScript ", ou posséder les connaissances et compétences équivalentes.

Contenu pédagogique

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