How should I use Primefaces Dock component?
Question
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 doesn t do anything when I move the mouse over the images. Another problem is that it doesn t do anything when I move the mouse over the images. Another problem is that it doesn t 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.
1 answers
solution1
0 2013-09-11 10:12:51
This code generate the same issue you asked help for:
This little change, solved for me:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.