GWT - TabPanel 元件

上一頁
下一頁

簡介

TabPanel 元件表示一個選項卡式頁面集的面板，每個頁面都包含另一個元件。當用戶選擇與之關聯的不同選項卡時，其子元件將顯示。選項卡可以包含任意 HTML。

類宣告

以下是 com.google.gwt.user.client.ui.TabPanel 類的宣告：

@Deprecated
public class TabPanel
   extends Composite
      implements TabListener, SourcesTabEvents, 
         HasWidgets, HasAnimation, IndexedPanel.ForIsWidget,
            HasBeforeSelectionHandlers<java.lang.Integer>, 
               HasSelectionHandlers<java.lang.Integer>

類建構函式

序號 建構函式及描述
1

TabPanel()

已棄用。建立一個空的選項卡面板。

類方法

序號 函式名稱及描述
1

void add(IsWidget w, IsWidget tabWidget)

已棄用。方便的過載，允許直接使用 IsWidget。
2

void add(IsWidget w, java.lang.String tabText)

已棄用。方便的過載，允許直接使用 IsWidget。
3

void add(IsWidget w, java.lang.String tabText, boolean asHTML)

已棄用。方便的過載，允許直接使用 IsWidget。
4

void add(Widget w)

已棄用。新增一個子元件。
5

void add(Widget w, java.lang.String tabText)

已棄用。將元件新增到選項卡面板。
6

void add(Widget w, java.lang.String tabText, boolean asHTML)

已棄用。將元件新增到選項卡面板。
7

void add(Widget w, Widget tabWidget)

已棄用。將元件新增到選項卡面板。
8

處理程式註冊 add Before Selection Handler (Before Selection Handler<java.lang. Integer> handler)

已棄用。新增 BeforeSelectionEvent 處理程式。
9

處理程式註冊 add Selection Handler (Selection Handler <java.lang. Integer> handler)

已棄用。新增 SelectionEvent 處理程式。
10

void add Tab Listener(TabListener listener)

已棄用。請改用 add Before Selection Handler (com.google.gwt.event. logical.shared.Before Selection Handler) 和 add Selection Handler (com.google.gwt.event. logical.shared.Selection Handler)
11

void clear()

已棄用。移除所有子元件。
12

protected SimplePanel createTabTextWrapper()

已棄用。建立一個 SimplePanel，它將包裝選項卡中的內容。
13

DeckPanel getDeckPanel()

已棄用。獲取此選項卡面板內的 DeckPanel。
14

TabBar getTabBar()

已棄用。獲取此選項卡面板內的選項卡欄。
15

Widget getWidget(int index)

已棄用。獲取指定索引處的子元件。
16

int getWidgetCount()

已棄用。獲取此面板中的子元件數量。
17

int getWidgetIndex(IsWidget child)

已棄用。方便的過載，允許直接使用 IsWidget。
18

int getWidgetIndex(Widget widget)

已棄用。獲取指定子元件的索引。
19

void insert(IsWidget widget, IsWidget tabWidget, int beforeIndex)

已棄用。方便的過載，允許直接使用 IsWidget。
20

void insert(IsWidget widget, java.lang. String tab Text, boolean as HTML, int before Index)

已棄用。方便的過載，允許直接使用 IsWidget。
21

void insert(IsWidget widget, java.lang.String tabText, int beforeIndex)

已棄用。方便的過載，允許直接使用 IsWidget。
22

void insert(Widget widget, java.lang.String tabText, boolean asHTML, int beforeIndex)

已棄用。將元件插入選項卡面板。
23

void insert(Widget widget, java.lang.String tabText, int beforeIndex)

已棄用。將元件插入選項卡面板。
24

void insert(Widget widget, Widget tabWidget, int beforeIndex)

已棄用。將元件插入選項卡面板。
25

boolean isAnimationEnabled()

已棄用。如果啟用了動畫，則返回 true，否則返回 false。
26

java.util.Iterator<Widget> iterator()

已棄用。獲取包含的元件的迭代器。
27

boolean on Before Tab Selected(Sources Tab Events sender, int tab Index)

已棄用。請改用 Before Selection Handler.on Before Selection(com.google.gwt.event. logical.shared.Before Selection Event)
28

protected void onEnsureDebugId(java.lang. String baseID)

已棄用。受影響的元素：-bar = 選項卡欄。-bar-tab# = 包含選項卡本身內容的元素。-bar-tab-wrapper# = 包含索引處選項卡的單元格。-bottom = 選項卡欄下方的面板。
29

void onTabSelected(SourcesTabEvents sender, int tabIndex)

已棄用。請改用 SelectionHandler.onSelection(com.google.gwt.event. logical.shared.SelectionEvent)
30

boolean remove(int index)

已棄用。移除指定索引處的元件。
31

boolean remove(Widget widget)

已棄用。移除給定的元件及其關聯的選項卡。
32

void removeTabListener(TabListener listener)

已棄用。請改用 add*Handler 方法返回的物件上的 HandlerRegistration.removeHandler() 方法
33

void selectTab(int index)

已棄用。以程式設計方式選擇指定的選項卡並觸發事件。
34

void selectTab(int index, boolean fireEvents)

已棄用。以程式設計方式選擇指定的選項卡。
35

void setAnimationEnabled(boolean enable)

已棄用。啟用或停用動畫。

繼承的方法

此類繼承自以下類：

  • com.google.gwt.user.client.ui.UIObject

  • com.google.gwt.user.client.ui.Widget

  • com.google.gwt.user.client.ui.Composite

  • java.lang.Object

TabPanel 元件示例

此示例將引導您完成簡單的步驟，以演示如何在 GWT 中使用 TabPanel 元件。按照以下步驟更新我們在“GWT - 建立應用”章節中建立的 GWT 應用：

步驟 描述
1 在“GWT - 建立應用”章節中說明的 com.tutorialspoint 包下，建立一個名為 HelloWorld 的專案。
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;
}

以下是修改後的 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>TabPanel Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

讓我們看看 Java 檔案 src/com.tutorialspoint/HelloWorld.java 的以下內容，它將演示 TabPanel 元件的使用。

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TabPanel;

public class HelloWorld implements EntryPoint {

   public void onModuleLoad() {
      //Create an empty tab panel 
      TabPanel tabPanel = new TabPanel();

      //create contents for tabs of tabpanel
      Label label1 = new Label("This is contents of TAB 1");
      label1.setHeight("200");
      Label label2 = new Label("This is contents of TAB 2");
      label2.setHeight("200");
      Label label3 = new Label("This is contents of TAB 3");
      label3.setHeight("200");

      //create titles for tabs
      String tab1Title = "TAB 1";
      String tab2Title = "TAB 2";
      String tab3Title = "TAB 3";

      //create tabs 
      tabPanel.add(label1, tab1Title);
      tabPanel.add(label2, tab2Title);
      tabPanel.add(label3, tab3Title);

      //select first tab
      tabPanel.selectTab(0);

      //set width if tabpanel
      tabPanel.setWidth("400");

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

完成所有更改後，讓我們像在 GWT - 建立應用 章節中一樣，在開發模式下編譯並執行應用程式。如果應用程式一切正常，則會產生以下結果：

GWT TabPanel Widget
gwt_layout_panels.htm
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.