efw フレームワーク アクションテスト サンプル

概要

ActionTest は、efw フレームワークにおけるユーザーインターフェースのインタラクションと操作を展示する完全なサンプルです。ショートカットキー、要素制御、ダイアログ、ファイル操作、ページナビゲーションなど、さまざまなフロントエンド操作機能の実装方法を実演します。

コアファイル

1. JSP ページ: ActionTest.jsp
2. JavaScript イベント処理: ActionTest_run.js

機能実装

1. ショートカットキーサポート

• ファンクションキー: F1-F12
• 組み合わせキー: CTRL+A から CTRL+Z, ALT+S から ALT+Z
• data-shortcut 属性でショートカットキーを定義

2. 要素操作制御

• 表示/非表示: show() / hide() メソッド
• 有効/無効: enable() / disable() メソッド
• CSS セレクターによる要素定位をサポート

3. ダイアログシステム

• 警告ダイアログ: alert() で簡単なメッセージを表示
• 確認ダイアログ: confirm() でオプション付きの確認ダイアログ
• ユーザー選択の処理にコールバック関数をサポート

4. 要素状態管理

• テキストハイライト: highlight() メソッド
• 要素フォーカス: focus() メソッド
• ハイライト解除: ハイライト状態をクリア

5. ファイル操作

• ディレクトリ作成: file.makeDir()
• ファイル書き込み: file.writeAllLines()
• ファイルダウンロード: attach() メソッド
• バッチ操作: チェーン呼び出しをサポート
• ダウンロード後削除: deleteAfterDownload()

6. ページナビゲーション

• 外部ジャンプ: navigate() で外部URLへ
• パラメーター伝達: クエリパラメーターをサポート

7. ファイルマネージャー統合

• efw:elFinder コンポーネントを使用
• ファイルシステム状態のリアルタイム更新

技術的特長

1. 統一されたAPI設計

• すべての操作は Result オブジェクトで返す
• チェーン呼び出しでバッチ操作をサポート

2. 柔軟な要素選択

• CSS セレクターをサポート
• jQuery 拡張セレクターをサポート

3. 完全なファイル操作

• 作成、読み込み、ダウンロード、削除
• フォルダとファイルの操作をサポート
• 圧縮ダウンロードをサポート

4. ユーザーインタラクションサポート

• 複数のダイアログタイプ
• ショートカットキーバインディング
• 視覚的フィードバック（ハイライト、フォーカス）

5. 状態管理

• 要素状態制御（表示、非表示、有効、無効）
• ファイルシステム状態の同期

使用説明

1. 環境要件

• デフォルトのファイル保存場所として WEB-INF/efw/storage フォルダを作成

2. ショートカットキーに関する注意点

• ブラウザが一部のショートカットキー（例: ALT+A）を占有する可能性あり
• すべてのショートカットキーのブラウザ互換性をテストすることを推奨

3. ファイル操作フロー

1. まずフォルダとファイルを作成
2. その後、ダウンロードまたは削除操作を実行
3. 操作完了後、ファイルマネージャーを更新

4. ダイアログ処理

• 確認ダイアログはカスタムボタンとコールバックをサポート
• イベントハンドラーの再帰呼び出しをサポート

このサンプルは、efw フレームワークの強力なユーザーインターフェースインタラクション能力を示しており、単純な要素操作から複雑なファイル管理やページナビゲーションまで、さまざまなシナリオをカバーしています。