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