Evolution MM

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

Lien accueil

ENI Service est partenaire du DevFest Nantes 2019.

Rendez-vous les 21 et 22 octobre prochains pour un festival très rock !

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