Báo cáo toàn văn Kỷ yếu hội nghị khoa học lần IX Trường Đại học Khoa học Tự nhiên, ĐHQG-HCM VII-O-2 MƠ HÌNH CHUYỂN ĐỔI BÁN TỰ ĐỘNG GIAO DIỆN TĨNH WEB SILVERLIGHT 5.0 SANG ANDROID 4.2 DỰA TRÊN GIẢI PHÁP TRANUI Nguyễn Đức Huy, Nguyễn Văn Vũ, Trần Minh Triết Khoa Công Nghệ Thông Tin, Trường Đại Học Khoa Học Tự Nhiên, ĐHQG-HCM Email: {ndhuy,nvu,tmtriet}@fit.hcmus.edu.vn TÓM TẮT Nội dung báo trình bày mơ hình chuyển đổi bán tự động giao diện tĩnh trang Web xây dựng công nghệ Microsoft Silverlight 5.0 sang giao diện ứng dụng tảng Android 4.2 thiết bị di động Dựa giải pháp TranUI, nhóm tác giả xây dựng mơ hình giao diện công nghệ MS Silverlight 5.0 Android 4.2, mơ hình chuyển đổi tổng qt (CUI) giao diện nên tảng Bên cạnh đó, để thực việc chuyển đổi, nhóm tác giả đề xuất chuyển tập luật thực việc chuyển đổi mơ hình Từ khóa: RIA, MDD, MBUID, Tranformation Modeling, User Interface, Silverlight, Android UI GIỚI THIỆU Với phát triển Internet toàn giới ngày nay, hoạt động hàng ngày người trao đổi thông tin, liên lạc, làm việc, tìm kiếm thơng tin… thực mơi trường mạng Từ đó, ứng dụng web với việc hỗ trợ giao diện thân thiện gần gũi với người dùng gần thay ứng dụng desktop Bên cạnh đó, phát triển cơng nghệ RIA (Rich Internet Application) mang lại sức mạnh cho ứng dụng web RIA – Rich Internet Application1 ứng dụng web mang nhiều đặc điểm ứng dụng desktop Cơ chế hoạt động RIA thường giao tiếp trình duyệt web, thơng qua plugin, vùng độc lập website (sandbox), đoạn mã Javascript máy ảo (virtual machine) riêng tảng RIA cụ thể Giai đoạn năm 2007 – 2008 thời điểm phát triển mạnh mẻ ứng dụng RIA Điển hình hướng công nghệ tảng Adobe Flash/Flex, Microsoft Silverlight JavaFX Bên cạnh đó, Ngồi ra, theo số liệu thống kê Wikimedia IDC vào năm gần (đặc biệt từ 2010 2013) công nghệ di động truyền thông phát triển mạnh mẽ Cùng với phát triển công nghệ di động đem đến tiện lợi cho người dùng cuối với tính linh động tiện dụng chúng Số lượng người sử dụng thiết bị di động năm gần tăng mạnh Doanh số bán số truy cập vào internet từ thiết bị di động hẳn máy tính cá nhân (laptop desktop) Từ đó, nhu cầu ứng dụng tảng di động ngày tăng nhanh Hình 1là thể nhu cần cần chuyển đổi ứng dụng thống có tảng Web sang ứng dụng tảng di động Mặc dù thiết bị di động có trình duyệt web cho phép người dùng cuối thao tác với ứng dụng web Facebook, Youtube, GMail… Nhưng ứng dụng web chưa tận dụng hết ưu điểm thiết bị di động như: đồng hóa danh bạ với ứng dụng Gmail, tự động thơng báo có mail mới… Vì vậy, nhà phát triển hướng đến việc xây dựng riêng ứng dụng tảng di động khác cho hệ thống Hình Giao diện ứng dụng FaceBook Gmail Web, iOS Android Tuy nhiên, chi phí để phát triển ứng dụng nhiều tảng di động khác lớn Đặc biệt, trình chuyển đổi giao diện tảng tốn thời gian chi phí để đảm bảo giữ nguyên thông số thành phần giao diện.Bảng bảng khảo sát thông kê chi phí phát triển dự án ứng RIA – Rich Internet Application: http://en.wikipedia.org/wiki/Rich_Internet_application ISBN: 978-604-82-1375-6 10 Báo cáo toàn văn Kỷ yếu hội nghị khoa học lần IX Trường Đại học Khoa học Tự nhiên, ĐHQG-HCM dụng di động cụ thể (thường phát triển tảng iOS trước) sau chuyển đổi sang tảng di động khác như: Android, Windows Phone, … từ doanh nghiệp phần mềm Việt Nam Bảng Bảng khảo sát chi phí phát triển chuyển đổi tảng thiết bị di động công ty phần mềm Việt Nam năm 2013 KMS Gameloft Gameloft Gameloft Gameloft Gameloft Gameloft Gameloft VNG 10 VNG 11 VNG Quá trình chuyển đổi tản Thời Số nhân Ứng dụng Số nhân Nền tảng Thời gian Nền tảng gian/nền lực/nền Số thiết bị lực tảng tảng Empire Suite iOS > năm 10 iOS, >2 năm 3–4 (iOS), Android (Android) Asphat iOS tháng – 30 Android – tháng 5–6 57 năm Modern iOS tháng – 30 Android – tháng 5–6 57 Combat năm Real Football iOS tháng – 30 Android – tháng 5–6 57 2013 năm Miami J2ME tháng 10 J2ME, 1.5 – 2.5 20 246 Vindication Brew, BB tháng OS Zombie J2ME tháng 10 J2ME, 1.5 – 2.5 20 246 Infection Brew, BB tháng OS Sally's Studio J2ME tháng 10 J2ME, 1.5 – 2.5 20 246 Brew, BB tháng OS Skeeball J2ME tháng 10 J2ME, 1.5 – 2.5 20 246 Brew, BB tháng OS Thế giới Android tháng Android, tháng – 1–1–1 5–3–2 phim iOS, BB tháng – 10 tháng Heo bắn bóng iOS tháng iOS, tháng – 1–1 3–5 Android tháng Đọc tin Android tháng Android tháng 12 VNG Trùm bắn ca Q trình phát triển Stt 13 Cơng ty VNG Tơi Design iOS Ios tháng iOS tháng tháng iOS tháng Qua bảng thống kê (Bảng 1), cho thấy chi phí chuyển đổi tháng ứng với tảng cần phải có từ đến lập trình viên làm việc tảng (chi phí chưa tính đến nguồn nhân lực thiết kế đồ họa) Thực tế cho thấy nhu cầu việc chuyển đổi ứng ứng dụng cần thiết Bên cạnh đó, với thời gian dài phát triển ứng dụng RIA[1][2][3], số lượng ứng dụng tảng lớn Tuy nhiên, tảng RIA tiêu tốn nhiều lượng thiết bị client nên số tảng di động không cho dạng ứng dụng RIA họat động Vì thế, nhu cầu cần chuyển đổi ứng dụng tảng RIA sang ứng dụng thiết bị di động cần thiết Xuất phát từ nhu cầu cần chuyển đổi ứng dụng RIA (cụ thể Microsoft Silverlight) tồn sang tảng thiết bị di động, nhằm giảm thiểu chi phí q trình chuyển đổi cơng nghệ, nhóm nghiên cứu tập trung giải vấn đề sau: (1) xây dựng mơ hình chuyển đổi tảng trung gian CUI cho tảng Microsoft Silverlight 5.0 Android 4.2, (2) mơ hình hóa thành phần giao diện Microsoft Silverlight 5.0 Android 4.2, (3) xây dựng tập luật chuyển đổi giữa mơ hình trên, (4) thực nghiệm chuyển đổi giao diện ứng dụng cụ thể Để giải vấn đề trên, dựa kết nghiên của giải pháp TranUI [27] mà nhóm thực trình bày hội FAIR 2014 Đại học Thái Nguyên Cơ sở lý thuyết cơng trình liên quan ISBN: 978-604-82-1375-6 11 Báo cáo toàn văn Kỷ yếu hội nghị khoa học lần IX Trường Đại học Khoa học Tự nhiên, ĐHQG-HCM Để thực đề tài, nhóm nghiên cứu vấn đề mơ hình hóa phần mềm, đặc biệt hướng tiếp cận mơ hình hóa giao diện phần mềm Đề tài tập trung vào việc nghiên cứu chuyển đổi mơ hình giao diện UI (User Interface) [7][8][9] dựa vào phương pháp MDD (Model Driven Development), MDA (Model Driven Architecture), MBUID (Model-Based User Interface Development) kết hợp với hướng nghiên cứu OOHDM (Object-Oriented Hypermedia Design Method) hướng nghiên cứu cải tiến OOH4RIA (Object-Oriented Hypermedia fof Rich Internet Application) Hƣớng tiếp cận MDA (Model – Driven Architecture) MDA (Model – Driven Architecture)[4] phương pháp tiếp cận thiết kế xây dựng kiến trúc hệ thống theo phương pháp mơ hình, tổ chức OMG đề xuất vào năm 2000 Hướng tiếp cận dựa thành phần đặc trưng hệ thống cần có MDA đề xuất mơ hình mức độ phục thuộc: CIM – Computation Independent Model - mơ hình độc lập tính tốn, PIM – Platform Independent Model - mơ hình độc lập tảng, PSM – Platform Specific Model - mơ hình phụ thuộc tảng Để định nghĩa cấu trúc lưu trữ mơ hình phụ thuộc, MDA đề xuất kiến trúc MOF[5] Kiến trúc MOF Metadata[17] phân thành tầng thiết kế, dựa quan điểm đề xuất kiến trúc lưu trữ Metadata truyền thống: M3 layer - MOF Model: mô hình hướng đối tượng, M2 layer – Metamodel: tầng không cố định kiến trúc metadata MOF, M1 layer – Model: tập hợp metadata, không thiết bị giới hạng meta-layer, M0 layer: tầng thể cụ thể cấu trúc mơ hình cụ thể tảng Hƣớng tiếp cận MBUID (Model – Based User Interface Development) MBUID[6]cũng phương pháp luận thiết kế giao diện phần mềm theo hướng mô hình Hệ thống được phát triển dự thiết kế loại mơ hình Các loại mơ hình đưa theo mức trừu tượng có chuyển đổi qua loại mơ hình để phát sinh code phụ thuộc vào tảng tương ứng Điểm khác biệt MDD MBUID MBUID khơng có khái niệm Metamodel Do đó, model MBUID xây dựng có tính chất hình thức Việc chuyển đổi mơ hình MBUID thực theo phương pháp thủ công, dùng template mẫu luật tính chất linh động Có nhiều nhóm nghiên cứu MBUID, chưa có chuẩn thống chung Dưới số phương pháp ký hiệu mơ hình nhóm nghiên cứu đạt kết tốt phổ biến Về phân loại mơ hình có phương pháp phân loại theo mức độ trù tượng[18][19] phân loại mơ hình theo chức Phương pháp phân loại theo mức độ trừu tượng[18][19] định nghĩa loại mơ hình: Task Model, AUI – Abstract User Interface với công cụ hỗ trợ UsiXML[20], CUI – Concrete User Interface với công cụ hỗ trợ Teresa XML[21], FUI – Final User Interface – code giao diện tản cụ thể Phương pháp phân loại theo chức định nghĩa nhóm mơ hình là: nhóm với mơ hình Data model, Domain model Application model với công cụ hỗ trợ SEESCOA[22], nhóm với mơ hình Dialog model Presentation model Bên cạnh đó, MBUID đề xuất nhiều qui trình phát triển chuyển đổi khác như: qui trình tổng quát[19] đề xuất vào năm 1996, qui trình CAMELEON Framework[23][24] đề xuất năm 2001, qui trình TERESA XML[21], qui trình UsiXML[20] đề xuất năm 2005 qui trình MANTRA[25] đề xuất năm 2006 Đa phần hướng nghiên cứu mơ hình hóa giao diện người dùng, sử dụng qui trình để thực việc mơ hình hóa Tuy nhiên có nhiều nhóm cơng bố qui trình kèm cơng cụ hỗ trợ, có nhóm cơng bố qui trình, khơng cơng bỗ cơng cụ hỗ trợ nên gặp nhiều khó khắn việc việc so sánh kiểm chứng qui trình Nhưng đa phần hướng nghiên cứu đề phát triển dựa qui tổng qt Do đó, đề tài chúng tơi sử dụng qui trình để thực đề tài nghiên cứu Hƣớng nghiên cứu OOHDM (Object – Oriented Hypermedia Design Method) OOHDM (Object-Oriented Hypermedia Design Method)[9][10][11] phương pháp thiết kế giao diện cho dạng ứng dụng siêu truyền thông (hypermedia) theo hướng đối tượng nhúng vào web Hướng nghiên cứu đề xuất vào năm 1995 OOHDM mơ hình tảng cho việc xây dựng ứng dụng Hypermedia lớn Nó sử dụng để thiết kế nhiều loại ứng dụng khác như: website, hệ thống thông tin, Kiosk tương tác, ứng dụng trình diễn truyền thơng đa truyền thơng… OOHDM gồm cụ thể: Conceptual design: thiết kế khái niệm, Navigational design: thiết kế định hướng, Abstract Interface Design: thiết kế giao diện mức trừu tượng, Implementation: thực hóa.Các thành phần giao diện nguyên thủy chia thành đối tượng Và điều linh động dễ dàng việc thiết kế cập nhật/thay đổi mơ hình giao diện ứng dụng Ngồi với tính chất thiết kế hướng đối tượng chia thành mơ hình OOHDM tách biệt chuyên biệt hóa chức giao diện Từ đó, việc tái sử dụng thành phần thiết kế giao diện trước dễ dàng Hƣớng nghiên cứu OOH4RIA (Object Oriented Hypermedia design method for Rich Internet Application) OOH4RIA[12][13] phương pháp luận thiết kế mơ hình hóa ứng dụng tảng RIA – Rich Internet Application dựa phương phương pháp OOHDM kết hợp với thư viện GWT – Google Web Toolkit Google Phương pháp luận nhóm tác giả Tây Ban Nha đề xuất vào năm 2008 Bên cạnh đó, ISBN: 978-604-82-1375-6 12 is approach, this paper establishes the different screenshots of the model n development process presentation Báo cáo toàn văn KỷAfter yếu hộiobtaining nghị khoa học IX Trường Đại học Khoa họcofTựthe nhiên, ĐHQG-HCM GWT Mail Application thelầncontainer screenshots overview of the process presentation model, the User Interface designer OOH4RIA thừa kế phương pháp chuyển đổi MDA để thực phép chuyển mơ hình ic SPEM notation The completes them placing the widgets, defining the đổi style như: PIMToPIM, PIMToPSM, PIMToCode, PSMToCode… OOH4RIA định nghĩa loại mơ hình sau: different artefacts of this and establishing the spatial configuration by means of OOH Domain Model - mơ hình miền ứng dụng, Navigation Model - mơ hình chuyển hướng, Orchestration the OOH domain Panels It hợp is worth pointing out that these canhình giao diện theo Modeland skeleton - Mơ hình phối theo mẫu skeleton, Presentation Model widgets skeleton - Mô mẫu skeleton, Orchestration Model Mơ hình phối hợp, Presentation Model Mơ hình giao the RIA server side In be related to a navigational element thereby showingdiện Bên cạnh đó, nhóm tác giả cịn đề xuất quy trình phát triển hệ thống ứng dụng theo phương pháp luận OOH4RIA(Error! the main contribution of the dynamic content coming from the server side into Reference source not found.) gồm có giai đoạn: OOH Designer – thiết kế đối tượng OOH, Model tation and orchestration theđổi user Transformer – chuyển mô interface hình, UI Designer – thiết kế giao diện người dùng, Orchestration Designer – thiết kế mơ hình phối hợp hoạt động defined, we propose the mation models used for Model-Driven Development Process of OOH4RIA we can see in section Orchestration Model UI Designer OOH Designer Designer Transformer ine the relevant related earch evelopment process en development process complete Rich Internet the extension of the es like OOH with two which will be introduced Define OOH Domain Model Define OOH OOH Navigational OOH Navigation Model Domain Model Model Orchestation Model skeleton Pres&Nav2Orch Define Complete Orchestation Model Nav2Pres Presentation Model skeleton Define Presentation Orchestation Complete Model Model Presentation Model esentation of the modelith definition of models rmit to obtain a RIA GWT Server side proposed by the OMG s process This diagram es specific for modelGWT Client side n actor stereotype able to Rich Internet engine called Model application et of stereotypes of the Figure The model-driven Hình Quy1 trình phát OOH4RIA triển hệ thống RIA với OOH4RIA[12] esent different MDA Trong đó, giai đoạn OOH Designer, UI Designer, Orchestration development process Designer cần có can thiệp MToPIM, PIMToPSM, người Chỉ có q trình Model Transformer để thực phép chuyển đổi PIMToPSM cho Nav2Orch, PIMToPSM cho Nav2Pre PIMToCode cho GWT Server side PSMToCode cho GWT Client Since the cuối RIA side thực tự động Đích cùngpossesses quy trìnhanàyrich mộtinteractive ứng dụng RIA user hoàn chỉnh Cũng OOH designer năm defining 2008 nhóm tácinterface giả công bố mộtto nghiên cứu sử dụng OOH4RIA để thực chuyển đổi tầng giao similar desktop applications, we must ứng dụng RIA[1] Trong báo này, tác giả trình bày thực nghiệm ứng dụng OOH4RIA represent the diện domain complete the static features of widgets with a model thư this viện hỗ trợ[26] để tổng quát hóa chuyển đổi tần giao diện ứng dụng RIA etween them From that will allow us to specify the interaction between Giải pháp TranUI presents the navigation these widgets and the rest of the system This model tảng nghiên cứu mơ hình trên, đặc biệt khuyết điểm phức tạp hướng ts and establishes Dựa thetrên has beenđãcalled andđổiisbán represented nghiên cứu OOH4RIA, nhóm đề xuất orchestration giải pháp thựcmodel chuyển tự động giao diện tĩnh g the navigationcủamodel as sáng a UML of dụng state machine Theđược xây dựng dựa ứng dụng RIA giao diệnprofile ứng di động với tên gọidiagram TranUI TranUI OOH models begins cácthe khái niệm hướng nghiên cứu MBUID Giải pháp pháp TranUI đề xuất qui trình orchestration model does not have to be defined from constitutes the main (Hình Qui scratch trình chuyển đổi giải pháp TranUI) thực xây dựng hệ thống because a model-to-model transformation chuyển đổi gồm thành phần sau: called Pres&Nav2Orch allows us to obtain the – Web User Interface model: mã nguồn đặc tả giao diện website tảng công intoWebUI the modelskeleton of the orchestration model from the navigation nghệ RIA vigation model ns of the PIM2PSM and presentation models Pres This presentation The model-to-model transformation starts by ISBN: 978-604-82-1375-6 for the GWT platform establishing the screenshots behavioural states and he different widgets that their transitions from the navigational nodes and the he Nav2Pres is a modelassociations respectively It also defines the widget efined in QVT that behavioural states corresponding to the widgets 13 Báo cáo toàn văn Kỷ yếu hội nghị khoa học lần IX Trường Đại học Khoa học Tự nhiên, ĐHQG-HCM CUI model – Concrete User Interface model: mơ hình mơ tả giao diện cụ thể độc lập với tảng (đây mơ hình chuyển đổi trung gian) FUI model – Final User Interface model: mơ hình mã nguồn tảng Model tương ứng Web2CUI Transformer – Web to CUI transformer: bước chuyển đổi từ mơ hình mã nguồn giao diện Web sang mơ hình mơ tả giao diện CUI2FUI Transformer – CUI to FUI transformer: bước chuyển đổi từ mơ hình mơ tả giao diện sang mã nguồn tảng WebUI2CUITransformer WebUI model CUI model FUI model CUI2FUITransformer Hình Qui trình chuyển đổi giải pháp TranUI Đề xuất giải pháp mơ hình Dựa giải pháp chuyển đổi TranUI, nhóm tác giả thực xây dựng mơ hình chuyển đổi bán tự động giao diện tĩnh ứng dụng Microsoft Silverlight 5.0 sang giao diện ứng dụng di động Android 4.2 Để thực việc chuyển đổi này, nhóm xây dựng qui trình chuyển đổi Hình mơ hình giao diện tập luật chuyển đổi Silverlight WebUI Model CUI Model Android FUI Model Hình Áp dụng qui trình chuyển đổi TranUI cho tảng Microsoft Silverlight 5.0 Android 4.2 Theo khảo sát thống kê, cấu trúc mã XAML công nghệ Microsoft Silverlight cấu trúc đặc tả giao diện Android XML dựa cấu trúc ngữ pháp XML Hai tảng có nhiều điểm tương đồng nên cấu trúc thành phần giao diện nên chuyển đổi Chúng thực thử nghiệm tảng Để thực theo bước quy trình TranUI đề xuất, chúng tơi xây dựng mơ hình Silverlight WebUI, CUI (dùng chung) Android FUI Để thực chuyển đổi mơ hình này, chúng tơi xây luật chuyển đổi Các phần chương trình bày chi tiết khảo sát cơng nghệ thức xây dựng mơ hình luật chuyển đổi toàn hệ thống Kiến trúc mơ hình WebUI Microsoft Silverlight 5.0 Khảo sát đặc điểm control giao diện Theo khảo sát thực tế, tính đến thời điểm tháng năm 2013, Microsoft Silverlight version 5.0 hỗ trợ 34 control với 181 loại thuộc tính Nhưng để thỏa mãn tính khả chuyển đổi đối tượng tương thích (trong thời gian nghiên cứu phát triển luận văn) thực chuyển đổi control sau: Button, Canvas, CheckBox, ComboBox, DatePicker, Image, Label, ListBox, PasswordBox, ProgressBar, RadioButton, ScrollViewer, TextBox, Slider ISBN: 978-604-82-1375-6 14 Báo cáo toàn văn Kỷ yếu hội nghị khoa học lần IX Trường Đại học Khoa học Tự nhiên, ĐHQG-HCM Dựa đặc thù control này, chúng tơi mơ hình hóa thành Metamodel SliverlightWebUI (sẽ trình bày phần tiếp theo) Số control cịn lại, tính chất đặc thù phức tạp thương tích với dạng ứng dụng web nên chưa thể thực chuyển đổi Chúng có nghiên cứu giải pháp cài đặt control tương ứng cho tảng di động Ví dụ: cài đặt control TreeView cho tảng Android để chuyển đổi control TreeView từ Silverlight sang Android Nhưng phạm vi giới hạn thời gian hồn thành luận văn khơng cho phép nên không thực phương pháp để hỗ trợ chuyển đổi đầy đủ control Silverlight để đảm bảo tính đầy đủ tính đắng trình chuyển đổi Kiến trúc Microsoft Silverlight WebUI Trong phần này, chúng tơi trình bày kiến trúc Silverlight WebUI xây dựng Hình Đây kiến trúc mơ hình Microsoft Silverlight sử dụng để đọc cấu trúc tài liệu giao diện XAML làm đầu vào hệ thống Hình Kiến trúc mơ hình Silverlight WebUI Kiến trúc mơ hình Android FUI Android 4.2 Khảo sát đặc điểm Control giao diện Android Theo khảo sát thực tế, tính đến thờ điểm tháng năm 2013, Android version 4.2 hỗ trợ 84 control Trong có control trùng lắp mặt thể hiện, ví dụ: Password PasswordNumber Android Như nhóm control dạng gom nhóm lại Bên cạnh đó, số lượng control nhiều có control mang tính chất đặc thù riêng Android FrameLayout Những dạng control hồn tồn khơng thể chuyển đổi Do vậy, luận văn này, thực chuyển đổi control sau: TextView, EditText, Button, CheckBox, RadioButton, ToggleButton, Switch, ProgressBar, Slider, RatingBar, DropDown, DatePicker, TimePicker, ListView, ImageView, ScrollView, LinearLayout, RelativeLayout, TableLayout Kiến trúc Android FUI Kiến trúc Android FUI thể Hình Theo kiến trúc này, xác định thành phần chuyển đổi ISBN: 978-604-82-1375-6 15 Báo cáo toàn văn Kỷ yếu hội nghị khoa học lần IX Trường Đại học Khoa học Tự nhiên, ĐHQG-HCM Hình Kiến trúc mơ hình Android FUI Với kiến trúc mơ hình Android FUI này, chúng tơi xây dựng cấu trúc phát sinh mã nguồn XML giao diện tảng Android Nhưng tùy thuộc vào version Android nên tập luật cú pháp thay đổi Do vậy, để sử dụng cho version khác tảng Android, cần phải xây dựng lại cấu trúc phát sinh mã Và để đảm bảo cú pháp phát sinh mã Android XML với kết hiển thị, xây dựng cú pháp kiểm tra XSD Ứng với control có file XSD để kiểm tra làm mẫu phát sinh tag xml cho giao diện Android tương ứng Hình cấu trúc XSD để phát sinh tag Android XML control Button Android FUI Dựa vào XSD này, hệ thống phát sinh code Android XML tương ứng, đảm bảo tính đắn mặt cú pháp Android XML Hình Cấu trúc XSD control Button Android FUI Mơ hình CUI trung gian giải pháp TranUI Trong quy trình TranUI, phần quan trọng CUI Model Đây mơ hình định thiết kế thành phần giao diện Web tảng RIA giữ chuyển đổi sang tảng thiết bị di động Đây mơ hình trung gian để định thông số thành phần giao diện nạp vào hệ thống từ WebUI chuyển đổi qua FUI tảng di động tương ứng ISBN: 978-604-82-1375-6 16 Báo cáo toàn văn Kỷ yếu hội nghị khoa học lần IX Trường Đại học Khoa học Tự nhiên, ĐHQG-HCM Hình Kiến trúc CUI giải pháp TranUI Để định nghĩa cho thành phần CUI, nhóm tác giả đề xuất cấu trúc thiết kế CUI (Hình 8) Trên mơ hình này, chúng tơi chia thành phần chính: ComponentUI: phần chứa thành phần giao diện có tính chất chứa đựng thành phần giao diện Để thực xây dựng kiến trúc phần này, đề xuất sử dụng mẫu Composite Design Pattern Để phân tiện lợi cho trình phát triển tái sử dụng sau, đề xuất kiến trúc tách thành phần khác nhau: LayoutCUI: nhóm thành phần hỗ trợ Layout (chia vùng) cho thành phần giao diện Theo khảo sát mơ hình Layout ứng dụng Adobe Flash/Flex, Microsoft Silverlight, JavaFX, Android, iOS, Windows Phone có loại layout đặc trưng là: Linear Layout, Relative Layout Grid Layout Trong mơ hình CUI đề xuất, chúng tơi mơ hình loại layout thành thành phần giao diện là: LinearLayoutCUI, RelativeLayoutCUI, GridLayoutCUI ContainerCUI: nhóm control: ComboBoxCUI, ListBoxCUI ScrollViewCUI Đây control có tính chất bao bọc/chứa thành phần giao diện khác bên SingleUI: qui định cấu trúc thành phần giao diện (control) đơn, khơng mang tính chất bao bọc như: TextBoxCUI, TextViewCUI, ImageViewCUI, ProgressBarCUI, CheckBoxCUI, RadioButtionCUI, DatePickerCUI, TimePickerCUI, SliderCUI, ButtonCUI Thành phần thuộc tính – Attribute: thành phần tổng hợp thuộc tính có thành phần giao diện (control) Thành phần định nghĩa từ file XSD Mỗi file XSD đặc tả cho control có cấu trúc tương tự (Hình 9) Hình Đặc tả cấu trúc XSD lưu trữ thông tin Control Button CUI Tập luật chuyển đổi WebUI2CUI CUI2FUI Để thực việc chuyển đổi mơ hình, chúng tơi đề xuất kiến trúc quản lý tập luật chuyển đổi Các tập luật bổ sung tùy biến tùy thuộc vào mục tiêu chuyển người dùng sử dụng áp dụng quy trình mơ hình cho tảng cụ thể ISBN: 978-604-82-1375-6 17 Báo cáo toàn văn Kỷ yếu hội nghị khoa học lần IX Trường Đại học Khoa học Tự nhiên, ĐHQG-HCM Hình 10 Kiến trúc mơ hình chuyển đổi WebUI2CUI Hình 10là kiến trúc mơ hình chuyển đổi WebUI2CUI (Hình 11) kiến trúc mơ hình chuyển đổi CUI2FUI Hai kiến trúc chuyển đổi mơ hình giống Chỉ khác phần quản lý tập luật (Rule Management) luật chuyển đổi (Rule) Các thành phần mơ hình gồm: Hình 11 Kiến trúc mơ hình chuyển đổi CUI2FUI Để thực lưu trữ luật chuyển đổi linh động dễ dàng cập nhật hay bổ sung trình hệ thống hoạt động, đề xuất phương pháp lưu trữ thành file định dạng xml.Hình 12 ví dụ việc lưu trữ luật chuyển đổi control/thành phần giao diện CheckBox từ CUI sang FUI tảng Android Các tag qui định việc ánh xạ tên thuộc tính CUI sang FUI chuyển đổi ISBN: 978-604-82-1375-6 18 Báo cáo toàn văn Kỷ yếu hội nghị khoa học lần IX Trường Đại học Khoa học Tự nhiên, ĐHQG-HCM Hình 12 Ví dụ lữu luật chuyển đổi từ CUI sang FUI Android Qua trình nghiên cứu chuyển đổi, nhóm tác giả thực chuyển đổi 15 thành phần giao diện (Control) thể qua Bảng Bảng Bảng chuyển đổi control mơ hình Microsoft Silverlight WebUI, CUI, Android FUI STT 10 11 12 13 14 15 Microsoft Silverlight WebUI TextBox TextView ImageView ProgressBar CheckBox RadioButton DatePicker TimePicker Slider Button ComboBox ListBox ScrollView LinearLayout RelativeLayout CUI TextBoxCUI TextViewCUI ImageViewCUI ProgressBarCUI CheckBoxCUI RadioButtonCUI DatePickerCUI TimePickerCUI SliderCUI ButtionCUI ComboBoxCUI ListBoxCUI ScrollViewCUI LinearLayoutCUI RelativeLayoutCUI Android FUI TextBox TextView ImageView ProgressBar CheckBox RadioButton DatePicker TimePicker Slider Button ComboBox ListBox ScrollView LinearLayout RelativeLayout Thực nghiệm Để thực nghiệm hệ thống chuyển đổi bán tự động này, nhóm nghiên cứu thực qua phương pháp Case-Study với ứng dụng chuyển đổi màng hình ứng dụng Skype màng hình Login ứng dụng FaceBook Ứng dụng Skype chat Hình 13 ứng dụng thực việc chuyển đổi giao diên khung chat Skype (được mô lại theo web Skype) Microsoft Silverlight 5.0 triển khai lên trình duyệt IE ISBN: 978-604-82-1375-6 19 Báo cáo toàn văn Kỷ yếu hội nghị khoa học lần IX Trường Đại học Khoa học Tự nhiên, ĐHQG-HCM Hình 13 Giao diện Skype chat Silverlight 5.0 Kết chuyển đổi Android 4.2 (Hình 14) Hình 14 Giao diện Skype chuyển đổi Android 4.2 Ứng dụng FaceBook Login Form Hình 15 giao diện ứng dụng Facebook Silverlight 5.0 Giao diện mô lại giao diện web Facebook ISBN: 978-604-82-1375-6 20 Báo cáo toàn văn Kỷ yếu hội nghị khoa học lần IX Trường Đại học Khoa học Tự nhiên, ĐHQG-HCM Hình 15 Giao diện ứng dụng FaceBook Login Silverlight 5.0 Và giao diện ứng dụng Facebook Login sau chuyển đổi sang tảng Android 4.2 (Hình 16) Giao diện chuyển đổi thơng qua hệ thống TranUI Các thành phần giao diện đảm bảo tính đắn giá trị thuộc tính (Attribute) tọa độ hiển thị Hình 16 Giao diện ứng dụng Facebook Login sau chuyển đổi sang Android 4.2 Kết luận hƣớng phát triển Trong đề tài, dựa kết nghiên cứu giải pháp TranUI [27] để xây dựng mơ hình trung gian CUI mơ hình hóa thành phần giao diện Microsoft Silverlight 5.0 WebUI Android 4.2 FUI Bên cạnh xây dựng tập luật chuyển đổi WebUI2CUI CUI2FUI Và hệ thống thực chuyển đổi 15 thành phần giao diện từ tảng Microsoft Silverlight 5.0 sang Android 4.2 Quá trình thực tự động với tiêu chí giải pháp TranUI đề đảm bảo tính đắng tính đầy đủ thành phần giao diện Hiện thực chuyển đổi tĩnh, đảm báo tính chất đầy đủ đắn mặt thông tin thành phần giao diện (control) Nhưng để đảm bảo tính chất đầy đủ đắn mặt thơng quy trình cịn hạn chế cịn nhiều control chưa thực chuyển đổi Sau hướng phát triển sau đề tài: ISBN: 978-604-82-1375-6 21 Báo cáo toàn văn Kỷ yếu hội nghị khoa học lần IX Trường Đại học Khoa học Tự nhiên, ĐHQG-HCM Thực chuyển đổi layout từ ứng dụng Web tảng RIA sang thiết bị di động Đối với hướng phát triển cần phải tập trung giải vấn đề độ phân giải tỷ lệ loại hình Web thiết bị di động hoàn toàn khác Áp dụng phương pháp thiết kế Responsive thiết web để hỗ trợ việc chuyển đổi giao diện gợi ý chuyển đổi giữ hủy bỏ thành phần giao diện Web khơng phù hợp thiết bị di động Tìm hiểu giải pháp để tăng độ phủ mặt chuyển đổi số lượng thành phần giao diện (control) ứng dụng Web tảng RIA sang thiết bị di động Về hướng phát triển cần phải nghiên cứu giải pháp cụ thể để tăng số lượng control chuyển đổi đa tảng Thực xử lý event thành phần giao diện TÀI LIỆU THAM KHẢO [1] Santiago Meliá, and Sven Casteleyn Irene Garrigós, "Adapting the Presentation Layer in Rich Internet Applications," in Eighth International Conference of Web Engineering, Yorktown Heights, USA, 2008 [2] A., Comai, S., Fraternali, P., Carughi, G.T Bozzon, "Conceptual Modeling and Code Generation for Rich Internet Applications," in 6th International Conference on Web Engineering, Palo Alto, California, USA, 2006 [3] J.M., Dietrich, J.B Wright, "Requirements for Rich Internet Application Design Methodologies," in Bailey, J., Maier, D., Schewe, K.-D., Thalheim, B., Wang, X.S (eds.) WISE 2008, vol 5175, 2008, pp 106–119 [4] Joaquin Miller and Jishnu Mukerji (2001, July) Model Driven Architecture (MDA) [Online] http://www.omg.org [5] OMG (2002) Meta Object Facility (MOF) Specification 1.4 [Online] http://www.omg.org/cgibin/doc?formal/2002-04-03 [6] Fabio Paternò, Model-Based Design and Evaluation of Interactive Applications.: Springer, 2000 [7] Fabio Paternò, "Model-based Tools for Pervasive Usability," Interacting with Computers, vol 17, no 3, pp 291 - 315, May 2005 [8] Hallvard Trætteberg, "Model-based User Interface Design," Department of Computer and Information Sciences, Norwegian University of Science and Technology, PhD Thesis 2002 [9] Daniel Schwabe* and Gustavo Rossi**, "Developing Hypermedia Applications using OOHDM ," in Proceedings of the ninth ACM Conference on Hypertext, Pittsburgh, 1998 [10] Rita de Almeida Pontes and Isabela Moura Daniel Schwabe*, "OOHDM-Web: An Environment for Implementation of Hypermedia Applications in the WWW," in ACM SIGWEB NEWSLETTER, vol 8, New York, NY, USA, 1999, pp 18 - 34 [11] Daniel Schwabe* and Gustavo Rossi**, "An Object Oriented Approach to Web-Based Application Design ," in Theory and Practice of Object Systems - Special issue objects, databases, and the WWW, vol 4, New York, NY, USA, 1998, pp 207 - 225 [12] Jaime Gómez, Sandy Pérez, Oscar Díaz Santiago Meliá, "A Model-Driven Development for GWT-Based Rich Internet Applications with OOH4RIA ," in ICWE '08 Proceedings of the 2008 Eighth International Conference on Web Engineering , Washington, DC, USA, 2008, pp 13-23 [13] Oscar Díaz, Santiago Meliá, Jaime Gómez Sandy Pérez, "Facing Interaction-Rich RIAs: the Orchestration Model ," in ICWE '08 Proceedings of the 2008 Eighth International Conference on Web Engineering, Washington, DC, USA , 2008, pp 24-37 [14] Jack Greenfield and Keith Short, "Software factories: assembling applications with patterns, models, frameworks and tools," Microsoft Corporation, Technical report 2004 [15] Janos Sztipanovits and Gabor Karsai, "Model Integrated Computing," in IEEE Computer, 1997, pp 110 112 [16] Grégoire Dupé, and Frédéric Jouaul Jean Bézivin, "First experiments with the ATL model transformation language: Transforming XSLT into XQuery," in 2nd OOPSLA Workshop on Generative Techniques in the context of Model Driven Architecture , Anaheim, California , 2003 [17] OMG, "Meta Object Facility (MOF) 2.0 Query/View/Transformation Specification," 2008 ISBN: 978-604-82-1375-6 22 Báo cáo toàn văn Kỷ yếu hội nghị khoa học lần IX Trường Đại học Khoa học Tự nhiên, ĐHQG-HCM [18] A.Leonardi F.Paterno’, "A Semantics-based Approach to the Design and Implementation of Interaction Objects ," in Computer Graphics Forum, vol 13, 1994 , pp 195-204 [19] Pedro Szekely, "Retrospective and Challenges for Model-Based Interface Development," in Design, Specification and Verification of Interactive Systems ’96, 1996, pp 1-27 [20] Jean Vanderdonckt, Benjamin Michotte, and Laurent Bouillon Quentin Limbourg, "USIXML: A Language Supporting Multi-path Development of User Interfaces ," in Engineering Human Computer Interaction and Interactive Systems , vol 3425 , 2005, pp 200 - 220 [21] Francesco Correani, Fabio Paterno, and Carmen Santoro Silvia Berti, "The TERESA XML Language for the Description of Interactive Systems at Multiple Abstraction Levels ," in Proceedings Workshop on Developing User Interfaces with XML: Advances on User Interface Description Languages , 2004, pp 103 - 110 [22] Kris Luyten, Chris Vandervelpen, Bert Creemers, and Jan Van Den Bergh Karin Coninx, "Dygimes: Dynamically Generating Interfaces for Mobile Computing Devices and Embedded Systems ," in HumanComputer Interaction with Mobile Devices and Services , vol 2795 , 2003, pp 256 - 270 [23] Gaëlle Calvary et al., "A unifying reference framework for multi-target user interfaces ," in Interacting with Computers , vol 15, 2003, pp 289 - 308 [24] J Coutaz, D Thevenin, L Bouillon, M Florins, Q Limbourg, N Souchon, J Vanderdonckt, L.Marucci, F.Paternò, C.Santoro G Calvary, "The CAMELEON Reference Framework ," UJF, UCL, CNUCE , September 3rd, 2002 [25] Goetz Botterweck, "A model-driven approach to the engineering of multiple user interfaces," , 2006, pp 106 - 115 [26] Jose-Javier Martínez, Sergio Mira, Juan Antonio Osuna, Jaime Gómez Santiago Meliá, "An Eclipse Plug-in for Model-Driven Development of Rich Internet Applications," in 10th International Conference, ICWE 2010, vol 6189, Vienna Austria, 2010, pp 514-517 [27] Nguyễn Đức Huy, Nguyễn Văn Vũ, Trần Minh Triết, "Một giải pháp chuyển đổi giao diện tĩnh Web RIA sagn giao diện di động", in FAIR 2014, Thái Nguyên, Việt Nam ISBN: 978-604-82-1375-6 23 ... Tự nhiên, ĐHQG-HCM Hình 13 Giao diện Skype chat Silverlight 5. 0 Kết chuyển đổi Android 4. 2 (Hình 14) Hình 14 Giao diện Skype chuyển đổi Android 4. 2 Ứng dụng FaceBook Login Form Hình 15 giao diện. .. tháng 5? ??6 57 20 1 3 năm Miami J2ME tháng 10 J2ME, 1 .5 – 2 .5 20 24 6 Vindication Brew, BB tháng OS Zombie J2ME tháng 10 J2ME, 1 .5 – 2 .5 20 24 6 Infection Brew, BB tháng OS Sally''s Studio J2ME tháng 10. .. pháp chuyển đổi TranUI, nhóm tác giả thực xây dựng mơ hình chuyển đổi bán tự động giao diện tĩnh ứng dụng Microsoft Silverlight 5. 0 sang giao diện ứng dụng di động Android 4. 2 Để thực việc chuyển