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="primary" flat @click="validation">{{validateCaption}}</v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>

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