Ateliers primefaces

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

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

Atelier 1 :
Mise en
œuvre de
Primefaces

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

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

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 :

Intégration du Primefaces Avec Maven :
Nous commençons par la création d’un projet Maven :

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 :

Voici l’arborescencedu projet :

Atelier 2 :
Composants
de
Primefaces
utilisé dans
notre site :

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.

Résultat :

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.

Voici un exemple de chart :
Ce code est mis dans la page XHTML.
Ce codeest mis dansun beans :
Résultat :

Un autre Chart :
Ce code est mis dans le fichier XHTML :
Ce code est mis dans un Beans :

Résultat :
Dock :
Le dock est une barre de navigation.
Fichier XHTML :

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 :

Resultat :

Videos :
LightBox fournit une agréable pour les vidéos.
Ce code est mit dans le fichier XHTML :

Resultat :
IFrame:
LightBox peut afficher l'URL externe dans un iframe.
Voici la résultat :

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 :

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

Résultat :
Stack :
Stack est un panier des objets qui comporte des liens accompagnés des images :

Voici le code qui implémente cet objet :

Atelier 3:
Les themes
dans
PrimeFaces :

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.

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 :

Cliquons sur «download », un fichier RAR est téléchargé qui comporte la feuille de style.

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 :

Atelier 4 :
Réalisation
d’un bureau
MAC :

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.

Un terminal :

Une boite de dialogue……..
Il s’agitdu code de boite de dialogue qui s’affichelorsd’unclicksurl’iconde MAC.

Voici la resultat du bureau Mac :

Atelier 5:
Primefaces
Mobile:

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 :

Map :
L’exemple ci dessous détermine la position, il utilise google Map.

Ce code permet d’afficher la carte de google avec un bouton.
Ce code permet d’assurer la géo-localisation.
Résultat :

Bibliographie :
www.primefaces.org
PrimeFaces users guide 3.0.M4

Ateliers primefaces

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Similar a Ateliers primefaces

Similar a Ateliers primefaces (6)

Ateliers primefaces