IntroductionJSF est un standard J2EE. C’est est un Framework d'interface utilisateur pour les applications web, basé sur les technologies JSP et Servlets. Le but de JSF est d'accroître la productivité des développeurs dans le développement des interfaces utilisateur tout en facilitant leur maintenance. ArchitectureCycle de vieReconstruction de l’arborescence des composants. Cette vue va être construite sur le serveur et transformée sur le serveur en une page HTML qui sera envoyée au client. Extraction des valeurs de la requête. Validation et conversion des données. Mise à jour du modèle après validation et/ou conversion. Appel des méthodes pour le traitement de la page. Génération de la réponse qui sera retournée au client. AvantagesJSF présente de nombreux avantages, parmi lesquels:
Liste des composantsVoici la liste des compostants proposée par JSF : Composants HTMLLes composants HTML de JSF sont les suivants :
Composants CoreLes composants Core de JSF sont les suivants :
NavigationLa navigation peut être statique : définie « en dur » au moment de l’écriture de l’application. .Elle peut aussi être dynamique : définie au moment de l’exécution par l’état de l’application (en fait par la valeur retournée par une méthode). Navigation statiqueNavigation vers page1.xhtmlEn utilisant faces-config.xml: 1. < navigation-rule > 2. < from-view-id >home.xhtml</ from-view-id > 3. < navigation-case > 4. < from-action >page1</ from-action > 5. < from-outcome >page1</ from-outcome > 6. < to-view-id >/page1.xhtml</ to-view-id > 7. </ navigation-case > 8. </ navigation-rule > Navigation dynamique et conditionnelle:
1. @ManagedBean 2. public class beanName{ 3. public String move(){ 4. //le test à faire 5. return nomPage; 6. } Exemple:la navigation selon le login d'un utilisateur01. @RequestScoped 02. public class Navigation { 03. 04. public String signIn() { 05. private String user; 06. if (user.equals( "cnam" )) { 07. return "admin" ; 08. } else if (user.equals( "employee" )) { 09. return "employee" ; 10. } else { 11. return "student" ; 12. } 13. } 14. }
01. < navigation-rule > 02. < from-view-id >page.xhtml</ from-view-id > 03. < navigation-case > 04. < from-action >#{bean.register}</ from-action > 05. < if >#{bean.valide}</ if > 06. < to-view-id >success.xhtml</ to-view-id > 07. </ navigation-case > 08. < navigation-case > 09. < from-action >#{bean.register}</ from-action > 10. < if >#{!bean.valide}</ if > 11. < to-view-id >error.xhtml</ to-view-id > 12. </ navigation-case > 13. </ navigation-rule > Paramètres de vueLes paramètres d’une vue sont définis par des balises <f:viewParam> incluses dans une balise <f:metadata> (à placer au début, avant les <h:head> et <h:body>) :
Donner une valeur à un paramètre:Il y a plusieurs façons de donner une valeur à un paramètre de requête:Ou:Ou:Utilisation dans les Beans:Bean:Validation des donnéesf:validateLength :Valider la taille d'une chaîne de charactères
f:validateLongRangef:validateDoubleRangef:validateRegex:Valider la saisie d'une donnée en utilisant une expression régulièreExemple:la validation d'un emailCustom ValidatorOn peut créer notre propre validateur qui devrait implémenter l’interface « Validator »:1. @FacesValidator (“Validator_Id") 2. public class CustomValidator implements Validator { 3. @Override 4. public void validate(FacesContext facesContext, 5. UIComponent component, Object value) throws ValidatorException { 6. ... 7. } 8. }
main.xhtml: Exemple:la validation de la confiramation du password01. import javax.faces.application.FacesMessage; 02. import javax.faces.component.UIComponent; 03. import javax.faces.component.UIInput; 04. import javax.faces.context.FacesContext; 05. import javax.faces.validator.FacesValidator; 06. import javax.faces.validator.Validator; 07. import javax.faces.validator.ValidatorException; 08. 09. @FacesValidator ( "passwordValidator" ) 10. public class PasswordValidator implements Validator{ 11. @Override 12. public void validate(FacesContext facesContext, UIComponent component, Object value) 13. throws ValidatorException { 14. 15. UIInput passwordComponent = (UIInput) component.getAttributes().get( "password" ); 16. String password = (String) passwordComponent.getValue(); 17. String confirm = (String) value; 18. if (!password.equals(confirm)){ 19. FacesMessage msg = new FacesMessage( "Password validation failed" , "Passwords do not match!!" ); 20. msg.setSeverity(FacesMessage.SEVERITY_ERROR); 21. throw new ValidatorException(msg); 22. } 23. } 24. } On pourrait aussi implémenter notre propre fonction de validation dans une classe Bean, par exemple: 01. @ManagedBean (name = "register" ) 02. @RequestScoped 03. public class Register { 04. public void validatePass(FacesContext facesContext, UIComponent component, Object value) 05. throws ValidatorException { 06. String password = value.toString(); 07. boolean valid = true ; 08. if (password.toLowerCase().equals(password)) valid = false ; 09. if (password.length() < 6 || !valid){ 10. FacesMessage msg = new FacesMessage( "Password validation failed" , "Invalid Password" ); 11. msg.setSeverity(FacesMessage.SEVERITY_ERROR); 12. throw new ValidatorException(msg); 13. } 14. } 15. } Conversion des données
Ce convertisseur assure la conversion des nombres en utilisant plusieurs formats: minFractionDigits, minIntegerDigits, integerOnly…
Ce convertisseur assure la conversion à une date ou un temps selon un format spécifique (pattern):
Ce type de convertisseur vous permet d'implementer votre propre conversion. ALors, on pourrait transformer les données saisies depuis l'utilisateur selon le format qu' on désire: 01. @FacesConverter (Converter_Id) 02. public class CustomConverter implements Converter { 03. @Override 04. public Object getAsObject(FacesContext facesContext, 05. UIComponent component, String value) { 06. ... 07. } 08. @Override 09. public String getAsString(FacesContext facesContext, 10. UIComponent component, Object value) { 11. return value.toString(); 12. } 13. } Référenceshttp://www.tutorialspoint.com/jsf http://miageprojet2.unice.fr/@api/deki/files/1507/=CoursDeRichardAdapte.pdf |