commandLink onkeydown et navigation statique

Version imprimable

Bonjour à tous et... bonne et heureuse (moins buggée) année 2009,

je suis débutant en JEE 5 et je programme une application web basée sur un serveur d'application JBOSS(4.2.3) et utilisant un navigateur Webkit comme client.

J'utilise JSF et Facelets et je souhaite programmer une navigation statique entre ma première et ma deuxième page xhtml. Jusque là rien de compliqué et je parviens à le faire. Là où ça se complique, est que l'utilisateur ne peux utiliser que certaines touches du clavier (flèches directionnelles et enter).

Mon premier objectif est de passer d'une première page(page1) à une autre page (page2 ou page3) en fonction de la touche du clavier enfonçé.

Devant utiliser JSF/Facelets pour une intégration à une grande application, j'utilise pour celà une balise commandLink avec l'attribut onkeydown. Mais je ne sais pas comment je peux envoyer la valeur contenue dans le "action" du commandLink via l'apuie du bon bouton.

J'ai inséré les commandLink dans un form. Ne prétez pas attention à ma valeur de "onkeydown" car c'était juste pour faire des essais non fructueux...
Code:

1 2 3 4 <h:form id="choix"> <h:commandLink action="unjoueur" onkeydown="choix_mode(event);"> <h outputText value="Choisir un joueur" ></h outputText></h:commandLink> <h:commandLink action="deuxjoueurs" onkeydown="40"> </h:commandLink> </h:form>
Je tourne en rond depuis un bon moment et je serais infiniment reconnaissant si quelqu'un pouvait me donner un coup de main...

Cordialement,

Altaïr

02/01/2009, 10h01
Sniper37

bonjour,
si tu peux utiliser richfaces, il existe le composant rich:hotKey qui peut te faciliter la tâche.
sinon plonge dans le forum javascript :) tu y trouvera des réponses.
02/01/2009, 12h33
altair_606

Salut Sniper et merci pour ta réponse.

En fait, avant de passer par JSF/Facelet j'utilisais Javascript pour gérer la navigation par clic et ça fonctionnait bien.
Puis on m'a dit qu'il fallait obligatoirement utiliser JSF/Facelet et son type de navigation passant dans le faces-config.xml.

Or si j'ai bien compris. En utilisant aussi bien RichFaces que le commandLink de Facelet, je dois au final passer par une fonction javascript qui renverra directement sur la page suivante avec "window.location.href = page2.xhtml" ?
Y-a-til un moyen de passer tout de même par la navifation inscrite dans faces-config.xml?

Merci beaucoup.
02/01/2009, 13h58
Nithril

Regarde quel tete a le HTML généré pour ton h:commandLink et essai de voir si tu ne peux pas simuler en Javascript le click sur le bouton.
02/01/2009, 14h22
Sniper37

Citation:

Envoyé par altair_606

Salut Sniper et merci pour ta réponse.

En fait, avant de passer par JSF/Facelet j'utilisais Javascript pour gérer la navigation par clic et ça fonctionnait bien.
Puis on m'a dit qu'il fallait obligatoirement utiliser JSF/Facelet et son type de navigation passant dans le faces-config.xml.

Or si j'ai bien compris. En utilisant aussi bien RichFaces que le commandLink de Facelet, je dois au final passer par une fonction javascript qui renverra directement sur la page suivante avec "window.location.href = page2.xhtml" ?
Y-a-til un moyen de passer tout de même par la navifation inscrite dans faces-config.xml?

Merci beaucoup.

je pensais que tu avais un problème pour la gestion de l'événement onkeydown,
pour la navigation par le faces-config, tu dois utiliser l'attribut action.

Bonjour Nithril et resalut Sniper.

Voici le code HTML généré par le commandLink:

Code:

1
2
3
<script type="text/javascript" language="Javascript">function dpf(f) {var adp = f.adp;if (adp != null) {for (var i = 0;i < adp.length;i++) {f.removeChild(adp[i]);}}};function apf(f, pvp) {var adp = new Array();f.adp = adp;var i = 0;for (k in pvp) {var p = document.createElement("input");p.type = "hidden";p.name = k;p.value = pvp[k];f.appendChild(p);adp[i++] = p;}};function jsfcljs(f, pvp, t) {apf(f, pvp);var ft = f.target;if (t) {f.target = t;}f.submit();f.target = ft;dpf(f);};
</script>
<a href="#" onkeydown="38" onclick="if(typeof jsfcljs == 'function'){jsfcljs(document.getElementById('choix'),{'choix:j_id10':'choix:j_id10'},'');}return false">Choisir un joueur</a><a href="#" onkeydown="40" onclick="if(typeof jsfcljs == 'function'){jsfcljs(document.getElementById('choix'),{'choix:j_id12':'choix:j_id12'},'');}return false"></a><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="j_id1" />

J'avoue Nithril que je ne sais pas comment simuler le click...

et voici le code complet de ma page:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
 
<ui:composition template="/template.xhtml"> 
 
	<ui:define name="titre">Jeu</ui:define>
 
	<ui:define name="javascript">
	<script type="text/javascript">
		function page1(){
			window.location.href = "jeux_unjoueur.xhtml";
		}	
</script>
	</ui:define>		
 
    <ui:define name="contenu">
   	 	<rich:hotKey key="up" handler="page1()"/>
	  	<h:outputText value="Choisir un ou deux joueurs" ></h:outputText>
	  	<h:form id="choix">
	  		<h:commandLink action="unjoueur" onkeydown="38"> <h:outputText value="Choisir un joueur" ></h:outputText></h:commandLink> 
	  		<h:commandLink action="deuxjoueurs" onkeydown="40"> </h:commandLink> 
	  	</h:form>
	</ui:define>
 
</ui:composition>
 
 
</html>

J'ai utilisé l'attribut "action" et lorsque je clique sur le lien tout marche bien. Mais la difficulté est lorsque je dois utiliser l'évènement clavier... Actuellement, vous pouvez remarquer que j'ai utilisé rich:hotkey et une fonction javascript pour passer sur la page suivante mais j'aimerais passer par le faces-config.xml (ce qui sera d'ailleurs obligatoire pour la navigation dynamique).

Encore merci pour le temps que vous m'accordez.

02/01/2009, 14h49
Sniper37

tu peux utiliser hotKey avec a4j:jsfunction
ou ajouter un a4j:support au commandLink..

N'etant pas sur mon env de dév je ne peux pas t'aider plus précisement mais en gros une solution pourrait être de faire en supposant que ton composant JSF est un id :
Code:

1 2 <a id="unIdJSF" href="#" onkeydown="38" onclick="if(typeof jsfcljs == 'function'){jsfcljs(document.getElementById('choix'),{'choix:j_id10':'choix:j_id10'},'');}return false">Choisir un joueur</a>
De faire :
Code:

1 2 document.getElementById("unIdJSF").onclick();

02/01/2009, 16h25
altair_606

:king: Merci, ça marche!

Alors pour ceux qui auraient le même problème, si vous utilisez un commandLink, faudra utiliser ça:

Code:

document.getElementById("unIdJSF").onclick();

Et si vous utilisez un commandButton, il faudra utiliser ça:

Code:

document.getElementById("unIdJSF").click();

Encore merci à vous.
02/01/2009, 18h15
Nithril

Mefies toi quand meme, tous les composants JSF ne permettent pas ce genre de manipulation.

Genre Richfaces semble utiliser l'event issue du click, ce qui pourrait poser soucis avec un appel direct. A valider...