Ceci est une ancienne révision du document !
TD n°1
 | Tous les exercices utilisent Bootstrap pour la partie CSS. ember install ember-bootstrap |
Prérequis :
-- Exercice : application Note
-- Objectifs
- Créer un projet
- Créer des routes
- Créer/manipuler les templates
- Créer des classes et instancier des objets
- Mettre en oeuvre le Data-binding avec computed properties
-- Fonctionnalités
- Saisir une note (message textuel) et afficher le nombre de caractères restants (le message est limité à 100 caractères saisis)
- Enregistrer (pseudo enregistrement)
- Effacer le contenu
- Afficher les messages d'info (sauvegarde, modification…)
- Gérer les changements de classe CSS sur l'affichage d'info
-- Application
Fichier app/routes/ex1.js
| Classe | Note (EmberObject.extend({})) |
|---|---|
| content contenu de la note (par défaut : 'Entrez votre texte') |
|
| MAX nombre maximum de caractères dans la note (par défaut: 100) |
|
| info message temporaire affiché dans la zone info (par défaut: '') |
|
| size retourne le nombre de caractères dispo dans la note (* sur content) |
|
| style retourne le style css à appliquer sur la zone de message (* sur size) |
|
| alertVisible Détermine si l'alert info est visible (* sur info) |
|
| Route | ex1 |
| model()model hook, doit retourner une instance de Note | |
| Actions | save() Pseudo enregistrement (Affiche enregistrement + contenu de la note) |
| clear() vide noteContent |
(*) computed property
-- Vue
-- helpers handlebars utilisés
- {{expression}} voir expressions
- {{textarea ...}} voir textarea
- {{action...}} voir actions
-- Interface
-- Logique applicative / comportement de l'interface
- sur saisie dans la zone messageNote (textarea), le nombre de caractères restants est indiqué dans la zone status
- la zone info apparaît et indique “note modifiée” dès que messageNote est modifié
- Le style de la zone status passe à <fc orange>alert-warning</fc> si le nombre de caractères restant est inférieur à 50, et à <fc red>alert-danger</fc> s'il est inférieur à 20
- Sur enregistrement (à condition que le message ne soit pas vide) :
- la zone info affiche “note sauvegardée” et sont style passe à <fc #008000>alert-success</fc>
- Sur effacement (à condition que le message ne soit pas vide) :
- la zone info disparaît
-- Test en ligne
-- Exercice : Choix de services
-- Objectifs
- Créer des routes avec model
- Utiliser des helpers handlebar
- Mettre en oeuvre le Data-binding
- Utiliser les tableaux
-- Fonctionnalités
- Sélectionner/désélectionner des services
- Calculer le montant dû
- Afficher le nombre de services sélectionnés
-- Application
| Route | ex2 (app/routes/ex2.js) |
|---|---|
| model Retourne le tableau des services |
|
| toggleActive(service) change le statut actif du service |
|
| Contrôleur | ServicesController (app/servicesController.js) |
| total() Calcul le total des services actifs (*) voir computed properties and aggregate data |
|
| countActive() Retourne le nombre de services actifs (*) |
(*) computed properties
A utiliser
- filterBy pour filtrer les services en fonction de leur propriété active
- forEach pour le parcours des services
Services : à intégrer dans le hook model()
[
{
"name": "Web Development",
"price": 300,
"active":true
},{
"name": "Design",
"price": 400,
"active":false
},{
"name": "Integration",
"price": 250,
"active":false
},{
"name": "Formation",
"price": 220,
"active":false
}
]
-- Vue
-- helpers utilisées
- Expressions {{expression}}
-- Interface
-- Logique applicative / comportement de l'interface
- Le service Web development est sélectionné par défaut
- La classe css d'un service sélectionné est égale à active
- La sélection/dé-sélection met à jour l'affichage du nombre de services sélectionnés, ainsi que le total
-- Ajout code promo
- La saisie d'un code promo permet d'appliquer un taux de réduction au montant total (si la case est cochée et le code valide)
- La liste des codes est fournie en JS, elle sera a ajouter au model hook
{
"B22":0.05,
"AZ":0.01,
"UBOAT":0.02
}
