Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

PrimeFaces: validazione con AJAX

PrimeFaces: validazione con AJAX. Integriamo la validazione ajax nella gestione contatti degli esempi precedenti.
PrimeFaces: validazione con AJAX. Integriamo la validazione ajax nella gestione contatti degli esempi precedenti.
Link copiato negli appunti

In questo articolo introdurremo con un esempio molto semplice la validazione multipla di campi in PrimeFaces utilizzando ajax, completando ed integrando la rubrica PrimeFaces già proposta come punto di partenza.

Vogliamo realizzare una validazione che renda obbligatorio l'inserimento e la valorizzazione dei campi nome e cognome, e che impedisca di inserire in rubrica un coppia nome-cognome già esistente.

Per realizzare quanto detto, utilizzeremo il tag <p:ajax/> noto nel manuale PrimeFaces come AjaxBehavior. Questo tag viene utilizzato all'interno di altri tag che supportano le caratteristiche Ajax come ad esempio il <p:inputText/>.

La rubrica consente l'inserimento di nuovi record e modifica di quelli esistenti visualizzando delle dialog. La validazione che andiamo a realizzare sarà basata su chiamate Ajax scatenate dai campi nome, o cognome, in risposta all'evento di perdita del focus (blur). Se la validazione ha esito negativo vedremo comparire un messaggio che notifica di questo evento e contemporaneamente i pulsanti della dialog di inserimento o modifica disattivati. I pulsanti disattivati si riattiveranno nel momento in cui le modifiche alle inputText produrranno una validazione con esito positivo.

Un record già esistente

Supponiamo di selezionare un record dalla tabella:

Figura 1. form con i dati di un contatto
(clic per ingrandire)


form con i dati di un contatto

E di modificare il nome e cognome inserendo valori già presenti ottenendo un risultato simile al seguente:

Figura 2. record già esistente
(clic per ingrandire)


record già esistente

Notiamo la comparsa del messaggio di errore e i pulsanti Aggiorna ed Elimina disattivati. Le modifiche da effettuare sui campi inputText e commandButton della dialog di inserimento sono le seguenti:

<p:inputText value="#{contactsBean.contact.nome}" id="nome" required="true" requiredMessage="#{msgs.label_name}:#{msgs.mandatory_field}">
	<p:ajax event="blur" update="growl,salva" process="@this" listener="#{contactsBean.validateOnBlur}"  />
</p:inputText>
<p:inputText value="#{contactsBean.contact.cognome}" id="cognome" required="true" requiredMessage="#{msgs.label_surname}:#{msgs.mandatory_field}">
	<p:ajax event="blur" update="growl,salva" process="@this" listener="#{contactsBean.validateOnBlur}"  />
</p:inputText>
<p:commandButton value="#{msgs.label_save}" ajax="true"
	onclick="newDialog.close()" actionListener="#{contactsBean.salva}"
	update="tbl" id="salva" disabled="#{facesContext.validationFailed}">
</p:commandButton>

omissione di un campo

Come possiamo notare le inputText relative al nome e al cognome vengono dotate di un id, dell'attributo required e del messaggio associato all'attributo required e definito nei file di properties messages_en.properties e messages_it.properties. In questo modo abbiamo attivato l'obbligatorietà dei campi. Se tentiamo di inserire un record senza valorizzare il nome, il cognome o entrambi otterremo un errore:

Figura 3. errore nell'inserimento
(clic per ingrandire)


record già esistente

Quando invece forniamo un valore per il campo nome e per il campo cognome, la perdita del focus di questi campi produrrà una chiamata Ajax per la validazione congiunta degli stessi.

L'attributo process="@this" indica che la chiamata ajax interessa solo il tag padre del tag <p:ajax/>.

L'attributo listener identifica il metodo del managed bean da invocare in risposta all'evento di chiamata Ajax e che contiene la nostra logica di validazione.

Al termine della chiamata e del growl per i messaggi ed i pulsanti con id aggiorna ed elimina, verranno aggiornati nel loro stato: i pulsanti eventualmente disabilitati ed il growl che produce un eventuale messaggio di errore.In sostanza desideriamo,come anticipato precedentemente, che i pulsanti vengano disabilitati se la validazione ha esito negativo, impedendo quindi di salvare o cancellare, e che venga visualizzato un messaggio di errore che indica la presenza nel database di un record con lo stesso nome e congome inseriti.

gestione dei pulsanti

Nei <p:commandButton/> si è fatto uso dell'attributo disabled che disabilita i pulsanti se durante l'esecuzione del metodo di validazione viene invocato sul FacesContext il metodo validationFailed(), cosa che nel nostro caso indica il fallimento della validazione. La dialog di aggiornamento funziona in modo perfettamente analogo all'inserimento, in questo caso le modifiche sono le seguenti:

<p:inputText value="#{contactsBean.contact.nome}" id="nome" required="true" requiredMessage="#{msgs.mandatory_field}">
	<p:ajax event="blur" update="growl,aggiorna,elimina" process="@this"
			listener="#{contactsBean.validateOnBlur}"  />
</p:inputText>
<p:inputText value="#{contactsBean.contact.cognome}" id="cognome" required="true"
			requiredMessage="#{msgs.label_surname}:#{msgs.mandatory_field}">
	<p:ajax event="blur" update="growl,aggiorna,elimina" process="@this"
			listener="#{contactsBean.validateOnBlur}"/>
</p:inputText>
<p:commandButton value="#{msgs.label_update_contact}" ajax="true"
	actionListener="#{contactsBean.aggiorna}" update="tbl"
	onclick="updDialog.close()"
	id="aggiorna" disabled="#{facesContext.validationFailed}">
</p:commandButton>
<p:commandButton value="#{msgs.label_delete_contact}" ajax="true"
	actionListener="#{contactsBean.elimina}" update="tbl" 			 	onclick="updDialog.close()"
	id="elimina" disabled="#{facesContext.validationFailed}">
</p:commandButton>

Il managed bean ContactsBean

Il metodo aggiunto nel managed bean ContactsBean è il seguente e permette la validazione su entrambe le dialog:

public void validateOnBlur() {
	FacesContext ctx = FacesContext.getCurrentInstance();
    if (contact.getNome() != null && contact.getCognome() != null) {
    	EntityManager em = emf.createEntityManager();
    	Query query = em.createQuery(
    		"SELECT c FROM Contact c where upper(c.nome)=upper(?1) " +
    		"and upper(c.cognome)=upper(?2) and "+ "c.id!=?3");
    	query.setParameter(1, contact.getNome());
    	query.setParameter(2, contact.getCognome());
    	if (contact.getId() != null) {
    		query.setParameter(3, contact.getId());
    	} else {
    		query.setParameter(3, 0);
    	}
	    List results = query.getResultList();
	    if (results != null && results.size() > 0) {
	    	Locale currentLocale = (Locale);
	    	getSessionMap().get("currentLocale");
	    	FacesMessage message = new FacesMessage(
	    		FacesMessage.SEVERITY_ERROR,
	    		getMessage("label_error", currentLocale),
	    		getMessage("validation_error", currentLocale)
	    	);
	    	ctx.addMessage(null, message);
	    	ctx.validationFailed();
	    }
    }
}

I metodi salva, aggiorna, elimina vedono la linea di codicecontact=null modificata in contact = new Contact(). Affinchè il tutto funzioni correttamente, occore solo inserire nei file di properties dell'internazionalizzazione alcuni messaggi:

In messages_it.properties:
validation_error=Un record con questo nome e cognome esiste già
mandatory_field=Campo obbligatorio

In messages_en.properties:
validation_error=A record with this name and surname already exists
mandatory_field=Field required

...e cambiare nel faces-config lo scope del managed bean ContactsBean da request a view:

<managed-bean>
	<managed-bean-name>contactsBean</managed-bean-name>
	<managed-bean-class>prime.sample.ContactsBean</managed-bean-class>
	<managed-bean-scope>view</managed-bean-scope>
</managed-bean>

Questa breve serie di articoli dovrebbe aver permesso di avere una idea delle caratteristiche della libreria e delle sue potenzialità. Il meccanismo di validazione presentato in questo caso non è l'unico ma è sicuramente quello che meglio si adatta alle caratteristiche dell'applicativo realizzato.

Gli articoli precedenti

  1. Una rubrica dei contatti con PrimeFaces
  2. Internazionalizzazione in JSF2 con PrimeFaces


Ti consigliamo anche