Templating in JSF2.1: How does call his action?

Question

In according to this post, I want to redesign my template, because I have the same issue. My <h:commandButton>'s are not called.

EDIT: I implement a way to make a template from this tutorial: KLICK

Here's my new main template-client called app.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">
<body>
<ui:composition template="./layout/layout.xhtml">
<ui:define name="header">
<ui:include src="./misc/header.xhtml"/>
</ui:define>
<ui:define name="rightColumn">
Ads here
</ui:define>
<ui:define name="leftColumn">
<ui:include src="./misc/sideBar.xhtml"/>
</ui:define>
<ui:define name="content">
<h:panelGroup id="contentPanel">
    <ui:include src="#{appController.content}.xhtml" />
</h:panelGroup>
</ui:define>
<ui:define name="footer">
<ui:include src="./misc/footer.xhtml"/>
</ui:define>
</ui:composition>
</body>
</html>

The master-layout page:

<?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: 100%;
}
#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: 180px;
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: 180px;
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>

And this is one of the Pages, which gets included. EDIT: I set in the managed bean this page as default. The menu at the left side doesn't do anything at the moment. Because it isn't needed at the moment. The only thing i want is that this action gets called if i click on this button: <h:commandButton id="btn_plan" value="Planen" action="#{hldyPlanningController.addHoliday()}" style="width: 170px; height: 30px"/>

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


    <h:head>
        <f:facet name="first">
            <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
        </f:facet>
    </h:head>
    <h:body>
        <h:form id="frm_hldy_plan">
            <p:panelGrid style="width: 100%;" >
                <f:facet name="header">
                    <p:row>
                        <p:column colspan="2" style="height:50px;">
                            Urlaubsplanung
                        </p:column>
                    </p:row>
                </f:facet>
                <p:row>
                    <p:column style="width: 420px; vertical-align: top;" colspan="1"> 
                        <p:panel style="font-size: 12px; width: 420px; position: relative; border: 1px solid gray">

                            <f:facet name="header">
                                Urlaubsantrag Formular
                            </f:facet>

                        <p:panelGrid id="pnl_userinfo" style="font-size: 12px; width: 400px; border: 1px solid gray">

                            <f:facet name="header">  
                                <p:row>
                                    <p:column colspan="2">Persönliche Informationen</p:column>
                                </p:row>
                            </f:facet>
                            <p:row>
                                <p:column style="width:120px">
                                    <h:outputText value="Name:"/>
                                </p:column>
                                <p:column>
                                    <h:outputText value="#{loginController.sessionData.user_name}" />
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column style="width:120px">
                                    <h:outputText value="Team:" />
                                </p:column>
                                <p:column>
                                    <h:outputText value="#{loginController.sessionData.teams_name}" />
                                </p:column>
                            </p:row>
                        </p:panelGrid>
                        <br/>
                        <p:panelGrid id="pnl_time" style="font-size: 12px; width: 400px; border: 1px solid gray">
                            <f:facet name="header">  
                                <p:row>
                                    <p:column colspan="2">Zeitraum</p:column>
                                </p:row>
                            </f:facet>
                            <p:row>
                                <p:column style="width:120px">
                                    <p:outputLabel for="cld_startdate" value="Startdatum:" />
                                </p:column>
                                <p:column>
                                    <p:calendar value="#{hldyPlanningController.startdate}" id="cld_startdate" showOn="button" pattern="dd.MM.yyyy" required="true" requiredMessage="Startdatum ist ein Pflichtfeld!" showWeek="true"/>
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column style="width:120px">
                                    <p:outputLabel for="cld_enddate" value="Enddatum:" />
                                </p:column>
                                <p:column>
                                    <p:calendar value="#{hldyPlanningController.enddate}" id="cld_enddate" showOn="button" pattern="dd.MM.yyyy" required="true" requiredMessage="Enddatum ist ein Pflichfeld!" showWeek="true"/>
                                </p:column>             
                            </p:row>
                        </p:panelGrid>
                        <br/>
                        <p:panelGrid id="pnl_misc" style="font-size: 12px; width: 400px; border: 1px solid gray">
                            <f:facet name="header">  
                                <p:row>
                                    <p:column colspan="2">Weiteres</p:column>
                                </p:row>
                            </f:facet>
                            <p:row>
                                <p:column style="width:120px">
                                    <p:outputLabel for="opt_hType" value="Typ:"/>
                                </p:column>
                                <p:column>
                                    <p:selectOneButton value="#{hldyPlanningController.type}" id="opt_hType" required="true" requiredMessage="Typ ist ein Pflichtfeld!">  
                                        <f:selectItem itemLabel="Urlaub" itemValue="U" />  
                                        <f:selectItem itemLabel="Absetzen" itemValue="A" />  
                                    </p:selectOneButton> 
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column style="width:120px">
                                    <p:outputLabel for="txta_note" value="Bemerkung:"/>
                                </p:column>
                                <p:column>
                                    <p:inputTextarea maxlength="45" rows="2" cols="30" value="#{hldyPlanningController.note}" id="txta_note"/>  
                                </p:column>
                            </p:row>
                        </p:panelGrid>                    
                        <br/>
                        <p:panelGrid id="pnl_actions" style="font-size: 12px; width: 400px; border: 1px solid gray">
                            <f:facet name="header">  
                                <p:row>
                                    <p:column colspan="2">Aktion</p:column>
                                </p:row>
                            </f:facet>
                            <p:row>
                                <p:column>
                                    <h:commandButton id="btn_plan" value="Planen" action="#{hldyPlanningController.addHoliday()}"  style="width: 170px; height: 30px"/>
                                </p:column>
                                <p:column>
                                    <h:commandButton id="btn_submit" value="Abschicken"  style="width: 170px; height: 30px"/>
                                </p:column>
                            </p:row>
                        </p:panelGrid>
                        </p:panel>                    
                    </p:column>
                    <p:column colspan="1" style="vertical-align: top;">
                        <p:panel style="font-size: 12px; border: 1px solid gray;">
                            <f:facet name="header">
                                Mitarbeiter, die in diesem Zeitraum auch Urlaub geplant haben
                            </f:facet>
                            <p:schedule value="#{calendarController.eventModel}" widgetVar="myschedule"></p:schedule>
                           </p:panel>
                    </p:column>
                </p:row>     
            </p:panelGrid>
        </h:form>
    </h:body>
</html>

All Beans are @MangedBean and @SessionScoped. I'm using JSF2.1 with Primefaces 3.4.1 on Tomcat 7.x;

I'm new to the JSF Framework and can't figure out what i'm doing wrong in this case. Please help me.

Thanks a lot.

Bad news is that `app.xhtml` might be a template, but has no 'insert` tags to include the info from the page called. Luckily, the page does not use that template at all (if it was using it, you would need `define` tags to wrap the data you want to show). You do not even define the `template` attribute. Whatever the issue you have it is not related to templating; please modify your question so we can center in the real problem. — SJuan76, Oct 05 '12 at 11:36
Your are right in saying that isn't a really template. I googled and implemented [this](http://www.techbrainwave.com/?p=136). And my `` are not called again. I had updated my Post above. — commandcraxx, Oct 05 '12 at 12:32

score 0 · Answer 1 · edited May 23 '17 at 10:26

I propose 2 methods to solve your issue: 1- Put the commandButton outside the panel grid, just before the form tag as follows:

                    <h:commandButton action="#{ficheDescControl.edit()}" value="Valider" />
                </h:form>

2- use the UI:composite instead of include. I used it and I'm able to trigger CommanButton properly. You can take a look of a question of mine where the command button works: How to pass a bean from jsf to another using templating?

Templating in JSF2.1: How does call his action?

1 Answers1