ミニクイズ(JSF) のバックアップ差分(No.1)

バックアップ一覧
現在との差分を表示
ソースを表示
バックアップを表示
ミニクイズ(JSF) へ行く。
- 1 (2014-03-28 (金) 11:16:30)

追加された行はこの色です。
削除された行はこの色です。

*ミニクイズ(JSF) [#wf958e54]
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で作成する。~
事前に、初期画面、グー、チョキ、パー、グッチョッパー（任意）用の同一サイズの画像を作成し、プロジェクト名/プロジェクト名-war/webに格納しておく。~
#ref(jn1.jpg)~
h:graphicImageは画像を表示するためのタグである。~
実際の画像に合わせて画像の幅（width）、高さ（height）、場所（value）を指定する。~
ただし、画像の場所をじゃんけんの結果（result）で変えるようにする。eqは==の意味である。~
janken()メソッドを呼び出してじゃんけんをするグー、チョキ、パーのボタンとreset()メソッドを呼び出して初期状態にする戻るボタンを作成する。~
各ボタンに対しf:ajaxタグを使用して、ボタンが押されたときに画像のみを書き換えるようにする。~
>
 <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/>
             <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>

~
（注意）~
乱数の質が悪いため、同じ結果が連続で出やすい。~
~
*コメント [#e7a14891]
#comment