Chaging the layout (pageDirection/lineDirection) of the HtmlSelectOneRadio

[Silvester Stalin Bruno]

Hi,

I have a jsf page, where i include radio buttons as shown below to display US states

    
<h:selectOneRadio id="convtype" name="convtype" value="#{bean.usState}" layout="pageDirection" required="true">
     <f:selectItems value="#{bean.usStatesList}" />
</h:selectOneMenu>

As the number of states is "50", i cannot use the layout pageDirection/lineDirection. In either case, the page becomes extended.

Instead, i want to create a custom radion button component, in which i get the user input to show the buttons as a matrix (a x b), where a is number of rows
and b is numer of columns. So, i can display the US states as a 5 x 10 matrix. Here, US states is an example. I want to create a reusable component solving my problem.

What's the best way to create a custom component? I am a new bee to JSF.
1. Overriding HtmlSelectOneRadio (or)
2. Creating a new Custom component, overriding UIComponenBase - here i am not sure if i can include event listeners to the radio buttons.

Please advise.

Thanks in advance.
Stalin

[Liangfeng Ren]

Hi,

MyFace does have a solution for this. Try to use its tomahawk tag <t:selectOneRadio> by setting layout property as "spread", then use <t:panelGrid> to layout the items.
Based on your requirement, the code can be as follows:

<t:selectOneRadio id="convtype" value="="#{bean.usState}" layout="spread" required="true">
	<f:selectItems value="#{bean.usStatesList}" />
 </t:selectOneRadio>
  
  <t:panelGrid columns="10">
  
	<t:radio index="0" for="convtype" />
	<t:radio index="1" for="convtype" />
	..
	..
	
	<t:radio index="49" for="convtype" />
	
  </t:panelGrid>