*ミニクイズ(JSF) [#q9737f34]
JavaServer Facesで簡単なクイズを作成する。~
~
まず、ManagedBeanを作成する。~
ユーザーが入力した回答を保持するための変数answerとそのgetter/setterを作成する。~
>
 import javax.inject.Named;
 import javax.enterprise.context.RequestScoped;
 @Named(value = "miniQuiz")
 @RequestScoped
 public class MiniQuiz {
      private int answer;
      // getter/setter省略
 }

~
続いて、クイズの画面をFaceletsで作成する。~
#ref(mq1.gif)~
h:selectOneRadioタグを使用して1つの項目だけ選択可能なラジオボタンを表示させる。~
ラジオボタンの値をManagedBeanのanswerに対応させる。~
また、layoutにpageDirectionを指定し選択肢を縦に並べている。~
~
f:selectItemタグを使ってラジオボタンの選択肢を作成する。~
itemValueに内部で使用する値（ここでは1,2,3,4の整数）、itemLabelに画面に表示する文字列を指定する。~
~
f:ajaxタグではeventにchangeを指定して、ラジオボタンが変更されたときにフォームの内容を送信し、クイズの成果不正解を切り替えるようにする。~
~
h:outputTextタグを使用して、回答（answer）が未入力（0）の場合は何も表示せず、~
正解の場合（今回は4）は正解のメッセージを、不正解の場合は不正解のメッセージを表示するようにする。~
>
 <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core">
     <h:head>
         <title>ミニクイズ</title>
     </h:head>
     <h:body>
         <h:form>
             問題：伊予鉄道の駅は？
             <br/>
             問題：伊予鉄道の駅は？<br/>
             <h:selectOneRadio value="#{miniQuiz.answer}" layout="pageDirection">
                 <f:selectItem itemValue="1" itemLabel="(a) 市駅"/>
                 <f:selectItem itemValue="2" itemLabel="(b) 松山駅"/>
                 <f:selectItem itemValue="3" itemLabel="(c) いよてつ松山駅"/>
                 <f:selectItem itemValue="4" itemLabel="(d) 松山市駅"/>
                 <f:ajax event="change" execute="@form" render="ans"/>
             </h:selectOneRadio>
             <h:outputText id="ans" value="#{miniQuiz.answer eq 0 ? '':
                                             miniQuiz.answer eq 4 ? '正解！' :
                                             '不正解！'}"/>
         </h:form>
     </h:body>
 </html>

~
クイズ1つ1つにこのようなページを作成するのは大変なので、クイズの内容をデータベース等から取得するようにしたい。~
~
（注意）~
Internet Explorer 8では動作しない。~
~
*コメント [#q204d847]
#comment
トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS