Component for Switching between different views

[stefan.sibitz]

I have the following ajax-problem in short:

I want to set one or another "container" visible for the user
so he can see the one or the other.

Is this possible via Ajax or have i reload the hole page for re-rendering (What i am doing now in the controller) ?

Here is an example of what i am talking about:

Code: Select all

<h:form id="logon-form" prependId="false" >
    <h:panelGroup id="RenderGroup">
            <p:focus context="logon-form"/>
            <p:messages id="msgPrivate" escape="false" autoUpdate="true" closable="false" showSummary="true" showDetail="true"/>
            <h:panelGroup id="LoginStep" rendered="#{loginControl.currentStep==EnumStep.STEP_LOGIN}">
                   <!-- Showing content 1 -->
            <h:panelGroup/>
            <h:panelGroup id="OptionalStep" rendered="#{loginControl.currentStep==EnumStep.STEP_OPTIONAL_STEP}">
                   <!-- Showing optional content on logon (Optional location selection on multi mandant user's) -->
            <h:panelGroup/>

[b]           <p:commandLink id="LoginButton" process="@this @form" update="RenderGroup msgPrivate" action="#{loginControl.Validate()}"  validateClient="true"/>
           <p:defaultCommand target="LoginButton"/>[/b]
    </h:panelGroup>
</form>

What i want to have is something like the master/detail controller but in a simpler way:
I need a component to render the content in case of the condition is true or false by ajax
because then i can switch very fast between different states or show the user different context in case of the condition has been changed...

[Melloware]

Yes I do this all the time. whatever components have the rendered="" on it you must include in the update="" statement of your Ajax so that way the rendered EL expression is re-evaluated and only the components where the rendered=true will be redisplayed.

You MUST do this with Ajax so the JSF tree is re-evaluated for those rendered flags.

[stefan.sibitz]

Does this also work if i have a code like that:

Code: Select all

<h:form id="logon-form" prependId="false" >
	<h:panelGroup id="RenderGroup">
		<!-- Login-Step -->
		<h:panelGroup id="LoginStep" rendered="#{loginControl.currentStep==EnumStep.STEP_LOGIN}">
			<p:inputText id="UserName" autocomplete="off" value="#{loginControl.loginModel.user}" required="true"/>
            <p:password id="Password" autocomplete="off" value="#{loginControl.loginModel.pwd}" required="true"/>
		</h:panelGroup>
		<!-- ClientSelection-Step -->
		<h:panelGroup id="ClientStep" rendered="#{loginControl.currentStep==EnumStep.STEP_CLIENT}">
			<p:inputText id="UserName" autocomplete="off" value="#{loginControl.loginModel.user}" required="true" disabled="true" readonly="true"/>
	                <p:password id="Password" autocomplete="off" value="#{loginControl.loginModel.pwd}" required="true" disabled="true" readonly="true"/>
			<p:selectOneMenu id="Client" value="#{loginControl.loginModel.client}" required="true">
				<f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true"/>
				<f:selectItems value="#{loginControl.allClients}" var="client" itemLabel="#{client.label}" itemValue="#{client}"/>
			</p:selectOneMenu>
		</h:panelGroup>
		<!-- General Button for Updating PanelGroup's -->
		<p:commandLink id="LoginButton" process="@this @form" update="RenderGroup" action="#{loginControl.Validate()}" validateClient="true">
			Continue&nbsp;<i class="fa fa-sign-in IconRight"/>
		</p:commandLink>
		<p:defaultCommand target="LoginButton"/>
	</h:panelGroup>
</h:form>

In the example I have a login form with 2 steps where the second step is optional.
So the user first enters the username/password
and press the LoginButton.
If the user has been found and login/password is ok the user only comes to the second step if he has Administration Rights.
Then he can choose a location / client to logon at the second step.

So can i use ajax to render the first the panelGroup LoginStep and then optionally the panelGroup ClientStep ?


Here i made screenshot's of the example but currently working without ajax cause when rendered=false then also an update via ajax does not change anything:

1.) LoginStep:


2.) ClientStep:

[Melloware]

Well everything looks good to me. When you updated the RenderedGroup it will re-evaluated the two conditional rendered flags. If they are false the section is not rendered.

So for example if...

Code: Select all

rendered="#{loginControl.currentStep==EnumStep.STEP_LOGIN}"

Evaluates to false then the Username and Password section of the screen should not be rendered.

[stefan.sibitz]

Ok, so i made it right - i will test it again.

Eventually the upgrade to Wildfly 11 (Final) or the new Java JRE is a problem...