I would like update a chart size with the change of the browser's window if it's possible.
It is my code:
<b:column col-xs="12" col-md="12" >
<p:chart widgetVar="foo" type = "pie" model="#{graphicBean.pieModel}" rendered="#{not empty graphicBean.pieModel}"/>
</b:column>
The <p:chart> supports responsive mode. Set it to 'true'. The following line is from Primefaces documentation.
In responsive mode, chart is redrawn when window is resized
<p:chart type="line" model="#{chartView.lineModel1}" style="height:300px;" responsive="true"/>
Please refer this for an example.
Related
i'm using primefaces to generated some barcodes (in cod128 format), the primefaces tags works pretty well but the client want the output image (with the codes) at some specific size (1cm of height and 8cm of width), so that's the question:
How i can show a fixed output of the generated barcode at some specific size?
Here is some snippet of my code:
<h:body>
<p:panelGrid columns="2">
<h:outputText value="Code128" />
<p:barcode value="0123456789" type="code128"/>
</p:panelGrid>
</h:body>
i'm using this for reference: http://www.primefaces.org/showcase/ui/multimedia/barcode.xhtml
Thanks :)
The primefaces tag allows you to change the width and height of the component:
<p:barcode value="0123456789" type="code128" width="Xpx;" height="Ypx;"/>
since the size you need is "cm", I would suggest you look for a converter on the web.
You can control and fix the output's size by using the dimensions' attributes of <p:barcode>'s tag, so that you don't need extra CSS/JS improvements :
<p:barcode value="0123456789" type="code128" height="38px" width="302px" />
View:
<p:dialog header="Search in code tables" widgetVar="dlg" resizable="true">
<p:selectOneMenu id="tableId" value="#{xxx.tableId}"
required="true" label="tableId">
<f:selectItems value="#{xxx.tables}" ></f:selectItems>
</p:selectOneMenu>
The z-index for the dialog causes the menu options to hide behind it.
I am following standard example from Primefaces showcase:
http://www.primefaces.org/showcase/ui/overlay/dialog/loginDemo.xhtml
This appears to be a know n issue
http://forum.primefaces.org/viewtopic.php?f=3&t=33972
Can someone suggest a proper fix.
okay I have managed to figure this out.
I was missing a appendTo telling which component to append the select:
<p:selectOneMenu id="tableId" value="#{xxx.tableId}"
required="true" label="tableId" appendTo="#this" >
This fixes the z-index as well as adding a scrollbar to the drop down.
I have not been able to find this anywhere so posting this self answer.
Try to use panelStyle for selectOneMenu.
Using appendTo = "#this" may cause something like this:
You could use panelStyle = "position:fixed" instead.
Regards.
Our project use JSF 2.2 primeface 5.1.
I have a toggleable panel, the collapse attribute set to true.
<p:panel id="panel1" toggleable="true" collapsed="true">
...
</p:panel>
How can I set a p:hotkey in the jsf page to change the attribute collapsed to false ?
At a basic level, you can expand the pane with:
<p:hotkey bind="ctrl+s" handler="thePanelWidgetVar.expand();" />
If what you really want is to toggle the state of the panel, you could just call the collapse() and expand() on the panel directly. Obviously, you need to check the current state of the panel to determine what to call. You can collapse it all into the following script:
<script>
function togglePanelState (thePanel){
if(thePanel.cfg.collapsed){
thePanel.expand();
}else{
thePanel.collapse();
}
}
</script>
You could then use togglePanelState thus
<p:hotkey bind="ctrl+s" handler="togglePanelState(thePanelWidgetVar);" />
EDIT:
Thanks to Hatem Alimam for pointing out that a convenience method similar to my implementation of togglePanelState exists out of the box in PF 5.1, in the form of a toggle() function. Using that, you could then have instead:
<p:hotkey bind="ctrl+s" handler="PF('thePanelWidgetVar').toggle();" />
This is the code in the body of my .xhtml file. The bars were showing before (I don't remember changing anything significant) but now just the value is displayed.
<p:progressBar value="#{bean.value}" labelTemplate="{value}%" styleClass="animated"/>
<p:progressBar id="progress" interval="100" rendered="true" ajax="true" value="#{bean.value}" widgetVar="pbAjax" labelTemplate="{value}%" style="width:300px; font-size:12px"/>
The second bar is derived from this answer but the problem still remains the same.
<p:progressBar value="50" labelTemplate="{value}%" displayOnly="true"/>
This is the code from primefaces, which also does not show up as a bar but just as a value.
I would appreciate it you could clarify if I have some major misunderstanding of how the progressBar works.
Use Firebug or your browser's WebDevelopment Tools to check if the progressbar is properly rendered:
Check for Javascript Errors
Is the right CSS Style applied or are you overwriting primefaces css classes?
Are you using your own JQuery Version? It can come to conflicts between your JQuery and Primefaces' one.
I am developing a Seam-Jsfv1.2-EJB3 web app.
I have a datatable and checkboxes in each row. Moreover, I have a datascroller at the bottom of my table as well.
My problem is when I click the next page number from the scroller, the selected checkboxes at the first page of the datatable is gone. I mean, even if they were selected, clicking the next page make them deselected. I see it by going back to the first page again by clicking the scroller.
Do you have any idea about that problem?
In order to clearify my case, I attached my code below:
<rich:dataTable
id="apiV2ProductList" rows="10" var="_apiV2Product"
value="#{apiV2ProductList.resultList}"
rendered="#{not empty apiV2ProductList.resultList}" reRender="ds">
<rich:column>
<f:facet name="header">
<h:selectBooleanCheckbox id="selectionCheckAll" onclick="selectAll()" />
</f:facet>
<h:selectBooleanCheckbox id="selectionCheck" onclick="increase(this)" value="#{_apiV2Product.selectValue}" >
</h:selectBooleanCheckbox>
</rich:column>
...
<f:facet name="footer">
<rich:datascroller id="ds" renderIfSinglePage="false">
</rich:datascroller>
</f:facet>
Many thanks in advance.
Baris
You can extend the org.richfaces.renderkit.html.DatascrollerTemplate
write your own DataScroller for your own styling by adding a component with the below configuration in faces-config.xml
<component>
<component-type>exCustHtmlDatascroller</component-type>
<component-lass>org.jsf.common.ui.EXCustHtmlDatascroller</component-class>
</component>
<render-kit>
<renderer>
<component-family>org.richfaces.Datascroller</component-family>
<renderer-type>exCustDataScrollerTemplate</renderer-type>
<renderer- class>org.jsf.common.ui.EXCustDataScrollerTemplate</renderer-class>
</renderer>
</render-kit>
Adding an a4j support tag between scroller has solved my problem:
<f:facet name="footer">
<rich:datascroller id="ds" renderIfSinglePage="false">
<a4j:support event="onpagechange"/>
</rich:datascroller>
</f:facet>
However the other thing is, I am using JQuery to style my table (ex. on mouse over and out), and this time, when I click the next page of my table, the style is gone.
Any help would be great, many thanks in advance.
**
PS: BTW the wierest thing to my mind is it comes me impossible to find a solution by yourself for this kind of problems. Your creation may not always be enough to solve (at least here in my example, adding a4j:support thing) I am asking experts, how can we handle that kind of things by ourselves...
**
You don't need jQuery for styling the datatable
<rich:dataTable id="dataTable" var="x"
onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
The problem you were seeing with the styles being removed is due to the nature of AJAX, and the way the table is reRendered.
Assuming you were firing the initial styling call based on some form of page onLoad, the first time the page is rendered, your styles will be applied. However, when you click the "next" button with the paginator, you are pulling a lot of new HTML down, and replacing the old HTML in the table with the newer, updated information. The proble you're seeing is that you saw styling because jQuery applied styles to the old nodes, upon reRender, those nodes are completely thrown away, along with their styling. You simply need to figure out the hook to call the "styling" method, and re-execute that call after the table is re-rendered.
Generally, I use an a4j:status tag, and set up the onstart or onstop to re-parse the table.