[Java] Utiliser Jsf 2.0 – Utiliser Jsf 2.0 avec Primefaces.

Java_logoIntroduction


Voici mon petit tour d’horizon des technologies JAVAee dédiées à la conception de sites web, ou mieux… d’Applications WEBS..

JSP_LOGO_RGB.jpg

  • JSP – JSTL : Une compétence souvent demandée, une techno qui date environ du début des années 2000… A travailler et à comprendre pour éventuellement intervenir sur des apps utilisant cette techno. Souvent utilisée avec le framework Spring qui comporte pleins de parts obscures.

maxresdefault.jpg

  • JPA : Un système très original qui auto-génére les tables SQL, et fait automatiquement le mapping objet-relationnel, autant dire que c’est ingénieux, cependant, j’ai entendu parler d’éventuels soucis lorsque l’on veut utiliser les vues ou les trigggers SQL( Ce n’est pas possible)logo.png
  • JSF 2.0 + Primefaces : Un Sytème tout récent,  Primefaces est très impressionant et magnifique,c’est un framework-lib Typé UI très bien expliqué, avec un site Web aussi structuré que celui de  JqueryUi et Bootstrap, avec de très bon exemples en live. Cependant, bien sur, la technologie JSF 2.0   + Primefaces n’a rien à voir en cela que le HTML n’a plus rien de similaire et qu’il faut apprendre de nouvelles balises et la syntaxe JSF 2.0. Le système de Bean Java est cependant relativement similaire à celui des JSP. Edit : Cependant, on peut noter une certaine similarité de la syntaxe JSF 2.0 avec angular1.5, normal puisque les devs AngularJs1.5 venaient du monde JAVA.

Dans tous les cas, on n’est pas dans le SPA de AngularJS qui est, lui , très orienté temps réel, c’est  à dire  qu’avec JSF2.0 ,on subit des rechargements de page. Par contre on bénéficie de la conception UML, de la possibilité de créer des projets collaboratifs, et de bénéficier de la rigueur de traitement des erreurs JAVA. On peut également travailler avec des gens très expérimentés par exemple, vu que Java existe depuis 25 ans.

Primefaces : Un site qui déchire visuellement .


Sur la droite du site de démo de Primeface, on peut visualiser les composants que l’on va pouvoir intégrer à nos futures applications françaises  JAVAee Jsf 2.0 Primefaces.

Ca déchire parce qu’il y a des tas de composants tous plus attrayants les uns que les autres, avec le précieux exemple qui va bien…

Cependant, voyons déjà comment faire  un setup de l’ide Eclipse pour créer une simple page xhtml, dont le moteur et conteneur sera notre Managed BEAN (Qui est tout simplement un type de classe java) et dont la technologie sera sera la Librairie JSF 2.0 livrée d’office avec JAVA.

186198308_smallQUESTION : Pourquoi utiliser des termes incompréhensibles ou ronflants pour expliquer ce qu’est un BEAN JAVA?

Les pages WEB transmettent les données entrées par l’utilisateur dans le BEAN JAVA, Le bean peut renvoyer des données à d’autres pages web XHtml.

Un Bean, c’est seulement un conteneur de variables(qui peut également effectuer des opérations sur ces variables), et qui dialogue avec des pages WEB.

Voilà, c’est tout, pas la peine d’utiliser un vocabulaire effroyable dans un premier temps pour expliquer le système de beans java (qui est une classe java), et cela suffit à créer de premières petites apps en français JSF 2.0 de savoir ça au début.
Il faut savoir que des tutorials effroyables par leurs mots ronflants ou inconnus donnent l’impression que JavaEE est très compliqué, particulièrement avec Spring, et que c’est vraiment lourdingue

PAGE WEB -> BEAN JAVA -> PAGE WEB.

3 choses à savoir, avec jsf 2.0 :

  • Les pages html sont toutes en xhtml
  • Les beans sont des managed bean.
  • Primefaces ne fonctionne pas avec les Jsp

Prérequis


  • Installer Java (Le langage)
  • Installer Eclipse pour JavaEE (L’outil qui nous permet de développer)
  • Installer le serveur Tomcat Web 8.0 (Le serveur Web)
  • Télécharger la librairie Primeface  6.0 qui est, comme d’hab, un fichier *.jar (La librairie graphique)
  • Maven n’est pas obligatoire, on ne l’utilise pas pour l’instant pour simplifier(L’utilitaire de gestion de paquets et de mises à jour).

Utiliser Jsf 2.0


Une fois que le serveur web tomcat tourne bien dans Eclipse, on peut créer un projet WEB :

File/New Dynamic Web Project, lui donner le nom jsf

La fenêtre suivante apparait :

107WM.jpg

Ensuite cliquer sur Modify , la fenêtre suivante apparait :

2.jpg

Cliquer sur JavaserverFaces, à patir ce moment, la librairie JSF 2.0 sera automatiquement inclue à notre projet WEB !

Cliquer sur ok puis sur Next, la page suivante apparait :

3

Cliquer sur next, une fenêtre « Web Module apparait’, cliquer la case ‘Générate web.xml deployement descriptior’ parce que ce fichier va nous servir à l’avenir.Cliquer de nouveau sur Next, et vous devez voir cette page :

5.jpg

ON voit la version de la lib JSF 2.0 qu’on va utiliser, cliquer sur FINISH, alors notre arborescence d’application apparait  dans Eclipse :

Voici un exemple d’arborescence d’un projet web  qui s’appelle jsf14, sous src/jsf14, j’ai mon bean JAVA BonjourBean.java, qui est une classe qui récupère et traite toutes les données provenant des fichiers XHTML de mon application. Les 2 fichiers XHTML, eux , peuvent transmettre des données au bean qui en l’ocurrence s’appelle BonjourBean.java:

7.jpg

Comment j’ai fait pour créer ces fichiers ? En faisant un click droit sur « Java resources » puis ajouter une classe pour créer le bean BonjourBean.java.

Pour créer les fichiers .xhtml, par contre, j’ai fait un clic droit sur WebContent, puis « créer html », j’ai ensuite pris soin de changer le .html en .xhtml, sans cela cela ne fonctionne pas avec la technologie JSF2.0.

Voici l’action à mener pour obtenir quelque chose d’actif :

1.Créer la classe Java nommée bonjourBean suivante  ( click droit sur « Java resources » puis ajouter une classe nommée bonjourBean.java.):


package jsf14;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped
public class bonjourBean{

    private String            nom;
    private String            prenom;

    public String getNom() {
        return nom;
    }

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

    public String getPrenom() {
        return prenom;
    }

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

}

remarquer le package est le nom de notre projet dynamic web. bonjourBean est la classe qui va recevoir et traiter les données provenant de nos pages XHTML, plus tard, on pourra y ajouter une connexion MYSQL.

Ensuite, créer les 2 Pages XHTML suivantes :
Intro.xml qui contient le formulaire:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"       xmlns:h="http://java.sun.com/jsf/html"       xmlns:f="http://java.sun.com/jsf/core"          >
    <h:head>
        <title>Premier exemple JSF 2.0</title>
    </h:head>
    <h:body>
<h1>Premier exemple JSF 2.0 - bonjour.xhtml</h1>

    	<h:form>
    		Votre nom :
    	   <h:inputText value="#{bonjourBean.nom}" ></h:inputText>
    	   Votre Prénom :
    	    <h:inputText value="#{bonjourBean.prenom}" ></h:inputText>
    	   <h:commandButton value="Souhaiter la bienvenue" action="bienvenue" ></h:commandButton>
    	</h:form>

    </h:body>
</html>

et

bienvenue.xhtml :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"       xmlns:h="http://java.sun.com/jsf/html"      >
    <h:head>
        <title>Premier exemple JSF 2.0</title>
    </h:head>
    <h:body>
<h1>Premier exemple JSF 2.0 </h1>

Bienvenue #{bonjourBean.nom} !

#{bonjourBean.prenom} !

    </h:body>
</html>

Voilà, si l’on clique droit puis « run on server » sur Intro.xhtml, normalement, on peut entrer son nom et prénom et les variables sont récupérées par le bean qui les affiche ensuite dans la page bienvenue.xhtml. Ne pas hésiter à cliquer sur  » PROJECT/CLEAN » en cas de problème ou de fonctionnement anormal ou modification du BEAN.

Utiliser Jsf 2.0 avec Primefaces.


Je crée un nouveau projet Web avec la technique du début.

J’ai donc pour l’instant mon projet JSF 2.0 vide… Sans la librairie Primefaces..

Pour  inclure Primefaces, un truc bateau à savoir faire, ou plutôt 2 :

  • Faire un glisser déposer du fichier primefaces-6.0.jar dans le répertoire  WebContent/WEB-INF/lib/

10

  • Puis, à l’avenir, dans mes pages XHTML,j’ajouterais la ligne suivante en violet, au début de ma page pour appeler la librairie:

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p= »http://primefaces.org/ui » >

Prendre un exemple du site de Primefaces, puis l’intégrer dans notre projet …


Comme souvent dans le domaine du web, on joue du copié collé, pour ensuite personnaliser le code …

Le moins que l’on puisse dire, c’est que l’on nous mache le travail sur le site de Primefaces.

En l’occurence, je choisis le « spinner » sur cette page .

Maintenant, rien de plus simple :Il suffit de créer un fichier xhtml nommé spinner.xhtml, puis de copié-coller le code de l’exemple !

11.jpg

Ensuite, faire de même en créant un Bean nommé spinnerView, puis copié collé le code sous l’onglet Spinnerview.java dans le siter de démo de Primefaces.

Et voilà, il ne reste plus qu’à faire un run on server, et on a notre spinner qui fonctionne dans Eclipse, il ne reste plus qu’à l’adapter à notre besoin en modifiant les variables !

Voici à quoi ressemble l’arborescence de mon app, dans Eclipse, suite à la création des 2 fichiers, sauf que moi j’ai nommé spinner.xhtml par newFile.xhtml, par flemme, ça fonctionne niquel  :

12

Donc voici mon fichier NewFile.xhtml alias spinner.xhtml, on remarque qu’il faut ajouter les liens vers les librairies en début de fichier, en plus du code de démo sur Primefaces.:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"  >
    <h:head>
        <title>Premier exemple JSF 2.0</title>
    </h:head>
    <h:body>
<h:form>
    <h:panelGrid columns="2" cellpadding="5" styleClass="ui-grid">
        <h:outputLabel for="basic" value="Basic Spinner: " ></h:outputLabel>
        <p:spinner id="basic" value="#{spinnerView.number1}" ></p:spinner>

        <h:outputLabel for="step" value="Step Factor: " ></h:outputLabel>
        <p:spinner id="step" value="#{spinnerView.number2}" stepFactor="0.25" ></p:spinner>

        <h:outputLabel for="minMax" value="Min/Max: " ></h:outputLabel>
        <p:spinner id="minMax" value="#{spinnerView.number3}" min="0" max="100" ></p:spinner>

        <h:outputLabel for="prefix" value="Prefix: " ></h:outputLabel>
        <p:spinner id="prefix" value="#{spinnerView.number4}" prefix="$" min="0" ></p:spinner>

        <h:outputLabel for="ajaxSpinner" value="Ajax Spinner: " ></h:outputLabel>
        <p:outputPanel>
            <p:spinner id="ajaxSpinner" value="#{spinnerView.number5}">
                <p:ajax update="ajaxSpinnerValue" process="@this" ></p:ajax>
            </p:spinner>
            <h:outputText id="ajaxSpinnerValue" value="#{spinnerView.number5}" style="padding-left: 10px" ></h:outputText>
        </p:outputPanel>
    </h:panelGrid>

    <p:commandButton value="Submit" update="display" oncomplete="PF('dlg').show()" ></p:commandButton>

    <p:dialog header="Values" widgetVar="dlg" showEffect="fold" hideEffect="fold">
        <h:panelGrid id="display" columns="2" cellpadding="5">
            <h:outputText value="Value 1: " ></h:outputText>
            <h:outputText value="#{spinnerView.number1}" ></h:outputText>

            <h:outputText value="Value 2: " ></h:outputText>
            <h:outputText value="#{spinnerView.number2}" ></h:outputText>

            <h:outputText value="Value 3: " ></h:outputText>
            <h:outputText value="#{spinnerView.number3}" ></h:outputText>

            <h:outputText value="Value 4: " ></h:outputText>
            <h:outputText value="#{spinnerView.number4}" ></h:outputText>

            <h:outputText value="Value 5: " ></h:outputText>
            <h:outputText value="#{spinnerView.number5}" ></h:outputText>
        </h:panelGrid>
    </p:dialog>
</h:form>
    </h:body>
</html>

et voici le contenu de mon bean spinnerView.java :

package jsf15;

import javax.faces.bean.ManagedBean;

@ManagedBean
public class SpinnerView {

    private int number1;
    private double number2;
    private int number3;
    private int number4;
    private int number5;

    public int getNumber1() {
        return number1;
    }

    public void setNumber1(int number1) {
        this.number1 = number1;
    }

    public double getNumber2() {
        return number2;
    }

    public void setNumber2(double number2) {
        this.number2 = number2;
    }

    public int getNumber3() {
        return number3;
    }

    public void setNumber3(int number3) {
        this.number3 = number3;
    }

    public int getNumber4() {
        return number4;
    }

    public void setNumber4(int number4) {
        this.number4 = number4;
    }

    public int getNumber5() {
        return number5;
    }

    public void setNumber5(int number5) {
        this.number5 = number5;
    }
}

Ce bean SpinnerView recevra les variables que l’utilisateur a renseigné dans le « spinner » de la page HTML, une fois que l’utilisateur aura cliqué sur « Submit »,. Il contient, comme d’habitude avec Java, l’initialisation du typage des variables, leurs getters et setters .

Rien n’empêche de créer une connexion à Mysql pour immédiatement stocker les données dans une base de données …

Dans le prochain article, nous verrons comment enregistrer en base de données relationnelle le contenu de nos BEANS JSF 2.0.

[Java] un système qui ressemble à AngularJs : JSF El

Introduction


Toujours intéressé par UML, et la prog objet, je suis actuellement sur le système JSF qui ressemble pas mal à AngularJs 1.5 dans l’esprit.

Exemple en français sympa :


http://www.objis.com/formation-java/tutoriel-jsf-2-managed-bean-expression-el-jsf.html

Codes fonctionnels :


A venir