This component is used when selectOneRadio component takes the value "spread" for "layout" attribute.
This component is used when selectOneRadio component takes the value "spread" for "layout" attribute.This component is used when selectOneRadio component takes the value "spread" for "layout" attribute. Using this tag we can position the radio button anywhere in the document. Its "for" attribute is used to specify the id for selectOneRadio component and "index" attribute is used to specify which selectItem value is to be displayed. Here "0" value for index attribute is used to select the first selectItem value. This all can be understood from the following example:
Code Description :
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%> <f:view> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>t:radio example</title> <style type="text/css"> <!-- body{ background-color:#fff2f2; margin-top:30; } --> </style> </head> <body > <h:form><center> <t:selectOneRadio id="sor" value="SI" layout="spread" border="1" style="font-weight:bold; background-color:#99CCFF;"> <f:selectItem id="si1" itemLabel="Samsung" itemValue="sa" /> <f:selectItem id="si2" itemLabel="Link" itemValue="lo" /> <f:selectItem id="si3" itemLabel="Logitech" itemValue="lg" /> <f:selectItem id="si4" itemLabel="BenQ" itemValue="bq" /> </t:selectOneRadio> <t:panelGrid columns="1" width="20%" style="color:green;" cellpadding="0" cellspacing="5"> <t:panelGroup> <t:radio for="sor" index="0"></t:radio> <t:inputText /> </t:panelGroup> <f:verbatim><hr></f:verbatim> <t:panelGroup> <t:radio for="sor" index="1"></t:radio> <t:inputText /> </t:panelGroup> <f:verbatim><hr></f:verbatim> <t:panelGroup> <t:radio for="sor" index="2"></t:radio> <t:inputText /> </t:panelGroup> <f:verbatim><hr></f:verbatim> <t:panelGroup> <t:radio for="sor" index="3"></t:radio> <t:inputText /> </t:panelGroup> </t:panelGrid> </center></h:form> </body> </html> </f:view>
Rendered Output :
Html Source Code :
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>t:radio example</title> <style type="text/css"> <!-- body{ background-color:#fff2f2; margin-top:30; } --> </style> </head> <body > <form id="_idJsp0" name="_idJsp0" method="post" action="/tomahawk_tags/pages/radio.jsf" enctype="application/x-www-form-urlencoded"> <center> <table cellpadding="0" cellspacing="5" width="20%" style="color:green;"> <tbody> <tr> <td> <label> <input type="radio" name="_idJsp0:sor" value="sa" style="font-weight:bold; background-color:#99CCFF;" />  Samsung </label> <input id="_idJsp0:_idJsp4" name="_idJsp0:_idJsp4" type="text" value="" /> </td> </tr> <tr> <td><hr></td> </tr> <tr> <td> <label> <input type="radio" name="_idJsp0:sor" value="lo" style="font-weight:bold; background-color:#99CCFF;" />  Link </label> <input id="_idJsp0:_idJsp8" name="_idJsp0:_idJsp8" type="text" value="" /> </td> </tr> <tr> <td><hr></td> </tr> <tr> <td> <label> <input type="radio" name="_idJsp0:sor" value="lg" style="font-weight:bold; background-color:#99CCFF;" />  Logitech </label> <input id="_idJsp0:_idJsp12" name="_idJsp0:_idJsp12" type="text" value="" /> </td> </tr> <tr> <td><hr></td> </tr> <tr> <td> <label> <input type="radio" name="_idJsp0:sor" value="bq" style="font-weight:bold; background-color:#99CCFF;" />  BenQ </label> <input id="_idJsp0:_idJsp16" name="_idJsp0:_idJsp16" type="text" value="" /> </td> </tr> </tbody> </table> </center> <input type="hidden" name="_idJsp0_SUBMIT" value="1" /> <input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="rO0ABXVyABNbTGphdmEubGFuZy5PYmplY3Q7kM5Ynx BzKWwCAAB4cAAAAAN0AAMxODdwdAAQL3BhZ2VzL3JhZGlvLmpzcA==" /> </form> <!-- MYFACES JAVASCRIPT --> </body> </html> |
This tag contains attributes given below :
Ads