Question

hi chums I am new to JSF and I got stuck in JSF problem.I want to add dynamically my content in my JSF page.My requirment is that I have one facelets which I have to add in my page after some event.

My page contains

two fields ‘user name’ and ‘answer’
and
two buttons ‘login’ and ‘recover password’

Facelet contains

a field and just a button

Now I want that when I run my this page it should show only Page contents(described above)
and if user press the button 'recover password' then it should show the facelet under the components of page on the same page mean after pressing the button , page could include facelet.
But now when I run my code it show both as I haven’t put any logic to add 2nd facelet dynamically.
Here a patch of my code given below

 <h:inputText id="txtLogin" styleClass="textEntry" required="true" requiredMessage="Username is required."> 
                    </h:inputText>
<h:inputText id="answer" styleClass="textEntry" autocomplete="off" required="true" requiredMessage="Answer is required."></h:inputText>
                                    <h:commandButton id="btnSave" value="Save" styleClass="formbutton" onclick="btnSave_Click" />
                    <h:commandButton id="btnRecover" value="Recover" styleClass="formbutton" onclick="btnRecover_Click"/>

Now I want when this btnRecover_click click then it include this facelet or run this code

<div class="divPadding">
            <ui:include id="passrecov" src="ucPasswordRecovery.xhtml" rendered="false"/>
        </div>

Keep in mind that I have to do this with JSF and don’t want to do this with JavaScript

Thanks

Answer 1

I’ll post a sample using with 1 column, remember that you could use another ui container.

<h:form>
    <h:panelGrid id="login">
        <h:panelGrid>
            <h:inputText id="txtLogin" styleClass="textEntry" required="true"
                requiredMessage="Username is required."> 
            </h:inputText>
            <h:inputText id="answer" styleClass="textEntry" autocomplete="off"
                required="true" requiredMessage="Answer is required.">
            </h:inputText>
            <h:commandButton id="btnSave" value="Save" styleClass="formbutton"
                onclick="btnSave_Click" />
            <h:commandButton id="btnRecover" value="Recover" styleClass="formbutton"
                action="#{loginBean.showPassRecovery}" />
        </h:panelGrid>
    </h:panelGrid>

    <h:panelGrid id="passRecovery">
        <h:panelGrid rendered="#{not loginBean.loginEnabled}">
        <ui:include id="passrecov" src="ucPasswordRecovery.xhtml" />
        </h:panelGrid>
    </h:panelGrid>
</h:form>

And your managed bean:

@ManagedBean
@ViewScoped
public class LoginBean {
    private boolean loginEnabled;

    public LoginBean() {
        loginEnabled = true;
    }

    //getters and setters...

    //this method will return void, so the page will be refreshed with the new
    //loginEnabled value. this time the components inside "login" panelGrid won't be rendered
    //but "passRecovery" panelGrid components will.
    public void showPassRecovery() {
        loginEnabled = false;
    }
}