GWT - Ứng dụng
Trước khi bắt đầu tạo ứng dụng "HelloWorld" thực tế bằng GWT, chúng ta hãy xem các phần thực tế của ứng dụng GWT là gì -
Một ứng dụng GWT bao gồm bốn phần quan trọng sau đây, trong đó phần cuối cùng là tùy chọn nhưng ba phần đầu tiên là bắt buộc.
- Bộ mô tả mô-đun
- Tài nguyên công cộng
- Mã phía máy khách
- Mã phía máy chủ
Vị trí mẫu của các phần khác nhau của một ứng dụng gwt điển hình HelloWord sẽ như hình dưới đây -
| Tên | Vị trí |
|---|---|
| Gốc dự án | Chào thế giới/ |
| Bộ mô tả mô-đun | src / com / tutorialspoint / HelloWorld.gwt.xml |
| Tài nguyên công cộng | src / com / tutorialspoint / war / |
| Mã phía máy khách | src / com / tutorialspoint / client / |
| Mã phía máy chủ | src / com / tutorialspoint / server / |
Bộ mô tả mô-đun
Bộ mô tả mô-đun là tệp cấu hình ở dạng XML được sử dụng để cấu hình ứng dụng GWT.
Phần mở rộng của tệp mô tả mô-đun là * .gwt.xml, trong đó * là tên của ứng dụng và tệp này phải nằm trong thư mục gốc của dự án.
Sau đây sẽ là bộ mô tả mô-đun mặc định HelloWorld.gwt.xml cho ứng dụng HelloWorld -
<?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 = '...'/>
<source path = '...'/>
<!-- specify the paths for static files like html, css etc. -->
<public path = '...'/>
<public path = '...'/>
<!-- specify the paths for external javascript files -->
<script src = "js-url" />
<script src = "js-url" />
<!-- specify the paths for external style sheet files -->
<stylesheet src = "css-url" />
<stylesheet src = "css-url" />
</module>Sau đây là chi tiết ngắn gọn về các phần khác nhau được sử dụng trong bộ mô tả mô-đun.
| Sr.No. | Nút & Mô tả |
|---|---|
| 1 | <module rename-to = "helloworld"> Điều này cung cấp tên của ứng dụng. |
| 2 | <inherits name = "logical-module-name" /> Điều này thêm mô-đun gwt khác trong ứng dụng giống như nhập trong ứng dụng java. Bất kỳ số lượng mô-đun nào cũng có thể được kế thừa theo cách này. |
| 3 | <entry-point class = "classname" /> Điều này chỉ định tên của lớp sẽ bắt đầu tải Ứng dụng GWT. Bất kỳ số lượng lớp điểm nhập nào cũng có thể được thêm vào và chúng được gọi tuần tự theo thứ tự xuất hiện trong tệp mô-đun. Vì vậy, khi onModuleLoad () của điểm nhập đầu tiên của bạn kết thúc, điểm nhập tiếp theo được gọi ngay lập tức. |
| 4 | <source path = "path" /> Điều này chỉ định tên của các thư mục nguồn mà trình biên dịch GWT sẽ tìm kiếm để biên dịch nguồn. |
| 5 | <public path = "path" /> Đường dẫn công khai là nơi trong dự án của bạn, nơi các tài nguyên tĩnh được mô-đun GWT của bạn tham chiếu, chẳng hạn như CSS hoặc hình ảnh, được lưu trữ. Đường dẫn công khai mặc định là thư mục con công khai bên dưới nơi lưu trữ Tệp XML Mô-đun. |
| 6 | <script src="js-url" /> Tự động đưa tệp JavaScript bên ngoài vào vị trí được chỉ định bởi src. |
| 7 | <stylesheet src="css-url" /> Tự động đưa tệp CSS bên ngoài vào vị trí được chỉ định bởi src. |
Tài nguyên công cộng
Đây là tất cả các tệp được tham chiếu bởi mô-đun GWT của bạn, chẳng hạn như trang HTML Máy chủ, CSS hoặc hình ảnh.
Vị trí của các tài nguyên này có thể được định cấu hình bằng cách sử dụng phần tử <public path = "path" /> trong tệp cấu hình mô-đun. Theo mặc định, nó là thư mục con công khai bên dưới nơi lưu trữ Tệp XML Mô-đun.
Khi bạn biên dịch ứng dụng của mình sang JavaScript, tất cả các tệp có thể tìm thấy trên đường dẫn công khai của bạn đều được sao chép vào thư mục đầu ra của mô-đun.
Tài nguyên công cộng quan trọng nhất là trang chủ được sử dụng để gọi ứng dụng GWT thực tế. Trang lưu trữ HTML điển hình cho một ứng dụng có thể không bao gồm bất kỳ nội dung HTML hiển thị nào nhưng nó luôn được mong đợi sẽ bao gồm ứng dụng GWT thông qua thẻ <script ... /> như sau
<html>
<head>
<title>Hello World</title>
<link rel = "stylesheet" href = "HelloWorld.css"/>
<script language = "javascript" src = "helloworld/helloworld.nocache.js">
</script>
</head>
<body>
<h1>Hello World</h1>
<p>Welcome to first GWT application</p>
</body>
</html>Sau đây là biểu định kiểu mẫu mà chúng tôi đã đưa vào trang chủ của mình -
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;
}Mã phía máy khách
Đây là mã Java thực tế được viết để thực hiện logic nghiệp vụ của ứng dụng và trình biên dịch GWT dịch sang JavaScript, cuối cùng sẽ chạy bên trong trình duyệt. Vị trí của các tài nguyên này có thể được định cấu hình bằng cách sử dụng phần tử <source path = "path" /> trong tệp cấu hình mô-đun.
Ví dụ Entry Point mã sẽ được sử dụng làm mã phía máy khách và vị trí của nó sẽ được chỉ định bằng cách sử dụng <source path = "path" />.
Một mô-đun entry-point là bất kỳ lớp nào có thể gán cho EntryPointvà điều đó có thể được xây dựng mà không cần tham số. Khi một mô-đun được tải, mọi lớp điểm vào đều được khởi tạo vàEntryPoint.onModuleLoad()phương thức được gọi. Một lớp HelloWorld Entry Point mẫu sẽ như sau:
public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
Window.alert("Hello, World!");
}
}Mã phía máy chủ
Đây là phần phía máy chủ của ứng dụng của bạn và rất nhiều tùy chọn của nó. Nếu bạn không thực hiện bất kỳ xử lý phụ trợ nào trong ứng dụng của mình thì bạn không cần phần này, nhưng nếu có một số xử lý cần thiết ở phụ trợ và ứng dụng phía máy khách của bạn tương tác với máy chủ thì bạn sẽ phải phát triển các thành phần này.
Chương tiếp theo sẽ sử dụng tất cả các khái niệm đã đề cập ở trên để tạo ứng dụng HelloWorld bằng Eclipse IDE.