I'm completely new to PrimeFaces, so sorry if this is a stupid question.
According to the primefaces.org website, there's no configuration needed. You just put the primefaces jar in your classpath and add the namespace to the page, and that's it. This is exactly what I did, and I can access and create the primefaces components, but no style is applied to them.
This is what the page source looks like
<!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">
<head><title>...</title></head>
<body>
<p:accordionPanel>
<p:tab title="First Tab Title">
<h:outputText value= "Lorem"/>
</p:tab>
<p:tab title="Second Tab Title">
<h:outputText value="Ipsum" />
</p:tab>
</p:accordionPanel>
</body>
</html>
And this is what's rendered
<!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">
<head><title>...</title></head>
<body><div id="j_id_3" class="ui-accordion ui-widget ui-helper-reset ui-hidden-container" role="tablist"><h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top" role="tab" aria-expanded="true"><span class="ui-icon ui-icon-triangle-1-s"></span>First Tab Title</h3><div id="j_id_3:j_id_4" class="ui-accordion-content ui-helper-reset ui-widget-content" role="tabpanel" aria-hidden="false">Lorem</div><h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false"><span class="ui-icon ui-icon-triangle-1-e"></span>Second Tab Title</h3><div id="j_id_3:j_id_6" class="ui-accordion-content ui-helper-reset ui-widget-content ui-helper-hidden" role="tabpanel" aria-hidden="true">Ipsum</div><input type="hidden" id="j_id_3_active" name="j_id_3_active" value="0" /></div><script id="j_id_3_s" type="text/javascript"><!--
PrimeFaces.cw('AccordionPanel','widget_j_id_3',{id:'j_id_3',active:0});
//--></script>
</body>
</html>
As you can see, the primefaces component is rendered, with all css styles attached, but there's no reference to any style sheet rendered. Should this be rendered automatically, or is this something I should add to the page?
I'm using myFaces 2.1.5, PrimeFaces 3.5 and I'm running it on Tomcat 7.0.26
The <head> incompatibility with Primefaces, the <h:head> will include automatically all necessary JavaScript files for Css files for layout, so when you don't use it,Css will not be included automatically.
If you want to include automatically CSS, you should use <h:head>, not <head>:
<h:head>
// ...
</h:head>
<h:body>
// ...
</h:body>
Other reference question: unable-to-understand-hhead-behaviour
Related
I'm using jsf 2.2 and primefaces 6.1. I try to position a dataTable with different columns on the right side next to a sidebar/ sidemenu, which is fixed on the left border of the Gui. I'm using templates and contentpanels to build up each component depending on the pageNavigation or UserInput.
But the problem is, that the dataTable is always shown below, not next to the sidemenu.
I have this code:
template/menuLeft.xhtml:
<!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">
<h:head>
<style>.menuButton {float: left;}</style>
</h:head>
<h:form>
<p:menu toggleable="true">
<p:submenu label="#{msg['orders']}">
<p:menuitem value="#{msg['save']}" icon="ui-icon-disk" />
<p:menuitem value="#{msg['updaten']}" icon="ui-icon-arrowrefres1-w"/>
<p:submenu label="#{msgArticle['article']}">
<p:menuitem value="#{msgArticle['article']}"
outcome="#{articleController.toArticleContent()}" />
<p:menuitem value="#{msgArticle['articleFast']}"/>
</p:submenu>
</p:menu>
</h:form>
</html>
dataTable articleContent.xhtml:
<!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: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>
<f:view locale="#{languageBean.locale}">
<ui:composition template="/WEB-INF/lib/templates/template.xhtml" >
<ui:define name="contentPanel" >
<p:dataTable var="article" value="#{articlesBean.articles}" >
<f:facet name="header">
<h:outputText value="#{msg['deliveryMen']}" />
</f:facet>
<p:column headerText="Aktionen" >
<h:outputText value="verschied. Aktionen" />
</p:column>
<p:column headerText="#{msgArticle['picture']}">
<h:outputText value="Bild" />
</p:column>
<p:column headerText="#{msgArticle['articleNumber']}">
<h:outputText value="#{articleBean.articleNumber}" />
</p:column>
</p:dataTable>
</ui:define>
</ui:composition>
</f:view>
</html>
template/content.xhtml:
<!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://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title><ui:insert name="title">Default title</ui:insert></title>
</h:head>
<h:body>
<div id="menuLeft" style="float: left">
<ui:insert name="menuLeft">
<ui:include src="/WEB-INF/lib/templates/menuLeft.xhtml" />
</ui:insert>
</div>
<div id="contentPanel" style="float: left">
<ui:insert name="contentPanel">
<ui:include src="/WEB-INF/lib/templates/contentPanel.xhtml" />
</ui:insert>
</div>
</h:body>
JavaBean ArticleController.java:
package controller;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import dao.ArticleRepository;
import dao.model.Article;
import util.RoleUtil;
#ManagedBean
#ViewScoped
public class ArticleController {
private RoleUtil roleUtil = new RoleUtil();
private ArticleRepository articleRepos = new ArticleRepository();
public String toArticleContent() {
return "articleContent";
}
}
When I click on the submenuButton "Article" the dataTable should be seen on the right side next to the sideMenu, but its shown below. I tried diverse css-Style commands like:
<style>.menuButton {float: left;}</style>
style="float: left"
style="text-align: right;"
<f:facet name="left">
...
</f:facet>
<f:facet name="right">
...
</f:facet>
style = "margin-left:auto; margin-right:auto;"
but without any effect...
Can someone help me to aligne the datatable RIGHT to the sidemenu?
I'm trying to override some components libraries' css (PrimeFaces, BootsFaces), but can't manage to import my custom css last. I've tried various things that I found so far, but nothing worked.
Below is the master template, where I import the css. Like that it is imported, but before all other resources. After that I list the other tries that I had.
I can imagine, that that the problem is, that I use templates.
master.xhtml
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:b="http://bootsfaces.net/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title><ui:insert name="title">Project Documents Tutorial</ui:insert></title>
<h:outputStylesheet name="css/projdocstut.css" />
</h:head>
<h:body>
<b:container>
<div id="header" class="header">
<b:row>
<b:column span="12">
<ui:insert name="header">
<ui:include src="top-menu.xhtml" />
<ui:include src="main-menu.xhtml" />
</ui:insert>
</b:column>
</b:row>
</div>
<div id="content" class="content">
<b:row>
<b:column span="12">
<ui:insert name="content">Standard Content</ui:insert>
</b:column>
</b:row>
</div>
<div id="footer" class="footer">
<b:row>
<b:column span="12">
<ui:insert name="footer">Standard Bottom</ui:insert>
</b:column>
</b:row>
</div>
</b:container>
</h:body>
</html>
I also tried the following.
1) Adding the following in the head / body --> result: no import at all
<f:facet name="last">
<h:outputStylesheet library="default" name="css/projdocstut.css" />
</f:facet>
2) Adding the following in the head / body: result--> resource is imported before all other resources
<f:facet name="last">
<h:outputStylesheet name="css/projdocstut.css" />
</f:facet>
3) Adding following to the body: result --> resource is imported before all other resources
<h:outputStylesheet name="css/projdocstut.css" />
The index.xhtml which uses the 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:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="WEB-INF/templates/master.xhtml">
<ui:define name="content">
Custom Content
</ui:define>
</ui:composition>
</html>
Bootsfaces handles this issue by allowing you to define a "position" attribute in the <h:outputStylesheet> tag.
<h:head>
...
<h:outputStylesheet name="css/style.css" position="last"/>
</h:head>
I want click on Desserts and other list items , by right clicking on it i am getting
x path : //*[#id="foodMenuPanels"]/div[2]/div/div[1]/ul/li[1]/a/text()
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" />
<title></title>
</head>
<body>
<div id="foodMenuPanels" class="food-menu-wrapper">
<div class="food-menu-panel food-panel-results">
<div class="food-menu-content">
<ul class="food-menu-list"></ul>
</div>
</div>
<div class="food-menu-panel food-panel-categories">
<div class="food-menu-subpanel-wrapper">
<!-- food-menu-content food-panel-categories -->
<div class="food-menu-content food-panel-categories">
<ul data-id="14386" class="food-menu-list">
<li class="">
Desserts
<div class="ripples"></div>
</li>
<li class="">
<a href="/menu/small-plates-snacks-appetizers/" data-internal="17145"
class="ripple">Small Plates & Snacks & Appetizers</a>
<div class="ripples"></div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
I gave couple of try but it is not working and i am new to the selenium tool.
I would say go for css instead of xpath
a[href='/menu/desserts/']
Translation: find the anchor tag whose href = "/menu/desserts/"
Second anchor
a[href$='small-plates-snacks-appetizers/']
Translation: find the anchor tag whose href ends with "small-plates-snacks-appetizers/"
I have a problem when checking/unchecking a checkbox under internet explorer 8.
When I check a checkbox, it "moves" vertically, then it returns in the original position when I uncheck it.
I tried to figure it out playing with margin and vertical-align, but with no luck.
The code work flawlessly in Firefox and Chrome.
Page:
<?xml version="1.0" encoding="UTF-8" ?>
<ui:composition template="../templates/ui-test.xhtml"
xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui"
xmlns:nttdata="http://nttdata.com/facelets" lang="it-IT">
<ui:define name="title">Test Checkbox</ui:define>
<ui:define name="head"></ui:define>
<ui:define name="navbar"></ui:define>
<ui:define name="content">
<div id="contentCc">
<h:outputText value="Selection: " />
<p:selectBooleanCheckbox value="#{testViewBean.selectedValue}" />
</div>
</ui:define>
</ui:composition>
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:c="http://java.sun.com/jsp/jstl/core"
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"
lang="it-IT">
<f:view contentType="text/html" locale="it_IT">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv='Cache-control' content='no-cache, no-store, must-revalidate' />
<meta http-equiv='Expires' content='0' />
<meta http-equiv='Pragma' content='no-cache' />
<title>
<ui:insert name="title">Default title</ui:insert>
</title>
</f:facet>
<ui:insert name="head"></ui:insert>
</h:head>
<h:body>
<div id="outer">
<div id="header" class="ui-widget ui-widget-header ui-corner-all">
<ui:insert name="navbar">
<ui:include
src="#{pageContext.request.contextPath}/components/navbar/navbar.xhtml" />
</ui:insert>
</div> <!-- header -->
<div id="content">
<ui:insert name="content">Default Content</ui:insert>
</div>
<div id="footer">
<!--ui:insert name="footer"></ui:insert-->
</div>
</div> <!-- outer -->
</h:body>
</f:view>
</html>
The resulting XHTML code is valid (validated with validator.w3.org), but under ie8 the input element "dance" when clicked. Here are the images of checked and unchecked checkbox under ie8:
https://dl.dropboxusercontent.com/u/7865852/ie8_checkbox_unchecked.png
https://dl.dropboxusercontent.com/u/7865852/ie8_checkbox_checked.png
Using h:selectBooleanCheckbox instead of p:selectBooleanCheckbox works under ie8, but I lose all the (framework default) css styles applied.
I have the same problem, but with all the browser (primefaces 5.1)
I fixed it with css on checkbox elements
display: block;
float: left;
I am trying to validate the following xhtml code on validator.w3.org
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Let us try the use of heading styles
-->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Headings</title>
</head>
<body>
<h1>Program Pool</h1>
<h2>
<ul>
<li> Basic Programming </li>
<li> Intermediate Programming </li>
<li> Advanced Programming </li>
<li> Modular Programming </li>
</ul>
<!-- <br /> <br /> <br /> -->
</h2>
</body>
</html>
I'm receiving an error on line 17 (The line where the first ul tag appears). The main problem is the ul tag although the same syntax was accepted in other code I wrote. So what is wrong here?
You can't use the h2 tag as a block-level element; it's a heading tag, and it functions the same as your h1 tag above. Move the </h2> closing tag up and add some text:
<h2>Some Random Title</h2>
The issue resolves if you just remove "<H2>" tag, used around the <UL> tag.
Use CSS for styling your UL if this need attention.
either remove tag around or Give appropriate heading and close right there:-
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Let us try the use of heading styles
-->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Headings</title>
</head>
<body>
<h1>Program Pool</h1>
<ul>
<li> Basic Programming </li>
<li> Intermediate Programming </li>
<li> Advanced Programming </li>
<li> Modular Programming </li>
</ul>
</body>
</html>
OR
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Let us try the use of heading styles
-->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Headings</title>
</head>
<body>
<h1>Program Pool</h1>
**<h2>heading</h2>**
<ul>
<li> Basic Programming </li>
<li> Intermediate Programming </li>
<li> Advanced Programming </li>
<li> Modular Programming </li>
</ul>
</body>
</html>