Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa
S/v thực hiện: Bùi Thị Phương Thanh Trang 1
TRƯỜNG……………
KHOA…………………
BÁO CÁO TỐT NGHIỆP
Tìm hiểu công nghệ Flex và
xây dựng ứng dụng minh họa
Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa
S/v thực hiện: Bùi Thị Phương Thanh Trang 2
LỜI CẢM ƠN
Để hoàn thành bài báo cáo luận văn tốt nghiệp này, em đã nhận được sự
giúp đỡ và góp ý nhiệt tình của quý thầy cô và các bạn trường Đại học Giao Thông
vận tải TPHCM.
Trước hết em xin chân thành cảm ơn quý thầy cô bạn trường Đai học Giao
Thông vận tải TPHCM,đặc biệt là những thầy cô đã tận tình dạy bảo c em suốt thời
gian học tại trường.
Em xin gửi lời cám ơn sâu sắc đến thầy Trần Đức Doanh đã giành thời gian
và tâm huyết hướng dẫn giúp em hoàn thành báo cáo luận văn tốt nghiệp.
Mặc dù em đã có nhiều cố gắng để hoàn thành báo cáo luận văn tốt
nghiệp,tuy nhiên không thể tránh khỏi những thiếu sót,rất mong nhận được sự đóng
góp của quý thầy cô và các bạn!
TPHCM-Tháng 9-năm 2010
SVTH: Bùi Thị Phương Thanh
Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa
S/v thực hiện: Bùi Thị Phương Thanh Trang 3
Nhận Xét Của Giáo Viên Hướng Dẫn
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
............................................................................................................................................
Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa
S/v thực hiện: Bùi Thị Phương Thanh Trang 4
MỤC LỤC
Chương 1: TỔNG QUAN VỀ FLEX .................................................................... 7
1.1. Sự ra đời của công nghệ Flex: ................................................................................. 7
1.2. Công nghệ Flex: ..................................................................................................... 7
1.3. Đặc điểm của công nghệ Flex: ................................................................................ 8
Chương 2: MXML ............................................................................................... 10
2.1. Đôi nét về XML:................................................................................................... 10
2.1.1 Lịch sử XML: ................................................................................................. 10
2.1.2. Khái niệm chung về XML .............................................................................. 10
2.2. MXML ................................................................................................................. 11
2.2.1. Sơ lược về MXML ......................................................................................... 11
2.2.2. Cấu trúc của một ứng dụng Flex: .................................................................... 12
Chương 3: ACTION SCRIPT TRONG FLEX .................................................. 13
3.1. Phát sinh ActionScript .......................................................................................... 13
3.2. Sử dụng ActionScript để xử lý sự kiện MXML: .................................................... 14
3.3. Sử dụng các khối ActionScript trong file MXML .................................................. 15
3.4. Làm việc với các component Flex ......................................................................... 16
3.4.1. Tham chiếu đến các component ..................................................................... 16
3.4.2. Tạo các visual component Flex trong ActionScript ......................................... 17
3.4.3. Phạm vi (scope) ............................................................................................. 18
3.5 Include và import code ActionScript ...................................................................... 19
3.6. Tạo các component ActionScript .......................................................................... 19
3.6.1 Tìm hiểu về custom class ................................................................................ 19
3.6.2 Tạo ActionScript project ................................................................................ 20
3.6.3 Additional points............................................................................................. 21
3.7. Các sự kiện trong ứng dụng Flex ........................................................................... 22
Chương 4: GIAO DIỆN NGƯỜI DÙNG (USER INTERFACES) .................... 31
4.1. Visual component (Thành phần trực quan) ............................................................ 31
4.2. Data Provider và Collections ................................................................................. 35
4.2.1. Collections ..................................................................................................... 35
4.2.2. Data Provider Component .............................................................................. 36
4.2.3. Chỉ định data provider trong ứng dụng MXML .............................................. 36
4.2.4. Thiết lập data provider trong ActionScript...................................................... 37
4.2.5. Các phương thức truy cập dữ liệu đơn giản .................................................... 38
4.3. Các control thường dùng ....................................................................................... 40
4.4. Container .............................................................................................................. 40
4.5. Load một trang web từ ứng dụng Flex .................................................................. 41
4.5.1 Gửi biến khi gọi các trang web ........................................................................ 42
4.5.2 Gọi JavaScript với navigateToURL ............................................................... 432
4.6 Gửi biến bên trong file SWF .................................................................................. 44
4.6.1 Sử dụng tham số chuỗi truy vấn (querystring parameter) ................................ 44
4.6.2 Sử dụng flashVars ........................................................................................... 46
4.7 Tìm hiểu External API ........................................................................................... 48
4.7.1 Scripting the ExternalInterface class................................................................ 49
Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa
S/v thực hiện: Bùi Thị Phương Thanh Trang 5
4.7.2 Gọi hàm JavaScript bằng cách sử dụng ActionScript ..................................... 498
4.7.3 Gọi hàm ActionScript với JavaScript .............................................................. 49
4.7.4 Hạn chế của External API ............................................................................... 50
4.8 Tìm hiểu về Flash Player security ..................................................................... 52
Chương 5: TRUY CẬP VÀ KẾT NỐI DỮ LIỆU .............................................. 53
5.1. Các component truy cập dữ liệu ........................................................................... .53
5.1.1. HTTPService component ............................................................................... 53
5.1.2. WebService component.................................................................................. 54
5.1.3. RemoteObject component .............................................................................. 55
5.2. Truy cập dữ liệu server-side bằng component HTTPService ................................. 55
5.2.1 Tạo 1 HTTPService request ............................................................................ 59
5.2.2 Making the request .......................................................................................... 59
5.2.3 Nhận phản hồi ................................................................................................. 59
5.2.4 Xác định kiểu trả về ........................................................................................ 60
5.2.5 Truy cập nội dung load ................................................................................... 61
5.2.6 Gửi các biến với request ................................................................................. 62
5.2.7 Chỉ định phương thức request và định dạng ..................................................... 63
5.2.8 Phương thức của lớp HTTPService ................................................................. 63
5.2.9 Event của lớp HTTPService ............................................................................ 64
5.3. Tìm hiểu lớp URLLoader ..................................................................................... 64
5.3.1 Tạo URLLoader request .................................................................................. 64
5.3.2 Thực hiện request ............................................................................................ 64
5.3.3 Nhận Response ............................................................................................... 65
5.3.4 Xác định kiểu trả về ....................................................................................... 65
5.3.5 Gửi biến cùng với request ............................................................................... 66
5.3.6 Xác định phương thức request ......................................................................... 66
5.3.7 Các thuộc tính của lớp URLLoader ................................................................. 67
5.4 Biểu diễn dữ liệu (representing data) ..................................................................... 67
5.4.1. Liên kết dữ liệu (data binding) ....................................................................... 69
5.4.2. Lưu trữ dữ liệu (data models) ......................................................................... 69
5.4.3. Định dạng dữ liệu (data formatting) ............................................................... 70
5.4.4. Kiểm tra tính hợp lệ của dữ liệu (data validation) ........................................... 70
Chương 6: Sự khác nhau giữa flex3 và flex4 ...................................................... 71
6.1 Một số khái niệm tổng quát về flex4 ...................................................................... 72
6.1.1 FXG ................................................................................................................ 72
6.1.2 Layout ............................................................................................................ 72
6.1.3 Spark Components .......................................................................................... 73
6.1.4 So sánh các Spark và thành phần kiến trúc MX: .............................................. 74
6.1.5 Cơ chế render một component ......................................................................... 74
6.1.6 Skinning ......................................................................................................... 75
6.1.7 States .............................................................................................................. 75
6.1.8 Thẻ Declarations ............................................................................................. 75
6.2 Migrating applications to Flex 4............................................................................. 75
6.3 Tổng quan thay đổi trong cấu trúc flex4: ................................................................ 77
6.3.1 Namespaces and packages in Flex 4: ............................................................... 77
6.4 New components and containers ............................................................................ 79