Top Banner
Présentation de la formation KnockoutJS Formation KnockoutJS alphorm.com™© Djamel BOUCHOUCHA Formateur et Consultant .NET Contact : [email protected] KnockoutJS Site : http://www.alphorm.com Blog : http://blog.alphorm.com Forum : http://forum.alphorm.com
125

Alphorm.com Formation knockoutJS

Aug 08, 2015

Download

Technology

alphorm.com
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Alphorm.com Formation knockoutJS

Présentation de la formation

KnockoutJS

Formation KnockoutJS alphorm.com™©

Djamel BOUCHOUCHAFormateur et Consultant .NETContact : [email protected]

KnockoutJS

Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com

Page 2: Alphorm.com Formation knockoutJS

Plan

• Présentation de votre formateur

• Qu’est ce que c’est KnockoutJS?

• Présentation de votre formation

• Le plan de la formation

Formation KnockoutJS alphorm.com™©

• Publics concernés

• Prérequis de la formation

Page 3: Alphorm.com Formation knockoutJS

Votre formateur

• Djamel BOUCHOUCHA

• Consultant .NET et formateur

[email protected]

• Compétences :

� Web : ASP.NET, PHP, HTML5, CSS3, JavaScript, Web Service, WCF, RestFul, AngularJS,

Formation KnockoutJS alphorm.com™©

� Web : ASP.NET, PHP, HTML5, CSS3, JavaScript, Web Service, WCF, RestFul, AngularJS, KnockoutJS

� Autres: C#, XAML, WPF, JAVA, C++, C, SQL, Cloud (Azure), iOS, Android, WP

• Références :

� Profil Linkedin : fr.linkedin.com/pub/djamel-bouchoucha/57/210/572/

� Profil Alphorm : http://www.alphorm.com/formateur/djamel-bouchoucha

Page 4: Alphorm.com Formation knockoutJS

Mes formations sur Alphorm

Formation KnockoutJS alphorm.com™©

Page 5: Alphorm.com Formation knockoutJS

Qu’est ce que c’est KnockoutJS?• Un framework permettant de créer des application riches, responsive

et des vues dynamiques à l’aide d’un modèle de données.

• Un framework permettant de séparer votre « front » en plusieurs « couches »

• Le lien « bind » entre la vue et le modèle est effectué sur les éléments du DOM directement. (Binding déclarative)

Formation KnockoutJS alphorm.com™©

du DOM directement. (Binding déclarative)

• Il est :

� Gratuit et Open Source

� Pure JavaScript (marche avec n’importe quel framework)

� Léger (40 kb)

� Supporte la plupart des navigateurs !

Page 6: Alphorm.com Formation knockoutJS

Présentation de votre formation

• Apprentissage de knockoutJS

• Création d’un projet Web Complet

• Découverte de nodejs, bower et express

Formation KnockoutJS alphorm.com™©

Page 7: Alphorm.com Formation knockoutJS

Le plan de la formation

• Installation des prérequis

• Présentation de Knockout

• Les bases de knockout

• Knockout avancé

Formation KnockoutJS alphorm.com™©

• Finalisation du projet

Page 8: Alphorm.com Formation knockoutJS

Publics concernés

• Développeur web

• Développeur WPF avec des connaissances en MVVM

• Curieux, ayant des notions de JavaScript

• Tout le monde avec un peu de travail en parallèle ☺

Formation KnockoutJS alphorm.com™©

Page 9: Alphorm.com Formation knockoutJS

Prérequis de la formation

• Connaissance de base du développement web :

� HTML

� CSS

� JavaScript

• Aucun autre langage n’est nécessaire

Formation KnockoutJS alphorm.com™©

• Aucun autre langage n’est nécessaire

Page 10: Alphorm.com Formation knockoutJS

D’autres formations en programmation sur Alphorm

Formation KnockoutJS alphorm.com™©

Page 11: Alphorm.com Formation knockoutJS

Are you ready ? ☺

Formation KnockoutJS alphorm.com™©

Page 12: Alphorm.com Formation knockoutJS

Présentation

Le projet

Formation KnockoutJS alphorm.com™©

Djamel BOUCHOUCHAFormateur et Consultant .NETContact : [email protected]

Présentation du projet

Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com

Page 13: Alphorm.com Formation knockoutJS

Plan

• Gestion des contacts

• Le back-end à l’aide de nodeJS, expressJS

• Le front à l’aide de bower, jquery, bootstrap et knockoutJS

Formation KnockoutJS alphorm.com™©

Page 14: Alphorm.com Formation knockoutJS

Gestion des contacts

• Création/Modification de contacts

� Un objet contact est composé des éléments suivants : id, nom, prénom, mail, numéro de téléphone, adresse et date de naissance

• Création/Modification de groupe

� Un groupe est un ensemble de contacts, il est représenté ainsi : id, nom du

Formation KnockoutJS alphorm.com™©

� Un groupe est un ensemble de contacts, il est représenté ainsi : id, nom du groupe, description et la liste des contacts

• Création/Modification d’un agenda

� Permet de gérer les rendez-vous avec ses contacts, il est composé des propriétés suivantes : id, lieu, date de début et date de fin du rendez-vous, et d’une liste de contacts participant à l’événement

Page 15: Alphorm.com Formation knockoutJS

Back-end

• NodeJS, pour la partie serveur

• ExpressJS, pour l’exposition de la couche service au travers de nodeJS

• Aucune persistance pour le moment, à chaque redémarrage du service les données sont perdues

Formation KnockoutJS alphorm.com™©

Page 16: Alphorm.com Formation knockoutJS

Front-end

• Bower gestionnaire de package

• Jquery (une dépendance de knockout.js), framework JS

• Bootstrap (pour la partie présentation), framework de présentation

• KnockoutJS

Formation KnockoutJS alphorm.com™©

Page 17: Alphorm.com Formation knockoutJS

Ce que l’on a couvert

• Notre projet du back-end au front-end

• Les différentes technologies que nous allons utiliser

• JavaScript à l’honneur !

Formation KnockoutJS alphorm.com™©

Page 18: Alphorm.com Formation knockoutJS

NodeJS

Le projet

Formation KnockoutJS alphorm.com™©

Djamel BOUCHOUCHAFormateur et Consultant .NETContact : [email protected]

NodeJS

Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com

Page 19: Alphorm.com Formation knockoutJS

Plan

• Présentation de NodeJS

• Découverte de npm

• Installation de NodeJS

Formation KnockoutJS alphorm.com™©

Page 20: Alphorm.com Formation knockoutJS

Présentation

• JavaScript côté serveur (puissance et souplesse du JS côté serveur)

• Moteur d’exécution JavaScript de Chrome (V8)

• Programmation évènementielle

• Mode asynchrone (I/O)

Formation KnockoutJS alphorm.com™©

• Modulable et évolutive

• Forte communauté !

• Pour en savoir plus en attendant la formation Alphorm : http://nodeschool.io/

Page 21: Alphorm.com Formation knockoutJS

Découverte de npm

• Gestionnaire de package

• Permet de partager et récupérer les contributions de la communauté

• NPM : Node Package Manager ? Non, c’est juste « npm is not an acronym » ☺

• NodeJS pour lancer notre programme et npm pour télécharger nos

Formation KnockoutJS alphorm.com™©

• NodeJS pour lancer notre programme et npm pour télécharger nos packages, comme express par exemple

Page 22: Alphorm.com Formation knockoutJS

Installation

• Aller sur https://nodejs.org/ (installation valable pour Windows/Linux et Mac OS)

• Démo : Installation sur Windows et Linux

Formation KnockoutJS alphorm.com™©

Page 23: Alphorm.com Formation knockoutJS

Ce que l’on a couvert

• NodeJS et ses avantages

• Nous avons connaissance de npm

• Nous avons installé nodeJS sur Windows et Linux !

Formation KnockoutJS alphorm.com™©

Page 24: Alphorm.com Formation knockoutJS

Bower

Le projet

Formation KnockoutJS alphorm.com™©

Djamel BOUCHOUCHAFormateur et Consultant .NETContact : [email protected]

Bower

Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com

Page 25: Alphorm.com Formation knockoutJS

Plan

• Présentation de Bower

• Installation de Bower

• Utilisation de Bower

Formation KnockoutJS alphorm.com™©

Page 26: Alphorm.com Formation knockoutJS

Présentation

• Qu’est ce qu’une dépendance ?

• Gestion de dépendance ?

• Quelles dépendances ?

Formation KnockoutJS alphorm.com™©

Page 27: Alphorm.com Formation knockoutJS

Installation

• Installation à l’aide de npm

•npm install –g bower

• Démo : sur windows et linux

Formation KnockoutJS alphorm.com™©

Page 28: Alphorm.com Formation knockoutJS

Utilisation

• Magique : bower install « something »

• Liste des packages disponibles : http://bower.io/search

Formation KnockoutJS alphorm.com™©

Page 29: Alphorm.com Formation knockoutJS

Ce que l’on a couvert

• L’installation et l’utilisation de bower

Formation KnockoutJS alphorm.com™©

Page 30: Alphorm.com Formation knockoutJS

ExpressJS

Le projet

Formation KnockoutJS alphorm.com™©

Djamel BOUCHOUCHAFormateur et Consultant .NETContact : [email protected]

ExpressJS

Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com

Page 31: Alphorm.com Formation knockoutJS

Plan

• Présentation

• Installation

• Démo

Formation KnockoutJS alphorm.com™©

Page 32: Alphorm.com Formation knockoutJS

Présentation

• Comment gérer les routes sous nodeJS ?

� Utilisation de if pour chaque requête ? If(page == ‘’/’’) dosomething(); else…

� Utiliser un framework pour le faire proprement ? ExpressJS !

• Utilisation des templates

Formation KnockoutJS alphorm.com™©

Page 33: Alphorm.com Formation knockoutJS

Installation

• Grâce à npm

• La commande : npm install express --save

• Démo : sur Linux et Windows

Formation KnockoutJS alphorm.com™©

Page 34: Alphorm.com Formation knockoutJS

Démo

// url localhost:8888/Hello en utilisant un GET

app.get('/Hello', function (req, res) { res.send(‘Bienvenue chez Alphorm !'); });

// url localhost:8888/Hello en utilisant un POST

app.post('/Hello', function (req, res) { res.send(‘Votre ajout a bien été pris en compte, merci !'); });

Formation KnockoutJS alphorm.com™©

// url localhost:8888/Hello en utilisant un POST

app.put('/Hello', function (req, res) { res.send(‘Votre mise à jour a bien été prise en compte, merci !'); });

// url localhost:8888/Hello en utilisant un POST

app.delete('/Hello', function (req, res) { res.send(‘Votre suppression a bien été prise en compte, merci !'); });

Page 35: Alphorm.com Formation knockoutJS

Ce que l’on a couvert

• L’installation et l’utilisation d’ExpressJS

Formation KnockoutJS alphorm.com™©

Page 36: Alphorm.com Formation knockoutJS

Le Backoffice

Le projet

Formation KnockoutJS alphorm.com™©

Djamel BOUCHOUCHAFormateur et Consultant .NETContact : [email protected]

Le Backoffice

Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com

Page 37: Alphorm.com Formation knockoutJS

Plan

• Création du projet

• Création des différentes routes

• Préparation de la partie front-end

• Démo

Formation KnockoutJS alphorm.com™©

Page 38: Alphorm.com Formation knockoutJS

Création du projet

• Installation de nodeJS

• Installation de bower

• Création du projet

• Installation d’ExpressJS

Formation KnockoutJS alphorm.com™©

Page 39: Alphorm.com Formation knockoutJS

Création des différentes routes

• Configuration d’ExpressJS

• Les routes pour la gestion des contacts

• Les routes pour la gestion des groupes

• Les routes pour la gestion des meetings

Formation KnockoutJS alphorm.com™©

Page 40: Alphorm.com Formation knockoutJS

Préparation de la partie front-end

• Configuration d’ExpressJS pour exposer les parties statiques du front-end (images, css, js et html)

• Installation des différentes librairies JS/CSS à l’aide de bower

Formation KnockoutJS alphorm.com™©

Page 41: Alphorm.com Formation knockoutJS

Démo

• Test des différents chemins de notre API et des pages du front-end

• Avec quoi ? Le navigateur ? Postman sous chrome

Formation KnockoutJS alphorm.com™©

Page 42: Alphorm.com Formation knockoutJS

Ce que l’on a couvert

• Nous avons réalisé notre back-end, ce dernier sera enrichi au fur et à mesure que nous avancerons dans notre formation

Formation KnockoutJS alphorm.com™©

Page 43: Alphorm.com Formation knockoutJS

Introduction

Présentation de knockoutJS

Formation KnockoutJS alphorm.com™©

Djamel BOUCHOUCHAFormateur et Consultant .NETContact : [email protected]

Introduction

Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com

Page 44: Alphorm.com Formation knockoutJS

Plan

• Application classique de gestion des contacts

• Utilisation d’un framework de binding

Formation KnockoutJS alphorm.com™©

Page 45: Alphorm.com Formation knockoutJS

Application classique de gestion des contacts

• Utilisation d’API

• Utilisation de JQuery pour remplacer les éléments dans le DOM

• Mélange de HTML et de JS

• Utilisation de framework pour assurer le binding (angularJS, KnockoutJS etc…)

Formation KnockoutJS alphorm.com™©

etc…)

• On peut également utiliser un moteur de template (EJS, Jade, Mustache…)

Page 46: Alphorm.com Formation knockoutJS

Utilisation d’un framework de binding ?

• Qu’est ce que le binding ?

• Les avantages ?

� Se concentrer uniquement sur les données

� Alléger les données envoyées par le serveur, juste du json ou du xml

Réutilisation du code simplifié

Formation KnockoutJS alphorm.com™©

� Réutilisation du code simplifié

• Démo de binding avec AngularJS et knockoutJS

Page 47: Alphorm.com Formation knockoutJS

Ce que l’on a couvert

• On peut faire de différentes façons notre application, mais ici nous allons le faire bien, nous allons le faire à l’aide de knockoutJS !

Formation KnockoutJS alphorm.com™©

Page 48: Alphorm.com Formation knockoutJS

Qu’est ce que

Présentation de knockoutJS

Formation KnockoutJS alphorm.com™©

Djamel BOUCHOUCHAFormateur et Consultant .NETContact : [email protected]

Qu’est ce que knockoutJS ?

Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com

Page 49: Alphorm.com Formation knockoutJS

Plan

• Présentation

• Démo

Formation KnockoutJS alphorm.com™©

Page 50: Alphorm.com Formation knockoutJS

Présentation

• Créer un lien entre les données et la vue (le binding)

• Pourquoi ?

• Comment ?

• MVVM

Formation KnockoutJS alphorm.com™©

Page 51: Alphorm.com Formation knockoutJS

Démo

• Une démo de l’utilisation de knockoutJS

Formation KnockoutJS alphorm.com™©

Page 52: Alphorm.com Formation knockoutJS

Ce que l’on a couvert

• On est entré dans le vif du sujet ☺ en découvrant knockoutJS !

• On a vu en quoi et comment utiliser knockoutJS

Formation KnockoutJS alphorm.com™©

Page 53: Alphorm.com Formation knockoutJS

Pattern MVVM

Présentation de knockoutJS

Formation KnockoutJS alphorm.com™©

Djamel BOUCHOUCHAFormateur et Consultant .NETContact : [email protected]

Pattern MVVM

Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com

Page 54: Alphorm.com Formation knockoutJS

Plan

• Présentation

• MVVM et knockoutJS

Formation KnockoutJS alphorm.com™©

Page 55: Alphorm.com Formation knockoutJS

Présentation

ViewModel

Formation KnockoutJS alphorm.com™©

ModelView

Page 56: Alphorm.com Formation knockoutJS

MVVM et knockoutJS

• View : les différents éléments HTML, CSS et JavaScript

• ViewModel : knockoutJS, partie permettant de faire le lien entre la vue et le modèle

• Model : back-end

Formation KnockoutJS alphorm.com™©

Page 57: Alphorm.com Formation knockoutJS

Ce que l’on a couvert

• Découvrir le pattern MVVM et savoir l’utiliser

Formation KnockoutJS alphorm.com™©

Page 58: Alphorm.com Formation knockoutJS

Prérequis

Présentation de knockoutJS

Formation KnockoutJS alphorm.com™©

Djamel BOUCHOUCHAFormateur et Consultant .NETContact : [email protected]

Prérequis

Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com

Page 59: Alphorm.com Formation knockoutJS

Plan

• Un peu de JavaScript

• HTML, CSS

Formation KnockoutJS alphorm.com™©

Page 60: Alphorm.com Formation knockoutJS

Un peu de javascript

• Les variables

• Les fonctions

• Les conditions

• Les boucles

Formation KnockoutJS alphorm.com™©

• Les tableaux

• Le scope

• Les types

Page 61: Alphorm.com Formation knockoutJS

HTML et CSS

• Les bases du HTML

• Les bases du CSS

• Bootstrap

Formation KnockoutJS alphorm.com™©

Page 62: Alphorm.com Formation knockoutJS

Ce que l’on a couvert

• Des rappels sur les bases du JavaScript, HTML et CSS

Formation KnockoutJS alphorm.com™©

Page 63: Alphorm.com Formation knockoutJS

Le ViewModel

Les bases de knockoutJS

Formation KnockoutJS alphorm.com™©

Djamel BOUCHOUCHAFormateur et Consultant .NETContact : [email protected]

Le ViewModel

Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com

Page 64: Alphorm.com Formation knockoutJS

Plan

• L’importance du ViewModel

• Création du projet

• Application du ViewModel (binding)

Formation KnockoutJS alphorm.com™©

Page 65: Alphorm.com Formation knockoutJS

L’importance du ViewModel

• Le ViewModel expose des propriétés à la vue

• Le ViewModel transforme les données récupérées depuis la couche « Model »

• Le ViewModel « réagit » aux actions utilisateurs

• Le ViewModel peut être réutilisé

Formation KnockoutJS alphorm.com™©

• Le ViewModel peut être réutilisé

Page 66: Alphorm.com Formation knockoutJS

Création du projet

• Création du fichier « index.html » et import des librairies nécessaires

• Création du fichier « contact.js »

� Approche « module »

� Exposition de la fonction « init » uniquement

Association de « contact.js » à « index.html »

Formation KnockoutJS alphorm.com™©

• Association de « contact.js » à « index.html »

Page 67: Alphorm.com Formation knockoutJS

Application du ViewModel (binding)

• Définition du ViewModel

• Association du ViewModel à knockoutJS

• Option : possibilité d’associer le « context » de binding à un élément du DOM, par défaut sur body.

Formation KnockoutJS alphorm.com™©

var monViewModel = {Nom: ‘James',Age: 28

};

ko.applyBindings(monViewModel);

Page 68: Alphorm.com Formation knockoutJS

Ce que l’on a couvert

• Le View Model

• La création du projet

Formation KnockoutJS alphorm.com™©

Page 69: Alphorm.com Formation knockoutJS

Les trois fonctions

Les bases de knockoutJS

Formation KnockoutJS alphorm.com™©

Djamel BOUCHOUCHAFormateur et Consultant .NETContact : [email protected]

Les trois fonctions de base

Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com

Page 70: Alphorm.com Formation knockoutJS

Plan

• Observable

• ObservableArray

• Computed

Formation KnockoutJS alphorm.com™©

Page 71: Alphorm.com Formation knockoutJS

Observable

• Une propriété observée par knockoutJS, permet de notifier tous les éléments « associés » en cas de changement.

• Il suffit d’associer un « objet » de type « observable » à une propriété exposée

• Comment mettre à jour la valeur d’une propriété observable ?

Formation KnockoutJS alphorm.com™©

Nom("Nouveau") var monViewModel = {Nom: ko.observable(‘James‘),Age: 28

};

ko.applyBindings(monViewModel);

Page 72: Alphorm.com Formation knockoutJS

ObservableArray

• Même principe que pour observable, à la différence, comme son nom l’indique, qu’elle permet de créer une propriété observable de type tableau (Array)

• Permet d’associer n’importe quel type de tableau (numeric, chaine de caractère, objet …)

Formation KnockoutJS alphorm.com™©

var monViewModel = {var departements = ko.observableArray()departements.push("Paris");

};

ko.applyBindings(monViewModel);

Page 73: Alphorm.com Formation knockoutJS

Computed

• Un minimum de logique dans la vue !

• Permet d’utiliser les différents observables pour exposer une nouvelle propriété !

• Exemple : un ViewModel expose un nom et un prénom, une computedpourrait exposer la propriété « NomComplet » pour renvoyer la concaténation du nom et du prénom

Formation KnockoutJS alphorm.com™©

concaténation du nom et du prénom

this.nomComplet = ko.computed(function() {

return this.prenom() + " " + this.nom();

});

Page 74: Alphorm.com Formation knockoutJS

Ce qu’on a couvert

• Les trois fonctions de base !

• Une grande partie de vos besoins est couverte par ces trois fonctions.

• Observable, ObservableArray et computed

Formation KnockoutJS alphorm.com™©

Page 75: Alphorm.com Formation knockoutJS

Contrôle du texte

Les bases de knockoutJS

Formation KnockoutJS alphorm.com™©

Djamel BOUCHOUCHAFormateur et Consultant .NETContact : [email protected]

Contrôle du texte et de l’apparence

Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com

Page 76: Alphorm.com Formation knockoutJS

Plan

• Le contrôle de la visibilité

• Le contrôle de la génération du texte

• Le contrôle du rendu HTML

• Le contrôle du style (CSS)

Formation KnockoutJS alphorm.com™©

Page 77: Alphorm.com Formation knockoutJS

Le contrôle de la visibilité

• L’utilisation du paramètre « visible »

• Un « false », « 0 », « null » ou « undefined » entraine la non visibilité de l’élément

• Un « true » ou « 1 » entraine la visibilité de l’élément

• L’utilisation de visible est comparable à l’utilisation du style « display » à

Formation KnockoutJS alphorm.com™©

• L’utilisation de visible est comparable à l’utilisation du style « display » à none

Page 78: Alphorm.com Formation knockoutJS

Le contrôle de la génération du texte

• L’utilisation du paramètre « text »

• Si la propriété est différente d’un chiffre ou d’une chaine de caractères, c’est la fonction « toString() » qui sera appelée sur l’objet.

• On peut utiliser ce paramètre pour afficher un simple message, un message suite à un calcul, du HTML (*)

Formation KnockoutJS alphorm.com™©

• Attention avec le select/option !

Page 79: Alphorm.com Formation knockoutJS

Le contrôle du rendu HTML

• L’utilisation du paramètre « html »

• Différence avec le paramètre « text » ?

• C’est l’équivalent du « innerHTML » (utilisation de la fonction html() en jQuery)

Formation KnockoutJS alphorm.com™©

Page 80: Alphorm.com Formation knockoutJS

Le contrôle du style (CSS)

• L’utilisation des paramètres « css » et « style »

• Le paramètre « css » lie votre objet aux paramètres de « class » des éléments

• Le paramètre « style » lie votre objet aux paramètres de « style » des éléments

Formation KnockoutJS alphorm.com™©

• Attention pour le style, il faut écrire « fontWeight » et non « font-weight ». Faire sauter les « - »

Page 81: Alphorm.com Formation knockoutJS

Ce que l’on a couvert

• Les différentes façons de contrôler l’apparence de notre page

• Aussi bien le style que la génération de contenu

Formation KnockoutJS alphorm.com™©

Page 82: Alphorm.com Formation knockoutJS

Contrôle du flux

Les bases de knockoutJS

Formation KnockoutJS alphorm.com™©

Djamel BOUCHOUCHAFormateur et Consultant .NETContact : [email protected]

Contrôle du flux de l’application

Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com

Page 83: Alphorm.com Formation knockoutJS

Plan

• La boucle « foreach »

• Les conditions « if, else, if else, if not »

• Le binding « with »

Formation KnockoutJS alphorm.com™©

Page 84: Alphorm.com Formation knockoutJS

La boucle « foreach »<table>

<thead>

<tr><th>Prénom</th>

<th>Nom</th></tr>

</thead>

<tbody data-bind="foreach: people">

<tr>

<td data-bind="text: prenom"></td>

<td data-bind="text: nom"></td>

</tr>

</tbody>

Formation KnockoutJS alphorm.com™©

</tbody>

</table>

<script type="text/javascript">

ko.applyBindings({

contact: [

{ prenom: 'Daniel', nom: 'Bazz' },

{ prenom : 'Eric', nom: 'Caen' },

{ prenom : 'Djamel', nom: 'BOUCHOUCHA' }

]

});

</script>

Page 85: Alphorm.com Formation knockoutJS

Les conditions « if, else, if else, if not »

• Plus simple, on met un if en place

• On peut obtenir le « else » avec la syntaxe suivante : « maVerification » ? « action en cas de réussite de la vérification » ? « autre action »

• « Ifnot » équivalent de la de différent « ! »

• Démo !

Formation KnockoutJS alphorm.com™©

• Démo !

Page 86: Alphorm.com Formation knockoutJS

Le binding « with »

• Context de binding ! Ne descend pas si l’élément est nul

• Accès au parent avec le mot clé « $parent »

• Accès au nœud principal avec le mot clé « $root

Formation KnockoutJS alphorm.com™©

Page 87: Alphorm.com Formation knockoutJS

Ce que l’on a couvert

• La gestion du flux avec knockoutJS

• On peut maintenant contrôler notre affichage et nos actions en fonction de nos conditions !

Formation KnockoutJS alphorm.com™©

Page 88: Alphorm.com Formation knockoutJS

Binding avec

Les bases de knockoutJS

Formation KnockoutJS alphorm.com™©

Djamel BOUCHOUCHAFormateur et Consultant .NETContact : [email protected]

Binding avec les éléments du DOM

Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com

Page 89: Alphorm.com Formation knockoutJS

Plan

• L’évènement clique

• Les autres évènements

• La soumission

• L’état (activé/désactivé)

Formation KnockoutJS alphorm.com™©

• Liaison avec la saisie utilisateur

• Le focus d’un contrôle

• Checkbox et radio buttons

• Les listes déroulantes

Page 90: Alphorm.com Formation knockoutJS

Les évènements

• Possibilité de lier l’évènement clique à une action de votre ViewModel

• Le binding « click »

• Deux paramètres « data » et « event »

• Dans le cas d’une boucle, on récupère le « current item » (data)

<button data-bind="click: clickMe">Click me</button>

Formation KnockoutJS alphorm.com™©

• L’event est l’objet contenant des informations utilisateurs (Ex. touche en cours)

• Empêcher la propagation de l’évènement avec l’option « clickBubble »

<button data-bind="click: myButtonHandler, clickBubble: false"> Click me </button>

Page 91: Alphorm.com Formation knockoutJS

Les autres évènements

• Possibilité de lier un évènement à une fonction de votre ViewModel

• Récupération du contexte de l’élément en cours

• Binding grâce au mot clé « event »

• Trois principaux events :

Formation KnockoutJS alphorm.com™©

� Mouseover

� Mouseout

� Keypress

<div data-bind="event: { mouseover: enable, mouseout: disable }"> Mouse over :) </div>

Page 92: Alphorm.com Formation knockoutJS

La soumission

• Permet de contrôler la soumission de votre formulaire

• Renvoyer « true » si vous souhaitez continuer l’action normalement

• Prend en paramètre votre « formulaire »

Formation KnockoutJS alphorm.com™©

<form data-bind="submit: doSomething">

Vos différents composants <button type="submit">Envoyer</button>

</form>

<script type="text/javascript">

var viewModel = { doSomething : function(formElement) { } };

</script>

Page 93: Alphorm.com Formation knockoutJS

L’état (activé/désactivé)

• Permet de gérer l’état d’un contrôle

• Mot-clé « enable »

<p> Votre adresse : <input type='text' data-bind="value: adresse, enable:

canEditAdresse" /> </p>

Formation KnockoutJS alphorm.com™©

canEditAdresse" /> </p>

Page 94: Alphorm.com Formation knockoutJS

Liaison avec la saisie utilisateur

• Permet de récupérer la saisie utilisateur dans un « input », « textbox » et le choix d’un utilisateur dans un « select »

• Mot-clé « value », et « valueUpdate » en option

• ValueUpdate permet de définir la politique de mise à jour (keyup, keypress, afterkeydown)

Formation KnockoutJS alphorm.com™©

• Mise à jour automatique à l’aide de « textInput »

• Cas spécifique pour les listes, deux slides plus loin

<p>Login: <input data-bind="value: login" /></p> <p>Mot de passe: <input type="password" data-

bind="value: pwd" /></p>

Page 95: Alphorm.com Formation knockoutJS

Le focus d’un contrôle

• Permet de donner le focus à un contrôle en le liant à votre ViewModel

• Mot-clé « hasFocus »

<input data-bind="hasFocus: isSelected" />

Formation KnockoutJS alphorm.com™©

Page 96: Alphorm.com Formation knockoutJS

Checkbox et radio buttons• Permet de lier les choix utilisateurs à votre ViewModel

• Pour les « checkbox » c’est assez simple, on gère l’état sélectionné ou pas

• Pour les éléments de type « radio », on bind à la valeur du contrôle

<p>Recevoir la newsletter alphorm ?: <input type="checkbox" data-bind="checked: alphormNewsletter" /></p>

<div data-bind="visible: newsletterType"> Type de newslleter :

Formation KnockoutJS alphorm.com™©

<div data-bind="visible: newsletterType"> Type de newslleter :

<div>

<input type="radio" name="newsletterType" value="dev" data-bind="checked: newsletterType" /> Développement

</div>

<div>

<input type="radio" name="flavorGroup" value="sys" data-bind="checked: newsletterType" /> Système

</div>

</div>

<script type="text/javascript">

var viewModel = {

alphormNewsletter: ko.observable(true),

newsletterType: ko.observable("dev");

};

</script>

Page 97: Alphorm.com Formation knockoutJS

Les listes déroulantes

• Permet de binder un tableau à un élément de type « listbox »

• Plusieurs mots-clés :

� Options, liste des éléments à afficher

� OptionsText, propriété du modèle qui sera utilisé pour être affiché

OptionsValue, propriété du modèle qui sera utilisé comme valeur

Formation KnockoutJS alphorm.com™©

� OptionsValue, propriété du modèle qui sera utilisé comme valeur

� Value, élément sélectionné, si le multi-select n’est pas activé

� OptionsCaption, élément par défaut si rien n’est sélectionné

� SelectedOptions, éléments sélectionnés

• Démo ☺

Page 98: Alphorm.com Formation knockoutJS

Ce que l’on a couvert

• Les différentes façons de se lier aux éléments du DOM

Formation KnockoutJS alphorm.com™©

Page 99: Alphorm.com Formation knockoutJS

Le context de binding

KnockoutJS avancé

Formation KnockoutJS alphorm.com™©

Djamel BOUCHOUCHAFormateur et Consultant .NETContact : [email protected]

Le context de binding

Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com

Page 100: Alphorm.com Formation knockoutJS

Plan

• Qu’est ce que le context ?

• La notion de parent

• La notion de root

• La notion de data

Formation KnockoutJS alphorm.com™©

• La notion d’index

Page 101: Alphorm.com Formation knockoutJS

Qu’est ce le context ?

• Le contexte de binding est un objet qui fait référence au jeu de données sur lequel vous agissez

• KnockoutJS gère pour vous la hiérarchie de contexte

� Ex. : Dans une boucle de type « foreach », chaque itération aura son contextcourant

Formation KnockoutJS alphorm.com™©

• Plusieurs notions existent pour gérer le context dans knockoutJS :

� Récupération du context parent

� Récupération du context principal

Page 102: Alphorm.com Formation knockoutJS

La notion de parent

• Comme son nom l’indique, il permet de récupérer le contexte du dessus

• Mot-clé « $parent », option : $parents[n], si vous voulez récupérer le parent du parent … ☺

• Démo ☺

Formation KnockoutJS alphorm.com™©

Page 103: Alphorm.com Formation knockoutJS

La notion de root

• Permet de récupérer le contexte principale, en conséquent l’ensemble de votre « VieuxModel »

• Mot clé « $root »

• Démo ☺

Formation KnockoutJS alphorm.com™©

Page 104: Alphorm.com Formation knockoutJS

La notion de data

• Data permet de récupérer l’objet de votre ViewModel en cours d’utilisation

• Mot clé : $data

• Dans le cas d’un élément se trouvant à la racine, « $data » est équivalent à « $root »

Formation KnockoutJS alphorm.com™©

• Démo ☺

Page 105: Alphorm.com Formation knockoutJS

La notion d’index

• Permet de récupérer la ligne d’un tableau en cours

• Valable pour le « select » et le « foreach »

• Mot clé : $index

• Démo ☺

Formation KnockoutJS alphorm.com™©

Page 106: Alphorm.com Formation knockoutJS

Ce que l’on a couvert

• Révision sur la notion de context

Formation KnockoutJS alphorm.com™©

Page 107: Alphorm.com Formation knockoutJS

Les composants

KnockoutJS avancé

Formation KnockoutJS alphorm.com™©

Djamel BOUCHOUCHAFormateur et Consultant .NETContact : [email protected]

Les composants

Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com

Page 108: Alphorm.com Formation knockoutJS

Plan

• Qu’est ce qu’un composant ?

• Créer un composant

Formation KnockoutJS alphorm.com™©

Page 109: Alphorm.com Formation knockoutJS

Qu’est ce qu’un composant ?

• Un composant permet de regrouper un ensemble de contrôles en une fonctionnalité

• Ex. : dès lors que le bouton « j’aime » de facebook a été cliqué, le contrôle change d’état

• Il peut recevoir des paramètres (avoir son propre ViewModel)

Formation KnockoutJS alphorm.com™©

• Il peut être packagé et réutilisé

• Il a un template

Page 110: Alphorm.com Formation knockoutJS

Créer un composant

• Deux parties :

� ViewModel, représente la partie données de votre composant

� Template, représente la partie HTML de votre composant

• Démo

Formation KnockoutJS alphorm.com™©

ko.components.register('note-widget', {

viewModel: function(params) {

this.valeurSelectionner = params.value; this.vousAimez = function(vote) { this.valeurSelectionner(vote); };

},

template: '<div data-bind="visible: !valeurSelectionner()">\ <img src="https://cdn4.iconfinder.com/data/icons/small-n-

flat/24/star-16.png" data-bind="click: function() { vousAimez(1); }" />\ <img

src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/star-16.png" data-bind="click: function() { vousAimez(2); }"

/>\ <img src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/star-16.png" data-bind="click: function() {

vousAimez(3); }" />\ </div>\ <div class="result" data-bind="visible: valeurSelectionner">\ Votre vote : <strong data-

bind="text: valeurSelectionner"></strong> \ </div>' });

Page 111: Alphorm.com Formation knockoutJS

Ce que l’on a couvert

• La création d’un composant

Formation KnockoutJS alphorm.com™©

Page 112: Alphorm.com Formation knockoutJS

Créer

KnockoutJS avancé

Formation KnockoutJS alphorm.com™©

Djamel BOUCHOUCHAFormateur et Consultant .NETContact : [email protected]

Créer un custom binding

Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com

Page 113: Alphorm.com Formation knockoutJS

Plan

• Qu’est ce qu’un custom Binding ?

• Démo

Formation KnockoutJS alphorm.com™©

Page 114: Alphorm.com Formation knockoutJS

Qu’est ce qu’un custom binding

• Certains éléments plus complexes, comme des éditeurs de textes riches, des sliders, datepicker etc… ne peuvent pas être bindés à l’aide des éléments classiques comme click ou value

• Ajouter votre custom binding « ko.bindingHandlers.leNomDeVotreElement »

• Deux méthodes, « init » et « update »

Formation KnockoutJS alphorm.com™©

• Deux méthodes, « init » et « update »

Page 115: Alphorm.com Formation knockoutJS

Démo

• On va faire simple, on va faire un custom binding ensemble !

Formation KnockoutJS alphorm.com™©

Page 116: Alphorm.com Formation knockoutJS

Ce que l’on a couvert

• Le binding d’éléments complexes

Formation KnockoutJS alphorm.com™©

Page 117: Alphorm.com Formation knockoutJS

Développement

Le projet

Formation KnockoutJS alphorm.com™©

Djamel BOUCHOUCHAFormateur et Consultant .NETContact : [email protected]

Développement du projet

Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com

Page 118: Alphorm.com Formation knockoutJS

Plan

• Créer le projet

• Sauvegarder le ViewModel en « json »

• Charger le ViewModel depuis du « json »

Formation KnockoutJS alphorm.com™©

Page 119: Alphorm.com Formation knockoutJS

Création du projet

• Front-end

• Création du squelette de notre application (HTML, CSS et JS)

• Création du ViewModel

• Lien entre le ViewModel et la vue

Formation KnockoutJS alphorm.com™©

• Utilisation de la Web Api

Page 120: Alphorm.com Formation knockoutJS

Sauvegarder le ViewModel en « json »

• Permet de récupérer votre ViewModel en « json »

• Pour cela rien de plus simple

<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

Formation KnockoutJS alphorm.com™©

• On peut envoyer le « json » générer par knockoutJS au serveur pour le persister

Page 121: Alphorm.com Formation knockoutJS

Charger le ViewModel depuis du « json »

• Permet de récupérer un ViewModel dans un état préalablement sauvegardé

• Pour cela rien de plus simple :

� Récupération du « json » depuis un serveur

� Parse de la data récupéré à l’aide de JSON.parse(data)

Formation KnockoutJS alphorm.com™©

� Parse de la data récupéré à l’aide de JSON.parse(data)

� Utilisation du modèle récupéré

Page 122: Alphorm.com Formation knockoutJS

Ce que l’on a couvert

• Nous avons terminé notre programme

• Nous appris à sauvegarder notre ViewModel et le restituer

Formation KnockoutJS alphorm.com™©

Page 123: Alphorm.com Formation knockoutJS

Bilan

KnockoutJS

Formation KnockoutJS alphorm.com™©

Djamel BOUCHOUCHAFormateur et Consultant .NETContact : [email protected]

Bilan

Site : http://www.alphorm.comBlog : http://blog.alphorm.comForum : http://forum.alphorm.com

Page 124: Alphorm.com Formation knockoutJS

Notre formation

• Nous savons désormais :

� Ce qu’est knockoutJS

� Lier les vues à aux modèles de données

� Séparer les différentes couches qui compose une application web

� Mettre à jour l’interface utilisateur en fonction de la mise à jour du modèle

Formation KnockoutJS alphorm.com™©

� Mettre à jour l’interface utilisateur en fonction de la mise à jour du modèle

• Une introduction à d’autres technologies :

� NodeJS

� ExpressJS

� Bower

Page 125: Alphorm.com Formation knockoutJS

See you soon !

Formation KnockoutJS alphorm.com™©