Tech Brainwave

A Road Map for Innovative Technologies

Layouting and Dynamic Includes in Facelets

Posted by giftsam Posted on Oct - 18 - 2009

Introduction
A classified web applications necessitate the use of Cascading Style Sheets(CSS), JavaScript, together with a server-side framework, such as JavaServer Faces(JSF). This article is consecrated for the peoples who wants to use facelets as an alternative view technology for building JSF applications. This article is splitted in to two-part series, Here you will find out how to make a complete Layout in JSF using facelets. In addition, learn how to include the pages dynamically, so that you can make use of serveral JSF forms more dynamic. Before starting this tutorial, first you need to create and configure facelets for your a web application project, the following link Facelet installation would be helpful to configure the facelets for your project.

Part 1 – How to make Layouts in Facelets
After creating and installing facelets prerequisite for your project. Lets move to the part1 where you will learn to make template in facelets. As you all know, you can create a web page template for facelets in xhtml documents. This demo application is constructed by the following templates.

  1. layout.xhtml
  2. layout-Client.xhtml
  3. header.xhtml
  4. sideBar.xhtml
  5. footer.xhtml
  6. sample pages like(samplePageOne.xhtml, samplePageTwo.xhtml, samplePage3.xhtml..)

1. Construct layout.xhtml template
First let us construct a layout.xhtml which is the main layout that holds the template styles for the entire application. This mainLayout.xhtml web page contains header, leftColumn, rightColumn, content and footers in a 3 column elastic layout, You can define your own layout, the reason why I have used 3 column elastic layout here is, since the layout widths are defined in ems, elastic layouts allow your page containers to expand depending on the site visitor’s text size preference.

layout.xhtml


<?xml version='1.0' encoding='UTF-8' ?>
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="./css/default.css" rel="stylesheet" type="text/css" />
<link href="./css/cssLayout.css" rel="stylesheet" type="text/css" />
<title>Facelets Template</title>
<style type="text/css" media="all">
body
{
background-color: #2b3a3c;
color: #2d2e2e;
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
line-height: 1.2em;
margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
padding: 0 0 0 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
text-align: center; /* Centers the page content container in IE 5 browsers. */
}
#outerWrapper
{
background-color: #fff;
margin: 0 auto 0 auto; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
text-align: left; /* Redefines the text alignment defined by the body element. */
width: 80em;
}
#outerWrapper #header
{
background-color: #8ab573;
border-bottom: solid 1px #628152; /* Sets the bottom border properties for an element using shorthand notation */
font-size: 1.5em;
font-weight: bold;
line-height: 1.7em;
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
#outerWrapper #contentWrapper #rightColumn
{
background-color: #eef6ed;
border-left: solid 1px #8ab573; /* Sets the left border properties for an element using shorthand notation */
float: right;
padding: 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
width: 14em;
height: 200px;
}
#outerWrapper #contentWrapper #leftColumn
{
background-color: #eef6ed;
border-right: solid 1px #8ab573; /* Sets the right border properties for an element using shorthand notation */
float: left;
padding: 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
width: 14em;
height: 200px;
}
#outerWrapper #contentWrapper #content
{
margin: 0 16em 0 16em; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
#outerWrapper #contentWrapper .clearFloat
{
clear: both;
display: block;
}
#outerWrapper #footer
{
background-color: #8ab573;
border-bottom: solid 1px #628152; /* Sets the bottom border properties for an element using shorthand notation */
font-size: 1.5em;
font-weight: bold;
line-height: 1.7em;
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
</style>
</head>
<body>
<div id="outerWrapper">
<div id="header">
<ui:insert name="header"/>
</div>
<div id="contentWrapper">
<div id="rightColumn">
<ui:insert name="rightColumn"/>
</div>
<div id="leftColumn">
<ui:insert name="leftColumn"/>
</div>
<div id="content">
<ui:insert name="content"/>
</div>
<br />
</div>
<div id="footer">
<ui:insert name="footer"/>
</div>
</div>
</body>
</html>

<ui:insertag>- this is a templating tag which is used to declare a named content element to be defined by another Facelet. ui:insert tag can be used effectively with the ui:define tag.

Now the main layout has been constructed, next let us construct a layout-Client.xhtml.

2. Construct layout-Client.xhtml template
This layout-client.xhml template uses three tags,

<ui:composition> tag – a templating tag that wraps the content of layout.xhtml template. Facelets view handler will ignore any content outside the composition tag.

<ui:define> tag -  defines the named content of ui:insert tag in layout.xhtml template

<ui:include> tag – constructed inside the ui:define tag to include the other templates.

layout-Client.xhtml


<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<body>
<ui:composition template="./layout.xhtml">
<ui:define name="header">
<ui:include src="./header.xhtml"/>
</ui:define>
<ui:define name="rightColumn">
Ads here
</ui:define>
<ui:define name="leftColumn">
<ui:include src="./sideBar.xhtml"/>
</ui:define>
<ui:define name="content">
<rich:panel id="contentRichPanel" style="position: relative;">
<ui:include src="#{PageViewIdGenerator.includedPage}"/>
</rich:panel>
</ui:define>
<ui:define name="footer">
<ui:include src="./footer.xhtml"/>
</ui:define>
</ui:composition>
</body>
</html>

3.construct header.xhtml
The template header.xhtml should be wrapped inside the ui:define tag of layout-Client.xhtml template.

header.xhtml



<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<body>
<h:form method="post">
<rich:panel style="position: relative;width: auto">
<h:outputText value="Sample Demo Page"></h:outputText>
</rich:panel>
</h:form>
</body>
</html>

4. Construct sideBar.xhtml
Richfaces component Panel Menu which holds the content page links is used as the side bar. This should be wrapped inside the ui:define tag of  left column or right column(Its up to you) of layout-client.xhtml.

sideBar.xhtml

<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<body>
<h:form id="sideBarId">
<!-- Richfaces panel menu -->
<rich:panelMenu styleClass="panelMenu" mode="none" iconExpandedGroup="disc" iconCollapsedGroup="disc"
iconExpandedTopGroup="chevronUp" iconGroupTopPosition="right"
iconCollapsedTopGroup="chevronDown" expandSingle="true">
<!-- Group1 -->
<rich:panelMenuGroup id="group1Id" label="Group1">
<!-- Page1 -->
<rich:panelMenuItem>
<h:commandLink id="page1LinkId" value="Page1"
action="#{PageViewIdGenerator.sideBarAction}">
<f:param id="page1ParamId" name="pageViewId" value="Page1"/>
</h:commandLink>
</rich:panelMenuItem>
<!-- Page1 Ends -->
<!-- Page2 -->
<rich:panelMenuItem>
<h:commandLink id="page2LinkId" value="Page2"
action="#{PageViewIdGenerator.sideBarAction}">
<f:param id="page2ParamId" name="pageViewId" value="Page2"/>
</h:commandLink>
</rich:panelMenuItem>
<!-- Page2 Ends -->
<!-- Page3 -->
<rich:panelMenuItem>
<h:commandLink id="page3LinkId" value="Page3"
action="#{PageViewIdGenerator.sideBarAction}">
<f:param id="page3ParamId" name="pageViewId" value="Page3"/>
</h:commandLink>
</rich:panelMenuItem>
<!-- Page3 Ends -->
<!-- Page4 -->
<rich:panelMenuItem>
<h:commandLink id="page4LinkId" value="Page4"
action="#{PageViewIdGenerator.sideBarAction}">
<f:param id="page4ParamId" name="pageViewId" value="Page4"/>
</h:commandLink>
</rich:panelMenuItem>
<!-- Page4 Ends -->
<!-- Page5 -->
<rich:panelMenuItem>
<a4j:commandLink id="page5Linkid" value="Page5"
action="#{PageViewIdGenerator.sideBarAction}">
<f:param id="page5Param" name="pageViewId" value="Page5"/>
</a4j:commandLink>
</rich:panelMenuItem>
<!-- Page5 Ends -->
</rich:panelMenuGroup>
<!-- End of Group1 -->
<!-- Group2 -->
<rich:panelMenuGroup id="group2Id" label="Group2">
<!-- define group2 codes here-->
</rich:panelMenuGroup>
<!-- End of Group2 -->
<!-- Group3 -->
<rich:panelMenuGroup id="group3Id" label="Group3">
<!-- define group2 codes here-->
</rich:panelMenuGroup>
<!-- End of Group3 -->
</rich:panelMenu>
</h:form>
</body>
</html>

5. Construct footer.xhtml
The template footer.xhtml should be wrapped inside the ui:define tag of layout-Client.xhtml template.

footer.xhml

<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<body>
<h:form method="post">
<rich:panel>
<h:outputText value="Footer text"/>
</rich:panel>
</h:form>
</body>
</html>

6. Construct sample pages
Create your own required templates which is to be dynamically included in the content of the layout-Client.xhtml template. But now, I have mentioned some sample pages for the reference.

samplePageOne.xhtml



<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<body>
<h:form>
<h:outputLabel value="Hello this is Page One"/>
</h:form>
</body>
</html>

samplePageTwo.xhtml



<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<body>
<h:form>
<h:outputLabel value="Hello this is Page Two"/>
</h:form>
</body>
</html>

So far we have created xhtml documents like header, sideBar, rightColumn and the footer which is to be included statically in the layout.xhtml web page. Now let us see how the samplePageOne.xhtml(Page1) and samplePageTwo.xhtml(Page2) links of sideBar are dynamically included in the content of layout-Client.xhtml.

Part 2-Dynamic Include
Dynamic include can be accomplished with use of the f:param tag defined in the sideBar.xhtml, where we can easily find the clicked link of sideBar. So that the page will be dynamically included in the content of layout.xhtml. we need to construct a backing bean and to configure the managed bean in the faces-config.xml to invoke this.

faces-config.xml Configuration


<managed-bean>
<managed-bean-name>PageViewIdGenerator</managed-bean-name>
<managed-bean-class>com.layout.PageViewIdGenerator</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>

The pertinent backing bean code look like,

PageViewIdGenerator.java



package com.layout;

import javax.faces.context.FacesContext;
/**
* @author giftsam
*/
public class PageViewIdGenerator
{
private String includedPage = "/samplePageTwo.xhtml";

public String sideBarAction()
{
/**
* Get the request parameter map from the context, so that we can find which link of the side is clicked
*/
FacesContext context = FacesContext.getCurrentInstance();
String selectedPageViewId =
context.getExternalContext().getRequestParameterMap().get("pageViewId");

if (selectedPageViewId.equalsIgnoreCase("page1"))
{
includedPage = "/samplePageOne.xhtml";
}
else if (selectedPageViewId.equalsIgnoreCase("page2"))
{
includedPage = "/samplePageTwo.xhtml";
}
else if (selectedPageViewId.equalsIgnoreCase("page3"))
{
includedPage = "/samplePageThree.xhtml";
}
else if (selectedPageViewId.equalsIgnoreCase("page4"))
{
includedPage = "/samplePageFour.xhtml";
}
return "";
}

/**
* @return the includedPage
*/
public String getIncludedPage()
{
return includedPage;
}

/**
* @param includedPage the includedPage to set
*/
public void setIncludedPage(String includedPage)
{
this.includedPage = includedPage;
}
}

Thatsall folks, now we have created a complete demo application, where samplePageOne.xhtml and samplePageTwo.xhtml are included dynamically where as xhtml documents like header, leftColumn, rightColumn and the footer are included statically. Here is the snaps of our sample demo application.

Sample Demo Snaps
Snap1 specifies the dynamic include of samplePageOne when the page1 of sideBar is clicked.

Layout DemoSnap1

Snap2 specifies the dynamic include of samplePageOne when the page2 of sideBar is clicked.

Layout Sample Demo2

Conclusion
In this article, we have learned how to constuct a complete layout using facelets as a view technology and also we have learned how to include the pages dynamically, so that you can make use of serveral JSF forms more dynamic. If you find this article is useful to you dont forget to share with me by your valuable comments. Have a joyous code day.

Categories: Facelets, Java, Java EE, JSF

49 Responses so far.

  1. James says:

    This is great stuff. Should be very useful for people who want to develop frameless web applications using facelets. Thanks for putting this up.

    Well-loved. Like or Dislike: Thumb up 10 Thumb down 0

    [Reply]

    Manidhar Reply:

    Hi,

    I tried to execute the above example. When i am calling the layout-Client.xhtml i am getting the resource not found error. Please help me in resolving this issue.

    Thanks in Advance

    Thumb up 0 Thumb down 0

    [Reply]

  2. James says:

    Instead of calling “leftNavigation” why not call it as just “sidebar”. And a sidebar can be in right as well.

    Just my 2 cents :-)

    Thumb up 1 Thumb down 0

    [Reply]

    Gift Sam Reply:

    Thank you James for your valuable suggestions to a green horn blogger like me. Will surely update my post!!

    Thumb up 0 Thumb down 0

    [Reply]

  3. [...] is only about installation but I want to get in to the action. Dont worry just follow the link Layouting and Dynamic include in Facelets , which will help you to construct templates and dynamic include using Facelets. If you find this [...]

    Thumb up 1 Thumb down 0

  4. For the css part, you can also use PrimeFaces Layout Framework: http://97.107.138.40:8080/prime-showcase/ui/layoutComplex.jsf

    Thumb up 0 Thumb down 1

    [Reply]

    Gift Sam Reply:

    Thanks a lot cagataycivici for your valuable comment. I love Primefaces library and its components. we can also use Richfaces semantic layouts http://livedemo.exadel.com/richfaces-demo/richfaces/layouts/page/template.jsf that was also great. But in this article I just stated a basic layout in the CSS part for a clear understanding. Your blogs about Primefaces are really amazing!!

    Thumb up 1 Thumb down 0

    [Reply]

  5. Pawe? Ryznar says:

    Hi :)
    There is a little mistake in layout-Client.xhtml, which cause error [in server log] during page request [and user get blank page instead of right result]:

    PWC4011: Unable to set request character encoding to UTF-8 from context /WebApplication1, because request parameters have already been read, or ServletRequest.getReader() has already been called
    /bottom.xhtml not found at jndi:/server/WebApplication1/bottom.xhtml

    should be footer.xhtml instead of bottom.xhtml.

    Thanks for nice introduction into Facelets :)

    Thumb up 1 Thumb down 0

    [Reply]

  6. Gift Sam says:

    Oh!! Thank you so much for your intimation. I have updated in the article.

    Thumb up 1 Thumb down 0

    [Reply]

  7. Pawe? Ryznar says:

    Hi :) this time I have question :P
    Do you develop any components in Facelets?
    I’m looking for some tips how to in such component http://pastebin.com/f10c02122 add some validation.
    I mean, when I normally use it in this way http://pastebin.com/f163274c6 , I would like to do such things http://pastebin.com/f432ce581
    Do you have any idea?

    Thumb up 1 Thumb down 0

    [Reply]

  8. Gift Sam says:

    @Pawe? Ryznar
    Hi Pawe? Ryznar,
    I will found a workaround for your question and let you know If I find any answers.

    Thumb up 0 Thumb down 0

    [Reply]

  9. Florian Becker says:

    I am trying something like ,
    but i am facing the problem, that the include only updates after I refresh the page another time.

    Is There a special reason why you are nesting this ‘dynamic’-include in a tag and your other includes not ? I am looking for a solution without using richfaces.

    Thanks a lot for your post.

    Thumb up 0 Thumb down 0

    [Reply]

  10. Gift Sam says:

    Hi Florian Becker,
    Thanks for your comments. If you want to include the pages without the Richfaces means
    To include using JSF alone,
    mainLayout.jsp
    [sourcecode language="css"]
    <div id="leftColumn">
    <jsp:include page="#{PageViewIdGenerator.includePage}" flush="true"/>
    </div>
    [/sourcecode]
    sideBar.jsp
    [sourcecode language="css"]
    <h:commandLink id="samplePageId" value="Page1"
    action="#{PageViewIdGenerator.sideBarAction}">
    <f:param id="page1ParamId" name="pageId" value="Page1"/>
    </h:commandLink>
    [/sourcecode]
    PageViewIdGenerator.java
    [sourcecode language="css"]
    public String sideBarAction()
    {
    FacesContext context = FacesContext.getCurrentInstance();
    String selectedPageViewId = context.getExternalContext().getRequestParameterMap().get("pageId");
    System.out.println("Page Id is: " + selectedPageViewId);
    if (selectedPageViewId.equalsIgnoreCase("page1"))
    {
    includedPage = "/samplePageOne.xhtml";
    }
    }
    [/sourcecode]
    Note: The included page should come inside the f:subview.
    Likewise use ui:include, when you use Facelets. I hope this one helps!!

    Thumb up 0 Thumb down 0

    [Reply]

  11. Florian Becker says:

    Thanks a lot for your quick reply, unfortunately the code snippets from my previous post were removed, I hope it was still clear what I am trying to do.

    I want to use dynamic includes with facelets (JSF 2.0), and therefore I am using a snippet like yours only without the rich:panel:
    [sourcecode language="css"]
    <ui:define name="content">
    <ui:include src="#{PageViewIdGenerator.includedPage}"/>
    </ui:define>
    [/sourcecode]

    Would be cool if you could try to reproduce this behaviour that I am experiencing, where the new page is only included after a page refresh even though the bean values have been definitely updated. If I change the page to include several times in a row, I always get the page included that should have been included one request before.

    Thumb up 0 Thumb down 0

    [Reply]

    Gift Sam Reply:

    Hi Florian Becker,
    Have you print and checked the value of selectedPageViewId variable in PageViewIdGenerator.java. Did u get the same value from the f:param tag??

    Thumb up 0 Thumb down 0

    [Reply]

  12. Antony says:

    I have been tryng the code to construct my app but i always get an error message: xml declaration allowed only at the start of the document. What can be wrong

    A N Munuhe

    Thumb up 0 Thumb down 0

    [Reply]

    Gift Sam Reply:

    Hi Antony,
    Thanks for your comment. Really I cant understand your question. What did you declared in your XML file? Are you speaking about the configuration issues in web.xml or faces-config.xml? Kindly explain your issue in detail. I will try my best to help you!!

    Thumb up 0 Thumb down 0

    [Reply]

  13. Antony says:

    Hi sam.
    I did everything as indicated in the tuitorial, but when i run my app, i get that error message on my page when loading on my browser. My diffult browser is google chrome and i uses netbeans 6.7 ide. The line with insert of the header is always indicated to be the source of the problem.

    Thumb up 0 Thumb down 0

    [Reply]

    Gift Sam Reply:

    Kindly Check the included path which you specified for the header!!

    Thumb up 0 Thumb down 0

    [Reply]

  14. Khalid says:

    thanks a lot for your work….it’s very helpful for the beginner…

    encore une fois BRAVO!!!

    KM

    Thumb up 0 Thumb down 0

    [Reply]

  15. Oleg says:

    Hello,

    Great article! Just one question. In the example the whole browser page gets refreshed. But how the content area only can be refreshed (that means rendered)?. I guess with a which should be wrapped by . All h:commandLink’s must be replaced then by a4j:commandLink’s contained reRender=”content” attribute. Right?

    Thanks in advance!

    Thumb up 0 Thumb down 0

    [Reply]

    Gift Sam Reply:

    Yes you are right, the following code would be helpful

    [sourcecode language="css"]
    <a4j:outputpanel id="contentPanel">
    <div id="leftColumn">
    <jsp:include page="#{PageViewIdGenerator.includePage}" flush="true"/>
    </div>
    </a4j:outputpanel>
    [/sourcecode]

    just rerender the a4j:outputpanel from the a4j:commandlink.
    Thanks – Gift Sam

    Thumb up 0 Thumb down 0

    [Reply]

  16. Oleg says:

    Hello,

    Great article! Just one question. In the example the whole browser page gets refreshed. But how the content area only can be refreshed (that means rendered)?. I guess with a <h:panelGroup id=”content”> which should be wrapped by <ui:define name=”content”>. All h:commandLink’s must be replaced then by a4j:commandLink’s contained reRender=”content” attribute. Right?

    Thanks in advance!

    Thumb up 0 Thumb down 0

    [Reply]

  17. Maurice Karboe says:

    Thx so much for this tutor, it’s so helpful to me as a beginner of facelets.

    GBU.

    Thumb up 0 Thumb down 0

    [Reply]

  18. Devika says:

    hi
    i have some problems dynamic adding pages to seam framework,

    can u hlep me.

    and i have filename is updating at backend properly.

    Pls anybody help me.

    Thumb up 0 Thumb down 0

    [Reply]

    Gift Sam Reply:

    Kindly explain your problem in detail. I will do my best to help you!!
    Thanks – Gift Sam

    Thumb up 0 Thumb down 0

    [Reply]

  19. Sonam says:

    Hi,

    I have a small problem when using dynamic include. When the files (to be included) are on the same level (in the same directory) as the the file in which i am including them, everything works fine. but the moment i try to include a file that is in a different directory, it gives me a 404 error. For example, i have a file “reports.xhtml” in a folder called “user”, when i try to include this dynamically, it gives me the following problem:

    /user/reports.xhtml not found at jndi:/localhost/test/user/reports.xhtml

    I have checked that when i include the file statically (ui:include src=”user/reports.xhmtl”) everything works fine. Could you tell me what the problem is?

    Thanks,

    Sonam

    Thumb up 0 Thumb down 0

    [Reply]

    Gift Sam Reply:

    Hi Sonam,

    What JavaEE Server do you use?? I reckon you need to change the file structure for your project inorder to match up the file structure of your server.
    Thanks-Gift Sam

    Thumb up 0 Thumb down 0

    [Reply]

  20. Guna says:

    This is great tutorial. I am using JSF2.0, the bean is sending me correctly the page. The page opens but in a new page, it is not in the content area.

    Here is my code:

    If you can help, it will be great. Thanks very much. I am breaking my head for more than two days.

    Thumb up 0 Thumb down 0

    [Reply]

    Gift Sam Reply:

    Hi Guna,

    The solution specified in the #11 and #20 perfectly works for me.It would be better, If you give your sample source code so that I will simulate your problem and revert back to you as soon as possible.
    Kindly wrap your source code by following the link http://wordpress.org/extend/plugins/syntaxhighlighter-plus/other_notes/

    Thanks – Gift Sam

    Thumb up 0 Thumb down 0

    [Reply]

  21. Guna says:

    Thumb up 0 Thumb down 0

    [Reply]

  22. Guna says:

    Hi Florien,

    I have the same issue as you. Have you managed to work that? Please share your solution with me. I am struggling with this for the past two days.

    Thumb up 0 Thumb down 0

    [Reply]

  23. [...] is only about installation, but I want to get in to the action!!. Dont worry just follow the link Layouting and Dynamic include in Facelets , which will help you to construct templates and dynamic include using Facelets. If you find this [...]

    Thumb up 0 Thumb down 0

  24. krzysiek says:

    Great example, exactly what i needed.
    thx

    Thumb up 0 Thumb down 0

    [Reply]

  25. Siew Ling says:

    @Florian Becker
    I have the same problem as you, which I need to click twice to get to the correct page. May I know do you found the workaround? Thanks.

    Thumb up 0 Thumb down 0

    [Reply]

  26. giftsam says:

    @Siew Ling
    Did you print the value of selectedPageViewId in the console. What value you got? I will resimulate your problem in JSF 2.0 and let you know the way to resolve the problem!!

    Thumb up 0 Thumb down 0

    [Reply]

  27. Patrick Meidl says:

    @Florian Becker and @Siew Ling
    I had the same problem with JSF 2 (dynamic include only appeared on second submit). a workaround I found is to use an explicit navigation outcome in
    PageViewIdGenerator.sideBarAction() (i.e. return “success” instead of an empty string), and a navigation rule where from-view-id and to-view-id are the same. this seems to do the same thing as returning an empty string (or null), namely stay at the same view, but it looks like JSF handles it differently.

    I figure that an explanation for this behaviour can be derived from the excellent article on pitfalls regarding how views are built when using Facelets:

    http://www.ilikespam.com/blog/c:foreach-vs-ui:repeat-in-facelets

    since ui:include is a TagHandler, it is only called when the view is built. in a postback, the view is restored at the beginning of the lifecycle. at this point, the includedPage has not been set yet (this happens in the next lifecycle phase). when you return an empty string from the action method, the view is only rendered, but not re-built from scratch. this seems to be different when using an explicit navigation outcome, which will call FacesContext.setViewRoot(), thus building a new view which will correctly include the desired page component.

    hope this explanation makes sense.

    Thumb up 0 Thumb down 0

    [Reply]

  28. Patrick Meidl says:

    I just found that an alternative to using explicit navigation to the same view is to force re-building of the view programmatically:

    [source lang='java']
    FacesContext ctx = FacesContext.getCurrentInstance();
    ViewHandler viewHandler = ctx.getApplication().getViewHandler();
    UIViewRoot viewRoot = viewHandler.createView(ctx, ctx.getViewRoot().getViewId());
    ctx.setViewRoot(viewRoot); ctx.getApplication().getNavigationHandler().handleNavigation(ctx, null, null);
    [/source]

    not sure if you need the last line in the use case described in this blog. I call this code in a ValueChangeListener for a select menu, so I have to handle navigation explicitely.

    Thumb up 2 Thumb down 0

    [Reply]

  29. giftsam says:

    The code specified in this article works well for JSF1.2 together with facelets. But JSF2.0, very soon I will update the article.
    Thanks!!

    Thumb up 0 Thumb down 0

    [Reply]

  30. Aftab Ahmad says:

    Hi Gift sam,
    Your this code is working absolutely into FireFox web browser but gives an error “XML declaration allowed only at the start of the document” into Google chrome. Thanks in advance for your kind information about this issue.

    Thumb up 0 Thumb down 0

    [Reply]

  31. can u plz attach the complete code for this example ?

    Thumb up 0 Thumb down 1

    [Reply]

  32. Oleg says:

    Thanks to Patrick Meidl for a workaround.

    The issue with JSF 2 and dynamic includes was fixed in Mojarra 2.0.3 and everything works fine now. I read the wrong behavior was caused by reason of this issue http://java.net/jira/browse/JAVASERVERFACES-1402

    Now you can use ui:include in JSF 2.1 ans they are really dynamic!

    Thumb up 0 Thumb down 0

    [Reply]

    Krystian Reply:

    I can’t get it to work :( Oleg, can you post a link or some example code?

    Thumb up 0 Thumb down 0

    [Reply]

    Oleg Reply:

    Hi Krystian,

    These two posts from PrimeFaces forum can help you (I hope)
    http://primefaces.prime.com.tr/forum/viewtopic.php?f=3&t=1251
    http://primefaces.prime.com.tr/forum/viewtopic.php?f=3&t=7054

    Thumb up 1 Thumb down 0

    [Reply]

  33. isa kalinsaz says:

    The dynamic content wouldn’t work correctly.You should include in sideBarAction method below code.
    [Source]
    FacesContext ctx = FacesContext.getCurrentInstance();
    ViewHandler viewHandler = ctx.getApplication().getViewHandler();
    UIViewRoot viewRoot = viewHandler.createView(ctx, ctx.getViewRoot().getViewId());
    ctx.setViewRoot(viewRoot); ctx.getApplication().getNavigationHandler().handleNavigation(ctx, null, null);
    [/Source]

    Thumb up 2 Thumb down 0

    [Reply]

  34. Rohit says:

    I am getting this waning Please help me to resolve it

    INFO: WARNING: FacesMessage(s) have been enqueued, but may not have been displayed.
    sourceId=null[severity=(ERROR 2), summary=(One or more resources have the target of 'head', but no 'head' component has been defined within the view.), detail=(One or more resources have the target of
    'head', but no 'head' component has been defined within the view.)]

    Thumb up 0 Thumb down 0

    [Reply]

    Rohit Reply:

    Hi, I got the solution I just put h:head in place of simple head in layout.xhtml……

    But I am not getting the Page one or two when i click on any link….I am getting the page id in console..But page is not displaying…….Please help me

    Thumb up 0 Thumb down 0

    [Reply]

  35. Rohit says:

    Hi, I got the solution I just put h:head in place of simple head in layout.xhtml……

    But I am not getting the Page one or two when i click on any link….I am getting the page id in console..But page is not displaying…….Please help me to getting the page on click of command button link

    Thumb up 0 Thumb down 0

    [Reply]

  36. Vinod says:

    its really awasome for begineer who wants to develop their templates by using faceletes… nice keep it up…..i am usinf jsf 2,0 and icefaces 3.0

    Thumb up 0 Thumb down 0

    [Reply]