I want to change the width of my picklist instead of having the default width in primefaces.css
I have tried this but it doesn't work.
<h:body>
<f:facet name="last">
<h:outputStylesheet library="default" name="mystyle.css" />
</f:facet>
<p:pickList ...>
...
</p:picklist>
</h:body>
And in my mystyle.css I've only this:
.ui-picklist .ui-picklist-list{
width:400px !important;
}
Your CSS is apparently never being loaded. If you have checked the generated HTML output and/or the HTTP traffic monitor, you should have noticed it. The culprit is the <f:facet name="last"> which isn't supported by <h:body>. It's only supported by <h:head> and even then only when PrimeFaces is installed.
This should do:
<h:body>
<h:outputStylesheet library="default" name="mystyle.css" />
<p:pickList ...>
...
</p:pickList>
</h:body>
See also:
How do I override default PrimeFaces CSS with custom styles?
Related
Following the instructions given on the PrimeFaces getting-started page, I am seeing an odd rendering from SelectOneMenu. It doesn't look the way I'd expect. Does anyone know why?
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:body>
<h:form>
<p:selectOneMenu id ="selectOneMenuCategorie" value="#{selectOneController.categorieSelected}" >
<f:selectItem itemLabel="Select One" noSelectionOption="true"/>
<f:selectItems value="#{selectOneController.categorieList}"
var = "c" itemLabel="#{c.libelle}" itemValue="#{c}"/>
<f:ajax render="selected_item1"/>
</p:selectOneMenu>
<h:outputText id="selected_item1" value="#{selectOneController.categorieSelected.libelle}"></h:outputText>
</h:form>
</h:body>
</html>
You should add
<h:head>
</h:head>
tag to your xhtml page.
The <h:head> is a JSF component which provides a hook to programmatically include JavaScript and CSS resources in the generated HTML <head>. PrimeFaces uses it to include the necessary JS/CSS code for the Ajax works and fancy look'n'feel.
As a test, create a page with a <h:head> and a PrimeFaces component, open the page in the webbrowser and check the generated HTML source by rightclick - View Source. You'll see that several JSF and PrimeFaces specific JS/CSS files are been added. Now replace <h:head> by <head> and check the generated HTML source once again, you'll see nothing this time.
I have the following code on my xhtml page to override default PrimeFaces styling:
<h:body>
<f:facet name="last">
<h:outputStylesheet library="css" name="main.css" />
</f:facet>
...
</h:body>
This works fine when I am using a stylesheet, that is stored locally on my server.
The Problem is, that I want to include a external (dynamic) stylesheet. So when I am changing the <h:facet> to something like the following, it doesn't work anymore.
<f:facet name="last">
<link type="text/css" rel="stylesheet" href="http://host.de/main.css" />
</f:facet>
If I include the <link> element directly into the <h:head> section of my xhtml page the stylesheet is loaded but the rules get overridden by PrimeFaces.
In the next step I would like to set the href attribute dynamic from my ManagedBean to something like this:
<link type="text/css" rel="stylesheet" href="#{bean.cssUrl}" />
Is this even possible? Or is there another way to achieve what I am describing? Any help is appreciated. Thanks in advance.
EDIT:
I tried in Internet Explorer, Firefox and Chrome (each latest version) and none is working. If I use <h:outputStylesheet name="http://host.de/test.css"> instead of <link> I get RES_NOT_FOUND and status code 404.
<facet name="last"/> for stylesheets should only be used in <h:head/> that is where your stylesheets should end up anyway. If you load them last in your body, you can get weird manifestations in the look and feel of your ui. While loading and building the page and having some slower connections or a busy server, the PF stylesheet is used and when finished loading, your custom css kicks in. This might cause reflows, color changes abd what more
I got it working. The solution was to remove the surrounding <f:facet> element and directly put the <link> under <h:body>:
<h:body>
<link type="text/css" rel="stylesheet" href="#{bean.cssUri}"></link>
...
</h:body>
With this solution I am also able to set the URL of the external stylesheet dynamically in the #PostConstruct method of my ManagedBean (scope is #ViewScoped).
EDIT:
It may be working but #Kukeltje's answer is cleaner and more accurate. I was using <f:facet name="last"> wrong.
Updated code snippet:
<h:head>
<f:facet name="last">
<link type="text/css" rel="stylesheet" href="#{bean.cssUri}"></link>
</f:facet>
</h:head>
In Eclipse, I find no way to format code the way I need to for JSF, XHTML, HTML or XML files like can be configured for Java.
I have found the following part-solutions:
JSF Code formatter or Eclipse XML Editor, each tag for new line?
However, just placing attributes on the next line, indenting them by one is not enough:
<p:spinner
id="multi-trade-adjust-count"
value="#{bulkTradeManager.count}"
title="Number of trades to create"
maxlength="2"
size="1"
min="1"
max="50"
styleClass="bx-spinner mb-5px"
style="width: 60px;">
<p:ajax
listener="#{bulkTradeManager.onCountChange}"
process="#this"
update=":content-form:data-panel" />
</p:spinner>
I am so unhappy with it, that I end up using no JSF formatters at all. What I'm desparately looking for is a result like this:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:of="http://omnifaces.org/functions"
xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions">
<p:dataTable id="multi-data-add"
value="#{bulkTradeManager.dataModel}"
var="trd"
rowIndexVar="rowIndex"
rowKey="#{trd.id}"
editable="true"
editMode="cell"
rowStyleClass="#{bulkTradeManager.lastNonRemovableIndex le rowIndex ? 'ui-state-highlight' : ''}"
styleClass="mb-10px mr-10px">
<p:ajax event="cellEdit"
listener="#{bulkTradeManager.onCellEdit}"
update=":content-form:msgs" />
<p:ajax event="sort" />
<p:column headerText="#{msg['common.active.header']}"
rendered="#{bulkTradeManager.showingConstantColumns}"
styleClass="text-center">
<h:outputText value="#{trd.active ? msg['common.yes.label'] : msg['common.no.label']}" />
</p:column>
<p:column headerText="#{msg['entity.trade.transactionNbr.shortHeader']}"
rendered="#{bulkTradeManager.showingConstantColumns}">
<h:outputText value="#{trd.transactionNbr}" />
</p:column>
<p:column headerText="#{msg['entity.trade.referenceNbr.shortHeader']}"
sortBy="#{trd.referenceNbr}">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{trd.referenceNbr}" />
</f:facet>
<f:facet name="input">
<p:inputText id="reference-number-input"
value="#{trd.referenceNbr}"
styleClass="width-190px" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="#{msg['entity.trade.quantity.header']}/#{msg['common.nominal.header']}*"
sortBy="#{trd.quantity}">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{trd.quantity}">
<f:convertNumber maxIntegerDigits="126" pattern="#,###,##0.########" />
</h:outputText>
</f:facet>
<f:facet name="input">
<p:inputText id="quantity-input"
value="#{trd.quantity}"
required="false"
requiredMessage="#{msg['entity.trade.quantity.requiredMessage']}"
maxlength="50"
styleClass="width-190px">
<pe:keyFilter regEx="/[0-9,.]/i" />
<f:convertNumber maxIntegerDigits="126" pattern="#,###,##0.########" />
</p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
...
This means, on top of the option "Split multiple attributes each on a new line", at least two sub options need to be present to produce this:
[✓] Split multiple attributes each on a new line
[✓] Leave first attribute on the same line as the opening tag
[✓] Align attributes column-wise
Q:
Does anything like this exist?
Maybe a JSF formatter plugin? Maybe there are some hacks via the config files?
Addendum:
As it stands now, JSF, XHTML, XML, HTML etc. formatting is a somewhat incomplete feature, at least the long-term solution would be to offer a configuration that is more like the Java code formatters where almost anything can be configured.
I'd even be tempted to contribute to the Eclipse community, if it's not overly hard to implement the two check boxes described. At least, leaving the first attribute on the same line and using the second character's column index after the opening tag and taking it for all subsequent attributes as indent seems doable to me...
I´m using JSF2.0 and primefaces 3.4 in my web project
simply.... when I copy the code for p:dialog from show-case of
primefaces to my project, it doesn't work, the dialog window doesn't appear
(the first dialog I put is the real one I want in my page... but actually the problem is...)
It seems like something in my project is not working in the right way... I´m just copying the code from prime-faces show-case to my page, but in my page the commandButtons to show the p:dialogs don´t work, the p:dialog is not showed. This is the web page I tested and not work for me:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:composition template="../template/template.xhtml">
<ui:define name="main">
<h:form id="form">
<h:panelGrid columns="1" cellpadding="5">
<p:commandButton id="basic" value="Basic" onclick="dlg1.show();" type="button" />
<p:commandButton id="modalDialogButton" value="Modal" onclick="dlg2.show();" type="button"/>
<p:commandButton id="effectsDialogButton" value="Effects" onclick="dlg3.show();" type="button" />
</h:panelGrid>
<p:dialog id="basicDialog" header="Basic Dialog" widgetVar="dlg1">
<h:outputText value="Resistance to PrimeFaces is futile!" />
</p:dialog>
<p:dialog id="modalDialog" header="Modal Dialog" widgetVar="dlg2" modal="true" height="100">
<h:outputText value="This is a Modal Dialog." />
</p:dialog>
<p:dialog header="Effects" widgetVar="dlg3" showEffect="explode" hideEffect="bounce" height="100">
<h:outputText value="This dialog has nice effects." />
</p:dialog>
</h:form>
</ui:define>
</ui:composition>
</html>
Where's your code showing the dialog? Something similar to
<p:commandButton id="button" value="Open Dialog" oncomplete="PF('dialog').show();"/>
i am using primefaces 3.0 in my project, i have implemented the chart in testing1.xhtml, but that page content needs to display on main.xhtml, but the chart not rendering very first time. the chart rendering after giving the refresh only, but it should not come like this .. i have attached the model snippet for ur reference.. pls kindly help me to fix this issue..
testing1.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:portlet="http://java.sun.com/portlet"
xmlns:c="http://java.sun.com/jstl/core">
<h:form id="testForm">
<p:lineChart id="testChart" value="#{testBean.chart}"
style="float:left; margin-top:150px; border:0px; margin-left:0px; padding:0px; height:140px; width:230px; "/>
<h:form>
</ui:composition>
i am calling this page from main.xhtml
main.xhtml
<body onLoad="loadData();" >
<h:panelGrid style="height:33px;"/>
<h:form style="margin:0px; padding:0px;">
<p:remoteCommand name="loadData" action="#{testBean.chartLoad}" update="testChart" />
<p:panel style="height:auto; width:238px;" id="testPanel" header="Testing" closable="false" toggleable="true">
<ui:include src="testing1.xhtml"/>
</p:panel>
thanks in advance..
looks look a nested form issue...
try to remove the <h:form id="testForm"> from within your inner page , cause its already surrounded by form tag from outer page...
Just add these lines in page. There is a bug in loading js/css
<h:outputScript name="charts/charts.js" library="primefaces" />
<h:outputStylesheet name="charts/charts.css" library="primefaces" />
Remove tag from testing1.xhtml. Since your main page has a h:form tag you don't have to add another tag inside your ui:include.
And even if it isn't working then add an ID to and add update=":< yourGivenFormID >" in p:lineChart
Remove the form tag in testing1.xhtml
Add in head section of the testing1.xhtml page the following:
<h:head>
<link rel="stylesheet" href="/javax.faces.resource/charts/charts.css.jsf?ln=primefaces"/>
......
</h:head>