GWT - Tiện ích con tùy chỉnh
GWT cung cấp ba cách để tạo các phần tử giao diện người dùng tùy chỉnh. Có ba chiến lược chung cần tuân theo:
Create a widget by extending Composite Class- Đây là cách phổ biến nhất và dễ nhất để tạo các widget tùy chỉnh. Tại đây bạn có thể sử dụng các widget hiện có để tạo chế độ xem tổng hợp với các thuộc tính tùy chỉnh.
Create a widget using GWT DOM API in JAVA- Các widget cơ bản của GWT được tạo theo cách này. Nó vẫn là một cách rất phức tạp để tạo widget tùy chỉnh và nên được sử dụng một cách thận trọng.
Use JavaScript and wrap it in a widget using JSNI- Điều này nói chung chỉ nên được thực hiện như một phương sách cuối cùng. Xem xét các tác động trên nhiều trình duyệt của các phương thức gốc, nó trở nên rất phức tạp và cũng trở nên khó gỡ lỗi hơn.
Tạo tiện ích con tùy chỉnh với lớp hỗn hợp
Ví dụ này sẽ hướng dẫn bạn qua các bước đơn giản để hiển thị việc tạo Tiện ích con tùy chỉnh trong GWT. Làm theo các bước sau để cập nhật ứng dụng GWT mà chúng tôi đã tạo trong GWT - Chương Tiện ích cơ bản -
Ở đây chúng ta sẽ tạo một widget tùy chỉnh bằng cách mở rộng lớp Composite, đây là cách dễ nhất để tạo các widget tùy chỉnh.
Bươc | Sự miêu tả |
---|---|
1 | Tạo một dự án với tên HelloWorld trong một gói com.tutorialspoint như được giải thích trong chương GWT - Tạo ứng dụng . |
2 | Sửa đổi HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html và HelloWorld.java như được giải thích bên dưới. Giữ phần còn lại của các tệp không thay đổi. |
3 | Biên dịch và chạy ứng dụng để xác minh kết quả của logic được triển khai. |
Sau đây là nội dung của bộ mô tả mô-đun đã sửa đổi 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>
Sau đây là nội dung của tệp Style Sheet đã sửa đổi 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;
}
Sau đây là nội dung của tệp máy chủ HTML đã sửa đổi 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>
Hãy để chúng tôi có nội dung sau của tệp Java src/com.tutorialspoint/HelloWorld.java điều này sẽ chứng minh việc tạo ra một widget Tùy chỉnh.
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.<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);
}
}
Khi bạn đã sẵn sàng với tất cả các thay đổi được thực hiện, hãy để chúng tôi biên dịch và chạy ứng dụng ở chế độ phát triển như chúng tôi đã làm trong chương GWT - Tạo ứng dụng . Nếu mọi thứ đều ổn với ứng dụng của bạn, điều này sẽ tạo ra kết quả sau:
You can notice following points
Tạo Widget tùy chỉnh bằng cách mở rộng widget Composite khá dễ dàng.
Chúng tôi đã tạo một widget với các widget có sẵn của GWT, TextBox và CheckBox, do đó sử dụng khái niệm khả năng tái sử dụng.
TextBox bị tắt / bật tùy thuộc vào trạng thái của hộp kiểm. Chúng tôi đã cung cấp một API để bật / tắt điều khiển.
Chúng tôi đã giới thiệu các kiểu widget nội bộ thông qua các kiểu CSS được ghi lại.