Image à la place d'un submit dans un tableau dynamique dans la jsp

Version imprimable

09/05/2007, 14h27
AnneB

Image à la place d'un submit dans un tableau dynamique dans la jsp

Bonjour!

Actuellement en train de bosser sur un projet en J2EE, j'utilise Struts 1.1 et Eclipse 3.2, avec JBoss 4.0.2.

Pour mettre en place de la gestion d'utilisateurs, je cherche à mettre en place l'affichage d'un tableau avec les colones suivantes :
- Login
- Id de Groupe d'utilisateur
- Edition
- Suppression

Dans les colonnes "Edition" et "Suppression", j'ai mis des checkbox pour le moment.

Mais en fait je souhaiterais mettre des images (un crayon et une poubelle)... et que lorsque je clique sur le crayon, j'ai un tableau qui apparait avec les données actuelles de l'utilisateur et pouvoir modifier les différents champs....

Comment puis-je faire cela svp?

Anne

Mon code actuel est le suivant :

page jsp :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div>
	<display:table name="sessionScope.listUtilisateurs" requestURI="adminUtilisateur.do" sort="external" defaultsort="1" pagesize="10" export="true">
		<display:column property="login" titleKey="administration.adminUsers.utilisateurs.text.TitreColLogin"/>
		<display:column property="password" titleKey="administration.adminUsers.utilisateurs.text.TitreColPassword"/>
		<display:column property="id_groupe" titleKey="administration.adminUsers.utilisateurs.text.TitreColId"/>
		<html:form action= "/adminUtilisateur">
		<display:column  titleKey="administration.adminUsers.utilisateurs.boxDelete">
			<html:checkbox property = "toDelete"/>
		</display:column>
		<display:column  titleKey="administration.adminUsers.utilisateurs.boxEdit">
			<html:checkbox property = "toEdit"/>
		</display:column>
		</html:form>
	</display:table>
</div>

actionForm :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
/**
 *
 */
package form;
 
import org.apache.struts.action.ActionForm;
 
/**
 * @author 
 *
 */
public class AdminUtilisateurForm extends ActionForm {
	private String login;
	private String password;
	private int id_groupe;
 
	private boolean toEdit;
	private boolean toDelete;
	/**
         * @return the toDelete
         */
	public boolean isToDelete() {
		return toDelete;
	}
	/**
         * @param toDelete the toDelete to set
         */
	public void setToDelete(boolean toDelete) {
		this.toDelete = toDelete;
	}
	/**
         * @return the toEdit
         */
	public boolean isToEdit() {
		return toEdit;
	}
	/**
         * @param toEdit the toEdit to set
         */
	public void setToEdit(boolean toEdit) {
		this.toEdit = toEdit;
	}
	/**
         * @return the id_groupe
         */
	public int getId_groupe() {
		return id_groupe;
	}
	/**
         * @param id_groupe the id_groupe to set
         */
	public void setId_groupe(int id_groupe) {
		this.id_groupe = id_groupe;
	}
	/**
         * @return the login
         */
	public String getLogin() {
		return login;
	}
	/**
         * @param login the login to set
         */
	public void setLogin(String login) {
		this.login = login;
	}
	/**
         * @return the password
         */
	public String getPassword() {
		return password;
	}
	/**
         * @param password the password to set
         */
	public void setPassword(String password) {
		this.password = password;
	}
 
}

Pour pouvoir récupérer la valeur des cases cochées mais ca ne sert à rien si j'arrive à faire une image à la place de la checkbox qui donne directement un lien pour faire une action (edit or delete).

J'ai essayé de faire ceci dans la jsp à la place de ce que j'ai mis au dessus :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<display:table name="sessionScope.listUtilisateurs" requestURI="adminUtilisateur.do" sort="external" defaultsort="1" pagesize="10" export="true">
		<display:column property="login" titleKey="administration.adminUsers.utilisateurs.text.TitreColLogin"/>
		<display:column property="password" titleKey="administration.adminUsers.utilisateurs.text.TitreColPassword"/>
		<display:column property="id_groupe" titleKey="administration.adminUsers.utilisateurs.text.TitreColId"/>
		<html:form action= "/adminUtilisateur">
		<display:column  titleKey="administration.adminUsers.utilisateurs.boxDelete">
			<html:image src="poubelle.gif" onclick="deleteUser()"/>
		</display:column>
		<display:column  titleKey="administration.adminUsers.utilisateurs.boxEdit">
			<html:checkbox property = "toEdit"/>
		</display:column>
		</html:form>
	</display:table>
</div>

et dans le fichier javascript :

Code:

1
2
3
4
5
<SCRIPT language="JavaScript">
 
function deleteUser() {
 alert("delete");
}</SCRIPT>

Juste une alerte pour dire de vérifier que on passse dans le javascript.

Eh ben rien ne se passe : et d'une quand j'affiche ma page je n'ai pas d'image à la place de ma checkbox mais un truc écrit ("envoyer"). Et de deux quand je clique sur ce truc "envoyer" bah pas d'alerte, aucune popup ne s'affiche.

Quelqu'un voit ou est le souci svp?

Anne

09/05/2007, 17h29
OButterlin

Bon, je ne connais pas le taglib <display:table> and Cie mais ça ressemble un peu à <layout:collection> de Struts-Layout (pour la fonctionnalité).

Il faudrait retirer ta balise <html:form> de là, le lien est déjà fait au niveau de <display:table>

A+

Merci pour la réponse :)

En fait j'avais essayé cela mais j'avais un truc qui corresondait pas à l'image demandé dans l'attribut src de la balise <html:image> ::?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<display:table name="sessionScope.listUsers" requestURI="adminUser.do" sort="external" defaultsort="1" pagesize="10" export="true">
		<display:column property="login" titleKey="administration.adminUsers.user.text.TitreColLogin"/>
		<display:column property="password" titleKey="administration.adminUsers.user.text.TitreColPassword"/>
		<display:column property="id_group" titleKey="administration.adminUsers.user.text.TitreColId"/>
		<html:form action= "/adminUser">
			<display:column  titleKey="administration.adminUsers.user.boxDelete">
				<html:image src="/WEB-INF/images/delete.jpg" property="toDelete" altKey="administration.adminUsers.user.delete" titleKey="administration.adminUsers.user.delete" styleClass="bouton" onclick="deleteUser()"/>
			</display:column>
			<display:column  titleKey="administration.adminUsers.user.boxEdit">
				<html:checkbox property = "toEdit"/>
			</display:column>
		</html:form>
	</display:table>

Il n'y a pas l'image affichée mais seulement un bandeau de couleur pâle avec écrit dessus ce que j'ai spécifié comme text dan sle message key de l'attribut altKey="administration.adminUsers.user.delete".
Apparemment c'est juste un pb de path car si je met une adresse genre :
src="http://kagome.lab.tkikuchi.net/Members/tkikuchi/courses/ip1/hand.gif"
ca me met l'image située à l'adresse en question.

Mais si je met src="<%=request.getContextPath()%>/WEB-INF/images/delete.jpg" bah j'ai une erreur à l'appel de la 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
15:56:11,099 ERROR [[jsp]] "Servlet.service()" pour la servlet jsp a lancé une exception
org.apache.jasper.JasperException: /jsp/adminUser.jsp(53,24) L'attribut pour %>" n'est pas correctement terminé
	at org.apache.jasper.compiler.DefaultErrorHandler.jspError(DefaultErrorHandler.java:40)
	at org.apache.jasper.compiler.ErrorDispatcher.dispatch(ErrorDispatcher.java:407)
	at org.apache.jasper.compiler.ErrorDispatcher.jspError(ErrorDispatcher.java:132)
	at org.apache.jasper.compiler.Parser.parseAttributeValue(Parser.java:242)
	at org.apache.jasper.compiler.Parser.parseAttribute(Parser.java:207)
	at org.apache.jasper.compiler.Parser.parseAttributes(Parser.java:150)
	at org.apache.jasper.compiler.Parser.parseCustomTag(Parser.java:1234)
	at org.apache.jasper.compiler.Parser.parseElements(Parser.java:1449)
	at org.apache.jasper.compiler.Parser.parseBody(Parser.java:1657)
	at org.apache.jasper.compiler.Parser.parseOptionalBody(Parser.java:1004)
	at org.apache.jasper.compiler.Parser.parseCustomTag(Parser.java:1272)
	at org.apache.jasper.compiler.Parser.parseElements(Parser.java:1449)
	at org.apache.jasper.compiler.Parser.parseBody(Parser.java:1657)
	at org.apache.jasper.compiler.Parser.parseOptionalBody(Parser.java:1004)
	at org.apache.jasper.compiler.Parser.parseCustomTag(Parser.java:1272)
	at org.apache.jasper.compiler.Parser.parseElements(Parser.java:1449)
	at org.apache.jasper.compiler.Parser.parseBody(Parser.java:1657)
 
....
 
etc

Je ne comprend pas comment je peux faire alors pour spécifier le chemin qui est celui de mon image.:cry: ??????

10/05/2007, 16h28
OButterlin
En prenant comme exemple cette structure de projet :

projet
...src
......package
.........Classe1.java

...WebContent
......pages
.........maPage1.jsp
.........images
............monImage1.gif
............monImage2.gif
......WEB-INF
.........classes
.........lib

il faudrait référencer ton image "monImage1.gif" dans ta page "maPage1.jsp" comme ceci :
Code:

1 2 <img src="<%=request.getContextPath()%>/pages/images/monImage1.gif"/>

Solution

Merci pour le conseil :) ca marche en effet.

J'ai doc mis :
- mon javascript à l'intérieur de la balise head:

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
33
34
35
36
37
38
<SCRIPT language="JavaScript">
 
function deleteUser() {
 alert("delete");
}
 
function editUser() {
 alert("edit");
}
 
function addUser() {
 alert("add");
 request.setAttribute("ACTIONADMINUSER", "addUser");
 document.forms[0].submit();
}
 
function changeUser() {
 alert("change");
}
 
function digits(event) {
	// Compatibility IE / Firefox
	if(!event&&window.event) {
		event=window.event;
	}
	// IE
	if(event.keyCode < 48 || event.keyCode > 57) {
		event.returnValue = false;
		event.cancelBubble = true;
	}
	// DOM
	if(event.which < 48 || event.which > 57) {
		event.preventDefault();
		event.stopPropagation();
	}
}
 
</SCRIPT>

mon display table avec mes boutons images :

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
33
34
35
36
37
38
39
40
41
42
43
44
<div>
	<display:table name="sessionScope.listUsers" requestURI="adminUser.do" sort="external" defaultsort="1" pagesize="10" export="true">
		<html:form action= "/adminUser">
			<display:column property="login" titleKey="administration.adminUsers.user.text.TitreColLogin"/>
			<display:column property="password" titleKey="administration.adminUsers.user.text.TitreColPassword"/>
			<display:column property="id_group" titleKey="administration.adminUsers.user.text.TitreColId"/>
			<display:column  titleKey="administration.adminUsers.user.boxDelete">
				<%--<html:image src="http://tbn0.google.com/images?q=tbn:k4RbhwpzlhJXYM:http://www.genealogie22.org/06_forum/images/poubelle.gif"
				 property="toDelete" altKey="administration.adminUsers.user.delete" titleKey="administration.adminUsers.user.deleteUser" styleClass="bouton" onclick="deleteUser()"/>--%>
				<img src="<%=request.getContextPath()%>/jsp/images/delete.jpg"
				property="toDelete" altKey="administration.adminUsers.user.delete" titleKey="administration.adminUsers.user.deleteUser" styleClass="bouton" onclick="deleteUser()"/>
			</display:column>
			<display:column  titleKey="administration.adminUsers.user.boxEdit">
				<%--<html:image src="http://tbn0.google.com/images?q=tbn:rJrPXDCngB3QfM:http://edu.kde.org/contrib/graphics/renaud/crayon.jpg"
				 property="toEdit" altKey="administration.adminUsers.user.edit" titleKey="administration.adminUsers.user.editUser" styleClass="bouton" onclick="editUser()"/>--%>
				<img src="<%=request.getContextPath()%>/jsp/images/edit.jpg"
				 property="toEdit" altKey="administration.adminUsers.user.edit" titleKey="administration.adminUsers.user.editUser" styleClass="bouton" onclick="editUser()"/>
			</display:column>
		</html:form>
	</display:table>
</div>
<br><br><br><br>
<div class="formulaire">
	<html:form action= "/adminUser" focus="login">
		<bean:message key="administration.adminUsers.user.text.TitreColLogin" />
		<html:text property="login"/>
		<bean:message key="administration.adminUsers.user.text.TitreColPassword" />
		<html:password property="password"/>
		<bean:message key="administration.adminUsers.user.text.TitreColId" />
		<html:text property="id_group" onkeypress="digits(event)"/>
		<html:button property="submit" altKey="administration.adminUsers.user.button.addUser" onclick="addUser()"/>
	</html:form>
</div>
<div class="formulaire">
	<html:form action= "/adminUser" focus="login">
		<bean:message key="administration.adminUsers.user.text.TitreColLogin" />
		<html:text property="login"/>
		<bean:message key="administration.adminUsers.user.text.TitreColPassword" />
		<html:password property="password"/>
		<bean:message key="administration.adminUsers.user.text.TitreColId" />
		<html:text property="id_group"/>
		<html:button property="submit" altKey="administration.adminUsers.user.button.changeUser" onclick="changeUser()"/>
	</html:form>
</div>

Sachant que mon archi de projet est la suivante :
projet
.....src
..........actions
...............AdminUserAction.java
..........forms
...............AdminUserForm.java
..........io
.....WebContent
..........jsp
...............adminUser.jsp
...............bla.jsp
...............blabla.jsp
...............images
....................delete.jpg
....................edit.jpg
..........META-INF
..........WEB-INF

Voilà..... si ca peut aider quelqu'un ;)

Et encore merci OButterlin :)

Anne