Discussion :

[reverse_engineer]

je voudrai savoir si on pourrait améliorer l apparence d'un datagrid ,colorer les lignes sélectionées ,barer les lignes supprimées ,Comment on pourrait agir je trouve vraiment pas comment faire !!!

[OButterlin]

Ça dépend de la version de struts-layout.

En 1.3, dans le fichier default.css, tu as les styles pour les datagrid, en particulier

/************************************
* Datagrid styles *
************************************/

TABLE.DATAGRID {
background-color : #336699;
}

TH.DATAGRID {
color : #FFFFFF;
background-color : #336699;
font-weight: bold;
font-family : verdana;
}

TABLE.DATAGRID TR TD {
font-family : verdana;
padding: 2px;
}

TR.DATAGRID {
background-color : #FFFFFF;
}

TR.DATAGRID2 {
background-color : #FFFFFF;
}

.DATAGRID_SEL {
background-color : #336699;
}

.DATAGRID_DEL {
text-decoration: line-through;
}

TR.DATAGRID_DEL TD INPUT {
text-decoration: line-through;
}

TABLE.DATAGRID TR TD INPUT {
width: 100%;
}

[reverse_engineer]

oui tu as raison ,mais je trouve des limitations comme par exemple colorer un case modifié :s j'ai pas trouvé sur le default.css ni sur le code de l'exemple demoserveurnews de struts layout !! y'a pas moyen de pousser encore !!

[OButterlin]

Pour ça, il faudrait modifier le fichier datagrid.js et changer le comportement... (par exemple, greffer un listner "onchange" sur les champs I/O)
Ça te tente ?

[reverse_engineer]

Je vais essayer de le faire ,sinon si je bloque je crierai surement au secours

[OButterlin]

Je vais essayer de le faire ,sinon si je bloque je crierai surement au secours

Pas de problème, je garde la discussion dans ma liste, au cas où

[reverse_engineer]

j'arrive vraiment pas à faire cela ,surtout que onchange n'est pas défini dans le tld de struts layout mm si je réalise l'évenement dans datagrid.js pourriez vous m'aider un peu plus

[OButterlin]

Il n'y a pas de lien entre la tld et datagrid.js.
La tld est là pour définir les options des balises struts-layout, datagrid.js est la bibliothèque javascript pour mettre en œuvre la fonctionnalité.
Dans la partie du code où il construit les champs d'I/O, tu rajoutes la définition du listner comme ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
...
function addDatagridCell(row, index, property, styleClass, type, values)
{
   ...
   input.setAttribute('onchange', 'this.style.background="green"');
   newCell.appendChild(input);
   return newCell;
}
...

Comme ça, lorsque tu changes la valeur d'un champ, il apparaîtra différemment... (jusqu'à la prochaine validation, bien sûr)

[reverse_engineer]

le raisonnement est logique,à chaque ajout d'une cell on insert le onchange mais ca n'a pas marché ,quand j'affiche le code source de la page finale il n y a pas de onchange .
j'ai essayé un peu de jouer sur les " ' sans aucun résultat

[OButterlin]

Peux-tu montrer le code de la page JSP ?

[reverse_engineer]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<layout:html>
 
<layout:form action="/myaction"  styleClass="FORM" width="80">
	<layout:row>
		<layout:datagrid property="datagrid" styleClass="DATAGRID"  model="datagrid" >
			<layout:datagridColumn title="nom"  property="nom" />			
 
			<layout:datagridColumn title="prenom"  property="prenom" />			
 
/layout:datagrid>
 
    <layout:column>
	<layout:button onclick="StrutsLayout.addDatagridLine('datagrid')">Add</layout:button>
	<layout:button onclick="StrutsLayout.setDatagridLineState('datagrid', 'removed')">Remove</layout:button>
	<layout:submit>Save</layout:submit>	
   </layout:column>
 
	</layout:row>
	</layout:form>

[OButterlin]

Peux-tu montrer le code de la page générée (sur le navigateur) ?

[reverse_engineer]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
 
<tr><td colspan="2"><table border="0"><tr>
		<script src="/config/datagrid.js"></script><td colspan="2" valign="top"><table cellspacing="0" cellpadding="0" border="0" align="CENTER" class="DATAGRID"><tr><td valign="top"><table cellspacing="1" cellpadding="1" border="0" width="100%" id="datagridJsId">
<script>strutsLayoutDatagridData['datagrid'] = new StrutsLayout.Datagrid('datagrid', 'datagridJsId', 'DATAGRID', 'DATAGRID2', true, true);
strutsLayoutDatagridData['datagrid'].addStyleClass('removed', 'DATAGRID_DEL');
strutsLayoutDatagridData['datagrid'].addStyleClass('selected', 'DATAGRID_SEL');
</script>
 
 
 
 
			<script>strutsLayoutDatagridData['datagrid'].addColumn('nom', '', 'text');</script>
 
 
 
 
 
 
			<script>strutsLayoutDatagridData['datagrid'].addColumn('prenom', '', 'text');</script>
 
 
 
 
 
 
 
 
 
 
 
 
		<tr><th class="DATAGRID" width="200">nom</th><th class="DATAGRID" width="200">prenom</th><th class="DATAGRID" width="200">nom</th></tr><tr onclick="strutsLayoutDatagridData['datagrid'].selectDatagridLine(this)" style="cursor:pointer;cursor:hand;" class="DATAGRID">
 
 
 
			<td><input type="text" name="datagrid.nom[0]" value="name1"></td>			
 
 
 
 
 
			<td><input type="text" name="datagrid.prenom[0]" value="prenom1"></td>

[OButterlin]

Tu as une balise <base> dans ta page ou le projet est à la racine de serveur d'application ?

<script src="/config/datagrid.js">

C'est bien ce fichier que tu as modifié ?

[reverse_engineer]

oui c'est bien lui ,et il le lit bien !!

[reverse_engineer]

juste une chose ,le adddatagridcell qui est dans datagrid.js ne concerne que les lignes ajouté sur le champs.Donc cela ne peut pas fonctionner
Essaye d'éliminer cette méthode ,on aura toujours un affichage,les champs sont construits dans les .class au sein du jar struts-layout1.3.jar

Mais surement ya une méthode qui boucle sur tous les input d une page et leur greffe le listner onchange !!!!!