Bao Cao Google Web Toolkit

(1)

Nhóm

1 - 071102

2011

Báo cáo C

h

uyên đ

ề

2 Nhóm 1:

Đặng Văn Bình

07110007

Huỳnh Thị Ngọc Dung

07110024

Hồ Nguyên Hãn

07110038

(2)

Nhóm 1 | Google Web Toolkit 2

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.

(5)

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

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

(7)

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

(8)

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.

(9)

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

(10)

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.

(11)

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

(12)

Nhóm 1 | Google Web Toolkit 12 4.2Developer 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ảnlập trìnhGWT

- 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

(13)

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

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

(15)

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ụ:

<title>Calendar App</title>

</head> <body>

style="width:0;height:0;border:0"></iframe>

</body>

(16)

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>

final Button button = new Button("Click me");

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

(17)

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

(18)

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.

(19)

Nhóm 1 | Google Web Toolkit 19 2.4 Các thư mục test:

(20)

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.

(21)

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.

(22)

Nhóm 1 | Google Web Toolkit 22 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"

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

(24)

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:

(25)

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

(26)

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:

(27)

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.

(28)

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:

(29)

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.

(30)

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 đó:

(31)

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:

(32)

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

(33)

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

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

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

(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);

(38)

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"));

(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 ().

(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ó.

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

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

(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>

(44)

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>

(45)

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();

(46)

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:

(47)

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>

(48)

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

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

(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ó.

(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 */