A Sample Application

以一个猜数字的例子来学习 Managed Beans 。如图 2-1

    

            英文界面                                                                   中文界面

我用的开发工具是 MyEclipse , 先运行 Eclipse 。

1 ．新建一个Web工程 numberquiz 。添加一个JSF应用。

2 ．建立一个 ProblemBean 。提供数字队列，和解答。相关代码如下：

import java.util.ArrayList;

 

public class ProblemBean {

 

       private ArrayList  sequence;

       private int solution;

      

       public ProblemBean() {

       }

      

       public ProblemBean(int[] values,int solution){

              sequence = new ArrayList();

              for(int i = 0;i<values.length;i++){

                     sequence.add(new Integer(values[i]));

                     this.solution = solution;

              }

       }

 

       public ArrayList getSequence() {

              return sequence;

       }

 

       public void setSequence(ArrayList sequence) {

              this.sequence = sequence;

       }

 

       public int getSolution() {

              return solution;

       }

 

       public void setSolution(int solution) {

              this.solution = solution;

       }

 

}

再建立一个 QuizBean ，问题初始化，得分显示，当前数字队列，用户答案。相关代码如下：

import java.util.ArrayList;

 

public class QuizBean {

      

       private ArrayList problems = new ArrayList();

      

       private int currentIndex;

      

       private int score;

      

       public QuizBean (){

             

              problems.add(new ProblemBean(new int []{3,1,4,1,5},9));//pi

              problems.add(new ProblemBean(new int []{1,1,2,3,5},8));//fibonacci

              problems.add(new ProblemBean(new int []{1,4,9,16,25},36));// 平方

              problems.add(new ProblemBean(new int []{2,3,5,7,11},13));// 质数

              problems.add(new ProblemBean(new int []{1,2,4,8,16},32));//2 的幂

             

       }

    // PROPERTY: problems

       public void setProblems(ArrayList problems){

              this.problems = problems ;

              currentIndex = 0;

              score = 0;

       }

      

    // PROPERTY: score

       public int getScore(){

              return score;

       }

      

    // PROPERTY: current

       public ProblemBean getCurrent(){

              return (ProblemBean)problems.get(currentIndex);

       }

        

    // PROPERTY: answer

      

       public String getAnswer() {

              return "";

       }

       public void setAnswer(String s_answer){

              try{

                     int i_answer = Integer.parseInt(s_answer.trim());

                     if(getCurrent().getSolution() == i_answer)

                            score++;

                         currentIndex = (currentIndex + 1) % problems.size();

              }

              catch(NumberFormatException ex){

                    

              }

             

         }

}

3 ．建立 2 个 properties 文件。 messages_en.properties ， messages_zh_CN.properties 。处理国际化问题。相关代码如下：

       messages_en.properties

 

title= NumberQuiz

heading= HavefunwithNumberQuiz!

currentScore= Yourcurrentscoreis:

guessNext= Guessthenextnumberinthesequence!

answer= Youranswer:

next= Next

 

messages_zh_CN.properties

 

title= \u731c\u6570\u5b57

heading= \u4e00\u4e2a\u731c\u6570\u5b57\u6e38\u620f

currentScore= \u4f60\u7684\u73b0\u5728\u5f97\u5206\uff1a

guessNext= \u731c\u961f\u5217\u91cc\u7684\u4e0b\u4e00\u4e2a\u6570\u5b57

answer= \u4f60\u7684\u7b54\u6848\uff1a

next= \u4e0b\u4e00\u4e2a

 

这个涉及到编码转换的问题，我们用 jdk 自带的工具，这里我用的是 gb2312 编码

新建立一个 messages_zh_CN.txt 文件，内容如下

title= 猜数字

heading= 一个猜数字游戏

currentScore= 你的现在得分：

guessNext= 猜队列里的下一个数字

answer= 你的答案：

next= 下一个

命令提示符号输入  

Navtive2ascii –encoding gb2312 messages_zh_CN.txt messages_zh_CN.properties

4. 建立一个 index.jsp 页面。代码如下：

      

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

 

< f:view locale="zh_CN">

    < f:loadBundle basename="com.messages" var="msgs" />

    < html>

           < head>

                  < title>

                         < h:outputText value="#{msgs.title}"/>

                  </ title>

           </ head>

           < body>

                  < h:form>

                         < h3>

                                < h:outputText value="#{msgs.heading}"/>

                         </ h3>

                         < p>

                                < h:outputText value="#{msgs.currentScore}"/>

                                < h:outputText value="#{quiz.score}"/>

                         </ p>

                         < p>

                                < h:outputText value="#{msgs.guessNext}"/>

                         </ p>

                         < p>

                                < h:outputText value="#{quiz.current.sequence}"/>

                         </ p>

                         < p>

                                < h:outputText value="#{msgs.answer}"/>

                                < h:inputText value="#{quiz.answer}"/>

                         </ p>

                         < p>

                                < h:commandButton value="#{msgs.next}"action="next" />

                         </ p>

                  </ h:form>

           </ body>

    </ html>

</ f:view>

国际化相关代码

< f:view locale=" zh_CN ">

    < f:loadBundle basename="com.messages" var="msgs" />

Locale 可以自己定义en是英文，zh_CN是中文。

5 ．我们修改 faces-config.xml 如下：

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">

 

<faces-config >

       <navigation-rule>

              <from-view-id>/index.jsp</from-view-id>

              <navigation-case>

                     <from-outcome>next</from-outcome>

                     <to-view-id>/index.jsp</to-view-id>

              </navigation-case>

       </navigation-rule>

       <managed-bean>

              <managed-bean-name>quiz</managed-bean-name>

              <managed-bean-class>com.QuizBean</managed-bean-class>

              <managed-bean-scope>session</managed-bean-scope>

       </managed-bean>

</faces-config>

6 ．完毕。测试页面 http://localhost:8080/numberquiz/index.faces