Báo Cáo Thực Tập Tốt Nghiệp : Ngiên cứu và xây dựng ứng dụng trên Google Web Toolkit

LỜI MỞ ĐẦU Ngày nay, với sự phát triển mạnh mẽ của công nghệ thông tin, hầu hết các ứng dụng tin học đã được ứng dụng trong mọi lĩnh vực nghiên cứu khoa học cũng như đời sống con người. Nó đã trở thành công cụ hữu ích cho con người trong các hoạt động, lưu trữ, xử lý thông tin một cách nhanh chóng, đem lại hiệu quả cao nhất cho con người. Vì vậy chúng em đăng ký làm đồ án tốt nghiệp với mong muốn tiếp cận được nhiều kiến thức mới, áp dụng những gì đã học được vào thực tế, từ đó sẽ giúp chúng em hoàn thiện kiến thức hơn để làm việc một cách hiệu quả sau này. Như ta đã thấy, ứng dụng công nghệ thông tin đang đóng vai trò rất quan trọng trong cuộc sống con người. Nó giúp con người quản lý được những hệ thống lớn, phức tạp như nhà hàng, siêu thị… Nhằm khai thác thế mạnh của ứng dụng công nghệ thông tin trong quản lý, đặc biệt là ứng dụng trên nền tảng JAVA em đã chọn đề tài “Ngiên cứu và xây dựng ứng dụng trên Google Web Toolkit”. Hệ thống sẽ giúp việc bán hàng trờ nên nhanh chóng, giảm được nhiều chi phí do không phải thuê nhiều nhân viên phục vụ. Mặt khác, chúng em chọn đề tài này nhằm mục đích tìm hiểu sâu hơn về công nghệ JavaWeb và phát triển các ứng dụng trên nền tằng của Google. Trong quá trình làm đồ án, chúng em xin cảm ơn Thầy Nguyễn Trung Phú đã hướng dẫn và giúp đỡ chúng em trong quá trình thực hiện và hoàn thành đồ án này.

Báo Cáo Thực Tập Tốt Nghiệp

Đề tài : Ngiên cứu và xây dựng ứng dụng trên Google Web Toolkit

GVHD : Thầy Nguyễn Trung Phú

Nhóm thực hiện :

LỜI MỞ ĐẦU

Ngày nay, với sự phát triển mạnh mẽ của công nghệ thông tin, hầu hết các ứngdụng tin học đã được ứng dụng trong mọi lĩnh vực nghiên cứu khoa học cũng nhưđời sống con người Nó đã trở thành công cụ hữu ích cho con người trong các hoạtđộng, lưu trữ, xử lý thông tin một cách nhanh chóng, đem lại hiệu quả cao nhấtcho con người Vì vậy chúng em đăng ký làm đồ án tốt nghiệp với mong muốntiếp cận được nhiều kiến thức mới, áp dụng những gì đã học được vào thực tế, từ

đó sẽ giúp chúng em hoàn thiện kiến thức hơn để làm việc một cách hiệu quả saunày

Như ta đã thấy, ứng dụng công nghệ thông tin đang đóng vai trò rất quan trọngtrong cuộc sống con người Nó giúp con người quản lý được những hệ thống lớn,phức tạp như nhà hàng, siêu thị… Nhằm khai thác thế mạnh của ứng dụng côngnghệ thông tin trong quản lý, đặc biệt là ứng dụng trên nền tảng JAVA em đã chọn

đề tài “Ngiên cứu và xây dựng ứng dụng trên Google Web Toolkit” Hệ thống sẽgiúp việc bán hàng trờ nên nhanh chóng, giảm được nhiều chi phí do không phảithuê nhiều nhân viên phục vụ

Mặt khác, chúng em chọn đề tài này nhằm mục đích tìm hiểu sâu hơn về côngnghệ JavaWeb và phát triển các ứng dụng trên nền tằng của Google

Trong quá trình làm đồ án, chúng em xin cảm ơn Thầy Nguyễn Trung Phú đãhướng dẫn và giúp đỡ chúng em trong quá trình thực hiện và hoàn thành đồ ánnày

Nhóm thực hiện.

Đỗ Kim Bảo Nguyễn Thị Lệ

sự phát triển mạnh mẽ của html5 trên các hệ máy của Apple

Việc xây dựng ứng dụng trên nền web có khá nhiều lợi thế so với ứng dụngdesktop thông thường Trong khi 1 ứng dụng desktop thông thường sẽ phải tốnnhiều chi phí cho việc cài đặt, bảo trì, nâng cấp trên từng máy tính thì ứng dụngtrên web có thể chạy bất cứ nơi đâu thông qua 1 trình duyệt web mà không hề phảicài đặt Tuy nhiên, những ứng dụng trên web vẫn tồn tại những hạn chế nhất định,

đó là khả năng hỗ trợ ứng dụng, các control không mạnh bằng ứng dụng desktop,tốc độ chương trình phụ thuộc vào server, đường truyền

 Vấn đề 1 : Nghiên cứu : Tìm hiểu về GWT : các đặc điểm, cách sử dụng, các

plug-in, công nghệ hỗ trợ cho GWT, nhận xét ưu khuyết điểm so với các frameworktrong việc xây dựng ứng dụng trên nền web

 Vấn đề 2 : Xây dựng ứng dụng : Xây dựng và phát triển thành công 1 hệ thống sửdụng được cho cho nhà hàng dựa trên công nghệ GWT đã nghiên cứu Đề tài sửdụng công nghệ Google web toolkit với thư viện mã nguồn mở SmartGWT đượcxây dựng và phát triển bởi google để xây dựng hệ thống quản lí công việc đặt bàn

ăn tại chỗ và trực tiếp qua mạng internet cho nhà hàng khách sạn:

- Ứng dụng chạy trên nền Web, khắc phục những hạn chế của ứng dụng desktopthông thường, có thể chạy trên mọi trình duyệt với tốc độ cao

- Quản lý việc đặt bàn, phục vụ khách và thanh toán trên giao diện tương tác có độtiện dụng cao

- Hiển thị theo từng view của người dùng đã đăng nhập, cho phép thao tác trên thiết

bị theo view của người dùng đó

- Cho phép người dùng xem, tìm kiếm bàn ăn, món ăn, vị trí thời gian, thực hiện đềnghị gọi món, đặt bàn … trên từng thiết bị hay theo đơn

- Xem chi tiết về từng món ăn, từng vị trí bàn ăn

- Có chức năng quản lý bàn, quản lý nhân viên, quản lý user: quản lý tình trạng chitiết về trạng thái, báo cáo khi có thông tin sai sót

MỤC LỤC

CHƯƠNG I : GIỚI THIỆU TỔNG QUAN 8

1.Lý do chọn đề tài 8

2.Đối tượng nghiên cứu 8

3.Phạm vi nghiên cứu 8

4.Môi trường và công cụ làm việc 8

CHƯƠNG II : NGHIÊN CỨU VỀ GWT 9

1.Giới thiệu về GWT 9

1.1 SDK 9

1.2 Speed tracer 9

1.3 Plugin cho Eclipse 10

1.4 GWT designer 10

2.Cấu trúc GWT 11 3.Cơ sở dữ liệu trong GWT 12 3.1 Định nghĩ một entity classes 13

3.2 Đăng kí class 14

3.3 Hoạt động cơ bản: get(),put(),delete() 14

3.4 Mối quan hệ giữa các entities 14

3.4.1 Quan hệ cha con 14

3.4.2 Quan hệ một nhiều 15

3.4.3 Quan hệ nhiều nhiều 15

4.Các thành phần giao diện trong GWT 15 4.1 Các kiểu Layout 15

5.Xây dựng giao diện Web(Sử dụng XML) 27 CHƯƠNG III: XÂY DỰNG ỨNG DỤNG 36 1.Đặc tả bài toán 36 2.Phân tích hệ thống 37 2.1 Mô tả nghiệp vụ 37

2.2 Tác nhân và usecase 37

2.3 Biểu đồ Usecase 38

2.4 Đặc tả Usecase 38

2.4.1 Usecase chọn món ăn 38

2.4.2 Usecase đặt bàn 38

2.4.3 Usecase hoàn thành đặt bàn 38

2.4.4 Usecase hoàn thành món ăn 39

2.4.5 Uscase thanh toán 39

2.4.6 Usecase cập nhật món ăn 39

2.4.7 Usecase cập nhật thông tin bàn ăn 40

2.4.8 Usecase cập nhật thông tin khách hàng 40

2.4.9 Usecase cập nhật thông tin nhân viên 40

2.5 Biểu đồ thông tin, biểu đồ trình tự 41

2.5.1 Chọn món ăn 41

2.5.2 Đặt bàn 42

2.5.5 Thanh toán 45

2.5.6 Cập nhật món ăn 46

2.5.7 Cập nhật bàn ăn 47

2.5.8 Cập nhật thông tin khách hàng 48

2.5.9 Cập nhật thông tin nhân viên 49

2.6 Biểu đồ chi tiết 50

2.7 Biểu đồ triển khai 51

3.Thiết kế cơ sở dữ liệu 51 3.1 Các class và các thuộc tính 51

3.1.1 Class nhân viên 51

3.1.2 Class hóa đơn 53

3.1.3 Class khách hàng 54

3.1.4 Class bàn ăn 55

3.1.5 Class chi tiết sử dụng bàn ăn 56

3.1.6 Class chi tiết buffet 57

3.1.7 Class chi tiết gọi món ăn 58

3.1.8 Class món ăn 59

3.1.9 Class thông tin đặt bàn 60

3.2 Class đăng kí sử dụng 62

3.3 Một số lớp quan trọng trong việc truy xuất dữ liệu 62 4.Thiết kế giao diện 63

5.Lập trình hệ thống 66

6.Sản phẩm 69

CHƯƠNG IV : TỔNG KẾT 70

1.Kết quả đạt được 70

2.Hạn chế, hướng phát triển 70

3.Tài liệu tham khảo 70

Hình 4.2.26 : DockPanel and DockLayoutPanel 26

Hình 4.2.27 : TabPanel and TabLayoutPanel 26

Hình 4.2.28 : DisclosurePanel 26

Hình 2.4.5 : Sơ đồ hoạt động thanh toán 39

Hình 2.5.1.1 : Sơ đồ thông tin chọn món ăn 41

Hình 2.5.1.2 : Sơ đồ trình tự chọn món ăn 42

Hình 2.5.2.1 : Sơ đồ thông tin đặt bàn 42

Hình 2.5.2.2 : Sơ đồ trình tự đặt bàn 42

Hình 2.5.3.1 : Sơ đồ thông tin hoàn thành đặt bàn 43

Hình 2.5.3.2 : Sơ đồ tuần tự hoàn thành đặt bàn 43

Hình 2.5.4.1: Sơ đồ thông tin hoàn thành món ăn 44

Hình 2.5.4.2 : Sơ đồ trình tự hoàn thành món ăn 44

Hình 2.5.5.1 : Sơ đồ thông tin thanh toán 45

Hình 2.5.5.2 : Sơ đồ trình tự thanh toán 45

Hình 2.5.6.1 : Sơ đồ thông tin cập nhật món ăn 46

Hình 2.5.6.2 : Sơ đồ trình tự cập nhật món ăn 46

Hình 2.5.7.1 : Sơ đồ thông tin cập nhật bàn ăn 47

Hình 2.5.7.2: Sơ đồ trình tự cập nhật thông tin bàn ăn 47

Hình 2.5.9.2 : Sơ đồ trình tự cập nhật thông tin nhân viên 49

Hình 2.6 : Sơ đồ lớp chi tiết 51

Hình 2.7 : Sơ đồ triển khai hệ thống 51

Hình 2.8 : Sơ đồ cơ sở dữ liệu 51

Hình 4.1 : Trang chủ 63

Hình 4.2 : Trang tin tức 64

Hình 4.3 : Trang thực đơn 65

Hình 5.1 : Các thành phần trong project 67

Hình 5.2 : Các thành phần trong gói Com.itpro.myproject.Myproject.client 68

Hình 5.3 : Các class trong gói com.itpro.myproject.Myproject.client.entity 69

CHƯƠNG I : GIỚI THIỆU TỔNG QUAN.

1 Lý do chọn đề tài.

 Google Web Toolkit :

- GWT là một Java framework mã nguồn mở cho phép bạn thoát khỏi ma trận cáccông nghệ để viết các ứng dụng AJAX quá khó khăn và nhiều lỗi Với GWT, bạn

có thể phát triển và kiểm tra lỗi các ứng dụng AJAX bằng ngôn ngữ Java, sử dụngcác công cụ phát triển Java tuỳ theo ý thích Khi bạn triển khai ứng dụng củamình, bộ biên dịch của GWT sẽ dịch ứng dụng Java của bạn sang Javascript vàHTML

- GWT nhấn mạnh đến tính tái sử dụng, những giải pháp hiệu quả để chống lại

những thách thức mà AJAX gặp phải

 Ứng dụng :

- Việc xây dựng ứng dụng trên nền web có khá nhiều lợi thế so với ứng dụng

desktop thông thường Trong khi 1 ứng dụng desktop thông thường sẽ phải tốnnhiều chi phí cho việc cài đặt, bảo trì, nâng cấp trên từng máy tính thì ứng dụngtrên web có thể chạy bất cứ nơi đâu thông qua 1 trình duyệt web mà không hề phảicài đặt Tuy nhiên, những ứng dụng trên web vẫn tồn tại những hạn chế nhất định,

đó là khả năng hỗ trợ ứng dụng, các control không mạnh bằng ứng dụng desktop,tốc độ chương trình phụ thuộc vào server, đường truyền

2 Đối tượng nghiên cứu.

- Plugin for Eclips

- GWT Designer.

- Tìm hiểu về lập trình ứng dụng với công cụ Google Web Toolkit

- Xây dựng và phát trieent ứng dụng trên nền tảng Java với công cụng

GoogleWebToolkit

3 Phạm vi nghiên cứu.

- Tìm hiểu về GWT : các đặc điểm, cách sử dụng, các plug-in, công nghệ hỗ trợ choGWT, nhận xét ưu khuyết điểm so với các framework trong việc xây dựng ứngdụng trên nền web

- Xây dựng và phát triển thành công 1 hệ thống sử dụng được cho cho nhà hàng dựatrên công nghệ GWT đã nghiên cứu

4 Môi trường và công cụ làm việc.

- Xây dựng ứng dụng trên môi trường Java với công cụ Eclips sử dụng các kiểu

Layout và Widgets của Google Web Toolkit

- Sử dụng CSS và HTML dung trong thiết kế giao diện.

CHƯƠNG II : NGHIÊN CỨU VỀ GWT.

1 Giới thiệu về GWT.

- Google Web Toolkit (GWT) một bộ công cụ phát triển để xây dựng và tối ưu hoácác ứng dụng phức tạp của trình duyệt web Mục tiêu của nó là để cho phép pháttriển sản xuất của các ứng dụng web hiệu suất cao mà không cần các nhà phát triển

có được một chuyên gia trong quirks trình duyệt, XMLHttpRequest, và JavaScript.GWT được sử dụng bởi nhiều sản phẩm tại Google, bao gồm cả Google Wave vàphiên bản mới của AdWords Nó 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 thế giới

 Hộp công cụ của GWT

- SDK: Các SDK GWT chứa các thư viện Java API, trình biên dịch, và máy chủphát triển Nó cho phép bạn viết các ứng dụng phía máy khách trong Java và triểnkhai chúng như JavaScript

- Speed Tracer: là một mở rộng Chrome cho phép bạn xác định các vấn đề hiệu suấttrong các ứng dụng web của bạn

- Plugin cho Eclipse IDE cung cấp hỗ trợ cho Google Web Toolkit và các dự án ứngdụng web Công cụ

- GWT Designer: GWT Designer cho phép bạn tạo ra các giao diện người dùngtrong vài phút với các công cụ cho assist bố trí thông minh, kéo và thả, và thế hệ

mã tự động

1.1 SDK.

- Viết ứ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 vào làm việc xugn quanh quirks trìnhduyệt Ngoài ra, xây dựng, tái sử dụng, và duy trì cơ sở mã hóa lớn javaScript vàajax thành phần có thể cho là khó khăn và dễ vỡ

- Google web toolkit(GWT) giúp giảm bớt gánh nặng ngày bằng cách cho phépcách nhà phát triển nhanh chóng xây dừng và duy trì phức tạp nhưng rất hiệu quảjavascript font-end ứng dụng trong ngôn ngữ lập trình java

- Bắt đầu với GWT SDK :

- Bạn cần có bản SDK phiên bản 1.5 hoặc các phiên bản mới hơn Nếu cần thiết bạn

có thể tải Java SE Development Kit (JDK) về và cài đặt cho nền tảng của mình

- Cài đặt Apache Ant

- Tải Google Web Toolkit SDK và giải nén ra, thư mục giải nén chứa các thư viện,

trình biên dịch và và máy chủ mà người dùng cần để viết các ứng dụng web

1.2 Speed tracer.

- Sử dụng Speed Tracer bạn có thể có được hình ảnh tốt hơn ở một nơi mà thời gian

đang được chi tiêu trong ứng dụng của bạn Điều này bao gồm các vấn đề gây rabởi phần tích cú pháp và thực thi Java Script, bố trí, tính toán lại theo CSS và phùhợp hơn với chọn, xử lý sự kiện DOM, tải tài nguyên mạng…

1.3 Plugin cho Eclipse.

- Google Web Toolkit cung cấp một bộ công cụ mà chỉ đơn giản có thể sử dụng

được với một trình soạn thảo văn bản, dòng lệnh, và một trình duyệt Tuy nhiên,bạn cũng có thể sử dụng GWT với IDE yêu thích của bạn Google cung cấp mộtplugin cho Eclipse làm cho phát triển với GWT thậm chí còn dễ dàng hơn

1.4 GWT designer.

- GWT Designer là một bi- directional  Java mạnh mẽ và dễ sử dụng giao diện đồ

họa thiết kế mà làm cho nó rất dễ dàng để tạo ra các giao diện ứng dụng GWT màkhông cần tốn rất nhiều thời gian để viết mã để hiển thị các hình thức đơn giản.Với GWT Designer bạn có thể tạo ra các cửa sổ phức tạp chỉ trong vài phút Sửdụng các thiết kế trực quan và mà Java sẽ được tạo ra cho bạn Bạn có thể dễ dàngthêm các điều khiển bằng cách sử dụng kéo và thả, thêm xử lí sự kiện để điềukhiển, thay đổi các thuộc tính khác nhau của các điều khiển bằng cách sử dụngmột trình soạn thảo

- GWT Designer được xây dựng như một plug-in cho Eclipse và Eclipse IDE khác

nhau(RAD, RSA, MyEclipse, JBuilder,vv) Trong xây dựng cú pháp trừu tượng(AST) để điều hướng các mã nguồn và sử dụng GEF để hiển thị và quản lý trìnhbày trực quan SỬ dụng các công cụ bố trí WYSIWYG, bạn không cần thiết phảiviết bất kì một dòng mã jav mã sẽ tạo ra cho bạn GWT Designer

2 Cấu trúc GWT.

Hình 2.1 : Cấu trúc GWT

- Mô phỏng thư viên JRE: GWT có chứa java script triển khai của các lớp thư việnjava tiêu chuẩn.

- GWT web UI class library

3 Cơ sở dữ liệu trong GWT.

- Thiết kế cơ sở dữ liệu có khả năng mở rộng cao, các ứng dụng nặng về cơ sở dữliệu có thể gặp phức tạp Nếu bạn đã từng sử dụng một thiết bị phần cứng hoặcphần mềm nào để điều chỉnh load dữ liệu, thì bạn biết rằng những người dùng củabạn có thể tích hợp với một hoặc nhiều trang web sử dụng cùng một máy chủ cơ

sở dữ liệu Một yêu cầu của người sử dụng có thể không được phục vụ từ cùngmột máy chủ xử lý yêu cầu trước đó của người sử dụng Những máy chủ có thểđược trải rộng ra trong trung tâm dữ liệu khác nhau hoặc có lẽ trong các quốc giakhác nhau, yêu cầu bạn thực hiện các quy trình để giữ cho dữ liệu của bạn an toàn,

bí mật và đồng bộ Phần cứng và phần mềm cần thiết để mở rộng ứng dụng củabạn có thể phức tạp và đắt tiền, và thậm chí có thể khiến bạn phải đi thuê cácnguồn lực ở bên ngoài

- Với App Engine Goolge sẽ giải quyết tất cả những vấn đề đó của bạn, kho dữ liệu

Kho dữ liệu App Engine được cung cấp chủ yếu bởi hai dịch vụ của Google:Bigtable và Google File System(GFS)

- Bigtable là một dịch vụ phân phối và khả năng mở rộng để lưu trữ và quản lý cấutrúc dữ liệu Nó được thiết kế để mở rộng đến một kích thước rất lớn với petabyet

dữ liệu trên hàng ngàn máy chủ thành nhóm Đó là dịch vụ tương tụ Google sửdụng cho hơn 60 dự án riêng của mình bao gồm lập chỉ mục web, google finance

và google earth

- Kho dữ liệu cũng sử dụng GFS để lưu trữ dữ liệu và các tập tin đăng nhập GFS làmột khả năng mở rộng hệ thống tập tin được thiết kế chịu lỗi lớn, phân phối cácứng dụng dữ liệu chuyên sâu như Gmail và YouTobe Ban đầu được phát triển đểlưu trữ dữ liệu thu thập dữ liệu và tìm kiếm chỉ số, GFS hiện đang được sử dụngrộng rãi để lưu trữ nội dung người dùng tạo ra rất nhiều sản phẩm của Google

- Bigtable lưu trữ dữ liệu như các entities với thuộc tính được định nghĩa giống như

là khách hàng,nhóm hàng hoặc là sản phẩm Những entities cùng loại không yêucầu phải có thuộc tính khác nhau hoặc cùng một loại giá trị cho các thuộc tínhgiống nhau

- Truy vấn Bigtable các thực thể của cùng một loại và có thể sử dụng các bộ lọc vàcác xắp xếp trên cả hai khóa và các giá trị thuộc tính Nó cũng có thể truy vấnbằng chỉ số index, kết quả ấn tượng ngay cả với bộ dữ liệu rất lớn Dịch vụ nàycùng hộ trợ giao dịch thông tin cập nhật về nhóm duy nhất được xác định ứngdụng của các entities

- Các kho dữ liệu App Engine là một kho dữ liệu đối tượng schemaless cung cấpmạnh mẽ,khả năng mở rộng lưu trữ cho các ứng dụng web của bạn, không có kếhoạch thời gian chết, giao dịch nguyên tử, sẵn sàng đọc và ghi, nhất quán mạnh

mẽ cho lần đọc và truy vấn và tính thống nhất cuối cùng cho tất cả các truy vấnkhác Các kho dữ liệu Java SDK bao gồm việc triển khai của các đối tượng dữ liệujava(JDO) và giao diện Java Persistence API(JPA), cũng như một kho dữ liệu APIcấp thấp

- App Engine Java SDK cung cấp một API kho dữ liệu ở mức độ thấp với các hoạtđộng đơn giản trên các thực thể bao gồm lấy, tạo,xóa và truy vấn Bạn chỉ có thể

sử dụng API này ở mức độ thấp trực tiếp trong các ứng dụng của bạn, hoặc sửdụng nó như là một cơ sở dữ liệu trên đó để thực hiện bộ diều hợp giao diện khác.SDK cũng bao gồm việc triển khai của các đối tượng dữ liệu java(JDO) và javaPersistence API(JPA) Các giao diện tiêu chuẩn bao gồm các cơ chế để xác địnhcác lớp học cho các đối tượng dữ liệu và thực hiện truy vấn

- Ngoài ra các frameworks và kho dữ liệu API, java hỗ trợ các frameworks khácđược thiết kế đơn giản hóa việc sử dụng kho dữ liệu cho các nhà phát triển java

- Twig: là một đối tượng giao diện cấu hình để cải thiện hỗ trợ cho tính đa hình,thừa kế và các laoij chung chung, Twig giúp bạn tránh phức tạp gây ra bởi JDO vàkho dữ liệu cấp thấp.

- Slim3 là khuôn khổ một ngăn xếp mô hình mà bạn có thể sử dụng cho nhiều chứcnăng AppEngine , bao gồm(nhưng không giới hạn) kho dữ liệu

- Trong ứng dụng này, chúng tôi đi sâu và nghiên cứu về Objectify

- Entities: Một thực thể là một giá trị của một đối tượng của dữ liệu trong kho dữliệu Sử dụng objectify, một thực thể sẽ tương ứng với lớp đơn POJO duy nhất bạnxác định Trong cơ sở dữ liệu, một thực thể là một đối tượng

- Các hoạt động của entities:

- put() tạo một entiy trong cơ sở dữ liệu, bạn có thể lưu trữ nhiều entities trongcùng một lúc

- delete() xóa một entity từ cơ sử dữ liệu, bạn có thể xóa nhiều entity cùng một lúc

- query() lấy ra những entity theo yêu cầu

- get() lây một entity.

- Key entity: tất cả entity có Long id hoặc là String name, mỗi giá trị đó là duy nhất

cho một entity Trong cơ sử dữ liệu các thực thể được xác định bởi id hoặc tên vàloại tương ứng với cá đối tượng ban đang muốn lưu trữ

3.2 Đăng kí class.

- Trước khi bạn thực thi bất kì một hành động nào với cơ sở dữ liệu, bạn phải đăng

kí entity class:

ObjectifyService.register(Car.class);

3.3 Hoạt động cơ bản: get(),put(),delete().

Objectify ofy = ObjectifyService.begin();

// tạo mới một Car Car porsche = new Car("2FAST", "red");

ofy.put(porsche);

Car fetched1 = ofy.get(new Key<Car>(Car.class, porsche.id));

// Delete it ofy.delete(porsche);

3.4 Mối quan hệ giữa các entities.

- Một quan hệ chỉ đơn giản là một khóa được lưu trữ như là một trường dữ liệutrong một thực thể Có 3 loại quan hệ

3.4.1 Quan hệ cha con.

- Một thực thể có thể có một trường khóa đơn để chỉ tới cha với cấu trúc @Parent

Ví dụ :

public class Person{

    @Id Long id;

    String name;

} public class Car {

    @Id Long id;

    @Parent Key<Person> owner;

    String color;

}

- Mỗi thực thể Car là một phần của cha và cả hai có thể được truy cập trong mộtgiao dịch đơn giản Khi load những entity con, khóa cảu cha cũng sẽ được sửdụng để sinh ra khóa cho con

Objectify ofy = ObjectifyService.begin();

Key<Person> owner = new Key<Person>(Person.class, somePersonId);

Car someCar = ofy.get(new Key<Car>(owner, Car.class, someCarId));

3.4.2 Quan hệ một nhiều.

- Trong objectify(và tầng dưới của cơ sở dữ liệu), những khóa là thuộc tính giốngnhư một giá trị khác Khi nào nó định nghĩa quan hệ một- một hoặc là quan hệ mộtnhiều Hơn nữa, một trường khóa có thể tham chiếu tới bất kì loại lớp thực thểnào

Person bob = ofy.get(Person, "bob");

Person bobswife = ofy.get(bob.significantOther);

Quan hệ một nhiều:

public class Employee

3.4.3 Quan hệ nhiều nhiều.

Objectify ofy = ObjectifyService.begin();

// should contain Fred Iterable<Employee> managers = ofy.query(Employee.class).filter("subordinates", bob);

4 Các thành phần giao diện trong GWT.

4.1 Các kiểu Layout.

 RootPanel

- RootPanel là panel gốc, từ đó tất cả các panel khác mới có thể thêm vào HàmRootPanel.get() được một panel duy nhất bao lấy thẻ <body> Sử dụng hàmRootPanel.get(String id) để có được một panel bao ngoài một phần tử bất kỳ trêntrang

 FlowPanel

- FlowPanel là panel đơn giản nhất Nó tạo ra một thẻ đơn <div> và có thể put cácthẻ khác vào mà không cần sửa đổi Sử dụng nó trong trường hợp bạn muốn layoutcác phần tử HTML con một cách tự nhiên

 HTMLPanel

- Panel này cung cấp một cách đơn giản để xác định một cấu trúc HTML, trong đówidget sẽ được nhúng vào tại các điểm được xác định Bạn có thể sử dụng nó trựctiếp Panel này được sử dụng phổ biến nhất trong UiBinder templates

 FormPanel

- Khi muốn tạo một form HTML (ví dụ, đối với tương tác với các máy chủ mà sửdụng phương thức POST), có thể sử dụng một FormPanel Các widget được baobởi FormPanel sẽ được bao bởi thẻ <form> khi sinh ra HTML

 ScrollPanel

- Khi muốn tạo một vùng cuộn bên trong panel khác, bạn nên sử dụng ScrollPanel.Panel này hoạt động tốt khi phần tử có kích thước cố định nhưng các phần từ bêntrong lại chưa rõ ràng

 PopupPanel và DialogBox

- Sử dụng hai panel này để tạo popup và hộp thoại Chúng có thể chồng lên trên cửa

sổ trình duyệt, và có thể được xếp chồng lên nhau

 Grid và FlexTable

- Hai widgets được sử dụng để tạo ra bảng, thẻ HTML <table>, và có thể cũng được

sử dụng như panel, bất kỳ phần tử nào đều có thể được bổ sung vào các cells củabảng

 RootLayoutPanel

- Panel này là một panel gốc duy nhất, phục vụ như một container gốc mà tất cả các

- Bạn sử dụng RootLayoutPanel phổ biến nhất là sử dụng như một container cho cácpanel khác.

 LayoutPanel

- Cách bố trí của LayoutPanel là cách bố trí thường nhất, và thường đi theo cáclayout khác được xây dựng Gần giống với LayoutPanel nhất là AbsolutePanel,nhưng nó tổng quát hơn ở chỗ nó cho phép các phần tử bên trong tự định vị trí sửdụng bằng việc sử dụng các ràng buộc tùy ý, như trong ví dụ sau đây:

Hình 4.1.2 : DockLayoutPanel

- Lưu ý rằng DockLayoutPanel yêu cầu sử dụng các đơn vị thống nhất cho tất cả cácphần tử con, quy định tại contructor Nó cũng yêu cầu khai báo kích thước của mỗiphần tử con(ngoại trừ phần tử cuối cùng - phần tử sẽ sử dụng tất cả không giancòn lại)

 SplitLayoutPanel

- SplitLayoutPanel rất giống với DockLayoutPanel (thực tế là SplitLayoutPanelextends DockLayoutPanel), ngoại trừ việc nó tự động tạo ra một cột kéo thảsplitter ở giữa mỗi cặp widget con SplitLayoutPanel chỉ hỗ trợ đơn vị pixel Cóthể dùng để thay thế cho HorizontalSplitPanel và VerticalSplitPanel

Hình 4.1.3 : SplitLayoutPanel

 StackLayoutPanel

- StackLayoutPanel thay thế cho StackPanel Nó chỉ hiển thị một widget con tại mộtthời điểm, và các tiêu đề của các widget con khác Nhấp vào header nào đó thì sẽhiển thị cả widget đó

Hình 4.1.4 : StackLayoutPanel

 TabLayoutPanel

- Giống với việc sử dụng TabPanel, TabLayoutPanel sẽ hiển thị một dãy nhấp tab.Mỗi tab là liên kết với một widget con, được hiển thị khi nhấn vào tab

Hình 4.1.5 : TabLayoutPanel

- Giá trị độ dài cung cấp cho constructor TabLayoutPanel xác định chiều cao củathanh tab, cần phải được cung cấp một cách rõ ràng

- Khi nào không nên sử dụng layout panel?

Các bảng mô tả ở trên là tốt nhất được sử dụng để xác định ứng dụng của bênngoài cơ cấu - có nghĩa là, các bộ phận đó là những "ít nhất tài liệu giống như".Bạn nên tiếp tục sử dụng các widget cơ bản và cấu trúc HTML cho các bộ phậncho mà HTML / CSS bố trí thuật toán hoạt động tốt Cụ thể, xem xét việc sử dụngUiBinder mẫu để trực tiếp sử dụng HTML bất cứ nơi nào có ý nghĩa

4.2 Các phần tử cơ bản(widgets).

- Bạn xây dựng giao diện người dùng trong các ứng dụng bằng cách sử dụng GWTwidget đó được chứa trong tấm Widget cho phép bạn tương tác với người sử dụng.Panels kiểm soát các vị trí của các thành phần giao diện người dùng trên trang.Widgets và tấm làm việc theo cùng một cách trên tất cả các trình duyệt; bằng cách

sử dụng chúng, bạn loại bỏ sự cần thiết để viết mã chuyên biệt cho từng trìnhduyệt

Hình 4.2.1 : Button Widget

Hình 4.2.2 : PushButton Widget

Hình 4.2.3 : RadioButton Widget

Hình 4.2.13 : SuggestBox widget

Hình 4.2.14 : RichTextArea widget

Hình 4.2.15 : Table widget

Hình 4.2.20 : HorizontalPanel widget

Hình 4.2.21 : VerticalPanel widget

Hình 4.2.22 : FlowPanel widget

Hình 4.2.23 : VerticalSplitPanel widget

Hình 4.2.24 : HorizontalSplitPanel

Hình 4.2.25 : SplitLayoutPanel

Hình 4.2.26 : DockPanel and DockLayoutPanel

Hình 4.2.27 : TabPanel and TabLayoutPanel

5 Xây dựng giao diện Web(Sử dụng XML).

 Trung tâm của ứng dụng GWT là một trang web Và khi bạn lập trình web thì tốtnhất bạn nên sử dụng HTML và CSS là cách tự nhiên nhất UiBinder cho phép bạnlàm điều đó: xây dựng các ứng dụng của bạn như các trang HTML với các widgetGWT ngay trong trang html (XML)

 Ngoài việc để xây dựng giao diện người dùng một cách tự nhiên và ngắn gọn hơnkhi thực hiện điều đó thông qua code java, UiBinder cũng có thể làm cho ứngdụng của bạn hiệu quả hơn Trình duyệt web xử lý tốt hơn lúc xây dựng cấu trúcDOM bằng việc đẩy chuỗi HTML vào innerHTML hơn là việc cứ gọi các API.UiBinder cũng lợi dụng điều này, và kết quả là cách dễ dàng nhất để xây dựng ứngdụng GWT cũng là cách tốt nhất để xây dựng web

setElement(uiBinder.createAndBindUi(this));

} public void setName(String name){ nameSpan.setInnerText(name); } }

Chúng ta sẽ xem ví dụ sau đây chứng minh làm thế nào để sử dụng cácwidget với UiBinder, nhưng ví dụ này sử dụng DOM thao tác trực tiếp:

HelloWorld helloWorld = new HelloWorld();

Document.get().getBody().appendChild(helloWorld.getElement());

helloWorld.setName("World");

UiBinder là các nhà máy tạo ra một cấu trúc UI và gán nó vào một class Java sởhữu Các UiBinder <U, O> giao diện tuyên bố hai tham số loại:

U là loại widget gốc kê khai trong tập tin ui.xml

O là loại class có chủ sở hữu @ UiFields sẽ được điền vào (Trong ví dụ này U là DivElement và O là HelloWorld.)

Bất kỳ đối tượng kê khai trong file ui.xml, bao gồm bất kỳ yếu tố DOM, cóthể được tạo sẵn cho các lớp Java thông qua các biến của mình sở hữu tên Ở đây,một <span> yếu tố trong đánh dấu là được một ui: biến thiết lập thuộc tínhnameSpan Trong Java code, một biến có cùng tên được đánh dấu bằng các

@UiField Khi uiBinder.createAndBindUi (this) chạy, các biến này được khởi tạovới các thuộc tính thích hợp của SpanElement

Class Java chúng ta tạo ra ở đây được kế thừa từ lớp UiObject, nhưng nócũng có thể được kế thừa từ lớp Widget hoặc Composite hoặc Object

Widget Hello World

Dưới đây là một ví dụ về một UiBinder mẫu có sử dụng các widget:

<! HelloWidgetWorld.ui.xml >

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'     xmlns:g='urn:import:com.google.gwt.user.client.ui'>

private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

  @UiField ListBox listBox;

  public HelloWidgetWorld(String names) {     // sets listBox

HelloWidgetWorld helloWorld =   new HelloWidgetWorld("able", "baker", "charlie");

Để sử dụng một bộ widget trong ui.xml một tập tin mẫu, bạn cần chỉ ra packagechứa chúng vào thuộc tính namespace Đó là những gì đang xảy ra trong thuộctính của tag <ui:uibinder> element: xmlns: g = "urn: import:com.google.gwt.user.client.ui ' Điều này nói rằng mỗi class trongcom.google.gwt.user.client.ui gói có thể được sử dụng như một yếu tố có tiền tố g

và một thẻ tên phù hợp với tên lớp Java của nó, giống như <g:ListBox>

Đặc biệt chú ý đến việc sử dụng một HTMLPanel Ví dụ HTMLPanel cóthể chứa bất kì đoạn HTML và widget nào, và UiBinder hoạt động rất tốt vớiHTMLPanel Nói chung, bất cứ lúc nào bạn muốn sử dụng ngôn ngữ đánh dấuHTML bên trong của một hệ thống, bạn sẽ cần một instance của HTMLPanel hoặcHTML Widget

Sử dụng Panels

Bất kỳ panel nào (trên lý thuyết, bất cứ điều gì mà impliments giao diệnHasWidgets) có thể được sử dụng trong một tập tin mẫu, và có thể có panel khácbên trong của nó

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui'>

Một điều cần chú ý đó là chúng ta không thể đặt trực tiếp HTML vào các panel,ngoại trừ trong các widget biết phải làm gì với HTML, đặc biệt là HTMLPanel, vàcác widget đó impliment giao diện HasHTML (ví dụ như thanh bên dưới

<g:west>)

Thực thể HTML

UiBinder mẫu là tập tin XML, và XML không hiểu thực thể như &nbsp;.Khi bạn cần các ký tự như vậy, bạn có thể tự xác định chúng Chúng ta cung cấpmột bộ định nghĩa rằng bạn có thể chấp nhận các kí tự đặc biệt bằng cách thiết lậpDOCTYPE thích hợp của bạn:

<Ui DOCTYPE:! UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

Xử lý sự kiện đơn giảnMột trong những mục tiêu của UiBinder là giảm việc phải code Java trongviệc xây dựng giao diện Ngoài ra còn cả việc giảm code để xử lí các action, ví dụ:

public class MyFoo extends Composite {   Button button = new Button();

  public MyFoo() {     button.addClickHandler(new ClickHandler() {       public void onClick(ClickEvent event) {         handleClick();

      }     });

    initWidget(button);

  }   void handleClick() {     Window.alert("Hello, AJAX");

  } }

Trong một class sở hữu UiBinder, bạn có thể sử dụng @UiHandler để làmđược những việc như các dòng code trên làm được

public class MyFoo extends Composite {   @UiField Button button;

  public MyFoo() {     initWidget(button);

  }   @UiHandler("button")   void handleClick(ClickEvent e) {     Window.alert("Hello, AJAX");

  } }

Tuy nhiên, có một giới hạn là: chỉ có thể chỉ sử dụng @UiHandler với sựkiện ném ra bởi các đối tượng widget, chứ không DOM thuần túy Đó là

<g:Button>, Không phải <button>

Hello Stylish World Với thẻ <ui:style>, bạn có thể định nghĩa CSS cho giao diện của bạn khi cần thiết

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>

    pretty { background-color: Skyblue; }

Trong thực tế, bạn có thể tận dụng lợi thế này trong vòng một mẫu duynhất:

Cuối cùng, bạn không cần phải có CSS bên trong file ui.xml Hầu hết các

dự án thực tế sẽ khai báo CSS của trong một file riêng biệt Trong ví dụ dưới đây,các src giá trị tương đối so với vị trí của ui.xml file

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'       xmlns:g='urn:import:com.google.gwt.user.client.ui'>

  <ui:style>

    hot { color: magenta; }     pretty { background-color: Skyblue; }

Code của bạn sẽ cần truy cập vào ít nhất một số các style mẫu của bạn sửdụng Ví dụ, giả sử widget của bạn cần thay đổi màu sắc khi nó được kích hoạthay vô hiệu hóa:

  <div class='{style.redBox} {style.enabled}'>I'm a red box widget.</div>

</ui:UiBinder>

public class MyFoo extends Widget {   interface MyStyle extends CssResource {     String enabled();

    String disabled();

  }   @UiField MyStyle style;

  / /   void setEnabled(boolean enabled) {     getElement().addStyle(enabled ? : style.enabled() : style.disabled());

    getElement().removeStyle(enabled ? : style.disabled() : style.enabled());

  } }

Các <ui:style> yếu tố có một mới thuộc tính, type ='com.my.app.MyFoo.MyStyle' Điều đó có nghĩa mà nó cần để thực hiện mà giaodiện (quy định tại mã Java cho các resource MyFoo) và cung cấp hai lớp CSS nógọi cho, kích hoạt

Bây giờ nhìn vào @UiField MyStyle Style; biến trong MyFoo.java Điềunày cho phép truy cập vào mã nguồn để các CssResource tạo ra cho các <ui:style>khối Các setEnabled phương pháp sử dụng mà lĩnh vực áp dụng được kích hoạt

và phong cách tàn tật theo các phụ tùng được bật và tắt

Sử dụng các tài nguyên bên ngoàiĐôi khi mẫu của bạn sẽ cần phải làm việc với style hay khác đối tượngkhác từ bên ngoài của mẫu của bạn Sử dụng các <ui:with> yếu tố để làm chochúng có thể được truy xuất từ UiBinder XML

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'     xmlns:g='urn:import:com.google.gwt.user.client.ui'>

  <ui:with field='res' type='com.my.app.widgets.logoname.Resources'/>

        Well hello there

        <span class='{res.style.nameSpan}' ui:field='nameSpan'/>

      </div>

  </g:HTMLPanel>

</ui:UiBinder>

/   Resources used by the entire application.

 / public interface Resources extends ClientBundle {   @Source("Style.css")

  Style style();

  @Source("Logo.jpg")   ImageResource logo();

  public interface Style extends CssResource {     String mainBlock();

    String nameSpan();

    Sprite userPictureSprite();

  } }

được khởi tạo bằng việc gọi đến hàm GWT.create(Resources.class)

Chia sẻ tài nguyênBạn có thể sử dụng các resources theo cách ở trên nhưng với việc gọi nhiềulần như vậy từ các mẫu khác nhau sẽ tốn rất nhiều tài nguyên hệ thống Vậy nênGWT cung cấp cho ta 2 khả năng để kiểm soát việc khởi tạo và quản lí cácresources này Bạn có thể đánh dấu một “nhà máy cho các hàm” thông quaannotation @UiFactory, hoặc bạn có thể điền vào chính các biến với chú thích là

@UiField (provided = true)

Đây là cách để sử dụng @UiFactory để cung cấp tài nguyên cần thiết chomẫu trong Ví dụ trước đây

public class LogoNamePanel extends Composite {   interface MyUiBinder extend UiBinder<Widget, LogoNamePanel> {}

  private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

  @UiField SpanElement nameSpan;

  final Resources resources;

  public LogoNamePanel(Resources resources) {     this.resources = resources;

    initWidget(uiBinder.createAndBindUi(this));

  }   public void setUserName(String userName) {     nameSpan.setInnerText(userName);

  }   @UiFactory / this method could be static if you like /   public Resources getResources() {

    return resources;

  } }

public class LogoNamePanel extends Composite {   interface MyUiBinder extends UiBinder<Widget, LogoNamePanel> {}

  private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

  @UiField SpanElement nameSpan;

  @UiField(provided = true)   final Resources resources;

  public LogoNamePanel(Resources resources) {     this.resources = resources;

    initWidget(uiBinder.createAndBindUi(this));

  }   public void setUserName(String userName) {     nameSpan.setInnerText(userName);

  } }

Sử dụng một widget mà yêu cầu hàm khởi tạo có tham sốTất cả các widget được định nghĩa trong mẫu sẽ được khởi tạo bởi việc gọihàm GWT.create() Trong phần lớn trường hợp này có nghĩa là chúng phải là cácđối tượng có thể được khởi tạo bằng các hàm khởi tạo không tham số Tuy nhiên,

có một số cách để thực hiện khởi tạo những đối tượng mà các hàm khởi tạo cầntham số Ngoài các @UiFactory và @UiField (provided = true) đã nói ở trên, bạn

có thể đánh dấu các widget của riêng bạn với các chú thích @UiConstructor để cóthể sử dụng tại UiBinder XML

Giả sử bạn có một widget hiện có nhu cầu đối số constructor:

public CricketScores(String teamNames) { }

Bạn sử dụng nó trong một mẫu:

<! UserDashboard.ui.xml >

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'     xmlns:g='urn:import:com.google.gwt.user.client.ui'     xmlns:my='urn:import:com.my.app.widgets' >

  } }

Một lỗi xuất hiện:

[ERROR] com.my.app.widgets.CricketScores has no default (zero args)

constructor To fix this, you can define a @UiFactory method on the

UiBinder's owner, or annotate a constructor of CricketScores with

@UiConstructor

public class UserDashboard extends Composite {

  interface MyUiBinder extends UiBinder<Widget, UserDashboard>;

  private static final MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

  private final String[] teamNames;

  public UserDashboard(String teamNames) {

    this.teamNames = teamNames;

    initWidget(uiBinder.createAndBindUi(this));

  }

  / Used by MyUiBinder to instantiate CricketScores /

  @UiFactory CricketScores makeCricketScores() { // method name is insignificant

    return new CricketScores(teamNames);

Hoặc điền vào một field được đánh dấu bằng @UiField (provided = true)

public class UserDashboard extends Composite {

  interface MyUiBinder extends UiBinder<Widget, UserDashboard>;

  private static final MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

  @UiField(provided=true)

  final CricketScores cricketScores; // cannot be private

  public UserDashboard(CricketScores cricketScores) {

    // DI fans take note!

    this.cricketScores = cricketScores;

    initWidget(uiBinder.createAndBindUi(this));

  }

Áp dụng các XML mẫu khác nhau để cho cùng một widget

Có một yêu cầu đặt ra là chúng ta đôi khi cần sử dụng các mẫu UiBinderkhác nhau cho cùng một widget Việc sử dụng annotation @UiTemplate sẽ thaythế cho việc sử dụng các XML mẫu mặc định, cụ thể:

public class FooPickerController {

  public interface Display {

    HasText getTitleField();

    SourcesChangeEvents getPickerSelect();