Ateliers primefaces

download Ateliers primefaces

If you can't read please download the document

Transcript of Ateliers primefaces

  • 1. INSTITUT NATIONALE DES SCIENCES APPLIQUEES ET DE TECHNOLOGIES PRIMEFACES ATELIERS PRESENTE PAR : Bouabane MohamedSalah BelhajAli Slimen GL5

2. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Contenu Atelier 1 : Mise en uvre de Primefaces......................................................................................... 2 Prparation de lenvironnement :............................................................................................... 3 Configuration de Netbeans avec Primefaces :.............................................................................. 3 Sans lutilisation de Maven :................................................................................................... 3 Intgration du Primefaces Avec Maven :................................................................................. 6 Atelier 2 : Composants de Primefaces utilis dans notre site :.......................................................... 9 Description du site :..................................................................................................................10 Les composants utiliss :...........................................................................................................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 thme :..................................................................................................25 Atelier 4 : Ralisation dun bureau MAC :.......................................................................................29 Atelier 5: Primefaces Mobile:........................................................................................................34 Menu dauthentification :......................................................................................................35 Map : ...................................................................................................................................37 Bibliographie :..............................................................................................................................39 3. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Atelier 1 : Mise en uvre de Primefaces 4. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Cette sectionsefforce de prciserlestapesncessaireslamise enuvre du Primefaces ausein de vos projets. Vousdevezdisposerdune version de Netbeans,ainsi que duneimplmentationde JSFpourla partie prsentation.Celasupposelutilisationdun serveurdapplicationsqui lessupporte,comme cestle cas desserveurs GlassFish. La distributionde Primefacesutilise danscetatelierestla version 3.0.M4,disponible sur http://www.primefaces.org/downloads.html. Prparation de lenvironnement : (1) Installation de JDK : Pourinstallerle JDK,allezladresse suivante http://www.oracle.com/technetwork/java/javase/downloads/index.html ettlchargezune versionrcente de JDK etLancezlinstallation. (2) Installation de lIDE Netbeans 7.0 : Tlchargez Netbeansdusite officielhttp://netbeans.org/downloads/ .Lexcutable de Netbeanscomporte aussi GlassFish,vousdevez le mentionnerlorsde linstallationde Netbeans. Configuration de Netbeans avec Primefaces : Sans lutilisation de Maven : Primefaces comporte un seul JAR : Primefaces-3.0.M4.jar 5. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Nous commenons par la cration dun projet Java web. Puis, nous dterminons le serveur dapplication qui dans notre cas GlassFich 3.1 6. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Noublions pas dajouter le Framework JSF : Ensuite, nous ajoutons le JAR du Primefaces : Ds que le JAR est ajout au projet, les balises du Primefaces seront dtectes : 7. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Intgration du Primefaces Avec Maven : Nous commenons par la cration dun projet Maven : 8. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Nous ajoutons les dpendances ncessaires dans le fichier pom.xml, celle de JSF 2.1 : Pour le Primefaces, nous ajoutons la repository suivant: Et la dpendance : 9. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Voici larborescencedu projet : 10. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Atelier 2 : Composants de Primefaces utilis dans notre site : 11. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Description du site : Notre application dagit dun site de vent en ligne des montres, il est compos dune page daccueil, une page permet dafficher les montre et une dernire page pert dajouter un client a notre base de donnes. Ce site ne contient que des composants primefaces. notre site et ci-dessous : Les composants utiliss : Les composants Primefaces sontdescomposantsgraphiquesavancsqui possdent desdiffrentes fonctionnalits.Ce sontdescomposantsprtsl'emploi. Nousallonsvousprsenterdansce lab quelquescomposants Primefacestelque : Accordion Panel : Lobjet AccordionPanel groupe plusieurs onglets. Les options comme l'effet de transition et d'vnements bascule peuvent tre personnalise. Code source : Ce code se met dans la page XHTML. 12. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Rsultat : 13. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Calender : Calendar est un composant puissant de date avec slecteur de modes d'affichage diffrents, la slection ajax, effets et options de personnalisation diffrentes. Code source : Ce code se met dans la page XHTML. Rsultat : Chart : Les graphiques sont des composantes de graphe mettant en vedette divers types de graphiques, interaction avec l'utilisateur et les donnes du scrutin. Graphiques sont mis en uvre avec la fonctionnalit de toile HTML5. Graphiques de l'image en outre statique bas peuvent tre implments avec intgration JFreechart-GraphicImage. 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 : Rsultat : 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. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Rsultat : Dock : Le dock est une barre de navigation. Fichier XHTML : 17. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Resultat : Lightbox : Lightbox est un composant d'affichage. Il appui sur limage slideshows, contenu externe avec iframe et les videos Images : LightBox fournit une faon lgante d'affichage des images. On insert le code suivant dans la page XHTML : 18. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Resultat : 19. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Videos : LightBox fournit une agrable pour les vidos. Ce code est mit dans le fichier XHTML : 20. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Resultat : IFrame: LightBox peut afficher l'URL externe dans un iframe. Voici la rsultat : 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 trs facile excuter ajax et non-ajax actions tant que naviguer directement vers d'autres ressources. On met ce code dans le fichier XHTML : 22. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Rsultat : Captcha : CAPTCHA est bas reCaptcha api et intgre comme un validateur de JSF. Fichier XHTML : La validation se fait dans un beans : On doit rcuprer une cl du site :https://www.google.com/recaptcha 23. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Rsultat : Stack : Stack est un panier des objets qui comporte des liens accompagns des images : 24. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Voici le code qui implmente cet objet : 25. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Atelier 3: Les themes dans PrimeFaces : 26. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Modification du theme : Pour changer le thme, on doit ajouter le JAR correspondant pour le thme. Pour cela, on a ajout une dpendance dans le fichier pom.xml . Puis, on dfinit un paramtre primefaces.THEME et on laffecte un le nom de thme quon veut le utiliser. Ce code est mit dans web.xml . Pour cet exemple on a utilis le thme le frog . Personnalisation du thme : On peut aussi personnaliser le thme selon notre besoin. On dfinit un paramtre primefaces.skin et on laffecte none . Ensuite, on dfinit notre feuille de style et on lassoci dans les pages. 27. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Ce thme est gnr a partir de ce site : http://jqueryui.com/themeroller/ Cliquons sur le Bouton Download theme , linterface suivant saffiche : 28. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Cliquons sur download , un fichier RAR est tlcharg qui comporte la feuille de style. 29. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Voici unextraie de notre feuillede style : On peut dfinir une liste roulante des thmes prdfinis. On ajoute la balise suivant dans le code : 30. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Atelier 4 : Ralisation dun bureau MAC : 31. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Le bureau Mac comporte plusieurs composants : Bar de menu (MenuBar) Ce code permetde dafficherlamenuenhautde lecran. Un bar de navigation en bas (Dock) Un objet de raccourcis (Stack) Le code si dessousestcelui dubar de navigationqui estsitu enbas. 32. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Un terminal : 33. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Une boite de dialogue.. Il sagitdu code de boite de dialogue qui saffichelorsdunclicksurliconde MAC. 34. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Voici la resultat du bureau Mac : 35. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Atelier 5: Primefaces Mobile: 36. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 PrimeFaces Mobile est un kit d'interface utilisateur pour crer des applications de JSF optimises 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 dauthentification : 37. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 38. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Map : Lexemple ci dessous dtermine la position, il utilise google Map. 39. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Ce code permet dafficher la carte de google avec un bouton. Ce code permet dassurer la go-localisation. Rsultat : 40. Belhaj Ali Slimen & Bouabane Mohamed Salah (GL5) :2011/2012 Bibliographie : www.primefaces.org PrimeFaces users guide 3.0.M4