Esperienze di programmazione in Java: Inserire modificare cancellare righe su Datatable Primefaces

Vai all'indice

Nel post Primefaces esempio introduttivo vi ho presentato l'oggetto Datatable di Primefaces. Come abbiamo visto lo strumento DataTable espone i dati in forma tabellare ed in modo versatile e interattivo. Inoltre, come si può vedere dallo Showcase di Primefaces, è possibile implementare interessanti caratteristiche come: filtri, ordine e gruppi secondo colonne specifiche, tabelle annidate, paginazione e molto altro. In questo post dimostrerò come inserire, modificare e cancellare righe su un oggetto Datatable contenente i dati di una lista di utenti. Non riporterò i file di configurazione pom.xml, web.xml e faces-config.xml poichè sono gli stessi già visti nell'esempio precedente.

La pagina index.xhtml contiene un form necessario per l'inserimento dei dati relativi ai singoli utenti, ed un oggetto Datatable dove vengono gestiti i dati degli utenti una volta inseriti.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
>
<h:head>
<title>Gestione utenti</title>
</h:head>
<h:body>
<h:form id="form1">
<p:growl id="messages" showDetail="true"/>
<p:panel header="Gestione utenti" style="width: 800px;">
<p:dataTable value="#{utenti.utentiList}" var="o" widgetVar="50" style="width: 760px;" editable="true">
<f:facet name="header">
Lista utenti
</f:facet>
<p:ajax event="rowEdit" listener="#{utenti.onEdit}" update=":form1:messages" />
<p:ajax event="rowEditCancel" listener="#{utenti.onCancel}" update=":form1:messages" />
<p:column>
<f:facet name="header">
<h:outputText value="Nome utente" />
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{o.nome}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{o.nome}" style="width:100%"/>
</f:facet>
</p:cellEditor>
</p:column>

<p:column>
<f:facet name="header">
<h:outputText value="Ruolo" />
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{o.ruolo}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{o.ruolo}" style="width:100%"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Data di nascita" />
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{o.data}" >
<f:convertDateTime type="date" pattern="dd-MM-yyyy" timeZone="Europe/Berlin" />
</h:outputText>
</f:facet>
<f:facet name="input">
<p:inputText value="#{o.data}" style="width:100%">
<f:convertDateTime type="date" pattern="dd-MM-yyyy" timeZone="Europe/Berlin" />
</p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Via" />
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{o.via}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{o.via}" style="width:100%"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Città" />
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{o.citta}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{o.citta}" style="width:100%"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Telefono" />
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{o.telefono}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{o.telefono}" style="width:100%"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Gest" style="width:50px">
<p:rowEditor />

<h:commandLink styleClass="ui-icon ui-icon-trash" action="#{utenti.delete(o)}"/>
</p:column>
</p:dataTable>
<p:spacer height="30px;"/>
<p:panelGrid columns="2">
<f:facet name="header">
Nuovo utente
</f:facet>
<h:outputLabel for="nome" value="Cognome Nome: " />
<p:inputText value="#{utenti.nome}"/>
<h:outputLabel for="ruolo" value="Ruolo: " />
<p:inputText value="#{utenti.ruolo}"/>
<h:outputLabel for="data" value="Data nascita: " />
<p:calendar id="popup" value="#{utenti.data}" />
<h:outputLabel for="via" value="Via: " />
<p:inputText value="#{utenti.via}"/>
<h:outputLabel for="citta" value="citta: " />
<p:inputText value="#{utenti.citta}"/>
<h:outputLabel for="telefono" value="Telefono: " />
<p:inputMask value="#{utenti.telefono}" mask="999-9999999"/>
<f:facet name="footer">
<h:commandButton value="Aggiungi utente" action="#{utenti.addAction}"/>
</f:facet>
</p:panelGrid>
</p:panel>
</h:form>
</h:body>
</html>

Il Datatable presentato in questo esempio permette di modificare i dati direttamente "inline" tramite un comando Ajax. Cliccando l'icona a forma di matita in fondo alla riga i campi diventano editabili. L'icona "check" permette di consolidare le modifiche effettuate sui dati, mentre l'icona a forma di "x" consente di uscire dalla modalità di "editing" senza modificare i campi. E' possibile cancellare un singolo record cliccando l'icona "trash" in fondo alla riga. Il risultato è rappresentato dall'immagine seguente:

Il backing bean "utentiBean" contiene la definizione delle variabili ed i metodi per l'inserimento, cancellazione e modifica dei dati acquisiti dalla pagina index.

@ManagedBean(name = "utenti")
@SessionScoped
public class utentiBean implements Serializable {

private static final long serialVersionUID = 1L;
public String nome;
public String ruolo;
private Date data;
public String via;
public String citta;
public String telefono;
utenteBean utente;

public String getNome() {
      return nome;
}

public void setNome(String nome) {
        this.nome = nome;
}

public String getRuolo() {
        return ruolo;
}

public void setRuolo(String ruolo) {
        this.ruolo = ruolo;
}

public Date getData() {
        return data;
}

public void setData(Date data) {
        this.data = data;
}

public String getVia() {
        return via;
}

public void setVia(String via) {
        this.via = via;
}

public String getCitta() {
        return citta;
}

public void setCitta(String citta) {
        this.citta = citta;
}

public String getTelefono() {
        return telefono;
}

public void setTelefono(String telefono) {
        this.telefono = telefono;
}

public utenteBean getUtente() {
return utente;
}

public void setUtente(utenteBean utente) {
this.utente = utente;
}
private static final ArrayList<utenteBean> utentiList = new ArrayList<utenteBean>();

public ArrayList<utenteBean> getUtentiList() {
return utentiList;
}

public String addAction() {
utenteBean utentetmp = new utenteBean(this.nome, this.ruolo, this.data, this.via, this.citta, this.telefono);
utentiList.add(utentetmp);

nome = "";
ruolo = "";
String dateStr = "1970-01-01T00:00:00.000+01:00";
SimpleDateFormat sdf = new SimpleDateFormat( "yyyy-MM-dd'T'HH:mm:ss.SSSZ");
try {
data = sdf.parse(dateStr.replaceAll(":(?=..$)", ""));
} catch (ParseException e) {
System.out.println("Unparseable using " + sdf);
}
via = "";
citta = "";
telefono = "";
return null;
}
public void onEdit(RowEditEvent event) {
FacesMessage msg = new FacesMessage("Record modificato",((utenteBean) event.getObject()).getNome());
FacesContext.getCurrentInstance().addMessage(null, msg);
}

public void onCancel(RowEditEvent event) {
FacesMessage msg = new FacesMessage("Modifiche annullate");
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void delete(utenteBean std){
utentiList.remove(std);
FacesMessage msg = new FacesMessage("Record cancellato");
FacesContext.getCurrentInstance().addMessage(null, msg);
}
}

I dati degli utenti sono salvati in un'istanza Arraylist della classe "UtenteBean" di cui riporto la struttura di seguito.

public class utenteBean implements Serializable {

private static final long serialVersionUID = 1L;
private String nome;
private String ruolo;
private Date data;
private String via;
private String citta;
private String telefono;

  public utenteBean(String nome, String ruolo, Date data, String via, String citta, String telefono) {
this.nome = nome;
this.ruolo = ruolo;
this.data = data;
this.via = via;
        this.citta = citta;
this.telefono = telefono;
}

public String getNome() {
return nome;
}

public void setNome(String nome) {
this.nome = nome;
}

public String getRuolo() {
return ruolo;
}

public void setRuolo(String ruolo) {
this.ruolo = ruolo;
}

public Date getData() {
return data;
}

public void setData(Date data) {
this.data = data;
}

public String getVia() {
return via;
}

public void setVia(String via) {
this.via = via;
}

public String getCitta() {
return citta;
}

public void setCitta(String citta) {
this.citta = citta;
}

public String getTelefono() {
return telefono;
}

public void setTelefono(String telefono) {
this.telefono = telefono;
}

}

Questo esempio ci dimostra la potenza dello strumento Datatable di Primefaces nella gestione di dati tabellari. Il prossimo passo sarà di utilizzare nel Datatable i dati provenienti da un database, inoltre grazie all'integrazione con Spring e Hibernate renderemo la nostra una vera e propria applicazione enterprise.

Anche questo esempio è scaricabile da GitHub.

Hai apprezzato questo post? Conferma le mie competenze o scrivi una segnalazione sul mio profilo Linkedin!

Esperienze di programmazione in Java

Oracle PL/SQL

domenica 28 dicembre 2014

Inserire modificare cancellare righe su Datatable Primefaces

Nessun commento:

Posta un commento