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

Bình Dương, 03/2013

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

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ã số:

Xác nhận của đơn vị chủ trì đề tài Chủ nhiệm đề tài (chữ ký, họ và tên) (chữ ký, họ và tên)

ThS. Đinh Thị Thu Hương KS. Bùi Sỹ Vương

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

Bình Dương, 03/2013

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 1 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 ...... 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

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 2 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.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

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 3 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

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

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 4 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

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. Bảng 4.1: Mô tả thực thể KHOA. Bảng 4.2: Mô tả thực thể BOMON. Bảng 4.3: Mô tả thực thể MONHOC. Bảng 4.4: Mô tả thực thể LOP. Bảng 4.5: Mô tả thực thể DSMH. Bảng 4.6: Mô tả thực thể GIANGVIEN. Bảng 4.7: Mô tả thực thể SINHVIEN. Bảng 4.8: Mô tả thực thể DSMONHOCLAI. Bảng 4.9: Mô tả thực thể NGANHANGCAUHOI. Bảng 4.10: Mô tả thực thể DETHI. Bảng 4.11: Mô tả thực thể PHONGTHI. Bảng 4.12: Mô tả thực thể DANHSACHTHI. 2. Danh mục hình ảnh

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.

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 5 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

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

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 6 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

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. 3. Tính mới và sáng tạo: - Công nghệ Flex là một công nghệ mới, được cải tiến dựa trên công nghệ Flash của Adobe. - Ứng dụng công nghệ Flex để xây dựng trang web cho phép người dùng thi trắc nghiệm trực tuyến, giúp tiết kiệm chi phí và thời gian cho người dùng. 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.

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 7 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

- Để 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ử.

Ngày 08 tháng 03 năm 2013 Đơn vị chủ trì Chủ nhiệm đề tài (chữ ký, họ và tên) (chữ ký, họ và tên)

ThS. Đinh Thị Thu Hương KS. Bùi Sỹ Vương

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 8 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Ở ĐẦ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ô.

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 9 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. 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ủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 10 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

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.

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 11 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

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 ECMAScript- compliant được sử dụng chủ yếu trong các application logic.

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

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 12 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

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 13 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

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ủ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ẻ

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 14 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ỗ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.

Một ứng dụng đơn giản sử dụng MXML:

paddingTop="10"

paddingBottom="10"

paddingLeft="10"

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 15 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

paddingRight="10"

>

Flex được xem như là thư viện các lớp ActionScript. Thư viện lớp này chứa các component, các thư viện quản lý, các lớp data-service và các lớp cho các chức năng khác.

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ẻ . 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.

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 16 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

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ẻ .

• Include file ActionScript bên ngoài.

• Import các lớp ActionScript.

• Tạo các ActionScript component.

1.3.1. Phát sinh ActionScript

Khi một file MXML được biên dịch, trình biên dịch sẽ tạo ra một lớp và phát sinh ActionScript để lớp đó sử dụng.

Một ứng dụng MXML sẽ định nghĩa các subclass của lớp Application, tương tự, một component MXML sẽ định nghĩa các subclass của component đó.

Tên của subclass là tên của file. Lớp cơ sở là lớp của thẻ lớn nhất. Một ứng dụng MXML sẽ định nghĩa :

class MyApp extends Application

Nếu file myButton.mxml bắt đầu với thẻ , 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 đị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

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 17 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

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ì.

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

Người lập trình có thể dùng ActionScript bằng cách đưa code ActionScript vào bên trong thẻ MXML để xử lý sự kiện, như ví dụ sau:

click="textarea1.text='Hello World';"

width="92"

x="31.5"

y="56"

/>

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 18 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

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ẻ . 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ẻ 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 . 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 . Tuy nhiên, một số lệnh có thể nằm bên ngoài các hàm như:

• import • const

• var • namespace

• include • use namespace

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 19 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

Nội dung bên trong khối 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ẻ đượ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

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.

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 20 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

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:

import mx.controls.Button;

public var button2:Button;

public function createObject():void {

button2 = new Button();

button2.label = "Click Me";

hb1.addChild(button2);

}

]]>

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 21 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

Để 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ẻ

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 22 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

Để đị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

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;

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 23 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ộ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ẻ 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.

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 24 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

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

...

}

...

}

}

Trong file MXML, người lập trình có thể tham chiếu đến điều khiển MyButton vừa tạo như sau:

xmlns:cmp="myControls.*">

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

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 25 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 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.

import mx.controls.Alert;

private function initApp():void {

b1.addEventListener(MouseEvent.CLICK, myEventHandler);

}

private function myEventHandler(event:Event):void {

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

}

]]>

Hầu hết các ứng dụng Flex đều đơn giản hóa việc đăng ký các hàm listener bên trong thẻ MXML.

import mx.controls.Alert;

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 26 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

private function myEventHandler(event:Event):void {

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

}

]]>

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 đó

import mx.controls.Alert;

private function myEventHandler(e:Event):void {

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

}

]]>

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 27 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

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:

import mx.controls.Alert;

private function myEventHandler(e:Event):void {

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

}

]]>

Đăng ký các hàm xử lý sự kiện:

Các phương pháp có thể sử dụng để đăng ký các xử lý sự kiện với các điều khiển Flex:

1. Định nghĩa hàm xử lý sự kiện bên trong

2. Sử dụng phương thức addEventListener()

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.

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 28 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

Đị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 “;”

[Bindable]

private var s:String = "";

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

}

]]>

label="Do Both Actions"

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

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 29 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. Khi sử dụng phương thức addEventListener(), phải thêm các hàm xử lý để gọi đến phương thức addEventListener.

[Bindable]

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.

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 30 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

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

}

]]>

Đă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

import mx.controls.Alert;

private function submitForm(e:Event):void {

// Handle event here.

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

}

]]>

label="Click Me"

click="submitForm(event)"

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 31 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

/>

label="Click Me, Too"

click="submitForm(event)"

/>

Khi sử dụng phương thức addEventListener(),với mỗi component người lập trình phải gọi đến phương thức addEventListener().

import mx.controls.Alert;

public function createHandlers(e:Event):void {

b1.addEventListener(MouseEvent.CLICK, submitForm);

b2.addEventListener(MouseEvent.CLICK, submitForm);

}

private function submitForm(e:Event):void {

// Handle event here.

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

}

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 32 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

]]>

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

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

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 33 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 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 :

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 như sau: var anything:*;

Các sự kiện bàn phím:

Để xử lý sự kiện bàn phím, phải tạo hàm listener cho sự kiện. KeyboardEvent.KEY_DOWN hoặc KeyboardEvent.KEY_DOWN. Các listener sẽ được kích hoạt mỗi khi phím được nhấn. Bên trong các hàm xử lý, cần phải kiểm tra 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ủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 34 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

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.

Cấu hình component:

Các giá trị của các thuộc tính component, các sự kiện, các style, behavior được khai báo trong thẻ MXML, hoặc trong code ActionScript

Gọi các phương thức của một component lúc thực thi chương trình trong code ActionScript.

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 35 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

public function handleClick():void {

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

}

]]>

label="Click here!"

width="100"

fontSize="12"

click="handleClick();"/>

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-

Read-only var property theClass:String=mp1.className;

Method myList.sortItemsBy("data",

"DESC");

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 36 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

Event

change="changeHandler changeHandler(event:MouseEvent (event);"/> ):void {... }

myButton.addEventListener("click ", changeHandler);

Style

paddingTop="12" tile1.setStyle("paddingTop", 12); paddingBottom="12"/> tile1.setStyle("paddingBottom", To get the style:

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

12);

Behavior

showEffect="{AWipeEffect}"/ myButton.setStyle('showEffect', > AWipeEffect);

To get the behavior:

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

Xử lý sự kiện

Có thể viết các hàm xử lý sự kiện cho các component bằng cách viết hàm ActionScript hoặc viết trực tiếp tại các thẻ MXML của component đó.

Applying styles

Có thể thiết lập tất cả các style trong MXML như là thuộc tính của thẻ:

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 37 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

borderStyle="solid"

paddingTop="12"

paddingBottom="12" >

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

myVBox2.setStyle("paddingTop", 12);

myVBox2.setStyle("paddingBottom", 12);

Sử dụng thẻ

.myStyle {paddingTop: 12; paddingBottom: 12;}

styleName="myStyle"

borderStyle="solid">

Applying behaviors

width="110"

height="100"

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 38 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

backgroundImage="">

creationCompleteEffect="{myFade}"

source="@Embed(source='assets/flexlogo.jpg')"/>

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.

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 giao diệ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

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 39 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

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

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 40 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

Truy cập dữ liệu bằng cách sử dụng các collection interface public var myICV:ICollectionView = indeterminateCollection;

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

[Bindable]

public var myArray:Array = ["AL", "AK", "AR"];

]]>

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

initialize="initData();">

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 41 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

import mx.collections.ArrayCollection;

[Bindable]

private var DGArray:ArrayCollection = new ArrayCollection([

{Artist:'Pavement', :'', Price:11.99},

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

// Initialize initDG ArrayCollection variable from the ArrayCollection.

public function initData():void {

myGrid.dataProvider = DGArray;

}

]]>

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

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 42 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

• 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

import mx.collections.*;

// 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.

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 43 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

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.

myAC.addItem("MT");

// Change the third item from MZ to MI.

myAC.setItemAt("MI", 2);

// Get the updated collection length.

var newLength:int=myAC.length;

// Get the index of the item with the value ME.

var addedItemIndex:int=myAC.getItemIndex("ME");

// Get the fifth item in the collection.

var index4Item:String=String(myAC.getItemAt(4));

// Display the information in the TextArea control.

ta1.text="Start Length: " + oldLength + ". New Length: " +

newLength;

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

ta1.text+=".\nAdded ME at index " + addedItemIndex;

ta1.text+=".\nThe item at index 4 is " + index4Item + ".";

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 44 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

// Show that the base Array has been changed.

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

}

]]>

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ác container, cũng là các thành phần giao diện người dùng. Các container cung cấp một cấ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, DataGrid…

2.4. Container

Một container được định nghĩa là một vùng hình chữ nhật được vẽ trên bề mặt Adobe Flash Player. Các control và các container khác được chứa trong container.

Tại gốc của ứng dụng Flex là một container được gọi là Application Container. Các container thường dùng: Accordion, Box, Canvas, Form, Panel, Tile, TitleWindow

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 45 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.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ản trước của ActionScript , chúng ta sử dụng phương thức getURL để load 1 trang web ,nhưng nó đã được thay thế trong ActionScript 3.0 bằng phương thức navigateToURL.

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.

Với phương thức getURL , ta có thể sử dụng cách gọi hàm function JavaScript trên trang web lưu trữ các file SWF. NavigateToURL cũng có sự hạn chế tương tự về bảo mật file SWF khi chấp nhận APi bên ngoài. Nhưng có thể sử dụng phương thức này theo cách sau :

navigateToURL(request, window);

Đối số (argument) đầu tiên ,request , là một đối tượng URLRequest chỉ định trang web phải load. Đối số window quy định số trang tải và nó có thể là một trong những giá trị chuỗi sau đây : _self, _blank, _parent, hoặc _top. Những giá trị này có ý nghĩa tương tự như trong HTML. Ví dụ , một giá trị rỗng tải một trang trong 1 cửa sổ mới. Nếu không có giá trị cụ thể trang web sẽ thay thế các trang lưu trữ trong ứng dụng Flex.

Để mở website google trong 1 cửa sổ trình duyệt mới , cần sử dụng những dòng ActionScript như sau : var site:URLRequest = new URLRequest("http://www.google.com"); navigateToURL(site, "_blank");

Ta có thể bọc vào phương thức bằng đoạn try – cacth để có thể xử lý các lỗi cụ thể. Ví dụ : try { navigateToURL(request, "_blank");

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 46 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

} catch (err:Error) { trace(err.Message);

}

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

Một vài ứng dụng Flex cần gửi các biến đến các trang web , nơi lưu trữ các file SWF. Ta cần phải làm điều này vì trang web có thể sử dụng các biến trong lúc gọi cơ sở dữ liệu , hoặc việc cập nhật bản ghi từ giao diện Flex. Một công dụng khác của biến là thông báo tình trạng trang web của giao diện Flex để nó có thể trở lại trong trường hợp refresh trang.

Cách tiếp cận phương thức navigateToURL là thông qua các giá trị. Có 2 cách làm điều này:

1. Nối các biến vào URL, như hoạt động Get.

2. Sử dụng đối tượng URLVariable với Post.

Ta có thể thêm các biến querystring từ Flex bằng cách tham chiếu tên biến vào cuối URL , như ví dụ sau : var isbn:String = "1590597338"; var request:URLRequest new URLRequest("http://www.friendsofed.com/book.html?isbn=" + isbn);

Điều này có kết quả tương tự như sử dụng HTTP GET để gửi các mẫu biến. Ta có thể tạo một đối tượng URLVariable mới và thông qua các biến từ Flex.Ví dụ sau đây sẽ cho thấy POST biến username và password như thế nào với biến URLRequest : var site:URLRequest = new URLRequest("http://www.friendsofed.com"); var urlVars:URLVariables = new URLVariables(); site.method = "POST";

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 47 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 urlVars.username = "sas"; urlVars.password= "1234"; site.data = urlVars; navigateToURL(site);

Đừng quên import những class liên quan , bao gồm như sau : import flash.net.navigateToURL; import flash.net.URLRequest; import flash.net.URLVariables;

Ta cũng có thể sử dụng lớp URLVariables để gửi các giá trị cho script server-side, hoặc cũng có thể gọi một hàm JavaScript bằng cách sử dụng navigateToURL.

2.5.2. Gọi JavaScript với navigateToURL

Thay vì load trang web , ta có thể gọi hàm JavaScript với phương thức navigateToURL. Làm điều này, không cần chỉ định URL. Sử dụng navigateToURL để tham chiếu tới 1 lệnh hay 1 hàm JavaScript trong trang web chứa file SWF :

var jsRequest:URLRequest = new URLRequest("javascript: doWork();");

Dòng trên gọi hàm JavaScript doWork trong trang web chứa file SWF. Cách tiếp cận này ý thức được rằng không thể làm việc trên tất cả các trình duyệt ,và thiết lập bảo mật để ngăn chặn code Javascript thực thi. Hoặc có thể tiếp cận bằng cách sử dụng API ngoài.

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

Trong một số trường hợp , các trang web cần gửi các giá trị bên trong ứng dụng Flex. Ta phải làm điều này nếu bạn muốn sử dụng code server – side để login và muốn chỉ ra các ứng dụng mà người dùng đã đặc quyền. Ta cũng có thể sử dụng các ứng dụng từ trang web để load các tình trạng cụ thể của ứng dụng Flex.

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 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

Một cách làm việc khác là với API ngoài , có 2 phương pháp chính để gửi biến bên trong file SWF để họ có thể sử dụng trong các ứng dụng :

• Sử dụng các tham số chuỗi truy vấn khi tải các file SWF.

• Sử dụng flashVars.

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

Các tham số chuỗi truy vấn là cặp biến name-value được thêm vào cuối URL hoặc tên file , ví dụ:

mySWF.swf?userID=1234&admin=true

Một khi thêm các tham số vào cuối tên file SWF , chúng có thể truy cập như là các biến trong ứng dụng Flex. Lưu ý không thể thông qua các biến theo cách nào vào file SWF để chạy bên trong một ứng dụng độc lập.

Thật dễ để thêm các tham số chuỗi truy vấn khi bạn nhúng file SWF trực tiếp bằng cách sử dụng và thẻ bên trong trang HTML. Tuy nhiên , Flex tạo ra một wrapper mà giấu đi các thẻ bên trong HTML. Nếu đang làm việc với wrapper mặc định này , ta cần phải chỉnh sửa folder html-template đẩu tiên.

2.6.1.1. Chỉnh sửa file Flex wrapper Các chuẩn SWF Flex wrapper là được tạo từ file AC_OETags.js và index.template.html trong folder html-template của project. Ta cần phải chỉnh sửa các file mẫu để tạo ra các trang lưu trữ HTML cho file SWF của ta. Ta không nên chỉnh sửa các file trong thư mục bin cũng như các file có thể được ghi đè mỗi khi bạn biên dịch các tập tin SWF. Ta sẽ biết cách làm thế nào để add danh sách các tham số trước đó vào các file wrapper chuẩn thông qua ví dụ dưới đây.

Để thêm các biến querystring ,mở file AC_OETags.js trong folder html-template và định vị trí chức năng AC_FL_RunContent.Sửa dòng bắt đầu với khung mở , thêm các biến chuỗi truy vấn như được in đậm : function AC_FL_RunContent(){

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 49 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 var ret =

AC_GetArgs

( arguments, ".swf?userID=1234&admin=true", "movie",

"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"

, "application/x-shockwave-flash"

);

AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);

}

Ta mở file index.template.html trong project và đặt khối

Ta cũng cần phải chỉnh sửa lại thuộc tính ban đầu :

2.6.1.2. Truy cập các biến querystring trong Flex

Khi thêm các tham số querystring , ta cần phải chỉnh sửa file ứng dụng Flex để nó có thể nhận được chúng. Để bắt đầu , bạn cần khai báo một biến cho mỗi tham số ta muốn truy cập trong khối của file MXML :

private var myVar:String;

Ta có thể gán giá trị tham số vào biến như sau :

myVar = Application.application.parameters.myVar;

Ta cũng có thể làm điều này với một dòng code như sau :

private var myVar:String =

Application.application.parameters.myVar;

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 50 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

Ta có thể sử dụng các biến được tải trong hàm function hoặc ràng buộc nó vào thuộc tính của một component.

2.6.2. Sử dụng flashVars

Có thể thông qua các biến của file SWF bằng cách thiết lập thuộc tính flashVars trong hai thẻ của file :

Như ở phần trước , ta cần chỉnh sửa các file wrapper nếu ta sử dụng Flex wrapper mặc định. Thời gian này ta chỉ cần thay đổi file index.template.html. Thêm các tham số có liên quan được in đậm ở đây :

AC_FL_RunContent(

"src", "playerProductInstall",

"FlashVars", "userID=1234&admin=true&MMredirectURL="+MMredirectURL+

'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+""

Cũng cần thêm các tham số trong khối tiếp theo của file : else if (hasRequestedVersion) {

// if we've detected an acceptable version

// embed the Flash Content SWF when all tests are passed

AC_FL_RunContent(

"src", "${swf}",

"width", "${width}",

"height", "${height}",

"align", "middle",

"id", "${application}",

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 51 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

"quality", "high",

"bgcolor", "${bgcolor}",

"name", "${application}",

"flashvars",'userID=1234&admin=true&historyUrl=history.htm

%3F&lconid=' + lc_id + '',

Cuối cùng , cần thêm khối

Ta có thể truy cập các tham số bên trong giá trị flashVars giống như phần trước như sau : private var myVar:String = Application.application.parameters.myVar;

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 52 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. Tìm hiểu External API

External API là tên được đặt cho lớp ExternalInterface. Lớp này nằm trong gói flash.external.ExternalInterface và cho phép ActionScript bên trong SWF giao tiếp với ứng dụng lưu trữ. Thông thường đề cập này giao tiếp với JavaScript trong trang web , mặc dù giao tiếp này có thể xảy ra với C#, VB.NET , Python , hoặc các ngôn ngữ khác dùng để nhúng vào Flash Player. Trong phần này , ta sẽ tập trung tìm hiểu về giao tiếp giữa ActionScript và JavaScript trong trình duyệt web.

Ta có thể sử dụng External API để gọi hàm JavaScript từ ứng dụng Flex hoặc gọi một hàm bên trong ứng dụng Flex của trang web. Cho dù bạn chọn kiểu giao tiếp nào , ứng dụng cũng khởi tạo cuộc gọi có thể đợi sự hồi đáp của các ngôn ngữ khác nhau và kết hợp phản ứng trong code của mình. Nói cách khác là các cuộc gọi giữa các ngôn ngữ được đồng bộ.

Ta có thể sử dụng External API chỉ với một trình duyệt web hỗ trợ hoặc ActiveX hay các NPRuntime API. Điều này bao gồm các trình duyệt chủ yếu sau đây:

• Internet Explorer 5.0 và các phiên bản cao hơn của Windows.

• Firefox từ 1.0 trở lên cho cả Windows và Macintosh.

• Mozilla 1.7.5 và trở lên cho cả Windows và Macintosh.

• Netscape 8 và cao hơn cho cả Windows và Macintosh.

• Safari 1.3 và cao hơn cho Macintosh.

2.7.1. Scripting the ExternalInterface class

Ta có thể tìm hiểu External API có sẵn bằng các thuộc tính có sẵn của lớp :

ExternalInterface.available;

Thuộc tính này trả về giá trị Boolean cho biết liệu lớp ExternalInterface đã có sẵn chưa. Có thể tìm thấy id của thẻ hoặc thuộc tính name của thẻ bằng cách sử dụng thuộc tính objected của lớp này :

ExternalInterface.objectID;

Chủ nhiệm đề tài: KS. Bùi Sỹ Vương Trang 53 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

Các thuộc tính này sẽ trả về null nếu ta sử dụng nó với container khác trình duyệt web.

External API có 2 phương thức : call and addCallback. Phương thức call cho phép ActionScript gọi hàm JavaScript trong trang web lưu trữ. Sử dụng addCallback để đăng ký hàm ActionScript như gọi lại có thể truy cập bằng cách sử dụng JavaScript.

Lớp ExternalInterface trong ActionScript 3.0 có 1 chút khác so với ActionScript 2.0. Đối với lớp này , chỉ sử dụng với Flash Player 9 , hoặc nếu dùng với các phiên bản Flash Player khác thì ta phải sử dụng phương thức giao tiếp khác.

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

Ta có thể sử dụng phương thức call để gọi hàm JavaScript từ ActionScript. Ta cũng có thể thông qua tham số để gọi hàm , điều này là tùy chọn :

ExternalInterface.call(functionName:String,

[parameter1:Object, parameter2:Object]);

Khi làm việc với JavaScript , phương thức call tìm kiếm một hàm có tên functionName trong thẻ