Bao Cao Google Web Toolkit

Nhóm 1 - 071102

Báo cáo Chuyên đề 2

2011 Nhóm 1: Đặng Văn Bình Huỳnh Thị Ngọc Dung Hồ Nguyên Hãn Nguyễn Thị Thanh Thúy

07110007 07110024 07110038 07110130

January 1, 2011

[BÁO CÁO CHUYÊN ĐỀ 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 2.2

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

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

Nhóm 1 | Google Web Toolkit

2

January 1, 2011

1.3

[BÁO CÁO CHUYÊN ĐỀ 2]

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 Xây dựng giao diện người dùng. ............................................................................. 34

IV.

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

Nhóm 1 | Google Web Toolkit

3

January 1, 2011

[BÁO CÁO CHUYÊN ĐỀ 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. Nhóm 1 | Google Web Toolkit

4

January 1, 2011

[BÁO CÁO CHUYÊN ĐỀ 2]

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

Nhóm 1 | Google Web Toolkit

5

January 1, 2011

[BÁO CÁO CHUYÊN ĐỀ 2]

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ỳ editrefresh- 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.

Nhóm 1 | Google Web Toolkit

6

January 1, 2011

[BÁO CÁO CHUYÊN ĐỀ 2]

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

7

January 1, 2011

[BÁO CÁO CHUYÊN ĐỀ 2]

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

Nhóm 1 | Google Web Toolkit

8

January 1, 2011

[BÁO CÁO CHUYÊN ĐỀ 2]

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

9

January 1, 2011

[BÁO CÁO CHUYÊN ĐỀ 2]

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.

Nhóm 1 | Google Web Toolkit

10

January 1, 2011

[BÁO CÁO CHUYÊN ĐỀ 2]

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.

Developer's Guide

4.

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.

Nhóm 1 | Google Web Toolkit

11

January 1, 2011

[BÁO CÁO CHUYÊN ĐỀ 2]

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

12

January 1, 2011

[BÁO CÁO CHUYÊN ĐỀ 2]

-

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

Nhóm 1 | Google Web Toolkit

13

January 1, 2011

[BÁO CÁO CHUYÊN ĐỀ 2]

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.

Nhóm 1 | Google Web Toolkit

14

January 1, 2011

[BÁO CÁO CHUYÊN ĐỀ 2]

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. Calendar App

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

Nhóm 1 | Google Web Toolkit

15

January 1, 2011

[BÁO CÁO CHUYÊN ĐỀ 2]



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ụ: final Button button = new Button("Click me"); final Label label = new Label(); RootPanel.get("slot1").add(button); RootPanel.get("slot2").add(label);

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.

Nhóm 1 | Google Web Toolkit

16

January 1, 2011

2.1

[BÁO CÁO CHUYÊN ĐỀ 2]

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). Nhóm 1 | Google Web Toolkit

17

January 1, 2011

[BÁO CÁO CHUYÊN ĐỀ 2]

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.

Nhóm 1 | Google Web Toolkit

18

January 1, 2011

2.4

[BÁO CÁO CHUYÊN ĐỀ 2]

Các thư mục test:

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

Nhóm 1 | Google Web Toolkit

19

January 1, 2011

[BÁO CÁO CHUYÊN ĐỀ 2]

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.

Nhóm 1 | Google Web Toolkit

20

January 1, 2011

[BÁO CÁO CHUYÊN ĐỀ 2]

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ẻ 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 : 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. Nhóm 1 | Google Web Toolkit

21

January 1, 2011

[BÁO CÁO CHUYÊN ĐỀ 2]

o : 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ì entrypoint tiếp theo được gọi thực thi. o : o : 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 : Đố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 : tự động truyền các tập tin JavaScript bên ngoài vào. o : tự động thêm các tập tin CSS bên ngoài vào. o : mở rộng một tập các thuộc tính cho client.

Nhóm 1 | Google Web Toolkit

22

January 1, 2011

[BÁO CÁO CHUYÊN ĐỀ 2]

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:

Nhóm 1 | Google Web Toolkit

23

January 1, 2011

[BÁO CÁO CHUYÊN ĐỀ 2]

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.

Nhóm 1 | Google Web Toolkit

24

January 1, 2011

[BÁO CÁO CHUYÊN ĐỀ 2]

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

25

January 1, 2011

[BÁO CÁO CHUYÊN ĐỀ 2]

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:

Nhóm 1 | Google Web Toolkit

26

January 1, 2011

[BÁO CÁO CHUYÊN ĐỀ 2]

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

Nhóm 1 | Google Web Toolkit

27

January 1, 2011

[BÁO CÁO CHUYÊN ĐỀ 2]

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:

Nhóm 1 | Google Web Toolkit

28

January 1, 2011

3.1

[BÁO CÁO CHUYÊN ĐỀ 2]

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ẻ vào module XML file. Nhóm 1 | Google Web Toolkit

29

January 1, 2011

4.2

[BÁO CÁO CHUYÊN ĐỀ 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 đó:

Nhóm 1 | Google Web Toolkit

30

January 1, 2011

[BÁO CÁO CHUYÊN ĐỀ 2]

Đầ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:

Nhóm 1 | Google Web Toolkit

31

January 1, 2011

[BÁO CÁO CHUYÊN ĐỀ 2]

o Element: đại diện cho các DOM element, là các thẻ trong XML: . o Text: đại diện cho text nằm giữa thẻ mở và thẻ đóng của một element: