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 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 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 6 6.5 Thay đổi một số cú pháp trong states ..................................................................... 82 6.6 Thay đổi hiệu ứng .................................................................................................. 84 Chương 7: XÂY DỰNG ỨNG DỤNG MINH HỌA .......................................... 85 7.1 Sử dụng states để xây dựng trang web. .................................................................. 85 7.2 Kết nối cơ sở dữ liệu thông qua HTTPService ,Php, và mysql................................ 85 Chương 8: KẾT LUẬN ....................................................................................... 90 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 7 Chương 1: TỔNG QUAN VỀ FLEX 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.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. 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 8 Flex cung cấp một ngôn ngữ hiện đại dựa theo các quy tắc chuẩn và một mô hình lập trình hỗ trợ các mẫu thiết kế chung. Các RIA được tạo ra bởi Flex có thể chạy trên các trình duyệt sử dụng phần mềm Adobe Flash Player hoặc sử dụng Adobe AIR bên ngoài trình duyệt. Sử dụng Framework mã nguồn mở Flex, các nhà lập trình có thể tạo ra các ứng dụng web trực quan và hấp dẫn cho phép khách hàng, đối tác và nhân viên diễn đạt thông tin một cách hiệu quả hơn. 1.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. 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 9  Code MXML và ActionScript được biên dịch thành file binary SWF. 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 10 Chương 2: MXML 2.1. Đôi nét về XML: 2.1.1 Lịch sử XML: XML và HTML đều