画面となるfaceletsの作成
最後に、画面の作成です。この画面では予想した値を入力し、入力値が正しいかを判定後、NumberGameに予想値を渡して結果を受け取ります。
［リスト5］番号合わせ画面となるfacelets index.xhtml
<?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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>番号あわせサンプル</title>
</h:head>
<!-- 番号あわせロジックを実装したManagedBeanはnumberの名前で管理される。-->
<h:body style="font-size: 18px">
次の番号の間から選んだ番号を予想してください。<br />
<h:outputText id="result" value="#{number.message}" style="color:green" />
[ #{number.smallest}～#{number.biggest} ]<br /> …（1）
残り回数は #{number.remainingGuesses} 回です。<br />
<h:form id="form1">
<!-- 番号予想を入力 -->
<h:inputText id="guess" value="#{number.guess}"
validatorMessage="#{number.smallest}から#{number.biggest}の数値を入力してください">
<f:validateLongRange maximum="#{number.biggest}" minimum="#{number.smallest}" /> …（2）
<f:ajax render="guessError" event="blur"/>
</h:inputText>
<!-- 入力チェック用エラーメッセージ -->
<h:message for="guess" id="guessError" style="color: red"/> …（3）
<br />
<!-- 送信ボタン -->
<h:commandButton id="sender" action="#{number.check}" value="送信する" /> …（4）
</h:form>
</h:body>
</html>
リスト中にある#{number}はManagedBeanとなっているNumberGameクラスのCDIコンテナでの名称です。例えばフィールドの値を取得する場合には#{number.biggest}のように、メソッドを実行するときも同様に#{number.check}で指定できます。
（1）では入力可能な数値の範囲を表示しています。予想した値が違うとそれに合わせて、次回入力可能な範囲が狭まりるため、動的に範囲を出力できるようにManagedBeanであるnumberのフィールドからそれぞれ取得しています。
（2）では入力された数値の検証機能が行われます。この値の範囲もManagedMeanから動的に値を取得してチェックを行っています。
（3）は（2）の入力チェックエラーがあった場合に表示されるメッセージ領域です。エラーがない場合には表示されません。
（4）は送信ボタンです。入力された値が適正な範囲の間であれば、予想値と乱数値のチェックが行われるcheck()メソッドが実行されます。
