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

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 của bài báo sẽ trình bày mô hình chuyển đổi bán tự động giao diện tĩnh của các trang Web được
xây dựng bằng công nghệ Microsoft Silverlight 5.0 sang giao diện ứng dụng của nền tảng Android 4.2 trên các
thiết bị di động. Dựa trên giải pháp của TranUI, nhóm tác giả đã xây dựng 2 mô hình giao diện của công nghệ
MS Silverlight 5.0 và Android 4.2, mô hình chuyển đổi tổng quát (CUI) của các giao diện giữa các nên tảng
trên. Bên cạnh đó, để thực hiện việc chuyển đổi, nhóm tác giả đã đề xuất chuyển 2 tập luật thực hiện việc chuyển
đổi giữa các mô hình trên.
Từ khóa: RIA, MDD, MBUID, Tranformation Modeling, User Interface, Silverlight, Android UI.
GIỚI THIỆU
Với sự phát triển của Internet trên toàn thế giới ngày nay, các hoạt động của hàng ngày của con người như
trao đổi thông tin, liên lạc, làm việc, tìm kiếm thông tin… đều được thực hiện trên môi trường mạng. Từ đó, các
ứng dụng web với việc hỗ trợ giao diện thân thiện và gần gũi với người dùng đã gần như thay thế các ứng dụng
desktop. Bên cạnh đó, sự phát triển của công nghệ RIA (Rich Internet Application) càng mang lại sức mạnh hơn
cho các ứng dụng web. RIA – Rich Internet Application1 là một ứng dụng web mang nhiều đặc điểm của một
ứng dụng desktop. Cơ chế hoạt động của RIA thường là giao tiếp giữa các trình duyệt web, thông qua các plugin, các vùng độc lập trên website (sandbox), các đoạn mã Javascript hoặc các máy ảo (virtual machine) riêng của
từng nền tảng RIA cụ thể. Giai đoạn năm 2007 – 2008 là thời điểm phát triển mạnh mẻ nhất của các ứng dụng
RIA. Điển hình nhất trong hướng công nghệ này là các nền tảng Adobe Flash/Flex, Microsoft Silverlight và
JavaFX. Bên cạnh đó, Ngoài ra, theo số liệu thống kê của Wikimedia và IDC vào những năm gần đây (đặc biệt
là từ 2010 cho đến 2013) công nghệ di động và truyền thông phát triển mạnh mẽ. Cùng với sự phát triển của các
công nghệ di động đã đem đến sự tiện lợi cho người dùng cuối với tính linh động và tiện dụng của chúng. Số
lượng người sử dụng các thiết bị di động trong những năm gần đây tăng mạnh. Doanh số bán ra và số truy cập
vào internet từ các thiết bị di động đã hơn hẳn máy tính cá nhân (laptop và desktop). Từ đó, nhu cầu các ứng
dụng trên các nền tảng di động cũng ngày càng tăng nhanh.
Hình 1là thể hiện nhu cần cần chuyển đổi các ứng dụng trên thống đã có trên một nền tảng Web sang các

ứng dụng trên các nền tảng di động. Mặc dù các thiết bị di động đều có các trình duyệt web cho phép người dùng
cuối thao tác với các ứng dụng web như Facebook, Youtube, GMail… Nhưng ứng dụng web vẫn chưa tận dụng
hết các ưu điểm của các thiết bị di động như: đồng bộ hóa danh bạ với các ứng dụng Gmail, tự động thông báo
khi có mail mới… Vì vậy, các nhà phát triển đã hướng đến việc xây dựng riêng ứng dụng trên từng nền tảng di
động khác nhau cho hệ thống của mình.

Hình 1. Giao diện của ứng dụng FaceBook và Gmail trên nền Web, iOS và Android
Tuy nhiên, chi phí để phát triển các ứng dụng trên nhiều nền tảng di động khác nhau sẽ rất lớn. Đặc biệt,
quá trình chuyển đổi giao diện giữa các nền tảng sẽ rất tốn thời gian và chi phí để đảm bảo giữ nguyên các thông
số của các thành phần trên giao diện.Bảng 1 là bảng khảo sát và thông kê chi phí phát triển của một dự án ứng

1

RIA – 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 là phát triển trên nền tảng iOS trước) và sau đó chuyển đổi sang các nền tảng di
động khác như: Android, Windows Phone, … từ các doanh nghiệp phần mềm ở Việt Nam.
Bảng 1. Bảng khảo sát chi phí phát triển và chuyển đổi nền tảng trên thiết bị di động của các công ty phần mềm
Việt Nam trong năm 2013

1

KMS

2

Gameloft

3

Gameloft

4

Gameloft

5

Gameloft

6

Gameloft

7

Gameloft

8

Gameloft

9

VNG

10

VNG

11

VNG

Quá trình chuyển đổi nền 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
> 2 năm
10
iOS,
>2 năm
3–4
4 (iOS), 7
Android
(Android)
Asphat 8

iOS
9 tháng – 1
30
Android
4 – 5 tháng
5–6
57
năm
Modern
iOS
9 tháng – 1
30
Android
4 – 5 tháng
5–6
57
Combat 5
năm
Real Football
iOS
9 tháng – 1
30
Android
4 – 5 tháng
5–6
57
2013
năm
Miami
J2ME

6 tháng
10
J2ME,
1.5 – 2.5
20
246
Vindication
Brew, BB
tháng
OS
Zombie
J2ME
6 tháng
10
J2ME,
1.5 – 2.5
20
246
Infection 2
Brew, BB
tháng
OS
Sally's Studio
J2ME
6 tháng
10
J2ME,
1.5 – 2.5
20
246

Brew, BB
tháng
OS
Skeeball
J2ME
6 tháng
10
J2ME,
1.5 – 2.5
20
246
Brew, BB
tháng
OS
Thế giới
Android
4 tháng
8
Android, 3 tháng – 2
1–1–1 5–3–2
phim
iOS, BB tháng – 1
10
tháng
Heo bắn bóng
iOS
3 tháng
3
iOS,
3 tháng – 3

1–1
3–5
Android
tháng
Đọc tin
Android
3 tháng
2
Android
3 tháng
1
5

12

VNG

Trùm bắn ca

Quá trình phát triển

Stt

13

Công ty

VNG

Tôi Design

iOS
Ios

3 tháng

3

iOS

3 tháng

2

4

2 tháng

3

iOS

2 tháng

2

5

Qua bảng thống kê (Bảng 1), cho thấy chi phí chuyển đổi sẽ mất ít nhất là 2 tháng và ứng với từng nền tảng
cần phải có ít nhất từ 1 đến 2 lập trình viên làm việc trên nền tảng đó (chi phí này chưa tính đến nguồn nhân lực

thiết kế đồ họa). Thực tế trên đã cho thấy nhu cầu trong việc chuyển đổi ứng giữa các ứng dụng là rất cần thiết.
Bên cạnh đó, với một thời gian rất dài phát triển của các ứng dụng RIA[1][2][3], số lượng các ứng dụng trên nền
tảng này rất lớn. Tuy nhiên, nền tảng RIA tiêu tốn quá nhiều năng lượng của thiết bị client nên một số nền tảng
di động không cho các dạng ứng dụng RIA này họat động. Vì thế, nhu cầu cần chuyển đổi các ứng dụng trên nền
tảng RIA sang ứng dụng trên thiết bị di động càng cần thiết hơn.
Xuất phát từ những nhu cầu cần chuyển đổi các ứng dụng RIA (cụ thể là Microsoft Silverlight) đã tồn tại
sang các nền tảng của thiết bị di động, nhằm giảm thiểu chi phí trong quá trình chuyển đổi công nghệ, nhóm
nghiên cứu sẽ tập trung giải quyết các vấn đề sau: (1) xây dựng mô hình chuyển đổi nền tảng trung gian CUI cho
nền tảng Microsoft Silverlight 5.0 và Android 4.2, (2) mô hình hóa các thành phần giao diện của Microsoft
Silverlight 5.0 và Android 4.2, (3) xây dựng 2 tập luật chuyển đổi giữa giữa 3 mô hình trên, (4) thực nghiệm
chuyển đổi các giao diện của ứng dụng cụ thể.
Để giải quyết các vấn đề trên, chúng tôi đã dựa trên các kết quả nghiên của của giải pháp TranUI [27] mà
nhóm đã thực hiện và trình bày ở hội FAIR 2014 tại Đại học Thái Nguyên.
Cơ sở lý thuyết và các 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 hiện đề tài, nhóm nghiên cứu các vấn đề về mô hình hóa phần mềm, đặc biệt là hướng tiếp cận mô
hình hóa giao diện phần mềm. Đề tài sẽ 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 các 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) và 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] là một phương pháp tiếp cận thiết kế và xây dựng kiến trúc hệ
thống theo phương pháp mô hình, được tổ chức OMG đề xuất vào năm 2000. Hướng tiếp cận này dựa trên các

thành phần đặc trưng của một hệ thống cần có. MDA đề xuất 3 mô hình ở mức độ phục thuộc: CIM –
Computation Independent Model - mô hình độc lập tính toán, PIM – Platform Independent Model - mô hình độc
lập nền tảng, PSM – Platform Specific Model - mô hình phụ thuộc nền tảng. Để định nghĩa cấu trúc lưu trữ của
các mô hình phụ thuộc, MDA đề xuất kiến trúc MOF[5]. Kiến trúc MOF Metadata[17] được phân thành 4 tầng
thiết kế, dựa trên quan điểm đề xuất trong kiến trúc lưu trữ Metadata truyền thống: M3 layer - MOF Model: là
một mô hình hướng đối tượng, M2 layer – Metamodel: là tầng không cố định trong kiến trúc metadata MOF, M1
layer – Model: là một tập hợp các metadata, không nhất thiết bị giới hạng bởi meta-layer, M0 layer: đây là tầng
thể hiện cụ thể cấu trúc mô hình cụ thể trên từng nền tảng.
Hƣớng tiếp cận MBUID (Model – Based User Interface Development)
MBUID[6]cũng là một 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 được phát triển dự trên thiết kế của các loại mô hình. Các loại mô hình này cũng được đưa ra theo từng
mức trừu tượng và có sự chuyển đổi của qua các loại mô hình này để phát sinh ra code phụ thuộc vào nền tảng
tương ứng. Điểm khác biệt giữa MDD và MBUID là trong MBUID không có khái niệm Metamodel. Do đó, các
model trong MBUID được xây dựng có tính chất hình thức. Việc chuyển đổi giữa các mô hình trong MBUID
được thực hiện theo phương pháp thủ công, dùng template mẫu hoặc các bộ luật nhưng ít tính chất linh động. Có
nhiều nhóm nghiên cứu về MBUID, do đó cho đến nay vẫn chưa có một chuẩn thống nhất chung. Dưới đây là
một số phương pháp và ký hiệu mô hình của các nhóm nghiên cứu đạt kết quả tốt và phổ biến. Về phân loại mô
hình có 2 phương pháp là phân loại theo mức độ trù tượng[18][19] và phân loại mô hình theo chức năng. Phương
pháp phân loại theo mức độ trừu tượng[18][19] định nghĩa 4 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 – là code giao diện trên nền tản cụ thể. Phương pháp phân loại theo chức năng định
nghĩa 2 nhóm mô hình là: nhóm 1 với các mô hình Data model, Domain model và Application model với công
cụ hỗ trợ là SEESCOA[22], nhóm 2 với các mô hình Dialog model và Presentation model. Bên cạnh đó, MBUID
đề xuất nhiều qui trình phát triển và chuyển đổi khác nhau như: qui trình tổng quát[19] được đề xuất vào năm
1996, qui trình CAMELEON Framework[23][24] được đề xuất năm 2001, qui trình TERESA XML[21], qui
trình UsiXML[20] được đề xuất năm 2005 và qui trình MANTRA[25] được đề xuất năm 2006. Đa phần các
hướng nghiên cứu trên về mô hình hóa giao diện người dùng, sẽ sử dụng một trong các qui trình trên để thực
hiện việc mô hình hóa. Tuy nhiên có nhiều nhóm công bố qui trình của mình kèm công cụ hỗ trợ, có nhóm chỉ
công bố qui trình, không công bỗ công cụ hỗ trợ nên sẽ gặp nhiều khó khắn trong việc việc so sánh và kiểm
chứng các qui trình. Nhưng đa phần các hướng nghiên cứu đề phát triển dựa trên qui tổng quát. Do đó, trong đề

tài chúng tôi sử dụng qui trình này để thực hiện đề 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] là một phương pháp thiết kế giao diện
cho các dạng ứng dụng siêu truyền thông (hypermedia) theo hướng đối tượng và được nhúng vào nền web.
Hướng nghiên cứu này được đề xuất vào năm 1995. OOHDM là một mô hình nền tảng cho việc xây dựng các
ứng dụng Hypermedia lớn. Nó được sử dụng để thiết kế nhiều loại ứng dụng khác nhau như: website, hệ thống
thông tin, Kiosk tương tác, các ứng dụng trình diễn truyền thông đa truyền thông… OOHDM gồm có 4 thể hiện
cụ thể: Conceptual design: thiết kế các khái niệm, Navigational design: thiết kế các định hướng, Abstract
Interface Design: thiết kế giao diện ở mức trừu tượng, Implementation: hiện thực hóa.Các thành phần trên giao
diện nguyên thủy sẽ được chia ra thành các đối tượng. Và điều này sẽ linh động hơn và dễ dàng hơn trong việc
thiết kế và cập nhật/thay đổi mô hình của giao diện ứng dụng. Ngoài ra với tính chất thiết kế hướng đối tượng
được chia thành 4 mô hình trong OOHDM sẽ tách biệt và chuyên biệt hóa các chức năng trên giao diện. Từ đó,
việc tái sử dụng các thành phần thiết kế trên giao diện trước đó sẽ dễ dàng hơn.
Hƣớng nghiên cứu OOH4RIA (Object Oriented Hypermedia design method for Rich Internet
Application)
OOH4RIA[12][13] là một phương pháp luận thiết kế mô hình hóa các ứng dụng trên nền tảng RIA – Rich
Internet Application dựa trên phương phương pháp OOHDM kết hợp với thư viện GWT – Google Web Toolkit
của Google. Phương pháp luận này được 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ế
các phương pháp
chuyển
đổi trong
MDA
để thực hiện
phép chuyển
giữa các mô hình của
ic SPEM notation. The
completes
them
placing
the
widgets,
defining
the đổi

style
mình như: PIMToPIM, PIMToPSM, PIMToCode, PSMToCode… OOH4RIA định nghĩa các 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 một 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ó 4 giai đoạn: OOH Designer – thiết kế các đố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
<<WorkDefinition>>
mation models used for
Model-Driven Development Process of OOH4RIA
we can see in section 6.
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
<<PIMToPSM>> Model skeleton
Pres&Nav2Orch

Define Complete
Orchestation
Model

<<PIMToPSM>>
Nav2Pres
Presentation
Model skeleton

Define
Presentation Orchestation
Complete
Model
Model
Presentation
Model

esentation of the modelith definition of models
rmit to obtain a RIA
<<PIMToCode>>
GWT Server side
proposed by the OMG
s process. This diagram
<<PSMToCode>>
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
2. Quy1.
trình
phát OOH4RIA
triển hệ thống RIA
với OOH4RIA[12]
esent different MDA
Trong đó, 3 giai đoạn OOH Designer,
UI
Designer,
Orchestration
development process Designer cần có sự can thiệp của con
MToPIM, PIMToPSM,
người. Chỉ có duy nhất quá trình Model Transformer để thực hiện 4 phép chuyển đổi là PIMToPSM cho
Nav2Orch, PIMToPSM cho Nav2Pre và PIMToCode cho GWT Server side và PSMToCode cho GWT Client
.
Since
the cuối
RIA
side là được thực hiện tự
động. Đích
cùngpossesses
của quy trìnhanàyrich
là mộtinteractive
ứng dụng RIA user
hoàn chỉnh. Cũng trong

OOH designer năm
defining
2008 nhóm tácinterface
giả này đã 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 hiện
must
giữa các ứng dụng RIA[1]. Trong bài báo này, tác giả trình bày một thực nghiệm ứng dụng OOH4RIA và
represent the diện
domain
complete the static features of widgets with a model
bộ thư this
viện hỗ trợ[26] để tổng quát hóa và chuyển đổi tần giao diện của các ứ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 của các nghiên cứu về mô hình ở trên, đặc biệt là khuyết điểm quá phức tạp của hướng
ts and establishes Dựa
thetrên nền has
beenđãcalled
andđổiisbán

represented
nghiên cứu OOH4RIA, nhóm
đề xuất orchestration
một giải pháp thựcmodel
hiện chuyển
tự động giữa các 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
các ứng dụng RIA
giao diệnprofile
của các ứng
di động
với tên gọidiagram.
TranUI. TranUI
OOH models begins
trên cácthe
khái niệm của
hướng
nghiên
cứu
MBUID
là
chính.
Giải
pháp

pháp
TranUI
đề
xuất
một qui trình
orchestration model does not have to be defined from
constitutes the main
(Hình 3. Qui scratch
trình chuyển
đổi
của
giải
pháp
TranUI)
thực
hiện
xây
dựng
một
hệ
thống
because a model-to-model transformation chuyển đổi gồm
các thành phần sau:
called
Pres&Nav2Orch allows us to obtain the
– Web User Interface model: là mã nguồn đặc tả giao diện của website trên nền 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: là mô hình mô tả giao diện cụ thể nhưng độc lập với nền tảng
(đây là mô hình chuyển đổi trung gian).
FUI model – Final User Interface model: mô hình mã nguồn của nền tảng Model tương ứng.
Web2CUI Transformer – Web to CUI transformer: là 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 của nền tảng.
WebUI2CUITransformer

WebUI model

CUI model

FUI model

CUI2FUITransformer
Hình 3. Qui trình chuyển đổi của giải pháp TranUI
Đề xuất giải pháp và mô hình
Dựa trên giải pháp chuyển đổi TranUI, nhóm tác giả đã thực hiện xây dựng mô hình chuyển đổi bán tự
động giao diện tĩnh của các ứng dụng Microsoft Silverlight 5.0 sang giao diện của ứng dụng di động Android
4.2. Để thực hiện việc chuyển đổi này, nhóm đã xây dựng qui trình chuyển đổi như Hình 4 và các mô hình giao
diện cùng 2 tập luật chuyển đổi.

Silverlight WebUI Model

CUI Model

Android FUI Model
Hình 4. Áp dụng qui trình chuyển đổi TranUI cho các nền tảng Microsoft Silverlight 5.0 và Android 4.2
Theo khảo sát thống kê, cấu trúc mã XAML của công nghệ Microsoft Silverlight và cấu trúc đặc tả giao
diện của Android XML đều dựa trên bộ cấu trúc ngữ pháp XML. Hai nền tảng này có nhiều điểm tương đồng
nên về cấu trúc và thành phần giao diện nên có thể chuyển đổi được. Chúng tôi đã thực hiện thử nghiệm trên 2
nền tảng này. Để thực hiện theo các bước của quy trình TranUI đã đề xuất, chúng tôi đã xây dựng 3 mô hình
Silverlight WebUI, CUI (dùng chung) và Android FUI. Để thực hiện chuyển đổi giữa các mô hình này, chúng tôi
đã xây 2 bộ luật chuyển đổi. Các phần tiếp theo của chương này sẽ trình bày chi tiết về khảo sát công nghệ cũng
như các thức xây dựng mô hình và các bộ luật chuyển đổi của toàn hệ thống.
Kiến trúc mô hình WebUI của Microsoft Silverlight 5.0
Khảo sát đặc điểm control trên giao diện
Theo khảo sát thực tế, tính đến thời điểm tháng 8 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 giữa các đối tượng tương thích (trong
thời gian nghiên cứu phát triển luận văn) chúng tôi chỉ thực hiện chuyển đổi đối với các 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 trên đặc thù của các control này, chúng tôi mô hình hóa thành các Metamodel SliverlightWebUI (sẽ
được trình bày trong phần tiếp theo). Số control còn lại, do tính chất đặc thù và phức tạp vì chỉ thương tích với
các dạng ứng dụng web nên chưa thể thực hiện chuyển đổi. Chúng tôi có nghiên cứu giải pháp sẽ cài đặt mới
control mới tương ứng cho các nền tảng di động. Ví dụ: cài đặt mới control TreeView cho nền tảng Android để
có thể chuyển đổi control TreeView từ Silverlight sang Android. Nhưng do trong phạm vi giới hạn và thời gian
hoàn thành luận văn không cho phép nên chúng tôi không thực hiện phương pháp này để hỗ trợ có thể chuyển
đổi đầy đủ các control Silverlight để đảm bảo tính đầy đủ và tính đúng đắng trong quá 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 như Hình 5. Đây là kiến trúc
của mô hình của Microsoft Silverlight được sử dụng để đọc một cấu trúc tài liệu giao diện XAML làm đầu vào
hệ thống.

Hình 5. Kiến trúc mô hình Silverlight WebUI
Kiến trúc mô hình Android FUI của Android 4.2
Khảo sát đặc điểm Control trên giao diện của Android
Theo khảo sát thực tế, tính đến thờ điểm tháng 8 năm 2013, Android version 4.2 hỗ trợ 84 control. Trong
đó có các control trùng lắp về mặt thể hiện, ví dụ: Password và PasswordNumber trên Android. Như vậy đối với
những nhóm control dạng này sẽ được gom nhóm lại.
Bên cạnh đó, do số lượng control rất nhiều và có những control chỉ mang tính chất đặc thù của riêng
Android như FrameLayout. Những dạng control này là hoàn toàn không thể nào chuyển đổi được. Do vậy, trong
luận văn này, chúng tôi chỉ thực hiện chuyển đổi các 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 của Android FUI được thể hiện như ở Hình 6. Theo kiến trúc này, chúng tôi đã xác định các
thành phần có thể 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 6. 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 các cấu trúc phát sinh mã nguồn
XML giao diện của nền tảng Android. Nhưng tùy thuộc vào từng version của Android nên những tập luật và cú
pháp này có thể thay đổi. Do vậy, để sử dụng cho một version khác của nền tảng Android, cần phải xây dựng lại
bộ cấu trúc phát sinh mã. Và để đảm bảo cú pháp phát sinh mã Android XML đúng với kết quả hiển thị, chúng
tôi xây dựng bộ cú pháp kiểm tra XSD. Ứng với từng control sẽ có một file XSD để kiểm tra và làm mẫu phát
sinh tag xml cho giao diện Android tương ứng.
Hình 7 là cấu trúc XSD để phát sinh tag Android XML của control Button trên Android FUI. Dựa vào
XSD này, hệ thống sẽ phát sinh ra code Android XML tương ứng, đảm bảo tính đúng đắn về mặt cú pháp của
Android XML.

Hình 7. Cấu trúc XSD của control Button trên Android FUI
Mô hình CUI trung gian của giải pháp TranUI
Trong quy trình TranUI, phần quan trọng nhất là CUI Model. Đây là mô hình quyết định thiết kế và các
thành phần trên giao diện Web của nền tảng RIA được giữ và sẽ được chuyển đổi sang các nền tảng trên thiết bị
di động. Đây là một mô hình trung gian để quyết định các thông số của các thành phần giao diện được nạp vào
hệ thống từ WebUI có thể chuyển đổi được qua được FUI của các nền 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 8. Kiến trúc CUI của giải pháp TranUI
Để định nghĩa cho các thành phần của CUI, nhóm tác giả đề xuất cấu trúc thiết kế của CUI (Hình 8). Trên
mô hình này, chúng tôi chia thành 2 phần chính:
ComponentUI: ở phần này sẽ chứa các thành phần giao diện có tính chất chứa đựng các thành phần giao
diện. Để thực hiện xây dựng kiến trúc của phần này, chúng tôi đề xuất sử dụng mẫu Composite trong Design
Pattern. Để phân tiện lợi cho quá trình phát triển và tái sử dụng về sau, chúng tôi đã đề xuất kiến trúc này tách
thành 2 phần khác nhau:
LayoutCUI: đây là nhóm các thành phần hỗ trợ Layout (chia vùng) cho các thành phần giao diện. Theo
khảo sát các mô hình Layout của các ứng dụng như Adobe Flash/Flex, Microsoft Silverlight, JavaFX, Android,
iOS, Windows Phone thì có 3 loại layout đặc trưng là: Linear Layout, Relative Layout và Grid Layout. Trong
mô hình CUI đề xuất, chúng tôi đã mô hình 3 loại layout này thành 3 thành phần của giao diện là:
LinearLayoutCUI, RelativeLayoutCUI, GridLayoutCUI.
ContainerCUI: là nhóm các control: ComboBoxCUI, ListBoxCUI và ScrollViewCUI. Đây là các control
có tính chất bao bọc/chứa các thành phần giao diện khác bên trong.
SingleUI: qui định cấu trúc của cá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 này là tổng hợp các thuộc tính có thể có của các thành phần
giao diện (control) hiện tại. Thành phần này sẽ được định nghĩa từ các file XSD. Mỗi file XSD sẽ đặc tả cho một
control có cấu trúc tương tự như (Hình 9).

Hình 9. Đặc tả cấu trúc XSD lưu trữ thông tin của Control Button trong CUI
Tập luật chuyển đổi WebUI2CUI và CUI2FUI
Để có thể thực hiện việc chuyển đổi giữa các mô hình, chúng tôi đề xuất kiến trúc quản lý các tập luật

chuyển đổi. Các tập luật này sẽ được bổ sung và tùy biến tùy thuộc vào mục tiêu chuyển của người dùng sử dụng
áp dụng quy trình và mô hình này cho các nền 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 của mô hình chuyển đổi WebUI2CUI và (Hình 11) là kiến trúc của mô hình chuyển đổi
CUI2FUI. Hai kiến trúc chuyển đổi mô hình này giống nhau. Chỉ khác nhau ở phần quản lý tập luật (Rule
Management) và các luật chuyển đổi (Rule). Các thành phần trong mô hình này gồm:

Hình 11. Kiến trúc mô hình chuyển đổi CUI2FUI
Để thực hiện lưu trữ các luật chuyển đổi linh động và dễ dàng cập nhật hay bổ sung trong quá trình hệ
thống hoạt động, chúng tôi đề xuất phương pháp lưu trữ thành các file định dạng xml.Hình 12 là một ví dụ về
việc lưu trữ bộ luật chuyển đổi một control/thành phần giao diện CheckBox từ CUI sang FUI trên nền tảng
Android. Các tag <Mapping> sẽ qui định việc ánh xạ tên của từng thuộc tính của CUI sang FUI sẽ được chuyển
đổi như thế nào.

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ụ về lữu luật chuyển đổi từ CUI sang FUI trên Android
Qua quá trình nghiên cứu chuyển đổi, nhóm tác giả đã thực hiện chuyển đổi được 15 thành phần giao diện

(Control) được thể hiện qua Bảng 2.
Bảng 2. Bảng chuyển đổi control giữa các mô hình Microsoft Silverlight WebUI, CUI, Android FUI
STT
1
2
3
4
5
6
7
8
9
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 hiện qua phương pháp
Case-Study với 2 ứng dụng chuyển đổi chính là màng hình chính của ứng dụng Skype và màng hình Login của
ứng dụng FaceBook.
Ứng dụng Skype chat
Hình 13 là ứng dụng thực hiện việc chuyển đổi giao diên trên khung chat của Skype (được mô phỏng lại
theo nền web của Skype) trên Microsoft Silverlight 5.0 và đang 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 trên Silverlight 5.0
Kết quả chuyển đổi trên Android 4.2 (Hình 14)

Hình 14. Giao diện Skype đã được chuyển đổi trên Android 4.2
Ứng dụng FaceBook Login Form

Hình 15 là giao diện ứng dụng Facebook trên nền Silverlight 5.0 . Giao diện này được mô phỏng lại giao
diện trên nền web của 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 trên Silverlight 5.0
Và giao diện ứng dụng Facebook Login sau khi đã được chuyển đổi sang nền tảng Android 4.2 (Hình 16).
Giao diện này chuyển đổi thông qua hệ thống TranUI. Các thành phần giao diện vẫn đảm bảo được tính đúng
đắn về các giá trị thuộc tính (Attribute) và tọa độ hiển thị.

Hình 16. Giao diện ứng dụng Facebook Login sau khi chuyển đổi sang Android 4.2
Kết luận và hƣớng phát triển
Trong đề tài, chúng tôi đã dựa trên các kết quả nghiên cứu của giải pháp TranUI [27] để xây dựng mô hình
trung gian CUI và mô hình hóa các thành phần giao diện Microsoft Silverlight 5.0 WebUI cùng Android 4.2
FUI. Bên cạnh đó cũng đã xây dựng 2 tập luật chuyển đổi WebUI2CUI và CUI2FUI. Và hệ thống đã thực hiện
chuyển đổi được 15 thành phần giao diện từ nền tảng Microsoft Silverlight 5.0 sang Android 4.2. Quá trình này
được thực hiện tự động với 2 tiêu chí của giải pháp TranUI đề ra là đảm bảo tính đúng đắng và tính đầy đủ của
từng thành phần giao diện.
Hiện tại chúng tôi chỉ thực hiện chuyển đổi tĩnh, đảm báo tính chất đầy đủ và đúng đắn về mặt thông tin
các thành phần giao diện (control). Nhưng để đảm bảo 2 tính chất đầy đủ và đúng đắn về mặt thông thì quy trình
còn hạn chế vì còn nhiều control chưa thực hiện chuyển đổi được. Sau đây là các hướng phát triển về sau của đề
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 hiện chuyển đổi layout từ các ứng dụng Web trên nền tảng RIA sang thiết bị di động. Đối với hướng
phát triển này cần phải tập trung giải quyết các vấn đề về độ phân giải và tỷ lệ giữa 2 loại màn hình Web và thiết
bị di động hoàn toàn khác nhau.
Áp dụng các phương pháp trong thiết kế Responsive của thiết web để hỗ trợ việc chuyển đổi giao diện và
gợi ý chuyển đổi giữ hoặc hủy bỏ các thành phần giao diện của Web không phù hợp trên thiết bị di động.
Tìm hiểu các giải pháp để tăng độ phủ về mặt chuyển đổi số lượng thành phần giao diện (control) của ứng
dụng Web trên nền tảng RIA sang thiết bị di động. Về hướng phát triển này cần phải nghiên cứu giải pháp cụ thể
để tăng số lượng control có thể chuyển đổi được trên đa nền tảng.
Thực hiện xử lý các event của các 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].

[5] OMG. (2002) Meta Object Facility (MOF) Specification 1.4. [Online]. />[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