Trong luận văn này đưa ra giải pháp hỗ trợ người dùng mô tả các sự kiện trên giao diện một cách tự động bằng việc đặc tả luồng hoạt động của giao diện trên sơ đồ hoạt động.. Một số nghiê
CƠ SỞ LÝ THUYẾT
Ngôn ngữ mô hình hóa UML
UML [1] - Unified Modeling Language là ngôn ngữ mô hình thống nhất giúp mô hình hóa các ứng dụng trên máy tính Các tác giả chính là Jim Rumbaugh, Ivar Jacobson, Grady Booch ngoài ra còn có các tập đoàn lớn khác bảo trợ phát triển
UML sử dụng một hệ thống ký hiệu thống nhất để biểu diễn các phần tử mô hình Tập hợp các ký hiệu và phần tử mô hình tạo nên một mô hình UML Trong UML 2.0 có hai loại sơ đồ cơ sở: sơ đồ cấu trúc và sơ đồ hành vi
Nhóm sơ đồ cấu trúc
Sơ đồ cấu trúc phức hợp
Nhóm sơ đồ hành vi
Sơ đồ ca sử dụng
Sơ đồ máy trạng thái
Sơ đồ bao quát tương tác
Mục đích của sơ đồ cấu trúc là để cho thấy cấu trúc tĩnh của hệ thống đang được mô hình hóa Sơ đồ hành vi cho biết các hành vi động giữa các đối tượng trong hệ thống
4 Trong đề tài luận văn này chỉ trình bày sơ đồ lớp và sơ đồ hoạt động được sử dụng làm đầu vào cho nghiên cứu
Sơ đồ lớp (Class diagram)
Sơ đồ lớp thuộc nhóm sơ đồ cấu trúc dùng để miêu tả các thực thể khác nhau (người, các chủ đề và dữ liệu) và mối quan hệ giữa chúng
Trong sơ đồ lớp thành phần chính là class Class mô tả về nhóm đối tượng có cùng tính chất hành động trong hệ thống Class gồm ba thành phần sau
Phần trên cùng là tên lớp
Phần giữa là các thuộc tính
Phần dưới cùng là các phương thức của lớp
Một ví dụ lớp User được biểu diễn như sau :
Hình 2.1: Ví dụ một lớp User
Tên của lớp thường là 1 danh từ Ví dụ : User
Thuộc tính của lớp được biểu diễn dưới dạng
Tên : Kiểu của thuộc tính
Ví dụ username : String, password : String Phương thức của lớp được biểu diễn dưới dạng
Tên (Tham số) : Kiểu giá trị trả về
5 Ví dụ getUsername() : String, setUsername(String username) : void Trong sơ đồ lớp có 2 mối quan hệ chính
Mối quan hệ thừa kế
Mối quan hệ liên kết
Mối quan hệ thừa kế Đối tượng cụ thể sẽ thừa kế các thuộc tính và phương thức của đối tượng tổng quát
Hình 2.2: Lớp B thừa kế lớp A
Mối quan hệ liên kết
Mối quan hệ liên kết là mối quan hệ ngữ nghĩa giữa hai hay nhiều lớp chỉ ra sự liên kết giữa các thể hiện của chúng Mối quan hệ về mặt cấu trúc chỉ các đối tượng của lớp này có kết nối với các đối tượng của lớp khác
Hình 2.3: Mối quan hệ liên kết
Bội số quan hệ là thể hiện của một lớp liên quan tới một thực thể của lớp khác
Với mỗi liên kết có hai bội số quan hệ cho hai đầu của liên kết
0 1 Có giá trị là 0 hoặc 1
0 * Có giá trị là 0 hoặc nhiều hơn
* Có giá trị là 0 hoặc nhiều hơn
2 5 Có giá trị từ 2 đến 5
Hình 2.4: Bảng bội số trong quan hệ liên kết
Sơ đồ hoạt động (Activity diagram)
Sơ đồ hoạt động thuộc nhóm sơ đồ hành vi dùng để mô hình hóa các hoạt động trong một quy trình nghiệp vụ
Các thành phần của sơ đồ hoạt động
Thành phần Ý nghĩa Ký hiệu Điểm bắt đầu Trạng thái bắt đầu của một sơ đồ hoạt động
Hoạt động Mô tả hành vi của đối tượng trong quy trình
Dòng điều khiển Mô tả sự chuyển đổi trạng thái của các hoạt động Điều kiện Mô tả điều kiện kích hoạt việc chuyển trạng thái
Thanh bar Mô tả các dòng điều khiển thực hiện song song Điểm kết thúc Trạng thái kết thúc của một sơ đồ hoạt động
Luồng Chứa các phần tử của sơ đồ hoạt động Một sơ đồ hoạt động gồm một hoặc nhiều luồng
Hình 2.5: Các thành phần trong activity diagram
Ngôn ngữ đánh dấu mở rộng (Extensible Markup Language)
Ngôn ngữ đánh dấu mở rộng (XML): là một ngôn ngữ tổng quát dùng văn bản để mô tả thông tin trên cấu trúc cây Mọi thông tin đều được biểu diễn dưới dạng văn bản, các thẻ đánh dấu được sử dụng để phân chia thông tin cũng như thứ bậc của thông tin dữ liệu được mô tả
Mục đích chính của XML là đơn giản hóa việc chia sẻ dữ liệu giữa các hệ thống khác nhau, đặc biệt là các hệ thống được kết nối với internet
Một số đặc trưng cơ bản của XML
Cho phép tổ chức lưu trữ dữ liệu theo cấu trúc theo ngữ nghĩa dễ dàng giao tiếp hay trao đổi
Cho phép người dùng định nghĩa các thẻ mới phù hợp với quy định về cú pháp (linh động trong định nghĩa tag mà không bị bó buộc theo các thẻ quy định sẵn)
Nội dung được lưu trữ trong tập tin có phần mở rộng là XML
Dưới đây là một ví dụ về XML
Tài liệu xml gồm các thành phần sau
Các chỉ thị (processing instructions)
Thẻ đánh dấu (XML element)
Các ký tự đặc biệt
Có cú pháp dạng:
Các chỉ thị này cho các bộ phân tích tài liệu XML biết các thông tin: version (phiên bản XML), encoding (bộ mã mà tài liệu XML sử dụng)
Thẻ đánh dấu gồm 2 loại o Thẻ có nội dung: Nội dung o Thẻ rỗng:
Đặt tên thẻ như sau o Tên thẻ có thể chứa các ký tự, số, o Tên thẻ không được bắt đầu bằng số hay ký tự đặc biệt o Tên thẻ không được bắt đầu bằng chuỗi xml o Tên thẻ có phân biệt chữ hoa, chữ thường
Quan hệ lồng nhau giữa các thẻ có nội dung: nội dung bên trong thẻ có nội dung có thể là các thẻ khác (có nội dung hoặc rỗng) Khi thẻ A có nội dung là thẻ B ta gọi thẻ A là thẻ cha của B, thẻ B là thẻ con của A
Thẻ đánh dấu gốc: tài liệu xml phải có duy nhất (một và chỉ một) thẻ chứa (trực tiếp hay gián tiếp) tất cả các thẻ còn lại
Thuộc tính của thẻ có dạng: Ten_thuoc_tinh=”Gia_tri”
Thẻ có thuộc tính:
Các ký tự đặc biệt
9 Để biểu diễn các ký tự đặc biệt: >,
Giao thức trao đổi dữ liệu trên XML (XML Metadata Interchange)
Giao thức trao đổi dữ liệu trên XML (XMI) là giao thức cho phép trao đổi dữ liệu đặc tả giữa các công cụ mô hình hóa dựa trên UML
XMI được dùng rộng rãi trong định dạng trao đổi XML, XMI định nghĩa các vấn đề sau trong việc mô tả các đối tượng trong XML
Biểu diễn các đối tượng dưới dạng các phần tử và các thuộc tính XML
Các cơ chế chuẩn cho các đối tượng trong cùng một tập tin hay nhiều tập tin
Truy xuất đối tượng XMI bằng cách sử dụng mô hình XML
Xác định đối tượng, cho phép cac đối tượng được tham chiếu từ các đối tượng khác dưới dạng các định danh (identifier - ID)
XMI dựa trên tiêu chuẩn XML, XMI bao gồm 2 phần: DTD (Document Type Definition) và tài liệu XML
DTD: mỗi XML có một DTD riêng tùy theo mục đích của người viết
Xác định các phần tử có thể xuất hiện trong văn bản, thứ tự chúng xuất hiện, cách chúng được xắp xếp trong cái khác, và các chi tiết cơ bản trong cấu trúc văn bản XML
Tài liệu XML: chứa thông tin các thẻ XML trong XMI
• Ánh xạ sơ đồ lớp thành cấu trúc XMI
Tìm hiểu cấu trúc sơ đồ lớp và XMI ở trên ta thấy sơ đồ lớp có cấu trúc tương tự như XMI và có thể chuyển đổi qua lại lẫn nhau
XMI biểu diễn các thuộc tính trong sơ đồ lớp dưới dạng các thẻ Mỗi thẻ thể hiện các thuộc tính và các mối quan hệ có trong sơ đồ lớp
Việc ánh xạ sơ đồ lớp sang tài liệu XMI giúp cho quá trình đọc đầu vào của bài luận văn trở nên dễ phân tích và quản lý dữ liệu của các lớp dễ dàng hơn
• Ánh xạ lớp của sơ đồ lớp sang XMI
Lớp packagedElement trong UMI chịu trách nhiệm mô tả một lớp trong sơ đồ lớp Là một trong các thành phần quan trọng trong sơ đồ lớp
Một ví dụ của packagedElement như sau:
xmi:type = “uml:Class” mô tả đây là một lớp của sơ đồ lớp xmi: id cho biết id của lớp name cho biết tên của lớp
Ngoài ra thành phần xmi:id giúp ích cho việc tìm các mối quan hệ thừa kế, kết hợp lúc đọc các tài liệu XMI bằng cách so sánh các ID của lớp
• Ánh xạ quan hệ thừa kế của sơ đồ lớp sang XMI
Lớp generalization trong XMI chịu trách nhiệm mô tả mối quan hệ thừa kế trong sơ đồ lớp Generalization là mối quan hệ quan trọng không chỉ trong sơ đồ lớp mà trong ngôn ngữ hướng đối tượng
Một ví dụ generalization như sau:
xmi:type=”uml:Generalization” mô tả đây là quan hệ thừa kế của sơ đồ lớp xmi:id cho biết id của Generalization general cho biết id của lớp được kế thừa
• Ánh xạ thuộc tính của sơ đồ lớp sang XMI
Lớp ownedAttribute trong XMI chịu trách nhiệm mô tả thuộc tính của một lớp trong sơ đồ lớp
Một ví dụ ownedAttribute như sau:
xmi:type="uml:Property" mô tả đây là thuộc tính của một lớp xmi:id cho biết id của thuộc tính visibility cho biết tầm vực của thuộc tính trong lớp name cho biết tên thuộc tính trong lớp
• Ánh xạ mối quan hệ liên kết của sơ đồ lớp sang XMI
Lớp packagedElement trong UMI chịu trách nhiệm mô tả một mối quan hệ liên kết trong sơ đồ lớp Lớp này gồm 2 thành phần con ownedEnd chứa thông tin 2 lớp liên kết với nhau
Ví dụ một mối quan hệ liên kết trong XMI như sau:
12 Mỗi association có 2 thẻ ownedEnd chứa thông tin của 2 lớp liên kết nhau Ánh xạ sơ đồ hoạt động thành cấu trúc XMI
Tương tự như sơ đồ lớp, từ sơ đồ hoạt động ta cũng có thể ánh xạ sang tài liệu XMI giúp cho quá trình đọc đầu vào của bài luận văn trở nên dễ dàng hơn
• Ánh xạ điểm bắt đầu của sơ đồ hoạt động sang XMI
Lớp node trong XMI mô tả một điểm bắt đầu trong sơ đồ hoạt động
Ví dụ điểm bắt đầu của sơ đồ hoạt động trong XMI như sau
xmi:type=”uml:InitialNode” mô tả đây là điểm bắt đầu của sơ đồ hoạt động xmi:id cho biết id của điểm bắt đầu name tên của điểm bắt đầu outgoing cho biết id của phần tử tiếp theo trong sơ đồ hoạt động inPartition cho biết id của luồng chứa điểm bắt đầu trong sơ đồ hoạt động
• Ánh xạ điểm kết thúc của sơ đồ hoạt động sang XMI
Lớp node trong xmi mô tả một điểm kết thúc của sơ đồ hoạt động
Ví dụ điểm kết thúc của sơ đồ hoạt động trong XMI như sau
xmi:type=”uml:ActivityFinalNode” mô tả đây là điểm kết thúc của sơ đồ hoạt động xmi:id cho biết id của điểm kết thúc name tên của điểm kết thúc incoming cho biết id của phần tử trước phần tử kết thúc trong sơ đồ hoạt động inPartition cho biết id của luồng chứa điểm bắt đầu trong sơ đồ hoạt động
• Ánh xạ phần tử hoạt động của sơ đồ hoạt động sang XMI
Lớp node trong XMI mô tả một phần tử hoạt động
Ví dụ phần tử hoạt động trong XMI như sau
xmi:type=”uml:OpaqueAction” mô tả đây là phần tử hoạt động của sơ đồ hoạt động xmi:id cho biết id của phần tử hoạt động name tên của phần tử hoạt động incoming cho biết id của phần tử trước phần tử hoạt động trong sơ đồ hoạt động outgoing cho biết id của phần tử tiếp theo trong sơ đồ hoạt động inPartition cho biết id của luồng chứa phần tử hoạt động trong sơ đồ hoạt động
• Ánh xạ dòng điều khiển của sơ đồ hoạt động sang XMI
Lớp edge trong XMI mô tả dòng điều khiển của sơ đồ hoạt động
Ví dụ dòng điều khiển trong XMI như sau
Thư viện ghi mã nguồn Java Poet
Java Poet [8] là thư viện hỗ trợ sinh các tập tin đuôi java Thư việc cung cấp những phương thức để tạo các thành phần cơ bản trong một tập tin java như: tạo thuộc tính, tạo phương thức, tạo phương thức khởi tạo,
TypeSpec helloWorld = TypeSpec.classBuilder("HelloWorld") addModifiers(Modifier.PUBLIC, Modifier.FINAL)
TypeSpec là đối tượng dùng khai báo một lớp trong Java Poet addModifiers là phương thức để thêm tầm vực của lớp được khai báo addMethod là phương thức để thêm các phương thức vào lớp được khai báo
MethodSpec main = MethodSpec.methodBuilder("main") addModifiers(Modifier.PUBLIC, Modifier.STATIC) returns(void.class)
addParameter(String[].class, "args") addStatement("$T.out.println($S)", System.class, "Hello, JavaPoet!")
MethodSpec là đối tượng dùng khai báo một phương thức trong Java Poet addModifiers là phương thức để thêm tầm vực của phương thức được khai báo returns chỉ định kiểu trả về addParameter chỉ định tham số của phương thức addStatement ghi các dòng lệnh vào thân của phương thức
$T chỉ định dòng lệnh xem xét tham số của addStatement là kiểu đối tượng
$S chỉ định dòng lệnh xem xét tham số của addStatement là chuỗi
Ghi một tập tin Java
16 JavaFile javaFile = JavaFile.builder("com.example.helloworld", helloWorld) build();
Kết quả lớp HelloWorld với hai khai báo lớp và hàm main như sau package com.example.helloworld; public final class HelloWorld { public static void main(String[] args) {
System.out.println("Hello, JavaPoet!");
FieldSpec android = FieldSpec.builder(String.class, "android") addModifiers(Modifier.PRIVATE, Modifier.FINAL)
FieldSpec là đối tượng dùng khai báo một thuộc tính trong Java Poet addModifiers là phương thức để thêm tầm vực của thuộc tính được khai báo
Xét ví dụ sau FieldSpec android = FieldSpec.builder(String.class, "android") addModifiers(Modifier.PRIVATE, Modifier.FINAL) build();
TypeSpec helloWorld = TypeSpec.classBuilder("HelloWorld") addModifiers(Modifier.PUBLIC)
addField(android) addField(String.class, "robot", Modifier.PRIVATE, Modifier.FINAL) build();
17 Lớp Java tương ứng là public class HelloWorld { private final String android; private final String robot;
Khai báo phương thức khởi tạo
Phương thức khởi tạo được khai báo tương tự như phương thức
MethodSpec flux = MethodSpec.constructorBuilder() addModifiers(Modifier.PUBLIC)
addParameter(String.class, "greeting") addStatement("this.$N = $N", "greeting", "greeting") build();
MethodSpec là đối tượng dùng khai báo một phương thức trong Java Poet constructorBuilder dùng để tạo hàm khởi tạo addModifiers là phương thức để thêm tầm vực của phương thức được khai báo returns chỉ định kiểu trả về addParameter chỉ định tham số của phương thức addStatement ghi các dòng lệnh vào thân của phương thức
$N tham chiếu đến thành phần đã khởi tạo khác Có thể là biến, kiểu dữ liệu,
Xét ví dụ sau MethodSpec flux = MethodSpec.constructorBuilder() addModifiers(Modifier.PUBLIC)
addParameter(String.class, "greeting") addStatement("this.$N = $N", "greeting", "greeting") build();
TypeSpec helloWorld = TypeSpec.classBuilder("HelloWorld")
18 addModifiers(Modifier.PUBLIC) addField(String.class, "greeting", Modifier.PRIVATE, Modifier.FINAL) addMethod(flux)
Lớp Java tương ứng là public class HelloWorld { private final String greeting; public HelloWorld(String greeting) { this.greeting = greeting;
Interfaced được khai báo tương tự như lớp
TypeSpec helloWorld = TypeSpec.interfaceBuilder("HelloWorld") addModifiers(Modifier.PUBLIC)
addField(FieldSpec.builder(String.class, "NO_THING_IS_CONSTANT") addModifiers(Modifier.PUBLIC, Modifier.STATIC, Modifier.FINAL) initializer("$S", "change")
build()) addMethod(MethodSpec.methodBuilder("say") addModifiers(Modifier.PUBLIC, Modifier.ABSTRACT) build())
19 Lớp Java tương ứng là public interface HelloWorld { String NO_THING_IS_CONSTANT = "change"; void say();
Gói thư viện Swing trong Java
Swing là thư viện do Java cung cấp, dùng để thiết kế giao diện người dùng
Tổng quan về cấu trúc theo thứ bậc của các lớp trong Java Swing như sau
Hình 2.8: Các lớp trong swing
CÁC CÔNG TRÌNH NGHIÊN CỨU LIÊN QUAN
Bộ khung Automa
Automa là bộ khung dành cho hệ điều hành window hỗ trợ người dùng thao tác với các đối tượng giao diện và tự động hóa các công việc có tính chất lặp lại trên các ứng dụng của máy tính
Automa cung cấp thư viện automa.api gồm nhiều lệnh để thao tác với các đối tượng giao diện
Một ví dụ sử dụng automa để tự động hóa thao tác với notepad
Hình 3.1: Ví dụ thao tác với notepad
Khi chạy tập lệnh trên máy tính sẽ tự động thực hiện các thao tác sau
Hình 3.2: Mở ứng dụng notepad
Viết dòng chữ “Hello World!”
Hình 3.3: Viết dòng chữ “Hello World!”
Lưu tập tin notepad với 2 thao tác là nhấn menu “File” và chọn “Save”
Hình 3.4: Nhấn “File” chọn “Save”
Tạo mới thư mục và nhập tên thư mục là “Automa test”
Hình 3.5 : Tạo mới thư mục và nhập tên thư mục
Đổi tên thư mục là “Automa examples”
Hình 3.6: Đổi tên thư mục
Nhập tên tập tin là “Notepad example.txt”
Hình 3.7: Nhập tên tập tin
Hình 3.8: Nhấn file và chọn Exit Ưu điểm
Hỗ trợ tự động sử dụng các ứng dụng viết bằng java, python
Hỗ trợ người dùng tự động hóa các ứng dụng cơ bản của window với tập các lệnh đơn giản
Automa không xây dựng được các ứng dụng nghiệp vụ trên window
Automa không phải là mã nguồn mở, nó đòi hỏi người dùng mua bản quyền để sử dụng
Automa chỉ chạy được trên window xp, vista, 7, 8 và window server 2003, 2008.
Bộ khung OpenXava
OpenXava là bộ khung viết bằng ngôn ngữ java dùng để phát triển nhanh các ứng dụng web Bộ khung OpenXava hỗ trợ xây dựng giao diện người dùng và cơ sở dữ liệu tự động, người dùng chỉ cần tạo các đối tượng nghiệp vụ và viết mã nguồn cho logic nghiệp vụ
24 Hình 3.9: Ví dụ áp dụng OpenXava
Hình 3.9 là ví dụ quản lý hóa đơn, trong ví dụ này người dùng chỉ cần tạo lớp Invoice.java đại diện cho đối tượng nghiệp vụ hóa đơn Giao diện người dùng và các chức năng như New, Save, Delete và Search được sinh ra tự động bởi OpenXava Ưu điểm
Hỗ trợ sinh giao diện người dùng và cơ sở dữ liệu tự động
Chỉ hỗ trợ ngôn ngữ java
Chỉ phù hợp với các ứng dụng web, không hỗ trợ xây dựng ứng dụng window
Bài nghiên cứu khoa học
Bài nghiên cứu khoa học [1] tập trung nghiên cứu sinh mã giao diện người dùng cho các ứng dụng window viết bằng thư viện Swing của Java dựa trên sơ đồ class diagram
Hình 3.10: Hai lớp Falculty và User
Hình 3.10 người dùng xây dựng hai lớp Falculty và User
Giao diện người dùng xây dựng từ hai lớp trên như sau
26 Hình 3.11: Giao diện swing Ưu điểm
Hỗ trợ sinh giao diện người dùng ở mức bán tự động
Chưa hỗ trợ chọn cách thiết kế bố cục cho giao diện
Chưa hỗ trợ khả năng xử lý các sự kiện trên giao diện
PHƯƠNG PHÁP NGHIÊN CỨU
Luật chuyển đổi sơ đồ lớp sang các đối tượng giao diện
Đề tài này là sự phát triển từ bài báo nghiên cứu khoa học [1] do đó sẽ thừa kế phương thức sinh mã nguồn cho các đối tượng giao diện từ sơ đồ lớp
Theo bài nghiên cứu khoa học [1] mỗi thuộc tính của một lớp chứa thông tin cho việc ánh xạ 1:1 với đối tượng giao diện như Combobox, Textfield Việc ánh xạ chi tiết được thể hiện rõ ở bảng sau
UML Style Default Name Java Swing Image uml:String uml:Number @pwd JPasswordField() uml:String uml:Number @format JFormatedTextField() uml:Number @slider JSlider() uml:String uml:Number @textArea JTextArea() uml:String uml:Number null JTextField() uml:Boolean null JCheckBox() uml:String uml:Number @comboBox JComboBox() uml:String uml:Number @table JTable() uml:String uml:Number @radio JRadioButton()
Hình 4.1: Bảng chuyển đổi thuộc tính của sơ đồ lớp
UML Style là tên thẻ XMI lưu trữ dữ liệu của thuộc tính
Default Name là tên của giá trị mặc định, giá trị này chỉ ra kiểu đối tượng giao diện tương ứng với thuộc tính (giá trị này có thể để trống và mặc định sẽ là Textfield hoặc Checkbox tùy thuộc kiểu dữ liệu của thuộc tính)
Java Swing là mã nguồn java tương ứng để khởi tạo đối tượng giao diện
Image là hình ảnh minh họa cho đối tượng giao diện
Tôi xét một giao diện đăng nhập đơn giản như sau
29 Hình 4.2: Giao diện đăng nhập
Trên giao diện đăng nhập có một đối tượng Textfield và một đối tượng Password dựa trên bảng chuyển đổi thuộc tính ta có thể suy ra được sơ đồ lớp cần một lớp như sau
Thuộc tính username tương ứng với đối tượng Textfield
Thuộc tính password tương ứng với đối tượng Password và có Default Name là
@pwd (giá trị này không hiện thị trên sơ đồ lớp) Dưới đây là thẻ xmi cho thuộc tính password
Các đối tượng giao diện được ánh xạ từ tập thuộc tính của sơ đồ lớp là nền tảng để xây dựng các sự kiện trên giao diện người dùng Các sự kiện được sinh ra từ chính các hoạt động trên các đối tượng giao diện này tiêu biểu như chọn một phần tử trong Combobox, nhập dữ liệu trong Textfield hay nhấp vào một Button
Mô tả các mẫu sự kiện trên sơ đồ hoạt động
Đề tài luận văn này hướng đến mô tả các mẫu sự kiện tổng quát có thể đại diện cho các sự kiện trên từng giao diện cụ thể
Trước tiên cần mô tả luồng hoạt động của giao diện cụ thể bằng sơ đồ hoạt động Tôi sử dụng tổ hợp 3 mẫu xử lý cơ bản sau
Hình 4.4: Xử lý tuần tự
Hình 4.5: Xử lý điều kiện
Trên cơ sở bản mô tả luồng hoạt động của giao diện tôi sẽ tìm kiếm các sự kiện tồn tại trong đó
Trong luận văn này tôi mô tả 3 mẫu sự kiện sau
31 Mỗi mẫu sự kiện là sự mô tả chung đại diện cho một nhóm sự kiện cụ thể
Chúng được phân loại dựa vào chức năng của sự kiện và trạng thái giao diện sau khi kết thúc sự kiện
Hình 4.7: Mẫu sự kiện Close
Mẫu sự kiện Close là sự kiện đơn giản nhất Chức năng của sự kiện này là đóng giao diện đang mở
Sự kiện Close được biểu diễn trên UML gồm hai thành phần là phần tử hoạt động và phần tử kết thúc Đối tượng giao diện của sự kiện này là một button có nhãn là tên của phần tử hoạt động
Ví dụ giao diện đăng nhập có sự kiện Close như sau
Hình 4.8: Ví dụ cho sự kiện Close
32 Hình 4.9: Mẫu sự kiện Submit
Mẫu sự kiện Submit diễn tả hoạt động của một giao diện với trạng thái giao diện sau khi kết thúc sự kiện là báo lỗi quay lại giao diện hiện tại hoặc thành công chuyển sang giao diện khác (có thể chuyển sang nhiều giao diện khác nhau tuy điều kiện cụ thể)
Sự kiện đăng nhập cụ thể sau là một đại diện cho mẫu sự kiện Submit
Hình 4.10: Giao diện đăng nhập
Nếu người dùng đăng nhập (nhấn button login) không thành công sẽ thông báo lỗi
Nếu người dùng đăng nhập thành công với vai trò là sinh viên sẽ chuyển sang giao diện dành cho sinh viên
Hình 4.12: Giao diện sinh viên
Nếu người dùng đăng nhập thành công với vai trò là giáo viên sẽ chuyển sang giao diện dành cho giáo viên
34 Hình 4.13: Giao diện giáo viên
Hình 4.14: Mẫu sự kiện ajax
Mẫu sự kiện Ajax diễn tả hoạt động của một giao diện với trạng thái giao diện sau khi kết thúc sự kiện là cập nhật lại dữ liệu một hay nhiều đối tượng giao diện của giao diện hiện tại Đây là mẫu giao diện rất quan trọng và được sử dụng rất nhiều trong các ứng dụng ngày nay
35 Sự kiện Ajax được biểu diễn trên UML gồm 2 luồng, 1 luồng đại diện cho giao diện và 1 luồng đại diện cho lớp xử lý sự kiện Điểm bắt đầu của sự kiện này từ một phần tử trong luồng giao diện nối đến một phần tử trong luồng xử lý sự kiện
Kết thúc là dòng điều khiển quay ngược lại một phần tử khác của luồng giao diện
Hình 4.15: Minh họa sự kiện Ajax
36 Trên cơ sở định nghĩa 3 mẫu sự kiện như trên ta có thể tìm kiếm được các sự kiện của giao diện trong một sơ đồ hoạt động cụ thể
Trong luận văn này tôi sinh mã nguồn giao diện theo cấu trúc của mẫu thiết kế mvc Đồng thời áp dụng mẫu thiết kế Observer để tự động hóa việc phát sinh sự kiện và xử lý trạng thái của giao diện khi sự kiện kết thúc qua đó đi đến kết quả giảm thời gian, công sức phát triển giao diện của người dùng và lập trình viên Đó cũng là mục tiêu sau cùng quan trọng nhất của luận văn này
Hình 4.16: Mẫu thiết kế MVC và Observer
Mẫu thiết kế MVC dùng cho việc hiện thực giao diện người dùng Mô hình MVC được chia thành 3 thành phần chính nhằm đạt hiệu quả trong việc tái sử dụng và lập trình phát triển các thành phần này cùng lúc
Mẫu thiết kế MVC gồm có 3 thành phần:
• Model: là thành phần chứa dữ liệu Model có tính độc lập không phụ thuộc vào 2 thành phần còn lại
• View: là thành phần hiển thị dữ liệu View cũng có tính độc lập không phụ thuộc vào 2 thành phần còn lại
• Controller: là thành phần tiếp nhận xử lý sự kiện và cập nhật trạng thái của model
37 Mẫu thiết kế Observer là mẫu thiết kế phần mềm định nghĩa một phụ thuộc một-nhiều, trong đó nếu đối tượng Subject (hay còn gọi với tên Observable) thay đổi trạng thái, tất cả các đối tượng Observer phụ thuộc vào Subject sẽ được thông báo và tự động cập nhật
Tôi đã áp dụng mẫu thiết kế Observer này để hiện thực các mẫu sự kiện như sau
Controller đóng vai trò là Observable (Subject) và View đóng vai trò là Observer
Như vậy khi Controller xử lý xong sự kiện và cập nhật trạng thái cho Model thì mẫu thiết kế Observer sẽ tự động cập nhật dữ liệu lên View.
Giải thuật tìm kiếm mẫu sự kiện trên sơ đồ hoạt động
Trong luận văn này tôi duyệt các phần tử trên sơ đồ hoạt động dựa trên giải thuật đệ quy Ví dụ tìm tập hợp các điểm kết thúc của một mẫu sự kiện bằng đệ quy như sau
Input: D is type of node
C is a group has controller role in activity diagram
N is a set node in activity diagram
Output: R is set node which belong in group has view role function getSetOutputNodeOfEvent( D, C, N, I ) begin
R = {}; if I not contain N G = a group which contain N ; if G is group has view role
O = set next node of N ; if O not null for instance Oi of O Add result of getSetOutputNodeOfEvent( D, C, Oi, I ) to R ; endfor endif endif endif return R; end
38 Ba giải thuật tìm kiếm ba mẫu sự kiện sẽ dựa trên cơ sở của giải thuật đệ quy
Giải thuật tìm kiếm mẫu sự kiện Submit như sau
Input: G is a set group in activity diagram
E is a set edge in activity diagram N is a set node in activity diagram
Output: R is a set submit event in activity diagram function getSetSubmitEvent( G, E, N ) begin
V = set group has view role from G ; // Group has name contain "Form" for each instance Vi in V C = controller group of Vi ; // Group has name contain "Controller" for each instance Ei in E Ns = source node of Ei which belong in N ;
Nt = target node of Ei which belong in N ; if Vi contain Ns and C contain Nt and Ns , Nt has type is "OpaqueAction"
D = find next Decision Node from Nt ; if D not null
O = set output node of D which belong in group have view role; if O contain at least a instance which belong in Vi and
O contain at least a instance which not belong in Vi Add Ns to R ; endif endif endif endfor endfor return R ; end
39 Giải thuật tìm kiếm mẫu sự kiện Ajax như sau
Input: G is a set group in activity diagram
E is a set edge in activity diagram N is a set node in activity diagram
Output: R is a set ajax event in activity diagram function getSetAjaxEvent( G, E, N ) begin
V = set group has view role from G ; // Group has name contain "Form" for each instance Vi in V C = controller group of Vi ; // Group has name contain "Controller" for each instance Ei in E Ns = source node of Ei which belong in N ;
Nt = target node of Ei which belong in N ; if Vi contain Ns and C contain Nt and Ns , Nt has type is "OpaqueAction“
O = set output node belong in view group; if size of O is 1 and instance of O belong in Vi
Add Ns to R ; elseif size of O = 2
D = find next Decision Node from Nt ; if D not null
O = set output node of D which belong in group have view role; if all instance of O belong in Vi Add Ns to R ; endif endif endif endfor endfor return R ; end
40 Giải thuật tìm kiếm mẫu sự kiện Close như sau
Input: G is a set group in activity diagram Output: R is a set close event in activity diagram function getSetCloseEvent( G ) begin
V = set group has view role from G ; for each instance Vi in V
N = set of nodes in Vi ; for each instance Ni in N if Ni has type is "FinalNode"
P = set previous node of Ni ; for each instance Pi in P if Pi has type is "OpaqueAction"
Add Pi to R ; endif endfor endif endfor endfor return R ; end
41 Tôi tổng quát lại toàn bộ quá trình từ mô tả giao diện đến sinh mã nguồn Java cho giao diện người dùng bằng sơ đồ sau
Hình 4.17: Thuật toán sinh mã nguồn giao diện
THỰC NGHIỆM
Mô tả bài toán áp dụng
Dưới đây là lược đồ usecase nghiệp vụ
Các tác nhân chính trong bài toán:
Sinh viên: là người có nhu cầu xem thông tin điểm của sinh viên Họ chỉ có quyền xem điểm
Giáo viên: là người có quyền cập nhật (thêm, xóa, sửa) điểm cho những sinh viên thuộc lớp và học môn học của giáo viên này
Các use case trong bài toán:
Đăng nhập: người dùng cần nhập đúng tài khoản và mật khẩu của mình để có thể thực hiện các thao tác trong hệ thống
Xem điểm: hệ thống cho sinh viên xem bảng điểm của mình sau khi đăng nhập thành công
Thêm điểm: hệ thống cho giáo viên thêm điểm cho sinh viên sau khi chọn môn học, lớp và sinh viên
Thay đổi điểm: hệ thông cho giáo viên sửa lại điểm của môn học đã thêm trước đó
Xóa điểm: hệ thống cho giáo viên xóa điểm của môn học đã thêm trước đó.
Mô hình lớp của bài toán
Mô hình đầu tiên được đánh dấu làm đầu vào cho bài toán
Mô hình lớp miêu tả tập hợp các đối tượng trên giao diện người dùng Các thuộc tính của các lớp trong mô hình sẽ được ánh xạ sang các đối tượng trên giao diện theo đúng các luật đã nêu trong phần phương pháp nghiên cứu
Trong sơ đồ lớp này có 3 lớp đóng vai trò model của 3 giao diện (giao diện đăng nhập, giao diện sinh viên và giao diện giáo viên) là: Login, StudentMark và ProfessorMark Các thuộc tính của 3 lớp này sẽ được ánh xạ tương ứng thành các đối tượng giao diện (textfield, combobox, table, ) sang giao diện người dùng
45 Mô hình lớp trên được biểu diễn theo định dạng xmi như sau
