teeda-html-example 19〜40項目を勉強



-進捗
19〜40項目について、ソース及びその動作を確認しました。



-内容

項目19 ダイナミックプロパティ
概要

  • teedaでは、ダイナミックプロパティ機能を用いて、事前に用意していたテンプレートhtmlをアプリケーションの状況に応じて書き換えることができます。具体的には、Pageクラスに「get+id+属性名」という規則に沿ったメソッドを作成すると、画面描画の度に呼び出され、その戻り値は「属性名」として指定した属性の値として設定されます。
  • ここでは、getAaaStyle()というメソッドにより、id="aaa"の要素のstyle属性が書き換わることを確認します。


項目20 レイアウトとCSSへのパス
概要

  • ここでは、cssファイル及びイメージファイルといったファイルへの参照を、
    1. htmlと同じフォルダに置き、参照する場合
    2. htmlと同じフォルダに置き、かつ上位階層からファイルを参照する場合
    3. htmlより下のフォルダに置き、参照する場合

の3通りに分け、いずれの場合でもファイルを参照できることを確認します。

項目21 レイアウトとCSSへのパス2
概要

  • ここでは、cssファイル及びイメージファイルといったファイルへの参照を、
    1. htmlより上のフォルダに置き、絶対パスにて参照する場合
    2. htmlと同じフォルダに置き、参照する場合
    3. htmlより上のフォルダに置き、参照する場合

の3通りに分け、いずれの場合でもファイルを参照できることを確認します。

項目22 Like jsp
概要

  • teedaでは、jsf拡張タグを利用することもできます。
  • ここでは、拡張タグである「outputText」と、「commandLink」の動作を確認します。


項目23 状態の引継ぎ
概要

  • teedaでは、プロパティのスコープ(値の有効範囲)を定義することで、その範囲内であればプロパティの状態を引き継ぎます。
  • 実装者は、スコープを利用することで、Pageクラスで生成したインスタンスのライフサイクルの管理をteedaに任せることができます。
  • スコープ定義は、値をスコープに登録・更新するPageクラス(引継ぎ元)でのみ必要になります。スコープから値を参照するだけのPageクラス(引き継ぎ先)ではスコープ定義は必要ありません。
  • teedaでは、以下の4つのスコープを持ちます。
    1. ページスコープ
      • 本スコープは、@PageScopeアノテーションにより修飾された変数に対して適用されます。
      • 本スコープにより、自画面を表示し続ける限りプロパティの値を引き継ぎます。
      • ただし、初期表示により自画面を表示した場合(例:自画面に対するリンクによる画面遷移)には、値は保持されません。
    2. リダイレクトスコープ
      • 本スコープは、@RedirectScopeアノテーションにより修飾された変数に対して適用されます。
      • 本スコープにより、リダイレクト先までプロパティの値を引き継ぎます。
    3. サブアプリケーションスコープ
      • 本スコープは、@SubapplicationScopeアノテーションにより修飾された変数に対して適用されます。
      • 本スコープにより、同じサブアプリケーションのページを表示する限り、プロパティの値を引き継ぎます。
    4. デフォルトスコープ
      • 本スコープは、上記3つのアノテーションにより修飾されなかった変数に対して適用されます。
      • 本スコープにより、同じサブアプリケーションのページを表示する限り、プロパティの値を引き継ぎます。
      • ただし、サブアプリケーションスコープと異なり、以下の場合には値を引き継ぎません。
        1. 初期表示により自画面を表示する場合(例:自画面に対するリンクによる画面遷移)
        2. ポストバック(自画面表示)する場合
        3. プロパティaaaのみを持つページaaa.htmlから、プロパティbbbのみを持つページbbb.htmlに遷移した後に、再びaaa.htmlを表示する場合
  • サンプルの使い方

ここでは、使い方が分からなかったサンプルについて説明します。

    • PageScope(自画面)
      • ここでは、ページスコープにより、ポストバック(自画面表示)する際に値を引き継ぐことを確認します。
      • 操作手順
        1. まず、画面上のプロパティ「message1」が、span要素から参照されていることを確認します。
        2. 「doPageScopeClear」ボタンを押下し、「message1」の値をクリアします。
        3. 「doPageScopeExecute」ボタンを押下し、ポストバック(自画面表示)します。
        4. 「message1」の値が空のままであることを確認します。
      • これにより、プロパティ「message1」はサブミットされることなく、その値を引き継ぐことを確認できます。


項目24 Condition
概要

  • teedaでは、条件によって表示コンポーネントの表示、非表示を切り替えるために、「条件制御」と呼ばれる機能を利用します。
  • ここでは、forEachやGridといった繰り返しデータそれぞれについて条件制御をかけ、表示を切り替えることを確認します。

<<編集中>>
追記:続きはこちら 
「条件制御について」http://d.hatena.ne.jp/soichirooooo5/20080601/1212290908

項目25 ForEach
概要

  • teedaでは、コンポーネントを繰り返し表示するために、forEachという機能を利用します。大まかな手順として
    1. dto又はMapにラベル及び値(value)をセットする
    2. List又はArray型のプロパティを用意し、作成したdto又はMapを格納する
    3. 作成したプロパティを、spanやdivから参照し、その中にinputなど、繰り返し表示するコンポーネントをネストする。
  • ここでは、

<<編集中>>

項目26 Grid
概要

  • teedaでは、Tableを出力するために、Gridという機能を利用できます。そのメリットとして、
    1. table要素のid値により、行固定や列固定の表示(Excelでいう「ウィンドウ枠の固定」)を制御できる
    2. 非同期出力を容易に利用できる。

<<編集中>>

項目27 Include
概要

  • teedaでは、別のhtmlを読み込むために、拡張タグ「include」を利用します。これにより、別のhtmlのbody要素を読み込みます。
  • ここでは、別のHTMLをincludeし、そのinitialize及びprerenderメソッドも呼ばれることを確認します。


項目28 Prefixつきサンプル
概要

  • teedaでは、prefixを利用することで、異なるページ(html)で共通のPageクラスを利用することができます。大まかな手順として
  1. hoge_aaa.html」と「hoge_bbb.html」(ここで「hoge」がprefixにあたる)の2つのhtmlを用意する
  2. Pageクラス「Hoge.java」を用意する

とするだけで、Hoge.javaに用意したプロパティやメソッドを、両htmlで利用できるようになります。

  • ここでは、prefix付きhtmlが描画されることを確認します。


項目29 Initializeメソッドでの画面遷移
概要

  • ここでは、initializeメソッドの戻り値としてPageクラスを設定することで、「Initializeメソッドでの画面遷移」ができることを確認します。


項目30 Prerenderメソッドでの画面遷移
概要

  • ここでは、prerenderメソッドの戻り値としてPageクラスを設定することで、「Prerenderメソッドでの画面遷移」ができることを確認します。


項目31 Tree
概要

  • teedaでは、メニューのtree表示を、拡張タグ「te:tree」を利用することで

<<編集中>>

項目32 Teeda Ajaxの基本
概要
<<編集中>>

項目33 Teeda AjaxとLITBox
概要

  • teedaでは、LITBoxライブラリを利用することで、HTMLで用意したページを以下の画像のように、参照元のページの上に重ねて表示することができます。

  • ここでは、LITBoxライブラリの利用方法及び動作を確認します。


項目34 ファイルアップロード
概要

  • ここでは、ファイルアップロードする際に、ファイルの保存場所、最小ファイルサイズ、及び最大ファイルサイズを指定し、その動作を確認します。


項目35 CSVダウンロード
概要

  • ここでは、画面からの入力値をファイルに設定した後に、ファイルをダウンロードする動作を確認します。


項目36 外部へのリダイレクト
概要

  • ここでは、アプリケーション外部へのリダイレクトを確認します。その大まかな手順は
  1. HttpServletResponse型及びFacesContext型のプロパティをPageクラスに用意する
  2. HttpServletResponseインスタンスからsendRedirect(url)を呼び出し、urlにリダイレクト先のURLを設定する
  3. FacesContextインスタンスからresponseComplete()を呼ぶ 

となります。

項目37 CAPTCHAとの連携
概要

  • teedaでは、validatorとしてcaptcha(機械では判別が難しい文字列を生成し、その内容を入力させる。spam対策に用いられる)を利用できます。
  • ここでは、captchaの利用方法及び動作を確認します。


項目38 二重サブミット
概要

  • teedaでは、クライアントとサーバ両方で二重サブミットを防ぐための機能を持っています。
  1. クライアントでは、input要素の属性とhして「te:renderJs="true"」を追加することで、二重サブミットした際にアラートを表示します。
  2. サーバでは、input要素のid属性値に”Once”を含めることで、二重サブミットした際にエラーページにリダイレクトさせます。
  • ここでは、以上の動作を確認します。


項目39 Target指定Converter
概要

  • teedaでは、ある特定のボタンが押されたときのみ、コンバートをかけるといった指定ができます。具体的には、引数として「target」を渡し、その値にボタンのidを設定します。
  • ここでは、以上の動作を確認します。


項目40 エラー
概要

  • teedaでは、エラー毎に遷移するページを設定することができます。
  • ここでは、以上の動作を確認します。




-問題点

  1. 項目23〜26、31及び32の概要が書きあがってない。
  2. 全ての項目で、その詳細を記していない



-対策
5月20日以降で、1項目/1日 を目処に書き上げる。

-その他
teeda-html-example以外に、DBflute及びS2dxoについての勉強も進める必要あり。
今日中に、上記対策と併せてスケジュールを組みます。