Ateliers primefaces

13,440 views
13,291 views

Published on

3 Comments
5 Likes
Statistics
Notes
  • merci
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Ou est mon code???????????????????
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Bjr, j'apprécie vos travaux. Mais est il possible de changer l'apparition du composant Dock ? c'est à dire que les liens apparaissent du coté droit et non du coté gauche. Ou bien encore vers le bas et non ver le haut ?
    pour ma part je suis en train de developper une application web pour le gestion d'une bibliotheque et j'ai choisi PrimeFaces pour la richesse de ses composants. Mais j'ai des petites difficultés: j'utilise un panelMenu pour acceder aux pages de gestion de la bibliotheque. tout les menus sont dans un fichier menu.xhtml. J'utilise des Layout pour diviser les pages, inclure le menu avec . c'est pour faciliter la maintenance. Mais pour un lien de menu , la page appelé contient : .

    Lorsque le dataTable s'affiche le Layout ne s'affiche plus. Autrement il n'ya plus de cadre qui apparait. On dirait que le composant dataTable ne respecter pas la division du Layout. Je ne sais pas s'il y'a des choses à ajouter dans le Layout pour que tous les composants respectent ses limites.
    je dois dire aussi que ça marche bien sur la page principale de mon application.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
13,440
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
858
Comments
3
Likes
5
Embeds 0
No embeds

No notes for slide

Ateliers primefaces

  1. 1. INSTITUT NATIONALE DES SCIENCES APPLIQUEES ET DE TECHNOLOGIES PRIMEFACES ATELIERS PRESENTE PAR : Bouabane MohamedSalah BelhajAli Slimen GL5
  2. 2. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Contenu Atelier 1 : Mise en œuvre de Primefaces......................................................................................... 2 Préparation de l’environnement :............................................................................................... 3 Configuration de Netbeans avec Primefaces :.............................................................................. 3 Sans l’utilisation de Maven :................................................................................................... 3 Intégration du Primefaces Avec Maven :................................................................................. 6 Atelier 2 : Composants de Primefaces utilisé dans notre site :.......................................................... 9 Description du site :..................................................................................................................10 Les composants utilisés :...........................................................................................................10 Accordion Panel :..................................................................................................................10 Calender...............................................................................................................................12 Chart :..................................................................................................................................12 Dock :...................................................................................................................................15 Lightbox :.............................................................................................................................16 Menubar :............................................................................................................................20 Captcha :..............................................................................................................................21 Stack :..................................................................................................................................22 Atelier 3: Les themes dans PrimeFaces :......................................................................................24 Modification du theme :........................................................................................................25 Personnalisation du thème :..................................................................................................25 Atelier 4 : Réalisation d’un bureau MAC :.......................................................................................29 Atelier 5: Primefaces Mobile:........................................................................................................34 Menu d’authentification :......................................................................................................35 Map : ...................................................................................................................................37 Bibliographie :..............................................................................................................................39
  3. 3. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Atelier 1 : Mise en œuvre de Primefaces
  4. 4. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Cette sections’efforce de préciserlesétapesnécessairesàlamise enœuvre du Primefaces ausein de vos projets. Vousdevezdisposerd’une version de Netbeans,ainsi que d’uneimplémentationde JSFpourla partie présentation.Celasupposel’utilisationd’un serveurd’applicationsqui lessupporte,comme c’estle cas desserveurs GlassFish. La distributionde Primefacesutilisée danscetatelierestla version 3.0.M4,disponible sur http://www.primefaces.org/downloads.html. Préparation de l’environnement : (1) Installation de JDK : Pourinstallerle JDK,allezàl’adresse suivante http://www.oracle.com/technetwork/java/javase/downloads/index.html ettéléchargezune versionrécente de JDK etLancezl’installation. (2) Installation de l’IDE Netbeans 7.0 : Téléchargez Netbeansdusite officielhttp://netbeans.org/downloads/ .L’exécutable de Netbeanscomporte aussi GlassFish,vousdevez le mentionnerlorsde l’installationde Netbeans. Configuration de Netbeans avec Primefaces : Sans l’utilisation de Maven : Primefaces comporte un seul JAR : Primefaces-3.0.M4.jar
  5. 5. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Nous commençons par la création d’un projet Java web. Puis, nous déterminons le serveur d’application qui dans notre cas GlassFich 3.1
  6. 6. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 N’oublions pas d’ajouter le Framework JSF : Ensuite, nous ajoutons le JAR du Primefaces : Dés que le JAR est ajouté au projet, les balises du Primefaces seront détectées :
  7. 7. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Intégration du Primefaces Avec Maven : Nous commençons par la création d’un projet Maven :
  8. 8. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Nous ajoutons les dépendances nécessaires dans le fichier pom.xml, celle de JSF 2.1 : Pour le Primefaces, nous ajoutons la repository suivant: Et la dépendance :
  9. 9. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Voici l’arborescencedu projet :
  10. 10. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Atelier 2 : Composants de Primefaces utilisé dans notre site :
  11. 11. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Description du site : Notre application d’agit d’un site de vent en ligne des montres, il est composé d’une page d’accueil, une page permet d’afficher les montre et une dernière page pert d’ajouter un client a notre base de données. Ce site ne contient que des composants primefaces. notre site et ci-dessous : Les composants utilisés : Les composants Primefaces sontdescomposantsgraphiquesavancésqui possèdent desdifférentes fonctionnalités.Ce sontdescomposantsprêtsàl'emploi. Nousallonsvousprésenterdansce lab quelquescomposants Primefacestelque : Accordion Panel : L’objet AccordionPanel groupe plusieurs onglets. Les options comme l'effet de transition et d'événements à bascule peuvent être personnalisée. Code source : Ce code se met dans la page XHTML.
  12. 12. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Résultat :
  13. 13. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Calender : Calendar est un composant puissant de date avec sélecteur de modes d'affichage différents, la sélection ajax, effets et options de personnalisation différentes. Code source : Ce code se met dans la page XHTML. Résultat : Chart : Les graphiques sont des composantes de graphe mettant en vedette divers types de graphiques, interaction avec l'utilisateur et les données du scrutin. Graphiques sont mis en œuvre avec la fonctionnalité de toile HTML5. Graphiques de l'image en outre statique basé peuvent être implémentés avec intégration JFreechart-GraphicImage.
  14. 14. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Voici un exemple de chart : Ce code est mis dans la page XHTML. Ce codeest mis dansun beans : Résultat :
  15. 15. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Un autre Chart : Ce code est mis dans le fichier XHTML : Ce code est mis dans un Beans :
  16. 16. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Résultat : Dock : Le dock est une barre de navigation. Fichier XHTML :
  17. 17. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Resultat : Lightbox : Lightbox est un composant d'affichage. Il appui sur l’image slideshows, contenu externe avec iframe et les videos… Images : LightBox fournit une façon élégante d'affichage des images. On insert le code suivant dans la page XHTML :
  18. 18. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Resultat :
  19. 19. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Videos : LightBox fournit une agréable pour les vidéos. Ce code est mit dans le fichier XHTML :
  20. 20. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Resultat : IFrame: LightBox peut afficher l'URL externe dans un iframe. Voici la résultat :
  21. 21. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Menubar : MenuBar apporte les barres de menu application de bureau à JSF. À l'aide de menuitems, il est très facile à exécuter ajax et non-ajax actions tant que naviguer directement vers d'autres ressources. On met ce code dans le fichier XHTML :
  22. 22. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Résultat : Captcha : CAPTCHA est basé reCaptcha api et intégrée comme un validateur de JSF. Fichier XHTML : La validation se fait dans un beans : On doit récupérer une clé du site :https://www.google.com/recaptcha
  23. 23. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Résultat : Stack : Stack est un panier des objets qui comporte des liens accompagnés des images :
  24. 24. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Voici le code qui implémente cet objet :
  25. 25. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Atelier 3: Les themes dans PrimeFaces :
  26. 26. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Modification du theme : Pour changer le thème, on doit ajouter le JAR correspondant pour le thème. Pour cela, on a ajouté une dépendance dans le fichier « pom.xml » . Puis, on définit un paramètre « primefaces.THEME » et on l’affecte un le nom de thème qu’on veut le utiliser. Ce code est mit dans « web.xml ». Pour cet exemple on a utilisé le thème « le frog ». Personnalisation du thème : On peut aussi personnaliser le thème selon notre besoin. On définit un paramètre « primefaces.skin » et on l’affecte « none ». Ensuite, on définit notre feuille de style et on l’associé dans les pages.
  27. 27. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Ce thème est généré a partir de ce site : http://jqueryui.com/themeroller/ Cliquons sur le Bouton « Download theme », l’interface suivant s’affiche :
  28. 28. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Cliquons sur «download », un fichier RAR est téléchargé qui comporte la feuille de style.
  29. 29. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Voici unextraie de notre feuillede style : On peut définir une liste roulante des thèmes prédéfinis. On ajoute la balise suivant dans le code :
  30. 30. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Atelier 4 : Réalisation d’un bureau MAC :
  31. 31. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Le bureau Mac comporte plusieurs composants : Bar de menu (MenuBar) Ce code permetde d’afficherlamenuenhautde l’ecran. Un bar de navigation en bas (Dock) Un objet de raccourcis (Stack) Le code si dessousestcelui dubar de navigationqui estsitué enbas.
  32. 32. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Un terminal :
  33. 33. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Une boite de dialogue…….. Il s’agitdu code de boite de dialogue qui s’affichelorsd’unclicksurl’iconde MAC.
  34. 34. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Voici la resultat du bureau Mac :
  35. 35. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Atelier 5: Primefaces Mobile:
  36. 36. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 PrimeFaces Mobile est un kit d'interface utilisateur pour créer des applications de JSF optimisées pour les appareils mobiles. Il utilise jQuery Mobile avec les extensions PrimeFaces, il est suporté par des divers plateformes telles que l'iPhone, Android, Palm, Blackberry, Windows Phone 7 sont pris en charge. Menu d’authentification :
  37. 37. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012
  38. 38. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Map : L’exemple ci dessous détermine la position, il utilise google Map.
  39. 39. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Ce code permet d’afficher la carte de google avec un bouton. Ce code permet d’assurer la géo-localisation. Résultat :
  40. 40. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Bibliographie : www.primefaces.org PrimeFaces users guide 3.0.M4

×