TD n°4

SpringBoot - VueJS

 

Notions abordées

  • Back-end :
    1. Service Rest
    2. Génération SPA
  1. Front-end :
    • SPA vueJS
    • Vuetify
    • Composants

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)

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

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
framework-web/spring/td4.txt · Dernière modification: 2019/03/13 10:52 par jcheron
GNU Free Documentation License 1.3
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0