Forums : Xul, Xbl, JS...

Salut,

Ayant rencontré un cas presque identique, je vais essayer de t'expliquer comment j'ai traité le problème. Donc j'ai une source générée par un script PHP/mySQL. Dans mon cas c'est une liste de contacts et j'avais besoin de visualiser l'etat (actif,inactif,...) de ces contacts. Donc j'ai une entrée <CONTACT:etat></CONTACT:etat> dans mon RDF. Dans ton cas tu peux faire un truc du genre: si la date est dépassée l'etat est à 1 sinon il est à 0. Ca, tu le fais au moment de la génération de ton RDF (avec PHP).

<RDF:Description RDF:about="http://wpsconsole/200003/dubom">
  <CONTACT:login>dubom</CONTACT:login>
  <CONTACT:nom>Dubois</CONTACT:nom>
  <CONTACT:prenom>Maurice</CONTACT:prenom>
  <CONTACT:etat NC:parseType="Integer">1</CONTACT:etat>
</RDF:Description>

<RDF:Description RDF:about="http://wpsconsole/200003/essat">
  <CONTACT:login>essat</CONTACT:login>
  <CONTACT:nom>essai</CONTACT:nom>
  <CONTACT:prenom>test</CONTACT:prenom>
  <CONTACT:etat NC:parseType="Integer">2</CONTACT:etat>
</RDF:Description>

<RDF:Description RDF:about="http://wpsconsole/200003/racim">
  <CONTACT:login>racim</CONTACT:login>
  <CONTACT:nom>Racis</CONTACT:nom>
  <CONTACT:prenom>Martin</CONTACT:prenom>
  <CONTACT:etat NC:parseType="Integer">3</CONTACT:etat>
</RDF:Description>

Ensuite dans ton XUL tu crées un Tree via un template qui ressemble a celui-ci.

	<tree id="usersList"
		      flex="1"
		      datasources="http://taSource.php" 
		      onselect="setText(event)"
		      ondblclick="modifierContact()"
		      ref="http://wpsconsole/all">
		<treecols>
			<treecol id="nom" 
				 label="Nom" 
				 primary="true"
				 class="feedsCol"
				 flex="1"/>
			<splitter class="tree-splitter"/>
			<treecol id="prenom" 
				 label="Prénom"
				 class="feedsCol"
				 flex="1"/>
			<splitter class="tree-splitter"/>
			<treecol id="login" 
				 label="Login"
				 class="feedsCol"
				 hidden="true"
				 flex="1"/>
			<treecol id="sapID" 
				 label="sapID"
				 class="feedsCol"
				 hidden="true"
				 flex="1"/>	
		</treecols>
		<template>
			<rule>
				<conditions>
					<content uri="?uri"/>
					<member container="?uri" child="?contact"/>
					<triple subject="?contact"
						predicate="http://wpsconsole/rdf#nom"
						object="?nom"/>
					<triple subject="?contact"
						predicate="http://wpsconsole/rdf#prenom"
						object="?prenom"/>
					<triple subject="?contact"
						predicate="http://wpsconsole/rdf#login"
						object="?login"/>
					<triple subject="?contact"
						predicate="http://wpsconsole/rdf#etat"
						object="?etat"/>
				</conditions>
				<action>
					<treechildren flex="1">
						<treeitem uri="?contact">
							<treerow properties="etatLigne-?etat">
								<treecell label="?nom"
									  properties="etatCellule-?etat etatCelluleNom-?etat etatCelluleIcon-?etat"/>
								<treecell label="?prenom"
									  properties="etatCellule-?etat"/>
								<treecell label="?login"
									  properties="etatCellule-?etat"/>
							</treerow>
						</treeitem>
					</treechildren>
				</action>
			</rule>
		</template>
	</tree>

Porte bien ton attention sur la regle et notament sur les treecell. Tu y trouves un attribut properties="etatCellule-?etat". En fait a chaque passage (pour chaque ligne de ton arbre) on affect une psedo class (dans mon cas etatCellule-?etat) qui sera un coup etatCellule-1 un autre etatCellule-2, etc...

Il te reste à faire une CSS comme celle-ci pour styliser les lignes et/ou cellules de ton arbre:

treechildren::-moz-tree-cell-text(etatCellule-0)
{
	text-decoration:line-through;
	color:#ccc;
}
treechildren::-moz-tree-cell-text(etatCelluleNom-0)
{
	margin-left:16px;
}
treechildren::-moz-tree-cell-text(etatCellule-1)
{
	color:#bbb;
	font-weight: bold;
}
treechildren::-moz-tree-cell-text(etatCellule-2)
{
	color:#bbb;
	font-style:italic;
}
treechildren::-moz-tree-image(societeIcon-0)
{
	list-style-image:url(images/contacts.png);
	margin-right:5px;
}
treechildren::-moz-tree-image(societeIcon-1)
{
	list-style-image:url(images/contactsAttente.gif);
	margin-right:5px;
}

treechildren::-moz-tree-image(etatCelluleIcon-3)
{
	list-style-image:url(images/actifuser.png);
}
treechildren::-moz-tree-image(etatCelluleIcon-2)
{
	list-style-image:url(images/inactifuser.png);
}
treechildren::-moz-tree-image(etatCelluleIcon-1)
{
	list-style-image:url(images/userAttente.gif);
}

Voila, je sais pas si j'ai été très clair mais tu peux toujours relire la partie template du tuto pour plus d'aide sur les regles.

Fabrice