Taste of Tech Topics

Acroquest Technology株式会社のエンジニアが書く技術ブログ

WGPの使い方(第2回:ツリー)


みなさん、こんばんは。
fujiiです。

今回は、
halookENdoSnipe5.0βなどでも利用されている、
WGP1.0β(2013/1/18時点)について、説明します。

過去の記事でも紹介したWGPですが、
アップデートに伴い、定義方法も少し変わったので、合わせて説明します。


WGP1.0βでの主な変更点は、以下のとおりです。
・WebSocket対応
・Spring MVCベースに改良
・Backbone.jsの組み込み

サーバ側では、WebSocketに対応したため、リアルタイム性の求められる処理が必要な場合でも、
WGPを適用しやすくなりました。

WGPは現在Tomcatに対応しており、
WebSocketを使用する場合はTomcat 7.0.29以降を使用します。

クライアント側では、Backbone.jsを組み込むことで、
クライアント側でもMVCを意識した開発を行いやすくなりました。

早速使ってみます

前回紹介した手順で、WGPをダウンロードをしてください。

すでに、blankプロジェクトとして提供しているため、
Eclipseなどでプロジェクトをインポートするだけで、使用することができます。

ただし、SpringMVCを利用しているため、開発時には設定が必要となります。
プロジェクトに合わせて、WebContent/WEB-INF/Spring/appServlet配下のservlet-context.xmlを修正してください。

以下は、jp.co.acro.wgp配下をDI対象としたときの定義です。

<context:component-scan base-package="org.wgp" />
<context:component-scan base-package="jp.co.acro.wgp" /> <!-- この行を追加 -->

それでは、早速、使ってみましょう。

レイアウト

Ver0.1から多少変更があるため、レイアウトから説明していきます。

まずは、JSPから説明します。

デフォルトのinclude設定を用意しているため、ヘッダには以下の1行を追加するだけで、
必要なJavaScriptCSSの読み込みは可能となっています。

今までは手動でインポートしていたことを考えると、
随分と楽になりましたね。

<%@ include file="../include/ext/javaScriptInclude.jsp"%>

次に、パースペクティブと呼ばれる画面の土台を構築します。
divタグを生成し、id属性を"persArea"とします。

<div id="persArea"></div>

JavaScript上でビューを構築します。
今回は、図のようなレイアウトを作成してみます。

作り方は、Ver0.1とほぼ同じですが、Backboneを組み込むようにしたため、
wgp.PerspactiveModelにレイアウト定義を設定するようにします。

var viewArea1 = {width : 300, height : 800, rowspan : 1, colspan : 1};
var viewArea2 = {width : 900, height : 800, rowspan : 1, colspan : 1};

var table = [ [ new wgp.PerspectiveModel(viewArea1),
		new wgp.PerspectiveModel(viewArea2) ] ];
var perspectiveView = new wgp.PerspectiveView({
	id : "persArea",
	collection : table
});
perspectiveView.dropView("persArea_drop_0_0", "tree_area");
perspectiveView.dropView("persArea_drop_0_1", "contents_area");

あとは、Spring MVCに従い、コントローラを作成すれば表示可能です。
以下のコントローラクラスを生成してください。

@Controller
public class TreeController {
  @RequestMapping(value = "/init/", method = RequestMethod.GET)
  protected String init() {
    return "tree";
  }
}

JSPは、WebContent/WEB-INF/views 直下に配置します。

ツリーの表示

それでは、WGPの機能を使ってツリーを表示します。
下図のツリーを作成してみます。

定義が必要となるのは、以下の3つです。

  1. 各ツリー要素の情報を表すモデル
  2. ツリーの要素の集合を表すコレクション
  3. ツリーの表示を行うビュー

まずはモデルを作成します。
モデルの作成はBackboneのモデルを拡張してください。
idAttribute については、ツリーを一意にするキーとなるため、
必ず定義してください。

var user = {};
user.TreeModel = Backbone.Model.extend({
	defaults : {
		text : "",
		styleClass : [],
		style : {}
	},
	idAttribute : "treeId"
});

次に、コレクション。
こちらについても作成時は、Backboneのモデルを拡張してください。
先ほど作成したモデルのコレクションを定義します。

user.TreeList = Backbone.Collection.extend({
	model : user.TreeModel
});

最後にビューの定義です。
こちらについては、WGPで提供するTreeViewを拡張することで、
定義できます。

ツリー選択時のイベントは、clockModelを定義することで、作成可能です。
引数のtreeModelは、先ほど作成したモデルの実データとなります。

user.TreeView = wgp.TreeView.extend({
  clickModel : function(treeModel) {
    var text = treeModel.get("data");
    alert(text + "を選択しました。");
  }
});

それでは、ツリーを呼び出してみましょう。

まずは、TreeViewオブジェクトを作成します。

var treeView = new user.TreeView({
  id : "tree_area"
});

次に、ツリーデータを読み込む処理を追加します。
ツリーにデータを読み込ませたい場合は、
ツリーとサーバを連携するために提供している、AppViewを使います。

使い方は、以下のとおりです
appViewのonSearchメソッドに対して、データ取得元のURLを指定すれば、
ツリーのデータがクライアント、サーバ間で連携される仕組みとなっています。

var appView = new wgp.AppView();
appView.addView(treeView, wgp.constants.TREE.DATA_ID);

var url = wgp.common.getContextPath() + "/tree";
var settings = {url : url, data : {}};
appView.onSearch(settings);

あとは、サーバ側からデータを受け取れば完成です。
各ツリーの要素に対して、Map形式で、以下の値を指定してください。

"id" : ツリー階層を表すID。スラッシュ区切りのパス形式で指定する。
"parentTreeId" : 親要素のツリー階層を表すID。
"data" : ツリーに表示する名称を設定する。
"treeId" : モデルに定義した"treeId"と同じ。処理で要素を特定したい場合に利用する。

作成したMapをツリーの親要素から順にListに保持し、
"tree"というキーで紐づけます。

@RequestMapping(value = "/tree", method = RequestMethod.POST)
@ResponseBody
protected Map<String, List<Map<String, Object>>> getTree()
{
    Map<String, List<Map<String, Object>>> result = new HashMap<String, List<Map<String, Object>>>();
    List<Map<String, Object>> treeList = new ArrayList<Map<String, Object>>();

    Map<String, Object> dataMap1 = new HashMap<String, Object>();
    dataMap1.put("id", "/Top");
    dataMap1.put("parentTreeId", "");
    dataMap1.put("data", "Top");
    dataMap1.put("treeId", "/Top");
    treeList.add(dataMap1);
  ・
  ・(中略)
  ・
    treeList.add(dataMap8);

    result.put("tree", treeList);
    return result;
}

クライアント側でモデルの要素を追加したい場合には、
各データのMapのパラメータを追加してください。

サーバとクライアントで自動的にモデルの同期が行われる仕組みとなっています。

完成したら、ブラウザからアクセスしてみましょう。

下図のように表示が行われると思います。

[:480]

今回作成したものについては、WGPSample.zip 直からダウンロードできます。

最後に

今回は、WGPを利用して、ツリーを手軽に表示する方法を説明しましたが、
同じようにタブやグラフも表示することができます。

他にも紹介できていない機能が多数あるため、定期的に説明していきたいと思います。