[JAVAEETUTORIAL-159] ajaxguessnumber: possible solutions without js-hack Created: 28/Feb/13  Updated: 24/Jun/13  Resolved: 24/Jun/13

Status: Resolved
Project: javaeetutorial
Component/s: examples
Affects Version/s: 6.0.8
Fix Version/s: 7.0.2

Type: Improvement Priority: Minor
Reporter: swiss-chris Assignee: Ian Evans
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: 30 minutes
Time Spent: Not Specified
Original Estimate: 30 minutes

Tags: jsf2, render, rendered, scope, tutorial, validation


When reading the chapter on the ajaxguessnumber example app and analysing the code, I was surprised at the choice of writing a custom js-function "msg" to get rid of the stale result. Certainly, this allows the demonstration of the h:commandButton's onevent attribute, but:

  • it doesn't seem like a clean solution to me (it doesn't seem very refactoring-friendly because of the 2 getElementById("hard-coded HTML element ID") calls),
  • it doesn't explain the inclusion of the commented-out code <f:ajax execute="userNo" render="result errors1" /> within the code AND the tutorial chapter.

It looks more like a quick fix by one person (developer) that was later commented on by another person (who wrote the tutorial chapter).

If one were to want to rewrite the code as it was perhaps originally intended (as is perhaps still visible in the commented-out code aforementioned), I could think of the following two possibilities:

  1. Only render the outputText if there was no validation error.
  2. Change the scope of the ManagedBean from @SessionScoped to @RequestScoped

The first solution would look something like the following. For it to work with Ajax, the outputText would need to be wrapped in a container such as h:panelGroup and the f:ajax render attribute would need to refer to the panel's ID ("outputGrid"):

<h:commandButton id="submit" value="Submit" >
    <f:ajax execute="userNo" render="outputGrid" />
<h:panelGroup layout="block" id="outputGroup">
    <h:outputText id="result" style="color:blue"
                  value="#{userNumberBean.response}" rendered="#{!facesContext.validationFailed}"/>
    <h:message id="errors1" showSummary="true" showDetail="false"
               style="color: #d20005;
               font-family: 'New Century Schoolbook', serif;
               font-style: oblique;
               text-decoration: overline" 

The second solution changes the design altogether. I'm not sure why you would want @SessionScoped for this example in the first place. @RequestScoped seems more appropriate and solves the problem of hiding the "stale output" of the "result" outputText element.

Comment by swiss-chris [ 28/Feb/13 ]

After posting my original proposals, I realized that simply changing the scope from @SessionScoped @RequestScoped wouldn't suffice. While the userNumber could be @RequestScoped, the randomInt needs to be @SessionScoped for the guessing game to give the user a second chance.

Off hand all I can think of to make this work as I had intended is to create a second dukesNumberBean, also a managed bean that contains the randomInt as well as the minimum and maximum values. I used @ManagedProperty(value="#


") to inject it into userNumberBean

by the way, the value 10 was hardcoded into the userNumberBean constructor. Alternatively, randomInt could be created the following way:

long range = maximum-minimum+1;
randomInt = (int)(minimum + randomGR.nextDouble()*range);
Comment by Ian Evans [ 24/Jun/13 ]

UserNumberBean was changed to request-scoped, and a new session-scoped backing bean, DukesNumberBean, was added. A new panel group was added to display the results or the validation error. These changes eliminate the need for the separate ui.js Javascript file, as stale data should not be a problem.

These changes probably better reflect how we want users to use the f:ajax tag, but we no longer have an example that uses onevent or shows how to add custom Javascript. Perhaps we need an advanced example?

Comment by Ian Evans [ 24/Jun/13 ]

Fixed in source and rewrote doc source. The fixes will appear in the next Tutorial update.

Generated at Fri Oct 09 03:49:48 UTC 2015 using JIRA 6.2.3#6260-sha1:63ef1d6dac3f4f4d7db4c1effd405ba38ccdc558.