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

Hà Nội University of Industry

Thực Tập Tốt
Nghiệp

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

Họ Tên

Điện thoại

Email

1

Đỗ Kim Bảo

0973 868 796



2

Nguyễn Thị Lệ

0934 206 818

Nghiên Cứu & Xây Dựng Ứng Dụng Với Google Web Toolkit

Trang 1


Hà Nội University of Industry

Thực Tập Tốt
Nghiệp

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.
Nhóm thực hiện.
Đỗ Kim Bảo
Nguyễn Thị Lệ

Nghiên Cứu & Xây Dựng Ứng Dụng Với Google Web Toolkit

Trang 2


Hà Nội University of Industry

Thực Tập Tốt
Nghiệp

TÓM TẮT ĐỒ ÁN
Đề tài : “Ngiên cứu và xây dựng ứng dụng trên Google Web Toolkit” :
Ngày nay, với sự phát triển không ngừng của thế hệ Web 2.0, việc xây
dựng 1 ứng dụng chạy trên nền web, gọi tắt là RIA (Rich Internet Application) đã
trở nên khá phổ biến. Các ứng dụng này sử dụng công nghệ AJAX (Asynchronous
Javascript + XML) và có thể hoạt động hoàn toàn như 1 ứng dụng chạy trên nền
desktop. Hiện tại có khoảng 200-300 framework/toolkit do nhiều nhà phát triển
khác nhau cung cấp cho việc xây dựng các ứng dụng RIA, nổi bật có Flash/Flex
(Adobe), Silverlight (Microsoft), Google Web Toolkit (Google) … và mới đây 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ụng
desktop thông thường. Trong khi 1 ứng dụng desktop thông thường sẽ phải tốn
nhiề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ụng

trê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ải
cà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 plugin, công nghệ hỗ trợ cho GWT, nhận xét ưu khuyết điểm so với các framework
trong 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 được
xâ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 desktop
thô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 chi
tiết về trạng thái, báo cáo khi có thông tin sai sót.
- Đảm bảo tính chính xác của dữ liệu.

Nghiên Cứu & Xây Dựng Ứng Dụng Với Google Web Toolkit

Trang 3


Hà Nội University of Industry

Thực Tập Tốt
Nghiệp

MỤC LỤC
CHƯƠNG I : GIỚI THIỆU TỔNG QUAN.................................................................................................................7
CHƯƠNG II : NGHIÊN CỨU VỀ GWT....................................................................................................................8
Hình 4.1.3 : SplitLayoutPanel....................................................................................................................................18
Hình 4.1.5 : TabLayoutPanel.....................................................................................................................................19
Hình 4.2.2 : PushButton Widget................................................................................................................................19
Hình 4.2.3 : RadioButton Widget...............................................................................................................................19
Hình 4.2.4 : Checkbox Widget...................................................................................................................................20
Hình 4.2.5 : DatePicker Widget.................................................................................................................................20
Hình 2.4.6 : ToggleButton widget..............................................................................................................................20
Hình 2.4.7 : TextBox Widget......................................................................................................................................20
Hình 4.2.8 : PasswordTextBox widget.......................................................................................................................20
Hình 4.2.8 : TextArea widget.....................................................................................................................................21
Hình 4.2.9 : Hyperlink widget....................................................................................................................................21
Hình 4.2.10 : ListBox widget......................................................................................................................................21
Hình 4.2.11 : MenuBar widget...................................................................................................................................21
Hình 4.2.12 : Tree widget...........................................................................................................................................21
Hình 4.2.13 : SuggestBox widget...............................................................................................................................22
Hình 4.2.14 : RichTextArea widget............................................................................................................................22
Hình 4.2.15 : Table widget.........................................................................................................................................22
Hình 4.2.16 : TabBar widget......................................................................................................................................23
Hình 4.2.18 : PopupPanel widget..............................................................................................................................23
Hình 4.2.23 : VerticalSplitPanel widget....................................................................................................................24
Hình 4.2.24 : HorizontalSplitPanel...........................................................................................................................25
Hình 4.2.26 : DockPanel and DockLayoutPanel......................................................................................................25
Hình 4.2.27 : TabPanel and TabLayoutPanel...........................................................................................................25

Nghiên Cứu & Xây Dựng Ứng Dụng Với Google Web Toolkit

Trang 4


Hà Nội University of Industry

Thực Tập Tốt
Nghiệp

DANH SÁCH HÌNH VẼ
CHƯƠNG I : GIỚI THIỆU TỔNG QUAN.................................................................................................................7
CHƯƠNG II : NGHIÊN CỨU VỀ GWT....................................................................................................................8
Hình 4.1.3 : SplitLayoutPanel....................................................................................................................................18
Hình 4.1.5 : TabLayoutPanel.....................................................................................................................................19
Hình 4.2.2 : PushButton Widget................................................................................................................................19
Hình 4.2.3 : RadioButton Widget...............................................................................................................................19
Hình 4.2.4 : Checkbox Widget...................................................................................................................................20
Hình 4.2.5 : DatePicker Widget.................................................................................................................................20
Hình 2.4.6 : ToggleButton widget..............................................................................................................................20
Hình 2.4.7 : TextBox Widget......................................................................................................................................20
Hình 4.2.8 : PasswordTextBox widget.......................................................................................................................20
Hình 4.2.8 : TextArea widget.....................................................................................................................................21
Hình 4.2.9 : Hyperlink widget....................................................................................................................................21
Hình 4.2.10 : ListBox widget......................................................................................................................................21
Hình 4.2.11 : MenuBar widget...................................................................................................................................21
Hình 4.2.12 : Tree widget...........................................................................................................................................21
Hình 4.2.13 : SuggestBox widget...............................................................................................................................22
Hình 4.2.14 : RichTextArea widget............................................................................................................................22

Hình 4.2.15 : Table widget.........................................................................................................................................22
Hình 4.2.16 : TabBar widget......................................................................................................................................23
Hình 4.2.18 : PopupPanel widget..............................................................................................................................23
Hình 4.2.23 : VerticalSplitPanel widget....................................................................................................................24
Hình 4.2.24 : HorizontalSplitPanel...........................................................................................................................25
Hình 4.2.26 : DockPanel and DockLayoutPanel......................................................................................................25

Nghiên Cứu & Xây Dựng Ứng Dụng Với Google Web Toolkit

Trang 5


Hà Nội University of Industry

Thực Tập Tốt
Nghiệp

Hình 4.2.27 : TabPanel and TabLayoutPanel...........................................................................................................25

Nghiên Cứu & Xây Dựng Ứng Dụng Với Google Web Toolkit

Trang 6


Hà Nội University of Industry

Thực Tập Tốt
Nghiệp

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ác
cô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ụng
các công cụ phát triển Java tuỳ theo ý thích. Khi bạn triển khai ứng dụng của
mì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ốn
nhiề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ụng
trê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ải
cà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ợ cho
GWT, nhận xét ưu khuyết điểm so với các framework trong việc xây dựng ứng
dụ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ựa
trê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.

Nghiên Cứu & Xây Dựng Ứng Dụng Với Google Web Toolkit

Trang 7


Hà Nội University of Industry

Thực Tập Tốt
Nghiệp

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át
triể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
-

1.1.
-

1.2.
-

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ển
khai 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ất
trong 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 ứng
dụ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ùng
trong 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..
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ình
duyệ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ép
cá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
Speed tracer.
Speed tracer là một công cụ để giúp bạn xác định và sửa chữa các vấn đề về hiệu
suất trong các ứng dụng web của bạn. Nó hình dung các số liệu được lấy từ điểm

thiết bị đo đạc mức đọ thấp bên trong của trình duyệt và phân tích chúng như chạy
ứng dụng của bạn. Speed Tracer có sãn như là một phần mở rộng của Chrome và
hoạt động trên tất cả các nền tảng mở rộng được hỗ trợ (Windows và Linux)

Nghiên Cứu & Xây Dựng Ứng Dụng Với Google Web Toolkit

Trang 8


Hà Nội University of Industry

-

1.3.
-

1.4.
-

-

Thực Tập Tốt
Nghiệp

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 ra
bở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…
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ột
plugin cho Eclipse làm cho phát triển với GWT thậm chí còn dễ dàng hơn.
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àng
thê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ều
khiể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ụng
mộ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ình
bày trực quan. SỬ dụng các công cụ bố trí WYSIWYG, bạn không cần thiết phải
viết bất kì một dòng mã jav mã sẽ tạo ra cho bạn GWT Designer.

Nghiên Cứu & Xây Dựng Ứng Dụng Với Google Web Toolkit

Trang 9


Hà Nội University of Industry

Thực Tập Tốt
Nghiệp

2. Cấu trúc GWT.

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

Nghiên Cứu & Xây Dựng Ứng Dụng Với Google Web Toolkit

Trang 10


Hà Nội University of Industry

Thực Tập Tốt
Nghiệp

Hình 2.2 : Các thành phần trong GWT

 Thành phần cấu trúc GWT :
- GWT Java-to-JavaScript Compiler: dịch ngôn ngữ lập trình java sang ngôn ngữ
lập trình java script.
- Hosted của trình duyệt web GWT: cho phép bạn chạy và thực thi các ứng dụng
GWT của bạn trên Hosted mode, nơi mà mã của bạn chạy như java trong Java
Virtual Machine mà không cần biên dịch java script.
- Mô phỏng thư viên JRE: GWT có chứa java script triển khai của các lớp thư viện
java 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ặc
phầ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ủa
bạ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ùng
mộ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 gia
khá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ủa
bạ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ác
nguồ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
App Engine cung cấp dịch vụ phân phân phối, nhân rộng và điều chỉnh dữ liệu,
giải phóng bạn tập trung bạn vào việc thực hiện logic kinh doanh thương mại.
Nghiên Cứu & Xây Dựng Ứng Dụng Với Google Web Toolkit

Trang 11


Hà Nội University of Industry

-

-

-

-

-

-

-

-

Thực Tập Tốt
Nghiệp

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ấu
trú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ụng
rộ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êu
cầ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ính
giố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ấn
bằ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ày
cùng hộ trợ giao dịch thông tin cập nhật về nhóm duy nhất được xác định ứng
dụ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ấp
mạ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ấn
khá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ệu

java(JDO) và giao diện Java Persistence API(JPA), cũng như một kho dữ liệu API
cấ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à java
Persistence API(JPA). Các giao diện tiêu chuẩn bao gồm các cơ chế để xác định
cá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.
Nhiều nhà pháp triển Java sử dụng các khuôn khổ, đội ngủ google app engine
khuyến cáo và khuyến khích bạn nghiên cứu chúng:
Objectify : là một giao diện rất đơn giản và thuận tiện để các kho dữ liệu google
app engine giúp bạn tránh một số sự phức tạp được trình bày bởi JDO/JPA và kho
dữ liệu cấp thấp

Nghiên Cứu & Xây Dựng Ứng Dụng Với Google Web Toolkit

Trang 12


Hà Nội University of Industry

3.1.
-

Thực Tập Tốt
Nghiệp

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ức
nă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ạn
xá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 trong
cù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ữ.
Định nghĩ một entity classes.
Định nghĩa một entity có tên entity, id entity,và các thuộc tính khác. Các kiểu của
thuộc tính bao gồm: string, integer, long…
Ví dụ:
public class Car
{
@Id Long id;
String vin;
int color;
private Car() {}
public Car(String vin, int color)
{

this.vin = vin;
this.color = color;
}
}

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));
/ Change some data and write it
porsche.color = "blue";
ofy.put(porsche);

Nghiên Cứu & Xây Dựng Ứng Dụng Với Google Web Toolkit

Trang 13

Hà Nội University of Industry

Thực Tập Tốt
Nghiệp

// 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ệu
trong 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ột
giao 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ống
như 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ột
nhiề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.
Quan hệ một – một
public class Person
{
@Id String name;
Key<Person> significantOther;
}
Objectify ofy = ObjectifyService.begin();
Person bob = ofy.get(Person, "bob");
Person bobswife = ofy.get(bob.significantOther);

Quan hệ một nhiều:
public class Employee
{
@Id String name;
Key<Employee> manager;
}
Objectify ofy = ObjectifyService.begin();
Employee bob = ofy.get(Employee.class, "bob");

Employee fred = ofy.get(bob.manager);

Nghiên Cứu & Xây Dựng Ứng Dụng Với Google Web Toolkit

Trang 14


Hà Nội University of Industry

Thực Tập Tốt
Nghiệp

3.4.3. Quan hệ nhiều nhiều.
Ví dụ
public class Employee
{
@Id String name;
Key<Employee>[] subordinates;
}
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àm
RootPanel.get() được một panel duy nhất bao lấy thẻ <body>. Sử dụng hàm
RootPanel.get(String id) để có được một panel bao ngoài một phần tử bất kỳ trên
trang.

 FlowPanel
- FlowPanel là panel đơn giản nhất. Nó tạo ra một thẻ đơn <div> và có thể put các
thẻ 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 layout
cá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ực
tiế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 bao
bở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ên
trong 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ủa
bả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
tấm layout khác phải được đính kèm. Panel này kế thừa lớp LayoutPanel, do đó
bạn có thể layout số lượng phần tử bất kỳ.
Nghiên Cứu & Xây Dựng Ứng Dụng Với Google Web Toolkit

Trang 15

Hà Nội University of Industry

Thực Tập Tốt
Nghiệp

-

Bạn sử dụng RootLayoutPanel phổ biến nhất là sử dụng như một container cho
các panel 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ác
layout 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.1 : Layout Panel

 DockLayoutPanel
- DockLayoutPanel có mục đích giống với DockPanel widget, ngoại trừ việc nó sử
dụng hệ thống layout để đạt được điều này mà không sử dụng tables, và một cách
dự đoán được. Bạn sẽ thường xuyên sử dụng để xây dựng ở cấp ứng dụng cấu
trúc, như trong ví dụ sau đây:

Nghiên Cứu & Xây Dựng Ứng Dụng Với Google Web Toolkit

Trang 16

Hà Nội University of Industry

Thực Tập Tốt
Nghiệp

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ác
phầ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ỗi
phầ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 gian
còn lại).
 SplitLayoutPanel
- SplitLayoutPanel rất giống với DockLayoutPanel (thực tế là SplitLayoutPanel
extends 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.

Nghiên Cứu & Xây Dựng Ứng Dụng Với Google Web Toolkit

Trang 17


Hà Nội University of Industry

Thực Tập Tốt
Nghiệp

Hình 4.1.3 : SplitLayoutPanel

 StackLayoutPanel
- StackLayoutPanel thay thế cho StackPanel. Nó chỉ hiển thị một widget con tại một
thờ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.

Nghiên Cứu & Xây Dựng Ứng Dụng Với Google Web Toolkit

Trang 18


Hà Nội University of Industry

Thực Tập Tốt
Nghiệp

Hình 4.1.5 : TabLayoutPanel

-

Giá trị độ dài cung cấp cho constructor TabLayoutPanel xác định chiều cao của
thanh 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ên

ngoà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ận
cho mà HTML / CSS bố trí thuật toán hoạt động tốt. Cụ thể, xem xét việc sử dụng
UiBinder 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 GWT
widget đó đượ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ình
duyệt.

Hình 4.2.1 : Button Widget

Hình 4.2.2 : PushButton Widget

Hình 4.2.3 : RadioButton Widget

Nghiên Cứu & Xây Dựng Ứng Dụng Với Google Web Toolkit

Trang 19


Hà Nội University of Industry

Thực Tập Tốt
Nghiệp

Hình 4.2.4 : Checkbox Widget

Hình 4.2.5 : DatePicker Widget

Hình 2.4.6 : ToggleButton widget

Hình 2.4.7 : TextBox Widget

Hình 4.2.8 : PasswordTextBox widget

Nghiên Cứu & Xây Dựng Ứng Dụng Với Google Web Toolkit

Trang 20


Hà Nội University of Industry

Thực Tập Tốt
Nghiệp

Hình 4.2.8 : TextArea widget

Hình 4.2.9 : Hyperlink widget

Hình 4.2.10 : ListBox widget

Hình 4.2.11 : MenuBar widget

Hình 4.2.12 : Tree widget

Nghiên Cứu & Xây Dựng Ứng Dụng Với Google Web Toolkit

Trang 21


Hà Nội University of Industry

Thực Tập Tốt
Nghiệp

Hình 4.2.13 : SuggestBox widget

Hình 4.2.14 : RichTextArea widget

Hình 4.2.15 : Table widget

Nghiên Cứu & Xây Dựng Ứng Dụng Với Google Web Toolkit

Trang 22


Hà Nội University of Industry

Thực Tập Tốt
Nghiệp

Hình 4.2.16 : TabBar widget

Hình 4.2.17 : DialogBox widget

Hình 4.2.18 : PopupPanel widget

Hình 4.2.19 : StackPanel and StackLayoutPanel* widget

Nghiên Cứu & Xây Dựng Ứng Dụng Với Google Web Toolkit

Trang 23


Hà Nội University of Industry

Thực Tập Tốt
Nghiệp

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

Nghiên Cứu & Xây Dựng Ứng Dụng Với Google Web Toolkit

Trang 24


Hà Nội University of Industry

Thực Tập Tốt
Nghiệp

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

Hình 4.2.28 : DisclosurePanel

Nghiên Cứu & Xây Dựng Ứng Dụng Với Google Web Toolkit

Trang 25