Un Tutoriel Simple de JSF avec PrimeFaces et le traitement des objets JSON en Java (M-à-j Jan ’18)

Dans ce didacticiel, vous allez voir un exemple du traitement des objets JSON contenant des taux de change pour certaines devises et leur affichage sur une page Web à l’aide de JSF 2.1 et PrimeFaces 2.2, un framework enrichi pour JSF qui ajoute des fonctionnalités AJAX à votre application web.

Ce dont Vous avez Besoin pour ce tutoriel

Oracle JDK 1.6 ou ultérieur
Netbeans 7.0 ou version ultérieure. (Si vous préférez un IDE différent, vous devrez obtenir manuellement les bibliothèques et composants nécessaires pour ce tutoriel.)
Tomcat 7

Technologies et bibliothèques utilisées

JSF 2.1 (bibliothèques Mojarra 2 a.c.q. jsf-api.jar, jsf-impl.jar, jstl.jar and standard.jar)
PrimeFaces 2.2.1
JSON (pour Java)
commons-logging-1.1.1.jar
log4j-1.2.16.jar
httpcore-4.1.4.jar
httpclient-4.1.3.jar

Configuration du projet avec JSF 2 et Support pour PrimeFaces

Lancez Netbeans, et suivez les étapes suivantes :

Séléctionnez New Project (Ctrl-Shift-N; ⌘-Shift-N sur Mac) depuis le menu File (Fichier). En suite séléctionnez la catégorie Java Web, et puis sous Projets choisissez Web Application. Cliquer sur Suivant (next).
Dans le champ Nom du Projet, tapez ‘exchangeratesweb’ (sans les guillemets), et cliquez sur Suivant.
Dans cette étape, assurez-vous que la plate-forme est sélectionnée comme Java EE 6 ou Java EE 7 et désélectionnez l’option ‘Enable contexts and dependency injection‘ et sélectionnez également Apache Tomcat depuis le menu déroulant libellé Serveur. Cliquez sur Suivant.
Sélectionnez Java Server Faces (JSF) dans la liste des Frameworks , puis sous l’onglet Bibliothèques (Libraries) sous Configuration de Java Server Faces , sélectionnez JSF 2.1 dans l’option Bibliothèques Enregistrées (dont le bouton radio doit également être sélectionné).
Accédez maintenant à l’onglet Configuration et sélectionnez “Facelets” comme langue de page préférée, et indiquez éventuellement le modèle d’URL de servlet JSF en tant que “* .go”. (L’extension la plus typique utilisée par les développeurs JSF est ‘* .jsf’, alors que dans les anciens modèles de Sun, elle est ‘/ faces / *’, qui est également utilisée par défaut.)
Enfin, ouvrez l’onglet Composants et sélectionnez PrimeFaces 2.2.1 , puis cliquez sur Terminer.
Nous allons maintenant créer un bean géré JSF qui sera utilisé comme contrôleur pour l’ensemble du projet. Cliquez avec le bouton droit sur le projet (exchangeratesweb) et sélectionnez Nouveau> JSF Managed Bean … dans le menu contextuel. (Si cet élément n’apparaît pas dans le menu déroulant, sélectionnez Autre, puis JavaServer Faces> JSF Managed Bean dans la fenêtre pop-up intitulée Nouveau fichier ).
Nommez la classe du bean géré (managed bean) ‘ ExchangeRatesBean ‘ (sans les guillemets), tapez ‘ net.ozar.egitim.jsf.kurlar.managed ‘ pour le nom du paquet, spécifiez le nom de bean ‘ exchangeRatesBean ‘ et sélectionnez ‘ session ‘ pour la portée de la la liste déroulante.

Clarification sur les portées (Scopes) de bean backing JSF

@RequestScoped: JSF Managed Bean demeure tant que la requête-réponse HTTP existe. L’objet dovizKurlariBean est créé lors d’une requête HTTP et est détruit lorsque la réponse HTTP associée à la requête HTTP est terminée.
@ViewScoped: JSF Backing Bean reste actif tant que l’utilisateur interagit avec la même vue JSF dans la fenêtre / l’onglet du navigateur. L’objet dovizKurlariBean est créé lors d’une requête HTTP et est détruit une fois que l’utilisateur a effectué une publication dans une vue différente.
@SessionScope: JSF ManagedBean de cette portée dure aussi longtemps que la session HTTP de l’application web dure. L’objet dovizKurlariBean est créé lors de la première requête HTTP impliquant ce bean dans la session et est détruit lorsque la session HTTP est invalidée.
@ApplicationScoped: JSF BackingBean de cette portée vit aussi longtemps que l’application web vit. L’objet dovizKurlariBean est créé lors de la première requête HTTP impliquant ce bean dans l’application (ou lorsque l’application Web démarre et l’attribut “eager = true” est défini dans @ManagedBean) et s’est détruit lorsque l’application Web s’arrête.
Pour les besoins de ce tutoriel, nous allons aller avec la portée de la session.

Cliquez sur Terminer lorsque vous avez terminé.

Entrez le code suivant dans la source de la classe:

package net.ozar.egitim.jsf.kurlar.managed;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.util.Calendar;
import javax.annotation.PostConstruct;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ApplicationScoped;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;
import net.ozar.egitim.jsf.kurlar.pojo.ExchangeRate;
import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.DefaultHttpClient;
import org.apache.log4j.Level;
import org.apache.log4j.Logger;
import org.json.JSONObject;

/**
 * @author Gökhan Ozar
 * http://gokhan.ozar.net
 */
@ManagedBean
@SessionScoped
public class ExchangeRatesBean implements java.io.Serializable {
    private static final String ERURL  = "http://openexchangerates.org/latest.json";
    private static final String APPINFO = "This application is intended as a simple tutorial example on JSF 2, PrimeFaces 2 and JSON object parsing. Visit <a href="&quot;https://gokhan.ozar.net&quot;">https://gokhan.ozar.net</a> for more...  
";

    private ExchangeRate erate = new ExchangeRate();
    private String msj = "";

    public ExchangeRatesBean() {
    }

    @PostConstruct
    public void kurlariYukle() {

        HttpClient webIstemci = new DefaultHttpClient();
        HttpGet webdenGetir = new HttpGet(ERURL);
        HttpResponse donenCevap;

        try {
            donenCevap = webIstemci.execute(webdenGetir); // Getting the web (HTML) response from the URL
            HttpEntity birim = donenCevap.getEntity(); // Setting the HttpEntity to the Http Response object
            if (birim != null) {
                InputStream gelenVeri = birim.getContent();
                String sonuc = convertStreamToString(gelenVeri);

                JSONObject json = new JSONObject(sonuc);
                JSONObject currs = json.getJSONObject("rates");

                msj = APPINFO.concat(json.getString("license" ));

                erate.setBaseCurrency(json.getString("base" ));
                erate.setEur         (currs.getDouble("EUR"));  // Euro
                erate.setGbp         (currs.getDouble("GBP"));  // British Pound Sterling
                erate.setJpy         (currs.getDouble("JPY"));  // Japanese Yen
                erate.setCad         (currs.getDouble("CAD"));  // Canadian Dollars
                erate.setMxn         (currs.getDouble("MXN"));  // Mexican Pezo
                erate.setAed         (currs.getDouble("AED"));  // United Arab Emirates Dirham
                erate.setTrl         (currs.getDouble("TRY"));  // Turkish Lira

                long t = json.getLong("timestamp"); // getting the last update date &amp; time 

                Calendar cal = Calendar.getInstance(); 
                cal.setTimeInMillis(t*1000); // converting into a human-readable date format

                erate.setLastModif(cal.getTime());

                erate.setDisclaimer(json.getString("disclaimer").concat(APPINFO.replaceAll("", ""))); // Getting the disclaimer and stripping the HTML tags from the APPINFO String before concatenating it
                erate.setMesaj         (msj);

                FacesMessage facesMsg = new FacesMessage(FacesMessage.SEVERITY_INFO, msj, msj);
                FacesContext.getCurrentInstance().addMessage("successInfo", facesMsg);

                gelenVeri.close();
            }
        } catch (Exception e) {
            msj= "Loading the exchange rates failed!nThere appears to be a problem with the server connection.";
            erate.setMesaj(msj);
            Logger.getLogger(ExchangeRatesBean.class.getName()).log(Level.ERROR, null, e);
            FacesMessage facesMsg = new FacesMessage(FacesMessage.SEVERITY_ERROR, msj, msj);
            FacesContext.getCurrentInstance().addMessage(null, facesMsg);
        }

    }

    public String convertStreamToString(InputStream is) {
        // The incoming input stream is accumulated in a String to be returned
        BufferedReader reader = new BufferedReader(new InputStreamReader(is));
        StringBuilder sb = new StringBuilder();
        String line = null;
        try {
            while ((line = reader.readLine()) != null) {
                sb.append(line).append("n");
            }
        } catch (IOException e) {
        } finally {
            try {
                is.close();
            } catch (IOException e) {
            }
        }
        return sb.toString();
    }

    // Managed bean getter &amp; setter for the sake of abstraction

    public ExchangeRate getErate() {
        return erate;
    }

    public void setErate(ExchangeRate erate) {
        this.erate = erate;
    }
}

Maintenant, nous avons besoin d’un POJO (simple objet Java) pour contenir les données de taux de change qui seront acquises via JSON . Créez une nouvelle classe Java nommée ExchangeRate.java dans un paquet appelé net.ozar.egitim.jsf.kurlar.pojo et entrez le code suivant dans sa source :

package net.ozar.egitim.jsf.kurlar.pojo;

import java.util.Date;

/**
 * @author Gökhan Ozar
 * http://gokhan.ozar.net
 */
public class ExchangeRate implements java.io.Serializable {

    private String baseCurrency;
    private Double usd; // US dollar
    private Double gbp; // British Pound Sterling
    private Double eur; // Euro
    private Double jpy; // Japanese Yen
    private Double trl; // Turkish Lira "TRY"
    private Double cad; // Canadian Dollar
    private Double mxn; // Mexican Pezo
    private Double aed; // United Arab Emirates Dirham

    private Date lastModif;
    private String disclaimer;
    private String license;
    private String mesaj;

    public String getBaseCurrency() {
        return baseCurrency;
    }

    public void setBaseCurrency(String baseCurrency) {
        this.baseCurrency = baseCurrency;
    }

    public Double getEur() {
        return eur;
    }

    public void setEur(Double eur) {
        this.eur = eur;
    }

    public Date getLastModif() {
        return lastModif;
    }

    public void setLastModif(Date lastModif) {
        this.lastModif = lastModif;
    }

    public String getMesaj() {
        return mesaj;
    }

    public void setMesaj(String mesaj) {
        this.mesaj = mesaj;
    }

    public Double getUsd() {
        return usd;
    }

    public void setUsd(Double usd) {
        this.usd = usd;
    }

    public String getDisclaimer() {
        return disclaimer;
    }

    public void setDisclaimer(String disclaimer) {
        this.disclaimer = disclaimer;
    }

    public String getLicense() {
        return license;
    }

    public void setLicense(String license) {
        this.license = license;
    }

    public Double getAed() {
        return aed;
    }

    public void setAed(Double aed) {
        this.aed = aed;
    }

    public Double getCad() {
        return cad;
    }

    public void setCad(Double cad) {
        this.cad = cad;
    }

    public Double getGbp() {
        return gbp;
    }

    public void setGbp(Double gbp) {
        this.gbp = gbp;
    }

    public Double getJpy() {
        return jpy;
    }

    public void setJpy(Double jpy) {
        this.jpy = jpy;
    }

    public Double getMxn() {
        return mxn;
    }

    public void setMxn(Double mxn) {
        this.mxn = mxn;
    }

    public Double getTrl() {
        return trl;
    }

    public void setTrl(Double trl) {
        this.trl = trl;
    }
}

Allez maintenant aux pages Web dans le dossier du projet et double-cliquez sur index.xhtml. Modifier son code source afin de faire ressembler le 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:p="http://primefaces.prime.com.tr/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Exchange Rates</title>
    </h:head>
    <h:body>
        <h:form>
            <p:commandButton value="Display the rates" onclick="dlg1.show();" type="button" />
            <p:commandButton id ="ref" value="Refresh" ajax="true" action="#{exchangeRatesBean.kurlariYukle}" type="submit" update="dovizKurPaneli, dovizKurPaneli2" />
            <p:dialog id="dlg" header="Exchange Rates" widgetVar="dlg1" width="500">
                <p:panel id="dovizKurPaneli">
                    <h:panelGrid columns="2">
                        #{exchangeRatesBean.erate.baseCurrency} 1.00 :  <h:outputText value="GBP #{exchangeRatesBean.erate.gbp}" /> 
                        #{exchangeRatesBean.erate.baseCurrency} 1.00 :  <h:outputText value="EUR #{exchangeRatesBean.erate.eur}" />
                        #{exchangeRatesBean.erate.baseCurrency} 1.00 :  <h:outputText value="JPY #{exchangeRatesBean.erate.jpy}" />
                        #{exchangeRatesBean.erate.baseCurrency} 1.00 :  <h:outputText value="CAD #{exchangeRatesBean.erate.cad}" />
                        #{exchangeRatesBean.erate.baseCurrency} 1.00 :  <h:outputText value="MXN #{exchangeRatesBean.erate.mxn}" />
                        #{exchangeRatesBean.erate.baseCurrency} 1.00 :  <h:outputText value="AED #{exchangeRatesBean.erate.aed}" />
                    </h:panelGrid>
                    <br />
                    <p:panel>
                        Last update: <h:outputText value="#{exchangeRatesBean.erate.lastModif}"><f:convertDateTime pattern="MM/dd/yyyy HH:mm" /></h:outputText>
                        <br /><br />
                        <h:outputText value="#{exchangeRatesBean.erate.disclaimer}" />
                    </p:panel>
                </p:panel>
            </p:dialog>
            <p:messages />
        </h:form>
    </h:body>
</html>

Ça y est.

Vous pouvez télécharger une archive zip contenant tous les fichiers jar des bibliothèques utilisées à partir du lien ci-dessous :

Et vous pouvez voir l’application complète ci-dessous.

Voici une capture d’écran de l’application complété:

Didacticiels

Un Tutoriel Simple de JSF avec PrimeFaces et le traitement des objets JSON en Java (M-à-j Jan ’18)

Ce dont Vous avez Besoin pour ce tutoriel

Technologies et bibliothèques utilisées

Configuration du projet avec JSF 2 et Support pour PrimeFaces

Clarification sur les portées (Scopes) de bean backing JSF

Some thoughts on JSF...

Win a free copy of my book MySQL Management and Administration with Navicat (2012 - closed)

Leave A Reply Cancel reply

Didacticiels

Ce dont Vous avez Besoin pour ce tutoriel

Technologies et bibliothèques utilisées

Configuration du projet avec JSF 2 et Support pour PrimeFaces

Clarification sur les portées (Scopes) de bean backing JSF

You may also like

Leave A Reply Cancel reply

Login with your site account