LVTN: Công Cụ Thiết Kế CSDL Online GVHD: Ts.TRẦN CAO ĐỆ

Mục lục
CHƯƠNG 1: TỔNG QUAN 4
1.1 ĐẶT VẤN ĐỀ 4
1.2 LỊCH SỬ GIẢI QUYẾT VẤN ĐỀ 4
1.3 PHẠM VI CỦA ĐỀ TÀI 5
1.4 PHƯƠNG PHÁP NGHIÊN CỨU VÀ GIẢI QUYẾT VẤN ĐỀ 6
CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 9
2.1 MÔ HÌNH DỮ LIỆU QUAN NIỆM (cdm)[1] 9
2.1.1 Các đối tượng của mô hình dữ liệu quan niệm 10
2.1.2 Các bước xây dựng mô hình dữ liệu quan niệm 13
2.1.3 Chuyển từ mô hình dữ liệu quan niệm sang mô hình vật lý (PDM) 14
2.1.4 Mysql 16
2.2 FRAMEWORK GWT 20
2.2.1 Tổng quan về tập hợp các công cụ cao cấp của GWT [2] 20
2.2.2 Các chức năng cơ bản trong GWT 22
2.3 GOOGLE APP ENGINE VÀ DATASTORE[4] 34
2.3.1 Google App Engine 34
2.3.2 Datastore 35
2.4 SỬ DỤNG OAUTH 2.0 ĐỂ TRUY CẬP CÁC GOOGLE API 37
CHƯƠNG 3: NỘI DUNG NGHIÊN CỨU VÀ KẾT QUẢ 47
3.1 PHÂN TÍCH YÊU CẦU 47
3.1.1 Yêu cầu chức năng: 47
3.1.2 Yêu cầu phi chức năng 48
3.2 THIẾT KẾ TỔNG QUAN 49
3.2.1 Kiến trúc phần mềm 49
3.2.2 Mô hình triển khai ứng dụng 51
SVTH: Đinh Hoàng Lương MSSV: 1081578 Page 1
Lê Trần Phúc MSSV: 1081593
LVTN: Công Cụ Thiết Kế CSDL Online GVHD: Ts.TRẦN CAO ĐỆ

5
HTML HyperText Markup Language
6
SQL Structured Query Language
7
UML Unified Modeling Language
8
CDM Conceptual Data Model
9
PDM Physical Data Model
10
PHP Hypertext Preprocessor
11
JSNI Javascript native interface
SVTH: Đinh Hoàng Lương MSSV: 1081578 Page 3
Lê Trần Phúc MSSV: 1081593
LVTN: Công Cụ Thiết Kế CSDL Online GVHD: Ts.TRẦN CAO ĐỆ

CHƯƠNG 1: TỔNG QUAN
1.1 ĐẶT VẤN ĐỀ
Điện toán đám mây là công nghệ được nói đến nhiều nhất trong năm. Trước
đây, sự phát triển của web 2.0 làm tăng khả năng tương tác với người dùng và làm
phát sinh ra ý tưởng phần mềm như một dịch vụ. Môt phần mềm chạy trên nền
tảng web, người dùng có thể truy cập và sử dụng mọi lúc mọi nơi mà không quan
tâm tới vấn đề cài đặt, bảo trì, nâng cấp. Một phần mềm độc lập với nền tảng thậm
chí là thiết bị. Một điều thú vị ở đây là cách chúng ta thanh toán khi sử dụng sản
phẩm, không giống như ngành kinh doanh phần mềm truyền thống, thay vì phải
mua trọn gói thì người dùng chỉ chi trả chi phí cho những gì mình sử dụng, có thể
tính theo tháng, theo giờ hay theo dịch vụ tùy nhà cung cấp. Đến thời đại của điện
toán đám mây, thì nó không còn là ý tưởng mà trở thành xu hướng. Một xu hướng

gặp nhau nhưng các công cụ online thường hỗ trợ chúng ta làm việc đó tốt hơn.
Các mô hình sẽ được lưu trữ online và đồng bộ hóa với các client khi cần thiết.
Hiện nay, theo nhóm nghiên cứu khảo sát, có một số công cụ cho phép vẽ online
như: Paint của Google, lucidchart.com … nhưng các công cụ chủ yếu chuyên về
vẽ sơ đồ chưa có các chức năng hỗ trợ cho phép chuyển đổi giữa sơ đồ hay tự
động sinh mã nguồn từ sơ đồ. Chưa phải là một công cụ chuyên biệt hỗ trợ cho
lĩnh vực thiết kế phần mềm.
Trong đề tài này, sẽ tập trung nghiêu cứu xây dựng một công cụ hỗ trợ thiết
kế cơ sở dữ liệu trên nền tảng web. Cụ thể nhóm nghiên cứu sẽ phải:
• Nghiên cứu các thao tác thiết kế cơ sở dữ liệu, bao gồm mô hình CDM, PDM
và quy tắc chuyển đổi từ CDM sang PDM.
• Nghiên cứu khả năng đồ họa trên nền tảng web của những trình duyệt, thiết kế
giải thuật đồ họa để xây dựng các công cụ cho phép người dùng vẽ các mô
hình.
• Dựa trên các nguyên tắc chuyển đổi đã nghiên cứu, thiết kế và cài đặt giải thuật
chuyển đổi từ mô hình CDM sang PDM, PDM sang mã nguồn Sql trong Mysql
5.0.
• Nghiên cứu tìm giải pháp lưu trữ mô hình, cho phép người dùng lưu trữ mô
hình và mở ra để chỉnh sửa khi cần.
• Nghiên cứu triển khai ứng dụng trên nền tảng điện toán đám mây Google App
Engine của Google.
1.3 PHẠM VI CỦA ĐỀ TÀI
Trong đề tài này sẽ trình bày quá trình xây dựng ứng dụng thiết kế mô hình
cơ sở dữ liệu trực tuyến. Chương trình hỗ trợ người dùng vẽ mô hình dữ liệu ngữ
cảnh và mô hình dữ liệu vật lý, cho phép chuyển từ mô hình dữ liệu ngữ cảnh sang
mô hình dữ liệu vật lý, chuyển từ mô hình dữ liệu vật lý sang mã nguồn SQL
tương thích với Mysql5.0. Các vấn đề đặt ra là đồ họa trên web, khả năng tương
tác linh hoạt với người dùng, lưu trữ sơ đồ, cài đặt giải thuật đồ họa, khả năng lưu
trữ mô hình, cài đặt giải thuật chuyển đổi giữa các mô hình, khả năng tương thích
với nhiều trình duyệt và tốc độ xử lý.

LVTN: Công Cụ Thiết Kế CSDL Online GVHD: Ts.TRẦN CAO ĐỆ

Kế hoạch làm việc của nhóm như sau:
Thời gian Công việc
3/1/2012 đến 3/2/2012 Tìm kiếm nghiên cứu thử nghiệm các giải pháp cho đồ
họa trên web như: thư viện JavaScript Closure library,
framework Railto, SVG Editor, framework GWT, thư
viện Smartgwt.
3/2/2012 đến 10/2/2012 Thiết kế cấu trúc file xml cho sơ đồ CDM, và PDM.
10/2/2012 đến 20/2/2010 Xây dựng khung chương trình.
20/2/2012 đến 2/4/2012 Nghiên cứu thiết kế giải thuật đồ họa cho các thực thể,
các mối quan hệ, xử lý các sự kiện bao gồm:
 Giải các phương trình toán học tìm ra công thức
tổng quát hỗ trợ đồ họa các mô hình.
 Cài đặt các giải thuật đồ họa.
 Xây dựng các gói đồ họa CDM.
2/4/2012 đến 9/4/2012 Xây dựng các gói PDM.
9/4/2012 đến 20/4/2012 Hoàn thành gói chuyển từ CDM sang PDM bao gồm:
 Xuất từ mô hình đồ họa CDM, PDM sang file
xml.
 Nhập file xml thành mô hình đồ họa CDM, PDM.
 Cài đặt giải thuật chuyển tài liệu xml của CDM
thành tài liệu xml PDM.
20/4/2012 đến 25/4/2012 Hoàn thành gói chuyển từ PDM sang mã nguồn sql
Mysql 5.0.
25/4/2012 đến 30/4/2012 Cài đặt các gói lưu trữ sơ đồ trên hệ cơ sở dữ liệu
Datastore của Google App Engine.
Cài đặt cho phép người dùng đăng nhập bằng tài khoản
Gmail của Google.
SVTH: Đinh Hoàng Lương MSSV: 1081578 Page 7

chứng thực người dùng sử dụng giao thức Oauth 2.0 để truy cập các API của
google. Trong chương này chỉ giới thiệu tổng quan không đi sâu vào chi tiết
những ứng dụng vào đề tài, vấn đề này sẽ được đề cập trong chương sau.
Trước hết, chúng ta sẽ nghiên cứu mô hình dữ liệu quan hệ, để thấy được
các yêu cầu, các chức năng chính mà chương trình hỗ trợ mô hình hóa phải đạt
được. Tiếp theo là phần giới thiệu tổng quan về framework GWT, Google App
Engine, đây là 2 công nghệ kết hợp với nhau khá tốt vì chúng đều là sản phẩm của
Google, nó cũng là công nghệ chính được ứng dụng trong chương trình. Kế tiếp là
phần giới thiệu về datastore, cổ máy lưu trữ của đám mây google, nó được sử
dụng cho các sản phẩm, dịch vụ của google hiện nay. Cuối cùng là phần cơ sở lý
thuyết của cách thức mà giao thức OAUTH 2.0 làm việc, để giúp ta xây dựng chức
năng đăng nhập bằng tài khoản Gmail.
Giờ chúng ta sẽ bắt đầu phần đầu tiên.
2.1 MÔ HÌNH DỮ LIỆU QUAN NIỆM (CDM)[1]
Việc thiết kế cơ sở dữ liệu (CSDL) thường bắt đầu từ mức quan niệm. Với
mức quan niệm này chúng ta không cần xem xét đến chi tiết của việc thực hiện ở
mức luận lý. Mô hình dữ liệu quan niệm mô tả cấu trúc luận lý của một CSDL, nó
độc lập với bất cứ phần mềm hay cấu trúc dữ liệu nào. Mô hình quan niệm thường
chứa các đối tượng dữ liệu chưa được thực hiện trong CSDL ở mức luận lý. Mô
hình này cho ta một mô tả hình thức của dữ liệu cần thiết cho việc thực thi của các
hoạt động kinh doanh, xí nghiệp hay công ty.
Mô hình CDM cho phép:
 Mô tả tổ chức dữ liệu dưới dạng sơ đồ quan hệ thực thể (ERD-
Entity Relationship Diagram)
 Kiểm tra sự hợp lệ của việc thiết kế dữ liệu.
 Sinh mô hình dữ liệu vật lý (PDM – Physical Data Model)
 Sinh mô hình hướng đối tượng (OOM – Oriented Model)
SVTH: Đinh Hoàng Lương MSSV: 1081578 Page 9
Lê Trần Phúc MSSV: 1081593
LVTN: Công Cụ Thiết Kế CSDL Online GVHD: Ts.TRẦN CAO ĐỆ

LVTN: Công Cụ Thiết Kế CSDL Online GVHD: Ts.TRẦN CAO ĐỆ

 Many
to many:
 Quan
hệ đệ quy:
 Quan
hệ phụ thuộc
hàm:
Biển số (Cardinality):
Mỗi thực thể Entity_2 kết hợp với một và
chỉ một thực thể Entity_1. Mỗi thực thể
Entity_1 có thể không nhận được kết hợp
hay kết hợp chỉ một thực thể Entity_2.
Mỗi thực thể Entity_1 được kết hợp một
hay nhiều thực thể Entity_2. Mỗi thực thể
Entity_2 có thể không được kết hay kết
hợp chỉ một thực thể Entity_1.
Mỗi thực thể Entity_1 được kết hợp với
một hay nhiều thực thể Entity_2và mỗi
thực thể Entity_2 được kết hợp một hay
SVTH: Đinh Hoàng Lương MSSV: 1081578 Page 11
Lê Trần Phúc MSSV: 1081593
LVTN: Công Cụ Thiết Kế CSDL Online GVHD: Ts.TRẦN CAO ĐỆ

nhiều thực thể Entity_1.
Đôi khi một kiểu thực thể lại quan hệ với
chính nó với ý nghĩa kết hợp giữa hai kiểu
thực thể khác nhau…
Mỗi thực thể Entity_2 được kết hợp một

phải nằm trong cùng thực thể. Ví dụ: thuộc tính Age (tuổi) là thuộc tính dẫn xuất
ra từ thuộc tính ngày sinh.
Thuộc tính khóa
Khóa ứng viên (candidate key): là một thuộc tính hay một tập hợp các
thuộc tính có thể xác định duy nhất một thực thể của một kiểu thực thể.
Khóa chính (primary key): là một khóa ứng viên được chợn làm khóa
chính.
2.1.1.4 Tổng quát hóa/Chuyên biệt hóa:
Lớp cha (supperclass): là một kiểu thực thể bao gồm các lớp con phân biệt
cần phải thể hiện trong mô hình.
Lớp con (subclass): là một kiểu thực thể có vai trò phân biệt và cũng là
một thành viên của lớp cha.
Ví dụ: Nhân viên/ Giám đốc có mối quan hệ lớp cha/lớp con.
Tất cả các thuộc tính của lớp cha sẽ được thừa kế cho lớp con.
Chuyên biệt hóa (specialization): là quá trình cực đại hóa sự khác biệt
giữa các thành viên của một kiểu thực thể bằng cách xác định các tính chất khác
biệt giữa chúng.
Tổng quát hóa (generalization): là quá trình cực tiểu hóa sự khác biệt
giữa kiểu thực thể bằng cách xác định các đặc điểm chung.
2.1.2 Các bước xây dựng mô hình dữ liệu quan niệm
Bước 1. Xác định các kiểu thực thể.
Bước 2. Xác định các kiểu quan hệ và biển số.
Bước 3. Xác định các thuộc tính và miền trị (domain) của nó.
Bước 4. Xác định các khóa ứng viên và khóa chính.
Bước 5. Tổng quát hóa/Chuyên biệt hóa các kiểu thực thể (bước tùy chọn)
Bước 6. Vẽ sơ đồ Quan hệ-Thực thể tổng quát (ERD)
Bước 7. Cùng với người dùng kiểm tra lại ERD.
SVTH: Đinh Hoàng Lương MSSV: 1081578 Page 13
Lê Trần Phúc MSSV: 1081593
LVTN: Công Cụ Thiết Kế CSDL Online GVHD: Ts.TRẦN CAO ĐỆ


Diễn giải: Bảng BANG2 ứng với thực thể BANG2 (bên 1)có khóa chính là
thuộc tính B2_ID. Bảng BANG1 ứng với thực thể BANG1 (bên nhiều) có khóa
chính là thuộc tính B1_ID và khóa ngoại là thuộc tính B2_ID.
Nếu một quan hệ One – to – Many dạng phụ thuộc hàm thì các thuộc tính
khóa chính của thực thể bên 1 không những trở thành khóa ngoại của bảng con mà
con tham gia vào thành phần khóa chính của bảng con.
Ví dụ:
Diễn giải: ứng với một quan hệ One – to – Many dạng phụ thuộc hàm, bảng
BANG2 ứng với thực thể BANG2 (bên 1) có khóa chính là thuộc tính B2_ID.
Bảng BANG1 ứng với thực thể BANG1 (bên nhiều) có khóa chính sẽ là 2 thuộc
tính B1_ID và B2_ID, đồng thời thuộc tính B2_ID cũng là khóa ngoại của bảng
BANG1.
Qui tắc 4: Đưa các quan hệ One – to – One về dạng One – to – Many và áp
dụng qui tắc 3
Đối với các quan hệ nhị phân 1 – to – 1 giữa thực thể A và thực thể B, ta
phải xác định thực thể nào là thực thể cha (có thể xem như thực thể bên 1) và thực
thể nào là thực thể con (có thể xem như thực thể bên nhiều), sau đó ta áp dụng qui
tắc 3. Việc chọn thực thể nào là thực thể cha và thực thể con sẽ tùy thuộc vào các
ràng buộc cụ thể trong mối quan hệ giữa chúng. Thực thể mà chỉ có một thành
phần các thể hiện của nó tham gia vào quan hệ được gọi là thực thể cha. Thực thể
mà toàn bộ các thể hiện của nó có tham gia vào quan hệ được gọi là thực thể con.
Qui tắc 5: Chuyển các quan hệ chuyên biệt hóa/Tổng quát hóa sang PDM
SVTH: Đinh Hoàng Lương MSSV: 1081578 Page 15
Lê Trần Phúc MSSV: 1081593
Chuy
ển thành
LVTN: Công Cụ Thiết Kế CSDL Online GVHD: Ts.TRẦN CAO ĐỆ

Có 2 cách cơ bản để chuyển một quan hệ dạng chuyên biệt hóa/Tổng quát

select_statement
Hoặc:
CREATE [TEMPORARY] TABLE [IF NOT EXISTS] tbl_name
SVTH: Đinh Hoàng Lương MSSV: 1081578 Page 16
Lê Trần Phúc MSSV: 1081593
LVTN: Công Cụ Thiết Kế CSDL Online GVHD: Ts.TRẦN CAO ĐỆ

{ LIKE old_tbl_name | (LIKE old_tbl_name) }
create_definition:
col_name column_definition
| [CONSTRAINT [symbol]] PRIMARY KEY [index_type] (index_col_name, )
[index_type]
| {INDEX|KEY} [index_name] [index_type] (index_col_name, )
[index_type]
| [CONSTRAINT [symbol]] UNIQUE [INDEX|KEY]
[index_name] [index_type] (index_col_name, )
[index_type]
| {FULLTEXT|SPATIAL} [INDEX|KEY] [index_name] (index_col_name, )
[index_type]
| [CONSTRAINT [symbol]] FOREIGN KEY
[index_name] (index_col_name, ) reference_definition
| CHECK (expr)
column_definition:
data_type [NOT NULL | NULL] [DEFAULT default_value]
[AUTO_INCREMENT] [UNIQUE [KEY] | [PRIMARY] KEY]
[COMMENT 'string'] [reference_definition]
data_type:
BIT[(length)]
| TINYINT[(length)] [UNSIGNED] [ZEROFILL]
| SMALLINT[(length)] [UNSIGNED] [ZEROFILL]

| TEXT [BINARY]
[CHARACTER SET charset_name] [COLLATE collation_name]
| MEDIUMTEXT [BINARY]
[CHARACTER SET charset_name] [COLLATE collation_name]
| LONGTEXT [BINARY]
[CHARACTER SET charset_name] [COLLATE collation_name]
| ENUM(value1,value2,value3, )
[CHARACTER SET charset_name] [COLLATE collation_name]
| SET(value1,value2,value3, )
[CHARACTER SET charset_name] [COLLATE collation_name]
| spatial_type
index_col_name:
col_name [(length)] [ASC | DESC]
index_type:
USING {BTREE | HASH}
reference_definition:
REFERENCES tbl_name (index_col_name, )
[MATCH FULL | MATCH PARTIAL | MATCH SIMPLE]
[ON DELETE reference_option]
[ON UPDATE reference_option]
reference_option:
RESTRICT | CASCADE | SET NULL | NO ACTION
table_options:
table_option [[,] table_option]
table_option:
{ENGINE|TYPE} [=] engine_name
| AUTO_INCREMENT [=] value
| AVG_ROW_LENGTH [=] value
| [DEFAULT] CHARACTER SET [=] charset_name
| CHECKSUM [=] {0 | 1}

| ADD [CONSTRAINT [symbol]] PRIMARY KEY
[index_type] (index_col_name, ) [index_type]
| ADD [CONSTRAINT [symbol]]
UNIQUE [INDEX|KEY] [index_name]
[index_type] (index_col_name, ) [index_type]
| ADD [FULLTEXT|SPATIAL] [INDEX|KEY] [index_name]
(index_col_name, ) [index_type]
| ADD [CONSTRAINT [symbol]]
FOREIGN KEY [index_name] (index_col_name, )
reference_definition
| ALTER [COLUMN] col_name {SET DEFAULT literal | DROP DEFAULT}
| CHANGE [COLUMN] old_col_name new_col_name column_definition
[FIRST|AFTER col_name]
| MODIFY [COLUMN] col_name column_definition
[FIRST | AFTER col_name]
| DROP [COLUMN] col_name
SVTH: Đinh Hoàng Lương MSSV: 1081578 Page 19
Lê Trần Phúc MSSV: 1081593
LVTN: Công Cụ Thiết Kế CSDL Online GVHD: Ts.TRẦN CAO ĐỆ

| DROP PRIMARY KEY
| DROP {INDEX|KEY} index_name
| DROP FOREIGN KEY fk_symbol
| DISABLE KEYS
| ENABLE KEYS
| RENAME [TO] new_tbl_name
| ORDER BY col_name [, col_name]
| CONVERT TO CHARACTER SET charset_name [COLLATE collation_name]
| [DEFAULT] CHARACTER SET [=] charset_name [COLLATE [=] collation_name]
| DISCARD TABLESPACE

ứng dụng web ngày càng tăng kích cở và độ phức tạp. Những ứng dụng lớn mà
khó có thể quản lý được, và java được thiết kế để làm những ứng dụng lớn đó.Khi
mà mang tất cả những thuận lợi của java đến ứng dụng web thì GWT cũng vẫn
cho phép chúng ta tương tác với javascript khi cần thiết. Khi chúng ta bắt đầu với
GWT điều đó không có nghĩa chúng ta phải bỏ hết tất cả mã nguồn javascript cũ
của chúng ta, GWT cố gắng để không chỉ cho phép chúng ta tương tác với mã
nguồn javascript đã tồn tại của chúng ta mà còn với những dịch vụ phía server đã
tồn tại của chúng ta.
Phần cốt lõi của GWT là trình biên dịch java-to-javascript tương thích với
Internet Explorer, Firefox, Mozilla, Safari, and Opera.Trình biên dịch chuyển các
cấu trúc của java sang javascript, cho phép chúng ta sử dụng các lớp trong gói util
như Vector, Hashmap, Vector. Và trình biên dịch kết nối chúng lại thành các
widget thường dùng như Scriptaculous, JSCalendar, và TinyMCE.
GWT cũng bao gồm nhiều widget và panel để giúp cho việc xây dựng một
ứng dụng web mà giống như một ứng dụng desktop. Thư viện widget bao gồm:
text boxes, drop-down menus, và những form fields khác. Thêm vào nữa nó bao
gồm những widget phức tạp như menu bar, tree control, dialog box, tab panel,
stack panel …
Về vấn đề giao tiếp với server, GWT hỗ trợ nhiều công cụ cho nhiều trường
hợp. Công cụ đầu tiên là cách tương tác bằng đối tượng javascript
XMLHttpRequest, một đối tượng đồng hành với việc giao tiếp bất đồng bộ bằng
ajax. Một công cụ khác được cung cấp bởi GWT là tập hợp những lớp thao tác
trên định dạng tin nhắn json, một định dạng được biết đến với tính đơn giản và
thông dụng.Đặc biệt GWT còn cho phép gửi một đối tượng java về server mà
không cần một định dạng tin nhắn nào trung gian.
GWT còn cho phép chúng ta giao tiếp với bất kỳ dịch vụ phía server viết
bằng ngôn ngữ nào (ví dụ php, java, python). Ngoài ra nó còn có thể tích hợp với
các framework java khác như Java-Server Faces (JSF), Spring, Struts, and
Enterprise JavaBeans. Tính mềm dễ này của GWT cho phép chúng ta tiếp tục sử
dụng các công cụ phía server mà chúng ta đang sử dụng.


cùng với một file cấu hình đơn giản. Đặc trưng của một module là một lớp entry
point, đó là một lớp mà thực thi khi dự án bắt đầu.
Trình biên dịch bắt đầu biên dịch lớp entry point cùng với những yêu cầu
kèm theo để biên dịch mã nguồn java. Trình biên dịch GWT làm việc khác với
trình biên dịch tiêu chuẩn của java bởi gì nó không biên dịch mọi thứ trong
module mà chỉ biên dịch những gì được sử dụng trong lớp entry point.
Trình biên dịch có ba cách để xuất ra mã nguồn javascript. Cách mặt định là
“xáo trộn”(obfuscate) làm cho mã nguồn javascript rất khó đọc, không có khoảng
cách giữa các câu lệnh, trông giống như một đoạn đã bị mã hóa gần như không thể
đọc được. Cách này giúp chống lại các kẻ trộm mã nguồn và làm cho kích thước
file javascript nhỏ hơn rất nhiều. Nó hữu ích cho các ứng dụng lớn.đây là một ví
dụ:
function b(){return this.c + '@' + this.d();}
Cách thứ 2 là “xinh đẹp” (pretty), cách này tạo ra mã nguồn có thể đọc
được.Nó lại giữ mã nguồn java gốc và cách 1 “xáo trộn”. Như phương thức
_toString() dưới đây chúng ta có thể đọc được nội dung nhưng chúng ta không biết
được phương thức này viết cho lớp nào.
function _toString(){
return this._typeName + '@' + this._hashCode();
}
Cách cuối cùng là “chi tiết” (detailed), nó tạo ra mã nguồn javascript giống
như cách xinh đẹp nhưng nó thêm tên lớp như một phần của tên phương thức
javascript. Làm chúng ta dễ dàng theo dỗi mã nguồn javascript khi so sánh với mã
nguồn java gốc. Đây là một ví dụ mã nguồn được biên dịch ở chế độ “chi tiết”,
chúng ta có thể nhìn thấy phương thức _toString() được viết cho lớp
java.lang.object
function java_lang_Object_toString__(){
return this.java_lang_Object_typeName + '@' + this.hashCode__();
}

mà được tạo ra từ java. Đây là một ví dụ đơn giản về nó:
public native int addTwoNumbers (int x, int y)
/*-{
var result = x + y;
return result;
}-*/;
Trong java, chúng ta có thể khai báo một phương thức là native để thông
báo cho trình biên dịch biết rằng phương thức này được cài đặt bằng một ngôn
ngữ khác.Theo tài liệu lập trình java khi chúng ta khai báo một phương thức native
chúng ta không được cho phép xác định đoạn mã cài đặt định nghĩa phương thức
đó. Có thể chúng ta chưa thấy điều này trước đây, đây là cách mà cỗ máy java
được xây dựng để từ mã nguồn java chúng ta có thể gọi các thư viện đã biên dịch
được viết bằng ngôn ngữ C hoặc C++.
Khi chúng ta xem đoạn mã trên chúng ta sẽ thấy đoạn code bên trong
phương thức được chứa trong ký hiệu chú thích nhiều dòng. Bên trong chú thích
SVTH: Đinh Hoàng Lương MSSV: 1081578 Page 24
Lê Trần Phúc MSSV: 1081593
LVTN: Công Cụ Thiết Kế CSDL Online GVHD: Ts.TRẦN CAO ĐỆ

này là mã nguồn javascript chúng ta nhúng vào. Khi phương thức này thực thi thì
đoạn mã này được thi. Điều này làm thỏa mãn yêu cầu không cho phép cài đặt nội
dung cho phương thức native nhưng nó đã cung cấp được đoạn Javascript mà trình
biên dịch GWT dùng để thực thi khi gọi phương thức này.
Ví dụ dưới đây truyền một danh sách đối tượng java và sử dụng javascript
để thêm 2 thành phần đến chúng:
public native void fillData (List data)tfrdu7
/*-{
::add(Ljava/lang/Object;)('item1');
::add(Ljava/lang/Object;)('item2');
}-*/;