ADF input text
the label 1 word will appear on the left hand side can i change it to appear on
the right hand side.
You could use 2 outputTexts or panelLabelMessage (one left, the other on the right) and render (visible or rendered) to correct one using some EL.
You can use a inputText without label and OutputText with your label name and surround these two components with PanelLabelAndMessage.
<af:panelLabelAndMessage label="" id="p1">
<af:inputText label="" id="it1"/>
<af:outputText value="Your Label Name" id="ot1"/>
</af:panelLabelAndMessage>
<af:panelFormLayout id="pfl1">
<af:panelGroupLayout id="pgl3" layout="horizontal">
<af:inputText label="" id="it1"/>
<af:outputText value="label1" id="ot1"/>
</af:panelGroupLayout>
Related
This question already has answers here:
commandButton/commandLink/ajax action/listener method not invoked or input value not set/updated
(12 answers)
Closed 6 years ago.
I fill a carousel with datas from an array. And I'd like to change the datas of the array with the datas which are set in the carousel.
<h:form id="newConditionPanelForm">
<p:panelGrid id="newConditionPanelGrid">
<p:row>
<p:column colspan="2"><h2>Define conditions</h2></p:column>
</p:row>
<p:row>
<p:column>
<p:outputLabel value="Condition Name:" />
</p:column>
<p:column>
<h:outputText value="#{priceManagementMB.conditions.name}"></h:outputText>
</p:column>
</p:row>
<p:row>
<p:column colspan="2" style="text-align:center; width:100%">
<p:carousel id="priceCarousel"
value="#{priceManagementMB.prices}" headerText="Price per hour"
var="priceEdit"
numVisible="1"
style="width:100%"
circular="true"
binding="#{carousel}"
responsive="true">
<h:panelGrid columns="1">
<p:row>
<p:column colspan="2">
<h:outputText value="#{carousel.rowIndex + 1}h00" />
</p:column>
</p:row>
<p:row>
<p:column>
<h:outputText value="Price during given Hour: " />
</p:column>
<p:column>
<p:inplace id="inplacePrice" emptyLabel="click here to edit">
<p:inputText id="priceEdit" value="#{priceEdit}">
</p:inputText>
</p:inplace>
</p:column>
</p:row>
</h:panelGrid>
</p:carousel>
</p:column>
</p:row>
</p:panelGrid>
<h:commandButton value="Submit conditions" update="newConditionPanelGrid"
validateClient="true" action="#{priceManagementMB.updateCondition}">
</h:commandButton>
</h:form>
The elements in the inputtext that are in the carousel aren't submitted to the backing bean and I can't use them.
What do I do wrong ? How could I get the datas without transmitting them an actionPropertyListner in a link or button? An event like blur would work too but I don't know how to put it in use, I need the Index and the new Value. The array has a lenght of 24, one for each hour of the day.
JSF after submit try to call proper setter. You don't provide details about prices type but I'm guessing that you use some class from java.lang (Float, Double).
So then when you use value="#{priceEdit}" JSF try to use setPriceEdit on Double, Float. In details it is explained here How does EL #{bean.id} call managed bean method bean.getId()
The solution is to used your class with setter (take a look at What is the best data type to use for money in java app?). If this class has no setter you always can write your own class (wrapper) with proper setter.
Simple example:
class MoneyWrapper {
private YourMoneyType value;
public setValue(YourMoneyType value){
this.value = value;
}
public YourMoneyType getValue(){
return this.value;
}
}
Than in your bean you can use array contains elements of MoneyWrapper. And finally use it in view like this value="#{priceEdit.value}"
I am using primeface 3.5 where I have datatable with check box column.Among different columns i have a column with amount and when i check any row then i have to calculate 15% of that amount and show the result in another column .My data table is like this:
<p:dataTable id="tblExamPaymentSlip" style="width:1200px;"
value="#{examPaymentSlipMB.paymentSlipList}"
selection="#{examPaymentSlipMB.tempList}"
rowIndexVar="rowsn" var="paymentSlip" rowKey="#{paymentSlip.paymentSlipId}" >
<p:ajax event="rowSelectCheckbox" listener="#{examPaymentSlipMB.addAmt}" process="tblExamPaymentSlip" update="dedId" />
<p:column>
<f:facet name="header">
<h:outputText value="Payment" />
</f:facet>
<h:outputText value="#{paymentSlip.offPaymentMasterModel.paymentAmount}" />
</p:column>
<p:column selectionMode="multiple" headerText="Tax"></p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Deduction" />
</f:facet>
<f:facet name="output">
<p:inputText id="dedId" value="#{paymentSlip.deductionAmt}" />
</f:facet>
</p:column>
</p:dataTable>
Problem is that deduction amount is set in the model class but is not displayed in data table.My managed bean code is like this.
Managed bean:
public void addAmt(SelectEvent event) {
ExamPaymentSlipModel obj =(ExamOfficialModel)event.getObject();
for (ExamPaymentSlipModel examPaymentSlipModel : tempList) {
if (obj.equals(examPaymentSlipModel)) {
examPaymentSlipModel.setDeductionAmount((15*examPaymentSlipModel.getOffPaymentMasterModel().getPaymentAmount())/100);
}
}
}
How can i display the amount ? Can any one help with this.
When I am putting my fields in panelFormLayout ,It is showing elemnts in below format
1 4
2 5
3 6
But I want the fields should be in below format
1 2
3 4
5 6
Can some one point the correct way to do this.
Code
<af:panelFormLayout id="pfl1" fieldWidth="150" labelWidth="150" labelAlignment="start" rows="3" maxColumns="2">
<af:inputText label="1" id="it1"/>
<af:inputText label="2" id="it2"/>
<af:inputText label="3" id="it2"/>
<af:inputText label="4" id="it2"/>
<af:inputText label="5" id="it2"/>
<af:inputText label="6" id="it2"/>
</af:panelFormLayout>
You can group the inputText fields by row, using one panelFormLayout per row:
<af:group id="g1">
<af:panelFormLayout id="pfl21" rows="1" maxColumns="2"
labelAlignment="start" fieldWidth="150"
labelWidth="150">
<af:inputText label="first" id="it21"/>
<af:inputText label="second" id="it23"/>
</af:panelFormLayout>
<af:panelFormLayout id="pfl22" rows="1" maxColumns="2"
labelAlignment="start" fieldWidth="150"
labelWidth="150">
<af:inputText label="third" id="it25"/>
<af:inputText label="fourth" id="it22"/>
</af:panelFormLayout>
<af:panelFormLayout id="pfl23" rows="1" maxColumns="2"
labelAlignment="start" fieldWidth="150"
labelWidth="150">
<af:inputText label="fifth" id="it24"/>
<af:inputText label="sixth" id="it26"/>
</af:panelFormLayout>
</af:group>
For a proper vertical alignment of the labels and the input fields, it is just necessary to set the fieldWidth and the labelWidth to reasonable values, but you did this already in your code.
See also Controlling tab order in an ADF Form.
I created dynamic table and also created dynamic textInputs:
XML Below:
<af:forEach items="#{myRowController.myList}" var = "myItem">
<af:column headerText="#{myItem}" width="104" attributeChangeListener="#{test.column_attributeChangeListener}">
<af:inputText value="" id="tt01"/>
</af:column>
</af:forEach>
</af:table>
Problem is:
Created inputTexts have same id and I entered value doesn't set table inputText's
I want to enter values into table and submit all values into table.
<af:table value="#{viewScope.ScheduleActivityBean.rows}"
autoHeightRows="0" varStatus="rwst" var="row" rendered="true"
id="t1" width="100%">
<af:forEach items="#{viewScope.ScheduleActivityBean.columnNames}"
varStatus="colIndex" var="name">
<af:column align="left" headerText="#{name}" width="250px" id="col1"
rendered="#{colIndex.index eq 0}">
<af:inputText id="i7" readOnly="true"
contentStyle="width:170px;font-weight:bold;color:rgb(49,49,49);"
value="#{row.activity}"/>
<af:column align="center" headerText="#{name}" width="120px"
id="co1_${rwst.index}" >
<af:inputText id="it27" readOnly="true"
value="#{row.scheduleName}"
/>
Table data is fetched from viewScope.ScheduleActivityBean.rows
Column names are retrieved from viewScope.ScheduleActivityBean.columnNames
input text values has references as row.scheduleName and row.activity where is row is an element or object of ScheduleActivityBean.rows arraylist(table data).
You can write similar logic for your requirement .
I am looking at picking a date in Primefaces Mobile with "calendar" component:
<p:calendar value="#{bean.date}" pattern="MM/dd/yyyy HH:mm" />
The calendar pops up but it looks very odd. It overlaps the page content in a transparent way.
Is there a work around for this issue? Or a way to get it pop up correctly inside a dialog? Maybe to combine another framework with Primefaces?
By the way, the dialog seems not to work too in Primefaces Mobile.
Thanks
Primefaces Mobile is really great and is still under development but it doesn't implement Jquery mobile extensions like "datebox". I find a way to combine both. I included the jquery-datebox library in the header of a JSF page (see link):
<f:view xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:pm="http://primefaces.prime.com.tr/mobile"
xmlns:p="http://primefaces.prime.com.tr/ui"
contentType="text/html">
<pm:page title="Faces">
<f:facet name="postinit">
<h:outputStylesheet library="css" name="jquery.mobile-1.0b3.min.css" />
<h:outputStylesheet library="css" name="jquery.mobile.datebox.min.css" />
<h:outputScript library="primefaces" name="mobile/mobile.js" />
<h:outputScript library="js" name="jquery.mobile.datebox.min.js" />
</f:facet>
<!-- Main View -->
<pm:view id="main" swatch="b">
<pm:header title="Hello">
<f:facet name="left">
<pm:button value="Back" icon="back" role="back"/>
</f:facet>
</pm:header>
<pm:content>
<h:form id="myform">
<h:outputText value="Input: " />
<h:inputText id="input" />
</h:form>
</pm:content>
<label for="mydate">Date: </label>
<input name="mydate" id="mydate" type="date" data-role="datebox" value="#{mybean.date}"
data-options='{"mode": "calbox"}' />
<div data-role="fieldcontain">
<label for="slider">Duration: </label>
<input type="range" name="slider" id="slider"
value="#{mybean.duration}" min="1" max="10" />
</div>
<pm:content>
<h:form id="Form">
<pm:field>
<h:outputLabel for="duration" value="duration: "/>
<pm:slider id="duration" min="1" max="10" value="#{mybean.duration}"/>
</pm:field>
</h:form>
</pm:content>
</pm:view>
</pm:page>
</f:view>
The datepicker works well but both sliders inside and outside a pm-view (see the code) are displayed like normal inputs!
Any suggestions? Thanks
PS: #administrator: a new tag is needed: "Primefaces-mobile"