logo标签列表

JSF 2.0菜单导航问题

jsfjsf-2
3

我是JSF的新手，目前在使用Tomcat和Primefaces运行JSF2.0。我使用了primefaces layoutUnit和primefaces menu创建了一个简单的页面。我的页面有三个面板，左边面板是菜单，中间是主页面，右边是一些度量/图形内容。我不太明白如何为主面板创建单独的视图，这些视图将在选择适当的菜单工具项时显示。我想使用ajax来实现无需刷新页面的效果，所以我只想创建一个东西，如果我有一个"用户"工具，当我点击它时，用户视图将显示在中心面板上，同样地，如果我有一个配置工具，我希望配置视图能够显示。我尝试为每个视图创建单独的layoutUnit，然后使用rendered=""来在单击某个工具时呈现它，但这并不起作用。有谁能够解释一下正确的做法吗？我在网上找不到任何示例。谢谢。

2个回答
1

你应该尝试以模板的形式思考你的Web应用，并使用Facelets模板功能。（你正在使用哪个版本的JSF？尝试使用JSF2...）

你的primefaces布局可以成为模板的一部分。因此，每个页面（“用户”，“工具”）使用模板实际上对应于你的布局主面板，“自动”添加了左侧和右侧面板。

假设你在左侧面板的菜单组件中有一个“用户”子菜单。然后它将链接到你的“用户”视图（使用Ajax）。

你应该阅读：http://www.ibm.com/developerworks/java/library/j-jsf2fu2/

0

你需要创建模板 步骤：1

    <?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:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui"

    <div>
    /* define your pages here.*/
    /*menuPage refers the header information*/        
        <div class="menuPage">
           <ui:insert name="menuPage" />
        </div>     
    /* mainPage refers the what are your .xhtml files*/
        <div class="mainPage">
            <ui:insert name="mainPage" />
        </div>  
     /*footer page*/
        <div class="footerPage">
           <ui:insert name="footerPage" />
        </div> 

    </div>

</html>

步骤：2 然后创建MenuPage.xhtml、MainPage.xhtml和FooterPage.xhtml的独立页面

步骤：3 编写模板

    <?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:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui">


    <ui:composition template="template.xhtml">

        <ui:define name="menuPage">
            <ui:include src="menuPage.xhtml" />
        </ui:define>

        <ui:define name="mainPage">
            <ui:include src="mainPage.xhtml" />
        </ui:define>

        <ui:define name="footerPage">
            <ui:include src="footerPage.xhtml" />
        </ui:define>

    </ui:composition>
</html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接