Développement JSF

Une interface WEB pour éditer des tables

le datatable de JSF

Montre comment créer une interface web avc JSF pour visualiser et éditer un tableau de données.

Java fournie de nombreuses API pour développer des applications. Pour le Web nous avons l’approche JSP /Servlet mais nous avons également une approche orienté composant avec JSF et nous allons voir que ce n’est pas si compliqué de définir une interface WEB pour visualiser et éditer le contenu d’une table. Dans cet article nous nous contenterons d’utiliser une table mémoire. Dans un article suivant, nous la remplacerons par une table de base de données.

Sommaire

Présentation, p1
Création d’une page chargée d’afficher le, p1
Création d’un tableau éditable, p2
Conclusion, p2

1 2

Présentation

Nous allons utiliser NetBeans avec GlassFish pour réaliser notre exemple. Nous créerons un nouveau projet de type Web Application dans lequel nous ajouterons nos différents fichiers exemple.

Remarque : Vous pourrez suivre les explications dans l’article Présentation de CDI pour voir comment créer une application WEB utilisant CDI .

Création d’une page chargée d’afficher le contenu d’une table

Dans notre projet, nous allons d’abord créer une classe Personnel correspondant aux objets à afficher ainsi qu’une classe de service qui sera chargée de créer et gérer une liste de ces objets.

Définition de la classe "Personnel"

Nous ferons au plus simple pour ne pas avoir à coder trop de code. Cette classe ne sera composée que d’un identifiant, d’un nom et d’un prénom.

Définissons une classe Personnel comme suit :

public class Personnel
{
public Personnel()
{
}
public Personnel( int id, String nom, String prenom )
{
this.id = id;
this.nom = nom;
this.prenom = prenom;
}
//get/set, hashCode, equals
...
private Integer id;
private String nom;
private String prenom;

Télécharger

Définition de la classe "PersonnelsService"

Nous allons maintenant définir une classe de service dont le but sera de créer en mémoire la liste de personnels que nous devrons afficher dans la page Web.

Voici d’abord le code complet de cette classe.

package exercice2;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.annotation.PostConstruct;
import javax.enterprise.context.ApplicationScoped;
import javax.inject.Named;
@Named( value = "listePersonnels" )
@ApplicationScoped
public class PersonnelsService implements Serializable
{
public PersonnelsService()
{
personnels = new HashMap<>();
System.out.println( "TEST: Création PersonnelsService" );
}
@PostConstruct
public void init()
{
System.out.println( "TEST: PostConstruct PersonnelsService" );
for ( int i = 0; i < 20; i++ )
{
personnels.put( i + 1, new Personnel( i + 1, "LeNom-" + ( i + 1 ), "LePrénom-" + ( i + 1 ) ) );
}
}
public Personnel findById( int id )
{
return personnels.get( id );
}
public List< Personnel > findAll()
{
List< Personnel > result = new ArrayList<>();
personnels.values().forEach( p -> { result.add( p ); } );
return result;
}
public void create( Personnel personnel ) throws Exception
{
Personnel p = personnels.get( personnel.getId() );
if ( p == null )
{
int max = personnels.keySet().stream().max( Integer::compare ).get();
personnel.setId( max + 1 );
System.out.println( "Création personnel n° " + personnel.getId() );
personnels.put( personnel.getId(), personnel );
}
else
{
throw new Exception( "Ajout impossible: Tentative de doublon sur la clé." );
}
}
public void update( Personnel personnel ) throws Exception
{
Personnel p = personnels.get( personnel.getId() );
if ( p!= null )
{
personnels.put( personnel.getId(), personnel );
System.out.println( "Mise à jour du personnel n° " + personnel.getId() );
}
else
{
throw new Exception( "Mise à jour impossible: clé non trouvée." );
}
}
public void remove( int id ) throws Exception
{
Personnel p = personnels.get( id );
if ( p != null )
{
personnels.remove( id );
}
else
{
throw new Exception("Suppression impossibe: clé non trouvée" );
}
}
private final Map< Integer, Personnel > personnels;
}

Télécharger

Voici maintenenant, quelques explications sur cette classe :

@Named( value = "listePersonnels" )
@ApplicationScoped
public class PersonnelsService implements Serializable

Télécharger

Le code précédent défini la classe comme étant un Managed Bean dont la durée de vie est l’application.

private final Map< Integer, Personnel > personnels;

Cette classe possède un attribut de type Map composé d’objets de types Personnel. On utilisera l’identifiant du personnel comme clé de la Map.

@PostConstruct
public void init()
{
System.out.println( "TEST: PostConstruct PersonnelsService" );
for ( int i = 0; i < 20; i++ )
{
personnels.put( i + 1, new Personnel( i + 1, "LeNom-" + ( i + 1 ), "LePrénom-" + ( i + 1 ) ) );
}
}

Télécharger

La méthode init() est appelée dès que l’instance a terminée d’être créée (annotation @PostConstruct). Sont but est de remplir la liste de 20 objets.

Les autres méthodes correspondent aux fonctions de création, mises à jour, suppression et recherche ( fonctions CRUD) d’un personnel dans la liste. J’en ai profité pour utiliser des Streams et lambda, une des nouveautés de Java 8. Par exemple, pour la méthode chargée de renvoyer le contenu de la Map sous forme de List :

public List< Personnel > findAll()
{
List< Personnel > result = new ArrayList<>();
personnels.values().forEach( p -> { result.add( p ); } );
return result;
}

Télécharger

La méthode forEach() exécute pour chaque élément de la Collection, l’expression qui récupère l’élément et l’ajoute dans le ArrayList.

Pour la méthode create, l’initialisation d’un nouvel identifiant s’effectue à partir de la plus grande valeur de clé trouvée. Cette valeur est trouvé par la ligne suivante :

int max = personnels.keySet().stream().max( Integer::compare ).get();

Il aurait été difficile de faire aussi court sans la nouvelle syntaxe de Java 8.

Définition du Managed Bean "PersonnelView"

Nous allons maintenant définir un Managed Bean qui gérera la vue JSF .

Voici le code de cette classes :

package exercice2;
import javax.inject.Named;
import javax.enterprise.context.SessionScoped;
import java.io.Serializable;
import java.util.List;
import javax.inject.Inject;
@Named( value = "voirListePersonnelsView" )
@SessionScoped
public class VoirListePersonnelsView implements Serializable
{
public VoirListePersonnelsView() {}
public List< Personnel > getItems()
{
return service.findAll();
}
@Inject
private PersonnelsService service;
}

Télécharger

Cette classe est annotée avec une durée de vie Session, elle doit donc être Serializable. Elle utilise PersonnelsService avec l’annotation @Inject. Comme dans un premier temps, nous désirons que visualiser la liste, nous ne définissons qu’une seule méthode, dont le but est de récupérer la liste des personnels.

Définition de la page JSF d’affichage du tableau

Il ne nous reste plus qu’à définir le fichier JSF. Pour cela, vous choisissez de définir une JSF Page à partir du menu contextuel dans le dossier Web pages. Vous le nommez VoirListePersonnels.xhtml. NetBeans vous créé le squelette de fichier suivant :

?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">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
Hello from Facelets
</h:body>
</html>

Télécharger

Supprimez le texte "Hello from Facelet" et tout en laissant le curseur à cet endroit, appuyez sur les touches Alt + Insert pour afficher le menu suivant :

Sélectionnez l’option JSF Data Table. NetBeans devrait avoir généré le code suivant :

<f:view>
<h:form>
<h:dataTable value="#{}" var="item">
</h:dataTable>
</h:form>
</f:view>

Télécharger

Il va falloir maintenant compléter l’attribut value="#{}" pour spécifier la liste à visualiser comme suit :

<h:dataTable value="#{voirListePersonnelsView.items}" var="item">

Le paramètre value fait référence à la méthode du bean chargée de renvoyer la liste des éléments à afficher et le paramètre var définie une variable locale item qui correspondra à chaque élément de la liste à afficher. Vous allez maintenant définir les colonnes à afficher.

<h:dataTable value="#{voirListePersonnelsView.items}" var="item">
<h:column>
<f:facet name="header">
<h:outputText value="n°" />
</f:facet>
<h:outputText value="#{item.id}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Nom" />
</f:facet>
<h:outputText value="#{item.nom}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Prénom" />
</f:facet>
<h:outputText value="#{item.prenom}" />
</h:column>
</h:dataTable>

Télécharger

Nous venons de définir une colonne par champ à afficher en faisant référence à la variable item définie précédemment.

Si nous exécutons le programme et affichons la page que nous venons de définir, nous obtenons bien l’affichage du contenu de notre table.

Bien sur, cet affichage n’est pas très jolis mais cela peut être corrigé en définissant une feuille de style dans un fichier .css. Un exemple de style sera fourni dans la suite de l’aticle.

Remarque : La présentation générale ne doit en principe, pas être définie directement dans le fichier .xhtml, surtout, si l’on souhaite que tout les tableaux de notre application aient la même présentation : couleurs, police de caractères, etc.

1 2

La configuration utilisée dans cet article est un poste Ubuntu 12.4, JDK 8 et Netbeans 8.1 (bundle complet) avec GlassFish 4.1.1.

Développement

Article n° 68

Crée par: chris

Créé le: 17 mars 2016

Modifié le: 17 mars 2016

Nombre de visites: 1362

Popularité: 50 %

Popularité absolue: 3

Java EE et développement Web

Mots clés de cet article

Java39
Netbeans5