I am experiencing a very strange issue where the space before and after an rich:comboBox
differs from that for a h:inputText. See the screenshot below. Everything is fine for the datePicker and Application ID. The spacing gets weird for the comboBox. Any ideas? -Jan
Screenshot: http://i.stack.imgur.com/Fa5qv.jpg
<h:panelGrid columns="2">
<h:outputText value="#{bundle.lblsearchapplicationId}" />
<h:inputText id="inputapplicationId" value="#{searchBean.searchApplicationCriteria.LNGAPPLICATIONID}" />
<h:outputText value="#{bundle.lblsearchdealerName}" />
<rich:comboBox suggestionValues="#{XXXglobalHelperBean.dealerNames}" directInputSuggestions="true">
<!-- <f:selectItems value="#{searchBean.searchApplicationCriteria.TXTDEALERNAME}" /> -->
</rich:comboBox>
<h:outputText id="lblsearchbusinessManagerName" value="#{bundle.lblsearchbusinessManagerName}" />
<h:inputText id="inputbusinessManagerName" value="#{searchBean.searchApplicationCriteria.TXTBUSINESSMANAGERNAME}" />
sooooooooo, I figured it out. There is a rich-combobox-shel around each comboBox. One needs to set margin and padding for this shell to the same values as for h:inputText.
.rich-combobox-shell {
position : relative;
margin-top: 2px;
margin-bottom:2px;
padding-top: 1px;
padding-bottom: 1px;
}
Related
I have a panelGrid with two columns - each one of them with a panel. Both panels have dataTables and are side by side.
<h:panelGrid id="png31" columns="2">
<p:panel id="pnlCab" header="Cabecera">
<p:commandButton value="Nueva actividad" type="button" id="actiNue" onclick="PF('wdlgAgregar').show()"/>
<br /> <br />
<p:dataTable id="dataCabecera" value="#{cargaHorariaController.listaActivDoc}">
<!-- Elements -->
</p:dataTable>
</p:panel>
<p:panel id="pnlDet" header="Detalle">
<p:commandButton value="Nueva subactividad" type="button" id="subactiNue" onclick="PF('wdlgAgregarS').show()">
<p:ajax update="cmbSubNue" listener="#{cargaHorariaController.cargarSubactividades()}" />
</p:commandButton>
<br /> <br />
<p:dataTable id="dataDetalle" value="#{cargaHorariaController.listaSubactividad}">
<!-- Elements -->
</p:dataTable>
</p:panel>
When the datatables are empty, both panels are at the top, but when one of them displays records, the panel with the empty dataTable aligns vertically to the middle of the panel with the filled dataTable.
What can I do so both panels are always at the top, even with filled dataTables?
Try:
<style type="text/css">
.my-style td{
vertical-align: text-top !important;
}
</style>
<h:panelGrid id="png31" columns="2" columnClasses="width: 40%, width: 60%"
styleClass="my-style" >
<p:panel>
........
</p:panel>
.......
.......
.......
</h:panelGrid>
Add CSS classes:
.col1 {
width: 40%;
vertical-align: top;
}
.col2 {
width: 60%;
vertical-align: top;
}
and change
<h:panelGrid id="png31" columns="2" columnClasses="col1, col2">
I am developing a Web Java Application with JSF 2.2 and PrimeFaces 6.0. I am building a p:tree and I would like to change the ui-icons color as, for example, in the next picture (the text is censoring).
My xhtml code is:
<p:tree value="#{docBean.root}" var="doc">
<p:treeNode expandedIcon="ui-icon-folder-open" collapsedIcon="ui-icon-folder-collapsed">
<h:outputText value="#{doc.name}" />
</p:treeNode>
</p:tree>
I tried with...
.ui-icon-folder-open{
color: red;
}
...but the just icon background changed to red.
Thank you!
For me the most flexible and easiest solution is to use font-awesome 'icons' for the nodes. They are not effectively icons but as the name states, fonts. So these can be changed by css. Hence their popularity and why they are also included in PrimeFaces
The PrimeFaces showcase for tree with icons shows that you can add custom icons for nodes, both the open and closed ones and also for the leaves. Luckily everything you add in the corresponding attributes client-side ends up in 'class' attributes on the html AND you can add multiple white space values in the attributes. This is what font-awesome needs, so by adding expandedIcon="fa fa-folder-open" or collapsedIcon="fa fa-folder" you can get the right icons and with a default style of .fa { color: orange} you get exactly what you want.
In a full example with changed leaves would be something like this:
<style>
.fa {
color: orange;
}
</style>
<h:form>
<p:tree value="#{treeIconView.root}" var="doc">
<p:treeNode expandedIcon="fa fa-folder-open" collapsedIcon="fa fa-folder">
<h:outputText value="#{doc.name}"/>
</p:treeNode>
<p:treeNode type="document" icon="fa fa-file-o">
<h:outputText value="#{doc.name}" />
</p:treeNode>
<p:treeNode type="picture" icon="fa fa-file-picture-o">
<h:outputText value="#{doc.name}" />
</p:treeNode>
<p:treeNode type="mp3" icon="fa fa-file-video-o">
<h:outputText value="#{doc.name}" />
</p:treeNode>
</p:tree>
</h:form>
But you can go a lot further. Look at the following image:
It is produced with the following example:
<style>
.fa {
color: orange;
}
.videoColor {
color: blue;
}
.colorOpen {
color: green;
}
.fa-file-picture-o {
color: purple;
}
.color30KB {
color: red;
}
</style>
<h:form>
<p:tree value="#{treeIconView.root}" var="doc">
<p:treeNode expandedIcon="fa fa-folder-open colorOpen" collapsedIcon="fa fa-folder">
<h:outputText value="#{doc.name}"/>
</p:treeNode>
<p:treeNode type="document" icon="fa fa-file-o">
<h:outputText value="#{doc.name}" />
</p:treeNode>
<p:treeNode type="picture" icon="fa fa-file-picture-o #{doc.size == '30 KB' ? 'color30KB' : '' }">
<h:outputText value="#{doc.name}" />
</p:treeNode>
<p:treeNode type="mp3" icon="fa fa-file-video-o videoColor">
<h:outputText value="#{doc.name}" />
</p:treeNode>
</p:tree>
</h:form>
You can add additional 'classes' in the icon attributes, but you can also use the fa classes that are already added and use that in css selectors, or you can add specific conditional 'classes' in the icons based on values etc... And since it can all be changed by css, you can not only change the color, but also the size, rotation, css animations or whatever.
I have the following code in a xhtml page using PrimeFaces:
<h:panelGroup id="dropZoneId" layout="block"
style="height:500px;width:1210px;text-align:center;">
<h:outputLabel value="Drop here" style= "color: azure;" />
</h:panelGroup>
I would like to have the <h:outputLabel> "drop here" in the middle of the <h:panelGroup> but so far I can only put it at the center at the top of the <h:panelGroup> with no css.
Can someone please help ? Thank you
Maybe this will suffice:
<h:panelGroup id="dropZoneId" layout="block" style="height: 500px; text-align: center">
<h:outputText value="Drop here" style="color: azure; position: absolute; top: 240px" />
</h:panelGroup>
.myLabel {
float: center;
}
Official Resource #Primefaces: https://forum.primefaces.org/viewtopic.php?t=14611
So I am attempting to pass object values from a bean into a primefaces datatable (using primefaces 3.4 currently), howevever I'm facing two problems with this.
1. I cannot seem to find any way to display (or represent) a boolean value within a column in a datatable. Every time I attempt this, the table returns back totally empty (even though without the boolean column the other columns are populated with data from the bean).
2. The other bigger problem (more to do with java I think than primefaces) is that I have currently 26 different Objects I get from Siebels CRM ONDemand cloud solution, each containing their own datatypes and attribute values. I cannot for the life of me figure out how to, based on a drop down selection of a specific object display that objects fields dynamically within a primefaces datatable. So far I have just managed to display some of the fields for 1 of these objects as a sort of prototype but I am having the problem with the boolean value being display also its a nightmare.
Anybody have any sort of similar experiences ? or suggestions? I've been puzzled by this for over 2 weeks now and I am going absolutely crazy!
I can provide code examples or other details if needed :)
Thanks a lot I really appreciate any help !
Reggie
Html code:
<p:panel header ="Source Environment" style="margin-bottom:5px;">
<p:dataTable draggableColumns="true" id="tableFieldSet1" value="#{ODComBean.fields}" var="tableFieldSet1" rowKey="#{ODComBean.fields}" selectionMode ="multiple" style="font-family:sans-serif; width:max-content;">
<p:panel header="OD Object Selection" style="margin-bottom:5px;">
<h:panelGrid columns="2" cellpadding="5">
<p:selectOneMenu immediate ="true" id="pickList" value="#{ODComBean.fieldSetData}" effect="fade" style="font-size: 12px; font-family:sans-serif;" >
<f:selectItems value="#{ODComBean.fieldSet}" itemLabel="#{fieldSet.objectName}" var="fieldSet"/>
<p:ajax event="change" update="#form" />
</p:selectOneMenu>
</h:panelGrid>
</p:panel>
<p:panel header ="Source Environment" style="margin-bottom:5px;">
<p:dataTable draggableColumns="true" id="tableFieldSet1" value="#{ODComBean.fields}" var="tableFieldSet1" rowKey="#{ODComBean.fields}" selectionMode ="multiple" style="font-family:sans-serif; width:max-content;">
<p:column headerText="Type" styleClass="singleLine" style="height: 10px; font-size: 8pt;">
<h:outputText value="#{tableFieldSet1.fieldType}"/>
</p:column>
<p:column headerText="Required">
<p:graphicImage value="/resources/images/tick.png" rendered="#{tableFieldSet1.readOnly}"/>
<p:graphicImage value="/resources/images/red-cross.png" rendered="#{not tableFieldSet1.readOnly}"/>
</p:column>
<p:column headerText="Name" styleClass="singleLine" style="height: 10px; font-size: 8pt;">
<h:outputText value="#{tableFieldSet1.name}"/>
</p:column>
<p:column headerText ="Display Name" styleClass="singleLine" style="height: 10px; font-size: 8pt;">
<h:outputText value="#{tableFieldSet1.displayName}"/>
</p:column>
<p:column headerText="Default Value" styleClass="singleLine" style="height: 10px; font-size: 8pt;">
<h:outputText value="#{tableFieldSet1.defaultValue}"/>
</p:column>
<p:column headerText="Generic Integration Tag" styleClass="singleLine" style="height: 10px; font-size: 8pt;">
<h:outputText value="#{tableFieldSet1.genericIntegrationTag}"/>
</p:column>
<p:column headerText ="Integration Tag" styleClass="singleLine" style="height: 10px; font-size: 8pt;">
<h:outputText value="#{tableFieldSet1.integrationTag}"/>
</p:column>
<p:column headerText ="Translations" styleClass="singleLine" style="height: 10px; font-size: 8pt;">
<h:outputText value="#{tableFieldSet1.listOfFieldTranslations}"/>
</p:column>
<p:column headerText ="Validation Error" styleClass="singleLine" style="height: 10px; font-size: 8pt;">
<h:outputText value="#{tableFieldSet1.validationErrorMsg}"/>
</p:column>
<!-- When I add the next Column it will only show data for the first line, and display a <div half tag in the last column... strange... !-->
</p:dataTable>
</p:panel>
if you want to use a h:outputText, you can set its converter to something that you implemented and inside that converter, decide about the display value.
Otherwise, if you like to view an icon according to the value,
you can do like this :
<p:column headerText="My Boolean Value">
<p:graphicImage value="/resources/images/tick.png" rendered="#{MODEL.boolean}"/>
<p:graphicImage value="/resources/images/red-cross.png" rendered="#{not MODEL.boolean}"/>
</p:column>
I hope this is helpful :)
Output panel with layout set to inline produce a <span> tag with the style class you provide.
You can for example use the jquery-ui icons provided by the framework. Like this:
<p:outputPanel layout="inline" styleClass="ui-icon ui-icon-circle-check" rendered="#{project.inBudget}" />
<p:outputPanel layout="inline" styleClass="ui-icon ui-icon-circle-close" rendered="#{!project.inBudget}" />
You could simply use a check mark symbol for true and empty String, or x symbol for false.
<p:column headerText="Required" style="text-align: center">
<h:outputText value="#{tableFieldSet1.readOnly ? '✓' : ''}"/>
</p:column>
In JSF is it possible to have a datatable displays records as follows?
[Name ][Last Name][Age]
1. John Doe 20
Extra info on record 1
2. John Smith 20
Extra info on record 2
Thank you
I'm sure there are a number of ways you could do this.
If you don't mind nesting tables, you can use the panelGrid tag and CSS.
View:
<f:view>
<h:dataTable value="#{peopleBean.people}" var="row">
<h:column id="column1">
<f:facet name="header">
<h:panelGrid columns="3" columnClasses="cell,cell,age">
<h:outputText value="First Name" />
<h:outputText value="Last Name" />
<h:outputText value="Age" />
</h:panelGrid>
</f:facet>
<h:panelGrid columns="3" columnClasses="cell,cell,age">
<h:outputText value="#{row.firstname}" />
<h:outputText value="#{row.lastname}" />
<h:outputText value="#{row.age}" />
</h:panelGrid>
<h:outputText styleClass="extra" value="#{row.extraInfo}" />
</h:column>
</h:dataTable>
</f:view>
Stylesheet:
TABLE {
width: 100%;
}
TABLE TR TD {
text-align: left;
}
.cell {
width: 40%;
}
.age {
width: 20%;
}
.extra {
background-color: silver;
padding: 4px;
display: block;
width: 100%;
}
Third libraries, such as RichFaces, allow you to do that with the principle of subTable.
You can check this example from RichFaces. It is a little more complicated compared as what you want to do, but it shows the usage of subTable component...