我应该如何使用Primefaces Dock组件?

时间:2012-12-18 09:18:55

标签: jsf-2 primefaces

我正在尝试使用停靠菜单,但它不起作用。 (它显示了图像,但是当我将鼠标移到它上面时它不会放大它们)。我想在我的页面的中心布局单元中使用它,插入另一个acctualy包含dock的页面。代码如下所示:

的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>

我试图单独使用dock.xhtml,没有ui:composition,它运行得很好。但是,当我尝试像这样使用它时,它只显示图像,但没有t do anything when I move the mouse over the images. Another problem is that it doesn将码头放在该区域的中心。它把它放在左边一点点。 我对jsf和Primefaces很新,所以任何答案都可能有所帮助。

1 个答案:

答案 0 :(得分:0)

此代码会生成您向其寻求帮助的相同问题:

issued code

这个小小的改变,为我解决了:

enter image description here