bao cao google web toolkit
TRANSCRIPT
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
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 3
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
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 4
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.
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 5
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 .
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 6
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.
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 7
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:
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 8
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ở:
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 9
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
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 10
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.
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 11
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.
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 12
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
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 13
- 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
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 14
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.
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 15
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> <!-- Properties can be specified to influence deferred binding --> <meta name='gwt:property' content='locale=en_UK'> <!-- Stylesheets are optional, but useful --> <link rel="stylesheet" href="Calendar.css"> <!-- Titles are optional, but useful --> <title>Calendar App</title> </head> <body> <!-- This script tag is what actually loads the GWT module. The --> <!-- 'nocache.js' file (also called a "selection script") is --> <!-- produced by the GWT compiler in the module output directory --> <!-- or generated automatically in development mode. --> <script language="javascript" src="calendar/calendar.nocache.js"></script> <!-- Include a history iframe to enable full GWT history support --> <!-- (the id must be exactly as shown) --> <iframe src="javascript:''" id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe> </body> </html>
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 16
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> <!-- ... other sample HTML omitted --> <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);
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 17
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).
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 18
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.
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 19
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
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 20
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.
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 21
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.
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 22
o <entry-point class="classname" /> : Chỉ định một entry- point- class. Có thể
thêm vào nhiều entry- point- class, bao gồm cả các module thừa kế.
o Các entry- point đượ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.
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 23
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:
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 24
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.
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 25
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
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 26
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:
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 27
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
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 28
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:
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 29
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.
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 30
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 đó:
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 31
Đầ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:
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 32
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).
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 33
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 34
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
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 35
- 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()
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 36
{
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>.
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 37
- 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);
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 38
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"));
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 39
- 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 ().
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 40
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ó.
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 41
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.
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 42
- 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.
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 43
- 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>
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 44
</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:DockLayoutPanel unit='EM'>
<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>
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 45
<g:Label>Content Area</g:Label>
</g:ScrollPanel>
</g:center>
</g:SplitLayoutPanel>
</g:center>
</g:DockLayoutPanel>
- 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();
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 46
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:
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 47
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:DockLayoutPanel unit='EM'>
<g:north size='2'>
<g:HTML>Header</g:HTML>
</g:north>
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 48
<g:south size='2'>
<g:HTML>Footer</g:HTML>
</g:south>
<g:center>
<g:RichTextArea width='100%' height='100%'/>
</g:center>
</g:DockLayoutPanel>
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
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 49
- 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.
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 50
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ó.
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 51
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) {
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 52
// 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) {
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 53
// 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
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 54
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.
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 55
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++ ) {
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 56
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) {
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 57
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
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 58
*/
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);
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 59
// 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() {
public void onClick(ClickEvent event) {
// handle the click event
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 60
}
});
}
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);
}
public void onClick(ClickEvent event) {
// note that in general, events can have sources that are not Widgets.
Widget sender = (Widget) event.getSource();
if (sender == b1) {
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 61
// 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.
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 62
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 */
}
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 63
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.
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 64
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.
<!-- Inherit the default GWT style sheet. You can change -->
<!-- the theme of your GWT application by uncommenting -->
<!-- any one of the following lines. -->
<!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->
<!-- <inherits name="com.google.gwt.user.theme.chrome.Chrome"/> -->
<inherits name="com.google.gwt.user.theme.dark.Dark"/>
January 1, 2011 [BÁO CÁO CHUYÊN ĐỀ 2]
Nhóm 1 | Google Web Toolkit 65
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.