[Spring Roo] 14. グリッドを使う(dgrid)

2014/03/01 9:15 PM
 

これまで作ってきたSpring RooのWebアプリの一覧表示を、機能的なグリッドで表現する。

Spring Rooが生成する一覧表では、tags/form/fields/table.tagxとtags/form/fields/column.tagxによって、普通のテーブルタグのHTMLが生成される。これは、ページネーションこそあれど、スクロールもソートもしない。

JavaScriptライブラリの選択

Dojoを使ってみよう

現在、クライアント再度JavaScriptライブラリで最も手軽に使えるのはjQueryであるが、業務の要求に耐えるようなものを作ろうとするとjQuery UIでは足りなくて、あちこちのプラグインを寄せ集めることになり、操作性の統一感も失われてしまうことになりかねない。

Spring Rooが採用しているJavaScriptライブラリは、Dojoという、あまりなじみのないものだ。海外ではjQueryと同じくらいの認知度があるらしい。よく調べてみると、UIパーツも揃っていて、統一的にテーマを変更できるようになっている。Rooで開発をするのであれば、いい機会なので使ってみることにしよう。

Dojoのグリッド事情

Dojoライブラリでは、Gridという名のグリッドを持っている。Dojoについて日本語の情報を検索すると、2010年ころの情報がヒットして、Dojo Gridの例がよく載っている。しかし、最近は別会社のdgridが推奨され、Gridは非推奨となっている。今回は、dgridを使用することにする。

セットアップ

最新のDojoライブラリのセットアップ

Dojoの最新版は1.9.3になっているのだが、Spring Roo 1.2.4に内蔵されているDojoライブラリは、1.5相当と考えられ、いささか古い。そうなると、肝心のdgridが満足に使えなかったり、最新のブラウザに対応できなかったりする恐れがある。開発当初は最新の組み合わせで始めたい。

まず、プロジェクトで使用するDojoライブラリを最新にしてみよう。

ところが、これが一筋縄ではいかなかった。

Spring Rooプロジェクトでは、実行時に/resourcesに展開されるフォルダの中に、dojoその他のフォルダが含まれるので、META-INF/web-resourcesに最新版をコピーすればよいはずだ。ところが、コピーした直後から、Gitのチェックが止まらなくなってしまった。何しろ10,000以上のリソースが入っているのだ。無理もない。また、Rooによるチェックも入るので、この分では開発そのものがおぼつかなくなる…。

そこで、少し遠回りするが、JARファイルを作ってリンクするという方法をとることにした。

Upgrading the Version Of Dojo Used By Rooというサイトの方法が参考になったので、手順を記す。

  1. Webアプリとは別に、JARアーカイブを作るためのMavanプロジェクトを作る(dojo-jsとする)。
  2. dojo-jsプロジェクトのsrc/main/resourcesに、META-INFディレクトリを作る。
  3. META-INFに最新のdojoライブラリのファイル群をコピーする(src/main/resources/META-INF/dojo-release-1.9.3となる)。
  4. Mavenプロジェクトを、「Run As」「Maven build」でGoalにinstallを指定して実行し、JARアーカイブを作る(targetにdojo-js-1.9.3.jarというファイルができる)。
  5. WebアプリのMaven設定ファイル(pom.xml)で、JARアーカイブへの依存を定義する。
  6. Webアプリのmvc:resourceの場所に、このJARアーカイブを指定する。

Mavenプロジェクトの作成

039

Mavenプロジェクトの設定

040

ビルドの設定

041

生成されたJARファイル

042

これで、最新版のDojo 1.9.3が使えるようになる。

dgridの組み込み

これだけでは、dgridは使えるようにならない。Dojoイチオシのグリッドのはずなのに、なぜか同時に配布されている訳ではないのだ。

dgridサイトのInstallationにあるように、以下のライブラリをdojoと同じ場所に配置しなければいけない。

当然、dgrid本体も必要だ。

dgrid

それぞれをGit CloneなりZIPなりでダウンロードして、先ほどのdojo-jsプロジェクトに追加する。以下のような配置になるようにする。

045

これで、Maven buildを実行しておく。

一覧表示の改修

dgrid版一覧表示画面の作成

元々の一覧表示画面をそのままとっておいて、新たにdgrid版を作ってみよう。

Rooプロジェクトに戻って、以下の手順で作業を行う。

  1. tags/form/fields/table.tagxをコピーして、tags/form/fields/dgrid.tagxを作る。
  2. dgrid.tagxを、dgridを使用するように書き換える。
  3. views/onlinememoes/list.jspxをコピーして、views/onlinememoes/dgrid.jspxを作る。
  4. dgrid.jspxを、先ほど作ったdgrid.tagxを使うように書き換える。
  5. views/onlinememoes/views.xmlのonlinememoes/listの定義を、list.jspxではなくてdgrid.jspxに書き換える。

出来上がったファイルは以下の通り。

tags/form/fields/dgrid.tagx

views/onlinememoes/dgrid.jspx

views/onlinememoes/views.xml

前回の改修で、ヘッダにAccept:application/jsonを指定されたGETリクエストについては、listJsonが実行されるようになっているので、これでよいはず。

046

しかし、何かおかしい。

アカウントが空だ。

dgridの修正

これは、アカウントのログインIDを表示するようにdgrid.jspxで「account.loginId」と指定したつもりが、dgridがJSONのネストしたプロパティ指定に対応していないからだ。

応答のJSONから抜粋

dgrid.jspx

views/onlinememoes/dgrid.jspx

複雑な構造を表現できるという割に、まったく現代的な状態ではないと思えてしまう。

この問題は、先ほど作ったdojo-jsプロジェクトで修正して解決してしまおう。

dgridのGrid.jsで、セルを設定する箇所で、指定されたフィールド名を使って行のオブジェクトから取得しているところが問題だ。dojoの流儀では、

data = dojo.getObject(取得したいオブジェクトのパス, 存在しない場合に作るかどうか, オブジェクト);

のように書くようだ。ドット区切りでパスを指定できるので、「account.loginId」という指定ができるはず。

修正が済んだら、dojo-jsプロジェクトをビルドして、Webアプリを起動して試してみよう。

043

ソートもできる。

044

まとめ

ここまでで、最新のフロントエンドJavaScriptライブラリの組み込みと、グリッドの試用ができた。しかし、このままでは、編集や削除のためのリンクがないなど、とりあえず感が拭えない。

次回からは、このグリッドをさらに使い込んでいく。



コメントはまだありません

まだコメントはありません。

RSS feed for comments on this post. TrackBack URI

コメントを書く

WordPress Themes