Presentation is loading. Please wait.

Presentation is loading. Please wait.

エンタープライズアプリケーション II 第7回 / 2006年7月9日

Similar presentations


Presentation on theme: "エンタープライズアプリケーション II 第7回 / 2006年7月9日"— Presentation transcript:

1 エンタープライズアプリケーション II 第7回 / 2006年7月9日
Method Binding エンタープライズアプリケーション II 第7回 / 2006年7月9日

2 ここでの内容 JSFでの Action Method の実装方法について学ぶ。

3 やりたいこと 画面1で名前を入力する 画面1のボタンを押すと、画面2に遷移する。
画面2では、画面1で入力された名前と、現在の時刻を表示する。

4 何をすればよいのか ボタンが押されたときに、「現在の時刻を取得する」という「ビジネスロジック」を実行する。
こうしたビジネスロジックを「Action Method」と言う。 Action Method は、Managed Bean に記述する。

5 currentTime という Action Method (1)
public class ParameterBean { public String currentTime() { Date d = new Date(); DateFormat df = DateFormat.getDateTimeInstance(); ...... sb.append(df.format(d)); return "success"; }

6 currentTime という Action Method (2)
現在の日時を取得して、入力フィールドのパラメータと組み合わせている。 返値として “success” という文字列を返す。

7 page1.jsp <h:form id="searchForm"> <h:inputText id="word"
value="#{ParameterBean.word}" /> <h:commandButton id="button1" action="#{ParameterBean.currentTime}" value="Go!" /> </h:form>

8 action 属性の比較 前章 <h:commandButton id="button1"
action="success" value="Go!" /> 本章 action="#{ParameterBean.currentTime}" value="Go!" />

9 #{ParameterBean.currentTime}
こうしたしくみのことを “Method Binding” と言う。 こうした #{……} という書式を “Method Binding 式” と言う。

10 Method Binding 式 #{ Beanの名前 . Action Method名 }
“Beanの名前” は、 先の managed-bean-name 要素の内容部分 “Action Method名” は、ボタンが押されたときに実行される Action Method 名

11 Action Method のルール public であること 引数がないこと String を返値とすること
この返値が outcome になる。

12 Action Method の返値と outcome (1)
この outcome が、h:commandButton 要素の action 属性の値となる。 この値と、faces-config.xml の設定情報により遷移先が決まる。

13 Action Method の返値と outcome (2)
<h:commandButton id="button1" action="#{ParameterBean.currentTime}" value="Go!" /> ↓(Action Method を実行) ↓ action=“success” value="Go!" />

14 ほかには 次のファイルが必要になる page2.jsp faces-config.xml

15 図書検索プログラムの作成 (1)

16 プログラムの概要 (1) 検索語を入力すると、その検索語を含む本のデータのリストを出力する。 図書データはデータベースに格納されている。

17 プログラムの概要 (2) 入力フィールドに検索語を入れ、ボタンを押すと、Action Method が呼ばれる。
次の画面で、検索結果を出力する。

18 プログラムの概要 (3) 検索結果

19 検索語入力画面 <h:form id="searchForm"> <h:inputText id="searchWord"
value="#{BookSearcher.word}" /> <h:commandButton id="submit" action="#{BookSearcher.searchBooks}" value="Go!" /> </h:form>

20 Managed Bean (1) プロパティ public class BookSearcher { ......
public void setWord(String word) { this.word = word; } public String getWord() { return word;

21 Managed Bean (2) Action Method
public String searchBooks() { searchBooks(word); return "success"; } private void searchBooks(String word) { // データベースの検索処理

22 Managed Bean (3) Model の処理 (1)
検索結果には、複数の図書データが含まれる。 BookData という JavaBeans を用意 1冊の図書データは、1つの BookData に格納される。 java.util.List を使って、複数の BookData をまとめておく。

23 Managed Bean (3) Model の処理 (2)
List<BookData> list = new ArrayList<BookData>(); BookData book = new BookData(); book.setId(rs.getString("id")); book.setTitle(rs.getString("title")); book.setAuthor(rs.getString("author")); list.add(book);

24 検索結果の出力画面 <h:dataTable id="table" border="1"
value="#{BookSearcher.bookList}“ var="book"> <h:column> <f:facet name="header"> <h:outputText value="タイトル"/> </f:facet> <h:outputText id="bookTitle“ value="#{book.title}"/> </h:column> ...... </h:dataTable>

25 h:dataTable 要素 (1) コレクション (List, 配列など) のデータを表にして表示するUIコンポーネント
id 属性がある。 border 属性は、表の罫線の太さの指定 <h:dataTable id="table" border="1" value="#{BookSearcher.bookList}“ var="book"> </h:dataTable>

26 h:dataTable 要素 (2) value 属性で、表示するコレクション型のプロパティを指定する。Value Binding 式を使う。 var 属性は、コレクション中の1つの要素を表す変数名となる。 <h:dataTable id="table" border="1" value="#{BookSearcher.bookList}“ var="book"> </h:dataTable>

27 h:dataTable 要素 (3) この例では、value 属性は List 型である bookList プロパティを指定している。
bookList には、複数の BookData が格納されている。 従って、var 属性で指定された book という変数名は、BookData Bean を指している。 <h:dataTable id="table" border="1" value="#{BookSearcher.bookList}“ var="book"> </h:dataTable>

28 h:column 要素 (1) <h:dataTable ……> <h:column>
<f:facet name="header"> <h:outputText value="タイトル"/> </f:facet> <h:outputText id="bookTitle“ value="#{book.title}"/> </h:column>

29 h:column 要素 (2) h:dataTable 要素の1列分のデータを表す UIコンポーネント

30 f:facet 要素 表の1列のヘッダやフッタを表す UIコンポーネント <h:column>
<f:facet name="header"> <h:outputText value="タイトル"/> </f:facet> …… </h:column>

31 データの出力 この列では、book という変数 (= BookData Bean) の title プロパティの値を出力する。
<h:column> …… <h:outputText id="bookTitle“ value="#{book.title}"/> </h:column>

32 h:dataTable の働き (1) 表の1行分が、h:dataTable の var 属性の値に対応
つまり、コレクション中の1つの JavaBeans が、表の1行分となる。 この例では、List 中の1つの BookData が、表の1行分となる。

33 h:dataTable の働き (2) BookData Bean のどのプロパティを出力するかは、column 要素によって決まる。

34 dataTableの分割表示

35 やりたいこと MyFacesの独自タグを使って、検索結果を分割して表示させる。
t:dataTable と t:dataScroller を使う。

36 t:dataTable 要素 <t:dataTable id=“bookTable” rows=“10” ……> …………
h:dataTableとほとんど同じ dataTableの分割表示 (t:dataScroller) や、ソートできるヘッダ (t:commandSortHeader) が使える rows 属性は、dataTable で一度に表示する行数を指定する

37 2つの t:dataScroller このJSPでは、2つのt:dataScroller が使われている 数字とアイコンが並んでいる行
“Page 1/3” となっている行

38 t:dataScroller 要素 (1) アイコンの表示
<t:dataScroller id="scroll1” for="bookTable” fastStep="10” paginator="true" paginatorMaxPages="9"> …… <t:dataScroller> for属性の値が、対象となるdataTableのid

39 t:dataScroller 要素 (2) アイコンの表示
6つの f:facet タグが、6つのアイコンとして表示される <t:dataScroller> <f:facet name=“first”> … </f:facet> <f:facet name=“last”> … </f:facet> <f:facet name=“previous”> … </f:facet> <f:facet name=“next”> … </f:facet> <f:facet name=“fastforward”> … </f:facet> <f:facet name=“fastrewind”> … </f:facet>

40 t:dataScroller 要素 (3) アイコンの表示
<f:facet name=“first> <h:graphicImage url="images/arrow-first.gif"/> </f:facet> </t:dataScroller> f:facet要素の子要素で、アイコンの画像を表示させている。

41 t:dataScroller 要素 (4) 現在のページ数の表示
<t:dataScroller id="scroll2" for="bookTable" pageCountVar="pageCount" pageIndexVar="pageIndex"> …… </t:dataScroller> pageCountVar 属性は、総ページ数を表す変数名 pageIndexVar 属性は、現在のページを表す変数名

42 h:outputFormat 要素 <h:outputFormat value="Page{0}/{1}">
<f:param value="#{pageIndex}" /> <f:param value="#{pageCount}" /> </h:outputFormat> パラメータを用いたメッセージ出力によく用いられる。 {0} の部分が、ひとつめの f:param 要素の value 属性の値に置き換えられる。 {1} の部分が、ふたつめの f:param 要素の value 属性の値に置き換えられる。

43 t:dataScroller 要素 (5) 現在のページ数の表示
<t:dataScroller id="scroll2" for="bookTable" pageCountVar="pageCount" pageIndexVar="pageIndex"> <h:outputFormat value="Page{0}/{1}"> <f:param value="#{pageIndex}" /> <f:param value="#{pageCount}" /> </h:outputFormat> </t:dataScroller> “pageIndex / pageCount” を展開した文字列が出力される。


Download ppt "エンタープライズアプリケーション II 第7回 / 2006年7月9日"

Similar presentations


Ads by Google