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.
Related
I have this code here for the PrimeFaces Extensions pe:inputPhone in my project.
I want to have a custom validator message when the phone number is not valid. However the validatorMessage attribute is not working and the standard one is always showing. Does anyone know how I could solve it?
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:ic="http://ivyteam.ch/jsf/component"
xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions">
<h:body>
<ui:composition template="/layouts/frame-8.xhtml">
<ui:define name="title">UiTesting</ui:define>
<ui:define name="content">
<h:outputStylesheet name="testing.css" />
<h:form id="form">
<p:growl/>
<p:messages />
<pe:inputPhone value="" id="telefon" initialCountry="de" widgetVar="phonenumber"
requiredMessage="Phone required"
validatorMessage="Number not valid"
required="true" onchange="this.value=PF('phonenumber').getNumber();"
data-cy="phonenumber" formatOnDisplay="false">
</pe:inputPhone>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>
Thanks for reporting this issue. It will be fixed in PrimeFaces Extensions 11.0.3.
See also:
https://github.com/primefaces-extensions/primefaces-extensions/pull/769
Please note that you will need to add the libphonenumber dependency to your project in order to be able to validate phone numbers.
<dependency>
<groupId>com.googlecode.libphonenumber</groupId>
<artifactId>libphonenumber</artifactId>
<version>...</version>
</dependency>
Until 11.0.3 is released, you could create a custom validator and use that as a workaround.
I am new to primefaces and already facing problems with the "selectOneMenu" component. I have implemented a mainMenu.xhtml file, which is visible on all my pages. This mainmenu has a "selectOneMenu" component for language Change. The "selectOneMenu" does not open on the start page and several other pages, but there are also pages where it opens and works as it should. I've searched the net for a couple of days now, and couldn't find any hint or suggestion, that solved my Problem.
Would be very nice to find some help here.
See code below: Identity_Session is a #SessionScoped-bean; The "languageSet" is a HashMap of (String, Integer) pairs.
<?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">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
</h:head>
<h:body>
<h:form>
<p:panel>
<h:panelGrid columns="2" cellpadding="5" style="right: 700px; position: absolute; margin-top: -7px;" rendered="#{identity_Session.showMenuLogout()}">
<p:outputLabel for="languageComboBox" value=" #{identity_Session.translate('outputlabel_language')}:" style="font-weight:bold"/>
<p:selectOneMenu id="languageComboBox" value="#{identity_Session.languageID}" style="width:150px">
<p:ajax listener="#{identity_Session.translationAction()}" update="#all" delay="1000"/>
<f:selectItems value="#{identity_Session.getLanguageSet()}" />
</p:selectOneMenu>
</h:panelGrid>
</p:panel>
</h:form>
<br/>
<br/>
</h:body>
</html>
UPDATE!!!
I am using the same selectOneMenu with the same values (as described above) on the same webPage. When I place the selectOneMenu in the "west"-layoutUnit it does not open, but when I place it in the "east"-layoutUnit it opens. Is this actually a "PrimeFaces"-Bug, or am I missing something?
Try to change
</f:panel>
to
</p:panel>
I'm having a primefaces rendering issue in one Eclipse App but not in another. I've compared web.xml's and pom's and tried to make them identical, at least as far as dependencies which might affect the rendering of primefaces. I've cleaned the offending project, updated the project under Maven, checked project facets, etc, but I still can't get the one app to render primefaces components the way they look in another app or in the showcase.
I reduced a page down to its simplest case using two primefaces buttons and identical templates with no additional CSS files. Here's how each app renders the buttons:
bad rendering, show with pointer hovering over top button
good rendering, which proper hover highlight and rounded corners
the button spacings are also different. In the bad rendering there also appears to be some extra border outlining the whole canvas (white content area)
Facelet:
<h:body>
<ui:composition template="/WEB-INF/templates/hmmcommonLayout.xhtml">
<ui:define name="title">title</ui:define>
<ui:define name="content">
<h:form>
<p:button outcome="hr" value="With Icon" icon="ui-icon-star">
<f:param name="productId" value="24" />
</p:button>
</h:form>
<h:form>
<p:button outcome="hr" icon="ui-icon-star" title="Icon Only">
</p:button>
</h:form>
<br></br>
</ui:define>
</ui:composition>
</h:body>
</html>
Template:
<?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">
<html 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.org/ui" xmlns:o="http://omnifaces.org/ui"
xmlns:of="http://omnifaces.org/functions">
<h:head>
<title><ui:insert name="title">template title</ui:insert></title>
</h:head>
<h:body>
<div class="logoText">template logo text</div>
<ui:insert name="content"></ui:insert>
</h:body>
</html>
The generated html is basically identical. What else can I check??
It turned out to be a conflict between richfaces and primefaces. Both Eclipse projects POM's contained primefaces and richfaces dependencies. The project rendering things properly had the following in its web.xml. Once I added these statements to my second project's web.xml things rendered properly there as well.
<context-param>
<param-name>org.richfaces.skin</param-name>
<param-value>plain</param-value>
</context-param>
<context-param>
<param-name>org.richfaces.enableControlSkinning</param-name>
<param-value>false</param-value>
</context-param>
I am using primefaces 3.4, I want to show the busy indicator on the page when the page is redirecting to a new page ?
I have a page with command button the action listener returns string to next resource and the next resource takes time to render the page I was able to show busy indicator for ajaxrequest using
<p:ajaxStatus onstart="$.blockUI();" onerror="alert('error')" onsuccess="$.unblockUI();"/>
but for page redirects can I show the same busy indicator ?
Please advice.
Maybe you are not doing your request via Ajax.
This code works for me:
<html xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<h:outputScript library="primefaces" name="jquery/jquery.js" />
<h:outputScript library="js" name="jquery.blockUI.js" />
<h:form>
<p:commandButton value="navigate" action="test.xhtml?faces-redirect=true"/>
</h:form>
<p:ajaxStatus onstart="$.blockUI();" onerror="$.unblockUI();alert('error');" />
</h:body>
</html>
I want to create a xhtml page which contains a dataTable for certain entities, to navigate between the entities i though i could use the TabMenu. But after the implementation the tabMenu menuItems are only showed as simpel links and not how the primefaces example:
My code:
<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">
<h:body>
<h:form>
<p:tabMenu activeIndex="0">
<p:menuitem value="Customers" url="customerTableView.xhtml" icon="ui-icon-document"/>
<p:menuitem value="Orders" url="orderTableView.xhtml" icon="ui-icon-document"/> Vie
</p:tabMenu>
</h:form>
</h:body>
Cant find the reason why its not correctly rendered, i also tried diffent browsers.
I simply didn't notice that the "head"-tags are missing. Adding them solved the problem.