Ajax 応用
- 2. Ajax実践編 Ajaxライブラリ
1.ActiveWidgets
簡単なサンプル
Ajax要素技術の応用 実習-1
1.テーブルの参照・登録・更新・削除 タブコントロール
イベントの伝播、DOMノード操作、DB登録 ツリーコントロール
2.部品構成(任意の構成)の一括表示 コンボボックス
再帰呼出しでの非同期通信 演習-1
GET/同期、prototype.jsの制限 グリッドコントロール
3.Ajaxでのコールバック処理 実習-2
タイマ-での擬似コールバック 演習-2
Ajax コールバック例 (777マッチ) 演習-3
受注情報登録とコールバック表示 2.DWR
(Direct Web Remoting)
DWRの特徴
DWRサンプル
実習-3
DWRプログラミング
演習-4
演習-5
3.Plotr
実習
4.script.aculo.us
演習-6
5.Yahoo! UI Library 2
演習-7
- 6. AjaxモデルでのWebシステム
(SPI=Single Page Interface)
Webブラウザ
データアクセス
プレゼンテーション DB
GET/POST
Web
UI テキスト
ビジネスロジック XML
Ajaxエンジン
XML
データストア
Webクライアント CGI系プログラム
ユーザPC サーバサイド
- 7. Ajaxエンジンの機能
Ajaxエンジン
① イベント処理
Web
GUI サーバ
② サーバ通信 ・テキストデータ
・XMLデータ
XHTML+CSS ③ UI表示
・XHTML 画面構成
・CSS 表示制御
④ 表示制御 ⑤ 演算処理
JavaScript
- 9. Ajaxでの通信方式(GET/POST;非同期/同期)
GET/非同期での受信処理
<script type="text/javascript" src=”../funcs.js"></script>
<script type="text/javascript">
//<![CDATA[
function getEmpName(){
var emp_no = document.getElementById("emp_no").value;
var httpObj = getHttpObject();
httpObj.open(“get", "sample1.php?emp_no=" + emp_no);
httpObj.send(null);
httpObj.onreadystatechange = function(){
if(httpObj.readyState == 4){
if(httpObj.status == 200){
var emp_name = httpObj.responseText;
document.getElementById("emp_name").value = emp_name;
}
}
}
}
//]]>
</script>
- 10. GET/非同期-関数名指定での受信処理
<script type="text/javascript">
//<![CDATA[
var httpObj;
function getEmpName(){
var emp_no = document.getElementById("emp_no").value;
httpObj = getHttpObject();
httpObj.open("get", "sample1.php?emp_no=" + emp_no);
httpObj.send(null);
httpObj.onreadystatechange = getEmpNameRv;
}
function getEmpNameRv(){
if(httpObj.readyState == 4){
if(httpObj.status == 200){
var emp_name = httpObj.responseText;
document.getElementById("emp_name").value = emp_name;
}
}
}
//]]>
</script>
- 12. POST/非同期
<script type="text/javascript">
//<![CDATA[
function getEmpName(){
var emp_no = document.getElementById("emp_no").value;
var httpObj = getHttpObject();
httpObj.open("post", "sample1p.php", true);
httpObj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpObj.send("emp_no="+emp_no);
httpObj.onreadystatechange = function(){
if(httpObj.readyState == 4){
if(httpObj.status == 200){
var emp_name = httpObj.responseText;
document.getElementById("emp_name").value = emp_name;
}
}
}
}
//]]>
</script>
- 13. POST/同期
<script type="text/javascript">
//<![CDATA[
function getEmpName(){
var emp_no = document.getElementById("emp_no").value;
var httpObj = getHttpObject();
httpObj.open("POST", "sample1p.php", false);
httpObj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpObj.send("emp_no="+emp_no);
var emp_name = httpObj.responseText;
document.getElementById("emp_name").value = emp_name;
}
//]]>
</script>
- 16. prototype.js http://www.prototypejs.org
・Ajaxフレームワーク
・JavaScript言語機能強化
・メソッド名ショートカット
・DOM操作機能の拡張
・クロスブラウザ対応
・ MIT License MIT License
※MIT License
・このソフトウェアを誰でも無償で無制限に扱うことができる。但し、著作権表示および本許
諾表示を、ソフトウェアのすべての複製または重要な部分に記載しなければならない。
・作者または著作権者は、ソフトウェアに関してなんら責任を負わない。
- 17. prototype.jsでの通信
revClass1.js(prototype.js:Ajax.Request)
//<![CDATA[
function revClass1(){
var set = "class1_code=" + $("class1_code").value;
new Ajax.Request('revClass1.php', {method:'get', onComplete:out, parameters:set});
}
function out(get){
var row = get.responseText.split("<i>");
$("status", "class1_name", "class1_desc", "class1_date").each(function(obj){
obj.innerHTML = row.shift();
});
}
function listeners(){
addListener($("rev"), "click", revClass1, false);
}
addListener(window, "load", listeners, false);
//]]>
- 18. addClass1.js(prototype: Ajax.Updater) ※出力用の関数指定なし
//<![CDATA[
function addClass1(){
new Ajax.Updater({success:'status',failure:'status'},
'addClass1.php', {method:'post', postBody:Form.serialize("items")});
}
function setListeners(){
addListener($("add"), "click", addClass1, false);
}
addListener(self, "load", setListeners, false);
//]]>
Ajax.RequestとAjax.Updaterの使い分け
・Ajax.Request 受信データのプログラム処理を想定
・Ajax.Updater 受信データの直接表示を想定(container)
- 19. Ajaxエンジンの機能
Ajaxエンジン
① イベント処理
Web
GUI サーバ
② サーバ通信 ・テキストデータ
・XMLデータ
XHTML+CSS ③ UI表示
・XHTML 画面構成
・CSS 表示制御
④ 表示制御 ⑤ 演算処理
JavaScript
- 20. DOMイベントモデル
・ターゲット イベント発生
・オブザーバ イベントキャッチ
ルート document
・バブリングフェーズ
イベントの上位伝播
キャプチャフェーズ table ・キャプチャフェーズ
イベントの下位伝播
tbody
オブザーバ
バブリングフェース
イベントキャッチ
tr
td ターゲット
イベント発生
- 22. イベントターゲットの検出: getid(e)
イベントターゲット(イベント発生ノード) → idタグで識別
IE系ブラウザ e.srcElement
IE以外のブラウザ e.target
getid関数(funcs.js) function getid(e){
イベント発生ノードを var tgt;
返す。 if(!e) var e = window.event;
if(e.srcElement){ // Microsoft
tgt = e.srcElement.id;
if(tgt.nodeType == 3)
tgt = tgt.rapentNode;
}else if(e.target){ // W3C/Netscape
tgt = e.target.id;
}else{
tgt = false;
}
return tgt;
}
- 23. 入力キーコードの検出: getkcode(e)
IE系および新しいFireFox e. keyCode
古いFireFox e.which
getkcode関数(funcs.js)
キー入力イベントで
入力キーコード値を返す
function getkcode(e){
if(!e) var e = window.event;
if(e.keyCode){
return e.keyCode;
}else if(e.which){
return e.which;
}else{
return false;
}
}
- 25. function mbutton(e){
クリックマウスボタンの検出 var click;
mbutton(e) if(!e) var e = window.event;
if (e.which){
・左ボタンクリック → 戻り値(“L”) if(e.which == 1){
click = "L";
・右ボタンクリック → 戻り値(“R”)
}else if(e.which == 3){
click = "R";
}
}else if (e.button){
if(e.button == 1){
click = "L";
}else if(e.button == 2){
click = "R";
}
}else{
click = "F";
}
return click;
}
- 26. 移動するマウスポインタ位置の検出
1. e.clientX、 e.clientY [IE,FF] 原点(0,0):ブラウザ画面左上
e.clientX: ウィンドウ表示部分の左上を基準としてX座標をピクセル値で返す。
e.clientY: ウィンドウ表示部分の左上を基準としてY座標をピクセル値で返す。
2. e.offsetX、 e.offsetY [IEのみ]
e.offsetX: イベントでオフセットの親となるoffsetParentオブジェクトの左上を
基準としてオブジェクトのX座標をピクセル値で返す。
e.offsetY: イベントでオフセットの親となるoffsetParentオブジェクトの左上を
基準としてオブジェクトのY座標をピクセル値で返す。
3. e.screenX、 e.screenY [IE,FF] 原点(0,0):モニタ画面左上
e.screenX: スクリーン上マウス位置のX座標をピクセル値で返す。
e.screenY: スクリーン上マウス位置のX座標をピクセル値で返す。
4. e.x、 e.y [IEのみ、e.clientX、 e.clientYと同じ]
e.x: ウィンドウ表示部分の左上を基準としてX座標をピクセル値で返す。
e.y: ウィンドウ表示部分の左上を基準としてY座標をピクセル値で返す。
- 28. マウスポインタ位置の検出 mpos2.htm 1/2
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
以後省略
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>マウスボタン </title>
<style>
<!--
#area {position: absolute; background-color: #eeeeee;
top: 5px; left: 5px; width: 300px; height: 300px;}
#stat {position: absolute; top: 35px; left: 315px;}
-->
</style>
<script type="text/javascript" src="../lib/funcs.js"></script>
<script type="text/javascript">
//<![CDATA[
function check(e){
document.getElementById("x1").value = e.clientX;
document.getElementById("y1").value = e.clientY;
document.getElementById("x2").value = e.screenX;
document.getElementById("y2").value = e.screenY;
}
- 29. mpos2.htm 2/2
function initOnLoad(){
var observer = document.getElementById("area");
setListener(observer, "mousemove", check);
}
setListener(window, "load", initOnLoad);
//]]>
</script>
</head>
<body>
<div id="area"></div>
<div id ="stat">
<h4>マウスポインタ位置の検出</h4>
<ul type="circle">
<li>e.clientX_<input type="text" size="5" id="x1" /></li>
<li>e.clientY_<input type="text" size="5" id="y1" /></li>
</ul>
<ul type="circle">
<li>e.screenX<input type="text" size="5" id="x2" /></li>
<li>e.screenY<input type="text" size="5" id="y2" /></li>
</ul>
</div>
</body>
<//html>
- 30. mpos2.js //<![CDATA[
function check(e){
document.getElementById("x1").value = e.clientX;
document.getElementById("y1").value = e.clientY;
document.getElementById("x2").value = e.screenX;
document.getElementById("y2").value = e.screenY;
}
function initOnLoad(){
var observer = document.getElementById("area");
setListener(observer, "mousemove", check);
}
setListener(window, "load", initOnLoad);
//]]>
- 33. <style>
<script type="text/javascript" src="../funcs.js"></script>
<script type="text/javascript" src="selectMenu.js"></script>
</head>
<body>
<h3>セレクトメニューの選択確認</h3>
<p>
<select id="pc">
<option value="SEL" id="sel"><=選択=></option>
<option value="CPU" id="cpu">CPU</option>
<option value="RAM" id="ram">メモリ</option>
<option value="HDD" id="hdd">ハードデスク</option>
<option value="DVD" id="dvd">DVD</option>
</select>
</p><hr />
<p id="result"></p>
</body>
</html>
selectMenu.htm
- 34. //<![CDATA[ selectMenu.js
function checkSpec(){
var source = document.getElementById("pc").value;
document.getElementById("result").innerText = "選択結果: " + source;
}
Function listeners(){
var observer = document.getElementById("pc")
setListener(observer, "change", checkSpec);
}
setListener(window, "load", listeners);
//]]>
//<![CDATA[
Prototype.js function checkSpec(){
$(“result”).innerText = “選択結果: ” + $F("pc“);
Function listeners(){
setListener($(“pc”), "change", checkSpec);
}
setListener(window, "load", setListeners);
//]]>
- 36. selectMenu2.htm
1/4 <link type="text/css" rel="stylesheet" href="../lib/style.css"/>
<script type="text/javascript" src="../lib/funcs.js"></script>
<script type="text/javascript" src="../lib/prototype.js"></script>
<script type="text/javascript">
//JavaScript
</script>
</head>
<body>
<center class="t3">Select Menu2</center>
<table width="440" align="center">
<tr>
<td width="90" align="right">クラス1項目</td>
<td width="130" id="class1">
<select><option value="">-----クラス1選択-----</option></select>
</td>
<td width="90" align="right">クラス2項目</td>
<td width="130"id="class2">
<select><option value="">-----クラス2選択-----</option></select>
</td>
</table>
</body>
</html>
- 37. //<![CDATA[
selectMenu2.htm var httpObj = getHttpObject();
2/4 function getClass1(){
httpObj.open('get', 'getClass1Sel.php', false);
httpObj.onreadystatechange = getClass1Rv;
httpObj.send(null);
}
function getClass1Rv(){
if(httpObj.readyState == 4){
if(httpObj.status == 200){
var resRows = httpObj.responseText.split("<p>");
var out = '<select id="class1List">'
+ '<option value="">----クラス1選択----</option>';
for(i = 0; i < resRows.length; i++){
var resRow = resRows[i].split(",");
for(j = 0; j < resRow.length; j++){
if(j==0){
class1_code = resRow[j];
}else{
out += '<option value=' + class1_code + '>' + resRow[j] + '</option>';
}
}
}
out += '</select>';
$("class1").innerHTML = out;
}
}
}
- 38. function getClass2(){
selectMenu2.htm var class1_code = $("class1List").value;
3/4 httpObj.open('get', 'getClass2Sel.php?class1_code='+class1_code, false);
httpObj.onreadystatechange = getClass2Rv;
httpObj.send(null);
}
function getClass2Rv(){
var i, j, resRows, resRow, out, out3, code;
if(httpObj.readyState == 4){
if(httpObj.status == 200){
resRows = httpObj.responseText.split("<p>");
out = '<select id="class2List">'
+ '<option value="">---クラス2選択済---</option>';
for(i = 0; i < resRows.length; i++){
resRow = resRows[i].split(",");
for(j = 0; j < resRow.length; j++){
if(j==0){
class2_code = resRow[j];
}else{
out += '<option value=' + class2_code + '>' + resRow[j] + '</option>';
}
}
}
out += '</select>';
$("class2").innerHTML = out;
addListener($("class2List"), "change", getClass3, false);
}
}
}
- 39. selectMenu2.htm
4/4
function getClass3(){
alert($("class2List").value);
}
Function listeners(){
setListener($("class1List"), "change", getClass2);
}
setListener(window, "load", listeners);
setListener(window, "load", getClass1);
- 41. <script type="text/javascript" src="funcs.js"></script> radioBtn.htm
<script type="text/javascript" src="radioBtn.js"></script>
</head>
<body>
<h3>ラジオボタンの選択確認</h3>
<p id="pc">
<input type="radio" id="cpu" />cpu
<input type="radio" id="ram" />メモリ
<input type="radio" id="hdd" />ハードデスク
<input type="radio" id="dvd" />DVD
</p>
<hr />
<p id="result"></p>
</body>
</html>
- 42. radioBtn.js
//<![CDATA[
Var xhrObj = getXhrObj();
function checkSel(e){
var sel = getid(e);
id("result").innerText = "選択結果: " + sel;
}
Function initOnLoad(){
setListener(id(“pc”), "click", checkSel);
}
setListener(window, "load", initOnLoad);
//]]>
- 44. チェックボックス選択確認XHTML checkB.htm
<?xml version="1.0" encoging="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>チェックボックス</title>
<link rel="stylesheet" type="text/css" href=“../lib/style.css" />
<script type="text/javascript" src=”../lib/funcs.js"></script>
<script type="text/javascript" src="checkB.js"></script>
</head>
<body>
<p id="pc">
<input type="checkbox" id="display" />ディスプレイ
<input type="checkbox" id="mouse" />マウス
<input type="checkbox" id="keybord" />キーボード
<input type="checkbox" id="dvd" />DVDドライブ
</p>
</body>
</html>
- 47. <link rel="stylesheet" type="text/css" href="style.css" />
checkBox.htm
<script type="text/javascript" src="funcs.js"></script>
<script type="text/javascript" src="checkBox.js"></script>
</head>
<body>
<p id="pc">
<input type="checkbox" id="display" />ディスプレイ
<input type="checkbox" id="mouse" />マウス
<input type="checkbox" id="keybord" />キーボード
<input type="checkbox" id="dvd" />DVDドライブ
<br /><br />
<button type="button" class="b2" id="confirm">受信確認</button>
</p><hr />
<table>
<tr><td>選択確認</td><td id="result1"></td></tr>
<tr><td>選択累積</td><td id="result2"></td></tr>
<tr><td>受信確認</td><td id="result3"></td></tr>
</table>
</body>
</html>
- 48. //<![CDATA[
var optcum = new Array(); checkBox.js
var options = new Array();
function checked(e){
var eid =getid(e);
optcum.push(eid);
document.getElementById("result1").innerText = eid;
document.getElementById("result2").innerText = optcum;
}
function confirm(){
for(var i = 0; i < optcum.length; i++){
if(document.getElementById(optcum[i]).checked == true)
options.push(optcum[i]);
}
var httpObj = getHttpObject();
httpObj.open("post", "../checkbox", false);
httpObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
httpObj.send("options=" + options);
out = httpObj.responseText;
document.getElementById("result3").innerHTML = out;
}
Function listeners(){
var observer1 = document.getElementById("pc");
setListener(observer1, "click", checked);
var observer2 = document.getElementById("confirm");
setListener(observer2, "click", confirm,);
}
setListener(window, "load", listeners);
//]]>
- 49. checkBox.java
package domevent;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class checkBox extends HttpServlet {
public void doPost (HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException {
int i;
String options[] = req.getParameterValues("options");
PrintWriter out;
res.setContentType("text/html; charset=Shift_JIS");
out = res.getWriter();
for (i = 0; i < options.length - 1; i++){
out.println(options[i] + ",");
}
out.println(options[i]);
out.close();
}
}
- 50. Ajaxエンジンの機能
Ajaxエンジン
① イベント処理
Web
GUI サーバ
② サーバ通信 ・テキストデータ
・XMLデータ
XHTML+CSS ③ UI表示
・XHTML 画面構成
・CSS 表示制御
④ 表示制御 ⑤ 演算処理
JavaScript
- 52. DOMノード操作
(1) DOMノード操作サンプル
httpObj.onreadystatechange = function(){
if(httpObj.readyState == 4){
if(httpObj.status == 200){
finalItems = httpObj.responseText.split(",");
//for(i in finalItems){ prototype.jsで副作用
for(i = 0; i < finalItems.length; i++){
tagNode = document.createElement("p");
tagNode.setAttribute("id", finalItems[i]);
docNode = document.createTextNode('[0] '+finalItems[i]);
tagNode.appendChild(docNode);
document.getElementById("tree").appendChild(tagNode);
}
}
}
}
- 53. DOMノード操作概要
ノードの種類 ・要素ノード (element node)
・属性ノード (attribute node)
・テキストノード(text node)
例]
<div id=“id1” class=“class1”>DOMノード操作</div>
要素ノード
<div>
属性ノード
id=“id1” class=“class1”
テキストノード
DOMノード操作
- 54. 1.要素ノードの参照
getElementById
構文] object.getElementById(“id属性値”)
機能] 指定したID名を持つ要素ノードオブジェクトを返す。
引数] id属性値。
返値] オブジェクト。
適用] document
対応] [IE5~][Firefox1~][Safari1~][Opera8~][Netscape6~]
※非常に頻繁に使用されるメソッドで、多くのAjaxライブラリでショートカット
関数が用意されている。
例] document.getElementById(“out1”);
↓
$(“out1”); // Prototype.js, DWR
id(“out”); // funcs.js
- 59. 子ノードの参照-2
childNodes
構文] object.childNodes
object.childNodes[index]
object.childNodes.length
機能] オブジェクトの子ノードを参照する。
評価値は配列で最初の子ノードは0番になる。
引数] id属性値。
返値] 子ノードオブジェクトの配列
適用] object
対応] [IE5~][Firefox 1~][Safari 1~][Opera 8~][Netscape 6~]
- 60. 子ノードの参照-3
hasChildNodes
構文] object.hasChildNodes()
機能] 子ノードがあるかどうか返す。
子ノードがある場合はtrue、ない場合はfalseを返す。
引数] id属性値。
返値] 真偽値
適用] object
対応] [IE5~][Firefox 1~][Safari 1~][Opera 8~][Netscape 6~]
function check() {
if ($("sample").hasChildNodes()) {
alert(“子ノードがあります。”);
} else {
alert(“子ノードがありません。”);
}
}
- 61. 兄弟ノードの参照
nextSibling
構文] object.nextSibling
機能] オブジェクトの次のノードを参照する。
返値] ノードオブジェクトの参照
適用] 多くのノードオブジェクト
対応] [IE5~][Firefox 1~][Safari 1~][Opera 8~][Netscape 6~]
previousSibling
構文] object.previousSibling
機能] オブジェクトの前のノードを参照する。
返値] ノードオブジェクトの参照
適用] 多くのノードオブジェクト
対応] [IE5~][Firefox 1~][Safari 1~][Opera 8~][Netscape 6~]
- 65. テキストノードの作成
appendChildメソッド
書式] object.appendChild(newChild)
機能] 指定したエレメントにオブジェクトを追加する。
引数] 追加する子ノードオブジェクト
返値] ノードオブジェクト
適用] 多くのタグ
対応] [IE5~][Firefox 1~][Safari 1~][Opera 8~][Netscape 6~]
function add() {
var newNode = document.createElement("LI");
var text = document.createTextNode(“追加しました。”);
newNode.appendChild(text);
var parent = document.getElementById("sample");
parent.appendChild(newNode);
}
- 69. 子ノードを置き換え
replaceChild
書式] object.replaceChild(newNode, oldNode)
機能] オブジェクトの指定された子ノードオブジェクトを置き換える。
引数]
newChildは新しい子供のノードオブジェクトを指定。
oldChildは古い子供のノードオブジェクトを指定。
返値] ノードオブジェクトを返す。
function change() {
var node = document.getElementById("sample");
var oldNode = node.firstNode;
var newNode = document.createTextNode(“新しいノード”);
node.replaceChild(newNode, oldNode);
}
- 74. XMLHttpRequestでのデータ送受信オーバヘッド
イーザネット 12Byte 4
フレーム B
IPデータグラム 24Byte
TCPセグメント 20Byte
HTTPヘッダ
ヘッダデータ量: 60Byte + HTTPプロトコルヘッダ
HTTPプロトコル リクエストヘッダ例 HTTPプロトコル レスポンスヘッダ例
GET /docs/sw/http-header.html HTTP/1.1 HTTP/1.1 200 OK
Host: www.kanzaki.com Date: Wed, 05 Sep 2001 06:06:19 GMT
Accept: text/html, text/plain, text/sgml, */*;q=0.01 Server: Apache/1.3.12
Accept-Encoding: gzip, compress Accept-Language: ja,en Content-Location: http-header.html.ja
If-Modified-Since: Sun, 2 Sep 2001 11:31:06 GMT Vary: negotiate,accept-language,accept-charset
User-Agent: Lynx/2.8.2 TCN: choice
P3P: policyref="/w3c/p3p.xml",CP="NOI DSP COR ADM DEV OUR STP”
Last-Modified: Wed, 05 Sep 2001 06:02:09 GMT
Connection: close
Content-Type: text/html; charset=shift_jis
Content-Language: ja
- 75. XMLHttpRequestでのデータ送受信オーバヘッド
ヘッダデータ量: 60Byte + HTTPプロトコルヘッダ
HTTPプロトコル リクエストヘッダ例 HTTPプロトコル レスポンスヘッダ例
GET /docs/sw/http-header.html HTTP/1.1 HTTP/1.1 200 OK
Host: www.kanzaki.com Date: Wed, 05 Sep 2001 06:06:19 GMT
Accept: text/html, text/plain, text/sgml, */*;q=0.01 Server: Apache/1.3.12
Accept-Encoding: gzip, compress Accept-Language: ja,en Content-Location: http-header.html.ja
If-Modified-Since: Sun, 2 Sep 2001 11:31:06 GMT Vary: negotiate,accept-language,accept-charset
User-Agent: Lynx/2.8.2 TCN: choice
P3P: policyref="/w3c/p3p.xml",CP="NOI DSP COR ADM DEV OUR STP”
Last-Modified: Wed, 05 Sep 2001 06:02:09 GMT
Connection: close
Content-Type: text/html; charset=shift_jis
Content-Language: ja 75
イーザネット 12Byte 4
フレーム B
IPデータグラム 24Byte
TCPセグメント 20Byte
HTTPヘッダ
- 77. 言語機能強化
Ajaxライブラリ Prototype.js
MochiKit
エフェクト系
script.aculo.us サーバ ビジネス
Yahoo! UI Library リクエスト ロジック
Plotr
DWR DWR
ActiveWidgets
Dojo [サーバ]
開発者 Yahoo! UI Library
ユーザ ・リモーティングツール
コントロール系
・UIツール
[クライアント] 77
- 78. Ajaxライブラリ 言語機能強化
Prototype.js
MochiKit
エフェクト系 [リモーティングツール]
script.aculo.us サーバ ビジネス
リクエスト ロジック
Yahoo UI Library
Plotr
DWR DWR
ActiveWidgets
Dojo [サーバ]
開発者 Yahoo UI Library
ユーザ
コントロール系
[UIツール]
[クライアント] 78
- 79. Ajaxモデルでの処理の流れ
DOM
① イベント処理
サーバリモーティング
Web GET/POST
DOM API サーバ
GUI
② サーバ通信 ・テキストデータ
・XMLデータ
XHTML+CSS ③ UI表示
・XHTML 画面構成
・CSS 表示制御
④ 表示制御 ⑤ 演算処理
言語機能
JavaScript
(Ajaxエンジン)
- 80. Ajaxモデルとライブラリ
言語機能拡張
① イベント処理
サーバリモーティング
Web GET/POST
UI表現 サーバ
GUI
② サーバ通信 ・テキストデータ
・XMLデータ
XHTML+CSS ③ UI表示
・XHTML 画面構成
・CSS 表示制御
④ 表示制御 ⑤ 演算処理
JavaScript
(Ajaxエンジン)
- 82. DWR(Direct WebRemoting)
DWR:Easy Ajax for Java
http://getahead.ltd.uk/dwr/
Ajaxアプリケーションを
サーバサイドJavaで開発
するための
JavaScript-Java連携用
フレームワーク
Apache License, Version 2.0
再配布要件
(1)LICENSEファイルを再配布物内の「どこか」に置く。
(2)再配布要件(自分の著作物も含む)は、適度に定めてよい。
付与要件
(1)LICENSEファイルを作る。(Apacheライセンス参照)
(2)LICENSEファイルの中身に
Copyright [yyyy] [著作権所有者の名前]
をつける。(もちろん再配布物と一緒に入れる)
82
- 84. DWRでのシステム構成
-制御機能(Controller)はシステム(DWR)に任せ、 :ユーザ記述
開発者はビジネスロジック作成に専念できる。
:DWRサポート
[ビュー] [コントローラ] [モデル]
DWR Client DWR Servlet Java Beans DB
Ajax
[プレゼンテーション層] web.xml dwr.xml [ファンクショナル層] [データアクセス層]
[3層C/Sシステム] [MVCモデル]
P: プレゼンテ-ション層 M:Model ビジネスロジック
F: ファンクショナル層 V:View 表示機能
D: データアクセス層 C:Controller 処理制御機能
- 85. 2.サーバ側Javaの記述はJava Beans(POJO)で行う
(1) DI(Dependency Injection)
・サーバ側JavaはJavaBeans(POJO)で記述し、サーバサイド単独でテストできる。
(2) DRY(Don’t Repeat Yourself)
・Java Beansでビジネスロジックを記述する事により、重複のないコード記述が可能。
(3) CoC(Convention over Configuration)
・アノテーションにより、dwr.xmlの設定内容をJavaBeansに記述することが可能。
[POJO(Plain Old Java Object)]
JavaオブジェクトがEJB(特にEJB 3より前のEJB)のように特殊なものではなく、
ごく普通のJavaオブジェクトであることを強調した名称。
[DI(Dependency Injection)]
互いにの独立性が高いコンポーネントを、アプリケーションとして結合する為の技術
[DRY(Don’t Repeat Yourself)]
プログラムの重複を排除する考え方。
[CoC(Convention over Configuration)]
設定よりも規約
85
- 86. (2) DRY(Don’t Repeat Yourself)
[DRY=Don’t Repeat Yourself]同じプログラムコードを重複して記述しない。
・機能単位でのクラス構成とメソッド定義 Java Beans
EX] 受注関係のCRUD処理をクラスに (POJO)
まとめる。
顧客クラス
・カスタマイズはオーバライドで行う。
顧客関係
メソッド DB
(crud)
DWR Client コントローラ
機能 社員クラス
・顧客情報表示 DWR 社員関係
・担当者表示 Servlet メソッド DB
・商品情報表示 (crud)
商品クラス
商品関係
メソッド DB
(crud)
86
- 87. 3.リバースAjax - DWR 2.0から
サーバ側のJavaからクライアントのJavaScriptに非同期にデータ送信が可能
⇒コールバック、サーバプッシュとも言われる
⇒チャットのような対話型のAjaxアプリケーションが記述しやすくなる。
DWRのリバースAjaxでは3つの方式をサポート
Comet, Polling, Piggyback
87
- 88. DWRでの リバースAjax実装形式
1 Active Reverse Ajax
[Full Streaming Mode] =Comet
デフォルトのReverse Ajaxモードで、クライアントへのレスポンスは最も早い。
リクエスト受信後、ブラウザのコネクションがまだ生きているかを見るために、
60秒毎にコネエクションをクローズする。
[Early Closing Mode] =Comet
リクエスト受信後、 60秒後にコネエクションをクローズする。
[Polling Mode] = Polling
60秒毎にポーリングを行って新しいデータがあるか確認する。最も多くのクラ
イアントコネクションが可能。
2.Passive Reverse Ajax =piggyback
サーバはクライアントへのキューイングしておき、次のリクエスト時に、同時に
レスポンス送信する。サーバ側のコネクション保持も、クライアントからのポー
リングもなく、この方式によるWebサーバへの追加の負荷は全くない。
88
- 89. 4.UIとサーバ通信の分離
・通信機能 → DWR
・UI機能 → ActiveWidgets, Yahoo UI, Dojo etc
=>分散アプリケーション、分散オブジェクトで一般的な形態
vs] GWT(Google Web Toolkit) は一体型
①イベント処理
サーバ
Web 他コンポーネント
GUI DWR
②サーバ通信
XHTML+CSS ③UI表示
④表示制御 ⑤演算処理
Ajaxエンジン 89
- 90. 5.DWRサーブレットとユーザサーブレットの混在可
[ビュー] [コントローラ] [モデル]
DWR Client
Ajax
DWR Servlet Java Beans
Servlet
DB
Java Beans
(ユーザ記述)
Ajax Client
ユーザ記述Servletは
web.xml dwr.xml ・web.xmlにDWR-Servletと併記可能
ただし、DWR-Servletの後に記述する。
ユーザ記述JavaBeansは
・dwr.xmlに定義しDWRのDEBUG機能
使用可能
・JavaBeans(POJO)は全く同じ
- 93. プログラム作成 - DWR実行環境
FedoraCore5
APサーバ データベース
DWR
サーバ Tomcat5 Version 2.0 RC 2
サーブレット Java
サーブレット MySQL
コンテナ Beans
サンプル動作環境
Tomcat 5.xx
ブラウザ
ブラウザ J2EE 5.04
クライアント IE 6.0
MySQL 4.1.11
IE6.0
FF2.0
IE 6.0.2800
FF 2.00.2
WindowXP Pro V2
93
- 101. $CATALINA_HOME
DWRディレクトリ構成
webapps
dwr2
WEB-INF
web.xml
dwr.xml
lib
classes
erp
hr
lib bbb.class
book4
s5
aaa.htm
- 102. 1. DWR JAR ファイルのダウンロードと配置
(1) http://getahead.org/dwr/download から dwr.jar ファイルをダウンロード。
(2) $CATALINA_HOME/webapps/[開発DIR]/WEB-INF/lib ディレクトリに配置
※DWRディレクトリ(dwr.warでデプロイ)のlib内ファイルをすべてコピーで可
102
- 103. 2. デプロイメントディスクリプタ(web.xml)の編集
WEB-INF/web.xml にdwr-invokerの行を追加.
※サーブレットの定義はdwr-invokerだけ。
※DWRディレクトリのweb.xmlをコピーで可 web.xml
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app id="dwr">
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<display-name>DWR Servlet</display-name>
<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
</web-app>
103
- 104. <?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app id="dwr">
<display-name>DWR (Direct Web Remoting)</display-name>
<description>A demo of how to call Java on the server directly from Javascript on the client</description>
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<display-name>DWR Servlet</display-name>
<description>Direct Web Remoter Servlet</description>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>pollAndCometEnabled</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>allowGetForSafariButMakeForgeryEasier</param-name>
<param-value>true</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name> 参考] web.xml(オリジナル)
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
104
</web-app>
- 105. 3.サーバコード(JavaBeans:POJO)作成
package seminar1;
import java.io.*;
public class sem1Bean {
String inPath = "/usr/local/tomcat5/apache-tomcat-5.5.20/webapps/dwr2/WEB-INF/
classes/seminar1/employee.txt";
public String getEmpName(String emp_no){
String empData = "", empNo = "", empName = "";
try {
File inFile = new File(inPath);
FileReader in = new FileReader(inFile);
BufferedReader inBuffer = new BufferedReader(in);
while ((empData = inBuffer.readLine()) != null) {
empNo = empData.substring(0, 5);
if(empNo.equals(emp_no)){
empName = empData.substring(5);
break;
}
}
inBuffer.close();
} catch (IOException e) {}
return empName; sem1Bean.java
}
} 105
- 106. 4.WEB-INFディレクトリ下にdwr.xmを作成・配置
dwr.xml 定義
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
"http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
<allow>
<create creator="new" javascript="sem1Bean">
<param name="class" value="seminar1.sem1Bean"/>
</create>
</allow>
</dwr>
creator=“new” :リクエストの際に、Javaオブジェクトの新しいインスタンス生成
※scope属性 application アプリケーション全体で1つのインスタンス作成
session セッション毎にインスタンス生成
request リクエスト毎にインスタンスを生成
page ページ毎にインスタンスを生成
5.tomcat再起動
106
- 108. package seminar1;
import java.io.*;
@RemoteProxy //リモートから使用するクラスであることを指定
public class sem1Bean {
String inPath = "/usr/local/tomcat5/apache-tomcat-5.5.20/webapps/dwr2/WEB-INF/
classes/seminar1/employee.txt";
@RemoteMethod //リモートから使用するメソッドであることを指定
public String getEmpName(String emp_no){
String empData = "", empNo = "", empName = "";
try {
File inFile = new File(inPath);
FileReader in = new FileReader(inFile);
BufferedReader inBuffer = new BufferedReader(in);
while ((empData = inBuffer.readLine()) != null) {
empNo = empData.substring(0, 5);
if(empNo.equals(emp_no)){
empName = empData.substring(5);
break;
}
}
inBuffer.close(); アノテーション
} catch (IOException e) {} DWR記述の代替をビーンズコード内で行う。
return empName;
}
108
}
- 109. 2.web.xmlにアノテーション適用JavaBeans指定
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>classes</param-name>
<param-value> erp.hr. empBean , erp.hr. hrBean </param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
- 110. 6.デバックモードでJavaBeansの機能確認
機能] 利用可能なすべてのJavaBeansをWebページ
上で確認できる。
1.web.xmlにdebug機能の使用を指定
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
110
- 112. 7.クライアントコード作成 dwrGetAsyn.htm 1/2
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>従業員番号から氏名表示</title>
<script type="text/javascript" src="../lib/funcs.js"></script>
<script type="text/javascript" src="../dwr/engine.js"></script>
<script type="text/javascript" src="../dwr/util.js"></script>
<script type="text/javascript" src="../dwr/interface/sem1Bean.js"></script>
<script type="text/javascript">
//<![CDATA[
function reqEmpName(){
//var emp_no = idv("emp_no");
var emp_no = dwr.util.getValue(“emp_no”); //util.js
sem1Bean.getEmpName(emp_no, respEmpName); //engine.js
}
function respEmpName(resp){
//id("emp_name").value = resp;
dwr.util.setValue("emp_name") = resp; //util.js
}
112
- 113. dwrGetAsyn.htm 2/2
function initOnLoad(){
setListener($("emp_no“), "blur", reqEmpName);
}
setListener(window, "load", initOnLoad);
//]]>
</script>
</head>
<body>
<center>
<h3>従業員番号から氏名表示</h3>
<nobr>
従業員番号:<input type="text" size="10" id="emp_no"/>
従業員氏名:<input type="text" size="14" id="emp_name"/>
</nobr>
</center>
</body>
</html>
113
- 114. [参考]
<allow>
DWRが生成・処理可能なクラス範囲を定義する
<create>
<create creator=“生成方法” class=“JavaBeansクラスの完全修飾名”
[javascript=“オブジェクト名”] [scope=“有効範囲”]
[<auth method=“メソッド名” role=“ロール名” />]
[<exclude method=“呼び出しを禁止するメソッド名” />]
[<include method=“呼び出しを許可するメソッド名” />]
</create>
creator属性(必須) - 以下のcreatorを指定.
※creatorにStruts、JSFのような外部フレームワークを指定すれば、
連携することが出きる。 通常はnewを指定。
[DWRで指定可能なcreator] :
•new: Java の‘new’ オペレータを使用。
•none: オブジェクトを生成しない。
•scripted: BeanShell または BSFからのGroovyなどスクリプト言語を使用。
•spring: Spring Frameworkからのbeanアクセスを指定.
•jsf: JSFからオブジェクトを使用。
•struts: strutsの FormBeansを使用
•pageflow: Beehive または Weblogic からの PageFlowアクセス
•ejb3: EJB3のセッションbeansへのアクセス. ※ejb3は現在テスト段階 114
- 116. メソッド 機能
$(id) 指定されたID値に対応する要素を所得する。
DWRUtil.getValue(id) 選択ボックスから値を所得する。
select要素を指定した場合は選択されているoptionの値が所得される。
DWRUtil.getValues(ids) 指定されたIDに対応する各要素のテキスト値を全て所得する。
DWRUtil.getValues(event, func) リターンキーを押下した場合の処理を定義する。
DWRUtil.setValue(id, value) IDで指定した要素をvalue指定の値に設定する。
DWRUtil.setValues(ids) {id1: テキスト1, id2:テキスト2 …} のように指定し、指定されたIDにテキ
スト値をセットする。
DWRUtil.removeAllOptions(id) IDで指定したselect要素、ul要素、ol要素のオプションをすべて削除する。
DWRUtil.addOptions(id, 配列) IDで指定したselect要素に配列内のテキストをoptionとして追加する。
DWRUtil.removeAllRows(id) IDで指定したテーブルからすべての行を削除する。
DWRUtil.addRows IDで指定したテーブルに行を追加する。追加する行はarrayで指定された
(id,array,cellfuncs,[options]) 配列データをcellfuncsで指定された関数に従って追加する。
DWRUtil.getText(id) 指定されたID値に対応するテキストを所得する。
DWRUtil.selectRange(id,start,end) IDで指定された入力フィールドのstart ~ end文字目までをテキストを選択
する。
DWRUtil.toDescriptiveString(id,opt) 指定された要素に関する情報をオプション(0~2)に従って表示する。
DWRUtil.useLoadingMessage() 通信中のメッセージを表示するように指定する。
- 118. リモートオブジェクトのオプション指定
オプション 概要
callback リモートコールが成功した場合の処理
errorHandoler リモートコール処理が失敗した場合の処理
ordered 要求された順番で結果を反映するか
preHook リモートコール直前に行う処理
postHook リモートコール直後に行う処理
timmeout 要求のタイムアウト時間(ミリ秒)
verb HTTPメソッド(GETまたはPOST)
warninghandoler ブラウザによる警告が発生した場合の処理
118
- 121. <?xml version="1.0" encoding="utf-8" standalone="no"?>
JavaChat.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
1/2 "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DWR 軽量チャット バージョン 2.0</title>
<link rel="stylesheet" type="text/css" href="../lib/style.css"/>
<style type="text/css">
<!--
#chatlog {list-style-type: none;}
-->
</style>
<script type='text/javascript' src='../lib/funcs.js'> </script>
<script type='text/javascript' src='../dwr/engine.js'> </script>
<script type='text/javascript' src='../dwr/interface/JavaChat.js'> </script>
<script type='text/javascript' src='../dwr/util.js'> </script>
<script type="text/javascript">
//<![CDATA[
function activate() {
dwr.engine.setActiveReverseAjax(true);
}
function sendMsg() {
var msg = $("name").value + ": " + $("text").value;
JavaChat.addMessage(msg);
} 121
- 122. JavaChat.htm function listeners(){
2/2 addListener($("send"), "click", sendMsg, false);
}
addListener(window, "load", listeners, false);
addListener(window, "load", activate, false);
//]]>
</script>
</head>
<body>
<p class="t2">DWR:Javaチャット</p>
<div class="t4">
ニックネーム:
<input type="text" id="name" size="8"/>
<input type="button" class="b2" id="send" value="送信"/>
<br/>
<textarea id="text" row="3" cols="50"></textarea>
</div>
<hr/>
<ul id="chatlog"></ul>
<div id="dwr-debug"></div>
</body>
</html>
122
- 123. package cback;
import java.util.Collection;
import java.util.LinkedList; JavaChat.java
import org.directwebremoting.WebContext;
import org.directwebremoting.WebContextFactory;
import org.directwebremoting.proxy.dwr.Util;
import org.directwebremoting.util.Logger;
public class JavaChat{
public void addMessage(String text){
if (text != null && text.trim().length() > 0){
messages.addFirst(new Message(text));
while (messages.size() > 10){
messages.removeLast();
}
}
WebContext wctx = WebContextFactory.get();
String currentPage = wctx.getCurrentPage();
Util utilThis = new Util(wctx.getScriptSession());
utilThis.setValue("text", "");
Collection sessions = wctx.getScriptSessionsByPage(currentPage);
Util utilAll = new Util(sessions);
utilAll.removeAllOptions("chatlog");
utilAll.addOptions("chatlog", messages, "text");
}
private LinkedList messages = new LinkedList();
protected static final Logger log = Logger.getLogger(JavaChat.class); 123
}
- 124. package cback;
import java.net.MalformedURLException;
import java.net.URL;
import org.directwebremoting.Security; Message.java
public class Message{
public Message(String newtext){
text = newtext;
if (text.length() > 256){
text = text.substring(0, 256);
}
text = Security.replaceXmlCharacters(text);
try{
if (text.startsWith("http://")){
URL url = new URL(text);
text = "<a href='#' onclick='window.open(¥"" + url.toExternalForm() + "¥", ¥"¥", ¥"resizable=yes,
scrollbars=yes,status=yes¥");'>" + url.toExternalForm() + "</a>";
}
}
catch (MalformedURLException ex){ // Ignore - it's not a URL }
}
public long getId(){
return id;
}
public String getText(){
return text;
}
private long id = System.currentTimeMillis();
private String text;
} 124
- 127. (1) サーバコード記述 hrBean.java 1/2
package erp.hr;
import java.text.*;
import java.util.Date;
import java.sql.*;
public class hrBean {
StringBuffer respBuf = new StringBuffer("");
String resp = "";
String sql = "";
String server = "localhost";
String db = "ajax_ec";
String user = "mysql";
String pass = "callback";
String url = "jdbc:mysql://" + server + "/" + db + "?useUnicode=true&characterEncoding=UTF-8";
Connection con = null;
public hrBean(){
try{
Class.forName("com.mysql.jdbc.Driver");
} catch (Exception e) {
resp = "jdbc Driver load error";
}
try{
con = DriverManager.getConnection(url, user, pass);
} catch (Exception e) {
resp = "jdbc Driver load error";
}
}
- 128. hrBean.java addEmpHdr 2/2
public String addEmpHdr(String emp_no,
String emp_name,
String depart,
String section){
Date now = new Date();
DateFormat df = new SimpleDateFormat("yyyy-MM-dd");
String ent_date = df.format(now);
try{
sql = "insert into emp_hdr values( ?, ?, ?, ?, ?)";
PreparedStatement ps = con.prepareStatement(sql);
ps.setString(1, emp_no);
ps.setString(2, emp_name);
ps.setString(3, depart);
ps.setString(4, section);
ps.setString(5, ent_date);
ps.executeUpdate();
resp = "OK:登録成功 顧客ID:" + emp_no;
}catch(SQLException e) {
resp = "NO:登録不成功 SQエラー:" + e;
}
return resp;
}
}
- 129. (2) dwr.xml の記述
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
"http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
<allow>
<create creator="new" javascript="hrBean">
<param name="class" value="erp.hr.hrBean"/>
</create>
:
</allow>
</dwr>
- 131. (4) クライアントコード記述 dwrAddEmpHdr.htm 1/2
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>社員登録</title>
<link type="text/css" rel="stylesheet" href="../../lib/style.css"/>
<script type="text/javascript" src="../../dwr/engine.js"></script>
<script type="text/javascript" src="../../dwr/util.js"></script>
<script type="text/javascript" src="../../dwr/interface/hrBean.js"></script>
<script type="text/javascript" src="../../lib/funcs.js"></script>
<script type="text/javascript">
//<![CDATA[
function addEmpHdr(){
var emp_no = idv("emp_no");
var emp_name = idv("emp_name");
var depart = idv("depart");
var section = + idv("section");
hrBean.addEmpHdr(emp_no, emp_name, depart, section, addStat);
}
function addStat(resp){
id("status").innerHTML = resp;
} 131
- 132. function initOnLoad(){
setListener(id("add"), "click", addEmpHdr); dwrAddEmpHdr.htm 2/2
}
setListener(window, "load", initOnLoad);
//]]>
</script>
</head>
<body>
<center>
<div class="t3">社員マスタ管理</div>
<table width="370" border="1">
<tbody>
<tr><th colspan="2">社員マスタ登録</th></tr>
<tr>
<th width="110">社員番号</th>
<td><input type="text" size="8" id="emp_no"/></td>
</tr>
<tr><th>社員氏名</th><td><input type="text" id="emp_name"/></td></tr>
<tr><th>所属部</th><td><input type="text" size="32" id="depart"/></td></tr>
<tr><th>所属課</th><td><input type="text" size="30" id="section"/></td></tr>
<tr>
<th><input type="button" id="add" value=" 登録 " /></th>
<td id="status"> </td>
</tr>
</tbody>
</table>
</center>
</body>
</html> 132
- 134. public String revEmpHdr(String emp_no){
Connection con = null; (1) サーバコード記述
try{
con = DriverManager.getConnection(url, user, pass);
}catch (Exception e){
resp = "jdbc Driver load error";
}
try{
String sql = "select * from emp_hdr where emp_no = ?";
PreparedStatement ps = con.prepareStatement(sql);
ps.setString(1, emp_no);
ResultSet rs = ps.executeQuery();
if(rs.first()) {
respBuf.append("OK:参照ID:"+emp_no).append("<i>");
respBuf.append(rs.getString("emp_name")).append("<i>");
respBuf.append(rs.getString("depart")).append("<i>");
respBuf.append(rs.getString("section")).append("<i>");
respBuf.append(rs.getString("ent_date")).append("<i>");
} else {
respBuf.append("NO:参照不成功").append("<i>");
}
con.close();
}catch(SQLException e){}
resp = respBuf.toString(); revEmpHdr
return resp;
}
- 136. <?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>社員登録</title>
<link type="text/css" rel="stylesheet" href="../../lib/style.css"/>
<script type="text/javascript" src="../../dwr/engine.js"></script>
<script type="text/javascript" src="../../dwr/util.js"></script>
<script type="text/javascript" src="../../dwr/interface/hrBean.js"></script>
<script type="text/javascript" src="../../lib/funcs.js"></script>
<script type="text/javascript">
//<![CDATA[
function reqEmpHdr(){
hrBean.revEmpHdr(idv("emp_no"), respEmpHdr);
}
function respEmpHdr(resp){
var resp1 = resp.split("<i>");
id("status").innerHTML = resp1[0];
id("emp_name").innerHTML = resp1[1]; (3) クライアントコード記述
id("depart").innerHTML = resp1[2];
id("section").innerHTML = resp1[3]; dwrRevEmpHdr.htm 1/2
id("ent_date").innerHTML = resp1[4];
}
- 137. function initOnLoad(){
setListener(id("rev"), "click", reqEmpHdr);
} dwrRevEmpHdr.htm 2/2
setListener(window, "load", initOnLoad);
//]]>
</script>
</head>
<body>
<center>
<div class="t3">社員マスタ管理</div>
<table width="370" border="1">
<tbody>
<tr><th colspan="2">社員マスタ参照</th></tr>
<tr>
<th width="110">社員番号</th>
<td><input type="text" size="8" id="emp_no"/></td>
</tr>
<tr><th>社員氏名</th><td id="emp_name"> </td></tr>
<tr><th>所属部</th><td id="depart"> </td></tr>
<tr><th>所属課</th><td id="section"> </td></tr>
<tr><th>更新日</th><td id="ent_date"> </td></tr>
<tr>
<th><input type="button" id="rev" value=" 参照 " /></th>
<td id="status"> </td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
- 139. <?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" dwrRevEmpHdrKey1.htm
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>社員登録</title>
<link type="text/css" rel="stylesheet" href="../../lib/style.css"/>
<script type="text/javascript" src="../../dwr/engine.js"></script>
<script type="text/javascript" src="../../dwr/util.js"></script>
<script type="text/javascript" src="../../dwr/interface/hrBean.js"></script>
<script type="text/javascript" src="../../lib/funcs.js"></script>
<script type="text/javascript">
//<![CDATA[
function reqEmpHdr(e){
if(getkcode(e) == 13){
hrBean.revEmpHdr(idv("emp_no").toUpperCase(), respEmpHdr);
}
} if(idv("emp_no").length == 8){
function respEmpHdr(resp){ hrBean.revEmpHdr(idv("emp_no").toUpperCase(), respEmpHdr);
dispitems(resp, "emp_name"); }
}
function initOnLoad(){
setListener(id("emp_no"), "keyup", reqEmpHdr);
}
setListener(window, "load", initOnLoad);
//]]>
</script>
- 140. </head>
<body>
<center>
<div class="t3">社員マスタ管理</div>
<table width="370" border="1">
<tbody>
<tr><th colspan="2">社員マスタ参照</th></tr>
<tr>
<th width="110">社員番号</th>
<td><input type="text" size="14" id="emp_no"/></td>
</tr>
<tr><th>社員氏名</th><td id="emp_name"> </td></tr>
<tr><th>所属部</th><td id="depart"> </td></tr>
<tr><th>所属課</th><td id="section"> </td></tr>
<tr><th>更新日</th><td id="ent_date"> </td></tr>
<tr>
<th> </th>
<td id="status"> </td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
- 142. <?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>社員登録</title>
<link type="text/css" rel="stylesheet" href="../../lib/style.css"/>
<style type="text/css">
<!--
#emp_dat {
position: relative; width:370px; height: 180px;
}
#auto {
position: relative;
margin-top: -132px; margin-left: 56px;
padding: 0px;
border-width: 1px; border-style: solid; border-color: #668;
width: 186px; height: 130px;
z-index: 1;
overflow: auto;
background-color: #fff;
}
--> dwrRevEmpHdrAuto1.htm
</style>
- 143. <script type="text/javascript" src="../../lib/funcs.js"></script>
<script type="text/javascript" src="../../lib/prototype.js"></script>
<script type="text/javascript" src="../../dwr/engine.js"></script>
<script type="text/javascript" src="../../dwr/util.js"></script>
<script type="text/javascript" src="../../dwr/interface/hrBean.js"></script>
<script type="text/javascript">
//<![CDATA[
var emp_no, autoRows, autoPos;
function incEmpHdr(e){
var ckey = getkcode(e);
if(ckey==38 || ckey==40){
autoIncLine(ckey);
}else if(ckey==46){
$("emp_no").value = "";
$("emp_name").innerHTML = " ";
$("depart").innerHTML = " ";
$("section").innerHTML = " ";
$("ent_date").innerHTML = " ";
$("status").innerHTML = " ";
$("emp_no").focus();
}else if(ckey==13){
emp_no = $("tr"+autoPos).firstChild.firstChild.nodeValue;
$("auto").hide();
hrBean.revEmpHdr(emp_no, respEmpHdr);
}else if($F("emp_no").length > 0){
hrBean.revEmpHdrAuto1($F("emp_no"), respEmpHdrAuto);
}else{
$("auto").hide();
}
}
- 144. function autoIncLine(ckey){
if(ckey==38){
if(autoPos > 0){
$("tr"+autoPos).style.backgroundColor = "#fff“
--autoPos;
$("tr"+autoPos).style.backgroundColor = "#ff6“
}
}else if(ckey==40){
if(autoPos < autoRows){
$("tr"+autoPos).style.backgroundColor = "#fff“
++autoPos;
$("tr"+autoPos).style.backgroundColor = "#ff6“
}
}
}
function respEmpHdr(resp){
var recs = resp.split("<r>");
var items = recs[0].split("<i>")
if(recs[0].length > 1){
$("emp_no").value = emp_no;
$("emp_name").innerHTML = items[0];
$("depart").innerHTML = items[1];
$("section").innerHTML = items[2];
$("ent_date").innerHTML = items[3];
$("status").innerHTML = items[4];
}else{
$("status").innerHTML = items[0];
}
}