how could I add an icon to a component p:panel?
<p:panel header="text" />
Unfortunately it does not support an "icon" attribute.
So I tried this:
<f:facet name="header">
<h:outputText value="text">
</h:outputText>
<p:commandLink styleClass="ui-icon ui-icon-comment" />
</f:facet>
But this adds a linebreak between the text and the command Link which only shows up as an icon.
Does someone know how I could else do this?
ty
The reason the icon is causing the text below it to shift downwards is because the ui-icon class has a display: block style that causes the image to greedily consume the line and push the text down. The following header facet will build a 2 column table around the image and text forcing the header to display them both side by side.
<f:facet name="header">
<h:panelGrid columns="2">
<span class="ui-icon ui-icon-comment" />
<h:outputText value="text" />
</h:panelGrid>
</f:facet>
This is the way you can add an icon to a panel component:
<p:panel header="the header text you want">
<f:facet name="actions">
<p:commandLink
styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default">
<h:outputText styleClass="ui-icon ui-icon-help" />
</p:commandLink>
</f:facet>
</p:panel>
Related
In an application based on JSF 2.1 and Primefaces 6.0, I am trying to add a tooltip to the header of a datatable.
In my current solution, the tooltip appears only when pointing the mouse precisely on the text title ("Projekttyp"). I need the tooltip to appear whenever the mouse pointer is in the column header. Unfortunately, it is not possible to assign an id to the facet header.
I understand that the global tooltip as described here Primefaces Showcase Tooltip can only be used in higher Versions of JSF (JSF 2.2).
Here is my code:
<p:column sortBy="#{d.auftraggeber.typ}" filterBy="#{d.auftraggeber.typ}" field="auftraggeber.typ"
filterFunction="#{filterController.filterByString}" filterable="true" sortable="true"
width="6%" styleClass="#{Constants.STRING_COL_STYLE_CLASS}">
<f:facet name="filter">
<p:inputText onkeyup="clearTimeout(window.customFilterDelay);window.customFilterDelay=setTimeout(function() {PrimeFaces.getWidgetById('#{component.parent.parent.clientId}').filter();},1500)"
value="#{sucheForm.filter.typFilter}"
tabindex="1"
styleClass="input-filter #{Constants.NO_DIRTY_CHECK_STYLE_CLASS}">
<p:ajax event="keyup" update="#(.updateableFromTableFilter)" delay="1500" />
</p:inputText>
</f:facet>
<f:facet name="header">
<h:outputText id="typColumntitle" title="Projekttyp" value="Projekttyp"/>
<p:tooltip id="typTooltip"
for="typColumntitle"
rendered="true"
myPosition="left bottom" atPosition="right bottom"
hideDelay="500">
<p:scrollPanel style="width: 300px;height:200px">
<p:dataTable id="projektTypTable" var="typ" value="#{projekttypListProducer.typAndDescList}">
<p:column headerText="Projekttyp" width="30%">
<h:outputText value="#{typ.inhalt}"/>
</p:column>
<p:column headerText="Bemerkung" width="70%">
<h:outputText value="#{typ.bemerkung}"/>
</p:column>
</p:dataTable>
</p:scrollPanel>
</p:tooltip>
</f:facet>
<h:outputText value="#{d.auftraggeber.typ}"/>
</p:column>
Add the f:facet tag like the above and it will work fine (I mean tooltip value will be displayed); if you hover your mouse anywhere inside the column header.
Even outside the text in the column header.
<p:column id= "keyColumnId">
<f:facet name="header">
<h:outputText value="YOUR COLUMN HEADER" />
<p:tooltip value="TOOLTIP VALUE TO SHOW" for="keyColumnId" />
</f:facet>
</p:column>
PrimeFaces supports 'jquery' selectors in the for attribute of the p:tooltip. You effectively need to select the 'parent' of the element with id typColumntitle, so this will (most likely) work.
<p:tooltip id="typTooltip"
for="#(#typColumntitle:parent)"
rendered="true"
myPosition="left bottom" atPosition="right bottom"
hideDelay="500">
Solving this problem turned out to be easy in the end. I just had to assign an id to the column <p:column id="columnwithtooltip" and adjust the for="columnwithtooltip" in the tooltip accordingly:
<p:column id="projekttypColumn" sortBy="#{d.auftraggeber.typ}" filterBy="#{d.auftraggeber.typ}" field="auftraggeber.typ"
filterFunction="#{filterController.filterByString}" filterable="true" sortable="true"
width="6%" styleClass="#{Constants.STRING_COL_STYLE_CLASS}">
<f:facet name="filter">
<p:inputText onkeyup="clearTimeout(window.customFilterDelay);window.customFilterDelay=setTimeout(function() {PrimeFaces.getWidgetById('#{component.parent.parent.clientId}').filter();},1500)"
value="#{sucheForm.filter.typFilter}"
tabindex="1"
styleClass="input-filter #{Constants.NO_DIRTY_CHECK_STYLE_CLASS}">
<p:ajax event="keyup" update="#(.updateableFromTableFilter)" delay="1500" />
</p:inputText>
</f:facet>
<f:facet name="header">
<h:outputText id="typColumntitle" title="Projekttyp" value="Projekttyp"/>
<p:tooltip id="typTooltip"
for="projekttypColumn"
rendered="true"
myPosition="left bottom" atPosition="right bottom"
hideDelay="500">
<p:scrollPanel style="width: 300px;height:200px">
<p:dataTable id="projektTypTable" var="typ" value="#{projekttypListProducer.typAndDescList}">
<p:column headerText="Projekttyp" width="30%">
<h:outputText value="#{typ.inhalt}"/>
</p:column>
<p:column headerText="Bemerkung" width="70%">
<h:outputText value="#{typ.bemerkung}"/>
</p:column>
</p:dataTable>
</p:scrollPanel>
</p:tooltip>
</f:facet>
<h:outputText value="#{d.auftraggeber.typ}"/>
</p:column>
I'm using the component <p:panel>
If we take the Advanced Panel as an example, is there any way that makes me able to add an icon at the left of the text "About Barca"?
You can extend the header using <f:facet name="header">
<f:facet name="header">
<h:panelGrid columns="2">
<span class="ui-icon" />
<h:outputText value="About Barca" />
</h:panelGrid>
</f:facet>
You can use a span element plus CSS customization or the p:graphicImage component.
This is the way you can add an icon to a panel component:
<p:panel header="the header text you want">
<f:facet name="actions">
<p:commandLink
styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default">
<h:outputText styleClass="ui-icon ui-icon-help" />
</p:commandLink>
</f:facet>
</p:panel>
i am currently using a pannel grid to display some data retrived from a database, this is working fine, the layout is not perfect but it displays all of the correct data, however i am wanting to use a datatable for looks more than anything, i have tried to use the outputText from the pannel grid but when i run the page it just says no data found, but on the same page the same code displays the data in the pannel grid
what am i doing wrong ?
this is the code for the working pannel grid
<!-- heading -->
<f:facet name="header">
User Details
</f:facet>
<h:outputText value="#{bundle.ViewUserdetailsLabel_id}"/>
<!-- adding in a small effect here that will fade a message when a user hovers over the id number or username -->
<h:outputLink id="id1" value="#">
<h:outputText id="id" value="#{userdetailsController.selected.id}" title="#{bundle.ViewUserdetailsTitle_id}"/>
</h:outputLink>
<p:tooltip for="id" value="This is your I.D. Number" showEffect="fade" hideEffect="fade" />
<h:outputText value="#{bundle.ViewUserdetailsLabel_username}"/>
<h:outputLink id="username1" value="#">
<h:outputText id="username" value="#{userdetailsController.selected.username}" title="#{bundle.ViewUserdetailsTitle_username}"/>
</h:outputLink>
<p:tooltip for="username" value="Your registered username, this can be changed" showEffect="fade" hideEffect="fade" />
</p:panelGrid>
and here is the not working datatable
<p:dataTable>
<p:column >
<f:facet name="header">
<h:outputText value="{bundle.ViewUserdetailsLabel_id}"/>
</f:facet>
<h:outputText value="{userdetailsController.selected.id}" />
</p:column>
<p:column headerText="username" >
<f:facet name="header">
<h:outputText value="{bundle.ListUserdetailsTitle_username}"/>
</f:facet>
<h:outputText value="{userdetailsController.selected.username}" />
</p:column>
</p:dataTable>
as you can see the outputText values are the same so it should work right ?
thanks
If you happen to have only few hardcoded values to display in a form of a table, then you are better off using <h:panelGrid>. If you however have a list of objects that you want to iterate over and display them quickly then use <p:dataTable>.
Let's say we have a List of employees
<p:dataTable var="employee" value="#{tableBean.employees}">
<p:column headerText="Name">
<h:outputText value="#{employee.name}" />
</p:column>
<p:column headerText="Age">
<h:outputText value="#{employee.age}" />
</p:column>
<p:column headerText="Sex">
<h:outputText value="#{employee.sex}" />
</p:column>
</p:dataTable>
then your table would look like this. var in this case is completely arbitrary, you could for instance call it 'fluffy' if you wanted. There are a lot of settings you can use with dataTable like pagination, export, sorting etc. But I suggest you familiarize yourself with Primefaces showcase
How can I align a graphicImage which will come as an element as a column in the middle .Now It is left aligned. I tried a lot but it will not work.
<p:column>
<f:facet name="header">
<h:outputText value="Status" />
</f:facet>
<h:graphicImage value="../resources/images/Yellow_button.png"
style="float:center;height: 18px; width: 20px"
rendered="#{categorey.status == 1}" title="READY TO ZIP"/>
<p:column>
You can align the table cell content for the whole column:
<p:column style="text-align: center">
<f:facet name="header">
<h:outputText value="Status" />
</f:facet>
<h:graphicImage value="../resources/images/Yellow_button.png" />
</p:column>
In order to separate the layout you can use the styleClass attribute referencing a class from a css resource as well.
I have a form which contains a list in a datatable. To add a New record to the list, click "Add" and the dialog box <p:dialog> appears, in that any empty datatable with 2 columns having two input text boxes to fill. In the dialog box I have Save and Cancel buttons. Once we click on Save button, a new record should saved into the database and the list in the form should show with the new record. The datatable is of primefaces inline row editing functionality. I'm using growl to display the error messages. Once I update my record with empty data, it shows the required message. But when I click on the Add button, it is again showing the same required message. It is showing the previous error. I don't want to have that. Could anyone help me in this context. The "Add" is an ajax request.
<h:body>
<ui:composition template="/WEB-INF/facelets/template/adminLayout.xhtml">
<ui:define name="view">
<h:form id="myForm" prependId="false">
<div class="header" >
<div class="titleColor">
T_COD_Prefil
</div>
</div>
<div class="divPosition">
<p:dataTable var="profile" id="profileTable" value="#{profileView.profileModelList}" rowEditListener="#{profileView.rowEditListener}" onRowEditUpdate="buttonPanel" >
<p:column style="width:60px;">
<p:rowEditor/>
<h:commandButton style="padding-left:5px;" image="/resources/images/delete.jpeg" styleClass="spa" value="delete" immediate="true" actionListener="#{profileView.delete}" >
<f:attribute name="delteProfile" value="#{profile}" />
</h:commandButton>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="IDprefil" />
</f:facet>
<h:outputText value="#{profile.profileId}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="description" />
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{profile.profileDescription}" />
</f:facet>
<f:facet name="input">
<h:inputText required="true" requiredMessage="#{msg.desProfileEmpty}" maxlength="255" value="#{profile.profileDescription}" />
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
</div>
<div class="divButPosition">
<h:panelGroup id="buttonPanel">
<p:commandButton id="buttons" value="Add" actionListener="#{profileView.addEmptyProfile}"
async="true" update="myForm" rendered="#{!profileView.addNewRow}" oncomplete="profileDialog.show();" />
</h:panelGroup>
</div>
<p:growl id="growl" showDetail="false" />
<p:dialog id="profileDialog" header="Profile Detail" prependId="false" widgetVar="profileDialog" resizable="false" width="500" showEffect="explode" hideEffect="explode" modal="false" closable="false">
<h:dataTable var="newProfile" value="#{profileView.newProfile}">
<h:column>
<f:facet name="header">
<h:outputText value="IDprefil" />
</f:facet>
<h:inputText value="#{newProfile.profileId}" required="true" requiredMessage="not empty" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="description" />
</f:facet>
<h:inputText value="#{newProfile.profileDescription}" required="true" requiredMessage="Desctiption should not be empty" />
</h:column>
</h:dataTable>
<p:commandButton value="Save" actionListener="#{profileView.saveProfile}" async="true" update="growl,buttonPanel,profileTable" oncomplete="handleRequest(args ,document.getElementById('profileDialog'))" />
<p:commandButton value="Cancel" immediate="true" update="buttonPanel" async="true" actionListener="#{profileView.cancelProfile}" oncomplete="profileDialog.hide();" />
</p:dialog>
</h:form>
Try writing your growl at the top of the code, and update it when clicking on the button.
Well, doesn't work on IE8.
After submit button click, all fields will be validated first so, if some of them empty then requried message will be popup. So keep submit related data under different tag. Basically different forms for different submit buttons