Ajax 応用

AjaxによるWebアプリケーション開発講座

[応用コース]

（有）サイバースペース

CyberSpaceTechnology Holdings

http://www.at21.net/

清野克行1

Ajax実践編

Ajax要素技術の応用１．テーブルの参照・登録・更新・削除イベントの伝播、ＤＯＭノード操作、DB登録２．部品構成（任意の構成）の一括表示再帰呼出しでの非同期通信 GET/同期、prototype.jsの制限３．Ajaxでのコールバック処理タイマ-での擬似コールバック Ajax コールバック例 (777マッチ) 受注情報登録とコールバック表示

Ajaxライブラリ 1.ActiveWidgets 簡単なサンプル実習－１タブコントロールツリーコントロールコンボボックス演習-１グリッドコントロール実習－2 演習-２演習-３ 2.DWR (Direct Web Remoting) DWRの特徴ＤＷＲサンプル実習－３ DWRプログラミング演習-4 演習-5 3.Plotr 実習 4.script.aculo.us 演習-6 5.Yahoo! UI Library 演習-7

Ajax要素技術

概論

Ajax(Asynchronous JavaScript ＋ XML)=A New Approach to Web Applications 2005年2月18日 adaptive pathの Jesse James Garrett のエッセイに初登場

Ajaxの始まり

DB プレゼンテーション

Web UI

AjaxモデルでのWebシステム (SPI=Single Page Interface)

Webクライアント CGI系プログラム

ビジネスロジック

ユーザPC サーバサイド

データアクセス

Ajaxエンジン

Webブラウザ

GET/POST

テキスト XML

データストア

Ajaxエンジンの機能

Ajaxエンジン

⑤ 演算処理 ④ 表示制御

サーバ

① イベント処理

② サーバ通信

③ ＵＩ表示

JavaScript

ＸＨＴＭＬ＋ＣＳＳ・XHTML 画面構成・CSS 表示制御

・テキストデータ・XMLデータ

Ajax初めてのプログラム - Ajaxサンプルプログラム1

従業員番号から氏名表示操作手順]

1.従業員番号入力 ↓ 2.カーソル移動 ↓ 3.従業員氏名表示

GET/非同期での受信処理

Ajaxでの通信方式（GET/POST；非同期/同期）

GET/非同期-関数名指定での受信処理

GET/同期

POST/非同期

//<![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>

POST/同期

サーバからの受信データがテキスト並びの場合

サーバからの受信データがテキスト並びの場合、

受信データはsplitメソッドで配列にセットし、

htmlタグと組合せ、表示用タグ構成を作成・出力。

// JavaScript var rv = httpObj.responseText.split("<i>"); var out = ‘<table>’; for(i = 0; i < rv.length; i++ ){ out += "<tr><td>" + i + "</td><td>" + rv[i] + "</td></tr>"; } out += "</table>"; document.getElementById("area1”).innerHTML = out; // xhtml <p id=”area1”>表示領域</p>

var rows = httpObj.responseText.split("<r>"); for(i = 0; i < rows.length; i++ ){ var row = rows[i].split("<i>"); for(i = 0; i < row.length; i++ ){ ： //xhtmlタグ作成： } } document.getElementById("area1”).innerHTML = out; //outは作成されたxhtmlタグ構成

データベース検索結果の表示

（複数レコード）

・レコード単位で配列にセットし

(ｒｏｗｓ[i])

・各レコードのアイテム単位で表示

をタグ作成

http://www.prototypejs.org

・Ajaxフレームワーク・JavaScript言語機能強化・メソッド名ショートカット・ＤＯＭ操作機能の拡張・クロスブラウザ対応・ MIT License

prototype.js

MIT License

※MIT License ・このソフトウェアを誰でも無償で無制限に扱うことができる。但し、著作権表示および本許諾表示を、ソフトウェアのすべての複製または重要な部分に記載しなければならない。・作者または著作権者は、ソフトウェアに関してなんら責任を負わない。

//<![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); //]]>

revClass1.js(prototype.js：Ajax.Request)

prototype.jsでの通信

//<![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); //]]>

addClass1.js(prototype: Ajax.Updater)

Ajax.RequestとAjax.Updaterの使い分け・Ajax.Request 受信データのプログラム処理を想定・Ajax.Updater 受信データの直接表示を想定(container)

※出力用の関数指定なし

Ajaxエンジン

サーバ

② サーバ通信

③ ＵＩ表示

JavaScript

ルート

キャプチャフェーズ

バブリングフェースオブザｰバ

ターゲット

document

ＤＯＭイベントモデル

・ターゲットイベント発生

・オブザーバイベントキャッチ

・バブリングフェーズ

イベントの上位伝播

・キャプチャフェーズ

イベントの下位伝播

イベント発生

イベントキャッチ

function revClass1(e) { 処理内容 } function setListeners() { var observer = document.getElementById(“show"); addListener(observer, "click", revClass1); } setListener(window, "load", setListeners);

イベントオブジェクトイベントオブジェクトからイベントに関する様ざまな情報を所得可能

・キー入力、マウスクリックでのイベント発生ノード識別

・キー入力イベントでの入力キー識別（キーコード値）

・マウスクリックイベントでのマウスボタン（左、右、中央）識別

・マウスポインタ（カーソル）移動でのポインタ位置検出

イベントターゲットの検出： getid(e)

イベントターゲット(イベント発生ノード) → idタグで識別

IE系ブラウザ e.srcElement IE以外のブラウザ e.target

getid関数(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;

getkcode関数(funcs.js)

キー入力イベントで

入力キーコード値を返す

IE系および新しいFireFox e. keyCode 古いFireFox e.which

入力キーコードの検出: getkcode(e)

クリックマウスボタン（左右）の検知

FireFox 関数：e.which

•Left button： 1

•Middle button： *

•Right button： 3

MS(IE) 関数：e.button

•Left button： 1

•Middle button： *

•Right button： 2

function mbutton(e){

var click;

if(!e) var e = window.event;

if (e.which){

if(e.which == 1){

click = "L";

}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;

クリックマウスボタンの検出 mbutton(e)

・左ボタンクリック → 戻り値（“L”）・右ボタンクリック → 戻り値（“R”）

１． e.clientX、 e.clientY [IE,FF] 原点（０，０）：ブラウザ画面左上 e.clientX：ウィンドウ表示部分の左上を基準としてX座標をピクセル値で返す。 e.clientY：ウィンドウ表示部分の左上を基準としてY座標をピクセル値で返す。２． e.offsetX、 e.offsetY [IEのみ] e.offsetX：イベントでオフセットの親となるoffsetParentオブジェクトの左上を基準としてオブジェクトのX座標をピクセル値で返す。 e.offsetY：イベントでオフセットの親となるoffsetParentオブジェクトの左上を基準としてオブジェクトのY座標をピクセル値で返す。３． e.screenX、 e.screenY [IE,FF] 原点（０，０）：モニタ画面左上 e.screenX：スクリーン上マウス位置のX座標をピクセル値で返す。 e.screenY：スクリーン上マウス位置のX座標をピクセル値で返す。４． e.x、 e.y [IEのみ、e.clientX、 e.clientYと同じ] e.x：ウィンドウ表示部分の左上を基準としてX座標をピクセル値で返す。 e.y：ウィンドウ表示部分の左上を基準としてY座標をピクセル値で返す。

移動するマウスポインタ位置の検出

マウスポインタ位置の検出

<?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>  </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; }

マウスポインタ位置の検出 mpos2.htm 1/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>

mpos2.htm 2/2

//<![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); //]]>

mpos2.js

フォーム

コントロール

・ラジオボタン・チェクボックス・セレクトメニュー必要性：Ajaxでのコントロールデータ処理と送信メリット：サーバレスポンスデータでの動的値設定動的絞り込み検索

セレクトメニュー

selectMenu.htm

//<![CDATA[ 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); //]]>

selectMenu.js

//<![CDATA[ function checkSpec(){ $(“result”).innerText = “選択結果： ” + $F("pc“); Function listeners(){ setListener($(“pc”), "change", checkSpec); } setListener(window, "load", setListeners); //]]>

Prototype.js

セレクトメニュー絞り込み検索

//JavaScript

</script>

</head>

<body>

<center class="t3">Select Menu2</center>

</table>

</body>

</html>

selectMenu2.htm 1/4

//<![CDATA[

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;

selectMenu2.htm 2/4

var class1_code = $("class1List").value;

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;

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);

selectMenu2.htm 3/4

alert($("class2List").value);

Function listeners(){

setListener($("class1List"), "change", getClass2);

setListener(window, "load", listeners);

setListener(window, "load", getClass1);

selectMenu2.htm 4/4

ラジオボタン

radioBtn.htm

//<![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); //]]>

radioBtn.js

チェックボックス

<?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>

チェックボックス選択確認XHTML checkB.htm

チェクボックス選択確認JavaScript checkB.js

//<![CDATA[ function checked(e){ var eid =getid(e); alert("選択は " + eid); } function setListeners(){ setListener($("pc"), "click", checked); } setListener(window, "load", setListeners); //]]>

チェックボックス-複数選択での処理

checkBox.htm

//<![CDATA[ var optcum = new Array(); 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); //]]>

checkBox.js

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(); } }

checkBox.java

Ajaxエンジン

サーバ

② サーバ通信

③ ＵＩ表示

JavaScript

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); } } } }

(1) DOMノード操作サンプル

ＤＯＭノード操作

DOMノード操作概要

ノードの種類・要素ノード (element node) ・属性ノード (attribute node) ・テキストノード(text node)

<div id=“id1” class=“class1”>DOMノード操作</div>

要素ノード <div>

テキストノード DOMノード操作

属性ノード id=“id1” class=“class1”

getElementById

構文] object.getElementById(“id属性値”) 機能] 指定したID名を持つ要素ノードオブジェクトを返す。引数] id属性値。返値] オブジェクト。適用] document 対応] [IE5～][Firefox1～][Safari1～][Opera8～][Netscape6～]

1.要素ノードの参照

※非常に頻繁に使用されるメソッドで、多くのAjaxライブラリでショートカット

関数が用意されている。

例] document.getElementById(“out1”);

$(“out1”); // Prototype.js, DWR

id(“out”); // funcs.js

getElementsByTagName

構文] object. getElementsByTagName(“タグ名”) 機能] 指定したタグ名を持つオブジェクト（要素ノード）を配列形式で返す。引数] タグ名。返値] オブジェクトの参照。適用] document 対応] [IE5～][Firefox1～][Safari1～][Opera8～][Netscape6～]

要素ノードの参照

※ワイルドカード “*” で総てのノード要素を指定することが出来る。 ※funcs.jsでショートカット関数が用意されている。例] document.getElementsByTagName(“div”);

tn(“div”); // funcs.js

getAttribute

書式] object.getAttribute('attributeName‘ [, 'type‘]) 説明] オブジェクトの指定された属性の値を返す。引数] attributeNameは属性の名前を指定。 typeは種類を指定。次のいずれか。 0（アトリビュート名の大文字小文字の区別をしない） 1（アトリビュート名の大文字小文字の区別をする） 2（値を返す）返値] アトリビュートの値対応] [IE5～][Firefox 1～][Safari 1～][Opera 8～][Netscape 6～]

２．属性ノードの参照

getAttributeNode

構文] object.getAttributeNode('attributeName') 説明] オブジェクトの指定された属性のノード値を返す。引数] AttributeNameは属性名を指定。返値] attributeオブジェクトを返す。対応] [IE5～][Firefox1～][Safari1～][Opera8～][Netscape6～]

属性ノードの参照

firstChild

書式] object.firstChild 説明] オブジェクトの最初の子ノードを参照する。 firstChildはchildNodes[0]と同じになる対応] IE5～][Firefox 1～][Safari 1～][Opera 8～][Netscape 6～]

lastChild

書式] object.firstChild 説明] オブジェクトの最後の子ノードを参照する。 firstChildはchildNodes[object.childNodes.length-1]と同じになる対応] IE5～][Firefox 1～][Safari 1～][Opera 8～][Netscape 6～]

子ノードの参照-１

childNodes

構文] object.childNodes object.childNodes[index] object.childNodes.length 機能] オブジェクトの子ノードを参照する。評価値は配列で最初の子ノードは0番になる。引数] id属性値。返値] 子ノードオブジェクトの配列適用] object 対応] [IE5～][Firefox 1～][Safari 1～][Opera 8～][Netscape 6～]

子ノードの参照-2

hasChildNodes 構文] object.hasChildNodes() 機能] 子ノードがあるかどうか返す。子ノードがある場合はtrue、ない場合はfalseを返す。引数] id属性値。返値] 真偽値適用] object 対応] [IE5～][Firefox 1～][Safari 1～][Opera 8～][Netscape 6～]

子ノードの参照-3

function check() { if ($("sample").hasChildNodes()) { alert(“子ノードがあります。”); } else { alert(“子ノードがありません。”); } }

nextSibling 構文] object.nextSibling 機能] オブジェクトの次のノードを参照する。返値] ノードオブジェクトの参照適用] 多くのノードオブジェクト対応] [IE5～][Firefox 1～][Safari 1～][Opera 8～][Netscape 6～]

兄弟ノードの参照

previousSibling 構文] object.previousSibling 機能] オブジェクトの前のノードを参照する。返値] ノードオブジェクトの参照適用] 多くのノードオブジェクト対応] [IE5～][Firefox 1～][Safari 1～][Opera 8～][Netscape 6～]

parentNodeプロパティ構文] object.parentNode 機能] 親ノードを参照する。適用] object 対応] [IE5～][Firefox 1～][Safari 1～][Opera 8～][Netscape 6～]

親ノードの参照

createElementメソッド

書式] object.createElement(element) 説明] 引数で指定したエレメントを作成する。引数] 要素(エレメント)の名前戻値] 作成したオブジェクト。適用] document 対応] [IE5～][Firefox 1～][Safari 1～][Opera 8～][Netscape 6～]

要素ノードの作成

createTextNodeメソッド書式] object.createTextNode(text) 機能] 指定されたテキストノードを作成する。引数] 作成するテキスト返値] TextNodeオブジェクト適用] document 対応] [IE5～][Firefox1～][Safari1～][Opera8～][Netscape6～]

テキストノードの作成

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); }

属性ノードの作成

setAttributeメソッド

構文]object.setAttribute('attributeName', 'value', ['type‘] )

機能] オブジェクトに、引数で指定された属性を追加する。

引数] attributeNameはアトリビュート名を指定。 valueは値を指定。 typeは種類を指定。次のいずれか。 0（アトリビュート名の大文字小文字の区別をしない） 1（アトリビュート名の大文字小文字の区別をする）

返値] なし

insertBefore

書式] object.insertBefore(newNode, existingNode)

機能] オブジェクトの指定された既存のノードオブジェクトの前に指定された新しいノードオブジェクトを挿入する。引数] newNode：新しいノードオブジェクトを指定。 existingNode：既存のノードオブジェクトを指定。戻値] ノードオブジェクト。

対応] [IE5～][Firefox 1～][Safari 1～][Opera 8～][Netscape 6～]

既存ノードの前に新規ノードオブジェクトを挿入

insertAdjacentElement

書式] object.insertAdjacentElement(“type”, insObj) 機能] オブジェクトの指定された位置に隣接するエレメントオブジェクトを挿入する引数] type：次のいずれかを指定しobjectノードに対する位置関係を指定する。 BeforeBegin 開始タグの前 AfterBegin 開始タグの後 BeforeEnd 終了タグの前 AfterEnd 終了タグの後 insObj：追加する要素オブジェクトを指定。

返値] エレメントオブジェクトを返す。

隣接するエレメントにオブジェクトを挿入

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); }

テキストの挿入

insertData 構文] object.insertData(‘offset’, ‘text’)

機能] オブジェクト(object)に、第２引数で指定されたテキストを挿入する。引数] offsett：既存テキストのどの文字位置にテキストを挿入するかを指定する。 text：挿入されるテキストリレラル。 ※既存テキストは英数字と漢字を区別しないで位置指定できる。適用] テキストノード、コメント返値] なし。

removeNode 構文] object.removeNode(“value”) 機能] オブジェクトのノードオブジェクトを削除する。引数] valueは値を指定。次のいずれか。 true（childNodesコレクションを含める） false（childNodesコレクションを含めない）返値] ノードオブジェクトを返す。

[３] ノードの削除

ノードオブジェクトを削除

removeChild 構文] pnode.removeChild(cnode) 機能] オブジェクトの指定された子ノードオブジェクトを削除する。引数] pnode：親ノードオブジェクト。 cnode：子ノードオブジェクト。返値] ノードオブジェクト。対応] [IE5～][Firefox1～][Safari1～][Opera8～][Netscape6～]

子ノードオブジェクトを削除

removeAttribute 構文] object.removeAttribute('attributeName', ['type‘])

機能] オブジェクトの指定された属性値を削除する。引数] attributeName：アトリビュート名を指定。 type：は種類を指定。次のいずれか。 0（アトリビュート名の大文字小文字の区別をしない） 1（アトリビュート名の大文字小文字の区別をする）返値] true（削除）、false（非削除）対応] [IE5～][Firefox1～][Safari1～][Opera8～][Netscape6～] 例] $(“id1”). removeAttribute(‘name', 0)

属性（attribute）を削除

イーザネットフレーム

IPデータグラム

TCPセグメント

１２Byte 4B

24Byte

20Byte

HTTPヘッダ

ヘッダデータ量： 60Byte ＋ HTTPプロトコルヘッダ

GET /docs/sw/http-header.html HTTP/1.1

Host: www.kanzaki.com

Accept: text/html, text/plain, text/sgml, */*;q=0.01

Accept-Encoding: gzip, compress Accept-Language: ja,en

If-Modified-Since: Sun, 2 Sep 2001 11:31:06 GMT

User-Agent: Lynx/2.8.2

HTTPプロトコルリクエストヘッダ例

HTTP/1.1 200 OK Date: Wed, 05 Sep 2001 06:06:19 GMT Server: Apache/1.3.12 Content-Location: http-header.html.ja Vary: negotiate,accept-language,accept-charset 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

HTTPプロトコルレスポンスヘッダ例

XMLHｔｔｐRequestでのデータ送受信オーバヘッド

ヘッダデータ量： 60Byte ＋ HTTPプロトコルヘッダ

GET /docs/sw/http-header.html HTTP/1.1

Host: www.kanzaki.com

Accept: text/html, text/plain, text/sgml, */*;q=0.01

Accept-Encoding: gzip, compress Accept-Language: ja,en

If-Modified-Since: Sun, 2 Sep 2001 11:31:06 GMT

User-Agent: Lynx/2.8.2

HTTPプロトコルリクエストヘッダ例

HTTP/1.1 200 OK Date: Wed, 05 Sep 2001 06:06:19 GMT Server: Apache/1.3.12 Content-Location: http-header.html.ja Vary: negotiate,accept-language,accept-charset 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

HTTPプロトコルレスポンスヘッダ例

イーザネットフレーム

IPデータグラム

TCPセグメント

１２Byte 4B

24Byte

20Byte

HTTPヘッダ

XMLHｔｔｐRequestでのデータ送受信オーバヘッド

Ajaxライブラリ

77 77 77

エフェクト系

コントロール系

サーバリクエスト

言語機能強化

script.aculo.us Yahoo! UI Library

Ｐｌｏｔｒ

ActiveWidgets Dojo

Yahoo! UI Library

Prototype.js MochiKit

開発者ユーザ

[クライアント]

[サーバ]

Ajaxライブラリ

・ＵＩツール

・リモーティングツール

78 78 78

エフェクト系

コントロール系

サーバリクエスト

言語機能強化

script.aculo.us Yahoo UI Library

Ｐｌｏｔｒ

ActiveWidgets Dojo

Yahoo UI Library

Prototype.js MochiKit

開発者ユーザ

[クライアント]

[サーバ]

Ajaxライブラリ

[ＵＩツール]

[リモーティングツール]

Ajaxモデルでの処理の流れ

JavaScript (Ajaxエンジン)

サーバ

② サーバ通信

③ ＵＩ表示ＸＨＴＭＬ＋ＣＳＳ・XHTML 画面構成・CSS 表示制御

GET/POST

ＤＯＭＡＰＩ

言語機能

サーバリモーティング

Ajaxモデルとライブラリ

JavaScript (Ajaxエンジン)

サーバ

② サーバ通信

③ ＵＩ表示ＸＨＴＭＬ＋ＣＳＳ・XHTML 画面構成・CSS 表示制御

GET/POST ＵＩ表現

言語機能拡張

サーバリモーティング

Ajaxian.com ２００７ Survey Results http://ajaxian.com/

DWR(Direct WebRemoting)

http://getahead.ltd.uk/dwr/

DWR：Easy Ajax for Java

AjaxアプリケーションをサーバサイドJavaで開発するための JavaScript－Java連携用フレームワーク

Apache License, Version 2.0 再配布要件 (1)LICENSEファイルを再配布物内の「どこか」に置く。 (2)再配布要件(自分の著作物も含む)は、適度に定めてよい。付与要件 (1)LICENSEファイルを作る。(Apacheライセンス参照) (2)LICENSEファイルの中身に Copyright [yyyy] [著作権所有者の名前] をつける。(もちろん再配布物と一緒に入れる)

Ajaxクライアントサーバ

１．ネットワーク透過性ローカルのJavaクラスのメソッド呼び出し感覚でリモートのメソッド呼出しが可能。 ※Remote Procedure Call vs Local Procedure Call

Java Beans

DWRの特徴

DWRでのシステム構成

[ビュー] [コントローラ] [モデル]

DWR Client DWR Servlet Java Beans Ajax

[MVCモデル] M:Model ビジネスロジック V:View 表示機能 C:Controｌler 処理制御機能

:ユーザ記述

:DWRサポート

-制御機能（Controller）はシステム（DWR）に任せ、開発者はビジネスロジック作成に専念できる。

dwr.xml [プレゼンテーション層] [ファンクショナル層] [データアクセス層] web.xml

[３層C/Sシステム] P: プレゼンテ－ション層 F: ファンクショナル層 D: データアクセス層

85 85 85

２．サーバ側Javaの記述はJava Beans(POJO)で行う

（１) DI（Dependency Injection）・サーバ側JavaはJavaBeans(POJO)で記述し、サーバサイド単独でテストできる。

（２） DRY（Don’t Repeat Yourself）・Java Beansでビジネスロジックを記述する事により、重複のないコード記述が可能。

（３） 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)] 設定よりも規約

86 86 86

（２） DRY（Don’t Repeat Yourself）

DWR Client

Java Beans (POJO)

[DRY=Don’t Repeat Yourself]同じプログラムコードを重複して記述しない。

・顧客情報表示・担当者表示・商品情報表示

顧客クラス

社員クラス

商品クラス

顧客関係メソッド (crud)

社員関係メソッド (crud)

商品関係メソッド (crud)

DWR Servlet

コントローラ機能

・機能単位でのクラス構成とメソッド定義 EX] 受注関係のCRUD処理をクラスにまとめる。・カスタマイズはオーバライドで行う。

87 87 87

３．リバースAjax - DWR 2.0から

サーバ側のJavaからクライアントのJavaScriptに非同期にデータ送信が可能 ⇒コールバック、サーバプッシュとも言われる ⇒チャットのような対話型のAjaxアプリケーションが記述しやすくなる。 DWRのリバースAjaxでは３つの方式をサポート Comet, Polling, Piggyback

88 88 88

DWRでのリバースAjax実装形式

1 Active Reverse Ajax [Full Streaming Mode] =Comet デフォルトのReverse Ajaxモードで、クライアントへのレスポンスは最も早い。

リクエスト受信後、ブラウザのコネクションがまだ生きているかを見るために、

６０秒毎にコネエクションをクローズする。

[Early Closing Mode] =Comet リクエスト受信後、６０秒後にコネエクションをクローズする。

[Polling Mode] = Polling ６０秒毎にポーリングを行って新しいデータがあるか確認する。最も多くのクライアントコネクションが可能。

2.Passive Reverse Ajax =piggyback サーバはクライアントへのキューイングしておき、次のリクエスト時に、同時にレスポンス送信する。サーバ側のコネクション保持も、クライアントからのポーリングもなく、この方式によるWebサーバへの追加の負荷は全くない。

４．UIとサーバ通信の分離

Ajaxエンジン

⑤演算処理 ④表示制御

サーバ

①イベント処理

②サーバ通信

③ＵＩ表示

Web GUI

XHTML+CSS

DWR 他コンポーネント

・通信機能 → DWR ・ＵＩ機能 → ActiveWidgets, Yahoo UI, Dojo etc =>分散アプリケーション、分散オブジェクトで一般的な形態 vs] GWT(Google Web Toolkit) は一体型

５．DWRサーブレットとユーザサーブレットの混在可

[ビュー] [コントローラ] [モデル]

DWR Servlet Java Beans

dwr.xml

DWR Client Ajax

Ajax Client Java Beans

Servlet （ユーザ記述）

web.xml ユーザ記述Servletは・web.xmlにDWR-Servletと併記可能ただし、DWR-Servletの後に記述する。ユーザ記述JavaBeansは・dwr.xmlに定義しDWRのDEBUG機能使用可能・JavaBeans（POJO）は全く同じ

リバースAjax ---- アクティブリバースAjax ---- フルストリーミングモード -- アーリイクロージングモード -- ポーリングモード ----パッシブリバースAjax

リバースAjaxの実装方式

（Piggyback）

（Comet）

（Polling）

92 92 92

・動的にページを生成するためのユーティリティメソッドを提供コレクションクラスのオブジェクトをHTMLのテーブルやリストに展開するためのメソッドが用意されている。JavaScriptに詳しくなくても、簡単にページをダイナミックに生成できる。

・Java／JavaScript間のデータ変換で多くの型をサポート DWRでは、サーバのJavaオブジェクトとクライアントのJavaScriptオブジェクトの間でデータ変換を行う。文字列や単純な型については何も指定しなくても自動的に変換してくれる。また、次のような複雑な型であっても、簡単な記述を追加することでDWRが自動的に変換してくれる。オブジェクト例]Array 、Bean、Collection、DOM 、Enum

・Struts, JSF, Springなどのフレームワークとの統合例えば、JSF（Java Server Faces）であれば、DWRからManagedBeansのオブジェクトを操作できる。

・多くのブラウザに対応エラーハンドリング、タイムアウトハンドリング JavaScriptからサーバ側のJavaメソッドを呼び出すときに、エラーハンドラやタイムアウトの指定が簡単にできる。ブラウザ例] Safari、Opera、Mozilla、Konqueror

６その他

93 93 93

Tomcat5

サーブレット

コンテナ MySQL

FedoraCore５

プログラム作成 - ＤＷＲ実行環境

APサーバデータベース

Tomcat 5.xx

J2EE 5.04

MySQL 4.1.11

IE 6.0.2800

FF 2.00.2

サンプル動作環境

WindowXP Pro V2

サーバ

クライアント IE6.0

ブラウザ IE 6.0

ブラウザ

サーブレット Java

DWR Version 2.0 RC 2

94 94 94

WARファイルでのDWRサンプル環境作成 1.WARファイル(dwr.war)のダウンロード http://getahead.org/dwr/download

95 95 95

2.dwr.warを$CATALINA_HOME/webapps に配置後Tomcat再起動または、Tomcat Webアプリケーションマンージャからデプロイ

96 96 96

3.ブラウザで http://localhost:8080/dwr/ をアクセス・初期画面の表示

DWRサンプルプログラム１ - Dynamic Address Entry オートコンプリート

98 98 98

DWRサンプルプログラム２ - reverse ajax 時計表示

99 99 99

DWRサンプルプログラム３ - reverse ajax チャット

100 100 100

初めてのDWR 従業員番号から氏名表示

DWRユーザプログラミング作成

$CATALINA_HOME

WEB-INF

web.xml

aaa.htm

bbb.class

webapps

classes

DWRディレクトリ構成

dwr.xml

102 102 102

1. DWR JAR ファイルのダウンロードと配置（１） http://getahead.org/dwr/download から dwr.jar ファイルをダウンロード。（２） $CATALINA_HOME/webapps/[開発DIR]/WEB-INF/lib ディレクトリに配置 ※DWRディレクトリ(dwr.warでデプロイ)のlib内ファイルをすべてコピーで可

103 103 103

<?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>

2. デプロイメントディスクリプタ（web.xml）の編集 WEB-INF/web.xml にdwr-invokerの行を追加. ※サーブレットの定義はdwr-invokerだけ。 ※DWRディレクトリのweb.xmlをコピーで可 web.xml

104 104 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> <url-pattern>/dwr/*</url-pattern> </servlet-mapping> </web-app>

参考] web.xml（オリジナル）

105 105 105

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

3.サーバコード(JavaBeans：POJO)作成

106 106 106

4.WEB-INFディレクトリ下にdwr.xmを作成・配置

dwr.xmｌ定義

<!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>

5.tomcat再起動

creator=“new” :リクエストの際に、Javaオブジェクトの新しいインスタンス生成 ※scope属性 application アプリケーション全体で１つのインスタンス作成 session セッション毎にインスタンス生成 request リクエスト毎にインスタンスを生成 page ページ毎にインスタンスを生成

1.クラスファイルの指定

@RemoteProxy public class empBean { @RemoteMethod public String getEmpName(String emp_no){ : } }

POJOクラスをリモートアクセス可能にする為には, @RemoteProxy および @RemoteMethod

のアノテーション(annotation）を指定する。

※ クライアントアクセス名の変更 @RemoteProxy(name=”empInfo”)

参考] アノテーションの指定方法

108 108 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) {} return empName; } }

アノテーション DWR記述の代替をビーンズコード内で行う。

<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>

2.web.xmlにアノテーション適用JavaBeans指定

110 110 110

機能] 利用可能なすべてのJavaBeansをWebページ上で確認できる。

6.デバックモードでJavaBeansの機能確認

<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>

1.web.xmlにdebug機能の使用を指定

111 111 111

2.http://(URL)/(Webアプリケーション名)/dwr/ にアクセスし、利用可能なオブジェクトの一覧が表示される。

112 112 112

<?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 }

７.クライアントコード作成 dwrGetAsyn.htm 1/2

113 113 113

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>

dwrGetAsyn.htm 2/2

114 114 114

<allow> DWRが生成・処理可能なクラス範囲を定義する

[参考]

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: EJB３のセッションbeansへのアクセス. ※ejb3は現在テスト段階

115 115 115

DWR関連jsファイル(ライブラリ＆自動生成)

１．/dwr/engine.js 必須のコアファイル XMLHttpRequestによる非同期通信を行う

２．/dwr/util.js オプションのユーティリティファイル例] DWRUtil.getValue()、DWRUtil.setValue()

３． /interface/sem1Bean.js sem1Bean.java固有のjsファイル DWRのサーブレット（DWRServlet）が動的に生成 demo1.Demoオブジェクトにアクセスするためのインターフェイスを提供

jsファイル名は dwr.xmlで指定 <create creator="new" javascript="sem1Bean">

メソッド機能

$(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: テキスト１, id2:テキスト2 …} のように指定し、指定されたIDにテキスト値をセットする。

DWRUtil.removeAllOptions(id) IDで指定したselect要素、ul要素、ol要素のオプションをすべて削除する。

DWRUtil.addOptions(id, 配列) IDで指定したselect要素に配列内のテキストをoptionとして追加する。

DWRUtil.removeAllRows(id) IDで指定したテーブルからすべての行を削除する。

DWRUtil.addRows

(id,array,cellfuncs,[options])

IDで指定したテーブルに行を追加する。追加する行はarrayで指定された配列データをcellfuncsで指定された関数に従って追加する。

DWRUtil.getText(id) 指定されたID値に対応するテキストを所得する。

DWRUtil.selectRange(id,start,end) IDで指定された入力フィールドのstart ~ end文字目までをテキストを選択する。

DWRUtil.toDescriptiveString(id,opt) 指定された要素に関する情報をオプション(0~2)に従って表示する。

DWRUtil.useLoadingMessage() 通信中のメッセージを表示するように指定する。

[実習-1] ・DWRでの従業員から氏名表示を作成ご自分のディレクトリでプログラム作成と動作確認を行って下さい。

118 118 118

リモートオブジェクトのオプション指定オプション概要 callback リモートコールが成功した場合の処理 errorHandoler リモートコール処理が失敗した場合の処理 ordered 要求された順番で結果を反映するか preHook リモートコール直前に行う処理 postHook リモートコール直後に行う処理 timmeout 要求のタイムアウト時間(ミリ秒) verb HTTPメソッド(GETまたはPOST) warninghandoler ブラウザによる警告が発生した場合の処理

リモートオブジェクトオプション指定例

120 120 120

参考：Javaチャット： DWRでのコールバック処理

121 121 121

<?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>DWR 軽量チャットバージョン 2.0</title> <link rel="stylesheet" type="text/css" href="../lib/style.css"/> <style type="text/css">  </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); }

JavaChat.htm 1/2

122 122 122

function listeners(){ 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>

JavaChat.htm 2/2

123 123 123

package cback; import java.util.Collection; import java.util.LinkedList; 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); }

JavaChat.java

124 124 124

package cback; import java.net.MalformedURLException; import java.net.URL; import org.directwebremoting.Security; 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; }

Message.java

応用プログラム

126 126 126

DWRでCRUD処理 DWRでデータベース登録社員マスタ登録

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"; } }

hrBean.java 1/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; } }

hrBean.java addEmpHdr 2/2

<!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>

(2) dwr.xml の記述

（３） DWRデバッガでサーバメソッド（addEmpHdr）の動作確認

131 131 131

<?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; }

dwrAddEmpHdr.htm 1/2 （４）クライアントコード記述

132 132 132

function initOnLoad(){ setListener(id("add"), "click", addEmpHdr); } 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>

dwrAddEmpHdr.htm 2/2

133 133 133

サンプル作成２ DWRでデータベース参照社員マスタ参照

public String revEmpHdr(String emp_no){ Connection con = null; 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(); return resp; }

revEmpHdr

（１）サーバコード記述

(2) DWRデバッガでサーバメソッド（revEmpHdr）の動作確認

<?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]; id("depart").innerHTML = resp1[2]; id("section").innerHTML = resp1[3]; id("ent_date").innerHTML = resp1[4]; }

dwrRevEmpHdr.htm 1/2

（３）クライアントコード記述

function initOnLoad(){ setListener(id("rev"), "click", reqEmpHdr); } 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>

dwrRevEmpHdr.htm 2/2

DOMイベントモデルでの応用

・ENTERキー押下で表示・ID入力と同時に表示

<?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(e){ if(getkcode(e) == 13){ hrBean.revEmpHdr(idv("emp_no").toUpperCase(), respEmpHdr); } } function respEmpHdr(resp){ dispitems(resp, "emp_name"); } function initOnLoad(){ setListener(id("emp_no"), "keyup", reqEmpHdr); } setListener(window, "load", initOnLoad); //]]> </script>

dwrRevEmpHdrKey1.htm

if(idv("emp_no").length == 8){ hrBean.revEmpHdr(idv("emp_no").toUpperCase(), respEmpHdr); }

</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>

オートコンプリート：社員マスタ参照

<?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">  </style>

dwrRevEmpHdrAuto1.htm

function initOnLoad(){ $("auto").hide(); setListener(id("emp_no"), "keyup", incEmpHdr); } 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="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>

社員マスタ参照チェックボックス

<?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 reqEmpAll(e){ hrBean.revEmpHdrLike1(getid(e), respEmpInfo); } function respEmpInfo(resp){ var recs = resp.split("<r>"); if(recs[0].substr(0,2) != "NO"){ if(!id("view").hasChildNodes()){ var table = document.createElement("table"); table.id = "out"; table.border = "1"; table.createTHead(); var tr = table.insertRow(0); for(var j = 0; j < 5; j++){ var td = tr.insertCell(j); td.align ="center";

switch(j){ case 0: td.width = "200"; var tl="所属部"; break; case 1: td.width = "80"; var tl="社員NO"; break; case 2: td.width = "100"; var tl="姓名"; break; case 3: td.width = "100"; var tl="所属課"; break; case 4: td.width = "100"; var tl="登録日"; break; } td.appendChild(document.createTextNode(tl)); } }else{ var table = id("out"); } for(var i = 0; i < recs.length-1; i++){ var items = recs[i].split("<i>"); var tr = table.insertRow(i+1); for(var j = 0; j < items.length; j++){ var td = tr.insertCell(j); td.align = "center"; td.appendChild(document.createTextNode(items[j])); td.align = "left"; } } if(!id("view").hasChildNodes()){ id("view").appendChild(table); }

}else{ id("view").innerHTML = recs[0]; } } function initOnLoad(){ setListener(id("sel"), "click", reqEmpAll); } setListener(window, "load", initOnLoad); //]]> </script> </head> <body> <center> <h3>社員マスタ参照</h3> <div id="sel"> <input type=“checkbox” name=“ass” id=“GE”/>総務部 <input type=“checkbox” name=“ass” id=“AC”/>経理部 <input type=“checkbox” name=“ass” id=“PE”/>人事部 <input type=“checkbox” name=“ass” id=“SR”/>営業部 <input type=“checkbox” name=“ass” id=“SE”/>ＳＥ部 </div> <div id="view"></div> </center> </body> </html>

仕訳処理-データチェック

仕訳処理-マウス操作のないデータ入力

<?xml version="1.0" encoging="UTF-8" standalone="no"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<head>

//<![CDATA[

function setDebitAcct(e){

if(debit_code.value.length==4){

httpObj.open("GET", "setDebitAcct.php?acct_code="+debit_code.value);

httpObj.onreadystatechange = setDebitAcctExe;

httpObj.send(null);

function setDebitAcctExe(){

var debit_acct;

debit_acct = httpObj.responseText;

if(debit_acct.substring(0,2) == "NA"){

alert("借方勘定コード" + debit_code.value + "は存在しません");

}else{

document.getElementById("debit_acct").value = debit_acct;

addJournal.htm

function journalEntry(e){

var sendVal, code;

if(e.keyCode==13){

sendVal = "debit_code="+debit_code.value

+ "&debit_acct="+debit_acct.value

+ "&debit_amt="+debit_amt.value

+ "&credit_code="+credit_code.value

+ "&credit_acct="+credit_acct.value

+ "&credit_amt="+credit_amt.value

+ "&summary="+summary.value;

httpObj.open("POST", "addJournal.php", false);

httpObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

httpObj.send(sendVal);

resVal = httpObj.responseText;

document.getElementById("status").innerHTML = resVal;

function setListeners(e){

var eSource = document.getElementById("debit_code");

addListener(eSource, "keyup", setDebitAcct, false);

var eSource = document.getElementById("summary");

addListener(eSource, "keyup", journalEntry, false);

addListener(window, "load", setListeners, false);

</script>

</head>

<body>

<center><span class="title2">Ajax e-Commerce</span></center><br />

仕訳処理コード

addJournal.htm

</table>

<th>借方コード</th>

<th>貸方コード</th>

</table>

</table>

</body>

</html>

addJournal.htm

//<![CDATA[ function getAcct(e){ if(getid(e).split("_")[1] == "code"){ var dc = getid(e).split("_")[0]; var dc_code = $(dc + "_code").value; if(dc_code.length != 4) return; dc_acct = getsyn("getAcct.php?acct_code=" + dc_code); if(dc_acct.substring(0,2) == "NA"){ alert("勘定コード" + dc_code + "は存在しません"); }else{ $(dc + "_acct").value = dc_acct; $(dc + "_amt").focus(); } }else if(getid(e) == "remark" && getkcode(e) == 18){ $("status").innerHTML = postsyn("addJournal.php", Form.serialize("items")); } } //]]>

addJournal 短縮形

$acct_code = $_GET["acct_code"];

$server = "localhost";

$dbname = "ajax_ec";

$user = "mysql";

$passwd = "callback";

$sv = mysql_connect($server, $user, $passwd)

or die("Connection error1");

$db = mysql_select_db($dbname)

or die("updClass1S: Connection error2");

$sql = "select acct_name from account where acct_code='$acct_code'";

$rows = mysql_query($sql, $sv)

or die("setDebitAcct: Select error");

$row = mysql_fetch_array($rows, MYSQL_ASSOC);

if($row){

echo $row["acct_name"];

}else{

echo "NA";

setDebitAcct.php

$acct_code = $_GET["acct_code"];

$server = "localhost";

$dbname = "ajax_ec";

$user = "mysql";

$passwd = "callback";

$sv = mysql_connect($server, $user, $passwd)

or die("Connection error1");

$db = mysql_select_db($dbname)

or die("updClass1S: Connection error2");

$sql = "select acct_name from account where acct_code='$acct_code'";

$rows = mysql_query($sql, $sv)

or die("setDebitAcct: Select error");

$row = mysql_fetch_array($rows, MYSQL_ASSOC);

if($row){

echo $row["acct_name"];

}else{

echo "NA";

addJournal.php

create table account ( acct_code varchar(8) not null primary key, acct_name varchar(20), remark varchar(30)

create table journal ( check_no varchar(8) not null, debit_code varchar(8) not null, debit_acct varchar(16), debit_amt int, credit_code varchar(8) not null, credit_acct varchar(16), credit_amt int, remark varchar(30) )

勘定テーブル

ＥＣサイトでの商品表示

-商品表示：購入目的商品を効率よく探し出す -金額表示：現在の購入金額を自動表示する

クラス１項目

クラス２項目

クラス３項目

商品マスタ

ＥＣサイトでの商品表示-操作手順

商品マスタ登録/参照/更新/削除

DWRを使用できない例 – 再帰処理でのUI表示 ⇒DEBUG機能は使用可能

<?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/xhtml1.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 type="text/css">  </style> <script type="text/javascript" src="../../lib/funcs.js"></script> <script type="text/javascript"> //<![CDATA[ var xhrObj = getXhrObj(); var finalItems, finalItem;

var finalFlags = new Array();

/bomTree1.htm

index = '['+level+'] ' + pad; xhrObj.open("get", "../../mrpsvlt?mode=getchild&p_item="+p_item, false); xhrObj.setRequestHeader("If-Modified-Since", "01 Jan 1970 00:00:00 GMT"); xhrObj.send(null); childItems = xhrObj.responseText.split("<r>"); for(i in childItems){ childItem = childItems[i].split("<i>"); tagNode = document.createElement("div"); tagNode.setAttribute("id", childItem[1]); docNode = document.createTextNode(index+childItem[1]+" 在庫数量："+childItem[3]); tagNode.appendChild(docNode); id(p_item).appendChild(tagNode); if(childItem[2]=="y"){ p_item = childItem[1]; getChild(e, level, p_item); } } }

部品構成にソート機能追加、マウスドラッグで構成配置変更

170 170 170

script.aculo.us （スクリプタキュラス）

http://script.aculo.us/ Web画面にエフェクト効果を与えるJavaScriptライブラリ・Ajaxコンロトロール・アニメーション・ドラッグ＆ドロップ・DOMユーティリティ・ユニットテスト・MIT License

171 171 171

Scaleサンプル

172 172 172

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <title>Scale</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../lib/scriptaculous.js?load=effects"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ function Scale(){ new Effect.Scale("area", 500); //$("area").visualEffect("Scale"); } function listeners(){ addListener($("exe"), "click", Scale, false); } addListener(self, "load", listeners, false); //]]> </script> </head> <body> <h2 id="exe">Scaleサンプル</h2> <img id="area" src="fuji.jpg" width="150" height="110"/> </body> </html>

scale.htm

173 173 173

Droppableサンプル

174 174 174

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <title>script.aculo.us ドラッグ＆ドロップ</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css">  </style> <script type="text/javascript" src="../../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../../lib/scriptaculous.js"></script> <script type="text/javascript" src="../../lib/unittest.js"></script>

droppable.htm 1/2

175 175 175

droppable.htm 1/2

176 176 176

Sortable エレメントのソート処理を指定する書式

Sortable.create(element, option) element : ページ上のエレメント option : 以下のオプションを指定可能【省略可能】 tag : ソート対象タグ名 only : 指定されたスタイルシートが適用された項目のみソート対象 overlap : 方向（horizontalまたはvertical） constraint : 移動方向制限（horizontal : 水平のみ、vertical : 垂直のみ） containment : handle : ハンドル（エレメント名を指定） hoverclass : 重なった場合のスタイルシートクラス名 ghosting : ドラッグ前のエレメントを表示したままにするかどうか（true : する、false : しない） dropOnEmpty : scroll : scrollSensitivity : scrollSpeed : スクロール速度 tree : 子ノードもソート対象にするか（true : する、false : しない） treeTag : ソート対象を内包するコンテナのタグ名 onChange : ソートされ順序が変更された時の処理 onUpdate : ソートされ順序が変更された後の処理

ソート（Sortable）

177 177 177

Sortableサンプル-1

Sortableサンプル-1 :FireBugでのDOMツリー変化確認

179 179 179

sort1.htm

リクエスト待受リクエスト送信

レスポンス待受レスポンス送信

条件成就？

クライアントサーバ

クライアント型処理

サーバ型処理

Ajaxでのコールバック処理

Ajax コールバックサンプル-1 （タイマープルでのコールバック）

<?xml version="1.0" encoding="utf-8"?> <!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>Ajax Callback Sample</title> <script type="text/javascript" src="../funcs.js"></script> <script type="text/javascript" src="cback.js"></script> </head> <body> <h2>Ajax コールバックサンプル</h2> この画面は自動的に更新されます。 <input type="button" value="スタート" id="start" /> <p>このページの更新は <span id="time">3</span> 秒毎に行われます。</p> <table id="callbackout" align="left" border="1" width="320"> <tbody> <tr><th align="center">日本の歴史</th></tr> </tbody> </table> </body> </html>

cback.htm

//<![CDATA var httpObj = getHttpObject(); function initCallBack() { httpObj.open("get", "../cback?stat=init"); httpObj.onreadystatechange = initCallBackExe; httpObj.send(null); } function initCallBackExe() { if (httpObj.readyState == 4) { if (httpObj.status == 200) { setTimeout("startCallBack()", 3000); waitTime(); } } } function startCallBack() { httpObj.open("get", "../cback?stat=exe"); httpObj.onreadystatechange = startCallBackExe; httpObj.send(null); }

cback.js

package callback; import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class cback extends HttpServlet { private int cnt = 1; protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException { req.setCharacterEncoding("utf-8"); res.setContentType("text/html; charset=utf-8"); res.setHeader("Cache-Control", "no-cache"); PrintWriter out; out = res.getWriter(); String stat = req.getParameter("stat"); String info = "";

cback.java

if (stat.equals("init")) { cnt = 1; } else { switch (cnt) { case 1: info = "大和国家の成立と発展"; break; case 2: info = "荘園の発展と貴族社会"; break; case 3: info = "公家の没落と武家政権の成立"; break; case 4: info = "荘園制の解体と権力の分散"; break; case 5: info = "戦国大名と織豊政権"; break; case 6: info = "幕藩体制の成立と封建文化の展開"; break; case 7: info = "封建体制の動揺"; break; case 8: info = "幕藩体制の崩壊と明治国家の成立"; break; case 9: info = "資本主義の発達と国際政局への登場"; break; case 10: info = "第一次世界大戦と大正デモクラシー"; break; case 11: info = "第二次世界大戦と帝国主義の崩壊"; break; case 12: info = "敗戦による改革とその変容"; break; case 13: info = "end"; break; } cnt++; } out.println(info); out.close(); } }

Ajax コールバックサンプル-1 （サーバ条件マッチでのコールバック）

<?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>Ajax Callback Sample</title> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="cbacks.js"></script> </head> <body> <h2>Ajax コールバック(777マッチ)</h2> マッチナンバー <input type="text" value="777" id="number" size="6"/> <input type="button" value="スタート" id="start"/> <br/><br/> <table id="cbout" align="left" border="1" width="320"> <tbody><tr><th align="center">マッチ</th></tr></tbody> </table> </body> </html>

cbacks.htm

//<![CDATA var xhrObj = getXhrObj(); function cbackReq() { var number = id("number").value; xhrObj.open("get", "../cbacks1?number="+number); xhrObj.onreadystatechange = cbackResp; xhrObj.send(null); } function cbackResp() { if (xhrObj.readyState == 4) { if (xhrObj.status == 200) { var resp = xhrObj.responseText; var new_row = create_tr(resp); var table = document.getElementById("cbout"); var table_body = table.getElementsByTagName("tbody").item(0); var first_row = table_body.getElementsByTagName("tr").item(1); table_body.insertBefore(new_row, first_row); cbackReq(); } } }

cbacks.js

function create_tr(get) { var tr = document.createElement("tr"); var td = document.createElement("td"); var td_data = document.createTextNode(get); td.appendChild(td_data); tr.appendChild(td); return tr; } function initOnLoad() { setListener(id("start"), "click", cbackReq); } setListener(window, "load", initOnLoad); //]]>

package callback; import java.io.*; import java.text.*; import java.util.Date; import javax.servlet.*; import javax.servlet.http.*; public class cbacks1 extends HttpServlet { private int rnd1, rnd2; protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException { req.setCharacterEncoding("utf-8"); res.setContentType("text/html; charset=utf-8"); res.setHeader("Cache-Control", "no-cache"); PrintWriter out; out = res.getWriter(); String match_date = ""; int number = Integer.parseInt(req.getParameter("number")); DateFormat df = new SimpleDateFormat("yyyy-MM-dd-kk-mm-ss");

cbacks1.java

for(;;) { rnd1 = (int)(Math.random() * 10000); rnd2 = (int)(Math.random() * 10000); if (rnd1 == number && rnd2 == number){ Date now = new Date(); match_date = df.format(now); out.println("マッチナンバー > "+rnd1+" :"+match_date); out.flush(); break; }else{ continue; } } out.close(); } }

“777マッチ”でのコールバックと自動グラフ表示

７７７コールバック表示：使用される要素技術とライブラリ

[要素技術とライブラリ] ①イベント処理 -click +funcs.js ②サーバ通信 -繰返し継続での非同期通信 (GET/非同期) +funcs.js ③+④+⑤表示制御 -DOMノード操作 -連想配列処理（グラフ表示用） +plotr(グラフ) +Yahoo! UI Library(ドラッグ＆ドロップ)

196 196

http://www.solutoire.com/plotr Ajaxモデルでのグラフ作成

Plotr ・グラフ作成 -棒グラフ -折れ線グラフ -円グラフ・ブラウザサポート Firefox 1.5+ Safari 2.0+ Opera 9.0+ IE6+ (emulated) ・BSD LIcense

BSD License ・無保証であることの明記と著作権表示だけを再頒布の条件とする。・著作権表示を行えば、BSDライセンスのソースコードを他のプログラムに組み込み、組み込み後のソースコードを非公開にできる。

197 197

Plotrインストール手順

http://www.solutoire.com/plotr からダウンロード・解凍後、下記ｃｓｓ、ｊｓァイル指定

※ prototype.js 1.5 が必要

198 198

棒グラフ表示例－１

199 199

<?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"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>DrawPie1</title> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../lib/plotr/plotr.js"></script> <script type="text/javascript" src="../lib/plotr/excanvas.js"></script> <script type="text/javascript"> //<![CDATA[ function drawGraph(){ //コード記述 } function setListeners(){ addListener($("draw"), "click", drawGraph, false); } addListener(self, "load", setListeners, false); //]]> </script> </head> <body> <h2>Draw Pie1 <input type="button" id="draw" value="グラフ表示" /></h2> <div><canvas id="graph" height="300" width="600"></canvas></div> </body> </html>

棒グラフ表示例ｰ１ html

１．canvasタグで描画領域を設定し ID名を指定。

200 200

棒グラフ表示例-1 javascript

２．canvasタグのID名を Plotr.BarChart()の最初のパラメータとして指定３．2番目のパラメータはグラフを描画するオプションを指定。

201 201

棒グラフ表示例－２

202 202

棒グラフ表示例-２ javascript

203 203

棒グラフ表示例－３（枠線の指定）

204 204

棒グラフ表示例-３ javascript

折れ線グラフの描画方法・canvasタグで描画領域を設定。・canvasタグにID名を指定し、このID名をPlotr.LineChart()の最初のパラメータとして指定・2番目のパラメータはグラフを描画するオプションを指定。

206 206

折れ線グラフ表示例－１

207 207

折線グラフ表示例-１ javascript

208 208

折れ線グラフ表示例－２

209 209

折線グラフ表示例-１ javascript

円グラフの描画方法・canvasタグで描画領域を設定。・canvasタグにID名を指定し、このID名をPlotr.PieChart()の最初のパラメータとして指定・2番目のパラメータはグラフを描画するオプションを指定。

211 211

円グラフ表示例

212 212

円グラフ表示例 javascript

[実習-２] 棒グラフをご自分のディレクトリで動作確認してください。

214 214 214

web.xml

コンテキスト・オブジェクト

コールバック

レスポンスコールバック

リクエスト受注登録

受注DB

パラメータ情報

登録確認

コンテキスト・オブジェクトを使用したコールバック処理受注情報の登録とコールバックの別画面表示

Ajaxクライアント

ＪａｖａサーブレットＪａｖａサーブレット

Ajaxクライアント

215 215 215

非同期処理でのリッチクライアント - 受注情報登録画面

受注情報登録でのAjax適用

←顧客IDまたはTEL

入力と同時に顧客情報

を自動表示

←カレンダ日付けクリック

で受注関連年月日情報

の入力と変更

←商品IDと数量入力で

-商品名自動表示

-小計と合計額自動表示

受注情報登録と別画面へのコールバック表示 -表示受注一覧からボリュームオーダへのドラッグ＆ドロップ

受注情報登録：使用される要素技術とライブラリ

[要素技術とライブラリ] ①イベント処理 -DOMイベントモデルイベントオブジェクト、テキスト入力長 +funcs.js

②サーバ通信⑤演算処理 -非同期通信利用のコールバック (GET/非同期) +funcs.js

③+④表示制御 -DOMノード操作 -CSSスタイル指定 +Yahoo! UI Library(日本語カレンダ表示、ドラッグ＆ドロップ)

+script.aculo.us(ドラッグ＆ドロップ) ※サーバサイド +コンテキストオブジェクト（サーブレット）

・Programmable Web Google Maps API の追加

・マルチメディア表示

Google

Yahoo!

Amazon

ロングテイル集合知ユーザ参加貢献者としてのユーザ

REST HTTP

ユーザ参加

貢献者としてのユーザ

Folksonomy

ユーザーの手による情報の自由な整理

集合知

根本的な信頼

マルチデバイス

RSS ATOM

Webサービス・プログラマブルWeb ・マッシュアップ

プラットホームとしてのWeb

リッチなユーザ体験

マッシュアップ

Ajax API

公開

社内システム

適用業務

マッシュアップ

マッシュアップ構成とライブラリの粒度

小粒度：言語機能・Prototype.js

中度：コントロール・ActiveWidgets ・Script.aculo.us

大粒度：コンポーネント・Yahoo!UIカレンダ・Plotrグラフ作成

サイト内外部インターネット（プログラマブルWeb）

ダウンロード

SOAP/REST XHR

[Webサーバ] [Webクライアント]

Web ブラウザ

サーバプログラム

・Google SOAP Search API

・Google AJAX Search API ・Google Maps API

アプリケーションプログラム

ライブラリ

マッシュアップ構成とライブラリの粒度

小粒度：言語機能・Prototype.js

中度：コントロール・ActiveWidgets ・Script.aculo.us

大粒度：コンポーネント・Yahoo!UIカレンダ・Plotrグラフ作成

サイト内外部インターネット（プログラマブルWeb）

ダウンロード

SOAP/REST XHR

[Webサーバ] [Webクライアント]

Web ブラウザ

サーバプログラム

・Google SOAP Search API

・Google AJAX Search API ・Google Maps API

アプリケーションプログラム

ライブラリ

ＩＭＧ

Google Maps API

Google Mapsの使い方

（１） Googleアカウントを所得 https://www.google.com/accounts/ ManageAccount

（２）Google Maps APIキーの所得 http://www.google.com/apis/maps/

<?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"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head><title>Google Maps</title> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAAO-r1bqRz2fZr-Qmjsew WxRgE_H9GM6zkZRwNii93jtvjOSYqRTUvjXBD0wChGoBh2xb30zNzkqZmA" type="text/javascript"> </script> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript"> //<![CDATA[ function initOnLoad(){ var map = new GMap2(id("map")); map.setCenter(new GLatLng(35.6815617, 139.7672091), 15); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); } setListener(window, "load", initOnLoad); //]]> </script> </head> <body> コントロールとボタンを追加する <div id="map" style="width: 500px; height: 370px"></div> </body> </html>

gmaps5.htm

マーカクリックで画像付き吹き出しを表示する

<?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"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head><title>Google Maps</title> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAAO- r1bqRz2fZr-QmjsewWxRgE_H9GM6zkZRwNii93jtvjOSYqRTUvjXBD0wChGoBh2 xb30zNzkqZmA" type="text/javascript"></script> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript"> //<![CDATA[ function initOnLoad(){ img = new Image(); img.src = './tokyo.jpg'; var tags = '<div style="width:260px"><img src="'+img.src+'" width="240"/>‘ + "<br/><b>[東京駅]</b>東京都、中央区<br/>" + "ここへ到着、ここから出発<br/>付近を検索、マイマップに保存<br/>"; var map = new GMap2(id("map")); map.addControl(new GLargeMapControl()); map.setCenter(new GLatLng(35.6815617, 139.7672091), 15);

var lon = 139.7672091; //東京駅の経度 var lat = 35.6808617; //東京駅の緯度 var point = new GLatLng(lat, lon); createMarker(point) function createMarker(point) { var marker = new GMarker(point); map.addOverlay(marker); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(tags); }); } } setListener(window, "load", initOnLoad); //]]> </script> </head> <body> マーカクリックで画像付き吹き出しを表示する <div id="map" style="width:500px; height:400px"></div> </body> </html>

住所/スポット名入力で地図を表示する

<?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"> <head><title>Google Maps</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAAO-r1bqRz2fZr-Q mjsewWxRgE_H9GM6zkZRwNii93jtvjOSYqRTUvjXBD0wChGoBh2xb30zNzkqZmA" type="text/javascript"></script> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript"> //<![CDATA[ var map = null; var geocoder = null; function initOnLoad() { if (GBrowserIsCompatible()) { map = new GMap2(id("map")); map.setCenter(new GLatLng(35.6815617, 139.7672091), 1); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); geocoder = new GClientGeocoder(); setListener(id("addr"), "keyup", showMap); } }

gmaddr.htm

231 231

Yahoo! UI Library http://developer.yahoo.com/yui/

JavaScriptで記述されたWebクライアント用総合ライブラリ

233 233

Animation Button Calendar Connection Dom DragDrop Event Logger Menu

Motion Panel Point Region Scroll Slider TabView TreeView YAHOO

Yahoo UI Library モジュール区分

Animation ：ボックス拡大

235 235

<?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> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>anim1</title> <link rel="stylesheet" href="main.css" type="text/css" media="all"> <style type="text/css">  </style> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/build/yahoo/yahoo.js"></script> <script type="text/javascript" src="../lib/build/event/event.js"></script> <script type="text/javascript" src="../lib/build/dom/dom.js"></script> <script type="text/javascript" src="../lib/build/animation/animation.js"></script> <script type="text/javascript"> </script> </head> <body> <h2>ボックス拡大<input type="button" id="exe" value="開始"></h2> <div id="box">横幅と縦幅が指定された時間で変化。</div> </body> </html>

236 236

//<![CDATA[ function exeAnime(){ var boxObj = new YAHOO.util.Anim("box", { width: { from:100, to:320 }, height: { from:100, by:140 } }, 4.5 ); boxObj.animate(); } function setListeners(){ addListener($("exe"), "click", exeAnime, false); } addListener(window, "load", setListeners, false); //]]>

Animation ：ボックス幅拡大

238 238

//<![CDATA[ function exeAnime(){ var boxObj = new YAHOO.util.Anim("box", { width: { from:100, to:320 } }); boxObj.animate(); } function setListeners(){ addListener($("exe"), "click", exeAnime, false); } addListener(window, "load", setListeners, false); //]]>

カレンダー１

<?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> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <link type="text/css" rel="stylesheet" href="../lib/yui/build/calendar/assets/calendar.css" /> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/yui/build/yahoo/yahoo.js"></script> <script type="text/javascript" src="../lib/yui/build/event/event.js"></script> <script type="text/javascript" src="../lib/yui/build/dom/dom.js"></script> <script type="text/javascript" src="../lib/yui/build/calendar/calendar.js"></script> <script> //<![CDATA[ function init() { var calendar = new YAHOO.widget.Calendar("cal", "out", { pagedate:"2/2007", selected:"2/10/2007-2/15/2007" }); calendar.render(); } addListener(window, "load", init, false); //]]> </script> </head> <body><div id="out"></div></body> </html>

カレンダー２２カ月表示

<?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> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <link type="text/css" rel="stylesheet" href="../lib/yui/build/fonts/fonts.css" /> <link type="text/css" rel="stylesheet" href="../lib/yui/build/reset/reset.css" /> <link type="text/css" rel="stylesheet" href="../lib/yui/build/calendar/assets/calendar.css" /> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/yui/build/yahoo/yahoo.js"></script> <script type="text/javascript" src="../lib/yui/build/event/event.js"></script> <script type="text/javascript" src="../lib/yui/build/dom/dom.js"></script> <script type="text/javascript" src="../lib/yui/build/calendar/calendar.js"></script> <script> //<![CDATA[ function init() { var calendar = new YAHOO.widget.Calendar2up("cal", "out", { pagedate:"2/2007", selected:"2/13/2007-2/15/2007, 2/20/2007" }); calendar.render(); } addListener(window, "load", init, false); //]]> </script> </head> <body><div id="out"></div></body> </html>

カレンダー３日本語表示

<?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> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <link type="text/css" rel="stylesheet" href="../lib/yui/build/fonts/fonts.css" /> <link type="text/css" rel="stylesheet" href="../lib/yui/build/reset/reset.css" /> <link type="text/css" rel="stylesheet" href="../lib/yui/build/calendar/assets/calendar.css" /> <style>  </style> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/yui/build/yahoo/yahoo.js"></script> <script type="text/javascript" src="../lib/yui/build/event/event.js"></script> <script type="text/javascript" src="../lib/yui/build/dom/dom.js"></script> <script type="text/javascript" src="../lib/yui/build/calendar/calendar.js"></script> <script> //<![CDATA[ function init() {} addListener(window, "load", init, false); //]]> </script> </head> <body><div id="out"></div></body> </html>

日本語カレンダのドラッグ＆ドロップ

<?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> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <link type="text/css" rel="stylesheet" href="../lib/yui/build/fonts/fonts.css" /> <link type="text/css" rel="stylesheet" href="../lib/yui/build/reset/reset.css" /> <link type="text/css" rel="stylesheet" href="../lib/yui/build/calendar/assets/calendar.css" /> <style>  </style> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/yui/build/yahoo/yahoo.js"></script> <script type="text/javascript" src="../lib/yui/build/event/event.js"></script> <script type="text/javascript" src="../lib/yui/build/dom/dom.js"></script> <script type="text/javascript" src="../lib/yui/build/calendar/calendar.js"></script> <script type="text/javascript" src="../lib/yui/build/dragdrop/dragdrop.js"></script> <script> </script> </head> <body><div id="out"></div></body> </html>

248 248

//<![CDATA[ function init() { var cal1 = new YAHOO.widget.Calendar("cal1","out", { START_WEEKDAY: 1, MULTI_SELECT:true } ); cal1.cfg.setProperty("MDY_YEAR_POSITION", 1); cal1.cfg.setProperty("MDY_MONTH_POSITION", 2); cal1.cfg.setProperty("MDY_DAY_POSITION", 3); cal1.cfg.setProperty("MY_YEAR_POSITION", 1); cal1.cfg.setProperty("MY_MONTH_POSITION", 2); cal1.cfg.setProperty("MONTHS_SHORT",["1¥u6708", "2¥u6708", "3¥u6708", "4¥u6708", "5¥u6708", "6¥u6708", "7¥u6708", "8¥u6708", "9¥u6708", "10¥u6708", "11¥u6708", "12¥u6708"]); cal1.cfg.setProperty("MONTHS_LONG", ["1¥u6708", "2¥u6708", "3¥u6708", "4¥u6708", "5¥u6708", "6¥u6708", "7¥u6708", "8¥u6708", "9¥u6708", "10¥u6708", "11¥u6708", "12¥u6708"]); cal1.cfg.setProperty("WEEKDAYS_1CHAR", ["¥u65E5", "¥u6708", "¥u706B", "¥u6C34", "¥u6728", "¥u91D1", "¥u571F"]); cal1.cfg.setProperty("WEEKDAYS_SHORT", ["¥u65E5", "¥u6708", "¥u706B", "¥u6C34", "¥u6728", "¥u91D1", "¥u571F"]); cal1.cfg.setProperty("WEEKDAYS_MEDIUM",["¥u65E5", "¥u6708", "¥u706B", "¥u6C34", "¥u6728", "¥u91D1", "¥u571F"]); cal1.cfg.setProperty("WEEKDAYS_LONG", ["¥u65E5", "¥u6708", "¥u706B", "¥u6C34", "¥u6728", "¥u91D1", "¥u571F"]); cal1.select("2007/6/13-2007/6/20"); cal1.selectEvent.subscribe(function(eventName,selectDate){ alert(selectDate); },cal1, true); cal1.render(); ddBox = new YAHOO.util.DD("out"); } addListener(window, "load", init, false); //]]>

カレンダ使用での日付入力

<?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> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <link type="text/css" rel="stylesheet" href="../lib/yui/build/fonts/fonts.css" /> <link type="text/css" rel="stylesheet" href="../lib/yui/build/reset/reset.css" /> <link type="text/css" rel="stylesheet" href="../lib/yui/build/calendar/assets/calendar.css" /> <style>  </style>

calendar4.htm (1/4)

//<![CDATA[ var fid = "inqDate"; function init() { var cal1 = new YAHOO.widget.Calendar("cal1","cal", { START_WEEKDAY: 1, MULTI_SELECT:true } ); cal1.cfg.setProperty("MDY_YEAR_POSITION", 1); cal1.cfg.setProperty("MDY_MONTH_POSITION",2); cal1.cfg.setProperty("MDY_DAY_POSITION", 3); cal1.cfg.setProperty("MY_YEAR_POSITION", 1); cal1.cfg.setProperty("MY_MONTH_POSITION", 2); cal1.cfg.setProperty("MONTHS_SHORT",["1¥u6708", "2¥u6708", "3¥u6708", "4¥u6708", "5¥u6708","6¥u6708", "7¥u6708", "8¥u6708", "9¥u6708", "10¥u6708", "11¥u6708", "12¥u6708"]); cal1.cfg.setProperty("MONTHS_LONG", ["1¥u6708", "2¥u6708", "3¥u6708", "4¥u6708", "5¥u6708","6¥u6708", "7¥u6708", "8¥u6708", "9¥u6708", "10¥u6708", "11¥u6708", "12¥u6708"]); cal1.cfg.setProperty("WEEKDAYS_1CHAR", ["¥u65E5", "¥u6708", "¥u706B", "¥u6C34", "¥u6728", "¥u91D1", "¥u571F"]); cal1.cfg.setProperty("WEEKDAYS_SHORT", ["¥u65E5", "¥u6708", "¥u706B", "¥u6C34", "¥u6728", "¥u91D1", "¥u571F"]); cal1.cfg.setProperty("WEEKDAYS_MEDIUM",["¥u65E5", "¥u6708", "¥u706B", "¥u6C34", "¥u6728", "¥u91D1", "¥u571F"]); cal1.cfg.setProperty("WEEKDAYS_LONG", ["¥u65E5", "¥u6708", "¥u706B", "¥u6C34", "¥u6728", "¥u91D1", "¥u571F"]); cal1.select("2007/6/13-2007/6/20");

calendar4.htm (2/4)

cal1.selectEvent.subscribe(function(eventName, selectDate){ var sdate1 = selectDate.toString(); var sdate2 = sdate1.replace(",", "/").replace(",", "/"); $(fid).value = sdate2; if(fid=="inqDate"){ fid = "ordDate"; }else if(fid == "ordDate"){ fid = "shpDate"; }else if(fid == "shpDate"){ fid = "payDate"; }else if(fid == "payDate"){ fid = "inqDate"; } },cal1, true); cal1.render(); } function setField(e) { fid = getid(e); } function listeners() { addListener($("entDay"), "click", setField, false); } addListener(window, "load", listeners, false); addListener(window, "load", init, false); //]]> </script>

calendar4.htm (3/4)

</head> <body> <p id="hdr">受注日付情報入力</p> <div id="ord"> <div>受注情報</div> <table width="200"> <tbody id="entDay"> <tr><td>問い合せ日</td><td><input type="text" size="8" id="inqDate"></td></tr> <tr><td>受注登録日</td><td><input type="text" size="8" id="ordDate"></td></tr> <tr><td>納入予定日</td><td><input type="text" size="8" id="shpDate"></td></tr> <tr><td>支払い期限</td><td><input type="text" size="8" id="payDate"></td></tr> </tbody> </table> </div> <div id="cal"></div></body> </html>

calendar4.htm (4/4)

[演習-3] 棒グラフをドラッグ＆ドロップできるように修正して下さい

<?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> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../lib/plotr/plotr.js"></script> <script type="text/javascript" src="../lib/plotr/excanvas.js"></script> <script type="text/javascript" src="../lib/yui/build/yahoo/yahoo.js"></script> <script type="text/javascript" src="../lib/yui/build/event/event.js"></script> <script type="text/javascript" src="../lib/yui/build/dom/dom.js"></script> <script type="text/javascript" src="../lib/yui/build/dragdrop/dragdrop.js"></script> <script> //<![CDATA[ function drawGraph() { var dataset = { "y2006Q3": [[0, 1], [1, 1], [2, 1.2], [3, 1.5]], "y2007Q1": [[0, 0.5], [1, 0.89], [2, 2.15], [3, 4]], "y2007Q2": [[0, 0.2], [1, 0.79], [2, 3.95], [3, 3.2]], "y2007Q3": [[0, 1.2], [1, 2.79], [2, 4.95], [3, 5.2]] };

dragdrop3.htm (1/3)

dragdrop3.htm (2/3)

dragdrop3.htm (3/3)

Yahoo! UI Library カレンダー表示

テーブルでのCRUD処理：使用される要素技術とライブラリ

[要素技術とライブラリ] ①イベント処理 -DOMモデルでのイベント伝播 +funcs.js ②サーバ通信 -配列データのサーバ送受信 +DWRでのJavaサーバ開発 ③+④+⑤表示制御 -DOMノード操作での動的・テーブル行/列追加・テーブル行/列挿入 +funcs.js

テーブル表示（標準DOMノード操作）

テーブル表示

<?xml version="1.0" encoding="utf-8"?> <!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>Ajax Table Create</title> <style type="text/css">  </style> <script type="text/javascript" src="../../lib/funcs.js"></script> <script type="text/javascript"> //<![CDATA function cr_tbl(){ var rows = 10, cols = 6; var table = document.createElement("table"); table.setAttribute("border", "1"); var thead = document.createElement("thead"); var tr = document.createElement("tr"); for(var j = 0; j < cols; j++){ var td = document.createElement("td"); td.setAttribute("align", "center");

if(j==0){ td.setAttribute("width", "40"); var title = document.createTextNode(" "); }else{ var title = document.createTextNode("列" + (j-1)); } td.appendChild(title); tr.appendChild(td); } thead.appendChild(tr); var tbody = document.createElement("tbody"); for(var i = 0; i < rows; i++){ var tr = document.createElement("tr"); for(var j = 0; j < cols; j++){ var td = document.createElement("td"); td.setAttribute("align", "center"); if(j==0){ td.setAttribute("width", "40"); td.setAttribute("class", "t1"); var title = document.createTextNode("行" + i); }else{ td.setAttribute(“width”, “80”); var title = document.createTextNode("ID " + i + "：" + j); } td.appendChild(title); tr.appendChild(td); }

tbody.appendChild(tr); } table.appendChild(thead); table.appendChild(tbody); document.getElementById("view").appendChild(table); } function initOnLoad() { var observer = document.getElementById("sel"); setListener(observer, "click", cr_tbl); } setListener(window, "load", initOnLoad); //]]> </script> </head> <body> <center> <h3>テーブル表示 <input type="button" id="sel" value=" 表示 "/></h3> <p id="view"></p> </center> </body> </html>

テーブル表示(HTML TableElementインターフェイスを使用)

<?xml version="1.0" encoding="utf-8"?> <!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>Ajax Table Create</title> <script type="text/javascript" src="../../lib/funcs.js"></script> <script type="text/javascript"> //<![CDATA function cr_tbl(){ var rows = 10, cols = 6; var table = document.createElement("table"); table.id = "out"; table.border = "1"; table.createTHead(); var tr = table.insertRow(0); for(var j = 0; j <cols6; j++){ var td = tr.insertCell(j); td.align ="center"; if(j==0){ td.width = "40"; td.appendChild(document.createTextNode(" ")); }else{ td.width = "80"; td.appendChild(document.createTextNode("列" + (j-1))); } }

for(var i = 0; i < rows; i++){ var tr = table.insertRow(i+1); for(var j = 0; j < cols; j++){ var td = tr.insertCell(j); td.align = "center"; if(j==0){ td.width = "40"; td.appendChild(document.createTextNode("行" + i)); }else{ td.width = "80"; td.appendChild(document.createTextNode("ID " + i + "：" + j)); } } } document.getElementById("view").appendChild(table); } function initOnLoad(){ var observer = document.getElementById("sel"); setListener(observer, "click", cr_tbl); } setListener(window, "load", initOnLoad); //]]> </script> </head> <body> <center> <h3>テーブル表示 <input type="button" id="sel" value=" 表示 "/></h3> <p id="view"></p> </center> </body> </html>

[演習-４] ボタンクリックで下図のようなテーブルを表示するプログラムを作成してください（行数・列数は任意です）。

テーブルでの参照・登録・更新・削除－１テーブル：行追加、列追加、行挿入、列挿入

サーバ：表データの登録、参照、更新、削除（crud）

テーブルでの参照・登録・更新・削除－２

テーブル応用画面セレクトメニューからの選択と自動カウント

テーブル応用画面

272 272 272

http://www.activewidgets.com/

ActiveWidgets ・AjaxでのRIA構築に向けたＵＩコントロールライブラリ・HTMLフォームコントロールとの共用可・GPLと商用ライセンスのデュアル・ライセンスで配布

273 273

ActiveWidgetsインストール手順

http://www.activewidgets.com/ からトライアル版ダウンロード・解凍後、下記ｃｓｓ、ｊｓァイル指定

274 274 274

［２］ JavaScript関数での実行（１）タブコントロール

<?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"> <head> <title>ActiveWidgets Examples</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link href="awidgets/runtime/styles/xp/aw.css" rel="stylesheet"></link> <link rel="stylesheet" type="text/css" href="./lib/style.css" />

コード12(1/3)

275 275 275

コード12(2/3)

276 276 276

コード12(2/3)

tabs.onSelectedItemsChanged = function(array){

if(array == "0"){

menu = "ajax.txt";

}else if(array == "1"){

menu = "tec.txt";

menu = "app.txt";

httpObj.open("get", menu, false);

httpObj.send(null);

var indata = httpObj.responseText;

document.getElementById("menu").innerHTML = indata;

addListener(window, "load", tabs1, false);

</script>

277 277 277

</head> <body> <div class="t3"> Ajax サイト＆サンプル</div> <div> 本サイトへのお問合せは右記メールアドレスへお願いします。(katu@hows.ws) <div> 方法/理由の如何を問わず本サイト掲載プログラムの無断コピーを禁止します。</div> <p id="menuTabs"><div style="border-top: 1px solid #999"></div></p> <p id="menu"></p> </body> </html>

コード12(3/3)

278 278 278

（３）コンボボックス

279 279 279

<?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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>ActiveWidgets Examples</title> <link href="../awidgets/runtime/styles/xp/aw.css" rel="stylesheet"></link> <style type="text/css"> #combo1 {width: 90px; height: 22px} #combo1-popup {width: 80px; height: 80px; border: 3px double #69f;} #combo1-popup .aw-mouseover-item {background: #330099} </style> <script src="../awidgets/runtime/lib/aw.js"></script> <script type="text/javascript" src="../funcs.js"></script> <script type="text/javascript"> function showCombo(){ var combo = new AW.UI.Combo; //コンボインスタンス生成 combo.setId("combo1"); //コンボ表示タグID指定 combo.setControlText("東京"); //初期表示テキスト指定 combo.setItemText(["埼玉", "神奈川", "千葉", "山梨"]); //リスト表示項目指定 combo.setItemCount(4); //リスト表示項目数指定 combo.refresh(); //コンボ表示 combo.onControlClicked = function(event){ window.status = "Control clicked"}; combo.onControlDoubleClicked = function(event){ window.status = "Control double clicked"};

コード17(1/2)

280 280 280

combo.onControlMouseOver = function(event){ window.status = "Control mouse over"}; combo.onControlMouseOut = function(event){ window.status = "Control mouse out"}; combo.onControlMouseDown = function(event){ window.status = "Control mouse down"}; combo.onControlMouseUp = function(event){ window.status = "Control mouse up"}; combo.onControlTextChanged = function(text){ window.status = "control text: “ + text; alert(“選択は: ” + text); }; combo.onControlActivated = function(event){ window.status = "control activated"}; combo.onControlDeactivated = function(event){ window.status = "control deactivated"}; combo.onControlEditStarted = function(event){ window.status = "control edit started"}; combo.onControlEditEnded = function(event){ window.status = "control edit ended"}; } addListener(self, "load", showCombo, false); </script> </head> <body> <p id="combo1"><p> </body> </html>

コード17(2/2)

[演習-４] スプレッドシート作成・コンボボックスで行、列を指定できるようにする・行と列を選択後、選択された行、列をアラート表示 ⇒この後の演習で、指定された行数列数のグリッドを表示

//<![CDATA[ var rows, cols; var rowcb = new AW.UI.Combo; // Create combo box var colcb = new AW.UI.Combo; // Create combo box function setRowColSel(){ rowcb.setId("rows"); rowcb.setControlSize(51, 22); // Set combo size width, height rowcb.setControlText("0"); // Iniital display item rowcb.setItemText(["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15"]); rowcb.setItemCount(15); // Drop down items and count $("rows").innerHTML=rowcb; colcb.setId("cols"); colcb.setControlSize(51, 22); // Set combo size width, height colcb.setControlText("0"); // Iniital display item colcb.setItemText(["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15"]); colcb.setItemCount(15); // Drop down items and count $("cols").innerHTML=colcb; rowcb.onControlTextChanged = function(rows1){ window.status = "rows: " + rows1; } colcb.onControlTextChanged = function(cols1){ window.status = "cols: " + cols1; } } addListener(self, "load", setRowColSel, false); //]]>

spread1.js

283 283 283

グリッドコントロールサンプル２・イベントハンドラ使用の関数呼び出し形式

284 284 284

<?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"> <head> <title>ActiveWidgets Examples</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" href="../awidgets/runtime/styles/xp/aw.css"/> <link rel="stylesheet" href="grid1.css"/> <script type="text/javascript" src="../funcs.js"></script> <script type="text/javascript" src="../awidgets/runtime/lib/aw.js"></script> <script type="text/javascript" src="grid1.js"></script> </head> <body> <center> <h3>グリッド表示サンプル</h3> <p id="grid1"></p> </center> </body> </html>

グリッド表示サンプル XHTML grid1.htm

285 285 285

グリッド表示サンプル CSS grid1.css

286 286 286

グリッド表示サンプル JavaScript

//<![CDATA[ function grid1(){ var data1 = [ ["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"], ["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"], ["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"], ["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"], ["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"], ["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"], ["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"], ["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"], ["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"], ["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"], ["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"], ["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"], ["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"], ["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"], ["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"], ["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"], ["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"], ["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"], ["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"], ["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"] ]; var myHeaders = [“ティカー”, “会社名”, “マーケット”, “$セールス”, “従業員数”]; //グリッドタイトルの指定

grid1.js(1/2)

287 287 287

var obj = new AW.Grid.Extended; //グリッドオブジェクトの生成 obj.setId("grid1"); //グリッドのCSS 書式への対応 obj.setFixedLeft(1); //左側固定カラム数の指定 obj.setControlSize(500, 300); //グリッド幅と高さ指定 obj.setControlPosition(100, 50); //グリッド左上位置指定 obj.setCellText(data1); // 2-dimensional js array obj.setCellEditable(true); //セルを編集可能に指定 obj.setHeaderText(myHeaders); //グリッドタイトルの書き込み obj.setColumnCount(5); //グリッドカラム数指定 obj.setRowCount(20); //グリッド行数指定 document.getElementById("grid1").innerHTML = obj; obj.onCellClicked = function(event, column, row){ window.status = "Cell " + column + "." + row + " clicked" alert("セル " + column + "." + row + " クリックド"); } obj.onCellDoubleClicked = function(event, column, row){ window.status = "Cell " + column + "." + row + " clicked" alert("セル " + column + "." + row + " ダブルクリックド"); } } addListener(self, "load", grid1, false); //]]>

grid1.js(2/2)

288 288 288

グリッドコントロールサンプル４行列指定でのグリッド表示とデータベース登録・更新・参照・削除

289 289 289

<?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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="Thu, 01 Dec 1994 16:00:00 GMT"> <title>ActiveWidgets Examples</title> <link rel="stylesheet" href="../awidgets/runtime/styles/xp/aw.css"/> <link rel="stylesheet" href="../style.css"/> <link rel="stylesheet" href="spread.css"/> <script type="text/javascript" src="../awidgets/runtime/lib/aw.js"></script> <script type="text/javascript" src="../funcs.js"></script> <script type="text/javascript" src="spread.js"></script> </head> <body> <center> <table> <tr> <th>テーブル入力処理-V</th> <td id="mod"> <button type="button" class="b3" id="rev">参照</button> <button type="button" class="b3" id="add">登録</button> <button type="button" class="b3" id="upd">更新</button>

コード30(1/2)

290 290 290

コード30(2/2)

291 291 291

<!-- #rows {width: 100px; height: 22px} #rows-popup {width: 40px; height: 170px; border: 1px double #30f;} #rows-popup .aw-mouseover-item {background: #330099} #cols {width: 100px; height: 22px} #cols-popup {width: 40px; height: 170px; border: 1px double #30f;} #cols-popup .aw-mouseover-item {background: #330099} #myGrid .aw-grid-row {height: 20px; border-bottom: 1px solid #ccc} #myGrid .aw-alternate-even {background: #fff;} #myGrid .aw-alternate-odd {background: #eee;} #myGrid .aw-column-0 {width: 80px; border-right: 1px dotted #ccc;} #myGrid .aw-column-1 {width: 80px; border-right: 1px dotted #ccc;} #myGrid .aw-column-2 {width: 80px; border-right: 1px dotted #ccc;} #myGrid .aw-column-3 {width: 80px; border-right: 1px dotted #ccc;} #myGrid .aw-column-4 {width: 80px; border-right: 1px dotted #ccc;} #myGrid .aw-column-5 {width: 80px; border-right: 1px dotted #ccc;} #myGrid .aw-column-6 {width: 80px; border-right: 1px dotted #ccc;} #myGrid .aw-column-7 {width: 80px; border-right: 1px dotted #ccc;} #myGrid .aw-column-8 {width: 80px; border-right: 1px dotted #ccc;} #myGrid .aw-column-9 {width: 80px; border-right: 1px dotted #ccc;} #myGrid .aw-column-10 {width: 80px; border-right: 1px dotted #ccc;} #myGrid .aw-column-11 {width: 80px; border-right: 1px dotted #ccc;} #myGrid .aw-column-12 {width: 80px; border-right: 1px dotted #ccc;} #myGrid .aw-column-13 {width: 80px; border-right: 1px dotted #ccc;}

コード31(1/2)

292 292 292

#myGrid .aw-column-14 {width: 80px; border-right: 1px dotted #ccc;} #myGrid .aw-column-15 {width: 80px; border-right: 1px dotted #ccc;} #myGrid .aw-column-16 {width: 80px; border-right: 1px dotted #ccc;} #myGrid .aw-column-17 {width: 80px; border-right: 1px dotted #ccc;} #myGrid .aw-column-18 {width: 80px; border-right: 1px dotted #ccc;} #myGrid .aw-column-19 {width: 80px; border-right: 1px dotted #ccc;} #myGrid .aw-grid-row .aw-cells-selected {background: #cacaca;} #myGrid .aw-mouseover-header {color: red;} #myGrid .aw-mousedown-header {color: yellow;} #myGrid .aw-header-1 {background: #eee} #myGrid .aw-row-selector {width: 20px; text-align: center} #myGrid .aw-mouseover-row .aw-row-selector {color: red;} #myGrid .aw-mouseover-selector {background: green;} #myGrid .aw-mousedown-selector {background: yellow;} -->

コード31(2/2)

293 293 293

//<![CDATA[ var httpObj = getHttpObject(); var table_name, recs; var rows, cols; var myData = new Array(); var myHeaders = new Array(); var obj = new AW.Grid.Extended; var obj1 = new AW.UI.Combo; // Create combo box var obj2 = new AW.UI.Combo; // Create combo box function setRowColSel(){ obj1.setId("rows"); obj1.setControlSize(51, 22); // Set combo size width, height obj1.setControlText("0"); // Iniital display item obj1.setItemText(["1","2","3","4","5","6","7","8","9","10"]); obj1.setItemCount(10); // Drop down items and count document.getElementById("rows").innerHTML=obj1; obj2.setId("cols"); obj2.setControlSize(51, 22); // Set combo size width, height obj2.setControlText("0"); // Iniital display item obj2.setItemText(["1","2","3","4","5","6","7","8","9","10"]); obj2.setItemCount(10); // Drop down items and count document.getElementById("cols").innerHTML=obj2; obj1.onControlTextChanged = function(rows1){ rows = rows1; window.status = "control text: " + rows; }

JavaScript コード21(1/8)

294 294 294

obj2.onControlTextChanged = function(cols1){ cols = cols1; window.status = "control text: " + cols; } obj2.onControlDeactivated = function(cols1){ window.status = "control text: " + rows + ":" + cols; showGrid(rows, cols, "new"); addTblHdr(rows, cols); } } function showGrid(rows, cols, flag){ var i, j, k, row, col, cell_text; if(flag=="new"){ //新規テーブル表示処理 myData = new Array(rows); for(i=0; i<rows; i++){ myData[i] = new Array(cols); } for(i=0; i<rows; i++){ for(j=0; j<cols; j++){ myData[i][j] = ""; } } }else if(flag=="upd"){ //既存テーブル表示処理 myData = new Array(rows);

コード21(2/8)

295 295 295

for(j=0; j<rows; j++){ myData[j] = new Array(cols); } for(j=0; j<rows; j++){ for(k=0; k<cols; k++){ myData[j][k] = ""; } } for(i=1; i < (recs.length-1); i++){ //サーバ受信データを表示用配列にセット rec = recs[i].split("<i>"); row = rec[0]; col = rec[1]; cell_text = rec[2]; myData[row][col] = cell_text; } obj1.setControlText(rows); obj2.setControlText(cols); } for (i = 0; i < cols; i++){ //テーブル列ヘッダの設定 myHeaders[i] = i+1; } obj.setId("myGrid"); //適用スタイルの指定 var gridw, gridh, selfw, offx; if(cols > 10 && rows > 18){ gridw = 740; // グリッド幅指定 gridh = 460; // グリッド高さ指定 }else if(cols <= 10 && rows > 18){

コード21(3/8)

296 296 296

gridw = 28 + 80 * cols; gridh = 460; }else if(cols > 10 && rows <= 18){ gridw = 740; gridh = 28 + 20 * rows; }else if(cols <= 10 && rows <=18){ gridw = 28 + 80 * cols; gridh = 28 + 20 * rows; } obj.setControlSize(gridw, gridh); //グリッド幅と高さ指定 obj.setCellText(myData); //2-dimensional js array obj.setCellEditable(true); //セル編集可能指定 obj.setHeaderCount(1); obj.setHeaderText(myHeaders); //テーブル列ヘッダ表示 obj.setRowCount(rows); //行数指定 obj.setColumnCount(cols); //列数指定 obj.setSelectorText(function(i){return this.getRowPosition(i)+1}); //テーブル行ヘッダ表示 obj.setSelectorVisible(true); document.getElementById("myGrid").innerHTML = obj; //テーブル表示 } function addTblHdr(rows, cols){ table_name = document.getElementById("table_name").value; httpObj.open("post", "../addtablehdr", false);

コード21(4/8)

297 297 297

httpObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); httpObj.send("table_name="+table_name+"&rows="+rows+"&cols="+cols); document.getElementById("status").innerText = httpObj.responseText; } function checkFname(e){ var i, j, k, get, get2, msg, out, cellid; if(e.keyCode == 18){ table_name = document.getElementById("table_name").value; httpObj.open("get", "../settablefile?table_name="+table_name, false); httpObj.setRequestHeader("If-Modified-Since", "01 Jan 1970 00:00:00 GMT"); httpObj.send(null); get = httpObj.responseText.split(","); if(get[0]=="new"){ msg = "新規ファイル作成です。"; document.getElementById("status").innerText = msg; }else{ msg = "ファイル " + table_name + " は存在しています。" document.getElementById("status").innerText = msg; out = "<table align='center'>"; out = "<table align='center' cellspacing='0' cellpadding='0'>"; for(i = 0; i < get[1]; i++){ out += "<tr>"; for(j = 0; j < get[2]; j++) out += "<td><input type='text' id='"+i+":"+j+"' size='5'/></td>"; out += "</tr>"; }

コード21(5/8)

298 298 298

out += "</table>"; document.getElementById("out2").innerHTML = out; document.getElementById("rows").value = get[1]; document.getElementById("cols").value = get[2]; httpObj.open("get", "../gettabledtl?table_name="+table_name, false); httpObj.setRequestHeader("If-Modified-Since", "01 Jan 1970 00:00:00 GMT"); httpObj.send(null); get = httpObj.responseText.split("<p>"); for(k = 0; k < get.length; k++){ get2 = get[k].split(","); cellid = get2[0] + ":" + get2[1]; document.getElementById(cellid).innerText = get2[2]; } } } } function revGrid(){ var table_name = document.getElementById("table_name").value; httpObj.open("post", "../revgrid", true); httpObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); httpObj.setRequestHeader("If-Modified-Since", "01 Jan 2000 00:00:00 GMT"); httpObj.send("table_name="+table_name); httpObj.onreadystatechange = function(){ if(httpObj.readyState == 4){ if(httpObj.status == 200){ recs = httpObj.responseText.split("<r>");

コード21(6/8)

299 299 299

var1 = recs[0].split("<i>"); rows = var1[0]; cols = var1[1]; showGrid(rows, cols, "old"); } } } } function modGrid(e){ var params, vals; var table_name = document.getElementById("table_name").value; var eid = getid(e); if(eid=="add"){ httpObj.open("post", "../addgrid", false); }else if(eid=="upd"){ httpObj.open("post", "../updgrid", false); }else if(eid=="del"){ httpObj.open("post", "../delgrid", false); } httpObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); httpObj.setRequestHeader("If-Modified-Since", "01 Jan 2000 00:00:00 GMT"); if(eid=="add" || eid=="upd"){ parms = new Array(table_name, rows, cols); vals = parms.concat(myData); httpObj.send("vals="+vals); }else if(eid="del"){

コード21(7/8)

300 300 300

httpObj.send("table_name="+table_name); } document.getElementById("status").innerText = httpObj.responseText; } function setListeners(){ var eSrc = document.getElementById("table_name"); addListener(eSrc, "keyup", checkFname, false); var eSrc = document.getElementById("rev"); addListener(eSrc, "click", revGrid, false); var eSrc = document.getElementById("mod"); addListener(eSrc, "click", modGrid, false); } addListener(self, "load", setListeners, false); addListener(self, "load", setRowColSel, false); //]]>

コード21(8/8)

[演習-５] スプレッドシート作成

コンボボックスで指定した行、列でグリッド表示

行、列演算機能の追加

//<![CDATA[ : var col1 = -1, row1 = -1, col2 = -1, row2 = -1; : function showGrid(rows, cols, flag){ : grid.onCellClicked = function(event, ecol, erow){ window.status = "Cell " + ecol + "." + erow + " clicked"; if(mode == "sumr"){ calcRowSum(ecol, erow); }else if(mode == "sumc"){ calcColSum(ecol, erow); } } }

行計算関数

列計算関数

演習-６スプレッドシート作成

ファイル名でデータ参照機能の追加

function revGrid(){ var table_name = dwr.util.getValue("table_name"); spread.revGrid(table_name, revGridExe); } function revGridExe(resp){ recs = resp.split("<r>"); var1 = recs[0].split("<i>"); rows = var1[0]; cols = var1[1]; showGrid(rows, cols, "upd"); }

演習-６ヒントグリッドデータのサーバアクセス処理

受信データの配列セット (1/2)

grid.setControlSize(gridw, gridh); // グリッド幅と高さ指定 grid.setCellText(cdat); // 2-dimensional js array grid.setCellEditable(true); // enable editing grid.setHeaderCount(1); grid.setHeaderText(headers); // js array (see top of this page) grid.setRowCount(rows); // 行数指定 grid.setColumnCount(cols); // 列数指定 grid.setSelectorText(function(i){return this.getRowPosition(i);}); grid.setSelectorVisible(true); grid.setFixedLeft(fixedCols); $("grid").innerHTML = grid; grid.onCellClicked = function(event, ecol, erow){ window.status = "Cell " + ecol + "." + erow + " clicked"; if(mode == "sumr"){ calcRowSum(ecol, erow); }else if(mode == "sumc"){ calcColSum(ecol, erow); } } }

受信データの配列セット (2/2)

Webスプレッドシートブラウザでのスプレッドシート処理

DWRでの Ajaxクライアント + サーバサイドJava 構成

・行、列の動的追加と削除・行列演算機能

・マクロ演算機能・CSVファイル読み込み

・グリッド表示データのグラフ表示（棒グラフ、折線グラフ、円グラフ）

UIとサーバ通信の分離

Ajaxエンジン

⑤演算処理 ④表示制御

①イベント処理

②サーバ通信

③ＵＩ表示

Web GUI

DWR 他コンポーネント

DWRサーブレット

Java Beans (POJO)

ActiveWidgets

グリッドでのCRUD処理：使用される要素技術とライブラリ

[要素技術とライブラリ] ①イベント処理 -ActiveWidgetsイベント処理 +funcs.js ②サーバ通信 +DWRでのJavaサーバ開発 +DWRでの配列データ送信 ③+④+⑤表示制御 +ActiveWidgetsグリッド処理 +ActiveWidgetsコンボ処理 +plotrでのグラフ表示 +funcs.js

行合計表示

列合計表示

行列総合計表示

行列総平均表示

(1,8) = (1,2) * (1,3) (2,8) = (1,7) - (1,6) * 2 マクロ登録と実行

ＣＳＶファイル読み込み

棒グラフ表示（縦）

棒グラフ表示（横）

折れ線グラフ表示

円グラフ表示

Appendix

320 320 320

http://www.activewidgets.com/

ActiveWidgets ・AjaxでのRIA構築に向けたＵＩコントロールライブラリ・HTMLフォームコントロールとの共用可・GPLと商用ライセンスのデュアル・ライセンスで配布

321 321

ActiveWidgetsインストール手順

http://www.activewidgets.com/ からトライアル版ダウンロード・解凍後、下記ｃｓｓ、ｊｓァイル指定

322 322 322

１グリッド <html> <head> <title>ActiveWidgets Examples</title> <script src="../awidgets/runtime/lib/aw.js"></script> <link href="../awidgets/runtime/styles/xp/aw.css" rel="stylesheet"/> <style>#grid1 {width: 400px; height: 100px}</style> </head> <body> <p id="grid1"></p> <script> var grid1 = new AW.UI.Grid; //グリッドインスタンス生成 grid1.setId("grid1"); //表示タグ位置ID指定 grid1.setCellText("cell"); //セル表示テキスト指定 grid1.setHeaderText("header"); //カラムヘッダ指定 grid1.setColumnCount(5); //表示カラム数指定 grid1.setRowCount(10); //表示行数指定 grid1.refresh(); //グリッド表示 </script> </body> </html>

コード１

[１] 簡単なサンプル -bodyタグ内での実行 -ActiveWidgetsオリジナル

323 323 323

２タブ

<html> <head> <title>ActiveWidgets Examples</title> <script src="../awidgets/runtime/lib/aw.js"></script> <link href="../awidgets/runtime/styles/xp/aw.css" rel="stylesheet"/> </head> <body> <p id="tabs1"></p> <div style="border-top:1px solid #999; font-size:1px; width:300px"/> <script> var itemTextArray = ["Home", "Favorites", "Font size", "Search"]; //各タブ表示テキスト指定 var itemImageArray = ["home", "favorites", "fontsize", "search"]; //各タブ表示画像指定 var tabs = new AW.UI.Tabs; //タブインスタンス生成 tabs.setId("tabs1"); //タブ表示タグ位置ID指定 tabs.setItemText(itemTextArray); //タブへの表示テキスト割り当て tabs.setItemImage(itemImageArray); //タブへの表示画像割り当て tabs.setItemCount(4); //表示タブ数指定 tabs.setSelectedItems([0]); //左端のタブ(Home)を初期表示選択に指定 tabs.refresh(); //タブ表示 </script> </body> </html>

コード2

324 324 324

3 コンボボックス

<html> <head> <title>ActiveWidgets Examples</title> <script src="../awidgets/runtime/lib/aw.js"></script> <link href="../awidgets/runtime/styles/xp/aw.css" rel="stylesheet"></link> </style> </head> <body class="aw-background-1"> <p>Combo:</p><p id="combo1"></p> <script> var itemTextArray = ["Home", "Favorites", "Font size", "Search"]; //コンボリスト表記テキスト項目指定 var itemImageArray = ["home", "favorites", "fontsize", "search"]; //コンボリスト表示画像項目指定 var combo = new AW.UI.Combo; //コンボインスタンス生成 combo.setId("combo1"); //コンボ表示タグ位置ID指定 combo.setControlText("Combo"); //ボックス内初期表示テキスト指定 combo.setControlImage("favorites"); //ボックス内初期表示画像（星印）指定 combo.setItemText(itemTextArray); //コンボリストへのテキスト割り当て

コード３(1/2)

325 325 325

combo.setItemImage(itemImageArray); //コンボリストへの画像割り当て combo.setItemCount(4); //コンボリスト項目数指定 combo.refresh(); //コンボ表示 </script> </body> </html>

コード３(2/2)

326 326 326

4 ツリー

<html> <head> <title>ActiveWidgets Examples</title> <script src="../awidgets/runtime/lib/aw.js"></script> <link href="../awidgets/runtime/styles/xp/aw.css" rel="stylesheet"/> </head> <body> <p id="tree1"></p> <script> var treeText = ["", "Home", "Favorites", "Font size", "Search", "Child node 1", "Child node 2"]; //ツリー表示テキスト指定 var treeImage = ["", "home", "favorites", "fontsize", "search"]; //ツリートップ表示画像指定 var treeView = {0:[1, 2, 3, 4], 1:[5, 6], 2:[7], 3:[8], 4:[9]}; //ツリー表示テキストをツリー構造に割り当て

コード4(1/2)

327 327 327

var tree = new AW.UI.Tree; //ツリーインスタンス生成 tree.setId("tree1"); //ツリー表示タグ位置ＩＤ指定 tree.setItemText(treeText); //ツリーへの表示テキスト割り当て tree.setItemImage(treeImage); //ツリーへの表示画像割り当て tree.setViewCount(function(i){return treeView[i] ? treeView[i].length : 0}); //トップレベル表示項目数指定 tree.setViewIndices(function(i){return treeView[i]}); tree.refresh(); //ツリー表示 </script> </body> </html>

コード4(2/2)

[実習-３] ・グリッド、タブメニュー、コンボボックス、ツリーをディレクトリにコピｰし機能確認して下さい。

329 329 329

5 チェックリスト

<html> <head> <title>ActiveWidgets Examples</title> <script src="../awidgets/runtime/lib/aw.js"></script> <link href="../awidgets/runtime/styles/xp/aw.css" rel="stylesheet"></link> </head> <body> <p id="checkedList1"></p> <script> var itemTextArray = ["Home", "Favorites", "Font size", "Search"]; //チェックボックス表示テキスト指定 var itemImageArray = ["home", "favorites", "fontsize", "search"]; //チェックボックス表示画像指定 var checkedList = new AW.UI.CheckedList; //チェックボックスインスタンス生成 checkedList.setId("checkedList1"); //チェックボックス表示タグID指定 checkedList.setItemText(itemTextArray); //チェックボックスへ表示テキスト割り当て checkedList.setItemImage(itemImageArray); //チェックボックスへ表示画像割り当て checkedList.setItemCount(4); //チェックボックス表示項目数指定

コード5(1/2)

330 330 330

checkedList.refresh(); //チェックボックス表示 </script> </body> </html>

コード5(2/2)

331 331 331

6 ラジオボタン

<html> <head> <title>ActiveWidgets Examples</title> <script src="../awidgets/runtime/lib/aw.js"></script> <link href="../awidgets/runtime/styles/xp/aw.css" rel="stylesheet"/> </head> <body> <p id="radio1"></p> <script> var itemTextArray = ["Home", "Favorites", "Font size", "Search"]; //ラジオボタン表示テキスト指定 var itemImageArray = ["home", "favorites", "fontsize", "search"]; //ラジオボタン表示画像指定 var radio = new AW.UI.Radio; //ラジオボタンインスタンス生成 radio.setId("radio1"); //ラジオボタン表示タグID指定 radio.setItemText(itemTextArray); //ラジオボタンへ表示テキスト割り当て radio.setItemImage(itemImageArray); //ラジオボタンへ表示画像割り当て radio.setItemCount(4); //ラジオボタン表示数指定

コード6(1/2)

332 332 332

radio.setSelectedItems([0]); //初期選択をトップボタン（Home）に指定 radio.refresh(); //ラジオボタン表示 </script> </body> </html>

コード6(2/2)

333 333 333

7 リスト

<html> <head> <title>ActiveWidgets Examples</title> <script src="../awidgets/runtime/lib/aw.js"></script> <link href="../awidgets/runtime/styles/xp/aw.css" rel="stylesheet"/> </head> <body> <p id="list1"></p> <script> var itemTextArray = ["Home", "Favorites", "Font size", "Search"]; //リスト表示テキスト指定 var itemImageArray = ["home", "favorites", "fontsize", "search"]; //リスト表示画像指定 var list = new AW.UI.List; //リストインスタンス生成 list.setId("list1"); //リスト表示タグID指定 list.setItemText(itemTextArray); //リストへ表示テキスト割り当て list.setItemImage(itemImageArray); //リストへ表示画像割り当て

コード7(1/2)

334 334 334

list.setItemCount(4); //リスト表示項目数指定 list.refresh(); //リスト表示 </script> </body> </html>

コード7(2/2)

335 335 335

8 グループ

<html> <head> <title>ActiveWidgets Examples</title> <script src="./runtime/lib/aw.js"></script> <link href="./runtime/styles/xp/aw.css" rel="stylesheet"/> <style>#group1 {width: 300px; height: 50px}</style> </head> <body> <p id="group1"></p> <script> var group = new AW.UI.Group; //グループインスタンス生成 group.setId("group1"); //グループ表示タグID指定 group.setControlText("Group/Fieldset"); //グループ枠表示テキスト指定 group.setControlImage("favorites"); //グループ枠表示画像(星印)指定 group.refresh(); //グループ表示 </script> </body> </html>

コード8

336 336 336

9 インプット

<html> <head> <title>ActiveWidgets Examples</title> <script src="../awidgets/runtime/lib/aw.js"></script> <link href="../awidgets/runtime/styles/xp/aw.css" rel="stylesheet"/> </head> <body> <p id="input1"></p> <script> var input = new AW.UI.Input; //インプットインスタンス生成 input.setId("input1"); //インプット表示タグID指定 input.setControlText("Input"); //初期表示テキスト指定 input.setControlImage("search"); //表示画像指定 input.refresh(); //インンプット表示 </script> </body> </html>

コード9

337 337 337

10 ボタン

<html> <head> <title>ActiveWidgets Examples</title> <script src="./runtime/lib/aw.js"></script> <link href="./runtime/styles/xp/aw.css" rel="stylesheet"/> </head> <body> <p id="button1"></p> <script> var button = new AW.UI.Button; //ボタンインスタンス生成 button.setId("button1"); //ボタン表示タグID指定 button.setControlText("Button"); //ボタン表示テキスト指定 button.setControlImage("favorites"); //ボタン表示画像指定」 button.refresh(); //ボタン表示 </script> </body> </html>

コード10

338 338 338

11 リンク

<html> <head> <title>ActiveWidgets Examples</title> <script src="../awidgets/runtime/lib/aw.js"></script> <link href="../awidgets/runtime/styles/xp/aw.css" rel="stylesheet"/> </head> <body> <p id="link1"></p> <script> var link = new AW.UI.Link; //リンクインスタンス指定 link.setId("link1"); //リンク表示タグID指定 link.setControlText("Hyperlink"); //リンクテキスト指定 link.setControlImage("home"); //リンク表示画像指定 link.setControlLink("http://www.google.com"); //リンクへのURL割り当て link.refresh(); //リンク表示 </script> </body> </html>

コード11

Enterprise2.0

340 340 340

script.aculo.us （スクリプタキュラス）

http://script.aculo.us/ Web画面にエフェクト効果を与えるJavaScriptライブラリ・Ajaxコンロトロール・アニメーション・ドラッグ＆ドロップ・DOMユーティリティ・ユニットテスト・MIT License

341 341 341

Appear 出現させる

書式 new Effect.Appear(element, option) element.visualEffect("Appear", option) element : ページ上のエレメント option : 以下のオプションを指定可能【省略可能】 from : 開始値 to : 終了値 duration : エフェクト開始から終了までの時間 fps : フレームレート delay : エフェクト開始までの時間 transition : 処理の種類 Effect.Transitions.linear Effect.Transitions.sinoidal【デフォルト】 Effect.Transitions.reverse Effect.Transitions.flicker Effect.Transitions.wobble Effect.Transitions.pulse Effect.Transitions.none Effect.Transitions.full

エフェクト（Effect）

342 342 342

Appearサンプルボタンクリックで出現させる

343 343 343

BlindDown 内容を上から下に出現させる書式 new Effect.BlindDown(element, option) element.visualEffect("BlindDown", option) element : ページ上のエレメント option : 以下のオプションを指定可能【省略可能】 from : 開始値 to : 終了値 duration : エフェクト開始から終了までの時間 fps : フレームレート delay : エフェクト開始までの時間 transition : 処理の種類 Effect.Transitions.linear Effect.Transitions.sinoidal【デフォルト】 Effect.Transitions.reverse Effect.Transitions.flicker Effect.Transitions.wobble Effect.Transitions.pulse Effect.Transitions.none Effect.Transitions.full

344 344 344

BlidDownサンプル水色ボックス内クリックでブラインドダウン

345 345 345

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <title>BlindDown</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css">  </style> <script type="text/javascript" src="../../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../../lib/scriptaculous.js?load=effects"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ function BlindUp(){ //new Effect.BlindUp("area"); $("area").visualEffect("BlindDown"); } function listeners(){ addListener($("area"), "click", BlindUp, false); } addListener(self, "load", listeners, false); //]]> </script> </head> <body> <h2>BlindDownサンプル</h2> <div id="area">茨城<br/>千葉<br/>埼玉<br/>東京<br/>神奈川<br/>山梨<br/></div> </body> </html>

blindup.htm

346 346 346

BlindUp 内容を下から上に消す

書式 new Effect.BlindUp(element, option) element.visualEffect("BlindUp", option) element : ページ上のエレメント option : 以下のオプションを指定可能【省略可能】 from : 開始値 to : 終了値 duration : エフェクト開始から終了までの時間 fps : フレームレート delay : エフェクト開始までの時間 transition : 処理の種類 Effect.Transitions.linear Effect.Transitions.sinoidal【デフォルト】 Effect.Transitions.reverse Effect.Transitions.flicker Effect.Transitions.wobble Effect.Transitions.pulse Effect.Transitions.none Effect.Transitions.full

347 347 347

BlidUpサンプル水色ボックス内クリックでブラインドアップ

348 348 348

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <title>BlindUp</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css">  </style> <script type="text/javascript" src="../../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../../lib/scriptaculous.js?load=effects"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ function BlindUp(){ //new Effect.BlindUp("area"); $("area").visualEffect("BlindUp"); } function listeners(){ var eSrc = $("area"); addListener(eSrc, "click", BlindUp, false); } addListener(self, "load", listeners, false); //]]> </script> </head> <body> <h2>BlindUpサンプル</h2> <div id="area">茨城<br/>千葉<br/>埼玉<br/>東京<br/>神奈川<br/>山梨<br/></div> </body> </html>

blindup.htm

349 349 349

DropOut 落下させて消す

書式 new Effect.DropOut(element, option) element.visualEffect("DropOut", option) element : ページ上のエレメント option : 以下のオプションを指定可能【省略可能】 from : 開始値 to : 終了値 duration : エフェクト開始から終了までの時間 fps : フレームレート delay : エフェクト開始までの時間 transition : 処理の種類 Effect.Transitions.linear Effect.Transitions.sinoidal【デフォルト】 Effect.Transitions.reverse Effect.Transitions.flicker Effect.Transitions.wobble Effect.Transitions.pulse Effect.Transitions.none Effect.Transitions.full

350 350 350

DropOut 水色ボックス内クリックでドロップアウト

351 351 351

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <title>DropOut</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css">  </style> <script type="text/javascript" src="../../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../lib/scriptaculous.js?load=effects"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ function DropOut(){ $("area").visualEffect("DropOut"); //$("area").visualEffect("DropOut", {transition: Effect.Transitions.linear}); //$("area").visualEffect("DropOut", {transition: Effect.Transitions.reverse}); //$("area").visualEffect("DropOut", {transition: Effect.Transitions.flicker}); //$("area").visualEffect("DropOut", {transition: Effect.Transitions.wobble}); //$("area").visualEffect("DropOut", {transition: Effect.Transitions.pulse}); //$("area").visualEffect("DropOut", {transition: Effect.Transitions.none}); //$("area").visualEffect("DropOut", {transition: Effect.Transitions.full}); } function listeners(){ var eSrc = $("area"); addListener(eSrc, "click", DropOut, false); } addListener(self, "load", listeners, false); //]]> </script>

dropout.htm

352 352 352

Fade フェード（消滅）させる

書式 new Effect.Fade(element, option ) element.visualEffect("Fade", option ) element : ページ上のエレメント option : 以下のオプションを指定可能【省略可能】 from : 開始値 to : 終了値 duration : エフェクト開始から終了までの時間 fps : フレームレート delay : エフェクト開始までの時間 transition : 処理の種類 Effect.Transitions.linear Effect.Transitions.sinoidal【デフォルト】 Effect.Transitions.reverse Effect.Transitions.flicker Effect.Transitions.wobble Effect.Transitions.pulse Effect.Transitions.none Effect.Transitions.full

DropOut 水色ボックス内クリックでフェードアウト

354 354 354

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <title>Fade</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css">  </style> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../lib/scriptaculous.js?load=effects"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ function Fade(){ //new Effect.BlindUp("area"); $("area").visualEffect("Fade", {transition: Effect.Transitions.linear}); } function listeners(){ var eSrc = $("area"); addListener(eSrc, "click", Fade, false); } addListener(self, "load", listeners, false); //]]> </script> </head> <body> <h2>Fadeサンプル</h2> <div id="area">茨城<br/>千葉<br/>埼玉<br/>東京<br/>神奈川<br/>山梨<br/></div> </body> </html>

dropout.htm

355 355 355

Fold 縦、横の順で折り畳んで消す

書式 new Effect.Fold(element, option) element.visualEffect("Fold", option) ] element : ページ上のエレメント option : 以下のオプションを指定可能【省略可能】 from : 開始値 to : 終了値 duration : エフェクト開始から終了までの時間 fps : フレームレート delay : エフェクト開始までの時間 transition : 処理の種類 Effect.Transitions.linear Effect.Transitions.sinoidal【デフォルト】 Effect.Transitions.reverse Effect.Transitions.flicker Effect.Transitions.wobble Effect.Transitions.pulse Effect.Transitions.none Effect.Transitions.full

DropOut 水色ボックス内クリックでホールド

357 357 357

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <title>Fade</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css">  </style> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../lib/scriptaculous.js?load=effects"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ function Fold(){ //new Effect.BlindUp("area"); $("area").visualEffect("Fold", {transition: Effect.Transitions.linear}); } function listeners(){ var eSrc = $("area"); addListener(eSrc, "click", Fold, false); } addListener(self, "load", listeners, false); //]]> </script> </head> <body> <h2>Foldサンプル</h2> <div id="area">茨城<br/>千葉<br/>埼玉<br/>東京<br/>神奈川<br/>山梨<br/></div> </body> </html>

fold.htm

358 358 358

Grow 拡大しながら出現させる

書式 new Effect.Grow(element, option) element.visualEffect("Grow", option) element : ページ上のエレメント option : 以下のオプションを指定可能【省略可能】 from : 開始値 to : 終了値 duration : エフェクト開始から終了までの時間 fps : フレームレート delay : エフェクト開始までの時間 transition : 処理の種類 Effect.Transitions.linear Effect.Transitions.sinoidal【デフォルト】 Effect.Transitions.reverse Effect.Transitions.flicker Effect.Transitions.wobble Effect.Transitions.pulse Effect.Transitions.none Effect.Transitions.full

359 359 359

Growサンプル

360 360 360

grow.htm

361 361 361

Highlight ハイライトさせる

書式 new Effect.Highlight(element, option) element.visualEffect("Highlight", option) element : ページ上のエレメント option : 以下のオプションを指定可能【省略可能】 from : 開始値 to : 終了値 duration : エフェクト開始から終了までの時間 fps : フレームレート delay : エフェクト開始までの時間 transition : 処理の種類 Effect.Transitions.linear Effect.Transitions.sinoidal【デフォルト】 Effect.Transitions.reverse Effect.Transitions.flicker Effect.Transitions.wobble Effect.Transitions.pulse Effect.Transitions.none Effect.Transitions.full

362 362 362

Highlightサンプル

363 363 363

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <title>HighLight</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css">  </style> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../lib/scriptaculous.js?load=effects"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ function HighLight(){ var text = document.createTextNode("Ajax World"); var node = document.getElementsByTagName("div").item(0); node.appendChild(text); node.setAttribute("id","area"); new Effect.Highlight("area", {transition:Effect.Transitions.pulse}); } function listeners(){ addListener($("exe"), "click", HighLight, false); } addListener(self, "load", listeners, false); //]]> </script> </head> <body>

highlight.htm

364 364 364

MoveBy 移動させる

書式 new Effect.MoveBy(element, dy, dx, option) element.visualEffect("MoveBy", dy, dx, option) element : ページ上のエレメント dx : 横方向の移動量（相対） dy : 縦方向の移動量（相対） option : 以下のオプションを指定可能【省略可能】 from : 開始値 to : 終了値 duration : エフェクト開始から終了までの時間 fps : フレームレート delay : エフェクト開始までの時間 transition : 処理の種類 Effect.Transitions.linear Effect.Transitions.sinoidal【デフォルト】 Effect.Transitions.reverse Effect.Transitions.flicker Effect.Transitions.wobble Effect.Transitions.pulse Effect.Transitions.none Effect.Transitions.full

365 365 365

MobeByサンプル

366 366 366

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <title>MoveBy</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css">  </style> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../lib/scriptaculous.js?load=effects"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ function MoveBy(){ new Effect.MoveBy("area", 50, 500 , {transition: Effect.Transitions.pulse} ); //$("area").visualEffect("MoveBy", 50, 200); } function listeners(){ addListener($("exe"), "click", MoveBy, false); } addListener(self, "load", listeners, false); //]]> </script> </head> <body> <h2 id="exe">MoveByサンプル</h2> <div id="area">茨城<br/>千葉<br/>埼玉<br/>東京<br/>神奈川<br/>山梨<br/></div> </body> </html>

moveby.htm

367 367 367

Opacity 不透明度を変化させる

書式 new Effect.Opacity(element, option) element.visualEffect("Opacity", option) element : ページ上のエレメント option : 以下のオプションを指定可能【省略可能】 from : 開始値 to : 終了値 duration : エフェクト開始から終了までの時間 fps : フレームレート delay : エフェクト開始までの時間 transition : 処理の種類 Effect.Transitions.linear Effect.Transitions.sinoidal【デフォルト】 Effect.Transitions.reverse Effect.Transitions.flicker Effect.Transitions.wobble Effect.Transitions.pulse Effect.Transitions.none Effect.Transitions.full

368 368 368

Opacityサンプル

369 369 369

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <title>Opacity</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css">  </style> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../lib/scriptaculous.js?load=effects"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ function Opacity(){ new Effect.Opacity("area", {from: 0.1 , to: 0.7}); //$("area").visualEffect("Opacity", 0.1, 0.7); } function listeners(){ addListener($("exe"), "click", Opacity, false); } addListener(self, "load", listeners, false); //]]> </script> </head> <body> <h2 id="exe">Opacityサンプル</h2> <div id="area">茨城<br/>千葉<br/>埼玉<br/>東京<br/>神奈川<br/>山梨<br/></div> </body> </html>

opacity.htm

370 370 370

Puff 拡大して消滅させる

書式 new Effect.Puff(element, option) element.visualEffect("Puff", option) element : ページ上のエレメント option : 以下のオプションを指定可能【省略可能】 from : 開始値 to : 終了値 duration : エフェクト開始から終了までの時間 fps : フレームレート delay : エフェクト開始までの時間 transition : 処理の種類 Effect.Transitions.linear Effect.Transitions.sinoidal【デフォルト】 Effect.Transitions.reverse Effect.Transitions.flicker Effect.Transitions.wobble Effect.Transitions.pulse Effect.Transitions.none Effect.Transitions.full

371 371 371

Puffサンプル

372 372 372

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <title>Puff</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css">  </style> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../lib/scriptaculous.js?load=effects"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ function Puff(){ //new Effect.Puff("area"); $("area").visualEffect("Puff"); } function listeners(){ var eSrc = $("exe"); addListener($("exe"), "click", Puff, false); } addListener(self, "load", listeners, false); //]]> </script> </head> <body> <h2 id="exe">Puffサンプル</h2> <div id="area">茨城<br/>千葉<br/>埼玉<br/>東京<br/>神奈川<br/>山梨<br/></div> </body> </html>

puff.htm

373 373 373

Pulsate 点滅させる書式 new Effect.Pulsate(element, option) element.visualEffect("Pulsate", option) element : ページ上のエレメント option : 以下のオプションを指定可能【省略可能】 from : 開始値 to : 終了値 duration : エフェクト開始から終了までの時間 fps : フレームレート delay : エフェクト開始までの時間 transition : 処理の種類 Effect.Transitions.linear Effect.Transitions.sinoidal【デフォルト】 Effect.Transitions.reverse Effect.Transitions.flicker Effect.Transitions.wobble Effect.Transitions.pulse Effect.Transitions.none Effect.Transitions.full

374 374 374

Pulsateサンプル

375 375 375

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <title>Pulsate</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css">  </style> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../lib/scriptaculous.js?load=effects"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ function Pulsate(){ new Effect.Pulsate("area"); //$("area").visualEffect("Pulsate"); } function listeners(){ addListener($("exe"), "click", Pulsate, false); } addListener(self, "load", listeners, false); //]]> </script> </head> <body> <h2 id="exe">Pulsateサンプル</h2> <div id="area">茨城<br/>千葉<br/>埼玉<br/>東京<br/>神奈川<br/>山梨<br/></div> </body> </html>

pulsate.htm

376 376 376

Scale 指定サイズに拡大縮小する（スケール）

書式 new Effect.Scale(element, scale, option) element.visualEffect("Scale", option) element : ページ上のエレメント scale : 倍率（100が等倍） option : 以下のオプションを指定可能【省略可能】 from : 開始値 to : 終了値 duration : エフェクト開始から終了までの時間 fps : フレームレート delay : エフェクト開始までの時間 transition : 処理の種類 Effect.Transitions.linear Effect.Transitions.sinoidal【デフォルト】 Effect.Transitions.reverse Effect.Transitions.flicker Effect.Transitions.wobble Effect.Transitions.pulse Effect.Transitions.none Effect.Transitions.full

377 377 377

Scaleサンプル

378 378 378

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <title>Scale</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../lib/scriptaculous.js?load=effects"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ function Scale(){ new Effect.Scale("area", 500); //$("area").visualEffect("Scale"); } function listeners(){ addListener($("exe"), "click", Scale, false); } addListener(self, "load", listeners, false); //]]> </script> </head> <body> <h2 id="exe">Scaleサンプル</h2> <img id="area" src="fuji.jpg" width="150" height="110"/> </body> </html>

scale.htm

379 379 379

ScrooTo 指定エレメントまでスクロールさせる書式 new Effect.ScrollTo(element, option) element.visualEffect("ScrollTo", option) element : ページ上のエレメント option : 以下のオプションを指定可能【省略可能】 from : 開始値 to : 終了値 duration : エフェクト開始から終了までの時間 fps : フレームレート delay : エフェクト開始までの時間 transition : 処理の種類 Effect.Transitions.linear Effect.Transitions.sinoidal【デフォルト】 Effect.Transitions.reverse Effect.Transitions.flicker Effect.Transitions.wobble Effect.Transitions.pulse Effect.Transitions.none Effect.Transitions.full

380 380 380

ScrooToサンプル

381 381 381

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <title>ScrollTo</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../lib/scriptaculous.js?load=effects"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ function ScrollTo(e){ if(getid(e)=="area1") area="area2";else area="area1"; new Effect.ScrollTo(area); } function listeners(){ addListener($("exe"), "click", ScrollTo, false); } addListener(self, "load", listeners, false); //]]> </script> </head> <body> <h2>ScrollToサンプル</h2> <div id="exe"> <h3 id="area1">山桜へ</h3> <img src="fuji.jpg" width="600" height="440"/> <h3 id="area2">富士へ</h3> <img src="sakura.jpg" width="600" height="440"/> </div> </body> </html>

scrollto.htm

382 382 382

Shake 左右に小刻みに揺らす（シェイク）書式 new Effect.Shake(element, option) element.visualEffect("Shake", option) element : ページ上のエレメント option : 以下のオプションを指定可能【省略可能】 from : 開始値 to : 終了値 duration : エフェクト開始から終了までの時間 fps : フレームレート delay : エフェクト開始までの時間 transition : 処理の種類 Effect.Transitions.linear Effect.Transitions.sinoidal【デフォルト】 Effect.Transitions.reverse Effect.Transitions.flicker Effect.Transitions.wobble Effect.Transitions.pulse Effect.Transitions.none Effect.Transitions.full

383 383 383

Shakeサンプル

384 384 384

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <title>Shake</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../lib/scriptaculous.js?load=effects"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ function Shake(){ new Effect.Shake("area", {duration: 50}); //$("area").visualEffect("Shake"); } function listeners(){ var eSrc = $("exe"); addListener($("exe"), "click", Shake, false); } addListener(self, "load", listeners, false); //]]> </script> </head> <body> <h2 id="exe">Shakeサンプル</h2> <img id="area" src="fuji.jpg" width="450" height="330"/> </body> </html>

shake.htm

385 385 385

Shrink 縮小させる書式 new Effect.Shrink(element, option) element.visualEffect("Shrink", option) element : ページ上のエレメント option : 以下のオプションを指定可能【省略可能】 from : 開始値 to : 終了値 duration : エフェクト開始から終了までの時間 fps : フレームレート delay : エフェクト開始までの時間 transition : 処理の種類 Effect.Transitions.linear Effect.Transitions.sinoidal【デフォルト】 Effect.Transitions.reverse Effect.Transitions.flicker Effect.Transitions.wobble Effect.Transitions.pulse Effect.Transitions.none Effect.Transitions.full

386 386 386

Shrinkサンプル

387 387 387

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <title>Shrink</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../lib/scriptaculous.js?load=effects"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ function Shrink(){ new Effect.Shrink("area"); //$("area").visualEffect("Shrink"); } function listeners(){ addListener($("exe"), "click", Shrink, false); } addListener(self, "load", listeners, false); //]]> </script> </head> <body> <h2 id="exe">Shrinkサンプル</h2> <img id="area" src="fuji.jpg" width="750" height="550"/></body> </html>

shrink.htm

388 388 388

SlideDwon 内容を上から下にスライド表示する書式 new Effect.SlideDown(element, option) element.visualEffect("SlideDown", option) element : ページ上のエレメント option : 以下のオプションを指定可能【省略可能】 from : 開始値 to : 終了値 duration : エフェクト開始から終了までの時間 fps : フレームレート delay : エフェクト開始までの時間 transition : 処理の種類 Effect.Transitions.linear Effect.Transitions.sinoidal【デフォルト】 Effect.Transitions.reverse Effect.Transitions.flicker Effect.Transitions.wobble Effect.Transitions.pulse Effect.Transitions.none Effect.Transitions.full

389 389 389

SlideDownサンプル

390 390 390

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <title>SlideDown</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css">  </style> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../lib/scriptaculous.js?load=effects"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ function SlideDown(){ new Effect.SlideDown("area"); //$("area").visualEffect("SlideDown"); } function listeners(){ addListener($("exe"), "click", SlideDown, false); } addListener(self, "load", listeners, false); //]]> </script> </head> <body> <h2 id="exe">SlideDownサンプル</h2> <div id="area">茨城<br/>千葉<br/>埼玉<br/>東京<br/>神奈川<br/>山梨<br/></div> </body> </html>

slidedown.htm

391 391 391

SlideUp 内容を下から上に消す書式 new Effect.SlideUp(element, option) element.visualEffect("SlideUp", option) element : ページ上のエレメント option : 以下のオプションを指定可能【省略可能】 from : 開始値 to : 終了値 duration : エフェクト開始から終了までの時間 fps : フレームレート delay : エフェクト開始までの時間 transition : 処理の種類 Effect.Transitions.linear Effect.Transitions.sinoidal【デフォルト】 Effect.Transitions.reverse Effect.Transitions.flicker Effect.Transitions.wobble Effect.Transitions.pulse Effect.Transitions.none Effect.Transitions.full

392 392 392

SlideUpサンプル

393 393 393

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <title>SlideUp</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css">  </style> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../lib/scriptaculous.js?load=effects"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ function SlideUp(){ new Effect.SlideUp("area"); //$("area").visualEffect("SlideUp"); } function listeners(){ addListener($("exe"), "click", SlideUp, false); } addListener(self, "load", listeners, false); //]]> </script> </head> <body> <h2 id="exe">SlideUpサンプル</h2> <div id="area">茨城<br/>千葉<br/>埼玉<br/>東京<br/>神奈川<br/>山梨<br/></div> </body> </html>

slidedown.htm

394 394 394

Squish 縮小して消滅させる書式 new Effect.Squish(element, option) element.visualEffect("Squish", option) element : ページ上のエレメント option : 以下のオプションを指定可能【省略可能】 from : 開始値 to : 終了値 duration : エフェクト開始から終了までの時間 fps : フレームレート delay : エフェクト開始までの時間 transition : 処理の種類 Effect.Transitions.linear Effect.Transitions.sinoidal【デフォルト】 Effect.Transitions.reverse Effect.Transitions.flicker Effect.Transitions.wobble Effect.Transitions.pulse Effect.Transitions.none Effect.Transitions.full

395 395 395

Squishサンプル

396 396 396

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <title>Squish</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css">  </style> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../lib/scriptaculous.js?load=effects"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ function Squish(){ new Effect.Squish("area"); //$("area").visualEffect("Squish"); } function listeners(){ addListener($("exe"), "click", Squish, false); } addListener(self, "load", listeners, false); //]]> </script> </head> <body> <h2 id="exe">Squishサンプル</h2> <div id="area">茨城<br/>千葉<br/>埼玉<br/>東京<br/>神奈川<br/>山梨<br/></div> </body>

squish.htm

397 397 397

Switchoff 外側から消滅させる書式 new Effect.SwitchOff(element, option) element.visualEffect("SwitchOff", option) element : ページ上のエレメント option : 以下のオプションを指定可能【省略可能】 from : 開始値 to : 終了値 duration : エフェクト開始から終了までの時間 fps : フレームレート delay : エフェクト開始までの時間 transition : 処理の種類 Effect.Transitions.linear Effect.Transitions.sinoidal【デフォルト】 Effect.Transitions.reverse Effect.Transitions.flicker Effect.Transitions.wobble Effect.Transitions.pulse Effect.Transitions.none Effect.Transitions.full

398 398 398

SwitchOffサンプル

399 399 399

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <title>SwitchOff</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css">  </style> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../lib/scriptaculous.js?load=effects"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ function SwitchOff(){ new Effect.SwitchOff("area"); //$("area").visualEffect("SwitchOff"); } function listeners(){ addListener($("exe"), "click", SwitchOff, false); } addListener(self, "load", listeners, false); //]]> </script> </head> <body> <h2 id="exe">SwitchOffサンプル</h2> <div id="area">茨城<br/>千葉<br/>埼玉<br/>東京<br/>神奈川<br/>山梨<br/></div> </body> </html>

switchoff.htm

400 400 400

[複合エフェクトの実行]

Parallel 複合エフェクトを実行する

書式 new Effect.Parallel(effect, option) element.visualEffect("Parallel", option) element : ページ上のエレメント option : 以下のオプションを指定可能【省略可能】 from : 開始値 to : 終了値 duration : エフェクト開始から終了までの時間 fps : フレームレート delay : エフェクト開始までの時間 transition : 処理の種類 Effect.Transitions.linear Effect.Transitions.sinoidal【デフォルト】 Effect.Transitions.reverse Effect.Transitions.flicker Effect.Transitions.wobble Effect.Transitions.pulse Effect.Transitions.none Effect.Transitions.full

401 401 401

Parallelサンプル１

402 402 402

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <title>Parallel</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css">  </style> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../lib/scriptaculous.js?load=effects"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ function Parallel(){ var area = $("area"); new Effect.Parallel([ new Effect.MoveBy("area", 50, 400), new Effect.Scale("area", 0.3), new Effect.Highlight("area") ]); } function listeners(){ addListener($("exe"), "click", Parallel, false); } addListener(self, "load", listeners, false); //]]> </script> </head> <body> <h2 id="exe">Parallelサンプル</h2> <div id="area">茨城<br/>千葉<br/>埼玉<br/>東京<br/>神奈川<br/>山梨<br/></div> </body> </html>

parallel1.htm

Parallelサンプル２

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <title>Parallel</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css">  </style> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../lib/scriptaculous.js?load=effects"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ function Parallel(){ var area = $("area"); new Effect.Parallel([ new Effect.MoveBy("area", 50, 100 , {transition: Effect.Transitions.pulse}), new Effect.Scale("area", 500) //new Effect.BlindUp("area") ]); } function listeners(){ addListener($("exe"), "click", Parallel, false); } addListener(self, "load", listeners, false); //]]> </script> </head> <body> <h2 id="exe">Parallelサンプル</h2> <img id="area" src="fuji.jpg" width="100" height="65" /> </body> </html>

parallel2.htm

405 405 405

ドラッグドロップ

（DragDrop）

406 406 406

Draggable ドラッグ可能なエレメントを指定する書式 dragObj = new Draggable(element, option) dragObj : ドラッグオブジェクト element : ページ上のエレメント option : 以下のオプションを指定可能【省略可能】 handle : ハンドル（エレメント名を指定） revert : ドラッグ終了後に元の位置に戻す（true : 戻す、false : 戻さない） snap : スナップ処理 zIndex : Z座標（初期値は10000） constraint : 移動方向制限（horizontal : 水平のみ、vertical : 垂直のみ） ghosting : ドラッグ前のエレメントを表示したままにするかどうか（true : する、false : しない） starteffect : ドラッグ開始時のエフェクト reverteffect : 復帰時のエフェクト endeffect : ドラッグ終了時のエフェクト

407 407 407

Draggableサンプル

408 408 408

<head> <title>script.aculo.us ドラッガブル </title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css">  </style> <script type="text/javascript" src="../../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../../lib/scriptaculous.js"></script> <script type="text/javascript" src="../../lib/unittest.js"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ function func1(){ new Draggable('dragbox',{scroll:window}); } addListener(self, "load", func1, false); //]]> </script> </head> <body> <h2>script.aculo.us ドラッガブル</h2> <div id="dragbox" class="box1"> 栃木、群馬、茨城,<br/> 千葉、埼玉、東京、<br/> 神奈川、山梨 </div> </body> </html>

draggable.htm

409 409 409

destory ドラッグオブジェクトを破棄(固定)する

書式 draggableObj.destroy() draggableObj : ドラッガブルオブジェクト

410 410 410

destoryサンプル

411 411 411

destory.htm

412 412 412

return ドラッグオブジェクトを元の位置に戻す

413 413 413

return.htm

414 414 414

Droppable.add ドロップ可能領域を指定する書式 Droppables.add(element, option) element : ドロップ領域を示すエレメント option : オプション【省略可能】 accept : ドロップ可能なCSSクラス名 containt : 並べ替え可能を示すエレメント／配列 hoverclass : ドロップ中に適用するスタイルシートクラス overlap : 並べ替え時に使用（horizontalまたはvertical） greedy : 他のドロップ領域を検索しない onHover : ドロップ中の処理 onDrop : ドロップされた時の処理

415 415 415

Droppableサンプル

416 416 416

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <title>script.aculo.us ドラッグ＆ドロップ</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css">  </style> <script type="text/javascript" src="../../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../../lib/scriptaculous.js"></script> <script type="text/javascript" src="../../lib/unittest.js"></script>

droppable.htm 1/2

417 417 417

droppable.htm 1/2

418 418 418

Droppableサンプル2

419 419 419

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <title>script.aculo.us ドラッグ＆ドロップ</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css">  </style> <script type="text/javascript" src="../../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../../lib/scriptaculous.js"></script> <script type="text/javascript" src="../../lib/unittest.js"></script>

droppable 2.htm 1/2

420 420 420

droppable 2.htm 2/2

421 421 421

removeサンプル

Droppable.remove ドロップ可能領域を解除する書式 Droppables.remove(element)

422 422 422

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <title>script.aculo.us ドラッグ＆ドロップ</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css">  </style> <script type="text/javascript" src="../../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../../lib/scriptaculous.js"></script> <script type="text/javascript" src="../../lib/unittest.js"></script> <script type="text/javascript" charset="utf-8">

remove.htm 1/2

423 423 423

remove.htm 2/2

買物籠と購入合計金額表示追加

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <title>script.aculo.us ドラッグ＆ドロップ</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css">  </style>

droppable3.htm (1/3)

addListener(self, "load", func1, false); //]]> </script> </head> <body> <h2>script.aculo.us ドロップエリア設定</h2> <div id="book1" class="out"> <img src="../img/ajaxbook1.jpg" width="130" height="130"/> </div> <div id="book2" class="out"> <img src="../img/ajaxbook2.jpg" width="130" height="130"/> </div> <div id="book3" class="out"> <img src="../img/csbook1.jpg" width="130" height="130"/> </div> <div id="amount1">購入合計金（円）:</div><div id="amount2"></div> <div id="basket">買いものカゴ：</div> </body> </html>

428 428 428

スライダデモ

スライダ（Slider）

429 429 429

Control.Slider スライダーコントロールを設定する書式 sliderObj = new Control.Slider(handle, track, options) sliderObj : スライダーオブジェクト handle : スライダーハンドル（可動部分） track : スライダートラック（可動範囲部分） options : オプション【省略可能】 axis : スライダー可動方向 increment : 1ピクセルに対して加算する値 maximum : 最大値 minimum : 最小値 range : スライダー値の範囲 alignX : 横(右)の余白 alignY : 縦(下)の余白 sliderValue : 初期値 disabled : スライダーのロック handleImage : ハンドル画像 handleDisabled : 無効の場合のハンドル画像 values : スライダーが取る値（配列で指定）

430 430 430

sliderObj = new Control.Slider(handle, track, options) ・最初のパラメータにはスライダーのハンドル（ドラッグして動かす部分）を指定。・2番目のパラメータにはトラック（スライダーの可動範囲）のエレメントを指定。・3番目のオプションでスライダーの各種設定を行う。 ※スライダー値の範囲を指定するにはrange:$R(0,100)のように指定。

431 431 431

Sliderサンプル標準水平スライダ

432 432 432

slider1.htm

433 433 433

Sliderサンプル標準垂直スライダ

434 434 434

slider2.htm

435 435 435

Sliderサンプル逆垂直スライダ

436 436 436

slider3.htm

437 437 437

Sliderサンプル断続値スライダ

438 438 438

slider4.htm

439 439 439

Sliderサンプル自然数連続値スライダ

440 440 440

slider5.htm

441 441 441

Sortable エレメントのソート処理を指定する

書式 Sortable.create(element, option) element : ページ上のエレメント option : 以下のオプションを指定可能【省略可能】 tag : ソート対象タグ名 only : 指定されたスタイルシートが適用された項目のみソート対象 overlap : 方向（horizontalまたはvertical） constraint : 移動方向制限（horizontal : 水平のみ、vertical : 垂直のみ） containment : handle : ハンドル（エレメント名を指定） hoverclass : 重なった場合のスタイルシートクラス名 ghosting : ドラッグ前のエレメントを表示したままにするかどうか（true : する、false : しない） dropOnEmpty : scroll : scrollSensitivity : scrollSpeed : スクロール速度 tree : 子ノードもソート対象にするか（true : する、false : しない） treeTag : ソート対象を内包するコンテナのタグ名 onChange : ソートされ順序が変更された時の処理 onUpdate : ソートされ順序が変更された後の処理

ソート（Sortable）

442 442 442

Sortableサンプル-1 :FireBugでのDOMツリー変化確認

444 444 444

sort1.htm

445 445 445

446 446 446

<<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>script.aculo.us ソータブル</title> <style type="text/css" media="screen">  </style> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../lib/scriptaculous.js"></script> <script type="text/javascript" src="../lib/unittest.js"></script>

sort2.htm 1/2

447 447 447

soer2.htm 2/2

448 448 448

449 449 449

sort3.htm

ソート&ドロップ (dragsort1.htm)

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <title>script.aculo.us ドラッグ＆ドロップ</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css">  </style>

dragsort1.htm (1/3)

dragsort1.htm (2/3)

</head> <body> <h2>ソート&ドロップ</h2> <ul id="sortList"> <li class="out" id="box1">項目1</li> <li class="out" id="box2">項目2</li> <li class="out" id="box3">項目3</li> <li class="out" id="box4">項目4</li> <li class="out" id="box5">項目5</li> <li class="out" id="box6">項目6</li> </ul> <div id="dropBox">ドロップゾーン：</div> </body> </html>

dragsort1.htm (3/3)

454 454 454

Ajax.InPlaceCollectionEditor

処理を編集可能なテキストを設定する（セレクトメニューで選択）書式 editObj = new Ajax.InPlaceCollectionEditor(elementName, url, options) editObj : 編集可能テキストオブジェクト element : フォーム上のエレメント url : CGI等のURL options : オプション【省略可能】 collection : メニューに表示する項目リスト（配列）・最初のパラメータにはフォーム上のエレメントを指定。・2番目のパラメータはURLでデータを（DB等に）保存し、結果を返すための CGIプログラム等を指定。・3番目のパラメータはオプションで各種指定を行う。

インプレースエディタ（InPlaceEditor）

455 455 455

InPlaceCollectionEditor-1

456 456 456

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>script.aculo.us インプレースエディタ</title> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../lib/scriptaculous.js"></script> <script type="text/javascript" src="../lib/unittest.js"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ function edit(){ new Ajax.InPlaceEditor("value", "edit1.php",{ okText : "保存", cancelText : "キャンセル", savingText : "保存中です...", rows:1, cols:50, onFailure : function(){ alert("保存中にエラー発生"); } }); } addListener(self, "load", edit, false); //]]> </script> </head> <body> <h2>script.aculou エディタ機能</h2> <div id="value">Ajax/Web2.0ワールドの開催日は9月12日です。</div> </body> </html>

editor1.htm

非同期通信との組み合わせ

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8" lang="utf-8"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>script.aculo.us インプレースエディタ</title> <script type="text/javascript" src="../../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript" src="../lib/scriptaculous.js"></script> <script type="text/javascript" src="../lib/unittest.js"></script> <script type="text/javascript" charset="utf-8"> : </script> </head> <body> <h2>script.aculo.us エディタ機能</h2> <div id="value"></div> </body> </html>

editor1.htm (1/2)

//<![CDATA[ function edit(){ $("value").innerHTML = getsyn("init1.php"); new Ajax.InPlaceEditor("value", "edit1.php",{ okText : "保存", cancelText : "キャンセル", savingText : "保存中です...", rows:1, cols:50, onFailure : function(){ alert("保存中にエラー発生"); } }); } addListener(self, "load", edit, false); //]]>

editor1.htm (1/2)

<?php $server = "localhost"; $dbname = "ajax_ec"; $user = "mysql"; $passwd = "callback"; $sv = mysql_connect($server, $user, $passwd) or die("Connection error1"); $db = mysql_select_db($dbname) or die("Connection error2"); $sql = "select * from edit1 order by date desc limit 0,1"; $rows = mysql_query($sql, $sv) or die("mysql query Error"); $row = mysql_fetch_array($rows, MYSQL_ASSOC); if($row > 0){ echo $row["value"]; }else{ echo "NO"; } ?>

init1.php

<?php $value = $_POST["value"]; $server = "localhost"; $dbname = "ajax_ec"; $user = "mysql"; $passwd = "callback"; $sv = mysql_connect($server, $user, $passwd) or die("Connection error1"); $db = mysql_select_db($dbname) or die("Connection error2"); $date = date("Y-n-d"); $sql = "insert into edit1 values('$value', '$date')"; if($rows = mysql_query($sql, $sv)){ echo "編集成功: ".$value; }else{ echo "編集失敗: ".$value; } ?>

edit1.php

461 461 461

InPlaceCollectionEditorサンプル-2

462 462 462

editor2.htm

463 463 463

InPlaceCollectionEditorサンプル-3

464 464 464

editor3.htm

Ajax 応用

Documents

WebLogic Serverの運用管理：応用編

第31 回「センサ・マイクロマシンと応用システム」シンポジウ … · 第31 回「センサ・マイクロマシンと応用システム」シンポジウムプログラムスケジュール

131114 imi応用lg

Common lisp最適化応用

DICOM の基礎と応用

Ajax 模組 timer 用法

Random Forestsとその応用

HITACHI DLP(R)プロジェクター LP-GU4001J 取扱説明書【応用編 … · 2 - 1 応用編取扱説明書 DLP プロジェクター LP-GU4001J （形名： LP-GU4001) 【応用編】

Manual de ajax las entrañas de ajax

ディープラーニングチュートリアル応用編

数理応用 › ~archives › Download_files › suuri...「数理応用」と工業, 理科との関連「数理応用」と工業(応用化学系, 情報系, 機械系, 電気・電子系,

Ajax api（flash地图展现）用户手册—企业版—v2.3.4

GENERAL CATALOGUE - tokaidenpa.co.jp · CATVCATVCATV対応対応対応ビル対応ビルビル用増幅器ビル用増幅器双方向ﾋﾞﾙ用 tpb-3577et

応用プログラミング第 2 回

2007 年度第Ⅰ期【未踏本体】「スーパークリエータ」 · ライアント、グリッドコンピューティング、Ajax 技術などを応用して開発し、Shared

章符号理論の応用章符号理論の応用 ... など

無障礙、好用、 AJAX

ゲームプログラミング - 応用編 1 - 20150629

Web 2.0 à la Microsoft - W3L€¦ · ASP.NET AJAX 1.0 ASP.NET 2.0 AJAX Erweiterung (Server) AJAX Client Script Library (Client) ASP.NET AJAX Futures Erweiterungen der ASP.NET AJAX

PLEASE READ (hidden slide)download.microsoft.com/download/2/6/6/266a5665-2cfe-410e...応のアプリケーション開発を実現 2007/01 ASP.NET AJAX 1.0 AJAX 対応Web ブラウザ