TD n°4

Notions abordées Back-end : Service Rest Génération SPA Front-end : SPA vueJS Vuetify Composants

• SpringBoot-VueJS
• VuetifyJS
• VueJS

Les composants permettent d'associer un comportement à un ensemble d'éléments visuels paramétrables et réutilisables.

Création en Java (composant créé dans src/main/resources/static/vueJS)

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);
	}
}

<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>

Test en dur :

 <confirm-button width="400" title="Titre" message="message...">Test de bouton</confirm-button>

Test avec variables :

   <confirm-button :width="dlgWidth" :title="dlgTitle" :message="dlgMessage" @validation="validate" :validatecaption="validateCaption">Test de bouton</confirm-button>

Dans le contrôleur associé à la vue :

	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");