Your SlideShare is downloading. ×
0
AjaxによるWebアプリケーション開発講座     [応用コース]        (有)サイバースペース            CyberSpace        Technology Holdings         http://www....
Ajax実践編                    Ajaxライブラリ                           1.ActiveWidgets                            簡単なサンプルAjax要素技術の...
Ajax要素技術    概論           3
Ajaxの始まりAjax(Asynchronous JavaScript + XML)=A New Approach to Web Applications2005年2月18日 adaptive pathの Jesse James Garret...
5
AjaxモデルでのWebシステム        (SPI=Single Page Interface)  Webブラウザ                               データアクセス        プレゼンテーション       ...
Ajaxエンジンの機能               Ajaxエンジン              ① イベント処理   Web   GUI                             サーバ                      ...
Ajax初めてのプログラム - Ajaxサンプルプログラム1従業員番号から氏名表示操作手順]1.従業員番号入力   ↓2.カーソル移動   ↓3.従業員氏名表示
Ajaxでの通信方式(GET/POST;非同期/同期)GET/非同期での受信処理<script type="text/javascript" src=”../funcs.js"></script><script type="text/javas...
GET/非同期-関数名指定での受信処理<script type="text/javascript">//<![CDATA[var httpObj;function getEmpName(){  var emp_no = document.get...
GET/同期<script type="text/javascript">//<![CDATA[function getEmpName(){  var emp_no = document.getElementById("emp_no").val...
POST/非同期<script type="text/javascript">//<![CDATA[function getEmpName(){  var emp_no = document.getElementById("emp_no").v...
POST/同期<script type="text/javascript">//<![CDATA[function getEmpName(){  var emp_no = document.getElementById("emp_no").va...
サーバからの受信データがテキスト並びの場合サーバからの受信データがテキスト並びの場合、受信データはsplitメソッドで配列にセットし、htmlタグと組合せ、表示用タグ構成を作成・出力。// JavaScriptvar rv = httpObj....
データベース検索結果の表示 (複数レコード)・レコード単位で配列にセットし (rows[i])・各レコードのアイテム単位で表示 をタグ作成var rows = httpObj.responseText.split("<r>");for(i = ...
prototype.js        http://www.prototypejs.org・Ajaxフレームワーク・JavaScript言語機能強化・メソッド名ショートカット・DOM操作機能の拡張・クロスブラウザ対応・ MIT License...
prototype.jsでの通信revClass1.js(prototype.js:Ajax.Request)//<![CDATA[function revClass1(){  var set = "class1_code=" + $("cla...
addClass1.js(prototype: Ajax.Updater) ※出力用の関数指定なし   //<![CDATA[   function addClass1(){     new Ajax.Updater({success:stat...
Ajaxエンジンの機能               Ajaxエンジン              ① イベント処理   Web   GUI                             サーバ                      ...
DOMイベントモデル                            ・ターゲット      イベント発生                            ・オブザーバ      イベントキャッチ      ルート document...
イベントオブジェクトイベントオブジェクトからイベントに関する様ざまな情報を所得可能・キー入力、マウスクリックでのイベント発生ノード識別・キー入力イベントでの入力キー識別(キーコード値)・マウスクリックイベントでのマウスボタン(左、右、中央)識別...
イベントターゲットの検出: getid(e)イベントターゲット(イベント発生ノード) →                       idタグで識別IE系ブラウザ              e.srcElementIE以外のブラウザ      ...
入力キーコードの検出: getkcode(e)IE系および新しいFireFox   e. keyCode古いFireFox          e.which                      getkcode関数(funcs.js)  ...
クリックマウスボタン(左右)の検知FireFox関数:e.which•Left button:   1•Middle button: *•Right button:  3MS(IE)関数:e.button•Left button:     1•...
function mbutton(e){クリックマウスボタンの検出              var click;    mbutton(e)             if(!e) var e = window.event;          ...
移動するマウスポインタ位置の検出1. e.clientX、 e.clientY [IE,FF] 原点(0,0):ブラウザ画面左上 e.clientX: ウィンドウ表示部分の左上を基準としてX座標をピクセル値で返す。 e.clientY: ウィン...
マウスポインタ位置の検出
マウスポインタ位置の検出                                      mpos2.htm 1/2<?xml version="1.0" encoding="utf-8" standalone="no"?><!DOC...
mpos2.htm 2/2function initOnLoad(){  var observer = document.getElementById("area");  setListener(observer, "mousemove", c...
mpos2.js   //<![CDATA[           function check(e){             document.getElementById("x1").value = e.clientX;          ...
フォームコントロール・ラジオボタン・チェクボックス・セレクトメニュー必要性:Ajaxでのコントロールデータ処理と送信メリット:サーバレスポンスデータでの動的値設定     動的絞り込み検索
セレクトメニュー
<style><script type="text/javascript" src="../funcs.js"></script><script type="text/javascript" src="selectMenu.js"></scri...
//<![CDATA[                                         selectMenu.jsfunction checkSpec(){  var source = document.getElementBy...
セレクトメニュー 絞り込み検索
selectMenu2.htm      1/4         <link type="text/css" rel="stylesheet" href="../lib/style.css"/>                  <script...
//<![CDATA[selectMenu2.htm   var httpObj = getHttpObject();      2/4         function getClass1(){                    http...
function getClass2(){selectMenu2.htm     var class1_code = $("class1List").value;      3/4           httpObj.open(get, get...
selectMenu2.htm      4/4function getClass3(){  alert($("class2List").value);}Function listeners(){  setListener($("class1L...
ラジオボタン
<script type="text/javascript" src="funcs.js"></script>      radioBtn.htm<script type="text/javascript" src="radioBtn.js">...
radioBtn.js//<![CDATA[Var xhrObj = getXhrObj();function checkSel(e){  var sel = getid(e);  id("result").innerText = "選択結果:...
チェックボックス
チェックボックス選択確認XHTML checkB.htm<?xml version="1.0" encoging="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http:...
チェクボックス選択確認JavaScript checkB.js//<![CDATA[function checked(e){  var eid =getid(e);  alert("選択は " + eid);}function setListe...
チェックボックス-複数選択での処理
<link rel="stylesheet" type="text/css" href="style.css" />                                                              ch...
//<![CDATA[var optcum = new Array();                                                          checkBox.jsvar options = new...
checkBox.javapackage domevent;import java.io.*;import javax.servlet.*;import javax.servlet.http.*;public class checkBox ex...
Ajaxエンジンの機能               Ajaxエンジン              ① イベント処理   Web   GUI                             サーバ                      ...
DOMノード操作(1) DOMノード操作サンプルhttpObj.onreadystatechange = function(){   if(httpObj.readyState == 4){       if(httpObj.status ==...
DOMノード操作概要  ノードの種類       ・要素ノード (element node)               ・属性ノード (attribute node)               ・テキストノード(text node)例]<d...
1.要素ノードの参照getElementById構文] object.getElementById(“id属性値”)機能]     指定したID名を持つ要素ノードオブジェクトを返す。引数]     id属性値。返値]     オブジェクト。適用...
要素ノードの参照getElementsByTagName構文] object. getElementsByTagName(“タグ名”)機能]     指定したタグ名を持つオブジェクト(要素ノード)を配列形式で返す。引数]     タグ名。返値]...
2.属性ノードの参照getAttribute書式] object.getAttribute(attributeName‘ [, type‘])説明] オブジェクトの指定された属性の値を返す。引数] attributeNameは属性の名前を指定。...
属性ノードの参照getAttributeNode構文] object.getAttributeNode(attributeName)説明]   オブジェクトの指定された属性のノード値を返す。引数]   AttributeNameは属性名を指定。...
子ノードの参照-1firstChild書式] object.firstChild説明] オブジェクトの最初の子ノードを参照する。     firstChildはchildNodes[0]と同じになる対応] IE5~][Firefox 1~][S...
子ノードの参照-2childNodes構文] object.childNodes    object.childNodes[index]    object.childNodes.length機能]   オブジェクトの子ノードを参照する。   ...
子ノードの参照-3hasChildNodes構文] object.hasChildNodes()機能]   子ノードがあるかどうか返す。      子ノードがある場合はtrue、ない場合はfalseを返す。引数]   id属性値。返値]   真...
兄弟ノードの参照nextSibling構文] object.nextSibling機能]   オブジェクトの次のノードを参照する。返値]   ノードオブジェクトの参照適用]   多くのノードオブジェクト対応]   [IE5~][Firefox ...
親ノードの参照parentNodeプロパティ構文] object.parentNode機能]   親ノードを参照する。適用]   object対応]   [IE5~][Firefox 1~][Safari 1~][Opera 8~][Netsc...
要素ノードの作成createElementメソッド書式] object.createElement(element)説明]   引数で指定したエレメントを作成する。引数]   要素(エレメント)の名前戻値]   作成したオブジェクト。適用]  ...
テキストノードの作成createTextNodeメソッド書式] object.createTextNode(text)機能]    指定されたテキストノードを作成する。引数]    作成するテキスト返値]    TextNodeオブジェクト適用...
テキストノードの作成appendChildメソッド書式] object.appendChild(newChild)機能]   指定したエレメントにオブジェクトを追加する。引数]   追加する子ノードオブジェクト返値]   ノードオブジェクト適用...
属性ノードの作成setAttributeメソッド構文]object.setAttribute(attributeName, value, [type‘] )機能] オブジェクトに、引数で指定された属性を追加する。引数]attributeName...
既存ノードの前に新規ノードオブジェクトを挿入insertBefore書式] object.insertBefore(newNode, existingNode)機能] オブジェクトの指定された既存のノードオブジェクトの前に    指定された新し...
隣接するエレメントにオブジェクトを挿入insertAdjacentElement書式] object.insertAdjacentElement(“type”, insObj)機能] オブジェクトの指定された位置に隣接するエレメントオブジェクト...
子ノードを置き換えreplaceChild書式] object.replaceChild(newNode, oldNode)機能] オブジェクトの指定された子ノードオブジェクトを置き換える。引数]newChildは新しい子供のノードオブジェクト...
テキストの挿入insertData構文] object.insertData(‘offset’, ‘text’)機能] オブジェクト(object)に、第2引数で指定されたテキストを    挿入する。引数] offsett:既存テキストのどの文...
[3] ノードの削除ノードオブジェクトを削除removeNode構文] object.removeNode(“value”)機能] オブジェクトのノードオブジェクトを削除する。引数]valueは値を指定。次のいずれか。true(childNod...
子ノードオブジェクトを削除removeChild構文] pnode.removeChild(cnode)機能] オブジェクトの指定された子ノードオブジェクトを    削除する。引数] pnode:親ノードオブジェクト。      cnode:子...
属性(attribute)を削除removeAttribute構文] object.removeAttribute(attributeName, [type‘])機能] オブジェクトの指定された属性値を削除する。引数]     attribut...
XMLHttpRequestでのデータ送受信オーバヘッド           イーザネット 12Byte                                                                      ...
XMLHttpRequestでのデータ送受信オーバヘッド                ヘッダデータ量: 60Byte + HTTPプロトコルヘッダ  HTTPプロトコル リクエストヘッダ例                           ...
Ajaxライブラリ
言語機能強化Ajaxライブラリ          Prototype.js                     MochiKit            エフェクト系         script.aculo.us      サーバ     ...
Ajaxライブラリ        言語機能強化                   Prototype.js                    MochiKit            エフェクト系                [リモーティ...
Ajaxモデルでの処理の流れ               DOM              ① イベント処理                              サーバリモーティング   Web                      ...
Ajaxモデルとライブラリ                言語機能拡張              ① イベント処理                              サーバリモーティング   Web                   ...
Ajaxian.com 2007 Survey Results http://ajaxian.com/
DWR(Direct WebRemoting)                              DWR:Easy Ajax for Java                                 http://getahea...
DWRの特徴1.ネットワーク透過性ローカルのJavaクラスのメソッド呼び出し感覚でリモートのメソッド呼出しが可能。※Remote Procedure Call vs Local Procedure Call      Ajaxクライアント   ...
DWRでのシステム構成-制御機能(Controller)はシステム(DWR)に任せ、               :ユーザ記述 開発者はビジネスロジック作成に専念できる。                                     ...
2.サーバ側Javaの記述はJava Beans(POJO)で行う(1) DI(Dependency Injection)・サーバ側JavaはJavaBeans(POJO)で記述し、サーバサイド単独でテストできる。(2) DRY(Don’t R...
(2) DRY(Don’t Repeat Yourself)[DRY=Don’t Repeat Yourself]同じプログラムコードを重複して記述しない。・機能単位でのクラス構成とメソッド定義              Java Beans ...
3.リバースAjax   - DWR 2.0からサーバ側のJavaからクライアントのJavaScriptに非同期にデータ送信が可能⇒コールバック、サーバプッシュとも言われる⇒チャットのような対話型のAjaxアプリケーションが記述しやすくなる。D...
DWRでの リバースAjax実装形式1 Active Reverse Ajax[Full Streaming Mode] =CometデフォルトのReverse Ajaxモードで、クライアントへのレスポンスは最も早い。リクエスト受信後、ブラウザ...
4.UIとサーバ通信の分離・通信機能 → DWR・UI機能    → ActiveWidgets, Yahoo UI, Dojo etc=>分散アプリケーション、分散オブジェクトで一般的な形態vs] GWT(Google Web Toolkit...
5.DWRサーブレットとユーザサーブレットの混在可  [ビュー]       [コントローラ]            [モデル]DWR Client  Ajax               DWR Servlet       Java Bean...
リバースAjaxの実装方式リバースAjax ---- アクティブリバースAjax ---- フルストリーミングモード                                 (Comet)                        ...
6 その他・動的にページを生成するためのユーティリティメソッドを提供コレクションクラスのオブジェクトをHTMLのテーブルやリストに展開するためのメソッドが用意されている。JavaScriptに詳しくなくても、簡単にページをダイナミックに生成でき...
プログラム作成 - DWR実行環境                        FedoraCore5         APサーバ                                           データベース       ...
WARファイルでのDWRサンプル環境作成1.WARファイル(dwr.war)のダウンロード http://getahead.org/dwr/download                                            ...
2.dwr.warを$CATALINA_HOME/webapps に配置後Tomcat再起動  または、Tomcat Webアプリケーションマンージャからデプロイ                                         ...
3.ブラウザで http://localhost:8080/dwr/ をアクセス・初期画面の表示                                           96
DWRサンプルプログラム1 - Dynamic Address Entry                オートコンプリート
DWRサンプルプログラム2 - reverse ajax 時計表示                                    98
DWRサンプルプログラム3 - reverse ajax チャット                                    99
DWRユーザプログラミング作成初めてのDWR 従業員番号から氏名表示                      100
$CATALINA_HOME                                            DWRディレクトリ構成           webapps                     dwr2          ...
1. DWR JAR ファイルのダウンロードと配置(1) http://getahead.org/dwr/download から dwr.jar ファイルをダウンロード。(2) $CATALINA_HOME/webapps/[開発DIR]/WE...
2. デプロイメントディスクリプタ(web.xml)の編集 WEB-INF/web.xml にdwr-invokerの行を追加. ※サーブレットの定義はdwr-invokerだけ。 ※DWRディレクトリのweb.xmlをコピーで可       ...
<?xml version="1.0" encoding="ISO-8859-1"?><!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//E...
3.サーバコード(JavaBeans:POJO)作成package seminar1;import java.io.*;public class sem1Bean {  String inPath = "/usr/local/tomcat5/a...
4.WEB-INFディレクトリ下にdwr.xmを作成・配置 dwr.xml 定義 <!DOCTYPE dwr PUBLIC    "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"   ...
参考] アノテーションの指定方法1.クラスファイルの指定POJOクラスをリモートアクセス可能にする為には,@RemoteProxy および @RemoteMethodのアノテーション(annotation)を指定する。@RemoteProxyp...
package seminar1;import java.io.*;@RemoteProxy //リモートから使用するクラスであることを指定public class sem1Bean {  String inPath = "/usr/local...
2.web.xmlにアノテーション適用JavaBeans指定<servlet>   <servlet-name>dwr-invoker</servlet-name>   <servlet-class>org.directwebremoting....
6.デバックモードでJavaBeansの機能確認機能] 利用可能なすべてのJavaBeansをWebページ   上で確認できる。1.web.xmlにdebug機能の使用を指定<servlet>   <servlet-name>dwr-invok...
2.http://(URL)/(Webアプリケーション名)/dwr/ にアクセスし、  利用可能なオブジェクトの一覧が表示される。                                             111
7.クライアントコード作成                                  dwrGetAsyn.htm 1/2<?xml version="1.0" encoding="utf-8" standalone="no"?><!D...
dwrGetAsyn.htm 2/2function initOnLoad(){  setListener($("emp_no“), "blur", reqEmpName);}setListener(window, "load", initOn...
[参考]<allow>DWRが生成・処理可能なクラス範囲を定義する<create><create creator=“生成方法” class=“JavaBeansクラスの完全修飾名” [javascript=“オブジェクト名”] [scope=“...
DWR関連jsファイル(ライブラリ&自動生成)1./dwr/engine.js 必須のコアファイル XMLHttpRequestによる非同期通信を行う2./dwr/util.js オプションのユーティリティファイル 例] DWRUtil.get...
メソッド                                   機能$(id)                                 指定されたID値に対応する要素を所得する。DWRUtil.getValue(id)  ...
[実習-1]・DWRでの従業員から氏名表示を作成 ご自分のディレクトリで プログラム作成と動作確認を行って下さい。                    117
リモートオブジェクトのオプション指定オプション             概要callback          リモートコールが成功した場合の処理errorHandoler     リモートコール処理が失敗した場合の処理ordered     ...
リモートオブジェクトオプション指定例<script type="text/javascript">//<![CDATA[function reqEmpName(){empBean.getEmpName(idv("emp_no").toUpper...
参考:Javaチャット: DWRでのコールバック処理                             120
<?xml version="1.0" encoding="utf-8" standalone="no"?>JavaChat.htm   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"    ...
JavaChat.htm   function listeners(){    2/2           addListener($("send"), "click", sendMsg, false);               }    ...
package cback;import java.util.Collection;import java.util.LinkedList;                                              JavaCh...
package cback;import java.net.MalformedURLException;import java.net.URL;import org.directwebremoting.Security;            ...
Ajax応用プログラム
DWRでCRUD処理DWRでデータベース登録 社員マスタ登録                       126
(1) サーバコード記述                                                                    hrBean.java 1/2package erp.hr;import java....
hrBean.java addEmpHdr 2/2public String addEmpHdr(String emp_no,  String emp_name,  String depart,  String section){  Date ...
(2) dwr.xml の記述<!DOCTYPE dwr PUBLIC   "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"   "http://www.getahead.ltd.uk...
(3) DWRデバッガでサーバメソッド(addEmpHdr)の動作確認
(4) クライアントコード記述                                    dwrAddEmpHdr.htm 1/2<?xml version="1.0" encoding="utf-8" standalone="no...
function initOnLoad(){  setListener(id("add"), "click", addEmpHdr);                  dwrAddEmpHdr.htm   2/2}setListener(wi...
サンプル作成 2DWRでデータベース参照 社員マスタ参照                       133
public String revEmpHdr(String emp_no){  Connection con = null;                                  (1)   サーバコード記述  try{     ...
(2) DWRデバッガでサーバメソッド(revEmpHdr)の動作確認
<?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  "http://www.w3.or...
function initOnLoad(){  setListener(id("rev"), "click", reqEmpHdr);}                                                      ...
DOMイベントモデルでの応用                 ・ENTERキー押下で表示                 ・ID入力と同時に表示
<?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"                   ...
</head><body><center><div class="t3">社員マスタ管理</div><table width="370" border="1"><tbody> <tr><th colspan="2">社員マスタ参照</th></...
オートコンプリート:社員マスタ参照
<?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  "http://www.w3.or...
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Ajax 応用
Upcoming SlideShare
Loading in...5
×

Ajax 応用

4,508

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,508
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Ajax 応用"

  1. 1. AjaxによるWebアプリケーション開発講座 [応用コース] (有)サイバースペース CyberSpace Technology Holdings http://www.at21.net/ 清野 克行 1
  2. 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. 3. Ajax要素技術 概論 3
  4. 4. Ajaxの始まりAjax(Asynchronous JavaScript + XML)=A New Approach to Web Applications2005年2月18日 adaptive pathの Jesse James Garrett のエッセイに初登場
  5. 5. 5
  6. 6. AjaxモデルでのWebシステム (SPI=Single Page Interface) Webブラウザ データアクセス プレゼンテーション DB GET/POSTWeb UI テキスト ビジネスロジック XML Ajaxエンジン XML データストア Webクライアント CGI系プログラム ユーザPC サーバサイド
  7. 7. Ajaxエンジンの機能 Ajaxエンジン ① イベント処理 Web GUI サーバ ② サーバ通信 ・テキストデータ ・XMLデータXHTML+CSS ③ UI表示・XHTML 画面構成・CSS 表示制御 ④ 表示制御 ⑤ 演算処理 JavaScript
  8. 8. Ajax初めてのプログラム - Ajaxサンプルプログラム1従業員番号から氏名表示操作手順]1.従業員番号入力 ↓2.カーソル移動 ↓3.従業員氏名表示
  9. 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. 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. 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. 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. 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. 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. 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. 16. prototype.js http://www.prototypejs.org・Ajaxフレームワーク・JavaScript言語機能強化・メソッド名ショートカット・DOM操作機能の拡張・クロスブラウザ対応・ MIT License MIT License※MIT License・このソフトウェアを誰でも無償で無制限に扱うことができる。但し、著作権表示および本許 諾表示を、ソフトウェアのすべての複製または重要な部分に記載しなければならない。・作者または著作権者は、ソフトウェアに関してなんら責任を負わない。
  17. 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. 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. 19. Ajaxエンジンの機能 Ajaxエンジン ① イベント処理 Web GUI サーバ ② サーバ通信 ・テキストデータ ・XMLデータXHTML+CSS ③ UI表示・XHTML 画面構成・CSS 表示制御 ④ 表示制御 ⑤ 演算処理 JavaScript
  20. 20. DOMイベントモデル ・ターゲット イベント発生 ・オブザーバ イベントキャッチ ルート document ・バブリングフェーズ イベントの上位伝播キャプチャフェーズ table ・キャプチャフェーズ イベントの下位伝播 tbody オブザーバ バブリングフェース イベントキャッチ tr td ターゲット イベント発生
  21. 21. イベントオブジェクトイベントオブジェクトからイベントに関する様ざまな情報を所得可能・キー入力、マウスクリックでのイベント発生ノード識別・キー入力イベントでの入力キー識別(キーコード値)・マウスクリックイベントでのマウスボタン(左、右、中央)識別・マウスポインタ(カーソル)移動でのポインタ位置検出 function revClass1(e) { 処理内容 } function setListeners() { var observer = document.getElementById(“show"); addListener(observer, "click", revClass1); } setListener(window, "load", setListeners);
  22. 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. 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. 24. クリックマウスボタン(左右)の検知FireFox関数:e.which•Left button: 1•Middle button: *•Right button: 3MS(IE)関数:e.button•Left button: 1•Middle button: *•Right button: 2
  25. 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. 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. 27. マウスポインタ位置の検出
  28. 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. 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. 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. 31. フォームコントロール・ラジオボタン・チェクボックス・セレクトメニュー必要性:Ajaxでのコントロールデータ処理と送信メリット:サーバレスポンスデータでの動的値設定 動的絞り込み検索
  32. 32. セレクトメニュー
  33. 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. 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. 35. セレクトメニュー 絞り込み検索
  36. 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. 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. 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. 39. selectMenu2.htm 4/4function getClass3(){ alert($("class2List").value);}Function listeners(){ setListener($("class1List"), "change", getClass2);}setListener(window, "load", listeners);setListener(window, "load", getClass1);
  40. 40. ラジオボタン
  41. 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. 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. 43. チェックボックス
  44. 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. 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. 46. チェックボックス-複数選択での処理
  47. 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. 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. 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. 50. Ajaxエンジンの機能 Ajaxエンジン ① イベント処理 Web GUI サーバ ② サーバ通信 ・テキストデータ ・XMLデータXHTML+CSS ③ UI表示・XHTML 画面構成・CSS 表示制御 ④ 表示制御 ⑤ 演算処理 JavaScript
  51. 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. 52. DOMノード操作概要 ノードの種類 ・要素ノード (element node) ・属性ノード (attribute node) ・テキストノード(text node)例]<div id=“id1” class=“class1”>DOMノード操作</div> 要素ノード <div> 属性ノード id=“id1” class=“class1” テキストノード DOMノード操作
  53. 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. 54. 要素ノードの参照getElementsByTagName構文] object. getElementsByTagName(“タグ名”)機能] 指定したタグ名を持つオブジェクト(要素ノード)を配列形式で返す。引数] タグ名。返値] オブジェクトの参照。適用] document対応] [IE5~][Firefox1~][Safari1~][Opera8~][Netscape6~]※ワイルドカード “*” で総てのノード要素を指定することが出来る。※funcs.jsでショートカット関数が用意されている。例] document.getElementsByTagName(“div”); ↓ tn(“div”); // funcs.js
  55. 55. 2.属性ノードの参照getAttribute書式] object.getAttribute(attributeName‘ [, type‘])説明] オブジェクトの指定された属性の値を返す。引数] attributeNameは属性の名前を指定。 typeは種類を指定。次のいずれか。 0(アトリビュート名の大文字小文字の区別をしない) 1(アトリビュート名の大文字小文字の区別をする) 2(値を返す)返値] アトリビュートの値対応] [IE5~][Firefox 1~][Safari 1~][Opera 8~][Netscape 6~]
  56. 56. 属性ノードの参照getAttributeNode構文] object.getAttributeNode(attributeName)説明] オブジェクトの指定された属性のノード値を返す。引数] AttributeNameは属性名を指定。返値] attributeオブジェクトを返す。対応] [IE5~][Firefox1~][Safari1~][Opera8~][Netscape6~]
  57. 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. 58. 子ノードの参照-2childNodes構文] object.childNodes object.childNodes[index] object.childNodes.length機能] オブジェクトの子ノードを参照する。 評価値は配列で最初の子ノードは0番になる。引数] id属性値。返値] 子ノードオブジェクトの配列適用] object対応] [IE5~][Firefox 1~][Safari 1~][Opera 8~][Netscape 6~]
  59. 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. 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. 61. 親ノードの参照parentNodeプロパティ構文] object.parentNode機能] 親ノードを参照する。適用] object対応] [IE5~][Firefox 1~][Safari 1~][Opera 8~][Netscape 6~]
  62. 62. 要素ノードの作成createElementメソッド書式] object.createElement(element)説明] 引数で指定したエレメントを作成する。引数] 要素(エレメント)の名前戻値] 作成したオブジェクト。適用] document対応] [IE5~][Firefox 1~][Safari 1~][Opera 8~][Netscape 6~]
  63. 63. テキストノードの作成createTextNodeメソッド書式] object.createTextNode(text)機能] 指定されたテキストノードを作成する。引数] 作成するテキスト返値] TextNodeオブジェクト適用] document対応] [IE5~][Firefox1~][Safari1~][Opera8~][Netscape6~]
  64. 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. 65. 属性ノードの作成setAttributeメソッド構文]object.setAttribute(attributeName, value, [type‘] )機能] オブジェクトに、引数で指定された属性を追加する。引数]attributeNameはアトリビュート名を指定。valueは値を指定。typeは種類を指定。次のいずれか。0(アトリビュート名の大文字小文字の区別をしない)1(アトリビュート名の大文字小文字の区別をする)返値] なし
  66. 66. 既存ノードの前に新規ノードオブジェクトを挿入insertBefore書式] object.insertBefore(newNode, existingNode)機能] オブジェクトの指定された既存のノードオブジェクトの前に 指定された新しいノードオブジェクトを挿入する。引数] newNode: 新しいノードオブジェクトを指定。 existingNode: 既存のノードオブジェクトを指定。戻値] ノードオブジェクト。対応] [IE5~][Firefox 1~][Safari 1~][Opera 8~][Netscape 6~]
  67. 67. 隣接するエレメントにオブジェクトを挿入insertAdjacentElement書式] object.insertAdjacentElement(“type”, insObj)機能] オブジェクトの指定された位置に隣接するエレメントオブジェクト を挿入する引数]type:次のいずれかを指定しobjectノードに対する位置関係を指定する。BeforeBegin 開始タグの前AfterBegin 開始タグの後BeforeEnd 終了タグの前AfterEnd 終了タグの後insObj: 追加する要素オブジェクトを指定。返値] エレメントオブジェクトを返す。
  68. 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. 69. テキストの挿入insertData構文] object.insertData(‘offset’, ‘text’)機能] オブジェクト(object)に、第2引数で指定されたテキストを 挿入する。引数] offsett:既存テキストのどの文字位置にテキストを挿入 するかを指定する。 text:挿入されるテキストリレラル。 ※既存テキストは英数字と漢字を区別しないで位置指定 できる。適用] テキストノード、コメント返値] なし。
  70. 70. [3] ノードの削除ノードオブジェクトを削除removeNode構文] object.removeNode(“value”)機能] オブジェクトのノードオブジェクトを削除する。引数]valueは値を指定。次のいずれか。true(childNodesコレクションを含める)false(childNodesコレクションを含めない)返値] ノードオブジェクトを返す。
  71. 71. 子ノードオブジェクトを削除removeChild構文] pnode.removeChild(cnode)機能] オブジェクトの指定された子ノードオブジェクトを 削除する。引数] pnode:親ノードオブジェクト。 cnode:子ノードオブジェクト。返値] ノードオブジェクト。対応] [IE5~][Firefox1~][Safari1~][Opera8~][Netscape6~]
  72. 72. 属性(attribute)を削除removeAttribute構文] object.removeAttribute(attributeName, [type‘])機能] オブジェクトの指定された属性値を削除する。引数] attributeName:アトリビュート名を指定。 type:は種類を指定。次のいずれか。 0(アトリビュート名の大文字小文字の区別をしない) 1(アトリビュート名の大文字小文字の区別をする)返値] true(削除)、false(非削除)対応] [IE5~][Firefox1~][Safari1~][Opera8~][Netscape6~]例] $(“id1”). removeAttribute(‘name, 0)
  73. 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. 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. 75. Ajaxライブラリ
  76. 76. 言語機能強化Ajaxライブラリ Prototype.js MochiKit エフェクト系 script.aculo.us サーバ ビジネス Yahoo! UI Library リクエスト ロジック Plotr DWR DWR ActiveWidgets Dojo [サーバ] 開発者 Yahoo! UI Library ユーザ ・リモーティングツール コントロール系 ・UIツール [クライアント] 77
  77. 77. Ajaxライブラリ 言語機能強化 Prototype.js MochiKit エフェクト系 [リモーティングツール] script.aculo.us サーバ ビジネス リクエスト ロジック Yahoo UI Library Plotr DWR DWR ActiveWidgets Dojo [サーバ] 開発者 Yahoo UI Library ユーザ コントロール系 [UIツール] [クライアント] 78
  78. 78. Ajaxモデルでの処理の流れ DOM ① イベント処理 サーバリモーティング Web GET/POST DOM API サーバ GUI ② サーバ通信 ・テキストデータ ・XMLデータXHTML+CSS ③ UI表示・XHTML 画面構成・CSS 表示制御 ④ 表示制御 ⑤ 演算処理 言語機能 JavaScript (Ajaxエンジン)
  79. 79. Ajaxモデルとライブラリ 言語機能拡張 ① イベント処理 サーバリモーティング Web GET/POST UI表現 サーバ GUI ② サーバ通信 ・テキストデータ ・XMLデータXHTML+CSS ③ UI表示・XHTML 画面構成・CSS 表示制御 ④ 表示制御 ⑤ 演算処理 JavaScript (Ajaxエンジン)
  80. 80. Ajaxian.com 2007 Survey Results http://ajaxian.com/
  81. 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. 82. DWRの特徴1.ネットワーク透過性ローカルのJavaクラスのメソッド呼び出し感覚でリモートのメソッド呼出しが可能。※Remote Procedure Call vs Local Procedure Call Ajaxクライアント サーバ Java Beans 83
  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. 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. 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. 86. 3.リバースAjax - DWR 2.0からサーバ側のJavaからクライアントのJavaScriptに非同期にデータ送信が可能⇒コールバック、サーバプッシュとも言われる⇒チャットのような対話型のAjaxアプリケーションが記述しやすくなる。DWRのリバースAjaxでは3つの方式をサポート Comet, Polling, Piggyback 87
  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. 88. 4.UIとサーバ通信の分離・通信機能 → DWR・UI機能 → ActiveWidgets, Yahoo UI, Dojo etc=>分散アプリケーション、分散オブジェクトで一般的な形態vs] GWT(Google Web Toolkit) は一体型 ①イベント処理 サーバ Web 他コンポーネント GUI DWR ②サーバ通信XHTML+CSS ③UI表示 ④表示制御 ⑤演算処理 Ajaxエンジン 89
  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. 90. リバースAjaxの実装方式リバースAjax ---- アクティブリバースAjax ---- フルストリーミングモード (Comet) -- アーリイクロージングモード (Comet) -- ポーリングモード (Polling) ----パッシブリバースAjax (Piggyback)
  91. 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. 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. 93. WARファイルでのDWRサンプル環境作成1.WARファイル(dwr.war)のダウンロード http://getahead.org/dwr/download 94
  94. 94. 2.dwr.warを$CATALINA_HOME/webapps に配置後Tomcat再起動 または、Tomcat Webアプリケーションマンージャからデプロイ 95
  95. 95. 3.ブラウザで http://localhost:8080/dwr/ をアクセス・初期画面の表示 96
  96. 96. DWRサンプルプログラム1 - Dynamic Address Entry オートコンプリート
  97. 97. DWRサンプルプログラム2 - reverse ajax 時計表示 98
  98. 98. DWRサンプルプログラム3 - reverse ajax チャット 99
  99. 99. DWRユーザプログラミング作成初めてのDWR 従業員番号から氏名表示 100
  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. 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. 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. 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. 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. 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. 106. 参考] アノテーションの指定方法1.クラスファイルの指定POJOクラスをリモートアクセス可能にする為には,@RemoteProxy および @RemoteMethodのアノテーション(annotation)を指定する。@RemoteProxypublic class empBean { @RemoteMethod public String getEmpName(String emp_no){ : } }※ クライアントアクセス名の変更 @RemoteProxy(name=”empInfo”)
  107. 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. 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. 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. 110. 2.http://(URL)/(Webアプリケーション名)/dwr/ にアクセスし、 利用可能なオブジェクトの一覧が表示される。 111
  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. 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. 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. 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. 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. 116. [実習-1]・DWRでの従業員から氏名表示を作成 ご自分のディレクトリで プログラム作成と動作確認を行って下さい。 117
  117. 117. リモートオブジェクトのオプション指定オプション 概要callback リモートコールが成功した場合の処理errorHandoler リモートコール処理が失敗した場合の処理ordered 要求された順番で結果を反映するかpreHook リモートコール直前に行う処理postHook リモートコール直後に行う処理timmeout 要求のタイムアウト時間(ミリ秒)verb HTTPメソッド(GETまたはPOST)warninghandoler ブラウザによる警告が発生した場合の処理 118
  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. 119. 参考:Javaチャット: DWRでのコールバック処理 120
  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. 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. 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. 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. 124. Ajax応用プログラム
  125. 125. DWRでCRUD処理DWRでデータベース登録 社員マスタ登録 126
  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. 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. 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. 129. (3) DWRデバッガでサーバメソッド(addEmpHdr)の動作確認
  130. 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. 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. 132. サンプル作成 2DWRでデータベース参照 社員マスタ参照 133
  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. 134. (2) DWRデバッガでサーバメソッド(revEmpHdr)の動作確認
  135. 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. 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. 137. DOMイベントモデルでの応用 ・ENTERキー押下で表示 ・ID入力と同時に表示
  138. 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. 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. 140. オートコンプリート:社員マスタ参照
  141. 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>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×