JSF 2.0 menu navigation question_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-13 15:42 出处：网络

I am new to JSF, I am currently running JSF 2.0 with tomcat and Primefaces. I have created a simple page using the primefaces layoutUnit and primefaces menu. I have a three panel layout with the menu

相关专题：jsf jsf-2

I am new to JSF, I am currently running JSF 2.0 with tomcat and Primefaces. I have created a simple page using the primefaces layoutUnit and primefaces menu. I have a three panel layout with the menu in the left panel, the main page in the center, and some metric / graphing stuff in the right panel. I am having issues understanding how to create separate views for the main panel which will be viewed when selecting 开发者_开发百科the appropriate menu tool item. I want to use ajax so there is no page refresh so I just want to create something where if I have a "users" tool, when I click it the users view will show up in the center panel, similarly if I have a configure tool, I want the configure view to be shown. I have tried to create seperate layoutUnits for each view and then use the rendered="" to render it when a certain tool is clicked but this does not work. Can anyone shed some light on the proper way to do this? I can not find any examples online. thanks.

You should try thinking your web application in terms of template and use the Facelets template feature. (Which version of JSF are you using? Try using JSF2...).

Your primefaces layout could be part of the template. Therefore, each page ("users", "tools") using the template would actually correspond to the main panel of your layout "automatically" have le left and right panels added to it.

Let's say you have a "users" submenu in the menu component of your left panel. It would then link to your "users" view (using Ajax).

You should read: http://www.ibm.com/developerworks/java/library/j-jsf2fu2/

You have to create template Step :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>

Step :2 Then create separated page for MenuPage.xhtml, MainPage.xhtml and FooterPage.xhtml

Step :3 Write template

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