I have this simple JSF table which is use to display data from Database and also to edit data.
<table>
<ui:repeat var="ud" value="#{DCProfileTabGeneralController.dcData}">
<tr>
<td>Datacenter Type</td>
<td>
<h:outputText value="#{ud.type}"
rendered="#{not DCProfileTabGeneralController.editable}" />
<h:inputText value="#{ud.type}" rendered="#{DCProfileTabGeneralController.editable}" />
</td>
</tr>
<tr>
<td>Date Added</td>
<td>
<h:outputText value="#{ud.dateAdded}"
rendered="#{not DCProfileTabGeneralController.editable}" />
<h:inputText styleClass="datepicker" value="#{ud.dateAdded}" rendered="#{DCProfileTabGeneralController.editable}" />
</td>
</tr>
<tr>
<td>Hour Added</td>
<td>
<h:outputText value="#{ud.hourAdded}"
rendered="#{not DCProfileTabGeneralController.editable}" />
<h:inputText value="#{ud.hourAdded}" rendered="#{DCProfileTabGeneralController.editable}" />
</td>
</tr>
<tr>
<td>Date Deployed</td>
<td>
<h:outputText value="#{ud.dateDeployed}"
rendered="#{not DCProfileTabGeneralController.editable}" />
<h:inputText styleClass="datepicker" value="#{ud.dateDeployed}" rendered="#{DCProfileTabGeneralController.editable}" />
</td>
</tr>
<tr>
<td>Hour Deployed</td>
<td>
<h:outputText value="#{ud.hourDeployed}"
rendered="#{not DCProfileTabGeneralController.editable}" />
<h:inputText value="#{ud.hourDeployed}" rendered="#{DCProfileTabGeneralController.editable}" />
</td>
</tr>
</ui:repeat>
</table>
Now I want to extend the table in this way. When the Boolean flag is true I want to display the text in 12px. When the Boolean flag is false I want to display the text in 20 px. Is this possible in JSF?
You can simply use an EL expression to set the appropriate CSS style:
<table id="idTable"
style="font-size: #{DCProfileTabGeneralController.editable ? '12px' : '20px' }">
Related
I am developing a complex table with nodes and many rows by node. I would like add f:facets to f:facet for my table.
I have this.
I would like this.
<h:form id="formPartes">
<h:panelGroup id="pgPartes">
<p:treeTable id="tablaPartes" class=" validate tablaNormal" style="border:none;" value="#{estrategiaBean.nodoProyecto}" var="parte">
<p:column headerText="Nombre">
<h:outputText value="#{parte.nombre}" />
<h:panelGroup id="agregarParteHija#{generalBean.unir(parte.nombre)}">
<h:commandLink action="#{estrategiaBean.cargarNuevaParte(parte)}">
<f:ajax render=":formNuevaParte:pgNuevaParte" execute="agregarParteHija#{generalBean.unir(parte.nombre)}"/>
<i class="material-icons small">add</i>
</h:commandLink>
</h:panelGroup>
</p:column>
<p:column headerText="Ts...">
<ui:repeat value="#{estrategiaBean.funcionesDeParte(parte)}" var="atributo">
<table>
<thead>
<tr>
<ui:repeat value="#{atributo.obtLista('TAM_Ciclo')}" var="atributo3">
<th class="ui-state-default">
#{atributo3.atributo}
</th>
</ui:repeat>
</tr>
</thead>
<tbody>
<tr>
<ui:repeat value="#{atributo.obtLista('TAM_Ciclo')}" var="atributo3">
<td>
<h:inputText value="#{atributo3.valor}"/>
</td>
</ui:repeat>
</tr>
</tbody>
</table>
</ui:repeat>
</p:column>
</p:treeTable>
<h:panelGroup>
</h:form>
Please, help me with xhtml code.
I have designed a jsf page and my scenario is to render output panel based on changing the dopdown in selectonemenu. My problem here is required=true in inputtext box. It dosnt allow other components to render and when i give value in textbox , then it allows the selectonemenu to render . What is the mistake i have done.Please can someone solve my problem
Code
<a4j:outputPanel id="thapalSection" >
<ui:fragment>
<fieldset style="table-layout: fixed;">
<legend>#{msg.lbl_post_offSect}</legend>
<table border="0" cellpadding="1" cellspacing="15" width="100%"
style="border-width: 1px;border-spacing: 1px;border-style: solid;border-color:#c2c2c2">
<tr>
<td align="left" width="20%">#{msg.lbl_SenDTo}<span>
<font color="red"><b>*</b></font></span>
</td>
<td align="left" colspan="3" width="30%">
<a4j:outputPanel id="tapalSectionSendToPanel">
<h:inputText id="sendToId" value="#{DataBean.kabalSectionBean.sendTo}" class="createresizedTextbox"
readonly="true" required="true" requiredMessage="#{msg.labl_required}" />
<h:message for="sendToId" style="color:red" />
</a4j:outputPanel>
</td>
</tr>
<tr>
<td align="left" width="20%" >#{msg.lbl_lettRef}</td>
<td align="left" width="34%" >
<a4j:outputPanel id="letterReferenceIDPAnel">
<h:inputText id="lettRefId" value="#{DataBean.kabalSectionBean.letterFileRefNo}"
class="createresizedTextbox" required="true" requiredMessage="#{msg.labl_required}" immediate="true"/>
<h:message for="lettRefId" style="color:red" />
</a4j:outputPanel>
</td>
</tr>
<tr>
<td>#{msg.lbl_Sender_type}</td>
<td>
<a4j:outputPanel id="senderTypePanel" >
<h:selectOneMenu value="#{DataBean.kabalSectionBean.senderType}" class="createresizedTextbox" id="senderTypeID">
<a4j:ajax event="change" render="thapalSection internalPanel" listener="#{FileTrackAction.selectSenderType}" />
<f:selectItem itemValue="--select--" itemLabel="--Select--" />
<f:selectItem itemValue="internal" itemLabel="Internal" />
<f:selectItem itemValue="external" itemLabel="External" />
<f:validator validatorId="org.gov.tnwrd.bean.validation.DropdownValidation" />
</h:selectOneMenu>
<h:message for="senderTypeID" style="color:red" />
</a4j:outputPanel>
</td>
</tr>
<a4j:outputPanel id="internalPanel" >
<ui:fragment rendered="#{DataBean.kabalSectionBean.sendTypeIntEnabled==true}" >
<tr>
<td align="left" width="20%" >#{msg.lbl_office_name}</td>
<td align="left" width="34%">
<h:inputText id="internalType" value="#{DataBean.kabalSectionBean.officeName}" class="createresizedTextbox" readonly="true" />
</td>
<td align="left" width="17%" >#{msg.lbl_type_letter}</td>
<td align="left">
<h:selectOneMenu class="createresizedTextbox" value="#{DataBean.kabalSectionBean.typeOfletter}">
<f:selectItem itemValue="--" itemLabel="--Select--" />
<f:selectItem itemValue="ordinaryLetter" itemLabel="Ordinary Letter" />
<f:selectItem itemValue="doLetter" itemLabel="D.O Letter" />
<f:selectItem itemValue="confidentialLetter" itemLabel="Confidential Letter" />
<f:selectItem itemValue="OtherLetter" itemLabel="Other Letter" />
</h:selectOneMenu>
</td>
</tr>
</ui:fragment>
</a4j:outputPanel>
</table>
</fieldset>
</ui:fragment>
</a4j:outputPanel>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellspacing="1" cellpadding="15" width="100%" border="0">
<tr>
<td></td>
<td colspan="6" align="right">
<div class="buttons">
<a4j:commandButton id="addThapal" value="#{msg.btn_send}" type="button" render="thapalPanel savePopUp" action="#{FileTrackAction.saveThapalDetails}" oncomplete="if(#{DataBean.kabalSectionBean.statusCode eq 'Success'}) #{rich:component('savePopUp')}.show();"/>
<a4j:commandButton id="clearId" value="#{msg.btn_clear}" render="thapalPanel" action="#{FileTrackAction.clearTapalSection}" type="button" />
</div>
</td>
</tr>
</table>
</a4j:outputPanel>
The problem is, that the validation fails. This causes JSF to interrupt its lifecycle and jump from validation directly to rendering without changing anything in between.
I don't know exactly when you set DataBean.kabalSectionBean.sendTypeIntEnabled but you can check that this value will not be set to true and thus your panel will not be changed.
You have different options here. Either you can use the immediate="true" attribute to skip validation, or you can use execute="list of components you want to execute". Execute means, that the data will be sent to the backing bean, will be validated and the setXXX(...) methods will be called for this input. Here you would NOT list the required field and thus its validation won't be a problem.
If you use execute="#none" it has the same effect like immediate="true".
Hello I have a problem with the following code. The Validator works correctly and everything is fine, my only problem is that the error messages for the validation are not displayed. Am I missing something or the problem is with the popup?
<rich:popupPanel id="popup" modal="true" height="280" width="200" resizeable="true" onmaskclick="#{rich:component('popup')}.hide()">
<f:facet name="header">
<h:outputText value="Simple popup panel" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#" onclick="#{rich:component('popup')}.hide(); return false;"> X </h:outputLink>
</f:facet>
<h:form id="newmssform">
<table class="position">
<tr>
<td>
<h:outputText class="output_text" value="New MSS Name:"/>
</td>
</tr>
<tr>
<td>
<h:inputText id="mssusernamefield" value="#{NetworkBean.newMss}">
<f:validator validatorId="NewMssValidator"/>
<f:attribute name="mssaddressfield" value="#{mssaddressfield}"/>
</h:inputText>
<h:message for="mssusernamefield" errorClass="errors"/>
</td>
</tr>
<tr>
<td>
<h:message for="mssusernamefield" errorClass="errors"/>
</td>
</tr>
<tr>
<td>
<h:outputText class="output_text" value="IP Address:"/>
</td>
</tr>
<tr>
<td>
<h:inputText id="mssaddressfield" value="#{NetworkBean.address}" binding="#{mssaddressfield}"/>
<h:message for="mssaddressfield" errorClass="errors"/>
</td>
</tr>
<tr>
<td>
<h:outputText class="output_text" value="User:"/>
</td>
</tr>
<tr>
<td>
<h:inputText id="mssuserfield" value="#{NetworkBean.mssUser}" />
</td>
</tr>
<tr>
<td>
<h:outputText class="output_text" value="Password:"/>
</td>
</tr>
<tr>
<td>
<h:inputSecret id="msspwdfield" value="#{NetworkBean.mssUserPass}" />
</td>
</tr>
<tr>
<td>
<a4j:commandButton style="border-radius: 5px; color: #FF6E00; font-weight: bold; font-size: 12px; margin-top: 5px;" value="Add New MSS"render="table,mss_table,oldIP" action="#{NetworkBean.addNewMss()}" />
</td>
</tr>
</table>
Here is the validator:
public void validate(FacesContext fc, UIComponent uic, Object o) throws ValidatorException {
String mssName = o.toString();
UIInput addressComponent = (UIInput)uic.getAttributes().get("mssaddressfield");
String address = addressComponent.getSubmittedValue().toString();
UIInput userNameComponent = (UIInput) uic.getAttributes().get("mssaddressfield");
String userName = userNameComponent.getSubmittedValue().toString();
UIInput passwordComponent = (UIInput) uic.getAttributes().get("mssaddressfield");
String password = passwordComponent.getSubmittedValue().toString();
if(mssName.isEmpty() || address.isEmpty() || userName.isEmpty() || password.isEmpty()){
addressComponent.setValid(false);
userNameComponent.setValid(false);
passwordComponent.setValid(false);
throw new ValidatorException(
new FacesMessage("Error!"));
}
}
As my prediction your message not rerender ontime
for h:message change code like below example
<a4j:outputPanel ajaxRendered="true">
<h:message for="mssusernamefield" errorClass="errors"/>
<a4j:outputPanel>
this may help you
FacesMessage consists of two Strings: summary and detail. When you call new FacesMessage("Error!") you're setting up the summary.
h:message's default behaviour is to show the detail, but not the summary. You can either tell it to show the summary: showSummary="true" or provide the detail in the FacesMessage: new FacesMessage("Error!", "Validation produced an error.")
I have this JSF table which I use to display data and to edit data:
<table>
<ui:repeat var="ud" value="#{DCProfileTabGeneralController.dcData}">
<tr>
<td>Datacenter Type</td>
<td>
<h:outputText value="#{ud.type}"
rendered="#{not DCProfileTabGeneralController.editable}" />
<h:inputText value="#{ud.type}" rendered="#{DCProfileTabGeneralController.editable}" />
</td>
</tr>
<tr>
<td>Date Added</td>
<td>
<h:outputText value="#{ud.dateAdded}"
rendered="#{not DCProfileTabGeneralController.editable}" />
<h:inputText styleClass="datepicker" value="#{ud.dateAdded}" rendered="#{DCProfileTabGeneralController.editable}" />
</td>
</tr>
<tr>
<td>Hour Added</td>
<td>
<h:outputText value="#{ud.hourAdded}"
rendered="#{not DCProfileTabGeneralController.editable}" />
<h:inputText value="#{ud.hourAdded}" rendered="#{DCProfileTabGeneralController.editable}" />
</td>
</tr>
<tr>
<td>Date Deployed</td>
<td>
<h:outputText value="#{ud.dateDeployed}"
rendered="#{not DCProfileTabGeneralController.editable}" />
<h:inputText styleClass="datepicker" value="#{ud.dateDeployed}" rendered="#{DCProfileTabGeneralController.editable}" />
</td>
</tr>
<tr>
<td>Hour Deployed</td>
<td>
<h:outputText value="#{ud.hourDeployed}"
rendered="#{not DCProfileTabGeneralController.editable}" />
<h:inputText value="#{ud.hourDeployed}" rendered="#{DCProfileTabGeneralController.editable}" />
</td>
</tr>
</ui:repeat>
</table>
This solution works fine but I want to extend it this way: I want to click on button which sets the edit flag to true. When I move the mouse over the value of the table the outputText to change to inputText.
And one more simple question. How I can add bottom padding to all fields globally?
I suggest you to use Richfaces library and use <rich:inplaceInput> component as below.
<rich:inplaceInput value="hhhh" editEvent="onmouseover"/>
However if you still like to stick to javascript this is a concept.
<h:form id="myForm">
<h:outputText value="aaa" id="outText"/><br/>
<h:inputText value="aaa" style="display:none;" id="inText" />
</h:form>
This is the javascript code
<script>
window.onload = function() {
var outputText = document.getElementById("myForm:outText");
var inputText = document.getElementById("myForm:inText");
outputText.onmouseover = function() {
outputText.style.display = 'none';
inputText.style.display = '';
}
inputText.onblur = function() {
outputText.style.display = '';
inputText.style.display = 'none';
}
};
</script>
Since you are using a ui:repeat, you should change the javascript code accordingly.
I have input fields and datatable in the same page, in such a way that when user adds a new data, data should be added to the datatable without refreshing the page.
To achieve this I tried the following code
xhtml part
<table border="0">
<tr>
<td width="700" height="100px">Customer Name: <h:inputText
immediate="true" id="customername" autocomplete="false" value="#{salesBean.customerName}">
</h:inputText>
</td>
</tr>
<tr>
<td width="900" height="160px">
<table border="1">
<tr>
<td align="left">Product Name</td>
<td align="left">Rate</td>
<td align="left">Quantity</td>
<td align="left">Total Price</td>
<td align="left">Paid</td>
<td align="left">Date of Sales</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><h:inputText immediate="true"
id="productname" autocomplete="false" value="#{salesBean.productName}">
</h:inputText></td>
<td align="left"><h:outputText id="rate"
binding="#{salesBean.productRate}" /></td>
<td align="left"><h:inputText size="2"
onkeyup="return calculateTotalRate(event);" id="quantity" value="#{salesBean.quantity}"/></td>
<td align="left"><h:outputText id="totalprice" /></td>
<td align="left"><h:selectOneRadio id="sor"
title="Select any one of the choice" value="#{salesBean.paidFlag}">
<f:selectItem id="si1" itemLabel="Yes" itemValue="yes" />
<f:selectItem id="si2" itemLabel="No" itemValue="no" />
</h:selectOneRadio></td>
<td align="left"><rich:calendar id="salesDate" value="#{salesBean.salesDate}"></rich:calendar></td>
<td align="center">
<h:commandButton value="Submit">
<a4j:support action="#{salesBean.submit}" reRender="table"></a4j:support>
</h:commandButton>
<h:commandButton value="Cancel" /></td>
</tr>
</table>`
</td>
</tr>
<tr>
<td>
<h:outputText id="errormessage" style="display:inline-block;color:Red;width:300px;"/>
</td>
</tr>
<tr>
<td>
<h:panelGroup id="panel">
<rich:dataTable var="data" id="table" binding="#{salesBean.table}" rendered="#{salesBean.salesHistoryRendered}">
<h:column>
<f:facet name="header">
<h:outputText value="Product Name"/>
</f:facet>
<h:outputText value="#{data.productName}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Date of Sale"/>
</f:facet>
<h:outputText value="#{data.dateOfSales}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Is Paid?"/>
</f:facet>
<h:outputText value="#{data.paidCheck}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Quantity?"/>
</f:facet>
<h:outputText value="#{data.quantity}"/>
</h:column>
</rich:dataTable>
<h:outputText id="text" binding="#{salesBean.checkValueChangeListener}"/>
</h:panelGroup>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
Please help me to solve this. Please update me if my question is not clear.
I am using JSF 1.2 and Richfaces 3.3.2
Thanks in advance
You have missed event attribute in a4j:support. Should be like this (disableDefault="true" is to prevent h:commandButton standard behavior):
<h:commandButton value="Submit">
<a4j:support event="onclick" disableDefault="true" action="#{salesBean.submit}" reRender="table"/>
</h:commandButton>
Or even better like this (will do the same as the lines above, but in more a4j-style):
<a4j:commandButton value="Submit" action="#{salesBean.submit}" reRender="table"/>
"Without refreshing the page" means AJAX.
RichFaces 3.3 has AJAX support, and their documentation explains how to use it in chapters 5.1 through 5.7.