Manipulation du javascript d'une jsp depuis le bean managé

Version imprimable

06/08/2007, 19h09
LeNovice

Manipulation du javascript d'une jsp depuis le bean managé

Bonjour,

Je voudrais savoir si il est possible de désigner une méthode javascript (maMéthode()) présente dans une jsp depuis le bean managé de cette même jsp, dans le cadre du framework JSF.

Y'a t'-il des possibilités du coté du FacesContext, où l'utilisation d'une API type DOM.

Je débute du coté des JSF, donc si vous pouviez me guider, ça serait sympa.

Merci
14/11/2007, 15h16
Dr@ke
Je recherche a peu pres la meme chose.
Lancer du code javascript depuis un bean.

Mon but est d'ouvrir un nouvel explorateur internet lorsque l'utilisateur clique sur un bouton. Je passe par une action, qui remplie le lien ou aller, et qui cree le code javascript suivant :
Code:

1 2 String javaScriptText = "window.open('"+ url +"', 'popupWindow', 'dependent=yes, menubar=no, toolbar=no');"
Et j'aimerai pouvoir executer ce code dans cette action..
La seule solution que je trouve pour l'instant est d'utiliser la librairie Tomahawk's ExtensionFilter AddResource. Mais je ne voudrais pas rajouter de librairie, j'ai deja RichFaces.

Quelqu'un a t il une idee, peut etre une autre facon d'ouvrir cette fenetre ?

Merci !

Bonjour.
Une solution possible serait de faire un truc comme ceci:
Code:

1 2 3 4 5 <body onload="#{bean.jsCode}"> <h:inputText value="#{bean.url}" /> <h:commandButton action="#{bean.go}" /> </body>
(j'ai pas mis le form, mais c'est clair qu'il nous faut un !

et dans le managed bean, tu fais:
Code:

1 2 3 4 5 6 7 8 private String jsCode=""; private String url=""; public String go(){ jsCode="window.location="+url; return null; }
Bonne chance.

14/11/2007, 16h14
Dr@ke

Hmm est-tu sur de ta solution ? cela ne veut pas marcher chez moi..

Pour preciser un peu, en fait j'utilise un PanelMenu, et non un bouton, dont je met a jour l'action du panelItemMenu.

La partie que je ne comprend pas est le onload. Lorsque la page est rechargee, jsf lance le javascript situe dans la string jsCode ? Donc au debut il ne fait rien car c'est null, et ensuite il devrait executer le window.location.
J'ai bien compris ?

Ca m'a l'air correct mais ca ne veux pas marcher !!
14/11/2007, 16h23
romaintaz

Citation:

Envoyé par Dr@ke

La partie que je ne comprend pas est le onload. Lorsque la page est rechargee, jsf lance le javascript situe dans la string jsCode ? Donc au debut il ne fait rien car c'est null, et ensuite il devrait executer le window.location.
J'ai bien compris ?

En gros, ça va se passer comme cela :

Le serveur va créer la page en HTML correspondant à ta JSP.
Quand il va écrire la balise HTML body, il va demander au bean bean ce que vaut sa propriété jsCode afin de remplir l'attribut onload de la balise body.

Au niveau client, une fois que la page a terminé de se charger, le code Javascript placé dans le onload de la balise body va s'exécuter.
14/11/2007, 16h26
romaintaz

En ce qui concerne ta question, définir ta fonction JS dans l'attribut onclick du h:commandButton (ou un autre composant), ça ne suffirait pas ?
14/11/2007, 16h33
djo.mos

Pardooon ... j'ai oublié de mentionner que ça ne marche que si on utilise facelets comme ViewHandler ... le pauvre JSP tout seul ne permet pas de mettre des EL n'importe où (dans le onload, ou encore dans <script>).
14/11/2007, 17h54
Dr@ke

CommandButton aurait suffit mais je devais le mettre dans le PanelMenu, mais étant donne que maintenant je dois rajouter une page intermédiaire demandant une date, le PanelMenu pointera vers celui ci, et je pourrais y mettre un commandButton.
Donc je remplis le champs onclick avec #{bean.jsCode} et cela devrait marcher non ?
Je vais essayer, je vous tiens au courant !

Djo.mos : Facelets c'est bien la lib pour diviser la page (template.xhtml .. etc) ? Parce que j'utilise ceci, et ca ne marchait pas tout de meme..

Apparement je n'arrive pas a m'en sortir..
Je suis sur ma page avec un Calendrier, et un commandButton.
Prenons le boutton :
Code:

1 2 <h:commandButton value="Voir cartographie" onclick="#{menu.jsCode}"/>
Dans ce cas le serveur va recuperer jsCode des le chargement de la page, ce qui n'est pas ce que je veux car je voudrais recuperer la date choisie par le user. Cela marche bien sur si je clique sur le bouton deux fois d'affile, car dans ce cas, la date existe bien lorsque le jsCode est forme.

J'ai rajouter une action mais si celle ci change directement jsCode, celui-ci n'est pas modifie dans le onclick.

Enfin, j'ai essaye la technique de djo.mos, qui ne marche toujours pas chez moi. Je peux pas placer le onload sur un autre element par hasard ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <body onload="#{vehb.jsCode}"> <ui:composition template="/template.xhtml"> <ui:define name="body"> <rich:panel> <a4j:form> <b><h:outputText>Selectionnez deux dates</h:outputText></b> <h:panelGrid id="panel" columns="4" width="100%" columnClasses="ecol1, ecol2"> <h:outputText>Date de debut : </h:outputText> <a4j:outputPanel id="calendrierDebut" layout="block"> <rich:calendar value="#{calendarBean.beginDate}" locale="#{calendarBean.locale}" datePattern="dd MMM yyyy"/> </a4j:outputPanel> </h:panelGrid> <a4j:commandButton value="Voir cartographie" action="#{vehb.changeCode}"/> </a4j:form> </rich:panel> </ui:define> </ui:composition> </body>
Des idees ? :(

14/11/2007, 21h09
djo.mos

Si si, avec facelets ça marche parfaitement, j'ai essayé un bout de code avec le onload du body et ça marche parfaitement.

En regardant ton code, je crois que le problème vient du fait que tu as placé le body à l'extérieur du <ui:composition> :arrow: et tout ce qui ne figurepas dans <ui:composition> ne sera pas inclus après le fusionnement avec le template :arrow: c'est pour ça que ça marche po (du moins, c'est une des raisons ;)).

Tu peux vérifier ça en jetant un petit coup d'oeil sur le code source de la page généré dans le navigateur, et tu te rendras compte que le onload que tu as spécifié n'existe pas.

Bonne chance.

P.S.: Facelets est plus q'une "lib pour diviser la page": c'est une technologie de présentation comme JSP mais qui inclut d'office le templating.

C'est exactement ce que je pensait, je body sur lequel je met le onload n'est pas le bon, mais d'apres les tutos que j'ai suivi, j'ai mis le body dans le template.xhtml principal. Donc je ne peux pas le remettre dans une des compositions, non ?

template.xhtml :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <body> <f:view> <f:loadBundle basename="messages" var="msg" /> <div id="header"><ui:include src="header.xhtml" /></div> <ui:include src="menu.xhtml" /> <div style="float: left; margin-left: 5%; width: 66%"> <ui:insert name="body"/> </div> </f:view> </body>

15/11/2007, 11h54
djo.mos

Ben si ...
Dans les tutos que t'as suivi, ils considéraient que la déclaration du bodu etait la même pour toutes le spages :arrow: ils ont alors intégré ça dans le template.
Mais dans ton cas, c'est différent: le body n'est pas le même :arrow: tu dois le sortir du template et le définir dans chacune des pages clientes (dans une 1ère approche).

Mieux encore, tu peux faire du templating à 2 niveaux.

Bonne chance.

Etant donne que ne voulait pas rajouter pour chaque page, le menu etc... Je suis parti sur la deuxieme solution.
J'ai cherche sans succes des exemples d'utilisation sur le templating a niveaux multiples, donc j'ai essaye quelque chose qui a le merite de marcher, est-ce la bonne solution car c'est un peu bordelique :yaisse2: ?

template.xhtml
Code:

1 2 3 4 5 6 7 8 .. <title> TITRE TEMPORAIRE </title> </head> <ui:insert name="body"/> </html>
index.xhtml
Code:

1 2 3 4 5 6 7 8 9 10 <ui:composition template="/template.xhtml"> <ui:define name="body" > <ui:include src="/genericbody.xhtml" /> </ui:define> <ui:define name="specificbody"> <h:outputText>KIKOO</h:outputText> </ui:define> </ui:composition>
genericbody.xhtml
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <ui:composition template="/template.xhtml"> <ui:define name="body" > <body> <f:view> <f:loadBundle basename="messages" var="msg" /> <div id="header"><ui:include src="/header.xhtml" /></div> <div id="menu" style="float: left; width: 20%; margin-left: 3%; display: inline"> <ui:include src="/menu.xhtml" /> </div> <div style="float: left; margin-left: 5%; width: 66%"> <ui:insert name="specificbody"/> </div> </f:view> </body> </ui:define> </ui:composition>
Merci pour cette aide precieuse djo.mos !

15/11/2007, 14h08
djo.mos
Bonjour.
J'aurais quelque chose de plus zolie à te proposer (du templating multi-niveaux):

:arrow: template.xhtml
Code:

1 2 3 4 5 6 7 <html> <head> </head> <ui:insert name="body"/> </html>
:arrow: template-with-body.xhtml : est un template qui utilise déjà le template précédent.
Code:

1 2 3 4 5 6 7 8 9 <html> <ui:composition template="/template.xhtml"> <ui:define name="body"> <body> <ui:insert name="body2"/> </body </ui:define> </html>
pour les pages ordinaires, elles doivent utiliser template-with-body.xhtml comme template, et définir leur contenu avec <ui:define name="body2" /> tandis que pour les pages qui veulent spécifier leur propore balise body devront utiliser template.xhtml.

Bonne chance.
15/11/2007, 16h54
Dr@ke

En effet, beaucoup plus beau :oops:

Merci pour tout !
RESOLU !