For those who ask, "What is action?" I will explain it to you. There are several patterns of web screen operation. It refers to display, non-display, activation, inactivity, etc. efw is summarized as follows. The previous chapter "Test each type of value display" is related to the API on the second line of the Result class. This time, it's lines 3, 4, and 5. For environment preparation, please refer to "Test Each Type of Input Element".
Jsp Creation
Copy the source below and save it as htlloworld/ActionTest.jsp. The character code is 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 Event Creation
Copy the source below and save it as /helloworld/WEB-INF/efw/event/ActionTest_run.js. The character code is 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"});
}
Test
Before testing, create a storage folder in the WEB-INF/efw folder. This folder is the framework's default file location.
Start tomcat and call the page.
Let's operate each button.
Explanation
Function Keys and Shortcut Keys
If you set the data-shortcut attribute on a button, the framework will add function key shortcut key functionality. However, doing this on the web seems outdated. This time I discovered that ALT+A cannot be set in chrome. Therefore, please test carefully when using the relevant functions. There's nothing we can do if it interferes with browser functionality.
Also, if you press function keys and shortcut keys while a dialog is displayed, the main screen is inactive and the dialog has no key definitions, so it follows the standard behavior of the browser. This is by design. That is, it is okay to have duplicate keys on the main screen and each dialog.
Action
Show/hide/activate/deactivate the button in the 0th fieldset.
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");
Confirmation Dialog
An annoying area related to input errors is the confirmation dialog. You can write JavaScript in the button of the confirmation dialog to call further events. This time, the original event is called recursively, and the caller is distinguished by the "btn" classification. It's not the best, but it's a good reference.
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'})"});
Download Related
If you press the buttons in order, you can test create, download a folder, download only two files, download and renamed the file and then delete it from server.
Please note that when testing the final deletion, test immediately after creating the file. If you press the last download button after pressing other download buttons, the download completion order may shift and the page may not update properly.
I used the cool elFinder tag to realistically represent the creation and deletion of files, but it's a bit disappointing about the abover problem. By the way, the server file can be deleted without any problems.
Summary
The contents of the previous three parts are the most core of the efw framework. In other words, "Realization of data collection and data display DSL" . From now on, it will become various branches, leaves and flowers.
This sample can be downloaded from the link below.