How to include many pages dynamically using ui:include Primefaces?

Question

How to include many pages dynamically using ui:include Primefaces?

3.3k views Asked by AudioBubble At 17 June 2015 at 01:30

I am beginner.

I am doing a project using Primefaces.

I need to include many pages dynamically when triggering the p:menuitem.

I already tried but the dynamic pages are not included properly when clicked on p:menuitem and that page only show when refresh of the page(browser).

Sample Code

<p:menu>
    <p:menuitem action="..." value="Page1"/>
    <p:menuitem action="..." value="Page2"/>
    <p:menuitem action="..." value="Page3"/>
</p:menu>       

<p:outputPanel>
    <ui:include src="#{Pages.dynamicaPagesInclude}"/>
</p:outputPanel>

I do not know where I did mistake.

Any Idea?

Original Q&A

There are 1 answers

**Miguel** · Answer 1 · 2015-06-17T07:56:08+00:00

Please, try this:

index.xhtml:This file is the "main" page, the page which contains the menu to select the dynamic pages to load. When you press over the menuItem, the page attribute is set to the selected page value. Then, an ajax request invokes to changePage method which is in charge to set the page to load. We say to menuItem that we need to update the outputPanel which contains the new page load to show it on the browser.

<!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>Test Prime</title>
</h:head>

<h:body>
    <h:form id="formulario">
        <p:menu>
            <p:menuitem value="Page1" actionListener="#{pages.changePage(1)}" update="outputPanel "/>
            <p:menuitem value="Page2" actionListener="#{pages.changePage(2)}" update="outputPanel"/>
        </p:menu>

        <p:outputPanel id="outputPanel">
            <ui:include src="#{pages.dynamicaPagesInclude}" />
        </p:outputPanel>
    </h:form>
</h:body>
</html>

page1.xhtml:Dummy page which represents a new page.

<ui:composition 
    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">
    <h2>PAGE 1</h2>
</ui:composition>

page2.xhtml:Dummy page which represents a different page.

<ui:composition 
    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">
    <h2>PAGE 2</h2>
</ui:composition>

Pages.java:This java class is the ManagedBean for controlling the view. It contains a string field called dynamicaPagesInclude with the path of the page to load. The method changePage gets the attribute page which was set by the menuitem. Depending its value, chooses a page or other.

import javax.faces.bean.ManagedBean;
import javax.faces.event.ActionEvent;


@ManagedBean
public class Pages {

    private String dynamicaPagesInclude;

    public String getDynamicaPagesInclude() {
        return dynamicaPagesInclude;
    }

    public void setDynamicaPagesInclude(String dynamicaPagesInclude) {
        this.dynamicaPagesInclude = dynamicaPagesInclude;
    }

    public void changePage(int itemSelected ) {
        if (itemSelected == 1) {
            dynamicaPagesInclude = "page1.xhtml";
        } else {
            dynamicaPagesInclude = "page2.xhtml";
        }
    }
}

Sorry for my English level.

TechQA.

How to include many pages dynamically using ui:include Primefaces?

There are 1 answers

Related Questions in PRIMEFACES

Related Questions in FACELETS

Popular Questions

Popular Tags

Trending Questions