[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.

Lire la suite

Publicités

[Java] Etude du pattern DAO (Français).

Introduction


Dao veux dire Data access object.

Il s’agit d’un pattern qui sépare la logique d’accès et d’exploitation de la base de données, d’un POJO JAVA (L’habituelle classe Java contenant les getter et les setters).

L’atout est que l’on comprends mieux le code, et que l’on peut même créer plusieurs DAO en fonction de la BDD ou des fichers de données à exploiter (Comme du XML, par exemple.)

Idées provisoires, à vérifier


je suis particulièrement intéressé par JSF 2.0 et Primefaces(Qui semble bien plus simple dans sa syntaxe), cependant, les DAO, sauf erreurs, sont plutôt accès sur les JSP, il est bon d’apprendre les technologies plus anciennes, étant donné qu’il faut pouvoir intervenir sur les technologies les plus utilisées/anciennes, même si elles sont peu aisées à appréhender.

Je vais faire des exercices sur

  • un pattern DAO en adéquation avec une JSP et Mysql.
  • un pattern DAO en adéquation avec JPA et Hibernate et Mysql.

Un exemple pattern DAO en adéquation avec une JSP et Mysql


 

Sommaire :

Généralités 

  1. Les packages
  2. Les librairies
  3. Les pages web jsp
  4. Le fichier Web.Xml

Code 

 

  1. Les packages

Un package permet de classer les classes Java par type, dans une application Javaee.

Généralement, on précède son nom du préfixe com lorsqu’on le crée dans Eclipse en faisant un clic droit ‘Create package ‘ sous Java Ressource/src dans l’arborescence Eclipse.

Notre exemple contient 4 Packages :

  • Le Package com.app.controleur : On y place la classe Java qui va intéragir avec les pages Web JSP, lors de l’action d’un utilisateur
  • Le Package com.app.dao  :On y place les 2 classes Java qui vont intéragir avec la Base de données . 1 classe répertorie les commandes CRUD  disponibles (Lire/Enregistrer/Mettre à jour/Supprimer), l’autre classe actionne des requêtes SQL.
  • Le Package com.app.modele : On y place la classe Java (aussi appelée Pojo) qui contient les variables définissant notre modèle de donnée (exemple : Nom, Prénom), et les méthodes getter et setters
  • Le Package com.dbutil : On y place la classe Java qui permet la connexion à la base de données et ses paramêtres.

Voici le look d’une arborescence une fois nos packages créés (En Anglais), on peut considérer que c’est le moteur de l’application Web à venir. :

eclipse1

 

2. Les librairies :

On les télécharge et on les fait glisser déposer à partir du bureau windows dans le répertoire WebContent/WEB-INF/lib:

eclipse2

 

Ici, j’ai la lib JSTL, la lib MysqlConnector, et la lib servlet-api. elles sont toutes trois nécessaire au fonctionnement de notre système.

3. Les pages web JSP :

On les crée en faisant un clic droit sur WebContent puis ‘nouvelle JSP’, C’est l’Ihm, qui permet l’intéraction avec les utilisateurs, autrement dit, tout simplement, ce que l’on voit dans le navigateur.

4. le fichier Web.xml

Il permet de faire le mapping entre les URL et les Servlets

On le créée lorsque l’on crée un new dynamic web project, en cochant generate web descripment :

eclipse4

Si le projet est déjà créé, on clique sur le projet dans l’arbo, puis « Javaee tools/generate Deployement descriptor stub »

 
A SUIVRE AVEC UN CODE EN FRANCAIS BIENTOT
 

 

[Java] Un Crud super basique JSP-JSTL avec Mysql

Java_logoJSP_LOGO_RGBlogo-mysql-170x170_400x400

Introduction


Faire un CRUD avec JSP, et utiliser JSTL pour simplifier les accès SQL dans les pages.

Aucune Classe Java ici, tout est fait directement dans les JSP.

Photo :


tab1.jpg

Prérequis :


  1. Créer une table SQL comme indiqué ici(Je sais c’est en anglais mais la flemme de traduire, ma base de données s’appelle test) :

CREATE TABLE `product` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `pname` varchar(45) NOT NULL,
  `quantity` int(10) unsigned NOT NULL,
  PRIMARY KEY  (`id`)
);

INSERT INTO `product` (`id`,`pname`,`quantity`) VALUES
 (1,'Mouse',50),
 (2,'Keyboard',5),
 (3,'Monitor',34);
  1. Créer un dynamic web project dans Eclipse appelé jstlFolies
  2. Glisser-déposer toutes les librairies en .jar dans le répertoire WebContent/WEB-INF/lib:

Lire la suite

[Java] Utiliser hibernate sans Jsp, Partie 1 : Multi-insertion (Français).

Java_logo

Introduction


Toujours à la recherche des solutions les plus rapides pour mes futures Apps, je suis maintenant avec le back-end Hibernate.

Hibernate permet de créer automatiquement les tables SQL, à partir du code JAVA.

C’est bien plus rapide. il fait le mapping Objet(Java)/Relationnel automatiquement.

Outre le fait d’être incroyablement rapide, il est également plus aisé de collaborer sur des projets de ce type.

Par comparaison, j’ai tapé le back end PHP de mon exo 60 à la main. , même si c’est rapide, cela ne l’est pas autant que Hibernate.

Mon code est copié de http://www.simplecodestuffs.com/auto-generate-primary-key-in-hibernate/ de   (Excellent!)

Par contre, c’est plus difficile à utiliser avec les JSP, et je voudrais aussi pouvoir l’utiliser avec AngularJs(Donc faudra utiliser la lib Gson en plus… c’est un peu lourd).

Egalement, attention, parce que dès que l’on aborde les jointures entre tables,cela devient plus compliqué !

Lire la suite

[Java] Utiliser Jquery pour peupler un menu en AJAX, avec un Back End Servlet Java/Mysql.

IntroductionJava_logo


Une méthode basique pour acquérir des données Mysql dans un servlet Java, sous condition de choix dans la vue avec Jquery.

Dans un second temps, la servlet retourne les données provenant de la base de données MYSQL au front-end, après les avoir converties au format JSON, à l’aide de la librairie GSON pour java.

Code inspiré de
http://www.simplecodestuffs.com/ajax-implementation-in-jsp-and-servlet-using-jquery/
Mais j’ai ajouté une connexion Mysql…

Photo de l’exo :
svlt1

 

Prérequis


  • Eclipse
  • Tomcat
  • Mysql
  • Créer un ‘new Dynamic Project’ appelé jsf17
  • Glisser déposer la librairies Jquery.js dans le répertoire ‘WebContent/Js’ si il n’existe pas, il faut le créer.
  • Glisser déposer les librairies gson-2-.2.2.jar et mysql-connector.jar dans le répertoire ‘webContent/WEB-INF/lib’
  • Créer une base de données nommée test sur Mysql, puis une table nommée volley avec les colonnes idvolley(int),nom(varchar),prenom (varchar)
  • Peupler la base de données avec des données exemples avec le logiciel MysqlWorkbench(C’est pratique)

Comment faire ?


Ne pas tester l’application dans Eclipse, mais toujours dans un navigateur séparé comme opéra par exemple(Le navigateur de Eclipe ne se remets pas à jour correctement).

Accéder à l’app sur cet url http://localhost:8080/jsf17/index.jsp

Créer une JSP appelée index.jsp qui sera la vue principale dans le répertoire WebContent :


<head>

	<script src='js/jquery.min.js'></script>
	<script>
// TESTE QUE LA LIB JQUERY SOIT BIEN CHARGEEE
	window.onload = function() {
	    if (window.jQuery) {  
	        // jQuery is loaded  
	        alert("Yeah!");
	    } else {
	        // jQuery is not loaded
	        alert("Doesn't Work");
	    }
	}
	
	
	
// TOUT LE CODE JQUERY
$(document).ready(function() {
	$('#sports').change(function(event) {
		var sports = $("select#sports").val();
		$.get('JsonServlet', {
		sportsName : sports
		}, function(response) {
			var select = $('#player');
			select.find('option').remove();
			$.each(response, function(index, value) {
				$('
<option>').val(value).text(value).appendTo(select);
			});
		});
	});
		
	$('#clic').click(function(event) {
		alert($("select#player").val());
	});
});
	
	</script>
</head>

<body>
<h3>AJAX avec Servlet utilisant JQuery et JSON</h3>
Selectionne ton sport favori:

	<select id="sports">
<option>Select Sports</option>
<option value="Football">Football</option>
<option value="Volley">Volley</option>
</select>

	Selectionne ton joueur favori:
	<select id="player">
<option>Selectionner le joueur</option>
</select>

	<button id="clic">Votre choix </button>
</body>

Tout le code contenu entre les balises est du jquery/JS. A l’avenir, j’utiliserais également AngularJs avec un Back end Java de cette manière.

 

 

Etape 2 : Créer une servlet appelée JsonServlet.java puis coller ce code à l’intérieur :

package jsf17;

import java.io.IOException;
import java.sql.*;
import java.util.*;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;

public class JsonServlet extends HttpServlet {

        private static final long serialVersionUID = 1L;

        protected void doGet(HttpServletRequest request,
                HttpServletResponse response) throws ServletException, IOException {

                String sportsName = request.getParameter("sportsName");
                List<String> list = new ArrayList<String>();
                String json = null;

                if (sportsName.equals("Football")) {
                        list.add("Lionel Messi");
                        list.add("Cristiano Ronaldo");
                        list.add("David Beckham");
                        list.add("Diego Maradona");
                } else if (sportsName.equals("Volley")) {
                       /* list.add("Sourav Ganguly");
                        list.add("Sachin Tendulkar");
                        list.add("Lance Klusener");
                        list.add("Michael Bevan");*/

                        int i=0;
                        try
                        {
                                String qry;
                                Class.forName("com.mysql.jdbc.Driver");
                                Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","root");
                                Statement s = con.createStatement();
                                qry="Select nom from volley";
                                ResultSet r=s.executeQuery(qry);
                                while(r.next())
                                {

                                    list.add(i,r.getString(1));

                                    i++;
                                }

                        }  catch(Exception ex)
                        {

                            System.out.println("Your query is not working");
                        }

                } else if (sportsName.equals("Select Sports")) {
                        list.add("Select Player");
                }

                json = new Gson().toJson(list);
                response.setContentType("application/json");
                response.getWriter().write(json);
        }
}

Explication du code :

Lorsque l’on choisit un sport dans le premier menu déroulant dans index.jsp, Jquery lance un appel Ajax à la servlet JsonServlet.java;

là, si le sport choisit est « Football », la servlet retourne un objet JAVA converti en JSON avec la lib GSON. Ce objet contient tous les noms des footballers
Par contre, si l’on choisit le sport « Volley », Jquery lance un appel Ajax à la servlet, puis la servlet fait une requête sur Mysql, récupère les données, puis retourne le résultat, également converti en JSON à la vue index.jsp ! La requête sql est très simple… Pour l’instant … (Select nom from volley)..

svlt2.jpg

Conclusion


Depuis le temps que je cherchais un moyen de faire de l’ajax avec Java, je suis heureux de savoir faire cela pour les petits projets, par contre pour les gros projets, il faut utiliser Hibernate qui fait du mapping o/r automatique.

 

A comparer avec un Back-End en Php pour angularJs que j’aime vraiment bien ici :

https://nicolashcodes.wordpress.com/2016/04/04/exercice-53-application-de-commande-de-films-avec-angularjsphpsql-et-le-template-sb-admin-2/

[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] Créer une Jsp avec un bean qui récupère des Inputs HTML – Créer une Jsp-Jstl qui se connecte à Mysql

Introduction


A la recherche d’exemples JAVAEE de JSP exploitables et les plus simples possible, je suis tombé sur ce très bon site en Anglais :

http://www.tutorialspoint.com/jsp/index.htm

Il nous fait en particulier découvrir la librairie de Tag JSTL. Pour intégrer des librairies à Eclipse c’est méga simple, il faut copier coller à partir du bureau Windows les fichiers .jar des librairies dans le répertoire WebContent/WEB-INF/lib d’une projet WEB Eclipse .

Mon but est d’apprendre les technologies des années 2000 afin de pouvoir éventuellement comprendre un code datant de ces années là, voir même de créer quelque chose avec cette technologie, vu qu’elle est pas mal (UML et OBJET). Certaines personnes disent qu’il faut privilégier le système JSP sans frameworks, qui est plus simple pour certains projets.

  1. Une page HTML transmets par le biais d’un formulaire des variables à un BEAN (Classe JAVA), ensuite, une JSP affiche les données provenant de ce même BEAN :

HTML -> BEAN -> JSP

Dans cet exercice, pas de connexion SQL, C’est juste une réception de données directe provenant d’un formulaire. Le prérequis est juste que le serveur Web Tomcat tourne en arrière plan et soit intégré à Eclipse.

  • On lance Eclipse
  • On crée un nouveau Dynamic Web Project qu’on appelle web2 (FILE/New/…)

On fait un clic droit sur webContent-> New HTML puis on crée le fichier info.html :


<html>

<head>
<title>Besoin de plus d'informations</title>
</head>

<body>
	<h1>Plus d'informations</h1>
	S'il vous plait, utilisez ce formulaire pour indiquer quel cours vous préférez.

	<div class="un">

		<form method="get" action="reponse.jsp">
		  <br><input type="radio" name="courses" value="Java Programming"> Prog Java
		  <br><input type="radio" name="courses" value="Java Web Development"> Développement Java Web
		  <br><input type="radio" name="courses" value="J2EE Development"> J2EE Development
		  <br><input type="radio" name="courses" value="XML Introduction"> Introduction à XML
		  <br><input type="radio" name="courses" value="XML Schema"> XML Schema
		  <br><input type="radio" name="courses" value="Web Services"> Web Services

		  <p>Prénom: 	<input type="text" 		name="firstName">
		  <br>Nom: 		<input type="text" 		name="lastName">
		  <br>Email: 	<input type="text" 		name="email">
		  <br>Age : 	<input type="number" 	name="age">

		  <p><input type="submit" name="Submit">
		</form>

	</div>
</body>
</html>

<style>
.un{
	background-color:lightgrey;
}
</style>

Si on clique droit sur ce nouveau fichier HTML/Run as server, on voit cela dans le navigateur :

kuykuykuykuy

Ensuite, dans Eclipse, on clique droit sur le répertoire « Java Resource » de notre projet WEB et on créé une classe qui s’appelle Bean 

Malheureusement, j’ai pas eu le temps de la traduire pour que cela fasse mieux, tant pis …

Ce Bean va stocker les variables provenant de notre formulaire . On voit que c’est pour l’instant bien propre et structuré …

package web2;

public class Bean
{
  public String getFirstName() {
    return firstName;
  }
  public void setFirstName(String firstName) {
    this.firstName = firstName;
  }

  public String getLastName() {
    return lastName;
  }
  public void setLastName(String lastName) {
    this.lastName = lastName;
  }

  public String getCourses() {
    return courses;
  }
  public void setCourses(String courses) {
    this.courses = courses;
  }

  public String getEmail() {
    return email;
  }

  public void setEmail(String email) {
    this.email = email;
  }

  public Integer getAge() {
    return age;
   }

  public void setAge(Integer age) {
	 this.age = age;
   } 

  private String firstName;
  private String lastName;
  private String email;
  private String courses;
  private Integer age;
}

Notre bean n’est pas exécuté par la page HTML, c’est la JSP suivante qui l’appelle.
dans Eclipse, dans notre projet Web, on fait un clic droit sur le répertoire WebContent, puis on fait new JSP.

On colle le code suivant à l’intérieur :


<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>

<jsp:useBean id="RequeteInfo" scope="session" class="web2.Bean"></jsp:useBean>
<jsp:setProperty name="RequeteInfo" property="*"></jsp:setProperty>

<html>
<head>
	<title>Merci de votre réponse</title>
</head>

<body>

	<h1>Merci de votre réponse</h1>
	<p>nom initial 	= <%=RequeteInfo.getFirstName() %></p>
	<p>Courses 		= <%=RequeteInfo.getCourses() 	%></p>
	<p>Age 			= <%=RequeteInfo.getAge() 		%></p>

</body>
</html>

Voilà, désormais finalement, si l’on renseigne le formulaire dans le navigateur , puis qu’on clique sur le bouton « soumettre la requête », on voit que les données qu’on a écrit dans les champs input sont « stockées  » par le Bean JAVA, puis que la JSP affiche la page suivante, avec nos variables :

k

 

 

Créer une Jsp qui se connecte à Mysql en utilisant la librairie JSTL:

La librairie JSTL permet de simplier le code lorsque l’on accès à une Base de donnée dans la JSP. Cela rappelle un peu le ng-repeat de AngularJs par exemple.

  1. Créer une base de données comme indiqué ici :http://www.tutorialspoint.com/jsp/jsp_database_access.htm
  2. Créer un dynamic web project dans eclipse appelé web3
  3. Glisser-déposer toutes les librairies en .jar dans le répertoire WebContent/WEB-INF:

ça comprends le jar mysql-connector et tous les 4 jars présents sur cette page :

http://tomcat.apache.org/download-taglibs.cgi

Ensuite, tout siplement créer une JSP et coller le code suivant dedans :

<%@ page import="java.io.*,java.util.*,java.sql.*"%>
<%@ page import="javax.servlet.http.*,javax.servlet.*" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
 
<html>
<head>
<title>SELECT Operation</title>
</head>
<body>
 
<sql:setDataSource var="snapshot" driver="com.mysql.jdbc.Driver"
     url="jdbc:mysql://localhost:3306/test"
     user="root"  password="root"></sql:setDataSource>

<sql:update dataSource="${snapshot}" var="result">
INSERT INTO Employees VALUES (104, 2, 'Nuha', 'Ali');
</sql:update> 



<sql:query dataSource="${snapshot}" var="result">
SELECT * from test.employees;
</sql:query>
 
<table border="1" width="100%">
<tr>
   <th>Emp ID</th>
   <th>First Name</th>
   <th>Last Name</th>
   <th>Age</th>
</tr>
<c:forEach var="row" items="${result.rows}">
<tr>
   <td><c:out value="${row.id}"></c:out></td>
   <td><c:out value="${row.first}"></c:out></td>
   <td><c:out value="${row.last}"></c:out></td>
   <td><c:out value="${row.age}"></c:out></td>
</tr>
</c:forEach>
</table>
 
</body>
</html>

Ensuite, lorsque l’on fait un clic droit sur la jsp puis run on server, on peut voir que la table se peuple correctement :

Sans titre 6