Différences

Ci-dessous, les différences entre deux révisions de la page.

--- framework-web:spring:td4 [2019/03/13 02:01] – créée jcheron
+++ framework-web:spring:td4 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 29: / Ligne 29: @@
 ===== Application messagerie (suite) =====
+Les composants permettent d'associer un comportement à un ensemble d'éléments visuels paramétrables et réutilisables.
+===== Création =====
+Création en Java (composant créé dans src/main/resources/static/vueJS)
+<sxh java>
+public class ButtonConfirmation {
+	public static void main(String[]args) throws IOException {
+		VueComponent compo=new VueComponent("confirm-button");
+		compo.setProps("title","message","validatecaption","type","size");
+		compo.addProp("width", 500);
+		compo.addData("dialog",false);
+		compo.addMethod("validation", "this.$emit('validation');this.dialog=false;");
+		compo.setDefaultTemplateFile();
+		compo.createFile(false);
+	}
+}
+</sxh>
+<sxh html;title:static/templates/vueJS/confirm-button.html>
+<v-dialog v-model="dialog" :width="width">
+  <template v-slot:activator="{ on }">
+  	<v-btn color="red lighten-2" dark v-on="on"><slot></slot></v-btn>
+  </template>
+  <v-card>
+    <v-card-title class="headline grey lighten-2" primary-title>
+      {{title}}
+    </v-card-title>
+    <v-card-text>
+      {{message}}
+    </v-card-text>
+    <v-divider></v-divider>
+    <v-card-actions>
+      <v-spacer></v-spacer>
+      <v-btn color="success" @click="validation">{{validatecaption}}</v-btn>
+    </v-card-actions>
+  </v-card>
+</v-dialog>
+</sxh>
+Test en dur :
+<sxh html;title:test.html>
+ <confirm-button width="400" title="Titre" message="message...">Test de bouton</confirm-button>
+</sxh>
+Test avec variables :
+<sxh html;title:test.html>
+   <confirm-button :width="dlgWidth" :title="dlgTitle" :message="dlgMessage" @validation="validate" :validatecaption="validateCaption">Test de bouton</confirm-button>
+</sxh>
+Dans le contrôleur associé à la vue :
+<sxh java>
+	vue.addMethod("validate", "console.log('validation...');");
+	vue.addData("dlgTitle","Titre du dialogue");
+	vue.addData("dlgWidth",600);
+	vue.addData("dlgMessage","Voulez-vous...");
+	vue.addData("validateCaption","Valider");
+</sxh>
+===== Composants à créer =====
+^Composant ^Rôle ^
+|m-confirm-button | Bouton de confirmation avec dialog associé affichant un message de confirmation (pour valider ou annuler) |
+|m-data-table | Affiche un tableau d'objet (basé sur v-data-table de vuetify) |
+|m-form-field | Affiche un champ de formulaire associé à une donnée, d'un certain type |
+|m-dialog-form | Affiche une boîte de dialogue contenant un formulaire pour afficher un objet |
+|m-crud | Permet de gérer les opérations de base sur une collection d'objets, utilise les composants précédents |