Bao Cao Google Web Toolkit

Nh

óm

1 -

07

11

02

20

11

Báo c

áo C

hu

yên

đề

2

Nhóm 1:

Đặng Văn Bình 07110007

Huỳnh Thị Ngọc Dung 07110024

Hồ Nguyên Hãn 07110038

Nguyễn Thị Thanh Thúy 07110130

January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]

Nhóm 1 | Google Web Toolkit 2

Contents

I. TỔNG QUAN VỀ GWT

1. What's New in GWT 2.4? .............................................................................................. 4

1.1.1 App Engine Connected Android: .................................................................... 4

1.1.2 Apps Marketplace Support: ............................................................................. 5

2.1 GWT SDK: ................................................................................................................. 6

2.1.1 SDK làm việc như thế nào: ................................................................................. 6

2.2 Google Plugin for Eclipse: ........................................................................................ 9

4. Developer's Guide ....................................................................................................... 11

4.1 Tutorials: ............................................................................................................. 11

4.2 Developer Guide: ................................................................................................. 12

II. ORGANIZE PROJECTS .......................................................................................... 14

1. HTML Host Pages: .................................................................................................. 14

2. Standard Directory and Package Layout ................................................................ 16

2.2 Example: GWT standard package layout: ....................................................... 18

4. Xác định một module: định dạng của các tập tin module XML .......................... 20

4.1 Entry-Point Classes .......................................................................................... 21

4.2 Tải nhiều modules vào trong một HTML host page: ........................................ 21

4.3 XML Element Reference: .................................................................................. 21

III. CODING BASICS .................................................................................................... 23

1. Client-Side Code: ........................................................................................................ 23

1.1 Tạo một EntryPoint Class: ................................................................................... 23



1.3 Ví dụ Hello World: ............................................................................................... 24

2. Number and Date Formatting: ................................................................................... 25

2.1 Sử dụng NumberFormat: ..................................................................................... 26

2.2 Sử dụng DateTimeFormat: .................................................................................. 27

3. JavaScript Object Notation (JSON): .......................................................................... 28

4. Working with XML: .................................................................................................... 29

4.1 XML types ............................................................................................................ 29

4.2 Parsing XML ........................................................................................................ 30

4.3 Building an XML document: ................................................................................ 32

IV. Xây dựng giao diện người dùng. ............................................................................. 34

1. Developer's Guide - Cross-Browser Support : ........................................................... 35

2. Developer's Guide - Layout Using Panels : ............................................................... 36

2.1 Basic Panels:....................................................................................................... 36

2.2 Layout Panels. ..................................................................................................... 37

2.4 RequiresResize and ProvidesResize. .................................................................... 40

2.5 Di chuyển đến chế độ tiêu chuẩn. .................................................................... 41

3. Developer's Guide – Widgets: .................................................................................... 48

Widgets ........................................................................................................................... 48

Styles(kiểu) ..................................................................................................................... 50

5. Developer's Guide - Accessing the Browser's DOM : ................................................ 54

6. Developer's Guide - Event Handlers: ......................................................................... 59

7. Developer's Guide - CSS Style: .................................................................................. 61



I. TỔNG QUAN VỀ GOOGLE WEB TOOLKIT

GWT là một bộ công cụ phát triển để xây dựng và tối ưu hóa các ứng dụng chạy trên

browser.

Mục tiêu của GWT là cho phép phát triển phong phú các web ứng dụng có hiệu suất cao

mà không cần developer phải là một chuyên gia (có một sự hiểu biết) về tất cả các tính

chất riêng biệt hay XMLHttpRequest và JavaScript của mỗi trình duyệt.

Đó là mã nguồn mở, hoàn toàn miễn phí, và được sử dụng bởi hàng ngàn nhà phát triển

trên khắp thế giới. GWT được sử dụng trong nhiều sản phẩm của Google, bao gồm

Google Wave và AdWords phiên bản mới.

1. What's New in GWT 2.4?

Phiên bản mới nhất của GWT và Google Plugin cho Eclipse (GPE) là phiên bản 2.4,

bao gồm các tính năng và chức năng mới dưới đây.

o App Engine Connected Android

o Apps Marketplace Support

o GWT Designer Enhancements

1.1 New Features:

1.1.1 App Engine Connected Android:

Google Plugin for Eclipse (GPE) thêm vào App Engine Connected Android mới

để hướng dẫn cho các lập trình viên Android.

Các hướng dẫn (Wizard) mới này giúp việc cài đặt các ứng dụng Android phía

sever dựa trên App Engine dễ dàng hơn. Wizard tạo ra tất cả các project file cần

thiết và tự động sinh (autogenerates) code, bao gồm code C2DM tùy ý vào ứng

dụng Android từ App Engine.



1.1.2 Apps Marketplace Support:

GPE 2.4 bổ sung thêm công cụ cho phép các developer triển khai các ứng dụng

Google Apps Marketplace của họ tương tự như triển khai App Engine.

GPE 2.4 giúp developer nhanh chóng có được các ứng dụng của họ được liệt kê

(và cập nhật) vào trong marketplace, bằng cách cung cấp một wizard sử dụng để thu

thập các dữ liệu cần thiết, và giao tiếp với các hệ thống App Marketplace phụ trợ.

Ngoài ra, GPE 2.4 có khả năng để tạo ra ứng dụng mẫu mặc định giúp các

developer xây dựng các ứng dụng mà sử dụng các Google API (ví dụ Calendar), xử lý

xác thực, và triển khai các Google Apps Marketplace.

1.1.3 GWT Designer Enhancements: (Các cải tiến trong GWT thiết kế ):

GPE 2.4 bao gồm một số cải tiến thiết kế GWT quan trọng, bao gồm việc khởi động

(startup) và cải thiện tốc độ chỉnh sửa rất đáng kể, bổ sung thêm trình soạn thảo split-

view cho UiBinder vì vậy ta có thể xem các code XML từng phần (side by side) với

các layout được đưa ra.

Có thể thêm, chỉnh sữa trực tiếp CSS vào trong các thuộc tính của GWT Designer

view. Vì vậy rất dễ dàng thêm các CSS style mới hoặc sữa các CSS đã có giống như

các thuộc tính của GWT.

2 Trong hộp công cụ (toolbox) có chứa gì?

SDK: GWT SDK có chứa các thư viện Java API, trình biên dịch, và development

server. Nó cho phép bạn viết các ứng dụng phía máy khách (client) bằng Java và triển

khai ứng dụng đó thành (dịch chúng thành) JavaScript.

Speed Tracer: là một tiện ích mở rộng của Chrome nó cho phép chúng ta xác định

các vấn đề hiệu suất trong các ứng dụng web.

Plugin cho Eclipse: là Plugin cho Eclipse, cung cấp IDE hỗ trợ cho Google Web

Toolkit và các dự án web App Engine .



GWT Designer: GWT Designer cho phép bạn tạo ra các giao diện người dùng trong

vài phút với các công cụ hỗ trợ intelligent layout, drag-and-drop ( kéo-và-thả), và sinh mã

tự động.

2.1 GWT SDK:

Viết các ứng dụng web cho nhiều trình duyệt có thể là một quá trình tẻ nhạt và dễ bị

lỗi. Bạn có thể dành 90% thời gian của bạn làm việc để tìm hiểu browser quirks.

Ngoài ra, việc xây dựng, tái sử dụng, và duy trì các code JavaScript và AJAX có thể

khó khăn và đỗ vỡ. Google Web Toolkit (GWT) giúp giảm bớt gánh nặng này bằng

cách cho phép các developer xây dựng nhanh chóng và duy trì các ứng dụng

JavaScript phức tạp trong ngôn ngữ lập trình Java.

2.1.1 SDK làm việc như thế nào:

Với GWT SDK, viết các Ajax ở đầu ngôn ngữ lập trình Java, sau đó GWT biên dịch

nó thành JavaScript tối ưu hóa, nó tự động làm việc trên tất cả các browser.

Trong suốt quá trình phát triển ứng dụng, có thể lặp đi lặp lại trong cùng chu kỳ edit-

refresh- view, như là một thói quen trong JavaScript , thêm một lợi ích nữa là có thể

debug và duyệt qua từng dòng code Java đó.

Khi triển khai chúng, trình biên dịch GWT biên dịch một cách tối ưu hóa code Java

của ta và độc lập với các JavaScript file.

2.1.2 Viết các ứng dụng AJAX trong ngôn ngữ Java, sau đó biên dịch để tối ưu hóa

JavaScript:

Không giống như JavaScript minifiers chỉ làm việc ở cấp độ văn bản, các trình

biên dịch GWT tổng hợp toàn diện các phân tích tĩnh và tối ưu hóa toàn bộ

GWT codebase, thường các sản phẩm JavaScript đó thì load và thực thi nhanh

hơn so với JavaScript viết tay tương đương.



Ví dụ: trình biên dịch GWT loại bỏ code chết, tích cực cắt tỉa các class không

sử dụng, các method, các field, và thậm chí các tham số của method, để đảm

bảo rằng các script đã biên soạn là nhỏ nhất có thể được.

Một ví dụ khác: trình biên dịch GWT chọn lọc các method nội tuyến, loại bỏ

các thi hành ở đầu của các method được gọi.

Cuối cùng, nó chỉ là JavaScript:

GWT SDK cung cấp một tập các API cốt lõi của Java và các thư viện

cho phép xây dựng nhiều interface người dùng và logic cho các browser

khách. Sau đó biên dịch mã nguồn đó thành JavaScript. Những cái cuối

cùng được chạy trong trình duyệt là JavaScript.

Đừng lo lắng về XMLHttpRequest:

GWT có thể xử lý tất cả các giao tiếp client-server, cho dù có sử dụng

JSON, XML, hoặc hệ thống GWT‟s optimized Remote Procedure Call

(RPC).

Sử dụng ngôn ngữ phụ trợ: (backend language)

Bạn không cần phải chạy Java trên máy chủ của bạn để sử dụng GWT

build cho phía client. Bởi vì GWT làm việc với rất nhiều giao thức giao tiếp, ta

có thể dễ dàng giao tiếp qua lại.

Tối ưu hóa script tải về JavaScript dựa trên hồ sơ người dùng:

GWT tạo ra một phiên bản biên dịch riêng biệt cho ứng dụng, nó được tối

ưu hóa cho một môi trường người dùng cụ thể. Điều này có nghĩa rằng một

trình duyệt Firefox hiển thị một ứng dụng bằng tiếng Pháp không cần phải tải

về code thêm cho browser hoặc ngôn ngữ nào cả.

Tái sử dụng các gói UI trên các dự án:



Tạo Widgets tái sử dụng bằng cách hợp lại các Widgets khác, sau đó dễ

dàng xắp đặt chúng một cách tự động trong các Panel. Có muốn tái sử dụng

các Widget trong một project khác không? Đơn giản đóng gói nó thành file

JAR cho người khác sử dụng.

Sử dụng các thư viện JavaScript và native JavaScript code:

Có thể kết hợp JavaScript viết tay trong mã nguồn Java của ta để giao tiếp

với các API JavaScript hiện có. Ta có thể viết các phương thức JavaScript cá

nhân trực tiếp trong các file nguồn Java và thậm chí có thể đóng gói các đối

tượng JavaScript vào trong một lớp Java.

Hỗ trợ nút Back và History cho browser:

Các ứng dụng của AJAX không cần phải ngắt các nút Back của browser.

GWT làm cho trang của ta sử dụng dễ dàng hơn bằng cách thêm nút back

history cho browser.

Được sản xuất với các công cụ phát triển:

Bởi vì GWT sử dụng Java, nó sẽ bắt các lỗi như là lỗi đánh máy và các lỗi

so khớp khi ta viết code, không phải lúc runtime. IDE thì cấu trúc lại Java một

cách tự động, nhắc nhở hoặc hoàn thành code.

Bây giờ ta có thể sử dụng tất cả các công cụ phát triển Java yêu thích của ta

(Eclipse, IntelliJ, JProfiler) cho phát triển AJAX .

Kiểm tra code với JUnit:

GWT tích hợp trực tiếp với JUnit cho phép kiểm tra unit test trong

debugger và trong browser ... và thậm chí unit test bất đồng bộ RPCs.

GWT miễn phí và là mã nguồn mở:



GWT là miễn phí, và tất cả các mã được phát hành theo giấy phép Apache

2.0.

2.2 Google Plugin for Eclipse:

Google Plugin cho Eclipse là một bộ công cụ phát triển phần mềm cho phép các

developer Java thiết kế để design, xây dựng, tối ưu hóa, và triển khai các ứng dụng

dựa trên điện toán đám mây. GPE hỗ trợ rất hiệu quả cho các developer tạo ra nhiều

kinh nghiệm cho người sử dụng, tạo ra các code Ajax chất lượng cao sử dụng

Google Web Toolkit, và tối ưu hóa hiệu suất với Speed Tracer, và dễ dàng triển khai

các ứng dụng đến App Engine.

Là những công cụ mạnh mẽ để xóa bỏ sự nhàm chán và miễn phí để các developer

tập trung vào việc tạo ra ứng dụng tuyệt vời. GPE là bộ đầu tiên tích hợp các công

cụ phát triển được thiết kế đặc biệt cho các developer Java Eclipse để tạo ra các ứng

dụng nhanh chóng, đáng tin cậy và chất lượng cao cho Google cloud.

2.2.1 Bạn sẽ làm những cái gì?:

Cài đặt Plugin Google cho Eclipse và bắt đầu xây dựng các ứng dụng web tuyệt

vời mà sử dụng công nghệ của Google.

Xây dựng các ứng dụng web phong phú bằng cách sử dụng các tích hợp GWT,

GWT UI designer , App Engine, Google API, và hỗ trợ Project Hosting.

Triển khai các ứng dụng đến App Engine với một nhấp chuột duy nhất, và tận dụng lợi

thế của Cloud của Google.

3 Developing with Google Web Toolkit:

3.1 Write:

GWT SDK cung cấp một tập hợp các cốt lõi của Java APIs và các Widget.

Chúng cho phép chúng ta viết các ứng dụng AJAX trong Java và sau đó biên



dịch các mã nguồn này thành JavaScript, chúng chạy được trên tất cả các

trình duyệt, bao gồm cả trình duyệt di động cho Android và iPhone.

Xây dựng các ứng dụng AJAX theo cách này thì phong phú hơn vì vận dụng

DOM và XHR .

Ta không bị bó buộc vào các widgets. Bất cứ điều gì có thể làm với DOM và

JavaScript của trình duyệt thì có thể thực hiện được trong GWT, bao gồm cả

tương tác viết tay với JavaScript.

3.2 Debug

Có thể debug các ứng dụng AJAX trong IDE giống như một ứng dụng

desktop, và trong browser. Các plugin GWT cầu nối giữa Java bytecode

trong trình gỡ lỗi và các trình duyệt JavaScript.

Nhờ các plugin của GWT, mới có sự biên dịch code thành JavaScript để xem

được nó trong browser. Có thể sử dụng chu trình „edit-refresh-view‟ cho

JavaScript, trong cùng thời điểm có thể kiểm tra các biến, thiết lập các

breakpoint và sử dụng các công cụ debugger khác có sẵn cho java. Các phát

triển của GWT được triển khai trong các browser hiện nay của họ. Chúng ta

có thể sử dụng các tool như Firebug và Inspector khi code trong java.

3.3 Optimize (Tối ưu hóa):

Google Web Toolkit bao gồm hai công cụ mạnh mẽ để tạo ra các ứng dụng

web tốt hơn. Trình biên dịch của GWT làm tối ưu hóa toàn diện các codebase

, loại bỏ các code chết, tối ưu hóa các string. Hơn thế, bằng cách thiết lập

split-point (chia điểm) trong code, nó cũng có thể phân code ra thành từng

đoạn và tải về các đoạn JavaScript, phân tách các ứng dụng lớn ra để thời

gian khởi động nhanh hơn.



Hiệu suất nghẽn cổ chai (bottlenecks) không sãy ra trong JavaScript. Speed

Tracer là một tiện ích mở rộng mới của Chrome trong Google Web Toolkit

giúp chuẩn đoán các vấn đề hiệu suất trong trình duyệt.

3.4 Run:

Khi triển khai, GWT biên dịch một cách tối ưu hóa code Java thành các file

JavaScript độc lập, nó chạy tự động trên tất cả các trình duyệt, cũng như các

trình duyệt di động cho Android và iPhone.

4. Developer's Guide

Hướng dẫn này giới thiệu về các khái niệm quan trọng, các tool, và các thư viện, chúng ta

sẽ gặp phải khi xây dựng các ứng dụng với GWT.

Các chủ đề trong dự án này hướng dẫn tổ chức, mã hóa, gỡ lỗi, kiểm tra, tối ưu hóa

và phát hành các ứng dụng web.

4.1 Tutorials:

- Create, build and run a GWT application : Tạo, xây dựng, gỡ lỗi và biên dịch một

ứng dụng mẫu.

- Communicating with the server : Thêm một cuộc gọi bất đồng bộ đến một web

server bằng cách sử dụng GWT RPC hoặc JSON, xắp đặt các đối tượng Java và xử

lý các trường hợp ngoại lệ.

- Internationalizing a GWT application : Dịch giao diện người dùng của một ứng

dụng GWT sang ngôn ngữ khác.

- Unit testing with JUnit : Thêm các unit test cho một ứng dụng GWT sử dụng Junit.

- Deploying to Google App Engine : Triển khai một ứng dụng GWT đến App

Engine.

http://code.google.com/webtoolkit/doc/latest/tutorial/gettingstarted.html

http://code.google.com/webtoolkit/doc/latest/tutorial/clientserver.html

http://code.google.com/webtoolkit/doc/latest/tutorial/i18n.html

http://code.google.com/webtoolkit/doc/latest/tutorial/JUnit.html

http://code.google.com/webtoolkit/doc/latest/tutorial/appengine.html



4.2 Developer Guide:

- Organize Projects : Mô tả các quy ước để xác định code được thiết kế để chạy

trên browser- client, server, hoặc cả hai.

- Compile & Debug : Mô tả các chế độ khai triển và sản phẩm.

- Coding Basics : Mô tả nguyên tắc cơ bản lập trình GWT

- Build User Interfaces : Làm thế nào để làm việc với các widgets, panels, DOM, sự

kiện, CSS, khai báo UI và image.

- HTML5 Feature Support : Mô tả GWT hỗ trợ cho các tính năng của HTML5,

Storage, Canvas, Audio, Video, drag and drop…

- Security for GWT Applications : Làm thế nào để bảo mật các ứng dụng GWT

chống lại các cuộc tấn công của JavaScript

- Security: Safe HTML: Mô tả các nguyên tắc mã hóa để ngăn chặn một class lớn

của các lỗ hổng Cross-Site Scripting (XSS)

- Security: GWT RPC XSRF protection: Mô tả làm thế nào để ngăn chặn các lỗ

hỗng Cross-Site Request Forgery (XSRF or CSRF) trong GWT RPCs.

- MVP Framework : Các ứng dụng mẫu và các tài liệu thể hiện làm thế nào để sử

dụng Activities, Places và các EventBus.

- RequestFactory : Hướng dẫn để tạo ra các dữ liệu theo định hướng dịch vụ bằng

cách sử dụng các lass RequestFactory và EntityProxy.

- Logging: Mô tả làm thế nào để đăng nhập các sự kiện trong client-side code trong

các ứng dụng GWT

- Accessibility – Describes features that enable screen readers to interpret what is

displayed on the screen for a visually impaired user

- Internationalization – Describes a flexible set of tools to help you internationalize

your applications and libraries

- Communicate with a Server – Describes a couple of different ways to

communicate with a server via HTTP

- Test with JUnit – Describes how to use the JUnit unit testing framework and

Emma code coverage tool

http://code.google.com/webtoolkit/doc/latest/DevGuideOrganizingProjects.html

http://code.google.com/webtoolkit/doc/latest/DevGuideCompilingAndDebugging.html

http://code.google.com/webtoolkit/doc/latest/DevGuideCodingBasics.html

http://code.google.com/webtoolkit/doc/latest/DevGuideUi.html

http://code.google.com/webtoolkit/doc/latest/DevGuideHtml5.html

http://code.google.com/webtoolkit/articles/security_for_gwt_applications.html

http://code.google.com/webtoolkit/doc/latest/DevGuideSecuritySafeHtml.html

http://code.google.com/webtoolkit/doc/latest/DevGuideSecurityRpcXsrf.html

http://code.google.com/webtoolkit/doc/latest/DevGuideMvpActivitiesAndPlaces.html

http://code.google.com/webtoolkit/doc/latest/DevGuideRequestFactory.html

http://code.google.com/webtoolkit/doc/latest/DevGuideLogging.html

http://code.google.com/webtoolkit/doc/latest/DevGuideA11y.html

http://code.google.com/webtoolkit/doc/latest/DevGuideI18n.html

http://code.google.com/webtoolkit/doc/latest/DevGuideServerCommunication.html

http://code.google.com/webtoolkit/doc/latest/DevGuideTesting.html



- Deploy – Describes how to deploy both client- and server-side JavaScript

- Optimize – Describes how to improve the performance of your application

- IE9 Support - Tips and Tricks 2.3

- Support for Internet Explorer 9

- Reference – Provides javadoc for GWT and related libraries and technical details

for GWT widgets

- FAQ – Frequently asked questions

- Glossary – GWT terminology

http://code.google.com/webtoolkit/doc/latest/DevGuideDeploying.html

http://code.google.com/webtoolkit/doc/latest/DevGuideOptimizing.html

http://code.google.com/webtoolkit/doc/latest/DevGuideIE9.html

http://code.google.com/webtoolkit/doc/latest/RefGuide.html

http://code.google.com/webtoolkit/doc/latest/FAQ.html

http://code.google.com/webtoolkit/doc/latest/DevGuideGlossary.html



II. ORGANIZE PROJECTS

Các GWT project có thể được tổ chức với nhiều cách khác nhau. Khuyến khích nên tạo

ra nó dễ dàng nhất để chạy trên các browser, server hoặc cả hai.

Phần này mô tả các nguyên tắc cơ bản để tổ chức dự án với GWT giống như các quy ước

đã được giới thiệu.

HTML Host Pages

Standard Directory and Package Layout

Modules: Units of configuration

Module XML files

How do I know which GWT modules I need to inherit?

Automatic Resource Inclusion

Filtering Public and Source Packages

The Bootstrap Sequence

1. HTML Host Pages:

Các module GWT được lưu trữ trên một máy chủ web như là một tập hợp các tập tin

JavaScript và tập tin liên quan. Để mà chạy được các module này, nó phải được load

từ một số web page.

Bất kỳ trang HTML có thể chứa một ứng dụng GWT thông qua một thẻ SCRIPT.

Trang HTML này thường được gọi là một trang chủ từ quan điểm của ứng dụng GWT

của. Trang HTML này thì được gọi đến như là một host page từ GWT ứng dụng.Một

trang HTML điển hình cho một ứng dụng được viết từ đầu bằng GWT , có thể HTML

body không chứa bất kỳ nội dung hiển thị nào.

http://code.google.com/webtoolkit/doc/latest/DevGuideOrganizingProjects.html#DevGuideHostPage

http://code.google.com/webtoolkit/doc/latest/DevGuideOrganizingProjects.html#DevGuideDirectoriesPackageConventions

http://code.google.com/webtoolkit/doc/latest/DevGuideOrganizingProjects.html#DevGuideModules

http://code.google.com/webtoolkit/doc/latest/DevGuideOrganizingProjects.html#DevGuideModuleXml

http://code.google.com/webtoolkit/doc/latest/DevGuideOrganizingProjects.html#DevGuideInheritingModules

http://code.google.com/webtoolkit/doc/latest/DevGuideOrganizingProjects.html#DevGuideAutomaticResourceInclusion

http://code.google.com/webtoolkit/doc/latest/DevGuideOrganizingProjects.html#DevGuidePathFiltering

http://code.google.com/webtoolkit/doc/latest/DevGuideOrganizingProjects.html#DevGuideBootstrap



Ví dụ dưới đây cho thấy làm thế nào để nhúng một ứng dụng GWT, ứng dụng này sẻ

sử dụng browser

Lưu ý rằng body của trang chứa chỉ một thẻ SCRIPT và một thẻ IFRAME. Để các

ứng dụng GWT hiện các nội dung cho người dùng.

Tuy nhiên, GWT được thiết kế để thêm các chức năng cho các ứng dụng web rất dễ dàng

chỉ với vài sự thay đổi nhỏ. GWT cho phép mô-đun GWT chọn lọc để chèn widget vào

các vị trí cụ thể trong một trang HTML. Để thực hiện điều này, sử dụng thuộc tính id

trong các thẻ HTML để xác định một định danh duy nhất để đính kèm các widgets cho

phần tử HTML đó. Ví dụ:

<html> <head>  <meta name='gwt:property' content='locale=en_UK'>  <link rel="stylesheet" href="Calendar.css">  <title>Calendar App</title> </head> <body>     <script language="javascript" src="calendar/calendar.nocache.js"></script>   <iframe src="javascript:''" id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe> </body> </html>



Chú ý rằng các thẻ td chứa một thuộc tính id liên kết chúng với nhau. Thuộc tính này

được truy cập nhờ DOM class. Có thể dễ dàng đính kèm các widget bằng cách sử dụng

phương RootPanel.get (). Ví dụ:

Bằng cách này, các tính năng của GWT có thể được thêm vào như là một phần của một

trang đó, và việc thay đổi cách bố trí ứng dụng có thể được thực hiện trong HTML.

Một host HTML page không phải là trang tĩnh. Nó cũng có thể được tạo ra bởi một

servlet, hoặc bằng một trang JSP.

2. Standard Directory and Package Layout

Các java package nằm trong các GWT project. Như vậy hầu hết các cấu hình của nó có

thể được suy ra từ các định nghĩa classpath và mô-đun.

<body>  <table align=center> <tr> <td id="slot1"></td> <td id="slot2"></td> </tr> </table> </body>

final Button button = new Button("Click me"); final Label label = new Label(); RootPanel.get("slot1").add(button); RootPanel.get("slot2").add(label);



2.1 Hướng dẫn:

Nếu không sử dụng các công cụ Command-line để tạo ra các tập tin và thư mục của

project , đây là một số hướng dẫn cần lưu ý khi tổ chức code và tạo ra các Java

package.

1. Các thư mục chính của project tạo được ra như các thư mục sau :

o Src folder: chứa các sản phẩm của Java source

o War folder: các ứng dụng web của ta, chứa các tài nguyên tĩnh.

o Test folder: (tùy chọn ) JUnit kiểm tra code sẽ đặt ở đây.

2. Trong các src package, tạo một package gốc và client package của

project .

3. Nếu có code cho phí server, thì sẽ tạo một server package để phân biệt

giữa code phía client( cái sẽ được dịch thành JavaScript) với code phía

server ( cái không được dịch).



4. Trong package root: chứa một hoặc nhiều module xác định

5. Trong thư mục war: chứa các tài nguyên tĩnh (như là host page, style

sheet or image)

6. Trong gói client và server: ta được tự do tổ chức code vào trong bất cứ

các subpackage nào ta muốn.

2.2 Example: GWT standard package layout:

Ví dụ, tất cả các file mẫu "DynaTable" được tổ chức trong một thư mục chính của

project cũng có tên là "DynaTable".

o Các file Java nguồn ở trong thư mục:

DynaTable/src/com/google/gwt/sample/dynatable

o Module này được định nghĩa trong file XML:

DynaTable/src/com/google/gwt/sample/dynatable/DynaTable.gwt.xml

o Package gốc của project này là: com.google.gwt.sample.dynatable

o Tên logic của module này là:

com.google.gwt.sample.dynatable.DynaTable

2.3 Thư mục src:

Thư mục src chứa các file nguồn, các module định nghĩa và các file tài nguyên bên

ngoài của một ứng dụng Java.



2.4 Các thư mục test:

Thư mục test này chứa file source cho bất kỳ JUnit test nào



3. Modules: Các đơn vị cấu hình

Các đơn vị riêng lẻ cấu hình của GWT thì được gọi là module. Một module bó tất

cả các thiết lập cấu hình của GWT project với nhau.

o Thừa kế các module.

o Tên cuả entry point class của một ứng dụng, chúng không bắt buộc, mặt dù bất

kỳ module thành phần nào trong HTML phải có ít nhất một class chỉ định

entry-point.

o Các mục path của nguồn

o Các mục public path

o Quy định liên kết trì hoãn, bao gồm cung cấp các thuộc tính và sinh ra class.

Các module được định nghĩa trong XML và đưa vào các gói phân cấp của project.

Các Module có thể xuất hiện trong bất kỳ classpath của ta, mặc dù nó có khuyến cáo

rằng chúng nên xuất hiện trong gói root của một standard project layout.

4. Xác định một module: định dạng của các tập tin module XML

Các module được định nghĩa trong các tập tin XML với một phần mở rộng tập tin là

.gwt.xml. Các tập tin module XML này sẽ nằm trong gói root của project.



Nếu sử dụng cấu trúc project tiêu chuẩn, module XML có thể như ví dụ sau:

4.1 Entry-Point Classes

Một module entry-point là class bất kỳ mà class đó chuyển nhượng đến EntryPoint

được và nó có thể được tạo ra mà không cần phải có tham số. Khi một module

được load, mỗi entry point class được gọi rất nhanh chóng và phương thức

EntryPoint.onModuleLoad() sẽ được gọi.

4.2 Tải nhiều modules vào trong một HTML host page:

Nếu có nhiều GWT module trong ứng dụng, có hai cách để tải chúng

Biên dịch mỗi module riêng biệt và chứa mỗi module trong một thẻ <script>

riêng biệt trong HTML host page.

Tạo ra một các cấp chỉ định cho module XML, chứa tất cả các module ta muốn

chứa. Gom các cấp chỉ định của module đó để xuất ra một tập JavaScript duy

nhất.

Phương pháp đầu tiên có vẻ dễ và rõ ràng nhất. Tuy nhiên, cách hai có hiệu quả

cho người dùng hơn. Vấn đề khi load nhiều module thì mỗi module được load một

cách riêng biệt bởi browser của người. Ngoài ra, mỗi module sẽ chứa các bảng sao

dự phòng thư viên code của GWT và có thể xung đột với nhau trong sốt quá trình

sử lý sự kiện. Cách hai được khuyến khích dùng hơn.

4.3 XML Element Reference:

o <inherits name="logical-module-name" />: Thừ kế tất cả các thiết lập từ

module đã chỉ định. Các module XML được thừa kế đó nó giống như module

gốc.



o <entry-point class="classname" /> : Chỉ định một entrypoint- class. Có thể

thêm vào nhiều entrypoint- class, bao gồm cả các module thừa kế.

o Các entrypoint được biên dịch thành một codebase duy nhất. Các entry-point

class đó sẽ được gọi theo thứ tự mà nó xuất hiện trong file module.Vì vậy sau

khi phương thức onModuleLoad() hoàn tất việc truy cập lần đầu tiên, thì entry-

point tiếp theo được gọi thực thi.

o <source path="path" />:

o <public path="path" /> : bất kỳ tập tin nằm trong package này hoặc trong bất

kỳ subpackage của nó sẽ được xem là tài nguyên được truy cập chung.

o <servlet path="url-path" class="classname" />: Đối với RPC, element này tải

một servlet-class đã chỉ định tại đường dẫn URL. Đường dẫn URL là tuyệt đối

và có dạng là một thư mục (ví dụ, / calendar).

o <script src="js-url" /> : tự động truyền các tập tin JavaScript bên ngoài vào.

o <stylesheet src="css-url" /> : tự động thêm các tập tin CSS bên ngoài vào.

o <extend-property name="client-property-name" values="comma-separated-

values" /> : mở rộng một tập các thuộc tính cho client.



III. CODING BASICS

1. Client-Side Code:

Các ứng dụng của ta sẽ được gởi cho người dùng thông qua mạng và những ứng dụng

này sẽ chạy như JavaScript bên phía browser của người dùng. Tất cả những cái xảy ra

bên trong trình duyệt web của người dùng thì được gọi là xử lý phía client. Khi ta viết

code cho phía client thì chúng sẽ được chạy trên trình duyệt web, và cuối cùng chúng đều

trở thành JavaScript.

1.1 Tạo một EntryPoint Class:

Để bắt đầu viết một GWT module, phân lớp lớp-EntryPoint.

Tip: Ứng dụng Creator của GWT tạo ra một ứng dụng khởi đầu với một phân lớp mẫu

– EntryPoint.

1.2 Viết phương thức entry point:



Phương thức entry-point là onModuleLoad(). Nó chứa các code thực thi khi ta khởi

chạy ứng dụng. Thông thường những cái ta làm trong phương thức onModuleLoad()

là:

o Tạo các thành phần giao diện người dùng mới.

o Thiết lập xử lý cho các sự kiện.

o Chỉnh sửa trình duyệt DOM theo một cách nào đó.

Ví dụ: đăng nhập một message phát triển ở chế độ developnent console. Nếu ta cố gắn

chạy ứng dụng đó trong chế độ- production, ta sẽ không nhìn thấy được gì bởi phương

thức GWT.log() bị mất đi khi biên dịch khi code phí client được dịch sang JavaScript.

1.3 Ví dụ Hello World:

Chương trình „Hello World‟ này chạy trên chế độ development.



Trong phương thức entry-point cho ứng dụng Hello Word trên, các hành động đã

được thực hiện:

o Một Button widget mới được tạo ra với tên: “ Click me”.

o Một hàm xử lý được tạo ra để trả lời cho user khi click vào button đó.

o Một hàm xử lý pop up một hộp thoại Alert.

o Button đó được thêm vào Root panel.

2. Number and Date Formatting:

GWT không hỗ trợ đầy đủ các class định đạng date và number (java.text.DateFormat,

java.text.DecimalFormat, java.text.NumberFormat, java.TimeFormat,..). Thay vào đó

một tập các chức năng của class-JRE thì được cung cấp bởi

com.google.gwt.i18n.client.NumberFormat và

com.google.gwt.i18n.client.DateTimeForma



Sự khác biệt lớn giữa các lớp Java chuẩn và các lớp GWT đó là khả năng chuyển đỗi

giữa các different local cho định dạng date và number trong lúc chạy. Để sử dụng các lớp

NumberFormat hoặc các lớp học DateTimeFormat, nên cập nhật file XML module với

„inherits‟:

2.1 Sử dụng NumberFormat:

Khi sử dụng các lớp NumberFormat, ta không khởi tạo trực tiếp. Thay vào đó,lấy

một thể hiện bằng cách gọi một trong những phương thức tĩnh của nó Format().

Đối với hầu hết các trường hợp, ta thường sử dụng định dạng decimal mặc định.

Các class này có thể sử dụng để chuyển đổi một numeric string trở lại thành double

Dưới đây là các ký hiệu mẫu thường gặp nhất được sử dụng cho các định dạng

decimal:



Khi xác định một mẫu không hợp lệ thì phương thức NumberFormat.getFormat() sẽ

ném ra một ngoại lệ java.lang.IllegalArgumentException.

2.2 Sử dụng DateTimeFormat:

GWT cung cấp các lớp DateTimeFormat để thay thế tính năng cho các lớp

DateFormat và TimeFormat của JRE.

Đối với lớp DateTimeFormat, một số lượng lớn xác định các dạng là mặc định



Giống như các lớp NumberFormat, ta có thể dùng lớp này để parse một ngày

tháng từ kiểu String thành kiểu Date.

Ta có thể tùy chọn định dạng mặc định cho date và time kết hợp, hoặc có thể xây

dựng định dạng riêng bằng cách sử dụng một chuỗi mẫu.

3. JavaScript Object Notation (JSON):

Nhiều nhà phát triển ứng dụng AJAX chọn JSON là định dạng dữ liệu cho các

serve trao đổi với nhau. JSON là một định dạng khá đơn giản dựa trên các ký hiệu

object-literal của JavaScript.

Nếu chọn JSON để mã hóa data trong các ứng dụng, có thể sử dụng các lớp của

GWT để parse và phân tích các đối tượng JSON.

Các định dạng của JSON dựa trên cú pháp và các loại dữ liệu của ngôn ngữ

JavaScript. Nó hỗ trợ các giá trị kiểu string, number, và null. Có thể kết hợp nhiều

giá trị vào trong các array và object. Các đối tượng JSON là những tập các cặp

name/ value không có thứ tự. Name thì luôn là kiểu string và value là bất kỳ loại

JSON hợp lệ nào ( thậm chí là một object khác). Ví dụ: mã hóa dữ liệu „product‟

bằng JSON:



3.1 Parsing JSON:

Có thể parse JSON String và chuyển đổi chúng thành một JavaScriptObject trong

GWT với một phương pháp đơn giản JSNI.

Thông thường, đáp ứng một yêu cầu HTTP thì dữ liệu JSON sẽ được trả về dưới

dạng text. Vì vậy, trước tiên phải chuyển đổi String thành Object. Khuyến khích

khi tương tác với JavaScriptOject nên sử dụng JavaScript Overlay Types.

3.2 Mashups with JSON and JSON:

Nếu tải các dữ liệu mã hóa bằng JSON từ máy chủ riêng của ta, ta thường sử dụng

RequestBuilder và các class liên quan để tạo các yêu cầu HTTP. Tuy nhiên, ta có

thể nhận các JSON từ các máy chủ từ xa sử dụng các tính năng JavaScript Native

Interface (JSNI) của GWT.

4. Working with XML:

Extensible Markup Language (XML) là một loại định dạng dữ liệu thường được sử

dụng trong các ứng dụng web ngày nay. Lớp thư viện của GWT chứa một tập hợp các

types được thiết kế để xử lý dữ liệu XML.

4.1 XML types

Các XML types có thể tìm thấy trong gói com.google.gwt.xml.client. Để sử dụng

được nó trong các ứng dụng ta thêm thẻ <inherits> vào module XML file.



4.2 Parsing XML

Để minh họa làm thế nào để parse XML với GWT, sử dụng tài liệu XML mẫu sau nó

chứa một email message:

Giả sử ta đang viết một ứng dụng email và cần trích xuất từ file XML đó: tên người

gởi, dòng chủ đề, và nội dung tin nhắn. Đây là code làm việc đó:



Đầu tiên parse các XML text thành một cấu trúc một XML DOM mà ta sử dụng để

chuyển dữ liệu. XML parser của GWT được chứa trong lớp XMLParser. Gọi phương

thức tĩnh parse(String) để phân tích XML đó và trả về một đối tượng Document. Nếu

có một lỗi xảy ra trong quá trình phân tích ( ví dụ: file XML đó không well-formed),

thì XMLParser sẽ ném một DOMException.

Nếu phân tích thành công, thì đối tượng Decument tượng trưng cho tài liệu XML đó

sẽ nằm trong bộ nhớ. Nó là một tree bao gồm các đối tượng Node tổng quát. Một

node trong XML DOM này là một đơn vị dữ liệu căn bảng trong tài liệu XML. GWT

chứa một số subinterface cung cấp các phương thức đặc biệc để xử lý các loại node

khác nhau:



o Element: đại diện cho các DOM element, là các thẻ trong XML:

<someElement></someElement>.

o Text: đại diện cho text nằm giữa thẻ mở và thẻ đóng của một element:

<someElementHere is some text</someElement>.

o Comment: đại diện cho một XML comment.

o Attr: đại diện cho một thuộc tính của một element: element: <someElement

myAttribute="123" />.

Để lấy các node DOM từ đối tượng Document, sử dụng một trong ba phương thức

sau:

- GetDocumentElement () phương thức lấy về element gốc đầu tiên của DOM

tree như một Element . Sau đó có thể áp dụng các phương thức điều hướng của

class- Node (ví dụ, getChildNodes (), getNextSibling (), getParentNode (), vv)

vào Element để xâm nhập vào bên trong và lấy dữ liệu cần lấy.

- Có thể đi trực tiếp vào nút cụ thể hoặc danh sách các nút bằng cách sử dụng

phương thức getElementById (String) và getElementsByTagName (String).

- Phương thức getElementById (String) sẽ lấy các Element với ID được chỉ

định. GetElementsByTagName (String) là phương thức hữu ích, nếu ta muốn

lấy một hoặc nhiều element với một tên thẻ cụ thể thì danh sách các element sẽ

được trả về dưới dạng một đối tượng NodeList, phương thức này có thể lặp đi

lặp lại nhiều lần để lấy các node khác được chứa trong nó.

4.3 Building an XML document:

GWT XML types có thể được sử dụng để tạo và sửa đổi XML. Để tạo ra một tài liệu

XML mới thì gọi phương thức tĩnh createDocument () của lớp XmlParser. Có thể

thêm nhiều node vào DOM tree bằng cách sử dụng phương thức appendChild (Node)

và insertBefore (Node, Node). Phương thức để thay thế và loại bỏ các nút con

(replaceChild (Node, Node) và removeChild (Node).





IV. Xây dựng giao diện người dùng.

Các lớp giao diện người dung của GWT tương tự Các lớp giao diện người dùng

của frameworks như là Swing và SWT, ngoại trừ các widgets được trả lại bằng

cách sử dụng các thẻ HTML tạo tự động.

Trong lập trình JavaScript truyền thống, các giao diện người tự động tạo ra bằng

cách thao tác trên trình duyệt DOM. GWT cung cấp truy cập trực tiếp vào trình

duyệt DOM bằng cách sử dụng gói DOM, nó giúp sử dụng các lớp từ hệ thống

phân cấp Widget dễ dàng hơn. Các lớp Winget làm cho việc xây dụng các giao

diện nhanh hơn để kết nối một cách chính xác trên tất cả các trình duyệt.

- Cross-Browser Support: Sử dụng các vật dụng và vật liệu tổng hợp cho khả

năng tương thích trình duyệt chéo.

- Layout Using Panels: Khám phá các bảng khác nhau có sẵn cho bố trí.

- Widgets: tạo các điều khiển người dùng với các Wingets.

- Creating Custom Widgets: Tạo widget mới, widgets tổng hợp, hoặc các widgets

có nguồn gốc của JavaScript.

- Cell Widgets New 2.1: làm việc với widgets, panels, the DOM, events, CSS,

declarative UI and images.

- Editors New 2.1: Cho phép dữ liệu được lưu trữ trong một đồ thị đối tượng được

ánh xạ vào một đồ thị của các biên tập viên.

- Working with the DOM : khi cần thiết có thể thao tác trực tiếp lên trình duyệt

DOM.

- Events and Handlers: Xử lý các sự kiện được công bố bản bởi widgets

http://code.google.com/webtoolkit/doc/latest/DevGuideUiBrowser.html

http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html

http://code.google.com/webtoolkit/doc/latest/DevGuideUiCustomWidgets.html

http://code.google.com/webtoolkit/doc/latest/DevGuideUiCellWidgets.html

http://code.google.com/webtoolkit/doc/latest/DevGuideUiEditors.html

http://code.google.com/webtoolkit/doc/latest/DevGuideUiDom.html

http://code.google.com/webtoolkit/doc/latest/DevGuideUiHandlers.html



- Working with CSS: sử dụng kiểu widgets với các trang theo tầng

- Declarative UI with UiBinder: xây dựng cấu trúc widget and DOM từ XML

- Bundling Image Resources: Tối ưu hóa tải hình ảnh bằng cách giảm số lượng

yêu cầu HTTP cho hình ảnh

1. Developer's Guide - Cross-Browser Support :

GWT che chở khỏi những rắc rối từ các trình duyệt chéo. Các ứng dụng của GWT

sẽ làm việc tương tự như trên các phiên bản mới nhất của Internet Explorer,

Firefox, Chrome, và Safari. Giao diện DHTML được dùng để kiểm tra các ứng

dụng một cách kỹ lưỡng trên mọi trình duyệt.

GWT có thể trì hoãn bất cứ khi nào để sử dụng các giao diện trình duyệt gốc. Ví

dụ: nút widget của GWT là một HTML <button> được xây dựng trong thẻ <div>.

Nghĩa là các nút GWT thì thích hợp trong các trình duyệt khác nhau vì nó giống

điều khiển trình duyệt gốc: nhanh chóng, dễ tiếp cận và quen thuộc với người

dùng.

CSS là 1 ứng dụng web linh hoạt nhất. Các kiểu( styles) trong stylesheets được liên

kết đến mã ứng dụng bằng cách sử dụng tên kiểu( styles), ngoài ra còn tách sạch

kiểu(style) từ logic ứng dụng, điều này giúp các ứng dụng tải và làm việc nhanh

hơn, tiêu thụ ít bộ nhớ.

Mẹo: sử dụng phương pháp JSNI để lấy chuỗi Tác nhân Người dùng của trình

duyệt để thực thi sự phụ thuộc.

public static native String getUserAgent()

http://code.google.com/webtoolkit/doc/latest/DevGuideUiCss.html

http://code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html

http://code.google.com/webtoolkit/doc/latest/DevGuideUiImageBundles.html



{

return navigator.userAgent.toLowerCase();

}

2. Developer's Guide - Layout Using Panels :

Panels( bảng) trong GWT cũng giống như các đối tác bố trí trong các thư viện giao

diện người dùng khác. Sự khác biệt chính là các bảng GWT sử dụng các phần tử

HTML để bố trí các widgets mức con của mình.

Panels chứa widgets và panels khác. Chúng được sử dụng để xác định bố cục của

giao diện người dùng trong trình duyệt.

2.1 Basic Panels:

- RootPanel: là bảng điều khiển đứng cao nhất trong tất cả các widgets khác.

RootPanel.get() là 1 bảng điều khiển đơn bao bọc các tài liệu HTML trong thẻ

<body>.

- FlowPanel: là bảng điều khiển đơn giản. Nó tạo ra một yếu tố <div> duy nhất và

gắn vào bảng con trực tiếp mà không sửa đổi. Sử dụng trong trường hợp muốn có

natural HTML flow(dòng chảy gốc HTML ) để xác định cách bố trí của các

widgets con.

- HTMLPanel: cung cấp cách xác định cấu trúc HTML đơn giản. HTMLPanel

thường được sử dụng trong các mẫu UiBinder và có thể sử dụng nó trực tiếp.

- FormPanel: tái tạo hành vi của một form HTML. Bất kỳ widgets được bao bọc

bởi bảng điều khiển này sẽ được bọc trong một phần tử <form>.



- ScrollPanel: tạo ra một khu vực cuộn trong bảng điều khiển khác. Bảng điều

khiển này hoạt động tốt trong bảng bố trí với kích thước rõ rang.

- PopupPanel và DialogBox: tạo ra các quảng cáo đơn giản và hộp thoại. Chúng

chồng chéo nội dung hiện có trong cửa sổ trình duyệt và có thể được xếp chồng lên

nhau trên một trình duyệt khác.

- Grid và FlexTable: tạo ra các yếu tố <table> HTML truyền thống, và cũng có

thể được sử dụng như bảng, trong đó widgets có thể được thêm vào các cell( tế

bào) của chúng.

2.2 Layout Panels.

- RootLayoutPanel: Bảng là nơi chứa gốc mà tất cả các bảng sơ đồ bố trí khác

được đính kèm. Nó là dạng của mở rộng LayoutPanel, và do đó có thể vị trí bất kỳ

số lượng panel con tùy ý.

Thường sử dụng RootLayoutPanel như một container cho bảng điều khiển khác,

như trong đoạn sau đây:

DockLayoutPanel appPanel = new DockLayoutPanel(Unit.EM);

RootLayoutPanel.get().add(appPanel);

- LayoutPanel: là cơ chế bố trí chung nhất, và thường là một bố cục khác được

xây dựng. Tương tự gần nhất là AbsolutePanel, nhưng nó là tổng quát hơn ở chỗ

nó cho phép con của nó được định vị bằng cách sử dụng hạn chế tùy ý, như trong

ví dụ sau đây:

Widget child0, child1, child2;

LayoutPanel p = new LayoutPanel();

p.add(child0); p.add(child1); p.add(child2);



p.setWidgetLeftWidth(child0, 0, PCT, 50, PCT); // Left panel

p.setWidgetRightWidth(child1, 0, PCT, 50, PCT); // Right panel

p.setWidgetLeftRight(child2, 5, EM, 5, EM); // Center panel

p.setWidgetTopBottom(child2, 5, EM, 5, EM);

- DockLayoutPanel: tương tự như các widget DockPanel, và nó thể đạt được cấu

trúc như ý mà không cần sử dụng bảng. Thường sẽ sử dụng để xây dựng cấu trúc ở

cấp ứng dụng, như trong ví dụ sau đây:

DockLayoutPanel p = new DockLayoutPanel(Unit.EM);

p.addNorth(new HTML("header"), 2);

p.addSouth(new HTML("footer"), 2);

p.addWest(new HTML("navigation"), 10);

p.add(new HTML(content));

- SplitLayoutPanel: đồng nhất với DockLayoutPanel, tự động tạo ra một bộ chia

tín hiệu người sử dụng có thể kéo giữa mỗi cặp của widgets con. Chỉ hỗ trợ việc sử

dụng của các đơn vị điểm ảnh. Sử dụng thay vì HorizontalSplitPanel và

VerticalSplitPanel.

SplitLayoutPanel p = new SplitLayoutPanel();

p.addWest(new HTML("navigation"), 128);

p.addNorth(new HTML("list"), 384);

p.add(new HTML("details"));



- StackLayoutPanel: thay thế StackPanel hiện. Nó hiển thị một widget con tại một

thời điểm, mỗi trong số đó liên quan với một widget "tiêu đề".

StackLayoutPanel p = new StackLayoutPanel(Unit.EM);

p.add(new HTML("this content"), new HTML("this"), 4);

p.add(new HTML("that content"), new HTML("that"), 4);

p.add(new HTML("the other content"), new HTML("the other"), 4);

- TabLayoutPanel: Như TabPanel hiện hành, TabLayoutPanel hiển thị một hàng

của các tab có thể click. Mỗi tab có liên quan với một widget con, được hiển thị khi

người dùng nhấp vào tab.

TabLayoutPanel p = new TabLayoutPanel(1.5, Unit.EM);

p.add(new HTML("this content"), "this");

p.add(new HTML("that content"), "that");

p.add(new HTML("the other content"), "the other");

Khi nào không nên sử dụng LayoutPanel?

Được sử dụng để xác định cấu trúc bên ngoài của ứng dụng như "tài liệu". Nên tiếp

tục sử dụng các wedgets cơ bản và cấu trúc HTML cho những phần mà các thuật

toán bố trí HTML / CSS hoạt động tốt. Đặc biệt, hãy xem xét sử dụng các mẫu

UiBinder trực tiếp sử dụng HTML ở bất cứ nơi nào có ý nghĩa.

2.3 Animation

Hệ thống GWT 2.0 được xây dựng hỗ trợ hình ảnh động.

Panels thực hiện AnimatedLayout, chẳng hạn như LayoutPanel, DockLayoutPanel,

và SplitLayoutPanel, sử dụng hình ảnh động của widgets còn từ một tập các ràng

buộc khác. Thông thường này được thực hiện bằng cách thiết lập trạng thái theo

hướng mà bạn muốn động, sau đó gọi animate ().



2.4 RequiresResize and ProvidesResize.

Hai giao diện đặc trưng mới của GWT 2.0: RequiresResize và ProvidesResize.

Được sử dụng để truyền bá thông báo các sự kiện thay đổi kích cỡ trên toàn hệ

thống phân cấp widget.

RequiresResize cung cấp phương thức onResize (), gọi là widge cha, nó cho phép

các widget con kế thừa nó.

ProvidesResize chỉ đơn giản là một thẻ giao diện chỉ ra rằng một widget cha sẽ

tôn trọng nhiệm vụ này.

Mục đích của hai giao diện này là hình thành một hệ thống phân cấp không gián

đoạn giữa tất cả các widget thực hiện RequiresResize và RootLayoutPanel, lắng

nghe cho bất kỳ thay đổi (chẳng hạn như thay đổi kích thước cửa sổ trình duyệt.

- Khi nào thì sử dung phương thức onResize()?

Sử dụng khi muốn thay đổi các widgets mà không cần tương tác đến chúng.

- Khi nào thực thi ProvidesResize và thực thi như thế nào?

Được thự thi khhi muốn tuyên truyền các sự kiện thay đổi kích cỡ cho bất kỳ wiget

con của nó mà thực hiện RequiresResize. Hầu hết các widgets tùy chỉnh sẽ tổng

hợp panel layout hiện tại bằng cách sử dụng ResizeComposite.

- ResizeComposite

Khi tạo ra một widget tùy chỉnh hỗn hợp bọc một widget mà thực hiện

RequiresResize, nên sử dụng lớp cơ sở của nó.



2.5 Di chuyển đến chế độ tiêu chuẩn.

Hệ thống GWT 2.0 được thiết kế để chỉ làm việc trong "chế độ tiêu chuẩn". Điều

này có nghĩa là luôn luôn khai báo ở phía trên của các trang HTML như sau: <!

DOCTYPE html>

- Điều gi khiến không thể làm việc trong chế độ chuẩn ?

Do sự khác biệt giữa tiêu chuẩn và chế độ quirks làm cho bảng.

- CellPanel (HorizontalPanel, VerticalPanel, DockPanel)

Các panels hầu hêt sử dụng các bảng cells như cấu trúc cơ bản của chúng. Khi

chúng làm việc trong chế độ chuẩn, chúng sẽ đặt các panel con ở những vị trí khác

nhau. Điểm khác nhau chính là các panel con sẽ không có đặt tính chiều rộng và

chiều cao như panel cha. Ngoài ra còn có sự khác biệt trong cách mà trình duyệt

phân bổ không gian để các bảng và các cột có thể có hành vi bất thường trong chế

độ tiêu chuẩn.

DockLayoutPanel nên được sử dụng trong DockPanel.

VerticalPanel thường có thể được thay thế bằng một FlowPanel đơn giản (kể từ

khi khối cấp các yếu tố tự nhiên sẽ ngăn xếp lên theo chiều dọc).

HorizontalPanel thì phức tạp hơn, có thể thay thế nó với một DockLayoutPanel,

nhưng điều đó đòi hỏi các Horizontalpanel con phải được chỉ định độ rộng một

cách rõ ràng. Phổ biến nhất là sử dụng FlowPanel, và sử dụng float: left; CSS tài

sản trên con của nó.

- StackPanel

StackPanels không làm việc tốt trong chế độ tiêu chuẩn và nên thay thế bằng

StackLayoutPanel.



- SplitPanel (HorizontalSplitPanel and VerticalSplitPanel)

SplitPanels rất khó sử dụng trong chế độ tiêu chuẩn, nên thay thế chúng bằng

SplitLayoutPanel.

2.6 Thiết kế của hệ thống GWT 2.0.

Trước khi đến phiên bản 2.0, GWT có một số vấn đề quan trọng:

Không thể đoán trước được chúng sẽ xảy ra điều gì.

thường yêu cầu thêm mã để sửa chữa thiếu sót.

không phải tất cả điều làm việc tốt trong chế độ tiêu chuẩn.

- Mục tiêu:

Bố trí hoàn chính xác và toàn dự đoán được hành vi.

Nên làm việc trong sự hiện diện của CSS với các đơn vị tùy ý.

Làm việc chính xác trong chế độ chuẩn.

Sử dụng trình duyệt để làm hầu hết các công việc.khi cần thiết có thể điều

chỉnh bằng tay.

Hình ảnh tự động, mềm mại.

- The Layout class:

The Layout class chứa tất cả các logic cơ bản được sử dụng bởi hệ thống bố trí,

cùng với tất cả các chi tiết thực hiện được sử dụng để bình thường hóa hành vi bố

trí trên các trình duyệt khác nhau.

Nó thực sự là widget bất khả tri, điều hành trực tiếp trên các yếu tố DOM. Hầu hết

các ứng dụng sẽ không làm việc trực tiếp với lớp này.



- Constraint-based Layout

Hệ thống GWT 2.0 được xây dựng để sử dụng CSS. Điều này sử dụng các thuộc

tính đầu, chiều rộng, chiều cao, phải, và phía dưới. Lấy ví dụ CSS sau đây:

.parent {

position: relative; /* to establish positioning context */

}

.child {

position: absolute; left:1em; top:1em; right:1em; bottom:1em;

}

2.6 Ccông thức

- Basic application layout

Các mẫu sau đây cho thấy một ứng dụng cách bố trí đơn giản với một tiêu đề, một

khu vực điều hướng trên cạnh bên trái, và nội dung một khu vực cuộn.

<g:DockLayoutPanel unit='EM'>

<g:north size='4'>

<g:Label>Header</g:Label>

</g:north>

<g:west size='16'>

<g:Label>Navigation</g:Label>

</g:west>

<g:center>

<g:ScrollPanel>

<g:Label>Content Area</g:Label>

</g:ScrollPanel>



</g:center>

</g:DockLayoutPanel>

Cấu trúc này được đặt trong một thùng chứa thực hiện ProvidesResize, phổ biến

nhất RootLayoutPanel. Các mã sau đây chứng minh làm thế nào để làm điều này.

interface Binder extends UiBinder<Widget, BasicApp> { }

private static final Binder binder = GWT.create(Binder.class);

public void onModuleLoad() {

RootLayoutPanel.get().add(binder.createAndBindUi());

}

- Splitters

SplitLayoutPanel hoạt động giống như DockLayoutPanel, ngoại trừ việc nó hỗ trợ

các đơn vị điểm ảnh. Các cấu trúc ứng dụng cơ bản trên có thể được chia giữa các

menu và các khu vực nội dung như sau:


<g:north size='4'>

<g:Label>Header</g:Label>

</g:north>

<g:center>

<g:SplitLayoutPanel>

<g:west size='128'>

<g:Label>Navigation</g:Label>

</g:west>

<g:center>

<g:ScrollPanel>



<g:Label>Content Area</g:Label>

</g:ScrollPanel>

</g:center>

</g:SplitLayoutPanel>

</g:center>


- Layout animation

Để sử dụng hình ảnh động với một LayoutPanel, phải tạo một thiết lập ban đầu của

những hạn chế, sau đó tác động đến mục tiêu tập các ràng buộc. Trong ví dụ sau

đây, widget con được đặt ở phía trên, nhưng với chiều cao không để nó là hiệu quả

ẩn. Gọi LayoutPanel.forceLayout () "sửa chữa" các khó khăn ban đầu.

panel.setWidgetTopHeight(child, 0, PX, 0, PX);

panel.forceLayout();

Bây giờ cung cấp cho các widget một chiều cao và rõ ràng cuộc gọi

LayoutPanel.animate (int) để thay đổi kích thước trên 500 ms.

panel.setWidgetTopHeight(child, 0, PX, 2, EM);

panel.animate(500);

- Thực hiện một hỗn hợp RequiresResize

Widgets thực hiện RequiresResize mong đợi RequiresResize.onResize () khi có

bất cứ thay đổi kích thước nào của widget. Nếu đóng gói một widget trong một hỗn

hợp thì cần sử dụng ResizeComposite để đảm bảo rằng hàm gọi này chính xác:

class MyWidget extends ResizeComposite {

private LayoutPanel p = new LayoutPanel();



public MyWidget() {

initWidget(p);

}

}

- Hiển thị widget con.

Layout class bọc của các yếu tố con trong một "container" để làm việc đúng cách.

Nghĩa là khi gọi UIObject.setVisible ( Boolean) trên một widget trong một

LayoutPanel, nó sẽ không hoạt động khá như mong đợi: widget thực sự sẽ được

thực hiện vô hình, nhưng nó sẽ có xu hướng tiêu thụ các sự kiện chuột.

Sử dụng LayoutPanel.getWidgetContainerElement (Widget) và thiết lập để hiển thị

trực tiếp:

LayoutPanel panel = ...;

Widget child;

panel.add(child);

UIObject.setVisible(panel.getWidgetContainerElement(child), false);

- Sử dụng một LayoutPanel không có RootLayoutPanel.

Trong hầu hết trường hợp, nên đính kèm layout panels vào RootLayoutPanel, hoặc

trực tiếp hoặc thông qua các panel khác thực thi ProvidesResize.

Tuy nhiên, trường hợp cần phải sử dụng một bảng điều khiển bố trí trong một

widget bình thường (ví dụ, FlowPanel hoặc RootPanel) cần thiết lập kích thước của

panels rõ ràng, như trong ví dụ sau đây:



LayoutPanel panel = new LayoutPanel();

RootPanel.get("someId").add(panel);

panel.setSize("20em", "10em");

RootLayoutPanel không thể thay đổi tự động, nếu muốn thì phải làm bằng tay.

Điều này cũng áp dụng cho các tấm bố trí sử dụng trong PopupPanel và

DialogBox. Ví dụ sau đây cho thấy việc sử dụng một SplitLayoutPanel trong

DialogBox:

SplitLayoutPanel split = new SplitLayoutPanel();

split.addWest(new HTML("west"), 128);

split.add(new HTML("center"));

split.setSize("20em", "10em");

DialogBox dialog = new DialogBox();

dialog.setText("caption");

dialog.add(split);

dialog.show();

- Tables and Frames

Các Widgets được thực hiện bằng cách sử dụng <table> hoặc các yếu tố <frame>

tự động điền vào các không gian được cung cấp bởi bố trí. Để sửa lỗi phải thiết lập

rõ ràng các widgets chiều rộng và chiều cao đến 100%. Ví dụ sau đây cho thấy

điều này với một RichTextArea, được thực hiện bằng cách sử dụng một yếu tố

<iframe>.


<g:north size='2'>

<g:HTML>Header</g:HTML>

</g:north>



<g:south size='2'>

<g:HTML>Footer</g:HTML>

</g:south>

<g:center>

<g:RichTextArea width='100%' height='100%'/>

</g:center>


3. Developer's Guide – Widgets:

Có thể xây dựng giao diện người dùng trong GWT bằng cách sử dụng các

widgetsng được chứa trong bảng( panel). Widget cho phép tương tác với người sử

dụng một cách dễ dàng. Panels điều khiển vị trí của các yếu tố giao diện người

dùng trên trang. Widgets và Panel làm việc theo cách tương tự trên tất cả các trình

duyệt bằng cách sử dụng chúng, loại bỏ sự cần thiết phải viết mã chuyên ngành

cho mỗi trình duyệt

Widgets

Widgets xác định các ứng dụng đầu vào và đầu ra với người dùng. Ví dụ:

- Button: người dùng nhấp chuột nút để kích hoạt.

- TextBox: Các ứng dụng có thể hiển thị văn bản và người dùng có thể gõ vào hộp

văn bản



- Tree: Một hệ thống phân cấp đóng mở của các widgets.

- RichTextArea: Một trình soạn thảo văn bản cho phép người dùng để áp dụng

định dạng phong phú của văn bản.

Để không bị hạn vào tập hợp cảu các widget được cung cấp bởi GWT. Có một số

cách để tạo ra các widget tùy chỉnh:

- Có thể đóng gói với nhau các vật dụng hiện có và tạo ra một widget composite.

- Có thể viết GWT cam kết ràng buộc vào một widget JavaScript hiện tại.

- Có thể tạo widget riêng của bạn từ đầu bằng cách sử dụng Java hay JavaScript.



Styles(kiểu)

Kiểu trực quan được áp dụng cho các widget bằng cách sử dụng Cascading Style

Sheets (CSS). Bên cạnh các định nghĩa trình duyệt mặc định được cung cấp, mỗi

widget GWT và bảng điều khiển đã định nghĩa kiểu lớp được xác định trước trong

các tài liệu tham khảo lớp.

Xem thêm

Creating Custom Widgets: hảo luận về làm thế nào để tạo ra các widget của

riêng bạn trong GWT

Layout Using Panels :Ví dụ làm thế nào để sử dụng các Panels.

4. Developer's Guide - Creating Custom Widgets:

GWT dễ dàng tạo ra các yếu tố giao diện người dùng. Có ba chiến lược chung:

- Tạo một widget là một hỗn hợp các widget hiện có.

- Tạo một tiện ích hoàn toàn mới được viết bằng ngôn ngữ Java.

- Tạo một tiện ích mà kết thúc tốt đẹp JavaScript sử dụng phương pháp JSNI.

- Xây dựng composite.

Cách hiệu quả nhất để tạo ra các widget mới là mở rộng các lớp composite.

Composite là một tiện ích chuyên biệt có thể chứa thành phần khác (như một

Panel), nhưng cư xử như thể nó là widget. Một vài thành phần UI trong GWT là

components.

Thay vì tạo ra các widget phức tạp bằng cách subclassing Panels hoặc loại Widget

khác, nó tốt hơn để tạo ra một component bởi vì một component thường muốn

điều khiển các phương pháp truy cập công cộng mà không lộ những phương pháp

mà nó sẽ kế thừa từ lớp cha của nó.

http://code.google.com/webtoolkit/doc/latest/DevGuideUiCustomWidgets.html

http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html



Ví dụ Composite Widget

Đoạn mã sau đây cho thấy làm thế nào để tạo ra một tiện ích component bao gồm

một widget TextBox và một widget CheckBox đặt ra trong một VerticalPanel.

package com.google.gwt.examples;

import com.google.gwt.core.client.EntryPoint;

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.RootPanel;

import com.google.gwt.user.client.ui.TextBox;

import com.google.gwt.user.client.ui.VerticalPanel;

import com.google.gwt.user.client.ui.Widget;

public class CompositeExample 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();

/**

* 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.

VerticalPanel panel = new VerticalPanel();

panel.add(checkBox);

panel.add(textBox);

// Set the check box's caption, and check it by default.

checkBox.setText(caption);

checkBox.setChecked(true);

checkBox.addClickHandler(this);

// All composites must call initWidget() in their constructors.

initWidget(panel);

// Give the overall composite a style name.

setStyleName("example-OptionalCheckBox");

}

public void onClick(ClickEvent event) {

Object sender = event.getSource();

if (sender == checkBox) {

// When the check box is clicked, update the text box's enabled state.

textBox.setEnabled(checkBox.isChecked());

}

}

/**

* Sets the caption associated with the check box.

*

* @param caption the check box's caption

*/

public void setCaption(String caption) {



// Note how we use the use composition of the contained widgets to provide

// only the methods that we want to.

checkBox.setText(caption);

}

/**

* Gets the caption associated with the check box.

*

* @return the check box's caption

*/

public String getCaption() {

return checkBox.getText();

}

}

public void onModuleLoad() {

// Create an optional text box and add it to the root panel.

OptionalTextBox otb = new OptionalTextBox("Check this to enable me");

RootPanel.get().add(otb);

}

}

From Scratch in Java Code

Được dùng để tạo ra widget bằng cách viết code ở mức thấp.

Sử dụng JavaScript

Có thể viết một số phương pháp của widget bằng cách sử dụng JavaScript. Điều

này nên nên được thực hiện như là một phương sách cuối cùng, vì nó trở nên cần

thiết để xem xét những tác động qua trình duyệt của các phương pháp gốc, và cũng

trở nên khó khăn hơn để gỡ lỗi. Đối với một ví dụ về mô hình này trong thực tế,

xem các widget TextBox và JavaScript thực hiện cơ bản của một số phương pháp



của nó trong lớp TextBoxImpl. Bạn nên sử dụng ràng buộc để cô lập mã trình

duyệt cụ thể

5. Developer's Guide - Accessing the Browser's DOM :

Các trình duyệt cung cấp một giao diện để kiểm tra và thao tác các yếu tố trên màn hình

bằng cách sử dụng DOM (Document Object Model. Lập trình viên JavaScript sử dụng

DOM để lập trình phần một phần giao diện người dùng và thực hiện DOM trên các trình

duyệt khác nhau.

Ngưởi lập trình không cần phải lo lắng về việc hỗ trợ trình duyệt chéo khi thực hiện giao

diện người dùng, GWT cung cấp một tập hợp các lớp widget và panels bọc chức năng

này. Nhưng vẫn phải cần truy cập vào DOM. Ví dụ, nếu muốn:

- Cung cấp một tính năng trong giao diện người dùng của bạn mà GWT không hỗ trợ.

- Viết một lớp widget mới

- Truy cập vào một thành phần HTML được định nghĩa trực tiếp trong trang chủ.

- Xử lý các sự kiện trình duyệt ở mức thấp.

- Thực hiện một số bộ lọc, chế biến khác trên một tài liệu HTML được nạp vào trình

duyệt.

GWT cung cấp các lớp trong gói DOM để tương tác với DOM trực tiếp. Các lớp này

cung cấp giao diện tĩnh tương tác với các đối tượng DOM.

- Sử dụng DOM để thao tác một widget

Mỗi widget và panel có một yếu tố DOM cơ bản để có thể truy cập với phương thức

getElement (). Phương thức getElement () được sử dụng để có được các yếu tố cơ bản từ

DOM.



Ví dụ sau đây cho thấy làm thế nào để thiết lập một kiểu thuộc tính để thay đổi màu nền

của widget

private HTML htmlWidget;

// Other code to instantiate the widget...

// Change the description background color.

htmlWidget.getElement().getStyle().setBackgroundColor("#ffee80");

Phương thức getElement() bắt nguồn từ lớp cha Widget trả về một đối tượng phần tử

DOM đại diện cho một nút trong cấu trúc cây DOM và thêm một kiểu thuộc tính cho nó.

Đây là một ví dụ minh họa sử dụng DOM là không hoàn toàn cần thiết. Một phương pháp

thay thế là sử dụng kiểu và kiểu lớp khác nhau để các widget sử dụng các

setStylePrimaryName () hoặc setStyleName ().

Tìm một phần tử trong DOM

Ví dụ sau đây cho thấy làm thế nào để kết hợp một phương thức JSNI với mã Java để

thao tác DOM. Thủ tục JSNI sẽ lấy tất cả các yếu tố con là thẻ Neo. Các đối tượng phần

tử được chỉ định một ID duy nhất để truy cập dễ dàng từ Java:

/**

* Find all child elements that are anchor tags,

* assign a unique id to them, and return a list of

* the unique ids to the caller.

*/

private native void putElementLinkIDsInList(Element elt, ArrayList<String> list) /*-{

var links = elt.getElementsByTagName("a");

for (var i = 0; i < links.length; i++ ) {



var link = links.item(i);

link.id = ("uid-a-" + i);

[email protected]::add(Ljava/lang/Object;) (link.id);

}

}-*/;

Mã này lặp qua tất cả các thẻ neo trở về từ phương pháp trên và sau đó viết lại nơi nó chỉ

đến:

/**

* Find all anchor tags and if any point outside the site,

* redirect them to a "blocked" page.

*/

private void rewriteLinksIterative() {

ArrayList<String> links = new ArrayList<String>();

putElementLinkIDsInList(this.getElement(), links);

for (int i = 0; i < links.size(); i++) {

Element elt = Document.get().getElementById(links.get(i));

rewriteLink(elt, "www.example.com");

}

}

/**

* Block all accesses out of the website that don't match 'sitename'

* @param element An anchor link element

* @param sitename name of the website to check. e.g. "www.example.com"

*/

private void rewriteLink(Element element, sitename) {

String href = element.getPropertyString("href");

if (null == href) {



return;

}

// We want to re-write absolute URLs that go outside of this site

if (href.startsWith("http://") &&

!href.startsWith("http://"+sitename+"/") {

element.setPropertyString("href", "http://"+sitename+"/Blocked.html");

}

}

Phương pháp JSNI thiết lập một ID trên mỗi yếu tố để sử dụng sau đó như một đối số cho

document.getElementById (id) để lấy các phần tử trong Java.

- Sử dụng DOM để nắm bắt một sự kiện trình duyệt

GWT chứa một lớp sự kiện như một loại giao diện các sự kiện DOM gốc.

Ví dụ này cho thấy làm thế nào để sử dụng các phương thức DOM để đón một sự kiện

bàn phím cho các yếu tố cụ thể và xử lý chúng trước khi sự kiện này được gửi đi:

private ArrayList<Element> keyboardEventReceivers = new ArrayList<Element>();

/**

* Widgets can register their DOM element object if they would like to be a

* trigger to intercept keyboard events

*/

public void registerForKeyboardEvents(Element e) {

this.keyboardEventReceivers.add(e);

}

/**

* Returns true if this is one of the keys we are interested in



*/

public boolean isInterestingKeycode(int keycode) {

// ...

return false;

}

/**

* Setup the event preview class when the module is loaded.

*/

private void setupKeyboardShortcuts() {

// Define an inner class to handle the event

Event.addNativePreviewHandler(new NativePreviewHandler() {

public void onPreviewNativeEvent(NativePreviewEvent preview) {

NativeEvent event = preview.getNativeEvent();

Element elt = event.getEventTarget().cast();

int keycode = event.getKeyCode();

boolean ctrl = event.getCtrlKey();

boolean shift = event.getShiftKey();

boolean alt = event.getAltKey();

boolean meta = event.getMetaKey();

if (event.getType().equalsIgnoreCase("keypress") || ctrl || shift

|| alt || meta || keyboardEventReceivers.contains(elt)

|| !isInterestingKeycode(keycode)) {

// Tell the event handler to continue processing this event.

return;

}

GWT.log("Processing Keycode" + keycode, null);

handleKeycode(keycode);



// Tell the event handler that this event has been consumed

preview.consume();

}

});

}

/**

* Perform the keycode specific processing

*/

private void handleKeycode(int keycode) {

switch (keycode) {

// ...

}

}

6. Developer's Guide - Event Handlers:

Sự kiện trong GWT sử dụng mô hình xử lý tương tự như với các khuôn khổ giao

diện người dùng khác. Một giao diện xử lý xác định một hoặc nhiều phương pháp

mà widget gọi để thông báo một sự kiện. Giao diện xử lý liên quan là

ClickHandler.

Ví dụ sau đây cho thấy làm thế nào để thêm một lớp con ClickHandler tùy chỉnh

một thể hiện của một Button:

public void anonClickHandlerExample() {

Button b = new Button("Click Me");

b.addClickHandler(new ClickHandler() {


// handle the click event



}

});

}

Sử dụng các lớp vô danh bên trong như trong ví dụ trên có thể sử dụng bộ nhớ quá

nhiều cho một số lượng lớn các widget, vì do kết quả trong việc tạo ra các đối

tượng xử lý quá nhiều. Thay vì tạo ra các trường hợp riêng biệt của đối tượng

ClickHandler cho mỗi widget yêu cầu được lắng nghe, xử lý duy nhất có thể được

chia sẻ giữa nhiều widget. Widgets tuyên bố mình là nguồn gốc của một sự kiện

khi nó gọi một phương thức xử lý, cho phép xử lý duy nhất để phân biệt giữa các

nhà xuất bản nhiều sự kiện với getSource một đối tượng sự kiện (). Điều này làm

cho tốt hơn sử dụng bộ nhớ nhưng đòi hỏi mã hơn một chút. Ví dụ:

public class HandlerExample extends Composite implements ClickHandler {

private FlowPanel fp = new FlowPanel();

private Button b1 = new Button("Button 1");

private Button b2 = new Button("Button 2");

public HandlerExample() {

initWidget(fp);

fp.add(b1);

fp.add(b2);

b1.addClickHandler(this);

b2.addClickHandler(this);

}


// note that in general, events can have sources that are not Widgets.

Widget sender = (Widget) event.getSource();

if (sender == b1) {



// handle b1 being clicked

} else if (sender == b2) {

// handle b2 being clicked

}

}

}

7. Developer's Guide - CSS Style:

7.1 Kiểu mở rộng của widget:

Widget GWT dựa vào Cascading Style Sheets (CSS) tạo kiểu hình ảnh.

Trong GWT, mỗi lớp của widgets có tên kiểu liên quan đến một quy tắc CSS và có

thể chỉ định một id tới một thành phần đặc biệt để tạo ra một CSS chỉ áp dụng đối

với một thành phần. Mặc định, tên lớp cho mỗi thành phần là gwt-<classname>. Ví

dụ: các widget Button có một kiểu mặc định của gwt-Button.

Để cung cấp cho tất cả các nút một phông chữ lớn hơn hãy đặt các quy tắc sau đây

trong tập tin CSS:

.gwt-Button { font-size: 150%; }

Tất cả các widget được tạo ra với bộ công cụ GWT sẽ có một tên lớp mặc định,

nhưng tên kiểu của một widget có thể được thiết lập sử dụng setStyleName (). Các

yếu tố tĩnh có thể đã thiết lập lớp trong mã nguồn HTML cho các ứng dụng.

Một cách khác để sử dụng style sheets là chỉ định một widget. Như thế cần phải

biết giá trị của thuộc tính id của widget hoặc thành phần DOM.



Theo mặc định, không phải là trình duyệt nào cũng tạo ra các thuộc tính id mặc

định cho các widget. Phải tạo ra một id và bảo đảm rằng mỗi giá trị "id" là duy

nhất. Phổ biến nhất để làm điều này là thiết lập trên các yếu tố tĩnh trong trang chủ

HTML.

<div id="my-button-id"/>

Để thiết lập id cho một widget GWT: lấy phần tử DOM và sau đó thiết lập các

thuộc tính id như sau:

Button b = new Button();

DOM.setElementAttribute(b.getElement(), "id", "my-button-id")

Điều này sẽ cho phép sử dụng một tiện ích cụ thể trong một style sheet như sau:

#my-button-id { font-size: 100%; }

7.2 Các kiểu phức tạp

Một số widgets có nhiều kiểu liên kết với chúng. Ví dụ Thanh menu có kiểu sau

đây:

.gwt-MenuBar {

/* properties applying to the menu bar itself */

}

.gwt-MenuBar .gwt-MenuItem {

/* properties applying to the menu bar's menu items */

}

.gwt-MenuBar .gwt-MenuItem-selected {

/* properties applying to the menu bar's selected menu items */

}



Trong đoạn code Style sheet trên, có hai kiểu quy tắc áp dụng cho các mục menu.

- Đầu tiên áp dụng cho tất cả các mục menu (chọn, không chọn).

- Thứ hai (với các lựa chọn hậu tố) chỉ áp dụng cho các mục menu được chọn.

Tên kiểu mục trình đơn được lựa chọn sẽ được thiết lập để "gwt-MenuItem

gwt-MenuItem selective".

Cách phổ biến nhất để làm điều này là sử dụng setStyleName đặt tên theo kiểu

cơ bản, sau đó là addStyleName () và removeStyleName () để thêm và loại bỏ

các tên kiểu thứ hai.

7.3 Liên kết tập tin CSS.

Có nhiều phương pháp tiếp cận liên kết CSS tập tin với modun:

* Sử dụng một thẻ <link> trong trang HTML chủ.

* Sử dụng các yếu tố <stylesheet> trong file XML mô-đun.

* Sử dụng một CssResource được chứa trong ClientBundle một.

* Sử dụng một yếu tố <ui:style> trong một khuôn mẫu UiBinder.

Các ứng dụng GWT hiện đại thường sử dụng kết hợp CssResource và

UiBinder. Các ứng dụng cũ chỉ nên sử dụng một trong hai sự lựa chọn đầu tiên

- Style sheets Trang chủ HTML.

Thông thường, style sheets được đặt trong một gói là một phần của modun.

Việc cần làm chỉ đơn giản là thêm một <link> vào bảng mẫu trong trang chủ,

chẳng hạn như:

<link rel="stylesheet" href="mystyles.css" type="text/css"/>

- Stylesheet trong file XML Mô-đun.

Một cách khác bao gồm các stylesheet trong module là sử dụng các yếu tố

<stylesheet> trong file XML. Điều này sử dụng tài nguyên tự động đóng gói

file css với module.



Sự khác biệt giữa việc sử dụng một thẻ <link> trong HTML và yếu tố

<stylesheet> trong file XML là với cách tiếp cận modun tập tin XML thì kiểu

trang sẽ luôn theo modun, không có vấn đề khi triển khai từ máy chủ trang

HTML.

Lý do là gì? Nếu một modun được tạo và chia sẽ thì sẽ không bao gồm trang

chủ trong đó và do đó không thể đảm bảo tính sẳn sàng của stylesheet. Có các

nguồn tự động giải quyết vấn đề này. Nếu không chia sẽ hoặc sử dụng lại

modun thì chỉ có thể sử dụng liên kết chuẩn HTML trong trang chủ.

7.4 Giao diện GWT trực quan

GWT có 3 chủ đề có thể lựa chọn: tiêu chuẩn, chrome, và bóng tối.

- Chủ đề tiêu chuẩn sử dụng các sắc thái tinh tế của màu xanh để tạo ra một

giao diện người dùng sống động.

- Chủ đề chrome sử dụng nền màu xám quy mô cho một cái nhìn tinh tế,

chuyên nghiệp.

- Chủ đề tối sử dụng màu tối của màu xám và đen với điểm nổi bật sáng màu

chàm cho một kinh nghiệm táo bạo, bắt mắt.

Các chủ đề hình ảnh cho phép tập trung nhiều thời gian hơn về phát triển ứng

dụng và ít thời gian hơn về tạo kiểu ứng dụng.

Các ứng dụng mới GWT sử dụng chủ đề tiêu chuẩn, nhưng vẫn có thể chọn bất

kỳ một trong các chủ đề đề cập ở trên. Mở tập tin XML modun (gwt.xml) và bỏ

ghi chú dòng kế thừa chủ đề của sự lựa chọn.











<inherits name="com.google.gwt.user.theme.dark.Dark"/>



Chủ đề hình ảnh GWT có trong phiên bản RTL (từ phải sang trái) nếu một

trang web được thiết kế cho một ngôn ngữ được viết từ phải sang bên trái,

chẳng hạn như tiếng Ả Rập. Sử dụng các phiên bản RTL bằng cách thêm RTL

đến cuối của tên mô-đun:

<inherits name="com.google.gwt.user.theme.dark.DarkRTL"/>

- Băng thông ứng dụng nhạy cảm.

Nếu có một chương trình ứng dụng băng thông nhạy cảm đang được sử dụng,

chẳng hạn như một ứng dụng điện thoại, không muốn yêu cầu người dùng tải về

toàn bộ kiểu trang có liên quan với chủ đề yêu thích(khoảng 27K). Để làm điều

này, đầu tiên các nguồn tài nguyên công cộng kết hợp với một trong các chủ đề

bằng cách thêm dòng sau vào tập tin gwt.xml:

<inherits name='com.google.gwt.user.theme.standard.StandardResources'/>

Mỗi chủ đề có một phiên bản "tài nguyên" chỉ gồm các nguồn tài nguyên công

cộng liên quan với chủ đề, nhưng không thêm stylesheet vào trang web. Cần tạo

ra một stylesheet mới và đưa vào các trang web như được mô tả trong các phần

trên.

Cuối cùng, sao chép nội dung của tập tin công cộng / gwt / tiêu chuẩn /

standard.css style sheet nằm trong gói com.google.gwt.user.theme.standard vào

style sheet mới.. Khi chạy ứng dụng được chạy, GWT sẽ bơm phiên bản rút gọn

của style sheet, nhưng vẫn có thể tham khảo các tập tin liên kết với các chủ đề

hình ảnh tiêu chuẩn.

Documents

Bao Cao Google Web Toolkit