「アクション」とは、と疑問を持っている方に説明します。WEB画面の動作にはいくつかのパターンがあります。表示・非表示・活性・非活性などのことです。efwには以下のようにまとめています。前章「各種類の値表示をテストする」ではResultクラスの上部2行のAPIに触れました。今回は下部の3,4,5行目ですね。環境準備は各種類の入力枠を一括テストをご覧ください。
jsp作成
以下のソースをコピーしてhtlloworld/ActionTest.jspとして保存して下さい。文字コードはUTF8です。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="efw" uri="efw" %>
<!DOCTYPE HTML>
<HTML>
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE"CONTENT="TEXT/HTML;CHARSET=UTF-8">
<TITLE>efw Input Test</TITLE>
<!-- Efwクライアントの取り込み-->
<efw:Client lang="jp"/>
</HEAD>
<BODY>
<h1>各種類の画面アクションを一括テスト</h1>
<fieldset><legend>ファンクションキーとショートカットキー</legend>
<button data-shortcut="F1" onclick="Efw('ActionTest_run',{btn:'F1'})">F1</button>
...
<button data-shortcut="F12" onclick="Efw('ActionTest_run',{btn:'F12'})">F12</button>
<button data-shortcut="CTRL+A" onclick="Efw('ActionTest_run',{btn:'CTRL+A'})">CTRL+A</button>
...
<button data-shortcut="CTRL+Z" onclick="Efw('ActionTest_run',{btn:'CTRL+Z'})">CTRL+Z</button>
<button data-shortcut="ALT+S" onclick="Efw('ActionTest_run',{btn:'ALT+S'})">ALT+S</button>
...
<button data-shortcut="ALT+Z" onclick="Efw('ActionTest_run',{btn:'ALT+Z'})">ALT+Z</button>
※ALT+Aはchromeに利用されているからALT+Sにしました。
</fieldset><br>
<fieldset><legend>アクション</legend>
<button onclick="Efw('ActionTest_run',{btn:'Show'})">Show</button>
<button onclick="Efw('ActionTest_run',{btn:'Hide'})">hide</button>
<button onclick="Efw('ActionTest_run',{btn:'Enable'})">Enable</button>
<button onclick="Efw('ActionTest_run',{btn:'Disable'})">Disable</button>
</fieldset><br>
<fieldset><legend>入力エラー関連</legend>
<input type="text" id="theText">
<button onclick="Efw('ActionTest_run',{btn:'Confirm'})">Confirm</button>
<button onclick="Efw('ActionTest_run',{btn:'Alert'})">Alert</button>
<button onclick="Efw('ActionTest_run',{btn:'HighlightText'})">Highlight Text</button>
<button onclick="Efw('ActionTest_run',{btn:'HighlightNone'})">Highlight None</button>
<button onclick="Efw('ActionTest_run',{btn:'Focus'})">Focus</button>
</fieldset><br>
<fieldset><legend>ダウンロード</legend>
<button onclick="Efw('ActionTest_run',{btn:'Create'})">Create Folder&Files</button>
<button onclick="Efw('ActionTest_run',{btn:'DownloadFolder'})">Download Folder</button>
<button onclick="Efw('ActionTest_run',{btn:'DownloadFiles'})">Download Files</button>
<button onclick="Efw('ActionTest_run',{btn:'DldSvDlt'})">Download SaveAs & Delete</button>
</fieldset>
<efw:elFinder id="elfinder1" home="" readonly="true" height="200" width="700"/>
<fieldset><legend>画面遷移</legend>
<button onclick="Efw('ActionTest_run',{btn:'Navigate'})">Navigate</button>
</fieldset>
</BODY>
</HTML>
jsイベント作成
以下のソースをコピーして、/helloworld/WEB-INF/efw/event/ActionTest_run.jsとして保存して下さい。文字コードはUTF8です。
var ActionTest_run={};
ActionTest_run.paramsFormat={
btn:null,
};
ActionTest_run.fire=function(params){
var ret=new Result();
if (params.btn=="F1") return ret.alert("I am F1");
if (params.btn=="F12") return ret.alert("I am F12");
if (params.btn=="CTRL+A") return ret.alert("I am CTRL+A");
if (params.btn=="CTRL+Z") return ret.alert("I am CTRL+Z");
if (params.btn=="Show") return ret.show("fieldset:eq(0) button");
if (params.btn=="Hide") return ret.hide("fieldset:eq(0) button");
if (params.btn=="Enable") return ret.enable("fieldset:eq(0) button");
if (params.btn=="Disable") return ret.disable("fieldset:eq(0) button");
if (params.btn=="Confirm")
return ret.confirm("To be or not to be ?",{
"YES":"Efw('ActionTest_run',{btn:'YES'})",
"NO":"Efw('ActionTest_run',{btn:'NO'})"});
if (params.btn=="YES") return ret.alert("Yes is good");
if (params.btn=="NO") return ret.alert("No is bad");
if (params.btn=="Alert") return ret.alert("I am Alert");
if (params.btn=="HighlightText") return ret.highlight("#theText");
if (params.btn=="HighlightNone") return ret.highlight("");
if (params.btn=="Focus") return ret.focus("#theText");
if (params.btn=="Create"){
file.makeDir("I am Folder");
file.writeAllLines("I am Folder/file1.txt","I am file1","UTF-8");
file.writeAllLines("I am Folder/file2.txt","I am file2","UTF-8");
return ret.eval("elfinder1.setHome('')");//クライアントの更新を行う。
}
if (params.btn=="DownloadFolder") return ret.attach("I am Folder");
if (params.btn=="DownloadFiles") return ret.attach("I am Folder/file1.txt","I am Folder").attach("I am Folder/file2.txt","I am Folder");
if (params.btn=="DldSvDlt")
return ret.attach("I am Folder")
.saveas("IamFolderToo.zip")
.deleteAfterDownload()
.eval("elfinder1.setHome('')");//クライアントの更新を行う。
if (params.btn=="Navigate") return ret.navigate("https://www.google.co.jp/search",{q:"efw4.x"});
}
テスト
テストする前に、WEB-INF/efwフォルダにstorageフォルダを作成ししてください。このフォルダは、フレームワークのデフォルトのファイル格納場所です。
tomcatを起動して、画面を呼び出します。
各ボタンを操作しましょう。
説明
ファンクションキーとショートカットキー
ボタンにdata-shortcut属性を設定すれば、フレーワークがファンクションキーショートカットキーの機能を付けてくれます。しかし、WEBでこれをやること自体が時代遅れのようです。今回はchromeにALT+Aを設定できないことを発見しました。なので該当機能を利用時、よくテストをしてください。ブラウザ機能と干渉するとどうしようもないです。
また、ダイアログが出されている間に、ファンクションキーとショートカットキーを押す場合、メイン画面は非活性で、ダイアログにキー定義がないので、ブラウザの標準動作に従います。これは設計通りで、メイン画面とそれぞれのダイアログにキーの重複しても大丈夫です。
アクション
0番目のfieldsetの中のbuttonに対して、表示・非表示・活性・非活性を行います。
if (params.btn=="Show") return ret.show("fieldset:eq(0) button");
if (params.btn=="Hide") return ret.hide("fieldset:eq(0) button");
if (params.btn=="Enable") return ret.enable("fieldset:eq(0) button");
if (params.btn=="Disable") return ret.disable("fieldset:eq(0) button");
確認ダイアログ
入力エラー関連エリアで面倒くさいのは確認ダイアログです。確認ダイアログのボタンにjavaScriptを書いてさらにイベントを呼び出せます。今回は元のイベントを再帰的に呼び出すようにして、「btn」区分で呼び出し元を区別しているやり方です。ベストではないですが、参考程度に。
if (params.btn=="Confirm")
return ret.confirm("To be or not to be ?",{
"YES":"Efw('ActionTest_run',{btn:'YES'})",
"NO":"Efw('ActionTest_run',{btn:'NO'})"});
ダウンロード関連
ボタンを順番で押せば、作成、フォルダダウンロード、2つのファイルのみのダウンロード、別名でのダウンロード、その後削除のテストになります。
＊注意点
最後の削除テスト時、ファイル作成後すぐテストしてください。ほかのダウンロードボタンを押してから最後のダウンロードボタンを押すと、ダウンロード完了順番がずれ、画面更新がうまく実行できないケースがあります。
ファイルの作成と削除をリアルに表現するために、格好いいelFinderタグを利用しましたが、動作がうまくいかなかったので少し残念です。ちなみにサーバー内のファイルの削除は問題なくできています。
まとめ
ここまでの３回の内容はefwフレームワークの幹（コア）になります。つまり「データ収集とデータ表示DSL」の実現になるわけです。ここからの章で扱うものは枝葉と花のようなものになっていきますね。
今回のサンプルは以下のリンクからダウンロードできます。