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

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

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

Nhận Xét Của Giáo Viên Hướng Dẫn

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

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

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

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

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

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

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

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

<?xml version="1.0" standalone="yes"?>

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

2.2 MXML

2.2.1 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

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

2.2.2 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ẻ <mx:Application> 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ữ

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

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ẻ <mx:Script>

- Include file ActionScript bên ngoài

class MyApp extends Application

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

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ì

<mx:TextArea id="textarea1" width="155" x="0" y="0"/>

<mx:Button label="Click Me"

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ẻ <mx:Script> 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ẻ <mx:Script> 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

<mx:Script> 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

<mx:Script> Tuy nhiên, một số lệnh có thể nằm bên ngoài các hàm như:

 import

Cấu trúc thẻ <mx:Script> được Adobe khuyến nghị:

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 và các visual container

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

<mx:Button id="myButton" label="Click Me"/>

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

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:

<?xml version="1.0"?>

<! usingas/ASVisualComponent.mxml >

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script><![CDATA[

import mx.controls.Button;

public var button2:Button;

public function createObject():void {

button2 = new Button();

button2.label = "Click Me";

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

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ẻ <mx:Script source="filename">

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

3.6 Tạo các component ActionScript

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

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;

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 !

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ẻ <mx:Applycation> 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

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

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

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

<?xml version="1.0"?>

<! events/SimpleEventHandler.mxml >

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

creationComplete="initApp();">

private function myEventHandler(event:Event):void {

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

private function myEventHandler(event:Event):void {

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

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

private function myEventHandler(e:Event):void {

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

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:

private function myEventHandler(e:Event):void {

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

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

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

}

]]></mx:Script>

<mx:Button id="b1"

label="Do Both Actions"

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

/>

<mx:Label id="l1" text="{s}"/>

<mx:Button id="b2" label="Reset" click="s='';"/>

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

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

}

]]></mx:Script>

<mx:Button id="b1" label="Do Both Actions"/>

<mx:Label id="l1" text="{s}"/>

<mx:Button id="b2" label="Reset" click="s='';"/>

</mx:Application>

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

private function submitForm(e:Event):void {

// Handle event here

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

<mx:Script><![CDATA[

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);

}

]]></mx:Script>

<mx:Button id="b1" label="Click Me"/>

<mx:Button id="b2" label="Click Me, Too"/>

</mx:Application>

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

<mx:ComboBox dataProvider="{myArray}"/>

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

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

Thuộc tính keyCode và charCode:

Các thuộc tính keyCode và charCode là giá trị để xác định phím nào được nhấn Thuộc tính keyCode là một giá trị số tương ứng với giá trị của phím trên bàn phím Thuộc tính charCode là giá trị số của phím trong bộ kí tự hiện thời (bộ kí tự mặc định là UTF-8, có hỗ trợ ASCII) Điểm khác nhau chủ yếu giữa keyCode và charCode: giá trị keyCode đại diện từng phím riêng biệt trên bàn phím, giá trị charCode đại diện cho từng kí tự riêng biệt

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

<![CDATA[

public function handleClick():void {

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

Cú pháp cấu hình các component bằng MXML và ActionScript

MXML example ActionScript example

Read-only

property

var theClass:String=mp1.className;

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

<mx:Fade id="myFade" duration="5000"/>

<mx:Image

creationCompleteEffect="{myFade}"

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

</mx:Application>

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

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

 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

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

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

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

<mx:Object label="AL" data="Montgomery"/>

<mx:Object label="AK" data="Juneau"/>

<mx:Object label="AR" data="Little Rock"/>

</mx:ArrayCollection>

</mx:ComboBox>

</mx:Application>

-Truy cập dữ liệu bằng cách sử dụng các collection interface

public var myICV:ICollectionView = indeterminateCollection;

<mx:ComboBox id="cb1" dataProvider="{myICV}" initialize="sortICV()"/>

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

private var DGArray:ArrayCollection = new ArrayCollection([

{Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},

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

// Initialize initDG ArrayCollection variable from the ArrayCollection

public function initData():void {

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

 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

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

public function changeCollection():void {

// Get the original collection length

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

// Show that the base Array has been changed

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

}

]]>

</mx:Script>

<mx:ComboBox id="myCB" rowCount="7" dataProvider="{myAC}"/>

<mx:TextArea id="ta1" height="75" width="300"/>

<mx:Button label="rearrange list" click="changeCollection();"/>

</mx:Application>

4.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…

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