Đề xuất mô hình biểu diễn widget, sự phối hợp widget và ứng dụng Mashup

48 Chương 4 Đề xuất mô hình biểu diễn widget, sự phối hợp widget và ứng dụng Mashup Tóm tắt:  Nội dung chương này trình bày chi tiết về 3 mô hình do chúng tôi đề xuất trong luận văn, cụ thể là Mô hình biểu diễn các thành phần trong widget, Mô hình biểu diễn sự phối hợp widget và Mô hình biểu diễn ứng dụng Mashup tổng hợp (Mashup Canvas). Ngoài ra, chúng tôi cũng đề xuất các biểu diễn mở rộng nhằm nâng cao mức độ phối hợp, hạn chế sự phụ thuộc về tham số truyền và mở rộng khả năng kết buộc trễ giữa các widget. Chi tiết về các widget hỗ trợ quá trình xây dựng Mashup cũng được đề cập ở cuối chương. 4.1 Mô hình đặc tả widget 4.1.1 Các thành phần trong widget Qua khảo sát các chuẩn đặc tả widget với trọng tâm là nâng cao khả năng phối hợp, tương tác widget, chúng tôi đề xuất đặc tả widget bao gồm các thành phần được mô tả trong Hình 4-1. Ý nghĩa của từng thành phần được trình bày trong Bảng 4-1. Hình 4-1: Các thành phần trong cấu trúc widget 49 Thành phần Mô tả Widget Description Chứa các thông tin mô tả về widget User Preferences Khai báo các tham số cấu hình hoạt động của widget Libraries Khai báo tham chiếu đến các thư viện Javascript mà widget sử dụng Style Khai báo các tham chiếu đến tập tin CSS Structures Khai báo các cấu trúc tham số sự kiện truyền (event data), tham số của thao tác (input data) Operations Khai báo các phương thức có thể được gọi bởi widget khi thực hiện phối hợp Events Khai báo các sự kiện mà widget cung cấp Content Mô tả giao diện thể hiện của widget Bảng 4-1: Ý nghĩa các thành phần trong widget 4.1.2 Các thuộc tính của widget khi sử dụng trong Mashup Các thuộc tính của widget sử dụng trong ứng dụng Mashup được mô tả trong Hình 4-2. Chi tiết ý nghĩa các thuộc tính widget được trình bày trong Bảng 4-2. Hình 4-2: Các thuộc tính của widget sử dụng trong ứng dụng Mashup Thuộc tính Mô tả Id Định danh widget tại Client, thuộc tính này chỉ sử dụng trên MashupCanvas. ReferenceModel Tham chiếu đến mô hình biểu diễn đầy đủ các thành phần của widget, thuộc tính này chỉ sử dụng trong MashupCanvas. Top Vị trí góc trên trái của widget trên Mashup Canvas. Left Width Chiều rộng, chiều cao widget được hiển thị trên Mashup Canvas Height AutoScrolling (true/false), Tự động hiển thị thanh cuộn nếu chiều rộng/cao widget nhỏ hơn chiều rộng/cao của nội dung. Bảng 4-2: Ý nghĩa các thuộc tính trong widget 50 4.1.3 Thành phần mô tả widget (widget Description) Thành phần mô tả widget (Widget Description) chứa các thông tin mô tả tổng quan về ý nghĩa, công dụng widget cho người sử dụng hoặc xử lý tự động bởi máy tính. Các thuộc tính trong Widget Description được mô tả trong Hình 4-3. Chi tiết về ý nghĩa các thuộc tính trong Widget Description được trình bày trong Bảng 4-3. Widget Description -Name -Title -Author -AuthorEmail -AuthorWebsite -Description -Version -Keyword -Tag -MinWidth -MinHeight -MaxWidth -MaxHeight -Icon -Thumbnail Hình 4-3: Các thuộc tính của widget Description Thuộc tính Mô tả Name Tên widget được dùng trong Mashup Framework Title Tiêu đề widget thể hiện trong Mashup Canvas Author Tên người phát triển widget AuthorEmail Email của người phát triển widget AuthorWebsite Địa chỉ Website của người phát triển widget Description Mô tả ý nghĩa, công dụng widget… Version Thông tin phiên bản Keyword Phân loại widget do Author định nghĩa, có thể được khai thác bởi các Search Engine. Tag Phân loại widget do người dùng widget định nghĩa MinWidth Chiều rộng tối thiểu widget khi hiển thị MinHeight Chiều cao tối thiểu widget khi hiển thị 51 Thuộc tính Mô tả MaxWidth Chiều rộng tối đa widget khi hiển thị MaxHeight Chiều cao tối đa widget khi hiển thị Icon URL Icon (16x16) hiển thị trên Title của widget Thumbnail URL Icon (64x64) sử dụng trong Mashup Environment Bảng 4-3: Ý nghĩa các thuộc tính trong Widget Description 4.1.4 Tham số cấu hình hoạt động (UserPreferences) Mối quan hệ giữa các thành phần biểu diễn tham số cấu hình hoạt động của widget được mô tả trong Hình 4-4. Hình 4-4: Các thành phần biểu diễn tham số cấu hình hoạt động (User Preferences) Thành phần tổng thể User Preferences chứa 2 thông tin chính: thuộc tính Display và các nhóm tham số Preference Group với ý nghĩa được mô tả trong Bảng 4-4. Thuộc tính Mô tả Display Chứa các giá trị: Tab/Accordian/Groupbox, cho biết cách thức hiển thị các nhóm tham số Thành phần con Mô tả Prefence Group Chứa thông tin mô tả cho một nhóm tham số Bảng 4-4: Ý nghĩa các thành phần biểu diễn tham số cấu hình hoạt động 52 Trong đó, thành phần Preference Group là biểu diễn do luận văn đề xuất nhằm cung cấp khả năng gom nhóm các tham số cấu hình có liên quan, tạo ra sự tiện lợi cho người dùng trong quá trình sử dụng widget. Chi tiết về các thành phần bên trong Preference Group được mô tả trong Bảng 4-5. Thuộc tính Mô tả Label Tiêu đề nhóm Thành phần con Mô tả Prefence Mô tả một tham số Bảng 4-5: Ý nghĩa các thành phần trong Preference Group Preference là thành phần mô tả ý nghĩa của một tham số, chi tiết thành phần này được trình bày trong Bảng 4-6. Thuộc tính Mô tả Name Định danh tham số, dùng để truy cập giá trị tham số tại trình duyệt bằng Javascript. Type Kiểu dữ liệu tham số. Tùy thuộc vào kiểu dữ liệu sẽ phát sinh ra control nhập liệu tương ứng, có ý nghĩa tương tự như mô hình của Netvibes[36], Google Gadget[37]. Các giá trị Type có thể chứa là: Bool: CheckBox Text: TextBox Password: Password Field DateTime: Calendar Enum: Menu/ComboBox Hidden: Hidden Field Label Nhãn nằm cạnh control nhập liệu tham số DefaultValue Giá trị mặc định hoặc đã lưu trữ trong các lần sử dụng trước (thông tin này có thể truy cập trong UserProfile). Required Cho biết tham số có bắt buộc nhập liệu hay không Thành phần con Mô tả EnumValue (Gogole Gadget [37]) Chỉ sử dụng nếu Type có giá trị là Enum, mỗi EnumValue tương ứng với thẻ trong HTML. Bảng 4-6: Các thành phần trong Preference 53 Bảng 4-7 mô tả ý nghĩa thành phần EnumValue. Enum Value là biểu diễn mô tả cho một dòng chọn nếu Preference là một ComboBox. Thuộc tính Mô tả Value Giá trị tương ứng với dòng chọn Label Nội dung thể hiện của dòng được chọn, có thể khác với Value Bảng 4-7: Các thành phần trong EnumValue 4.1.5 Thành phần mô tả tham chiếu thư viện (Libraries) Thành phần Libraries được dùng để khai báo tham chiếu đến các thư viện Javascript mà widget sử dụng trong quá trình hoạt động được minh họa trong Hình 4-5. Hình 4-5: Các thành phần trong Libraries Mỗi tham chiếu thư viện sẽ được mô tả bởi thành phần con Library được mô tả trong Bảng 4-8. Thuộc tính Mô tả Href Chứa địa chỉ đến tập tin .js. Địa chỉ này có thể tham chiếu đến tập tin cục bộ bên trong website hoặc từ website bên ngoài Bảng 4-8: Mô tả thuộc tính Href trong thành phần Library 4.1.6 Thành phần mô tả tham chiếu sử dụng kiểu định dạng thể hiện (Style) Thành phần Style chứa khai báo tham chiếu đến tập tin CSS chứa các kiểu định dạng mà widget sử dụng khi thể hiện nội dung được mô tả trong Hình 4-6. Style -Href CSSReference Hình 4-6: Các thành phần trong Style 54 Mỗi tham chiếu sẽ được mô tả bởi thành phần con CSSReference với ý nghĩa được trình bày trong Bảng 4-9. Thuộc tính Mô tả Href Chứa địa chỉ đến tập tin .css Bảng 4-9: Mô tả thuộc tính Href trong thành phần CSSReference 4.1.7 Cấu trúc tham số (Structures) Thành phần Structures có vai trò mô tả các cấu trúc tham số sự kiện truyền (event data) hoặc đối số của thao tác (input data) sử dụng trong quá trình phối hợp. Biểu diễn này là đặc tả mở rộng đối với phương pháp của Jin Yu [14] và có vai trò tương tự [54] trong đặc tả IBM iWidget. Mối quan hệ giữa các thành phần biểu diễn cấu trúc tham số được mô tả trong Hình 4-7. Hình 4-7: Các thành phần mô tả cấu trúc tham số (Structures) Mỗi cấu trúc sẽ được mô tả bởi thành phần con Structure được trình bày trong Bảng 4-10. Thuộc tính Mô tả Name Tên cấu trúc Thành phần con Mô tả Member Mô tả một thành phần bên trong cấu trúc kiểu cơ sở Structure Mô tả một thành phần bên trong cấu trúc kiểu cấu trúc Bảng 4-10: Các thành phần trong Structure 55 Trong mỗi Structure, Member là thành phần mô tả một trường trong cấu trúc, chi tiết đặc tả thành phần Member được mô tả trong Bảng 4-11. Thuộc tính Mô tả Name Tên thành phần trong cấu trúc DataType Kiểu dữ liệu của thành phần, các giá trị có thể là: String, Boolean, Number, Array Nếu DataType là Array, cần phải khai báo thêm thuộc tính ElementDataType. ElementDataType Được sử dụng khi DataType là Array, cho biết cho biết các phần tử bên trong Array có kiểu dữ liệu là gì. Bảng 4-11: Các thành phần trong Member 4.1.8 Thao tác trong widget (Operations) Thành phần này là biểu diễn mở rộng đối với chuẩn OpenAjax widget, có vai trò tương đương với Handled Event trong IBM iWidget [26] và thao tác (operation) trong giải pháp của Jin Yu[14], nhằm mô tả các thao tác có thể được thực hiện bởi widget khi sự kiện xảy ra. Thành phần này được mô tả trong Hình 4-8. Hình 4-8: Các thành phần biểu diễn thao tác xử lý của widget (Operations) 56 Mỗi thao tác sẽ được biểu diễn bởi thành phần con Operation với cấu trúc được trình bày theo Bảng 4-12. Thuộc tính Mô tả Name Tên của thao tác Description Mô tả ý nghĩa, công dụng thao tác Thành phần con Input Tham số truyền mà thao tác cần để xử lý Bảng 4-12: Các thành phần trong thao tác (operation) Mỗi thao tác sẽ khai báo một tập tham số (input). Cấu trúc mỗi tham số được mô tả theo Bảng 4-13. Thuộc tính Mô tả Name Tên tham số DataType Kiểu dữ liệu tham số, có thể là kiểu cơ sở hoặc kiểu cấu trúc (tham chiếu đến thành phần Structures). Required Cho biết tham số có bắt buộc phải cung cấp hay không, nếu không khai báo, giá trị mặc định là false. Thành phần này cung cấp thông tin cho biết quá trình phối hợp chỉ có thể xảy ra khi những đối số nào trong thao tác phải được cung cấp. Nếu tham số không được cung cấp trong quá trình phối hợp và Required là false, Engine sẽ tự cung cấp cho nó giá trị mặc định nhằm đảm bảo lời gọi đúng cú pháp, ví dụ: Boolean gán là false, Array là mảng rỗng []. Thuộc tính này là biểu diễn bổ sung so với đặc tả của Jin Yu [14] và IBM iWidget [26]. Bảng 4-13: Các thành phần biểu diễn tham số thao tác (Input)  Ví dụ: biểu diễn thao tác canh giữa bản đồ đối với widget hiển thị bản đồ <Operation Name=“setCenter” Description=“show map with the center point”> 57 4.1.9 Sự kiện trong widget (Events) Thành phần này khai báo các sự kiện mà widget hỗ trợ trong quá trình sử dụng. Đặc tả này có vai trò tương tự với biểu diễn sự kiện của Jin Yu[14] và Published Event trong IBM iWidget [26] được minh họa theo Hình 4-9. Hình 4-9: Các thành phần trong tập sự kiện (Events) Mỗi sự kiện sẽ được biểu diễn bởi thành phần con Event với cấu trúc được mô tả trong Bảng 4-14. Thuộc tính Mô tả Name Tên sự kiện được dùng khi đặc tả sự phối hợp Description Mô tả ý nghĩa về tình huống sự kiện được phát ra Thành phần con Param Mô tả một thành phần trong tham số sự kiện (event data) truyền cho widget khác và sẽ được ánh xạ với tham số nhận của thao tác (operation) Bảng 4-14: Các thành phần trong sự kiện (event) Mỗi sự kiện khi phát ra sẽ cung cấp tập các tham số sự kiện cho các widget khác. Tùy vào nhu cầu sử dụng, các widget khác có thể tiếp nhận toàn bộ hoặc một phần các tham số này (OpenAjax widget [38], Jin Yu [14], IBM iWidget [26] chỉ cho phép tiếp nhận toàn bộ cấu trúc tham số sự kiện). Cấu trúc của mỗi thành phần tham số được trình bày trong Bảng 4-15. Thuộc tính Mô tả Name Tên thành phần tham số DataType Kiểu dữ liệu thành phần tham số Bảng 4-15: Các thành phần trong tham số sự kiện (param) 58  Ví dụ: Đối với widget thể hiện danh sách các địa điểm, khi người dùng chọn một địa điểm, sự kiện LocationSelectionChanged sẽ được phát ra và truyền đi tham số sự kiện bao gồm 3 thành phần: tên địa điểm (locationName), kinh độ (Lng), vĩ độ (Lat). Biểu diễn sự kiện được biểu diễn như sau: <Event Name=“LocationSelectionChanged” Description=“raise when selecting a location” > 4.2 Mô hình phối hợp widget 4.2.1 Mô hình biểu diễn Thành phần này biểu diễn mối quan hệ phối hợp giữa 2 widget và được tách biệt ra khỏi đặc tả widget nhằm mở rộng khả năng tái sử dụng widget trong nhiều ứng dụng khác nhau (Jin Yu [14]). Các thành phần trong biểu diễn phối hợp được thể hiện trong Hình 4-10. Hình 4-10: Các thành phần trong biểu diễn phối hợp Mỗi biểu diễn về mối quan hệ phối hợp giữa hai widget được đặc tả bởi thành phần Listener, với cấu trúc được trình bày trong Bảng 4-16. 59 Thuộc tính Mô tả Publisher Định danh (id) của widget phát ra sư kiện SourceEvent Tên sự kiện được phát ra bởi Publisher Subscriber Định danh (id) của widget đăng ký xử lý sự kiện Operation Thao tác của Subsriber được thực hiện DestinationEvent Biểu diễn mở rộng trong mô hình của Jin Yu[14], cho phép thực hiện cơ chế lan truyền sự kiện giữa các widget Thành phần con (ý nghĩa các thành phần sẽ được mô tả chi tiết ở phần đề xuất biểu diễn mở rộng 4.2.2) Mapping Biểu diễn ánh xạ thành phần tham số sự kiện vào tham số của thao tác ParamGroup Biểu diễn gom nhóm tham số tự động Bảng 4-16: Các thành phần trong mối quan hệ phối hợp (Listener)  Ví dụ: biểu diễn phối hợp giữa widget hiển thị danh sách địa điểm và widget bản đồ được thể hiện như sau: <listener xmlns=“” publisher=“locationwidget” event=“LocationSelectionChanged” subscriber=“mapwidget” operation=“setCenter “/> Khi người dùng chọn một địa điểm, sự kiện LocationSelectionChanged được phát ra và kích hoạt thao tác showLocation của widget bản đồ. Trong Hình 4-10, các thành phần: thuộc tính DestinationEvent trong Listener, ActionTimerListener, JavascriptAdapterListener, EventExplorerListener, ParamGroup, Mapping là các biểu diễn mở rộng được luận văn đề xuất nhằm khắc phục các hạn chế về khả năng phối hợp trong các phương pháp của Jin Yu (xem mục 3.3), IBM iWidget (mục 3.4). Phần tiếp theo sẽ trình bày chi tiết về đặc tả biểu diễn trong các thành phần này. 60 4.2.2 Một số đề xuất biểu diễn mở rộng khả năng phối hợp 4.2.2.1 Biểu diễn lan truyền sự kiện Biểu diễn này mở rộng khả năng phối hợp trong mô hình đề xuất của Jin Yu [14] và có ý nghĩa tương đương với sự kiện được khai báo đồng thời là Published và Handled trong IBM iWidget [26]. Biểu diễn nhằm bổ sung thêm khả năng phối hợp khi sự kiện xảy ra trên widget này, sự kiện thuộc về widget khác sẽ được kích hoạt theo. Để biểu diễn mối quan hệ này, ta thay thế thuộc tính Operation trong Listener bằng DestinationEvent.  Ví dụ: Đặc tả biễu diễn phối hợp dựa trên sự kiện. <ActionTimerListener Publisher=“timer1” SourceEvent=“Tick” Subscriber=“stock1” DestinationEvent=“stockChanged”/> Trong ví dụ trên, định thời, sự kiện Tick ở widget timer1 sẽ được phát ra và kích hoạt sự kiện stockChanged bên phía widget stock1. Tham số định thời (interval) sẽ được cấu hình trong thành phần tham số cấu hình hoạt động (User Preferences) của widget nguồn timer1. 4.2.2.2 Ánh xạ thành phần tham số Biểu diễn đề xuất này cho biết thành phần nào trong cấu trúc tham số sự kiện (event data) phía widget nguồn (widget phát sự kiện) sẽ được gán cho đối số nào bên thao tác (operation) ở phía widget nhận. Biểu diễn này cho phép khai báo tùy ý số lượng và thứ tự tham số bên phía widget nguồn và nhận; từ đó hạn chế sự phụ thuộc chặt về tham số truyền giữa các widget, mở rộng khả năng kết buộc trễ (late binding), giúp cho khả năng tích hợp linh hoạt và dễ mở rộng hơn. Mỗi ánh xạ sẽ được biểu diễn bởi thành phần Mapping với cấu trúc được mô tả trong Bảng 4-17. 61 Thuộc tính Mô tả ParamName Tên thành phần trong tham số sự kiện truyền InputName Tên tham số nhận do thao tác khai báo Bảng 4-17: Các thành phần trong biểu diễn ánh xạ tham số (Mapping)  Ví dụ: khi sự kiện LocationSelectionChanged xảy ra trên widget nguồn (locationwidget), các thành phần lng, lat trong mảng tham số sự kiện truyền sẽ được ánh xạ vào các đối số lng, lat trong thao tác setCenter phía widget nhận (mapwidget). Phối hợp này được đặc tả như sau: <Listener Publisher=“locationwidget” SourceEvent=“LocationSelectionChanged” Subscriber=“mapwidget” Operation=“setCenter”> 4.2.2.3 Gom nhóm tham số tự động Trong trường hợp thao tác (operation) bên widget nhận chỉ chấp nhận tham số thuộc kiểu cấu trúc (đã mô tả trong Structures), đề xuất cũng cung cấp biểu diễn cho phép gom nhóm các thành phần trong cấu trúc tham số sự kiện để tạo thành kiểu cấu trúc phù hợp với đối số đầu vào (input) trong thao tác. Mỗi biểu diễn gom nhóm tham số được mô tả bằng thành phần ParamGroup với cấu trúc được trình bày trong Bảng 4-18. Thuộc tính Mô tả Name Tên của tham số cấu trúc được tạo ra DataType Tên kiểu dữ liệu kết quả của quá trình gom nhóm Thành phần con Mapping Biểu diễn ánh xạ thành phần tham số sự kiện vào thành phần trong cấu trúc cần tạo Bảng 4-18: Các thành phần trong biểu diễn gom nhóm tham số (ParamGroup) 62  Ví dụ: Giả sử thao tác setCenter trong widget bản đồ có tham số đầu vào thuộc kiểu cấu trúc GLatLng được khai báo như sau: function setCenter ( centerPoint : GLat_Lng { Lat : Number, Lng : Number } ) Việc gom nhóm tham số được biểu diễn như sau: <Listener Publisher=“locationwidget” SourceEvent=“LocationSelectionChanged” Subscriber=“mapwidget” Operation=“setCenter”> <!-- sau khi tạo xong kiểu cấu trúc sẽ ánh xạ kết quả tham số cấu trúc vào Input của Operation --> Mỗi thẻ ParamGroup biểu diễn cho một biến cấu trúc được tạo với kiểu được mô tả trong thuộc tính DataType. Trong ví dụ trên: ta tạo ra một biến cấu trúc với tên MyNewParam và kiểu là GLatLng. Biến cấu trúc sẽ bao gồm 2 thành phần Lat, Lng (được xác định bởi thuộc tính InputName). Giá trị trong mỗi thành phần sẽ được lấy từ các thành phần Lat, Lng trong tham số sự kiện LocationSelectionChanged. Kết quả của biến cấu trúc MyNewParam sẽ được ánh xạ vào đối số centerPoint của thao tác setCenter. 63 4.3 Mô hình biểu diễn Mashup Canvas Mashup Canvas đóng vai trò là container chứa các widget được sử dụng trong ứng dụng và sự phối hợp giữa các widget. Mashup Canvas cũng chính là biểu diễn ở mức trừu tượng của trang Web kết quả. Mô hình biểu diễn các thành phần trong Mashup Canvas được minh họa trong Hình 4-11. -ID -CanvasWidth -CanvasHeight -PublishedUrl MashupCanvas -Widget Array Layout -Listener Array EventListeners Hình 4-11: Các thành phần trong MashupCanvas Hai thành phần chính trong biểu diễn Mashup Canvas bao gồm:  Layout: mô tả tập hợp widget thể hiện giao diện trong ứng dụng kết quả.  Event Listeners: mô tả sự phối hợp hoạt động giữa các widget Các thành phần thuộc tính, Layout, EventListener được mô tả trong Bảng 4-19. Thuộc tính Mô tả Id Định danh của Canvas CanvasWidth Chiều rộng vùng thể hiện của Canvas CanvasHeight Chiều cao vùng thể hiện của Canvas PublishedUrl Địa chỉ của trang Web phát sinh từ Canvas sau khi tổng hợp Thành phần con Layout Khai báo các widget được sử dụng trên Canvas Event Listeners Khai báo các mối quan hệ phối hợp giữa các widget tồn tại trên Canvas Bảng 4-19: Các thành phần trong Mashup Canvas 64  Ví dụ: Biểu diễn Mashup Canvas bao gồm:  Layout: bao gồm 2 widget(widget hiển thị địa điểm, widget bản đồ)  Event Listeners: bao gồm 1 Listener mô tả sự phối hợp: khi chọn một địa điểm trong danh sách, vị trí địa điểm sẽ được hiển thị trực quan lên bản đồ. Chi tiết về đặc tả Mashup Canvas này được mô tả như sau: <MashupCanvas CanvasWidth=“100%” CanvasHeight=“100%” PublishedUrl=“”> <widget id=“Locationwi