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

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... Khi thiết

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

MỤC LỤC

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

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

2 Danh mục hình ảnh 4

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

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

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

MỞ ĐẦU 8

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

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

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

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

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

1.1 Tổng quan về Flex 10

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

1.1.2 Công nghệ Flex 10

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

1.2 Tổng quan MXML 12

1.2.1 Lịch sử XML 12

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

1.2.3 Sơ lược về MXML 13

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

1.3 ActionScript trong Flex 14

1.3.1 Phát sinh ActionScript 15

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

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

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

1.3.5 Include và import code ActionScript 20

1.3.6 Tạo các component ActionScript 20

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

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

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

2.2 Data Provider và Collections 36

2.2.1 Collections 36

2.2.2 Data Provider Component 37

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

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

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

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

2.4 Container 42

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

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

2.5.2 Gọi JavaScript với navigateToURL 44

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

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

2.6.2 Sử dụng flashVars 47

2.7 Tìm hiểu External API 48

2.7.1 Scripting the ExternalInterface class 49

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

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

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

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

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

3.1.1 HTTPService component 53

3.1.2 WebService component 54

3.1.3 RemoteObject component 55

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

3.2.1 Tạo 1 HTTPService request 59

3.2.2 Making the request 60

3.2.3 Nhận phản hồi 60

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

3.2.5 Truy cập nội dung load 62

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

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

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

3.2.9 Event của lớp HTTPService 64

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

3.3.1 Tạo URLLoader request 64

3.3.2 Thực hiện request 64

3.3.3 Nhận Response 65

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1 Kết luận 83

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

TÀI LIỆU THAM KHẢO 84

PHỤ LỤC 85

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

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

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

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

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 {

textarea1.text='Hello World';

}

Khi người dùng nhấn nút click, đoạn code này sẽ thiết lập giá trị text cho điều khiển TextArea là chuỗi “Hello World”

Để có thể xem được code phát sinh, người lập trình phải thiết lập giá trị tùy chọn keep-generated-actionscript là true Sau đó, trình biên dịch sẽ lưu trữ file *.as trong thư mục generated, là thư mục con của thư mục chứa file SWF

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ư:

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()

Từ khóa this dùng để tham chiếu đến các đối tượng hiện tại

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

public var button2:Button;

public function createObject():void {

button2 = new Button();

button2.label = "Click Me";

Để lập trình xóa 1 control, người lập trình có thể sử dụng các hàm removeChild()

và removeChildAt() Để xóa toàn bộ các control trong một container, người ta sẽ sử dụng hàm removeAllChild()

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() {

//statements

}

{

}

Chức năng Constructor thường public và không cung cấp gía trị trả về , mặc dù ta

có thể vượt qua đối số cho họ Sử dụng constructor để tạo ra một trường hợp mới của class , như sau:

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.");

}

]]></mx:Script>

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

</mx:Application>

Hai cách viết code trên là tương đương Tuy nhiên, cách thực hiện tốt nhất vẫn là

sử dụng phương thức addEventListener Phương thức này cho phép nhà lập trình điều khiển tốt hơn sự kiện Hơn nữa, khi sử dụng phương thức addEventListener()

để thêm một hàm xử lý sự kiện, người lập trình có thể sử dụng phương thức removeEventListener() để xóa hàm xử lý khi không cần thiết

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.");

}

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.");

3 Tạo lớp xử lý sự kiện và đăng ký các điều khiển để sử dụng lớp này cho việc

xử lý sự kiện

Đị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 dữ liệu Number

Ta có thể chủ động điều chỉnh kiểu dữ liệu của biến , ví dụ sau cho thấy việc phân phối biến strXML vào kiểu dữ liệu của XML :

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

<![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

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

To get the style:

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

Behavior <mx:Tile id="tile1"

showEffect="{AWipeEffect}"/

>

To set the behavior:

myButton.setStyle('showEffect', AWipeEffect);

To get the behavior:

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

Sử dụng ActionScript bằng phương thức setStyle()

2.2 Data Provider và Collections

Một đối tượng collection chứa một đối tượng dữ liệu như mảng hoặc đối tượng XMLList, và cung cấp một bộ các phương thức cho phép truy cập, sắp xếp, lọc và chỉnh sửa các đề mục dữ lệu trong đối tượng dữ liệu đó Các điều khiển data provider có thuộc tính dataProvider để liên kết với các collection

Collections cung cấp các tính năng sau:

• Đảm bảo một component được cập nhật khi dữ liệu thay đổi

• Cung cấp cơ chế xử lý dữ liệu

• Cung cấp một bộ các hoạt động của dữ liệu một cách nhất quán

• Cung cấp các hình thức trình bày của dữ liệu như lọc, sắp xếp…

• Sử dụng một collection để thiết lập nhiều component khác từ cùng một nguồn dữ liệu

• Sử dụng các collection để chuyển dữ liệu nguồn đến các component

• Sử dụng các phương thức collection để truy cập đến dữ liệu trong data source Các collection interface: IList, IcollectionView, IviewCursor

Các lớp collection: ArrayCollection, XMLListCollection, CursorBookmark, Sort, SortField, ItemResponder, ListCollectionView

2.2.2 Data Provider Component

Một số component Flex được gọi là data provider component bởi vì chúng có chứa thuộc tính dataProvider để lấy dữ liệu từ đối tượng ArrayCollection, đối tượng XMLListCollection hoặc một custom collection

Các component data provider: ButtonBar, ColorPicker, ComboBox, DataGrid, DateField, HorizontalList, LinkBar, List, Menu, MenuBar, PopUpMenuButton, Repeater, TabBar, TileList, ToggleButtonBar, Tree

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

Người dùng có thể chỉ định và truy cập dữ liệu cho data provider theo nhiều cách như sau:

Sử dụng đối tượng collection một cách rõ ràng hoặc chỉ định thuộc tính dataProvider cho các component:

<mx:Object label="AL" data="Montgomery"/>

<mx:Object label="AK" data="Juneau"/>

<mx:Object label="AR" data="Little Rock"/>

</mx:ArrayCollection>

</mx:ComboBox>

</mx:Application>

Truy cập dữ liệu bằng cách sử dụng các collection interface

public var myICV:ICollectionView = indeterminateCollection;

<mx:ComboBox id="cb1" dataProvider="{myICV}" initialize="sortICV()"/>

Sử dụng đối tượng row data như là một data provider

private var DGArray:ArrayCollection = new ArrayCollection([

{Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},

{Artist:'Pavement', Album:'Brighten the Corners', Price:11.99}]);