Gwt-tree-widget
GWT-ツリーウィジェット
前書き
*Tree* ウィジェットは、標準の階層ツリーウィジェットを表します。 ツリーには、ユーザーが開いたり、閉じたり、選択したりできるTreeItemsの階層が含まれています。クラス宣言
以下は com.google.gwt.user.client.ui.Tree クラスの宣言です-
public class Tree
extends Widget
implements HasWidgets, SourcesTreeEvents, HasFocus,
HasAnimation, HasAllKeyHandlers, HasAllFocusHandlers,
HasSelectionHandlers<TreeItem>, HasOpenHandlers<TreeItem>,
HasCloseHandlers<TreeItem>, SourcesMouseEvents, HasAllMouseHandlersCSSスタイルルール
次のデフォルトのCSSスタイルルールは、すべてのツリーウィジェットに適用されます。 要件に応じて上書きできます。
.gwt-Tree {}
.gwt-TreeItem {}
.gwt-TreeItem-selected {}クラスコンストラクター
| Sr.No. | Constructor & Description |
|---|---|
| 1 |
Tree() 空のツリーを構築します。 |
| 2 |
Tree(TreeImages images) 指定された画像バンドルを画像に使用するツリーを構築します。 |
| 3 |
Tree(TreeImages images, boolean useLeafImages) 指定された画像バンドルを画像に使用するツリーを構築します。 |
クラスメソッド
| Sr.No. | Function name & Description |
|---|---|
| 1 |
void add(Widget widget) ウィジェットをルートツリーアイテムとして追加します。 |
| 2 |
void addFocusListener(FocusListener listener) マウスイベントを受け取るためのリスナーインターフェイスを追加します。 |
| 3 |
TreeItem addItem(java.lang.String itemText) 指定されたテキストを含む単純なツリー項目を追加します。 |
| 4 |
void addItem(TreeItem item) このツリーのルートレベルにアイテムを追加します。 |
| 5 |
TreeItem addItem(Widget widget) 指定されたウィジェットを含む新しいツリー項目を追加します。 |
| 6 |
void addKeyboardListener(KeyboardListener listener) キーボードイベントを受信するリスナーインターフェイスを追加します。 |
| 7 | *void addMouseListener(MouseListener listener) * |
| 8 |
ツリーイベントを受信するためのリスナーインターフェイスを追加します。 |
| 9 |
void clear() 現在のツリーからすべてのツリー項目を消去します。 |
| 10 |
protected void doAttachChildren() ウィジェットがHasWidgetsを実装する場合、このメソッドをオーバーライドし、その子ウィジェットごとにonAttach（）を呼び出す必要があります。 |
| 11 |
protected void doDetachChildren() ウィジェットがHasWidgetsを実装する場合、このメソッドをオーバーライドし、その子ウィジェットごとにonDetach（）を呼び出す必要があります。 |
| 12 |
void ensureSelectedItemVisible() 現在選択されている項目が表示されるようにし、必要に応じて親を開き、ツリーをスクロールします。 |
| 13 |
java.lang.String getImageBase() 廃止予定です。 Tree（TreeImages）を使用すると、ツリー内で使用される一連の画像を提供するためのより効率的で管理しやすい方法が提供されます。 |
| 14 |
TreeItem getItem(int index) 指定されたインデックスにある最上位のツリー項目を取得します。 |
| 15 |
int getItemCount() このツリーのルートに含まれるアイテムの数を取得します。 |
| 16 |
TreeItem getSelectedItem() 現在選択されているアイテムを取得します。 |
| 17 |
int getTabIndex() タブインデックス内のウィジェットの位置を取得します。 |
| 18 | *boolean isAnimationEnabled() * |
| 19 |
Treeおよび特定のTreeItemでキーボードナビゲーションが有効かどうかを示します。 |
| 20 |
java.util.Iterator<Widget> iterator() 含まれるウィジェットの反復子を取得します。 |
| 21 |
void onBrowserEvent(Event event) ブラウザイベントが受信されるたびに発生します。 |
| 22 |
protected void onEnsureDebugId(java.lang.String baseID) 影響を受ける要素：-root =ルートTreeItem。 |
| 23 |
protected void onLoad() このメソッドは、ウィジェットがブラウザのドキュメントに添付された直後に呼び出されます。 |
| 24 |
boolean remove(Widget w) 子ウィジェットを削除します。 |
| 25 |
void removeFocusListener(FocusListener listener) 以前に追加されたリスナーインターフェイスを削除します。 |
| 26 |
void removeItem(TreeItem item) このツリーのルートレベルからアイテムを削除します。 |
| 27 |
void removeItems() このツリーのルートレベルからすべてのアイテムを削除します。 |
| 28 |
void removeKeyboardListener(KeyboardListener listener) 以前に追加されたリスナーインターフェイスを削除します。 |
| 29 |
void removeTreeListener(TreeListener listener) 以前に追加されたリスナーインターフェイスを削除します。 |
| 30 |
void setAccessKey(char key) ウィジェットの「アクセスキー」を設定します。 |
| 31 |
void setAnimationEnabled(boolean enable) アニメーションを有効または無効にします。 |
| 32 |
void setFocus(boolean focus) このウィジェットを明示的にフォーカス/フォーカス解除します。 |
| 33 |
void setImageBase(java.lang.String baseUrl) 廃止予定です。 Tree（TreeImages）を使用すると、ツリー内で使用される一連の画像を提供するためのより効率的で管理しやすい方法が提供されます。 |
| 34 |
void setSelectedItem(TreeItem item) 指定されたアイテムを選択します。 |
| 35 |
void setSelectedItem(TreeItem item, boolean fireEvents) 指定されたアイテムを選択します。 |
| 36 |
void setTabIndex(int index) タブインデックスでのウィジェットの位置を設定します。 |
| 37 |
java.util.Iterator<TreeItem> treeItemIterator() ツリー項目のイテレータ。 |
継承されるメソッド
このクラスは、次のクラスからメソッドを継承します-
- com.google.gwt.user.client.ui.UIObject
- com.google.gwt.user.client.ui.Widget
- java.lang.Object
ツリーウィジェットの例
この例では、GWTのツリーウィジェットの使用方法を示す簡単な手順を紹介します。 次の手順に従って、_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;
}
.gwt-Label {
font-weight: bold;
color: maroon;
}
.gwt-Tree .gwt-TreeItem {
padding: 1px 0px;
margin: 0px;
white-space: nowrap;
cursor: hand;
cursor: pointer;
}
.gwt-Tree .gwt-TreeItem-selected {
background: #ebeff9;
}以下は、変更された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>Tree Widget Demonstration</h1>
<div id = "gwtContainer"></div>
</body>
</html>Treeウィジェットの使用方法を示すJavaファイル src/com.finddevguides/HelloWorld.java の内容を見てみましょう。
package com.finddevguides.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.logical.shared.SelectionEvent;
import com.google.gwt.event.logical.shared.SelectionHandler;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Tree;
import com.google.gwt.user.client.ui.TreeItem;
import com.google.gwt.user.client.ui.VerticalPanel;
public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
//create a label
final Label labelMessage = new Label();
labelMessage.setWidth("300");
//Create a root tree item as department
TreeItem department = new TreeItem("Department");
//create other tree items as department names
TreeItem salesDepartment = new TreeItem("Sales");
TreeItem marketingDepartment = new TreeItem("Marketing");
TreeItem manufacturingDepartment = new TreeItem("Manufacturing");
//create other tree items as employees
TreeItem employee1 = new TreeItem("Robert");
TreeItem employee2 = new TreeItem("Joe");
TreeItem employee3 = new TreeItem("Chris");
//add employees to sales department
salesDepartment.addItem(employee1);
salesDepartment.addItem(employee2);
salesDepartment.addItem(employee3);
//create other tree items as employees
TreeItem employee4 = new TreeItem("Mona");
TreeItem employee5 = new TreeItem("Tena");
//add employees to marketing department
marketingDepartment.addItem(employee4);
marketingDepartment.addItem(employee5);
//create other tree items as employees
TreeItem employee6 = new TreeItem("Rener");
TreeItem employee7 = new TreeItem("Linda");
//add employees to sales department
manufacturingDepartment.addItem(employee6);
manufacturingDepartment.addItem(employee7);
//add departments to department item
department.addItem(salesDepartment);
department.addItem(marketingDepartment);
department.addItem(manufacturingDepartment);
//create the tree
Tree tree = new Tree();
//add root item to the tree
tree.addItem(department);
tree.addSelectionHandler(new SelectionHandlerL<TreeItem>() {
@Override
public void onSelection(SelectionEvent<TreeItem> event) {
labelMessage.setText("Selected Value: "
+ event.getSelectedItem().getText());
}
});
//Add text boxes to the root panel.
VerticalPanel panel = new VerticalPanel();
panel.setSpacing(10);
panel.add(tree);
panel.add(labelMessage);
//add the tree to the root panel
RootPanel.get("gwtContainer").add(panel);
}
}すべての変更が完了したら、link：/gwt/gwt_create_application [GWT-アプリケーションの作成]の章で行ったように、アプリケーションをコンパイルして開発モードで実行します。 すべてがあなたのアプリケーションでうまくいけば、これは次の結果を生成します-
ツリーの任意の値を選択すると、選択した値を表示するツリーの下のメッセージが更新されます。
