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 xây dựng ứng dụng minh họa TRƯỜNG…………… KHOA………………… BÁO CÁO TỐT NGHIỆP Tìm hiểu công nghệ Flex xây dựng ứng dụng minh họa S/v thực hiện: Bùi Thị Phương Thanh Trang LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Tìm hiểu cơng nghệ flex xây dựng ứng dụng minh họa LỜI CẢM ƠN Để hoàn thành báo cáo luận văn tốt nghiệp này, em nhận giúp đỡ góp ý nhiệt tình q thầy 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 thầy tận tình dạy bảo c em suốt thời gian học 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 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 để hồn thành báo cáo luận văn tốt nghiệp,tuy nhiên tránh khỏi thiếu sót,rất mong nhận đóng góp q thầy bạn! TPHCM-Tháng 9-năm 2010 SVTH: Bùi Thị Phương Thanh S/v thực hiện: Bùi Thị Phương Thanh Trang LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Tìm hiểu cơng nghệ flex xây dựng ứng dụng minh họa Nhận Xét Của Giáo Viên Hướng Dẫn S/v thực hiện: Bùi Thị Phương Thanh Trang LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Tìm hiểu cơng nghệ flex xây dựng ứng dụng minh họa MỤC LỤC Chương 1: TỔNG QUAN VỀ FLEX 1.1 Sự đời công nghệ Flex: 1.2 Công nghệ Flex: 1.3 Đặc điểm công nghệ Flex: Chương 2: MXML 10 2.1 Đôi nét XML: 10 2.1.1 Lịch sử XML: 10 2.1.2 Khái niệm chung XML 10 2.2 MXML 11 2.2.1 Sơ lược MXML 11 2.2.2 Cấu trúc ứ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ý kiện MXML: 14 3.3 Sử dụng khối ActionScript file MXML 15 3.4 Làm việc với component Flex 16 3.4.1 Tham chiếu đến component 16 3.4.2 Tạo visual component Flex ActionScript 17 3.4.3 Phạm vi (scope) 18 3.5 Include import code ActionScript 19 3.6 Tạo component ActionScript 19 3.6.1 Tìm hiểu custom class 19 3.6.2 Tạo ActionScript project 20 3.6.3 Additional points 21 3.7 Các kiện ứ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 Collections 35 4.2.1 Collections 35 4.2.2 Data Provider Component 36 4.2.3 Chỉ định data provider ứng dụng MXML 36 4.2.4 Thiết lập data provider ActionScript 37 4.2.5 Các phương thức truy cập liệu đơn giản 38 4.3 Các control thường dùng 40 4.4 Container 40 4.5 Load trang web từ ứng dụng Flex 41 4.5.1 Gửi biến gọi trang web 42 4.5.2 Gọi JavaScript với navigateToURL 432 4.6 Gửi biến bên 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 S/v thực hiện: Bùi Thị Phương Thanh Trang LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Tìm hiểu cơng nghệ flex xây dựng ứng dụng minh họa 4.7.2 Gọi hàm JavaScript 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ế External API 50 4.8 Tìm hiểu 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 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 liệu server-side component HTTPService 55 5.2.1 Tạo 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ả 60 5.2.5 Truy cập nội dung load 61 5.2.6 Gửi biến với request 62 5.2.7 Chỉ định phương thức request định dạng 63 5.2.8 Phương thức lớp HTTPService 63 5.2.9 Event 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 request 64 5.3.3 Nhận Response 65 5.3.4 Xác định kiểu trả 65 5.3.5 Gửi biến 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 lớp URLLoader 67 5.4 Biểu diễn liệu (representing data) 67 5.4.1 Liên kết liệu (data binding) 69 5.4.2 Lưu trữ liệu (data models) 69 5.4.3 Định dạng liệu (data formatting) 70 5.4.4 Kiểm tra tính hợp lệ liệu (data validation) 70 Chương 6: Sự khác flex3 flex4 71 6.1 Một số khái niệm tổng quát flex4 72 6.1.1 FXG 72 6.1.2 Layout 72 6.1.3 Spark Components 73 6.1.4 So sánh Spark thành phần kiến trúc MX: 74 6.1.5 Cơ chế render component 74 6.1.6 Skinning 75 6.1.7 States 75 6.1.8 Thẻ Declarations 75 6.2 Migrating applications to Flex 75 6.3 Tổng quan thay đổi cấu trúc flex4: 77 6.3.1 Namespaces and packages in Flex 4: 77 6.4 New components and containers 79 S/v thực hiện: Bùi Thị Phương Thanh Trang LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Tìm hiểu cơng nghệ flex xây dựng ứng dụng minh họa 6.5 Thay đổi số cú pháp 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 sở liệu thông qua HTTPService ,Php, mysql 85 Chương 8: KẾT LUẬN 90 S/v thực hiện: Bùi Thị Phương Thanh Trang LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Tìm hiểu cơng nghệ flex xây dựng ứng dụng minh họa Chương 1: TỔNG QUAN VỀ FLEX 1.1 Sự đời công nghệ Flex: Ngày nay, đời web hệ (web 2.0) hình thành nhu cầu tạo ứng dụng web gọi RIA ( Rich Internet Application), hoạt động tương tự ứng dụng desktop truyền thống Để tạo RIA, có giải pháp:  DHTML (HTML, CSS, JavaScript) kết hợp với Ajax: Đây công cụ mạnh HTML khơng phải cơng cụ trình diễn, mà chuẩn tài liệu Ngoài ra, JavaScript chưa đủ mạnh, thiếu chặt chẽ, tương thích với trình duyệt cịn hạn chế  Flash (cơng nghệ vector Adobe): Ngày nay, công nghệ cải tiến nhiều, làm ứng dụng RIA tốt Nhưng Flash sinh để viết ứng dụng, cơng cụ lập trình khơng chun nghiệp, giao diện lập trình cịn hạn chế, chi phí viết ứng dụng lớn thiếu thành phần giao diện thư viện hỗ trợ Để khắc phục tình trạng này, Adobe cho đời công nghệ Flex – tảng công nghệ, công cụ phát triển ứng dụng RIA chun nghiệp Với Flex, lập trình viên kết hợp phương pháp thiết kế kéo thả phương pháp viết source code, giúp xây dựng phần ứng dụng cách thích hợp Flex có thành phần chính: MXML ActionScript 3.0 1.2 Cơng nghệ Flex: Flex framework mã nguồn mở, miễn phí dùng để xây dựng ứng dụng web có tính tương tác cao triển khai thống tất trình duyệt, máy tính desktop hệ điều hành S/v thực hiện: Bùi Thị Phương Thanh Trang LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Tìm hiểu cơng nghệ flex xây dựng ứng dụng minh họa Flex cung cấp ngôn ngữ đại dựa theo quy tắc chuẩn mơ hình lập trình hỗ trợ mẫu thiết kế chung Các RIA tạo Flex chạy trình duyệt sử dụng phần mềm Adobe Flash Player sử dụng Adobe AIR bên ngồi trình duyệt Sử dụng Framework mã nguồn mở Flex, nhà lập trình tạo ứng dụng web trực quan hấp dẫn cho phép khách hàng, đối tác nhân viên diễn đạt thông tin cách hiệu 1.3 Đặc điểm công nghệ Flex: Cơng nghệ Flex có đặc điểm sau:  Các ứng dụng Flex ứng dụng Flash:  Flex công nghệ để tạo RIA dựa tảng Flash  Các ứng dụng Flex sử dụng Flash Player trở lên  Giống tất flash RIA, file flex SWF tiến hành client nhiều server  Flex framework chứa lớp thư viện định nghĩa sẵn công cụ cần thiết để tạo ứng dụng Flex  Flex framework SDK free IDE dựa Eclipse gọi Flex Builder  Flex framework bao gồm trình biên dịch  Các thư viện lớp ứng dụng dịch vụ cung cấp cho nhà lập trình component chuẩn cơng cụ để phát triển nhanh ứng dụng  Các ứng dụng Flex viết cách sử dụng MXML ActionScript 3.0  MXML ngôn ngữ đánh dấu dựa XML, sử dụng chủ yếu để hiển thị layout ứng dụng  ActionScript ngôn ngữ lập trình hướng đối tượng ECMAScriptcompliant sử dụng chủ yếu application logic S/v thực hiện: Bùi Thị Phương Thanh Trang LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Tìm hiểu cơng nghệ flex xây dựng ứng dụng minh họa  Code MXML ActionScript biên dịch thành file binary SWF S/v thực hiện: Bùi Thị Phương Thanh Trang LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Tìm hiểu cơng nghệ flex xây dựng ứng dụng minh họa Chương 2: MXML 2.1 Đôi nét XML: 2.1.1 Lịch sử XML: XML HTML phát triển từ SGML (Standard Generalized Markup Language) – ngôn ngữ đánh dấu tiêu chuẩn tổng quát, ngôn ngữ biểu thị liệu ứng dụng xử lý văn đa dạng có cấu trúc tinh vi Tuy nhiên, SGML tồn nhược điểm rắc rối, khó học khó sử dụng Vào năm 1990, Tim Berners – Lee tạo HTML, phần nhỏ SGML dễ sử dụng Tuy nhiên, vào sau thời gian, người ta bắt đầu nhận thấy giới hạn HTML Vào năm 1996, Jon Bosak khởi động nhóm cộng tác W3C SGML, gọi nhóm XML Mục đích đơn giản hóa SGML để dễ dùng HTML, đồng thời mạnh mẽ Bản specification XML đời vào tháng 11 năm 1996 Tháng năm 1997, Microsoft áp dụng XML Tháng năm 1998, Microsoft cho đời chương trình miễn phí MSXSL để generate trang HTML từ cặp trang XML XSL Tháng năm 1998, W3C phê chuẩn cho thức thi hành version 1.0 XML Specification 2.1.2 Khái niệm chung XML XML viết tắt chữ eXtensible Markup Language (ngôn ngữ nâng cấp mở rộng) quy luật cách chia tài liệu làm nhiều phần, rối đánh đáu ráp phần khác lại để dễ nhận biết chúng Khác với HTML, XML cho phép người dùng tự đặt tên thẻ cần Do đó, XML khơng giới hạn số thẻ người dùng không cần phải nhớ bất thẻ Mỗi trang XML bắt đầu lệnh xử lý XML (XML processing instruction) Nó đặt cặp thẻ S/v thực hiện: Bùi Thị Phương Thanh Trang 10 LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Tìm hiểu cơng nghệ flex xây dựng ứng dụng minh họa } Theme Change: Trong flex3 theme control goi halo flex gọi spark Trong flex4 tiếp tục dùng Halo Theme flex3 flex4 bao gồm ln theme Flex3.Để biên dịch sử dụng Halo ta sử dụng trình biên dịch thêm đối số_tương thích phiên bản=3.0 Trong flashbuilder4 làm điều Properties Panel Trong phần Properties Panel, chọn, Flex Compiler nhấp vào hộp kiểm cho "Sử dụng Flex chế độ tương thích" Figure 6.1 Using Flex Compatibility Mode Ngoài ra, theme thay đổi từ giao diện mặc định Spark để Halo Properties -> Flex Chủ đề bảng điều khiển.Trong bảng "" Flex Theme Nếu bạn chọn để sử dụng với chủ đề Spark mới, lưu ý nhiều phong cách mà làm việc với chủ đề Halo không làm việc chủ đề Spark Chủ đề Spark hỗ trợ số giới hạn phong cách Để hiểu phong cách dành cho SkinSpark, nên tham khảo ASDoc Đối với Style liệt kê cho thành phần, "Chủ đề" định Nếu khơng có chủ đề được, sau đó, phong cách có sẵn cho Halo chủ đề Spark Flex thêm vào da Ellipsoid, thiết kế để sử dụng cho nhanh chóng giả-up Ngồi thay đổi chủ đề, preloader mặc định thay đổi đến mx.preloaders.SparkDownloadProgressBar ứng dụng flex4 Preloader có S/v thực hiện: Bùi Thị Phương Thanh Trang 77 LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Tìm hiểu cơng nghệ flex xây dựng ứng dụng minh họa dunglượng nhẹ nên rút ngắn thời gian khởi động chút Nếu muốn sử dụng trình nạp flex3 trước kia, bạn cần thay đổi dòng code Trong Application bạn thêm từ khóa sau: preloader="mx.preloaders.DownloadProgressBar" 6.3 Tổng quan thay đổi cấu trúc flex4: 6.3.1 Namespaces and packages in Flex 4: Trong flex3 lớp nằm gói mx.* package flex nằm spark.*package Trong flex4 để tránh xung đột MXML, flex SDK kèm với không gian khác (namespace) MXML 2006, MXML 2009, Spark, and Mx MXML 2006 : Namespace ngơn ngữ MXML flex3 tiếp tục sử dụng flex4 URI: http://www.adobe.com/2006/mxml Default Prefix: mx MXML2009: Đây hồn tồn namespace ngơn ngữ flex4, không chứa compopnent tags URI: http://ns.adobe.com/mxml/2009 Default Prefix: fx Spark: Namespace bao gồm tất thành phần Spark Nó sử dụng kết hợp với không gian tên MXML ngôn ngữ năm 2009 URI: library://ns.adobe.com/flex/spark Default Prefix: s S/v thực hiện: Bùi Thị Phương Thanh Trang 78 LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Tìm hiểu cơng nghệ flex xây dựng ứng dụng minh họa MX: Name space bao gồm tất thành phần MX Nó sử dụng kết hợp với không gian tên MXML ngôn ngữ năm 2009 URI: library://ns.adobe.com/flex/mx Default Prefix: mx Dưới ví dụ nhỏ có sử dụng tên miền không gian năm 2009 MXML, Spark, Halo Flex để tạo ứng dụng đơn giản Sử dụng DateChooser MX Button Spark Flex4 SDK có thêm nhiều namspace css.Nếu sử dụng không gian tên MXML 2009, spark MX với selectors Type cần phải định nghĩa tập không gian tên CSS để tránh trùng tên @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; s|Button { color: #FF0000; } mx|DateChooser { color: #FF0000; } S/v thực hiện: Bùi Thị Phương Thanh Trang 79 LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Tìm hiểu cơng nghệ flex xây dựng ứng dụng minh họa 6.4 New components and containers Sau bảng thống kê khác hai phiên S/v thực hiện: Bùi Thị Phương Thanh Trang 80 LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Tìm hiểu cơng nghệ flex xây dựng ứng dụng minh họa Hình 6.3 : Bảng thống kê khác hai phiên Adobe khuyến khích sử dụng thành phần MX container với thành phần Spark Bởi Adobe tiếp tục xây dựng thành phần lớp sở (UIComponent), cần có đầy đủ khả tương tác Spark MX.Đây bảng thành phần container flex3 khơng có tương ứng spark flex4 S/v thực hiện: Bùi Thị Phương Thanh Trang 81 LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Tìm hiểu công nghệ flex xây dựng ứng dụng minh họa Để sử dụng Navigator MX (ViewStack, Accordion, TabNavigator) kết hợp với spark Các navigator nên nằm tag NavigatorContent, không sử dụng spark MX label="bar">