じゃんけん(JSF)

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() {
   }
   // getter/setter省略
   public void janken() {
       double rand = Math.random();
       result = (int) (rand / 0.3) + 1;
   }
   public void reset() {
       result = 0;
   }
}

続いて、じゃんけんをする画面をFaceletsで作成する。
事前に、初期画面、グー、チョキ、パー、グッチョッパー(任意)用の同一サイズの画像を作成し、プロジェクト名/プロジェクト名-war/webに格納しておく。

#ref(): File not found: "jn1.jpg" at page "じゃんけん(JSF)"

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>


(注意)
乱数の質が悪いため、同じ結果が連続で出やすい。

コメント



トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2014-06-28 (土) 01:50:18 (3584d)