Différences

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

--- framework-web:spring:td4 [2019/03/13 03:53] – [Application messagerie (suite)] jcheron
+++ framework-web:spring:td4 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 32: / Ligne 32: @@
 ===== 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.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();
@@ Ligne 64: / Ligne 67: @@
     <v-card-actions>
       <v-spacer></v-spacer>
-      <v-btn color="primary" flat @click="validate">{{validateCaption}}</v-btn>
+      <v-btn color="success" @click="validation">{{validatecaption}}</v-btn>
     </v-card-actions>
   </v-card>
@@ Ligne 70: / Ligne 73: @@
 </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 |