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




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 11

<?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.
Một ứng dụng đơn giản sử dụng MXML:
<?xml version="1.0"?>
<! mxml\HellowWorld.mxml >
<mx:Application xmlns:mx="
<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

>
<mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/>
</mx:Panel>
</mx:Application>

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




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

S/v thực hiện: Bùi Thị Phương Thanh Trang 14
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ì.
3.2. Sử dụng ActionScript để xử lý sự kiện MXML:
Người lập trình có thể dùng ActionScript bằng cách đưa code ActionScript
vào bên trong thẻ MXML để xử lý sự kiện, như ví dụ sau:
<?xml version="1.0"?>
<! usingas/HelloWorldAS.mxml >
<mx:Application xmlns:mx="
m/2006/mxml" layout="absolute">
<mx:Panel title="My Application" height="128" x="226" y="24"
layout="absolute">
<mx:TextArea id="textarea1" width="155" x="0" y="0"/>
<mx:Button label="Click Me"
click="textarea1.text='Hello World';"
width="92"
x="31.5"
y="56"
/>
</mx:Panel>

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.

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




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 16
 var
 include
 const
 namespace
 use namespace
Nội dung bên trong khối <mx:Script> thường được bao bên trong cấu trúc
CDATA. Điều này sẽ ngăn chặn trình biên dịch hiếu đoạn code ActionScript như
XML, cho phép code ActionScript được biên dịch chính xác.
Cấu trúc thẻ <mx:Script> được Adobe khuyến nghị:
<mx:Script>
<![CDATA[

]]>
</mx:Script>

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

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 >




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 18
<mx:Application xmlns:mx="
<mx:Script><![CDATA[
import mx.controls.Button;
public var button2:Button;

public function createObject():void {
button2 = new Button();
button2.label = "Click Me";
hb1.addChild(button2);
}

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

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 .




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 20

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

S/v thực hiện: Bùi Thị Phương Thanh Trang 21
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;

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

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="
creationComplete="initApp();">




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 23
<mx:Script><![CDATA[
import mx.controls.Alert;

private function initApp():void {
b1.addEventListener(MouseEvent.CLICK, myEventHandler);
}

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

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

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

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 đó
<?xml version="1.0"?>
<! events/EventTypeHandler.mxml >
<mx:Application xmlns:mx="
<mx:Script><![CDATA[
import mx.controls.Alert;

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

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

</mx:Application>

Chỉ định đối tượng sự kiện:
function myEventListener(e:Event):void { }
import mx.events.ToolTip
function myEventListener(e:ToolTipEvent):void { }

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:
<?xml version="1.0"?>
<! events/AccessingCurrentTarget.mxml >
<mx:Application xmlns:mx="
<mx:Script><![CDATA[

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 >

<mx:Application xmlns:mx="
<mx:Script><![CDATA[
[Bindable]
private var s:String = "";

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"