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

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ácmáy tính

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

KHOA CÔNG NGHỆ THÔNG TIN

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: 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 ĐHThủ 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

Báo cáo tổng kết đề 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 ĐHThủ Dầu Một

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ựctuyế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ựatrê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ắcnghiệm cho khoa Công nghệ thông tin Qua đó, giảng viên có thể tạo các đề thi trắcnghiệm tự động từ ngân hàng câu hỏi đó tùy theo mức độ trong thang nhận thức củasinh 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ọnmuố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íagiả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ảngdạ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ềntố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ệmkhá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ếmthô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ìnhtrê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ầnmề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ữngphầ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 đề thitù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ựctuyế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ậpvào chưa phân chia thành các mức độ khó/dễ,chưa phân chia theo chương, theophầ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ếnvớ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ôngnghệ 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ầnthiế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ắcnghiệ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ệmkhá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ộtsả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 ứngdụ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ìnhduyệ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ònhạ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

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ácmá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ậptrì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ềmAdobe 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ụngweb 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ôngtin 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 clientnhiề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ầnthiế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 Eclipsegọ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áccomponent 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

1.2 Tổng quan MXML

1.2.1 Lịch sử XML

XML và HTML đều được phát triển từ SGML (Standard Generalized Markup

Language) - ngôn ngữ đánh dấu tiêu chuẩn tổng quát, một ngôn ngữ biểu thị dữ liệu

trong những ứng dụng xử lý văn bản đa dạng và có cấu trúc tinh vi Tuy nhiên,SGML cũng tồn tại những nhược điểm là rắc rối, khó học và khó sử dụng Vào năm

1990, Tim Berners - Lee đã tạo ra HTML, một phần nhỏ của SGML và rất dễ sửdụng

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ủaHTML Vào năm 1996, Jon Bosak đã khởi động nhóm cộng tác W3C SGML, bấygiờ đượ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 XMLSpecification

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ápcá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 processinginstruction) 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ácquy 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

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 đốitượ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ớicấu trúc nhiều file, file chính là file chứa thẻ <mx:Application> Từ file chính, ngườilập trình có thể tham chiếu đến các file khác được viết bằng MXML, ActionScripthoặ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 ứngdụ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áctrạ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ênECMAScript Người lập trình có thể ứng dụng nhiều phương pháp để kết hợpActionScript 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 địnhnghĩ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ộctí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 đếncá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ớpcon

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ộtcomponent bất kì.

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ọnkeep-generated-actionscript là true Sau đó, trình biên dịch sẽ lưu trữ file *.as trongthư 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 đặtchúng bên trong thẻ <mx:Script> Khối ActionScript này có thể chứa các hàm và cácbiế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> Thayvà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> Tuynhiê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, chophép code ActionScript được biên dịch chính xác

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

<mx:Script>

<![CDATA[

]]>

</mx:Script>

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ácvisual 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

Khi đó, trình biên dịch sẽ tự động phát sinh biến public có tên là myButton thamchiế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ựcthể 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ậptrì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 idbằ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

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

Để 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 ứngdụ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ể truycậ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ộtMovieClip , nhưng không có timeline , nó sẽ lý tưởng cho làm bất cứ việc gì khôngcầ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 choclass 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ủaclass , 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 myPackageMyClass;

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.Delegatebở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ềunà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ụngMXML 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 fileActionScript 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 tacù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àocá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 SctionScript3.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ọahoặ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 ứngdụng thành các module để dễ phát triển và duy trì, từ đó có thể sử dụng cáccomponent 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 packagemyControls

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 ObjectModel) Level 3 Mặc dù Flex không tuân thủ tuyệt đối theo chuẩn DOM, nhưng việccà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áchàm này thường bao gồm 1 tham số để quy định cụ thể kiểu sự kiện được thông qua

h1.addEventListener(MouseEvent.CLICK, myEventHandler);

}

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= "h1" label="ClickMe" 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ứcremoveEventListener() để 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."); }

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 var s:String =

private function suhmitForm(e:Event):void {

// Handle event here.

s += "The submitFormQ method was called ";

}

private function debugMessage(e:Event):void {

// Handle event here.

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

]]></mx:Script>

<mx:Button id= "hi"

label= "Do Both Actions"

click='submitForm(event); debugMessage(event);'

/>

<mx:Label id= "11" 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= "11" text="{s}"/>

<mx:Button id= "b2" 1abe1="Reset" c1ick= "s=";"/>

</mx:Application>

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

<?xml version="1.0"?>

<! events/OneHandlerTwoComponentsAS.mxml >

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete= "createHandlers(event) ">

private function submitForm(e:Event):void {

// Handle event here.

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

]]></mx:Script>

<mx:Button id= "bl" label="ClickMe"/>

<mx:Button id= "b2" label="ClickMe, 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ứcaddEventListener() được gọi Thứ tự của các hàm xử lý sự kiện có thể được thay đổibằng cách sử dụng tham số priority (tham số thứ 4) của phương thứcaddEventListener() 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ặcnhọ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ươngthứ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ủaphương thức , bao gồm cả kiểu void trả về của hàm function ActionScript 3.0 khôngyê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ỗicủ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ầnphả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ớicá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ểuint 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áckiể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ânphối biến strXML vào kiểu dữ liệu của XML :

var myXML:XML = strXML as XML;

Nếu không muốn khai báo cho từng kiểu dữ liêu , ta có thể sử dụng khai báo chung

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

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ụngFlex

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 ứngdụng Người lập trình có thể sử dụng các component được xây dựng sẵn, cáccomponent 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

public function handleClick():void { text1.text= "Thanks for the click!";

}

]]>

</mx:Script>

<mx:Button id= "buttonì"

label= "Click here!"

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

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

myVBox2.setStyle("paddingTop ", 12); iii\'VBox2.selSl\'kd"paddingBolloni", 12);

backgroundImage="">

<mx:Fade id="myFade"duration= "5000"/> <mx:Image

crealionCompleleEffecl="{myFade}"

source="@Embed(source='assets/flexlogo.jpg') "/> </mx:Applicalion>

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ượngXMLList, 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

2.2.1 Collections

Collections là các đối tượng cung cấp một cách đồng bộ để truy cập và đại diện cho

dữ liệu được chứa trong đối tượng data source

Các kiểu collection chuẩn trong Flex framework, các lớp ArrayCollection vàXMLListCollection được thừa kế từ lớp mx.collection.ListCollectionView, lớp này

sẽ cài đặt giao diện mx.collections.IcollectionView và mx.collections.Ilist Các giaodiện này cung cấp các chức năng để xem và chỉnh sửa đối tượng dữ liệu

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 sourceCá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ượngXMLListCollection 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

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

puhlic var myICV:ICollectionView = indeterminateCollection;

<mx:ComhoBox id= "chi"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', AlhumdSlanted and Enchanted', Price:11.99},

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

//Initialize initDG ArrayCollection variable from the ArrayCollection public function initData():void {

<mx:DataGridColumn dataField= "Album"/>

<mx:DataGridColumn dataField= "Price"/>

</mx:columns>

</mx:DataGrid>

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

Các phương truy cập dữ liệu đơn giản cho phép người lập trình có thể:

• Lấy, thiết lập, thêm hoặc xóa một item tại một vị trí chỉ định trong collection

• Thêm một item vào cuối collection

• Lấy chỉ số của một item trong collection

• Xóa tất cả các item trong collection

• Lấy chiều dài của collection

// The data provider is an Array of Strings

public var myArray:Array = ["AZ", "MA", "MZ", "MN", "MO", "MS"];

//Declare an ArrayCollection that represents the Array.

[Bindable]

public var myAC:ArrayCollection;

//Initialize the ArrayCollection.

public function initData():void {

myAC = new ArrayCollection(myArray);

}

// The function to change the collection, and therefore

// the Array.

public function changeCollection():void {

// Get the original collection length.

var oldLength:int=myAC.length;

// Remove the invalid first item, AZ.

var removedItem:String=String(myAC.removeItemAt(0)); // Add ME as the second item (ILists used 0-based indexing.) myAC.addItemAt("ME", 1);

// Add MT at the end of the Array and collection.

//Display the information in the TextArea control.

ta1.text="StartLength: " + oldLength + " New Length: " + newLength;

ta1.text+ = ".\nRemoved " + removedItem;

ta1.text+ = ".\nAddedME at index " + addedItemIndex;

ta1.text+ = ".\nThe item at index 4 is " + index4Item + "."; // Show that the base Array has been changed.

ta1.text+ = "\nThe base Array is: " + myArrayjoin();

}

</mx:Script>

<mx:ComboBox id= "myCB" rowCount= "7" dataProvider= "{myAC}"/>

<mx:TextArea id= "ta1"height="75"width="300"/>

<mx:Button label="rearrange list" click= "changeCollection(); "/>

</mx:Application>

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

Control là các thành phần giao diện người dùng Các control được đặt trong cáccontainer, cũng là các thành phần giao diện người dùng Các container cung cấp mộtcấu trúc phân cấp được dùng để chứa các control và các container khác

Các loại control:

• Text controls: Label, Text, TextInput, TextArea, RichTextEditor

• Data provider controls: DataGrid, Tree, ComboBox

• Menu controls: Menu, MenuBar, PopUpMenuButton

• Flex controls: Button, ButtonBar, CheckBox, ComboBox, ColorPicker,

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

Mở một trang web là trách nhiệm phổ biến của các ứng dụng Flex Trong phiên bảntrước của ActionScript , chúng ta sử dụng phương thức getURL để load 1 trangweb ,nhưng nó đã được thay thế trong ActionScript 3.0 bằng phương thứcnavigateToURL

Giống như phương thức getURL , phương thức này load một tài liệu từ URL chỉđịnh Ta có thể sử dụng nó để load những tải liệu trong cùng một cửa sổ trình duyệt

và có thể tùy chọn thông qua biến với URL