GWT - 樹形控制元件

上一頁
下一頁

介紹

樹形控制元件表示一個標準的分層樹形控制元件。樹包含使用者可以開啟、關閉和選擇的 TreeItem 層次結構。

類宣告

以下是 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, HasAllMouseHandlers

CSS 樣式規則

以下預設 CSS 樣式規則將應用於所有樹形控制元件。您可以根據需要覆蓋它。

.gwt-Tree {}

.gwt-TreeItem {}

.gwt-TreeItem-selected {}

類建構函式

序號 建構函式 & 描述
1

Tree()

構造一個空的樹。
2

Tree(TreeImages images)

構造一個使用指定影像包的樹。
3

Tree(TreeImages images, boolean useLeafImages)

構造一個使用指定影像包的樹。

類方法

序號 函式名稱 & 描述
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

void addTreeListener(TreeListener listener)

新增一個偵聽器介面來接收樹事件。
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

protected boolean isKeyboardNavigationEnabled(TreeItem currentItem)

指示鍵盤導航是否已為 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 應用：

步驟 描述
1 在com.tutorialspoint包下建立一個名為HelloWorld的專案，如GWT - 建立應用章節中所述。
2 修改HelloWorld.gwt.xml、HelloWorld.css、HelloWorld.html和HelloWorld.java，如下所述。保持其餘檔案不變。
3 編譯並執行應用程式以驗證已實現邏輯的結果。

以下是修改後的模組描述符src/com.tutorialspoint/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.tutorialspoint.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/HelloWorld.html的內容。

<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>

讓我們在 Java 檔案src/com.tutorialspoint/HelloWorld.java中新增以下內容，它將演示樹形控制元件的使用。

package com.tutorialspoint.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);
   }	
}

準備好所有更改後，讓我們像在GWT - 建立應用章節中那樣，在開發模式下編譯並執行應用程式。如果您的應用程式一切正常，這將產生以下結果：

GWT Tree Widget

在樹中選擇任何值，都會更新樹下顯示所選值的郵件。

gwt_complex_widgets.htm
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.