Nghiên cứu việc biểu diễn và tổng hợp widget phục vụ mashup

69 Chương 5 Kiến trúc hệ thống và kết quả thử nghiệm Tóm tắt:  Nội dung chương này trình bày kiến trúc tổng thể của hệ thống, quy trình xử lý của Framework Engine. Các kịch bản thử nghiệm và việc so sánh với các hướng tiếp cận khác cũng được trình bày ở cuối chương. 5.1 Kiến trúc tổng thể Khi xây dựng widget, nhà phát triển có thể lựa chọn cài đặt widget dựa trên bất kỳ thư viện Javascript, hoặc các công nghệ .NET, Java, RIA … Trong đặc tả widget, ngoài các mô tả về giao diện và xử lý (khai báo trong các thành phần User Preferences, Libraries, Style, Content), widget còn được chú thích khai báo các thành phần cho biết khả năng phối hợp hoạt động của nó (Structure, Event, Operation). Quá trình tổng hợp Mashup là tạo ra đặc tả Mashup Canvas, cũng là biểu diễn của một trang web kết quả. Biểu diễn Mashup Canvas giúp cho quá trình tái sự dụng và mở rộng trang web sau khi tổng hợp dễ dàng hơn bằng cách bổ sung thêm các mô tả cần thiết và tất cả đều được thực hiện thông qua biểu diễn trừu tượng. Khi thực hiện đặc tả Mashup Canvas, nhà phát triển sẽ khai báo các widget được sử dụng trong thành phần Layout và mối quan hệ tương tác (listener) giữa các widget trong Event Listeners (Bảng 4-19). Kết quả đặc tả của Mashup Canvas sẽ được cung cấp cho Engine thực hiện xử lý. Engine là thành phần chính trong hệ thống có vai trò phân tích đặc tả widget, Mashup Canvas và kết xuất trang web kết quả (HTML, CSS, Javascript tương tác). 70 Kiến trúc tổng thể của hệ thống được mô tả chi tiết trong Hình 5-1. Hình 5-1: Kiến trúc tổng thể của hệ thống. Chú thích: Các widget sau khi xây dựng sẽ được lắp ráp và phối hợp trên Mashup Canvas, sau đó sẽ được cung cấp cho Engine để phát sinh ứng dụng kết quả.Vai trò và quy trình xử lý của Engine sẽ được trình bay chi tiết trong phần 5.2. 71 5.2 Quy trình xử lý 5.2.1 Phát sinh danh sách widget được sử dụng trong Mashup Trong bước này, Engine sẽ phân tích thành phần Layout trong đặc tả Mashup Canvas (canvas.xml), xác định các widget tham gia quá trình tổng hợp và phát sinh widget Runtime tương ứng trên trang Web kết quả (HTML Web Page). Hình 5-2 mô tả một cách tổng quát quy trình phát sinh các widget hoạt động trên ứng dụng Mashup kết quả (Widget Runtime) từ các khai báo widget trong thành phần Layout của Mashup Canvas. Hình 5-2: Quy trình phát sinh widget Runtime từ các khai báo widget trong thành phần Layout của Mashup Canvas Với mỗi khai báo widget tham gia tiến trình phối hợp, Engine sẽ dựa vào thuộc tính ReferenceModel để truy cập toàn bộ đặc tả chi tiết các thành phần trong widget: widget Description, User Preferences, Libraries, Style, Content. Sau đó, các thành phần trên sẽ được Engine phân tích và chuyển đổi thành mã HTML, CSS thể hiện giao diện, Javascript xử lý tương tác trên widget. 72 Hình 5-3 mô tả chi tiết quy trình chuyển đổi các thành phần trong đặc tả widget (Widget Model) để tạo ra widget runtime hoạt động trong Mashup. Help Information Hình 5-3: Quy tắc chuyển đổi các thành phần trong Widget Model Quá trình chuyển đổi trong mỗi thành phần được thực hiện như sau:  Widget Description: sẽ được chuyển đổi thành tiêu đề hiển thị trên widget, Icon đại diện, các thông tin trợ giúp (Author, Author Email, Website …).  User Preferences: được Engine chuyển đổi thành giao diện đồ họa để người dùng tùy biến tham số hoạt động của widget.  Ví dụ: User Preferences của Widget bản đồ cung cấp 2 tham số tùy biến chiều rộng và chiều cao của bản đồ được biểu diễn như sau: <Preference Name="txtWidth" Type="Text" DefaultValue="500" Label="Width:" /> <Preference Name="txtHeight" Type="Text" DefaultValue="400" Label="Height:" /> 73 Biểu diễn trên sẽ được chuyển đổi thành mã html với giao diện kết quả thể hiện trong Hình 5-4.  Libraries: mỗi thành phần Library bên trong sẽ được chuyển đổi thành thẻ trong HTML tham chiếu các thư viện javascript.  Style: mỗi thành phần CSSReference được chuyển đổi thành thẻ <link href=”…” > trong HTML tham chiếu các tập tin css chứa kiểu định dạng thể hiện bên ngoài.  Content: toàn bộ nội dung trong Content sẽ được chép toàn bộ vào nội dung của Widget Runtime. Width Height Hình 5-4: Giao diện tùy biến tham số hoạt động phát sinh từ đặc tả 74 5.2.2 Phát sinh xử lý phối hợp tương tác giữa các widget Dựa trên đặc tả mối quan hệ tương tác giữa các widget khai báo trong thành phần Event Listeners của Mashup Canvas, Engine phát sinh mã nguồn Javascript thực hiện quá trình phối hợp. Hình 5-5 mô tả một cách tổng quát quy trình Engine phát sinh xử lý thực hiện tiến trình phối hợp. Hình 5-5: Quy trình Engine phát sinh Javascript thực hiện tiến trình phối hợp Với mỗi khai báo mối quan hệ phối hợp Listener trong thành phần Event Listener của Mashup Canvas, Engine sẽ dựa vào mô tả của các thuộc tính khai báo trong Listener (Publisher, Subscriber, SourceEvent, Operation/DestinationEvent) và đặc tả chi tiết các thành phần hỗ trợ phối hợp trong widget Model (Structures, Operations, Events) để phát sinh mã Javascript thực hiện kịch bản phối hợp hoạt động giữa các widget Runtime trong ứng dụng Mashup kết quả. Tùy vào đặc tả biểu diễn Listener có khai báo ánh xạ truyền tham số sự kiện Mapping, quy trình phát sinh sẽ được thực hiện theo mô tả chi tiết trong Hình 5-6 hoặc Hình 5-7. 75 Hình 5-6: Quy trình phát sinh mã javascript phối hợp nếu trong đặc tả Listener không có biểu diễn ánh xạ Mapping Theo Error! Reference source not found., xử lý của Engine bao gồm các bước sau:  Bước 1: phát sinh lời gọi hàm đăng ký sự kiện bind từ widget Publisher.  Bước 2: truyền tham số đầu tiên vào hàm bind với giá trị là nội dung của thuộc tính SourceEvent trong Listener. 76  Bước 3: SourceEvent sẽ truy cập đến đặc tả chi tiết của sự kiện (Event) trong Widget Model để lấy toàn bộ tham số sự kiện mà nó cung cấp.  Bước 4: Phát sinh danh sách tham số sự kiện; sau đó truyền vào danh sách đối số của anonymous function trong đối số thứ 2 của phương thức bind. Đối số thứ 2 trong phương thức bind được dùng để khai báo hàm xử lý sự kiện (event handler) được kích hoạt khi SourceEvent phát ra; trong quy trình này, nó cũng chính là anonymous function.  Bước 5: Phát sinh nội dung hàm xử lý sự kiện anonymous function là lời gọi đến thao tác Operation được khai báo trong Listener.  Bước 6: Truyền tất cả tham số sự kiện tạo ra trong bước 4 vào danh sách đối số của thao tác đã phát sinh ở bước 5. Hình 5-7: Quy trình phát sinh mã javascript phối hợp nếu trong đặc tả Listener sử dụng biểu diễn ánh xạ Mapping 77 Hình 5-7 mô tả cụ thể quy trình phát sinh phối hợp widget của Engine, bao gồm các bước sau:  Bước 1, 2, 3: thực hiện tương tự quy trình trong Hình 5-6.  Bước 4: Operation trong Listener sẽ truy cập đến đặc tả chi tiết của thao tác (Operation) trong Widget Model để lấy toàn bộ đối số mà thao tác yêu cầu.  Bước 5: Với mỗi biểu diễn ánh xạ tham số Mapping, Engine sẽ tạo ra danh sách tham số truyền (Parameter List) phù hợp với số lượng và thứ tự mà thao tác (operation) ở bước 4 yêu cầu. Danh sách tham số kết quả này cũng được truyền vào anonymous function của phương thức bind.  Bước 6: Phát sinh nội dung hàm xử lý sự kiện anonymous function là lời gọi đến thao tác Operation được khai báo trong Listener.  Bước 7: Truyền tất cả tham số sự kiện tạo ra trong bước 5 vào danh sách đối số của thao tác đã phát sinh ở bước 6. Ví dụ minh họa cách thức thực hiện của 2 quy trình trong Hình 5-6, Hình 5-7 được trình bày trong mục 5.3. 5.3 Các kịch bản thử nghiệm Chúng tôi đã triển khai 12 kịch bản Mashup thử nghiệm, trong đó widget được xây dựng dựa trên nhiều nền tảng công nghệ khác nhau và thành phần tham số phối hợp được thử nghiệm từ kiểu cơ sở đến cấu trúc phức tạp. Danh sách widget cài đặt cùng với mô tả về các kịch bản phối hợp được trình bày trong Bảng 5-1. 78 STT Widget phát sự kiện Widget xử lý sự kiện Ghi chú 1 Widget liệt kê danh sách địa điểm và được cài đặt dựa trên: HTML, CSS, JQuery (Location Widget) Widget bản đồ Widget bản đồ cài đặt dựa trên các API do Google Map cung cấp 2 Widget liệt kê danh sách tập tin multimedia (Favorite Multimedia Widget) Widget đọc file mp3/swf/flv. Widget xử lý sự kiện tận dụng thư viện FlowPlayer phát triển từ JQuery và Flash để play các tên file do Widget nguồn truyền sang. 3 Widget thể hiện bảng thống kê tỷ lệ sử dụng các trình duyệt trong 4 năm gần đây nhất (Table Widget) Widget vẽ biểu đồ Widget biểu đồ phát triển dựa trên thư viện Asp.net WebChart Control ( art/). Sự phối hợp dựa trên các biểu diễn ánh xạ tham số Mapping 4 Table Widget (HTML, CSS, JQuery) Widget vẽ biểu đồ Widget biểu đồ tận dụng thư viện Visifire Silverlight Chart ( Sự phối hợp dựa trên các biểu diễn ánh xạ tham số Mapping 5 Table Widget (HTML, CSS, JQuery) Widget vẽ biểu đồ Widget biểu đồ tận dụng thư viện Flash Fusion Chart ( Số lượng & thứ tự tham số truyền và nhận không khớp. Sự phối hợp dựa trên các biểu diễn ánh xạ tham số. Đối với các tham số được yêu cầu mà không có biểu diễn tham số truyền, Engine sẽ phát sinh giá trị mặc định tương ứng theo kiểu dữ liệu mà thao tác yêu cầu. 6 Location Widget (HTML, CSS, JQuery) Widget bản đồ Widget bản đồ sử dụng Google Map API; sự phối hợp sử dụng biểu diễn ParamGroup để gom nhóm tạo cấu trúc tham số tự động. 79 STT Widget phát sự kiện Widget xử lý sự kiện Ghi chú 7 Action Timer Widget (HTML, CSS, JQuery) Widget bản đồ Widget bản đồ định thời sẽ gọi Web Service lấy vị trí hiện thời của một mục tiêu di động và thể hiện lên Google Map. Tham số định thời phía Action Timer Widget có thể cấu hình vào thời điểm runtime. 8 Action Timer Widget (HTML, CSS, JQuery) Widget bản đồ Cập nhật lại kịch bản 7, Widget Action Timer khi phát ra sự kiện sẽ kích hoạt sự kiện PositionUpdated của Widget bản đồ hiển thị vị trí hiện thời lên Google Map. 9 Mashup được tổng hợp dựa trên sự phối hợp giữa 3 widget: Location, Javascript Adapter, widget bản đồ; trong đó Javascript Adapter đóng vai trò trung gian thực hiện chuyển đổi dữ liệu. Chi tiết kịch bản phối hợp bao gồm 2 giai đoạn với chi tiết như sau: Location Widget Javascript Adapter Widget (HTML, CSS, JQuery) Javascript Adapter nhận mảng tham số với 3 thông tin DiaChi, ToaDoX, ToaDoY từ Location Widget. Javascript Adapter tạo mảng tham số phù hợp với đối số do Widget bản đồ yêu cầu với 2 thông tin: cấu trúc tọa độ MyGLatLng, Tên địa chỉ. Javascript Adapter Widget (HTML, CSS, JQuery) Widget bản đồ Javascript Adapter sau khi gom nhóm và tạo xong tham số sẽ truyền cho Widget bản đồ thể hiện kết quả. Ghi chú: Logic cài đặt xử lý chuyển đổi dữ liệu trong Javascript Adapter có thể tùy biến vào lúc runtime. 10 Table Widget (HTML, CSS, JQuery) Widget vẽ biểu đồ Widget vẽ biểu đồ tận dụng xử lý vẽ biểu đồ trong thư viện Javascript: Dojo, JQuery Google Chart và Yahoo User Interface Library. Biểu diễn ánh xạ truyền tham số giữa các widget đều được kiểm thử trong các kịch bản Mashup. 80 STT Widget phát sự kiện Widget xử lý sự kiện Ghi chú 11 Location Widget (phát triển dựa trên Silverlight) Widget bản đồ Việc phối hợp có nội dung tương tự kịch bản 1 nhưng thay thế kỹ thuật xây dựng Widget nguồn (Location Widget) bằng công nghệ Silverlight nhằm minh họa khả năng tương tác giữa các nền tảng khác nhau mà mô hình đề xuất hỗ trợ. 12 Location Widget (HTML, CSS, JQuery) Event Explorer Widget Tất cả các thông tin trong tham số sự kiện truyền (cấu trúc và nội dung tham số) được thể hiện trực quan lên Widget nhận. Bảng 5-1: Các kịch bản tổng hợp Mashup Chúng tôi đơn cử trình bày chi tiết biểu diễn phối hợp trong kịch bản 5 nhằm thể hiện một cách rõ ràng và cụ thể hơn về xử lý trong các kịch bản tổng hợp Mashup. Hình 5-8: Ứng dụng Mashup theo kịch bản 5 Hình 5-8 thể hiện giao diện ứng dụng Mashup tổng hợp được phát sinh dựa theo biểu diễn theo kịch bản 5. Dựa theo kịch bản phối hợp này, Widget nguồn là một bảng thống kê trong đó mỗi dòng mô tả thông tin về tỷ lệ sử dụng của 1 trình duyệt trong 4 năm gần đây nhất. 81 Khi người dùng chọn 1 dòng trên bảng, sự kiện RowSelection_Changed sẽ được phát ra kèm theo tham số sự kiện chứa toàn bộ thông tin của dòng vừa chọn. Biểu diễn chi tiết của sự kiện này được mô tả như sau: <Event Name="RowSelection_Changed" Description="Raise when user click on one row" > <Param Name="arrColumnName" DataType="Array" ElementDataType="String" /> <Param Name="arrCellValue" DataType="Array" ElementDataType="Number"/> Sự kiện RowSelection_Changed bao gồm 3 tham số:  SoftwareName: tên phần mềm của dòng được chọn  arrColumnName: danh sách tiêu đề cột thể hiện các năm từ 2006 đến 2009 trong bảng thống kê  arrCellValue: danh sách tỷ lệ sử dụng của trình duyệt theo từng năm Ý nghĩa các tham số này được mô tả chi tiết trong Hình 5-9. Hình 5-9: Ý nghĩa các tham số sự kiện truyền của Table Widget Bên phía Widget nhận, thao tác vẽ biểu đồ CreateFusionChart với 5 đối số: chartTitle, xAxisName, yAxisName, arrName, arrValue, được biểu diễn như sau: <Input Name="arrName" DataType="Array" ElementDataType="String" Required="true"/> <Input Name="arrValue" DataType="Array" ElementDataType="Number" Required="true"/> Ý nghĩa tham số trong thao tác CreateFusionChart được mô tả trong Hình 5-10. 82 chartTitlearrValue arrName Hình 5-10: Ý nghĩa các tham số trong thao tác CreateFusionChart Từ các biểu diễn này, Mashup được tổng hợp có biểu diễn như sau: <Widget Id="Table1" Top="100" Left="30" Width="500" Height="200" ReferenceModel="Widget Models/TableChart.xml" > <Widget Id="FusionChartFlash1" Top="100" Left="550" Width="600" Height="600" ReferenceModel="Widget Models/FusionChartFlash.xml" > <Listener Publisher="Table1" SourceEvent="RowSelection_Changed" Subscriber="FusionChartFlash1" Operation="CreateFusionChart" > <Mapping ParamName="SoftwareName" InputName="chartTitle" /> <Mapping ParamName="arrColumnName" InputName="arrName" /> <Mapping ParamName="arrCellValue" InputName="arrValue" /> 83 Trong ví dụ trên, 2 widget được sử dụng trong ứng dụng Mashup bao gồm Table1, FusionFlashChart1 được khai báo trong thành phần Layout. Các Widget tham chiếu thông tin đặc tả đầy đủ của mình dựa vào thuộc tính ReferenceModel. Mối quan hệ phối hợp được khai báo thông qua Listener với đầy đủ thuộc tính cần thiết cần thiết cho sự phối hợp: widget phát sự kiện Publisher, sự kiện phát ra RowSelection_Changed, widget xử lý sự kiện FusionFlashChart1, thao tác xử lý CreateFusionChart. Từ các biểu diễn ánh xạ truyền tham số Mapping trong ví dụ trên, kết quả quá trình truyền tham số được minh họa trong Hình 5-11. Hình 5-11: Kết quả truyền tham số dựa vào các biểu diễn ánh xạ Mapping 84 5.4 So sánh đánh giá Trong phần này, chúng tôi trình bày những so sánh, đánh giá khả năng của mô hình đề xuất với các hướng tiếp cận có liên quan. Framework Mô hình biểu diễn widget OpenAjax Dựa trên các đặc tả dạng khai báo và script Giải pháp của Jin Yu[14] Dựa trên đặc tả dạng khai báo nhưng chưa cung cấp đầy đủ các mô tả biểu diễn widget, chẳng hạn widget Description, User Preferences. IBM iWidget Dựa trên dạng khai báo và script Mô hình đề xuất Dựa trên dạng khai báo và script Bảng 5-2: So sánh mô hình biểu diễn widget giữa các Framework Bảng 5-2 cho thấy mô hình luận văn đề xuất biểu diễn tất cả thành phần trong widget theo dạng khai báo; trong đó, các xử lý trên widget được cài đặt dựa trên mã kịch bản javascript. Phương pháp này cũng được OpenAjax và IBM iWidget sử dụng trong đặc tả widget của mình. Framework Mô hình biểu diễn phối hợp widget OpenAjax widget Không có biểu diễn. Giải pháp của Jin Yu[14] Có cung cấp biểu diễn nhưng vẫn còn một số hạn chế:  Chưa đề cập tường minh tham số sự kiện kiểu cấu trúc  Chưa cung cấp đặc tả ánh xạ tham số nếu Operation có nhiều hơn 1 tham số  Chưa cung cấp cơ chế lan truyền sự kiện  Việc chuyển đổi định dạng kiểu dữ liệu (Data Mapping), hoặc thực hiện các chuyển đổi mở rộng (Additional Integration Logic) chỉ nêu ý tưởng, chưa cung cấp cài đặt thực tế IBM iWidget Có cung cấp biểu diễn giải quyết hầu hết các hạn chế trong đề xuất của Jin Yu[14], tuy nhiên trong biểu diễn vẫn còn hạn chế về cấu trúc tham số truyền giữa các widget, dẫn đến khả năng tích hợp và thay thế widget tương đương khó khăn. Mô hình đề xuất Dựa trên các ý tưởng trong mô hình đề xuất của Jin Yu[14] và IBM iWidget[26], trong đó mở rộng thêm một số biểu diễn về ánh xạ tham số truyền nhằm giải quyết hạn chế về ràng buộc cấu trúc tham số truyền giữa các widget và cho phép chuyển đổi cấu trúc tham số tự động. Bảng 5-3: So sánh mô hình biểu diễn phối hợp widget giữa các Framework 85 Dựa vào kết quả so sánh trong Bảng 5-3, mô hình biểu diễn đề xuất đã khắc phục hầu hết các hạn chế về khả năng phối hợp trong giải pháp biểu diễn của Jin Yu [14] và IBM iWidget [26]. Cụ thể, đối với phương pháp của Jin Yu [14], mô hình luận văn đề xuất đã:  Cung cấp đặc tả biểu diễn các thành phần trong cấu trúc tham số sự kiện cũng như đối số của thao tác.  Cung cấp ánh xạ tham số truyền trong trường hợp thao tác (operation) ở widget nhận khai báo nhiều hơn một đối số. Với hỗ trợ này, hàm xử lý sự kiện không bắt buộc chỉ được khai báo với 1 đối số như các mô hình lập trình truyền thống mà có thể là bất kỳ hàm nào widget nhận cung cấp sẵn.  Cung cấp đặc tả biểu diễn việc lan truyền sự kiện giữa các widget (mục 4.2.2.1).  Cài đặt các widget hỗ trợ quá trình chuyển đổi dữ liệu truyền (Javascript Adapter - mục 4.4.1). Đối với đặc tả iWidget của IBM, đề xuất đã:  Cung cấp biểu diễn ánh xạ truyền tham số nhằm hạn chế sự phụ thuộc giữa các widget gây ra do khai báo các thành phần trong cấu trúc tham số sự kiện (mục 4.2.2.2, 4.2.2.3).  Mở rộng khả năng khai báo danh sách đối số của thao tác (thao tác có thể khai báo tùy ý số lượng đối số) cũng như cách thức sử dụng tham số sự kiện mà thao tác yêu cầu (mục 4.2.2.2). Framework Khả năng tạo Mashup an toàn OpenAjax Sử dụng Managed Hub trong chuẩn OpenAjax Hub 2.0 Giải pháp của Jin Yu[14] Không đề cập. IBM iWidget Không đề cập. Mô hình đề xuất Engine cài đặt chưa hỗ trợ. Bảng 5-4: So sánh khả năng bảo mật giữa các Framework 86 Khi xây dựng Engine, ta có thể quyết định mã nguồn phối hợp javascript do Engine phát sinh có tuân theo cơ chế tạo Mashup an toàn hay không. Engine cài đặt chưa hỗ trợ khả năng này (Bảng 5-4). Framework Các hỗ trợ về môi trường phát triển, khả năng hỗ trợ Mashup widget IDE Mashup Editor Mashup widget Assistant OpenAjax    IBM iWidget    Giải pháp của Jin Yu[14]    Mô hình đề xuất    Bảng 5-5: So sánh môi trường phát triển, khả năng hỗ trợ Mashup Bảng 5-5 so sánh các khả năng hỗ trợ của các phương pháp. Tuy nhiên, mục tiêu của luận văn là khảo sát, phân tích, đánh giá một cách khách quan các phương pháp biểu diễn và tổng hợp widget. Trên cơ sở đó, đề xuất thêm các biểu diễn bổ sung nhằm giúp cho quá trình phối hợp có thể tiến hành một cách dễ dàng và thuận tiện. Việc xây dựng các môi trường phát triển widget (widget IDE), tổng hợp Mashup (Mashup Editor) không phải là trọng tâm của đề tài; tuy nhiên, các công cụ này có thể phát triển trong tương lai nhằm mang lại các hỗ trợ cần thiết, giúp cho việc xây dựng ứng dụng Mashup thực sự là một hướng tiếp cận gần gũi, phù hợp với người dùng cuối theo tinh thần của Web 2.0. 5.5 Kết luận Trong chương này, chúng tôi đã trình bày chi tiết kiến trúc tổng thể hệ thống, làm rõ vai trò của Engine trong việc phân tích các mô hình biểu diễn và phát sinh ứng dụng tổng hợp Mashup. Mô hình cũng được so sánh, đánh giá với các hướng tiếp cận của OpenAjax widget, Jin Yu [14], IBM iWidget theo 4 tiêu chí, cụ thể: mô hình biểu diễn widget, mô hình biễu diễn phối hợp widget, khả năng tạo Mashup an toàn, môi trường hỗ trợ phát triển Mashup. Nội dung chương tiếp theo sẽ tổng kết các kết quả đã thực hiện cũng như hướng phát triển của đề tài.