Introduction
Dans cet atelier, nous allons utiliser conjointement la technologie Jsf au niveau de la couche web tandis que la connexion JDBC à la base de données va être effectuée via la couche bean. Le projet travaille sur la base de données derby “transport” qui possède une seule table “voiture” composée des champs suivants : immatriculation, marque, nbportes, couleur. Nous essayons d'élaborer uniquement l'opération d'affichage des tuples de la table "Voiture". L’architecture du projet est ainsi élaborée sous l’IDE NetBeans 8.2 :
 |
| Architecture du projet |
La couche Métier
La couche métier de notre projet se constitue d'une seule entité, à savoir la classe "Voiture" que l'on va créer au niveau du package 'org.cours.jsf'.
Voiture.java
package org.cours.jsf;public class Voiture {
private String immatriculation;
private String marque;
private int nbPortes;
private String couleur;
public Voiture() {
}
public String getImmatriculation() {
return immatriculation;
}
public void setImmatriculation(String immatriculation) {
this.immatriculation = immatriculation;
}
public String getMarque() {
return marque;
}
public void setMarque(String marque) {
this.marque = marque;
}
public int getNbPortes() {
return nbPortes;
}
public void setNbPortes(int nbPortes) {
this.nbPortes = nbPortes;
}
public String getCouleur() {
return couleur;
}
public void setCouleur(String couleur) {
this.couleur = couleur;
}
}
La couche Bean
La classe qui va assurer les opérations d'interaction avec la base de données sera assurée par la classe de type ManagedBean "VoitureBean" et qui va en même temps jouer le rôle de relais avec à la fois la page jsf "voiture.xhtml" ainsi que la classe entité "Voiture.java". Cette classe est crée dans le package 'org.cours.jsf'.
VoitureBean.java
package org.cours.jsf;import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class VoitureBean {
public List<Voiture> getVoiture() throws ClassNotFoundException, SQLException {
Connection connect = null;
String url = "jdbc:derby://localhost:1527/transport";
String username = "root";
String password = "azerty";
try {
Class.forName("org.apache.derby.jdbc.ClientDriver");
connect = DriverManager.getConnection(url, username, password);
} catch (SQLException ex) {
System.out.println("in exec");
System.out.println(ex.getMessage());
}
List<Voiture> voitures = new ArrayList<>();
PreparedStatement pstmt = connect.prepareStatement("select immatriculation, marque, nbportes, couleur from Voiture");
ResultSet rs = pstmt.executeQuery();
while (rs.next()) {
Voiture voiture = new Voiture();
voiture.setImmatriculation(rs.getString("immatriculation"));
voiture.setMarque(rs.getString("marque"));
voiture.setNbPortes(rs.getInt("nbportes"));
voiture.setCouleur(rs.getString("couleur"));
voitures.add(voiture);
}
rs.close();
pstmt.close();
connect.close();
return voitures;
}
}
La couche Web
La page Jsf "voiture.xhtml" va faire appel au tag 'dataTable' pour pouvoir afficher les éléments de la structure de table 'Voiture' de la base de données 'transport'. Les données étant chargées depuis la 'ManagedBean' en passant par l'entité "Voiture".
Voiture.xhtml
<?xml version='1.0' encoding='UTF-8' ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h2>Liste des Voitures</h2>
<h:dataTable bgcolor="cyan" value="#{voitureBean.voiture}" var="voiture" border="2">
<h:column>
<f:facet name="header">Immatriculation</f:facet>
#{voiture.immatriculation}
</h:column>
<h:column>
<f:facet name="header">Marque</f:facet>
#{voiture.marque}
</h:column>
<h:column>
<f:facet name="header">Nombre portes</f:facet>
#{voiture.nbPortes}
</h:column>
<h:column>
<f:facet name="header">Couleur</f:facet>
#{voiture.couleur}
</h:column>
</h:dataTable>
</h:body>
</html>
Le rendu
On lance l’exécution de la page jsf “voiture.xhtml” en faisant bouton droit sur cette page et en choisissant après “Exécuter le fichier”, on obtiendra le rendu suivant : |
| Affichage de la page Voiture.xhtml |
Commentaires
Enregistrer un commentaire