Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this document? Why not share!

Ateliers primefaces

on

  • 10,652 views

 

Statistics

Views

Total Views
10,652
Views on SlideShare
10,652
Embed Views
0

Actions

Likes
3
Downloads
643
Comments
2

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft Word

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Ou est mon code???????????????????
    Are you sure you want to
    Your message goes here
    Processing…
  • 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.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Ateliers primefaces Ateliers primefaces Document Transcript

  • INSTITUT NATIONALE DES SCIENCES APPLIQUEES ET DE TECHNOLOGIES PRIMEFACESATELIERS PRESENTE PAR : Bouabane Mohamed Salah Belhaj Ali Slimen GL5
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012ContenuAtelier 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 : ........................................................................................ 6Atelier 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 : ...................................................................................................................................... 19 Captcha : ........................................................................................................................................ 20 Stack : ............................................................................................................................................ 21Atelier 3: Les themes dans PrimeFaces : ............................................................................................ 23 Modification du theme : ................................................................................................................ 23 Personnalisation du thème : ......................................................................................................... 24Atelier 4 : Réalisation d’un bureau MAC : ............................................................................................. 27Atelier 5: Primefaces Mobile: ................................................................................................................ 32 Menu d’authentification : ............................................................................................................. 33 Map :.............................................................................................................................................. 34Bibliographie :........................................................................................................................................ 36 1
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012 Atelier 1 : Mise en œuvre de Primefaces2
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012Cette section s’efforce de préciser les étapes nécessaires à la mise en œuvre du Primefaces au seinde vos projets.Vous devez disposer d’une version de Netbeans, ainsi que d’une implémentation de JSF pour lapartie présentation. Cela suppose l’utilisation d’un serveur d’applications qui les supporte, commec’est le cas des serveurs GlassFish.La distribution de Primefaces utilisée dans cet atelier est la version3.0.M4, disponible surhttp://www.primefaces.org/downloads.html.Préparation de l’environnement : (1) Installation de JDK : Pour installer le JDK, allez à l’adresse suivante http://www.oracle.com/technetwork/java/javase/downloads/index.html et téléchargez une version récente de JDK et Lancez l’installation. (2) Installation de l’IDE Netbeans 7.0 : Téléchargez Netbeans du site officiel http://netbeans.org/downloads/ . L’exécutable de Netbeans comporte aussi GlassFish, vous devez le mentionner lors de l’installation de Netbeans.Configuration de Netbeans avec Primefaces :Sans l’utilisation deMaven :Primefaces comporte un seul JAR : Primefaces-3.0.M4.jar 3
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012Nous 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 4
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012N’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 : 5
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012Intégration du PrimefacesAvec 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 deJSF 2.1 : 6
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012Pour le Primefaces, nous ajoutons larepository suivant :Et la dépendance :Voici l’arborescence du projet : 7
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/20128
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012 Atelier 2:Composants de Primefaces utilisé dans notre site :9
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012Description du site :Notre application d’agit d’un site de vent en ligne des montres, il est composé d’une paged’accueil, une page permet d’afficher les montre et une dernière page pert d’ajouter unclient 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 sont des composants graphiques avancés qui possèdent des différentesfonctionnalités. Ce sont des composants prêts à lemploi.Nous allons vous présenter dans ce lab quelques composants Primefacestelque :Accordion Panel :L’objet AccordionPanelgroupe plusieurs onglets. Les options comme leffet de transitionet dévénements à bascule peuvent être personnalisée.Code source :Ce code se met dans la page XHTML. 10
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012Résultat : 11
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012Calender :Calendar est uncomposant puissant de date avec sélecteur de modes daffichagediffé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 degraphiques, interaction avec lutilisateur et les données du scrutin. Graphiques sontmis en œuvre avec la fonctionnalité de toile HTML5. Graphiques de limage en outrestatique basé peuvent être implémentés avec intégration JFreechart-GraphicImage. 12
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012Voici un exemple de chart :Ce code est mis dans la page XHTML.Ce code est mis dans un beans :Résultat : 13
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012Un autre Chart :Ce code est mis dans le fichier XHTML :Ce code est mis dans un Beans : 14
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012Résultat :Dock :Le dock est une barre de navigation.Fichier XHTML :Resultat : 15
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012Lightbox :Lightbox est un composant daffichage. Il appui sur l’image slideshows, contenu externe aveciframe et les videos…Images :LightBox fournit une façon élégante daffichage des images.On insert le code suivant dans la page XHTML :Resultat : 16
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012Videos :LightBox fournit une agréable pour les vidéos.Ce code est mit dans le fichier XHTML : 17
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012Resultat :IFrame :LightBox peut afficher lURL externe dans un iframe.Voici la résultat : 18
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012Menubar :MenuBar apporte les barres de menu application de bureau à JSF. À laide de menuitems, ilest très facile à exécuter ajax et non-ajax actions tant que naviguer directement versdautres ressources.On met ce code dans le fichier XHTML : 19
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012Ré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 20
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012Résultat :Stack :Stack est un panier des objets qui comporte des liens accompagnés des images : 21
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012Voici le code qui implémente cet objet : 22
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012 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 aajouté une dépendance dans le fichier « pom.xml » . 23
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012Puis, on définit un paramètre « primefaces.THEME » et on l’affecte un le nom de thèmequ’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/ 24
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012Cliquons sur le Bouton « Downloadtheme », l’interface suivant s’affiche :Cliquons sur «download », un fichier RAR est téléchargé qui comporte la feuille de style. 25
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012Voici un extraie de notre feuille de style :On peut définir une liste roulante des thèmes prédéfinis.On ajoute la balise suivant dans le code : 26
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012 Atelier4 :Réalisation d’un bureau MAC :27
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012Le bureau Mac comporte plusieurs composants :Bar de menu(MenuBar)Ce code permet de d’afficher la menu en haut de l’ecran.Un bar de navigation en bas(Dock)Un objet de raccourcis (Stack)Le code si dessous est celui du bar de navigation qui est situé en bas. 28
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012Un terminal : 29
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012Une boite de dialogue……..Il s’agit du code de boite de dialogue qui s’affiche lors d’un click sur l’icon de MAC. 30
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012Voici la resultat du bureau Mac : 31
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012 Atelier5:Primefaces Mobile:32
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012PrimeFaces Mobile est un kit dinterface utilisateur pour créer des applications de JSFoptimisées pour les appareils mobiles.Il utilisejQuery Mobile avec les extensions PrimeFaces, il est suporté par des diversplateformes telles que liPhone, Android, Palm, Blackberry, Windows Phone 7 sont prisen charge.Menu d’authentification : 33
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012Map :L’exemple ci dessous détermine la position, il utilise googleMap. 34
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012Ce code permet d’afficher la carte de google avec un bouton.Ce code permet d’assurer la géo-localisation.Résultat : 35
  • Belhaj Ali Slimen&Bouabane Mohamed Salah (GL5) :2011/2012Bibliographie :www.primefaces.orgPrimeFacesusers guide 3.0.M4 36