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


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

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

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

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


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

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.
Một ứng dụng đơn giản sử dụng MXML:
<?xml version="1.0"?>
<! mxml\HellowWorld.mxml >
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Panel title="My Application"
paddingTop="10"
paddingBottom="10"
paddingLeft="10"
paddingRight="10"

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 12

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.
- Import các lớp ActionScript
- Tạo các ActionScript component
3.1. Phát sinh ActionScript
Khi một file MXML được biên dịch, trình biên dịch sẽ tạo ra một lớp và phát
sinh ActionScript để lớp đó sử dụng.
Một ứng dụng MXML sẽ định nghĩa các subclass của lớp Application, tương tự,
một component MXML sẽ định nghĩa các subclass của component đó.
Tên của subclass là tên của file. Lớp cơ sở là lớp của thẻ lớn nhất. Một ứng dụng
MXML sẽ định nghĩa :
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:

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 15
</mx:Application>

Khi đó, trình biên dịch sẽ lấy thuộc tính click=”…” và phát sinh ra phương
thức xử lý sự kiện như sau:
public function __myButton_click(event:MouseEvent):void {
textarea1.text='Hello World';
}

Khi người dùng nhấn nút click, đoạn code này sẽ thiết lập giá trị text cho
điều khiển TextArea là chuỗi “Hello World” .
Để có thể xem được code phát sinh, người lập trình phải thiết lập giá trị tùy chọn
keep-generated-actionscript là true. Sau đó, trình biên dịch sẽ lưu trữ file *.as trong
thư mục generated, là thư mục con của thư mục chứa file SWF.

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.

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

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

]]>
</mx:Script>
<mx:HBox id="hb1">
<mx:Button label="Create Object" click="createObject()"/>
</mx:HBox>
</mx:Application>
Để lập trình xóa 1 control, người lập trình có thể sử dụng các hàm
removeChild() và removeChildAt(). Để xóa toàn bộ các control trong một
container, người ta sẽ sử dụng hàm removeAllChild().
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 đó.

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

package myPackage {
public class MyClass {
public function MyClass() {
//statements
}
{
}

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

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 22
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:
<mx:Application xmlns:mx=http://www.adobe.com/2006/mxml
xmlns:cmp="myControls.*">
<cmp:MyButton label="Jack"/>
</mx:Application>

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

</mx:Application>
Hầu hết các ứng dụng Flex đều đơn giản hóa việc đăng ký các hàm listener
bên trong thẻ MXML.

<?xml version="1.0"?>
<! events/SimplerEventHandler.mxml >
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
import mx.controls.Alert;

private function myEventHandler(event:Event):void {
Alert.show("An event occurred.");
}
]]></mx:Script>

<mx:Button id="b1" label="Click Me" click="myEventHandler(event)"/>
</mx:Application>

Hai cách viết code trên là tương đươ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

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 24

import mx.controls.Alert;
private function myEventHandler(e:Event):void {
Alert.show("The button '" + e.currentTarget.id + "' was clicked.");

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 25
}
]]></mx:Script>
<mx:Button id="b1" label="Click Me" click="myEventHandler(event)"/>
</mx:Application>

Đăng ký các hàm xử lý sự kiện:
Các phương pháp có thể sử dụng để đăng ký các xử lý sự kiện với các điều
khiển Flex:
1. Định nghĩa hàm xử lý sự kiện bên trong
2. Sử dụng phương thức addEventListener()
3. Tạo lớp xử lý sự kiện và đăng ký các điều khiển để sử dụng lớp này cho việc
xử lý sự kiện.
Đị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 “;”
<?xml version="1.0"?>
<! events/MultipleEventHandlersInline.mxml >