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 đượ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. 2.1.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ẻ <? ?> [...]... Trang 30 Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa Chương 4: GIAO DIỆN NGƯỜI DÙNG (USER INTERFACES) 4.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. .. Trang 12 Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa Chương 3: ACTION SCRIPT 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... Thanh Trang 18 Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa 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 3.5 Include và import code ActionScript Sự khác nhau giữa include và import code... Trang 11 Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa > 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. .. Trang 34 Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa 4.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... đươ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 S/v thực hiện: Bùi Thị Phương Thanh Trang 23 Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa 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... Thanh Trang 16 Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa 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... Trang 21 Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa 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: 3.7 Các sự kiện trong ứng dụng Flex Các mô... trình bày của dữ liệu như lọc, sắp xếp… Sử dụng một collection để thiết lập nhiều component khác từ cùng một nguồn dữ liệu Sử dụng các collection để chuyển dữ liệu nguồn đến các component Sử dụng các phương thức collection để truy cập đến dữ liệu trong data source S/v thực hiện: Bùi Thị Phương Thanh Trang 35 Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa Các collection interface: IList, IcollectionView,... 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 : S/v thực hiện: Bùi Thị Phương Thanh Trang 28 Tìm hiểu công nghệ flex và xây dựng ứng dụng minh họa 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 . 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 . 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