I'm trying to use dock menu, but it doesn't work. (it shows the images but it doesn`t zoom on them when I move the mouse over it). I want to use it in the center layout-unit of my page, inserting another page which acctualy contains the dock. The code looks like this:
template.xhtml
<!DOCTYPE html>
<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:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<style type="text/css">
body.ui-layout-container { background-color: cadetblue;}
</style>
</h:head>
<h:body>
<p:layout fullPage="true" resizeTitle="resize">
<p:layoutUnit position="north" id="north" resizable="false" size ="75">
<ui:include src="header.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="west" id="west" resizable="false" style="height:580px;overflow:hidden;" size="180">
<ui:include src="menu.xhtml" />
</p:layoutUnit>
<**p:layoutUnit styleClass="layoutUnitCenter" position="center">
!!Here I insert the page which contains the dock
<ui:insert name="content" />
</p:layoutUnit>**
<p:layoutUnit position="south" resizable="true" id="south" size="40">
<ui:include src="footer.xhtml" />
</p:layoutUnit>
</p:layout>
</h:body>
</html>
dock.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:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
template="template.xhtml">
<ui:define name="content">
<h:head>
</h:head>
<h:body>
<h:form>
<p:dock position="top">
<p:menuitem value="teachers" icon="/images/dock/teacher.png" url="#"/>
<p:menuitem value="students" icon="/images/dock/student.png" url="#"/>
<p:menuitem value="parents" icon="/images/dock/parent.png" url="#"/>
</p:dock>
</h:form>
</h:body>
</ui:define>
</ui:composition>
I tried to use the dock.xhtml by itself, without the ui:composition and it works just fine. But when I try to use it like this, it only shows the images, but doesnt do anything when I move the mouse over the images. Another problem is that it doesnt put the dock in the center of the area. It positions it a little to the left.
I`m pretty new to jsf and Primefaces, so any answer might help.
This code generate the same issue you asked help for:
This little change, solved for me:
Related
Maybe I'm missing something obvious - but a minimizable modal dialog doesn't seem to work as intended for me.
Here's what I have:
<p:dialog ... modal="true" ... minimizable="true" maximizable="true">
...
</p:dialog>
This causes a 'minimize' icon to appear at the top of the dialog, but when I try to minimize the dialog, it gets minimized behind the overlay/modal layer, making the minimized item not accessible, thereby not letting me restore it again!
What attribute am I missing? Or is the minimizable="true" attribute not meant to be used in combination with the modal="true" (I don't see the doc stating that, so just making sure)?
Here's an MCVE:
<!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:head>
<h:title>Minimizable modal demo</h:title>
</h:head>
<h:body>
<h:outputStylesheet library="resources" name="css/theme.css" />
<p:separator />
<p:commandButton value="Show Dialog" onclick="PF('dlg').show();"
type="button" />
<p:dialog header="Dialog" widgetVar="dlg" modal="true"
minimizable="true" maximizable="true">
<h:outputText value="This Dialog can be Maximized an Minimized!" />
</p:dialog>
</h:body>
</html>
Browser: Firefox 37.0
JSF: 2.1.19
PrimeFaces: 5.0
PrimeFacesExtensions: 2.1.0
PrimeFacesTheme: 1.0.8
I am programming an application (not a website) with a north panel that stays the same, a west panel for the menus and a center panel. The west panel and the center panel can change.
In terms of conception, is it better to work on a single view and switch panels or should I create several pages ?
For example :
Solution 1 : Center panel shows a car image, I select a car brand on the west panel, as a result I switch the west panel with another menu (car models of the brand) and switch the center panel with an image of the brand logo.
Solution 2 : Center panel shows a car image, I select a car brand on the west panel, as a result I redirect to another page with on the left menu the car models of the brand and in center panel an image of the brand logo.
Thank you.
I suggest you to use solution 2 with apply JSF Templating. By applying this approach, your pages are easy to extend and reuse.
This is my example which use p:layout, ui:composition and etc.
layout.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: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>
<title>Layout-menu</title>
</h:head>
<h:body>
<p:layout>
<p:layoutUnit position="west"
resizable="true"
size="250"
minSize="40"
maxSize="400">
<h:form>
<p:menu>
<p:submenu label="Navigations">
<p:menuitem value="input"
outcome="inputText"
icon="ui-icon-star"/>
<p:menuitem value="dropdown"
outcome="selectOneMenu"
icon="ui-icon-star"/>
</p:submenu>
</p:menu>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center">
<ui:insert name="source" />
</p:layoutUnit>
</p:layout>
</h:body>
</html>
inputText.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.org/ui"
template="layout.xhtml">
<ui:define name="source">
<h:form>
inputText
</h:form>
</ui:define>
</ui:composition>
selectOneMenu.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.org/ui"
template="layout.xhtml">
<ui:define name="source">
<h:form>
selectOneMenu
</h:form>
</ui:define>
</ui:composition>
You can run test at the layout.xhtml page like this http://host:port/project/layout.xhtml
You can see more information about Templating from another site such as JSF 2 Templating With Facelets Example, Using Facelets Templates and etc.
I use the p:megaMenu for menus. p:megaMenu well work without using <ui:composition>.
When i use the p:megaMenu in <ui:composition> , the submenu doesn't work well. When click the megamenu the submenu are faded out and when mouseover the submenu, the menu are faded in and can't click. Why?
Somebody answer me plz.
Here is my page
<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.org/ui">
<h:form id="menuForm" >
<p:megaMenu autoDisplay="false">
<p:menuitem value="Dashboard" action="dashboard" ajax="false" immediate="true" />
<p:submenu label="home" >
<p:column>
<p:submenu label="Survey Question">
<p:menuitem value="Survey Question" action="manageSurveyQuestion" ajax="false" immediate="true" />
</p:submenu>
</p:column>
</p:submenu>
</p:megaMenu>
</h:form>
</ui:composition>
Is there any template file? It is missing template in ui:composition tag.
<ui:composition .... template="/yourtempalte.xhtml">
<ui:define name="xxxx"> <--- It is optional
</ui:define>
</ui:composition>
I have a Facelet that might be used in different applications.
I don't to copy it, but reuse it. I need to pass the backing bean that will manage the view as a parameter, as some logic may vary according to the application where it is used in.
I don't want to use a composite component, but just include the Facelet and specify which bean will manage the view. How can I achieve this?
Let me give an example:
<ui:composition template="/resources/common/templates/template.xhtml"
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:c="http://java.sun.com/jsp/jstl/core" xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich" xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<ui:define name="content">
<!-- somehow establish the backing bean that will manage formView.xhtml -->
<!-- f:set assign="ParameterBean" value="#{Bean}" / -->
<ui:include src="formView.xhtml" />
</ui:define>
</ui:composition>
formView.xhtml :
<ui:composition template="/resources/common/templates/template.xhtml"
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:c="http://java.sun.com/jsp/jstl/core" xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich" xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<ui:define name="content">
<h:outputText value="#{ParameterBean.texto}" />
</ui:define>
</ui:composition>
You can use <ui:param> for that. It needs to be nested in the <ui:include>.
<ui:include src="formView.xhtml">
<ui:param name="ParameterBean" value="#{Bean}" />
</ui:include>
Unrelated to the concrete problem, standard Java Naming Conventions state that instance variable names must start with lower case. You should change your code in such way that respectively parameterBean and #{bean} will be used.
Because I would have found it helpful yesterday, when I was looking for this, here is a simple version of how to do this, without the extraneous template, defines and namespaces:
File1.xhtml (the root tag doesn't matter)
<ui:include src="File2.xhtml">
<ui:param name="person" value="#{whatever_value_you_want_to_pass}" />
</ui:include>
File2.xhtml
<ui:composition ... xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets" ... >
<h:outputLabel value="#{person.name}" />
</ui:composition>
You can also nest further in the same manner.
File1.xhtml
<ui:include src="File2.xhtml">
<ui:param name="person" value="#{whatever_value_you_want_to_pass}" />
</ui:include>
File2.xhtml
<ui:composition ... xmlns:ui="http://java.sun.com/jsf/facelets" ... >
<ui:include src="File3.xhtml">
<ui:param name="name" value="#{person.name}" />
</ui:include>
</ui:composition>
File3.xhtml
<ui:composition ... xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets" ... >
<h:outputLabel value="#{name.length}" />
</ui:composition>
I created a composite component for a list of customers. I can use this component in a view:
<html 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:p="http://primefaces.org/ui"
xmlns:customer="http://java.sun.com/jsf/composite/components/customer">
<ui:composition template="/WEB-INF/templates/template.xhtml">
<ui:define name="caption">
<h:outputText value="#{msg.customerListHeading}" />
</ui:define>
<ui:define name="content">
<ui:decorate template="/WEB-INF/templates/sidebox.xhtml">
<ui:param name="title" value="#{msg.customerListHeading}" />
<p:outputPanel>
<h:form id="customerList">
<customer:list list="#{customerControllerBean.list}">
<f:facet name="headerButton">
<h:button outcome="customerdetail.jsf"
value="#{msg.newButtonLabel}" />
</f:facet>
<f:facet name="rowButton">
<h:commandButton value="#{msg.deleteButtonLabel}"
action="#{customerControllerBean.delete(customer)}" />
<h:button outcome="customerdetail.jsf?id=#{customer.id}"
value="#{msg.editButtonLabel}" />
</f:facet>
</customer:list>
</h:form>
</p:outputPanel>
</ui:decorate>
</ui:define>
</ui:composition>
</html>
But when i use the component in a very similar view i get the following error:
<customer:list> Tag Library supports namespace: http://java.sun.com/jsf/composite/components/customer, but no tag was defined for name: list
The problematic view looks as follows:
<html 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:p="http://primefaces.org/ui"
xmlns:customer="http://java.sun.com/jsf/composite/components/customer">
<ui:composition template="/WEB-INF/templates/template.xhtml">
<ui:define name="caption">
<h:outputText value="#{msg.customerListHeading}" />
</ui:define>
<ui:define name="content">
<ui:decorate template="/WEB-INF/templates/sidebox.xhtml">
<ui:param name="title" value="#{msg.customerListHeading}" />
<p:outputPanel>
<h:form id="customerList">
<customer:list list="#{customerControllerBean.list}">
<f:facet name="rowButton">
<h:commandButton value="#{msg.applyButtonLabel}"
action="#{orderControllerBean.setCustomer(customer)}" />
</f:facet>
</customer:list>
</h:form>
</p:outputPanel>
</ui:decorate>
</ui:define>
</ui:composition>
</html>
As u can see the two view differs only by the facets i use to add buttons to the customer list table as i use the list in two different contexts. But why does the second view not work?
I found that there is/was an issue with Mojarra, but i use the so called stable revision regarding this problem:
2012-09-16 19:09:41,512 INFO [javax.enterprise.resource.webcontainer.jsf.config] (MSC service thread 1-4) Mojarra 2.1.7-jbossorg-1 (20120227-1401)
i found a workaround for this problem on Mojarra Jira:
http://java.net/jira/browse/JAVASERVERFACES-2437
i placed the xmlns:customer="http://java.sun.com/jsf/composite/components/customer" in the ui:composition tag and the view rendered sucessfully:
<html 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:p="http://primefaces.org/ui"
xmlns:customer="http://java.sun.com/jsf/composite/components/customer">
<ui:composition template="/WEB-INF/templates/template.xhtml" xmlns:customer="http://java.sun.com/jsf/composite/components/customer">
<ui:define name="caption">
<h:outputText value="#{msg.customerListHeading}" />
</ui:define>
<ui:define name="content">
...
According to that Jira the problem is fixed in Mojarra 2.1.10, so i hope JBoss updates AS 7.1 soon... :)
Incorrect folder path (components) is viewed by eclipse
Remove src/main/resource from build path -- Build Path==> Remove from Build Path.
And add again in build path