But the problem is all the radio buttons inside each cell (inside each and tag) fall under different radio button groups, because each radio button's name attribute is generated uniquely by the JSF container.In HTML, particularly since HTML5 wherein the world is made more aware of semantic HTML, tables are discouraged for other purposes than tabular data. The important point to note is, if we use h:selectOneRadio and f:selectItems or f:selectItem inside dataTable, the radio buttons render properly that is, when the page renders, the page displays a table that contains the right radio buttons.
As a result, individual radio buttons receive different names and create separate radio groups (with only one radio) in each group. When each column is rendered, the name generated by the JSF containers differs for each cell. We cannot put this radio button inside a JSF dataTable tag and span the radio button group behavior across rows or across columns because h:selectOneRadio cannot contain the h:column element, which represents a column inside an h:dataTable. All the radio buttons behave as if they were residing under a radio button group. Note that itemValue property's value can also be taken from the backing bean as value-binding instead of hard-coding.īoth of the two syntaxes mandate that the f:selectItems tag or the f:selectItem tag (which are actually responsible for individual radio items) must be nested inside the h:selectOneRadio tag. The following JSF page fragment shows the usage of the h:selectOneRadio tag: Īlternatively, instead of using f:selectItems, you can use multiple f:selectItems: Let's analyze why standard JSF tags are difficult to implement in our two scenarios. Radio buttons grouped within a row of an HTML table The problem with standard JSF tags Radio buttons grouped within a column of an HTML table Figure 2. Again, achieving this functionality using standard JSF tags without JavaScript can prove quite difficult.įigure 1.
As shown in Figure 2, we group the radio buttons within a single row. Say we need a feedback application where a manager rates different employees by selecting a single radio button from different column headers such as excellent or good. Our second scenario handles just the opposite: we must group the radio buttons inside a row.
The first scenario deals with grouping the radio button within a column.This simple functionality is pretty difficult to achieve using JSF technology without JavaScript or third-party custom tag libraries. In addition, all the radio buttons inside that particular column of the table should behave like a radio group (such as when one is selected, the others are unselected). Here, when the page is submitted to the server side, our intention is to receive the row index selected in the table.
Our first scenario is often employed while using a single selection of a row in a table ( dataTable).Let's consider two radio button scenarios for a JSF application: A radio button is generally required when we need to select only one option from a set of options. One such scenario arises while embedding a radio button inside the JSF dataTable tag. In addition, implementing some special behaviors sometimes requires JavaScript. Thus, a JSF developer must often write complex logic and the corresponding Java class in each page. Though JSF provides standard user interface components, sometimes the standard tags supplied by JSF are insufficient for easily representing complex user interface controls or certain behaviors of some GUI controls. One of the major advantages of JSF is its flexible component architecture. JavaServer Faces is a server-side user interface component framework for Java-based Web applications and is now officially part of Java Platform, Enterprise Edition 5.