This question already has answers here:
How iterate over List<T> and render each item in JSF Facelets
(2 answers)
Closed 6 years ago.
I am new to JSF2 and having very less idea about front end developement.Currently i am trying to iterate over a list in a text area using JSF2? we have a list of datas like aList[bean1,bean2,bean3,....] and we have to print datas
<h:inputTextarea var ="list" value="#{Bean.value}">
row1-> datas of bean1
row2-> datas of bean2
like all the datas in the list
</h:inputTextarea>
I vahe searched a lot but did not get proper information, please help me.
If you want to display different textArea for different rows you can write as:
<h:form id="test">
<h:panelGrid value="#{testController.myRows}" var="myVar">
<h:inputTextarea value="#{myVar}"/>
</h:panelGrid>
</h:form>
Although instead of panelGrid you can use datalist also
<ace:panel id="jPanel5" style="text-align:left;border:0;width:100%;">
<h:outputLabel id="message" value="#{msgs['css.Label.message']}" styleClass="css-lebel">
</h:outputLabel>
<ice:panelSeries var="item" value="#{Bean.searchResultArea}" style="border:1px solid black;width:1150px;height:400px;overflow-y:scroll;overflow-x:scroll;">
<h:outputText value="#{item}<br/><br/>" style="white-space: nowrap;" escape="false" />
</ice:panelSeries>
</ace:panel>
I did like this and get proper output.
Related
I have a dataGrid with 2 columns and a panelGrid inside it that shows the data correctly, but it fills both columns before changing row. I need it to fill first column, with half of list content and only then go to second column and fill it with rest. It is a static list with an even number right now, but it would be best if it could be done with a dynamic sized list with possible odd total number of values. There is an answer here in SO that shows that asp has a repeatcolumn tag that (if i understood correctly) does what i need. Is there a way to do that using richfaces in jsf?
<fieldset>
<legend>Select topics:</legend>
<rich:dataGrid value="#{registerForm.topics}"
var="topic"
columns="2">
<h:panelGrid columns="2" width="430px"
columnClasses="checkTopic,labelTopic" border="0">
<h:selectBooleanCheckbox id="checkTopic"
align="left"
value="#{registerForm.SelectedTopic}"
disabled="#{not registerForm.ActiveRegister}"/>
<h:outputLabel value="#{topic.description}"
for="checkTopic" />
</h:panelGrid>
</rich:dataGrid>
<h:panelGroup rendered="#{empty registerForm.topics}"
style="color: red;">
No topics registered.
</h:panelGroup>
</fieldset
I think I should use ui:repeat, but cant figure out how. I tried using dataList and dividing the list in 2 parts and each shown in a separed row, but didnt look good, also the code feels overcomplicated than it should be.
Also this question is the same as mine, but the answer doesnt correspond exctly to what is needed and i cant comment because 50 reputation.
I need:
Value1 Value3
Value2 Value4
With the code I have(and the answer) the result is:
Value1 Value2
Value3 Value4
Well you can't change the direction of the items, but you can reorder the list so instead of [1,2,3,4,5] you'll have [1,4,2,5,3].
Alternatively you could use the rendering index (rowKeyVar) and have your bean do the math figuring out what item should be displayed (essentially ignoring the list you're passing to the component).
Solved the issue using two DataTables and the "first" attribute. Had to create "getLines" class in backend, that returns listsize/2 (roundup), because I couddnt figure out how to do it in front end (but plan on doing).
<fieldset>
<legend>Select topic:</legend>
<h:panelGrid id="topicspanel" columnClasses="topicscol,topicscol" columns="2" border="0">
<rich:dataTable value="#{registerForm.topics}"
var="topic" columns="1" rows="#{registerForm.lines}"
border="0" id="table1">
<rich:column>
<h:panelGrid columns="2" width="430px"
columnClasses="checkTopic,labelTopic" border="0">
<h:selectBooleanCheckbox id="checkTopicCol1" align="left"
value="#{registerForm.selectedTopic}"
disabled="#{not registerForm.activeRegisters}" />
<h:outputLabel value="#{topic.name}"
for="checkTopicCol1" />
</h:panelGrid>
</rich:column>
</rich:dataTable>
<rich:dataTable value="#{registerForm.topics}"
var="topic" columns="1" rows="#{registerForm.lines}"
border="0" id="table2" first="#{registerForm.lines}"
align="right">
<rich:column>
<h:panelGrid columns="2" width="430px"
columnClasses="checkTopic,labelTopic" border="0">
<h:selectBooleanCheckbox id="checkTopicCol2" align="left"
value="#{registerForm.selectedTopic}"
disabled="#{not registerForm.activeRegisters}" />
<h:outputLabel value="#{topic.name}" for="checkTopicCol2" />
</h:panelGrid>
</rich:column>
</rich:dataTable>
</h:panelGrid>
This question already has an answer here:
Using <ui:repeat><h:inputText> on a List<String> doesn't update model values
(1 answer)
Closed 5 years ago.
When i use index with outputText, anything is OK.
<ui:repeat id="topTenGrd" var="dream" value="#{dreamModifyBean.topDreams}" varStatus="status">
<h:outputText class="dream-title uppercase" value="#{status.index}" />
</ui:repeat>
But i change outputText -> inputText then when click any button on screen , the error PropertyNoWritableException occured.
<ui:repeat id="topTenGrd" var="dream" value="#{dreamModifyBean.topDreams}" varStatus="status">
<h:inputText class="dream-title uppercase" value="#{status.index}" />
</ui:repeat>
Any idea why?
Try this.
JAVA:
String indexs[] = new String[10]; // Need encaptulation
UI:
<ui:repeat id="topTenGrd" var="dream" value="#{dreamModifyBean.indexs}" varStatus="status">
<h:inputText class="dream-title uppercase" value="#{dream}" />
</ui:repeat>
I've got two MeterGaugeChartModel from Primefaces. Currently one is underneath the other, but I want them to get next to each other. How can I do that?
<p:panel header="Capacity Charts">
<p:meterGaugeChart id="CPUchart" value="#{chartBean.meterGaugeModelCPU}"
showTickLabels="false" labelHeightAdjust="110" intervalOuterRadius="130"
seriesColors="66cc66, 93b75f, E7E658, cc6666" style="width:400px;height:250px"
title="CPU" label="percentage (%)"/>
<p:meterGaugeChart id="RAMchart" value="#{chartBean.meterGaugeModelRAM}"
showTickLabels="false" labelHeightAdjust="110" intervalOuterRadius="130"
seriesColors="66cc66, 93b75f, E7E658, cc6666"
style="width:400px;height:250px"
title="RAM" label="percentage (%)"/>
</p:panel>
I think you are looking for the solution that #kolossus proposes. On the showcase website of Primefaces you can find many examples of such an solution, like the first example.
<p:panel header="Capacity Charts">
<h:panelGrid columns="2">
<p:meterGaugeChart id="CPUchart" ... />
<p:meterGaugeChart id="RAMchart" ... />
</h:panelGrid>
</p:panel>
This will add all child elements of the panelGrid to the next column. So adding another <p:meterGaugeChart /> will add it to the first column of the row below.
First of all, #kolossus proposes an excellent JSF-style solution: enclose your components in a panel grid. I would have done it that way as well.
If you don't want any extra JSF components you can use a very simple CSS: add float:left to both meter gauge components and add an extra <div style="clear:both">:
<p:panel header="Capacity Charts">
<p:meterGaugeChart id="CPUchart" style="float:left;" ... />
<p:meterGaugeChart id="RAMchart" style="float:left;" ... />
<div style="clear:both"></div>
</p:panel>
i am trying to make image and text display at same line by using JSF tag. is there any way to do that? oringinal code is like following but image and text always displays in 2 lines.
<rich:modalPanel id="Busy" autosized="true" zindex="2000">
<h:outputText value="Submitting..."></h:outputText>
<h:graphicImage value="images/loading.gif" />
</rich:modalPanel>
You can try this
<rich:modalPanel id="Busy" autosized="true" zindex="2000">
<h:panelGrid columns="2">
<h:outputText value="Submitting..."></h:outputText>
<h:graphicImage value="images/loading.gif" />
</h:panelGrid>
</rich:modalPanel>
The will arrange all its child elements in a table, containing the specified number of columns (2 in this case).
h:panelGrid
The best solution is to define the line directly in the CSS properties:
<h:outputText value="Submitting..." styleClass="loading"/>
and in your CSS:
.loading {
background-image: url('images/loading.gif');
}
then, you will have to adapt your CSS class to display correctly your image.
Can any one help me to display a label in a single line?
In my UI there is a field called check funding period
but it is getting displayed in 3 lines like:
check
funding
period
what can i do so that it will display like
check funding period (in single line)
in jsf?
Not really a JSF question, just a CSS question.
Ensure that the label gets the CSS style white-space:nowrap; either via the style or styleClass attributes.
Looks to me like you have your output in a column of a table and have not made sure the column is wide enough. Use the columnClasses attribute of the dataTable to specify a css column style and make sure it is wide enough for your output. ie:
<rich:dataTable id="curfDataTable"
columnClasses="column40percent,column20percent,column40percent"
rowClasses="rowFirst,rowSecond" value="#{accessCurfMBean.unowned}"
var="curf" styleClass="tableInfo">
Much the same for when using the panelGrid layout.
<h:panelGrid id="panel" columns="2" border="1" columnClasses="column40percent,column60percent">
and in your css:
.column20percent {
width: 20%;
}
.column40percent {
width: 40%;
}
.column60percent {
width: 60%;
}
What I usually do is I wrap them in a h:panelGrid tag like this:
<h:panelGrid columns="3">
<h:outputText value="check" />
<h:outputText value="funding" />
<h:outputText value="period" />
</h:panelGrid>
If the html output from this is too messy for you, then I would consider doing like this:
<h:outputText value="#{Messages.check Messages.funding Messages.period}" />
Or simply:
<h:outputText value="Check funding period" />
As I said in the comment tho it really depends on what tags your using and what your wrapping them in. This may just be a simple CSS problem.
Another possible easy solution for this problem is the <nobr> tag.
Put <nobr> before your label area, and </nobr> at the end of it..
<nobr>
<h:outputText value="check" />
<h:outputText value="funding" />
<h:outputText value="period" />
</nobr>
Your problem solved!! :-)