ĐỀ TÀI KH VÀ CN: NGHIÊN CỨU CÔNG NGHỆ FLEX, ỨNG DỤNG XÂY DỰNG PHẦN MỀM QUẢN LÝ TRẮC NGHIỆM CHO KHOA CNTT TRƯỜNG ĐH TDM

Sự ra đời của công nghệ Flex Ngày nay, sự ra đời của web thế hệ mới web 2.0 hình thành nhu cầu tạo các ứng dụng trên nền web gọi là RIA Rich Internet Application, hoạt động tương tự nh

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO TỔNG KẾT

ĐỀ TÀI KHOA HỌC VÀ CÔNG NGHỆ CẤP TRƯỜNG

NGHIÊN CỨU CÔNG NGHỆ FLEX, ỨNG DỤNG XÂY DỰNG PHẦN MỀM QUẢN LÝ TRẮC NGHIỆM

CHO KHOA CNTT TRƯỜNG ĐH TDM

Mã số:

Chủ nhiệm đề tài: KS Bùi Sỹ Vương

Bình Dương, 03/2013

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO TỔNG KẾT

ĐỀ TÀI KHOA HỌC VÀ CÔNG NGHỆ CẤP TRƯỜNG

NGHIÊN CỨU CÔNG NGHỆ FLEX, ỨNG DỤNG XÂY DỰNG PHẦN MỀM QUẢN LÝ TRẮC NGHIỆM CHO KHOA CNTT TRƯỜNG ĐH THỦ DẦU MỘT

Bình Dương, 03/2013

MỤC LỤC

DANH MỤC BẢNG BIỂU, HÌNH ẢNH 5

1 Danh mục bảng biểu 5

2 Danh mục hình ảnh 5

Hình ảnh phần Phụ lục 5

DANH MỤC CÁC CHỮ VIẾT TẮT 6

THÔNG TIN KẾT QUẢ NGHIÊN CỨU 7

MỞ ĐẦU 9

1 Tổng quan tình hình nghiên cứu thuộc lĩnh vực đề tài 9

2 Mục tiêu của đề tài 10

3 Cách tiếp cận và phương pháp nghiên cứu 10

4 Nội dung nghiên cứu 10

CHƯƠNG 1: TỔNG QUAN VỀ FLEX, MXML, ACTIONSCRIPT 11

1.1 Tổng quan về Flex 11

1.1.1 Sự ra đời của công nghệ Flex 11

1.1.2 Công nghệ Flex 11

1.1.3 Đặc điểm của công nghệ Flex 12

1.2 Tổng quan MXML 14

1.2.1 Lịch sử XML 14

1.2.2 Khái niệm chung về XML 14

1.2.3 Sơ lược về MXML 15

1.2.4 Cấu trúc của một ứng dụng Flex 16

1.3 ActionScript trong Flex 16

1.3.1 Phát sinh ActionScript 17

1.3.2 Sử dụng ActionScript để xử lý sự kiện MXML 18

1.3.3 Sử dụng các khối ActionScript trong file MXML 19

1.3.4 Làm việc với các component Flex 20

1.3.5 Include và import code ActionScript 22

1.3.6 Tạo các component ActionScript 23

1.3.7 Các sự kiện trong ứng dụng Flex 25

CHƯƠNG 2: GIAO DIỆN NGƯỜI DÙNG (USER INTERFACES) 35

2.1 Visual component (Thành phần trực quan) 35

2.2 Data Provider và Collections 39

2.2.1 Collections 39

2.2.2 Data Provider Component 40

2.2.3 Chỉ định data provider trong ứng dụng MXML 40

2.2.4 Thiết lập data provider trong ActionScript 41

2.2.5 Các phương thức truy cập dữ liệu đơn giản 42

2.3 Các control thường dùng 45

2.4 Container 45

2.5 Load một trang web từ ứng dụng Flex 46

2.5.1 Gửi biến khi gọi các trang web 47

2.5.2 Gọi JavaScript với navigateToURL 48

2.6 Gửi biến bên trong file SWF 48

2.6.1 Sử dụng tham số chuỗi truy vấn (querystring parameter) 49

2.6.2 Sử dụng flashVars 51

2.7 Tìm hiểu External API 53

2.7.1 Scripting the ExternalInterface class 53

2.7.2 Gọi hàm JavaScript bằng cách sử dụng ActionScript 54

2.7.3 Gọi hàm ActionScript với JavaScript 55

2.7.4 Hạn chế của External API 56

CHƯƠNG 3: TRUY CẬP VÀ KẾT NỐI DỮ LIỆU 57

3.1 Các component truy cập dữ liệu 57

3.1.1 HTTPService component 57

3.1.2 WebService component 58

3.1.3 RemoteObject component 59

3.2 Truy cập dữ liệu server-side bằng component HTTPService 60

3.2.1 Tạo 1 HTTPService request 64

3.2.2 Making the request 64

3.2.3 Nhận phản hồi 64

3.2.4 Xác định kiểu trả về 65

3.2.5 Truy cập nội dung load 66

3.2.6 Gửi các biến với request 67

3.2.7 Chỉ định phương thức request và định dạng 68

3.2.8 Phương thức của lớp HTTPService 68

3.2.9 Event của lớp HTTPService 68

3.3 Tìm hiểu lớp URLLoader 69

3.3.1 Tạo URLLoader request 69

3.3.2 Thực hiện request 69

3.3.3 Nhận Response 69

3.3.4 Xác định kiểu trả về 70

3.3.5 Gửi biến cùng với request 70

3.3.6 Xác định phương thức request 71

3.3.7 Các thuộc tính của lớp URLLoader 71

3.4 Biểu diễn dữ liệu (representing data) 71

3.4.1 Liên kết dữ liệu (data binding) 73

3.4.2 Lưu trữ dữ liệu (data models) 73

3.4.3 Định dạng dữ liệu (data formatting) 74

3.4.4 Kiểm tra tính hợp lệ của dữ liệu (data validation) 75

CHƯƠNG 4: ỨNG DỤNG XÂY DỰNG WEBSITE PHẦN MỀM 77

4.1 Phân tích, thiết kế cơ sở dữ liệu 77

4.1.1 Mô hình quan hệ giữa các thực thể 77

4.1.2 Mô tả chi tiết về các thực thể 77

1.2 Giao diện chức năng của phần mềm 86

KẾT LUẬN VÀ KIẾN NGHỊ 88

1 Kết luận 88

2 Kiến nghị và đề xuất 88

TÀI LIỆU THAM KHẢO 90

PHỤ LỤC 91

Hướng dẫn sử dụng phần mềm 91

1 Giao diện đăng nhập 91

2 Các module quản lý của phần mềm 92

DANH MỤC BẢNG BIỂU, HÌNH ẢNH

1 Danh mục bảng biểu

Bảng 2.1: Mô tả cú pháp cấu hình các Component bằng MXML và ActionScript Bảng 3.1: Tổng hợp các loại giá trị của thuộc tính ResultFormat

Bảng 3.2: Mô tả các phương thức của lớp HTTPService

Bảng 3.3: Mô tả các event của lớp HTTPService

Bảng 3.4: Mô tả các giá trị của thuộc tính dataFormat của lớp URLLoader

Bảng 3.5: Mô tả thuộc tính của lớp URLLoader

Hình 3.1: Mô tả cơ chế hoạt động của HTTPService Component

Hình 3.2: Mô tả Databinding chuyển dữ liệu

Hình 3.3: Biểu đồ tạo ứng dụng Flex

Hình 4.1: Mô hình quan hệ giữa các thực thể

Hình ảnh phần Phụ lục

Hình 1: Giao diện đăng nhập vào phần mềm của Giảng viên

Hình 2: Giao diện đăng nhập vào phần mềm của Sinh viên

Hình 3: Module quản lý thông tin tài khoản

Hình 4: Module quản lý nghiệp vụ giảng dạy

Hình 5: Module quản lý ngân hàng câu hỏi

Hình 6: Thêm câu hỏi mới

Hình 7: Module quản lý giáo dục

Hình 8: Module quản lý đề thi

Hình 9: Tạo đề thi mới

Hình 10: Module thi trắc nghiệm trực tuyến

Hình 11: Tạo phòng thi cho sinh viên dự thi

DANH MỤC CÁC CHỮ VIẾT TẮT

RIA : Rich Internet Application

HTML : HyperText Markup Language

DHMTL : Dynamic HyperText Markup Language

CSS : Cascading Style Sheets

XML : eXtensible Markup Language

MXML : Minimal XML

SWF : Shockwave Flash

SGML : Standard Generalized Markup Language

DOM : Document Object Model

URL : Uniform Resource Locator

API : Application Programming Interface

SDK : Software Development Kit

IDE : Integrated Development Environment

HTTP : Hypertext Tranfers Protocol Secure

WSDL : Web Services Description Language

CSDL : Cơ sở dữ liệu

THÔNG TIN KẾT QUẢ NGHIÊN CỨU

1 Thông tin chung:

- Tên đề tài: Nghiên cứu công nghệ Flex, ứng dụng xây dựng phần mềm quản lý trắc nghiệm cho Khoa Công nghệ Thông tin Trường ĐH Thủ Dầu Một

- Mã số:

- Chủ nhiệm: KS Bùi Sỹ Vương

- Đơn vị chủ trì: Khoa Công nghệ thông tin

- Thời gian thực hiện: 12 tháng

2 Mục tiêu:

- Nghiên cứu, tìm hiểu về công nghệ FLEX, xây dựng Website trắc nghiệm trực tuyến với giao diện đẹp, dễ sử dụng và có nhiều tính năng nổi bật

- Nghiên cứu phương pháp trắc nghiệm khách quan trong thi cử

- Xây dựng một phần mềm quản lý trắc nghiệm ứng dụng trên nền WEB dựa trên công nghệ FLEX đã nghiên cứu Xây dựng hệ thống ngân hàng câu hỏi trắc nghiệm cho khoa Công nghệ thông tin Qua đó, giảng viên có thể tạo các đề thi trắc nghiệm tự động từ ngân hàng câu hỏi đó tùy theo mức độ trong thang nhận thức của sinh viên trong quá trình giảng dạy như là mức độ khó dễ và sinh viên cũng có thể tự tạo đề trắc nghiệm để thi thử tùy theo mức độ khó, dễ, nhiều, ít mà người chọn muốn

- Nâng cao chất lượng kiểm tra đánh giá trong dạy – học và thi cử

- Ứng dụng công nghệ mới cho giảng viên – sinh viên làm quen

- Xây dựng một ngân hàng câu hỏi trắc nghiệm khách quan có chọn lọc từ phía giảng viên

4 Kết quả nghiên cứu: nghiên cứu công nghệ Flex.

5 Sản phẩm:Phần mềm thi trắc nghiệm trực tuyến tích hợp trên nền Web

6 Hiệu quả, phương thức chuyển giao kết quả nghiên cứu và khả năng áp dụng:

- Phần mềm có thể chạy ổn định trên tất cả các hệ điều hành hiện nay

- Có thể đưa vào sử dụng cho việc giảng dạy nhằm nâng cao chất lượng giảng dạy

và nắm bắt công nghệ, đồng thời thúc đẩy nền giáo dục phát triển

- Để sử dụng trực tuyến thì phần mềm cần có 1 máy chủ riêng và đường truyền tốt

để đảm bảo tính ổn định trong quá trình thi cử

- Phần mềm sẽ được chuyển giao cho Khoa Công nghệ thông tin sử dụng thử

MỞ ĐẦU

1 Tổng quan tình hình nghiên cứu thuộc lĩnh vực đề tài

Hiện nay, nền giáo dục Việt Nam đã và đang áp dụng phương pháp trắc nghiệm khách quan và tin học hóa cho cả nước Vấn đề sử dụng internet để học tập, tìm kiếm thông tin cũng như trao đổi đã rất phổ biến so với những năm về trước

Có rất nhiều phần mềm hỗ trợ cho giảng viên và sinh viên trong việc học cũng như tạo đề thi trắc nghiệm trong quá trình kiểm tra đánh giá nhận thức của sinh viên Và cũng có nhiều website cho phép sinh viên kiểm tra kiến thức trắc nghiệm của mình trên phương tiện internet (Ví dụ: một số website tracnghiem.tuoitre.net.vn; dayhoctructuyen.org;tracnghiem.com.vn; luyenthi.edu.vn; …) Nhưng hầu hết là dành cho bậc THCS và PTTH, còn dành cho đại học thì rất ít Hơn nữa cũng chưa hoàn toàn đáp ứng được các yêu cầu mà phương pháp trắc nghiệm khách quan và người sử dụng yêu cầu (Ví dụ : các phần mềm đáp ứng được yêu cầu trắc nghiệm thì không có tiện ích trực tuyến, còn những phần mềm hỗ trợ trực tuyến thì không đáp ứng được yêu cầu của trắc nghiệm về mức độ khó dễ, ngân hàng đề thi …) Ngân hàng câu hỏi trắc nghiệm trên web hiện nay đa số là những đề thi đã có sẵn để tham khảo, không có chức năng quản lý và tạo đề thi tùy theo mức độ người dùng chọn

Một số phần mềm hiện nay:

▪ Phần mềm trắc nghiệm vi tính

▪ Phần mềm trắc nghiệm EmpTest

▪ Phần mềm trắc nghiệm Articulate Quizmaker,…

Các phần mềm nêu trên chỉ chạy được trên mạng cục bộ và chưa cho phép thi trực tuyến Không có chức năng tự động tính thời gian trong quá trình thi Câu hỏi nhập vào chưa phân chia thành các mức độ khó/dễ,chưa phân chia theo chương, theo phần, chủ yếu là nhập thô

2 Mục tiêu của đề tài

Nghiên cứu, tìm hiểu về công nghệ FLEX, xây dựng Website trắc nghiệm trực tuyến với giao diện đẹp, dễ sử dụng và có nhiều tính năng nổi bật

Xây dựng một phần mềm quản lý trắc nghiệm ứng dụng trên nền WEB dựa trên công nghệ FLEX đã nghiên cứu Xây dựng hệ thống ngân hàng câu hỏi trắc nghiệm cho khoa Công nghệ thông tin

3 Cách tiếp cận và phương pháp nghiên cứu

Nghiên cứu công nghệ FLEX, nghiên cứu hình thức trắc nghiệm (các yêu cầu, mức

độ đánh giá, thang điểm…) hiện nay

Tìm hiểu và nghiên cứu các phần mềm đã có và đang được sử dụng nhiều

Tham khảo ý kiến của các giáo viên, cán bộ chuyên môn để tìm hiểu các yêu cầu cần thiết cho phần mềm quản lý trắc nghiệm

Sử dụng kỹ thuật lập trình và thiết kế cơ sở dữ liệu để xây dựng phần mềm trắc nghiệm trực tuyến trên nền web áp dụng công nghệ Flex

4 Nội dung nghiên cứu

Tìm tài liệu, nghiên cứu về công nghệ FLEX, nghiên cứu hình thức trắc nghiệm khách quan

Nghiên cứu các phần mềm đã có, dựa trên các ưu - khuyết điểm đó để xây dựng một sản phẩm hoàn chỉnh hơn

Xây dựng phần mềm trắc nghiệm dựa trên công nghệ đã nghiên cứu

CHƯƠNG 1: TỔNG QUAN VỀ FLEX, MXML, ACTIONSCRIPT

1.1 Tổng quan về Flex

1.1.1 Sự ra đời của công nghệ Flex

Ngày nay, sự ra đời của web thế hệ mới (web 2.0) hình thành nhu cầu tạo các ứng dụng trên nền web gọi là RIA ( Rich Internet Application), hoạt động tương tự như ứng dụng desktop truyền thống

Để tạo RIA, có 2 giải pháp:

❖ DHTML (HTML, CSS, JavaScript) kết hợp với Ajax: Đây là công cụ mạnh

nhưng HTML không phải là công cụ trình diễn, mà là một chuẩn tài liệu Ngoài ra, JavaScript vẫn chưa đủ mạnh, thiếu chặt chẽ, sự tương thích với các trình duyệt còn hạn chế

❖ Flash (công nghệ vector của Adobe): Ngày nay, công nghệ này đã được cải tiến

rất nhiều, có thể làm ứng dụng RIA khá tốt Nhưng Flash sinh ra không phải để viết ứng dụng, công cụ lập trình không chuyên nghiệp, giao diện lập trình còn hạn chế, chi phí viết ứng dụng lớn do thiếu thành phần giao diện và các thư viện hỗ trợ

Để khắc phục tình trạng này, Adobe cho ra đời công nghệ Flex – một nền tảng công nghệ, công cụ phát triển ứng dụng RIA chuyên nghiệp Với Flex, các lập trình viên có thể kết hợp phương pháp thiết kế kéo thả và phương pháp viết source code, giúp xây dựng từng phần của ứng dụng một cách thích hợp Flex hiện có 2 thành phần chính: MXML và ActionScript 3.0

1.1.2 Công nghệ Flex

Flex là một framework mã nguồn mở, miễn phí dùng để xây dựng các ứng dụng web

có tính tương tác cao và được triển khai thống nhất trên tất cả các trình duyệt, các máy tính desktop và các hệ điều hành

Flex cung cấp một ngôn ngữ hiện đại dựa theo các quy tắc chuẩn và một mô hình lập trình hỗ trợ các mẫu thiết kế chung

Các RIA được tạo ra bởi Flex có thể chạy trên các trình duyệt sử dụng phần mềm Adobe Flash Player hoặc sử dụng Adobe AIR bên ngoài trình duyệt

Sử dụng Framework mã nguồn mở Flex, các nhà lập trình có thể tạo ra các ứng dụng web trực quan và hấp dẫn cho phép khách hàng, đối tác và nhân viên diễn đạt thông tin một cách hiệu quả hơn

1.1.3 Đặc điểm của công nghệ Flex

Công nghệ Flex có những đặc điểm chính như sau:

❖ Các ứng dụng Flex cũng là các ứng dụng Flash:

➢ Flex là công nghệ để tạo ra các RIA dựa trên nền tảng Flash

➢ Các ứng dụng Flex sử dụng Flash Player 9 trở lên

➢ Giống như tất cả các flash RIA, các file flex SWF được tiến hành trên client nhiều hơn trên server

❖ Flex framework chứa các lớp thư viện được định nghĩa sẵn và các công cụ cần thiết để tạo ra các ứng dụng Flex

➢ Flex framework có thể là một SDK free hoặc một IDE dựa trên nền Eclipse gọi

là Flex Builder

➢ Flex framework bao gồm cả trình biên dịch

➢ Các thư viện lớp và các ứng dụng dịch vụ cung cấp cho các nhà lập trình các component chuẩn và các công cụ để phát triển nhanh ứng dụng

❖ Các ứng dụng Flex được viết bằng cách sử dụng MXML và ActionScript 3.0

➢ MXML là một ngôn ngữ đánh dấu dựa trên XML, được sử dụng chủ yếu để hiển thị layout của các ứng dụng

➢ ActionScript là một ngôn ngữ lập trình hướng đối tượng compliant được sử dụng chủ yếu trong các application logic

ECMAScript-➢ Code MXML và ActionScript được biên dịch thành file binary SWF

Tuy nhiên, vào sau đó một thời gian, người ta bắt đầu nhận thấy sự giới hạn của HTML Vào năm 1996, Jon Bosak đã khởi động nhóm cộng tác W3C SGML, bấy giờ được gọi là nhóm XML Mục đích là đơn giản hóa SGML để nó dễ dùng như HTML, đồng thời cũng mạnh mẽ hơn

Bản specification đầu tiên của XML ra đời vào tháng 11 năm 1996 Tháng 7 năm

1997, Microsoft làn đầu tiên áp dụng XML

Tháng 1 năm 1998, Microsoft cho ra đời một chương trình miễn phí MSXSL để generate một trang HTML từ cặp trang XML và XSL

Tháng 2 năm 1998, W3C phê chuẩn cho chính thức thi hành version 1.0 của XML Specification

1.2.2 Khái niệm chung về XML

XML là viết tắt của chữ eXtensible Markup Language (ngôn ngữ nâng cấp có thể

mở rộng) là một bộ quy luật về cách chia tài liệu ra làm nhiều phần, rối đánh đáu và ráp các phần khác nhau lại để dễ nhận biết chúng

Khác với HTML, XML cho phép người dùng có thể tự do đặt tên các thẻ khi cần

Do đó, XML không giới hạn về con số các thẻ và người dùng cũng không cần phải nhớ bất của thẻ nào

Mỗi trang XML đều bắt đầu bằng một lệnh xử lý XML (XML processing instruction) Nó được đặt trong cặp thẻ <? ?>

<?xml version="1.0" standalone="yes"?>

Mỗi trang XML cần phải theo một số quy luật để được xem là “well formed” Các quy luật mà một trang XML cần phải tuân thủ:

1 Trang XML phải được bắt đầu bằng câu tuyên bố XML (XML declaration)

2 Mỗi bộ phận (element) phải nằm trong một thẻ (tag)

3 Nếu thẻ không chứa gì ở giữa thì phải chấm dứt bằng “/>”

4 Một trang XML phải có một element duy nhất chứa tất cả các element khác (root element)

5 Các thẻ tag không được xen kẽ nhau

1.2.3 Sơ lược về MXML

MXML là ngôn ngữ đánh dấu XML được dùng để bố trí các thành phần giao diện người dùng trong ứng dụng Flex MXML còn được dùng để khai báo việc truy cập dữ liệu trên server và truyền dữ liệu giữa các thành phần giao diện người dùng và nguồn

dữ liệu trên server

Giống như HTML, MXML cung cấp các thẻ để định nghĩa giao diện người dùng Cách làm việc của MXML tương tự như HTML

Các thẻ MXML tương ứng với các lớp ActionScript hoặc các thuộc tính của lớp Flex sẽ phân tích các thẻ MXML và biên dịch thành một file SWF chứa các đối tượng ActionScript tương ứng

1.2.4 Cấu trúc của một ứng dụng Flex

Cấu trúc của một ứng dụng Flex có thể được viết trong một file hoặc nhiều file Với cấu trúc nhiều file, file chính là file chứa thẻ <mx:Application> Từ file chính, người lập trình có thể tham chiếu đến các file khác được viết bằng MXML, ActionScript hoặc kết hợp cả 2 ngôn ngữ

1.3 ActionScript trong Flex

Các nhà phát triển Flex sử dụng ActionScript để cài đặt các hành vi bên trong ứng dụng Flex Đầu tiên là sử dụng các thẻ MXML để khai báo các container, control, các hiệu ứng, định dạng và các dịch vụ web mà ứng dụng yêu cầu, đồng thời để bố trí giao diện người dùng Sau đó, các nhà lập trình sẽ sử dụng ngôn ngữ ActionScript để lập trình các sự kiện cho các component và ứng dụng Nói một cách tổng quát, MXML cài đặt các trạng thái tĩnh cho ứng dụng, còn ActionScript sẽ cài đặt các trạng thái động cho ứng dụng Flex

ActionScript là một ngôn ngữ lập trình thủ tục hướng đối tượng, dựa trên ECMAScript Người lập trình có thể ứng dụng nhiều phương pháp để kết hợp ActionScript và MXML:

• Sử dụng ActionScript để định nghĩa các sự kiện bên trong các thuộc tính sự kiện của MXML

• Đặt bên trong thẻ <mx:Script>

• Include file ActionScript bên ngoài

class MyApp extends Application

Nếu file myButton.mxml bắt đầu với thẻ <mx:Button>, lớp MyButton sẽ được định nghĩa:

class MyButton extends Button

Các biến và phương thức được khai báo trong khối <mx:Script> định nghĩa các thuộc tính và phương thức của subclass

Khi thiết lập thuộc tính id cho các component, người lập trình có thể tham chiếu đến các component khác có chung thuộc tính id

Các thuộc tính sự kiện sẽ trở thành các phương thức được phát sinh tự động trong lớp con

Tất cả các đoạn mã ActionScript trong file MXML thực thi với từ khóa this đều tham chiếu đến các instance của subclass

Các component khác có thể truy cập các thuộc tính và phương thức public của một component bất kì

<mx:TextArea id="textarea1" width="155" x="0" y="0"/>

<mx:Button label="Click Me"

Khi đó, trình biên dịch sẽ lấy thuộc tính click=”…” và phát sinh ra phương thức xử

lý sự kiện như sau:

public function myButton_click(event:MouseEvent):void {

1.3.3 Sử dụng các khối ActionScript trong file MXML

Nhà lập trình có thể chèn một khối ActionScript vào trong file MXML bằng cách đặt chúng bên trong thẻ <mx:Script> Khối ActionScript này có thể chứa các hàm và các biến ActionScript được dùng trong ứng dụng MXML Ngoài ra, chúng còn có thể chứa các hằng, các namespace, các khai báo include file ActionScript…

Thẻ <mx:Script> phải nằm bên trong thẻ lớn nhất của file ứng dụng MXML

Việc ghi chú chỉ được cho phép khi chúng nằm trong một hàm

Không thể định nghĩa một lớp hoặc giao diện mới bên trong khối <mx:Script> Thay vào đó, người lập trình phải đặt chúng trong file AS riêng và import chúng

Hầu hết các lệnh phải được đặt bên trong các hàm nằm trong khối <mx:Script> Tuy nhiên, một số lệnh có thể nằm bên ngoài các hàm như:

Nội dung bên trong khối <mx:Script> thường được bao bên trong cấu trúc CDATA Điều này sẽ ngăn chặn trình biên dịch hiếu đoạn code ActionScript như XML, cho phép code ActionScript được biên dịch chính xác

Cấu trúc thẻ <mx:Script> được Adobe khuyến nghị:

1.3.4 Làm việc với các component Flex

Action Script trong Flex được sử dụng chủ yếu để làm việc với các visual control các visual container

1.3.4.1 Tham chiếu đến các component

Để các componet Flex có thể làm việc với ActionScript, các component này phải

được thiết lập thuộc tính id

<mx:Button id="myButton" label="Click Me"/>

Khi đó, trình biên dịch sẽ tự động phát sinh biến public có tên là myButton tham chiếu đến thực thể Button Biến tự động phát sinh này cho phép truy cập đến các thực thể component bằng ActionScript Khi đó, người dùng có thể thay đổi các thuộc tính và gọi đến các phương thức của các component thông qua thuộc tính id của chúng

Mỗi component sẽ được thiết lập một giá trị thuộc tính id duy nhất Do đó, người lập trình có thể truy cập đến một component tại bất kỳ đâu trên ứng dụng

Người lập trình cũng có thể tham chiếu đến các component không có thuộc tính id bằng cách sử dụng các phương thức cúa khung chứa component như getChildAt() hay getChildByName()

1.3.4.2 Tạo các visual component Flex trong ActionScript

Người lập trình có thể tạo các visual component Flex bằng cách sử dụng toán tử new, giống như cách tạo các thực thể của các lớp ActionScript Các component được tạo ra có các giá trị thuộc tính mặc định

Sau khi các component được tạo ra, người lập trình sẽ thiết lập giá trị các thuộc tính cho các component này

Sau cùng, các component mới sẽ được thêm vào các container bằng cách sử dụng các phương thức của container như addChild() or addChildAt()

Khi tạo các visual control, người lập trình sẽ phải import các package thích hợp

Trong nhiều trường hợp, người lập trình sẽ import package mx:controls

Đoạn code sau sẽ tạo ra control button trong Hbox:

public var button2:Button;

public function createObject():void {

button2 = new Button();

button2.label = "Click Me";

hb1.addChild(button2);

}

]]>

1.3.4.3 Phạm vi (scope)

Phạm vi trong ActionScript là toàn bộ những gì mà từ khóa this tham chiếu đến

Trong file ứng dụng MXML, các đối tượng của ứng dụng có thể được truy cập bằng

cách sử dụng từ khóa this Trong file định nghĩa một component MXML, this là một

tham chiếu đến các thực thể hiện tại của component đó

Trong file định nghĩa lớp ActionScript, từ khóa this tham chiếu đến các thực thể của lớp đó

Flex bao gồm thuộc tính Application.application được dùng để truy cập đến ứng dụng gốc

Khi một đối tượng ứng dụng sử dụng component SWFLoader để load một đối tượng ứng dụng khác, có thể dùng các thuộc tính parentApplication hoặc parentDocument để

truy xuất

1.3.5 Include và import code ActionScript

Sự khác nhau giữa include và import code ActionScript: Khi sử dụng Include, đoạn code ActionScript sẽ được sao chép và dán vào tại vị trí chứa lệnh Include Import sẽ tham chiếu đến file class hoặc package, vì thế, lập trình viên có thể truy cập đến các đối tượng và các thuộc tính được định nghĩa bởi lớp external

Để thêm một đoạn code ActionScript vào trong ứng dụng Flex, người lập trình phái

sử dụng khai báo include hoặc sử dụng thẻ <mx:Script source="filename">

Để định nghĩa vị trí lớp hoặc package ActionScript mà ứng dụng Flex cần sử dụng, phải khai báo import trong khối <mx:Script>

1.3.6 Tạo các component ActionScript

1.3.6.1 Tìm hiểu về custom class

Trong ActionScript 2.0, nhiều class mở rộng class cơ sở MovieClip để họ có thể truy cập vào phương thức và thuộc tính của đối tượng ActionScript 3.0 giới thiệu 1 đối tượng khác : Sprite Là một đối tượng , một Sprite tương đương với một MovieClip , nhưng không có timeline , nó sẽ lý tưởng cho làm bất cứ việc gì không cần tham khảo tới timeline Nó cũng hơn so với MovieClip

File class thường bao gồm 1 constructor được gọi để tạo trường hợp mới cho class Chức năng này phải có tên giống với file class nhưng không có đuôi.as

package myPackage {

public class MyClass {

public function MyClass() {

var newInstance:MyClass = new MyClass();

Bạn cần thêm 1 đoạn tuyên bố cho bất cứ class nào không nằm trong package mặc định:

import myPackage.MyClass;

Một điểm cần phải nhớ là ta không còn cần phải sử dụng các lớp mx.utils.Delegate bởi vì ActionScript 3.0 đã kích hoạt một phương thức để nhớ những đối tượng của nó ban đầu một cách tự động Ta không cần phải tham chiếu đến đối tượng gốc Điều này làm thuận lợi hơn cho nhà phát triển !

1.3.6.2 Tạo ActionScript project

Ta không cần bao gồm hoặc tham chiếu ActionScript từ bên trong các file ứng dụng MXML Mặt khác ,file ứng dụng SWF có thể được xây dựng hoàn thành từ ActionScript

Nếu muốn truy cập vào các Flex component , tối thiểu ta cần liên kết các file ActionScript tới một file MXML đơn giản có chứa thẻ <mx:Applycation> và container căn bản và sau đó viết các câu ActionScript thích hợp

Flex component thật hữu ích và nó giảm thời gian phát triển rất nhiều Sau đây ta cùng tới một ví dụ mà tạo ra giao diện chủ yếu ở ActionScript ,nhưng vẫn dựa vào các Flex component để bố trí và tương tác với người dùng

1.3.6.3 Additional points

Dưới đây là một số vấn đề cơ bản rất quan trọng trong sự hiểu biết của SctionScript 3.0 :

• Một số event mới trong ActinScript 3.0

• Thuộc tính data binding và bindable

• Trace statement

Các nhà lập trình có thể sử dụng các component bằng ActionScript và tham chiếu đến các component này bằng các thẻ Các component có thể chứa các yếu tố đồ họa hoặc phát triển từ các component Flex đã tồn tại

Thuận lợi từ việc định nghĩa các component: các nhà lập trình có thể chia ứng dụng thành các module để dễ phát triển và duy trì, từ đó có thể sử dụng các component này trong nhiều ứng dụng khác nhau

Ví dụ: định nghĩa một nút (button) thừa kế từ điều khiển Button, trong package myControls

package myControls {

import mx.controls.Button;

public class MyButton extends Button {

public function MyButton() {

1.3.7 Các sự kiện trong ứng dụng Flex

Các mô hình sự kiện Flex được dựa trên mô hình sự kiện DOM (Document Object Model) Level 3 Mặc dù Flex không tuân thủ tuyệt đối theo chuẩn DOM, nhưng việc cài đặt vẫn tương tự

Việc sử dụng sự kiện trong Flex là một tiến trình gồm 2 bước Đầu tiên, các lập trình

viên sẽ viết các hàm hoặc các phương thức lớp, được gọi là event listener hay event handler Các hàm này thường truy cập đến các thuộc tính của các đối tượng sự kiện

hoặc những thành phần khác được thiết lập trong ứng dụng Việc đăng kí các hàm này thường bao gồm 1 tham số để quy định cụ thể kiểu sự kiện được thông qua

private function myEventHandler(event:Event):void {

Alert.show("An event occurred.");

private function myEventHandler(event:Event):void {

Alert.show("An event occurred.");

Mỗi lần một đối tượng Flex phát sinh sự kiện, Flex sẽ tạo ra một đối tượng Event để chứa các thông tin về sự kiện đó

private function myEventHandler(e:Event):void {

Alert.show("An event of type '" + e.type + "' occurred.");

}

]]></mx:Script>

<mx:Button id="b1" label="Click Me" click="myEventHandler(event)"/>

</mx:Application>

Chỉ định đối tượng sự kiện:

function myEventListener(e:Event):void { }

import mx.events.ToolTip

function myEventListener(e:ToolTipEvent):void { }

Truy cập đến thuộc tính currentTarget

Có thể truy cập đến các thuộc tính và phương thức của các điều khiển:

private function myEventHandler(e:Event):void {

Alert.show("The button '" + e.currentTarget.id + "' was clicked.");

Định nghĩa nhiều hàm listener cho một sự kiện đơn:

Có thể định nghĩa nhiều hàm xử lý sự kiện cho một sự kiện theo 2 cách:

1 Khi định nghĩa hàm sự kiện bên trong thẻ MXML, phải tách biệt các hàm sự kiện với dấu “;”

private function submitForm(e:Event):void {

// Handle event here

s += "The submitForm() method was called ";

}

private function debugMessage(e:Event):void {

// Handle event here

s += "The debugMessage() method was called ";

/>

<mx:Label id="l1" text="{s}"/>

<mx:Button id="b2" label="Reset" click="s='';"/>

private var s:String = "";

public function createHandlers(e:Event):void {

b1.addEventListener(MouseEvent.CLICK, submitForm);

b1.addEventListener(MouseEvent.CLICK, debugMessage);

}

private function submitForm(e:Event):void {

// Handle event here

s += "The submitForm() method was called ";

}

private function debugMessage(e:Event):void {

// Handle event here

s += "The debugMessage() method was called ";

}

]]></mx:Script>

<mx:Button id="b1" label="Do Both Actions"/>

<mx:Label id="l1" text="{s}"/>

<mx:Button id="b2" label="Reset" click="s='';"/>

</mx:Application>

Đăng ký một hàm xử lý sự kiện cho nhiều component

Có thể đăng ký một hàm xử lý sự kiện cho nhiều sự kiện của một component, hoặc

sự kiện của nhiều component khác nhau

private function submitForm(e:Event):void {

// Handle event here

Alert.show("Current Target: " + e.currentTarget.id);

private function submitForm(e:Event):void {

// Handle event here

Alert.show("Current Target: " + e.currentTarget.id);

}

]]></mx:Script>

<mx:Button id="b1" label="Click Me"/>

<mx:Button id="b2" label="Click Me, Too"/>

</mx:Application>

Độ ưu tiên của sự kiện:

Các hàm xử lý sự kiện sẽ được gọi theo thứ tự gọi theo thứ tự các phương thức addEventListener() được gọi Thứ tự của các hàm xử lý sự kiện có thể được thay đổi bằng cách sử dụng tham số priority (tham số thứ 4) của phương thức addEventListener() Giá trị mặc định của tham số này là 0

Cách gán biến trực tiếp vào một component

Dấu ngoặc nhọn có thể sử dụng để chỉ định dữ liệu ràng buộc giữa hai thành phần Khi add một biến vào một khối mã ActionScript , ta có thể sử dụng metatag [Bindable] một thành phần mà nó bị ràng buộc ,ví dụ :

[Bindable]

public var myArray:Array;

Ta có thể gán biến trực tiếp vào một component bằng cách sử dụng dấu ngoặc nhọn :

<mx:ComboBox dataProvider="{myArray}"/>

Loại ràng buộc này rất hữu ích vì khi giá trị của biến thay đổi , thuộc tính bound sẽ cập nhật tự động Vì thế ta có thể chỉnh sửa thuộc tính bound từ một số phương thức

mà không cần phải chỉ định gán giá trị sử dụng ActionScript

Kê khai kiểu dữ liệu phù hợp

Chúng ta luôn khai báo kiểu dữ liệu cho các biến , tham số , giá trị trả về của phương thức , bao gồm cả kiểu void trả về của hàm function ActionScript 3.0 không yêu cầu khai báo tất cả kiểu dữ liệu , nhưng làm như vậy sẽ dễ dàng theo dõi các lỗi

của ta trong ứng dụng Nó sẽ cũng cải thiện hiệu suất như Flash Player sẽ không cần phải thực hiện chuyển đổi kiểu ngầm

Bên cạnh , ActionScript 3.0 bao gồm khả năng cung cấp đối số tùy chọn đối với các phương thức của ta Ta có thể làm điều này bằng cách chỉ định các giá trị mặc định như được hiển thị ở đây:

public myMethod(arg1:String, arg2:Boolean = false):void {

// do something

}

Quay lại với kiểu dữ liệu, một giới thiệu liên quan là sử dụng một dữ liệu mới kiểu int cho vòng lặp Ta có thể sử dụng kiểu dữ liệu này bất cứ nơi đâu ta cần một số không phải là thập phân , và nó sẽ cải thiện hiệu suất một chút so với sử dụng các kiểu

mã phím hoặc mã kí tự sử dụng thuộc tính charCode hoặc keyCode của lớp KeyBoardEvent

CHƯƠNG 2: GIAO DIỆN NGƯỜI DÙNG (USER INTERFACES)

2.1 Visual component (Thành phần trực quan)

Các thành phần trực quan dùng để xây dựng ứng dụng Flex Người lập trình có thể điều khiển và cấu hình các visual component để đáp ứng các yêu cầu của ứng dụng Flex

Flex bao gồm một mô hình phát triển dựa trên các component để phát triển các ứng dụng Người lập trình có thể sử dụng các component được xây dựng sẵn, các component mở rộng hay thậm chí là tạo ra các component mới

Các đặc tính của các visual component:

• Size: kích thước của component

• Event: hành động của ứng dụng hoặc người dùng yêu cầu component đáp ứng

• Style: định dạng về font, kích thước font hoặc canh lề văn bản

• Behavior: sự thay đổi về hình ảnh hoặc âm thanh được kích hoạt bởi ứng dụng

hoặc hành động của người dùng

• Skin: các lớp điều khiển một hình dạng bên ngoài của component

Mỗi visual component trong ứng dụng là một đối tượng của một lớp ActionScript

Có thể sử dụng đồng thời MXML và ActionScript khi làm việc với các component

<mx:Script>

<![CDATA[

public function handleClick():void {

text1.text="Thanks for the click!";

Bảng 2.1: Mô tả cú pháp cấu hình các component bằng MXML và ActionScript

MXML example ActionScript example Read-

"DESC");

Event <mx:Accordion id="myAcc"

change="changeHandler (event);"/>

private function changeHandler(event:MouseEvent):void { }

To get the style:

var currentPaddingTop:Number = tile1.getStyle("paddingTop");

To get the behavior:

var currentShowEffect:String = tile1.getStyle("showEffect");