GWT - FocusPanel 元件

上一頁
下一頁

簡介

FocusPanel 元件表示一個簡單的面板，使它的內容可聚焦，並增加了捕獲滑鼠和鍵盤事件的能力。

類宣告

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

public class FocusPanel
   extends SimplePanel
      implements HasFocus, SourcesClickEvents, 
         SourcesMouseEvents, SourcesMouseWheelEvents, 
            HasAllMouseHandlers, HasClickHandlers, 
               HasDoubleClickHandlers, HasAllKeyHandlers,
                  HasAllFocusHandlers

類建構函式

序號 建構函式 & 描述
1

FocusPanel()

建立一個空的焦點面板。
2

FocusPanel(Widget child)

使用給定的子元件建立一個新的焦點面板。

類方法

序號 函式名稱 & 描述
1

HandlerRegistration addBlurHandler(BlurHandler handler)

新增一個 BlurEvent 處理程式。
2

HandlerRegistration addClickHandler(ClickHandler handler)

新增一個 ClickEvent 處理程式。
3

void addClickListener(ClickListener listener)

已棄用。請使用 addClickHandler (com.google.gwt.event.dom.client.ClickHandler) 代替
4

HandlerRegistration addDoubleClickHandler (DoubleClickHandler handler)

新增一個 DoubleClickEvent 處理程式。
5

HandlerRegistration addFocusHandler(FocusHandler handler)

新增一個 FocusEvent 處理程式。
6

void addFocusListener (FocusListener listener)

已棄用。請使用 addFocusHandler(com.google.gwt.event.dom.client.FocusHandler) 代替
7

void addKeyboardListener (KeyboardListener listener)

已棄用。請使用 addKeyDownHandler (com.google.gwt.event.dom.client.KeyDownHandler), addKeyUpHandler (com.google.gwt.event.dom.client.KeyUpHandler) 和 addKeyPressHandler (com.google.gwt.event.dom.client.KeyPressHandler) 代替
8

HandlerRegistration addKeyDownHandler (KeyDownHandler handler)

新增一個 KeyDownEvent 處理程式。
9

HandlerRegistration addKeyPressHandler (KeyPressHandler handler)

新增一個 KeyPressEvent 處理程式。
10

HandlerRegistration addKeyUpHandler (KeyUpHandler handler)

新增一個 KeyUpEvent 處理程式。
11

HandlerRegistration addMouseDownHandler (MouseDownHandler handler)

新增一個 MouseDownEvent 處理程式。
12

void addMouseListener(MouseListener listener)

已棄用。請使用 addMouseOverHandler (com.google.gwt.event.dom.client.MouseOverHandler), addMouseMoveHandler (com.google.gwt.event.dom.client.MouseMoveHandler), addMouseDownHandler (com.google.gwt.event.dom.client.MouseDownHandler), addMouseUpHandler (com.google.gwt.event.dom.client.MouseUpHandler) 和 addMouseOutHandler (com.google.gwt.event.dom.client.MouseOutHandler) 代替
13

HandlerRegistration addMouseMoveHandler(MouseMoveHandler handler)

新增一個 MouseMoveEvent 處理程式。
14

HandlerRegistration addMouseOutHandler(MouseOutHandler handler)

新增一個 MouseOutEvent 處理程式。
15

HandlerRegistration addMouseOverHandler(MouseOverHandler handler)

新增一個 MouseOverEvent 處理程式。
16

HandlerRegistration addMouseUpHandler(MouseUpHandler handler)

新增一個 MouseUpEvent 處理程式。
17

HandlerRegistration addMouseWheelHandler(MouseWheelHandler handler)

新增一個 MouseWheelEvent 處理程式。
18

void addMouseWheelListener(MouseWheelListener listener)

已棄用。請使用 addMouseWheelHandler (com.google.gwt.event.dom.client.MouseWheelHandler) 代替
19

int getTabIndex()

獲取元件在選項卡索引中的位置。
20

void removeClickListener(ClickListener listener)

已棄用。請使用 addClickHandler (com.google.gwt.event.dom.client.ClickHandler) 返回的物件上的 HandlerRegistration.removeHandler() 方法代替
21

void removeFocusListener(FocusListener listener)

已棄用。請使用 addFocusHandler (com.google.gwt.event.dom.client.FocusHandler) 返回的物件上的 HandlerRegistration.removeHandler() 方法代替
22

void removeKeyboardListener(KeyboardListener listener)

已棄用。請使用 add*Handler 方法返回的物件上的 HandlerRegistration.removeHandler() 方法代替
23

void removeMouseListener(MouseListener listener)

已棄用。請使用 add*Handler 方法返回的物件上的 HandlerRegistration.removeHandler() 方法代替
24

void removeMouseWheelListener(MouseWheelListener listener)

已棄用。請使用 addMouseWheelHandler (com.google.gwt.event.dom.client.MouseWheelHandler) 返回的物件上的 HandlerRegistration.removeHandler() 方法代替
25

void setAccessKey(char key)

設定元件的“訪問鍵”。
26

void setFocus(boolean focused)

顯式地聚焦/取消聚焦此元件。
27

void setTabIndex(int index)

設定元件在選項卡索引中的位置。

繼承的方法

此類繼承自以下類：

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

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

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

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

  • java.lang.Object

FocusPanel 元件示例

此示例將引導您完成簡單的步驟，以展示如何在 GWT 中使用 FocusPanel 元件。按照以下步驟更新我們在“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;
}

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

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

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.FocusPanel;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {

   public void onModuleLoad() {
      // Create text 
      HTML contents = new HTML("This is a FocusPanel."
         +" Click on the panel and it will attain focus.");

      //create focus panel with content
      FocusPanel focusPanel = new FocusPanel(contents);
      focusPanel.setSize("400px", "100px");

      DecoratorPanel decoratorPanel = new DecoratorPanel();

      decoratorPanel.add(focusPanel);

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

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

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

© . All rights reserved.