JSF (JavaServer Faces) - Spaltengestaltung: selectOneRadio Feat. selectItem

[Fools]

Ich habe indes jede Menge Zeit investiert, doch leider ohne ersehnten Erfolg.

Jetzt wende ich mich an Euch und ich hoffe Ihr könnt mir weiter helfen!


Folgender etwas vereinfachter Sachverhalt:

Folgender JSF-Code liegt mir vor:

<h:selectOneRadio>
  <f:selectItem itemValue="1" />
  <f:selectItem itemValue="2" />
  <f:selectItem itemValue="3" />
  <f:selectItem itemValue="4" />
</h:selectOneRadio>

Obiger JSF-Code rendered mir diesen HTML-Code:

<table>
  <tr>
    <td><input type="radio" name="j_idt8:CDMSP01" id="j_idt8:CDMSP01:0" value="1" /><label for="j_idt8:CDMSP01:0"></label></td>
    <td><input type="radio" name="j_idt8:CDMSP01" id="j_idt8:CDMSP01:0" value="1" /><label for="j_idt8:CDMSP01:0"></label></td>
    <td><input type="radio" name="j_idt8:CDMSP01" id="j_idt8:CDMSP01:0" value="1" /><label for="j_idt8:CDMSP01:0"></label></td>
    <td><input type="radio" name="j_idt8:CDMSP01" id="j_idt8:CDMSP01:0" value="1" /><label for="j_idt8:CDMSP01:0"></label></td>
  </tr>
</table>

Ich möchte doch nur die dritte Spalte innerhalb dieser Tabelle mit bestimmten style-Eigenschaften ansprechen/gestalten. Z. B. soll die dritte Spalte in einer anderen Farbe als die restlichen Spalten dieser Tabelle dargestellt werden.

Ich mein, das ist doch nicht zu viel verlangt?!


Kleines anschauliches Beispiel:
Imageshack - table1f.jpg



Da muss es doch irgendwie eine Möglichkeit geben die gerenderten Spalten nach seinen Bedürfnissen gestalten zu können. Ansonsten muss ich JSF im wahrsten Sinne des Wortes leider als graue Maus bezeichnen.


Noch eine Sache vorweg:

Ich habe auch folgendes bereits versucht, doch leider ohne Erfolg (mit div und CSS):

<h:selectOneRadio>
  <f:selectItem itemValue="1" />
  <f:selectItem itemValue="2" />
  <f:selectItem itemValue="3" />
  <div class="column-color">
    <f:selectItem itemValue="4" />
  </div>
</h:selectOneRadio>

Der entsprechende CSS-Code sah so aus:

div.column td {
   background-color: grey;
}

Daraufhin wurde folgender HTML-Code gerendered:

<div class="column-color"></div>
<table>
  <tr>
    <td><input type="radio" name="j_idt8:CDMSP01" id="j_idt8:CDMSP01:0" value="1" /><label for="j_idt8:CDMSP01:0"></label></td>
    <td><input type="radio" name="j_idt8:CDMSP01" id="j_idt8:CDMSP01:0" value="1" /><label for="j_idt8:CDMSP01:0"></label></td>
    <td><input type="radio" name="j_idt8:CDMSP01" id="j_idt8:CDMSP01:0" value="1" /><label for="j_idt8:CDMSP01:0"></label></td>
    <td><input type="radio" name="j_idt8:CDMSP01" id="j_idt8:CDMSP01:0" value="1" /><label for="j_idt8:CDMSP01:0"></label></td>
  </tr>
</table>

Wie Ihr sehen könnt, wurde mein div-HTML-Element einfach vor die gerendete Tabelle gestellt. Also greift sie natürlich auch nicht....



Ich brauche Hilfe!

 

[u2ix]

Hallo,

Wenn du dem ganzen Block eine Id gibst
[JAVA=1]
<h:selectOneRadio id="mySelect">
<f:selectItem itemValue="1" />
<f:selectItem itemValue="2" />
<f:selectItem itemValue="3" />
<f:selectItem itemValue="4" />
</h:selectOneRadio>[/code]
werden die Ids durchnummeriert:

<table id="mySelect">
	<tr>
<td>
<input type="radio" name="mySelect" id="mySelect:0" value="1" /><label for="mySelect:0"></label></td>
<td>
<input type="radio" name="mySelect" id="mySelect:1" value="2" /><label for="mySelect:1"></label></td>
<td>
<input type="radio" name="mySelect" id="mySelect:2" value="3" /><label for="mySelect:2"></label></td>
<td>
<input type="radio" name="mySelect" id="mySelect:3" value="4" /><label for="mySelect:3"></label></td>
	</tr>

</table>

Nun solltest du (theoretisch) das so in CSS ansprechen können:

#mySelect:2 {background-color: gray}

 

[Terminator]

Für solche Sachen progg ich mir nen eigenen Renderer der ein Zusatzattribute abfragt, also bsw:
<f:selectItem itemValue="2" styleClass="grey" />

und dann eben den Code ausgibt:
<td class="grey">...</td>

 

[Fools]

Hallo u2ix!

Der Ansatz mit der ID ist im ersten Moment vielversprechend...

Habe ich natürlich gleich mal ausprobiert. Doch leider ohne Erfolg! :noe:

Denn beim näheren Betrachten sind die generierten ID's an den <input>-Elementen gekoppelt und nicht an den <td>-Elementen. Und mein Ziel ist es doch, die Hintergrundfarbe der Spalte (Zelle) zu gestalten.


D. h. folgender Code bleibt logischerweise ohne Erfolg:

<table id="mySelect">
  <tr>
    <td>
      <input type="radio" id="mySelect:0" value="1" />
    </td>
    <td>
      <input type="radio" id="mySelect:1" value="2" />
    </td>
    <td>
      <input type="radio" id="mySelect:2" value="3" />
    </td>
    <td>
      <input type="radio" id="mySelect:3" value="4" />
    </td>
  </tr>
</table>

CSS-Code

#mySelect:2 {
   background-color: red;
}

Die ID-Attribute müssten sich eigentlich innerhalb der <td>-Elemente befinden, damit dein Lösungsansatz zum gewünschten Ergebnis führt.
Oder habe ich irgendwo einen Denkfehler?




Hallo Terminator!

Du programmierst dir also einen eigenen Renderer, der dann z. B. an der richtigen Stelle "<td class="grey">...</td>" ausgibt?!

Wie würde denn ein eigener Renderer für das o. g. Beispiel aussehen?

Ist das viel Programmieraufwand und wie programmiert man so einen eigenen Renderer?

Wäre schön, wenn du mir dies bzgl. einige Informationen geben könntest.



Ich freue mich natürlich weiterhin über Hilfestellungen.

 

[Terminator]

> Wie würde denn ein eigener Renderer für das o. g. Beispiel aussehen?

Must dir dazu eh den Renderer für diese Kompo suchen.
Also einfach mal bei Mojarra im renderkit Package die Sourcen angucken.



> Ist das viel Programmieraufwand und wie programmiert man so einen eigenen Renderer?

Nee proggen ist nicht viel, einfach den vorhandenen Source erweitern.
Aber den eigenen Renderer dann mit der Standard-Kompo verbinden ist etwas blöd.




So "muss" jetzt aber ab in den Urlaub

 

[JanHH]

Eigene JSF-Komponenten zu schreiben ist nicht soooo schwierig.. also das würde ich wohl auch machen in diesem Fall. Maximal ein Tag arbeit.

Es kann generell auch nicht schaden, das mal gemacht zu haben. Dann weiss man wies geht.

 

[Timg]

Ihr investiert also ein tag dafür um eine style="background-color:grey" hinzuzufügen? ich zweifel grade daran, ob JSF wirklich was für mich ist. dieser ganze Tag mist erinnert mich an uralt condfusion,