!!![Tree|http://click.sourceforge.net/docs/extras-api/net/sf/click/extras/tree/Tree.html] 階層化されたデータを表示するためのツリーコントロールを提供します。 階層化されて保持されるデータは[[TreeNode]]のもので、 個々のTreeNodeはその中で必ず一意に識別されます。 ブラウザ上では、以下のスクリーンショットのように表示されます。 {{ref_image tree.png}} !!Treeの例 Treeを使った実際のコードは以下のようになります (このコードは先ほどのスクリーンショットを取るために作成されたものです)。 {{code java public class PlainTreePage extends BorderPage { public PlainTreePage() { Tree tree = buildTree(); addControl(tree); } //This method creates a representation of a Windows OS directory. public Tree buildTree() { Tree tree = new Tree("tree"); //Create a node representing the root directory with the specified //parameter as the value. Because an id is not specified, a random //one will be generated by the node. By default the root node is //not rendered by the tree. This can be changed by calling //tree.setRootNodeDisplayed(true). TreeNode root = new TreeNode("c:"); //Create a new directory, setting the root directory as its parent. Here //we do specify a id as the 2nd argument, so no id is generated. TreeNode dev = new TreeNode("dev","1", root); //The following two nodes represent files in the directory. //The false argument to the constructor below means that these nodes //does not support child nodes. Makes sense since files cannot contain //directories or other files new TreeNode("java.pdf", "2", dev, false); new TreeNode("ruby.pdf", "3", dev, false); TreeNode programFiles = new TreeNode("program files", "4", root); TreeNode adobe = new TreeNode("Adobe", "5", programFiles); TreeNode download = new TreeNode("downloads","6", root); TreeNode web = new TreeNode("web", "7", download); new TreeNode("html.pdf", "8", web); new TreeNode("css.html", "9", web); TreeNode databases = new TreeNode("databases", "10", download); new TreeNode("mysql.html","11",databases); new TreeNode("oracle.pdf","12",databases); new TreeNode("postgres","13",databases); tree.setRootNode(root); return tree; } } }} !!Tree のスタイルシート ツリーコントロールを使用すると、そのスタイルシート(tree.css)とjavascript(tree.js)とが /click/tree以下に自動的に配置します。 このスタイルシートを利用するには、[PageImports|http://click.sourceforge.net/docs/click-api/net/sf/click/util/PageImports.html]を参照するだけです。 {{code html $imports $tree }} !!Tree のカスタマイズ 以下のリストは、ツリーのアイコンを表示するのに使用されるスタイルシートのクラスです。 tree.cssを変更して別のアイコンを利用するのも簡単です。 これらのクラスは全て要素の中で指定されていることに注意してください。 - ツリーのリーフノード。 - 開いた状態のノード。 - 閉じた状態のノード。 '''Credit''' goes to [Wicket|http://wicket.apache.org/] for the following: * images/folder-closed.png * images/folder-open.png * images/item.png