JavaのWebアプリケーション開発フレームワークによる、Webサイト開発の顛末記です。

EclipseのMavenを使った、Spring-MVC、Thymeleaf、MyBatis 等のプログラミングテクニックを、
備忘録的に記録しています。実際に動くソースコードを多用して説明していますので、
これからEclipseや、Spring-MVCを始めたいと思っている人にとって、少しでも参考になれば幸いです。
■応用の森　生物分類階層構造Tree View(HTML)
今回のツリー形式表現は、ビジネスロジックよりも、
それをブラウザ上にツリー表示するためのview(HTML)と、スタールシートが重要になります。
以下、簡単に処理内容を説明します。
１）view(HTML)
まず、最初のリクエスト　http://localhost:8080/j_Labo/creaturetree.xhtml
で表示される、初期画面のHTMLです。
最初の静的な画面なので、jQueryの部分を除けば、たかだか数十行程度の簡素なHTMLです。
WebContent/creature_tree.html
「生物分類リスト」ノードをクリックすると、
jQueryの、$(document).on('click')が実行されます。
このとき、クリックされたーノードが既に展開済み（表示済み）の場合は
子ノードのdivタグの内容をクリアします。
展開していない場合は、
検索パラメータをJSON化して、Ajaxによるリクエスト「creatureclass.xhtml」を実行します。
コントローラは、検索パラメータ(parent/rute)でDBを検索し、
検索結果を、creature_child.htmlに返却します。
Ajaxのコールバック関数で、返却されたcreature_child.htmlの内容を
子ノード描画エリアのdivタグに描画します。

 

次は、DBから検索された子ノードを描画するためのview(HTML)
WebContent/creature_child.html
DBの検索結果が返却されるview(HTML)です。
構造は、jQueryを除いて、creature_tree.htmlとほとんど同じです。
Ajaxによって、creature_tree.htmlに埋め込まれるHTMLのため
<html>タグや、<body>タグはありません。
ノード部分をクリックすることで、親のHTML(creature_tree.htm)のjQuery　$(document).on('click')が実行されます。
２）スタイルシート
最後が、Treeview描画用スタイルシートです。
分類ツリーの縦罫線などのスタイルを定義しています。

WebContent/css/tree.css

 

viewの説明は以上です。
実際の動作から想像すると、もっと複雑なviewをイメージしたかもしれませんが、
随分、あっけない簡潔極まりないシンプルなviewですね。

次のページは、コントローラの説明に移ります。
生物分類データ構造  生物分類階層構造Tree View(HTML)
HOME
 生物分類階層構造Treeコントローラ