CodeZine(コードジン)

特集ページ一覧

CDIを利用したサンプルアプリーケションの作成

JavaEE6 開発入門(7)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2012/06/07 14:00
目次

画面となる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()メソッドが実行されます。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Java EE 6 開発入門

もっと読む

著者プロフィール

  • WINGSプロジェクト 東 浩二(アズマ コウジ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5