WGP チュートリアル - SourceForge

WGP チュートリアル
Acroquest Technology株式会社
チュートリアルの目的
本チュートリアルの目的は、課題を解く（実装する）
ことでWGPの利用方法を習得することです。
1. 課題内容
① 成績管理システム
– クライアント(JavaScript)と、サーバ(SpringMVC)とをAjaxで
連携させる。
② リバーシ
– リッチな2D描画やアニメーションを実装する。
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
2
【チュートリアル1】
チュートリアル１：成績管理システム
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
3
【チュートリアル1】
1. 概要
概要
① WGPを使ったWebアプリケーションを作成する。
② JavaScriptクライアントと、SpringMVCを用いて実装
したサーバ（WebFW）を、Ajax通信で連携させる。
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
4
【チュートリアル1】
2. 課題内容
課題内容
① 成績管理システムを作成する。
– 課題毎に設定された複数の問題について、受講者の点数を表／グラフで表示
する。
– データはサーバで保持する。値は固定値とし、リロードするたびに初期値に戻っ
て良い。
– 画面に表示するツリー、テーブル、グラフはオブジェクトとして作成すること。
JavaScriptのオブジェクト指向を利用する方法は、
「（参考）JavaScript導入」を参照すること。
② 作成には、WGPと以下のライブラリを用いること。
利用するライブラリ
説明
jQuery
JavaScript汎用ライブラリ
jQuery UI
jQuery上に構築されたUIライブラリ
Jstree
ツリーコンポーネントを提供するjQueryプラグイン
jqGrid
テーブルコンポーネントを提供するjQueryプラグイン
dygraphs
グラフコンポーネントを提供するJavaScriptライブラリ
jeegooContext
コンテキストメニューを提供するjQueryプラグイン
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
5
【チュートリアル1】
3. 画面イメージ∼テーブル
テーブル表示時の画面イメージ
テーブル
技術課題
グラフ
課題1
課題1-1
削除
課題1-2
課題1-3
課題1-4
課題1-1
受講者
問題1▲
問題2
問題3
合計
受講者A
10
10
10
30
受講者B
20
10
15
45
受講者C
20
20
20
60
課題1-5
課題2
課題2-1
課題2-2
課題2-3
削除
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
6
【チュートリアル1】
4. 画面イメージ∼グラフ
グラフ表示時の画面イメージ
テーブル
技術課題
グラフ
課題1
課題1-1
削除
課題1-2
課題1-1
課題1-3
点数
課題1-4
100
90
80
70
60
50
40
30
20
10
0
課題1-5
課題2
課題2-1
課題2-2
課題2-3
受講者A
受講者B
受講者C
1
2
3
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
4
問題番号
7
【チュートリアル1】
5. コンポーネントの説明∼テーブル
テーブル表示時の各コンポーネントの説明
ツリーで選択したノードの名前
と同じ値を表示する。
タブをクリックすることで、グラフ表
示とテーブル表示を切り替えられる。
テーブル
技術課題
グラフ
課題1
初期表示時は
ツリーのみ表示
する。
課題1-1
削除
課題1-2
課題1-1
課題1-3
課題1-4
課題1-5
右クリックで表示されるメニュー。
削除をクリックすると、 課題2
ツリーから該当の項目が削除される
サーバ側のアプリが、メ
モリ上にデータを持つ。
ソースコードにデータを
直接書いてもよい。
各問題と合計は数値によ
るソートができる。
（jqGridの機能を使う）
ラジオボタン選択時には行の
背景色が変わる。
受講者
問題1▲
問題2
問題3
合計
受講者A
10
10
10
30
受講者B
20
10
課題2-1
課題2-2
課題2-3
最下層のノードを選択した際に、テーブルの
表示およびグラフの表示が切り替わる。
ツリーのノードを選択した時に、
20
20
受講者C
グリッドの値が切り替わる。
15
45
ラジオボタンで行選択後、削除ボタン押下で
行削除できる。（ラジオボタン非選択時は
Disabledにする。）
20
60
削除
8
【チュートリアル1】
6. グラフ表示時のコンポーネントの説明
グラフ表示時の各コンポーネントの説明
テーブル
技術課題
グラフ
ツリーで選択したノードの名前
と同じ値を表示する。
課題1
課題1-1
削除
課題1-2
課題1-3
点数
課題1-4
100
90
受講者A
80
受講者B
70
60
受講者C
50
40
Y軸を点数とする。
30
最小値0、最大値100
20
目盛間隔10と設定し
10
表示する。 0
1
課題1-5
課題2
課題2-1
課題2-2
課題2-3
dygraphsを用いたグラフ
描画を行う。
課題1-1
凡例を表示すること。
場所や背景色は任意
でよい。
2
3
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
X軸は問題番号の値をとる。
最小値1、最大値4、
目盛間隔1に設定して表示
する。
4
問題番号
9
【チュートリアル1】
7. 作成手順
以下の手順で開発する
①
②
③
④
⑤
⑥
⑦
⑧
⑨
⑩
各ライブラリの調査 【目安時間：8h】
タブ画面の作成 【目安時間：4h】
ツリーの作成 【目安時間：8h】
テーブルの作成 【目安時間：8h】
テーブルの行削除 【目安時間：4h】
グラフの作成 【目安時間：8h】
コンテキストメニューの作成 【目安時間：4h】
Server通信実装（初期描画時） 【目安時間：16h】
Server通信実装（Ajax通信： データ取得） 【目安時間：8h】
Server通信実装（Ajax通信： データ削除） 【目安時間：8h】
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
10
8. WGPの起動方法
【チュートリアル1】
WGPの起動方法
① WGPのサイトに移動し、ブランクプロジェクトをダウンロード
する。
http://wgp.sourceforge.net/
② ①で取得したWGP.zipを展開する。
③ 展開して作成したブランクプロジェクトをインポートする。
④ Tomcatでインポートしたプロジェクトが起動できてれば完了
です。
◆ 注意点 ◆
Tomcatのバージョンは7.0.x（最新版）を使用してください。
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
11
9. 各ライブラリの調査
【チュートリアル1】
各ライブラリの調査
以下の機能を実現するために使う各ライブラリのメソッド
名と引数をそれぞれ調査する。
※引数にoptionを渡すメソッドの場合、optionの中身の調査は不要です。
①
②
③
④
⑤
⑥
jQuery UIを用いたタブの実現機能
jstreeによるツリーの作成
jqGridを用いたテーブルの作成
dygraphsを用いたグラフの作成
jeegooContextを用いたコンテキストメニューの作成
jQueryを用いたAjax通信
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
12
10. チュートリアル1実装（クライアント）
【チュートリアル1】
チュートリアル1実装（クライアント）の流れ
①
②
③
④
⑤
タブ画面の作成
ツリーの作成
テーブルの作成
グラフの作成
コンテキストメニューの追加
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
13
10-1. タブ画面の作成
【チュートリアル1】
タブ画面作成の作業内容
① 画面をツリー領域と、テーブル／グラフ領域に分ける。
② テーブル／グラフ領域をタブ化する。
テーブル
グラフ
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
14
10-1. （手順1）レイアウトの設定
【チュートリアル1】
以下のレイアウトを作成する
800px
300px
900px
① 画面全体（ツリー領域とグラフ／テーブル領域）を
表すdivタグを生成する。
<div id="persArea"></div>
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
15
【チュートリアル1】
10-1. （手順2）ビューの追加
② ビューを追加する。
var viewArea1 = {width : 300, height : 800, rowspan : 1, colspan : 1 };
var viewArea2 = {width : 900, height : 800, rowspan : 1, colspan : 1 };
レイアウト情報
viewArea1:ツリー領域
viewArea2:グラフ領域
var table = [ [ new wgp.PerspactiveModel(viewArea1),
new wgp.PerspactiveModel(viewArea2) ] ];
var perspactiveView = new wgp.PerspactiveView({
id : "persArea",
collection : table
});
var perspactiveView = new wgp.PerspactiveView({
id : "persArea",
collection : table
ビュー情報を配
列にする。
DivタグのIDを
指定。
});
perspactiveView.dropView("persArea_drop_0_0", "tree_area");
perspactiveView.dropView("persArea_drop_0_1", "contents_area");
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
16
10-1. （手順3）表示確認
【チュートリアル1】
以下の構成の画面が表示されることを確認する
テーブル
グラフ
※ウィンドウサイズを変更しても、
各領域のサイズが固定されていることを確認する。
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
17
【チュートリアル1】
10-2. ツリーの作成
WGPのツリービューを用いてツリーを表示する
※ツリービュー表示時の各種設定値及び、表示値はJavaScriptファイルに直
接書き込んでよい。このとき、表示値にIDを振り、HTMLのid要素に設定し
ておくこと。可能であれば、選択した要素を青く反転すること。
テーブル
技術課題
グラフ
課題1
課題1-1
課題1-2
課題1-3
課題1-4
HTMLタグのid要素にIDを振
っておくこと。
課題1-5
課題2
課題2-1
課題2-2
課題2-3
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
18
10-2. （補足説明）Backbone.jsについて
【チュートリアル1】
1. ツリーの作成には、Backbone.jsを用いる。
2. Backbone.jsとは？
① JavaScript上で、MVCモデル構造（※）を持ったアプリケーシ
ョンを開発するためのJavaScriptフレームワーク。
② モデル、ビュー、イベントを定義する。
3. 参考URL
http://documentcloud.github.com/backbone/
※MVCモデルについては、
「9-2. MVCモデル」を参照すること。
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
19
10-2. （手順1）ビューの追加
【チュートリアル1】
① ツリーのデータを表すModelをBackbone.jsの構成
に基づいて作成する。
user.TreeModel = Backbone.Model.extend({
defaults:{
text : "",
デフォルト定義
styleClass : [],
style : {}
},
idAttribute:“treeId"
});
user.TreeList = Backbone.Collection.extend({
model : user.TreeModel
});
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
20
10-2. （手順2）モデルの追加1
【チュートリアル1】
② ツリーのViewをBackbone.jsの構成に基づいて作成
する。
user.TreeView = wgp.AbstractView.extend({
initialize : function(arguments){
this.divId = this.$el.attr("id");
this.ulId = this.divId + "_ul";
初期化時
this.maxId = 0;
this.registerCollectionEvent();
描画時
this.render()
},render : function(){
$("#" + this.divId).append("<ul id='" + this.ulId + "'></ul>");
});
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
21
10-2. （手順3）モデルの追加2
【チュートリアル1】
③ View及びModelを作成する。
// idはパースペクティブ領域初期化時のidと同値を指定する。
var treeView = new user.TreeView({
id : "tree_area",
model : new user.TreeModel(),
collection : new user.TreeList()
});
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
22
【チュートリアル1】
10-3. テーブルの作成
jqGridを用いて、成績をテーブル表示する
※ jqGrid表示時の各種設定値及びjqGridの表示値は、ここではJavaScriptフ
ァイルに直接書き込んでよい。このとき、受講者それぞれにID列を設け、ID
を振ること。そのうえで、ID列は非表示列に設定すること。
※radioボタン表示は列の設定で行うことができる。
テーブル
技術課題
グラフ
ID列を設定するが表示しない。
課題1
課題1-1
削除
課題1-2
課題1-3
課題1-1
受講者
問題1▲
問題2
問題3
合計
受講者A
10
10
10
30
受講者B
20
10
15
45
受講者C
20
20
20
60
課題1-4
課題1-5
課題2
課題2-1
課題2-2
課題2-3
削除
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
23
10-3. （注意点）jqGridの利用方法
【チュートリアル1】
jqGrid 利用時には以下の注意が必要である
① 2つのjsファイルを読み込む必要がある。
1. ロケール定義ファイル
2. ライブラリ本体
② (1)ロケール定義ファイル→(2)ライブラリ本体の順で
読み込む必要がある。
– ライブラリ本体がロケール定義ファイルを参照するため、読
み込む順番を逆にするとエラー(b.jgrid.jqID is not a
function)が発生する。
※ エラーメッセージから原因を特定することが難しい。
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
24
【チュートリアル1】
10-3. テーブルの行削除
削除ボタン押下時に行を削除する
※ 削除を行うメソッドがjqGridに用意されているので、使用すること。
テーブル
技術課題
グラフ
課題1
課題1-1
削除
課題1-2
課題1-3
課題1-1
受講者
問題1▲
問題2
問題3
合計
受講者A
10
10
10
30
受講者B
20
10
15
45
受講者C
20
20
20
60
課題1-4
課題1-5
課題2
課題2-1
課題2-2
課題2-3
削除
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
25
10-3. （手順）jqGridの行削除メソッド
【チュートリアル1】
1. 行を削除するメソッドには delRowData と
delGridRow が存在する。
※ それぞれのメソッドについて調べること。
jqGrid wiki: http://www.trirand.com/jqgridwiki/doku.php
(メソッド名で検索をかけると良い)
2. delRowData メソッドを利用する。
行のidを設定する方
法を調べること
※ 例: $(selector).delRowData( rowid );
※ delGridRowはサーバ通信を伴うため今回は不適
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
26
【チュートリアル1】
10-4. グラフの作成
dygraphsを用いて、成績をグラフ表示する
※ dygraphs表示時の各種設定値及び、 dygraphsの表示値はJavaScriptフ
ァイルに直接書き込んでよい。
テーブル
技術課題
グラフ
課題1
課題1-1
課題1-2
課題1-3
課題1-1
点数
100
課題1-4
課題1-5
凡例
部分
80
60
課題2
課題2-1
40
課題2-2
20
課題2-3
0
1
2
3
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
4
問題番号
27
10-4. （注意点）グラフの生成タイミング
【チュートリアル1】
タブを生成してからグラフの生成を行う必要があ
る
① タブを生成する際にタブ内の width , height 値が変
更されるため、グラフを先に描画しておくとグラフが
壊れて表示されない。
– グラフ表示領域の width, height が0となってしまう。
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
28
10-5. コンテキストメニューの作成1
【チュートリアル1】
WGPのコンテキストメニュー作成機能を用いて、
ツリーにコンテキストメニューを表示する
※ コンテキストメニュー表示時の各種設定値及び、 表示値はHTMLファイル
及びJavaScriptファイルに直接書き込んでよい。
テーブル
技術課題
グラフ
課題1
課題1-1
削除
課題1-2
課題1-3
課題1-4
課題1-5
課題2
課題2-1
課題2-2
課題2-3
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
29
10-5. コンテキストメニューの作成2
【チュートリアル1】
親のノードをクリックした際に、コンテキストメニュ
ーが表示されないよう制御する
※表示時のコールバックメソッドの戻り値に何を返すかがポイント。
テーブル
技術課題
グラフ
課題1
課題1-1
課題1-2
課題1-3
クリックしても表示されない。
課題1-4
課題1-5
課題2
課題2-1
課題2-2
課題2-3
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
30
【チュートリアル1】
10-5. （手順）コンテキストメニューの表示方法
WGPでは以下のようにコンテキストメニューを表示する
① divタグを生成する。
<div id=“targetContext"></div>
② メニューを生成する。
<ul id="contextMenu">
<li id="delete">削除</li>
</ul>
③ ①で生成したタグにコンテキストメニューを設定する。
contextMenuCreator.createContextMenu(“targetContext”, “contextMenu”, option);
option については、jeegooContextのマニュアルを参照。
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
31
【チュートリアル1】
10-5. （注意点）メニューの作成タイミング
コンテキストメニュー構築後にツリーを構築すると、コン
テキストメニューが表示されない
① 間違った解決策: プログラムの実行順序を変更する。
– ツリーメニューやコンテキストメニューの作成は別スレッドで行われるた
め、この方法でもメニューは表示されない。
② 解決策：jstree構築完了時の処理に入れる。
– jsTreeは構築が完了すると”loaded.jstree”が呼び出される。←ここにメ
ニュー構築処理を入れる。
loaded.jstree
に対して…
– jQueryのbindメソッドを利用する。
– 例: $(selector).bind(“loaded.jstree”, function(){
// コンテキストメニュー構築処理
});
コールバック関数
を追加
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
32
11. チュートリアル1実装（サーバ）
【チュートリアル1】
チュートリアル1実装（クライアント）の流れ
① 概要説明
② SpringMVC導入・実装
③ Ajax通信導入・実装
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
33
11-1. Server通信実装(初期描画時)
【チュートリアル1】
これまで、クライアント側で設定していたデータを、サー
バから読み込むように変更する
① 初期描画用のデータは、サーバ側からクライアントに渡し、デ
ータをもとにクライアント側のコンポーネントを構築すること。
– Modelクラスにデータを書き込み、クライアントで読み込む。
– データ形式は、JSON形式とする。
– 初期値の構築は自由に実装してよい。
② サーバとのデータの受け渡しは、SpringMVCを用いること。
③ HTMLではなく、JSPを用いること。
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
34
11-2. MVCモデル
【チュートリアル1】
1. MVCモデルとは？
表示、操作を伴うアプリケーションを作成するときに用いられる、
標準設計方法である。
2. アプリケーションをModel, View, Controller
に分割して整理する。
① Model
② View
③ Controller
ロジックとデータを示す。
画面等のユーザインタフェースを示す。
入力処理・ページ遷移などを示す。
3. なぜMVCに分割するのか？
① モジュール分割が容易になり、保守性、再利用性が高まる。
② ユーザインタフェース（View）の取り換えが容易である。
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
35
11-3. SpringMVC
【チュートリアル1】
1. SpringMVCとは？
Javaで作成されたWebフレームワーク。
画面遷移や、ブラウザ-サーバー間の入出力パラメータの受け渡
しといった、Webアプリケーションを簡単に作るための機能を提
供する。
2. 参考URL
http://www.springsource.org/
◆SpringMVCを用いれば、MVCモデルを用いて
効率よくWebシステムを開発できます。
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
36
【チュートリアル1】
11-4. 本課題でのMVCモデル
グラフデータの削除を例にMVCの役割を示す
① 削除ボタンを押す
② データ削除を要求する
View
Controller
⑥ jspを用いてブラウザに
画面表示(削除が反映)
W GP
⑤ J SP ファイルを返す
④ データを返す
受
講
者
問
題
1▲
問
題2
問
題3
合
計
受講
者A
10
10
10
30
受講
者B
20
10
15
45
受講
者C
20
20
20
60
③ データを削除する
Model
削除
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
37
【チュートリアル1】
11-5. （手順1）Spring MVC の導入
1. 空の Spring MVC プロジェクトをEclipseで開く。
2. M,V,Cは以下のファイルに結びつく。
① Controller : サーバサイドプログラム
src/main/java/jp.co.acroquest.example.controller
② Model : サーバサイドプログラム
src/main/java/jp.co.acroquest.example.service
③ View : クライアントサイドプログラム
WebContent/WEB-INF/views/xxxx.jsp
css,js,imageなどの参照ファイル
成果物をSpring MVCに
移行させるためには
主にこの2つを編集する。
• 上記ファイルは、/WebContent/resources 配下に入れないと読み込めないの
で注意。
※各自、Spring MVC について調べること。
Spring Framework 参考URL: http://www.springsource.org/
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
38
【チュートリアル1】
11-5. （手順2）Spring MVC への移行(1/4)
1. クライアントとサーバの通信を定義する。
※ あるURLに対する振る舞いを1対1で定義する。
→Controllerクラスを用いて定義する。
ブラウザ表示
View
① リクエストを送る
② jspを返す
Controller
2. コントローラの定義方法。
①
②
③
④
controllerクラスを新たに定義する。
controllerクラス内に、URLとメソッドの対応を定義。
メソッド内の処理を記述する。
表示するjspを指定する。
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
39
【チュートリアル1】
11-5. （手順3）Spring MVC への移行(2/4)
3. Controllerクラスを定義する。
① Controllerパッケージ内に定義する。
② クラス名上に@Controllerを付け加える。
– これにより、controllerクラスと認識される。
4. URLとメソッドの対応を定義する。
① @RequestMappingをメソッド上につける。
– @RequestMapping( value=“/mapping/”, method=RequestMethod.GET )
public String methodName(Locale locale, Model model){}
メソッドに対応するURLを記述する。この例の場合、
http://localhost:8080/<contextName>/mapping/
よく使われるリクエストメソッドにGETとPOST
がある。それぞれの違いについて調べる。
でリクエストされると、methodNameメソッドが呼ばれる。
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
40
【チュートリアル1】
11-5. （手順4）Spring MVC への移行(3/4)
5. メソッド内の処理を追加する。
① クライアントから渡された値を取得する。
② クライアントに値を渡す。
public String methodName(@RequestParam(value=“keyName") String studentId
Locale locale, Model model){
model.addAttribute(“keyName”, value);
}
①Keyを設定し、値を取得する。
②Keyとvalueを設定し、値を渡す。どちらもString型
で定義する。
6. 表示するjspを指定する。
① return値にjspのファイル名を記述する。
public String methodName(Locale locale, Model model){
//処理
http://localhost:8080/ProjectName/にアクセスした場合、
return “jspName”;
WebContent/WEB-INF/views/jspName.jspが呼び出される。
}
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
41
【チュートリアル1】
11-5. （手順5）Spring MVC への移行(4/4)
7. HTMLファイルをJSPファイルに移行する。
① HTMLの内容をJSPにそのままコピー。
② css,js,imageのパスをjsp用に変更する。
– <%=request.getContextPath()%>を使う。
「../」のような参照方法が使用できなくなるため。
– 例) jQuery のディレクトリパスが以下の場合の例
/WebContent/resources/lib/jQuery/js/jquery-1.7.1.min.js
→<%=request.getContextPath()%>/resources/lib/jQuery/js/jq
uery-1.7.1.min.js
ここまでで Spring MVC を用いて
View を表示する部分が完了！
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
42
11-6. （補足説明）JSONデータの作り方
【チュートリアル1】
クライアントにデータを渡すためには、Javaオブ
ジェクトをJSON形式に変換する必要がある。
① JSON形式を簡単に作成できる、JSONICを用いる。
– Javaオブジェクトを簡単にJSON形式に変換可能。
– Javaオブジェクトのフィールド名をkeyに、値をvalueとした連
想配列型データとしてJSON型に変換する。
– List型のJavaオブジェクトであれば、Array型のJSON形式
に変換する。
② 以下のように変換される。
private String id;
private String name;
{“id”:”123”,”name”:”daniel”}
//getterとsetterを必ず作ること。
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
43
【チュートリアル1】
11-7. Server通信実装(Ajax通信: データ取得)
1. ツリーの最下層のノードをクリックした際に、サー
バからデータを取得する。
① jQueryのAjax通信を用いて、サーバにリクエストを
送信すること。リクエストはPOST形式とし、データに
課題番号を設定すること。
– サンプルプログラムを参考にすること。
2. 取得したデータを用いて画面を表示し直す。
① jqGridの再描画の際に、一度表示値をすべて削除し
て入れ直す必要がある。
– Callback処理内で再描画をおこなうこと。
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
44
11-7. （手順1）Ajax通信のやり方(1/2)
【チュートリアル1】
ページのリロードをせずにサーバと通信を行う手
法がAjax通信である。
① Ajax通信の利点。
– サーバからデータのみ取得し、ページの一部のみ書き換え
られる。
Ajax通信
① P OST形式のリクエスト
を送る
View
③ 画面の一部を描画
しなおす
Controller
② J SON 形式のデータを
返す
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
45
11-7. （手順2）Ajax通信のやり方(2/2)
【チュートリアル1】
② 設定方法。
– クライアント
jQueryのajaxメソッドを使用する。メソッドの引数には以下を設定する。
• url : 呼び出したいメソッドのURL
• type : “POST”
• data : 送信したいデータ
• Success : 通信成功時の処理 ※サンプルプログラム参照
– サーバ
@RequestMappingのmethod属性にRequestMethod.POSTを設定する
。
@ResponseBodyを設定する。
• 戻り値にJavaオブジェクトを設定することで、自動でJSON形式に変換
し、データを返す。
@RequestParamにクライアントから送信されるデータのkeyを設定する。
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
46
【チュートリアル1】
11-8. Server通信実装(Ajax通信: データ削除)
1. 以下の場合にサーバに削除処理を送信する。
① コンテキストメニューで削除が選択されたとき。
② 削除ボタンをクリックしたとき。
– クリックイベントを設定すること。
– リクエストはPOST形式とする。
2. サーバ側のデータを削除する。
① 画面更新を行った際に、削除されたデータが表示さ
れないこと。
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
47
【チュートリアル2】
チュートリアル2：リバーシ
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
48
【チュートリアル2】
1. 目的
以下のスキルを身に付ける
① Raphael を用いてリッチな画面描画やアニメーショ
ンを実現できるようになる。
② WGPを用いて画面を構築できるようになる。
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
49
【チュートリアル2】
2-1. 仕様: 画面イメージ
以下のような構成で画面を作成する
① リバーシWindow。
– オセロの盤面などを
表示する。
①
② メッセージWindow。
– ゲームについての情報を
文字で表示する。
②
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
50
【チュートリアル2】
2-2. リバーシWindow
1.盤面の表示
以下を実現する
①
②
③
④
盤面の表示
クリックで石を配置
スコア表示
プレイヤー表示
4.プレイヤー表示
– 現在のプレイヤーを
ハイライトで表示する。
2.クリックで石を配置
3.スコア表示
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
51
2-3. メッセージWindow
【チュートリアル2】
ゲームについてのメッセージを表示する
① 各メッセージには表示時刻を付けること。
② 表示する内容については自分で考えること。
表示時刻
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
52
3-1. 実装ワンポイントアドバイス①
【チュートリアル2】
1. WGP で生成した window 内に Raphael を用い
て描画する手順。
① Raphael のインスタンスを作成する。
persManager.dropView("persArea_drop_0_0", DIV_ID);
paper = new Raphael( document.getElementById( DIV_ID ) , WIDTH, HEIGHT )
WGPのdropViewで
登録したDIVのID
作成する Raphael の
描画領域の大きさ
② 作成したインスタンスを用いて描画を行う。
※ Raphael: http://raphaeljs.com/
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
53
3-2. 実装ワンポイントアドバイス②
【チュートリアル2】
2. Raphael を用いたアニメーションの書き方。
circle.animation( params, ms, [easing], [callback] )
①
params: 変化後の属性値を連想配列形式で記述する。
– 利用可能な属性についてはリファレンス参照。
– http://raphaeljs.com/reference.html#Element.attr
②
③
ms: アニメーション開始から終了までの時間(ミリ秒)。
easing: 変化の仕方。
– 利用可能な値はリファレンス参照。
– http://raphaeljs.com/reference.html#Raphael.easing_formulas
④
callback 関数。
※ 例: circle を(100, 100)まで1000msで移動させ、完了したらアラートを出現する
circle.animate( { cx: 100, cy: 100 }, 1000, “<>”, function(){ alert() } );
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
54
3-3. 実装ワンポイントアドバイス③
【チュートリアル2】
3. マウスカーソル位置の取得には注意が必要。
① eventオブジェクトからは
ページ左上からの座標
(px, py) しか得られない。
Raphael 描画領域
– 余白を考慮する必要あり！
(px, py)
(rx, ry)
② Raphael の描画領域の
左上座標 (rx, ry) を取得し、
Raphael 描画領域上の
座標を計算する。
( px – rx, py – ry )
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
55
【（参考）JavaScript導入】
（参考）JavaScript導入
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
56
1. JavaScript における オブジェクト
【（参考）JavaScript導入】
1. JavaScript のオブジェクトの記述形式のことを、
JSON(JavaScript Object Notation) と言う。
① キーと値のペアの集合である。
② Javaにおける Map と似ている。
JavaScript
Java
var obj = {
“key1”: “Acro”,
“key2”: “Quest”
}
Map<String, String> obj = new HashMap<String, String>();
obj.put( “key1”, “Acro” );
obj.put( “key2”, “Quest” );
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
57
【（参考）JavaScript導入】
2. 関数オブジェクト
1. JavaScript において関数はオブジェクトの１つである。
2. 一般的なオブジェクトと同様の扱いが可能である。
※ Java では関数(メソッド)とオブジェクトは完全に別物。
• JavaScript 特有の関数オブジェクト利用例
var func1 = function(){ alert(“test”) };
var func1 = function(){ alert(“test”) };
func1( ); // カッコをつけて実行
var func2 = function( arg ){
arg(); // 引数にセットした関数オブジェクトを実行
}
func2( func1 ); //関数オブジェクトを引数にセット
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
58
【（参考）JavaScript導入】
3. 無名関数
1. 無名関数とは匿名の関数オブジェクトであり、
イベントリスナなどに用いることが多い。
※ イベントリスナ: イベントが発生した時に実行される関数
① 無名関数の利用例:
$(selector).addEventListener( ‘click’, function(event){
//処理
}, false );
※ 関数オブジェクトに置き換えた例:
無名関数
var clickListener = function(event){ // 処理 };
$(selector).addEventListener( ‘click’, clickListener, false);
※参考URL :http://builder.japan.zdnet.com/script/sp_javascript-kickstart-2007/20364588/
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
59
【（参考）JavaScript導入】
4. 無名関数利用時の注意
1. 無名関数内部では this を使わないこと。
■悪い例
■良い例
var ClassName = function(){
var ClassName = function(){
this.val = “String”;
this.val = “String”;
}
}
ClassName.prototype = {
ClassName.prototype = {
method: function(){
method: function(){
$(“#id_name”).bind(“loaded.jstree”, function(){
var instance = this;
alert( this.val );
$(“#id_name”).bind(“loaded.jstree”, function(){
});
}
}
スコープ内での変
数に格納しておく
alert( instance.val );
this が無名関数を指すため
undefined error になる
});
}
めでたく String が表示される
}
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
60
5. コールバック関数
【（参考）JavaScript導入】
1. コールバック関数とは呼び出し先の関数の実行
中に呼び出されるよう指定した関数。
※ JavaScript ではマウス移動などのイベントにコール
バック関数を設定することが多い。
① マウスクリックに設定する例
$(“#button”).addEventListener( ‘click’, function(event){
alert( “#button がクリックされました。” );
}, false );
(2)コールバックの実行
(1)コールバック
の登録
– 上記プログラムは以下の順序で実行される。
(1) コールバック関数の登録(関数の中身は実行されない)。
（ユーザがマウスをクリックする）。
(2) コールバック関数の実行。
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
61
【（参考）JavaScript導入】
6. オブジェクト指向プログラミング(1/4)
1. Java Script
2. Java
① クラスの定義
① クラスの定義
var ClassName = function( args ){
class ClassName{
this.val1; //属性の定義
public int val1; //属性の定義
this.val2; //属性の定義
public int val2; //属性の定義
}
ClassName(args){
※インスタンス作成時に呼ばれる
ClassName.prototype={
// コンストラクタ
prototype
method1: function(args){
}
については
public void method1(args){
// method1 の処理
次頁参照
},
// method1 の処理
method2: function(args){
}
public void method2(args){
// method2 の処理
}
// method2 の処理
}
}
※メソッドの戻り値は任意
}
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
62
【（参考）JavaScript導入】
7. オブジェクト指向プログラミング(2/4)
1. Java Script
2. Java
② インスタンスの作成・メソッド呼び出し
var className = new ClassName();
className.method1(args);
② インスタンスの作成・メソッド呼び出し
ClassName className =
new ClassName()
className.method1(args);
③ 継承
var SubClass = function(){
// 属性の定義
}
// SuperClassのメソッドを継承
③ 継承
class SubClass extends SuperClass{
// 省略
}
SubClass.prototype = new SuperClass();
// メソッドの定義
SubClass.prototype.m2=function(){….};
SubClass.prototype.m3=function(){….};
新規メソッドを追加するときに前頁のよう
にカンマ区切りでのオブジェクト的記法が
利用できない。理由は調べること。
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
63
【（参考）JavaScript導入】
8. オブジェクト指向プログラミング(3/4)
1. 『prototype』を用いるとオブジェクト指向プログラ
ミングが可能となる。
// クラスの作成
var SampleClass = function( mes ){
this.message = mes;
}
SampleClass.prototype ={
showMessage: function(){
alert( this.val );
}
}
インスタンスを複数作成し、異なる
属性値を持たせることができる。
// クラスの利用
// インスタンスの作成
var instance1 = new SampleClass(“Hello”);
var instance2 = new SampleClass(“Bye”);
// メソッドの呼び出し
instance1.showMessage();
Instance2.showMessage();
ドット演算子を用いてメソッドを呼び出す
// 属性値の利用
instance1.message = “Welcome to WGP”
ドット演算子で属性を読み書きできる
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
64
【（参考）JavaScript導入】
9. オブジェクト指向プログラミング(4/4)
2. 『prototype』を使わない場合、オブジェクト指向
プログラムにならないので注意すること！
間違った例
//クラスの定義
var obj = function(){
this.message = "Message";
};
thisを用いた変数の参照ができな
いので、undefinedとなる。
//prototypeを使わずにメソッドを宣言
obj.method = function(){
alert( this.message );
};
ドット演算子でメソッドを参照でき
ないため、エラーが発生する。
//インスタンスの作成
var instance = new obj();
instance.method(); //エラー発生
obj.method();
メソッドを呼び出すことができるが
アラートの表示はundefined
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
65
【（参考）JavaScript導入】
10. Selector
1. HTMLタグを特定するための記法であり、課題で
は各パーツを表示する場所の指定に用いる。
① ID
CSS の書き方と同じ
– 例: <div id=“ id_name” > ⇒ “#id_name” と記述
– ページ内に同じIDが複数あってはならない。
② Class
– 例: <table class=“ class_name” > ⇒ “.class_name” と記述
– 同じクラス名をページ内で複数用いることができる。
③ Name
– 例:<input type=“radio” name=“ group_name” > ⇒ [name=group_name] と記述
– ラジオボタンのグループ化などに用いる。
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
66
11. jQuery を利用したSelector記法
【（参考）JavaScript導入】
1. jQuery メソッドの利用方法は以下の通りである。
① jQuery(selector)
② $(selector)
意味は同じ
$ を用いることが多い
2. Selectorを実際に記述した例
① $(“#id_name”).method(…);
② $(“.class_name”).method(…);
③ $(“[name=group_name]”).method(…);
– jQueryのメソッドはリファレンスを参照
– jQuery日本語リファレンス: http://semooh.jp/jquery/
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
67
これであなたもWGP開発者だ！
Infrastructures Evolution
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
68