Primefaces - Tabs not visible - jsf

I am using Liferay 6.2 on a JBoss 7.1.1. I created a primefaces portlet and just want to display a TabView. This is the easiest scenario and even that isnt working:
<?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://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
>
<h:body>
<h3>Tab Test</h3>
<p:tabView scrollable="true">
<p:tab title="Tab 1">Tab 1 Content</p:tab>
<p:tab title="Tab 2">Tab 2 Content</p:tab>
<p:tab title="Tab 3">Tab 3 Content</p:tab>
<p:tab title="Tab 4">Tab 4 Content</p:tab>
</p:tabView>
</h:body>
</html>
In this image you can see how it looks like, no tabs are shown, just ugly links:
What is going wrong here? I looked in the WEB-INF/lib folder, there is a primefaces.jar file, maybe I have to add a dependency in some way?
A <p:button> is correctly displayed as button, if this is helpful.

You probably just need
<h:head>
</h:head>
above <h:body>. Primefaces uses this to include it's css and js.

Related

Problem including another XHTML page in an XHTML page

I am a beginner programming Java and I am doing a project using primefaces. I want to include another XHTML page in an XHTML page. The include page is in /WEB-INF/facelets/include.xhtml (It has some data from a Managed Bean)
In my "page.xhtml", at first, I put this line inside <ui:define name="content">:
<ui:include src="WEB-INF/facelets/include.xhtml" />
But, it does not work.
Later, I tried to do this inside <ui:define name="content">
<ui:include src="WEB-INF/facelets/include.xhtml">
<ui:param name="fullName" value="#{identityInformationBean.fullName}" />
</ui:include>
And in the "include.xhtml":
<h:outputText
rendered="#{fullName!=null}"
value="#{fullName}" />
But, it does not work too. Nevertheless, if I do this:
On "page.xhtml"
<ui:include src="WEB-INF/facelets/include.xhtml">
<ui:param name="fullName" value="Helen" />
</ui:include>
The "include.xhtml" receives the information correctly.
I'd tried to registering the include file as a tagfile, as suggest here How to include another XHTML in XHTML using JSF 2.0 Facelets?
But, it does not work.
Any idea to solve this problem? Thanks!
This is a piece of code from "include.xhtml":
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:c="http://java.sun.com/jstl/core"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:outputText
rendered="#{identityInformationBean.fullName!=null}"
value="#{identityInformationBean.fullName}" />
</ui:composition>
This is a piece of code from "page.xhtml":
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:c="http://java.sun.com/jstl/core"
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:p="http://primefaces.org/ui" template="templates/generaltemplate.xhtml">
<ui:define name="content">
<h2>
<h:outputText value="Identity Information"/>
</h2>
</ui:define>
</ui:composition>
I'm not sure why you need ui:param. Think of the include file as just saving you the trouble of typing that included code into all the pages that might use it. You don't need to pass it a parameter.
What about using a single line of code: <ui:include src="WEB-INF/facelets/include.xhtml"/> And the include file would have <h:outputText value="#{identityInformationBean.fullName}"/>

Composite component causes warning "no 'head' component has been defined within the view"

I have a working JSF page, but if I add xmlns:leaf="http://java.sun.com/jsf/composite/jsf2leaf" to it, and try to use any ot its tags, like <leaf:map center="42.120000,-72.540000" />, I get the following warning:
One or more resources have the target of 'head', but no 'head' component has been defined within the view.
Everything works fine, the map is there, I can add markers, but I can't get rid of the warning message.
My JSF page looks 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">
<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:p="http://primefaces.org/ui" xml:lang="hu" lang="hu"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:leaf="http://java.sun.com/jsf/composite/jsf2leaf"
>
<f:view contentType="text/html">
<f:metadata>
<f:viewAction action="#{dashboardController.readURLParam()}"/>
</f:metadata>
<h:head/>
<h:body>
...
<h:form>
...
<p:panel>
...
<c:forEach>
...
<p:panel>
<leaf:map center="42.120000,-72.540000" />
</p:panel>
</c:forEach>
</p:panel>
</h:form>
</h:body>
</f:view>
found the problem, it, in the jsf2leaf.jar the map.xhtml and advancedmap.xhtml uses <head></head> instead of <h:head></h:head>, changed it, repackaged the jar file, and it works fine

Primefaces tag rowSelectListener not found.

Below is my JSF page.
<?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">
<h:head>
<title>Test page</title>
</h:head>
<h:body>
<p:dataTable var="order" value="#{orderBean.orderList}"
selection="#{orderBean.currentOrder}"
selectionMode="single">
<p:column>
#{order.customerId.name}
</p:column>
</p:dataTable>
</h:body>
</html>
I want to add a rowSelectListener to the datatable. However my Netbeans IDE does not recognize this as a valid attribute for p:dataTable. Furthermore, it also does not seem to compile. a method called in the listener is not called
rowSelectListener="#{orderBean.onRowSelect}"
I am working with JSF 2.2 (Mojarra 2.2.7) and Primefaces 5.0
It's because there is no rowSelectionListener for primefaces datatable.
You have to use Ajax like this:
<p:ajax event="rowSelect" listener="#{dtSelectionView.onRowSelect}" update=":form:msgs" />
<p:ajax event="rowUnselect" listener="#{dtSelectionView.onRowUnselect}" update=":form:msgs" />
More information available here

jsf viewscoped bean - set values for every page(tabs)

I am sorry, this might sound really basic but if anyone could explain how to set explicit values for every tabs in the same browser window using the JSF viewscoped bean.
Please guide me to some article or working samples.
Kindly help, thanks in advance
Update:
auth-page.xhtml
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:qumola="http://java.sun.com/jsf/composite/qumola"
xmlns:p="http://primefaces.org/ui">
<style type="text/css"/>
<h:panelGrid id="newGrid">
<ui:param name="labelResourceName"
value="#{userMenuState.selectedLeftMenuItem.menuLabel}" />
<h:form id="someForm">
<h:panelGrid id="topBannerId">
<font>#{msg[labelResourceName]}</font> <font
class="titleTextBar"> </font>
<font class="titleTextBar">
#{activityEditorManagedBean.selectedActivityBean.title}</font>
</h:panelGrid>
</h:form>
</h:panelGrid>
</ui:composition>
The value "activityEditorManagedBean.selectedActivityBean.title" in the above code is a viewscoped bean variable value but it has the same value in every tab it is opened in.

Ajax update dataTable from commandButton located in included file

I have such situation situation:
in file form.xhtml i have form used for filter some tables, i gave button "filter" defined here.
in file tableOne.xhtml, tableTwo.html, .. i have dataTable with id "filterTable", i've also included form.xhtml into this page. all pages with dataTables includes form.xhtml and all dataTables on them have the same id "filterTable"
what i want to do is to update dataTable[#filterTable] on after filter button is pressed using ajax. button is created by <p:commandButton>. if form and datatable are defined in the same file, all i need is simply add update="filterTable" to my command bytton. but if i add it to button defined in form.xhtml i get "Cannot find component with identifier" error.
is it possible to dynamic update dataTables from outside xhtml files included on page? if it is, how can i do it?
Example:
test.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>
<h:body>
<h:form id="dtForm">
<p:dataTable id="dataTable" />
</h:form>
<ui:include src="/include.xhtml" />
</h:body>
</html>
include.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>
<h:body>
<h:form>
<p:commandButton value="button" update=":dtForm" />
</h:form>
</h:body>
</html>

Resources