Voor een webapplicatie was het nodig afhankelijke selecteerbare tabellen te kunnen maken lijkend op het volgende:
| Maak uw keuze: | |||
| Standaard keuze: | |||
| Naam | Omschrijving | Locatie | |
|---|---|---|---|
| 0 | Keuze 1 | dit is keuze 1 | locatie1 |
| alternatieve keuze: | |||
| 0 | Keuze 2 | dit is keuze 2 | locatie2 |
| 0 | Keuze 3 | dit is keuze 3 | locatie3 |
| 0 | Keuze 4 | dit is keuze 4 | locatie4 |
Hierbij moet standaard de mogelijkheid “keuze 1” geselecteerd worden.
Indien de gebruiker toch voor een alternatieve keuze gaat moet “keuze 1 “ uit gezet worden en één van de alternatieven keuzes aangezet worden. Je zou zeggen dat dit op te lossen is met een standaard radioButtongroup met daarin SelectItems. Echter, dit is niet mogelijk omdat selectItems alleen een value label en description kunnen bevatten. Indien het label gezet wordt zal de waarde niet getoond worden op het scherm en vice versa.
Het is dus niet mogelijk 3 kolomen met tekst: Keuze 2 (de value), dit is keuze 2 (het label) en locatie 2 (de description) te tonen op het scherm.
Ook is een work around met bijvoorbeeld een <af:foreach> tag niet mogelijk omdat output texten binnen radio button groups niet mogen en dus niet getoond worden. Een alternatief is twee tabellen en deze zo te stylen via CSS dat deze op een radiobutton Group lijkt. Om dit te bereiken maken we twee tabellen; een voor de standaard keuze met een keuze regel en een tabel met maximaal drie alternatieven keuzes:
<br />
<af:outputText value=”Standaard keuze:” id=”stdKeuze” />
<af:table value=”#{myBean.listDefault}” var=”row” rowBandingInterval=”0″
id=” standaardTable” rowSelection=”single” rows=”1″
contentDelivery=”immediate” autoHeightRows=”1″
selectionListener=”#{myBean.maakKeuze}”
partialTriggers=”::alternatiefTable” disableColumnReordering=”true”
binding=”#{myBean.standaardTable}” horizontalGridVisible=”false”
verticalGridVisible=”false” emptyText=”Nog geen resultaten.”>
<af:column sortable=”false” id=”c7″ width=”20″>
<af:selectBooleanRadio id=”sbr1″
binding=”#{myBean.selectedStandaard }” />
</af:column>
<af:column sortable=”false” headerText=”Naam” id=”c3″
width=”200″>
<af:outputText value=”#{row.naam}” id=”ot2″ />
</af:column>
<af:column sortable=”false” headerText=”Omschrijving”
id=”c2″ width=”60″>
<af:outputText value=”#{row.omschrijving} ” id=”ot1″ />
</af:column>
<af:column sortable=”false” headerText=”Locatie” id=”c1″>
<af:outputText value=”#{row.locatie}” id=”ot3″ />
</af:column>
</af:table>
<af:outputText value=”Alternatieve keuze:”
id=”andereVestigingen” />
<af:table value=”#{myBean.listOptions}” var=”row”
rowBandingInterval=”0″ id=”alternatiefTable”
rowSelection=”single” rows=”3″
contentDelivery=”immediate” autoHeightRows=”4″
selectionListener=”#{myBean.maakKeuze}”
partialTriggers=”::standaardTable”
binding=”#{myBean.alternatiefTable}”
horizontalGridVisible=”false”
verticalGridVisible=”false”
emptyText=”Nog geen resultaten”>
<af:column sortable=”false” id=”c8″ width=”20″>
<af:selectBooleanRadio id=”sbr2″
binding=”#{myBean.selectedAlternatief}” />
</af:column>
<af:column sortable=”false” id=”c6″ width=”200″>
<af:outputText value=”#{row.naam}” id=”ot4″ />
</af:column>
<af:column sortable=”false” id=”c5″ width=”60″>
<af:outputText value=”#{row.omschrijving}” id=”ot5″ />
</af:column>
<af:column sortable=”false” id=”c4″>
<af:outputText value=”#{row.locatie}” id=”ot6″ />
</af:column>
</af:table>
De UI componenten tabellen en radio buttons in deze tabellen zijn gebonden aan de backing bean (myBean) om bijvoorbeeld de selectie van de tabellen te wissen en de visuele selectie mogelijk te maken doormiddel van de radioButton:
private RichTable alternatiefTable;
private RichSelectBooleanRadio selectedStandaard;
private RichSelectBooleanRadio selectedAlternatief;
Deze worden opgehaald en geset via getters en setters.
De tabellen zijn verder uiteraard gekoppeld aan 2 lijsten met daarin de objecten die de keuzes representeren.
Om de selectie mogelijk te maken dient de tabel te tag selection=”single” te bevatten en een selectionListener te hebben.
De selectieListener in de backingbean ziet er als volgt uit:
final RowKeySet rks = selectionEvent.getAddedSet();
final String componentID = selectionEvent.getComponent().getId();
if (componentID.equalsIgnoreCase(standaardTable.getId())) {
//Visuele resetten (radio button in de tabel)
selectedAlternatief.setValue(null);
//Selected rows op de tabel resetten.
alternatiefTable.getSelectedRowKeys().clear();
} else if (componentID.equalsIgnoreCase(alternatiefTable.getId())) {
selectedStandaard.setValue(null);
standaardTable.getSelectedRowKeys().clear();
}
if (rks != null) {
final RichTable fowTree = (RichTable)selectionEvent.getComponent();
final Iterator iter = rks.iterator();
while (iter.hasNext()) {
fowTree.setRowKey(iter.next());
selectedKeuze = (Keuze)fowTree.getRowData();
//Radiobutton aanzetten.
if (componentID.equalsIgnoreCase(standaardTable.getId())) {
selectedStandaard.setValue(true);
} else {
selectedAlternatief.setValue(true);
}
}
}
}
Middels bovenstaande constructie is het mogelijk om 2 selecteerbare tabellen afhankelijk van elkaar te maken. Ook is het dus mogelijk dit component dusdanig te stijlen dat het toch op een radio buttongroup lijkt en ook zo funtioneert. Vergeet niet de partialTriggers aan te zetten zodat de componenten elkaar triggeren.
Leave a Reply