*じゃんけん(JSF) [#x6df86ea]
JavaServer Facesでじゃんけんをするページを作成する。~
ボタンを押すたびにキャラクターがじゃんけんしてくれる。~
~
まず、ManagedBeanを作成する。~
じゃんけんの結果を格納する変数resultとそのgetter/setterを作成する。~
値の意味は0：初期状態、1：グー、2：チョキ、3：パー、4：グッチョッパー（任意）とする。~
（本来はenumを使用するが簡略化のため）~
乱数を使用してじゃんけんをするjanken()メソッドを作成する。~
グー：30%、チョキ：30%、パー：30%、グッチョッパー（任意）：10%の確率に設定した。~
結果を初期状態に戻すreset()メソッドも作成する。
>
 import javax.inject.Named;
 import javax.enterprise.context.RequestScoped;
 @Named(value = "janken")
 @RequestScoped
 public class Janken {
    private int result;
    public janken() {
    public Janken() {
    }
    // getter/setter省略
    public void janken() {
        double rand = Math.random();
        result = (int) (rand / 0.3) + 1;
    }
    public void reset() {
        result = 0;
    }
 }

続いて、じゃんけんをする画面をFaceletsで作成する。~
事前に、初期画面、グー、チョキ、パー、グッチョッパー（任意）用の同一サイズの画像を作成し、プロジェクト名/プロジェクト名-war/webに格納しておく。~
#ref(jn1.jpg)~
h:graphicImageは画像を表示するためのタグである。~
実際の画像に合わせて画像の幅（width）、高さ（height）、場所（value）を指定する。~
ただし、画像の場所をじゃんけんの結果（result）で変えるようにする。eqは==の意味である。~
janken()メソッドを呼び出してじゃんけんをするグー、チョキ、パーのボタンとreset()メソッドを呼び出して初期状態にする戻るボタンを作成する。~
各ボタンに対しf:ajaxタグを使用して、ボタンが押されたときに画像のみを書き換えるようにする。~
>
 <?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:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>じゃんけんポン</title>
    </h:head>
    <h:body>
        じゃんけんポン♪
        <h:form>
            <h:graphicImage id="im" width="240" height="135"
                            value="#{janken.result eq 0 ? 'd.jpg' : 
                                     janken.result eq 1 ? 'g.jpg' : 
                                     janken.result eq 2 ? 'c.jpg' :
                                     janken.result eq 3 ? 'p.jpg' : 
                                     'gcp.jpg'}"/>
            <br/>
            <h:commandButton value="グー" action="#{janken.janken()}">
                <f:ajax render="im"/>
            </h:commandButton>
            <h:commandButton value="チョキ" action="#{janken.janken()}">
                <f:ajax render="im"/>
            </h:commandButton>
            <h:commandButton value="パー" action="#{janken.janken()}">
                <f:ajax render="im"/>
            </h:commandButton>
            <h:commandButton value="戻る" action="#{janken.reset()}">
                <f:ajax render="im"/>
            </h:commandButton>
        </h:form>
    </h:body>
 </html>

~
（注意）~
乱数の質が悪いため、同じ結果が連続で出やすい。~
~
*コメント [#t52c9257]
#comment
トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS