GWT-CellTreeウィジェット

前書き

*CellTree* ウィジェットは、ツリーのビューを表します。

クラス宣言

以下は、 com.google.gwt.user.cellview.client.CellTree クラスの宣言です-

public class CellTree
   extends AbstractCellTree
      implements HasAnimation, Focusable

クラスコンストラクター

Sr.No.

Constructor & Description

1

CellTree(TreeViewModel viewModel, T rootValue)

新しいCellTreeを構築します。

2

CellTree(TreeViewModel viewModel, T rootValue, CellTree.Resources resources)

新しいCellTreeを構築します。

クラスメソッド

Sr.No.	Function name & Description
1	protected char getAccessKey() アクセスキーを取得します。
2	CellTree.NodeAnimation getAnimation() アニメーションが有効な場合、このツリーのノードを開閉するために使用されるアニメーションを取得します。
3	int getDefaultNodeSize() 各ツリーノードの下に表示する子のデフォルトの最大数を取得します。
4	TreeNode getRootTreeNode() ルートTreeNodeを取得します。
5	int getTabIndex() タブインデックス内のウィジェットの位置を取得します。
6	boolean isAnimationEnabled() アニメーションが有効な場合はtrue、有効でない場合はfalseを返します。
7	protected void onBlur() キーボードで選択されたノードがフォーカスを失ったときに呼び出されます。
8	void onBrowserEvent(Event event) ブラウザイベントが受信されるたびに発生します。
9	protected void onFocus() キーボードで選択されたノードがフォーカスを取得すると呼び出されます。
10	void setAccessKey(char key) ウィジェットの「アクセスキー」を設定します。
11	void setAnimation(CellTree.NodeAnimation animation) このツリーのノードの開閉に使用されるアニメーションを設定します。
12	void setAnimationEnabled(boolean enable) アニメーションを有効または無効にします。
13	void setDefaultNodeSize(int defaultNodeSize) 各子ノードの下に表示するデフォルトの子の数を設定します。
14	void setFocus(boolean focused) このウィジェットを明示的にフォーカス/フォーカス解除します。
15	void setTabIndex(int index) タブインデックスでのウィジェットの位置を設定します。

継承されるメソッド

このクラスは、次のクラスからメソッドを継承します-

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
com.google.gwt.user.client.ui.Composite
com.google.gwt.user.cellview.client.AbstractCellTree
java.lang.Object

CellTreeウィジェットの例

この例では、GWTのCellTreeウィジェットの使用法を示す簡単な手順を紹介します。次の手順に従って、_GWTで作成したGWTアプリケーションを更新します-アプリケーションの作成_の章-

Step	Description
1	Create a project with a name HelloWorld under a package com.finddevguides as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorldl and HelloWorld.java as explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

以下は、変更されたモジュール記述子 src/com.finddevguides/HelloWorld.gwt.xml の内容です。

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.finddevguides.client.HelloWorld'/>

   <!-- Specify the paths for translatable code                    -->
   <source path ='client'/>
   <source path = 'shared'/>

</module>

以下は、変更されたスタイルシートファイル war/HelloWorld.css の内容です。

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

以下は、変更されたHTMLホストファイル war/HelloWorldl の内容です。

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>CellTree Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

CellTreeウィジェットの使用法を示すJavaファイル src/com.finddevguides/HelloWorld.java の内容を見てみましょう。

package com.finddevguides.client;

import java.util.ArrayList;
import java.util.List;

import com.google.gwt.cell.client.AbstractCell;
import com.google.gwt.cell.client.Cell;
import com.google.gwt.cell.client.TextCell;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import com.google.gwt.user.cellview.client.CellTree;
import com.google.gwt.user.cellview.client.
HasKeyboardSelectionPolicy.KeyboardSelectionPolicy;
import com.google.gwt.user.cellview.client.TreeNode;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.view.client.ListDataProvider;
import com.google.gwt.view.client.SingleSelectionModel;
import com.google.gwt.view.client.TreeViewModel;

public class HelloWorld implements EntryPoint {

  /**
 *A list of songs.
   */

   private static class Playlist {
     private final String name;
     private final List<String> songs = new ArrayList<String>();

     public Playlist(String name) {
       this.name = name;
     }

     /**
 *Add a song to the playlist.
      *
 *@param name the name of the song
      */

      public void addSong(String name) {
         songs.add(name);
      }

      public String getName() {
         return name;
      }

     /**
 *Return the list of songs in the playlist.
      */

      public List<String> getSongs() {
         return songs;
      }
   }

  /**
 *A composer of classical music.
   */

   private static class Composer {
      private final String name;
      private final List<Playlist> playlists = new ArrayList<Playlist>();

      public Composer(String name) {
         this.name = name;
      }

     /**
 *Add a playlist to the composer.
      *
 *@param playlist the playlist to add
      */

      public Playlist addPlaylist(Playlist playlist) {
         playlists.add(playlist);
         return playlist;
      }

      public String getName() {
         return name;
      }

     /**
 *Return the rockin' playlist for this composer.
      */

      public List<Playlist> getPlaylists() {
         return playlists;
      }
   }

  /**
 *The model that defines the nodes in the tree.
   */
   private static class CustomTreeModel implements TreeViewModel {

   private final List<Composer> composers;

  /**
 *This selection model is shared across all leaf nodes.
   * A selection model can also be shared across all nodes
 *in the tree, or each set of child nodes can have
   * its own instance. This gives you flexibility to
 *determine how nodes are selected.
   */
   private final SingleSelectionModel<String> selectionModel
   = new SingleSelectionModel<String>();

      public CustomTreeModel() {
        //Create a database of information.
         composers = new ArrayList<Composer>();

        //Add compositions by Beethoven.
         {
            Composer beethoven = new Composer("Beethoven");
            composers.add(beethoven);

            Playlist concertos = beethoven.addPlaylist(
            new Playlist("Concertos"));
            concertos.addSong("No. 1 - C");
            concertos.addSong("No. 2 - B-Flat Major");
            concertos.addSong("No. 3 - C Minor");
            concertos.addSong("No. 4 - G Major");
            concertos.addSong("No. 5 - E-Flat Major");

            Playlist quartets = beethoven.addPlaylist(
            new Playlist("Quartets"));
            quartets.addSong("Six String Quartets");
            quartets.addSong("Three String Quartets");
            quartets.addSong("Grosse Fugue for String Quartets");

            Playlist sonatas = beethoven.addPlaylist(
            new Playlist("Sonatas"));
            sonatas.addSong("Sonata in A Minor");
            sonatas.addSong("Sonata in F Major");

            Playlist symphonies = beethoven.addPlaylist(
            new Playlist("Symphonies"));
            symphonies.addSong("No. 2 - D Major");
            symphonies.addSong("No. 2 - D Major");
            symphonies.addSong("No. 3 - E-Flat Major");
            symphonies.addSong("No. 4 - B-Flat Major");
            symphonies.addSong("No. 5 - C Minor");
            symphonies.addSong("No. 6 - F Major");
            symphonies.addSong("No. 7 - A Major");
            symphonies.addSong("No. 8 - F Major");
            symphonies.addSong("No. 9 - D Minor");
         }

        //Add compositions by Brahms.
         {
            Composer brahms = new Composer("Brahms");
            composers.add(brahms);
            Playlist concertos = brahms.addPlaylist(
            new Playlist("Concertos"));
            concertos.addSong("Violin Concerto");
            concertos.addSong("Double Concerto - A Minor");
            concertos.addSong("Piano Concerto No. 1 - D Minor");
            concertos.addSong("Piano Concerto No. 2 - B-Flat Major");

            Playlist quartets = brahms.addPlaylist(
            new Playlist("Quartets"));
            quartets.addSong("Piano Quartet No. 1 - G Minor");
            quartets.addSong("Piano Quartet No. 2 - A Major");
            quartets.addSong("Piano Quartet No. 3 - C Minor");
            quartets.addSong("String Quartet No. 3 - B-Flat Minor");

            Playlist sonatas = brahms.addPlaylist(
            new Playlist("Sonatas"));
            sonatas.addSong("Two Sonatas for Clarinet - F Minor");
            sonatas.addSong("Two Sonatas for Clarinet - E-Flat Major");

            Playlist symphonies = brahms.addPlaylist(
            new Playlist("Symphonies"));
            symphonies.addSong("No. 1 - C Minor");
            symphonies.addSong("No. 2 - D Minor");
            symphonies.addSong("No. 3 - F Major");
            symphonies.addSong("No. 4 - E Minor");
         }

        //Add compositions by Mozart.
         {
            Composer mozart = new Composer("Mozart");
            composers.add(mozart);
            Playlist concertos = mozart.addPlaylist(
            new Playlist("Concertos"));
            concertos.addSong("Piano Concerto No. 12");
            concertos.addSong("Piano Concerto No. 17");
            concertos.addSong("Clarinet Concerto");
            concertos.addSong("Violin Concerto No. 5");
            concertos.addSong("Violin Concerto No. 4");
         }
      }

     /**
 *Get the {@link NodeInfo} that provides the children of the
      * specified value.
       */

      public <T> NodeInfo<?> getNodeInfo(T value) {
         if (value == null) {
           //LEVEL 0.
           //We passed null as the root value. Return the composers.

           //Create a data provider that contains the list of composers.
            ListDataProvider<Composer> dataProvider
            = new ListDataProvider<HelloWorld.Composer>(
            composers);

           //Create a cell to display a composer.
            Cell<HelloWorld.Composer> cell
            = new AbstractCell<HelloWorld.Composer>() {
               @Override
               public void render(Composer value, Object key,
               SafeHtmlBuilder sb) {
                  if (value != null) {
                     sb.appendHtmlConstant("    ");
                     sb.appendEscaped(value.getName());
                  }
               }
            };

           //Return a node info that pairs the data provider and the cell.
            return new DefaultNodeInfo<Composer>(dataProvider, cell);
         } else if (value instanceof Composer) {

           //LEVEL 1.
           //We want the children of the composer. Return the playlists.
            ListDataProvider<HelloWorld.Playlist> dataProvider
            = new ListDataProvider<HelloWorld.Playlist>(
            ((Composer) value).getPlaylists());
            Cell<HelloWorld.Playlist> cell =
            new AbstractCell<HelloWorld.Playlist>() {
               @Override
               public void render(Playlist value, Object key, SafeHtmlBuilder sb) {
                  if (value != null) {
                     sb.appendHtmlConstant("    ");
                     sb.appendEscaped(value.getName());
                  }
               }
            };
            return new DefaultNodeInfo<Playlist>(dataProvider, cell);
         } else if (value instanceof Playlist) {
           //LEVEL 2 - LEAF.
           //We want the children of the playlist. Return the songs.
            ListDataProvider<String> dataProvider
            = new ListDataProvider<String>(
            ((Playlist) value).getSongs());

           //Use the shared selection model.
            return new DefaultNodeInfo<String>(dataProvider, new TextCell(),
            selectionModel, null);
         }

         return null;
      }

     /**
 *Check if the specified value represents a leaf node.
      * Leaf nodes cannot be opened.
       */
      public boolean isLeaf(Object value) {

     //The leaf nodes are the songs, which are Strings.
      if (value instanceof String) {
         return true;
      }

      return false;
      }
   }

   public void onModuleLoad() {

     //Create a model for the tree.
      TreeViewModel model = new CustomTreeModel();
     //Get CellTree style using its BasicResources
     //CellTree.Resources res = GWT.create(CellTree.BasicResources.class);

     /*
 *Create the tree using the model. We use <code>null</code>
      * as the default value of the root node. The default value will
 *be passed to CustomTreeModel#getNodeInfo();
      */
      CellTree tree = new CellTree(model, null);

      tree.setKeyboardSelectionPolicy(KeyboardSelectionPolicy.ENABLED);

     //Open the first playlist by default.
      TreeNode rootNode = tree.getRootTreeNode();
      TreeNode firstPlaylist = rootNode.setChildOpen(0, true);
      firstPlaylist.setChildOpen(0, true);

      VerticalPanel panel = new VerticalPanel();
      panel.setBorderWidth(1);
      panel.setWidth("300");
      panel.add(tree);


     //Add the widgets to the root panel.
      RootPanel.get().add(panel);
   }
}

すべての変更が完了したら、link：/gwt/gwt_create_application [GWT-アプリケーションの作成]の章で行ったように、アプリケーションをコンパイルして開発モードで実行します。すべてがあなたのアプリケーションでうまくいけば、これは次の結果を生成します-

GWT CellTreeウィジェット

Gwt-celltree-widget