RICH INTERNET APPLICATION Tìm hiểu công nghệ và xây dựng ứng dụng

TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM RICH INTERNET APPLICATION PHẠM CAO HOÀNG ĐẠT – NGUYỄN TRANG HỒNG BẢO KHÓA LUẬN TỐT NGHIỆP CỬ NHÂN CNTT TP.HỒ CHÍ MINH, 2011 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN KHOA CÔNG NGHỆ THÔNG TIN RICH INTERNET APPLICATION KHÓA LUẬN TỐT NGHIỆP CỬ NHÂN TIN HỌC GIÁO VIÊN HƯỚNG DẪN TS TRẦN MINH TRIẾT – NGUYỄN ĐỨC HUY SINH VIÊN THỰC HIỆN PHẠM CAO HOÀNG ĐẠT – 0712057 NGUYỄN TRANG HỒNG BẢO – 0712082 NIÊN KHÓA 2007-2011 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Khóa luận đáp ứng yêu cầu Luận văn cử nhân tin học Tp.Hồ Chí Minh, ngày …… tháng …… năm 2011 Giáo viên hướng dẫn NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… Khóa luận đáp ứng yêu cầu Luận văn cử nhân tin học Tp.Hồ Chí Minh, ngày …… tháng …… năm 2011 Giáo viên phản biện LỜI CẢM ƠN Chúng em xin chân thành cảm ơn Khoa Công Nghệ Thông Tin, trường Đại Học Khoa Học Tự Nhiên, Tp.Hồ Chí Minh tạo điều kiện tốt cho chúng em thực đề tài tốt nghiệp Chúng em xin chân thành cảm ơn Thầy Trần Minh Triết Thầy Nguyễn Đức Huy người tận tình hướng dẫn, bảo chúng em suốt thời gian thực đề tài Chúng em xin gửi lời cảm ơn sâu sắc đến quý Thầy Cô Khoa tận tình giảng dạy, trang bị cho chúng em kiến thức quí báu năm học vừa qua Chúng em xin gửi lòng biết ơn sâu sắc đến ba, mẹ, anh chị bạn bè ủng hộ, giúp đỡ động viên chúng em lúc khó khăn suốt thời gian học tập nghiên cứu Mặc dù chúng em cố gắng hoàn thành Luận văn phạm vi khả cho phép, chắn không tránh khỏi thiếu sót, kính mong cảm thông tận tình bảo quý Thầy Cô bạn Nhóm thực Phạm Cao Hoàng Đạt – Nguyễn Trang Hồng Bảo ĐỀ CƯƠNG CHI TIẾT Tên Đề Tài: Rich Internet Application Giáo viên hướng dẫn: TS Trần Minh Triết – Nguyễn Đức Huy Thời gian thực hiện: từ ngày 01/01/2011 đến ngày 28/06/2011 Sinh viên thực hiện: Phạm Cao Hoàng Đạt(0712057) – Nguyễn Trang Hồng Bảo(0712082) Loại đề tài: Tìm hiểu công nghệ xây dựng ứng dụng Nội Dung Đề Tài (mô tả chi tiết nội dung đề tài, yêu cầu, phương pháp thực hiện, kết đạt được, …): Đây đề tài thuộc hướng tìm hiểu công nghệ phát triển ứng dụng Đề tài bao gồm phần sau: • Khảo sát trạng hệ thống phần mềm thiết kế giao diện: Silverlight, Windows Phone, Flash, Flex • Tìm hiểu hệ thống Mashup (về giao diện) có: iGoogle, Dapper… Khảo sát, tìm hiểu công cụ kỹ thuật thiết kế giao diện ứng dụng web: Wix, Moonfruit, SWiSH Max 3, Microsoft Expression Blend 4… có giới • • Thông qua việc khảo sát trạng phần mềm trên, đánh giá mức thuận lợi bất lợi thiết kế giao diện Web o Nêu lên nhu cầu phát triển ứng dụng Website nhiều công nghệ o Nêu lên ưu điểm hạn chế công cụ hỗ trợ thiết kế Web nhiều công nghệ khác o Đề giải pháp giúp thực việc chuyển tiếp giao diện từ công nghệ sang công nghệ khác MỤC LỤC DANH MỤC CÁC HÌNH 10 Hình 2-4 Giao diện Microsoft Expression Blend Các tính năng: Hỗ trợ thiết kế giao diện cách trực quan Ngoài việc hỗ trợ kéo thả control cách dễ dàng, công cụ cung cấp PropertyGrid sinh động cho người dùng điều chỉnh Cho phép gán hiệu ứng cho control Đồng thời hỗ trợ thiết kế hiệu ứng giao diện Có thể mở rộng hiệu ứng control đưa từ bên vào Cho phép xử lý kiện cách viết mã nguồn Công cụ hỗ trợ việc liên kết (binding) liệu từ tập tin xml mạnh mẽ  Giá phần mềm Expression Blend (cập nhật ngày 10/06/2011): 31 Tên gói phần mềm Expression Studio Ultimate Giá $599.95 $349.95 (upgrade từ phiên trước) Bảng 2-2 Bảng giá phần mêm Microsoft Expression Blend  Ưu khuyết điểm Sau ưu khuyết điểm mà nhóm chúng em nhận xét sử dụng công cụ này: Ưu điểm  Công cụ có giao diện cách sử dụng đơn giản tiện dụng  Hỗ trợ việc thiết kế trực quan  Hỗ trợ tạo hiệu ứng cách dễ dàng hiệu ứng không phức tạp  Có khả mở rộng số lượng control từ bên Khuyết điểm  Người sử dụng cần phải có hiểu biết lập trình (C#, VB.net…) để xử lý kiện phối hợp hoạt động control  Giá công cụ cao 2.2.2 Wix Website: http://www.wix.com/  Tổng quan hệ thống Wix bắt đầu xây dựng vào năm 2006 Avishai Abrahami, Nadav Abrahami Giora Kaplan Wix phiên open beta tháng năm 2008 Wix có công cụ có giao diện drag drop đơn giản thân thiện dùng để thiết kế web dạng Flash gọi Wix website builder 32 Hình 2-5 Giao diện thiết kế Wix Các tính năng: Với công cụ Wix website builder người dùng tạo nội dung web (website Flash, widget, banner, sách lật trang…) thao tác chuột đơn giản có kiến thúc lập trình Wix website builder cung cấp nhiều loại control hiệu ứng khác Người dùng kéo thả thành phần cần thiết trang vào xác định Transition, Effect, kích thước, màu sắc cho thành phần Khi cần liên kết trang với nhau, người dùng cần Add Page thiết kế sau tạo đối tượng menu menu tự nhận biết trang Với tài khoản miễn phí Wix hỗ trợ chạy website tạo domain Wix Nếu muốn chạy ứng dụng domain riêng mình, người dùng cần đăng ký tài khoản premium 33  Giá tài khoản premium (cập nhật ngày 10/06/2011): Loại tài khoản My Domain Combo Unlimited eCommerce Giá (trong tháng) $4.95 $9.90 $14.90 $15.90 (6 tháng đầu) $19.90 (6 tháng sau) Bảng 2-3 Bảng giá loại tài khoản Premium Wix  Ưu khuyết điểm Sau ưu khuyết điểm mà nhóm chúng em nhận xét sử dụng công cụ này: Ưu điểm  Công cụ có giao diện cách sử dụng đơn giản tiện dụng  Wix hỗ trợ sẵn nhiều template, control hiệu ứng  Giá tài khoản tương đối rẻ Khuyết điểm  Dữ liệu dùng để hiển thị liệu tĩnh Do ứng dụng tạo liên kết liệu động Ví dụ muốn thêm vào sản phẩm danh sách sản phẩm vào công cụ thiết kế để thêm  Khả tuỳ biến việc phối hợp hoạt động thành phần hạn chế Việc phối hợp hoạt động Wix website builder tự xác định 2.2.3 Moonfruit Website: http://www.moonfruit.com/  Tổng quan hệ thống phần mềm Moonfruit công ty cung cấp dịch vụ hosting web Anh Moonfruit thành lập vào năm 1999 website moonfruit xây dựng vào tháng năm 2000 34 Hình 2-6 Giao diện SiteMaker Moonfruit Các tính năng: Moonfruit cung cấp công cụ xây dựng trang web flash gọi SiteMaker, nhằm hỗ trợ cho người kiến thức kỹ thuật tạo trang web đơn giản Hiện nay, công cụ phiên thứ tư, có phiên tiếng Pháp tương lai hỗ trợ nhiều ngôn ngữ SiteMaker cho phép drag drop điểu chỉnh đối tượng chuột, cho phép tạo hiệu ứng, điều chỉnh màu sắc độ suốt đối tương trang web Để thêm trang, chọn chức Add Page từ menu SiteMaker Moonfruit cung cấp sẵn template page, với template page chứa sẵn control widget liên quan đến loại template page Người dùng chọn lựa trang hiển thị menu trang Web chức Manage Page Đặc biệt, Moonfruit cung cấp sẵn template page dạng forum có sẵn chức đăng ký, đăng nhập Đồng thời cung cấp sẵn hệ thống quản lý 35 user cho Website tạo liên kết tới mạng xã hội (Facebook Twitter)  Giá gói dịch vu Moonfruit (cập nhật ngày 10/06/2011): Tên gói dịch vụ Basic Premium Business Reseller Giá (1 tháng) $6 $12 $25 $50 Giá (1 năm) $54 $108 $225 $450 Bảng 2-4 Bảng giá gói dịch vụ Moonfruit  Ưu khuyết điểm Sau ưu khuyết điểm mà nhóm chúng em nhận xét sử dụng công cụ này: Ưu điểm  Công cụ có giao diện cách sử dụng đơn giản tiện dụng  Hỗ trợ sẵn hệ thống quản lý user template page  Giá tài khoản tương đối rẻ Khuyết điểm  Dữ liệu dùng để hiển thị liệu tĩnh Do ứng dụng tạo liên kết liệu động  Đa số control widget hoạt động độc lập 2.2.4 SWiSH Max Website: http://www.swishzone.com  Tổng quan hệ thống phần mềm SWiSH Max sản phẩm SWiSHzone.com Pty Ltd - công ty chuyên cung cấp công cụ để phát triển Flash animation Được thành lập vào năm 1999, SWiSH Max sản phẩm chủ lực SWiSHzone.com SWiSH Max công cụ thiết kế Flash chuyên nghiệp có tính linh động cao Hiện SWiSH Max phát triển tới phiên 4.0 36 Hình 2-7 Giao diện phần mềm SWiSH Max Các tính năng: SWiSH Max cung cấp công cụ cho phép người sử dụng tạo đối tượng (shape, button…) drag drop đối tượng giao diện thiết kế Đồng thời cho phép chọn lựa từ hiệu ứng cung cấp sẵn (hơn 350 hiệu ứng phát nổ, quay 3D, sóng…) tạo hiệu ứng việc kết hợp hiệu ứng sẵn có để gán cho đối tượng đó.SWiSH Max hỗ trợ việc lập trình với ngôn ngữ script để điều khiển hoạt động đối tượng hiệu ứng Ngôn ngữ script sử dụng SWiSH Max SWiSH script, dạng biến thể ActionScript SWiSH script hỗ trợ hầu hết tất chức có ActionScript 2.0, riêng SWiSH Max hỗ trợ tất lớp có ActionScript 2.0 Sau thiết kế xong, chọn chức Export để xuất định dạng flash (*.swf) html(*.html) 37  Giá phần mềm SWiSH Max (cập nhật ngày 10/06/2011): Tên sản phẩm SWiSH miniMax SWiSH Max Giá $69.95 $149.95 Bảng 2-5 Bảng giá phần mềm SWiSH Max  Ưu khuyết điểm Sau ưu khuyết điểm mà nhóm chúng em nhận xét sử dụng công cụ này: Ưu điểm  Công cụ có giao diện cách sử dụng đơn giản tiện dụng  Có số lượng template lớn cung cấp trang chủ SWiSHzone.com  Khả tùy biến cao Khuyết điểm  Người sử dụng cần phải có hiểu biết ActionScript muốn điều khiển hoạt động thành phần trang web  Giá sản phẩm không rẻ 2.3 Khảo sát công cụ giúp chuyển đổi công nghệ 2.3.1 SilverX : Website: http://www.silverx.net/  Tổng quan hệ thống phần mềm SilverX phát hành lần vào 29/04/2009 Phiên 1.6.1(vào ngày 15/04/2011) 38 Các sản phẩm SilverX miễn phí cho project open source lợi nhuận, để cung cấp product key cần thông tin mô tả project chonhà cung cấp Hình 2-8 Giao diện phần mềm SilverX Các tính năng: SilverX có khả load ứng dụng dạng Flash chuyển thành solution ứng dụng Silverlight/WPF/Windows Phone sẵn sàng chạy Khi convert, ứng dụng Silverlight tạo thành đưa vào trình duyệt Web load chỉnh sửa với Expression Blend Visual Studio SilverX hỗ trợ hầu hết feature Flash vector primitives, images, texts animations  Giá phần mềm SilverX (cập nhật ngày 10/06/2011): Tên sản phẩm SilverX Expression SilverX Giá $199 $199 Bảng 2-6 Bảng giá phần mềm SilverX  Ưu khuyết điểm Sau ưu khuyết điểm mà nhóm chúng em nhận xét sử dụng công cụ này: 39 Ưu điểm  Công cụ có giao diện cách sử dụng đơn giản tiện dụng  Hỗ trợ tất feature Flash  Chuyển đổi cách xác hầu hết resources Flash movie sang Silverlight Khuyết điểm  Giá sản phẩm không rẻ 2.4 Bảng so sánh chức 2.4.1 Bảng so sánh chức công cụ Mashup Môi trường hoạt động Giá iGoogle Dapper Web Web Miễn phí Miễn phí Các tính Cho phép rút trích chọn lựa liệu từ trang web  XML, RSS, Google Map… Định dạng đầu Hỗ trợ tạo Widget Hỗ trợ drag drop Widget HTML Widget Flash Widget  Tạo hiệu ứng cho Widget Phối hợp xử lý Widget Bảng 2-7 Bảng so sánh chức công cụ khảo sát 40 2.4.2 Bảng so sánh chức công cụ RIA Web Designer Expression Blend Wix Moonfruit SWiSH Max PC Web Web PC Ứng dụng tạo sử dụng công nghệ Silverlight Flash Flash Flash,HTML Đối tượng sử dụng Người có hiểu biết lập trình Người dùng bình thường Người dùng bình thường Người có hiểu biết lập trình 4.0 Môi trường hoạt động Phiên Giá $349.95 $599.95 Tùy thuộc vào Tùy thời gian loại tài khoản gói dịch Premium vụ $69.95 $149.95 41 Expression Blend Giao diện thân thiện, dễ dùng Wix Giao diện  người dùng Expression Blend Hỗ trợ drag  mở rộng  drop giao Tính diện thiết kế Hỗ trợ hosting Điều chỉnh  màu sắc, kích Xuất kết   thước trực file quan Hỗ trợ sẵn hệ Điều chỉnh cácthống quản lý user cho  thuộc tính khác website Hỗ trợ   Transition Effect Tạo hiệu ứng từ giao diện Moonfruit Wix SWiSH Max  Moonfruit   SWiSH Max         Tính Hỗ trợ liên kết (binding) liệu trực quan  Liên kết liệu động  Cung cấp sẵn số Widget    Cung cấp template Phải viết mã nguồn    Do thân công cụ tự thực hiển, người dùng không tùy biến Do thân công cụ tự thực hiên, người dùng không tùy biến  Phối hợp xử lý thành phần Viết mã script để điều khiển thành phần Phải viết script Sử dụng SWiSH script  Sử dụng C#, VB.net… 42 Bảng 2-8 Bảng so sánh chức công cụ RIA Designer khảo sát 43 DANH MỤC TÀI LIỆU THAM KHẢO [0] Jesse James Garrett, AJAX: A new Approach to web Applications , Adaptive Path (2/2005) http://www.adaptivepath.com/ideas/essays/archives/000385.php [0] Lori A MacVittie, XAML in a Nutshell, O'Reilly Media, Inc (2006) [0] Macromedia, Macromedia Flash MX—A next-generation rich client (3/2002) www.adobe.com/devnet/flash/whitepapers/richclient.pdf [0] Matthew MacDonald, Pro Silverlight in C, Apress (2009) [0] Ngô Bá Nam Phương, Nghiên cứu việc biểu diễn tổng hợp Widget phục vụ Mashup, Luận văn Thạc sĩ Khoa học Máy tính, Trường Đại học Khoa học Tự nhiên, ĐHQG-HCM (5/2010) [0] Robert Lair, Beginning Silverlight 3, Apress (2009) [0] Jin Yu, Boualem Benatallah, Regis Saint-Paul, Fabio Casati, Florian Daniel, Maristella Matera, A Framework for Rapid Integration of Presentation Components In: Proceedings of the 16th World Wide Web Conference WWW 2007 (2007), tr 923–932 [0] Cokkiy, Silverlight Carousel: Creating a Silverlight Control Displays Picture in an Interactive Carousel (5/2009) http://www.codeproject.com/KB/silverlight/carousel.aspx [0] Darick C., CoverFlow, http://silverlightcoverflow.codeplex.com/ (truy cập 7/2010) [0] Marcus Cake, Web 1.0, Web 2.0, Web 3.0 and Web 4.0 explained, http://www.marcuscake.com/key-concepts/internet-evolution (truy cập 7/2010) [0] Hyspdrt, PropertyGrid, http://slg30.codeplex.com/ (Release 2, 8/2009) [0] Jamil Hallal, Silverlight – Html Host Control http://www.codeproject.com/Tips/74491/Silverlight-Html-Host-Control.aspx (5/2010) 44 [0] Mark Betz, Gradient Maker, http://www.markbetz.net/sl/gradient/ (5/2010) [0] MSDN online, Microsoft, Network Security Access Restrictions in Silverlight, http://msdn.microsoft.com/en-us/library/cc645032%28VS.95%29.aspx (5/2010) [0] MSDN online, Microsoft, Reflection (C# Programming Guide), http://msdn.microsoft.com/en-us/library/ms173183%28VS.80%29.aspx (5/2010) [0] Peter Bromberg, Silverlight: Handling Cross-Domain Images and Gifs, http://www.eggheadcafe.com/tutorials/aspnet/c0046ba1-5df5-486a-81456b76a40ea43d/silverlight-handling-cro.aspx (5/2010) [0] Saltanov Maxim, Ribbon for Silverlight, http://slribbon.codeplex.com/ (5/2010) 45 [...]... dạng RIA và hỗ trợ chuyển đổi công nghệ: … • Tìm hiểu các kỹ thuật kéo thả trên giao diện • Tìm hiểu các kỹ thuật tạo control, tạo hiệu ứng 20  Tìm hiểu các kỹ thuật phát triển ứng dụng với Silverlight 4: • Tìm hiểu các layout manager được Silverlight 4 hỗ trợ • Tìm hiểu kỹ thuật reflection để tạo và thay đổi giá trị của control và hiệu ứng • Tìm hiểu cách tạo ra hiệu ứng trong Silverlight  Xây dựng. .. khảo sát, tìm hiểu các công cụ và kỹ thuật để thiết kế giao diện của ứng dụng Web; tìm hiểu các kỹ thuật để phát triển ứng dụng với Silverlight 4; tìm hiểu các kỹ thuật chuyển đổi từ công nghệ Silverlight 3, Silverlight 4, Windows Phone 7 với nhau; từ đó xây dựng thử nghiệm hệ thống công cụ phần mềm cho phép thiết kế trực quan giao diện của ứng dụng Web sử dụng Silverlight , trình diễn ứng dụng Web... hệ thống công cụ phần mềm cho phép thiết kế trực quan giao diện của ứng dụng web sử dụng Silverlight: • • • •  Xây dựng công cụ để hỗ trợ kéo thả control Tiến hành phân tích và xây dựng một vài control để thử nghiệm Phân tích và xây dựng các hiệu ứng Xây dựng hệ thống quản lý sự tương tác giữa các control Xây dựng thử nghiệm hệ thống công cụ phần mềm cho phép chuyển đổi giao diện của ứng dụng Web... các công cụ trên còn nhiều mặt hạn chế Xuất phát từ nhu cầu trên, cải thiện những hạn chế của các công cụ hiện có, nhóm đã thực hiện ứng dụng theo công nghệ RIA giúp hỗ trợ người dùng thực hiện thiết kế, chuyển đổi giao diện ứng dụng Web trên nhiều công nghệ Nội dung đề tài tập trung vào tìm hiểu các công nghệ hỗ trợ thiết kế giao diện Web, đánh giá các ứng dụng hỗ trợ thiết kế, chuyển đổi giao diện ứng. .. người dùng nhờ các công cụ hỗ trợ thiết kế giao diện được xây dựng trên các công nghệ Rich Internet Application (RIA) Với sự phát triển đa dạng của các công cụ hỗ trợ thiết kế giao diện Web, người dùng có nhu cầu chọn lựa giải pháp xây dựng ứng dụng trên một nền tảng phát triển cụ thể Và người dùng cũng cần có nhu cầu chuyển đổi một ứng dụng trên nền tảng nên đã xuất hiện những ứng dụng hỗ trợ việc này,... nhỏ thì ứng dụng Web RIA sẽ chạy trên desktop như ứng dụng desktop thông thường 15 Hình 1-1 Một ứng dụng xây Hình 1-2 Một ứng dụng xây dựng dựng bằng công nghệ Flash bằng công nghệ Silverlight (Nguồn: http://www.recycledlifeforms.com/ ) (Nguồn: http://www.imaginalaxy.com ) 1.1.2 Đặc điểm của Silverlight Hình 1-3 thể hiện những thành phần của kiến trúc Silverlight, cùng với những thành phần và dịch... giữa Silverlight 3, Silverlight 4, Windows Phone 7 với nhau: • Xây dựng thành phần save và load giao diện từ các công nghệ vào dạng kiến trúc ứng dụng qui định • Xây dựng thành phần save giao diện đã được thiết kế ra Silverlight 3, Silverlight 4 hoặc Windows Phone 7  Trình diễn ứng dụng đã được thiết kế: • Xây dựng thành phần save và load ứng dụng đã được thiết kế 1.4 Nội dung của luận văn Luận văn bao... và các ứng dụng desktop Đây là công cụ được dùng để thiết kế giao diện XAML cho ứng dụng WPF (Window Presentation Foundation), Windows Phone và ứng dụng Silverlight Công cụ này là một trong những ứng dụng được cung cấp trong bộ phần mềm ứng dụng Microsoft Expression Studio Phiên bản đầu tiên của công cụ này được phát hành miễn phí vào tháng 1 năm 2007 Sau đó được đưa trở thành phần mềm thương mại vào... một ứng dụng Web hoàn thiện Với khuynh hướng phát triển của các thế hệ Web, các ứng dụng Web các trở nên hoàn thiện và dần thay thế các ứng dụng trên desktop Bởi ứng dụng Web có thể sử dụng mọi lúc ở mọi nơi có Internet, và hoàn toàn độc lập với Platform Nắm bắt được xu hướng đó, nhóm chúng em sẽ phát triển hệ thống công cụ hỗ trợ thiết kế giao diện của ứng dụng Web trên nền tảng Web và sử dụng Silverlight... đồng lập trình viên chấp nhận Hiện nay, các ứng dụng web sử dụng công nghệ RIA ngày càng nhiều, và các framework RIA cũng liên tục ra các phiên bản mới, gần đây nhất là JavaFX 2.0 và Silverlight 5.0 Những gì mà RIA làm được thực sự ấn tượng Đặc biệt với công nghệ Flash và Silverlight, ranh giới giữa ứng dụng web và ứng dụng desktop gần như không còn Flash và Silverlight đều cung cấp khả năng chạy không