efw フレームワーク出力テストサンプル
概要
出力テストサンプル は、efw フレームワークにおけるデータ出力機能を紹介する完全なサンプルです。JSON データを様々な HTML フォーム要素に動的に設定する方法を実演します。このサンプルには、フロントエンドの JSP ページとバックエンドの JavaScript イベント処理ロジックが含まれています。
コアファイル
1. JSP ページ (OutputTest.jsp)
2. JavaScript イベント処理 (OutputTest_display.js)
機能実装
1. データソース定義
- プルダウンオプションデータ (
#txtOptions): JSON 配列でプルダウンオプションを定義 - テーブルデータ (
#txtTables): JSON 配列でテーブル行データを定義 - フォーム値データ (
#txtValues): JSON オブジェクトで各フォーム要素の値を定義
2. データ処理フロー
- ユーザーが「一括表示」ボタンをクリックして
Efw('OutputTest_display')イベントをトリガー - バックエンド JavaScript が3つのテキストエリアの JSON データを解析
- チェーン操作を使用してページ要素を設定：
- プルダウンリスト：既存オプションをクリア → 新規オプションを追加
- テーブル：ヘッダーを保持 → データ行を追加
- その他の要素：セレクタに基づいて値を設定
3. 対応入力タイプ
| タイプ | サンプル要素 | データ処理方法 |
|---|---|---|
| テキスト入力 | #item1 |
value を直接設定 |
| 隠しフィールド | #item2 |
value を設定するが表示しない |
| 特殊入力 | #item5 (電話) |
フォーマット検証 |
| 日時 | #item9 |
特定フォーマット処理 |
| 数値範囲 | #item16 |
数値変換 |
| カラー選択 | #item17 |
16進数値処理 |
| チェックボックス | #item18 |
値に基づいて checked 状態を設定 |
| ラジオボタン | [name=item19] |
値に基づいて対応するオプションを選択 |
| プルダウンリスト | #item20 |
選択項目を設定 |
| 複数選択リスト | #item21 |
複数の選択項目を設定 |
| テキストエリア | #item22 |
テキスト内容を設定 |
| データテーブル | #item23 |
行データを動的に生成 |
技術的特長
1. 宣言的データマッピング
paramsFormatを使用してフロントエンド要素とバックエンドパラメータのマッピング関係を定義- CSS セレクタを使用した正確な要素特定
2. テンプレート駆動レンダリング
- プルダウンオプションテンプレート:
<option value='{value}'>{text}</option> - テーブル行テンプレート:
<tr><td>{fd1}</td><td>{fd2}</td><td>{fd3}</td></tr>
3. チェーン操作 API
javascript
new Result()
.runat(selector)
.remove(elements)
.append(template)
.withdata(data)
4. 一括操作サポート
- 複数の同種要素（複数プルダウンリストなど）を同時処理
- 異なるフォーム要素タイプを統一処理
5. JSON データ駆動
- 全てのデータソースは JSON フォーマットを使用
- フロントエンドとバックエンド間のデータ交換は JSON で実施
使用シナリオ
このサンプルは以下の場合に適用されます：
- 動的フォーム設定
- データ駆動型ユーザーインターフェース
- レポートデータ表示
- 設定管理インターフェース
- データ編集フォーム初期化
このサンプルを通じて、開発者は efw フレームワークが如何に効率的に JSON データを様々な HTML フォーム要素に動的に設定し、データとビューの分離を実現するかを学ぶことができます。