{"id":399,"date":"2023-01-27T15:15:59","date_gmt":"2023-10-25T08:41:25","guid":{"rendered":"https:\/\/www.silicloud.com\/ja\/blog\/index.php\/2023\/11\/30\/%e3%83%97%e3%83%a9%e3%82%a4%e3%83%a0%e3%83%95%e3%82%a7%e3%82%a4%e3%82%bb%e3%82%b9%e3%81%ae%e3%83%84%e3%83%aa%e3%83%bc%e3%80%81%e3%83%84%e3%83%aa%e3%83%bc%e3%83%8e%e3%83%bc%e3%83%89%e3%80%81%e3%83%84\/"},"modified":"2025-07-31T23:17:14","modified_gmt":"2025-07-31T14:17:14","slug":"%e3%83%97%e3%83%a9%e3%82%a4%e3%83%a0%e3%83%95%e3%82%a7%e3%82%a4%e3%82%bb%e3%82%b9%e3%81%ae%e3%83%84%e3%83%aa%e3%83%bc%e3%80%81%e3%83%84%e3%83%aa%e3%83%bc%e3%83%8e%e3%83%bc%e3%83%89%e3%80%81%e3%83%84","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/ja\/blog\/%e3%83%97%e3%83%a9%e3%82%a4%e3%83%a0%e3%83%95%e3%82%a7%e3%82%a4%e3%82%bb%e3%82%b9%e3%81%ae%e3%83%84%e3%83%aa%e3%83%bc%e3%80%81%e3%83%84%e3%83%aa%e3%83%bc%e3%83%8e%e3%83%bc%e3%83%89%e3%80%81%e3%83%84\/","title":{"rendered":"\u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30bb\u30b9\u306e\u30c4\u30ea\u30fc\u3001\u30c4\u30ea\u30fc\u30ce\u30fc\u30c9\u3001\u30c4\u30ea\u30fc\u30c6\u30fc\u30d6\u30eb\u306e\u4f8b\u3068\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb"},"content":{"rendered":"

\u968e\u5c64\u30c7\u30fc\u30bf\u3092\u8868\u793a\u3057\u3001\u30b5\u30a4\u30c8\u306e\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306b\u3001Primefaces\u306fTree\u3068TreeTable\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u63d0\u4f9b\u3057\u3066\u3044\u307e\u3059\u3002\u3053\u308c\u3089\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u6d3b\u7528\u3059\u308b\u306e\u306f\u5bb9\u6613\u3067\u306f\u306a\u304f\u3001\u591a\u304f\u306e\u6280\u8853\u7684\u306a\u8a73\u7d30\u304c\u5fc5\u8981\u3067\u3059\u3002\u3053\u308c\u3089\u306e\u6280\u8853\u7684\u554f\u984c\u306e\u3044\u304f\u3064\u304b\u306f\u3001\u30a4\u30f3\u30bf\u30fc\u30cd\u30c3\u30c8\u4e0a\u3067\u6563\u5728\u3057\u3066\u516c\u958b\u3055\u308c\u305f\u6280\u8853\u6587\u66f8\u3067\u30ab\u30d0\u30fc\u3055\u308c\u3066\u3044\u307e\u3059\u304c\u3001\u4ed6\u306e\u3082\u306e\u306f\u30ab\u30d0\u30fc\u3055\u308c\u3066\u3044\u307e\u305b\u3093\u3002\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306f\u3001\u3053\u308c\u3089\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u3069\u306e\u3088\u3046\u306b\u6d3b\u7528\u3059\u308b\u304b\u306e\u5b8c\u5168\u306a\u8aac\u660e\u3092\u63d0\u4f9b\u3059\u308b\u3053\u3068\u3092\u76ee\u7684\u3068\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n

\u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30b7\u30ba\u30c4\u30ea\u30fc\u30d9\u30fc\u30b7\u30c3\u30af\u60c5\u5831<\/h2>\n
\n
\n\n\n\n\n\n\n\n\n\n
Info<\/th>\nTree<\/th>\n<\/tr>\n<\/thead>\n
Component Class<\/td>\norg.primefaces.component.tree.Tree<\/td>\n<\/tr>\n
Component Type<\/td>\norg.primefaces.component.Tree<\/td>\n<\/tr>\n
Component Family<\/td>\norg.primefaces.component<\/td>\n<\/tr>\n
Renderer Type<\/td>\norg.primefaces.component.TreeRenderer<\/td>\n<\/tr>\n
Renderer Class<\/td>\norg.primefaces.component.tree.TreeRenderer<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

\u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30bb\u30b9\u306e\u30c4\u30ea\u30fc\u306e\u5c5e\u6027<\/h2>\n
\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Name<\/th>\nDefault<\/th>\nType<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
id<\/td>\nnull<\/td>\nString<\/td>\nUnique identifier of the component<\/td>\n<\/tr>\n
rendered<\/td>\ntrue<\/td>\nBoolean<\/td>\nBoolean value to specify the rendering of the component, when set to false component will not be rendered<\/td>\n<\/tr>\n
binding<\/td>\nnull<\/td>\nObject<\/td>\nAn el expression that maps to a server side UIComponent instance in a backing bean<\/td>\n<\/tr>\n
widgetVar<\/td>\nnull<\/td>\nString<\/td>\nName of the client side widget<\/td>\n<\/tr>\n
value<\/td>\nnull<\/td>\nObject<\/td>\nA TreeNode instance as the backing model<\/td>\n<\/tr>\n
var<\/td>\nnull<\/td>\nString<\/td>\nName of the request-scoped variable that\u2019ll be usedto refer each treenode data.<\/td>\n<\/tr>\n
dynamic<\/td>\nfalse<\/td>\nBoolean<\/td>\nSpecifies the ajax\/client toggleMode<\/td>\n<\/tr>\n
cache<\/td>\ntrue<\/td>\nBoolean<\/td>\nSpecifies caching on dynamically loaded nodes.When set to true expanded nodes will be kept in memory.<\/td>\n<\/tr>\n
onNodeClick<\/td>\nnull<\/td>\nString<\/td>\nJavascript event to process when a tree node isclicked.<\/td>\n<\/tr>\n
selection<\/td>\nnull<\/td>\nObject<\/td>\nTreeNode array to reference the selections.<\/td>\n<\/tr>\n
style<\/td>\nnull<\/td>\nString<\/td>\nStyle of the main container element of tree<\/td>\n<\/tr>\n
styleClass<\/td>\nnull<\/td>\nString<\/td>\nStyle class of the main container element of tree<\/td>\n<\/tr>\n
selectionMode<\/td>\nnull<\/td>\nString<\/td>\nDefines the selectionMode<\/td>\n<\/tr>\n
highlight<\/td>\ntrue<\/td>\nBoolean<\/td>\nHighlights nodes on hover when selection is enabled.<\/td>\n<\/tr>\n
datakey<\/td>\nnull<\/td>\nObject<\/td>\nUnique key of the data presented by nodes.<\/td>\n<\/tr>\n
animate<\/td>\nfalse<\/td>\nBoolean<\/td>\nWhen enabled, displays slide effect on toggle.<\/td>\n<\/tr>\n
orientation<\/td>\nvertical<\/td>\nString<\/td>\nOrientation of layout, vertical or horizontal.<\/td>\n<\/tr>\n
propagateSelectionUp<\/td>\ntrue<\/td>\nBoolean<\/td>\nDefines upwards selection propagation forcheckbox mode.<\/td>\n<\/tr>\n
propagateSelectionDown<\/td>\ntrue<\/td>\nBoolean<\/td>\nDefines downwards selection propagation forcheckbox mode.<\/td>\n<\/tr>\n
dir<\/td>\nltr<\/td>\nString<\/td>\nDefines text direction, valid values are ltr and rtl.<\/td>\n<\/tr>\n
draggable<\/td>\nfalse<\/td>\nBoolean<\/td>\nMakes tree nodes draggable.<\/td>\n<\/tr>\n
droppable<\/td>\nfalse<\/td>\nBoolean<\/td>\nMakes tree droppable.<\/td>\n<\/tr>\n
dragdropScope<\/td>\nnull<\/td>\nString<\/td>\nScope key to group a set of tree components fortransferring nodes using drag and drop.<\/td>\n<\/tr>\n
dragMode<\/td>\nself<\/td>\nString<\/td>\nDefines parent-child relationship when a node isdragged, valid values are self (default), parent andancestor.<\/td>\n<\/tr>\n
dropRestrict<\/td>\nnone<\/td>\nString<\/td>\nDefines parent-child restrictions when a node isdropped valid values are none (default) and sibling.<\/td>\n<\/tr>\n
required<\/td>\nfalse<\/td>\nBoolean<\/td>\nValidation constraint for selection.<\/td>\n<\/tr>\n
requiredMessage<\/td>\nnull<\/td>\nString<\/td>\nMessage for required selection validation.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

\u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30bb\u30b9\u30c4\u30ea\u30fc\u306e\u59cb\u3081\u65b9<\/h2>\n

\u6728\u306f\u3001\u30eb\u30fc\u30c8\u306b\u5bfe\u5fdc\u3059\u308borg.primefaces.model.TreeNode\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3067\u6e80\u305f\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u4ee5\u4e0b\u306b\u793a\u3059\u7c21\u5358\u306a\u4f8b\u3092\u53c2\u8003\u306b\u3001Tree\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f7f\u7528\u3057\u305f\u3082\u306e\u3092\u958b\u767a\u3067\u304d\u307e\u3059\u3002index.xhtml\u306e\u30b3\u30fc\u30c9\uff1a<\/p>\n

<html xmlns=\"https:\/\/www.w3.org\/1999\/xhtml\"\r\n\txmlns:ui=\"https:\/\/java.sun.com\/jsf\/facelets\"\r\n\txmlns:h=\"https:\/\/java.sun.com\/jsf\/html\"\r\n\txmlns:f=\"https:\/\/java.sun.com\/jsf\/core\"\r\n\txmlns:p=\"https:\/\/primefaces.org\/ui\">\r\n<h:head>\r\n\t<script name=\"jquery\/jquery.js\" library=\"primefaces\"><\/script>\r\n<\/h:head>\r\n<h:form>\r\n\t<p:tree value=\"#{treeManagedBean.root}\" var=\"node\">\r\n\t\t<p:treeNode>\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t<\/p:tree>\r\n<\/h:form>\r\n<\/html>\r\n<\/code><\/pre>\n
package com.scdev.prime.faces.beans;\r\n\r\nimport javax.faces.bean.ManagedBean;\r\nimport javax.faces.bean.SessionScoped;\r\n\r\nimport org.primefaces.model.DefaultTreeNode;\r\nimport org.primefaces.model.TreeNode;\r\n\r\n@ManagedBean\r\n@SessionScoped\r\npublic class TreeManagedBean {\r\n\t\/\/ TreeNode instance\r\n\tprivate TreeNode root;\r\n\r\n\tpublic TreeManagedBean(){\r\n\t\t\/\/ This is the root node, so it's data is root and its parent is null\r\n\t\tthis.root = new DefaultTreeNode(\"Root Node\", null);\r\n\t\t\/\/ Create child node\r\n\t\tTreeNode child = new DefaultTreeNode(\"Child Node\", this.root);\r\n\t\t\/\/ Reference the parent of child node\r\n\t\tchild.setParent(this.root);\r\n\t\t\/\/ Create descendent nodes\r\n\t\tTreeNode descendent = new DefaultTreeNode(\"Descendent Node\", child);\r\n\t\t\/\/ Reference the parent of descendent node\r\n\t\tdescendent.setParent(child);\r\n\t}\r\n\r\n\tpublic TreeNode getRoot() {\r\n\t\treturn root;\r\n\t}\r\n\r\n\tpublic void setRoot(TreeNode root) {\r\n\t\tthis.root = root;\r\n\t}\r\n}\r\n<\/code><\/pre>\n
\u4e0a\u8a18\u306b\u52a0\u3048\u3066\u3001\u4ee5\u4e0b\u306e\u8ffd\u52a0\u8aac\u660e\u3092\u793a\u3057\u307e\u3059\u3002 (J\u014dki ni kuwaete, ika no tsuika setsumei o shimeshimasu.)<\/p>\n
    \n
  • Tree component has associated with a TreeNode instance called root.<\/li>\n
  • Root instance has also a child as a TreeNode instance which also refers its child.<\/li>\n
  • This hierarchical view is displayed by referencing the root node directly using value attribute.<\/li>\n
  • Attributue var has used by the Tree component for referencing the Request-Scoped variable that\u2019ll be used to refer each treenode data.<\/li>\n
  • Each TreeNode has been created by passing two arguments; encapsulated data object instance and parent reference.<\/li>\n
  • Properties of every TreeNode are: type, data, children, parent and expanded boolean indicator. All of those properties has to be explored in the next coming sections.<\/li>\n<\/ul>\n
    Primefaces\u30c0\u30a4\u30ca\u30df\u30c3\u30af\u30c4\u30ea\u30fc<\/h2>\n
    \u30c4\u30ea\u30fc\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u306f\u52d5\u7684\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u52d5\u7684\u30e2\u30fc\u30c9\u3067\u306f\u3001\u30c4\u30ea\u30fc\u30ce\u30fc\u30c9\u3092\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u304b\u3089ajax\u3067\u8981\u6c42\u3057\u3001\u5c55\u958b\u3055\u308c\u305f\u7279\u5b9a\u306e\u30ce\u30fc\u30c9\u306e\u5b50\u30ce\u30fc\u30c9\u3092\u30c4\u30ea\u30fc\u304c\u30ed\u30fc\u30c9\u3057\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306b\u8868\u793a\u3057\u307e\u3059\u3002\u5143\u3005\u306e\u52d5\u4f5c\u3068\u306f\u7570\u306a\u308a\u3001\u30c8\u30b0\u30eb\u304c\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306b\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u308b\u5834\u5408\u3001\u30e2\u30c7\u30eb\u5185\u306e\u3059\u3079\u3066\u306e\u30c4\u30ea\u30fc\u30ce\u30fc\u30c9\u304c\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306b\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3055\u308c\u3001\u30c4\u30ea\u30fc\u304c\u4f5c\u6210\u3055\u308c\u307e\u3059\u3002\u5927\u91cf\u306e\u30c7\u30fc\u30bf\u306e\u5834\u5408\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u52d5\u4f5c\u3092\u4f7f\u7528\u3059\u308b\u3088\u308a\u3082\u52d5\u7684\u30e2\u30fc\u30c9\u304c\u9069\u3057\u3066\u3044\u307e\u3059\u3002\u4ee5\u4e0b\u306f\u3001\u52d5\u7684\u5c5e\u6027\u304c\u3069\u306e\u3088\u3046\u306b\u8b58\u5225\u3055\u308c\u308b\u304b\u306e\u65b9\u6cd5\u3067\u3059\u3002index.xhtml\u30b3\u30fc\u30c9\uff1a<\/p>\n
    <html xmlns=\"https:\/\/www.w3.org\/1999\/xhtml\"\r\n\txmlns:ui=\"https:\/\/java.sun.com\/jsf\/facelets\"\r\n\txmlns:h=\"https:\/\/java.sun.com\/jsf\/html\"\r\n\txmlns:f=\"https:\/\/java.sun.com\/jsf\/core\"\r\n\txmlns:p=\"https:\/\/primefaces.org\/ui\">\r\n<h:head>\r\n\t<script name=\"jquery\/jquery.js\" library=\"primefaces\"><\/script>\r\n<\/h:head>\r\n<h:form>\r\n\t<p:tree value=\"#{treeManagedBean.root}\" var=\"node\" dynamic=\"true\">\r\n\t\t<p:treeNode>\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t<\/p:tree>\r\n<\/h:form>\r\n<\/html>\r\n<\/code><\/pre>\n
    \u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30bb\u30b9\u306e\u8907\u6570\u306e\u30c4\u30ea\u30fc\u30ce\u30fc\u30c9\u30bf\u30a4\u30d7<\/h2>\n
    \u3042\u306a\u305f\u304c\u968e\u5c64\u5185\u3067\u7570\u306a\u308bTreeNode\u30bf\u30a4\u30d7\u3068\u30a2\u30a4\u30b3\u30f3\u3092\u5fc5\u8981\u3068\u3059\u308b\u3068\u3044\u3046\u8981\u4ef6\u306f\u4e00\u822c\u7684\u3067\u3059\u3002\u3053\u308c\u3092\u5b9f\u88c5\u3059\u308b\u305f\u3081\u306b\u306f\u3001\u4ee5\u4e0b\u306e\u7c21\u5358\u306a\u624b\u9806\u306b\u5f93\u3046\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\uff1a<\/p>\n
      \n
    • Define\/Place more than one components, each having a different type.<\/li>\n
    • Use that defined type to bind TreeNodes in your model.<\/li>\n<\/ul>\n
      \u7570\u306a\u308bTreeNode\u3092\u4f7f\u7528\u3057\u3066\u3001\u30bf\u30a4\u30d7\u306e\u3055\u307e\u3056\u307e\u306a\u8868\u793a\u3092\u793a\u3059\u305f\u3081\u306e\u4ee5\u4e0b\u306e\u7c21\u5358\u306a\u4f8b\u306e\u30c7\u30e2\u30f3\u30b9\u30c8\u30ec\u30fc\u30b7\u30e7\u30f3\u3092\u4ee5\u4e0b\u306b\u793a\u3057\u307e\u3059\u3002\u5f71\u97ff\u3092\u53d7\u3051\u305f\u30d5\u30a1\u30a4\u30eb\u306f\u3001index.xhtml\u30d3\u30e5\u30fc\u3068TreeManagedBean.java\u306e\u4e21\u65b9\u306e\u30d5\u30a1\u30a4\u30eb\u3067\u3059\u3002index.xhtml\u306e\u30b3\u30fc\u30c9\uff1a<\/p>\n
      <html xmlns=\"https:\/\/www.w3.org\/1999\/xhtml\"\r\n\txmlns:ui=\"https:\/\/java.sun.com\/jsf\/facelets\"\r\n\txmlns:h=\"https:\/\/java.sun.com\/jsf\/html\"\r\n\txmlns:f=\"https:\/\/java.sun.com\/jsf\/core\"\r\n\txmlns:p=\"https:\/\/primefaces.org\/ui\">\r\n<h:head>\r\n\t<script name=\"jquery\/jquery.js\" library=\"primefaces\"><\/script>\r\n<\/h:head>\r\n<h:form>\r\n\t<p:tree value=\"#{treeManagedBean.root}\" var=\"node\" dynamic=\"true\">\r\n\t\t<p:treeNode expandedIcon=\"ui-icon ui-icon-folder-open\"\r\n\t\t\t\t\t\tcollapsedIcon=\"ui-icon ui-icon-folder-collapsed\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:treeNode type=\"document\" icon=\"ui-icon ui-icon-document\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:treeNode type=\"image\" icon=\"ui-icon ui-icon-image\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:treeNode type=\"video\" icon=\"ui-icon ui-icon-video\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t<\/p:tree>\r\n<\/h:form>\r\n<\/html>\r\n<\/code><\/pre>\n
      package com.scdev.prime.faces.beans;\r\n\r\nimport javax.faces.bean.ManagedBean;\r\nimport javax.faces.bean.SessionScoped;\r\n\r\nimport org.primefaces.model.DefaultTreeNode;\r\nimport org.primefaces.model.TreeNode;\r\n\r\n@ManagedBean\r\n@SessionScoped\r\npublic class TreeManagedBean {\r\n\t\/\/ TreeNode instance\r\n\tprivate TreeNode root;\r\n\r\n\tpublic TreeManagedBean(){\r\n\t\t\/\/ This is the root node, so it's data is root and its parent is null\r\n\t\tthis.root = new DefaultTreeNode(\"Root Node\", null);\r\n\t\t\/\/ Create documents node\r\n\t\tTreeNode documents = new DefaultTreeNode(\"Documents\", this.root);\r\n\t\t\/\/ Create document node\r\n\t\tTreeNode document01 = new DefaultTreeNode(\"document\",\"Expenses.doc\", documents);\r\n\t\t\/\/ Create images node\r\n\t\tTreeNode images = new DefaultTreeNode(\"Images\", this.root);\r\n\t\t\/\/ Create image node\r\n\t\tTreeNode image01 = new DefaultTreeNode(\"image\",\"Travel.gif\", images);\r\n\t\t\/\/ Create videos node\r\n\t\tTreeNode videos = new DefaultTreeNode(\"Videos\", this.root);\r\n\t\t\/\/ Create video node\r\n\t\tTreeNode video01 = new DefaultTreeNode(\"video\",\"Play.avi\", videos);\r\n\t}\r\n\r\n\tpublic TreeNode getRoot() {\r\n\t\treturn root;\r\n\t}\r\n\r\n\tpublic void setRoot(TreeNode root) {\r\n\t\tthis.root = root;\r\n\t}\r\n}\r\n<\/code><\/pre>\n
      \u63d0\u4f9b\u3055\u308c\u305f\u30c7\u30e2\u304b\u3089\u660e\u3089\u304b\u306a\u3088\u3046\u306b\u3001TreeNode\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3068p:treeNode\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u7d71\u5408\u306b\u306f\u3001type\u5c5e\u6027\u304c\u4f7f\u7528\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n
      \u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30b7\u30ba\u306e\u30c4\u30ea\u30fc\u30a8\u30a4\u30b8\u30e3\u30c3\u30af\u30b9\u306e\u30d3\u30d8\u30a4\u30d3\u30a2\u30a4\u30d9\u30f3\u30c8<\/h2>\n
      \u6728\u306f\u3055\u307e\u3056\u307e\u306aAjax\u306e\u52d5\u4f5c\u30a4\u30d9\u30f3\u30c8\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n
      \n
      \n\n\n\n\n\n\n\n\n
      Event<\/th>\nListener Parameter<\/th>\nFired<\/th>\n<\/tr>\n<\/thead>\n
      expand<\/td>\norg.primefaces.event.NodeExpandEvent<\/td>\nWhen a node is expanded.<\/td>\n<\/tr>\n
      collapse<\/td>\norg.primefaces.event.NodeCollapseEvent<\/td>\nWhen a node is collapsed.<\/td>\n<\/tr>\n
      select<\/td>\norg.primefaces.event.NodeSelectEvent<\/td>\nWhen a node is selected.<\/td>\n<\/tr>\n
      unselect<\/td>\norg.primefaces.event.NodeUnselectEvent<\/td>\nWhen a node is unselected.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
      \u6b21\u306e\u30c4\u30ea\u30fc\u306b\u306f\u3001index2.xhtml\u306e\u30b3\u30fc\u30c9\u3092\u30ea\u30b9\u30cb\u30f3\u30b0\u3057\u3066\u3044\u308b\u30ea\u30b9\u30ca\u30fc\u304c3\u4eba\u3044\u307e\u3059\u3002<\/p>\n
      <html xmlns=\"https:\/\/www.w3.org\/1999\/xhtml\"\r\n\txmlns:ui=\"https:\/\/java.sun.com\/jsf\/facelets\"\r\n\txmlns:h=\"https:\/\/java.sun.com\/jsf\/html\"\r\n\txmlns:f=\"https:\/\/java.sun.com\/jsf\/core\"\r\n\txmlns:p=\"https:\/\/primefaces.org\/ui\">\r\n<h:head>\r\n\t<script name=\"jquery\/jquery.js\" library=\"primefaces\"><\/script>\r\n<\/h:head>\r\n<h:form>\r\n\t<p:tree value=\"#{treeManagedBean.root}\" var=\"node\" dynamic=\"true\">\r\n\t\t<p:treeNode expandedIcon=\"ui-icon ui-icon-folder-open\"\r\n\t\t\t\t\t\tcollapsedIcon=\"ui-icon ui-icon-folder-collapsed\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:treeNode type=\"document\" icon=\"ui-icon ui-icon-document\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:treeNode type=\"image\" icon=\"ui-icon ui-icon-image\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:treeNode type=\"video\" icon=\"ui-icon ui-icon-video\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:ajax event=\"select\" listener=\"#{treeManagedBean.onNodeSelect}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"unselect\" listener=\"#{treeManagedBean.onNodeUnSelect}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"expand\" listener=\"#{treeManagedBean.onNodeExpand}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"collapse\" listener=\"#{treeManagedBean.onNodeCollapse}\"><\/p:ajax>\r\n\t<\/p:tree>\r\n<\/h:form>\r\n<\/html>\r\n<\/code><\/pre>\n
      package com.scdev.prime.faces.beans;\r\n\r\nimport javax.faces.bean.ManagedBean;\r\nimport javax.faces.bean.SessionScoped;\r\n\r\nimport org.primefaces.event.NodeCollapseEvent;\r\nimport org.primefaces.event.NodeExpandEvent;\r\nimport org.primefaces.event.NodeSelectEvent;\r\nimport org.primefaces.event.NodeUnselectEvent;\r\nimport org.primefaces.model.DefaultTreeNode;\r\nimport org.primefaces.model.TreeNode;\r\n\r\n@ManagedBean\r\n@SessionScoped\r\npublic class TreeManagedBean {\r\n\t\/\/ TreeNode instance\r\n\tprivate TreeNode root;\r\n\r\n\tpublic TreeManagedBean(){\r\n\t\t\/\/ This is the root node, so it's data is root and its parent is null\r\n\t\tthis.root = new DefaultTreeNode(\"Root Node\", null);\r\n\t\t\/\/ Create documents node\r\n\t\tTreeNode documents = new DefaultTreeNode(\"Documents\", this.root);\r\n\t\t\/\/ Create document node\r\n\t\tTreeNode document01 = new DefaultTreeNode(\"document\",\"Expenses.doc\", documents);\r\n\t\t\/\/ Create images node\r\n\t\tTreeNode images = new DefaultTreeNode(\"Images\", this.root);\r\n\t\t\/\/ Create image node\r\n\t\tTreeNode image01 = new DefaultTreeNode(\"image\",\"Travel.gif\", images);\r\n\t\t\/\/ Create videos node\r\n\t\tTreeNode videos = new DefaultTreeNode(\"Videos\", this.root);\r\n\t\t\/\/ Create video node\r\n\t\tTreeNode video01 = new DefaultTreeNode(\"video\",\"Play.avi\", videos);\r\n\t}\r\n\r\n\tpublic TreeNode getRoot() {\r\n\t\treturn root;\r\n\t}\r\n\r\n\tpublic void setRoot(TreeNode root) {\r\n\t\tthis.root = root;\r\n\t}\r\n\r\n\tpublic void onNodeSelect(NodeSelectEvent event){\r\n\t\tSystem.out.println(\"Node Data ::\"+event.getTreeNode().getData()+\" :: Selected\");\r\n\t}\r\n\r\n\tpublic void onNodeUnSelect(NodeUnselectEvent event){\r\n\t\tSystem.out.println(\"Node Data ::\"+event.getTreeNode().getData()+\" :: UnSelected\");\r\n\t}\r\n\r\n\tpublic void onNodeExpand(NodeExpandEvent event){\r\n\t\tSystem.out.println(\"Node Data ::\"+event.getTreeNode().getData()+\" :: Expanded\");\r\n\t}\r\n\r\n\tpublic void onNodeCollapse(NodeCollapseEvent event){\r\n\t\tSystem.out.println(\"Node Data ::\"+event.getTreeNode().getData()+\" :: Collapsed\");\r\n\t}\r\n}\r\n<\/code><\/pre>\n
      \u4ee5\u4e0b\u3092\u65e5\u672c\u8a9e\u3067\u81ea\u7136\u306b\u8a00\u3044\u63db\u3048\u3066\u304f\u3060\u3055\u3044\u30021\u3064\u306e\u30aa\u30d7\u30b7\u30e7\u30f3\u3060\u3051\u3067\u7d50\u69cb\u3067\u3059\u3002<\/p>\n
      I like to eat sushi and go for a walk in the park.<\/p>\n
        \n
      • Once you\u2019ve expanded TreeNode, an Ajax event has fired.<\/li>\n
      • For each fired event, an ajax listener method has defined for handling purposes.<\/li>\n
      • Event listeners are also useful when dealing with a huge amount of data. That is by providing the root and child nodes to the tree, use event listeners to get the selected node and add new nodes to that particular tree at runtime.<\/li>\n
      • Select and UnSelect events haven\u2019t produced now, issuing these events required SelectionMode to be set.<\/li>\n<\/ul>\n
        \u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30bb\u30b9\u306e\u30c4\u30ea\u30fc\u9078\u629e\u3068\u9078\u629e\u30e2\u30fc\u30c9<\/h2>\n
        Tree\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u3001\u9078\u629e\u3055\u308c\u305f\u30ce\u30fc\u30c9\u3092\u8b58\u5225\u3059\u308b\u305f\u3081\u306e\u7d44\u307f\u8fbc\u307f\u6a5f\u80fd\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002\u30ce\u30fc\u30c9\u306e\u9078\u629e\u30e1\u30ab\u30cb\u30ba\u30e0\u306f3\u3064\u306e\u30e2\u30fc\u30c9\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u304a\u308a\u3001\u305d\u308c\u305e\u308c\u306e\u30e2\u30fc\u30c9\u306b\u5bfe\u3057\u3066TreeNode\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u304c\u9078\u629e\u53c2\u7167\u3068\u3057\u3066\u5272\u308a\u5f53\u3066\u3089\u308c\u307e\u3059\u3002<\/p>\n
          \n
        • Single Mode: One TreeNode can be selected at a time. Selection should be a TreeNode reference.<\/li>\n
        • Multiple Mode: Multiple nodes can be selected. Selection should be a TreeNode array reference.<\/li>\n
        • Checkbox Mode: Multiple nodes can be selected using a checkbox UI. Selection should be a TreeNode array reference.<\/li>\n<\/ul>\n
          index1.xhtml\u30b3\u30fc\u30c9\uff1a<\/p>\n
          <html xmlns=\"https:\/\/www.w3.org\/1999\/xhtml\"\r\n\txmlns:ui=\"https:\/\/java.sun.com\/jsf\/facelets\"\r\n\txmlns:h=\"https:\/\/java.sun.com\/jsf\/html\"\r\n\txmlns:f=\"https:\/\/java.sun.com\/jsf\/core\"\r\n\txmlns:p=\"https:\/\/primefaces.org\/ui\">\r\n<h:head>\r\n\t<script name=\"jquery\/jquery.js\" library=\"primefaces\"><\/script>\r\n<\/h:head>\r\n<h:form>\r\n\t<p:tree value=\"#{treeManagedBean.root}\" var=\"node\" dynamic=\"true\"\r\n\t\t\tselectionMode=\"single\" selection=\"#{treeManagedBean.singleSelectedTreeNode}\">\r\n\t\t<p:treeNode expandedIcon=\"ui-icon ui-icon-folder-open\"\r\n\t\t\t\t\t\tcollapsedIcon=\"ui-icon ui-icon-folder-collapsed\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:treeNode type=\"document\" icon=\"ui-icon ui-icon-document\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:treeNode type=\"image\" icon=\"ui-icon ui-icon-image\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:treeNode type=\"video\" icon=\"ui-icon ui-icon-video\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:ajax event=\"select\" listener=\"#{treeManagedBean.onNodeSelect}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"unselect\" listener=\"#{treeManagedBean.onNodeUnSelect}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"expand\" listener=\"#{treeManagedBean.onNodeExpand}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"collapse\" listener=\"#{treeManagedBean.onNodeCollapse}\"><\/p:ajax>\r\n\t<\/p:tree>\r\n\t<p:tree value=\"#{treeManagedBean.root}\" var=\"node\" dynamic=\"true\"\r\n\t\t\tselectionMode=\"multiple\" selection=\"#{treeManagedBean.multipleSelectedTreeNodes}\">\r\n\t\t<p:treeNode expandedIcon=\"ui-icon ui-icon-folder-open\"\r\n\t\t\t\t\t\tcollapsedIcon=\"ui-icon ui-icon-folder-collapsed\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:treeNode type=\"document\" icon=\"ui-icon ui-icon-document\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:treeNode type=\"image\" icon=\"ui-icon ui-icon-image\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:treeNode type=\"video\" icon=\"ui-icon ui-icon-video\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:ajax event=\"select\" listener=\"#{treeManagedBean.onNodeSelect}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"unselect\" listener=\"#{treeManagedBean.onNodeUnSelect}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"expand\" listener=\"#{treeManagedBean.onNodeExpand}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"collapse\" listener=\"#{treeManagedBean.onNodeCollapse}\"><\/p:ajax>\r\n\t<\/p:tree>\r\n\t<p:tree value=\"#{treeManagedBean.root}\" var=\"node\" dynamic=\"true\"\r\n\t\t\tselectionMode=\"checkbox\" selection=\"#{treeManagedBean.checkboxSelectedTreeNodes}\">\r\n\t\t<p:treeNode expandedIcon=\"ui-icon ui-icon-folder-open\"\r\n\t\t\t\t\t\tcollapsedIcon=\"ui-icon ui-icon-folder-collapsed\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:treeNode type=\"document\" icon=\"ui-icon ui-icon-document\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:treeNode type=\"image\" icon=\"ui-icon ui-icon-image\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:treeNode type=\"video\" icon=\"ui-icon ui-icon-video\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:ajax event=\"select\" listener=\"#{treeManagedBean.onNodeSelect}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"unselect\" listener=\"#{treeManagedBean.onNodeUnSelect}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"expand\" listener=\"#{treeManagedBean.onNodeExpand}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"collapse\" listener=\"#{treeManagedBean.onNodeCollapse}\"><\/p:ajax>\r\n\t<\/p:tree>\r\n\t<h:commandButton value=\"Print Selected Nodes\" action=\"#{treeManagedBean.printSelectedNodes}\"><\/h:commandButton>\r\n<\/h:form>\r\n<\/html>\r\n<\/code><\/pre>\n
          package com.scdev.prime.faces.beans;\r\n\r\nimport javax.faces.bean.ManagedBean;\r\nimport javax.faces.bean.SessionScoped;\r\n\r\nimport org.primefaces.event.NodeCollapseEvent;\r\nimport org.primefaces.event.NodeExpandEvent;\r\nimport org.primefaces.event.NodeSelectEvent;\r\nimport org.primefaces.event.NodeUnselectEvent;\r\nimport org.primefaces.model.DefaultTreeNode;\r\nimport org.primefaces.model.TreeNode;\r\n\r\n@ManagedBean\r\n@SessionScoped\r\npublic class TreeManagedBean {\r\n\t\/\/ TreeNode instance\r\n\tprivate TreeNode root;\r\n\tprivate TreeNode singleSelectedTreeNode;\r\n\tprivate TreeNode [] multipleSelectedTreeNodes;\r\n\tprivate TreeNode [] checkboxSelectedTreeNodes;\r\n\r\n\tpublic TreeManagedBean(){\r\n\t\t\/\/ This is the root node, so it's data is root and its parent is null\r\n\t\tthis.root = new DefaultTreeNode(\"Root Node\", null);\r\n\t\t\/\/ Create documents node\r\n\t\tTreeNode documents = new DefaultTreeNode(\"Documents\", this.root);\r\n\t\t\/\/ Create document node\r\n\t\tTreeNode document01 = new DefaultTreeNode(\"document\",\"Expenses.doc\", documents);\r\n\t\t\/\/ Create images node\r\n\t\tTreeNode images = new DefaultTreeNode(\"Images\", this.root);\r\n\t\t\/\/ Create image node\r\n\t\tTreeNode image01 = new DefaultTreeNode(\"image\",\"Travel.gif\", images);\r\n\t\t\/\/ Create videos node\r\n\t\tTreeNode videos = new DefaultTreeNode(\"Videos\", this.root);\r\n\t\t\/\/ Create video node\r\n\t\tTreeNode video01 = new DefaultTreeNode(\"video\",\"Play.avi\", videos);\r\n\t}\r\n\r\n\tpublic TreeNode getRoot() {\r\n\t\treturn root;\r\n\t}\r\n\r\n\tpublic void setRoot(TreeNode root) {\r\n\t\tthis.root = root;\r\n\t}\r\n\r\n\tpublic TreeNode getSingleSelectedTreeNode() {\r\n\t\treturn singleSelectedTreeNode;\r\n\t}\r\n\r\n\tpublic void setSingleSelectedTreeNode(TreeNode singleSelectedTreeNode) {\r\n\t\tthis.singleSelectedTreeNode = singleSelectedTreeNode;\r\n\t}\r\n\r\n\tpublic TreeNode[] getMultipleSelectedTreeNodes() {\r\n\t\treturn multipleSelectedTreeNodes;\r\n\t}\r\n\r\n\tpublic void setMultipleSelectedTreeNodes(TreeNode[] multipleSelectedTreeNodes) {\r\n\t\tthis.multipleSelectedTreeNodes = multipleSelectedTreeNodes;\r\n\t}\r\n\r\n\tpublic TreeNode[] getCheckboxSelectedTreeNodes() {\r\n\t\treturn checkboxSelectedTreeNodes;\r\n\t}\r\n\r\n\tpublic void setCheckboxSelectedTreeNodes(TreeNode[] checkboxSelectedTreeNodes) {\r\n\t\tthis.checkboxSelectedTreeNodes = checkboxSelectedTreeNodes;\r\n\t}\r\n\r\n\tpublic void onNodeSelect(NodeSelectEvent event){\r\n\t\tSystem.out.println(\"Node Data ::\"+event.getTreeNode().getData()+\" :: Selected\");\r\n\t}\r\n\r\n\tpublic void onNodeUnSelect(NodeUnselectEvent event){\r\n\t\tSystem.out.println(\"Node Data ::\"+event.getTreeNode().getData()+\" :: UnSelected\");\r\n\t}\r\n\r\n\tpublic void onNodeExpand(NodeExpandEvent event){\r\n\t\tSystem.out.println(\"Node Data ::\"+event.getTreeNode().getData()+\" :: Expanded\");\r\n\t}\r\n\r\n\tpublic void onNodeCollapse(NodeCollapseEvent event){\r\n\t\tSystem.out.println(\"Node Data ::\"+event.getTreeNode().getData()+\" :: Collapsed\");\r\n\t}\r\n\r\n\tpublic String printSelectedNodes(){\r\n\t\tSystem.out.println(\"Single Selection Is :: \"+this.singleSelectedTreeNode.getData());\r\n\t\tfor(TreeNode n : this.multipleSelectedTreeNodes){\r\n\t\t\tSystem.out.println(\"Multiple Selection Are :: \"+n.getData());\r\n\t\t}\r\n\t\tfor(TreeNode n : this.checkboxSelectedTreeNodes){\r\n\t\t\tSystem.out.println(\"CheckBox Selection Are :: \"+n.getData());\r\n\t\t}\r\n\t\treturn \"\";\r\n\t}\r\n}\r\n<\/code><\/pre>\n
          \u8a73\u7d30\u306a\u8aac\u660e\u306e\u305f\u3081\u306b\u30011\u3064\u6b8b\u3063\u3066\u3044\u308b\u6ce8\u610f\u70b9\u3092\u6319\u3052\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n
            \n
          • TreeNode component has attributes like expandedIcon and collapsedIcon for specifying icons of both expand and collapsed behaviors.<\/li>\n
          • TreeNode component has also icon attribute that used for specifying the icon of the node itself.<\/li>\n<\/ul>\n
            Primefaces\u306e\u30ce\u30fc\u30c9\u30ad\u30e3\u30c3\u30b7\u30e5\u3068OnNodeClick<\/h2>\n
            \u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u306f\u3001\u30ad\u30e3\u30c3\u30b7\u30e5\u5c5e\u6027\u304c\u30aa\u30f3\u306b\u306a\u3063\u3066\u304a\u308a\u3001\u52d5\u7684\u306b\u8aad\u307f\u8fbc\u307e\u308c\u305f\u30ce\u30fc\u30c9\u306f\u30e1\u30e2\u30ea\u306b\u4fdd\u6301\u3055\u308c\u308b\u305f\u3081\u3001\u30ce\u30fc\u30c9\u306e\u518d\u5c55\u958b\u306f\u30b5\u30fc\u30d0\u30fc\u3078\u306e\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u30c8\u30ea\u30ac\u30fc\u3057\u307e\u305b\u3093\u3002\u3082\u3057\u5c5e\u6027\u3092false\u306b\u8a2d\u5b9a\u3057\u305f\u5834\u5408\u3001\u30ce\u30fc\u30c9\u306e\u6298\u308a\u305f\u305f\u307f\u64cd\u4f5c\u306b\u3088\u308a\u5b50\u30ce\u30fc\u30c9\u304c\u524a\u9664\u3055\u308c\u3001\u5f8c\u3067\u5c55\u958b\u3059\u308b\u3068\u518d\u5ea6\u30b5\u30fc\u30d0\u30fc\u304b\u3089\u5b50\u30ce\u30fc\u30c9\u304c\u53d6\u5f97\u3055\u308c\u307e\u3059\u3002\u307e\u305f\u3001\u7279\u5b9a\u306e\u30ce\u30fc\u30c9\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u5834\u5408\u306b\u30ab\u30b9\u30bf\u30e0JavaScript\u3092\u5b9f\u884c\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002\u3053\u306e\u305f\u3081\u306b\u306fonNodeClick\u5c5e\u6027\u304c\u4f7f\u7528\u3055\u308c\u3001\u30af\u30ea\u30c3\u30af\u3055\u308c\u305fHTML\u30ce\u30fc\u30c9\u3068\u30a4\u30d9\u30f3\u30c8\u8981\u7d20\u3092\u4f34\u3063\u3066JavaScript\u30e1\u30bd\u30c3\u30c9\u304c\u547c\u3073\u51fa\u3055\u308c\u307e\u3059\u3002\u4ee5\u4e0b\u306e\u4f8b\u306f\u3001onNodeClick\u304c\u547c\u3070\u308c\u305f\u3068\u304d\u306b\u8868\u793a\u3055\u308c\u308b\u30ed\u30b0\u30e1\u30c3\u30bb\u30fc\u30b8\u3067\u3059\u3002index3.xhtml\u306e\u30b3\u30fc\u30c9\uff1a<\/p>\n
            <html xmlns=\"https:\/\/www.w3.org\/1999\/xhtml\"\r\n\txmlns:ui=\"https:\/\/java.sun.com\/jsf\/facelets\"\r\n\txmlns:h=\"https:\/\/java.sun.com\/jsf\/html\"\r\n\txmlns:f=\"https:\/\/java.sun.com\/jsf\/core\"\r\n\txmlns:p=\"https:\/\/primefaces.org\/ui\">\r\n<h:head>\r\n\t<script name=\"jquery\/jquery.js\" library=\"primefaces\"><\/script>\r\n\t<script>\r\n\t\tfunction onNodeClick(node,event){\r\n\t\t\tconsole.log(\"nodeArg :: \"+node);\r\n\t\t\tconsole.log(\"eventArg ::\"+event);\r\n\t\t}\r\n\t<\/script>\r\n<\/h:head>\r\n<h:form>\r\n\t<p:tree value=\"#{treeManagedBean.root}\" var=\"node\" dynamic=\"true\" \r\n\t\t\t\tonNodeClick=\"onNodeClick(node,event)\"\r\n\t\t\t\tselectionMode=\"single\" selection=\"#{treeManagedBean.singleSelectedTreeNode}\">\r\n\t\t<p:treeNode expandedIcon=\"ui-icon ui-icon-folder-open\"\r\n\t\t\t\t\t\tcollapsedIcon=\"ui-icon ui-icon-folder-collapsed\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:treeNode type=\"document\" icon=\"ui-icon ui-icon-document\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:treeNode type=\"image\" icon=\"ui-icon ui-icon-image\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\t\t\t\t\t\r\n\t\t<p:treeNode type=\"video\" icon=\"ui-icon ui-icon-video\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:ajax event=\"select\" listener=\"#{treeManagedBean.onNodeSelect}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"unselect\" listener=\"#{treeManagedBean.onNodeUnSelect}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"expand\" listener=\"#{treeManagedBean.onNodeExpand}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"collapse\" listener=\"#{treeManagedBean.onNodeCollapse}\"><\/p:ajax>\t\t\t\t\t\t\t\t\t\r\n\t<\/p:tree>\r\n<\/h:form>\r\n<\/html>\r\n<\/code><\/pre>\n
            \u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30bb\u30b9\u306e\u30c9\u30e9\u30c3\u30b0\u30a2\u30f3\u30c9\u30c9\u30ed\u30c3\u30d7<\/h2>\n
            \u30c4\u30ea\u30fc\u30ce\u30fc\u30c9\u306f\u3001\u30c9\u30e9\u30c3\u30b0\u30a2\u30f3\u30c9\u30c9\u30ed\u30c3\u30d7\u3092\u4f7f\u7528\u3057\u3066\u3001\u5358\u4e00\u306e\u30c4\u30ea\u30fc\u5185\u3067\u4e26\u3079\u66ff\u3048\u308b\u3053\u3068\u304c\u3067\u304d\u3001\u3055\u3089\u306b\u8907\u6570\u306e\u30c4\u30ea\u30fc\u9593\u3067\u3082\u8ee2\u9001\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u6b21\u306e\u4f8b\u306f\u3001\u5358\u4e00\u306e\u30c4\u30ea\u30fc\u3092\u30c9\u30e9\u30c3\u30b0\u53ef\u80fd\u3067\u30c9\u30ed\u30c3\u30d7\u53ef\u80fd\u306b\u3059\u308b\u65b9\u6cd5\u3092\u793a\u3057\u3066\u3044\u307e\u3059\u3002index4.xhtml\u306e\u30b3\u30fc\u30c9\u3067\u3059\u3002<\/p>\n
            <html xmlns=\"https:\/\/www.w3.org\/1999\/xhtml\"\r\n\txmlns:ui=\"https:\/\/java.sun.com\/jsf\/facelets\"\r\n\txmlns:h=\"https:\/\/java.sun.com\/jsf\/html\"\r\n\txmlns:f=\"https:\/\/java.sun.com\/jsf\/core\"\r\n\txmlns:p=\"https:\/\/primefaces.org\/ui\">\r\n<h:head>\r\n\t<script name=\"jquery\/jquery.js\" library=\"primefaces\"><\/script>\r\n<\/h:head>\r\n<h:form>\r\n\t<p:tree value=\"#{treeManagedBean.root}\" var=\"node\" dynamic=\"true\" droppable=\"true\" draggable=\"true\"\r\n\t\t\t\tselectionMode=\"single\" selection=\"#{treeManagedBean.singleSelectedTreeNode}\">\r\n\t\t<p:treeNode expandedIcon=\"ui-icon ui-icon-folder-open\"\r\n\t\t\t\t\t\tcollapsedIcon=\"ui-icon ui-icon-folder-collapsed\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:treeNode type=\"document\" icon=\"ui-icon ui-icon-document\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:treeNode type=\"image\" icon=\"ui-icon ui-icon-image\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\t\t\t\t\t\r\n\t\t<p:treeNode type=\"video\" icon=\"ui-icon ui-icon-video\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:ajax event=\"select\" listener=\"#{treeManagedBean.onNodeSelect}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"unselect\" listener=\"#{treeManagedBean.onNodeUnSelect}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"expand\" listener=\"#{treeManagedBean.onNodeExpand}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"collapse\" listener=\"#{treeManagedBean.onNodeCollapse}\"><\/p:ajax>\t\t\t\t\t\t\t\t\t\r\n\t<\/p:tree>\r\n<\/h:form>\r\n<\/html>\r\n<\/code><\/pre>\n
            \u5358\u4e00\u306e\u6728\u306b\u5bfe\u3057\u3066\u306e\u30c9\u30e9\u30c3\u30b0\uff06\u30c9\u30ed\u30c3\u30d7\u306e\u6982\u5ff5\u306e\u9069\u7528\u306f\u975e\u5e38\u306b\u7c21\u5358\u3067\u3059\u304c\u3001\u8907\u6570\u306e\u6728\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u5bfe\u3057\u3066\u30c9\u30e9\u30c3\u30b0\uff06\u30c9\u30ed\u30c3\u30d7\u3059\u308b\u5834\u5408\u306f\u3088\u308a\u8907\u96d1\u306a\u4f8b\u304c\u898b\u3089\u308c\u307e\u3059\u3002\u4ee5\u4e0b\u306e\u4f8b\u306f\u305d\u306e\u305f\u3081\u306e\u7c21\u5358\u306a\u4f8b\u3092\u793a\u3057\u3066\u3044\u307e\u3059\u3002\u4eca\u56de\u306f\u3001\u5404\u6728\u306e\u30ce\u30fc\u30c9\u3092\u30c9\u30e9\u30c3\u30b0\u53ef\u80fd\u3067\u30c9\u30ed\u30c3\u30d7\u53ef\u80fd\u306b\u3059\u308b\u305f\u3081\u306b\u65b0\u3057\u3044\u5c5e\u6027”dragdropScope”\u3092\u4f7f\u7528\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002index5.xhtml\u306e\u30b3\u30fc\u30c9\uff1a<\/p>\n
            <html xmlns=\"https:\/\/www.w3.org\/1999\/xhtml\"\r\n\txmlns:ui=\"https:\/\/java.sun.com\/jsf\/facelets\"\r\n\txmlns:h=\"https:\/\/java.sun.com\/jsf\/html\"\r\n\txmlns:f=\"https:\/\/java.sun.com\/jsf\/core\"\r\n\txmlns:p=\"https:\/\/primefaces.org\/ui\">\r\n<h:head>\r\n\t<script name=\"jquery\/jquery.js\" library=\"primefaces\"><\/script>\r\n<\/h:head>\r\n<h:form>\r\n\t<p:tree value=\"#{treeManagedBean.root}\" var=\"node\" dynamic=\"true\" droppable=\"true\" draggable=\"true\"\r\n\t\t\t\tselectionMode=\"single\" selection=\"#{treeManagedBean.singleSelectedTreeNode}\"\r\n\t\t\t\tdragdropScope=\"myScope\">\r\n\t\t<p:treeNode expandedIcon=\"ui-icon ui-icon-folder-open\"\r\n\t\t\t\t\t\tcollapsedIcon=\"ui-icon ui-icon-folder-collapsed\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:treeNode type=\"document\" icon=\"ui-icon ui-icon-document\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:treeNode type=\"image\" icon=\"ui-icon ui-icon-image\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\t\t\t\t\t\r\n\t\t<p:treeNode type=\"video\" icon=\"ui-icon ui-icon-video\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:ajax event=\"select\" listener=\"#{treeManagedBean.onNodeSelect}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"unselect\" listener=\"#{treeManagedBean.onNodeUnSelect}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"expand\" listener=\"#{treeManagedBean.onNodeExpand}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"collapse\" listener=\"#{treeManagedBean.onNodeCollapse}\"><\/p:ajax>\t\t\t\t\t\t\t\t\t\r\n\t<\/p:tree>\r\n\t\r\n\t<p:tree value=\"#{treeManagedBean.root}\" var=\"node\" dynamic=\"true\" droppable=\"true\" draggable=\"true\"\r\n\t\t\t\tselectionMode=\"single\" selection=\"#{treeManagedBean.singleSelectedTreeNode}\"\r\n\t\t\t\tdragdropScope=\"myScope\">\r\n\t\t<p:treeNode expandedIcon=\"ui-icon ui-icon-folder-open\"\r\n\t\t\t\t\t\tcollapsedIcon=\"ui-icon ui-icon-folder-collapsed\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:treeNode type=\"document\" icon=\"ui-icon ui-icon-document\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:treeNode type=\"image\" icon=\"ui-icon ui-icon-image\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\t\t\t\t\t\r\n\t\t<p:treeNode type=\"video\" icon=\"ui-icon ui-icon-video\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:ajax event=\"select\" listener=\"#{treeManagedBean.onNodeSelect}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"unselect\" listener=\"#{treeManagedBean.onNodeUnSelect}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"expand\" listener=\"#{treeManagedBean.onNodeExpand}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"collapse\" listener=\"#{treeManagedBean.onNodeCollapse}\"><\/p:ajax>\t\t\t\t\t\t\t\t\t\r\n\t<\/p:tree>\t\r\n<\/h:form>\r\n<\/html>\r\n<\/code><\/pre>\n
            \u4ee5\u4e0b\u3092\u65e5\u672c\u8a9e\u3067\u8a00\u3044\u63db\u3048\u3066\u304f\u3060\u3055\u3044\u30021\u3064\u306e\u30aa\u30d7\u30b7\u30e7\u30f3\u3067\u7d50\u69cb\u3067\u3059\u3002<\/p>\n
            “The cherry blossoms are in full bloom in the park.” => \u300c\u516c\u5712\u306e\u685c\u304c\u6e80\u958b\u3067\u3059\u3002\u300d<\/p>\n
            \u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30bb\u30b9\u306e\u6c34\u5e73\u30c4\u30ea\u30fc<\/h2>\n
            \u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u30c4\u30ea\u30fc\u306e\u65b9\u5411\u306f\u7e26\u3067\u3059\u304c\u3001\u6c34\u5e73\u306b\u8a2d\u5b9a\u3059\u308b\u3068\u30ce\u30fc\u30c9\u304c\u6c34\u5e73\u306b\u8868\u793a\u3055\u308c\u307e\u3059\u3002\u30c9\u30e9\u30c3\u30b0\u30a2\u30f3\u30c9\u30c9\u30ed\u30c3\u30d7\u4ee5\u5916\u306e\u3059\u3079\u3066\u306e\u7e26\u30c4\u30ea\u30fc\u306e\u6a5f\u80fd\u306f\u3001\u6c34\u5e73\u30c4\u30ea\u30fc\u3067\u3082\u5229\u7528\u53ef\u80fd\u3067\u3059\u3002\u3053\u306e\u76ee\u7684\u306e\u305f\u3081\u306b\u5c5e\u6027\u300corientation\u300d\u304c\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002index6.xhtml\u306e\u30b3\u30fc\u30c9\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n
            <html xmlns=\"https:\/\/www.w3.org\/1999\/xhtml\"\r\n\txmlns:ui=\"https:\/\/java.sun.com\/jsf\/facelets\"\r\n\txmlns:h=\"https:\/\/java.sun.com\/jsf\/html\"\r\n\txmlns:f=\"https:\/\/java.sun.com\/jsf\/core\"\r\n\txmlns:p=\"https:\/\/primefaces.org\/ui\">\r\n<h:head>\r\n\t<script name=\"jquery\/jquery.js\" library=\"primefaces\"><\/script>\r\n<\/h:head>\r\n<h:form>\r\n\t<p:tree value=\"#{treeManagedBean.root}\" var=\"node\" dynamic=\"true\" orientation=\"horizontal\" \r\n\t\t\t\tselectionMode=\"single\" selection=\"#{treeManagedBean.singleSelectedTreeNode}\">\r\n\t\t<p:treeNode expandedIcon=\"ui-icon ui-icon-folder-open\"\r\n\t\t\t\t\t\tcollapsedIcon=\"ui-icon ui-icon-folder-collapsed\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:treeNode type=\"document\" icon=\"ui-icon ui-icon-document\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:treeNode type=\"image\" icon=\"ui-icon ui-icon-image\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\t\t\t\t\t\r\n\t\t<p:treeNode type=\"video\" icon=\"ui-icon ui-icon-video\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:ajax event=\"select\" listener=\"#{treeManagedBean.onNodeSelect}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"unselect\" listener=\"#{treeManagedBean.onNodeUnSelect}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"expand\" listener=\"#{treeManagedBean.onNodeExpand}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"collapse\" listener=\"#{treeManagedBean.onNodeCollapse}\"><\/p:ajax>\t\t\t\t\t\t\t\t\t\r\n\t<\/p:tree>\r\n<\/h:form>\r\n<\/html>\r\n<\/code><\/pre>\n
            \u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30b7\u30ba\u306e\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u30e1\u30cb\u30e5\u30fc<\/h2>\n
            Primefaces\u306f\u3001\u3042\u306a\u305f\u304c\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u306b\u57fa\u3065\u3044\u305f\u64cd\u4f5c\u3092\u884c\u3046\u305f\u3081\u306e\u7279\u5225\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u63d0\u4f9b\u3057\u3066\u3044\u307e\u3059\u3002\u305d\u306e\u305f\u3081\u306eContextMenu\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u4f7f\u7528\u3055\u308c\u3001\u8907\u6570\u306e\u9078\u629e\u80a2\u3092\u958b\u767a\u3057\u305f\u5834\u5408\u306b\u306f\u3001Tree\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u30e1\u30cb\u30e5\u30fc\u304c\u7d71\u5408\u3055\u308c\u3066\u9078\u629e\u3055\u308c\u305f\u30ce\u30fc\u30c9\u3068\u30ce\u30fc\u30c9\u306b\u5bfe\u3057\u3066\u30bd\u30fc\u30c8\u3055\u308c\u305f\u64cd\u4f5c\u3092\u9069\u7528\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002ContextMenu\u306e’for’\u5c5e\u6027\u306f\u3001Tree\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e’id’\u5c5e\u6027\u3092\u53c2\u7167\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u3001Tree\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5185\u306e\u7279\u5b9a\u306e\u30ce\u30fc\u30c9\u304c\u9078\u629e\u3055\u308c\u305f\u5834\u5408\u306b\u306f\u3044\u3064\u3067\u3082\u5b9a\u7fa9\u3055\u308c\u305f\u30e1\u30cb\u30e5\u30fc\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u30e1\u30cb\u30e5\u30fc\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u8868\u793a\u3059\u308b\u306b\u306f\u3001\u53f3\u30af\u30ea\u30c3\u30af\u3092\u4f7f\u7528\u3057\u3066\u304f\u3060\u3055\u3044\u3002index6.xhtml\u30b3\u30fc\u30c9\uff1a<\/p>\n
            <html xmlns=\"https:\/\/www.w3.org\/1999\/xhtml\"\r\n\txmlns:ui=\"https:\/\/java.sun.com\/jsf\/facelets\"\r\n\txmlns:h=\"https:\/\/java.sun.com\/jsf\/html\"\r\n\txmlns:f=\"https:\/\/java.sun.com\/jsf\/core\"\r\n\txmlns:p=\"https:\/\/primefaces.org\/ui\">\r\n<h:head>\r\n\t<script name=\"jquery\/jquery.js\" library=\"primefaces\"><\/script>\r\n<\/h:head>\r\n<h:form>\r\n\t<p:contextMenu for=\"tree\">\r\n\t\t<p:menuitem value=\"View\" actionListener=\"#{treeManagedBean.view}\" icon=\"ui-icon-search\"><\/p:menuitem>\r\n\t<\/p:contextMenu>\r\n\t<p:tree id=\"tree\" value=\"#{treeManagedBean.root}\" var=\"node\" dynamic=\"true\" orientation=\"horizontal\" \r\n\t\t\t\tselectionMode=\"single\" selection=\"#{treeManagedBean.singleSelectedTreeNode}\">\r\n\t\t<p:treeNode expandedIcon=\"ui-icon ui-icon-folder-open\"\r\n\t\t\t\t\t\tcollapsedIcon=\"ui-icon ui-icon-folder-collapsed\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:treeNode type=\"document\" icon=\"ui-icon ui-icon-document\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:treeNode type=\"image\" icon=\"ui-icon ui-icon-image\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\t\t\t\t\t\r\n\t\t<p:treeNode type=\"video\" icon=\"ui-icon ui-icon-video\">\r\n\t\t\t<h:outputText value=\"#{node}\"\/>\r\n\t\t<\/p:treeNode>\r\n\t\t<p:ajax event=\"select\" listener=\"#{treeManagedBean.onNodeSelect}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"unselect\" listener=\"#{treeManagedBean.onNodeUnSelect}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"expand\" listener=\"#{treeManagedBean.onNodeExpand}\"><\/p:ajax>\r\n\t\t<p:ajax event=\"collapse\" listener=\"#{treeManagedBean.onNodeCollapse}\"><\/p:ajax>\t\t\t\t\t\t\t\t\t\r\n\t<\/p:tree>\r\n<\/h:form>\r\n<\/html>\r\n<\/code><\/pre>\n
            package com.scdev.prime.faces.beans;\r\n\r\nimport javax.faces.bean.ManagedBean;\r\nimport javax.faces.bean.SessionScoped;\r\nimport javax.faces.event.ActionEvent;\r\n\r\nimport org.primefaces.event.NodeCollapseEvent;\r\nimport org.primefaces.event.NodeExpandEvent;\r\nimport org.primefaces.event.NodeSelectEvent;\r\nimport org.primefaces.event.NodeUnselectEvent;\r\nimport org.primefaces.model.DefaultTreeNode;\r\nimport org.primefaces.model.TreeNode;\r\n\r\n@ManagedBean\r\n@SessionScoped\r\npublic class TreeManagedBean {\r\n\t\/\/ TreeNode instance\r\n\tprivate TreeNode root;\r\n\tprivate TreeNode singleSelectedTreeNode;\r\n\tprivate TreeNode [] multipleSelectedTreeNodes;\r\n\tprivate TreeNode [] checkboxSelectedTreeNodes;\r\n\t\r\n\tpublic TreeManagedBean(){\r\n\t\t\/\/ This is the root node, so it's data is root and its parent is null\r\n\t\tthis.root = new DefaultTreeNode(\"Root Node\", null);\r\n\t\t\/\/ Create documents node\r\n\t\tTreeNode documents = new DefaultTreeNode(\"Documents\", this.root);\r\n\t\t\/\/ Create document node\r\n\t\tTreeNode document01 = new DefaultTreeNode(\"document\",\"Expenses.doc\", documents);\r\n\t\t\/\/ Create images node\r\n\t\tTreeNode images = new DefaultTreeNode(\"Images\", this.root);\r\n\t\t\/\/ Create image node\r\n\t\tTreeNode image01 = new DefaultTreeNode(\"image\",\"Travel.gif\", images);\r\n\t\t\/\/ Create videos node\r\n\t\tTreeNode videos = new DefaultTreeNode(\"Videos\", this.root);\r\n\t\t\/\/ Create video node\r\n\t\tTreeNode video01 = new DefaultTreeNode(\"video\",\"Play.avi\", videos);\r\n\t}\r\n\r\n\tpublic TreeNode getRoot() {\r\n\t\treturn root;\r\n\t}\r\n\r\n\tpublic void setRoot(TreeNode root) {\r\n\t\tthis.root = root;\r\n\t}\r\n\t\r\n\tpublic TreeNode getSingleSelectedTreeNode() {\r\n\t\treturn singleSelectedTreeNode;\r\n\t}\r\n\r\n\tpublic void setSingleSelectedTreeNode(TreeNode singleSelectedTreeNode) {\r\n\t\tthis.singleSelectedTreeNode = singleSelectedTreeNode;\r\n\t}\r\n\r\n\tpublic TreeNode[] getMultipleSelectedTreeNodes() {\r\n\t\treturn multipleSelectedTreeNodes;\r\n\t}\r\n\r\n\tpublic void setMultipleSelectedTreeNodes(TreeNode[] multipleSelectedTreeNodes) {\r\n\t\tthis.multipleSelectedTreeNodes = multipleSelectedTreeNodes;\r\n\t}\r\n\r\n\tpublic TreeNode[] getCheckboxSelectedTreeNodes() {\r\n\t\treturn checkboxSelectedTreeNodes;\r\n\t}\r\n\r\n\tpublic void setCheckboxSelectedTreeNodes(TreeNode[] checkboxSelectedTreeNodes) {\r\n\t\tthis.checkboxSelectedTreeNodes = checkboxSelectedTreeNodes;\r\n\t}\r\n\r\n\tpublic void onNodeSelect(NodeSelectEvent event){\r\n\t\tSystem.out.println(\"Node Data ::\"+event.getTreeNode().getData()+\" :: Selected\");\r\n\t}\r\n\t\r\n\tpublic void onNodeUnSelect(NodeUnselectEvent event){\r\n\t\tSystem.out.println(\"Node Data ::\"+event.getTreeNode().getData()+\" :: UnSelected\");\r\n\t}\r\n\t\r\n\tpublic void onNodeExpand(NodeExpandEvent event){\r\n\t\tSystem.out.println(\"Node Data ::\"+event.getTreeNode().getData()+\" :: Expanded\");\r\n\t}\r\n\t\r\n\tpublic void onNodeCollapse(NodeCollapseEvent event){\r\n\t\tSystem.out.println(\"Node Data ::\"+event.getTreeNode().getData()+\" :: Collapsed\");\r\n\t}\r\n\t\r\n\tpublic String printSelectedNodes(){\r\n\t\tSystem.out.println(\"Single Selection Is :: \"+this.singleSelectedTreeNode.getData());\r\n\t\tfor(TreeNode n : this.multipleSelectedTreeNodes){\r\n\t\t\tSystem.out.println(\"Multiple Selection Are :: \"+n.getData());\t\r\n\t\t}\r\n\t\tfor(TreeNode n : this.checkboxSelectedTreeNodes){\r\n\t\t\tSystem.out.println(\"CheckBox Selection Are :: \"+n.getData());\t\r\n\t\t}\t\t\r\n\t\treturn \"\";\r\n\t}\r\n\t\r\n\tpublic void view(ActionEvent e){\r\n\t\tSystem.out.println(\"View action has invoked against node :: \"+this.singleSelectedTreeNode.getData());\r\n\t}\t\r\n}\r\n<\/code><\/pre>\n
            \u4ee5\u4e0b\u306e\u6587\u3092\u65e5\u672c\u8a9e\u3067\u8a00\u3044\u63db\u3048\u3066\u304f\u3060\u3055\u3044\uff08\u30aa\u30d7\u30b7\u30e7\u30f3\u306f\uff11\u3064\u306e\u307f\u3067\u304b\u307e\u3044\u307e\u305b\u3093\uff09\uff1a
            \n\u300cI like to eat sushi at a restaurant near my house.\u300d<\/p>\n
            \u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30bb\u30b9\u306e\u30c4\u30ea\u30fc\u30c6\u30fc\u30d6\u30eb<\/h2>\n
            TreeTable\u306f\u3001\u968e\u5c64\u7684\u306a\u30c7\u30fc\u30bf\u3092\u8868\u5f62\u5f0f\u3067\u8868\u793a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/p>\n
            Primefaces\u306eTreeTable\u3092\u4f7f\u3044\u59cb\u3081\u308b<\/h2>\n
            TreeTable\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u63a2\u7d22\u3059\u308b\u524d\u306b\u3001\u305d\u308c\u306e\u57fa\u672c\u60c5\u5831\u3068\u5c5e\u6027\u3092\u305d\u308c\u305e\u308c\u78ba\u8a8d\u3059\u308b\u3053\u3068\u304c\u91cd\u8981\u3067\u3059\u3002<\/p>\n
            \n
            \n\n\n\n\n\n\n\n\n\n
            Info<\/th>\nTreeTable<\/th>\n<\/tr>\n<\/thead>\n
            Component Class<\/td>\norg.primefaces.component.treetable.TreeTable<\/td>\n<\/tr>\n
            Component Type<\/td>\norg.primefaces.component.TreeTable<\/td>\n<\/tr>\n
            Component Family<\/td>\norg.primefaces.component<\/td>\n<\/tr>\n
            Renderer Type<\/td>\norg.primefaces.component.TreeTableRenderer<\/td>\n<\/tr>\n
            Renderer Class<\/td>\norg.primefaces.component.treetable.TreeTableRenderer<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
            \n
            \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
            Name<\/th>\nDefault<\/th>\nType<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
            id<\/td>\nnull<\/td>\nString<\/td>\nUnique identifier of the component<\/td>\n<\/tr>\n
            rendered<\/td>\ntrue<\/td>\nBoolean<\/td>\nBoolean value to specify the rendering of thecomponent, when set to false component willnot be rendered.<\/td>\n<\/tr>\n
            binding<\/td>\nnull<\/td>\nObject<\/td>\nAn el expression that maps to a server sideUIComponent instance in a backing bean<\/td>\n<\/tr>\n
            value<\/td>\nnull<\/td>\nObject<\/td>\nA TreeNode instance as the backing model.<\/td>\n<\/tr>\n
            var<\/td>\nnull<\/td>\nString<\/td>\nName of the request-scoped variable used torefer each treenode.<\/td>\n<\/tr>\n
            widgetVar<\/td>\nnull<\/td>\nString<\/td>\nName of the client side widget<\/td>\n<\/tr>\n
            style<\/td>\nnull<\/td>\nString<\/td>\nInline style of the container element.<\/td>\n<\/tr>\n
            styleClass<\/td>\nnull<\/td>\nString<\/td>\nStyle class of the container element.<\/td>\n<\/tr>\n
            selection<\/td>\nnull<\/td>\nObject<\/td>\nSelection reference.<\/td>\n<\/tr>\n
            selectionMode<\/td>\nnull<\/td>\nString<\/td>\nType of selection mode.<\/td>\n<\/tr>\n
            scrollable<\/td>\nfalse<\/td>\nBoolean<\/td>\nWhether or not the data should be scrollable.<\/td>\n<\/tr>\n
            scrollHeight<\/td>\nnull<\/td>\nInteger<\/td>\nHeight of scrollable data.<\/td>\n<\/tr>\n
            scrollWidth<\/td>\nnull<\/td>\nInteger<\/td>\nWidth of scrollable data.<\/td>\n<\/tr>\n
            tableStyle<\/td>\nnull<\/td>\nString<\/td>\nInline style of the table element.<\/td>\n<\/tr>\n
            tableStyleClass<\/td>\nnull<\/td>\nString<\/td>\nStyle class of the table element.<\/td>\n<\/tr>\n
            emptyMessage<\/td>\nNo records found<\/td>\nString<\/td>\nText to display when there is no data to display.<\/td>\n<\/tr>\n
            resizableColumns<\/td>\nfalse<\/td>\nBoolean<\/td>\nDefines if colums can be resized or not.<\/td>\n<\/tr>\n
            rowStyleClass<\/td>\nnull<\/td>\nString<\/td>\nStyle class for each row.<\/td>\n<\/tr>\n
            liveResize<\/td>\nfalse<\/td>\nBoolean<\/td>\nColumns are resized live in this mode withoutusing a resize helper.<\/td>\n<\/tr>\n
            required<\/td>\nfalse<\/td>\nBoolean<\/td>\nValidation constraint for selection.<\/td>\n<\/tr>\n
            requiredMessage<\/td>\nnull<\/td>\nString<\/td>\nMessage for required selection validation.<\/td>\n<\/tr>\n
            sortBy<\/td>\nnull<\/td>\nValueExpr<\/td>\nExpression for default sorting.<\/td>\n<\/tr>\n
            sortOrder<\/td>\nascending<\/td>\nString<\/td>\nDefines default sorting order.<\/td>\n<\/tr>\n
            sortFunction<\/td>\nnull<\/td>\nMethodExpr<\/td>\nCustom pluggable sortFunction for defaultsorting.<\/td>\n<\/tr>\n
            nativeElements<\/td>\nfalse<\/td>\nBoolean<\/td>\nIn native mode, treetable uses nativecheckboxes.<\/td>\n<\/tr>\n
            dataLocale<\/td>\nnull<\/td>\nObject<\/td>\nLocale to be used in features such as sorting,defaults to view locale.<\/td>\n<\/tr>\n
            caseSensitiveSort<\/td>\nfalse<\/td>\nBoolean<\/td>\nCase sensitivity for sorting, insensitive bydefault.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
            Tree\u3068\u540c\u69d8\u306b\u3001TreeTable\u306f\u30eb\u30fc\u30c8\u30ce\u30fc\u30c9\u306b\u5bfe\u5fdc\u3059\u308bTreeNode\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3067\u30dd\u30d4\u30e5\u30ec\u30fc\u30c8\u3055\u308c\u307e\u3059\u3002TreeNode API\u306f\u968e\u5c64\u30c7\u30fc\u30bf\u69cb\u9020\u3092\u6301\u3061\u3001\u30c4\u30ea\u30fc\u306b\u8868\u793a\u3059\u308b\u30c7\u30fc\u30bf\u3092\u8868\u3057\u307e\u3059\u3002\u4ee5\u4e0b\u306e\u4f8b\u306f\u3001TreeTable\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f7f\u7528\u3057\u3066\u8868\u793a\u3055\u308c\u308b\u30d7\u30ec\u30fc\u30f3\u306aJava\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\uff08POJO\uff09\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u793a\u3057\u3066\u3044\u307e\u3059\u3002index7.xhtml\u306e\u30b3\u30fc\u30c9\uff1a<\/p>\n
            <html xmlns=\"https:\/\/www.w3.org\/1999\/xhtml\"\r\n\txmlns:ui=\"https:\/\/java.sun.com\/jsf\/facelets\"\r\n\txmlns:h=\"https:\/\/java.sun.com\/jsf\/html\"\r\n\txmlns:f=\"https:\/\/java.sun.com\/jsf\/core\"\r\n\txmlns:p=\"https:\/\/primefaces.org\/ui\">\r\n<h:head>\r\n\t<script name=\"jquery\/jquery.js\" library=\"primefaces\"><\/script>\r\n<\/h:head>\r\n<h:form>\t\t\t\t\t\t\t\r\n\t<p:treeTable value=\"#{treeTableManagedBean.root}\" var=\"node\">\r\n\t\t<p:column>\r\n\t\t\t<f:facet name=\"header\">\r\n\t\t\t\tName\r\n\t\t\t<\/f:facet>\r\n\t\t\t<h:outputText value=\"#{node.name}\"><\/h:outputText>\r\n\t\t<\/p:column>\r\n\t\t<p:column>\r\n\t\t\t<f:facet name=\"header\">\r\n\t\t\t\tAuthor\r\n\t\t\t<\/f:facet>\r\n\t\t\t<h:outputText value=\"#{node.author}\"><\/h:outputText>\r\n\t\t<\/p:column>\r\n\t\t<p:column>\r\n\t\t\t<f:facet name=\"header\">\r\n\t\t\t\tID\r\n\t\t\t<\/f:facet>\r\n\t\t\t<h:outputText value=\"#{node.id}\"><\/h:outputText>\r\n\t\t<\/p:column>\t\t\t\t\r\n\t<\/p:treeTable>\r\n<\/h:form>\r\n<\/html>\r\n<\/code><\/pre>\n
            package com.scdev.prime.faces.data;\r\n\r\npublic class Document {\r\n\tprivate String name;\r\n\tprivate String id;\r\n\tprivate String author;\r\n\t\r\n\tpublic Document(String name, String id,String author){\r\n\t\tthis.name = name;\r\n\t\tthis.id = id;\r\n\t\tthis.author = author;\r\n\t}\r\n\t\r\n\tpublic String getName() {\r\n\t\treturn name;\r\n\t}\r\n\tpublic void setName(String name) {\r\n\t\tthis.name = name;\r\n\t}\r\n\tpublic String getId() {\r\n\t\treturn id;\r\n\t}\r\n\tpublic void setId(String id) {\r\n\t\tthis.id = id;\r\n\t}\r\n\tpublic String getAuthor() {\r\n\t\treturn author;\r\n\t}\r\n\tpublic void setAuthor(String author) {\r\n\t\tthis.author = author;\r\n\t}\r\n}\r\n<\/code><\/pre>\n
            package com.scdev.prime.faces.beans;\r\n\r\nimport javax.faces.bean.ManagedBean;\r\nimport javax.faces.bean.SessionScoped;\r\n\r\nimport org.primefaces.model.DefaultTreeNode;\r\nimport org.primefaces.model.TreeNode;\r\n\r\nimport com.scdev.prime.faces.data.Document;\r\n\r\n@ManagedBean\r\n@SessionScoped\r\npublic class TreeTableManagedBean {\r\n\t\r\n\tprivate TreeNode root = new DefaultTreeNode(\"Root Node\", null);\r\n\r\n\tpublic TreeTableManagedBean(){\r\n\t\t\/\/ Populate Document Instances\r\n\t\tDocument doc01 = new Document(\"Primefaces Tutorial\",\"1\",\"Primefaces Company\");\r\n\t\t\r\n\t\tDocument doc02 = new Document(\"Hibernate Tutorial\",\"2\",\"JournalDev\");\r\n\t\t\r\n\t\t\/\/ Create Documents TreeNode\r\n\t\tTreeNode documents = new DefaultTreeNode(new Document(\"Documents\",\"0\",\"Documents\"), this.root);\r\n\t\t\/\/ Create Document TreeNode\r\n\t\tTreeNode document01 = new DefaultTreeNode(doc01, documents);\r\n\t\tTreeNode document02 = new DefaultTreeNode(doc02, documents);\r\n\t}\r\n\t\r\n\tpublic TreeNode getRoot() {\r\n\t\treturn root;\r\n\t}\r\n\r\n\tpublic void setRoot(TreeNode root) {\r\n\t\tthis.root = root;\r\n\t}\r\n}\r\n<\/code><\/pre>\n
            Primefaces\u306eTreeTable\u306e\u9078\u629e\u6a5f\u80fd<\/h2>\n
            \u30c4\u30ea\u30fc\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u540c\u69d8\u306b\u3001\u30ce\u30fc\u30c9\u306e\u9078\u629e\u306f\u7d44\u307f\u8fbc\u307f\u306e\u6a5f\u80fd\u3067\u3042\u308a\u3001\u9078\u629e\u306e\u7a2e\u985e\uff08\u30b7\u30f3\u30b0\u30eb\u3001\u30de\u30eb\u30c1\u3001\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\uff09\u3092\u6c7a\u5b9a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u9078\u629e\u3055\u308c\u305f\u30ce\u30fc\u30c9\u306fTreeNode\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306b\u30d0\u30a4\u30f3\u30c9\u3055\u308c\u3001\u4ed6\u306e\u5834\u5408\u306fTreeNode\u306e\u914d\u5217\u304c\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002\u3053\u306e\u4f8b\u3067\u306f\u3001\u30b0\u30ed\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u8868\u793a\u3059\u308b\u3053\u3068\u3067\u30e6\u30fc\u30b6\u30fc\u306e\u9078\u629e\u3092\u56f2\u3080\u65b9\u6cd5\u3092\u793a\u3057\u3066\u3044\u307e\u3059\u3002\u3053\u306e\u4f8b\u3067\u306f\u3001\u5f8c\u3067\u8a73\u3057\u304f\u8aac\u660e\u3059\u308bPrimefaces\u304c\u63d0\u4f9b\u3059\u308bp:commandButton\u3092\u4f7f\u7528\u3057\u3066\u3044\u307e\u3059\u3002index8.xhtml\u306e\u30b3\u30fc\u30c9\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n
            <html xmlns=\"https:\/\/www.w3.org\/1999\/xhtml\"\r\n\txmlns:ui=\"https:\/\/java.sun.com\/jsf\/facelets\"\r\n\txmlns:h=\"https:\/\/java.sun.com\/jsf\/html\"\r\n\txmlns:f=\"https:\/\/java.sun.com\/jsf\/core\"\r\n\txmlns:p=\"https:\/\/primefaces.org\/ui\">\r\n<h:head>\r\n\t<script name=\"jquery\/jquery.js\" library=\"primefaces\"><\/script>\r\n<\/h:head>\r\n<h:form>\t\t\t\r\n\t<p:growl id=\"message\">\r\n\t<\/p:growl>\t\t\t\t\r\n\t<p:treeTable value=\"#{treeTableManagedBean.root}\" var=\"node\" selectionMode=\"single\"\r\n\t\tselection=\"#{treeTableManagedBean.singleSelectedNode}\">\r\n\t\t<p:column>\r\n\t\t\t<f:facet name=\"header\">\r\n\t\t\t\tName\r\n\t\t\t<\/f:facet>\r\n\t\t\t<h:outputText value=\"#{node.name}\"><\/h:outputText>\r\n\t\t<\/p:column>\r\n\t\t<p:column>\r\n\t\t\t<f:facet name=\"header\">\r\n\t\t\t\tAuthor\r\n\t\t\t<\/f:facet>\r\n\t\t\t<h:outputText value=\"#{node.author}\"><\/h:outputText>\r\n\t\t<\/p:column>\r\n\t\t<p:column>\r\n\t\t\t<f:facet name=\"header\">\r\n\t\t\t\tID\r\n\t\t\t<\/f:facet>\r\n\t\t\t<h:outputText value=\"#{node.id}\"><\/h:outputText>\r\n\t\t<\/p:column>\t\t\t\t\r\n\t<\/p:treeTable>\r\n\t<p:treeTable value=\"#{treeTableManagedBean.root}\" var=\"node\" selectionMode=\"multiple\"\r\n\t\tselection=\"#{treeTableManagedBean.multipleSelectedNodes}\">\r\n\t\t<p:column>\r\n\t\t\t<f:facet name=\"header\">\r\n\t\t\t\tName\r\n\t\t\t<\/f:facet>\r\n\t\t\t<h:outputText value=\"#{node.name}\"><\/h:outputText>\r\n\t\t<\/p:column>\r\n\t\t<p:column>\r\n\t\t\t<f:facet name=\"header\">\r\n\t\t\t\tAuthor\r\n\t\t\t<\/f:facet>\r\n\t\t\t<h:outputText value=\"#{node.author}\"><\/h:outputText>\r\n\t\t<\/p:column>\r\n\t\t<p:column>\r\n\t\t\t<f:facet name=\"header\">\r\n\t\t\t\tID\r\n\t\t\t<\/f:facet>\r\n\t\t\t<h:outputText value=\"#{node.id}\"><\/h:outputText>\r\n\t\t<\/p:column>\t\t\t\t\r\n\t<\/p:treeTable>\r\n\t<p:treeTable value=\"#{treeTableManagedBean.root}\" var=\"node\" selectionMode=\"checkbox\"\r\n\t\tselection=\"#{treeTableManagedBean.checkboxSelectedNodes}\">\r\n\t\t<p:column>\r\n\t\t\t<f:facet name=\"header\">\r\n\t\t\t\tName\r\n\t\t\t<\/f:facet>\r\n\t\t\t<h:outputText value=\"#{node.name}\"><\/h:outputText>\r\n\t\t<\/p:column>\r\n\t\t<p:column>\r\n\t\t\t<f:facet name=\"header\">\r\n\t\t\t\tAuthor\r\n\t\t\t<\/f:facet>\r\n\t\t\t<h:outputText value=\"#{node.author}\"><\/h:outputText>\r\n\t\t<\/p:column>\r\n\t\t<p:column>\r\n\t\t\t<f:facet name=\"header\">\r\n\t\t\t\tID\r\n\t\t\t<\/f:facet>\r\n\t\t\t<h:outputText value=\"#{node.id}\"><\/h:outputText>\r\n\t\t<\/p:column>\t\t\t\t\r\n\t<\/p:treeTable>\t\r\n\t<p:commandButton value=\"Show Selected Documents\" action=\"#{treeTableManagedBean.viewSelectedNodes}\" process=\"@form\" update=\"message\">\r\n\t<\/p:commandButton>\t\r\n<\/h:form>\r\n<\/html>\r\n<\/code><\/pre>\n
            package com.scdev.prime.faces.beans;\r\n\r\nimport javax.faces.application.FacesMessage;\r\nimport javax.faces.bean.ManagedBean;\r\nimport javax.faces.bean.SessionScoped;\r\nimport javax.faces.context.FacesContext;\r\n\r\nimport org.primefaces.model.DefaultTreeNode;\r\nimport org.primefaces.model.TreeNode;\r\n\r\nimport com.scdev.prime.faces.data.Document;\r\n\r\n@ManagedBean\r\n@SessionScoped\r\npublic class TreeTableManagedBean {\r\n\t\r\n\tprivate TreeNode root = new DefaultTreeNode(\"Root Node\", null);\r\n\tprivate TreeNode singleSelectedNode;\r\n\tprivate TreeNode [] multipleSelectedNodes;\r\n\tprivate TreeNode [] checkboxSelectedNodes;\r\n\r\n\tpublic TreeTableManagedBean(){\r\n\t\t\/\/ Populate Document Instances\r\n\t\tDocument doc01 = new Document(\"Primefaces Tutorial\",\"1\",\"Primefaces Company\");\t\r\n\t\tDocument doc02 = new Document(\"Hibernate Tutorial\",\"2\",\"JournalDev\");\r\n\t\t\/\/ Create Documents TreeNode\r\n\t\tTreeNode documents = new DefaultTreeNode(new Document(\"Documents\",\"0\",\"Documents\"), this.root);\r\n\t\t\/\/ Create Document TreeNode\r\n\t\tTreeNode document01 = new DefaultTreeNode(doc01, documents);\r\n\t\tTreeNode document02 = new DefaultTreeNode(doc02, documents);\r\n\t}\r\n\t\r\n\tpublic TreeNode getRoot() {\r\n\t\treturn root;\r\n\t}\r\n\r\n\tpublic void setRoot(TreeNode root) {\r\n\t\tthis.root = root;\r\n\t}\r\n\r\n\tpublic TreeNode getSingleSelectedNode() {\r\n\t\treturn singleSelectedNode;\r\n\t}\r\n\r\n\tpublic void setSingleSelectedNode(TreeNode singleSelectedNode) {\r\n\t\tthis.singleSelectedNode = singleSelectedNode;\r\n\t}\r\n\r\n\tpublic TreeNode[] getMultipleSelectedNodes() {\r\n\t\treturn multipleSelectedNodes;\r\n\t}\r\n\r\n\tpublic void setMultipleSelectedNodes(TreeNode[] multipleSelectedNodes) {\r\n\t\tthis.multipleSelectedNodes = multipleSelectedNodes;\r\n\t}\r\n\r\n\tpublic TreeNode[] getCheckboxSelectedNodes() {\r\n\t\treturn checkboxSelectedNodes;\r\n\t}\r\n\r\n\tpublic void setCheckboxSelectedNodes(TreeNode[] checkboxSelectedNodes) {\r\n\t\tthis.checkboxSelectedNodes = checkboxSelectedNodes;\r\n\t}\r\n\t\r\n\tpublic String viewSelectedNodes(){\r\n\t\tString message = \"You've selected documents :: \";\r\n\t\tmessage+=\"- \"+((Document)this.singleSelectedNode.getData()).getName()+\"\\n\";\r\n\t\tfor(TreeNode node : this.multipleSelectedNodes){\r\n\t\t\tmessage+=\"- \"+((Document)node.getData()).getName()+\"\\n\";\t\r\n\t\t}\r\n\t\tfor(TreeNode node : this.checkboxSelectedNodes){\r\n\t\t\tmessage+=\"- \"+((Document)node.getData()).getName()+\"\\n\";\t\r\n\t\t}\t\t\r\n\t\tFacesContext.getCurrentInstance().addMessage(null, new FacesMessage(message));\r\n\t\treturn \"\";\r\n\t}\r\n}\r\n<\/code><\/pre>\n
            \u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30bb\u30b9\u306eTreeTable – Ajax\u306e\u52d5\u4f5c\u30a4\u30d9\u30f3\u30c8\u3068\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u30e1\u30cb\u30e5\u30fc<\/h2>\n
            TreeTable\u306f\u3001\u3059\u3067\u306bTree\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u4ed8\u5c5e\u3057\u3066\u3044\u308bAjax\u306e\u6319\u52d5\u30a4\u30d9\u30f3\u30c8\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u3044\u307e\u3059\u3002\u4e00\u3064\u4f8b\u5916\u3068\u3057\u3066\u3001colResize\u3068\u3044\u3046\u30a4\u30d9\u30f3\u30c8\u304c\u3042\u308a\u3001\u5217\u304c\u30ea\u30b5\u30a4\u30ba\u3055\u308c\u305f\u3068\u304d\u306b\u767a\u751f\u3057\u307e\u3059\u3002\u307e\u305f\u3001ContextMenu\u306e\u4f7f\u7528\u65b9\u6cd5\u3082Tree\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u540c\u3058\u3067\u3059\u3002\u6b8b\u5ff5\u306a\u304c\u3089\u3001\u73fe\u5728\u4f7f\u7528\u3057\u3066\u3044\u308bPrimefaces 5.0\u306e\u7121\u6599\u7248\u306b\u306f\u3001\u5217\u306e\u30ea\u30b5\u30a4\u30ba\u30a4\u30d9\u30f3\u30c8\u3092\u660e\u793a\u7684\u306b\u805e\u304f\u306e\u3092\u59a8\u3052\u308b\u91cd\u8981\u306a\u554f\u984c\u304c\u3042\u308a\u307e\u3059\u304c\u3001\u3069\u306e\u3088\u3046\u306b\u3057\u3066\u305d\u306e\u3088\u3046\u306a\u30a4\u30d9\u30f3\u30c8\u3092\u805e\u304f\u304b\u3092\u77e5\u308b\u305f\u3081\u306b\u3001\u4ee5\u4e0b\u306e\u7c21\u5358\u306a\u4f8b\u304c\u63d0\u4f9b\u3055\u308c\u3066\u3044\u307e\u3059\uff1aindex9.xhtml\u30b3\u30fc\u30c9\uff1a<\/p>\n
            <html xmlns=\"https:\/\/www.w3.org\/1999\/xhtml\"\r\n\txmlns:ui=\"https:\/\/java.sun.com\/jsf\/facelets\"\r\n\txmlns:h=\"https:\/\/java.sun.com\/jsf\/html\"\r\n\txmlns:f=\"https:\/\/java.sun.com\/jsf\/core\"\r\n\txmlns:p=\"https:\/\/primefaces.org\/ui\">\r\n<h:head>\r\n\t<script name=\"jquery\/jquery.js\" library=\"primefaces\"><\/script>\r\n<\/h:head>\r\n<h:form>\t\t\t\t\t\t\t\r\n\t<p:treeTable value=\"#{treeTableManagedBean.root}\" var=\"node\" resizableColumns=\"true\">\r\n\t\t<p:column>\r\n\t\t\t<f:facet name=\"header\">\r\n\t\t\t\tName\r\n\t\t\t<\/f:facet>\r\n\t\t\t<h:outputText value=\"#{node.name}\"><\/h:outputText>\r\n\t\t<\/p:column>\r\n\t\t<p:column>\r\n\t\t\t<f:facet name=\"header\">\r\n\t\t\t\tAuthor\r\n\t\t\t<\/f:facet>\r\n\t\t\t<h:outputText value=\"#{node.author}\"><\/h:outputText>\r\n\t\t<\/p:column>\r\n\t\t<p:column>\r\n\t\t\t<f:facet name=\"header\">\r\n\t\t\t\tID\r\n\t\t\t<\/f:facet>\r\n\t\t\t<h:outputText value=\"#{node.id}\"><\/h:outputText>\r\n\t\t<\/p:column>\t\t\t\t\r\n\t\t<p:ajax event=\"colResize\" listener=\"#{treeTableManagedBean.colResizeListener}\"><\/p:ajax>\r\n\t<\/p:treeTable>\r\n<\/h:form>\r\n<\/html>\r\n<\/code><\/pre>\n
            \/\/ .. Some Required Code\r\n\tpublic void colResizeListener(ColumnResizeEvent e){\r\n\t\tString message =\"Column resize event is thrown\";\r\n\t\tFacesContext.getCurrentInstance().addMessage(null, new FacesMessage(message));\r\n\t}\r\n<\/code><\/pre>\n
            \u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30b7\u30ba\u306e\u30c4\u30ea\u30fc\u30c6\u30fc\u30d6\u30eb\u306e\u30bd\u30fc\u30c8\u6a5f\u80fd<\/h2>\n
            \u30b3\u30e9\u30e0\u30ec\u30d9\u30eb\u3067sortBy\u5f0f\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3067\u3001\u30bd\u30fc\u30c8\u6a5f\u80fd\u304c\u6709\u52b9\u306b\u306a\u308a\u307e\u3059\u3002index10.xhtml\u306e\u30b3\u30fc\u30c9\u3067\u3059\u3002<\/p>\n
            <html xmlns=\"https:\/\/www.w3.org\/1999\/xhtml\"\r\n\txmlns:ui=\"https:\/\/java.sun.com\/jsf\/facelets\"\r\n\txmlns:h=\"https:\/\/java.sun.com\/jsf\/html\"\r\n\txmlns:f=\"https:\/\/java.sun.com\/jsf\/core\"\r\n\txmlns:p=\"https:\/\/primefaces.org\/ui\">\r\n<h:head>\r\n\t<script name=\"jquery\/jquery.js\" library=\"primefaces\"><\/script>\r\n<\/h:head>\r\n<h:form>\t\t\t\t\t\t\t\r\n\t<p:treeTable value=\"#{treeTableManagedBean.root}\" var=\"node\">\r\n\t\t<p:column sortBy=\"#{node.name}\">\r\n\t\t\t<f:facet name=\"header\">\r\n\t\t\t\tName\r\n\t\t\t<\/f:facet>\r\n\t\t\t<h:outputText value=\"#{node.name}\"><\/h:outputText>\r\n\t\t<\/p:column>\r\n\t\t<p:column sortBy=\"#{node.author}\">\r\n\t\t\t<f:facet name=\"header\">\r\n\t\t\t\tAuthor\r\n\t\t\t<\/f:facet>\r\n\t\t\t<h:outputText value=\"#{node.author}\"><\/h:outputText>\r\n\t\t<\/p:column>\r\n\t\t<p:column sortBy=\"#{node.id}\">\r\n\t\t\t<f:facet name=\"header\">\r\n\t\t\t\tID\r\n\t\t\t<\/f:facet>\r\n\t\t\t<h:outputText value=\"#{node.id}\"><\/h:outputText>\r\n\t\t<\/p:column>\t\t\t\t\r\n\t<\/p:treeTable>\r\n<\/h:form>\r\n<\/html>\r\n<\/code><\/pre>\n
            \u30da\u30fc\u30b8\u306e\u30ed\u30fc\u30c9\u6642\u306bTreeTable\u3092\u30bd\u30fc\u30c8\u3057\u305f\u3044\u5834\u5408\u306f\u3001TreeTable\u306esortBy\u5c5e\u6027\u3092\u4f7f\u7528\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u30aa\u30d7\u30b7\u30e7\u30f3\u306esortOrder\u304a\u3088\u3073sortFunction\u5c5e\u6027\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u30bd\u30fc\u30c8\u9806\uff08\u6607\u9806\u307e\u305f\u306f\u964d\u9806\uff09\u3068\u5b9f\u969b\u306e\u30bd\u30fc\u30c8\u306b\u4f7f\u7528\u3059\u308bJava\u30e1\u30bd\u30c3\u30c9\u3092\u5b9a\u7fa9\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n
            \u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30bb\u30ba\u306e\u30c4\u30ea\u30fc\u3001\u30c8\u30ea\u30fc\u30ce\u30fc\u30c9\u3001\u30c4\u30ea\u30fc\u30c6\u30fc\u30d6\u30eb\u306e\u30b5\u30de\u30ea\u30fc<\/h2>\n
            \u30c4\u30ea\u30fc\u3068\u30c4\u30ea\u30fc\u30c6\u30fc\u30d6\u30eb\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u3001\u968e\u5c64\u7684\u306a\u69cb\u9020\u306e\u30c7\u30fc\u30bf\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306b\u983b\u7e41\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002\u3053\u308c\u3089\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u9069\u5207\u306a\u4f7f\u7528\u65b9\u6cd5\u3068\u5fc5\u8981\u306a\u4e3b\u8981\u306a\u5c5e\u6027\u306b\u3064\u3044\u3066\u5b66\u3073\u307e\u3057\u305f\u3002\u4ee5\u4e0b\u306b\u30b3\u30e1\u30f3\u30c8\u3057\u3066\u3054\u5354\u529b\u304f\u3060\u3055\u3044\u3002\u307e\u305f\u3001\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u306f\u4ee5\u4e0b\u304b\u3089\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u3066\u3054\u5229\u7528\u3044\u305f\u3060\u3051\u307e\u3059\u3002<\/p>\n
            \u300cPrimeFaces Tree\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u3066\u304f\u3060\u3055\u3044\u300d<\/p>\n","protected":false},"excerpt":{"rendered":"
            \u968e\u5c64\u30c7\u30fc\u30bf\u3092\u8868\u793a\u3057\u3001\u30b5\u30a4\u30c8\u306e\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306b\u3001Primefaces\u306fTree\u3068TreeTable\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u63d0\u4f9b\u3057\u3066\u3044\u307e\u3059\u3002\u3053\u308c\u3089\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u6d3b\u7528\u3059\u308b\u306e\u306f\u5bb9\u6613\u3067\u306f\u306a\u304f\u3001\u591a\u304f\u306e\u6280\u8853\u7684\u306a\u8a73\u7d30\u304c\u5fc5\u8981\u3067 […]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[26,61],"class_list":["post-399","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-26","tag-61"],"yoast_head":"\n\u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30bb\u30b9\u306e\u30c4\u30ea\u30fc\u3001\u30c4\u30ea\u30fc\u30ce\u30fc\u30c9\u3001\u30c4\u30ea\u30fc\u30c6\u30fc\u30d6\u30eb\u306e\u4f8b\u3068\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb - Blog - Silicon Cloud<\/title>\n<meta name=\"description\" content=\"\u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30bb\u30b9\u306e\u30c4\u30ea\u30fc\u30c4\u30ea\u30fc\u30ce\u30fc\u30c9\u30c4\u30ea\u30fc\u30c6\u30fc\u30d6\u30eb\u306e\u4f8b\u3068\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/ja\/blog\/\u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30bb\u30b9\u306e\u30c4\u30ea\u30fc\u3001\u30c4\u30ea\u30fc\u30ce\u30fc\u30c9\u3001\u30c4\/\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30bb\u30b9\u306e\u30c4\u30ea\u30fc\u3001\u30c4\u30ea\u30fc\u30ce\u30fc\u30c9\u3001\u30c4\u30ea\u30fc\u30c6\u30fc\u30d6\u30eb\u306e\u4f8b\u3068\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\" \/>\n<meta property=\"og:description\" content=\"\u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30bb\u30b9\u306e\u30c4\u30ea\u30fc\u30c4\u30ea\u30fc\u30ce\u30fc\u30c9\u30c4\u30ea\u30fc\u30c6\u30fc\u30d6\u30eb\u306e\u4f8b\u3068\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/ja\/blog\/\u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30bb\u30b9\u306e\u30c4\u30ea\u30fc\u3001\u30c4\u30ea\u30fc\u30ce\u30fc\u30c9\u3001\u30c4\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-25T08:41:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-31T14:17:14+00:00\" \/>\n<meta name=\"author\" content=\"\u685c, \u6625\u6a39\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u57f7\u7b46\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u685c, \u6625\u6a39\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"105\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/%e3%83%97%e3%83%a9%e3%82%a4%e3%83%a0%e3%83%95%e3%82%a7%e3%82%a4%e3%82%bb%e3%82%b9%e3%81%ae%e3%83%84%e3%83%aa%e3%83%bc%e3%80%81%e3%83%84%e3%83%aa%e3%83%bc%e3%83%8e%e3%83%bc%e3%83%89%e3%80%81%e3%83%84\/\",\"url\":\"https:\/\/www.silicloud.com\/ja\/blog\/%e3%83%97%e3%83%a9%e3%82%a4%e3%83%a0%e3%83%95%e3%82%a7%e3%82%a4%e3%82%bb%e3%82%b9%e3%81%ae%e3%83%84%e3%83%aa%e3%83%bc%e3%80%81%e3%83%84%e3%83%aa%e3%83%bc%e3%83%8e%e3%83%bc%e3%83%89%e3%80%81%e3%83%84\/\",\"name\":\"\u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30bb\u30b9\u306e\u30c4\u30ea\u30fc\u3001\u30c4\u30ea\u30fc\u30ce\u30fc\u30c9\u3001\u30c4\u30ea\u30fc\u30c6\u30fc\u30d6\u30eb\u306e\u4f8b\u3068\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/#website\"},\"datePublished\":\"2023-10-25T08:41:25+00:00\",\"dateModified\":\"2025-07-31T14:17:14+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/ff22288af1a5455571aff7586b0fb341\"},\"description\":\"\u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30bb\u30b9\u306e\u30c4\u30ea\u30fc\u30c4\u30ea\u30fc\u30ce\u30fc\u30c9\u30c4\u30ea\u30fc\u30c6\u30fc\u30d6\u30eb\u306e\u4f8b\u3068\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/%e3%83%97%e3%83%a9%e3%82%a4%e3%83%a0%e3%83%95%e3%82%a7%e3%82%a4%e3%82%bb%e3%82%b9%e3%81%ae%e3%83%84%e3%83%aa%e3%83%bc%e3%80%81%e3%83%84%e3%83%aa%e3%83%bc%e3%83%8e%e3%83%bc%e3%83%89%e3%80%81%e3%83%84\/#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/ja\/blog\/%e3%83%97%e3%83%a9%e3%82%a4%e3%83%a0%e3%83%95%e3%82%a7%e3%82%a4%e3%82%bb%e3%82%b9%e3%81%ae%e3%83%84%e3%83%aa%e3%83%bc%e3%80%81%e3%83%84%e3%83%aa%e3%83%bc%e3%83%8e%e3%83%bc%e3%83%89%e3%80%81%e3%83%84\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/%e3%83%97%e3%83%a9%e3%82%a4%e3%83%a0%e3%83%95%e3%82%a7%e3%82%a4%e3%82%bb%e3%82%b9%e3%81%ae%e3%83%84%e3%83%aa%e3%83%bc%e3%80%81%e3%83%84%e3%83%aa%e3%83%bc%e3%83%8e%e3%83%bc%e3%83%89%e3%80%81%e3%83%84\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/ja\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30bb\u30b9\u306e\u30c4\u30ea\u30fc\u3001\u30c4\u30ea\u30fc\u30ce\u30fc\u30c9\u3001\u30c4\u30ea\u30fc\u30c6\u30fc\u30d6\u30eb\u306e\u4f8b\u3068\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/ja\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"ja\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/ff22288af1a5455571aff7586b0fb341\",\"name\":\"\u685c, \u6625\u6a39\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cee48863f3d4fd7fef222498f3e71b82312aee42b7257a2dbde56394ca4e19de?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cee48863f3d4fd7fef222498f3e71b82312aee42b7257a2dbde56394ca4e19de?s=96&d=mm&r=g\",\"caption\":\"\u685c, \u6625\u6a39\"},\"url\":\"https:\/\/www.silicloud.com\/ja\/blog\/author\/sakuraharuki\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/%e3%83%97%e3%83%a9%e3%82%a4%e3%83%a0%e3%83%95%e3%82%a7%e3%82%a4%e3%82%bb%e3%82%b9%e3%81%ae%e3%83%84%e3%83%aa%e3%83%bc%e3%80%81%e3%83%84%e3%83%aa%e3%83%bc%e3%83%8e%e3%83%bc%e3%83%89%e3%80%81%e3%83%84\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30bb\u30b9\u306e\u30c4\u30ea\u30fc\u3001\u30c4\u30ea\u30fc\u30ce\u30fc\u30c9\u3001\u30c4\u30ea\u30fc\u30c6\u30fc\u30d6\u30eb\u306e\u4f8b\u3068\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb - Blog - Silicon Cloud","description":"\u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30bb\u30b9\u306e\u30c4\u30ea\u30fc\u30c4\u30ea\u30fc\u30ce\u30fc\u30c9\u30c4\u30ea\u30fc\u30c6\u30fc\u30d6\u30eb\u306e\u4f8b\u3068\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/ja\/blog\/\u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30bb\u30b9\u306e\u30c4\u30ea\u30fc\u3001\u30c4\u30ea\u30fc\u30ce\u30fc\u30c9\u3001\u30c4\/","og_locale":"ja_JP","og_type":"article","og_title":"\u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30bb\u30b9\u306e\u30c4\u30ea\u30fc\u3001\u30c4\u30ea\u30fc\u30ce\u30fc\u30c9\u3001\u30c4\u30ea\u30fc\u30c6\u30fc\u30d6\u30eb\u306e\u4f8b\u3068\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb","og_description":"\u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30bb\u30b9\u306e\u30c4\u30ea\u30fc\u30c4\u30ea\u30fc\u30ce\u30fc\u30c9\u30c4\u30ea\u30fc\u30c6\u30fc\u30d6\u30eb\u306e\u4f8b\u3068\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002","og_url":"https:\/\/www.silicloud.com\/ja\/blog\/\u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30bb\u30b9\u306e\u30c4\u30ea\u30fc\u3001\u30c4\u30ea\u30fc\u30ce\u30fc\u30c9\u3001\u30c4\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-10-25T08:41:25+00:00","article_modified_time":"2025-07-31T14:17:14+00:00","author":"\u685c, \u6625\u6a39","twitter_card":"summary_large_image","twitter_misc":{"\u57f7\u7b46\u8005":"\u685c, \u6625\u6a39","\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"105\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/ja\/blog\/%e3%83%97%e3%83%a9%e3%82%a4%e3%83%a0%e3%83%95%e3%82%a7%e3%82%a4%e3%82%bb%e3%82%b9%e3%81%ae%e3%83%84%e3%83%aa%e3%83%bc%e3%80%81%e3%83%84%e3%83%aa%e3%83%bc%e3%83%8e%e3%83%bc%e3%83%89%e3%80%81%e3%83%84\/","url":"https:\/\/www.silicloud.com\/ja\/blog\/%e3%83%97%e3%83%a9%e3%82%a4%e3%83%a0%e3%83%95%e3%82%a7%e3%82%a4%e3%82%bb%e3%82%b9%e3%81%ae%e3%83%84%e3%83%aa%e3%83%bc%e3%80%81%e3%83%84%e3%83%aa%e3%83%bc%e3%83%8e%e3%83%bc%e3%83%89%e3%80%81%e3%83%84\/","name":"\u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30bb\u30b9\u306e\u30c4\u30ea\u30fc\u3001\u30c4\u30ea\u30fc\u30ce\u30fc\u30c9\u3001\u30c4\u30ea\u30fc\u30c6\u30fc\u30d6\u30eb\u306e\u4f8b\u3068\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/ja\/blog\/#website"},"datePublished":"2023-10-25T08:41:25+00:00","dateModified":"2025-07-31T14:17:14+00:00","author":{"@id":"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/ff22288af1a5455571aff7586b0fb341"},"description":"\u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30bb\u30b9\u306e\u30c4\u30ea\u30fc\u30c4\u30ea\u30fc\u30ce\u30fc\u30c9\u30c4\u30ea\u30fc\u30c6\u30fc\u30d6\u30eb\u306e\u4f8b\u3068\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/ja\/blog\/%e3%83%97%e3%83%a9%e3%82%a4%e3%83%a0%e3%83%95%e3%82%a7%e3%82%a4%e3%82%bb%e3%82%b9%e3%81%ae%e3%83%84%e3%83%aa%e3%83%bc%e3%80%81%e3%83%84%e3%83%aa%e3%83%bc%e3%83%8e%e3%83%bc%e3%83%89%e3%80%81%e3%83%84\/#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/ja\/blog\/%e3%83%97%e3%83%a9%e3%82%a4%e3%83%a0%e3%83%95%e3%82%a7%e3%82%a4%e3%82%bb%e3%82%b9%e3%81%ae%e3%83%84%e3%83%aa%e3%83%bc%e3%80%81%e3%83%84%e3%83%aa%e3%83%bc%e3%83%8e%e3%83%bc%e3%83%89%e3%80%81%e3%83%84\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/ja\/blog\/%e3%83%97%e3%83%a9%e3%82%a4%e3%83%a0%e3%83%95%e3%82%a7%e3%82%a4%e3%82%bb%e3%82%b9%e3%81%ae%e3%83%84%e3%83%aa%e3%83%bc%e3%80%81%e3%83%84%e3%83%aa%e3%83%bc%e3%83%8e%e3%83%bc%e3%83%89%e3%80%81%e3%83%84\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/ja\/blog\/"},{"@type":"ListItem","position":2,"name":"\u30d7\u30e9\u30a4\u30e0\u30d5\u30a7\u30a4\u30bb\u30b9\u306e\u30c4\u30ea\u30fc\u3001\u30c4\u30ea\u30fc\u30ce\u30fc\u30c9\u3001\u30c4\u30ea\u30fc\u30c6\u30fc\u30d6\u30eb\u306e\u4f8b\u3068\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/ja\/blog\/#website","url":"https:\/\/www.silicloud.com\/ja\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"ja"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/ff22288af1a5455571aff7586b0fb341","name":"\u685c, \u6625\u6a39","image":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cee48863f3d4fd7fef222498f3e71b82312aee42b7257a2dbde56394ca4e19de?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cee48863f3d4fd7fef222498f3e71b82312aee42b7257a2dbde56394ca4e19de?s=96&d=mm&r=g","caption":"\u685c, \u6625\u6a39"},"url":"https:\/\/www.silicloud.com\/ja\/blog\/author\/sakuraharuki\/"},{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/www.silicloud.com\/ja\/blog\/%e3%83%97%e3%83%a9%e3%82%a4%e3%83%a0%e3%83%95%e3%82%a7%e3%82%a4%e3%82%bb%e3%82%b9%e3%81%ae%e3%83%84%e3%83%aa%e3%83%bc%e3%80%81%e3%83%84%e3%83%aa%e3%83%bc%e3%83%8e%e3%83%bc%e3%83%89%e3%80%81%e3%83%84\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/posts\/399","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/comments?post=399"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/posts\/399\/revisions"}],"predecessor-version":[{"id":40101,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/posts\/399\/revisions\/40101"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/media?parent=399"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/categories?post=399"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/tags?post=399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}