a) Task metamodel
3.3.2. Quy trình DGUIMS thu gọn
Trong kiến trúc MDD của DGUIMS, AUI và AAUI model có metamodel tương ứng là AUI và AAUI metamodel. Còn kiến trúc MDD trong MANTRA, AUI và AAUI metamodel cùng dựa theo AUI metamodel. Điểm khác biệt này trong DGUIMS giúp cho quá trình phân tích thiết kế linh động hơn. Phân tầng hơn mức độc lập và phụ thuộc thiết bị như AUI model mô tả giao diện độc lập với thiết bị còn AAUI model mô tả giao diện phụ thuộc vào kích thước màn hình hiển thị của thiết bị. Tuy nhiên về lý thuyết trong AAUI model vẫn chứa các thành phần mô tả giao diện độc lập với platform.
Trong quy trình DGUIMS, ta có thể rút ngắn quá trình phân tích thiết kế, bằng cách bắt đầu từ AAUI model mô tả các đối tượng giao diện độc lập với platform nhưng cách gom nhóm thì lại phụ thuộc vào kích thước hiển thị của giao diện (Hình 3.4).
Trong trường hợp CUIi model gần giống với sơ đồ lớp hoặc gần tương ứng 1-1 với sơ đồ lớp hoặc các đối tượng trong ngôn ngữ lập trình, ta có thể thực hiện chuyển đổi thẳng từ CUIi sang FUIi mà không cần dùng đến transformation CUIi2FUIi model.
Phương pháp luận DGUIMS là phương pháp luận tổng quát luận văn đề xuất cho việc phát triển giao diện form trên các loại thiết bị di động. Tuy nhiên trong luận văn chỉ giới hạn xây dựng trên các loại thiết bị di động sử dụng hệ điều hành Windows Mobile và Android. Do đó các platform i được xem xét xây dựng là Windows Mobile và Android dựa trên quy trình DGUIMS thu gọn. Phần tiếp theo sẽ trình bày các metamodel được đề xuất trong quy trình DGUIMS thu gọn.
3.4.Các metamodel đƣợc đề xuất trong DGUIMS
Trong phần này chúng tôi sẽ trình bày các metamodel được đề xuất trong quy trình DGUIMS thu gọn là: AAUI, các CUI, và các transformation metamodel.
3.4.1.AAUI metamodel
AAUI metamodel (Hình 3.5) được luận văn đề xuất dựa trên AUI metamodel trong MANTRA nhưng chú trọng đến mô tả cấu trúc của giao diện, và việc chuyển đổi, điều hướng giữa các màn hình giao diện. Do đó phần mô tả máy trạng thái Sate Machine của AAUI metamodel được bỏ qua, việc chuyển đổi, điều hướng giữa các màn hình giao diện sẽ được mô tả qua mối liên hệ Destination giữa các đối tượng cụ thể của lớp trừu tượng Command và Presentation.
Ta có thể xem mô tả các đối tượng trong AAUI metamodel qua (Bảng 3.3) và ví dụ về AAUI model tuân theo AAUI metamodel qua (Hình 3.6).
Bảng 3.3 Các đối tƣợng trong AAUI metamodel
STT Loại đối tƣơng Mô tả
1. PresentationSystem Hệ thống giao diện gồm các đơn vị màn hình PresentationUnit cần xây dựng.
2. AbstractPresentation Màn hình giao diện trừu tượng, có thể phân rã thành nhiều đơn vị màn hình Presentation Unit
3. AbstractUIComponent Thành thần giao diện trừu tượng, có thể phân rã thành nhiều thành phần giao diện cụ thể khác
4. PresentationUnit Đơn vị màn hình
5. InputField Thành phần giao diện nhập dữ liệu
6. OutputField Thành phần giao diện thể hiện dữ liệu
7. SingleChoice Thành phần giao diện cho phép lựa chọn 1 trong n lựa chọn
8. MultipleChoice Thành phần giao diện cho phép lựa chọn m lựa chọn trong n lựa chọn
9. Navigator Thành phần giao diện cho phép hiển thị đơn vị màn hình giao diện khác
10. Activator Thành phần giao diện cho phép hiển thị đơn vị màn hình giao diện khác nhưng có kèm theo một hay nhiều hành động Action khác
11. Action Hành động đơn vị màn hình
12. UIContainerRelationship Quan hệ bao hàm của thành phần giao diện trừu tượng AbstractUIComponent
13. UITemporalRelationship Quan hệ thứ tự thực hiện các thành phần giao diện trên màn hình giao diện
14. PresentationContainerRelationship Quan hệ bao hàm của màn hình giao diện trừu tượng AbstractUIPresentation
15. PresentationTemporalRelationship Quan hệ thứ tự thực hiện các màn hình giao diện trong hệ thống giao diện
3.4.2.CUI metamodel
Vì các đối tượng và các mối quan hệ trong CUI metamodel rất nhiều nên trong luận văn chia CUI metamodel ra thành hai package. Một package structure mô tả cấu trúc và một package relationship mô tả mối quan hệ giữa các đối tượng. Các package của CUI metamodel được định nghĩa dựa trên kỹ thuật sử dụng sơ đồ lớp trừu tượng gần giống với sơ đồ lớp đối tượng khi xây dựng giao diện trên platform quan tâm. Kỹ thuật này giúp cho CUI model khi được định nghĩa sẽ gần giống với sơ đồ lớp trên platform và khi đó ta có thể bỏ qua transformation model trung gian giữa CUI model và FUI model như đã trình bày ở (3.3.2).
(Hình 3.7) và (Hình 3.9); (Hình 3.8) và (Hình 3.10) là package relationship và structure tương ứng cho CUI metamodel trên .NET CF 3.5 và Android 7. Ý nghĩa của các interface trong các metamodel của các hình trên được liệt kê ở (Bảng 3.4), (Bảng 3.5).
Hình 3.8 Android 7 CUI Relationship metamodel
Bảng 3.4 Các interface trong CUI .NET CF 3.5 metamodel
STT Interface Mô tả
1. ApplicationPresentationUnit Các đối tượng cài đặt Interface này sẽ là một màn hình
2. PresentationComponent Các đối tượng cài đặt Interface này sẽ là một control trên giao màn hình giao diện
3. UIComposition Interface cho các control gom nhóm
4. BarComponent Interface cho các control dạng menu và thanh công cụ
5. DateTime Interface cho các control thể hiện ngày, giờ
6. Choice Interface cho các control thể hiện lựa chọn
7. Navigator Interface cho các control điều hướng
8. Activator Interface cho các control nút lệnh
9. FormatedTree Interface cho các control dạng cây có thể định dạng việc hiển thị
10. FormatedCollection Interface cho các control dạng tập hợp có thể định dạng việc hiển thị
11. BarElement Interface cho các control thể hiện trạng thái
Bảng 3.5 Các interface trong CUI Android 7 metamodel
STT Interface Mô tả
1. ApplicationPresentationUnit Các đối tượng cài đặt Interface này sẽ là một màn hình
2. PresentationComponent Các đối tượng cài đặt Interface này sẽ là một control trên giao màn hình giao diện
3. UIComposition Interface cho các control gom nhóm
4. AbstractMenu Interface cho các control thể hiện menu
5. IOBar Interface cho các control thể hiện trạng thái
6. Choice Interface cho các control thể hiện lựa chọn
7. Activator Interface cho các control nút lệnh
8. Date Interface cho các control thể hiện ngày
3.4.3.Transformation AAUI2CUI metamodel
Trong luận văn cũng đề xuất transformation metamodel cho việc chuyển đổi từ AUI model sang CUI model. Các transformation metamodel được luận văn xây dựng dựa trên giải pháp chuyển đổi mô hình theo phương pháp tổng quát mà MDA đề xuất (2.1.4.c.3) để tăng tính linh động trong quá trình chuyển đổi, đồng thời kết hợp ánh xạ kiểu tự điển. Theo kiểu tự điển này, ta có thể dễ dàng thay đổi cập nhật, bổ sung khi platform quan tâm có xuất hiện thêm đối tượng giao diện mới.
(Hình 3.11), (Hình 3.12) là transformation metamodel cho việc chuyển đổi từ AAUI model sang CUI model trên .NET CF 3.5 và Android 7. Trong đó các Enumeration là tự điển ánh xạ, còn các đối tượng trong AAUI metamodel sẽ được quy ước cài đặt theo bộ tự điển này. Trong các transformation metamodel trên, các giá trị enum chính là tham số chuyển đổi, còn các đối tượng trong AAUI metamodel sẽ chứa một tập các giá trị enum mang hàm ý các đối tượng này trong AAUI model sẽ được ánh xạ sang các đối tượng CUI model tương ứng. (Bảng 3.6), (Bảng 3.7) là bảng liệt kê các ánh xạ các đối tượng từ AAUI model sang CUI model tương ứng.
Bảng 3.6 Ánh xạ các đối tƣợng từ AAUI model sang các đối tƣợng trong CUI .NET CF 3.5 model STT Đối tƣợng trong AAUI
metamodel
Đối tƣợng trong CUI .NET CF 3.5 metamodel 1. PresentationUnit Form
2. AbstractUIComponent Panel, TabPage
3. OutputField Label, LinkLabel, ListBox, ListView, PictureBox, ProgressBar, StatusBar, TreeView, DataGridView
4. InputField ComboBox, DataGridView, DateTimePicker, DomainUpDown, MonthCalendar, NumericUpDown, TextBox, TrackBar
5. SingleChoice RadioButton, ComboBox, ListBox, ListView, DomainUpDown, TreeView, DataGridView
6. MultipleChoice CheckBox, ListBox, ListView, DataGridView, TreeView
7. Navigator LinkLabel, Button, MenuItem, ToolBarButton
8. Activator Button, MenuItem, ToolBarButton
Bảng 3.7 Ánh xạ các đối tƣợng từ AAUI model sang các đối tƣợng trong CUI Android 7 model STT Đối tƣợng trong AAUI
metamodel
Đối tƣợng trong CUI Android 7 metamodel 1. PresentationUnit Activity
2. AbstractUIComponent ViewGroup, Layout
3. OutputField TextView, ListView, ImageView, ProgressBar, RatingBar
4. InputField Spinner, AutoCompleteTextView, EditText, SeekBar, TimePicker, DigitalClock, AnalogClock, DatePicker
5. SingleChoice RadioButton, Spinner, ListView, ToggleButton
6. MultipleChoice ListView
7. Navigator Button, ImageButton, MenuItem
[elseif (oclIsKindOf(ZoomControl))]
ZoomControl [c.name.toLowerFirst()/] = (ZoomControl)
findViewById(R.id.[c.name.toLowerFirst()/]);
[elseif (oclIsKindOf(ZoomButton))]
ZoomButton [c.name.toLowerFirst()/] = (ZoomButton)
findViewById(R.id.[c.name.toLowerFirst()/]);
[elseif (oclIsKindOf(ImageButton))]
ImageButton [c.name.toLowerFirst()/] = (ImageButton)
findViewById(R.id.[c.name.toLowerFirst()/]);
[elseif (oclIsKindOf(Button))]
Button [c.name.toLowerFirst()/] = (Button)
findViewById(R.id.[c.name.toLowerFirst()/]);
[elseif (oclIsKindOf(TimePicker))]
TimePicker [c.name.toLowerFirst()/] = (TimePicker)
findViewById(R.id.[c.name.toLowerFirst()/]);
[elseif (oclIsKindOf(DigitalClock))]
DigitalClock [c.name.toLowerFirst()/] = (DigitalClock)
findViewById(R.id.[c.name.toLowerFirst()/]);
[elseif (oclIsKindOf(AnalogClock))]
AnalogClock [c.name.toLowerFirst()/] = (AnalogClock)
findViewById(R.id.[c.name.toLowerFirst()/]);
[elseif (oclIsKindOf(DatePicker))]
DatePicker [c.name.toLowerFirst()/] = (DatePicker)
findViewById(R.id.[c.name.toLowerFirst()/]);
[elseif (oclIsKindOf(VideoView))]
VideoView [c.name.toLowerFirst()/] = (VideoView)
findViewById(R.id.[c.name.toLowerFirst()/]);
[elseif (oclIsKindOf(TextView))]
TextView [c.name.toLowerFirst()/] = (TextView)
findViewById(R.id.[c.name.toLowerFirst()/]);
[elseif (oclIsKindOf(MultiAutoCompleteTextView))]
MultiAutoCompleteTextView [c.name.toLowerFirst()/] =
(MultiAutoCompleteTextView) findViewById(R.id.[c.name.toLowerFirst()/]);
[elseif (oclIsKindOf(ImageView))]
ImageView [c.name.toLowerFirst()/] = (ImageView)
findViewById(R.id.[c.name.toLowerFirst()/]);
[elseif (oclIsKindOf(Gallery))]
Gallery [c.name.toLowerFirst()/] = (Gallery)
findViewById(R.id.[c.name.toLowerFirst()/]);
[elseif (oclIsKindOf(EditText))]
EditText [c.name.toLowerFirst()/] = (EditText)
findViewById(R.id.[c.name.toLowerFirst()/]);
Chronometer [c.name.toLowerFirst()/] = (Chronometer)
findViewById(R.id.[c.name.toLowerFirst()/]);
[elseif (oclIsKindOf(AutoCompleteTextView))]
AutoCompleteTextView [c.name.toLowerFirst()/] =
(AutoCompleteTextView) findViewById(R.id.[c.name.toLowerFirst()/]);
[elseif (oclIsKindOf(ListView))]
ListView [c.name.toLowerFirst()/] = (ListView)
findViewById(R.id.[c.name.toLowerFirst()/]); [/if] [/for] } } [/file] [/for] [/template]
Chƣơng 4: Xây dựng môi trƣờng phát triển DGUIMSE
4.1.Giới thiệu
Trong phần này chúng tôi sẽ trình bày xây dựng môi trường phát triển giao diện form trên thiết bị di động sử dụng quy trình rút gọn DGUIMS. Tên gọi của môi trường này là DGUIMSE – Dynamically Generating User Interface for Mobile System Environment. DGUIMSE có các chức năng chính đã được thể hiện trong (Hình 4.1):
Mô hình hóa AAUI model Mô hình hóa CUI model
Mô hình hóa Transformation model
Chuyển đổi từ mô hình AAUI sang Transformation model Chuyển đổi từ mô hình Transformation sang CUI model Chuyển đổi từ CUI model sang mã nguồn
DGUIMSE phát triển trên công cụ Eclipse, sử dụng Ecore metamodel với thư viện EMF, GMF để mô hình hóa, ngôn ngữ chuyển đổi mô hình ATL để chuyển đổi giữa các mô hình, và sử dụng ngôn ngữ Acceleo để chuyển đổi từ mô hình sang source code. Các package dùng để xây dựng môi trường phát triển sẽ được cài đặt thành các plugin trên Eclipse (Hình 4.2), (Bảng 4.1).
Hình 4.2 Môi trƣờng phát triển DGUIMSE và các công cụ hỗ trợ
Bảng 4.1 Các chức năng chính trong DGUIMSE
STT Các chức năng chính trong DGUIMSE Sử dụng thƣ viện hỗ trợ 1. Mô hình hóa AAUI, CUI, Transformation Model GMF, EMF
2. Chuyển đổi mô hình sang mô hình ATL
4.2.Các package trong DGUIMSE
4.2.1.Package mô hình hóa AAUI, CUI model
Đây là nhóm các package chính dùng để mô hình hóa các mô hình trong DGUIMS. Được phát triển dưới dạng plugin nhúng vào Eclipse cho phép tạo và chỉnh sửa mô hình trực tiếp dưới dạng giao diện người dùng.
a)Package mô hình hóa AAUI model
Package adaptedaui (Hình 4.3) dùng để mô hình hóa AAUI model. Bao gồm các package con sau:
vn.edu.hcmus.fit.se.mdd.mbuid.adaptedaui: chứa định nghĩa metamodel vn.edu.hcmus.fit.se.mdd.mbuid.adaptedaui.edit: hỗ trợ tính năng soạn thảo cho editor, và diagram
vn.edu.hcmus.fit.se.mdd.mbuid.adaptedaui.editor: cho phép chỉnh sửa model vn.edu.hcmus.fit.se.mdd.mbuid.adaptedaui.diagram: cho phép chỉnh sửa diagram
Hình 4.3 Package mô hình hóa AUI model
b)Package mô hình hóa CUI model trên .NET CF 3.5
Package cf35cui (Hình 4.4) dùng để mô hình hóa CUI model cho .NET CF 3.5. Bao gồm các package con sau:
vn.edu.hcmus.fit.se.mdd.mbuid. cf35cui.edit: hỗ trợ tính năng soạn thảo cho editor, và diagram
vn.edu.hcmus.fit.se.mdd.mbuid. cf35cui.editor: cho phép chỉnh sửa model
Hình 4.4 Package mô hình hóa CUI model trên .NET CF 3.5
c)Package mô hình hóa CUI model trên Android 7
Package android7cui (Hình 4.5) dùng để mô hình hóa CUI model cho Android 7. Bao gồm các package con sau:
vn.edu.hcmus.fit.se.mdd.mbuid. android7cui: chứa định nghĩa metamodel vn.edu.hcmus.fit.se.mdd.mbuid. android7cui edit: hỗ trợ tính năng soạn thảo cho editor, và diagram
vn.edu.hcmus.fit.se.mdd.mbuid.android7cui.editor: cho phép chỉnh sửa model
Hình 4.5 Package mô hình hóa CUI model trên Android 7
4.2.2.Package mô hình hóa transformation model
Đây là nhóm các package transformation model dùng để mô hình hóa các mô hình ánh xạ chuyển đổi trong DGUIMS. Được phát triển dưới dạng plugin nhúng
vào Eclipse cho phép tạo và chỉnh sửa mô hình trực tiếp dưới dạng giao diện người dùng.
a)Package mô hình hóa transformation model sang CUI .NET CF 3.5
Package adatped2cf35cui (Hình 4.6) dùng để mô hình hóa transformation model chuyển đổi từ AAUI model sang CUI model cho .NET CF 3.5. Bao gồm các package con sau:
vn.edu.hcmus.fit.se.mdd.mbuid.adatped2cf35cui: chứa định nghĩa metamodel
vn.edu.hcmus.fit.se.mdd.mbuid. adatped2cf35cui edit: hỗ trợ tính năng soạn thảo cho editor, và diagram
vn.edu.hcmus.fit.se.mdd.mbuid. adatped2cf35cui.editor: cho phép chỉnh sửa model
Hình 4.6 Package mô hình hóa transformation model sang CUI .NET CF 3.5
b)Package mô hình hóa transformation model sang CUI Android 7
Package adaptedaui2android7cui (Hình 4.7) dùng để mô hình hóa transformation model chuyển đổi từ AAUI model sang CUI model Android 7. Bao gồm các package con sau:
vn.edu.hcmus.fit.se.mdd.mbuid.adaptedaui2android7cui: chứa định nghĩa metamodel
vn.edu.hcmus.fit.se.mdd.mbuid.adaptedaui2android7cui.edit: hỗ trợ tính năng soạn thảo cho editor, và diagram
vn.edu.hcmus.fit.se.mdd.mbuid.adaptedaui2android7cui.editor: cho phép chỉnh sửa model
Hình 4.7 Package mô hình hóa transformation model sang CUI Android 7
4.2.3.Package chuyển đổi giữa các mô hình
Đây là nhóm các package dùng để chuyển đổi giữa các mô hình (model 2 model). Được phát triển dưới dạng plugin nhúng vào Eclipse cho phép thực hiện việc chuyển đổi bằng một nút lệnh trên menu Eclipse.
a)Package chuyển đổi từ AAUI sang transformation model trên .NET CF 3.5
Package adaptedaui2adaptedaui2cf35cui (Hình 4.8) dùng để chuyển đổi mô hình từ AAUI model sang transformation model tương ứng cho CUI model trên .NET CF 3.5. Bao gồm các package con sau:
org.eclipse.m2m.atl.adaptedaui2cf35cui: source code thực hiện việc chuyển đổi trên console
org.eclipse.m2m.atl.adaptedaui2cf35cui.ui: source code nhúng vào giao diện eclipse thực hiện việc chuyển đổi thông qua nút lệnh giao diện.
Hình 4.8 Package chuyển đổi từ AAUI sang transformation model trên .NET CF 3.5
b)Package chuyển đổi từ AAUI sang transformation model trên Android 7
Package adaptedaui2adaptedaui2android7cui (Hình 4.9) dùng để chuyển đổi mô hình từ AAUI model sang transformation model tương ứng cho CUI model trên Android 7. Bao gồm các package con sau:
org.eclipse.m2m.atl.adaptedaui2adaptedaui2android7cui: source code thực hiện việc chuyển đổi trên console
org.eclipse.m2m.atl.adaptedaui2adaptedaui2android7cui.ui: source code nhúng vào giao diện eclipse thực hiện việc chuyển đổi thông qua nút lệnh giao diện.
Hình 4.9 Package chuyển đổi từ AAUI sang transformation model trên Android 7
c)Package chuyển đổi từ transformation model sang CUI trên .NET CF 3.5
Package adpatedaui2cf35cui2cf35cui (Hình 4.10) dùng để chuyển đổi mô hình từ
transformation model sang CUI model trên .NET CF 3.5. Bao gồm các package con sau:
org.eclipse.m2m.atl. adpatedaui2cf35cui2cf35cui: source code thực hiện việc chuyển đổi trên console
org.eclipse.m2m.atl. adpatedaui2cf35cui2cf35cui.ui: source code nhúng vào giao diện eclipse thực hiện việc chuyển đổi thông qua nút lệnh giao diện.
Hình 4.10 Pakcage chuyển đổi từ transformation model sang CUI trên .NET CF 3.5
d)Package chuyển đổi từ transformation model sang CUI trên Android 7
Package adaptedaui2android7cui2android7cui (Hình 4.11) dùng để chuyển đổi mô hình từ transformation model sang CUI model tƣơng ứng trên Android 7. Bao gồm các package con sau:
org.eclipse.m2m.atl. adaptedaui2android7cui2android7cui: source code thực hiện việc chuyển đổi trên console
org.eclipse.m2m.atl. adaptedaui2android7cui2android7cui.ui: source code nhúng vào giao diện eclipse thực hiện việc chuyển đổi thông qua nút lệnh giao diện
Hình 4.11 Package chuyển đổi từ transformation model sang CUI trên Android 7
4.2.4.Package chuyển đổi mô hình sang mã nguồn
Đây là nhóm các package dùng để chuyển đổi model 2 text (từ mô hình sang source code). Được phát triển dưới dạng plugin nhúng vào Eclipse cho phép thực hiện việc chuyển đổi bằng một nút lệnh trên menu Eclipse.
a)Package chuyển đổi CUI model sang mã nguồn .NET CF 3.5
Package cf35cui2fui (Hình 4.12) dùng để chuyển đổi mô hình từ CUI model
sang mã nguồn trên .NET CF 3.5 tương ứng. Bao gồm các package con sau: org.eclipse.m2t.acceleo.cf35cui2fui: source code thực hiện việc chuyển đổi trên console
org.eclipse.m2t.acceleo.cf35cui2fui.ui: source code nhúng vào giao diện eclipse thực hiện việc chuyển đổi thông qua nút lệnh giao diện
Hình 4.12 Package chuyển đổi CUI model sang mã nguồn .NET CF 3.5
b)Package chuyển đổi CUI model sang mã nguồn Android 7
Package android7cui2fui (Hình 4.13) dùng để chuyển đổi mô hình từ CUI model
sang mã nguồn trên Android 7 tương ứng. Bao gồm các package con sau:
org.eclipse.m2t.acceleo.cf35cui2fui: source code thực hiện việc chuyển đổi trên console
org.eclipse.m2t.acceleo.cf35cui2fui.ui: source code nhúng vào giao diện eclipse thực hiện việc chuyển đổi thông qua nút lệnh giao diện
Chƣơng 5: Case Study
Trong chương này ta sẽ xem xét một ví dụ tạo ứng dụng giao diện từ quy trình phát triển DGUIMS thu gọn (Hình 3.4) có sử dụng môi trường phát triển là DGUIMSE. Giao diện được xây dựng thử nghiệm là giao diện của ứng dụng tìm kiếm các chuyến xe đi từ thành phố này đến thành phố khác. Trong đó có các chức năng chính như sau:
Cho phép người dùng nhập tiêu chuẩn tìm kiếm lựa chọn nơi khởi hành và nơi đến; ngày giờ khởi hành, và ngày giờ về; loại xe và loại di chuyển