Ajax 応用
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,351
On Slideshare
4,351
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
8
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. AjaxによるWebアプリケーション開発講座 [応用コース] (有)サイバースペース CyberSpace Technology Holdings http://www.at21.net/ 清野 克行 1
  • 2. Ajax実践編 Ajaxライブラリ 1.ActiveWidgets 簡単なサンプルAjax要素技術の応用 実習-11.テーブルの参照・登録・更新・削除 タブコントロール イベントの伝播、DOMノード操作、DB登録 ツリーコントロール2.部品構成(任意の構成)の一括表示 コンボボックス 再帰呼出しでの非同期通信 演習-1 GET/同期、prototype.jsの制限 グリッドコントロール3.Ajaxでのコールバック処理 実習-2 タイマ-での擬似コールバック 演習-2 Ajax コールバック例 (777マッチ) 演習-3 受注情報登録とコールバック表示 2.DWR (Direct Web Remoting) DWRの特徴 DWRサンプル 実習-3 DWRプログラミング 演習-4 演習-5 3.Plotr 実習 4.script.aculo.us 演習-6 5.Yahoo! UI Library 2 演習-7
  • 3. Ajax要素技術 概論 3
  • 4. Ajaxの始まりAjax(Asynchronous JavaScript + XML)=A New Approach to Web Applications2005年2月18日 adaptive pathの Jesse James Garrett のエッセイに初登場
  • 5. 5
  • 6. AjaxモデルでのWebシステム (SPI=Single Page Interface) Webブラウザ データアクセス プレゼンテーション DB GET/POSTWeb UI テキスト ビジネスロジック XML Ajaxエンジン XML データストア Webクライアント CGI系プログラム ユーザPC サーバサイド
  • 7. Ajaxエンジンの機能 Ajaxエンジン ① イベント処理 Web GUI サーバ ② サーバ通信 ・テキストデータ ・XMLデータXHTML+CSS ③ UI表示・XHTML 画面構成・CSS 表示制御 ④ 表示制御 ⑤ 演算処理 JavaScript
  • 8. Ajax初めてのプログラム - Ajaxサンプルプログラム1従業員番号から氏名表示操作手順]1.従業員番号入力 ↓2.カーソル移動 ↓3.従業員氏名表示
  • 9. Ajaxでの通信方式(GET/POST;非同期/同期)GET/非同期での受信処理<script type="text/javascript" src=”../funcs.js"></script><script type="text/javascript">//<![CDATA[function getEmpName(){ var emp_no = document.getElementById("emp_no").value; var httpObj = getHttpObject(); httpObj.open(“get", "sample1.php?emp_no=" + emp_no); httpObj.send(null); httpObj.onreadystatechange = function(){ if(httpObj.readyState == 4){ if(httpObj.status == 200){ var emp_name = httpObj.responseText; document.getElementById("emp_name").value = emp_name; } } }}//]]></script>
  • 10. GET/非同期-関数名指定での受信処理<script type="text/javascript">//<![CDATA[var httpObj;function getEmpName(){ var emp_no = document.getElementById("emp_no").value; httpObj = getHttpObject(); httpObj.open("get", "sample1.php?emp_no=" + emp_no); httpObj.send(null); httpObj.onreadystatechange = getEmpNameRv;}function getEmpNameRv(){ if(httpObj.readyState == 4){ if(httpObj.status == 200){ var emp_name = httpObj.responseText; document.getElementById("emp_name").value = emp_name; } }}//]]></script>
  • 11. GET/同期<script type="text/javascript">//<![CDATA[function getEmpName(){ var emp_no = document.getElementById("emp_no").value; var httpObj = getHttpObject(); httpObj.open("get", "sample1.php?emp_no=" + emp_no, false); httpObj.send(null); document.getElementById("emp_name").value = httpObj.responseText;;}//]]></script>
  • 12. POST/非同期<script type="text/javascript">//<![CDATA[function getEmpName(){ var emp_no = document.getElementById("emp_no").value; var httpObj = getHttpObject(); httpObj.open("post", "sample1p.php", true); httpObj.setRequestHeader(Content-Type, application/x-www-form-urlencoded); httpObj.send("emp_no="+emp_no); httpObj.onreadystatechange = function(){ if(httpObj.readyState == 4){ if(httpObj.status == 200){ var emp_name = httpObj.responseText; document.getElementById("emp_name").value = emp_name; } } }}//]]></script>
  • 13. POST/同期<script type="text/javascript">//<![CDATA[function getEmpName(){ var emp_no = document.getElementById("emp_no").value; var httpObj = getHttpObject(); httpObj.open("POST", "sample1p.php", false); httpObj.setRequestHeader(Content-Type, application/x-www-form-urlencoded); httpObj.send("emp_no="+emp_no); var emp_name = httpObj.responseText; document.getElementById("emp_name").value = emp_name;}//]]></script>
  • 14. サーバからの受信データがテキスト並びの場合サーバからの受信データがテキスト並びの場合、受信データはsplitメソッドで配列にセットし、htmlタグと組合せ、表示用タグ構成を作成・出力。// JavaScriptvar 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>
  • 15. データベース検索結果の表示 (複数レコード)・レコード単位で配列にセットし (rows[i])・各レコードのアイテム単位で表示 をタグ作成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タグ構成
  • 16. prototype.js http://www.prototypejs.org・Ajaxフレームワーク・JavaScript言語機能強化・メソッド名ショートカット・DOM操作機能の拡張・クロスブラウザ対応・ MIT License MIT License※MIT License・このソフトウェアを誰でも無償で無制限に扱うことができる。但し、著作権表示および本許 諾表示を、ソフトウェアのすべての複製または重要な部分に記載しなければならない。・作者または著作権者は、ソフトウェアに関してなんら責任を負わない。
  • 17. prototype.jsでの通信revClass1.js(prototype.js:Ajax.Request)//<![CDATA[function revClass1(){ var set = "class1_code=" + $("class1_code").value; new Ajax.Request(revClass1.php, {method:get, onComplete:out, parameters:set});}function out(get){ var row = get.responseText.split("<i>"); $("status", "class1_name", "class1_desc", "class1_date").each(function(obj){ obj.innerHTML = row.shift(); });}function listeners(){ addListener($("rev"), "click", revClass1, false);}addListener(window, "load", listeners, false);//]]>
  • 18. addClass1.js(prototype: Ajax.Updater) ※出力用の関数指定なし //<![CDATA[ function addClass1(){ new Ajax.Updater({success:status,failure:status}, addClass1.php, {method:post, postBody:Form.serialize("items")}); } function setListeners(){ addListener($("add"), "click", addClass1, false); } addListener(self, "load", setListeners, false); //]]> Ajax.RequestとAjax.Updaterの使い分け ・Ajax.Request 受信データのプログラム処理を想定 ・Ajax.Updater 受信データの直接表示を想定(container)
  • 19. Ajaxエンジンの機能 Ajaxエンジン ① イベント処理 Web GUI サーバ ② サーバ通信 ・テキストデータ ・XMLデータXHTML+CSS ③ UI表示・XHTML 画面構成・CSS 表示制御 ④ 表示制御 ⑤ 演算処理 JavaScript
  • 20. DOMイベントモデル ・ターゲット イベント発生 ・オブザーバ イベントキャッチ ルート document ・バブリングフェーズ イベントの上位伝播キャプチャフェーズ table ・キャプチャフェーズ イベントの下位伝播 tbody オブザーバ バブリングフェース イベントキャッチ tr td ターゲット イベント発生
  • 21. イベントオブジェクトイベントオブジェクトからイベントに関する様ざまな情報を所得可能・キー入力、マウスクリックでのイベント発生ノード識別・キー入力イベントでの入力キー識別(キーコード値)・マウスクリックイベントでのマウスボタン(左、右、中央)識別・マウスポインタ(カーソル)移動でのポインタ位置検出 function revClass1(e) { 処理内容 } function setListeners() { var observer = document.getElementById(“show"); addListener(observer, "click", revClass1); } setListener(window, "load", setListeners);
  • 22. イベントターゲットの検出: getid(e)イベントターゲット(イベント発生ノード) → idタグで識別IE系ブラウザ e.srcElementIE以外のブラウザ e.target getid関数(funcs.js) function getid(e){ イベント発生ノードを var tgt; 返す。 if(!e) var e = window.event; if(e.srcElement){ // Microsoft tgt = e.srcElement.id; if(tgt.nodeType == 3) tgt = tgt.rapentNode; }else if(e.target){ // W3C/Netscape tgt = e.target.id; }else{ tgt = false; } return tgt; }
  • 23. 入力キーコードの検出: getkcode(e)IE系および新しいFireFox e. keyCode古いFireFox e.which getkcode関数(funcs.js) キー入力イベントで 入力キーコード値を返す function getkcode(e){ if(!e) var e = window.event; if(e.keyCode){ return e.keyCode; }else if(e.which){ return e.which; }else{ return false; } }
  • 24. クリックマウスボタン(左右)の検知FireFox関数:e.which•Left button: 1•Middle button: *•Right button: 3MS(IE)関数:e.button•Left button: 1•Middle button: *•Right button: 2
  • 25. function mbutton(e){クリックマウスボタンの検出 var click; mbutton(e) if(!e) var e = window.event; if (e.which){・左ボタンクリック → 戻り値(“L”) if(e.which == 1){ click = "L";・右ボタンクリック → 戻り値(“R”) }else if(e.which == 3){ click = "R"; } }else if (e.button){ if(e.button == 1){ click = "L"; }else if(e.button == 2){ click = "R"; } }else{ click = "F"; } return click; }
  • 26. 移動するマウスポインタ位置の検出1. e.clientX、 e.clientY [IE,FF] 原点(0,0):ブラウザ画面左上 e.clientX: ウィンドウ表示部分の左上を基準としてX座標をピクセル値で返す。 e.clientY: ウィンドウ表示部分の左上を基準としてY座標をピクセル値で返す。2. e.offsetX、 e.offsetY [IEのみ] e.offsetX: イベントでオフセットの親となるoffsetParentオブジェクトの左上を 基準としてオブジェクトのX座標をピクセル値で返す。 e.offsetY: イベントでオフセットの親となるoffsetParentオブジェクトの左上を 基準としてオブジェクトのY座標をピクセル値で返す。3. e.screenX、 e.screenY [IE,FF] 原点(0,0):モニタ画面左上 e.screenX: スクリーン上マウス位置のX座標をピクセル値で返す。 e.screenY: スクリーン上マウス位置のX座標をピクセル値で返す。4. e.x、 e.y [IEのみ、e.clientX、 e.clientYと同じ] e.x: ウィンドウ表示部分の左上を基準としてX座標をピクセル値で返す。 e.y: ウィンドウ表示部分の左上を基準としてY座標をピクセル値で返す。
  • 27. マウスポインタ位置の検出
  • 28. マウスポインタ位置の検出 mpos2.htm 1/2<?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> 以後省略<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>マウスボタン </title><style><!--#area {position: absolute; background-color: #eeeeee; top: 5px; left: 5px; width: 300px; height: 300px;}#stat {position: absolute; top: 35px; left: 315px;}--></style><script type="text/javascript" src="../lib/funcs.js"></script><script type="text/javascript">//<![CDATA[function check(e){ document.getElementById("x1").value = e.clientX; document.getElementById("y1").value = e.clientY; document.getElementById("x2").value = e.screenX; document.getElementById("y2").value = e.screenY;}
  • 29. mpos2.htm 2/2function initOnLoad(){ var observer = document.getElementById("area"); setListener(observer, "mousemove", check);}setListener(window, "load", initOnLoad);//]]></script></head><body><div id="area"></div><div id ="stat"><h4>マウスポインタ位置の検出</h4><ul type="circle"> <li>e.clientX_<input type="text" size="5" id="x1" /></li> <li>e.clientY_<input type="text" size="5" id="y1" /></li></ul><ul type="circle"> <li>e.screenX<input type="text" size="5" id="x2" /></li> <li>e.screenY<input type="text" size="5" id="y2" /></li></ul></div></body><//html>
  • 30. mpos2.js //<![CDATA[ function check(e){ document.getElementById("x1").value = e.clientX; document.getElementById("y1").value = e.clientY; document.getElementById("x2").value = e.screenX; document.getElementById("y2").value = e.screenY; } function initOnLoad(){ var observer = document.getElementById("area"); setListener(observer, "mousemove", check); } setListener(window, "load", initOnLoad); //]]>
  • 31. フォームコントロール・ラジオボタン・チェクボックス・セレクトメニュー必要性:Ajaxでのコントロールデータ処理と送信メリット:サーバレスポンスデータでの動的値設定 動的絞り込み検索
  • 32. セレクトメニュー
  • 33. <style><script type="text/javascript" src="../funcs.js"></script><script type="text/javascript" src="selectMenu.js"></script></head><body><h3>セレクトメニューの選択確認</h3><p><select id="pc"> <option value="SEL" id="sel"><=選択=></option> <option value="CPU" id="cpu">CPU</option> <option value="RAM" id="ram">メモリ</option> <option value="HDD" id="hdd">ハードデスク</option> <option value="DVD" id="dvd">DVD</option></select></p><hr /><p id="result"></p></body></html> selectMenu.htm
  • 34. //<![CDATA[ selectMenu.jsfunction checkSpec(){ var source = document.getElementById("pc").value; document.getElementById("result").innerText = "選択結果: " + source;}Function listeners(){ var observer = document.getElementById("pc") setListener(observer, "change", checkSpec);}setListener(window, "load", listeners);//]]> //<![CDATA[ Prototype.js function checkSpec(){ $(“result”).innerText = “選択結果: ” + $F("pc“); Function listeners(){ setListener($(“pc”), "change", checkSpec); } setListener(window, "load", setListeners); //]]>
  • 35. セレクトメニュー 絞り込み検索
  • 36. selectMenu2.htm 1/4 <link type="text/css" rel="stylesheet" href="../lib/style.css"/> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript"> //JavaScript </script> </head> <body> <center class="t3">Select Menu2</center> <table width="440" align="center"> <tr> <td width="90" align="right">クラス1項目</td> <td width="130" id="class1"> <select><option value="">-----クラス1選択-----</option></select> </td> <td width="90" align="right">クラス2項目</td> <td width="130"id="class2"> <select><option value="">-----クラス2選択-----</option></select> </td> </table> </body> </html>
  • 37. //<![CDATA[selectMenu2.htm var httpObj = getHttpObject(); 2/4 function getClass1(){ httpObj.open(get, getClass1Sel.php, false); httpObj.onreadystatechange = getClass1Rv; httpObj.send(null); } function getClass1Rv(){ if(httpObj.readyState == 4){ if(httpObj.status == 200){ var resRows = httpObj.responseText.split("<p>"); var out = <select id="class1List"> + <option value="">----クラス1選択----</option>; for(i = 0; i < resRows.length; i++){ var resRow = resRows[i].split(","); for(j = 0; j < resRow.length; j++){ if(j==0){ class1_code = resRow[j]; }else{ out += <option value= + class1_code + > + resRow[j] + </option>; } } } out += </select>; $("class1").innerHTML = out; } } }
  • 38. function getClass2(){selectMenu2.htm var class1_code = $("class1List").value; 3/4 httpObj.open(get, getClass2Sel.php?class1_code=+class1_code, false); httpObj.onreadystatechange = getClass2Rv; httpObj.send(null); } function getClass2Rv(){ var i, j, resRows, resRow, out, out3, code; if(httpObj.readyState == 4){ if(httpObj.status == 200){ resRows = httpObj.responseText.split("<p>"); out = <select id="class2List"> + <option value="">---クラス2選択済---</option>; for(i = 0; i < resRows.length; i++){ resRow = resRows[i].split(","); for(j = 0; j < resRow.length; j++){ if(j==0){ class2_code = resRow[j]; }else{ out += <option value= + class2_code + > + resRow[j] + </option>; } } } out += </select>; $("class2").innerHTML = out; addListener($("class2List"), "change", getClass3, false); } } }
  • 39. selectMenu2.htm 4/4function getClass3(){ alert($("class2List").value);}Function listeners(){ setListener($("class1List"), "change", getClass2);}setListener(window, "load", listeners);setListener(window, "load", getClass1);
  • 40. ラジオボタン
  • 41. <script type="text/javascript" src="funcs.js"></script> radioBtn.htm<script type="text/javascript" src="radioBtn.js"></script></head><body><h3>ラジオボタンの選択確認</h3><p id="pc"> <input type="radio" id="cpu" />cpu <input type="radio" id="ram" />メモリ <input type="radio" id="hdd" />ハードデスク <input type="radio" id="dvd" />DVD</p><hr /><p id="result"></p></body></html>
  • 42. radioBtn.js//<![CDATA[Var xhrObj = getXhrObj();function checkSel(e){ var sel = getid(e); id("result").innerText = "選択結果: " + sel;}Function initOnLoad(){ setListener(id(“pc”), "click", checkSel);}setListener(window, "load", initOnLoad);//]]>
  • 43. チェックボックス
  • 44. チェックボックス選択確認XHTML checkB.htm<?xml version="1.0" encoging="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"><head><title>チェックボックス</title><link rel="stylesheet" type="text/css" href=“../lib/style.css" /><script type="text/javascript" src=”../lib/funcs.js"></script><script type="text/javascript" src="checkB.js"></script></head><body><p id="pc"> <input type="checkbox" id="display" />ディスプレイ <input type="checkbox" id="mouse" />マウス <input type="checkbox" id="keybord" />キーボード <input type="checkbox" id="dvd" />DVDドライブ</p></body></html>
  • 45. チェクボックス選択確認JavaScript checkB.js//<![CDATA[function checked(e){ var eid =getid(e); alert("選択は " + eid);}function setListeners(){ setListener($("pc"), "click", checked);}setListener(window, "load", setListeners);//]]>
  • 46. チェックボックス-複数選択での処理
  • 47. <link rel="stylesheet" type="text/css" href="style.css" /> checkBox.htm<script type="text/javascript" src="funcs.js"></script><script type="text/javascript" src="checkBox.js"></script></head><body><p id="pc"> <input type="checkbox" id="display" />ディスプレイ <input type="checkbox" id="mouse" />マウス <input type="checkbox" id="keybord" />キーボード <input type="checkbox" id="dvd" />DVDドライブ<br /><br /><button type="button" class="b2" id="confirm">受信確認</button></p><hr /><table> <tr><td>選択確認</td><td id="result1"></td></tr> <tr><td>選択累積</td><td id="result2"></td></tr> <tr><td>受信確認</td><td id="result3"></td></tr></table></body></html>
  • 48. //<![CDATA[var optcum = new Array(); checkBox.jsvar options = new Array();function checked(e){ var eid =getid(e); optcum.push(eid); document.getElementById("result1").innerText = eid; document.getElementById("result2").innerText = optcum;}function confirm(){ for(var i = 0; i < optcum.length; i++){ if(document.getElementById(optcum[i]).checked == true) options.push(optcum[i]); } var httpObj = getHttpObject(); httpObj.open("post", "../checkbox", false); httpObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); httpObj.send("options=" + options); out = httpObj.responseText; document.getElementById("result3").innerHTML = out;}Function listeners(){ var observer1 = document.getElementById("pc"); setListener(observer1, "click", checked); var observer2 = document.getElementById("confirm"); setListener(observer2, "click", confirm,);}setListener(window, "load", listeners);//]]>
  • 49. checkBox.javapackage domevent;import java.io.*;import javax.servlet.*;import javax.servlet.http.*;public class checkBox extends HttpServlet { public void doPost (HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException { int i; String options[] = req.getParameterValues("options"); PrintWriter out; res.setContentType("text/html; charset=Shift_JIS"); out = res.getWriter(); for (i = 0; i < options.length - 1; i++){ out.println(options[i] + ","); } out.println(options[i]); out.close(); }}
  • 50. Ajaxエンジンの機能 Ajaxエンジン ① イベント処理 Web GUI サーバ ② サーバ通信 ・テキストデータ ・XMLデータXHTML+CSS ③ UI表示・XHTML 画面構成・CSS 表示制御 ④ 表示制御 ⑤ 演算処理 JavaScript
  • 51. DOMノード操作(1) DOMノード操作サンプルhttpObj.onreadystatechange = function(){ if(httpObj.readyState == 4){ if(httpObj.status == 200){ finalItems = httpObj.responseText.split(","); //for(i in finalItems){ prototype.jsで副作用 for(i = 0; i < finalItems.length; i++){ tagNode = document.createElement("p"); tagNode.setAttribute("id", finalItems[i]); docNode = document.createTextNode([0] +finalItems[i]); tagNode.appendChild(docNode); document.getElementById("tree").appendChild(tagNode); } } }}
  • 52. DOMノード操作概要 ノードの種類 ・要素ノード (element node) ・属性ノード (attribute node) ・テキストノード(text node)例]<div id=“id1” class=“class1”>DOMノード操作</div> 要素ノード <div> 属性ノード id=“id1” class=“class1” テキストノード DOMノード操作
  • 53. 1.要素ノードの参照getElementById構文] object.getElementById(“id属性値”)機能] 指定したID名を持つ要素ノードオブジェクトを返す。引数] id属性値。返値] オブジェクト。適用] document対応] [IE5~][Firefox1~][Safari1~][Opera8~][Netscape6~]※非常に頻繁に使用されるメソッドで、多くのAjaxライブラリでショートカット 関数が用意されている。例] document.getElementById(“out1”); ↓ $(“out1”); // Prototype.js, DWR id(“out”); // funcs.js
  • 54. 要素ノードの参照getElementsByTagName構文] object. getElementsByTagName(“タグ名”)機能] 指定したタグ名を持つオブジェクト(要素ノード)を配列形式で返す。引数] タグ名。返値] オブジェクトの参照。適用] document対応] [IE5~][Firefox1~][Safari1~][Opera8~][Netscape6~]※ワイルドカード “*” で総てのノード要素を指定することが出来る。※funcs.jsでショートカット関数が用意されている。例] document.getElementsByTagName(“div”); ↓ tn(“div”); // funcs.js
  • 55. 2.属性ノードの参照getAttribute書式] object.getAttribute(attributeName‘ [, type‘])説明] オブジェクトの指定された属性の値を返す。引数] attributeNameは属性の名前を指定。 typeは種類を指定。次のいずれか。 0(アトリビュート名の大文字小文字の区別をしない) 1(アトリビュート名の大文字小文字の区別をする) 2(値を返す)返値] アトリビュートの値対応] [IE5~][Firefox 1~][Safari 1~][Opera 8~][Netscape 6~]
  • 56. 属性ノードの参照getAttributeNode構文] object.getAttributeNode(attributeName)説明] オブジェクトの指定された属性のノード値を返す。引数] AttributeNameは属性名を指定。返値] attributeオブジェクトを返す。対応] [IE5~][Firefox1~][Safari1~][Opera8~][Netscape6~]
  • 57. 子ノードの参照-1firstChild書式] 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~]
  • 58. 子ノードの参照-2childNodes構文] object.childNodes object.childNodes[index] object.childNodes.length機能] オブジェクトの子ノードを参照する。 評価値は配列で最初の子ノードは0番になる。引数] id属性値。返値] 子ノードオブジェクトの配列適用] object対応] [IE5~][Firefox 1~][Safari 1~][Opera 8~][Netscape 6~]
  • 59. 子ノードの参照-3hasChildNodes構文] object.hasChildNodes()機能] 子ノードがあるかどうか返す。 子ノードがある場合はtrue、ない場合はfalseを返す。引数] id属性値。返値] 真偽値適用] object対応] [IE5~][Firefox 1~][Safari 1~][Opera 8~][Netscape 6~] function check() { if ($("sample").hasChildNodes()) { alert(“子ノードがあります。”); } else { alert(“子ノードがありません。”); } }
  • 60. 兄弟ノードの参照nextSibling構文] object.nextSibling機能] オブジェクトの次のノードを参照する。返値] ノードオブジェクトの参照適用] 多くのノードオブジェクト対応] [IE5~][Firefox 1~][Safari 1~][Opera 8~][Netscape 6~]previousSibling構文] object.previousSibling機能] オブジェクトの前のノードを参照する。返値] ノードオブジェクトの参照適用] 多くのノードオブジェクト対応] [IE5~][Firefox 1~][Safari 1~][Opera 8~][Netscape 6~]
  • 61. 親ノードの参照parentNodeプロパティ構文] object.parentNode機能] 親ノードを参照する。適用] object対応] [IE5~][Firefox 1~][Safari 1~][Opera 8~][Netscape 6~]
  • 62. 要素ノードの作成createElementメソッド書式] object.createElement(element)説明] 引数で指定したエレメントを作成する。引数] 要素(エレメント)の名前戻値] 作成したオブジェクト。適用] document対応] [IE5~][Firefox 1~][Safari 1~][Opera 8~][Netscape 6~]
  • 63. テキストノードの作成createTextNodeメソッド書式] object.createTextNode(text)機能] 指定されたテキストノードを作成する。引数] 作成するテキスト返値] TextNodeオブジェクト適用] document対応] [IE5~][Firefox1~][Safari1~][Opera8~][Netscape6~]
  • 64. テキストノードの作成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); }
  • 65. 属性ノードの作成setAttributeメソッド構文]object.setAttribute(attributeName, value, [type‘] )機能] オブジェクトに、引数で指定された属性を追加する。引数]attributeNameはアトリビュート名を指定。valueは値を指定。typeは種類を指定。次のいずれか。0(アトリビュート名の大文字小文字の区別をしない)1(アトリビュート名の大文字小文字の区別をする)返値] なし
  • 66. 既存ノードの前に新規ノードオブジェクトを挿入insertBefore書式] object.insertBefore(newNode, existingNode)機能] オブジェクトの指定された既存のノードオブジェクトの前に 指定された新しいノードオブジェクトを挿入する。引数] newNode: 新しいノードオブジェクトを指定。 existingNode: 既存のノードオブジェクトを指定。戻値] ノードオブジェクト。対応] [IE5~][Firefox 1~][Safari 1~][Opera 8~][Netscape 6~]
  • 67. 隣接するエレメントにオブジェクトを挿入insertAdjacentElement書式] object.insertAdjacentElement(“type”, insObj)機能] オブジェクトの指定された位置に隣接するエレメントオブジェクト を挿入する引数]type:次のいずれかを指定しobjectノードに対する位置関係を指定する。BeforeBegin 開始タグの前AfterBegin 開始タグの後BeforeEnd 終了タグの前AfterEnd 終了タグの後insObj: 追加する要素オブジェクトを指定。返値] エレメントオブジェクトを返す。
  • 68. 子ノードを置き換え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); }
  • 69. テキストの挿入insertData構文] object.insertData(‘offset’, ‘text’)機能] オブジェクト(object)に、第2引数で指定されたテキストを 挿入する。引数] offsett:既存テキストのどの文字位置にテキストを挿入 するかを指定する。 text:挿入されるテキストリレラル。 ※既存テキストは英数字と漢字を区別しないで位置指定 できる。適用] テキストノード、コメント返値] なし。
  • 70. [3] ノードの削除ノードオブジェクトを削除removeNode構文] object.removeNode(“value”)機能] オブジェクトのノードオブジェクトを削除する。引数]valueは値を指定。次のいずれか。true(childNodesコレクションを含める)false(childNodesコレクションを含めない)返値] ノードオブジェクトを返す。
  • 71. 子ノードオブジェクトを削除removeChild構文] pnode.removeChild(cnode)機能] オブジェクトの指定された子ノードオブジェクトを 削除する。引数] pnode:親ノードオブジェクト。 cnode:子ノードオブジェクト。返値] ノードオブジェクト。対応] [IE5~][Firefox1~][Safari1~][Opera8~][Netscape6~]
  • 72. 属性(attribute)を削除removeAttribute構文] object.removeAttribute(attributeName, [type‘])機能] オブジェクトの指定された属性値を削除する。引数] attributeName:アトリビュート名を指定。 type:は種類を指定。次のいずれか。 0(アトリビュート名の大文字小文字の区別をしない) 1(アトリビュート名の大文字小文字の区別をする)返値] true(削除)、false(非削除)対応] [IE5~][Firefox1~][Safari1~][Opera8~][Netscape6~]例] $(“id1”). removeAttribute(‘name, 0)
  • 73. XMLHttpRequestでのデータ送受信オーバヘッド イーザネット 12Byte 4 フレーム B IPデータグラム 24Byte TCPセグメント 20Byte HTTPヘッダ ヘッダデータ量: 60Byte + HTTPプロトコルヘッダ HTTPプロトコル リクエストヘッダ例 HTTPプロトコル レスポンスヘッダ例GET /docs/sw/http-header.html HTTP/1.1 HTTP/1.1 200 OKHost: www.kanzaki.com Date: Wed, 05 Sep 2001 06:06:19 GMTAccept: text/html, text/plain, text/sgml, */*;q=0.01 Server: Apache/1.3.12Accept-Encoding: gzip, compress Accept-Language: ja,en Content-Location: http-header.html.jaIf-Modified-Since: Sun, 2 Sep 2001 11:31:06 GMT Vary: negotiate,accept-language,accept-charsetUser-Agent: Lynx/2.8.2 TCN: choice P3P: policyref="/w3c/p3p.xml",CP="NOI DSP COR ADM DEV OUR STP” Last-Modified: Wed, 05 Sep 2001 06:02:09 GMT Connection: close Content-Type: text/html; charset=shift_jis Content-Language: ja
  • 74. XMLHttpRequestでのデータ送受信オーバヘッド ヘッダデータ量: 60Byte + HTTPプロトコルヘッダ HTTPプロトコル リクエストヘッダ例 HTTPプロトコル レスポンスヘッダ例GET /docs/sw/http-header.html HTTP/1.1 HTTP/1.1 200 OKHost: www.kanzaki.com Date: Wed, 05 Sep 2001 06:06:19 GMTAccept: text/html, text/plain, text/sgml, */*;q=0.01 Server: Apache/1.3.12Accept-Encoding: gzip, compress Accept-Language: ja,en Content-Location: http-header.html.jaIf-Modified-Since: Sun, 2 Sep 2001 11:31:06 GMT Vary: negotiate,accept-language,accept-charsetUser-Agent: Lynx/2.8.2 TCN: choice P3P: policyref="/w3c/p3p.xml",CP="NOI DSP COR ADM DEV OUR STP” Last-Modified: Wed, 05 Sep 2001 06:02:09 GMT Connection: close Content-Type: text/html; charset=shift_jis Content-Language: ja 75 イーザネット 12Byte 4 フレーム B IPデータグラム 24Byte TCPセグメント 20Byte HTTPヘッダ
  • 75. Ajaxライブラリ
  • 76. 言語機能強化Ajaxライブラリ Prototype.js MochiKit エフェクト系 script.aculo.us サーバ ビジネス Yahoo! UI Library リクエスト ロジック Plotr DWR DWR ActiveWidgets Dojo [サーバ] 開発者 Yahoo! UI Library ユーザ ・リモーティングツール コントロール系 ・UIツール [クライアント] 77
  • 77. Ajaxライブラリ 言語機能強化 Prototype.js MochiKit エフェクト系 [リモーティングツール] script.aculo.us サーバ ビジネス リクエスト ロジック Yahoo UI Library Plotr DWR DWR ActiveWidgets Dojo [サーバ] 開発者 Yahoo UI Library ユーザ コントロール系 [UIツール] [クライアント] 78
  • 78. Ajaxモデルでの処理の流れ DOM ① イベント処理 サーバリモーティング Web GET/POST DOM API サーバ GUI ② サーバ通信 ・テキストデータ ・XMLデータXHTML+CSS ③ UI表示・XHTML 画面構成・CSS 表示制御 ④ 表示制御 ⑤ 演算処理 言語機能 JavaScript (Ajaxエンジン)
  • 79. Ajaxモデルとライブラリ 言語機能拡張 ① イベント処理 サーバリモーティング Web GET/POST UI表現 サーバ GUI ② サーバ通信 ・テキストデータ ・XMLデータXHTML+CSS ③ UI表示・XHTML 画面構成・CSS 表示制御 ④ 表示制御 ⑤ 演算処理 JavaScript (Ajaxエンジン)
  • 80. Ajaxian.com 2007 Survey Results http://ajaxian.com/
  • 81. DWR(Direct WebRemoting) DWR:Easy Ajax for Java http://getahead.ltd.uk/dwr/ Ajaxアプリケーションを サーバサイドJavaで開発 するための JavaScript-Java連携用 フレームワークApache License, Version 2.0再配布要件(1)LICENSEファイルを再配布物内の「どこか」に置く。(2)再配布要件(自分の著作物も含む)は、適度に定めてよい。付与要件(1)LICENSEファイルを作る。(Apacheライセンス参照)(2)LICENSEファイルの中身にCopyright [yyyy] [著作権所有者の名前]をつける。(もちろん再配布物と一緒に入れる) 82
  • 82. DWRの特徴1.ネットワーク透過性ローカルのJavaクラスのメソッド呼び出し感覚でリモートのメソッド呼出しが可能。※Remote Procedure Call vs Local Procedure Call Ajaxクライアント サーバ Java Beans 83
  • 83. DWRでのシステム構成-制御機能(Controller)はシステム(DWR)に任せ、 :ユーザ記述 開発者はビジネスロジック作成に専念できる。 :DWRサポート [ビュー] [コントローラ] [モデル] DWR Client DWR Servlet Java Beans DB Ajax[プレゼンテーション層] web.xml dwr.xml [ファンクショナル層] [データアクセス層] [3層C/Sシステム] [MVCモデル] P: プレゼンテ-ション層 M:Model ビジネスロジック F: ファンクショナル層 V:View 表示機能 D: データアクセス層 C:Controller 処理制御機能
  • 84. 2.サーバ側Javaの記述はJava Beans(POJO)で行う(1) DI(Dependency Injection)・サーバ側JavaはJavaBeans(POJO)で記述し、サーバサイド単独でテストできる。(2) DRY(Don’t Repeat Yourself)・Java Beansでビジネスロジックを記述する事により、重複のないコード記述が可能。(3) CoC(Convention over Configuration)・アノテーションにより、dwr.xmlの設定内容をJavaBeansに記述することが可能。[POJO(Plain Old Java Object)] JavaオブジェクトがEJB(特にEJB 3より前のEJB)のように特殊なものではなく、 ごく普通のJavaオブジェクトであることを強調した名称。[DI(Dependency Injection)] 互いにの独立性が高いコンポーネントを、アプリケーションとして結合する為の技術[DRY(Don’t Repeat Yourself)] プログラムの重複を排除する考え方。[CoC(Convention over Configuration)] 設定よりも規約 85
  • 85. (2) DRY(Don’t Repeat Yourself)[DRY=Don’t Repeat Yourself]同じプログラムコードを重複して記述しない。・機能単位でのクラス構成とメソッド定義 Java Beans EX] 受注関係のCRUD処理をクラスに (POJO) まとめる。 顧客クラス・カスタマイズはオーバライドで行う。 顧客関係 メソッド DB (crud) DWR Client コントローラ 機能 社員クラス ・顧客情報表示 DWR 社員関係 ・担当者表示 Servlet メソッド DB ・商品情報表示 (crud) 商品クラス 商品関係 メソッド DB (crud) 86
  • 86. 3.リバースAjax - DWR 2.0からサーバ側のJavaからクライアントのJavaScriptに非同期にデータ送信が可能⇒コールバック、サーバプッシュとも言われる⇒チャットのような対話型のAjaxアプリケーションが記述しやすくなる。DWRのリバースAjaxでは3つの方式をサポート Comet, Polling, Piggyback 87
  • 87. DWRでの リバースAjax実装形式1 Active Reverse Ajax[Full Streaming Mode] =CometデフォルトのReverse Ajaxモードで、クライアントへのレスポンスは最も早い。リクエスト受信後、ブラウザのコネクションがまだ生きているかを見るために、60秒毎にコネエクションをクローズする。[Early Closing Mode] =Cometリクエスト受信後、 60秒後にコネエクションをクローズする。[Polling Mode] = Polling60秒毎にポーリングを行って新しいデータがあるか確認する。最も多くのクライアントコネクションが可能。2.Passive Reverse Ajax =piggybackサーバはクライアントへのキューイングしておき、次のリクエスト時に、同時にレスポンス送信する。サーバ側のコネクション保持も、クライアントからのポーリングもなく、この方式によるWebサーバへの追加の負荷は全くない。 88
  • 88. 4.UIとサーバ通信の分離・通信機能 → DWR・UI機能 → ActiveWidgets, Yahoo UI, Dojo etc=>分散アプリケーション、分散オブジェクトで一般的な形態vs] GWT(Google Web Toolkit) は一体型 ①イベント処理 サーバ Web 他コンポーネント GUI DWR ②サーバ通信XHTML+CSS ③UI表示 ④表示制御 ⑤演算処理 Ajaxエンジン 89
  • 89. 5.DWRサーブレットとユーザサーブレットの混在可 [ビュー] [コントローラ] [モデル]DWR Client Ajax DWR Servlet Java Beans Servlet DB Java Beans (ユーザ記述)Ajax Client ユーザ記述Servletは web.xml dwr.xml ・web.xmlにDWR-Servletと併記可能 ただし、DWR-Servletの後に記述する。 ユーザ記述JavaBeansは ・dwr.xmlに定義しDWRのDEBUG機能 使用可能 ・JavaBeans(POJO)は全く同じ
  • 90. リバースAjaxの実装方式リバースAjax ---- アクティブリバースAjax ---- フルストリーミングモード (Comet) -- アーリイクロージングモード (Comet) -- ポーリングモード (Polling) ----パッシブリバースAjax (Piggyback)
  • 91. 6 その他・動的にページを生成するためのユーティリティメソッドを提供コレクションクラスのオブジェクトを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 92
  • 92. プログラム作成 - DWR実行環境 FedoraCore5 APサーバ データベース DWRサーバ Tomcat5 Version 2.0 RC 2 サーブレット Java サーブレット MySQL コンテナ Beans サンプル動作環境 Tomcat 5.xx ブラウザ ブラウザ J2EE 5.04クライアント IE 6.0 MySQL 4.1.11 IE6.0 FF2.0 IE 6.0.2800 FF 2.00.2 WindowXP Pro V2 93
  • 93. WARファイルでのDWRサンプル環境作成1.WARファイル(dwr.war)のダウンロード http://getahead.org/dwr/download 94
  • 94. 2.dwr.warを$CATALINA_HOME/webapps に配置後Tomcat再起動 または、Tomcat Webアプリケーションマンージャからデプロイ 95
  • 95. 3.ブラウザで http://localhost:8080/dwr/ をアクセス・初期画面の表示 96
  • 96. DWRサンプルプログラム1 - Dynamic Address Entry オートコンプリート
  • 97. DWRサンプルプログラム2 - reverse ajax 時計表示 98
  • 98. DWRサンプルプログラム3 - reverse ajax チャット 99
  • 99. DWRユーザプログラミング作成初めてのDWR 従業員番号から氏名表示 100
  • 100. $CATALINA_HOME DWRディレクトリ構成 webapps dwr2 WEB-INF web.xml dwr.xml lib classes erp hr lib bbb.class book4 s5 aaa.htm
  • 101. 1. DWR JAR ファイルのダウンロードと配置(1) http://getahead.org/dwr/download から dwr.jar ファイルをダウンロード。(2) $CATALINA_HOME/webapps/[開発DIR]/WEB-INF/lib ディレクトリに配置 ※DWRディレクトリ(dwr.warでデプロイ)のlib内ファイルをすべてコピーで可 102
  • 102. 2. デプロイメントディスクリプタ(web.xml)の編集 WEB-INF/web.xml にdwr-invokerの行を追加. ※サーブレットの定義はdwr-invokerだけ。 ※DWRディレクトリのweb.xmlをコピーで可 web.xml <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd"> <web-app id="dwr"> <servlet> <servlet-name>dwr-invoker</servlet-name> <display-name>DWR Servlet</display-name> <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class> <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>dwr-invoker</servlet-name> <url-pattern>/dwr/*</url-pattern> </servlet-mapping> </web-app> 103
  • 103. <?xml version="1.0" encoding="ISO-8859-1"?><!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN""http://java.sun.com/dtd/web-app_2_3.dtd"><web-app id="dwr"> <display-name>DWR (Direct Web Remoting)</display-name> <description>A demo of how to call Java on the server directly from Javascript on the client</description> <servlet> <servlet-name>dwr-invoker</servlet-name> <display-name>DWR Servlet</display-name> <description>Direct Web Remoter Servlet</description> <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class> <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param> <init-param> <param-name>pollAndCometEnabled</param-name> <param-value>true</param-value> </init-param> <init-param> <param-name>allowGetForSafariButMakeForgeryEasier</param-name> <param-value>true</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>dwr-invoker</servlet-name> 参考] web.xml(オリジナル) <url-pattern>/dwr/*</url-pattern> </servlet-mapping> 104</web-app>
  • 104. 3.サーバコード(JavaBeans:POJO)作成package seminar1;import java.io.*;public class sem1Bean { String inPath = "/usr/local/tomcat5/apache-tomcat-5.5.20/webapps/dwr2/WEB-INF/ classes/seminar1/employee.txt"; public String getEmpName(String emp_no){ String empData = "", empNo = "", empName = ""; try { File inFile = new File(inPath); FileReader in = new FileReader(inFile); BufferedReader inBuffer = new BufferedReader(in); while ((empData = inBuffer.readLine()) != null) { empNo = empData.substring(0, 5); if(empNo.equals(emp_no)){ empName = empData.substring(5); break; } } inBuffer.close(); } catch (IOException e) {} return empName; sem1Bean.java }} 105
  • 105. 4.WEB-INFディレクトリ下にdwr.xmを作成・配置 dwr.xml 定義 <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd"> <dwr> <allow> <create creator="new" javascript="sem1Bean"> <param name="class" value="seminar1.sem1Bean"/> </create> </allow> </dwr>creator=“new” :リクエストの際に、Javaオブジェクトの新しいインスタンス生成※scope属性 application アプリケーション全体で1つのインスタンス作成 session セッション毎にインスタンス生成 request リクエスト毎にインスタンスを生成 page ページ毎にインスタンスを生成5.tomcat再起動 106
  • 106. 参考] アノテーションの指定方法1.クラスファイルの指定POJOクラスをリモートアクセス可能にする為には,@RemoteProxy および @RemoteMethodのアノテーション(annotation)を指定する。@RemoteProxypublic class empBean { @RemoteMethod public String getEmpName(String emp_no){ : } }※ クライアントアクセス名の変更 @RemoteProxy(name=”empInfo”)
  • 107. package seminar1;import java.io.*;@RemoteProxy //リモートから使用するクラスであることを指定public class sem1Bean { String inPath = "/usr/local/tomcat5/apache-tomcat-5.5.20/webapps/dwr2/WEB-INF/ classes/seminar1/employee.txt"; @RemoteMethod //リモートから使用するメソッドであることを指定 public String getEmpName(String emp_no){ String empData = "", empNo = "", empName = ""; try { File inFile = new File(inPath); FileReader in = new FileReader(inFile); BufferedReader inBuffer = new BufferedReader(in); while ((empData = inBuffer.readLine()) != null) { empNo = empData.substring(0, 5); if(empNo.equals(emp_no)){ empName = empData.substring(5); break; } } inBuffer.close(); アノテーション } catch (IOException e) {} DWR記述の代替をビーンズコード内で行う。 return empName; } 108}
  • 108. 2.web.xmlにアノテーション適用JavaBeans指定<servlet> <servlet-name>dwr-invoker</servlet-name> <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class> <init-param> <param-name>classes</param-name> <param-value> erp.hr. empBean , erp.hr. hrBean </param-value> </init-param> <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param></servlet>
  • 109. 6.デバックモードでJavaBeansの機能確認機能] 利用可能なすべてのJavaBeansをWebページ 上で確認できる。1.web.xmlにdebug機能の使用を指定<servlet> <servlet-name>dwr-invoker</servlet-name> <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class> <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param></servlet> 110
  • 110. 2.http://(URL)/(Webアプリケーション名)/dwr/ にアクセスし、 利用可能なオブジェクトの一覧が表示される。 111
  • 111. 7.クライアントコード作成 dwrGetAsyn.htm 1/2<?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"><head><title>従業員番号から氏名表示</title><script type="text/javascript" src="../lib/funcs.js"></script><script type="text/javascript" src="../dwr/engine.js"></script><script type="text/javascript" src="../dwr/util.js"></script><script type="text/javascript" src="../dwr/interface/sem1Bean.js"></script><script type="text/javascript">//<![CDATA[function reqEmpName(){ //var emp_no = idv("emp_no"); var emp_no = dwr.util.getValue(“emp_no”); //util.js sem1Bean.getEmpName(emp_no, respEmpName); //engine.js}function respEmpName(resp){ //id("emp_name").value = resp; dwr.util.setValue("emp_name") = resp; //util.js} 112
  • 112. dwrGetAsyn.htm 2/2function 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"/>&nbsp; 従業員氏名:<input type="text" size="14" id="emp_name"/> </nobr> </center></body></html> 113
  • 113. [参考]<allow>DWRが生成・処理可能なクラス範囲を定義する<create><create creator=“生成方法” class=“JavaBeansクラスの完全修飾名” [javascript=“オブジェクト名”] [scope=“有効範囲”] [<auth method=“メソッド名” role=“ロール名” />] [<exclude method=“呼び出しを禁止するメソッド名” />] [<include method=“呼び出しを許可するメソッド名” />]</create>creator属性(必須) - 以下のcreatorを指定.※creatorにStruts、JSFのような外部フレームワークを指定すれば、 連携することが出きる。 通常はnewを指定。[DWRで指定可能なcreator] :•new: Java の‘new’ オペレータを使用。•none: オブジェクトを生成しない。•scripted: BeanShell または BSFからのGroovyなどスクリプト言語を使用。•spring: Spring Frameworkからのbeanアクセスを指定.•jsf: JSFからオブジェクトを使用。•struts: strutsの FormBeansを使用•pageflow: Beehive または Weblogic からの PageFlowアクセス•ejb3: EJB3のセッションbeansへのアクセス. ※ejb3は現在テスト段階 114
  • 114. DWR関連jsファイル(ライブラリ&自動生成)1./dwr/engine.js 必須のコアファイル XMLHttpRequestによる非同期通信を行う2./dwr/util.js オプションのユーティリティファイル 例] DWRUtil.getValue()、DWRUtil.setValue()3. /interface/sem1Bean.js sem1Bean.java固有のjsファイル DWRのサーブレット(DWRServlet)が動的に生成 demo1.Demoオブジェクトにアクセスするためのインターフェイスを提供 jsファイル名は dwr.xmlで指定 <create creator="new" javascript="sem1Bean"> 115
  • 115. メソッド 機能$(id) 指定されたID値に対応する要素を所得する。DWRUtil.getValue(id) 選択ボックスから値を所得する。 select要素を指定した場合は選択されているoptionの値が所得される。DWRUtil.getValues(ids) 指定されたIDに対応する各要素のテキスト値を全て所得する。DWRUtil.getValues(event, func) リターンキーを押下した場合の処理を定義する。DWRUtil.setValue(id, value) IDで指定した要素をvalue指定の値に設定する。DWRUtil.setValues(ids) {id1: テキスト1, id2:テキスト2 …} のように指定し、指定されたIDにテキ スト値をセットする。DWRUtil.removeAllOptions(id) IDで指定したselect要素、ul要素、ol要素のオプションをすべて削除する。DWRUtil.addOptions(id, 配列) IDで指定したselect要素に配列内のテキストをoptionとして追加する。DWRUtil.removeAllRows(id) IDで指定したテーブルからすべての行を削除する。DWRUtil.addRows IDで指定したテーブルに行を追加する。追加する行はarrayで指定された(id,array,cellfuncs,[options]) 配列データをcellfuncsで指定された関数に従って追加する。DWRUtil.getText(id) 指定されたID値に対応するテキストを所得する。DWRUtil.selectRange(id,start,end) IDで指定された入力フィールドのstart ~ end文字目までをテキストを選択 する。DWRUtil.toDescriptiveString(id,opt) 指定された要素に関する情報をオプション(0~2)に従って表示する。DWRUtil.useLoadingMessage() 通信中のメッセージを表示するように指定する。
  • 116. [実習-1]・DWRでの従業員から氏名表示を作成 ご自分のディレクトリで プログラム作成と動作確認を行って下さい。 117
  • 117. リモートオブジェクトのオプション指定オプション 概要callback リモートコールが成功した場合の処理errorHandoler リモートコール処理が失敗した場合の処理ordered 要求された順番で結果を反映するかpreHook リモートコール直前に行う処理postHook リモートコール直後に行う処理timmeout 要求のタイムアウト時間(ミリ秒)verb HTTPメソッド(GETまたはPOST)warninghandoler ブラウザによる警告が発生した場合の処理 118
  • 118. リモートオブジェクトオプション指定例<script type="text/javascript">//<![CDATA[function reqEmpName(){empBean.getEmpName(idv("emp_no").toUpperCase(), { callback: function(resp){$("emp_name").value = resp;}, timeout: 5000, errHandler: function(msg){alert("Error:" + msg);} } );}function initOnLoad(){ setListener($("emp_no"), "blur", reqEmpName);}setListener(window, "load", initOnLoad);//]]></script>
  • 119. 参考:Javaチャット: DWRでのコールバック処理 120
  • 120. <?xml version="1.0" encoding="utf-8" standalone="no"?>JavaChat.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 1/2 "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DWR 軽量チャット バージョン 2.0</title> <link rel="stylesheet" type="text/css" href="../lib/style.css"/> <style type="text/css"> <!-- #chatlog {list-style-type: none;} --> </style> <script type=text/javascript src=../lib/funcs.js> </script> <script type=text/javascript src=../dwr/engine.js> </script> <script type=text/javascript src=../dwr/interface/JavaChat.js> </script> <script type=text/javascript src=../dwr/util.js> </script> <script type="text/javascript"> //<![CDATA[ function activate() { dwr.engine.setActiveReverseAjax(true); } function sendMsg() { var msg = $("name").value + ": " + $("text").value; JavaChat.addMessage(msg); } 121
  • 121. JavaChat.htm function listeners(){ 2/2 addListener($("send"), "click", sendMsg, false); } addListener(window, "load", listeners, false); addListener(window, "load", activate, false); //]]> </script> </head> <body> <p class="t2">DWR:Javaチャット</p> <div class="t4"> ニックネーム: <input type="text" id="name" size="8"/> <input type="button" class="b2" id="send" value="送信"/> <br/> <textarea id="text" row="3" cols="50"></textarea> </div> <hr/> <ul id="chatlog"></ul> <div id="dwr-debug"></div> </body> </html> 122
  • 122. package cback;import java.util.Collection;import java.util.LinkedList; JavaChat.javaimport org.directwebremoting.WebContext;import org.directwebremoting.WebContextFactory;import org.directwebremoting.proxy.dwr.Util;import org.directwebremoting.util.Logger;public class JavaChat{ public void addMessage(String text){ if (text != null && text.trim().length() > 0){ messages.addFirst(new Message(text)); while (messages.size() > 10){ messages.removeLast(); } } WebContext wctx = WebContextFactory.get(); String currentPage = wctx.getCurrentPage(); Util utilThis = new Util(wctx.getScriptSession()); utilThis.setValue("text", ""); Collection sessions = wctx.getScriptSessionsByPage(currentPage); Util utilAll = new Util(sessions); utilAll.removeAllOptions("chatlog"); utilAll.addOptions("chatlog", messages, "text"); } private LinkedList messages = new LinkedList(); protected static final Logger log = Logger.getLogger(JavaChat.class); 123}
  • 123. package cback;import java.net.MalformedURLException;import java.net.URL;import org.directwebremoting.Security; Message.javapublic 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 - its not a URL } } public long getId(){ return id; } public String getText(){ return text; } private long id = System.currentTimeMillis(); private String text;} 124
  • 124. Ajax応用プログラム
  • 125. DWRでCRUD処理DWRでデータベース登録 社員マスタ登録 126
  • 126. (1) サーバコード記述 hrBean.java 1/2package 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"; } }
  • 127. hrBean.java addEmpHdr 2/2public 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; }}
  • 128. (2) dwr.xml の記述<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd"><dwr> <allow> <create creator="new" javascript="hrBean"> <param name="class" value="erp.hr.hrBean"/> </create> : </allow></dwr>
  • 129. (3) DWRデバッガでサーバメソッド(addEmpHdr)の動作確認
  • 130. (4) クライアントコード記述 dwrAddEmpHdr.htm 1/2<?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>社員登録</title><link type="text/css" rel="stylesheet" href="../../lib/style.css"/><script type="text/javascript" src="../../dwr/engine.js"></script><script type="text/javascript" src="../../dwr/util.js"></script><script type="text/javascript" src="../../dwr/interface/hrBean.js"></script><script type="text/javascript" src="../../lib/funcs.js"></script><script type="text/javascript">//<![CDATA[function addEmpHdr(){ var emp_no = idv("emp_no"); var emp_name = idv("emp_name"); var depart = idv("depart"); var section = + idv("section"); hrBean.addEmpHdr(emp_no, emp_name, depart, section, addStat);}function addStat(resp){ id("status").innerHTML = resp;} 131
  • 131. function initOnLoad(){ setListener(id("add"), "click", addEmpHdr); dwrAddEmpHdr.htm 2/2}setListener(window, "load", initOnLoad);//]]></script></head><body><center><div class="t3">社員マスタ管理</div><table width="370" border="1"> <tbody> <tr><th colspan="2">社員マスタ登録</th></tr> <tr> <th width="110">社員番号</th> <td><input type="text" size="8" id="emp_no"/></td> </tr> <tr><th>社員氏名</th><td><input type="text" id="emp_name"/></td></tr> <tr><th>所属部</th><td><input type="text" size="32" id="depart"/></td></tr> <tr><th>所属課</th><td><input type="text" size="30" id="section"/></td></tr> <tr> <th><input type="button" id="add" value=" 登録 " /></th> <td id="status">&nbsp;</td> </tr> </tbody></table></center></body></html> 132
  • 132. サンプル作成 2DWRでデータベース参照 社員マスタ参照 133
  • 133. public String revEmpHdr(String emp_no){ Connection con = null; (1) サーバコード記述 try{ con = DriverManager.getConnection(url, user, pass); }catch (Exception e){ resp = "jdbc Driver load error"; } try{ String sql = "select * from emp_hdr where emp_no = ?"; PreparedStatement ps = con.prepareStatement(sql); ps.setString(1, emp_no); ResultSet rs = ps.executeQuery(); if(rs.first()) { respBuf.append("OK:参照ID:"+emp_no).append("<i>"); respBuf.append(rs.getString("emp_name")).append("<i>"); respBuf.append(rs.getString("depart")).append("<i>"); respBuf.append(rs.getString("section")).append("<i>"); respBuf.append(rs.getString("ent_date")).append("<i>"); } else { respBuf.append("NO:参照不成功").append("<i>"); } con.close(); }catch(SQLException e){} resp = respBuf.toString(); revEmpHdr return resp;}
  • 134. (2) DWRデバッガでサーバメソッド(revEmpHdr)の動作確認
  • 135. <?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>社員登録</title><link type="text/css" rel="stylesheet" href="../../lib/style.css"/><script type="text/javascript" src="../../dwr/engine.js"></script><script type="text/javascript" src="../../dwr/util.js"></script><script type="text/javascript" src="../../dwr/interface/hrBean.js"></script><script type="text/javascript" src="../../lib/funcs.js"></script><script type="text/javascript">//<![CDATA[function reqEmpHdr(){ hrBean.revEmpHdr(idv("emp_no"), respEmpHdr);}function respEmpHdr(resp){ var resp1 = resp.split("<i>"); id("status").innerHTML = resp1[0]; id("emp_name").innerHTML = resp1[1]; (3) クライアントコード記述 id("depart").innerHTML = resp1[2]; id("section").innerHTML = resp1[3]; dwrRevEmpHdr.htm 1/2 id("ent_date").innerHTML = resp1[4];}
  • 136. function initOnLoad(){ setListener(id("rev"), "click", reqEmpHdr);} dwrRevEmpHdr.htm 2/2setListener(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">&nbsp;</td></tr> <tr><th>所属部</th><td id="depart">&nbsp;</td></tr> <tr><th>所属課</th><td id="section">&nbsp;</td></tr> <tr><th>更新日</th><td id="ent_date">&nbsp;</td></tr> <tr> <th><input type="button" id="rev" value=" 参照 " /></th> <td id="status">&nbsp;</td> </tr> </tbody> </table> </center></body></html>
  • 137. DOMイベントモデルでの応用 ・ENTERキー押下で表示 ・ID入力と同時に表示
  • 138. <?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" dwrRevEmpHdrKey1.htm "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>社員登録</title><link type="text/css" rel="stylesheet" href="../../lib/style.css"/><script type="text/javascript" src="../../dwr/engine.js"></script><script type="text/javascript" src="../../dwr/util.js"></script><script type="text/javascript" src="../../dwr/interface/hrBean.js"></script><script type="text/javascript" src="../../lib/funcs.js"></script><script type="text/javascript">//<![CDATA[function reqEmpHdr(e){ if(getkcode(e) == 13){ hrBean.revEmpHdr(idv("emp_no").toUpperCase(), respEmpHdr); }} if(idv("emp_no").length == 8){function respEmpHdr(resp){ hrBean.revEmpHdr(idv("emp_no").toUpperCase(), respEmpHdr); dispitems(resp, "emp_name"); }}function initOnLoad(){ setListener(id("emp_no"), "keyup", reqEmpHdr);}setListener(window, "load", initOnLoad);//]]></script>
  • 139. </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">&nbsp;</td></tr> <tr><th>所属部</th><td id="depart">&nbsp;</td></tr> <tr><th>所属課</th><td id="section">&nbsp;</td></tr> <tr><th>更新日</th><td id="ent_date">&nbsp;</td></tr> <tr> <th>&nbsp;</th> <td id="status">&nbsp;</td> </tr></tbody></table></center></body></html>
  • 140. オートコンプリート:社員マスタ参照
  • 141. <?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>社員登録</title><link type="text/css" rel="stylesheet" href="../../lib/style.css"/><style type="text/css"><!--#emp_dat { position: relative; width:370px; height: 180px;}#auto { position: relative; margin-top: -132px; margin-left: 56px; padding: 0px; border-width: 1px; border-style: solid; border-color: #668; width: 186px; height: 130px; z-index: 1; overflow: auto; background-color: #fff;}--> dwrRevEmpHdrAuto1.htm</style>
  • 142. <script type="text/javascript" src="../../lib/funcs.js"></script><script type="text/javascript" src="../../lib/prototype.js"></script><script type="text/javascript" src="../../dwr/engine.js"></script><script type="text/javascript" src="../../dwr/util.js"></script><script type="text/javascript" src="../../dwr/interface/hrBean.js"></script><script type="text/javascript">//<![CDATA[var emp_no, autoRows, autoPos;function incEmpHdr(e){ var ckey = getkcode(e); if(ckey==38 || ckey==40){ autoIncLine(ckey); }else if(ckey==46){ $("emp_no").value = ""; $("emp_name").innerHTML = "&nbsp"; $("depart").innerHTML = "&nbsp;"; $("section").innerHTML = "&nbsp;"; $("ent_date").innerHTML = "&nbsp;"; $("status").innerHTML = "&nbsp;"; $("emp_no").focus(); }else if(ckey==13){ emp_no = $("tr"+autoPos).firstChild.firstChild.nodeValue; $("auto").hide(); hrBean.revEmpHdr(emp_no, respEmpHdr); }else if($F("emp_no").length > 0){ hrBean.revEmpHdrAuto1($F("emp_no"), respEmpHdrAuto); }else{ $("auto").hide(); }}
  • 143. function autoIncLine(ckey){ if(ckey==38){ if(autoPos > 0){ $("tr"+autoPos).style.backgroundColor = "#fff“ --autoPos; $("tr"+autoPos).style.backgroundColor = "#ff6“ } }else if(ckey==40){ if(autoPos < autoRows){ $("tr"+autoPos).style.backgroundColor = "#fff“ ++autoPos; $("tr"+autoPos).style.backgroundColor = "#ff6“ } }}function respEmpHdr(resp){ var recs = resp.split("<r>"); var items = recs[0].split("<i>") if(recs[0].length > 1){ $("emp_no").value = emp_no; $("emp_name").innerHTML = items[0]; $("depart").innerHTML = items[1]; $("section").innerHTML = items[2]; $("ent_date").innerHTML = items[3]; $("status").innerHTML = items[4]; }else{ $("status").innerHTML = items[0]; }}
  • 144. function respEmpHdrAuto(resp){ var recs = resp.split("<r>"); if(recs.length > 1){ $("auto").show(); if($("auto").hasChildNodes()){ $("auto").firstChild.removeNode(true); } var table = document.createElement("table"); table.width = "167"; table.border = "1"; table.cellSpacing = "0"; table.cellPadding = "0"; autoRows = recs.length-1; autoPos = 0; for(var i = 0; i < autoRows; i++){ var items = recs[i].split("<i>"); var tr = table.insertRow(i); tr.id = "tr" + i; for(var j = 0; j < items.length; j++){ var td = tr.insertCell(j); j==0 ? td.width = "75" : td.width = "92"; td.appendChild(document.createTextNode(items[j])); } } $("auto").appendChild(table); }else{ $("status").innerHTML = recs[0]; } $("tr0").style.backgroundColor = "#ff8";}
  • 145. 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">&nbsp;</td></tr> <tr><th>所属部</th><td id="depart">&nbsp;</td></tr> <tr><th>所属課</th><td id="section">&nbsp;</td></tr> <tr><th>更新日</th><td id="ent_date">&nbsp;</td></tr> <tr> <th>&nbsp;</th> <td id="status">&nbsp;</td> </tr> </tbody> </table> </center></body></html>
  • 146. 社員マスタ参照 チェックボックス
  • 147. <?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";
  • 148. 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);}
  • 149. }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”/>SE部 </div> <div id="view"></div> </center></body></html>
  • 150. 仕訳処理-データチェック
  • 151. 仕訳処理-マウス操作のないデータ入力
  • 152. <?xml version="1.0" encoging="UTF-8" standalone="no"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" addJournal.htm "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> 1/3<head><title>クラス1登録</title><link rel="stylesheet" type="text/css" href="style.css" /><script type="text/javascript" src="funcs.js"></script><script type="text/javascript">//<![CDATA[var httpObj = getHttpObject();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; if(httpObj.readyState == 4){ if(httpObj.status == 200){ debit_acct = httpObj.responseText; if(debit_acct.substring(0,2) == "NA"){ alert("借方勘定コード" + debit_code.value + "は存在しません"); }else{ document.getElementById("debit_acct").value = debit_acct; } } }}
  • 153. 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 addJournal.htm + "&credit_code="+credit_code.value + "&credit_acct="+credit_acct.value 2/3 + "&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 /><table width="300"> <tr bgcolor="#ccffcc"> <th align="center" class="title2">伝票番号</th> <th align="center" class="title2">日付</th> <th align="center" class="title2">会計区分</th> </tr>
  • 154. <tr><td ><input type="text" size="10" id="check_no" /></td> <td ><input type="text" size="10" /></td> <td ><input type="text" size="25" /></td> addJournal.htm </tr></table> 3/3<table width="735" border="0"> <tr bgcolor="#ccffcc"> <th>借方コード</th> <th>勘定科目</th> <th>借方金額</th> <th>貸方コード</th> <th>勘定科目</th> <th>貸方金額</th> <th>摘要</th> </tr> <tr><td><input id="debit_code" type="text" size="7" /></td> <td><input id="debit_acct" type="text" size="15" /></td> <td><input id="debit_amt" type="text" size="9" /></td> <td><input id="credit_code" type="text" size="7" /></td> <td><input id="credit_acct" type="text" size="15" /></td> <td><input id="credit_amt" type="text" size="9" /></td> <td><input id="summary" type="text" size="15" /></td> </tr></table><table width="735"> <tr><td width="535" id="status"><td> <th width="100" align="center" bgcolor="#ccffcc">借方合計</th> <td width="100"><input type="text" size="12" /></td></tr> <tr><td><td><th align="center" bgcolor="#ccffcc">貸方合計</th> <td><input type="text" size="12" /></td></tr></table></body></html>
  • 155. addJournal 短縮形//<![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")); }}//]]>
  • 156. <?php$acct_code = $_GET["acct_code"]; setDebitAcct.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("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";}?>
  • 157. <?php$acct_code = $_GET["acct_code"]; addJournal.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("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";}?>
  • 158. 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)) 勘定テーブル
  • 159. ECサイトでの商品表示-商品表示:購入目的商品を効率よく探し出す-金額表示:現在の購入金額を自動表示する
  • 160. ECサイトでの商品表示-操作手順 クラス1項目 クラス2項目 クラス3項目 商品マスタ
  • 161. 商品マスタ登録/参照/更新/削除
  • 162. DWRを使用できない例 – 再帰処理でのUI表示⇒DEBUG機能は使用可能
  • 163. /bomTree1.htm<?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"><!--#upain{ position:absolute; top:25px; left:10px; width:700; height:125px;}#lpain{ position:absolute; top:125px; left:10px; width:700; height:140px;}--></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();
  • 164. function initOnLoad(){ var tagNode, docNode; xhrObj.open("get", "../../mrpsvlt?mode=getfinal", true); xhrObj.setRequestHeader("If-Modified-Since", "01 Jan 2000 00:00:00 GMT"); xhrObj.send(null); xhrObj.onreadystatechange = function(){ if(xhrObj.readyState == 4){ if(xhrObj.status == 200){ finalItems = xhrObj.responseText.split("<i>"); for(var i in finalItems){ docNode = document.createTextNode([0] +finalItems[i]); tagNode = document.createElement("div"); tagNode.setAttribute("id", finalItems[i]); tagNode.appendChild(docNode); id("tree").appendChild(tagNode); } for(var i=0; i < finalItems.length; i++){ finalFlags[i] = "N"; } } } } setListener(id("tree"), "click", getChild); setListener(id("tree"), "mouseover", getItemMas);}
  • 165. function getChild(e, level, p_item){ var i, j, k, index, pad = ; var childItems, childItem, tagNode, docNode; var eid = getid(e); if(!level){ level = 1; p_item = eid; if(eid.substr(0, 1) != A){ return(0); }else{ for(j in finalItems){ if(finalItems[j] == eid){ if(finalFlags[j] == Y){ return(0); }else{ finalFlags[j] = Y; break; } } } } }else{ level++; } for(k=0; k<level; k++){ pad+=------; }
  • 166. 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); } }}
  • 167. function getItemMas(e){ var item_no = getid(e); if(item_no != "tree" && item_no.charAt(0) != "A"){ xhrObj.open("get", "../../mrpsvlt?mode=getiteminfo&item_no=" + item_no); xhrObj.setRequestHeader("If-Modified-Since", "01 Jan 1970 00:00:00 GMT"); xhrObj.send(null); xhrObj.onreadystatechange = function(){ if(xhrObj.readyState == 4){ if(xhrObj.status == 200){ var get = xhrObj.responseText.split("<i>"); var out = "<table width=500 border=1><tr>" + "<td>部品番号</td><td>部品名</td><td>ベンダNO</td><td>ベンダ名</td></tr><tr>" + "<td>"+item_no+"</td><td>"+get[0]+"</td><td>"+get[2]+"</td><td>"+get[3]+"</td>" + "</tr></table>"; id("item").innerHTML = out; } } } }}setListener(window, "load", initOnLoad);//]]></script></head><body><h2>Ajax-ERP 部品構成表示</h2><table id="upain"><tr><td>部品情報</td><td id="item"></td></tr></table><table id="lpain"><hr/><tr><td id="tree"></td></tr></table></body></html>
  • 168. 部品構成にソート機能追加、マウスドラッグで構成配置変更 169
  • 169. script.aculo.us (スクリプタキュラス)http://script.aculo.us/Web画面にエフェクト効果を与えるJavaScriptライブラリ・Ajaxコンロトロール・アニメーション・ドラッグ&ドロップ・DOMユーティリティ・ユニットテスト・MIT License 170
  • 170. Scaleサンプル 171
  • 171. <?xml version="1.0" encoding="utf-8" standalone="no"?>scale.htm <!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> 172
  • 172. Droppableサンプル 173
  • 173. droppable.htm 1/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"><!--#box1 { position:absolute; top:50px; left:10px;z-index:2;width:150px;height:60px;background:#ccf;}#box2 { position:absolute; top:50px; left:170px;z-index:1;width:150px;height:60px;background:#fcc;}#dropBox {position:absolute; top: 200px; left:10px;z-index:0;width:310px;height:180px;background:#cfc;}--></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> 174
  • 174. droppable.htm 1/2<script type="text/javascript" charset="utf-8">//<![CDATA[//var dragObj;function func1(){new Draggable("box1", { revert:true } );new Draggable("box2", { revert:true } );Droppables.add("dropBox", { onDrop: function(element, droppableElement){ $(droppableElement).innerHTML += "<br/>" + element.id + "がドロップされました"; }, accept:"out" });}addListener(self, "load", func1, false);//]]></script></head><body><h2>script.aculo.us ドロップエリア設定</h2><div id="box1" class="out">box1:<br/>ドロップできます</div><div id="box2">box2:<br/>ドロップできません</div><div id="dropBox">ドロップゾーン:</div></body></html> 175
  • 175. ソート(Sortable)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 : ソートされ順序が変更された時の処理 176 onUpdate : ソートされ順序が変更された後の処理
  • 176. Sortableサンプル-1 177
  • 177. Sortableサンプル-1 :FireBugでのDOMツリー変化確認
  • 178. <style type="text/css" media="screen">sort1.htm <!-- #list { padding: 2px; background:red;} #list li { background: #ffb; margin:2px; padding: 2px; } .area {width:350px;height:300px;overflow:scroll; position:relative;" id="scroll-container"; } --> </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 sorta(){ Position.includeScrollOffsets = true; Sortable.create(list,{scroll:scroll-container}); } addListener(self, "load", sorta, false); //]]> </script> </head> <body> <h2>script.aculo.us ソータブル</h2> <div class="area"> <ul id="list"> <li>北海道</li><li>青森</li><li>秋田</li><li>岩手</li><li>山形</li> <li>宮城</li><li>福島</li><li>栃木</li><li>群馬</li><li>茨城</li> <li>千葉</li><li>埼玉</li><li>東京</li><li>神奈川</li><li>山梨</li> </ul> </div> </body> </html> 179
  • 179. Ajaxでのコールバック処理 リクエスト待受 リクエスト送信 クライアント型処理 N 条件成就? Y サーバ型処理レスポンス待受 レスポンス送信 クライアント サーバ
  • 180. Ajax コールバックサンプル-1(タイマープルでのコールバック)
  • 181. cback.htm<?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>
  • 182. cback.js//<![CDATAvar 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);}
  • 183. function startCallBackExe() { if (httpObj.readyState == 4) { if (httpObj.status == 200) { var get = httpObj.responseText; if (get.substring(0,3) != "end") { var new_row = create_tr(get); var table = document.getElementById("callbackout"); var table_body = table.getElementsByTagName("tbody").item(0); var first_row = table_body.getElementsByTagName("tr").item(1); table_body.insertBefore(new_row, first_row); setTimeout("startCallBack()", 3000); waitTime(); } } }}
  • 184. function waitTime(){ var time_span = document.getElementById("time"); var time_val = time_span.innerHTML; var intval = parseInt(time_val); var new_intval = intval - 1; if (new_intval > -1) { setTimeout("waitTime()", 1000); time_span.innerHTML = new_intval; } else { time_span.innerHTML = 3; }}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 setListeners() { var eSrc = document.getElementById("start"); addListener(eSrc, "click", initCallBack, false);}addListener(window, "load", setListeners, false);//]]>
  • 185. cback.javapackage 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 = "";
  • 186. 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(); }}
  • 187. Ajax コールバックサンプル-1(サーバ条件マッチでのコールバック)
  • 188. cbacks.htm<?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> cbacks.htm<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>
  • 189. cbacks.js//<![CDATAvar 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(); } }}
  • 190. 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);//]]>
  • 191. cbacks1.javapackage 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");
  • 192. 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(); }}
  • 193. “777マッチ”でのコールバックと自動グラフ表示
  • 194. 777コールバック表示:使用される要素技術とライブラリ[要素技術とライブラリ]①イベント処理 -click +funcs.js②サーバ通信 -繰返し継続での非同期通信 (GET/非同期) +funcs.js③+④+⑤表示制御 -DOMノード操作 -連想配列処理(グラフ表示用) +plotr(グラフ) +Yahoo! UI Library(ドラッグ&ドロップ)
  • 195. Plotr Ajaxモデルでのグラフ作成 http://www.solutoire.com/plotr・グラフ作成 -棒グラフ -折れ線グラフ -円グラフ・ブラウザサポート Firefox 1.5+ Safari 2.0+ Opera 9.0+ IE6+ (emulated)・BSD LIcenseBSD License・無保証であることの明記と著作権表示だけを再頒布の条件とする。・著作権表示を行えば、BSDライセンスのソースコードを他のプログラム に組み込み、組み込み後のソースコードを非公開にできる。 196
  • 196. Plotrインストール手順http://www.solutoire.com/plotrからダウンロード・解凍後、下記css、jsァイル指定※ prototype.js 1.5 が必要<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> 197
  • 197. 棒グラフ表示例-1 198
  • 198. 棒グラフ表示例ー1 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><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); 1.canvasタグで描画領域を設定し//]]></script> ID名を指定。</head><body><h2>Draw Pie1&nbsp;&nbsp;<input type="button" id="draw" value="グラフ表示" /></h2><div><canvas id="graph" height="300" width="600"></canvas></div></body> 199</html>
  • 199. 棒グラフ表示例-1 javascriptfunction 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]] }; var options = { padding: {left: 80, right: 0, top: 10, bottom: 10}, backgroundColor: "#dbdbdb", colorScheme: "#009", xTicks: [ 2.canvasタグのID名を {v:0, label:"商用Unix"}, Plotr.BarChart()の最初のパラメータとして指定 {v:1, label:"FreeBSD"}, {v:2, label:"Linux"}, 3.2番目のパラメータはグラフを描画するオプション {v:3, label:"Windows"} を指定。 ] }; var bar = new Plotr.BarChart("graph", options); bar.addDataset(dataset); bar.render();} 200
  • 200. 棒グラフ表示例-2 201
  • 201. 棒グラフ表示例-2 javascriptfunction drawGraph(){ var dataset = { "py2007Q2": [[0, 1], [1, 1], [2, 1.2], [3, 1.5]], "py2007Q3": [[0, 0.5], [1, 0.89], [2, 2.15], [3, 4]] }; var options = { padding: {left: 80, right: 0, top: 10, bottom: 10}, backgroundColor: "#ff8", colorScheme: "#500", barOrientation : "horizontal", xTicks: [ {v:0, label:"商用Unix"}, {v:1, label:"FreeBSD"}, {v:2, label:"Linux"}, {v:3, label:"Windows"} ] }; var bar = new Plotr.BarChart("graph", options); bar.addDataset(dataset); bar.render();} 202
  • 202. 棒グラフ表示例-3 (枠線の指定) 203
  • 203. 棒グラフ表示例-3 function drawGraph(){ javascript 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]] }; var options = { padding: {left: 80, right: 0, top: 10, bottom: 10}, backgroundColor: "#ececec", colorScheme: "#00a", strokeWidth : 3, strokeColor:"Red", xTicks: [ {v:0, label:"商用Unix"}, {v:1, label:"FreeBSD"}, {v:2, label:"Linux"}, {v:3, label:"Windows"} ] }; var bar = new Plotr.BarChart("graph", options); bar.addDataset(dataset); bar.render(); } 204
  • 204. 折れ線グラフの描画方法・canvasタグで描画領域を設定。・canvasタグにID名を指定し、 このID名をPlotr.LineChart()の最初のパラメータとして指定・2番目のパラメータはグラフを描画するオプションを指定。
  • 205. 折れ線グラフ表示例-1 206
  • 206. 折線グラフ表示例-1 javascript function drawGraph(){ var dataset = { "y2007Q1": [[0, 5.5], [1, 7.89], [2, 8.15], [3, 9.8]], "y2006Q4": [[0, 1], [1, 2], [2, 3.2], [3, 4.5]], "y2006Q3": [[0, 0.5], [1, 1.6], [2, 1.2], [3, 1.5]] }; var options = { padding: {left: 50, right: 0, top: 10, bottom: 10}, backgroundColor: "#dbdbdb", colorScheme: "#009", xTicks: [ {v:0, label:"FY2007:1Q"}, {v:1, label:"FY2007:2Q"}, {v:2, label:"FY2007:3Q"}, {v:3, label:"FY2007:4Q"} ] }; var gLine = new Plotr.LineChart("graph", options); gLine.addDataset(dataset); gLine.render(); } 207
  • 207. 折れ線グラフ表示例-2 208
  • 208. 折線グラフ表示例-1 javascript function drawGraph(){ var dataset = { "y2007Q1": [[0, 5.5], [1, 7.89], [2, 8.15], [3, 9.8]], "y2006Q4": [[0, 1], [1, 2], [2, 3.2], [3, 4.5]], "y2006Q3": [[0, 0.5], [1, 1.6], [2, 1.2], [3, 1.5]] }; var options = { padding: {left: 50, right: 0, top: 10, bottom: 10}, backgroundColor: "#dbdbdb", colorScheme: "#550000", shouldFill: false, xTicks: [ {v:0, label:"FY2007:1Q"}, {v:1, label:"FY2007:2Q"}, {v:2, label:"FY2007:3Q"}, {v:3, label:"FY2007:4Q"} ] }; var gLine = new Plotr.LineChart("graph", options); gLine.addDataset(dataset); gLine.render(); } 209
  • 209. 円グラフの描画方法・canvasタグで描画領域を設定。・canvasタグにID名を指定し、 このID名をPlotr.PieChart()の最初のパラメータとして指定・2番目のパラメータはグラフを描画するオプションを指定。
  • 210. 円グラフ表示例 211
  • 211. 円グラフ表示例 javascript function drawGraph(){ var dataset = { "share": [[0, 8], [1, 18], [2, 28], [3, 46]] }; var options = { padding: {left: 50, right: 0, top: 10, bottom: 10}, backgroundColor: "#dbdbdb", colorScheme: "#00a", xTicks: [ {v:0, label:"商用Unix"}, {v:1, label:"FreeBSD"}, {v:2, label:"Linux"}, {v:3, label:"Windows"} ] }; var pie = new Plotr.PieChart("graph", options); pie.addDataset(dataset); pie.render(); } 212
  • 212. [実習-2]棒グラフをご自分のディレクトリで動作確認してください。 213
  • 213. コンテキスト・オブジェクトを使用したコールバック処理受注情報の登録とコールバックの別画面表示 パラメータ情報 コンテキスト・オブジェクト web.xml Javaサーブレット 確認 登録 Javaサーブレット 受注DB DBコールバック コールバック リクエスト レスポンス 受注登録Web WebGUI GUI Ajaxクライアント Ajaxクライアント 214
  • 214. 非同期処理でのリッチクライアント - 受注情報登録画面 215
  • 215. 受注情報登録でのAjax適用 ←顧客IDまたはTEL 入力と同時に顧客情報 を自動表示 ←カレンダ日付けクリック で受注関連年月日情報 の入力と変更 ←商品IDと数量入力で -商品名自動表示 -小計と合計額自動表示
  • 216. 受注情報登録と別画面へのコールバック表示-表示受注一覧からボリュームオーダへのドラッグ&ドロップ
  • 217. 受注情報登録:使用される要素技術とライブラリ[要素技術とライブラリ]①イベント処理-DOMイベントモデル イベントオブジェクト、テキスト入力長+funcs.js②サーバ通信⑤演算処理-非同期通信利用のコールバック (GET/非同期)+funcs.js③+④表示制御-DOMノード操作-CSSスタイル指定+Yahoo! UI Library(日本語カレンダ表示、ドラッグ&ドロップ)+script.aculo.us(ドラッグ&ドロップ)※サーバサイド+コンテキストオブジェクト(サーブレット)
  • 218. ・Programmable Web Google Maps API の追加・マルチメディア表示
  • 219. ロングテイル Webサービス DB 集合知 ・プログラマブルWeb ユーザ参加 Google 貢献者としてのユーザ ・マッシュアップ Yahoo! Amazon RSS ATOM wiki blog ユーザ参加 公開 SOAP HTTP sns 貢献者としてのユーザ REST + XML 集合知 DB 根本的な信頼 Ajax API FolksonomyプラットホームとしてのWeb マッシュアップ ユーザーの手による情報の自由な整理 リッチなユーザ体験 マッシュアップ XHR Ajax DB 適用業務 DB マルチデバイス 社内システム
  • 220. マッシュアップ構成とライブラリの粒度 サイト内 外部インターネット (プログラマブルWeb)[Webクライアント] [Webサーバ] ・Google AJAX Search API Type1 REST ・Google Maps API サーバ ・Google SOAP Type2 XHR SOAP/REST Search API プログラム サーバ Type3 XHR プログラム アプリケーション プログラム ライブラリ 大粒度:コンポーネント Web ・Yahoo!UIカレンダ ・Plotrグラフ作成ブラウザ 中度:コントロール ・ActiveWidgets ダウン ・Script.aculo.us ロード Ajax 小粒度:言語機能 ・Prototype.js
  • 221. マッシュアップ構成とライブラリの粒度 サイト内 外部インターネット (プログラマブルWeb)[Webクライアント] [Webサーバ] IMG ・Google AJAX Search API Type1 REST ・Google Maps API サーバ ・Google SOAP Type2 XHR SOAP/REST Search API プログラム サーバ Type3 XHR プログラム アプリケーション プログラム ライブラリ 大粒度:コンポーネント Web ・Yahoo!UIカレンダ ・Plotrグラフ作成ブラウザ 中度:コントロール ・ActiveWidgets ダウン ・Script.aculo.us ロード Ajax 小粒度:言語機能 ・Prototype.js
  • 222. Google Maps APIGoogle Mapsの使い方(1) Googleアカウントを所得https://www.google.com/accounts/ ManageAccount(2)Google Maps APIキーの所得http://www.google.com/apis/maps/
  • 223. 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_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>
  • 224. マーカクリックで画像付き吹き出しを表示する
  • 225. <?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_H9GM6zkZRwNii93jtvjOSYqRTUvjXBD0wChGoBh2xb30zNzkqZmA" 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);
  • 226. 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>
  • 227. 住所/スポット名入力で地図を表示する
  • 228. gmaddr.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"><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-QmjsewWxRgE_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); }}
  • 229. function showMap(e) { if(getkcode(e) == 18){ var addr = id("addr").value; if (geocoder) { geocoder.getLatLng( addr, function(point) { if (!point) { alert(addr + " が探せません。"); } else { map.setCenter(point, 15); var marker = new GMarker(point); map.addOverlay(marker); var msg = "ここへ到着、ここから出発<br/>付近を検索、マイマップに保存<br/>"; marker.openInfoWindowHtml(addr + "です。<br>" + msg); } }); } }}setListener(window, "load", initOnLoad);//]]></script></head><body>住所/スポット名入力で地図を表示する<br/><b>住所/スポット名</b><input type="text" size="59" id="addr"/><div id="map" style="width: 500px; height: 370px"></div></body></html>
  • 230. Yahoo! UI Library http://developer.yahoo.com/yui/JavaScriptで記述されたWebクライアント用総合ライブラリ 231
  • 231. Yahoo UI Library モジュール区分 Animation Motion Button Panel Calendar Point Connection Region Dom Scroll DragDrop Slider Event TabView Logger TreeView Menu YAHOO 233
  • 232. Animation :ボックス拡大 234
  • 233. <?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"><!--#box {width:100px; height:100px; background:#bbf;}--></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> 235
  • 234. //<![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);//]]> 236
  • 235. Animation :ボックス幅拡大 237
  • 236. <style type="text/css"> <!-- #box {width:100px; height:100px; background:#bbf;} --> </style>//<![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);//]]> 238
  • 237. カレンダー1 239
  • 238. <?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> 240
  • 239. カレンダー2 2カ月表示 241
  • 240. <?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> 242</html>
  • 241. カレンダー3 日本語表示 243
  • 242. <?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><!--.yui-calendar td.wd0 { background-color:#fde0e0; }.yui-calendar td.wd0 a { color:red; }--></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> 244</html>
  • 243. 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();} 245
  • 244. 日本語カレンダのドラッグ&ドロップ 246
  • 245. <?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><!--#out {top:60px; left:60px}.yui-calendar td.wd0 { background-color:#fde0e0; }.yui-calendar td.wd0 a { color:red; }--></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> 247
  • 246. //<![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);//]]> 248
  • 247. カレンダ使用での日付入力
  • 248. calendar4.htm (1/4)<?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><!--#hdr { position:absolute; top:10px; left:30px; font-size: 20px; font-weight: 800; color: #c02; z-index:1;width:200px;height:25px;}#ord { position:absolute; top:50px; left:20px; font-size: 15px; z-index:1;width:155px;height:155px;}#cal { position:absolute; top:50px; left:250px; z-index:1;width:165px;height:165px;}.yui-calendar td.wd0 { background-color:#fde0e0; }.yui-calendar td.wd0 a { color:red; }--></style>
  • 249. calendar4.htm (2/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");
  • 250. cal1.selectEvent.subscribe(function(eventName, selectDate){ var sdate1 = selectDate.toString(); var sdate2 = sdate1.replace(",", "/").replace(",", "/"); $(fid).value = sdate2; if(fid=="inqDate"){ calendar4.htm (3/4) 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>
  • 251. calendar4.htm (4/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>
  • 252. [演習-3]棒グラフをドラッグ&ドロップできるように修正して下さい 254
  • 253. dragdrop3.htm (1/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]] };
  • 254. dragdrop3.htm (2/3)var options = { padding: {left: 80, right: 0, top: 10, bottom: 10}, backgroundColor: "#dbdbdb", colorScheme: "#009", xTicks: [ {v:0, label:"商用Unix"}, {v:1, label:"FreeBSD"}, {v:2, label:"Linux"}, {v:3, label:"Windows"} ] }; var bar = new Plotr.BarChart("graph", options); bar.addDataset(dataset); bar.render(); ddBox = new YAHOO.util.DD("out");}function setListeners(){ addListener($("draw"), "click", drawGraph, false);}addListener(window, "load", setListeners, false);//]]></script></head>
  • 255. dragdrop3.htm (3/3)<body><h2>Draw Bar1&nbsp;&nbsp;<input type="button" id="draw" value="グラフ表示" /></h2><div id="out"><canvas id="graph" height="300" width="600"></canvas></div></body></html>
  • 256. Yahoo! UI Library カレンダー表示 258
  • 257. テーブルでのCRUD処理:使用される要素技術とライブラリ[要素技術とライブラリ]①イベント処理 -DOMモデルでのイベント伝播 +funcs.js②サーバ通信 -配列データのサーバ送受信 +DWRでのJavaサーバ開発③+④+⑤表示制御 -DOMノード操作での動的 ・テーブル行/列追加 ・テーブル行/列挿入 +funcs.js
  • 258. テーブル表示 テーブル表示 (標準DOMノード操作)
  • 259. <?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"><!--.t1 {bgcolor: #ccccff;}--></style><script type="text/javascript" src="../../lib/funcs.js"></script><script type="text/javascript">//<![CDATAfunction 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");
  • 260. 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); }
  • 261. 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>
  • 262. テーブル表示(HTML TableElementインターフェイスを使用)
  • 263. <?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">//<![CDATAfunction 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))); } }
  • 264. 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>
  • 265. [演習-4]ボタンクリックで下図のようなテーブルを表示するプログラムを作成してください(行数・列数は任意です)。
  • 266. テーブルでの参照・登録・更新・削除-1テーブル:行追加、列追加、行挿入、列挿入サーバ :表データの登録、参照、更新、削除(crud)
  • 267. テーブルでの参照・登録・更新・削除-2
  • 268. テーブル応用画面 セレクトメニューからの選択と自動カウント
  • 269. テーブル応用画面
  • 270. ActiveWidgets・AjaxでのRIA構築に向けた UIコントロールライブラリ http://www.activewidgets.com/・HTMLフォームコントロール との共用可・GPLと商用ライセンスの デュアル・ライセンスで配布 272
  • 271. ActiveWidgetsインストール手順http://www.activewidgets.com/からトライアル版ダウンロード・解凍後、下記css、jsァイル指定<link rel="stylesheet" type="text/css" href="../lib/aw.css"/><script type="text/javascript" src="../lib/aw.js"></script> 273
  • 272. [2] JavaScript関数での実行(1) タブコントロール コード12(1/3)<?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" /> 274
  • 273. <style type="text/css"> コード12(2/3)#menuTabs {width: 850px; height:30 px;} // Tabs#memuTabs .aw-list-item {color: blue} // Items</style><script type="text/javascript" src="awidgets/runtime/lib/aw.js"></script><script type="text/javascript" src="./lib/funcs.js"></script><script type="text/javascript">//<![CDATA[var httpObj = getHttpObject();function tabs1(){ var menu; var sp ="&nbsp;&nbsp;&nbsp&nbsp;" var tabs = new AW.UI.Tabs; tabs.setId("menuTabs"); // necessary for CSS rules tabs.setItemText(["Ajaxの概要", "要素技術&nbsp;", "Ajax応用例", "JS機能拡張", "UI表示ー1", "UI表示ー2", "Backbase&nbsp;", "サーバサイド", "Webサービス ", "セキュリティ&nbsp"]);tabs.setItemCount(8); // same as setViewCount()tabs.refresh(); 275
  • 274. コード12(2/3)tabs.onSelectedItemsChanged = function(array){ if(array == "0"){ menu = "ajax.txt"; }else if(array == "1"){ menu = "tec.txt"; }else if(array == "2"){ menu = "app.txt"; }else if(array == "3"){ :}httpObj.open("get", menu, false);httpObj.send(null);var indata = httpObj.responseText;document.getElementById("menu").innerHTML = indata;}}addListener(window, "load", tabs1, false);//]]></script> 276
  • 275. コード12(3/3)</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> 277
  • 276. (3) コンボボックス 278
  • 277. コード17(1/2)<?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><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"}; 279
  • 278. コード17(2/2) 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> 280
  • 279. [演習-4] スプレッドシート作成・コンボボックスで行、列を指定できるようにする・行と列を選択後、選択された行、列をアラート表示⇒この後の演習で、指定された行数列数のグリッドを表示 281
  • 280. //<![CDATA[var rows, cols; spread1.jsvar rowcb = new AW.UI.Combo; // Create combo boxvar colcb = new AW.UI.Combo; // Create combo boxfunction 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);//]]>
  • 281. グリッドコントロール サンプル2・イベントハンドラ使用の関数呼び出し形式 283
  • 282. グリッド表示サンプル XHTML grid1.htm<?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> 284
  • 283. グリッド表示サンプル CSS grid1.css<!-- #grid1 .aw-grid-row {height: 20px; border-bottom: 1px solid #ccc} #grid1 .aw-alternate-even {background: #fff;} #grid1 .aw-alternate-odd {background: #eee;} #grid1 .aw-alternate-even .aw-column-1 {background: #eee;} #grid1 .aw-alternate-odd .aw-column-1 {background: #ddd;} #grid1 .aw-rows-selected {background: #316ac5;} #grid1 .aw-rows-selected .aw-column-1 {background: #316ac5;} #grid1 .aw-column-0 {width: 50px; border-right: 1px dotted #ccc;} #grid1 .aw-column-1 {width: 150px; border-right: 1px dotted #ccc;} #grid1 .aw-column-2 {text-align: right} #grid1 .aw-column-3 {text-align: right} #grid1 .aw-column-4 {text-align: right} #grid1 .aw-mouseover-cell {color: red;} #grid1 .aw-grid-row .aw-cells-selected {background: #316ac5;} #grid1 .aw-grid-headers {color: blue} #grid1 .aw-grid-headers .aw-column-1 {font-weight: bold} #grid1 .aw-mouseover-header {color: red;} #grid1 .aw-mousedown-header {color: yellow;} #grid1 .aw-header-1 {background: #def} #grid1 .aw-row-selector {width: 20px; text-align: center} #grid1 .aw-row-2 .aw-row-selector {font-weight: bold} #grid1 .aw-mouseover-row .aw-row-selector {color: red;} #grid1 .aw-mouseover-selector {background: green;} #grid1 .aw-mousedown-selector {background: yellow;}--> 285
  • 284. グリッド表示サンプル JavaScript grid1.js(1/2)//<![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 = [“ティカー”, “会社名”, “マーケット”, “$セールス”, “従業員数”]; //グリッドタイトルの指定 286
  • 285. grid1.js(2/2) 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);//]]> 287
  • 286. グリッドコントロール サンプル4行列指定でのグリッド表示とデータベース登録・更新・参照・削除 288
  • 287. XHTML コード30(1/2)<?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><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> 289
  • 288. コード30(2/2) <button type="button" class="b3" id="del">削除</button> </td></tr></table><table><tr><td id="status">&nbsp;</td></tr></table><table> <tr> <td id="tinf"></td> <td>&nbsp;&nbsp;&nbsp</td> <td>行数指定</td><td id="rows"></td> <td>&nbsp;&nbsp;&nbsp</td> <td>列数指定</td><td id="cols"></td> </tr></table><table><tr><td id="tout"></td></tr></table></center></body></html> 290
  • 289. CSS コード31(1/2)<!--#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;} 291
  • 290. コード31(2/2)#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;}--> 292
  • 291. JavaScript コード21(1/8)//<![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 boxvar obj2 = new AW.UI.Combo; // Create combo boxfunction 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; } 293
  • 292. コード21(2/8) 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); 294
  • 293. for(j=0; j<rows; j++){ myData[j] = new Array(cols); } コード21(3/8) 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){ 295
  • 294. gridw = 28 + 80 * cols; gridh = 460; コード21(4/8)}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 arrayobj.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); 296
  • 295. コード21(5/8) 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>"; } 297
  • 296. out += "</table>"; document.getElementById("out2").innerHTML = out; コード21(6/8) 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>"); 298
  • 297. var1 = recs[0].split("<i>"); rows = var1[0]; cols = var1[1]; コード21(7/8) 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"){ 299
  • 298. コード21(8/8) 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);//]]> 300
  • 299. [演習-5] スプレッドシート作成コンボボックスで指定した行、列でグリッド表示 301
  • 300. 行、列演算機能の追加 302
  • 301. //<![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); } }}
  • 302. function calcRowSum(ecol, erow){ if(col1 >= 0 && row1 >= 0){ 行計算関数 col2 = ecol; row2 = erow; if(col2 > col1 && row1 == row2){ sum = parseFloat(0); for(i = col1; i <= col2; i++){ if(isNaN(parseFloat(cdat[row1][i])) != true){ sum += parseFloat(cdat[row1][i]); } } cdat[row1][++col2] = sum; grid.setId("grid"); grid.setCellText(cdat); // 2-dimensional js array $("grid").innerHTML = grid; col1 = -1; row1 = -1; col2 = -1; row2 = -1; } }else{ col1 = ecol; row1 = erow; }}
  • 303. function calcColSum(ecol, erow){ if(col1 >= 0 && row1 >= 0){ 列計算関数 col2 = ecol; row2 = erow; if(row2 > row1 && col1 == col2){ sum = parseFloat(0); for(i = row1; i <= row2; i++){ if(isNaN(parseFloat(cdat[i][col1])) != true){ sum += parseFloat(cdat[i][col1]); } } cdat[++row2][col1] = sum; grid.setId("grid"); grid.setCellText(cdat); // 2-dimensional js array $("grid").innerHTML = grid; col1 = -1; row1 = -1; col2 = -1; row2 = -1; } }else{ col1 = ecol; row1 = erow; }}
  • 304. 演習-6 スプレッドシート作成ファイル名でデータ参照機能の追加 306
  • 305. 演習-6 ヒントグリッドデータのサーバアクセス処理 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"); }
  • 306. function showGrid(rows, cols, flag){ var i, j, k, row, col, cell_text; if(flag == "new"){ 受信データの配列セット : (1/2) }else if(flag=="upd"){ cdat = new Array(rows); for(j=0; j<rows; j++){ cdat[j] = new Array(cols); } for(j=0; j<rows; j++){ for(k=0; k<cols; k++){ cdat[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]; cdat[row][col] = cell_text; } rowcb.setControlText(rows); colcb.setControlText(cols); } :
  • 307. 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)}
  • 308. Webスプレッドシート ブラウザでのスプレッドシート処理DWRでの Ajaxクライアント + サーバサイドJava 構成・行、列の動的追加と削除 ・行列演算機能・マクロ演算機能 ・CSVファイル読み込み・グリッド表示データのグラフ表示(棒グラフ、折線グラフ、円グラフ)
  • 309. UIとサーバ通信の分離 Java Beans DB (POJO) DWRサーブレットActiveWidgets ①イベント処理 Web DWR 他コンポーネント GUI ②サーバ通信 ③UI表示 plotr ④表示制御 ⑤演算処理 Ajaxエンジン
  • 310. グリッドでのCRUD処理:使用される要素技術とライブラリ[要素技術とライブラリ]①イベント処理 -ActiveWidgetsイベント処理 +funcs.js②サーバ通信 +DWRでのJavaサーバ開発 +DWRでの配列データ送信③+④+⑤表示制御 +ActiveWidgetsグリッド処理 +ActiveWidgetsコンボ処理 +plotrでのグラフ表示 +funcs.js
  • 311. 行合計表示 列合計表示
  • 312. 行列総合計表示 行列総平均表示
  • 313. マクロ登録と実行 (1,8) = (1,2) * (1,3) (2,8) = (1,7) - (1,6) * 2
  • 314. CSVファイル読み込み
  • 315. 棒グラフ表示(縦) 棒グラフ表示(横)
  • 316. 折れ線グラフ表示 円グラフ表示
  • 317. Appendix
  • 318. ActiveWidgets・AjaxでのRIA構築に向けた UIコントロールライブラリ http://www.activewidgets.com/・HTMLフォームコントロール との共用可・GPLと商用ライセンスの デュアル・ライセンスで配布 320
  • 319. ActiveWidgetsインストール手順http://www.activewidgets.com/からトライアル版ダウンロード・解凍後、下記css、jsァイル指定<link rel="stylesheet" type="text/css" href="../lib/aw.css"/><script type="text/javascript" src="../lib/aw.js"></script> 321
  • 320. [1] 簡単なサンプル -bodyタグ内での実行 -ActiveWidgetsオリジナル1 グリッド<html><head> コード1<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> 322
  • 321. 2 タブ コード2<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> 323</html>
  • 322. 3 コンボボックス<html> コード3(1/2)<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); //コンボリストへのテキスト割り当て 324
  • 323. combo.setItemImage(itemImageArray); //コンボリストへの画像割り当て コード3(2/2)combo.setItemCount(4); //コンボリスト項目数指定combo.refresh(); //コンボ表示</script></body></html> 325
  • 324. 4 ツリー<html> コード4(1/2)<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]}; //ツリー表示テキストをツリー構造に割り当て 326
  • 325. var tree = new AW.UI.Tree; //ツリーインスタンス生成 コード4(2/2)tree.setId("tree1"); //ツリー表示タグ位置ID指定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> 327
  • 326. [実習-3]・グリッド、タブメニュー、コンボボックス、 ツリーをディレクトリにコピーし機能確認 して下さい。 328
  • 327. 5 チェックリスト コード5(1/2)<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); //チェックボックス表示項目数指定 329
  • 328. checkedList.refresh(); //チェックボックス表示 コード5(2/2)</script></body></html> 330
  • 329. 6 ラジオボタン コード6(1/2)<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); //ラジオボタン表示数指定 331
  • 330. radio.setSelectedItems([0]); //初期選択をトップボタン(Home)に指定radio.refresh(); //ラジオボタン表示 コード6(2/2)</script></body></html> 332
  • 331. 7 リスト コード7(1/2)<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); //リストへ表示画像割り当て 333
  • 332. list.setItemCount(4); //リスト表示項目数指定list.refresh(); //リスト表示 コード7(2/2)</script></body></html> 334
  • 333. 8 グループ コード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> 335
  • 334. 9 インプット コード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> 336
  • 335. 10 ボタン コード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> 337
  • 336. 11 リンク コード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> 338
  • 337. Enterprise2.0
  • 338. script.aculo.us (スクリプタキュラス)http://script.aculo.us/Web画面にエフェクト効果を与えるJavaScriptライブラリ・Ajaxコンロトロール・アニメーション・ドラッグ&ドロップ・DOMユーティリティ・ユニットテスト・MIT License 340
  • 339. エフェクト(Effect)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 341
  • 340. Appearサンプル ボタンクリックで出現させる 342
  • 341. 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 343
  • 342. BlidDownサンプル 水色ボックス内クリックでブラインドダウン 344
  • 343. <?xml version="1.0" encoding="utf-8" standalone="no"?>blindup.htm <!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"> <!-- #area{width:320; height:125px; background:#ddf; font-size:20px; font-weight:600} --> </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> 345
  • 344. 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 346
  • 345. BlidUpサンプル 水色ボックス内クリックでブラインドアップ 347
  • 346. <?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"blindup.htm "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"> <!-- #area{width:480; height:125px; background:#ddf; font-size:20px; font-weight:600} --> </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> 348
  • 347. 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 349
  • 348. DropOut 水色ボックス内クリックでドロップアウト 350
  • 349. <?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"dropout.htm "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"> <!-- #area{width:500; height:125px; background:#ddf; font-size:20px; font-weight:600} --> </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> 351
  • 350. 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 352
  • 351. DropOut 水色ボックス内クリックでフェードアウト
  • 352. <?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"dropout.htm "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"> <!-- #area{width:500; height:125px; background:#ddf; font-size:20px; font-weight:600} --> </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> 354
  • 353. 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 355
  • 354. DropOut 水色ボックス内クリックでホールド
  • 355. <?xml version="1.0" encoding="utf-8" standalone="no"?>fold.htm <!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"> <!-- #area{width:500; height:125px; background:#ddf; font-size:20px; font-weight:600} --> </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> 357
  • 356. 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 358
  • 357. Growサンプル 359
  • 358. grow.htm <style type="text/css"> <!-- #area {width:400; height:130px; background:#eef; font-weight:600} --> </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 Grow(){ var node = document.getElementsByTagName("p").item(0); for(var i = 5 ; i < 10; i++){ var div = document.createElement("div"); div.style.fontSize = "30px"; div.style.color = "#e02"; var text = document.createTextNode("Ajax World 200" + i); div.appendChild(text); node.appendChild(div); } node.setAttribute("id","area"); $("area").visualEffect("Grow", {transition: Effect.Transitions.linear}); } function listeners(){ var eSrc = $("exe"); addListener(eSrc, "click", Grow, false); } addListener(self, "load", listeners, false); //]]> </script> 360
  • 359. 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 361
  • 360. Highlightサンプル 362
  • 361. <?xml version="1.0" encoding="utf-8" standalone="no"?>highlight.htm <!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"> <!-- #area {width:210px; height:100px; background:#ddf; font-size:40px; font-weight:700; color: #d03; } --> </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> 363
  • 362. 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 364
  • 363. MobeByサンプル 365
  • 364. <?xml version="1.0" encoding="utf-8" standalone="no"?>moveby.htm <!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"> <!-- #area{width:125px; height:125px; background:#ddf; font-size:20px; font-weight:600} --> </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> 366
  • 365. 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 367
  • 366. Opacityサンプル 368
  • 367. <?xml version="1.0" encoding="utf-8" standalone="no"?>opacity.htm <!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"> <!-- #area{width:125px; height:125px; background:#ddf; font-size:20px; font-weight:600} --> </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> 369
  • 368. 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 370
  • 369. Puffサンプル 371
  • 370. <?xml version="1.0" encoding="utf-8" standalone="no"?>puff.htm <!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"> <!-- #area{width:300px; height:110px; background:#ddf;} --> </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> 372 </html>
  • 371. 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 373
  • 372. Pulsateサンプル 374
  • 373. <?xml version="1.0" encoding="utf-8" standalone="no"?>pulsate.htm <!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"> <!-- #area{width:300px; height:110px; background:#ccf;} --> </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> 375
  • 374. 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 376
  • 375. Scaleサンプル 377
  • 376. <?xml version="1.0" encoding="utf-8" standalone="no"?>scale.htm <!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> 378
  • 377. 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 379
  • 378. ScrooToサンプル 380
  • 379. <?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"scrollto.htm "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> 381
  • 380. 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 382
  • 381. Shakeサンプル 383
  • 382. shake.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>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> 384
  • 383. 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 385
  • 384. Shrinkサンプル 386
  • 385. shrink.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>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> 387
  • 386. 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 388
  • 387. SlideDownサンプル 389
  • 388. <?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"slidedown.htm "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"> <!-- #area {width:500; height:125px; background:#ddf; font-size:20px; font-weight:600} --> </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> 390
  • 389. 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 391
  • 390. SlideUpサンプル 392
  • 391. <?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"slidedown.htm "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"> <!-- #area {width:500; height:125px; background:#ddf; font-size:20px; font-weight:600} --> </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> 393
  • 392. 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 394
  • 393. Squishサンプル 395
  • 394. <?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"squish.htm "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"> <!-- #area {width:500; height:125px; background:#ddf; font-size:20px; font-weight:600} --> </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> 396
  • 395. 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 397
  • 396. SwitchOffサンプル 398
  • 397. <?xml version="1.0" encoding="utf-8" standalone="no"?>switchoff.htm <!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"> <!-- #area {width:500; height:125px; background:#ddf; font-size:20px; font-weight:600} --> </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> 399
  • 398. [複合エフェクトの実行]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 400 Effect.Transitions.full
  • 399. Parallelサンプル1 401
  • 400. <?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"parallel1.htm "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"> <!-- #area{width:150px; height:150px; background:#ddf; font-size:24px; font-weight:600} --> </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> 402 </body> </html>
  • 401. Parallelサンプル2
  • 402. <?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"parallel2.htm "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"> <!-- #area{width:150px; height:150px; background:#ddf; font-size:24px; font-weight:600} --> </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>
  • 403. ドラッグドロップ (DragDrop) 405
  • 404. 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 : ドラッグ終了時のエフェクト 406
  • 405. Draggableサンプル 407
  • 406. draggable.htm <head> <title>script.aculo.us ドラッガブル </title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css"> <!-- .box1 {width:160px;height:60px;background:#bbf;} #dragbox {font-size:16px; font-weight:600; color:#009} --> </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> 408
  • 407. destory ドラッグオブジェクトを破棄(固定)する書式draggableObj.destroy()draggableObj : ドラッガブルオブジェクト 409
  • 408. destoryサンプル1 23 4 410
  • 409. <style type="text/css"> <!--destory.htm .box1 {z-index:1000;width:150px;height:150px;background:#bbf;} --> </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[ var box; function func1(){ box = new Draggable("box1", {scroll:window,handle:handle1}); } function fix(){ box.destroy(); } function listeners(){ addListener($("fix"), "click", fix, false); } addListener(self, "load", listeners, false); addListener(self, "load", func1, false); //]]> </script> </head> <body> <h2>script.aculo.us ドラッグと位置固定</h2> <div id="box1" class="box1"> <span id="handle1">ここをドラッグ</span><br/> <input type="checkbox" id="fix"/> 固定? </div> </body> </html> 411
  • 410. return ドラッグオブジェクトを元の位置に戻す1 23 4 412
  • 411. return.htm <style type="text/css"> <!-- .box1 {z-index:1000;width:150px;height:150px;background:#bbf;} --> </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(revertbox1,{ scroll:window,handle:handle1,revert:function(element){ return ($(shouldrevert1).checked) } }); } addListener(self, "load", func1, false); //]]> </script> </head> <body> <h2>script.aculo.us ドラッグ&ドロップ</h2> <div id="revertbox1" class="box1"> <span id="handle1">ここをドラッグ</span><br/> <input type="checkbox" id="shouldrevert1"/> 戻す? </div> </body> </html> 413
  • 412. Droppable.add ドロップ可能領域を指定する書式Droppables.add(element, option)element : ドロップ領域を示すエレメントoption : オプション【省略可能】 accept : ドロップ可能なCSSクラス名 containt : 並べ替え可能を示すエレメント/配列 hoverclass : ドロップ中に適用するスタイルシートクラス overlap : 並べ替え時に使用(horizontalまたはvertical) greedy : 他のドロップ領域を検索しない onHover : ドロップ中の処理 onDrop : ドロップされた時の処理 414
  • 413. Droppableサンプル 415
  • 414. droppable.htm 1/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"><!--#box1 { position:absolute; top:50px; left:10px;z-index:2;width:150px;height:60px;background:#ccf;}#box2 { position:absolute; top:50px; left:170px;z-index:1;width:150px;height:60px;background:#fcc;}#dropBox {position:absolute; top: 200px; left:10px;z-index:0;width:310px;height:180px;background:#cfc;}--></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> 416
  • 415. droppable.htm 1/2<script type="text/javascript" charset="utf-8">//<![CDATA[//var dragObj;function func1(){new Draggable("box1", { revert:true } );new Draggable("box2", { revert:true } );Droppables.add("dropBox", { onDrop: function(element, droppableElement){ $(droppableElement).innerHTML += "<br/>" + element.id + "がドロップされました"; }, accept:"out" });}addListener(self, "load", func1, false);//]]></script></head><body><h2>script.aculo.us ドロップエリア設定</h2><div id="box1" class="out">box1:<br/>ドロップできます</div><div id="box2">box2:<br/>ドロップできません</div><div id="dropBox">ドロップゾーン:</div></body></html> 417
  • 416. Droppableサンプル2 418
  • 417. droppable 2.htm 1/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"><!--#book1 { position:absolute; top:50px; left:10px; z-index:2;width:130px;height:130px;}#book2 { position:absolute; top:50px; left:170px; z-index:1;width:130px;height:130px;}#basket {position:absolute; top: 220px; left:10px; z-index:0;width:290px;height:170px;background:#cfc;}--></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> 419
  • 418. <script type="text/javascript" charset="utf-8">//<![CDATA[function func1(){ droppable 2.htm 2/2 new Draggable("book1", { revert:true } ); new Draggable("book2", { revert:true } ); Droppables.add("basket", { onDrop: function(element, droppableElement){ $(droppableElement).innerHTML += "<br/>" + element.id + "がカゴに入りました。"; }, accept:"out1" });}addListener(self, "load", func1, false);//]]></script></head><body><h2>script.aculo.us ドロップエリア設定</h2><div id="book1" class="out1"> <img id="area" src="../img/ajaxbook1.jpg" width="130" height="130"/></div><div id="book2" class="out2"> <img id="area" src="../img/ajaxbook2.jpg" width="130" height="130"/></div><div id="basket">買いものカゴ:</div></body></html> 420
  • 419. Droppable.remove ドロップ可能領域を解除する書式Droppables.remove(element) removeサンプル 421
  • 420. remove.htm 1/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"><!--#book1 { position:absolute; top:100px; left:10px; z-index:2;width:130px;height:130px;}#book2 { position:absolute; top:100px; left:170px; z-index:1;width:130px;height:130px;}#basket {position:absolute; top: 270px; left:10px; z-index:0;width:290px;height:170px;background:#cfc;}--></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"> 422
  • 421. remove.htm 2/2<script type="text/javascript" charset="utf-8">//<![CDATA[function func1(){new Draggable("book1", { revert:true } );new Draggable("book2", { revert:true } );Droppables.add("basket", { onDrop: function(element, droppableElement){ $(droppableElement).innerHTML += "<br/>" + element.id + "がカゴに入りました。"; }, accept:"out1"});}function remove1(){ Droppables.remove("basket"); }function listeners(){ addListener($("exe"), "click", remove1, false); }addListener(self, "load", listeners, false);addListener(self, "load", func1, false);//]]></script></head><body> <h2>script.aculo.us ドロップエリア解除</h2> <input type="button" id="exe" value="解除"/> <div id="book1" class="out1"> <img id="area" src="../img/ajaxbook1.jpg" width="130" height="130"/> </div> <div id="book2" class="out2"> <img id="area" src="../img/ajaxbook2.jpg" width="130" height="130"/> </div> <div id="basket">買いものカゴ:</div></body></html> 423
  • 422. 買物籠と購入合計金額表示追加
  • 423. droppable3.htm (1/3)<?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"><!--#book1 { position:absolute; top:50px; left:5px; z-index:1;width:130px;height:130px;}#book2 { position:absolute; top:50px; left:135px; z-index:1;width:130px;height:130px;}#book3 { position:absolute; top:50px; left:265px; z-index:1;width:130px;height:130px;}#amount1 {position:absolute; top: 205px; left:150px; z-index:0;width:130px; height:20px;background:#eee;}#amount2 {position:absolute; top: 205px; left:280px; z-index:0;width:90px; height:20px;background:#eee;}#basket {position:absolute; top: 230px; left:10px; z-index:0;width:370px;height:160px;background:#cfc;}--></style>
  • 424. <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[var amount = 0;function func1(){ droppable3.htm (2/3) new Draggable("book1", { revert:true }); new Draggable("book2", { revert:true }); new Draggable("book3", { revert:true }); Droppables.add("basket", { onDrop: function(element, droppableElement){ $(droppableElement).innerHTML += "<br/>" + element.id + "がカゴに入りました。"; if(element.id == "book1"){ amount += 3050; }else if(element.id == "book2"){ amount += 2100; }else if(element.id == "book3"){ amount += 4200; } $("amount2").innerHTML = amount; }, accept:"out" });}
  • 425. droppable3.htm (3/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>
  • 426. スライダ(Slider)スライダデモ 428
  • 427. 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 : スライダーが取る値(配列で指定) 429
  • 428. sliderObj = new Control.Slider(handle, track, options)・最初のパラメータにはスライダーのハンドル(ドラッグして動かす部分) を指定。・2番目のパラメータにはトラック(スライダーの可動範囲)のエレメント を指定。・3番目のオプションでスライダーの各種設定を行う。 ※スライダー値の範囲を指定するにはrange:$R(0,100)のように指定。 430
  • 429. Sliderサンプル 標準水平スライダ 431
  • 430. slider1.htm <style type="text/css"> <!-- #track { width:200px;background-color:#888;} #handle {width:5px; height:10px; background-color:#fc3; cursor:move;} #value { padding-top: 5px;} --> </style> <script src="../../lib/funcs.js" type="text/javascript"></script> <script src="../lib/prototype.js" type="text/javascript"></script> <script src="../lib/scriptaculous.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ function slider(){ new Control.Slider(handle,track,{ onSlide:function(v){$(value).innerHTML=スライド: +v}, onChange:function(v){$(value).innerHTML=変更値 +v} }); } addListener(self, "load", slider, false); //]]> </script> </head> <body> <h3>標準水平スライダ</h3> <div id="track"> <div id="handle"></div> </div> <div id="value"></div> </body> </html> 432
  • 431. Sliderサンプル 標準垂直スライダ 433
  • 432. slider2.htm <style type="text/css"> <!-- #track { height:120px;background-color:#888; width:12px;} #handle {width:12px; background-color:#fc3;cursor:move;} --> </style> <script src="../../lib/funcs.js" type="text/javascript"></script> <script src="../lib/prototype.js" type="text/javascript"></script> <script src="../lib/scriptaculous.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ function slider(){ new Control.Slider(handle,track,{ axis:vertical, onSlide:function(v){$(value).innerHTML=スライド: +v}, onChange:function(v){$(value).innerHTML=変更値 +v} }); } addListener(self, "load", slider, false); //]]> </script> </head> <body> <h3>標準垂直スライダ</h3> <div id="track"> <div id="handle"></div> </div> <div id="value"></div> </body> </html> 434
  • 433. Sliderサンプル 逆垂直スライダ 435
  • 434. slider3.htm <style type="text/css"> <!-- #track { height:120px;background-color:#888;width:12px;} #handle {width:12px;background-color:#fc3;cursor:move; } --> </style> <script src="../../lib/funcs.js" type="text/javascript"></script> <script src="../lib/prototype.js" type="text/javascript"></script> <script src="../lib/scriptaculous.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ function slider(){ new Control.Slider(handle,track,{axis:vertical, onSlide:function(v){$(value).innerHTML=スライド: + (1-v)}, onChange:function(v){$(value).innerHTML=変更値 + (1-v)} }); } addListener(self, "load", slider, false); //]]> </script> </head> <body> <h3>逆垂直スライダ</h3> <div id="track"> <div id="handle"></div> </div> <div id="value"></div> </body> </html> 436
  • 435. Sliderサンプル 断続値スライダ 437
  • 436. slider4.htm <style type="text/css"> <!-- #track { width:200px;background-color:#888;} #handle {width:8px; height:10px; background-color:#fc3; cursor:move;} --> </style> <script src="../../lib/funcs.js" type="text/javascript"></script> <script src="../lib/prototype.js" type="text/javascript"></script> <script src="../lib/scriptaculous.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ function slider(){ new Control.Slider(handle,track,{ range:$R(0,200),values:[0,50,100,150,200], onSlide:function(v){$(value).innerHTML=スライド: +v}, onChange:function(v){$(value).innerHTML=変更値 +v} }); } addListener(self, "load", slider, false); //]]> </script> </head> <body> <h3>断続値スライダ [0,50,100,150,200]</h3> <div id="track"> <div id="handle"></div> </div> <div id="value"></div> </body> </html> 438
  • 437. Sliderサンプル 自然数連続値スライダ 439
  • 438. <style type="text/css"> <!--slider5.htm #track { width:200px;background-color:#888;} #handle {width:8px; height:10px; background-color:#fc3; cursor:move;} #status {background-color: #DCDCDC; width: 0px; height: 7px; border: #232323 1px dashed; margin-top: 10px;} --> </style> <script src="../../lib/funcs.js" type="text/javascript"></script> <script src="../lib/prototype.js" type="text/javascript"></script> <script src="../lib/scriptaculous.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> //<![CDATA[ function slider(){ new Control.Slider(handle,track,{range:$R(0,20), values:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20], onSlide:function(v){$(value).innerHTML=スライド: +v; $(status).style.width=(v*3)+px;}, onChange:function(v){$(value).innerHTML=変更値 +v} }); } addListener(self, "load", slider, false); //]]> </script> </head> <body> <h3>自然数連続値スライダ </br> [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]</br> および値のdivエリア表示</h3> <div id="track"> <div id="handle"></div> </div> <div id="status"></div> <div id="value"></div> </body> 440 </html>
  • 439. ソート(Sortable)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 : ソートされ順序が変更された時の処理 441 onUpdate : ソートされ順序が変更された後の処理
  • 440. Sortableサンプル-1 442
  • 441. Sortableサンプル-1 :FireBugでのDOMツリー変化確認
  • 442. <style type="text/css" media="screen">sort1.htm <!-- #list { padding: 2px; background:red;} #list li { background: #ffb; margin:2px; padding: 2px; } .area {width:350px;height:300px;overflow:scroll; position:relative;" id="scroll-container"; } --> </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 sorta(){ Position.includeScrollOffsets = true; Sortable.create(list,{scroll:scroll-container}); } addListener(self, "load", sorta, false); //]]> </script> </head> <body> <h2>script.aculo.us ソータブル</h2> <div class="area"> <ul id="list"> <li>北海道</li><li>青森</li><li>秋田</li><li>岩手</li><li>山形</li> <li>宮城</li><li>福島</li><li>栃木</li><li>群馬</li><li>茨城</li> <li>千葉</li><li>埼玉</li><li>東京</li><li>神奈川</li><li>山梨</li> </ul> </div> </body> </html> 444
  • 443. Sortableサンプル-2 445
  • 444. sort2.htm <<?xml version="1.0" encoding="utf-8" standalone="no"?> 1/2 <!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"> <!-- #list1 { width:250px; padding: 2px; background:#c03;} #list1 li { background: #ffb; margin:2px; padding: 2px; } #list2 { width:250px; padding: 2px; background:#c03;} #list2 li { background: #ffb; margin:2px; padding: 2px; } #inlist1 { width: 200px; padding: 2px; background:#c03;} #inlist1 li { background: #ffb; margin:2px; padding: 2px; } #inlist2 { width: 200px; padding: 2px; background:#c03;} #inlist2 li { background: #ffb; margin:2px; padding: 2px; } #inlist3 { width: 200px; padding: 2px; background:#c03;} #inlist3 li { background: #ffb; margin:2px; padding: 2px; } --> </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> 446
  • 445. soer2.htm <script type="text/javascript" charset="utf-8"> 2/2 //<![CDATA[ function sorta(){ Sortable.create("list1"); Sortable.create("list2", { tree:true }); } addListener(self, "load", sorta, false); //]]> </script> </head> <body> <h2>script.aculo.us ソータブル</h2> <ul id="list1"> <li>総面積</li> <li>総人口</li> <li>GNP</li> </ul> <ul id="list2"> <li>北関東<ul id="inlist1"><li>群馬</li><li>栃木</li><li>茨城</li></ul></li> <li>東京都<ul id="inlist2"><li>東京北部</li><li>東京南部</li></ul></li> <li>東京近県<ul id="inlist3"><li>埼玉</li><li>千葉</li><li>神奈川</li></ul></li> </ul> </body> </html> 447
  • 446. Sortableサンプル-1 448
  • 447. <style type="text/css" media="screen"> <!-- #list1 { width:250px; padding: 2px; background:#c03;}sort3.htm #list1 li { background: #ffb; margin:2px; padding: 2px; } --> </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 sorte(){ Sortable.create("list1"); } function sortd(){ Sortable.destroy("list1"); } function listeners(){ addListener($("sortd"), "click", sortd, false); } addListener(self, "load", listeners, false); addListener(self, "load", sorte, false); //]]> </script> </head> <body> <h2>script.aculo.us ソータブル</h2> <input type="button" id="sortd" value="ソート停止"/> <ul id="list1"> <li>群馬</li><li>栃木</li><li>茨城</li><li>埼玉</li> <li>東京</li><li>千葉</li><li>神奈川</li> </ul> </body> 449 </html>
  • 448. ソート&ドロップ (dragsort1.htm)
  • 449. <?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 dragsort1.htmTransitional//EN" (1/3) "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"><!--#box1 { z-index:2;width:150px;height:40px;background:#00f;}#box2 { z-index:2;width:150px;height:40px;background:#f00;}#box3 { z-index:2;width:150px;height:40px;background:#080;}#box4 { z-index:2;width:150px;height:40px;background:#ff0;}#box5 { z-index:2;width:150px;height:40px;background:#0f0;}#box6 { z-index:2;width:150px;height:40px;background:#880;}#dropBox {position:absolute; top: 320px; left:10px; z-index:0;width:250px; height:120px;background:#ccc;}--></style>
  • 450. <script type="text/javascript" src="../lib/funcs.js"></script><script type="text/javascript" src="../lib/aculo/prototype.js"></script><script type="text/javascript" src="../lib/aculo/scriptaculous.js"></script><script type="text/javascript" src="../lib/aculo/unittest.js"></script><script type="text/javascript">//<![DATA[ dragsort1.htmfunction loadFunc(){ (2/3) Sortable.create("sortList"); new Draggable("box1", { revert:true }); new Draggable("box2", { revert:true }); new Draggable("box3", { revert:true }); new Draggable("box4", { revert:true }); new Draggable("box5", { revert:true }); new Draggable("box6", { revert:true }); Droppables.add("dropBox", { onDrop: function(elm, dElm){ $(dElm).innerHTML += "<br/>" + elm.id + "をドロップ"; }, accept:"out" });}addListener(self, "load", loadFunc, false);//]]></script>
  • 451. </head> dragsort1.htm<body> (3/3)<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>
  • 452. インプレースエディタ(InPlaceEditor)Ajax.InPlaceCollectionEditor処理を編集可能なテキストを設定する(セレクトメニューで選択)書式editObj = new Ajax.InPlaceCollectionEditor(elementName, url, options)editObj : 編集可能テキストオブジェクトelement : フォーム上のエレメントurl : CGI等のURLoptions : オプション【省略可能】collection : メニューに表示する項目リスト(配列)・最初のパラメータにはフォーム上のエレメントを指定。・2番目のパラメータはURLでデータを(DB等に)保存し、結果を返すための CGIプログラム等を指定。 454・3番目のパラメータはオプションで各種指定を行う。
  • 453. InPlaceCollectionEditor-1 455
  • 454. 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"> //<![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> 456
  • 455. 非同期通信との組み合わせ editor1.htm (1/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><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>
  • 456. 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);//]]>
  • 457. init1.php<?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";}?>
  • 458. edit1.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;}?>
  • 459. InPlaceCollectionEditorサンプル-2 461
  • 460. <script type="text/javascript" src="../lib/funcs.js"></script>editor2.htm <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[ var edit1; function edit(){ edit1 = new Ajax.InPlaceEditor("value", "edit1.php",{ okText : "保存", cancelText : "キャンセル", savingText : "保存中です...", rows:1, cols:50, onFailure : function(){ alert("保存中にエラー発生"); } }); } function dispose(){ edit1.dispose(); } function listeners(){ addListener($("dispose"), "click", dispose, false); } addListener(self, "load", listeners, false); addListener(self, "load", edit, false); //]]> </script> </head> <body> <h2>script.aculou エディタ機能</h2> <input type="button" id="dispose" value="編集解除"> <div id="value">Ajax/Web2.0ワールドの開催日は9月12日です。</div> </body> </html> 462
  • 461. InPlaceCollectionEditorサンプル-3 463
  • 462. <script type="text/javascript" src="../lib/funcs.js"></script>editor3.htm <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[ var edit1; function edit(){ edit1 = new Ajax.InPlaceEditor("value", "edit1.php", {rows:1, cols:50, okText: "保存" }); } function editmode(){ edit1.enterEditMode("click"); } function dispose(){ edit1.dispose(); } function listeners(){ addListener($("editmode"), "click", editmode, false); addListener($("dispose"), "click", dispose, false); } addListener(self, "load", listeners, false); addListener(self, "load", edit, false); //]]> </script> </head> <body> <h2>script.aculou エディタ機能</h2> <input type="button" id="editmode" value="編集開始"> <input type="button" id="dispose" value="編集解除"> <div id="value">Ajax/Web2.0ワールドの開催日は9月12日です。</div> </body> </html> 464