درس Apprendre à développer des applications web JAVA EE avec Netbeans IDE

crytex

مراقب سابق
إنضم
5 أوت 2009
المشاركات
14.896
مستوى التفاعل
25.223


أهلا و سهلا بكافّة الإخوة الأعضاء والزوار في منتديات تونيزيا سات

Grâce à ce tutoriel on va voir ensemble comment développer des applications web avancées en utilisant JSF et Primefaces Comme Framework

Je vais seulement présenter quelques éléments de la grande bibliothèque pour montrer comment les intégrer dans votre application

Introduction à Primefaces




Primefaces est l'un des framework les plus utilisé pour developper des applications web, il contient plusieurs composant qui sont léger sur les navigateurs et qui offrent une interface bien présentée pour votre application

?Qui utilise Primefaces




Comme résultat on va avoir cette interface avec les éléments suivants
Le code source du projet ainsi que les images et les logos utilisés seront attachés aux pièces jointes à la fin du tutoriel


 
التعديل الأخير:

crytex

مراقب سابق
إنضم
5 أوت 2009
المشاركات
14.896
مستوى التفاعل
25.223


On Commence d'abord par préparer notre environnement de développement, j'ai déjà préparé un tutoriel pour ca

مثبت: Installation et configuration de Netbeans IDE

Maintenant on va créer un nouveau projet web application sous Netbeans comme suit



Après on va nommé le projet et on appui sur Next



On choisi Glassfish 4 comme serveur d'application et Java EE 7 comme version



Par la suite on choisi Java Server Faces comme framework et on appui sur Next



Le projet sous Netbeans sera comme suit



On va créer un nouveau Package pour y placer nos classes Java





Maintenant on va créer un dossier pour y mettre les images et les icônes qu'on va utilisé dans notre application depuis Web Pages et on nomme le premier dossier resources et dans ce dernier on créée un nouveau dossier nommé images





On place aprés l'image Favicon dans le dossier images, l’extension du fichier doit être .ico





On passe maintenant au codage, le code est simple et lisible, si il y a des questions je suis prêt à vous répondre

On va coller le code suivant dans la classe Index qui contient le formulaire de la page d'authentification de notre application

HTML:
<?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://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Interface de connexion</title>
        <link rel="shortcut icon" href="#{resource['images:logo.ico']}" type="image/x-icon" />
    </h:head>
    <h:body>

        <h:form id="formIndex">
            <p:growl id="growlIndex" showDetail="true" sticky="false"/>

            <p:dialog id="dialog" header="Connexion" widgetVar="dlg"  resizable="false" visible="true" draggable="false" closable="false">

                <h:panelGrid columns="2" cellpadding="5">
                    <h:outputLabel for="username" value="Login:" />
                    <p:inputText value="#{login.user}" id="username" required="true" label="username" />

                    <h:outputLabel for="password" value="Mot de passe:" />
                    <p:password value="#{login.pass}" id="password" required="true" label="password" />

                    <p:commandButton id="loginButton" value="Login"  update="growlIndex" action="#{login.verifier_connexion}"  oncomplete="handleLoginRequest(xhr, status, args)"/>
                </h:panelGrid>

            </p:dialog>

        </h:form>

        <script type="text/javascript">
            function handleLoginRequest(xhr, status, args) {
                if (args.validationFailed || !args.loggedIn) {
                    PF('dlg').jq.effect("shake", {times: 5}, 100);
                }
                else {
                    PF('dlg').hide();
                }
            }
        </script>
    </h:body>
</html>

Vous allez surement remarquer qu'il y a des erreurs dans le fichier, c'est normal il faut ajouter le fichier Jar de Primefaces dans la bibliothèque de notre projet





Primefaces 5.jar



On créée une classe nommé Login pour vérifier le nom d'utilisateur et le mot de passe, il faut saisir "admin" , "admin" pour passer au menu principal dans cet exemple

On colle se code dans le ManagedBean qui est notre classe Login

Java:
package TunisiaSatPackage;

import java.io.Serializable;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@ViewScoped
public class Login implements Serializable{

    private String user;
    private String pass;

    public String getUser() {
        return user;
    }

    public void setUser(String user) {
        this.user = user;
    }

    public String getPass() {
        return pass;
    }

    public void setPass(String pass) {
        this.pass = pass;
    }

    public String verifier_connexion() {

        if (user.equals("admin") && (pass.equals("admin"))) {
            FacesContext facesContext = FacesContext.getCurrentInstance();
            FacesMessage facesMessage = new FacesMessage("Bienvenue", "Administrateur");
            facesMessage.setSeverity(FacesMessage.SEVERITY_INFO);
            facesContext.addMessage(null, facesMessage);
            return "MenuPrincipal";
        } else {
            FacesContext facesContext = FacesContext.getCurrentInstance();
            FacesMessage facesMessage = new FacesMessage("Erreur de connexion", "Login ou mot de passe incorrecte.");
            facesMessage.setSeverity(FacesMessage.SEVERITY_INFO);
            facesContext.addMessage(null, facesMessage);
            return "index";
        }
    }

    public void afficherMessage() {

        FacesContext facesContext = FacesContext.getCurrentInstance();
        FacesMessage facesMessage = new FacesMessage("Info", "Tunisia-Sat.");
        facesMessage.setSeverity(FacesMessage.SEVERITY_INFO);
        facesContext.addMessage(null, facesMessage);
    }
}

On va créer maintenant une nouvelle page XHTML nommée MenuPrincipal qui sera affiché après l'authentification



Et on colle le code suivant

HTML:
<?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://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Menu Principal</title>
        <link rel="shortcut icon" href="#{resource['images:logo.ico']}" type="image/x-icon" />
    </h:head>
    <h:body>

        <h:form id="form">
            <p:growl id="growl" showDetail="true" sticky="false"/>

            <p:dialog id="dialog" header="Elements Primefaces" widgetVar="dlg" resizable="false" visible="true" draggable="false" closable="false">

                <h:panelGrid columns="2" cellpadding="5">

                    <h:outputLabel for="CIN" value="Cin:" />
                    <p:inputText id="CIN" maxlength="8"/>

                    <h:outputLabel for="password" value="Mot de passe:" />
                    <p:password id="password" feedback="true" weakLabel="Faible" strongLabel="Fort" promptLabel="Entrez votre mot de passe" />

                    <h:outputLabel value="Date naissance:" />
                    <p:calendar effect="slide" pattern="dd-MM-yyyy"/>

                    <h:outputLabel value="Ville:" />

                    <p:selectOneMenu id="Ville" filter="true">
                        <f:selectItem itemLabel="Votre ville"/>
                        <f:selectItem itemLabel="Tunis" itemValue="Tunis" />
                        <f:selectItem itemLabel="Ariana" itemValue="Ariana" />
                        <f:selectItem itemLabel="Ben Arous" itemValue="Ben Arous" />
                        <f:selectItem itemLabel="Nabeul" itemValue="Nabeul" />
                        <f:selectItem itemLabel="Bizerte" itemValue="Bizerte" />
                        <f:selectItem itemLabel="Sousse" itemValue="Sousse" />
                        <f:selectItem itemLabel="Monastir" itemValue="Monastir" />
                        <f:selectItem itemLabel="Béja" itemValue="Béja" />
                        <f:selectItem itemLabel="Jandouba" itemValue="Jandouba" />
                        <f:selectItem itemLabel="Kef" itemValue="Kef" />
                        <f:selectItem itemLabel="Sfax" itemValue="Sfax" />
                        <f:selectItem itemLabel="Gabés" itemValue="Gabés" />
                        <f:selectItem itemLabel="Tataouin" itemValue="Tataouin" />
                        <f:selectItem itemLabel="Touzer" itemValue="Touzer" />
                        <f:selectItem itemLabel="Mahdia" itemValue="Mahdia" />
                        <f:selectItem itemLabel="Medenine" itemValue="Medenine" />
                        <f:selectItem itemLabel="Kairoun" itemValue="Kairoun" />

                    </p:selectOneMenu>

                    <h:outputLabel for="Adresse" value="Adresse:" />
                    <p:inputTextarea id="Adresse"/>

                    <p:commandButton action="#{login.afficherMessage()}" value="Message" update="growl" icon="ui-icon-disk"/>
                    <p:commandButton icon="ui-icon-trash" value="Vider les champs" type="reset"/>

                    <p:splitButton value="Save" icon="ui-icon-disk">
                        <p:menuitem value="Update" icon="ui-icon-arrowrefresh-1-w" />
                        <p:menuitem value="Delete" ajax="false" icon="ui-icon-close" />
                        <p:separator />
                        <p:menuitem value="Homepage" url="http://www.tunisia-sat.com" icon="ui-icon-extlink" />
                    </p:splitButton>
                </h:panelGrid>

            </p:dialog>
            <p:dock>
                <p:menuitem value="" icon="/resources/images/logout.png" ajax="false"/>
                <p:menuitem value="" icon="/resources/images/home.png" ajax="false"/>
            </p:dock>
        </h:form>

    </h:body>
</html>

Le code contient seulement quelques elements qui seront affichés comme ci dessous, vous pouvez trouver d'autres éléments dans le Primefaces Showcase


 
التعديل الأخير:

crytex

مراقب سابق
إنضم
5 أوت 2009
المشاركات
14.896
مستوى التفاعل
25.223

On passe maintenant à une autre étapes, on va définir un thème à notre application

On ouvre le fichier Web.xml sous configuration files



Juste avant la fin, on ajoute le code suivant pour définir le théme, il faut seulement taper le nom du thème, dans mon cas le thème est nommé start

XML:
    <context-param>
        <param-name>primefaces.THEME</param-name>
        <param-value>start</param-value>
    </context-param>



Bien évidement Netbeans ne va pas reconnaitre cette nomination, il faut ajouter le thème à la bibliothèque du projet

Vous pouvez trouver une large collection de thèmes Primefaces depuis le site officiel

La nomination dans le fichier web.xml change selon le thème choisi


Après avoir appliqué le nouveau thèmes l'interface de notre application sera comme suit





J’espère que j'ai bien expliqué les premières étapes pour commencer le développement des applications web, avec la technologie Primefaces, Le code source est aux pièces jointes

je suis prêt à répondre a toutes vos questions

;)
 

المرفقات

التعديل الأخير:

nawfel10

عضو
إنضم
28 نوفمبر 2012
المشاركات
55
مستوى التفاعل
9
il s'affiche ce msg :


ant -f C:\\Users\\MyPc\\Downloads\\Compressed\\Tunisia-Sat -Dnb.internal.action.name=run -Ddirectory.deployment.supported=true -DforceRedeploy=false -Dnb.wait.for.caches=true -Dbrowser.context=C:\\Users\\MyPc\\Downloads\\Compressed\\Tunisia-Sat run
init:
deps-module-jar:
deps-ear-jar:
deps-jar:
library-inclusion-in-archive:
C:\Users\MyPc\Downloads\Compressed\Tunisia-Sat\nbproject\build-impl.xml:1008: Warning: Could not find file D:\PrimefacesThemes\primefaces-5.0.jar to copy.
BUILD FAILED (total time: 0 seconds)
 

crytex

مراقب سابق
إنضم
5 أوت 2009
المشاركات
14.896
مستوى التفاعل
25.223
il s'affiche ce msg :


ant -f C:\\Users\\MyPc\\Downloads\\Compressed\\Tunisia-Sat -Dnb.internal.action.name=run -Ddirectory.deployment.supported=true -DforceRedeploy=false -Dnb.wait.for.caches=true -Dbrowser.context=C:\\Users\\MyPc\\Downloads\\Compressed\\Tunisia-Sat run
init:
deps-module-jar:
deps-ear-jar:
deps-jar:
library-inclusion-in-archive:
C:\Users\MyPc\Downloads\Compressed\Tunisia-Sat\nbproject\build-impl.xml:1008: Warning: Could not find file D:\PrimefacesThemes\primefaces-5.0.jar to copy.
BUILD FAILED (total time: 0 seconds)
Click droit sur le projet puis properties, Libraries, sélectionnez Primefaces5.jar puis appuyez sur remove a droite
Après click sur ADD JAR et insérez PRIMEFACES5.jar de nouveau depuis le lien de téléchargement que j'ai posté en haut

Vous avez eu ce message d'erreur parce que le chemin où j'ai mis le fichier jar n'est pas le même que sur votre pc

 

kimo1978

عضو فعال
إنضم
5 سبتمبر 2007
المشاركات
301
مستوى التفاعل
65
Trés bon travail mon ami, c'est du travail du pro, j'ai une quesion svp , est ce que je peux réaliser mon projet de gestion commercial avec cette framework?
 

crytex

مراقب سابق
إنضم
5 أوت 2009
المشاركات
14.896
مستوى التفاعل
25.223
Trés bon travail mon ami, c'est du travail du pro, j'ai une quesion svp , est ce que je peux réaliser mon projet de gestion commercial avec cette framework?
Tout est possible avec ce framework, il est avancé et très bien développé

Commencez votre travail et je suis la pour vous aider à tout moment

 

kimo1978

عضو فعال
إنضم
5 سبتمبر 2007
المشاركات
301
مستوى التفاعل
65
Merci beaucoup frère,mais le problème que je ne suis pas familiarisé avec Java, est ce que vous pouvez m'aider a commencer a comprendre les bases avant de passer a ce framework avancée?
 

crytex

مراقب سابق
إنضم
5 أوت 2009
المشاركات
14.896
مستوى التفاعل
25.223
أعلى