my problem is, that I got two fields. Here is the definition:
<h:selectOneMenu id="selectSource" update=":relationTableForm:selectObject" value="#{tabDefineRelationTable.sourceId}" style="width: 100%;" required="true" requiredMessage="Source is required">
<p:ajax listener="#{tabDefineRelationTable.handleSourceChange}" />
<f:selectItem itemLabel="Select Source" itemValue="0" noSelectionOption="true" />
<f:selectItems value="#{tabDefineRelationTable.mySources}"
update=":createArtifactForm:selectObject"
var="source"
itemLabel="#{source.s_name}"
itemValue="#{source.s_id}" />
</h:selectOneMenu>
<h:selectOneMenu id="selectObject" value="#{tabDefineRelationTable.objectId}" style="width: 100%;" required="true" requiredMessage="Object is required" onchange="submit()">
<f:selectItem itemLabel="first select Source" itemValue="0" noSelectionOption="true" />
<f:selectItems value="#{tabDefineRelationTable.myObjects}"
var="object"
itemLabel="#{object.o_name}"
itemValue="#{object.o_id}" />
</h:selectOneMenu>
I want to implement, if I select in my selectSource a field, I update the variable objectId in the backend, and see it in my frontend.
Here is my first try to implement it:
Variable definition
private List<Source> mySources;
private List<Objects> myObjects;
private Integer sourceId = 0;
private Integer objectId = 0;
Constructor:
public TabDefineRelationTable (TabLoader parent, List<Source> sources, List<Objects> objects) {
parentForm = parent;
mySources = sources;
myObjects = objects;
}
Listener:
public void handleSourceChange() {
this.objectId = 0;
if (sourceId != 0) {
for (Source curSource : mySources) {
if (curSource.getS_id() == sourceId) {
myObjects.clear();
myObjects.addAll(curSource.getObjects());
}
}
}
}
Thanks a lot.
Best regards
Björn
Update 1:
After I tried the solution to use <p:ajax event="select" update="tabView:relationTableForm:selectObject" listener="#{tabDefineRelationTable.handleSourceChange}" />,
<p:ajax event="select" update=":relationTableForm:selectObject" listener="#{tabDefineRelationTable.handleSourceChange}" /> or
<p:ajax event="select" update=":selectObject" listener="#{tabDefineRelationTable.handleSourceChange}" />.
I got this errormessage:Cannot find component with identifier "tabView:relationTableForm:selectObject" referenced from tabView:relationTableForm:selectSource".
Any other Ideas?
Update 2:
update="#([id$=output])" testet this one. Didn't got an error, but the field is also not updated :/
could you try this..
<p:ajax update="selectObject" listener="#{tabDefineRelationTable.handleSourceChange}" />
The solution was to change the ajax line into
<p:ajax update="selectObject" listener="#{tabDefineRelationTable.handleSourceChange}" />
Big thanks to serdar for help!
Related
I have a jsf containing two <p:selectOneMenu ...> components.
Part of JSF:
<p:selectOneMenu id="speakerLanguage"
value="#{speakerAddFormView.currentSpeaker.nativLang1}">
<f:selectItem itemLabel="Select Language" itemValue="-1" />
<f:selectItems value="#{speakerAddFormView.languages.entrySet()}"
var="languages" itemLabel="#{languages.key}"
itemValue="#{languages.value}" />
<p:ajax listener="#{speakerAddFormView.updateStateSecondNativeLangSOM}"
update="speakerLanguage2" />
</p:selectOneMenu>
<p:selectOneMenu id="speakerLanguage2"
value="#{speakerAddFormView.currentSpeaker.nativLang2}"
disabled="#{speakerAddFormView.disableSecondNativeLangSOM}">
<f:selectItem itemLabel="Select second Language" itemValue="-1" />
<f:selectItems value="#{speakerAddFormView.languages.entrySet()}"
var="languages" itemLabel="#{languages.key}"
itemValue="#{languages.value}"/>
</p:selectOneMenu>
Within my bean I have a public static final Map<String, String> LANGUAGE_CODES = new TreeMap<String, String>(); containing native languages. This TreeMap is referenced at initialization of the bean at:
#PostConstruct
public void init() {
this.languages = ConstantCodes.LANGUAGE_CODES;
}
When I reload the page, the both <p:selectOneMenus > are seleected not to the default <f:selectItem itemLabel="Select Language" itemValue="-1" /> or <f:selectItem itemLabel="Select second Language" itemValue="-1" />.
Screen Snip:
Edit: These two items are selected from the beginning.
Is there a way to force the default selected value ?
Set your nativLang1 and nativLang2 to -1 in your #PostConstruct method.
#PostConstruct
public void init() {
System.out.println("initializing");
this.languages = ConstantCodes.LANGUAGE_CODES;
nativLang1 = "-1";
nativLang2 = "-1";
}
I'm trying to show a message when a autocomplete selection is made. It shows the message, but when i try to use the autocomplete again it doesn't execute my completeMethod.
View:
<p:messages id="gNewDiagnostic" for="guau" escape="false"/>
<p:panelGrid columns="2" styleClass="panelGridForm">
<p:outputLabel value="Patología:" for="pathologyND"/>
<p:autoComplete id="pathologyND" value="#{newDiagnostic.pathology}" completeMethod="#{newDiagnostic.completeTextPathology}">
<p:ajax event="blur" listener ="#{newDiagnostic.warningGest}"/>
</p:autoComplete>
<p:outputLabel value="Estado del Diagnóstico:" for="stateDiagnosticND" />
<p:selectOneMenu id="stateDiagnosticND" value="#{newDiagnostic.stateDiagnostic}">
<p:ajax update="gNewDiagnostic" listener="#{newDiagnostic.warningGest}">
</p:ajax>
<f:selectItem itemLabel="Seleccione un Item" itemValue="" />
<f:selectItem itemLabel="Sospecha" itemValue="sospecha" />
<f:selectItem itemLabel="Confirmado" itemValue="confirmado" />
</p:selectOneMenu>
</p:panelGrid>
Managed Bean:
public void warningGest() {
boolean type = diseasesFacade.diseaseType(pathology);
stateGes = true;
if (type == true && stateDiagnostic.equals("confirmado")) {
FacesContext.getCurrentInstance().addMessage("guau", new FacesMessage(FacesMessage.SEVERITY_WARN, "Advertencia", "La patología " + pathology + " es una enfermedad GES. "));
stateGes = false;
}
}
Solved.
The problem was in a growl nested in the parent form. The growl missed some attributes and had the property autoUpdate=true causing failure in all ajax processing after a message was added to the context.
Deleting the growl fixed the issue.
I have a JSF application in which I have an combobox like this.
<script type="text/javascript" defer="defer">
<!--//--><![CDATA[//><!--
helpKey = 'APPLICATION_EDIT_DATASOURCE';
function reapplyStyles() {}
function selectT(data){
if(data.status == "begin"){
$('editForm:selectTypeButton').click();
}
}
//--><!]]>
</script>
<h:form id="editForm">
<h:inputHidden id="id" value="#{applicationObject.objectId}"/>
<h:inputHidden id="type" value="#{applicationObject.object.type}"/>
<h:inputHidden id="selectedDSForApp" value="#{applicationObject.selectedDataSourceId}"/>
<ui:param name="activityDataSource" value="#{applicationObject.selectedDataSourceBean}"/>
<a4j:outputPanel id="activityDataSourceRulesPanel">
<h:panelGrid columns="2" columnClasses="padded" rowClasses="padded">
<h:outputText value="#{msgs.transformation_rule}"/>
<h:panelGroup>
<h:selectOneMenu id="dsTransformationRule" value="#{activityDataSource.selectedTransformationRule}"
disabled="#{!sp:hasRight(facesContext, 'ManageApplication')}"
readonly="#{!sp:hasRight(facesContext, 'ManageApplication')}">
<f:selectItems value="#{activityDataSource.transformationRules}"/>
</h:selectOneMenu>
<ui:fragment rendered="#{sp:hasRight(facesContext, 'ManageRules')}" >
<input type="button" value="#{msgs.button_ellipsis}" class="ruleEditorBtn"
onclick="SailPoint.Rule.Editor.edit($('editForm:dsTransformationRule').value,
'ActivityTransformer',
$('editForm:refreshActivityDataSourceRulesButton'))" />
</ui:fragment>
</h:panelGroup>
<h:outputText value="#{msgs.correlation_rule}"/>
<h:panelGroup>
<h:selectOneMenu id="dsCorrelationRule" value="#{activityDataSource.selectedCorrelationRule}"
disabled="#{!sp:hasRight(facesContext, 'ManageApplication')}"
readonly="#{!sp:hasRight(facesContext, 'ManageApplication')}">
<f:selectItems value="#{activityDataSource.correlationRules}"/>
</h:selectOneMenu>
<ui:fragment rendered="#{sp:hasRight(facesContext, 'ManageRules')}" >
<input type="button" value="#{msgs.button_ellipsis}" class="ruleEditorBtn"
onclick="SailPoint.Rule.Editor.edit($('editForm:dsCorrelationRule').value,
'ActivityCorrelation',
$('editForm:refreshActivityDataSourceRulesButton'))" />
</ui:fragment>
</h:panelGroup>
<h:outputText value="#{msgs.activity_data_src_type}"/>
<h:panelGroup>
<a4j:outputPanel id="collectorSettings">
<h:selectOneMenu id="collectorType"
value="#{activityDataSource.object.type}"
rendered="#{empty activityDataSource.object.id}"
disabled="#{!sp:hasRight(facesContext, 'ManageApplication')}"
readonly="#{!sp:hasRight(facesContext, 'ManageApplication')}">
<!-- onchange="$('editForm:selectTypeButton').click();"> -->
<f:ajax event="change"
onevent="selectT"
execute="#this dsTransformationRule dsCorrelationRule"
render="dsTransformationRule dsCorrelationRule"
listener="#{activityDataSource.handleCollectorTypeChange}" />
<f:selectItem itemValue="" itemLabel="#{msgs.select_collector_type}"/>
<f:selectItems value="#{activityDataSource.collectorTypes}"/>
</h:selectOneMenu>
<h:selectOneMenu id="fixedCollectorType" value="#{empty activityDataSource.object.type ? 'None' : activityDataSource.object.type}"
rendered="#{not empty activityDataSource.object.id}"
disabled="true"
readonly="true">
<f:selectItem itemValue="#{empty activityDataSource.object.type ? 'None' : activityDataSource.object.type}"
itemLabel="#{empty activityDataSource.object.type ? msgs.none : activityDataSource.object.type}"/>
</h:selectOneMenu>
</a4j:outputPanel>
</h:panelGroup>
</h:panelGrid>
</a4j:outputPanel>
<a4j:outputPanel id="configSettings">
<h:messages infoClass="formInfo" warnClass="formWarn" errorClass="formError" fatalClass="formError"/>
<h:panelGroup rendered="#{not empty activityDataSource.object.collector}">
<ui:include src="#{activityDataSource.configPage}"/>
</h:panelGroup>
</a4j:outputPanel>
<h:panelGroup>
<div class="buttonRow">
<ui:fragment rendered="#{sp:hasRight(facesContext, 'ManageApplication')}">
<h:commandButton id="activityDataSourceSave" action="#{activityDataSource.saveAction}" value="#{msgs.button_save}" styleClass="primaryBtn"/>
</ui:fragment>
<h:commandButton id="activityDataSourceCancel" action="#{activityDataSource.cancelAction}" value="#{msgs.button_cancel}" styleClass="secondaryBtn"/>
</div>
</h:panelGroup>
<a4j:commandButton id="refreshActivityDataSourceRulesButton"
style="display:none"
immediate="true"
render="activityDataSourceRulesPanel"/>
<a4j:commandButton id="selectTypeButton" action="#{activityDataSource.selectType}" style="display:none"
render="configSettings, collectorSettings"
oncomplete="initializeSelectedConfigPage();"/>
</h:form>
Bean Class
public String getSelectedTransformationRule() {
if (_selectedTransformationRule == null) {
ActivityDataSourceDTO dto = getObject();
if (dto != null)
_selectedTransformationRule = dto.getTransformationRule();
}
return _selectedTransformationRule;
}
public String getSelectedCorrelationRule() {
if (_selectedCorrelationRule == null) {
ActivityDataSourceDTO dto = getObject();
if (dto != null)
_selectedCorrelationRule = dto.getCorrelationRule();
}
return _selectedCorrelationRule;
}
In the above code I have a normal onchange event & an ajax onchange event on combobox element id= collectorType.
Is there any limitation in using two change for same element in JSF.
Also how can I merge first onchange to ajax onchange.
Use onevent attribute of <f:ajax> as follows:
<h:selectOneMenu id="collectorType"
value="#{activityDataSource.object.type}"
rendered="#{empty activityDataSource.object.id}"
disabled="#{!sp:hasRight(facesContext, 'ManageApplication')}"
readonly="#{!sp:hasRight(facesContext, 'ManageApplication')}">
<f:ajax event="change"
execute="#this"
render="dsTransformationRule dsCorrelationRule"
listener="#{activityDataSource.handleCollectorTypeChange}"
onevent="$('#editForm\\:selectTypeButton').click();"/>
<f:selectItem itemValue="" itemLabel="#{msgs.select_collector_type}"/>
<f:selectItems value="#{activityDataSource.collectorTypes}"/>
</h:selectOneMenu>
also notice I've modified the selector '#editForm\\:selectTypeButton' to escape the : in your button's id.
[UPDATE]
Here's what you can do to achieve the scenario we've discussed in the comments:
First to populate both dsTransformationRule and dsCorrelationRule with _selectedTransformationRule and _selectedCorrelationRule respectively, create an initialization method for them, and call it in #PostConstruct method (check Why use #PostConstruct?), so in your bean class you would have something like this:
#PostConstuct
public void init() {
initRules();
//include another things you want to be initializaed when this page finishes constructing.
}
private void initRules() {
ActivityDataSourceDTO dto = getObject();
if (dto == null)
return;
if (_selectedTransformationRule == null)
_selectedTransformationRule = dto.getTransformationRule();
if (_selectedCorrelationRule == null)
_selectedCorrelationRule = dto.getCorrelationRule();
}
//Let the getters do no dto access, so it won't matter if they're called twice on change
public String getSelectedTransformationRule() {
return _selectedTransformationRule;
}
public String getSelectedCorrelationRule() {
return _selectedCorrelationRule;
}
Now your f:ajax can normally execute and render your select menus without fearing to access your DTO layer multiple times
<f:ajax event="change" onevent="selectT"
execute="#this dsTransformationRule dsCorrelationRule"
render="dsTransformationRule dsCorrelationRule"
listener="#{activityDataSource.handleCollectorTypeChange}" />
This way, when handleCollectorTypeChange is invoked, will have both _selectedTransformationRule and _selectedCorrelationRule populated with their last selected values.
On a side note, if you want to get the values of select menus dsTransformationRule and dsCorrelationRule in a validation or conversion phase, or directly via an event listener method that is called before the Update Model Values phase, check this answer that would help you reach the value from the component.
Hopefully this would solve your issue, or at least set you in the right direction.
I have two selectOneMenu. I need following:
On first menu change I need to populate second one and some form's fields with AJAX
On second menu change I need to populate only some form's fields wit AJAX.
Populating second menu and form's fields on step 1 is perfect and right after first menu change, but there is a problem with populating form on step 2.
Nothing happens when I change second menu's value. But when I returned second menu value to NoSelectionOption ajax listener invoked. It seems that AJAX listener ignores values that was added with AJAX.
Here's my code fragments:
JSF:
<h:panelGrid>
<h:panelGrid columns="1">
<h:panelGrid columns="1">
<h:panelGrid columns="2">
<h:outputText value="Получатель:" />
<h:selectOneMenu value="#{paymentOrder.curContractor}">
<f:selectItem itemLabel="Выберите контрагента .." noSelectionOption="true" />
<f:selectItems value="#{paymentOrder.userContractors}" var="contr"
itemValue="#{contr.idcontractor}"
itemLabel="#{contr.pnamecontractor}"/>
<a4j:ajax event="valueChange" listener="#{paymentOrder.valueContractorChanged}" render="idINNContractor, idKPPContractor, idNameContractor, idContractorAccounts" execute="#this"/>
</h:selectOneMenu>
</h:panelGrid>
<h:panelGrid columns="1">
<h:panelGrid columns="4">
<h:outputText value="ИНН"/>
<h:inputText id="idINNContractor" value="#{paymentOrder.chosenContractor.inncontractor}"/>
<h:outputText value="КПП"/>
<h:inputText id="idKPPContractor" value="#{paymentOrder.chosenContractor.kppcontractor}"/>
</h:panelGrid>
<h:panelGrid columns="2">
<h:outputText value="Получатель"/>
<h:inputTextarea id="idNameContractor" value="#{paymentOrder.chosenContractor.pnamecontractor}"/>
</h:panelGrid>
</h:panelGrid>
<h:panelGrid columns="1">
<h:panelGrid columns="2">
<h:outputText value="Счёт получателя:"/>
<h:selectOneMenu id="idContractorAccounts" value="#{paymentOrder.curContractorAccount}">
<f:selectItem itemLabel="Выберите счёт .." noSelectionOption="true" />
<f:selectItems value="#{paymentOrder.contractorAccounts}" var="acc"
itemValue="#{acc.naccountcontractor}"
itemLabel="#{acc.advName}"/>
<a4j:ajax event="valueChange" listener="#{paymentOrder.valueAccountChanged}" render="idContrAcc, idNameContrBank, idBikContrBank, idAccContrBank" execute="#this"/>
</h:selectOneMenu>
</h:panelGrid>
<h:panelGrid columns="2">
<h:outputText value="Сч.№"/>
<h:inputText id="idContrAcc" value="#{paymentOrder.curContractorAccount}"/>
</h:panelGrid>
</h:panelGrid>
</h:panelGrid>
</h:panelGrid>
<h:panelGrid columns="1">
<h:panelGrid columns="4">
<h:panelGrid columns="2">
<h:outputText value="Банк получателя"/>
<h:inputTextarea id="idNameContrBank" value="#{paymentOrder.chosenBank.namebank}" />
</h:panelGrid>
<h:panelGrid columns="2">
<h:outputText value="БИК"/>
<h:inputText id="idBikContrBank" value="#{paymentOrder.chosenBank.bikbank}"/>
<h:outputText value="Сч.№"/>
<h:inputText id="idAccContrBank" value="#{paymentOrder.chosenBank.bankkorshet}"/>
</h:panelGrid>
</h:panelGrid>
</h:panelGrid>
</h:panelGrid>
And my back bean fragment:
public class PaymentOrder {
#EJB(lookup="JpaBankBean/local")
private JpaBankBeanLocal jpaBean;
private Paymentdocument pDocument;
private Paymentorder pOrder;
private Klbankrf chosenBank;
private String curContractorAccount;
private String curContractorBank;
private String curContractor;
private String err;
private String chosenAccount;
private Contractor chosenContractor;
#SuppressWarnings("rawtypes")
private Set contractorAccounts;
#SuppressWarnings("rawtypes")
private List contractorBanks;
private String userName;
private Date nowDate;
public PaymentOrder() {
this.nowDate = Calendar.getInstance().getTime();
Object principal = SecurityContextHolder.getContext().getAuthentication().getPrincipal();
if (principal instanceof UserDetails) {
setUserName(((UserDetails)principal).getUsername());
} else {
setUserName(principal.toString());
}
pDocument = new Paymentdocument();
pOrder = new Paymentorder();
chosenContractor = new Contractor();
chosenBank = new Klbankrf();
}
public void valueContractorChanged()
{
chosenContractor = jpaBean.getContractor(Integer.valueOf(getCurContractor()));
setContractorAccounts(jpaBean.getContractorAccounts(Integer.valueOf(getCurContractor())));
pDocument.setReceiver(chosenContractor.getPnamecontractor());
}
public List getUserContractors()
{
return jpaBean.getUserContractors(userName);
}
public void valueAccountChanged()
{
chosenBank.setNamebank("SBER");
//TODO chosenBank = jpaBean.getContractorBank(getCurContractorAccount());
//TODO setChosenAccount("012345678901234567890");
}
}
So, "SBER" appear in idNameContrBank field only if I change second menu value to somethig and then change back to NoSelectOption. It is strange to me.
I use RichFaces 4, JBoss AS 6.
I've found some information at this forum, but there is no solution.
How to make second menu to change something? Or is there my mistake? Any ideas?
Thanks in advance!
I've made some experiments.
When I change second menu to some value populated with AJAX, page gets response like that:
<?xml version='1.0' encoding='UTF-8'?>
<partial-response>
<changes>
<update id="docForm:idContrAcc">
<![CDATA[<input id="docForm:idContrAcc" type="text" name="docForm:idContrAcc" style=" width : 100%;" />]]>
</update>
<update id="docForm:idNameContrBank">
<![CDATA[<textarea id="docForm:idNameContrBank" name="docForm:idNameContrBank" style=" width : 130px;"></textarea>]]>
</update>
<update id="docForm:idBikContrBank">
<![CDATA[<input id="docForm:idBikContrBank" type="text" name="docForm:idBikContrBank" style=" width : 140px;" />]]>
</update>
<update id="docForm:idAccContrBank">
<![CDATA[<input id="docForm:idAccContrBank" type="text" name="docForm:idAccContrBank" style=" width : 140px;" />]]>
</update>
<update id="javax.faces.ViewState"><![CDATA[3312710224811729695:3995303008700914422]]>
</update>
</changes>
</partial-response>
There are no values, but right IDs! How it can be? Why?
But if I return NoSelectionOption active then page gets response
<?xml version='1.0' encoding='UTF-8'?>
<partial-response>
<changes>
<update id="docForm:idContrAcc">
<![CDATA[<input id="docForm:idContrAcc" type="text" name="docForm:idContrAcc" value="" style=" width : 100%;" />]]>
</update>
<update id="docForm:idNameContrBank">
<![CDATA[<textarea id="docForm:idNameContrBank" name="docForm:idNameContrBank" style=" width : 130px;">SBER</textarea>]]>
</update>
<update id="docForm:idBikContrBank">
<![CDATA[<input id="docForm:idBikContrBank" type="text" name="docForm:idBikContrBank" style=" width : 140px;" />]]>
</update>
<update id="docForm:idAccContrBank">
<![CDATA[<input id="docForm:idAccContrBank" type="text" name="docForm:idAccContrBank" style=" width : 140px;" />]]>
</update>
<update id="javax.faces.ViewState">
<![CDATA[3312710224811729695:3995303008700914422]]>
</update>
</changes>
</partial-response>
It's seems OK - values are presented! But why does it happen when NoSelectionOption is active?!
I suspect JSF might be overwriting your attempts since it usually calls all the setters for all the properties exposed on the page and it normally does this after the valueChangeListeners are executed. I've never seen the <a4j:ajax /> tag but you could try the <a4j:support /> tag. Instead of this:
<a4j:ajax event="valueChange" listener="#{paymentOrder.valueContractorChanged}" render="idINNContractor, idKPPContractor, idNameContractor, idContractorAccounts" execute="#this"/>
Try this:
<a4j:support event="onchange" ajaxSingle="true" reRender="idINNContractor, idKPPContractor, idNameContractor, idContractorAccounts"/>
Since ajaxSingle="true" is included in the tag it means that only the setter for curContractor will be called (and not all the rest on the page like JSF normally does). Then you can call valueContractorChanged from the setter (or even just make it part of the setter).
If you replace all of the <a4j:ajax /> tags in this way you should get the desired result. Check out more info about the tag via the link above.
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.