http://slamwiki2.kobject.net/ 2026-05-09T12:56:11+00:00 http://slamwiki2.kobject.net/ http://slamwiki2.kobject.net/lib/tpl/bootstrap3/images/favicon.ico text/html 2019-08-31T14:21:28+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/richclient/emberjs/accueil?rev=1567254088&do=diff EmberJs : Rich client framework <!--<table border='0'><tr> <td><a href="https://www.emberjs.com" target="_new"><img src="https://www.emberjs.com/images/tomsters/emberconf-2014-tomster-3d2493a3.png" width="300"></a></td> </tr></table> <div class="info"> <div style="font-size:14px;font-weight: bold;">Si vous avez apprécié :</div> <br> <a class="github-button" href="https://github.com/emberjs/ember.js" data-icon="octicon-star" data-show-count="true" aria-label="Star emberjs/ember.js on GitHub">e… text/html 2019-08-31T14:21:28+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/richclient/emberjs/bases?rev=1567254088&do=diff Bases emberJS Installation Installation node et npm En invite de commande : Vérifier si node est installé : Installer au besoin nodeJs Tester la version de npm : Pour mettre à jour npm : Installation d'ember-cli Commandes ember-cli Création d'une application text/html 2019-08-31T14:21:28+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/richclient/emberjs/components?rev=1567254088&do=diff Components Création Avec ember-cli : Les composants doivent avoir au moins un tiret - dans leur nom. blog-post est un nom acceptable, audio-player-controls également, mais post ne l'est pas. Cette règle permet d'éviter les collisions de nom avec les éléments html existants ou futurs. text/html 2019-08-31T14:21:28+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/richclient/emberjs/data?rev=1567254088&do=diff Models Les Models correspondent aux classes métier de l'application. Avec Ember, le chargement des models dans une application peut être découplé du chargement technique des données (interrogation d'un service web par ex) grâce au Store et aux Adapters. text/html 2019-08-31T14:21:30+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/richclient/emberjs/modelobjet?rev=1567254090&do=diff Model objet Les objets Javascript ne supportant pas l'observation des changements de leurs propriétés, une application Ember utilisera des objets Ember.Object pour mettre en place le binding des propriétés en lieu et place des objets javascript standards. text/html 2019-08-31T14:21:30+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/richclient/emberjs/router?rev=1567254090&do=diff Routing Le router EmberJs associe chaque URL connue à un ou plusieurs route handlers. Un route handler peut : * Afficher un template. * Charger un model pour le mettre à disposition d'un template. * Effectuer une redirection vers une nouvelle route (si par ex l'utilisateur n'a pas l'autorisation d'accès à la route sollicitée). text/html 2019-08-31T14:21:28+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/richclient/emberjs/services?rev=1567254088&do=diff Services Un service Ember (Ember.Service) est un objet dont la durée de vie est celle de l'application, et qui sera accessible depuis tous ses éléments. Les services peuvent être utilisés pour toutes les opérations relatives à une application : text/html 2019-08-31T14:21:30+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/richclient/emberjs/td0?rev=1567254090&do=diff TD n°0 Exemple de démonstration : projet first-app Objectifs * Créer des routes, des models, utiliser les templates * Montrer la cohérence et la simplicité du framework Pré-requis Installations * Node + npm * ember-cli * WebStorm + ember.js plugin text/html 2019-08-31T14:21:30+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/richclient/emberjs/td1?rev=1567254090&do=diff TD n°1 <div class="noborder"> Tous les exercices utilisent Bootstrap pour la partie CSS. </div> <div class="info"> Prérequis : * ECMAScript6 (2015) * Bases emberJS </div> - Création du repository git * Créer un dossier ember-tds ; * Publier ember-tds sur github en tant que nouveau repository ; * Ajouter jcheron à la liste des <span class="variable">content</span><span class="variable">MAX</span><span class="variable">info</span><span class="variable">size</span><span class=… text/html 2019-08-31T14:21:28+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/richclient/emberjs/td2-b?rev=1567254088&do=diff TD n°2 suite 2- Exercice : Gestion des contacts -- Objectifs * Créer un Model * Utiliser le store -- Fonctionnalités * Obtenir la liste des contacts et la filtrer * Ajouter un contact dans la liste * Modifier un contact existant * <span class="variable">nom</span><span class="variable">prenom</span><span class="variable">email</span><span class="method">toUpdate(contact)</span><span class="method">toAdd()</span><span class="method">toUpdate(contact)</span><span class="method">add… text/html 2019-08-31T14:21:28+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/richclient/emberjs/td2?rev=1567254088&do=diff TD n°2 <div class="noborder"> Tous les exercices utilisent Bootstrap pour la partie CSS. pour les fonts : </div> <div class="info"> Prérequis : * Bases emberJS * Computed properties * Actions </div> Créer le projet td2 - Exercice : choix multiples - Objectifs * Création de Computed properties * Manipulation de Tableaux d'objets<span class="variable">dispoItems</span><span class="variable">includedItems</span><span class="variable">dispoItemsIds_</span><span class="variab… text/html 2019-08-31T14:21:28+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/richclient/emberjs/td3?rev=1567254088&do=diff TD n°3 <div class="noborder"> Tous les exercices utilisent Bootstrap pour la partie CSS. pour les fonts : </div> <div class="info"> Prérequis : * Bases emberJS * Computed properties * Actions * Models * Opérations CRUD </div> <div class="note"> Le plugin ember-local-storage remplace le module ember-localstorage-adapter auquel la documentation officielle emberJS fait référence. </div><span class="variable">nom</span><span class="variable">prenom</span><span class="variable">… text/html 2019-08-31T14:21:30+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/richclient/emberjs/td4?rev=1567254090&do=diff TD n°4 <div class="noborder"> Ce projet utilise Semantic-UI pour la partie CSS. </div> * Projet boards * Application gestion de projets SCRUM Objectifs * Se connecter à un service web externe * Créer des composants * Manipuler les models Contexte Vous travaillez sur un outil permettant de gérer des projets.<div class="note"></div> text/html 2019-08-31T14:21:28+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/richclient/emberjs/td5?rev=1567254088&do=diff TD n°5 <div class="noborder"> QCM eCampus : * parcours 1 * parcours 2 </div> * Suite Projet boards * Application gestion de projets SCRUM Objectifs * Conception d'interfaces Web client riche * Manipulations datas * Utilisation composants - Eléments à implémenter - Route project/:project_id/board <span class="variable">boardVisible</span><span class="variable">backlog</span><span class="variable">active</span><span class="variable">progress</span><div class="note"></div> text/html 2019-08-31T14:21:30+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/richclient/emberjs/td6?rev=1567254090&do=diff TD n°6 <div class="noborder"> Ce projet utilise le repository github : boards-app Dépôts eCampus : * parcours 1 * parcours 2 </div> * Projet boards * Application gestion de projets SCRUM Objectifs * Factorisation du code * Réutilisation Prise en main Vous pouvez au choix : * Partir de votre propre projet et y inclure les éléments du projet Github<div class="note"></div> text/html 2019-08-31T14:21:28+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/richclient/emberjs/td7?rev=1567254088&do=diff TD n°7 <div class="noborder"> Dépôts eCampus : * parcours 1 * parcours 2 </div> * Suite Projet boards * Application gestion de projets SCRUM Objectifs * Conception d'interfaces Web client riche * Manipulations datas * Utilisation composants -- Eléments à implémenter -- Route project/:project_id/board <span class="variable">boardVisible</span><span class="variable">backlog</span><span class="variable">active</span><span class="variable">progress</span><div class="info"> <div… text/html 2019-08-31T14:21:28+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/richclient/emberjs/templates?rev=1567254088&do=diff Templates Ember utilise handlebars pour la partie templates. Hamdlebars utilise comme beaucoup d'autres moteurs de templates les doubles accolades {{}} pour faire appel aux expressions. Affichage de variables Cette utilisation suppose que les propriétés text/html 2019-08-31T14:21:28+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/richclient/emberjs/tests?rev=1567254088&do=diff Tests Ember permet d'effectuer trois types de tests : * Les tests unitaires : unit tests * Les tests d'acceptation : acceptance tests * Les tests d'intégration : integration tests Le framework QUnit est utilisé par défaut pour les tests Exécution