📅  最后修改于: 2020-10-25 04:42:29             🧑  作者: Mango
GWT提供了三种创建自定义用户界面元素的方法。有以下三种通用策略-
通过扩展Composite Class创建小部件-这是创建自定义小部件的最常见和最简单的方法。在这里,您可以使用现有的小部件来创建具有自定义属性的复合视图。
在JAVA中使用GWT DOM API创建窗口小部件-以这种方式创建GWT基本窗口小部件。它仍然是创建自定义窗口小部件的非常复杂的方式,应谨慎使用。
使用JavaScript并使用JSNI将其包装在小部件中-通常仅应在不得已时使用。考虑到本机方法的跨浏览器含义,它变得非常复杂,并且调试起来也更加困难。
本示例将带您完成简单的步骤,以展示在GWT中创建自定义小部件的过程。请按照以下步骤更新我们在GWT-基本小部件一章中创建的GWT应用程序-
在这里,我们将通过扩展Composite类来创建自定义窗口小部件,这是构建自定义窗口小部件的最简单方法。
Step | Description |
---|---|
1 | Create a project with a name HelloWorld under a package com.tutorialspoint as explained in the GWT – Create Application chapter. |
2 | Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html 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.tutorialspoint / HelloWorld.gwt.xml的内容。
以下是修改后的样式表文件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的内容。
Hello World
Custom Widget Demonstration
让我们有以下Java文件src / com.tutorialspoint / HelloWorld.java的内容,它将演示如何创建自定义小部件。
package com.tutorialspoint.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.
* Style textbox using .optionalTextBox CSS class.
* Style checkbox using .optionalCheckBox CSS class.
* 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-创建应用程序一章中那样,以开发模式编译和运行应用程序。如果您的应用程序一切正常,这将产生以下结果-
您会注意到以下几点
通过扩展Composite小部件来创建Custom Widget非常简单。
我们使用GWT内置的小部件TextBox和CheckBox创建了一个小部件,因此使用了可重用性的概念。
根据复选框的状态禁用/启用TextBox。我们提供了一个API来启用/禁用控件。
我们通过记录的CSS样式公开了内部小部件样式。