R4A.10 - Compléments Web (vuejs)

L'archive des sources (répertoire src) pour les démonstrations est téléchargeable [ ici ]. 

3°/ Principes fondamentaux de Vuetify

3.1°/ les composants vuetify.

Exemple, avec un bouton vuetify :

<template>
  <div>
    <v-btn>Clic</v-btn>
  </div>
</template>

Exemple, texte en vert et padding à gauche :

<template>
  <div>
    <v-btn :style="{color:'green', paddingLeft: '50px'}">Clic</v-btn>
  </div>
</template>

Exemple, marges de 40 pixels et padding de 8 pixels :

<template>
  <div>
    <v-btn
      class="ma-10 pa-2"
    >
      Clic
    </v-btn>
  </div>
</template>

3.2°/ La grille de positionnement

Exemple, 1 seule ligne et 2 colonnes, par défaut de rapport de taille 1/5, et de rapport 1/2 pour les supports md et au-delà :

<v-container>
  <v-row>
    <v-col cols="2" md="4">
      <v-btn block> Bouton 1 </v-btn>
    </v-col>
    <v-col cols="10" md="8">
      <v-btn block> Bouton 2 </v-btn>
    </v-col>
  </v-row>
<v-container>

Démonstration n°1 :

• copier App.vue.1 dans App.vue
• npm run serve, pour lancer la démo.
• faire varier la taille du naviguateur : à 960px de large, on change de rapport de taille.
• modifier le code et mettre md="10" pour la 2ème colonne : la somme dépasse 12 et cette colonne est "mise à la ligne"
• modifier le code et mettre md="6" pour la 2ème colonne : la somme est inférieure à 12 donc pas de problème, excepté que le bouton n'atteint pas la droite du conteneur.

4°/ exemples

4.1°/ customiser un bouton

Démonstration n°2 :

• copier App.vue.2 dans App.vue
• npm run serve, pour lancer la démo.
• cliquer sur le bouton 2 : l'animation par défaut de chargement se lance (NB : pendant 3s grâce à la fonction doLoad() )
• pour le bouton 1, changer pa-10 en pa-2 : le padding change.
• pour le bouton 1, supprimer outlined : le style change

Remarques :

• Les paddings et marges sont bien appliqués grâce aux noms spéciaux de classes de style.
• Par exemple, le padding pt-5 du bouton 2 s'applique uniquement au haut du bouton (d'où le t après le p).
• Le style du bouton change également en fonction des attributs "spéciaux" que l'on ajoute/enlève : rounded, block, ...
• Le contenu du bouton est bien fixé par slot par défaut (i.e. ce que l'on met entre l'ouverture et la fermeture de <v-btn>).
• On capture l'événement click comme avec n'importe quel composant vuejs : v-on:click, ou bien @click.

4.2°/ Dialog & Cards

• si on veut activer un dialogue à partir d'un bouton, on écrit :

<v-dialog>
  <template v-slot:activator={on, attrs, value}">
    <v-btn v-on="on" v-bind="attrs"> click <v-btn>
  </template>
  ... définition de la fenêtre de dialogue
</v-dialog>

Démonstration n°3 :

• copier App.vue.3 dans App.vue
• npm run serve, pour lancer la démo.
• cliquer sur le bouton : la fenêtre de dialogue s'ouvre.
• cliquer en dehors du dialogue : il reste ouvert. C'est l'attribut persistent qui permet cela.
• cliquer sur oui ou non pour fermer le dialogue.

Remarques :

• Le fait que la fenêtre de dialogue soit visible ou non est commandée par la valeur de l'attribut value de <v-dialog>.
• On le voit bien dans le texte du bouton qui affiche justement la valeur de value, récupérée grâce au scoped-slot activator.
• Si on utilise un activateur, la fonction click() appelée change value pour la mettre à true.
• Pour fermer le dialogue, il faut donc remettre value à false.
• Or, une fois dans la dialogue, on a pas un accès direct à cette variable.
• Le plus simple est de relier value de façon bidirectionnelle (grâce à v-model) à une variable que l'on va mettre à false pour fermer le dialogue (cf. showDial dans le code).

 4.3°/ Table de données

Exemple basique, avec un tableau de nom/prénom, seule la colonne nom peut être triée :

<template>
  <v-data-table
    :headers="titres"
    :items="infos"
    ...
  >
</template>
<script>
  name: 'App',
  data: () => ({
    titres: [
      {text: 'Nom', value: 'lastName'},
      {text: 'Prenom', value: 'firstName'}
    ],
    infos: [
      {id:0, lastName:'Dupond', firstName:'jean'},
      {id:1, lastName:'Durand', firstName:'alcyonne', sortable: false},
    ]
  }), 
  ...
}
</script>
      

Exemple avec recherche:

<template>
  <v-text-field
    v-model="mysearch"
    label="chercher"
  ></v-text-field>
  <v-data-table
    :headers="titres"
    :items="infos"
    :search="mysearch"
  ></v-data-table>
</template>
<script>
export default {
  name: 'App',
  data: () => ({
     mysearch: '',
    ...
  }
}

Démonstration n°4 :

• copier App.vue.4 dans App.vue
• npm run serve, pour lancer la démo.
• cliquer sur les boutons de pagination pour parcourir les pages.
• cliquer sur "Tous" dans "lignes par pages" et réduire la hauteur de la fenêtre : le contenu du tableau n'est pas scrollable, c'est la fenêtre toute entière qui l'est.
• cliquer une première fois sur la flèche qui apparaît à côté de Name : les données sont triées par ordre croissant sur Name.
• cliquer une deuxième fois : les données sont triées par ordre décroissant.
• cliquer une troisième fois : les données sont dans l'ordre de définition du code.
• cliquer sur "group" dans la colonne "Course" : les lignes sont regroupées en prenant les valeurs identiques de matières, puis ces groupes sont classés par ordre alphabétique. cliquer sur une des croix pour enlever le regroupement.
• taper 13 dans le champ de recherche : aucune correspondance trouvée. Normal car la colonne des notes n'est pas incluse dans la recherche.
• taper nr dans le champ de recherche : seules les lignes contenant Henri sont affichées.
• taper dd dans le champ de recherche : seules les lignes contenant BdD sont affichées.
• cliquer sur quelques cases à cocher : la moyenne en bas change dynamiquement. En effet, on calcule cette moyenne dès que la variable selected change.
• changer la ligne item-key="id" en item-key="name", puis sélectionner une case avec "Jean" : toutes les cases Jean sont sélectionnées en même temps. On peut donc influer sur le principe de sélection grâce à item-key.

Remarques :

• La dernière manipulation implique que si l'on veut absolument pouvoir sélectionner des lignes indépendamment les unes des autres, il faut que item-key référence une propriété dont la valeur est unique pour chaque ligne. Il faut donc prévoir cela dans le modèle de données, notamment quand les données proviennent d'une BdD et qu'elles ne sont pas référencées par un id unique (NB : si la BdD est correctement conçue, cela ne devrait pas être la cas ! ).

4.4°/ Barre de navigation, Suivre des routes & divers bonus

Démonstration n°5 :

• copier App.vue.5 dans App.vue
• npm run serve, pour lancer la démo.
• cliquer sur les boutons de en haut à droite pour afficher l'un ou l'autre des composants.
• cliquer sur l'icône à gauche du titre : le panneau glissant apparaît, qui permet de suivre les mêmes routes que les 2 boutons.
• dans ComponentA, on peut cliquer sur les boutons + et - pour augmenter/réduire la largeur de la zone rouge.
• scroller vers le bas : la barre du haut est immédiatement masquée.
• si on affiche ComponentB puis de nouveau ComponentA, la zone rouge fait toujours la même taille : normal car sa taille est stockée dans le store Vuex.

Remarques :

• Il n'y a pas besoin de fermer explicitement le panneau glissant. En revanche, on doit l'ouvrir en mettant la valeur true dans son attribut value. Pour cela, on fait comme avec les dialogue, on utilise une liaison bidirectionnelle avec une variable que l'on peut mettre à true, en l'occurrence quand on clique sur l'icône du panneau.
• Dans le fichier views/ComponentA.vue, on voit comment on peut "dessiner" dans un composant, grâce à la balise html <canvas>.
• Pour cela, il suffit de récupérer lors du "montage" du composant, l'objet dans le DOM représentant l'élément canvas que l'on veut manipuler. 
• Le "contexte" de cet objet permet ensuite à vuejs d'appeler les méthodes pour dessiner sur le canevas.
• ATTENTION : tous les navigateurs ne supportent pas cette balise et/ou toutes les fonctions de dessin possible. Mais avec les derniers navigateurs, on peut carrément récupérer un contexte de dessin 3D et faire de l'openGL.