5
\$\begingroup\$

I'm new to AJAX and am trying to learn by myself with a small test:

It's a survey with 3 questions. I would like to know if I'm using AJAX the correct way, before starting bigger projects.

Here is the question.xhtml 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:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>Question page</title>
    </h:head>
    <h:body>
        <h1>Question page</h1>

        <h3>Regular HTML Form</h3>
        <h:form id="survey">
            Over: <h:outputText value="#{generalController.over}" id="testover"/><br/>
            <h:outputText id="question" value="#{generalController.getQuestion()}"/>
            <p:inputText id="answer" value="#{generalController.answer}"/><br/>
            <h:commandButton id="submit" value="Next" rendered="#{!generalController.last}">
                <f:ajax execute="answer" render="survey"/>
            </h:commandButton>
            <h:commandButton id="done" value="Finish" rendered="#{generalController.last}" action="end"/>
        </h:form>
        <br/>
        <h3>PrimeFace Form</h3>
        <h:form id="pfsurvey">
            Over: <h:outputText value="#{generalController.over}" id="testover"/><br/>
            <h:outputText id="question" value="#{generalController.getQuestion()}"/>
            <p:inputText id="answer" value="#{generalController.answer}" rendered="#{!generalController.over}"/><br/>
            <p:commandButton id="submit" value="Next" rendered="#{!generalController.last}" update="pfsurvey" actionListener="#{generalController.next}" />
            <p:commandButton id="done" value="Finish" rendered="#{generalController.last}" action="end" ajax="false" />
        </h:form>

    </h:body>
</html>

The GeneralController bean is:

import javax.inject.Named;
import javax.inject.Inject;
import javax.enterprise.context.ApplicationScoped;

@Named(value = "generalController")
@ApplicationScoped
public class GeneralController {

    String[] questions = {"What is your age?","Where do you come from?","Are you married?"};
    String answer;
    String question;
    int currentQuestion = 0;
    boolean over  = false;
    boolean last = false;

    public String getAnswer() {
        System.out.println("Get Answer");
        return answer;
    }

    public void setAnswer(String answer) {       
        System.out.println("Set Answer");
        if(currentQuestion < questions.length) {
            System.out.println("To the question  \""+questions[currentQuestion]+"\" your answer is "+answer);
            currentQuestion++;
            if(currentQuestion == questions.length -1) last = true;
            if(currentQuestion == questions.length) over = true;
        }
    }    

    public String getQuestion() {
        System.out.println("Get Question");
        if(!over)
        return questions[currentQuestion];
        else return "";
    }

    public void setQuestion(String question) {
        System.out.println("Set Question");
        this.question = question;
    }

    public void next() {
        System.out.println("Next");
    }

    public String reset() {
        currentQuestion=0;
        over=false;
        last=true;
        return "question";
    }

    public boolean isOver() {
        return over;
    }

    public void setOver(boolean over) {
        this.over = over;
    }

    public boolean isLast() {
        return last;
    }

    public void setLast(boolean last) {
        this.last = last;
    }
}

When the survey is done, it's redirected to the end.xhtml 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:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        Survey is done ! Thank you
        <h:form>
            <p:commandButton value="Try Again" ajax="false" action="#{generalController.reset()}"/>

        </h:form>
    </h:body>
</html>

Here is the generated HTML:

Question 1:

<?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"><head><link type="text/css" rel="stylesheet" href="/MenuMobile3/faces/javax.faces.resource/theme.css?ln=primefaces-humanity" /><link type="text/css" rel="stylesheet" href="/MenuMobile3/faces/javax.faces.resource/primefaces.css?ln=primefaces&amp;v=3.1.1" /><script type="text/javascript" src="/MenuMobile3/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&amp;v=3.1.1"></script><script type="text/javascript" src="/MenuMobile3/faces/javax.faces.resource/primefaces.js?ln=primefaces&amp;v=3.1.1"></script><script type="text/javascript" src="/MenuMobile3/faces/javax.faces.resource/jsf.js?ln=javax.faces&amp;stage=Development"></script>
        <title>Question page</title></head><body>
        <h1>Question page</h1>

        <h3>Regular HTML Form</h3>
<form id="survey" name="survey" method="post" action="/MenuMobile3/faces/question.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="survey" value="survey" />

            Over: <span id="survey:testover">false</span><br /><span id="survey:question">What is your age?</span><input id="survey:answer" name="survey:answer" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" /><script id="survey:answer_s" type="text/javascript">PrimeFaces.cw('InputText','widget_survey_answer',{id:'survey:answer'});</script><br /><input id="survey:submit" type="submit" name="survey:submit" value="Next" onclick="mojarra.ab(this,event,'action','survey:answer','survey');return false" /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-8356752339157975334:-3520173479150310510" autocomplete="off" />
</form>
        <br />
        <h3>PrimeFace Form</h3>
<form id="pfsurvey" name="pfsurvey" method="post" action="/MenuMobile3/faces/question.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="pfsurvey" value="pfsurvey" />

            Over: <span id="pfsurvey:testover">false</span><br /><span id="pfsurvey:question">What is your age?</span><input id="pfsurvey:answer" name="pfsurvey:answer" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" /><script id="pfsurvey:answer_s" type="text/javascript">PrimeFaces.cw('InputText','widget_pfsurvey_answer',{id:'pfsurvey:answer'});</script><br /><button id="pfsurvey:submit" name="pfsurvey:submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="PrimeFaces.ab({formId:'pfsurvey',source:'pfsurvey:submit',process:'@all',update:'pfsurvey'});return false;" type="submit"><span class="ui-button-text">Next</span></button><script id="pfsurvey:submit_s" type="text/javascript">PrimeFaces.cw('CommandButton','widget_pfsurvey_submit',{id:'pfsurvey:submit'});</script><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-8356752339157975334:-3520173479150310510" autocomplete="off" />
</form></body>
</html>

Question 3:

<?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"><head><link type="text/css" rel="stylesheet" href="/MenuMobile3/faces/javax.faces.resource/theme.css?ln=primefaces-humanity" /><link type="text/css" rel="stylesheet" href="/MenuMobile3/faces/javax.faces.resource/primefaces.css?ln=primefaces&amp;v=3.1.1" /><script type="text/javascript" src="/MenuMobile3/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&amp;v=3.1.1"></script><script type="text/javascript" src="/MenuMobile3/faces/javax.faces.resource/primefaces.js?ln=primefaces&amp;v=3.1.1"></script><script type="text/javascript" src="/MenuMobile3/faces/javax.faces.resource/jsf.js?ln=javax.faces&amp;stage=Development"></script>
        <title>Question page</title></head><body>
        <h1>Question page</h1>

        <h3>Regular HTML Form</h3>
<form id="survey" name="survey" method="post" action="/MenuMobile3/faces/question.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="survey" value="survey" />

            Over: <span id="survey:testover">false</span><br /><span id="survey:question">What is your age?</span><input id="survey:answer" name="survey:answer" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" /><script id="survey:answer_s" type="text/javascript">PrimeFaces.cw('InputText','widget_survey_answer',{id:'survey:answer'});</script><br /><input id="survey:submit" type="submit" name="survey:submit" value="Next" onclick="mojarra.ab(this,event,'action','survey:answer','survey');return false" /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-8356752339157975334:-3520173479150310510" autocomplete="off" />
</form>
        <br />
        <h3>PrimeFace Form</h3>
<form id="pfsurvey" name="pfsurvey" method="post" action="/MenuMobile3/faces/question.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="pfsurvey" value="pfsurvey" />

            Over: <span id="pfsurvey:testover">false</span><br /><span id="pfsurvey:question">What is your age?</span><input id="pfsurvey:answer" name="pfsurvey:answer" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" /><script id="pfsurvey:answer_s" type="text/javascript">PrimeFaces.cw('InputText','widget_pfsurvey_answer',{id:'pfsurvey:answer'});</script><br /><button id="pfsurvey:submit" name="pfsurvey:submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="PrimeFaces.ab({formId:'pfsurvey',source:'pfsurvey:submit',process:'@all',update:'pfsurvey'});return false;" type="submit"><span class="ui-button-text">Next</span></button><script id="pfsurvey:submit_s" type="text/javascript">PrimeFaces.cw('CommandButton','widget_pfsurvey_submit',{id:'pfsurvey:submit'});</script><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-8356752339157975334:-3520173479150310510" autocomplete="off" />
</form></body>
</html>
\$\endgroup\$
1
  • 1
    \$\begingroup\$ Your code looks fine. Nothing to complain about. Just a minor comment on your backing bean code: I would always use brackets for if/else constructs, even if there is only on command in each branch. This improves readability and is less error prone. \$\endgroup\$ – Matt Handy Mar 10 '12 at 19:33
6
\$\begingroup\$
  1. @ApplicationScoped
    public class GeneralController {
        ...
    }
    

    I think your bean should be @SessionScoped instead of @ApplicationScoped. Otherwise all of you clients will use the same controller instance.

  2. Instead of an array I'd use a List. It's easier to work with.

    String[] questions = {"What is your age?","Where do you come from?","Are you married?"};
    

    When to use a List over an Array in Java?

  3. You could format the code better:

    if(!over)
    return questions[currentQuestion];
    

    According to the Code Conventions for the Java Programming Language if statements always should use braces. Omitting them is error-prone, and hard to read if you don't indent the conditional statement like above.

  4. The fields could be private instead of the current package private.

    The rule of thumb is simple: make each class or member as inaccessible as possible. In other words, use the lowest possible access level consistent with the proper functioning of the software that you are writing.

    Source: Effective Java 2nd Edition, Item 13: Minimize the accessibility of classes and members, p68.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy