XÂY DỰNG BẢNG GIÁ CHỨNG KHOÁN TRỰC TUYẾN TRÊN CÔNG NGHỆ GWT

DANH MỤC CÁC HÌNH Hình 1: Một giao diện của ứng dụng Goolge Wave Hình 2: Kết quả hiển thị kết quả tìm kiếm thông tin trên trang Google.com.vn Hình 3: Một giao diện của Google Map Hình 4

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC NÔNG LÂM TP HCM

KHOA CÔNG NGHỆ THÔNG TIN

LUẬN VĂN TỐT NGHIỆP

XÂY DỰNG BẢNG GIÁ CHỨNG KHOÁN TRỰC TUYẾN TRÊN

CÔNG NGHỆ GWT

Giáo viên hướng dẫn: Sinh viên thực hiện:

Ths Nguyễn Đức Công Song Nguyễn Thị Kim Trinh

TP.HỒ CHÍ MINH, tháng 09 năm 2010

Xin tỏ lòng biết ơn sâu sắc đến cha mẹ cùng các anh em trong gia đình đã tạo mọi điều kiện cho em học tập

Chân thành cảm ơn tất cả các bạn khoa Công nghệ thông tin trường Đại học Nông Lâm

đã tận tình giúp đỡ, chỉ dẫn cho em trong suốt thời gian thực tập tốt nghiệp

Cảm ơn tất cả các bạn lớp Liên Thông và những người thân đã chia sẻ, giúp đỡ, động viên em trong suốt những năm học qua

TP HCM, ngày 18 tháng 09 năm 2010

Nguyễn Thị Kim Trinh

MỤC LỤC

Chương 1: Mở đầu 7 

1.1 Đặt vấn đề 7 

1.2 Mục tiêu của đề tài: 7 

Chương 2 : Tổng quan về công cụ Google Web Toolkit 9 

2.1 Khảo sát một số Website dùng GWT hiện nay 9 

2.1.1  Google Wave: 9 

2.1.2 Google AdWords: 10 

2.1.3 Google Map 11 

2.2 Tìm hiểu về GWT 12 

2.2.1 Ajax và các dạng RIA 13 

2.2.2 GWT 19 

2.2.3 Các thành phần đồ họa của GWT 26 

2.2.4 Giao tiếp với server bằng RPC 59 

Chương 3 Cài đặt ứng dụng 62 

3.1 Kiến trúc hệ thống 62 

3.1.1 Lược đồ Use Case tổng quát 62 

3.1.2 Lược đồ kiến trúc hệ thống 63 

3.2 Ứng dụng 64 

3.2.1 Hướng dẫn đặt lệnh mua bán cổ phiếu 64 

3.2.2 Trình tự các bước trong giao dịch 66 

3.2.3 Hướng dẫn đặt lệnh mua bán cố phiếu 68 

Chương 4: Kết quả và hướng phát triển 72 

DANH MỤC CÁC HÌNH

Hình 1: Một giao diện của ứng dụng Goolge Wave

Hình 2: Kết quả hiển thị kết quả tìm kiếm thông tin trên trang Google.com.vn Hình 3: Một giao diện của Google Map

Hình 4: Logo của GWT

Hình 5: Chạy Google Web từ thanh công cụ

Hình 6: Công cụ quản lý Server của GWT

Hình 7: Trình duyệt web của GWT

Hình 8: Kết quả sau khi biên dịch project

Hình 9: Các đối tượng kế thừa trực tiếp Widget

Hình 10: Các widget cơ bản

Hình 11: Lược đồ Use Case tổng quát

Hình 12: Bảng giá chứng khoán điện tử

 

TÓM TẮT

Đề tài: Xây dựng bảng giá chứng khoán trực tuyến dựa trên công nghệ GWT

Mục đích của đề tài xây dựng bảng giá chứng khoán trực tuyến cho phép khách hàng tiếp cận thông tin và mua, bán chứng khoán thông qua Internet Đây thực sự là một phương tiện hữu ích giúp nhà đầu tư trong suốt cả quá trình đầu tư

Nội dung nghiên cứu trong quá trình phát triển ứng dụng:

- Tìm hiểu các công nghệ và công cụ cần thiết để phát triển ứng dụng

- Xây dựng bảng giá chứng khoán trực tuyến cho phép khách hàng tiếp cận thông tin

và mua, bán chứng khoán thông qua Internet

Các bước phát triển và kết quả:

Giai đoạn đầu, tìm hiểu đề tài:

- Tìm hiểu về công cụ Google Web Toolkit (GWT) và cách thức sử dụng thư viện của GWT

Giai đoạn sau, xây dựng ứng dụng:

- Tìm hiểu và hiện thực các thuật toán, các hàm và công thức trong quá trình đưa dữ liệu lên bảng điện tử trực tuyến

-Xây dựng phần giao diện của ứng dụng

- Hoàn chỉnh ứng dụng

Nội dung đồ án sẽ trình bày về việc tìm hiểu GWT, công cụ hỗ trợ cho quá trình phát triển ứng dụng của đề tài

NỘI DUNG BÁO CÁO

Chương 1: Mở đầu

1.1 Đặt vấn đề

Ngày nay, cùng với sự phát triển nhanh chóng của lĩnh vực truyền thông nói chung thì Công nghệ thông tin đã và đang đóng vai trò hết sức quan trọng trong đời sống kinh tế, xã hội của nhiều quốc gia trên thế giới, là một phần không thể thiếu trong một xã hội ngày càng hiện đại hóa Chúng ta không thể không nhắc đến sự ra đời một cách nhanh chóng của nhiều ông nghệ web như Google Maps, OpenSocial, Android, Gears, …và Google Web Toolkit(GWT) cũng là một trong những công

cụ không thể thiếu để đáp ứng yêu cầu của việc xây dựng các ứng dụng Web

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 trình duyệt dựa trên các ứng dụng phức tạp GWT cho phép phát triển năng suất cao hiệu suất các ứng dụng web và được sử dụng bởi nhiều sản phẩm tại Google, bao gồm Google Wave và phiên bản mới của Google Adword Đó 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 Bên cạnh đó, cuộc cách mạng Internet đã và đang thay đổi cơ bản xã hội loài người Nó đã ảnh hưởng lớn đến cách chúng ta trao đổi thông tin và cách chúng ta làm kinh doanh trong đó có đầu tư chứng khoán

Từ những thế mạnh đó, chúng tôi đã chọn GWT để nghiên cứu và xây dựng giao dịch chứng khoán trực tuyến dựa trên công nghệ này

1.2 Mục tiêu của đề tài:

Sau khi xây dựng xong bảng giá chứng khoán giao dịch trực tuyến, khách hàng có thể: + Đặt lệnh gần như mọi lúc mọi nơi.Với một chiếc máy tính có kết nối internet, bạn có thể đặt lệnh từ bất kỳ nơi đâu trên thế giới

+ Kiểm soát tài sản của mình: Tài khoản thực sự là của bạn vì nó luôn trong tầm tay và

sự kiểm soát của bạn Tất cả diễn biến giao dịch, các hoạt động liên quan đến tài khoản, lãi/lỗ trên danh mục đầu tư của bạn đều được phản ánh tức thời trên bảng giá chứng khoán Dù ở đâu hay vào bất kỳ lúc nào, bạn cũng có thể theo dõi được các tài sản của mình

+ Theo dõi các thông tin giao dịch của mình: Mỗi khi cần đặt lệnh, bạn không cần thiết phải đến sàn giao dịch hoặc gọi điện đến nhân viên môi giới mà vẫn có thể đặt lệnh theo ý muốn, theo dõi tình trạng của lệnh một cách cập nhật Kết quả khớp lệnh luôn được cập nhật với đầy đủ các thông tin sẽ giúp bạn ra các quyết định mua, bán chính xác hơn

+ Theo dõi diễn biến thị trường trên cùng màn hình đặt lệnh: được thiết kế để hỗ trợ tối

đa cho các nhà đầu tư trong việc đồng thời theo dõi giá chứng khoán, các chỉ số index

và đặt lệnh cùng một lúc trên cùng một trang màn hình

Chương 2 : Tổng quan về công cụ Google Web Toolkit 2.1 Khảo sát một số Website dùng GWT hiện nay

Chúng ta đang sử dụng Gmail hay Google, chúng ta yêu thích tính năng của Google

Suggest hay ứng dụng web Ta-da List, Backpack, BaseCamp của 37Signals

Trên đây là một số các ứng dụng dịch vụ web nổi lên trong thời gian gần đây như là những ứng dụng không chỉ giàu tính năng mà còn có tính chất "cách mạng" trong lịch

sử phát triển của các ứng dụng web Điểm chung của các dịch vụ web này là gì? Câu trả lời là những tính năng và cách thức nó tương tác với người dùng rất tiện lợi và nhanh chóng đến nỗi chúng ta gần như tưởng mình đang sử dụng một phần mềm chứ không phải đang xem trang web

Chúng ta tham khảo một số ứng dụng được xây dựng bằng công cụ GWT nổi tiếng và được sử dụng phổ biến trên thế giới hiện nay để thấy được điều đó

2.1.1 Google Wave:

Một số người cho rằng đây là thế hệ email thứ hai, số khác thì cho rằng đây là bách khoa toàn thư mở, tương tự như Wikipedia, và được kết hợp với mạng xã hội Nói một cách chính xác thì Google Wave chính là nền tảng thời gian thực kết hợp giữa nhắn tin IM, e-mail, hợp tác trong công việc và biên soạn các dạng tài liệu khác nhau

Hình 1: Một giao diện của ứng dụng Goolge Wave Giao diện của Wave gồm 3 cột, trong đó cột đầu chứa chức năng và danh sách bạn

bè, cột thứ 2 liệt kê các wave đang hoạt động trong Inbox và cột thứ 3 để người dùng tạo mới hoặc mở ra các Wave đang có

Google Wave thật sự hoàn hảo, tuyệt diệu, nó thừa sức thay thế cả Yahoo, Facebook, Twitter thêm nữa nó được phát triển bởi gã khổng lồ Google, với chiến lược quảng bá rộng rãi, bài bản thì thật sự khó cho Yahoo Messenger có thể vượt qua được cuộc cạnh tranh này Đây rất có thể là dấu chấm hết cho kỉ nguyên Yahoo Messenger và Google Search ( chính trang này cũng rất dễ bị thay thế bởi công cụ hoàn hảo Google Wave) Chúng ta hãy lắng nghe từng nhịp đập của Google Wave, nó sẽ chinh phục thế giới này

2.1.2 Google AdWords:

Google AdWords là cách quảng cáo dễ dàng và nhanh chóng trên Google, không liên quan đến ngân sách của bạn Quảng cáo AdWords được hiển thị cùng với các kết quả tìm kiếm trên Google, cũng như trên các trang web tìm kiếm và nội dung trong Mạng Google Với các tìm kiếm trên Google và các giao diện trang trên

Mạng Google mỗi ngày, các quảng cáo Google AdWords của bạn sẽ tiếp cận được một số lượng lớn đối tượng

Hình 2: Kết quả hiển thị kết quả tìm kiếm thông tin trên trang Google.com.vn

2.1.3 Google Map

Google Maps (thời gian trước còn gọi là Google Local) là một dịch vụ ứng dụng và công nghệ bản đồ trực tuyến trên web miễn phí được cung cấp bởi Google Nó cho phép thấy bản đồ đường xá, đường đi cho xe đạp, cho người đi bộ (những đường đi ngắn hơn 6.2 dặm) và xe hơi, và những địa điểm kinh doanh trong khu vực cũng như khắp nơi trên thế giới Một sản phẩm liên quan, đó là Google Earth, một ứng dụng độc lập dành cho Microsoft Windows, Mac OS X và Linux cho phép xem các tính năng mở rộng khác

Hình 3: Một giao diện của Google Map

Nói chung khi chúng ta tìm hiểu dịch vụ như Google Gmail(Dịch vụ thư điện tử), Google Maps(Bản đồ, chỉ hướng, hình từ vệ tinh toàn Thế giới), công cụ Blogger(Dịch

vụ blog miễn phí của Google, hiện đã có tiếng Việt), chương trình Adwords(chương trình quảng cáo), sản phẩm Google Chrome(Trình duyệt Web) được viết bởi Goolge Web Toolkit rất tiện lợi và nhanh chóng Từ công việc khảo sát ban đầu tôi muốn tìm hiểu về Công nghệ Goolge Web Toolkit viết một ứng dụng để thấy được ưu điểm này

2.2 Tìm hiểu về GWT

Trong giai đoạn đầu của đồ án đối tượng chính mà nhóm tập trung tìm hiểu là framework GWT Google Đây là framework cho phép xây dựng các ứng dụng RIA (Rich Innternet Applications) trên ngôn ngữ Java và có khả năg tích hợp vào công cụ eclipse, thuận lợi cho việc phát triển đồ án

2.2.1 Ajax và các dạng RIA

2.2.1.1 Rich Internet Applications

RIA: Rich Internet Applications là những ứng dụng web có các đặc tính của các ứng dụng máy tính để bàn, thông thường được tạo ra bởi các plug-in riêng cho trình duyệt hay độc lập như sandboxes (cơ chế bảo mật máy tính) hay máy ảo (virtual machines)5 RIA là sự phát triển cao hơn của ứng dụng web (web applications) thông qua việc xây dựng các ứng dụng có sự tương tác với người sử dụng Sự tiến bộ của các ứng dụng web là việc đưa các ứng dụng của các máy bàn lên trên trang web khiến cho người sử dụng không cần phải mất công cài đặt ứng dụng của mình Tất cả công việc chỉ là chạy ứng dụng trên máy chủ và người dùng có thể tương tác với các ứng dụng thông qua rình duyệt Kể cả khi một phiên bản mới ra đời, việc đơn giản là chỉ cần thay thế ứng dụng cũ bởi phiên bản mới và tất cả người dùng đều có thể sử dụng ngay lập tức Tuy nhiên việc đưa các ứng dụng để bàn lên thành ứng dụng web cũng kéo theo việc các ứng dụng sẽ trở nên cồng kềnh và nặng nề hơn Không có gì mỏi mệt bằng việc phải chờ đợi trình duyệt tải lại cà trang web trong khi chỉ có một thay đổi nhỏ được thực hiện Và như vậy, máy chủ cũng sẽ bị quá tải bởi việc trả lời những yêu cầu không cần thiết từ vô số những người dùng khác nhau

xử lý thì người dùng mong muốn vẫn có thể tương tác với các ứng dụng trong khi chờ đợi kết quả từ server Hơn nữa, người dùng cũng không mong đợi việc trả về kết quả

có thể làm phát sinh việc hoàn trả lại cả một trang mới Cơ chế này sẽ làm tốn đường truyền không đáng có khi lượng client tăng lên

Sẽ tốt hơn cả là việc chỉ thực hiện cập nhật tại một vùng dữ liệu trên trang của người dùng, đây là vai trò của yếu tố “bất đồng bộ” (asynchronous) của Ajax

Việc xử lý vô cùng đơn giản nhưng mang lại hiệu quả cao Đó là việc giới thiệu cơ chế với một “máy” Ajax (Ajax engine) nằm ở giữa trong giao tiếp giữa client với server, lớp engine này hoạt động trong trình duyệt và ủy thác các xử lý tới server Nhiệm vụ của engine này là lọc và đẩy các yêu cầu cần thiết tới server để xử lý, các yêu cầu khác

sẽ ngay lập tức trả lại cho người dùng Việc giao tiếp này gặp trở ngại trong mô hình giao tiếp cũ client-server Tuy nhiên khi trình duyệt Microsoft Interbet Explorer hỗ trợ vận chuyển bằng cơ chế XmlHttpRequest (ActiveX) thì việc triệu gọi bất đồng bộ có thể thực hiện được thêm nữa khi FireFox xây dựng một cơ chế tương tự có thể gọi là XmlHttpRequest thì việc phát triển của Ajax trở nên phổ biến nhanh chóng

Như vậy về bản chất Ajax chỉ là một kỹ thuật kết hợp các thành phần HTMT, DHTML, JavaScript, CSS… để tạo ra các ứng dụng RIA Với sự hỗ trợ của cộng động mạng và các framework mạnh mẽ, Ajax vẫn khẳng định vị trí của mình dù có những nhược điểm còn tồn tại và sự xuất hiện của những công nghệ mới mạnh mẽ hơn

2.2.1.3 Đặc đểm các ứng dụng RIA

Ưu điểm:

- Không cần cài đặt, vì bản thân các ứng dụng chạy trên trình duyệt web, đồng nghĩa với việc sẽ tự động được tải về và chạy Các chương trình thật sự chạy các ứng dụng trên đã được cài đặt trên máy từ trước

- Việc cập nhật là tự động, với một phiên bản mới được thay thế trên máy chủ thì máy khách khi kết nối sẽ cũng nhận được sự thay đổi Có chăng chỉ là việc cập nhật chương trình chạy ứng dụng đó trên máy khách (như nâng cấp JDK 1.5 lên JDK 1.6 hay cài đaặt flash plug-in)

- Độc lập với nền tảng, một ứng dụng web thì không phụ thuộc vào nền tảng Hệ điều hành, chỉ cần có trình duyệt kết nối internet và có plug-in cần thiết nếu có (như flash)

- Có tính an toàn hơn so với một ứng dụng giao diện phải cài đặt vào máy

- Khả năng đáp ứng cao hơn, như đã đề cập ở trên, máy chủ sẽ bớt đi việc phải trả lời tất cả các yêu cầu mà chỉ trả lời các yêu cầu cần thiết từ máy khách Như vậy máy chủ

có thể phục vụ được nhiều máy khách hơn Tốt hơn cho hệ thống mạng, giảm bớt yêu cầu-trả lời giữa máy khách và máy chủ đồn nghĩa với việc giảm lưu lượng tuy cập trên mạng

Và một số giới hạn:

- Yêu cầu về JavaScript hay plug-in, như đã nói ở trên, một ứng dụng RIA ngoài yêu cầu về trình duyệt thì còn đòi hỏi yêu cầu về chương trình cài sẵn trên máy hoặc yêu cầu về JavaScript

- Không truy xuất vào tài nguyên hệ thống, một trong những, ví dụ là Ajax không thể truy cập vào tập tin hệ thống trên máy khách

- Khó khăn trong việc tìm kiếm đầy đủ, với việc cập nhật cục bộ trên trang chứ không phân trang thì hầu hết các máy tìm kiếm sẽ gặp khó khăn

- Phụ thuộc vào kết nối internet, hiển nhiên là ứng dụng sẽ không thể chạy được nếu không có kết nối mạng

2.2.1.4 Các con đường hiện thực RIA

Và lẽ dĩ nhiên, Ajax không phải con đường duy nhất để xây dựng các ứng dụng RIA Ajax chỉ là người đi tiên phong trong phong trào với nhiệm vụ mở đường và khai phát theo thời gian lần lượt xuất hiện những kĩ thuật và công nghệ mới hướng tới việc phát triển các ứng dụng RIA dễ hơn và phong phú hơn

Có thể điểm qua một số công nghệ chính để xây dựng các ứng dụng RIA

2.2.1.5 FLEX

Adobe Flex là một trong tập hợp các công cụ cho phép xây dựng các ứng dụng RIA trên nền tảng Adobe Flash Bản thân flash ban đầu chỉ là một ứng dụng hỗ trợ việc thể hiện các ứng dụng mang tính hoạt họa (animation), sau đó mở rông khả năng tương tác

thời gian thực hiện với người sử dụng Nhận thức được khả năng tiềm ẩn của Flash mà Adobe đã phát triển công nghệ Flexx nhằm phục vụ cho nhu cầu phát triển các ứng dụng RIA

Flex là sự kết hợp của hai loại ngôn ngữ song song là Multimedia eXtensible Markup Language (MXML) và action Script MXML với vai trò trong việc xây dựng giao diện còn Action Script là ngôn ngữ xử lý Flex SDK chứa đựng một tập hợp phong phhu1 các thành phần giao diện bao gồm từ nút nhấn, cây dữ liệu, bảng biểu các xử lý và khung chứa Các thành phần như web-services, chức năng kéo thả , hiệu ứng dđộng, tương tác đều được gói trọn trong thư viện SDK Ưu điểm của RIA được Flex thể hiện trong việc xử lý các tương tác và trao đổi dữ liệu không cần người dùng phải tải lại trang web

Nền tảng ban đầu của flex do Macromedia phát triển hoàn toàn mang tính chất thương mại Tuy nhiên sau khi macromedia về tay Adobe thì một phần của công nghệ Flex đã được phát triển theo hướng « mã nguồn mở » (opeen source) Người dùng có thể phát triển Flex dựa trên các framework mã nguồn mở hoặc sử dụng công cụ Flex Builder Vấn đề cản trở duy nhất là đấy là một công cụ thương mại

Các ứng dụng RIA bằng Flex chỉ yêu cầu cần có môi trường của Flash plugg-in đã được cài đặt là người sử dụng có thể dùng được Một yêu cầu không quá khó đối với các máy tính hiện nay

Tháng 2 năm 2008, Adobe phát hành AIR ( môi trường chạy tích hợp Adobe – Adobe Intergrated Runtime) một môi trường nền cho phép các ứng dụng RIA sử dụng công nghệ Flash, Flex, HTML, hay Ajax có thể thực thi trên máy như các ứng dụng của máy tính để bàn Lợi ích của AIR là tận dụng được thế mạnh của cả hai môi trường, vừa có thể chạy ứng dụng như những ứng dụng để bàn, vừa tận dụng được lợi thế cuua3 việc triee6n3 khai các ứng dụng trên môi trường web

Adobe Flex với hỗ trợ của AIR thật sự là một công nghệ mạnh cho việc xây dựng và phát triển các ứng dụng RIA Một trong những trở ngại khi làm việc với Flex đối với những người mới là là phải học ngôn ngữ mới

2.2.1.6 Microsoft SilverLight

Microsoft SliverLight là công nghệ của Microsoft đưa ra nhằm hỗ trợ phát triển các ứng dụng RIA Bản thân SliverLight là một plug-in cho trình duyệt để thể hiện các thành phần bao gồm đồ họa động, đồ họa vector, hhay chạy các ứng dụng âm thanh-video Nó tương thích với nhiều trình duyệt phổ biến, cùng với môi trường của các hệ điều hành ứng dụng để bàn như Window và Mac (trong tương lai gần như là Linux) mà còn hứa hẹn trên điện thoại di động như Window Mobile 6 và Symbian

SliverLight đưa ra một hệ thống đồ họa chức năng tương tự với nền tảng Winndow Presentation Foundation của công nghệ NET của Microsoft Với các ứng dụng SliverLight, phần giao diện sẽ được thể hiện bởi ngôn ngữ XAML và phần xử lý sẽ sử dụng do các thành phần con của NET Framework

Thế mạnh của SliverLight là tận dụng những ưu thế đã có của công nghệ NET Framework vốn đã trở nên quá nổi tiếng kết hợp với ưu điểm của Ajax Các ứng dụng SliverLight có thể viết bởi bất cứ ngôn ngữ NET nào thậm chí hỗ trợ cả Ruby và Python SliverLight thực sự có ưu thế lớn trong việc xây dựng các ứng dụng đa phương tiện trên web với các việc truyền tải âm thanh và hình ảnh chất lượng cao nhanh chóng và hiệu quả Do sự hỗ trợ của SliverLighttới các định dạng âm thanh mà trình duyệt không cần phải cài đặt Media Player Plug-in cho trình duyệt

Với phiên bản hiện tại của SliverLight là 3.0 người phát triển ứng dụng SliverLight có thể sử dụng các công cụ quen thuộc với người lập trình NET như Visual Studio kết hợp với NET Framework và Ajax Framework Ngoài ra co1 thể sử dụng công cụ Blend

để làm việc với các thành phần đồ họa và lập trình JavaSccript

2.2.1.7 JavaFX

Dù ra đời trễ hơn so với Flex và SliverLight tuy nhiên JavaFX cũng là một đối thủ lớn trong việc tạo ra các ứng dụng RIA, cho phép nhúng vào các tài liệu đa phương tiện và tài liệu văn bản Công nghệ JavaFX của Sun Miccrosystem kế thừa ưu điểm của Java

về việc độc lập với môi trường và đáp ứng cho nhiều loại ứng dụng khác nhau Java về

việc độc lập với môi trường và đáp ứng cho nhiều loại ứng dụng khác nhau JavaFX hoàn toàn tích hợp với môi trường chạy của Java (Javaa Runtime Environmennt – JRE) Ứng dụng của JavaFX không chỉ chạy trên môi trường trình duyệt web mà còn có thể chạy trên môi trường để bàn (như ứng dụng Flex) và trên các môi trường điện thoại chạy Java ME Và hứa hẹn trong tương lai gần là các ứng dụng trên TV và các thiết bị khác

Các thành phần để làm việc với nền tảng JavaFX là

- JavaFX SDK: bao gồm các công cụ biên dịch và chạy JavaFX Các thư viện đồ họa,

âm thanh trên web, văn bản

- NetBean IDE cho JavaaFX với sức mạnh kéo thả các bảng màu để thay đổi tạo hiệu ứng

- Các công cụ và plug-in cho việc chuyển đổi các ứng dụng đồ họa khác sang mã JavaFX Script như cho Adobe Photoshop, Adobe Illustrtor, công cụ chuyển đổi các đối tượng đồ họa SVG sang mã JavaFX Script… và nhiều công cụ khác

Điểm sáng của JavaFX cho người dùng cuối chính là khái niệm “kéo để cài đặt” (“Drag-to-Install”) cho phép kéo theo các ứng dụng hay thành phần widget trong trang trình duyệt và thả vào destop Ứng dụng sẽ không mất đi trạng thái kể cả sau khi trình duyệt đã bị đóng và có thể kích hoạt lại với một shortcut trên desktop Bênn cạnh đó là khả năng tích hợp các sản phẩm đồ họa của các hãng thứ ba cũng là một ưu thế

Phía trên là ba công nghệ nổi bật hiện nay trên con đường phát tiển các ứng dụng RIA Mỗi công nghệ đều có những thế mạnh và còn nhiều điểm hạn chế, tuy nhiên đều mang đến những điều mới mẻ trên con đường phát triển các ứng dụng web

2.2.2 GWT

Các công nghệ mới mang đến những hiệu quả mạnh mẽ trong việc phát triển các ứng dụng RIA, tuy vậy không thể một sớm một chiều có thể thay thế hoàn toàn Ajax được Một trong những ứng dụng nổi tiếng về Ajax chính là Google Maps của Google Nhưng việc phát triển Ajax không phải đơn giản, bởi bản chất của Ajax là JavaScript, một ngôn ngữ script thuần túy không phải ngôn ngữ lập trình Người phát triển có thể

sử dụng các framework đã được tạo sẵn để hỗ trợ cho các ứng dụng của mình mà không cần phải viết lại từ đầu

Google cũng đưa ra Google Web Toolkit như một framework cho phép hỗ trợ cho những người phát triển các ứng dụng RIA dựa trên Ajax Với GWT người phát triển có thể xây dựng các ứng dụng riêng hoàn chỉnh chạy trong trình duyệt

GWT và một framework phát triển phần mềm Java mã nguồn mở cho phép người phát triển Web có thể tạo và duy trì các ứng dụng front-end phức tạp bằng JavaScript trong Java7

GWT nhấn mạnh tính tái sử dụng các giải pháp hiệu quả với các thách thức từ Ajax, là thủ tục triệu gọi từ xa bất đồng bộ (asynchronous remote procedure calls), quản lý sự kiện (history management), đánh dấu (bookmarking), và tương thích cho nhiều trình duyệt khác nhau

Hình 4: Logo của GWT GWT phiên bản đầu tiên 1.0 được chính thức ra đời vào ngày 16 tháng 5 năm 2006, và được giới thiệu lần đầu tiên tại hội nghị Javaone, 2006 Cho đến thời điểm hiện tại thì

GWT đã ra đời phiên bản 1.6.4 cùng với Google plug-in cho phép GWT chạy trong công cụ Eclipse (từ phiên bản 3.3 trở đi)

2.2.1.1 GWT làm việc như thế nào?

Với GWT, người lập trình có thể viết Ajax trong ngôn ngữ lập trình Java, sau dđó sẽ được chuyển đổi sang mã JavaScript có thể hoạt động trong các trình duyệt Trong quá trình phát triển, ta có thể phát huy được thế mạnh của JavaScript mà chu trình edit-refresh-view, và của Java là khả năng debug với ghi log Thật vậy, cũng giống như viết code bằng JavaScrippt, chúng ta chỉ cần thay đổi một dòng lệnh System.out.printltn() tại vị trí bất kì để kiểm tra hay sử dụng chức năng debug của chương trình thay cho việc chèn các dòng lệnh alert() như khi viết JavaScrip bằng tay

GWT tạo ra ptoject để làm việc trong quá trình viết code, GWT sẽ biên dịch tạm thành

mà JavaScript để có thể xem dưới dạng hosted mode trong GWT browser Lúc này nếu xem trang web bằng lập trình duyệt thông thường sẽ nhận được thông báo việc biên dịch chưa hoàn tất Chỉ khi nào sẵn sang triển khai, GWT sẽ biên dịch hoàn toàn cho phép triển khai lên web server

ở server Khi đó, bất cứ khi nào thực hiện việc triệu gọi từ Browser, GWT RPC sẽ thực hiện việc đồng bộ dữ liệu các tham số và truy tìm phương thức thích hợp trên server

Dữ liệu trả về sẽ được đồng bộ tại server và gửi trả cho client Chính vì vậy mọi đối tượng được vận chuyển trong RPC đều phải kế thừa interfaace Serializable của Java hoặc IsSerializable trong GWT Trong phần sau ta sẽ tìm hiểu kỹ hơn

- GWT hỗ trợ việc chọn lựa công cụ phát triển Nhà phát triển có thể sử dụng các công

cụ lập trình Java quen thuộc Eclipse, IntelliJ, Jproffileer, Junit để phát triển ứng dụng AJAX Không giống với các phiên bản GWT từ 1.5 trở về trước cho phép tạo ra các project cho phép imporrt vao Eclipse, GWT từ 1.6 có thể tích hợp thành plugin vào Eclipse giúp cho việc lập trình trở nên dễ dàng hơn

- Sử dụng các thư viện JavaScript có sẵn hoặc codeJavaScript tự viết Với việc sử dụng thư viện JSNI (JavaScriptt Native Interface), người phát triển có thể trộn lẫn giữa code Java và codeJavaScript để phục vụ cho nhu cầu của mình Từ phiên bản 1.5 trở đi, có thể tạo các class con kế thừa các class của GWT JavaScriptObjiect (JSO) để tạo ra các lớp Java giả tương ứng với các đối tượng JavaScript

2.2.2.2.2 Nhược điểm

- Trong khi các công cụ Ajax khác lập trình trên ngôn ngữ nền tảng của Ajax là JavaScript thì GWT lại thực hiện viết bằng Java rồi sau đó biên dịch lại ra JavaScript Điều này có thể thuận tiện cho những nhà phát triển quen thuộc với Java và đặc biệt là công cụ Eclipse khi có Google plugg-in tuy nhiên lại không phù hợp với những người phát triển trên các ngôn ngữ khác

- JavaScript dù sao cũng không phải là ngôn ngữ lập trình như Java, chính vì vậy sẽ có những điều khác biệt Những điều này sẽ gây hạn chế cho những người phát triển trong việc thể hiện các ý tưởng JavaScript bằng Java

- Bản thân thư viện đồ họa widget của GWT chứa rất nhiều thành phần thông dụng, tuy nhiên không có nhiều hiệu ứng hào nhoáng do đề cao tính đơn giản, nhẹ nhàng Để có thể tạo các ứng dụng các thư viện mở rộng khác như gwt-ext (mà nguồn mở) và gxt (thương mại)

2.2.2.3 Web modde và Hosted mode

Trước khi đi vào sâu hơn, ta cần tìm hiểu một chút về vấn đề Web Mode và Hosted Mode khi làm việc với GWT

2.2.2.3.1 Web Mode

Thông thường, trong quá trình phát triển một ứng dụng Web, ứng dụng của chúng ta sẽ được xây dựng, đóng gói, và triển khai lên web server (như Tomcat) và sau đó được kiểm tra bằng trình duyệt nội của Eclipse hoặc trình duyệt bên ngoài

Ở chế đô web mode này, ứng dụng của chúng ta ở dạng JavaScript và HTML thuần túy Các file này được sinh ra nhờ quá trình biên dịch source code ttu72 file Java, thông qua trình biên dịch từ JavaScript Bất cứ thay đổi nào trong code đòi hỏi phải chạy lại project (Run), lặp lại quá trình deploy Tiến trình này nằm trong quy trình thực thi project web thông thường

Trong GWT cũng kế thừa đặc điểm này, tuy nhiên chỉ khuyến khích sử dụng khi ứng dụng đã tương đối hoàn thiện và chuẩn bị cho deploy thật sự ứng dụng lên server

2.2.2.3.2 Hossted Mode

Bên cạnh cách thức deploy ở dạng web mode, GWT bổ sung cách thức chạy và kiểm tra lỗi dạng hosted mode ở dạng này, các dòng lệnh Java được chạy trong Java Visual Machine thhay cho việc phải deploy lên server (đã biên dịch thành mã JavaaSccript) Người phát triển có thay đổi trong ffile Java, lưu lại, và ngay lập tức sẽ được GWT hosted mode cập nhật lại, chỉ việc refresh lại trang wed trong trình duyệt GWT hosted Browser để thấy sự thay đổi Cách làm này giống như khi thao tác với file JavaScript trực tiếp

Lợi ích của việc triển khai dạng hosted mode là người phát triển có thể hạn chế thời gian deploy ứng dụng để kiểm tra lỗi Những ai đã quen với việc sử dụng Eclipse có thể

sử dụng chức năng Debug để đánh giá, kiểm tra, tìm lỗi theo từng dòng lẹnh trong file Java mà không cần quan tâm đến file JavaScript được tạo ra như thế nào

2.2.2.3.3 Thực thi GWT Project

Chọn chức năng Web Application trong menu Run, hoặc trong menu Run As để chạy pprojecct ở dạng hosted mode

Hình 5: Chạy Google Web từ thanh công cụ Dưới đây là cửa sổ Google Web Toolkit Hosted Mode (quản lý Server)

Hình 6: Công cụ quản lý Server của GWT Cửa sổ trình duyệt web ở dạng hosted mode khi chạy (nếu bị tắt có thể mở từ nút nhấn Hosted Brower trên cửa sổ quản lý Server như hình trên)

Hình 7: Trình duyệt web của GWT

2.2.2.2 Trình duyệt biên dịch từ Java sang JavaScript

Như đã đề cập từ trước, phần quan trọng nhất trong GWT chính là trình duyệt biên dịch cho phép biên dịch từ Java sang javaScript Như vậy người lập trình sẽ có thể viết các ứng dụng RIA mà hầu như không tập trung vào Javascript, hoàn toàn dựa trên java Một trong những ưu điểm của việc sử dụng thư việc của GWT là người lập trình không cần phải quan tâm đến trình duyệt mà người dùng sử dụng GWT sẽ xử lí vấn đề đó Vì

mã Javascript mà GWT biên dịch ra tự động kiểm tra và xử lý đối với trình duyệt mà người dùng sử dụng

GWT chỉ biên dịch các file được khai báo trong module của project chính là các file có đuôi là “ gwt.xml” sau khi biên dịch thực hiện xong thì kết quả sẽ là một tập hợp gồm nhiều file giống nhau như sau:

Hình 8: Kết quả sau khi biên dịch project Kết quả biên dịch không phải là một file JavaScript duy nhất mà gồm nhiều file tương ứng với mỗi trình duyệt, nhiệm vụ của file chính có đuôi nocache.js là tải đúng phiên bản JavaScript tương ứng trình duyệt người dùng sử dụng Dữ liệu cũng được trình biên dịch giúp cho hệ thống chạy tốt hơn Như vậy để có thể chạy ứng dụng, chỉ cần mở một file HTMl chính trong Project, thông thường được tên trùng với tên project

2.2.2.2.1 Thư viện mô phỏng JRE

Như vậy để trình biên dịch của GWT có thể đọc được mã Java mà chúng ta viết và chuyển qua JavaScript thì GWT phải có một cơ chế giúp ánh xạ các đối tượng trong môi trường Java (Java Runtime Environment – JRE) sang JavaScipt Đó là nhiệm vụ

mà thư viện mô phỏng JRE (JRE Emulation Library) đã làm

Tuy nhiên do sự khác biệt giữa hai ngôn ngữ Java và JavaScript về cấu trúc cũng như bản chất nên thư viện mô phỏng JRE không thể hoàn toàn chuyển đổi các đối tượng

tương ứng có trong Java sang JavaScript Chính vì vậy vấn đề cần quan tâm khi lập trình các đối tượng trong Java mà GWT hỗ trợ Gồm có 4 nhóm chính:

2.2.3 Các thành phần đồ họa của GWT

Các đối tượng đồ họa trong thư viện GWT có chung một đặc điểm là kết quả của sự kết hợp giữa các thẻ HTML và CSS Mỗi đối tượng đồ họa đều có sẵn một tập hợp các thược tính CSS mặc định tương ứng mà người sử dụng có thể chỉnh sửa và thay thế hoàn toàn Chính vì vậy, việc am hiểu CSS sẽ rất có ích cho quá trình tìm hiểu các widget và cho phép việc thay đổi chúng cho phù hợp với yêu cầu của người dùng Trong quá trình tìm hiểu các thành phần, tài liệu này cũng sẽ liệu kê một số các thành phần CSS có liên quan

Hình 09: Các đối tượng kế thừa trực tiếp Widget Thư viện hàm API của GWT cung cấp các lớp cần thiết cho việc xây dựng các thành phần giao diện đồ họa người dùng Các thành phần này có thể mở rộng được cho các thành phần được liệt kê như hình dưới đây nó cũng thể hiện mối quan hệ kế thừa của các thành phần và sự phân nhóm theo chức năng của chúng

Nhìn qua các thành phần đồ họa đều kế thừa từ một lớp cha UIObject Chúng có thể được chia tổng quát thành 2 nhóm cơ bản: các thành phần widget và khung chứa panel Widget là các thành phần đồ họa mà người dùng có thể tương tác trực tiếp như nút nhấn (button), checkbox, text field, text area…Còn panel là các thành phần có vai trò chứa các thành phần khác

2.2.3.1 RootpPanel

Trước khi tìm hiều các thành phần Widget và panel, đối tượng đầu tiên cần phải quan tâm là RootPanel Trong khi các Panel khác phục vụ cho việc trình bày thì RootPanel là đối tượng panel cao nhất của ứng dụng Nó tượng trưng cho phần body của trang HTML

Các phương thức cchinh1 của Rootpanel bao gồm:

- get (): phương thức này trả về đối tượng panel thể hiện body của trang HTML Với panel trả về có thể thêm bất cứ đối tượng widget nào vào trang HTML thông qua phương thức add ()

- get (String id): Trả về thành phần nằm trong thẻ body có id tương ứng Thành phần này có thể là đối tượng bất kì và phải cco1 trong trang tương ứng Thông thường có thể

sử dụng một thẻ <div>

- getBodyElement(): phương thức này trả về đối tượng Java thể hiện cho thành phần body trong cấu trúc DOM của trang

Chúng ta có thể làm việc với Rootpanel qua ví dụ sau:

public void onModuleLoad() {

RootPanel.get().add(new HTML("This is the text"));

RootPanel.get("div_123").add(new HTML("This is the text in div"));

}

}

Trong trang HTLM ta để như sau:

<body>

<! OPTIONAL: include this if you want history support >

<iframe src="javascript:''" id=" gwt_historyFrame" tabIndex='-1'

public class HTMLExample implements EntryPoint {

public void onModuleLoad() {

// Create a Label and an HTML widget

Label lbl = new Label("This is just text It will not be interpreted " + "as ");

HTML html = new HTML(

"This is HTML It will be interpreted as such if you specify "

+ "the asHTML flag.", true);

// Add them to the root panel

VerticalPanel panel = new VerticalPanel();

panel.add(lbl);

Để điều chỉnh thông tin chung của Label chúng ta có thể dùng tham số sau:

.gwt-Label{ }

HTML widdgget

Khác với Label chỉ cho phép hiển thị các chuỗi lí tự thuần túy, HTML widget cho phép hiển thị văn bản chứa các thẻ HTML bên trong Ví dụ sau cho thấy sự khác nhau giữa label thông thường của HTML với đối tượng label widget và HTML widget

Trong trang HTML chính là:

public class HTMLExample implements EntryPoint {

public void onModuleLoad() {

// Create a Label and an HTML widget

Label lbl = new Label("This is just text It will not be interpreted " + "as ");

HTML html = new HTML(

"This is HTML It will be interpreted as such if you specify "

+ "the asHTML flag.", true);

// Add them to the root panel

VerticalPanel panel = new VerticalPanel();

2.2.3.2.2 Button, ToggleButton và PushButton

Button

Button là một trong những thành phần cơ bản nhất của giao diện đồ họa người dùng, thể hiện một nút nhấn để người dùng có thể chọn Xem ví dụ sau đây:

public class ButtonExample implements EntryPoint {

public void onModuleLoad() {

// Make a new button that does something when you click it

Button b = new Button("Jump!", new ClickListener() {

public void onClick(Widget sender) {

public class ToggleButtonExample implements EntryPoint {

public void onModuleLoad() {

// Make a new button that does something when you click it

final ToggleButton toggleButton = new ToggleButton("Up", "Down");

public class PushButtonExample implements EntryPoint {

public void onModuleLoad() {

// Make a new button that does something when you click it

PushButton b = new PushButton("Jump", "Jump?", new ClickListener() { public void onClick(Widget sender) {

// Add the push button to the root panel

RootPanel.get().add(b);

}

CSS của button như sau:

.gwt-PushButton-up/down/up-hovering/down-hovering/up-disabled/down-disabled {.html-face}

2.2.3.2.3 ChechBox và RadioButton

Đây là hai đối tượng quá quen thuộc với những người phát triển web Đối tượng RadioButton đòi hỏi phải khai báo tên chung cho một nhóm các radio

Ví dụ về ChechBox:

public class CheckBoxExample implements EntryPoint {

public void onModuleLoad() {

// Make a new check box, and select it by default

CheckBox cb = new CheckBox("Foo");

cb.setChecked(true);

// Hook up a listener to find out when it's clicked

cb.addClickListener(new ClickListener() {

public void onClick(Widget sender) {

boolean checked = ((CheckBox) sender).isChecked();

Window.alert("It is " + (checked ? "" : "not") + "checked");

public class RadioButtonExample implements EntryPoint {

public void onModuleLoad() {

// Make some radio buttons, all in one group

RadioButton rb0 = new RadioButton("myRadioGroup", "foo");

RadioButton rb1 = new RadioButton("myRadioGroup", "bar");

RadioButton rb2 = new RadioButton("myRadioGroup", "baz");

// Check 'baz' by default

rb2.setChecked(true);

// Add them to the root panel

FlowPanel panel = new FlowPanel();

Css của hai đối tượng trên là:

public class HistoryExample implements EntryPoint, HistoryListener {

private Label lbl = new Label();

public void onModuleLoad() {

// Create three hyperlinks that change the application's history

Hyperlink link0 = new Hyperlink("link to foo", "foo");

Hyperlink link1 = new Hyperlink("link to bar", "bar");

Hyperlink link2 = new Hyperlink("link to baz", "baz");

// If the application starts with no history token, redirect to a new // 'baz' state

String initToken = History.getToken();

if (initToken.length() == 0) {

History.newItem("baz");

}

// Add widgets to the root panel

VerticalPanel panel = new VerticalPanel();

public void onHistoryChanged(String historyToken) {

// This method is called whenever the application's history changes Set

lbl.setText("The current history token is: " + historyToken);

public class TextBoxExample implements EntryPoint {

public void onModuleLoad() {

// Make some text boxes The password text box is identical to the text // box, except that the input is visually masked by the browser

PasswordTextBox ptb = new PasswordTextBox();

TextBox tb = new TextBox();

// Let's disallow non-numeric entry in the normal text box

tb.addKeyboardListener(new KeyboardListenerAdapter() {

public void onKeyPress(Widget sender, char keyCode, int modifiers) {

if ((!Character.isDigit(keyCode)) && (keyCode != (char) KEY_TAB) && (keyCode != (char) KEY_BACKSPACE)

&& (keyCode != (char) KEY_DELETE) && (keyCode != (char)

KEY_ENTER)

&& (keyCode != (char) KEY_HOME) && (keyCode != (char) KEY_END) && (keyCode != (char) KEY_LEFT) && (keyCode != (char) KEY_UP) && (keyCode != (char) KEY_RIGHT) && (keyCode != (char)

// Let's make an 80x50 text area to go along with the other two

TextArea ta = new TextArea();

ta.setCharacterWidth(80);

ta.setVisibleLines(50);

// Add them to the root panel

VerticalPanel panel = new VerticalPanel();

panel.add(tb);

panel.add(ptb);

.gwt-TextBox { primary style }

.gwt-TextBox-readonly { dependent style set when the text box is only }

read-PasswordTextBox

Chức năng của PasswordTextBox thì tương tự như PassswordFieldd trong HTML, về

cơ bản cũng giống như TexBox trình bày phía trên

Ta có thể kiểm tra cách làm việc qua các ví dụ sau:

public class TextBoxExample implements EntryPoint {

public void onModuleLoad() {

// Make some text boxes The password text box is identical to the text // box, except that the input is visually masked by the browser

PasswordTextBox ptb = new PasswordTextBox();

TextBox tb = new TextBox();

// Let's disallow non-numeric entry in the normal text box

tb.addKeyboardListener(new KeyboardListenerAdapter() {

public void onKeyPress(Widget sender, char keyCode, int modifiers) {

if ((!Character.isDigit(keyCode)) && (keyCode != (char) KEY_TAB) && (keyCode != (char) KEY_BACKSPACE)

&& (keyCode != (char) KEY_DELETE) && (keyCode != (char)

KEY_ENTER)

&& (keyCode != (char) KEY_HOME) && (keyCode != (char) KEY_END) && (keyCode != (char) KEY_LEFT) && (keyCode != (char) KEY_UP) && (keyCode != (char) KEY_RIGHT) && (keyCode != (char)

// Let's make an 80x50 text area to go along with the other two

TextArea ta = new TextArea();

ta.setCharacterWidth(80);

ta.setVisibleLines(50);

// Add them to the root panel

VerticalPanel panel = new VerticalPanel();

.gwt-PasswordTextBox { primary style }

.gwt-PasswordTextBox-readonly { dependent style set when the password text box is read-only }

TextArea

TextArea cho phép người dùng có thể nhập dữ liệu người dùng Với dữ liệu nhập vào văn bản thuần, ngay cả các thẻ HTML khi được chèn vào giữ nguyên văn bản

Như ví dụ sau:

public class TextBoxExample implements EntryPoint {

public void onModuleLoad() {

// Make some text boxes The password text box is identical to the text // box, except that the input is visually masked by the browser

PasswordTextBox ptb = new PasswordTextBox();

TextBox tb = new TextBox();

// TODO(ECC) must be tested

// Let's make an 80x50 text area to go along with the other two

TextArea ta = new TextArea();

ta.setCharacterWidth(80);

ta.setVisibleLines(50);

// Add them to the root panel

VerticalPanel panel = new VerticalPanel();

panel.add(tb);

panel.add(ptb);

panel.add(ta);

RootPanel.get().add(panel);

}

}

CSS TextArea là:

.gwt-TextArea { primary style }

.gwt-TextArea-readonly { dependent style set when the text area is only }

read-RichTextArea

Đối tượng Richtext đã trở nên quá quen thuộc với những người phát triển làm việc với các ứng dụng có dữ liệu định dạng Vì thế GWT cũng cung cấp đối tượng RichTextArea hỗ trợ người phát triển các ứng dụng liên quan tới văn bản có định dạng Tuy nhiên nó không phải là đối tượng hoàn chỉnh như các phần tử RichText thường thấy Về cơ bản RichTextArea không khác đối tượng TextArea nói trên Tuy nhiên RichTextArea cung cấp phương thức xét HTML (String string) cho phép người phát triển có thể chèn các thể HTML vào trong văn bản và hiển thị tác dụng của chúng trên ô nhập liệu

Như ví dụ sau:

public void onModuleLoad() {

RichTextArea area = new RichTextArea();

RichTextToolbar tb = new RichTextToolbar(area);

VerticalPanel p = new VerticalPanel();

public class ListBoxExample implements EntryPoint {

public void onModuleLoad() {

// Make a new list box, adding a few items to it

ListBox lb = new ListBox();

2.2.3.3 Composite

Bản chất của các đối tượng Composite là các thành phần ứng dụng, hỗ trợ người dùng GWT cung cấp một số thành phần ứng dụng như lịch, ô gợi ý, ô chọn ngày tháng (DateBox), khung chưa có tiêu đề (CaptionPanel), khung chứa có tab (TabPanel)…

public class CompositeExample implements EntryPoint {

private TextBox textBox = new TextBox();

private CheckBox checkBox = new CheckBox();

public OptionalTextBox(String caption) {

// Place the check above the text box using a vertical panel

VerticalPanel panel = new VerticalPanel();