my problem is really strange ( to me at least ).
I have a dialog written in Primefaces.
From the beginning I had the problem that the fields have not been shown, I had to mark them so that I could read the content.
Then I wrote a css styleclass: color black in order to have it shown. This really worked ( for IE and Chrome ). Afterwards, I had to enlarge the columns from 2 to 4 because the dialog became unreadable. Now, the same thing happens again, I cannot read all the fields, here is a screenshot. Maybe, someone knows what I am missing here? Thank you very much.
Here is the code:
<h:form id="form">
<p:dialog header="Transaction Detail" widgetVar="transactionDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="transactionDetail" style="text-align:left;">
<p:panelGrid columns="4" rendered="#{not empty transactionBacking.selectedTransaction}" columnClasses="label,value">
<h:outputText styleClass="outputText" value="Transaction Id" />
<h:outputText value="#{transactionBacking.selectedTransaction.tableTransactionId}"/>
<h:outputText styleClass="outputText" value="Customer - customerId" />
<h:outputText value="#{transactionBacking.selectedTransaction.customer.customerId}"/>
</p:panelGrid>
</p:outputPanel>
</p:dialog>
</h:form>
</ui:define>
I did a workaround. I wrote
style="color: black"
instead of
styleclass="outputText"
I think there are some problems with our CSS´ but I have to investigate that much more.
Related
In developing a webpage, I'm adjusting a Primeface table with a search field at the top. The search field is supposed to work searching for the content of almost all columns in accordance to what the user types. The following is an image of the table now:
In order for the top field to work as intended, it seems there is a need to activate each desired column's search system (better understanding can be seen in Primeface's own show case page). Those fields, though, are visually undesired and so have been hidden in the .css file with the code
.filter_box{
width: 0px;
height: 0px;
opacity: 0 !important;
}
As a result, the search field isn't showing anymore, but the space where it lies continues leading to a design problem (see image above: the red square at the left points out the space where the hidden space field is and the arrow at the right points out the desired design).
As a newbie in web developing, my question is: how can I use the search system, not show it and not leave such design flaws behind? Is it possible to use my search field at the top fully without using Primeface's search system? (I tried simply erasing that part in the column's configuration, but it didn't work since the search field at the top stop showing the results)
As complement, here is my code now:
<ui:composition template="/logged_template.xhtml">
<ui:define name="content">
<h:form id="hidden_misc">
<h:inputHidden value="#{equipMiscBean.setList(usuariosBeanCrt.usuario.nivelAcesso, usuariosBeanCrt.usuario.empresas)}" />
</h:form>
<h:form id="misc">
<p:panel styleClass="tabela_view" visible="#{dash_menu.get_menu_access(usuariosBeanCrt.usuario,'4')}" >
<p:dataTable
id="equip_table"
value="#{equipMiscBean.list_equip}"
widgetVar="itensTable"
var="item"
emptyMessage="Itens não encontrados"
filteredValue="#{equipMiscBean.list_equip_filtered}" >
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Busca: " />
<p:inputText id="globalFilter"
onkeyup="PF('itensTable').filter()"
style="min-width: 200px"
placeholder="Entre com a palavra chave"/>
</p:outputPanel>
</f:facet>
<!--Column Equipamento-->
<p:column
headerText="Equipamento"
filterBy="#{item.nome}"
filterMatchMode="contains"
filterable="true" >
<f:facet name="filter">
<p:inputText
onchange="PF('itensTable').filter()"
disabled="true"
class="filter_box"
/>
</f:facet>
<h:outputText value="#{item.nome}"/>
</p:column>
...
<!--Column Details-->
<p:column
headerText="Detalhes"
style="width: 80px; text-align: center;" >
<h:outputFormat class="ui-button" value="#{item.linkTable}" escape="false" />
</p:column>
</p:dataTable>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
I managed to solve the problem. This was done by adding rendered="false" to the search field facet's specification.
<f:facet name="filter">
<p:inputText
onchange="PF('itensTable').filter()"
disabled="true"
rendered="false"
/>
</f:facet>
With that done, the .css change with filter_box is no longer required and the search system works correctly.
Here is an simplified code sample, for what I'm trying to do. A text entered above in an inputTextArea is correctly displayed (with Line Breaks).
Below, in the dataTable, the same text is displayed without Line breaks.
<h:form id=myInputText#{id}>
<h:inputTextarea id="myInputText" value="#{form.textWithLinebreaks}"/>
</h:form>
<h:form id=myOutput>
<rich:dataTable
id="myTable"
value="#{form.model}"
var="f"
style="table-layout: fixed;"
styleClass="wordWrap"
rows="5">
<a4j:support event="onRowClick"
action="#{action.selectText(f)}"
immediate="true" reRender="myInputText#{id}" />
<rich:column>
<f:facet name="header">
TextShouldHaveLineBreaks
</f:facet>
<h:outputText value="#{f.text}"/>
</rich:column>
</rich:dataTable>
</h:form>
Things I tried to fix this:
<h:outputText value="#{f.text}" style="white-space: pre-wrap"/>
doesn't Change anything.
I also tried using a readonly inputTextArea as a workaound:
<rich:column>
<f:facet name="header">
TextShouldHaveLineBreaks
</f:facet>
<h:inputTextarea value="#{f.text}" style="white-space: pre-wrap" readonly="true"/>
</rich:column>
This doesn't help either, and will require lots of css to look just like all other columns.
Just in case this is relevant: My application runs on Seam with Richfaces 3.3.
I faced a problem with primefaces and tooltip on a single cell column.I was not able to use it so I searched the web and I found many answer like this one. the first answer did not solved the problem, infact that did nothing at all and the second one gave me error at runtime, telling me that it cannot find the righ object in the page.
So,how can i use a tooltip on a single cell of a table for each row?
I'm using primefaces 5.1, jsf 2.2, java 1.6.
despite many answers that suggest you to use primefaces extensions, the only thing you have to do to see your tooltip is to use primefaces itself like this:
<p:tooltip id="toolTipGrow" value="#{row.property}" shared="true" for="idField" showEffect="clip" position="top"/>
where idField is the id from which you want to see the tooltip appear and row.property is the value that you want to show into it.
the thing is now simple to make. here it is an example with the datatable:
<p:dataTable var="row" value="#{....}" styleClass="myTable">
<p:column headerText="Header 2">
<h:outputText value="#{row.value2}" id="idField" />
<p:tooltip id="toolTipGrow" value="#{row.property}" shared="true" for="idField" showEffect="clip" position="top"/>
</p:column>
</p:dataTable>
I hope this will help.
Best Regards
Yes its possible. See..
<p:column>
<f:facet name="header">
<h:outputText
id="header"
value="Header"
/>
<p:tooltip
for="header"
showEffect="fade"
hideEffect="fade"
>
<!-- content of tooltip for header -->
</p:tooltip>
</f:facet>
<h:outputText
id="col"
value="#{object.valueA}"
/>
<p:tooltip
for="col"
showEffect="fade"
hideEffect="fade"
>
<!-- content of tooltip for cell -->
</p:tooltip>
</p:column>
In my scenario, I have all my data in cells inside h:outputText elements.
In that case, you can then use the title attribute.
<p:column>
<h:outputText value="#{row.data}" title="#{row.data}"/>
</p:column>
I use the dynamic overlayPanel of primefaces inside one p:tab inside one p:dialog like this :
<p:dialog id="dialog" modal="true" header="Nouveau Article"
widgetVar="dlg">
<h:form prependId="false" enctype="multipart/form-data">
<p:tabView id="monpanel">
<p:tab id="tab1" title="Informations">
....
</p:tab>
<p:tab id="tab2" title="Prix">
....
</p:tab>
<p:tab id="tab3" title="Stock et fournisseurs">
<h:outputLabel value="" /><h:outputLabel value="" /><h:outputLabel value="" />
<p:commandButton id="carBtn" value="Selectionner Fournisseurs" type="button" />
<p:overlayPanel appendToBody="true" my="left top" id="carPanel" for="carBtn" hideEffect="fade"
dynamic="true">
<p:dataTable id="table" var="car" rowKey="#{car.fournisseurId}"
value="#{articlesMB.listfournisseurs}" selection="#{articlesMB.selectedFournisseurs}"
rows="10" paginator="true" >
<p:column selectionMode="multiple" style="width:20px" />
<p:column headerText="Id">
<h:outputText value="#{car.fournisseurId}" />
</p:column>
<p:column headerText="Nom">
<h:outputText value="#{car.personne.nom}" />
</p:column>
</p:dataTable>
</p:overlayPanel>
</p:tab>
</p:tabView>
<p:commandButton id="article-ajouter"
update=":messages monpanel :articlesdata"
action="#{articlesMB.ajouter}" value="add" />
</h:form>
</p:dialog>
in the first time it works fine, but when I click on the add button and the validation failed (for any cause) and I click on dynamic button of overlaypanel, it appears but when I check or uncheck one of rows of datatable it disappear, I don't know the cause
do you have any idea how to resolve this problem
You cammandButton should use 'process' attribute, you specify component to submit info(not specify overlay).
For ex:
<p:inputText id="txttest" required="true" value="" />
<p:commandButton process="txttest" id="article-ajouter"
update=":messages monpanel :articlesdata"
action="#{articlesMB.ajouter}" value="add" />
The reason your overlay panel only works once is because you update the panel that holds the command button that overlayPanel is attached to.
It is a bug in overlayPanel emerged after PF 5. You can fix this without resorting process attribute, I think solutions like this reduces the readability of the code.
If you define a widgetVar to overlayPanel, say 'carPanelWDG', and call PF('carPanelWDG').loadContents() function in the onComplete event of the command button everything just works. And even if there is no comment explaining the reason why you did such a thing, anyone can interpret this easily.
I've got a weird bug when editing a date field using a Calendar component inside of an editable DataTable. To explain, I'm going to need to show you some pictures.
First, here is the actual page I'm working from:
Now, let's change date 1 in the list to the 13th of February and click OK.
As you can see, the table changes, but the row takes on another row's data.
Other than in the GUI, the update's gone just fine, and if we reload the page the date has been updated in the database. This is what the table looks like after the page has been refreshed:
I've turned the code inside and out trying to get at this bug, and I'm starting to wonder if it's a bug in PrimeFaces itself. I've stepped through the entire workflow and have concluded that the backing ArrayList has the correct values at all times. I was thinking it may have had something to do with me sorting the list both when fetching it from the database and using the sortBy attribute of the DataTable. After disabling both however, the bug continues to manifest itself.
Here's my code for the page. Can anyone see anything I've done wrong? If so, you're my hero =)
<ui:composition template="/WEB-INF/standard-page-template.xhtml">
<ui:define name="title">Change Dates</ui:define>
<ui:define name="content">
<p:panel header="Change dates" style="width:760px">
<h:form>
<p:panel>
Just the search stuff here...
</p:panel>
<p:panel header="Search">
<h:panelGrid columns="1">
<p:dataTable id="listDatesTable" value="#{view.dateWrappers}" var="wrapper"
rowIndexVar="index" editable="true"
emptyMessage="Search for an ID above">
<p:ajax event="rowEdit" listener="#{changePublishDateView.changeDate}"/>
<p:column headerText="Dragning" width="90">
<h:outputText value="#{wrapper.id}"/>
</p:column>
<p:column headerText="Beskrivning" width="180">
<h:outputText value="#{wrapper.description}"/>
</p:column>
<p:column headerText="Distribution" width="100">
<h:outputText value="#{wrapper.id2}"/>
</p:column>
<p:column headerText="Publiceringstid" width="170" styleClass="#{view.duplicateDateInRow(wrapper)}">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{wrapper.newhDate}">
<f:convertDateTime pattern="yyyy-MM-dd HH:mm"/>
</h:outputText>
</f:facet>
<f:facet name="input">
<p:calendar
mindate="#{view.minDate}" stepMinute="30" minHour="8" maxHour="22"
pattern="yyyy-MM-dd HH:mm" value="#{wrapper.newDate}"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column width="50">
<p:rowEditor/>
</p:column>
</p:dataTable>
</h:panelGrid>
</p:panel>
</h:form>
</p:panel>
</ui:define>
As it turns out, this bug was due to the data in the individual rows being mostly identical.
Solution: Set a rowKey attribute on the datatable, to the date field. Now it works fine with or without sorting.
http://www.developer.am/primefaces/?page=RowKey