[Struts-Layout][layout:date] problème d'affichage

Version imprimable

Bonjour,

Voila ça fait quasimment une journée que je bataille avec mon affichage.

Dans mon form j'ai :
public class SearchForm extends ActionForm

Code:

1
2
3
4
5
private String dateCreationB;
private String dateCreationE;
private String approvalDateB;
private String approvalDateE;

Les getters et setters sont auto générés par Eclipse.

Ma page JSP ressemble à ceci:

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
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<%@ taglib uri="http://struts.apache.org/tags-nested" prefix="nested"%>
<%@ taglib uri="/WEB-INF/struts-layout.tld" prefix="layout"%>
<%@page import="com.sogeti.operability.conf.Constant"%>
<html:html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<layout:skin includeScript="true"/>
<script type="text/javascript" src="/js/operability.js"></script>
<link rel="stylesheet" href="/css/operability.css" type="text/css"></link>
<title><bean:message key="projectdetails.page.title"/></title>
<script>
....
</script>
</head>
<body onload="load();">
<%@ include file="_header.jsp" %><br>
<%@ include file="_menu.jsp"%>
<div><h2><bean:message key="projectdetails.search" /></h2></div>

<logic:present name="<%=Constant.RESULT_ACTION_MESSAGE%>" scope="request">
	<bean:message bundle="language_bundle" key="<%=(String)request.getAttribute(Constant.RESULT_ACTION_MESSAGE)%>"/>
</logic:present>


<layout:form action="/SearchManager" method="post" enctype="multipart/form-data">
	
	<html:hidden property="idRecord"/>
	<br/>
	<table class="onglet"">
		<tr>
			<td><html:link href="javascript:setVisible(1)">
				<bean:message key="search.menu.project" />
			</html:link></td>

			<td><html:link href="javascript:setVisible(2)">
				<bean:message key="search.menu.requirement" />
			</html:link></td>

			<td><html:link href="javascript:setVisible(3)">
				<bean:message key="search.menu.comment" />
			</html:link></td>

			<td><html:link href="javascript:setVisible(4)">
				<bean:message key="search.menu.approval" />
			</html:link></td>

		</tr>
	</table>

	<br/>
	<!-- Partie New -->
	<div id="tab1"
		style="visibility: visible; position: absolute; top: 320px; left: 10px; z-index: 5;">
			<table>
			<layout:row>
				<layout:column>
					<layout:text property="recordsReference" size="10" maxlength="50" key="projectdetails.records"/>

*****************************************************
					<layout:date key="search.dateCreationB" property="dateCreationB" mode="E,E,E" patternKey="dd/MM/yy" />
					<layout:date key="search.dateCreationE" property="dateCreationE" mode="E,E,E" patternKey="dd/MM/yy" />
					<layout:date key="search.approvalDateB" property="approvalDateB" mode="E,E,E" patternKey="dd/MM/yy" />
					<layout:date key="search.approvalDateE" property="approvalDateE" mode="E,E,E" patternKey="dd/MM/yy" />


******************************************************

Quand la ligne en gros caractère est là, alors j'ai le calendrier picker de la date (qui n'arrive pas à valuer la case du form d'ailleurs, même à l'affichage :piou:), mon affichage a une teinte pastel et mes keys de layout sont là (j'arrive à les sélectionner, griser) mais ils sont comme écrits en blanc.

Sinon si j'ôte le script=true, j'ai tout pareil sauf que je n'ai plus le calendrier(même si je vois les boutons avec le petit 4).

Si j'ote toute la ligne alors mes affichages des keys sont normaux et mon écran retrouve une teinte normale, et j'ai les petits boutons sans le calendrier.

J'avoue que je ne comprend pas. Pourriez vous m'aider?:help:

Par défaut, Struts-Layout applique le style défini dans le fichier default.css du répertoire config.
Par exemple, pour le calendrier, il utilise ceci par défaut :
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 /** * Calendar classes */ TD.CALENDRIER { background-color: #C2C2C2; font-weight: bold; text-align: center; font-size: 10px; } A.CALENDRIER { text-decoration: none; color: #000000; } .CALENDARBORDER { background-color: #000000; } .CALENDARTITLE { background-color: #336699; //#C9252C; } .CALENDARWEEK { background-color: #FFFFFF; } .CALENDARWEEKEND { background-color: #FFF4E5; } .CALENDARSELECTED { background-color: #FF8F01; }
et même ceci, pour les jours du calendrier qui sont "cliquables" :
Code:

1 2 3 4 5 6 7 8 /************ * link * ***********/ A {color : #D1D3FD; } A:Visited {color : #D1D3FD; } A:Active {color : #D1D3FD; } A:Hover {color : #FFFFFF; text-decoration : none; }
Si ça ne te convient pas, tu peux créer ton propre fichier css.
Je te conseille de copier le default.css dans un autre répertoire en le renommant puis de le modifier selon tes besoins.

Pour qu'il soit pris en compte, il faut créer un fichier Struts-Layout_default.properties sous WEB-INF/classes, comme indiqué ici.
(Tu peux éventuellement récupérer le fichier Struts-Layout.properties présent dans le répertoire src/lib de Struts-Layout et le copier sous WEB-INF/classes en le renommant Struts-Layout_default.properties.)

Tu y précises donc le nom du fichier css dans la clé skin et le répertoire où se trouve le css dans la clé directory.css par exemple comme ceci :
Code:

1 2 3 skin=nomDeTonFichier.css directory.css=nomDeTonRepertoireDesStyles
Personnellement, je me suis inspirée du default.css de l'appli de demo de Struts-Layout et j'ai donc mis ceci :
Code:

1 2 3 4 5 6 7 8 /************ * link * ***********/ A {color : #6489A0; text-decoration : none;} A:Visited {color : #6489A0; text-decoration : none;} A:Active {color : #6489A0; text-decoration : none;} A:Hover {color : #CC0000; text-decoration : underline; }
Ainsi, on change la couleur des jours du calendrier.

Et pour modifier la couleur de lun, mar, mer, ..., tu peux ajouter l'attribut color dans TD.CALENDRIER par exemple comme ceci :
Code:

1 2 3 4 5 6 7 TD.CALENDRIER { color: #336699; background-color: #C2C2C2; font-weight: bold; text-align: center; font-size: 10px; }
Petite remarque : plutôt que de coder <layout:skin javascript="true"/> dans la balise head, tu peux remplacer le tag html:html par le tag layout:html.;)

16/11/2007, 09h43
nysaken

merci pour toutes ces réponses c_nvy :D
Je vais tester de ce pas et je reposterai pour dire si mon souci d'affichage est résolu :)

grâce à tes judicieux conseils mon affichage se porte bcp mieux :D

Maintenant mes labels sonts présents et j'arrive à afficher le calendrier sans me trucider toute ma mise en page.

Il ne me reste qu'un unique souci: quand je clique sur une des cases le calendrier refuse de valuer le layoutdate correspondant. Le calendrier ne disparait pas non plus (je suis obligé de le tuer à la petite croix en haut à droite).

Pour arriver à cela, j'ai copié:
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 /** * Calendar classes */ TD.CALENDRIER { background-color: #C2C2C2; font-weight: bold; text-align: center; font-size: 10px; } A.CALENDRIER { text-decoration: none; color: #000000; } .CALENDARBORDER { background-color: #000000; } .CALENDARTITLE { background-color: #336699; //#C9252C; } .CALENDARWEEK { background-color: #FFFFFF; } .CALENDARWEEKEND { background-color: #FFF4E5; } .CALENDARSELECTED { background-color: #FF8F01; } /************ * link * ***********/ A {color : #6489A0; text-decoration : none;} A:Visited {color : #6489A0; text-decoration : none;} A:Active {color : #6489A0; text-decoration : none;} A:Hover {color : #CC0000; text-decoration : underline; }
à la fin de mon css.

Mon css s'appelle operability.css et se trouve dans [Nom de projet]/WebContent/css

Donc j'ai rajouté dans le Struts-Layout.properties:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 #skin name. Default is the first parameter or the file name (ie Struts-Layout_blue.properties -> blue.css) skin = operability.css # web directory in which are located the images directory.images = images # web directory in which are located the javascrips directory.config = config # web directory in which are located the css files. Default is directory.config directory.css =css
j'ai essayé avec css, .css, WebContent/cass des fois que mais non ça ne semblerait pas venir du chemin.

Donc je reste perplexe devant la non valuation de mes layout:date

P.S. les couleurs que tu as choisies pour le calendrier me semblaient nickel donc je me suis permis de les garder :D

oui je ne coprend pas non plus pourquoi le calendrier ne se ferme pas alors qu'on voit bien que le carré date est sélectionné :arf:

Si les couleurs sur le calendrier ont été prises en compte, cela veut dire que le paramétrage défini dans le fichier Struts-Layout_default.properties est bon.

Après avoir cliqué sur un jour du calendrier, si tu fais Affichage -> Source sur la jsp, as-tu quelque chose qui ressemble à ceci pour le calendrier :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <th valign="top"><span>Date</span></th> <td valign="top" class="null" style=""> <input type="text" name="date" size="10" value="05/11/07"> <a href="javascript://" onclick="showCalendar(2007,11,5,'dd/MM/yy','dateForm','date',event,2005,2007);"> <img alt="Sélectionner une date" border="0" src="/TonProjet/images/calendar.gif"> </a> <div id="slcalcod" style="position:absolute; left:100px; top:100px; z-index:10; visibility:hidden;"> <script> printCalendar("dim.","lun.","mar.","mer.","jeu.","ven.","sam.",2,"janv.","févr.","mars","avr.","mai","juin","juil.","août","sept.","oct.","nov.","déc.",5,11,2007); </script> </div> <img name="daterequired" src="/TonProjet/images/clearpixel.gif" alt="required"> </td> <td>  </td>
Si l'attribut value est renseigné dans le tag input, peut-être est-ce un simple problème d'affichage.

Dans ce cas, essaie d'ajouter un style. Dans default.css, il y en a un qui est défini :
Code:

1 2 3 4 5 6 7 8 9 10 11 /****************************** * class used to display * * the input field labels * *****************************/ P.LABEL { color : #FFFFFF; font-weight : bold; } TH.LABEL { text-align:right; }
Essaie donc d'ajouter ceci dans ton fichier css et d'ajouter l'attribut styleClass="LABEL" dans les tags layout:date pour voir.

Mais bon, c'est bizarre que le calendrier ne se referme pas automatiquement après avoir cliqué sur un jour.:?
As-tu bien défini getters et setters sur chacun des champs date dans ton ActionForm ?
Peux-tu vérifier s'il y a un message d'erreur dans la console ou la log du serveur ?

voici mon debut de code ma page JSP:

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
 
<form name="SearchForm" method="post" action="/SearchManager.do" enctype="multipart/form-data">
<table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top"><table cellspacing="1" cellpadding="1" border="0" width="100%">
<tr><td><table width="100%"	border="0">
<tr><td colspan="2">&nbsp;</td></tr>
 
 
	<input type="hidden" name="idRecord" value="">
	<br/>
	<table class="onglet"">
		<tr>
			<td><a href="javascript:setVisible(1)">Details du projet</a></td>
 
			<td><a href="javascript:setVisible(2)">Exigences</a></td>
 
			<td><a href="javascript:setVisible(3)">Commentaires</a></td>
 
			<td><a href="javascript:setVisible(4)">Approbation</a></td>
 
		</tr>
	</table>
 
	<br/>
	<!-- Partie New -->
	<div id="tab1"
		style="visibility: visible; position: absolute; top: 320px; left: 10px; z-index: 5;">
			<table>
			<tr><td colspan="2"><table border="0"><tr>
				<td colspan="2"><table border="0" cellspacing="0" cellpadding="0">
					<tr><th valign="top" class="null"><span class="null">Reference&nbsp;de&nbsp;Record</span></th><td valign="top" class="null" style=""><input type="text" name="recordsReference" maxlength="50" size="10" value=""><img name="recordsReferencerequired" src="/images/clearpixel.gif"></td></tr>
 
					<tr><th valign="top" class="LABEL"><span class="LABEL">Debut&nbsp;de&nbsp;Date&nbsp;de&nbsp;Creation</span></th><td valign="top" class="LABEL" style=""><input type="text" name="dateCreationB" value="" class="LABEL"><a href="javascript://" onclick="showCalendar(2007,11,19,'dd/MM/yy','SearchForm','dateCreationB',event,2007,2009);"><img alt="pick up a date" border="0" src="/images/calendar.gif"></a><div id="slcalcod" style="position:absolute; left:100px; top:100px; z-index:10; visibility:hidden;"><script>printCalendar("dim.","lun.","mar.","mer.","jeu.","ven.","sam.",2,"janv.","févr.","mars","avr.","mai","juin","juil.","août","sept.","oct.","nov.","déc.",19,11,2007);</script></div><img name="dateCreationBrequired" src="/images/clearpixel.gif"></td></tr>

mes déclarations dans le bean de mon formulaire de formulaire de recherche (SearchForm) sont:

Code:

1
2
3
4
5
 
private String dateCreationB;
private String dateCreationE;
private String approvalDateB;
private String approvalDateE;

il y a bien tous les getters et setters associés

il n'y a aucun message d'erreur dans la console.

Quand j'ai ajouté ce que tu avais demandé dans le css avec le label, cela n'a rien changé:cry:

Je ne comprend pas non plus pourquoi le calendrier ne disparait pas alors qu'on voit bien que la case du calendrier est sélectionnée :?

19/11/2007, 21h11
c_nvy

Ben là, désolée, mais je suis à court d'idées.:oops:

Tu ne pourrais pas faire un test avec une jsp simple qui contient un seul tag layout:date ?
22/11/2007, 18h04
nysaken

à priori ça provenait du layout qui générait plein de table/tr/td

et en ajoutant des compléments manuellment en table/tr/td j'ai de nouveau ma date.

Mais bon ça fait crier mon eclipse quand il voit la tête de la jsp :(

Merci de ton aide c_nvy tu m'as bien mis sur la voie avec la génération simple de layout:date :D

Et merci encore pour tous les postes qui m'ont super aidé(et qui je ne doute pas continueront) dont à plus de 80 % tu as répondu au fil des diverses discutions : t'es la reine :king:
22/11/2007, 20h30
c_nvy

Citation:

Envoyé par nysaken

à priori ça provenait du layout qui générait plein de table/tr/td

Dans ce cas, fais un test en ajoutant l'attribut layout="false" dans les tags layout pour lesquels tu ne veux pas qu'il génére les balises table, tr et td.

Citation:

Envoyé par nysaken

t'es la reine :king:

Quand même pas.:oops:
Mais merci quand même pour le compliment.:D