Dans la suite de cette page, les instructions que vous devez suivre sont indiquées comme suit :
instructions à suivre !
Introduction
Pour que l'utilisateur puisse ajouter un produit au panier, il doit disposer d'un bouton situé à côté de chaque produit listé dans la page catalog.xhtml. Ce bouton a pour objectif de soumettre un formulaire désignant le produit sélectionné. Le code appelé lors de la soumission du formulaire ajoute alors le produit sélectionné au panier.
Création du formulaire d'ajout de produit au panier
Action de soumission du formulaire
C'est le "ShoppingCartManager" qui doit être chargé de récupérer et traiter le formulaire. Pour cela, il doit disposer d'une méthode qui va être appelée lors de la soumission du formulaire.
Dans le bean "ShoppingCartManager", ajouter une méthode "addToCart" sans argument ayant pour type de retour une chaine de caractères. Nous verrons son contenu un peu plus loin
Création du formulaire
Ajouter une colonne à la datatable de la page catalog.xhtml.
Dans cette colonne, ajouter un formulaire.
Dans le formulaire, placer un bouton de type "h:commandButton" dont l'action doit être un appel à la méthode "addToCart" du ShoppingCartManager.
Récupération du produit sélectionné
Le formulaire doit désigner le produit sélectionné par l'utilisateur. Ce produit sera récupéré par le "ShoppingCartManager". Il faut donc créer un attribut pour cela.
Dans le ShoppingCartManager, créer un attribut "prodToAdd" avec les accesseurs correspondants. C'est cet attribut qui va recevoir le produit à ajouter dans le panier lors de la soumission du formulaire.
Il faut maintenant donner une valeur à "prodToAdd" dans le formulaire. Nous savons que, pour chaque ligne de la DataTable, le produit courant est stocké par la variable d'itération "var" de la table et c'est la valeur de cette variable qui désigne le produit choisi par l'utilisateur et que nous devons récupérer pour l'ajout dans le panier. Une première approche consiste donc à placer la valeur de cette variable dans un champ de formulaire (un champ caché par exemple). Cela donne quelque-chose comme :
1 | <h:form> |
2 | <h:inputHidden id="prodToAdd" value="#{item}" /> |
3 | <h:commandButton value="Ajouter au panier" action="..." /> |
4 | </h:form> |
Malheureusement, cette approche n'est pas utilisable dans notre cas car l'attribut "value" d'un champ de formulaire doit toujours pointer sur un attribut du ManagedBean qui va traiter le formulaire. En effet, cet attribut reçoit automatiquement la valeur saisie par l'utilisateur lors de la soumission du formulaire. Or ici "#{item}" est la variable qui est gérée par le composant JSF DataTable qui est associé au CatalogManager. Elle ne peut donc pas recevoir sa propre valeur, et qui plus est elle se trouve dans le CatalogManager et non dans le ShoppingCartManager !
Ce que l'on cherche à faire est donc récupérer la valeur de "#{item}" pour pouvoir la stocker dans un attribut du ShoppingCartManager. Pour cela, il faut utiliser un "setPropertyActionListener". Son rôle est de s'assurer qu'un attribut d'un ManagedBean, noté "target" reçoit une valeur donnée notée "value" avant la soumission du formulaire :
1 | <h:commandButton action="#{bean.doSomething()}" value="Do something" > |
2 | <f:setPropertyActionListener value="..." target="#{bean.attrSomething}" /> |
3 | </h:commandButton> |
Utiliser un "setPropertyActionListener" pour donner à l'attribut "prodToAdd" la valeur de la variable d'itération de la table des produits.
Ajout du produit dans le panier
Dans la méthode "addToCart" du ShoppingCartManager, il est maintenant possible de récupérer le produit sélectionné par l'utilisateur puisqu'il se trouve dans l'attribut "prodToAdd". Il faut ensuite l'ajouter au panier, puis émettre un outcome de navigation afin de rediriger l'utilisateur vers la page du panier.
Dans la méthode "addToCart", créer un nouvel objet de type ShoppingCartItem à partir du produit se trouvant dans "prodToAdd" et d'une quantité égale à 1. Puis ajouter cet item à la liste des items du panier.
Créer dans faces-config.xml une règle de navigation allant de la vue catalog.xhtml à la vue shoppingcart.xhtml.
Renvoyer l'outcome correspondant à la fin de la méthode "addToCart".
Tester l'ajout d'un produit au panier !