Dans cette séance :
Comment utiliser des composants ou attributs HTML5 dans une page JSF. Inclure une vidéo YouTube dans une page JSF.
HTML5 a introduit un composant pour la saisie des dates. Cet exercice montre comment intégrer ce composant dans une page JSF pour enregistrer la valeur saisie par l'utilisateur dans une propriété de type Java Date d'un backing bean. La valeur est ensuite affichée dans une page résultat.
Ce composant HTML5 envoie au serveur la date dans un chaîne de caractères qui a le format AAAA-MM-JJ et il faut donc un convertisseur JSF pour mettre cette valeur dans une propriété de type java.util.Date. Il existe un convertisseur standard pour cela dans JSF.
Un même projet servira pour tout le TP.
Vous créerez un nouveau projet de type Web Application en choisissant "Java Web", puis "Web Application" (comme dans le TP 2). Pas d'utilisation de PrimeFaces pour ce TP.
La page index.xhtml demande à l'utilisateur un nom et une date et lui permet d'enregistrer ces informations en cliquant sur un bouton.
Modifiez comme ci-dessous le code de la page index.xhtml générée pour le projet (remarque : ça n'est pas indispensable mais on a changé le DOCTYPE pour un DOCTYPE HTML5 ; de toute façon dans les dernières versions de JSF les pages HTML générées par JSF ont ce DOCTYPE même si on laisse l'ancien DOCTYPE pour les pages xhtml).
Remarquez le composant HTML5 <h:input type="date"> et l'attribut jsf:id qui indique que le composant sera transformé en un composant JSF.
index.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:jsf="http://xmlns.jcp.org/jsf"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>JSF - HTML5</title>
</h:head>
<h:body>
<h:form>
<h:outputLabel value="Date : " for="date"/>
<input type="date" jsf:id="date" value="#{reservationBean.date}">
<f:convertDateTime pattern="yyyy-MM-dd" />
</input>
<br/>
<h:outputLabel value="Nom : " for="nom" />
<h:inputText value="#{reservationBean.nom}"/>
<br/>
<h:commandButton value="Enregistrer la réservation" action="resultat"/>
</h:form>
</h:body>
</html>
Créez le backing bean et la page "resultat.xhtml" pour faire afficher la date saisie par l'utilisateur.
Exécutez cet exemple :
Le composant <h:inputText> de JSF n'a pas d'attribut placeholder qui permet d'afficher un texte pour indiquer à l'utilisateur ce qu'il doit saisir. Pour le vérifier modifiez la page index.xhtml ainsi :
<h:inputText placeholder="Nom et prénom" value="#{reservationBean.nom}"/>
Remarquez le message d'erreur de NetBeans. Vous pouvez tout de même lancer le projet mais il n'est pas tenu compte du nouvel attribut placeholder. D'ailleurs, si vous faites afficher le code source de la page index (Ctrl-U si votre navigateur est Chrome), vous voyez que le nouvel attribut n'apparait pas dans le code HTML de la page index généré par JSF.
Pour indiquer à JSF d'ajouter cet attribut dans la page générée, il suffit d'ajouter l'espace de nom "passthrough" à l'attribut. Le plus simple pour cela est d'ajouter l'alias "p:" à l'attribut et NetBeans vous propose alors d'ajouter l'espace de noms (xmlns:p="http://xmlns.jcp.org/jsf/passthrough"). Le code final :
<h:inputText p:placeholder="Nom et prénom" value="#{reservationBean.nom}"/>
Testez et faites afficher le code HTML de la page
JSF ne permet pas de soumettre un formulaire avec une méthode GET. On peut seulement soumettre un formulaire avec une méthode POST et ensuite faire une redirection (voir PRG).
Pour les cas simples on peut remplacer ce POST avec une redirection par un GET direct. Pour cela il faut passer par un pur formulaire HTML qui utilise une méthode GET. Par exemple, inutile de faire une soumission avec POST suivi d'une redirection si le formulaire ne contient que des informations saisies par l'utilisateur pour préciser ce qu'il souhaite extraire d'une base de données.
Ecrivez un nouveau projet NetBeans. Ce projet va travailler avec la base "sample" que vous avez déjà utilisée dans le TP 1.
La page de démarrage (welcome) contient un formulaire qui contient un champ Etat qui demande à l'utilisateur de saisir l'id d'un état des Etats-Unis. Cet id correspond aux valeurs des états (state) dans la table CUSTOMER de la base sample ; par exemple CA, FL, NY.
Lorsque l'utilisateur soumet le formulaire, une table affiche sous le formulaire les clients (lignes de la table CUSTOMER) qui sont dans cet état. La soumission du formulaire affiche la même page en passant en paramètre l'état dans l'URL.
Pour cela la page welcome contient un formulaire pur HTML soumis par la méthode GET (méthode par défaut pour soumettre un formulaire HTML), suivi de la table qui n'est affichée que si des clients ont été trouvés dans l'état passé en paramètre.
Le paramètre de l'URL est récupéré dans un backing bean de portée requête grâce aux balises <f:viewParam> et <f:viewAction>. Le backing bean contient 2 propriétés state et customers pour enregistrer l'état récupéré par la 1ère balise et les clients retrouvés dans la base par la 2ème balise (avec l'aide d'un EJB comme on l'a fait jusqu'à maintenant).
Cet exemple a été inspiré d'une réponse de BalusC à une question posée sur stackoverflow : http://stackoverflow.com/questions/6377798/what-can-fmetadata-fviewparam-and-fviewaction-be-used-for
Télécharger cette vidéo (ou une autre de votre choix) et faites-la jouer dans une page JSF en utilisant la balise <video>.
Pour utiliser JSF, demandez à l'utilisateur de saisir le nom du fichier vidéo que vous avez mis dans le même répertoire que la page JSF et utilisez une propriété du backing bean pour ranger ce nom.
La balise <video> HTML5 ne fonctionne pas si la source est une vidéo YouTube.
Si la vidéo est connue au moment de l'écriture de la page JSF le plus simple est d'inclure le snipet fourni par YouTube. Pour cela, clic droit sur la vidéo et choisir "Copier le code d'intégration". Le coller ensuite dans le code de la page ; le code est du type suivant (choisissez la vidéo que vous voulez) :
<iframe width="1280" height="720" src="https://www.youtube.com/embed/QmGFra4pv-k" frameborder="0" allowfullscreen></iframe>
Si vous avez un message d'erreur sur allowfullscreen écrivez allowfullscreen="true".
Pour faire intervenir JSF mettez l'id YouTube (QmGFra4pv-k dans l'exemple ci-dessus) dans une propriété d'un backing bean.
Pour permettre à l'utilisateur de manipuler les vidéos YouTube qu'il regarde (par exemple pour les ralentir) il faut utiliser l'API JavaScript fournie par YouTube. Ce document explique comment faire.
Voici ce qui vous est demandé :
Voici un exemple de page JSF et de backing bean qui utilisent cette API.
Du code JavaScript a été ajouté pour mettre une marque durant le défilement de la vidéo en tapant "M" au clavier. On peut ensuite revenir à cette marque en tapant la flèche gauche. On peut aussi ralentir et accélérer la vidéo avec les flèches bas et haut et revenir à la vitesse normale en tapant "=".
Modifiez cet exemple : l'utilisateur peut indiquer un autre id YouTube.
Page avec vidéo locale - backing bean
Page avec code d'intégration YouTube - backing bean
Page HTML5 avec API YouTube - JavaScript
Page JSF pour choisir id YT - JavaScript
Page JSF avec divers manipulations - JavaScript
Transfert d'information du backing bean vers JavaScript : page JSF - JavaScript - backing bean
Un projet NetBeans qui contient des solutions pour tous les exercices de cette page, présentées sous la forme d'un menu comme pour le TP sur les templates JSF.