I tried apply rendered in order to check for if else conditional in JSF. (ref: Conditionally displaying JSF components)
This part is my JSF index.html
<p:commandButton value="Update Hidden Label" action="#{carForm.updateBool}" />
<h:outputText value="Text A" />
<h:outputText value=" Text B" rendered="#{carForm.booleanValue}" />
This is my java class
private boolean booleanValue;
public boolean isBooleanValue() {
return booleanValue;
}
public void setBooleanValue(final boolean booleanValue) {
this.booleanValue = booleanValue;
}
public void updateBool() {
booleanValue = true;
}
when I tried click on "Update Hidden Label", it would update the booleanValue in java class to true, however in index.html page "Text B" is still not appear yet.
Also you need to update page fragment with <h:outputText value=" Text B" rendered="#{carForm.booleanValue}" />
You can use <p:panel id="textPanel"></p:panel> and put your code there.
And add update parameter to p:commandButton with value textPanel, like this update="textPanel".
<p:panel id="textPanel">
<p:commandButton value="Update Hidden Label" action="#{carForm.updateBool}" update="textPanel" />
<h:outputText value="Text A" />
<h:outputText value=" Text B" rendered="#{carForm.booleanValue}" />
</p:panel>
Related
i have a p:selectOneMenu filled with objects from database.When page is looaded first,
the default item of selectOneMenu must be "please select one" in string type( other items of selectOneMenu are in object type.) When page is loaded first, one data in object type from database is visible as default.I don't want this.how to set default item like "Please select one" in p:selectOneMenu with object from database?
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
template="layout.xhtml">
<ui:define name="pageContent">
<h:form id="silYapilandirmaForm" prependId="true">
<p:panel id="silYapilandirmaPanel" header="#{etiketler.silYapilandirma}" collapsed="true" toggleable="true" >
<p:tabView id="tabView" dynamic="false" activeIndex="0">
<p:tab title="#{etiketler.silIslemleri}" id="silIslemleriTab">
<p:outputPanel id="silIslemleriPanel">
<h:panelGrid id="eshsSecPanelGrid" columns="3" >
<h:outputText value="#{etiketler.eshsSertifika}:*" />
<p:selectOneMenu id="silYapilandirmaSelect" value="#{silYapilandirmaView.seciliEshsSertifika}" effect="fade" effectDuration="100" style="width: 205px" converter="#{entityConverter}">
<f:selectItem itemLabel="Please select one" itemValue="#{null}"/>
<f:selectItems value="#{silYapilandirmaView.eshsSertifikaList}" var="eshsSertifika"
itemLabel="#{eshsSertifika.sertifikaKodAdi}" itemValue="#{eshsSertifika}" />
<p:ajax process="#this" event="change" update="eshsSecPanelGrid,silIslemleriPanel" listener="#{silYapilandirmaView.addListener()}" />
</p:selectOneMenu>
<h:outputText value=""/>
<h:outputText value="#{etiketler.eshsSertifika}:" />
<h:inputText value="#{silYapilandirmaView.seciliEshsSertifika.sertifikaKodAdi}" disabled="true" size="30"/>
<h:outputText value=""/>
<h:outputText value="#{etiketler.silUretimBaslangicSaati}:* " />
<p:inputMask id="silUretimBaslangicSaatiInputMask" value="#{silYapilandirmaView.seciliEshsSertifika.silUretimBaslangicSaati}" mask="99:99:99" size="30" />
<p:message for="silUretimBaslangicSaatiInputMask" display="text" />
<h:outputText value="#{etiketler.silUretimBaslangicPeriyodu}:* " />
<p:inputMask maxlength="4" mask="99?99" id="periyotInputMask" size="30" value="#{silYapilandirmaView.seciliEshsSertifika.silUretimPeriyodu}" >
</p:inputMask>
<p:message for="periyotInputMask" display="text" />
</h:panelGrid>
</p:outputPanel>
</p:tab>
</p:tabView>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
i have addListener method in p:ajax in p:selectOneMenu.This method is working in this way;
you are selecting one object from selectOneMenu and this object is put in the last index of the list filling selectOneMenu ,the object in the last index of the list is put in the index of selected object.I mean you are selecting an object and the index of this object in the list is 2.In total there are five objects in the list ,let we say.selected object whose index is 2 is put in index 4 of the list.The object in index 4 of the list is put in index 2 of the list.I am sorry for my english.The aim of this addListener method,selectOneMenu displays the last item of the list as selected always.Whichever object you select,IT DISPLAYS THE LAST ITEM OF THE LIST.Therefore due to this method , the object i selected is put in the last of the list and it displays as selected to user.The method works fine.
But when page is loaded first , the last item of the list is shown as selected in p:selectOneMenu ,i want "please select" to be shown as default."
My bean class is SilYapilandirmaView.java
#ManagedBean
#ViewScoped
public class SilYapilandirmaView extends BaseView implements Serializable {
#ManagedProperty("#{commonService}")
private CommonService commonService;
private EshsSertifika seciliEshsSertifika;
private List<EshsSertifika> eshsSertifikaList;
#PostConstruct
public void init() {
seciliEshsSertifika=new EshsSertifika();
eshsSertifikaList = (List) commonService.hepsiniGetir(EshsSertifika.class);
seciliEshsSertifika = eshsSertifikaList.get(eshsSertifikaList.size() - 1);
}
public CommonService getCommonService() {
return commonService;
}
public void setCommonService(CommonService commonService) {
this.commonService = commonService;
}
public void addListener() {
if(seciliEshsSertifika ==null)
{
return;
}
int i = 0;
for (EshsSertifika eshsSert : eshsSertifikaList) {
if (seciliEshsSertifika.getId() == eshsSert.getId()) {
eshsSert = eshsSertifikaList.get(eshsSertifikaList.size() - 1);
eshsSertifikaList.set(i, eshsSert);
eshsSertifikaList.set(eshsSertifikaList.size() - 1, seciliEshsSertifika);
break;
}
i++;
}
}
public EshsSertifika getSeciliEshsSertifika() {
return seciliEshsSertifika;
}
public void setSeciliEshsSertifika(EshsSertifika seciliEshsSertifika) {
this.seciliEshsSertifika = seciliEshsSertifika;
}
public List<EshsSertifika> getEshsSertifikaList() {
return eshsSertifikaList;
}
public void setEshsSertifikaList(List<EshsSertifika> EshsSertifikaList) {
this.eshsSertifikaList = EshsSertifikaList;
}
}
When i added following code in init() method ,my code is working perfectly!
seciliEshsSertifika=null;
public void init() {
seciliEshsSertifika=new EshsSertifika();
eshsSertifikaList = (List) commonService.hepsiniGetir(EshsSertifika.class);
seciliEshsSertifika = eshsSertifikaList.get(eshsSertifikaList.size() - 1);
seciliEshsSertifika=null;
}
when page is loaded, "please select one" is visible in p:selectOneMenu,but i don't want to make "seciliEshsSertifika" object equal to null.,is there anybody else coming up with another solution?
Try this. get the object you want to set the first item. (this example i get the first object in the list)
bean.java
EshsSertifika firstItem = eshsSertifikaList.get(0);
xhtml
<f:selectItem itemLabel="#{eshsSertifika.firstItem.sertifikaKodAdi}" itemValue="#{eshsSertifika.firstItem}" />
I have a p:dataGrid that used to update itself in 3.0.1. Now I upgraded to PF 3.1 and the ajax update event of the "availableIcons" component does not fire anymore. I don't get an error that the component is not found in the view.
The XHMTL
<h:form id="Application">
......
<p:confirmDialog id="iconDialog" message="Select one icon"
showEffect="bounce" hideEffect="explode" header="Icon Selection"
severity="alert" widgetVar="iconSelect" modal="false">
<p:dataGrid id="availableIcons" var="icon"
value="#{appEditController.availableIcons}" columns="4">
<p:column>
<p:panel id="pnl" header="" style="text-align:center">
<h:panelGrid columns="1" style="width:100%" id="iconPanelGrid">
<p:graphicImage value="/resources/icons/#{icon.icon}"
id="iconImage" />
<p:selectBooleanCheckbox id="iconSelector"
value="#{icon.selected}"
disabled="#{appEditController.isIconSelected(icon)}">
<p:ajax update="availableIcons" event="change"
process="availableIcons"
listener="#{appEditController.iconSelectedChanged(icon)}" />
</p:selectBooleanCheckbox>
</h:panelGrid>
</p:panel>
</p:column>
</p:dataGrid>
<p:commandButton value="Done" update="currentIcon"
action="#{appEditController.updateCurrentIcon}" ajax="false"
oncomplete="iconSelect.hide()" />
</p:confirmDialog>
.......
</h:form>
I don't see what's missing or what's incorrect.
This is the backing bean code
public void updateCurrentIcon() {
for (IconVO iconVO : availableIcons) {
if (iconVO.isSelected()) {
log.debug("CURRENT ICON IS NOW " + iconVO.getIcon());
currentIcon = iconVO;
break;
}
}
}
public void iconSelectedChanged(IconVO iconVO) {
if (iconVO == currentIcon) {
log.debug("NULLING ICON");
currentIcon = null;
} else {
log.debug("SETTING NEW ICON");
currentIcon = iconVO;
}
}
public boolean isIconSelected(IconVO iconVO) {
log.debug("IS ICON SELECTED " + iconVO.getIcon());
if (currentIcon == null
|| iconVO.getIcon().equals(currentIcon.getIcon())) {
return false;
}
return currentIcon != null;
}
I tried to do update="#form", then the update fires but it closes the modal panel completely.
Thanks,
Coen
Indeed, the way how PrimeFaces locates components by relative client ID has been changed in PrimeFaces 3.1 to adhere the UIComponent#findComponent() javadoc.
In your particular case, you need to specify the absolute client ID of the <p:dataGrid> instead. Easiest way to figure it is to check the ID of the <p:dataGrid> in the generated HTML source. With the code given so far, that would be Application:availableIcons. You need to prefix it with : to make it absolute and then reference it in update as follows:
<p:ajax update=":Application:availableIcons" ... />
Update as per the comments it turns out to not work at all. You could try wrapping the table in some invisible containing component like <h:panelGroup> and update it instead. Alternatively, you could consider moving the <h:form> into the dialog and use update="#form" instead. Having the <h:form> outside the dialog is kind of odd anyway. You surely won't submit all the other inputs which are outside the dialog inside the same form.
I use the google map tool from primefaces.
I want my user to be able to place just one marker on a map.
The values of the coordinates should be stored in a managed bean variables.
How can I do that?
See what I did so far:
I created the map:
<f:view contentType="text/html">
<p:gmap id="gmap" center="36.890257,30.707417" zoom="13" type="HYBRID"
style="width:600px;height:400px"
model="#{mapBean.emptyModel}"
onPointClick="handlePointClick(event);"
widgetVar="map" /> </f:view>
<p:dialog widgetVar="dlg" effect="FADE" effectDuration="0.5" close="false" fixedCenter="true">
<h:form prependId="false">
<h:panelGrid columns="2">
<h:outputLabel for="title" value="Title:" />
<p:inputText id="title" value="#{mapBean.title}" />
<f:facet name="footer">
<p:commandButton value="Add"
actionListener="#{mapBean.addMarker}"
update="messages"
oncomplete="markerAddComplete()"/>
<p:commandButton value="Cancel" onclick="return cancel()"/>
</f:facet>
</h:panelGrid>
<h:inputHidden id="lat" value="#{newOfferSupportController.mapLocationX}" />
<h:inputHidden id="lng" value="#{newOfferSupportController.mapLocationY}" />
</h:form>
</p:dialog>
<script type="text/javascript">
var currentMarker = null;
function handlePointClick(event) {
if(currentMarker == null) {
document.getElementById('lat').value = event.latLng.lat();
document.getElementById('lng').value = event.latLng.lng();
currentMarker = new google.maps.Marker({
position:new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())
});
map.addOverlay(currentMarker);
dlg.show();
}
}
function markerAddComplete() {
var title = document.getElementById('title');
currentMarker.setTitle(title.value);
title.value = "";
currentMarker = null;
dlg.hide();
}
function cancel() {
dlg.hide();
currentMarker.setMap(null);
currentMarker = null;
return false;
}
</script>
I also greated the variables that will hold the coordinates:
#ManagedBean
#RequestScoped
public class NewOfferSupportController {
private float mapLocationX;
private float mapLocationY;
//Get & set methods
It all works as in the primefaces page but I have 2 problems:
Problem 1: Once the marker is placed, it cannot be placed again.
Problem 2: In the same form where the map is there are some other elements such as text fields. I noticed that validation does not occur when I click on the submit button located in the form where the map is, Actually the form does not get submitted at all(This didn't occur before i added the map), why is the map disrupting the validation?
Problem 1: Once the marker is placed, it cannot be placed again.
This problem is caused by the following things:
You've bound latitude and longitude to a different bean (NewOfferSupportController) than the bean which holds the map model (MapBean). You should be using MapBean example in the PrimeFaces showcase as design starting point for NewOfferSupportController bean. It namely stores the markers set. The hidden inputs must point to that bean because in the addMarker() method those values will be added. From the showcase example you just have to rename the MapBean class name and rename #{mapBean} references in the view by #{newOfferSupportController}.
Your NewOfferSupportController bean is request scoped while it should be view scoped.
#ManagedBean
#ViewScoped
public class NewOfferSupportController implements Serializable {}
View scoped beans live as long as you're interacting with the same form by Ajax. But request scoped beans get recreated on every request (and thus also on every Ajax request!), hereby trashing the markers which are placed before in the map and inputs which are entered before adding markers.
Problem 2: In the same form where the map is there are some other elements such as text fields. Actually the form does not get submitted at all(This didn't occur before i added the map), why is the map disrupting the validation?
This works for me. This is likely caused because your NewOfferSupportController is been placed in the request scope instead of the view scope.
To recap, here is the code which I used in my test:
view:
<p:growl id="messages" showDetail="true" />
<h:form>
<p:gmap id="gmap" center="36.890257,30.707417" zoom="13" type="HYBRID" style="width:600px;height:400px"
model="#{mapBean.mapModel}" onPointClick="handlePointClick(event);" widgetVar="map" />
<h:inputText value="#{mapBean.input}" required="true" />
<p:commandButton value="submit" action="#{mapBean.submit}" update="messages" />
</h:form>
<p:dialog widgetVar="dlg" effect="FADE" effectDuration="0.5" close="false" fixedCenter="true">
<h:form prependId="false">
<h:panelGrid columns="2">
<h:outputLabel for="title" value="Title:" />
<p:inputText id="title" value="#{mapBean.title}" />
<f:facet name="footer">
<p:commandButton value="Add" actionListener="#{mapBean.addMarker}"
update="messages" oncomplete="markerAddComplete()"/>
<p:commandButton value="Cancel" onclick="return cancel()"/>
</f:facet>
</h:panelGrid>
<h:inputHidden id="lat" value="#{mapBean.lat}" />
<h:inputHidden id="lng" value="#{mapBean.lng}" />
</h:form>
</p:dialog>
(I didn't change the <script> code in the showcase example, just add it unchanged)
Bean:
#ManagedBean
#ViewScoped
public class MapBean implements Serializable {
private MapModel mapModel;
private String title;
private double lat;
private double lng;
private String input;
public MapBean() {
mapModel = new DefaultMapModel();
}
public void addMarker(ActionEvent actionEvent) {
mapModel.addOverlay(new Marker(new LatLng(lat, lng), title));
addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Marker Added", "Lat:" + lat + ", Lng:" + lng));
}
public void submit() {
addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Form submitted", "Amount markers: " + mapModel.getMarkers().size() + ", Input: " + input));
}
public void addMessage(FacesMessage message) {
FacesContext.getCurrentInstance().addMessage(null, message);
}
// Getters+setters.
}
How can I show/hide component with JSF?
I am currently trying so do the same with the help of javascript but not successfull.
I cannot use any third party libraries.
Thanks| Abhi
You can actually accomplish this without JavaScript, using only JSF's rendered attribute, by enclosing the elements to be shown/hidden in a component that can itself be re-rendered, such as a panelGroup, at least in JSF2. For example, the following JSF code shows or hides one or both of two dropdown lists depending on the value of a third. An AJAX event is used to update the display:
<h:selectOneMenu value="#{workflowProcEditBean.performedBy}">
<f:selectItem itemValue="O" itemLabel="Originator" />
<f:selectItem itemValue="R" itemLabel="Role" />
<f:selectItem itemValue="E" itemLabel="Employee" />
<f:ajax event="change" execute="#this" render="perfbyselection" />
</h:selectOneMenu>
<h:panelGroup id="perfbyselection">
<h:selectOneMenu id="performedbyroleid" value="#{workflowProcEditBean.performedByRoleID}"
rendered="#{workflowProcEditBean.performedBy eq 'R'}">
<f:selectItem itemLabel="- Choose One -" itemValue="" />
<f:selectItems value="#{workflowProcEditBean.roles}" />
</h:selectOneMenu>
<h:selectOneMenu id="performedbyempid" value="#{workflowProcEditBean.performedByEmpID}"
rendered="#{workflowProcEditBean.performedBy eq 'E'}">
<f:selectItem itemLabel="- Choose One -" itemValue="" />
<f:selectItems value="#{workflowProcEditBean.employees}" />
</h:selectOneMenu>
</h:panelGroup>
Generally, you need to get a handle to the control via its clientId. This example uses a JSF2 Facelets view with a request-scope binding to get a handle to the other control:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head><title>Show/Hide</title></h:head>
<h:body>
<h:form>
<h:button value="toggle"
onclick="toggle('#{requestScope.foo.clientId}'); return false;" />
<h:inputText binding="#{requestScope.foo}" id="x" style="display: block" />
</h:form>
<script type="text/javascript">
function toggle(id) {
var element = document.getElementById(id);
if(element.style.display == 'block') {
element.style.display = 'none';
} else {
element.style.display = 'block'
}
}
</script>
</h:body>
</html>
Exactly how you do this will depend on the version of JSF you're working on. See this blog post for older JSF versions: JSF: working with component identifiers.
Use the "rendered" attribute available on most if not all tags in the h-namespace.
<h:outputText value="Hi George" rendered="#{Person.name == 'George'}" />
You should use <h:panelGroup ...> tag with attribute rendered. If you set true to rendered, the content of <h:panelGroup ...> won't be shown. Your XHTML file should have something like this:
<h:panelGroup rendered="#{userBean.showPassword}">
<h:outputText id="password" value="#{userBean.password}"/>
</h:panelGroup>
UserBean.java:
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
#ManagedBean
#SessionScoped
public class UserBean implements Serializable{
private boolean showPassword = false;
private String password = "";
public boolean isShowPassword(){
return showPassword;
}
public void setPassword(password){
this.password = password;
}
public String getPassword(){
return this.password;
}
}
One obvious solution would be to use javascript (which is not JSF). To implement this by JSF you should use AJAX. In this example, I use a radio button group to show and hide two set of components. In the back bean, I define a boolean switch.
private boolean switchComponents;
public boolean isSwitchComponents() {
return switchComponents;
}
public void setSwitchComponents(boolean switchComponents) {
this.switchComponents = switchComponents;
}
When the switch is true, one set of components will be shown and when it is false the other set will be shown.
<h:selectOneRadio value="#{backbean.switchValue}">
<f:selectItem itemLabel="showComponentSetOne" itemValue='true'/>
<f:selectItem itemLabel="showComponentSetTwo" itemValue='false'/>
<f:ajax event="change" execute="#this" render="componentsRoot"/>
</h:selectOneRadio>
<H:panelGroup id="componentsRoot">
<h:panelGroup rendered="#{backbean.switchValue}">
<!--switchValue to be shown on switch value == true-->
</h:panelGroup>
<h:panelGroup rendered="#{!backbean.switchValue}">
<!--switchValue to be shown on switch value == false-->
</h:panelGroup>
</H:panelGroup>
Note: on the ajax event we render components root. because components which are not rendered in the first place can't be re-rendered on the ajax event.
Also, note that if the "componentsRoot" and radio buttons are under different component hierarchy. you should reference it from the root (form root).
check this below code.
this is for dropdown menu. In this if we select others then the text box will show otherwise text box will hide.
function show_txt(arg,arg1)
{
if(document.getElementById(arg).value=='other')
{
document.getElementById(arg1).style.display="block";
document.getElementById(arg).style.display="none";
}
else
{
document.getElementById(arg).style.display="block";
document.getElementById(arg1).style.display="none";
}
}
The HTML code here :
<select id="arg" onChange="show_txt('arg','arg1');">
<option>yes</option>
<option>No</option>
<option>Other</option>
</select>
<input type="text" id="arg1" style="display:none;">
or you can check this link
click here
I'm trying to do a search form, depending on the selected item you can do searchs by start to end or month and year
Is it possible to do a form look like this, with Facelets?
using of preference SelectOneRadio
alt text http://img837.imageshack.us/img837/5357/imageoq.png
It's doable. You'd like to use <f:ajax> inside the <h:selectOneMenu> to rerender the form on change (click) of the radio buttons. You can use the #form identifier for this.
Then, in the input and select elements, you'd like to let disabled attribute depend on the radio button selection.
The most tricky part is probably to get it all laid out nicely since the h:selectOneRadio itself renders a HTML <table>. To group them nicely together, you'd like to split the content over cells of another table and apply CSS vertical-align: top to the td element containing the h:selectOneRadio.
Anyway, here's a full working example to get you started:
<h:form id="form">
<h:panelGrid columns="2">
<h:selectOneRadio id="type" value="#{bean.type}" layout="pageDirection" required="true">
<f:selectItems value="#{bean.types}" var="type" itemValue="${type}" itemLabel="" />
<f:ajax event="click" render="#form" />
</h:selectOneRadio>
<h:panelGrid columns="4">
<h:outputLabel for="inputStartDate" value="Start Date" />
<h:inputText id="inputStartDate" value="#{bean.startDate}" required="true" disabled="#{bean.type != 'INPUT'}">
<f:convertDateTime type="date" pattern="yyyy-MM-dd" />
</h:inputText>
<h:outputLabel for="inputEndDate" value="End Date" />
<h:inputText id="inputEndDate" value="#{bean.endDate}" required="true" disabled="#{bean.type != 'INPUT'}">
<f:convertDateTime type="date" pattern="yyyy-MM-dd" />
</h:inputText>
<h:outputLabel for="selectMonth" value="Select Month" />
<h:selectOneMenu id="selectMonth" value="#{bean.month}" required="true" disabled="#{bean.type != 'SELECT'}">
<f:selectItem itemLabel="Select One" />
<f:selectItems value="#{bean.months}" />
</h:selectOneMenu>
<h:outputLabel for="selectYear" value="Select Year" />
<h:selectOneMenu id="selectYear" value="#{bean.year}" required="true" disabled="#{bean.type != 'SELECT'}">
<f:selectItem itemLabel="Select One" />
<f:selectItems value="#{bean.years}" />
</h:selectOneMenu>
<h:panelGroup />
<h:panelGroup />
<h:commandButton value="Submit" action="#{bean.submit}" />
<h:panelGroup />
</h:panelGrid>
</h:panelGrid>
<h:messages />
</h:form>
Here's how the bean look like:
#ManagedBean
#ViewScoped
public class Bean {
private enum Type {
INPUT, SELECT
}
private Type type;
private Date startDate;
private Date endDate;
private Integer month;
private Integer year;
// All with getters and setters.
private List<Type> types = Arrays.asList(Type.values());
private List<SelectItem> months = new ArrayList<SelectItem>();
private List<Integer> years = new ArrayList<Integer>();
// All with just getters.
public Bean() {
String[] monthNames = new DateFormatSymbols().getMonths();
for (int i = 0; i < 12; i++) {
months.add(new SelectItem(i, monthNames[i]));
}
for (int i = 2000; i <= 2020; i++) {
years.add(i);
}
}
public void submit() {
switch (type) {
case INPUT:
System.out.printf("Start Date: %tF, End Date: %tF%n", startDate, endDate);
break;
case SELECT:
System.out.printf("Month: %s, Year: %d%n", months.get(month).getLabel(), year);
break;
}
}
// Getters and setters here.
}
Here's how you can apply CSS to get the radio buttons aligned at top:
#form td { vertical-align: top; }
Of course.
Create regular div/css table. where the radio buttons are displayed in one div like this:
facelet page:
<h:selectOneRadio id="searchPlace"
value="#{yourBean.selection}" onclick="enableSearch(this)" layout="pageDirection" border="1">
<f:selectItem itemValue="0" />
in the header part, add javascript:
function enableSearch(radio){
if (radio.id == 's1'){
document.getElementById('startDateText').disabled=false;
document.getElementById('endDateText').disabled=false;
}else{
document.getElementById('monthSelect').disabled=false;
document.getElementById('yearSelect').disabled=false;
}
}
in YourBean.java class:
Boolean selection;
public void setSelection(Boolean selection){
this.selection = selection;
}
public String getSelection(){
return this.selection;
}
public void savePage(){
....
if (selection)
..
}
and in savePage() use the selection param to decide the search type.