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

الموضوع في 'لغات البرمجة' بواسطة crytex, بتاريخ ‏3 أكتوبر 2014.

  1. crytex

    crytex مراقب سابق

    إنضم إلينا في:
    ‏5 أوت 2009
    المشاركات:
    14.896
    الإعجابات المتلقاة:
    25.215
      03-10-2014 01:54
    [​IMG]

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

    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

    [​IMG]



    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

    [​IMG]


    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

    [​IMG]

     
    آخر تعديل: ‏17 فيفري 2016
    allin1 ،Htewech7 ،HaddadR و 17آخرون معجبون بهذا.
  2. crytex

    crytex مراقب سابق

    إنضم إلينا في:
    ‏5 أوت 2009
    المشاركات:
    14.896
    الإعجابات المتلقاة:
    25.215
      03-10-2014 02:08
    [​IMG]

    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

    [​IMG]

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

    [​IMG]

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

    [​IMG]

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

    [​IMG]

    Le projet sous Netbeans sera comme suit

    [​IMG]

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

    [​IMG]


    [​IMG]

    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

    [​IMG]

    [​IMG]


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

    [​IMG]


    [​IMG]

    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

    كود (html5):
    <?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

    [​IMG]

    [​IMG]

    Primefaces 5.jar

    [​IMG]

    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

    [​IMG]

    Et on colle le code suivant

    كود (html5):
    <?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

    [​IMG]
     
    آخر تعديل: ‏17 فيفري 2016
    ismail1989 ،dali.rh ،allin1 و 13آخرون معجبون بهذا.
  3. crytex

    crytex مراقب سابق

    إنضم إلينا في:
    ‏5 أوت 2009
    المشاركات:
    14.896
    الإعجابات المتلقاة:
    25.215
      03-10-2014 02:15
    [​IMG]

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

    On ouvre le fichier Web.xml sous configuration files

    [​IMG]

    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>

    [​IMG]

    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

    [​IMG]

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

    [​IMG]

    [​IMG]

    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

    ;)
     

    الملفات المرفقة:

    آخر تعديل: ‏17 فيفري 2016
    allin1 ،pentli ،HaddadR و 16آخرون معجبون بهذا.
  4. nawfel10

    nawfel10 عضو

    إنضم إلينا في:
    ‏28 نوفمبر 2012
    المشاركات:
    55
    الإعجابات المتلقاة:
    9
      03-11-2014 23:59
    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)
     
  5. crytex

    crytex مراقب سابق

    إنضم إلينا في:
    ‏5 أوت 2009
    المشاركات:
    14.896
    الإعجابات المتلقاة:
    25.215
      04-11-2014 20:34
    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

     
    Wael Manai, ismail1989, Adam Bedoui و 1 شخص آخر معجبون بهذا.
  6. nawfel10

    nawfel10 عضو

    إنضم إلينا في:
    ‏28 نوفمبر 2012
    المشاركات:
    55
    الإعجابات المتلقاة:
    9
      05-11-2014 00:06
    :am-applause:
     
    1 person likes this.
  7. kimo1978

    kimo1978 عضو فعال

    إنضم إلينا في:
    ‏5 سبتمبر 2007
    المشاركات:
    301
    الإعجابات المتلقاة:
    65
      12-11-2014 13:49
    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?
     
  8. crytex

    crytex مراقب سابق

    إنضم إلينا في:
    ‏5 أوت 2009
    المشاركات:
    14.896
    الإعجابات المتلقاة:
    25.215
      12-11-2014 17:25
    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

     
    Htewech7 و ismail1989 معجبون بهذا.
  9. kimo1978

    kimo1978 عضو فعال

    إنضم إلينا في:
    ‏5 سبتمبر 2007
    المشاركات:
    301
    الإعجابات المتلقاة:
    65
      12-11-2014 19:30
    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?
     
  10. crytex

    crytex مراقب سابق

    إنضم إلينا في:
    ‏5 أوت 2009
    المشاركات:
    14.896
    الإعجابات المتلقاة:
    25.215
      12-11-2014 20:05
    Vous devez bien évidement avoir une bonne connaissance du langage Java

    Suivez les cours ci dessous


    مثبت:مجموعة 300 كتاب في مجالات البرمجة و الاعلامية
     
    Mr.khaled ،ismail1989 و charfou-90 معجبون بهذا.

مشاركة هذه الصفحة

جاري تحميل الصفحة...