GWT提供了三种创建自定义用户界面元素的方法.有三种一般策略可以跟随 : 去;
通过扩展Composite Class : 创建一个小部件;这是创建自定义窗口小部件最常用,最简单的方法.在这里,您可以使用现有小部件来创建具有自定义属性的复合视图.
使用JAVA中的GWT DOM API创建小部件 : GWT基本小部件以这种方式创建.仍然是创建自定义窗口小部件的一种非常复杂的方法,应谨慎使用.
使用JavaScript并使用JSNI将其包装在窗口小部件中 : 这通常只应作为最后的手段.考虑到本机方法的跨浏览器含义,它变得非常复杂并且也变得更难调试.
此示例将指导您完成在GWT中创建自定义窗口小部件的简单步骤.按照以下步骤更新我们在 GWT - Basic Widgets 章节中创建的GWT应用程序;
这里我们将通过扩展Composite类来创建自定义小部件,这是构建自定义小部件的最简单方法.
Step | 描述 |
---|---|
1 | 在 GWT - 创建应用程序章节中解释,在包 com.it1352下创建名为 HelloWorld 的项目. |
2 | 修改 HelloWorld.gwt .xml , HelloWorld.css , HelloWorld.html 和 HelloWorld.java ,如下所述.保持其余文件不变. |
3 | 编译并运行应用程序以验证实现的逻辑的结果. |
以下是修改后的模块描述符的内容 src/com.it1352/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.IT屋.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>Custom Widget Demonstration</h1> <div id = "gwtContainer"></div> </body> </html>
让我们有以下Java文件 src/com.it1352/HelloWorld.java 的内容,它将演示创建自定义小部件.
package com.it1352.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.event.dom.client.ClickEvent; import com.google.gwt.event.dom.client.ClickHandler; import com.google.gwt.user.client.ui.CheckBox; import com.google.gwt.user.client.ui.Composite; import com.google.gwt.user.client.ui.HorizontalPanel; import com.google.gwt.user.client.ui.RootPanel; import com.google.gwt.user.client.ui.TextBox; public class HelloWorld implements EntryPoint { /** * A composite of a TextBox and a CheckBox that optionally enables it. */ private static class OptionalTextBox extends Composite implements ClickHandler { private TextBox textBox = new TextBox(); private CheckBox checkBox = new CheckBox(); private boolean enabled = true; public boolean isEnabled() { return enabled; } public void setEnabled(boolean enabled) { this.enabled = enabled; } /** * Style this widget using .optionalTextWidget CSS class.<br/> * Style textbox using .optionalTextBox CSS class.<br/> * Style checkbox using .optionalCheckBox CSS class.<br/> * Constructs an OptionalTextBox with the given caption * on the check. * @param caption the caption to be displayed with the check box */ public OptionalTextBox(String caption) { // place the check above the text box using a vertical panel. HorizontalPanel panel = new HorizontalPanel(); // panel.setBorderWidth(1); panel.setSpacing(10); panel.add(checkBox); panel.add(textBox); // all composites must call initWidget() in their constructors. initWidget(panel); //set style name for entire widget setStyleName("optionalTextWidget"); //set style name for text box textBox.setStyleName("optionalTextBox"); //set style name for check box checkBox.setStyleName("optionalCheckBox"); textBox.setWidth("200"); // Set the check box's caption, and check it by default. checkBox.setText(caption); checkBox.setValue(enabled); checkBox.addClickHandler(this); enableTextBox(enabled,checkBox.getValue()); } public void onClick(ClickEvent event) { if (event.getSource() == checkBox) { // When the check box is clicked, //update the text box's enabled state. enableTextBox(enabled,checkBox.getValue()); } } private void enableTextBox(boolean enable,boolean isChecked){ enable = (enable && isChecked) || (!enable && !isChecked); textBox.setStyleDependentName("disabled", !enable); textBox.setEnabled(enable); } } public void onModuleLoad() { // Create an optional text box and add it to the root panel. OptionalTextBox otb = new OptionalTextBox( "Want to explain the solution?"); otb.setEnabled(true); RootPanel.get().add(otb); } }
完成所有更改后,让我们在开发模式下编译并运行应用程序在 GWT - 创建应用程序章节中做了.如果您的应用程序一切正常,这将产生以下结果 :
您可以注意到以下几点
通过扩展创建自定义小工具复合小部件非常简单.
我们使用GWT内置小部件,TextBox和CheckBox创建了一个小部件,因此使用了可重用性的概念.
根据复选框的状态,TextBox被禁用/启用.我们提供了一个API来启用/禁用控件.
我们通过记录的CSS样式公开了内部窗口小部件样式.