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:
(clic per ingrandire)
E di modificare il nome e cognome inserendo valori già presenti ottenendo un risultato simile al seguente:
(clic per ingrandire)
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:
(clic per ingrandire)
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.
