[ H e p o n ' s T r i c k C u b e J a v a ]


[ x:tree2 ]

■2005/9/14
　Hepon

■環境：JSF1.1
　　　　MyFaces1.0.9
　　　　WindowsXP
　　　　ExadelStudioPro3.0.3

■今回x:tree2を使うにあたって、JSPの頭に記述しているMyFacesのtaglibを、
　<%@ taglib uri="http://myfaces.sourceforge.net/tld/myfaces_ext_0_9.tld" prefix="x" %>
　から、
　<%@ taglib uri="http://myfaces.apache.org/extensions" prefix="x"%>
　に変更しました。
　もとのtaglibだと、tree2がunknown tagとかなんとか出ていたので。
　
　また、それにともなって、
　myfaces-extensions.jar
　をlibに追加しました。
　
■また、今回、index.jspのつくりが、x:treeのサンプルと違います。
　x:treeのサンプルでは
　<jsp:forward page="/pages/tree.jsf" />
　としていた所を、
　<a href="pages/tree2.jsf">サンプルへ</a>
　に変えました。
　
　なぜこのようにしたかというと、
　jsp:forwardを使うと、index.jspがWebContent直下にあるので、
　tree2.jsfの現在位置がWebContent直下になってしまいます。
　そして、なんらかのアクションを起こすと、
　今度は現在位置がWebContent/pages/に移動します。
　すると、相対的に画像の場所を指定している為に、
　現在位置が移動すると画像が出なくなるので、
　とりあえず最初に、pagesの下に現在位置を移動させてしまうことにしたのです。
　
■それからもうひとつ。
　サーバー側で処理を行うツリーをh:formで囲むと、
　なぜか処理がおかしくなります。
　「 + 」を押してもツリーが開かなくなるのです。
　なので、とりあえず囲まないで作成しています。
　
■時間があれば後で解説を記述します。
　ひとまず画面写真とソースをどうぞ。

★Tree2Bean.java


package demo;

import org.apache.myfaces.custom.tree2.TreeNode;
import org.apache.myfaces.custom.tree2.TreeNodeBase;

public class Tree2Bean {
    
    private TreeNode tree2;
    
    //コンストラクタ
    public Tree2Bean() {
        tree2 = new TreeNodeBase("folder-B", "ROOT", true);
        
        //分類01：和食
        TreeNodeBase personNode = new TreeNodeBase("folder-A", "分類01：和食", true);
            //ぶっかけめし
            personNode.getChildren().add(new TreeNodeBase("folder-B", "ぶっかけめし", true));
            //うどん
            TreeNodeBase folderNode = new TreeNodeBase("folder-B", "うどん", true);
                folderNode.getChildren().add(new TreeNodeBase("document", "カレーうどん", false));
                folderNode.getChildren().add(new TreeNodeBase("document", "味噌煮込み", false));
                folderNode.getChildren().add(new TreeNodeBase("document", "あんかけうどん", false));
            personNode.getChildren().add(folderNode);
            //そば
            folderNode = new TreeNodeBase("folder-B", "そば", true);
                folderNode.getChildren().add(new TreeNodeBase("document", "納豆おろしそば", false));
                folderNode.getChildren().add(new TreeNodeBase("document", "とろろそば", false));
                folderNode.getChildren().add(new TreeNodeBase("document", "天ぷらそば", false));
                folderNode.getChildren().add(new TreeNodeBase("document", "わかめそば", false));
            personNode.getChildren().add(folderNode);
            
            tree2.getChildren().add(personNode);

        //分類02：その他
        personNode = new TreeNodeBase("folder-A", "分類02：その他", true);
            //イタリアン
            personNode.getChildren().add(new TreeNodeBase("folder-B", "イタリアン", true));
            //中華
            folderNode = new TreeNodeBase("folder-B", "中華", true);
                folderNode.getChildren().add(new TreeNodeBase("document", "麻婆豆腐", false));
                folderNode.getChildren().add(new TreeNodeBase("document", "棒々鶏", false));
                folderNode.getChildren().add(new TreeNodeBase("document", "青椒肉絲", false));
            personNode.getChildren().add(folderNode);

            tree2.getChildren().add(personNode);
    }

    public TreeNode getTree2(){
        return tree2;
    }
    public void setTree2(TreeNode tree2) {
        this.tree2 = tree2;
    }
}

★tree2.jsp


<%@ page contentType="text/html;charset=MS932" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://myfaces.apache.org/extensions" prefix="x"%>

<!-- ********************* -->

<HTML>
    <HEAD>
        <title>x:tree2 サンプル</title>
    </HEAD>
    <body bgcolor="white">
    
    <f:view>
    
    <!-- ********************* -->
    
        <h1><h:outputText value="x:tree2 サンプル"/></h1>
        <h:outputText value="2005/9/14/Wed/Hepon"/><br>
        <br>
        
        <!-- ↓ツリー↓ -->
        
        <h:outputText value="クライアント側で処理を行うツリー"/><br>
        <x:tree2 value="#{Tree2Bean.tree2}" id="client-tree" var="node" varNodeToggler="t">
          <f:facet name="folder-A">
            <h:panelGroup>
              <f:facet name="expand">
                <h:graphicImage style="border: 0px" value="../images/yellow-folder-open.png" rendered="#{t.nodeExpanded}"/>
              </f:facet>
              <f:facet name="collapse">
                <h:graphicImage style="border: 0px" value="../images/yellow-folder-closed.png" rendered="#{!t.nodeExpanded}"/>
              </f:facet>
              <h:outputText value="#{node.description}"/>
            </h:panelGroup>
          </f:facet>
          <f:facet name="folder-B">
            <h:panelGroup>
              <f:facet name="expand">
                <h:graphicImage style="border: 0px" value="../images/yellow-folder-open.png" rendered="#{t.nodeExpanded}"/>
              </f:facet>
              <f:facet name="collapse">
                <h:graphicImage style="border: 0px" value="../images/yellow-folder-closed.png" rendered="#{!t.nodeExpanded}"/>
              </f:facet>
              <h:outputText value="#{node.description}" />
              <h:outputText value=" (#{node.childCount})" rendered="#{!empty node.children}"/>
            </h:panelGroup>
          </f:facet>
          <f:facet name="document">
            <h:panelGroup>
              <h:commandLink immediate="true" >
                <h:graphicImage style="border: 0px" value="../images/document.png" />
                <h:outputText value="#{node.description}"/>
              </h:commandLink>
            </h:panelGroup>
          </f:facet>
        </x:tree2>
        <br>

        <h:outputText value="サーバー側で処理を行うツリー"/><br>
        <x:tree2 value="#{Tree2Bean.tree2}" id="server-tree" var="node" varNodeToggler="t" clientSideToggle="false">
          <f:facet name="folder-A">
            <h:panelGroup>
              <h:commandLink immediate="true" action="#{t.toggleExpanded}">
                <h:graphicImage style="border: 0px" value="../images/yellow-folder-open.png" rendered="#{t.nodeExpanded}" />
                <h:graphicImage style="border: 0px" value="../images/yellow-folder-closed.png" rendered="#{!t.nodeExpanded}"/>
              </h:commandLink>
              <h:outputText value="#{node.description}" />
            </h:panelGroup>
          </f:facet>
          <f:facet name="folder-B">
            <h:panelGroup>
              <h:commandLink immediate="true" action="#{t.toggleExpanded}">
                <h:graphicImage style="border: 0px" value="../images/yellow-folder-open.png" rendered="#{t.nodeExpanded}"/>
                <h:graphicImage style="border: 0px" value="../images/yellow-folder-closed.png" rendered="#{!t.nodeExpanded}"/>
              </h:commandLink>
              <h:outputText value="#{node.description}" />
              <h:outputText value=" (#{node.childCount})" rendered="#{!empty node.children}"/>
            </h:panelGroup>
          </f:facet>
          <f:facet name="document">
            <h:panelGroup>
              <h:commandLink immediate="true" >
                <h:graphicImage style="border: 0px" value="../images/document.png"/>
                <h:outputText value="#{node.description}"/>
              </h:commandLink>
            </h:panelGroup>
          </f:facet>
        </x:tree2>
        
    <!-- ********************* -->
    
    </f:view>
    
    </body>
</HTML>

★index.jsp


<%@ page contentType="text/html;charset=MS932" %>
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

<html>
<head>
</head>
<body>
    <a href="pages/tree2.jsf">サンプルへ</a>
</body>
</html>

★web.xml


<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
 <display-name>htc008</display-name>
 <context-param>
  <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
  <param-value>server</param-value>
 </context-param>
 <context-param>
  <param-name>javax.faces.CONFIG_FILES</param-name>
  <param-value>/WEB-INF/faces-config.xml</param-value>
 </context-param>
 
    <context-param>
        <param-name>org.apache.myfaces.ALLOW_JAVASCRIPT</param-name>
        <param-value>true</param-value>
    </context-param>
    
    <context-param>
        <param-name>org.apache.myfaces.DETECT_JAVASCRIPT</param-name>
        <param-value>false</param-value>
    </context-param>

    <context-param>
        <param-name>org.apache.myfaces.PRETTY_HTML</param-name>
        <param-value>true</param-value>
    </context-param>

    <context-param>
        <param-name>org.apache.myfaces.AUTO_SCROLL</param-name>
        <param-value>true</param-value>
    </context-param>
   
    <filter>
        <filter-name>extensionsFilter</filter-name>
        <filter-class>org.apache.myfaces.component.html.util.ExtensionsFilter</filter-class>
        <init-param>
            <param-name>uploadMaxFileSize</param-name>
            <param-value>100m</param-value>
        </init-param>
        <init-param>
            <param-name>uploadThresholdSize</param-name>
            <param-value>100k</param-value>
        </init-param>
    </filter>
    
    <filter-mapping>
        <filter-name>extensionsFilter</filter-name>
        <url-pattern>*.jsf</url-pattern>
    </filter-mapping>
    <filter-mapping>
        <filter-name>extensionsFilter</filter-name>
        <url-pattern>/faces/*</url-pattern>
    </filter-mapping>
 
    <!-- Listener, that does all the startup work (configuration, init). -->
    <listener>
        <listener-class>org.apache.myfaces.webapp.StartupServletContextListener</listener-class>
    </listener>
 
 <servlet>
  <servlet-name>Faces Servlet</servlet-name>
  <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
  <load-on-startup>1</load-on-startup>
 </servlet>
 <servlet-mapping>
  <servlet-name>Faces Servlet</servlet-name>
  <url-pattern>*.jsf</url-pattern>
 </servlet-mapping>
 
    <!-- Welcome files -->

    <welcome-file-list>
        <welcome-file>index.jsf</welcome-file>
        <welcome-file>index.jsp</welcome-file>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
 
</web-app>

★faces-config.xml


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"
                              "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">
<faces-config>
 <managed-bean>
  <managed-bean-name>Tree2Bean</managed-bean-name>
  <managed-bean-class>demo.Tree2Bean</managed-bean-class>
  <managed-bean-scope>session</managed-bean-scope>
 </managed-bean>
 <lifecycle/>
 <application>
  <locale-config/>
 </application>
 <factory/>
</faces-config>