[Primefaces-Java] Afficher une table SQL dans une datatable HTML.

logoIntroduction


Le framework Primefaces est sympa, parce que super structuré et avec de bons exemples sur son site, et c’est du Java, mais du java assez simple, du moins au début.

Pour l’instant, AngularJs me parait plus rapide, flexible, intuitif  et facile à appréhender, surtout avec le format JSON, mais Primefaces est bien aussi pour les bases relationelles et pour passer en full java, et super structuré. De plus une fois que ca marche, ca marche.

Vu que je vais passer sur un autre WordPress, je tape cette dernière doc assez vite

Le résultat dans le navigateur


prme.jpg

Le but


Créer une datatable primefaces qui présente des étudiant provenant d’une base mysql.

On crée d’abord une table sql etudiants sur mysql :


table1.jpg

Puis dans Eclipse, la mise en place de l’environnement :



  1. Dans Eclipse, créer un new dynamic project, sur la premiere page, cliquer sur le bouton « configuration » et cocher « java server faces » puis finir.
  2. dans Eclipse, Glisser-déposer les fichiers *.jar (Ce sont des librairies annexes) mysql connector et primefaces 6.0 dans le répertoire WebContent/WEB-INF/lib

Ensuite, on créée les packages qui vont contenir nos classes …


Dans le répertoire Java ressources/src, créer  les packages suivants (Les packages permettent seulement de trier les classes par « rôles » plus facilement).:

  • Le package beans, qui va contenir les beans, les beans sont des classes contenant des getters et des setters, pour simplifier on peut dire que c’est un container de variables que la vue HTML va aller puiser.
  • Le package dao qui va gérer les accès à la base de données , ceci afin de clarifier le code.
  • Le package connexion, qui va paramétrer les connexions SQL, et donc la connexion à notre base de données MYSQL.

Voici l’aspect des packages qui contiennent des classes dans Eclipse :

packages.jpg

Ensuite, on crée la vue INDEX.XHTML dans le rep WebContent :


On voit dans le code que la datatable fait appel à la fonction getEtudiants(), située dans notre bean etudiant. On peut voir qu’à la manière d’AngularJS, Primefaces va boucler sur les résultats de la fonction getEtudiants() pour alimenter notre table.

La vue index.xhtml est couplée au bean etudiant.java que nous allons créer plus bas.

<?xml version="1.0" encoding="UTF-8"?>
<!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">
    <h:head>
        <h:outputStylesheet library="css" name="table-style.css"  ></h:outputStylesheet>
    </h:head>
    <h:body>
        <h:form id="form1">
            <p:dataTable value="#{etudiant.getEtudiants()}" var="o" paginator="true" rows="3"                          paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"                          rowsPerPageTemplate="3,5,10" widgetVar="50" style="width: 700px;" >
                <f:facet name="header">
                    Liste des etudiants
                </f:facet>
                <p:column  filterBy="#{o.prenom}">
                    <f:facet name="header">
                        <h:outputText value="Prenom" ></h:outputText>
                    </f:facet>
                    <h:outputText value="#{o.prenom}"></h:outputText>
                </p:column>
                <p:column sortBy="#{o.nom}">
                    <f:facet name="header">
                        <h:outputText value="nom" ></h:outputText>
                    </f:facet>
                    <h:outputText value="#{o.nom}"></h:outputText>
                </p:column>
                 <p:column style="width:32px;text-align: center">

	        </p:column>
            </p:dataTable>
        </h:form>
    </h:body>
</html>

Il est maintenant temps de créer notre BEAN etudiant(Une classe) , dans le package beans :


On voit ici qu’on appelle différentes librairies en début de bean, si il en manque une, cela ne fonctionnera pas. On Remarque les annotations Managedbean et SessionScoped, qui sont obligatoires, et enfin la fonction getEtudiants()qui retourne un tableau qui va alimenter notre table HTML .

package beans;

import dao.etudiantDAO;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.model.SelectItem;

@ManagedBean(name = "etudiant")
@SessionScoped
public class etudiant {
    private String prenom, nom;

    public String getPrenom() {
        return prenom;
    }

    public void setPrenom(String prenom) {
        this.prenom = prenom;
    }

    public String getNom() {
        return nom;
    }

    public void setNom(String nom) {
        this.nom = nom;
    }

    public ArrayList<etudiant> getEtudiants() {
        return etudiantDAO.getEtudiants();
    }
}

Ensuite, on crée notre classe etudiantDAO dans le package dao,


etudiantDAO.java va nous servir à manipuler la base SQL sur Mysql et à récupérer des données ( Si on avait hibernate, ce serait plus rapide à écrire, la on doit tout se taper, c’est assez affreux.)

Quelques remarques : On importe la classe connexion pour pouvoir se connecter à Mysql, et on importe le bean étudiant. On remarque que la gestion des erreurs est sympa avec un CATCH.

package dao;
import connexion.connexion;
import beans.etudiant;

import java.sql.*;
import java.util.ArrayList;

public class etudiantDAO {

	public static ArrayList<etudiant> getEtudiants() {
        try {
            Connection con = connexion.getConnection();
            PreparedStatement ps = con.prepareStatement("select * from etudiants");
            ArrayList<etudiant> al = new ArrayList<etudiant>();
            ResultSet rs = ps.executeQuery();
            boolean found = false;
            while (rs.next()) {
            	etudiant e = new etudiant();
                e.setPrenom(rs.getString("prenom"));
                e.setNom(rs.getString("nom"));
                al.add(e);
                found = true;
            }
            rs.close();
            if (found) {
                return al;
            } else {
                return null; // no entires found
            }
        } catch (Exception e) {
            System.out.println("Error In getEtudiants() -->" + e.getMessage());
            return (null);
        }
    }

}

Et enfin, pour pouvoir se connecter à MYSQL, on créée la classe connexion, dans le package connexion :


package connexion;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

public class connexion {
	public static Connection getConnection() {

	    Connection dbConnection = null;

	    String URL = "jdbc:mysql://localhost:3306/test";
	    String USER = "root";
	    String PASSWORD = "root";
	    String DRIVER = "com.mysql.jdbc.Driver";

	    try {

	        Class.forName(DRIVER);
	        dbConnection= DriverManager.getConnection(URL, USER, PASSWORD);
	        System.out.println("Connection completed.");

	    } catch (SQLException e) { 

	        System.out.println(e.getMessage()); 

	    }catch(ClassNotFoundException cnfe){

	       cnfe.printStackTrace();
	       System.out.println(cnfe.getMessage());
	       System.exit(-1);

	   }

	    return dbConnection;
	}
}

Conclusion:


Pour l’instant, cela parait assez facile, mais dès qu’il s’agit d’updater un champs, ou manipuler les données à la manière d’AngularJS, on se rends compte qu’en comparaison, AngularJS est incroyablement flexible et facile. Cependant, il faut continuer à tester un peu de tout sur le site de primefaces, car c’est très vraiment super . De plus, il faudrait voir à mettre du hibernate qui est méga rapide et auto-crée les tables sql.

dans un autre sujet, je suis impatient de faire des back ends java pour angularJS, avec une conversion JSON qui s’opère à chaque fois mais au début, ce n’est pas simple.

 

Publicités