Khóa luận tốt nghiệp: Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa

Mục tiêu nghiên cứu đề tài là tìm hiểu ngôn ngữ lập trình ActionScript 3.0 và công nghệ Flex; qua đó xây dựng chương trình quản lý album ảnh và tạo slideshow hình ảnh trực tuyến.

VŨ TẤN HƯNG NGUYỄN THỊ MINH TOÀN

TÌM HIỂU NGÔN NGỮ LẬP TRÌNH TRONG ADOBE FLASH

VÀ XÂY DỰNG ỨNG DỤNG MINH HỌA

KHÓA LUẬN TỐT NGHIỆP CỬ NHÂN CNTT

TP HCM, NĂM 2008

VŨ TẤN HƯNG – 05HC084 NGUYỄN THỊ MINH TOÀN – 05HC192

TÌM HIỂU NGÔN NGỮ LẬP TRÌNH TRONG ADOBE FLASH

VÀ XÂY DỰNG ỨNG DỤNG MINH HỌA

KHÓA LUẬN TỐT NGHIỆP CỬ NHÂN CNTT

GIÁO VIÊN HƯỚNG DẪN Thạc sĩ LƯƠNG HÁN CƠ

KHÓA 2005 - 2008

LỜI CÁM ƠN

Chúng em chân thành cám ơn các Thầy Cô Khoa Công nghệ Thông tin trường Đại học Khoa học Tự Nhiên đã hướng dẫn, giảng dạy tận tình và truyền đạt cho chúng

em những kiến thức vô cùng quý báu trong suốt những năm học vừa qua

Chúng em xin gửi lời cám ơn chân thành và sâu sắc nhất đến Thầy Lương Hán Cơ

đã tận tụy hướng dẫn, động viên và giúp đỡ chúng em trong suốt thời gian thực hiện đề tài

Chúng em xin cám ơn sự giúp đỡ tận tình của Thầy Lương Vĩ Minh

Chúng con xin gửi lòng biết ơn đến Ông Bà, Cha Mẹ đã luôn chăm sóc, ủng hộ chúng con trên suốt những bước đường học vấn

Xin cám ơn các anh chị và bạn bè đã động viên và giúp đỡ chúng em trong suốt thời gian học tập và nghiên cứu

Mặc dù chúng em đã cố gắng hết sức để hoàn thành luận văn một cách tốt nhất nhưng chắc chắn sẽ không tránh khỏi những thiếu xót Chúng em kính mong nhận được sự cảm thông và tận tình chỉ bảo của quý Thầy Cô và các bạn

Sinh viên thực hiện

Vũ Tấn Hưng – Nguyễn Thị Minh Toàn

MỤC LỤC

Chương 1 Tổng quan 8

Chương 2 FLEX 11

2.1 Giới thiệu 11

2.1.1 Những công nghệ trong ứng dụng Flex 11

2.1.2 Sử dụng những phần tử của Flex 14

2.1.3 Bảo mật của Flash Player 15

2.1.4 Làm việc với dịch vụ dữ liệu - Data services 15

2.1.5 Sự khác biệt giữa ứng dụng HTML và ứng dụng Flex Web 16

2.1.6 Cách làm việc của ứng dụng Flex 16

2.2 Làm việc với dữ liệu 17

2.2.1 Sử dụng mô hình dữ liệu 17

2.2.2 Kết buộc dữ liệu 19

2.2.3 Kết buộc dữ liệu cho lớp tự định nghĩa 21

2.3 Giao tiếp dữ liệu từ xa 21

2.3.1 Việc yêu cầu và nhận giao tiếp dữ liệu 22

2.3.2 Kết nối Real-Time/ Socket 27

2.3.3 Tải file lên và tải file xuống 27

2.4 Các thành phần giao diện 28

2.4.1 Khái quát 28

2.4.2 Khởi tạo các thành phần giao diện 30

2.4.3 Các thuộc tính phổ biến của các thành phần giao diện 30

2.4.4 Xử lý sự kiện 31

2.5 Làm việc với Media 33

2.5.1 Những kiểu Media được hỗ trợ trong Flex 33

2.5.2 Cách thêm Media vào ứng dụng 33

2.5.3 Làm việc với các loại Media khác nhau 36

2.6 Quản lý các trạng thái 41

2.6.1 Khởi tạo trạng thái 42

2.6.2 Áp dụng các trạng thái 42

2.6.3 Định nghĩa các trạng thái dựa trên các trạng thái có sẵn 42

2.6.4 Thêm bớt các thành phần 43

2.6.5 Thiết lập các thuộc tính 44

2.6.6 Thiết lập các kiểu 45

2.6.7 Thiết lập bộ điều khiển sự kiện - Event Handlers 45

2.7 Sử dụng các hiệu ứng và sự chuyển tiếp giữa các trạng thái 46

2.7.1 Sử dụng hiệu ứng 46

2.7.2 Transitions - Sự chuyển tiếp giữa các trạng thái 49

Chương 3 ActionScript 51

3.1 Giới thiệu 51

3.2 Các thành phần cơ bản trong ActionScript 51

3.2.1 Lớp và đối tượng 51

3.2.2 Packages 53

3.2.3 Hàm và biến 53

3.3 Sự kiện và xử lý sự kiện 57

3.3.1 Sự kiện ActionScript cơ bản 57

3.3.2 Đăng ký một phương thức đăng ký sự kiện - Event listener 58

3.3.3 Hủy đăng ký một phương thức đăng ký sự kiện - Event listener 61

3.3.4 Đối tượng Target 61

3.3.5 Quyền ưu tiên đối với phương thức đăng ký sự kiện - Event Listener 61

3.4 ActionScript động 62

3.4.1 Biến động 63

3.4.2 Tự động thêm hành vi mới cho một thể hiện 63

3.4.3 Tham chiếu động cho biến và phương thức 64

3.5 XML và E4X 65

3.5.1 Dữ liệu phân cấp XML 65

3.5.2 Truy cập dữ liệu XML 67

3.5.3 Thao tác dữ liệu XML với câu lệnh for-each-in và for-in 69

3.5.4 Trích lọc dữ liệu XML 69

3.5.5 Thay đổi hoặc tạo mới nội dung XML 71

3.5.6 Thêm thuộc tính hoặc thành phần mới 72

3.5.7 Xóa thành phần và thuộc tính 73

3.5.8 Nạp dữ liệu XML 73

Chương 4 Ứng dụng 75

4.1 Giới thiệu ứng dụng 75

4.2 Yêu cầu chức năng 75

4.3 Yêu cầu phi chức năng 76

4.4 Mô hình use case 76

4.5 Mô tả ứng dụng 77

4.5.1 Màn hình đăng nhập 77

4.5.2 Màn hình đăng ký 79

4.5.3 Màn hình quản lý 80

4.5.4 Màn hình xem ảnh 86

4.5.5 Màn hình tạo slideshow 90

4.6 Cơ sở dữ liệu 93

4.6.1 Mô hình quan hệ 93

4.6.2 Thuyết minh mô hình quan hệ và thuộc tính 94

4.6.3 Mô tả ràng buộc về khóa 95

Chương 5 Tổng kết 96

Chương 6 Danh mục tài liệu tham khảo 97

Chương 7 Phụ lục 98

Phần 1: FLEX 98

7.1 Các sự kiện hiệu ứng 98

7.2 Chuẩn hóa và định dạng dữ liệu 99

7.2.1 Chuẩn hóa dữ liệu người dùng nhập vào 99

7.2.2 Định dạng dữ liệu 101

7.3 Tùy biến giao diện 102

7.3.1 Sử dụng các Style 102

7.3.2 Sử dụng Skin 102

7.3.3 Dùng Themes 103

7.3.4 CSS thực thi 104

Phần 2: ActionScript 105

7.4 Điều kiện – Vòng lập – Toán tử 105

7.4.1 Điều kiện 105

7.5 Phương thức tĩnh và biến tĩnh 106

7.6 Kế thừa 106

7.6.1 Tái định nghĩa – ghi đè một phương thức 107

7.6.2 Phương thức Super() 108

7.6.3 Ngăn chặn kế thừa và phương thức định nghĩa lại 108

7.6.4 Composition 109

7.7 Interfaces 109

7.7.1 Tại sao phải dùng Interface? 110

7.7.2 Cú pháp và cách sử dụng interface 110

7.7.3 Kế thừa interface 111

7.8 Mảng 112

7.8.1 Thêm phần tử vào mảng 112

7.8.2 Xóa bỏ phần tử trong mảng: 114

7.8.3 Phương thức toString(): 114

7.8.4 Mảng đa chiều 115

7.9 Xử lý lỗi 115

7.10 XML và E4X 116

7.10.1 Truy cập những nút văn bản 116

7.10.2 Truy cập nút cha 117

7.10.3 Truy cập nút anh em 118

7.10.4 Truy cập những thuộc tính 118

7.10.5 Truy cập các nút hậu duệ 119

DANH MỤC CÁC BẢNG

Bảng 1: Các thành phần giao diện 29

Bảng 2: Một số sự kiện của thành phần chuẩn trong Flex 33

Bảng 3: Những kiểu media được hỗ trợ trong Flex 33

Bảng 4 : Một số hiệu ứng cơ bản 46

Bảng 5: Các lớp tự nhiên của ActionScript 52

Bảng 6: Điều khiển truy xuất biến 54

Bảng 7: Điều khiển truy xuất hàm 54

Bảng 8: Mô tả chi tiết màn hình đăng nhập 77

Bảng 9: Mô tả chi tiết màn hình đăng ký 80

Bảng 10: Mô tả chi tiết màn hình quản lý 83

Bảng 11: Mô tả chi tiết màn hình xem ảnh dạng thumbnail 87

Bảng 12: Mô tả chi tiết màn hình xem ảnh dạng carousel 87

Bảng 13: Mô tả chi tiết màn hình xem ảnh dạng list 89

Bảng 14: Mô tả chi tiết màn hình xem thông tin ảnh 89

Bảng 15: Mô tả chi tiết màn hình tạo slideshow 91

Bảng 16:Thuyết minh bảng NGUOIDUNG 94

Bảng 17:Thuyết minh bảng HINH 94

Bảng 18:Thuyết minh bảng ALBUM 94

Bảng 19:Thuyết minh bảng CHITIETALBUM 95

Bảng 20: Mô tả ràng buộc khóa chính 95

Bảng 21: Mô tả ràng buộc khóa ngoại 95

DANH MỤC CÁC HÌNH

Hình 1: Silverlight 8

Hình 2: Flex 9

Hình 3: Những ứng dụng sử dụng công nghệ Flex 10

Hình 4: Flex SDK 11

Hình 5: Flex Framework 12

Hình 6: Flex Builder 2 13

Hình 7: Mô hình nguồn – biên dịch – triển khai của ứng dụng Flex 16

Hình 8: Mối quan hệ giữa các thành phần giao diện và các lớp Flash Player 29

Hình 9: Mô hình use case 76

Hình 10: Màn hình đăng nhập 77

Hình 11: Màn hình đăng ký 79

Hình 12: Màn hình quản lý 81

Hình 13: Màn hình xem ảnh dạng thumbnail 86

Hình 14: Màn hình xem ảnh dạng carousel 87

Hình 15: Màn hình xem ảnh dạng list 88

Hình 16: Màn hình xem thông tin ảnh 89

Hình 17: Màn hình tạo slideshow 90

Hình 18: Mô hình quan hệ 93

TÓM TẮT KHÓA LUẬN

Nội dung khóa luận được chia làm 7 chương:

Chương 1: Tổng quan

Phân tích đánh giá các hướng nghiên cứu đã có liên quan đến đề tài

Lí do chọn đề tài, mục đích, đối tượng và phạm vi nghiên cứu

Chương 2: Tìm hiểu công nghệ Flex

Giới thiệu về công nghệ Flex

Lí do vì sao chọn công nghệ Flex để triển khai ứng dụng cùng với những ưu khuyết điểm của Flex

Các kỹ thuật trong công nghệ Flex

Chương 3: Tìm hiểu ngôn ngữ ActionScript

Giới thiệu về ngôn ngữ ActionScript

Các thành phần cơ bản và kỹ thuật trong ActionScript

Chương 4: Mô tả ứng dụng

Giới thiệu về ứng dụng

Các yêu cầu trong ứng dụng

Phân tích ứng dụng theo mô hình UML (Unified Model Language)

Một số thành phần, đối tượng và kỹ thuật tiêu biểu sử dụng trong ứng dụng

Chương 1 Tổng quan

Trong thời gian gần đây, hạ tầng CNTT phát triển với những băng thông kết nối

Internet rộng được triển khai đại trà dẫn đến nhu cầu sử dụng các ứng dụng trực

tuyến (RIA: Rich Internet Appliacation) gia tăng mạnh mẽ RIA là những ứng dụng

triển khai trên nền Web, được thi hành trên các trình duyện Web nhưng có tính năng và đặc điểm như các ứng dụng trên nền máy đơn thông thường (Desktop Application) Những ưu điểm của các chương trình RIA là người dùng không cần cài đặt chương trình, việc cập nhật chương trình dễ dàng, nhanh chóng, người dùng

có thể sử dụng chương trình từ bất kỳ một máy tính nào có kết nối Internet,vv… RIA sẽ làm mờ ranh giới giữa các ứng dụng trên nền desktop và trực tuyến Đây được cho là tương lai của các ứng dụng trực tuyến Để tạo RIA, các nhà phát triển

có thể sử dụng những giải pháp sauc:

Một là dùng DHTML (gồm HTML, CSS, Javascript) kết hợp với AJAX Đây là công cụ rất mạnh, tuy nhiên HTML không phải là một công cụ trình diễn, mà là một chuẩn tài liệu Javascript chưa đủ mạnh, và thiếu chặt chẽ DHTML thường gặp vấn

đề về tương thích với các trình duyệt

Giải pháp thứ hai là sử dụng công nghệ SilverLight

của Microsoft, một plug-in hoạt động trên đa nền

tảng, đa trình duyệt cho các chuyên gia phát triển

ứng dụng Plug-in này có thể cho phép phát triển các

ứng dụng một cách phong phú gồm có media, khả

năng tương tác và hoạt ảnh Silverlight plug-in có thể

làm việc trên các trình duyệt Internet Explorer và

Firefox trong Windows và Firefox cũng như trình

duyệt Safari trên hệ điều hành Mac

Hình 1: Silverlight

Nhưng dường như công nghệ này chỉ đang trong giai đoạn phát triển, các tài liệu hỗ trợ kĩ thuật cho công nghệ chưa thật sự đầy đủ, phong phú; công nghệ chưa hỗ trợ

hệ điều hành Linux và người sử dụng cần thêm thời gian để đánh giá và lựa chọn Giải pháp thứ ba là dùng Flash (công nghệ ảnh động vector của Adobe) Trước đây, Flash được phát triển nhằm mục đích phục vụ xây dựng hoạt họa, quảng cáo hay các thành phần trang trí của các trang Web Sau nhiều thập kỷ thành công, tới nay

có tới 97% (theo Adobe Flex 2: Training from the Source) các chương trình duyệt trang Web có cài đặt Flash Các tập tin Flash, mang phần mở rộng là swf và có thể hiện thị bởi các chương trình duyệt trang Web hay chương trình Flash Player Nhưng Flash sinh ra không phải để làm ứng dụng: công cụ lập trình không chuyên nghiệp, giao diện lập trình hạn chế, chi phí để viết ứng dụng rất lớn do thiếu các thành phần giao diện, thư viện hỗ trợ…Để khắc phục những nhược điểm này, Adobe đưa ra 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, lập trình viên có thể kết hợp giữa

phương pháp thiết kế kéo - thả và phương pháp viết

mã lệnh, giúp xây dựng từng phần của ứng dụng một

cách thích hợp Sản phẩm của Flex có thể được xuất

sang thành ứng dụng Desktop (AIR)

Hình 2: Flex

Flex hiện gồm 2 thành phần chính là MXML (Macromedia XML) và ActionScript 3.0 (xây dựng theo ECMAScript 4) ActionScript 3.0 giống Javascript, dễ học và có thể lập trình hướng đối tượng Flex có sự hậu thuẫn mạnh mẽ vì phát triển trên nền tảng Flash nổi tiếng và được nhiều người sử dụng Xây dựng các ứng dụng hướng Flash Player, các nhà phát triển có thể tránh được các không tương thích về trình duyệt và nền tảng Những người dùng Flash nay chuyển lên Flex không cần phải thay một nền tảng khác

Hiện tại trên thế giới đã có nhiều hệ thống, Website sử dụng công nghệ Flex như trang Web giới thiệu sản phẩm của Sony Ericsson, Yahoo Messenger (phiên bản

dành cho Web), www.pikeo.com, một Website chia sẻ hình ảnh và một vài Wesite thông dụng được thể hiện trong hình sau:

Hình 3: Những ứng dụng sử dụng công nghệ Flex

Với những ưu điểm của các ứng dụng RIA và những đặc tính ưu việt của công nghệ

Flex, chúng em đã quyết định thực hiện đề tài: “Tìm hiểu ngôn ngữ lập trình trong Adobe Flash và xây dựng ứng dụng minh họa” Trong đề tài này chúng em

tìm hiểu ngôn ngữ lập trình ActionScript 3.0 và công nghệ Flex; qua đó xây dựng chương trình quản lý album ảnh và tạo slideshow hình ảnh trực tuyến

Chương 2 FLEX

2.1 Giới thiệu

Flex là tập hợp các công nghệ cho phép ta nhanh chóng xây dựng ứng dụng để triển khai cho Flash Player, là một môi trường thực thi chuyển giao những giao diện và tương tác của người dùng Làm đòn bẩy cho Flex là những công nghệ và tiêu chuẩn hoàn thiện như XML, dịch vụ web, HTTP, Flash Player và ActionScript Flex cho phép ta tạo ra những ứng dụng Internet hoàn thiện, biên soạn ứng dụng nhanh chóng bằng việc tập hợp các thành phần, bao gồm các điều khiển giao diện, các khung thiết kế, mô hình dữ liệu và các thành phần giao tiếp dữ liệu Hai phiên bản đầu là Flex 1.0 và Flex 1.5 được Macromedia giới thiệu vào năm 2004 với giá thành rất cao Vào tháng 1 năm 2007, Adobe tạo một bước đột phá về vấn đề bản quyền khi cung cấp SDK (Software Development Kit) của phiên bản Flex 2.0, gồm toàn bộ thư viện các lớp hỗ trợ và bộ biên dịch bằng dòng lệnh miễn phí Vào tháng 3 năm

2008, Adobe phát hành phiên bản Flex 3.0 hỗ trợ công nghệ Air Chương 2 này xin được giới thiệu một số kĩ thuật làm việc với Flex 2.0

Nội dung Flex 2 được thể hiện trọn vẹn trên Flash Player 9 Nghĩa là người dùng phải chạy từ Flash Player 9 trở lên nếu muốn xem nội dung Flex 2 chính xác

Sử dụng Flex framework ta có thể xây dựng và biên dịch sang định dạng tập tin swf Tập tin swf là định dạng mã nhị phân mà Flash Player có thể đọc

Flash Player 9 giới thiệu máy ảo ActionScript AVM2 (ActionScript Virtual Machine 2) AVM2 hoạt động khác với các phiên bản Flash Player trước Với AVM2, nội dung swf được biên dịch và chạy tương tự như cách làm việc của các ứng dụng trong Java và NET

2.1.1.2 Flex Framework

Flex framework đồng nghĩa với một thư viện lớp của Flex và là một tập hợp các lớp ActionScript được sử dụng bởi các ứng dụng Flex Flex framework được viết hoàn toàn bằng các lớp ActionScript, định nghĩa các điều khiển và quản lý thiết kế để xây dựng một ứng dụng Internet

Hình 5: Flex Framework

Flex framework bao gồm các mục sau:

Các điều khiển của form: Button, text input, text area, list, radio button, checkbox,

combo box, rich text editor, a color selector, a date selector, …

Các điều khiển menu: pop-up menu, menu bar

Các thành phần truyền thông: Hỗ trợ âm thanh, hình ảnh, video

Các khung thiết kế: Grid, form, box, canvase, …

Thành phần dữ liệu và kết buộc dữ liệu

Flex framework được tích hợp vào Flex Builder Nhưng không có nghĩa muốn dùng Flex framework thì ta phải dùng Flex Builder Ta có thể cài đặt miễn phí Flex SDK Flex SDK gồm bộ biên dịch và Flex framework Hoặc cũng có thể tích hợp Flex framework với một IDE khác hoặc dùng công cụ soạn thảo để viết MXML và ActionScript sao đó biên dịch nó bằng command line

Flex Builder là một sản phẩm thương mại Để biết thêm thông tin có thể tham khảo tại http://www.adobe.com/go/flexbuilder

2.1.1.4 Dịch vụ dữ liệu – Data service

Data services là một bộ phận quan trọng của hầu hết các ứng dụng Flex Nó là cách

mà ứng dụng Flex có thể tải và gửi dữ liệu từ cơ sở dữ liệu Flash Player cung cấp

dữ liệu văn bản, định dạng truyền tin nhị phân - AMF (binary messaging format) và những kết nối bảo đảm cho dữ liệu truyền từ server đến client trong thời gian thực Ứng dụng Flex yêu cầu dữ liệu XML từ tài nguyên tĩnh hoặc tài nguyên động như trang PHP

2.1.1.5 Media Servers

Ứng dụng Flex sử dụng Flash Player để phát lại các đoạn Flash video hoặc các đoạn nhạc MP3

2.1.1.6 Các thành phần và thư viện khác cho Flex

Như là bộ Flex Charting Components (hỗ trợ lập biểu đồ)

2.1.2 Sử dụng những phần tử của Flex

2.1.2.1 MXML

MXML dựa trên nền tảng ngôn ngữ XML để mô tả màn hình thiết kế Nó tương đối giống HTML Sử dụng thẻ MXML , ta có thể thêm các thành phần như form, phát lại media

Ngoài ra, MXML còn dùng để mô tả các hiệu ứng, các giao tác, kiểu dữ liệu và sự kết buộc dữ liệu

Flex Builder cho phép ta xây dựng MXML với WYSIWYG WYSIWYG cho phép

ta xây dựng một ứng dụng Flex cơ bản mà không cần viết một dòng mã nào

MXML tạo khung và giao diện một cách nhanh chóng và hiệu quả MXML được dịch qua rất nhiều bước và bước đầu tiên là chuyển MXML thành lớp ActionScript

vụ cơ bản ActionScript thích hợp cho sự tương tác với người dùng, các thao tác dữ liệu phức tạp và các chức năng không có trong thư viện lớp của Flex

2.1.3 Bảo mật của Flash Player

Tính bảo mật của Flash Player là bảo mật về dữ liệu Các ứng dụng Flex chỉ có thể truy xuất các nguồn dữ liệu trên cùng một domain Nếu khác domain thì việc truy xuất dữ liệu không được chấp nhận trừ khi được sự cho phép của domain đó thông

qua file cross-domain policy Đây là một file XML trên server tiếp nhận nguồn dữ

liệu Định dạng của cross-domain policy file như sau:

2.1.4 Làm việc với dịch vụ dữ liệu - Data services

Các ứng dụng Flex có một tầng client chạy trên máy của người dùng bằng Flash Player Tầng client liên lạc với server để gửi và nhận dữ liệu Các server cung cấp các dịch vụ dữ liệu Về bản chất, dịch vụ dữ liệu cung cấp các giao diện được định nghĩa là public - public interfaces (APIs) nhờ đó mà client có thể đưa yêu cầu đến

phương thức của chương trình đó bằng những lời gọi hàm từ xa (remote procedure

call: RPC)

Có nhiều loại dịch vụ dữ liệu Đơn giản nhất là tập tin văn bản hoặc tài liệu XML tĩnh nhận từ web server Phức tạp hơn là XML động được phát sinh qua server-side script hoặc chương trình như là trang PHP hoặc ASPX Một trong các dạng phức tạp đó là dịch vụ web Dịch vụ web dùng XML (thường là trong dạng SOAP – Simple Object Access Protocol) như là định dạng truyền tin, và cho phép lời gọi hàm từ xa (RPC) dùng giao thức HTTP để yêu cầu và phản hồi

Flash Player có thể thực hiện RPCs đến nhiều loại dịch vụ dữ liệu Lớp thư viện Flex cũng có thể gửi yêu cầu đến hầu hết dịch vụ dữ liệu Hơn nữa, ứng dụng Flex còn có thể gọi đến các phương thức của các lớp trên server bằng cách sử dụng kỹ

thuật Flash Remoting Flash Remoting dùng định dạng truyền tin nhị phân AMF

được cung cấp bởi Flash Player AMF có mọi lợi ích của SOAP, nhưng vì nó là nhị phân nên băng thông được giảm đáng kể

Tầng thể hiện

Flex

Tầng dữ liệu Tầng giao tiếp Tầng client Tầng dữ liệu gồm cơ sở dữ liệu hoặc tài nguyên

Tầng giao tiếp nhận yêu cầu từ tầng thể hiện hoặc client, truy vấn xuống tầng dữ liệu và trả về dữ liệu được yêu cầu

Tầng thể hiện bao gồm HTML, CSS, JavaScript, JSP, ASP, PHP …

Tầng client cho phép client offload quá trình tính toán từ server, ngầm giải phóng

tài nguyên mạng và đáp ứng tốt sự tương tác với giao diện người dùng

2.1.6 Cách làm việc của ứng dụng Flex

Hình 7: Mô hình nguồn – biên dịch – triển khai của ứng dụng Flex

Tài nguyên (PNG, Gif,…)

Mã nhị phân AVM2 + Tài nguyên

2.2 Làm việc với dữ liệu

2.2.1 Sử dụng mô hình dữ liệu

Ta có thể dùng mô hình dữ liệu để chứa dữ liệu nhận từ RPC – Remote Procedure Call, hoặc chứa dữ liệu người dùng nhập vào trước khi gửi nó cho server

2.2.1.1 Dùng thẻ <mx:Model>

Thẻ <mx:Model> cho phép ta tạo một đối tượng đại diện cho cấu trúc dữ liệu

Trong thẻ này, cấu trúc dữ liệu chỉ được xây dựng bằng những thẻ XML

Nếu dùng mô hình dữ liệu để chứa dữ liệu tĩnh thì nạp dữ liệu từ file bằng thuộc

tính source của thẻ <mx:Model> sẽ tốt hơn là định nghĩa một cấu trúc và khởi tạo

đối tượng dữ liệu Ví dụ như khi ta định nghĩa cấu một cấu trúc gồm 50 bang nước

Mỹ thì ta nên nạp dữ liệu từ file nếu không tài liệu MXML của ta sẽ rất dài và không hợp lý

Ví dụ:

<mx:Model id="statesModel" source="states.xml" />

Khi đó, dữ liệu sẽ được nạp vào lúc biên dịch Tất cả dữ liệu sẽ được biên dịch

thành swf

Không giống như nhưng thẻ khác, thẻ <mx:Model> không có lớp cùng tên bên

ActionScript, mà nó là thể hiện của lớp ObjectProxy Mục đích chính của lớp này là

để kết buộc dữ liệu

2.2.1.2 Dùng XML

Nếu làm việc với dữ liệu định dạng kiểu XML thì ta phải dùng thẻ <mx:Xml> mô

hình cấu trúc dựa trên XML

Thẻ XML có một namespace riêng nên Flex Builder thêm xmlns=”” để phân biệt

với namespace của những thẻ khác

Cũng giống như thẻ <mx:Model>, thẻ này cũng chỉ có một nút gốc nên khi tham chiếu ta bỏ qua nút gốc

public class User {

private var _nameFirst:String;

private var _nameLast:String;

private var _email:String;

private var _lastLogin:Date;

private var _userType:uint;

public function get nameFirst( ):String {

• Liên kết giữa các hộp thoại

Cấu trúc của kết buộc dữ liệu: có 3 kiểu

<mx:Object label="A" data="1" />

<mx:Object label="B" data="2" />

<mx:Binding source="email.text" destination="xmlData.@email" />

<mx:Binding source="phone.text" destination="xmlData.@phone" />

2.2.2.3 BindingUtils

Lớp mx.binding.utils.BindingUtils có một phương thức tĩnh là bindProperty() cho

phép ta định hình một mô hình dữ liệu trong ActionScript Cú pháp:

BindingUtils.bindProperty(destinationObject, destinationProperty,

sourceObject, sourceProperty);

Tham số destinationObject và sourceObject tham chiếu đến đối tượng Các tham số Propetry là chuỗi

Phương thức bindProperty trả về một tham chiếu đến một đối tượng mới

mx.binding.utils.ChangeWatcher Với lớp ChangeWatcher, ta có thể gỡ bỏ kết buộc

dữ liệu hoặc là thay đổi nguồn liên kết

Gỡ bỏ kết buộc dữ liệu: changeWatcher.unwatch()

Lấy lại giá trị của nguồn liên kết hiện tại: changeWatcher.getValue()

Thay đổi đối tượng source: changeWatcher.reset(newSourceObject)

2.2.3 Kết buộc dữ liệu cho lớp tự định nghĩa

Để kết buộc dữ liệu cho lớp tự định nghĩa, ta dùng siêu thẻ [Bindable] Ta có thể dùng thẻ này với lớp, thuộc tính, phương thức get(), set()

Ví dụ:

[Bindable]

public class Example {

…}

Khi dùng thẻ [Bidable] thì loại sự kiện mặc định được gửi đi là propertyChange

Nhưng sẽ không có tác dụng nếu một lớp có nhiều thuộc tính dùng kết buộc dữ liệu

Vì tất cả các phương thức đăng ký sự kiện của các đối tượng kết buộc đều nhận được thông báo mỗi khi có một thuộc tính thay đổi Do đó ta phải thêm tên của sự kiện vào thẻ [Bidable]

Ví dụ: [Bindable(event="customEvent")]

2.3 Giao tiếp dữ liệu từ xa

Giao tiếp dữ liệu từ xa xuất hiện trong suốt quá trình thực thi chương trình Không hoàn toàn tập trung phía client nhưng cần thiết cho việc nhận và gửi dữ liệu giữa client và server Các ứng dụng Flex thường hỗ trợ các kỹ thuật giao tiếp dữ liệu từ

xa thông dụng Có 3 loại ứng dụng Flex sử dụng giao tiếp dữ liệu từ xa :

Giao tiếp HTTP

Loại này bao gồm một số các kỹ thuật trùng lắp Ta có thể sử dụng HTTPService hoặc lớp URLLoader của Flash Player API để gửi hay tải những block dữ liệu

chưa nén, dữ liệu chưa mã hóa URL và các gói lệnh XML Ngoài ra ta cũng có

thể sử dụng WebService để gửi và nhận những gói lệnh SOAP hoặc kỹ thuật

Flash Remoting để gửi và nhận các gói lệnh AMF (tương tự như SOAP nhưng nhỏ hơn do sử dụng chuẩn nhị phân) Mỗi kỹ thuật đều nhận được cùng một kết quả như nhau trong việc gửi yêu cầu và nhận kết quả trả về thông qua giao thức HTTP hoặc HTTPS

Giao tiếp thực

Là những kết nối liên tục thông qua socket Flash Player hỗ trợ 2 dạng kết nối

socket: một là cung cấp những định đạng đặc biệt cho các gói lệnh (XMLSocket),

và một những kết nối socket thô (Socket) Trong cả hai trường hợp, socket duy

trì kết nối liên tục giữa client và server, cho phép server chuyển dữ liệu đến client mà không cần sử dụng kỹ thuật HTTP cơ bản

Giao tiếp giữa file tải lên và tải xuống

Sử dụng FileReference API của Flash Player để trực tiếp tải lên hay tải xuống

file trong các ứng dụng Flex

Ta có thể phân biệt loại giao tiếp này với 2 loại còn lại một cách khá dễ dàng vì loại giao tiếp này chỉ được áp dụng trong trường hợp ứng dụng yêu cầu file tải lên hay tải xuống Tuy nhiên, việc phân biệt giữa giao tiếp HTTP và giao tiếp tức thời thì không phải lúc nào cũng rõ ràng Ứng dụng sử dụng giao tiếp tức thời phải kết nối mạng vì giao tiếp tức thời đòi hỏi phải có một socket kết nối liên tục cho từng người dùng Ngược lại, giao tiếp HTTP chỉ được khởi tạo khi client gửi yêu cầu, server sau khi trả kết quả cho client thì sẽ đóng kết nối cho đến khi client gửi 1 yêu cầu khác Trong hầu hết các trường hợp thì giao tiếp HTTP đều có hiệu quả hơn cả

2.3.1 Việc yêu cầu và nhận giao tiếp dữ liệu

Có 3 cách căn bản là: thông qua dịch vụ HTTP đơn giản, dịch vụ web và Flash Remoting Việc chọn phương thức nào thì tùy thuộc chủ yếu vào loại dịch vụ mà ta

có Chẳng hạn như nếu muốn tải 1 tài liệu XML ta nên sử dụng dịch vụ giao tiếp HTTP đơn giản Tuy nhiên nếu như muốn sử dụng một phương thức dịch vụ web thì nên chọn dịch vụ giao tiếp web

2.3.1.1 Dịch vụ HTTP đơn giản

Những dịch vụ này bao gồm các nguồn XML, văn bản, trang ASP.NET, các trang chạy các đoạn script để thêm hoặc chỉnh sửa cở sở dữ liệu Flex cung cấp hai cách

căn bản để gọi dịch vụ HTTP đơn giản: hoặc sử dụng một thành phần của Flex

framework là HTTPService, hoặc sử dụng lớp flash.net.URLLoader của Flash

Player

HTTPService là một thành phần cho phép gửi yêu cầu đến dịch vụ HTTP Ta phải

định nghĩa giá trị cho thuộc tính url của đối tượng này xác định vị trí gửi yêu cầu

Ví dụ:

<mx:HTTPService id="textService" url="data.txt" />

2.3.1.1.1 Gửi yêu cầu

Đối tượng HTTPService không tự động tạo ra yêu cầu load dữ liệu Để gửi yêu cầu

ta phải sử dụng phương thức send()

2.3.1.1.2 Xử lý kết quả

Phương thức send() gửi yêu cầu nhưng kết quả không được trả về tức thời mà thay

vào đó là ứng dụng phải chờ sự kiện kết quả (result) Sự kiện kết quả xảy ra khi toàn bộ sự phản hồi được trả về

Ví dụ:

<mx:HTTPService id="textService" url="data.txt"

result="mx.controls.Alert.show('Data loaded')" />

Ta có thể lấy lại dữ liệu được phản hồi bằng cách sử dụng thuộc tính lastResult

Văn bản thô luôn được đọc dưới dạng chuỗi Tuy nhiên, HTTPService có khả năng

chuyển dữ liệu tuần tự thành những mảng liên tục do đó thuộc tính lastResult được xem như Object

HTTPService được dùng trong việc tải văn bản, gắn kết dữ liệu hoặc tải dữ liệu XML Như chúng ta thấy kết quả trả về của HTTPService mặc định ở dạng văn bản nếu như chúng là những khối văn bản Còn nếu kết quả trả về là dữ liệu XML thì chúng được phân tích thành 1 đối tượng Tuy nhiên đó chỉ là đơn thuần do mặc định, ta có thể trả về kết quả theo một định dạng bất kỳ thông qua thuộc tính

resultFormat Giá trị trả về có thể ở dạng text, flashvars, array, xml, e4x

2.3.1.1.3 Gửi tham số

Khi muốn gửi những tham số đến hệ thống dịch vụ, ta có thể sử dụng thuộc tính

request của HTTPService Thuộc tính này cần một giá trị Object được mặc định là

một cặp đối tượng tên/giá trị được chuyển thành định dạng mã hóa URL và được

gửi tới hệ thống dịch vụ thông qua phương thức HTTP GET Ta có thể sử dụng

ActionScript để chỉ định một đối tượng như sau:

var parameters:Object = new Object();

Khai báo kiểu này cho phép ta dùng kết buộc dữ liệu với những tham số

2.3.1.1.4 Dùng HTTPService với ActionScript

Mặc dù cách đơn giản và nhanh nhất để sử dụng đối tượng HTTPService là dùng MXML, nhưng đối với những yêu cầu giao tiếp với dữ liệu phức tạp thì sử dụng remote proxy là thích hợp Có thể sử dụng đối tượng HTTPService trong remote proxy nhưng thông thường sau đó chỉ hoàn toàn làm việc với HTTPService bằng ActionScript, bao gồm xây dựng đối tượng và xử lý kết quả Để HTTPService hoàn

toàn làm việc với ActionScript ta sẽ phải import lớp mx.rpc.http.HTTPService Khởi tạo một thể hiện mới bằng lệnh new

var httpRequest:HTTPRequest = new HTTPRequest();

Thiết lập thuộc tính url: httpRequest.url = “data.txt”;

Sử dụng phương thức addEventListener() để lắng nghe Kết quả được HTTPService trả về thông qua ResultEvent, nếu xuất hiện lỗi sẽ trả về qua FaultEvent Lớp

ResultEvent và FaultEvent nằm trong gói mx.rpc.events

httpRequest.addEventListener(ResultEvent.RESULT, resultHandler);

2.3.1.2 Các dịch vụ web

Flash Player không hỗ trợ những dịch vụ web SOAP Tuy nhiên Flex cung cấp

thành phần WebService sử dụng built-in HTTP cũng như XML để ta có thể làm việc

với SOAP mà dựa trên những dịch vụ web Có 2 cách làm việc với thành phần

WebService đó là sử dụng MXML hoặc ActionScript

Để gửi tham số đến một phương thức dịch vụ web thông qua WebService cũng có 2

cách cơ bản : một là gửi tham số lúc gọi phương thức, hai là khai báo tham số khi khai báo thao tác

2.3.1.2.2 Sử dụng ActionScript:

Để sử dụng trực tiếp thành phần của ActionScript phải sử dụng lớp

mx.rpc.soap.WebService Khi khởi tạo WebService, ta phải xác định WSDL URL

bằng thuộc tính wsdl

Tiếp theo ta phải gọi phương thức loadWSDL() Phương thức này phải được gọi

trước khi gọi bất kỳ hoạt động nào của dịch vụ web

hoặc gửi tham số : exampleService.textOperation.send(parameter);

Ta xử lý kết quả bằng cách lắng nghe sự kiện hoặc dùng kết buộc dữ liệu Sự kiện

của kết quả thuộc mx.rpc.events.ResultEvent, sự kiện lỗi thuộc

2.3.1.2.3 Chuyển đổi kiểu dữ liệu

Một trong những thuận lợi khi sử dụng các dịch vụ web là việc chuyển đổi giữa các

kiểu dữ liệu Lớp WebService của Flex framework sẽ tự động chuyển các kết quả trả

về sang kiểu dữ liệu thích hợp của ActionSript

Kiểu dữ liệu Kiểu SOAP Kiểu ActionScript

Floating-point number xsd:float Number

Array xsd:string[], etc mx.collections.ArrayCollection

2.3.1.3 Điều khiển từ xa trong Flash - Flash Remoting

Là một kỹ thuật trong giao tiếp HTTP Flash Remoting tự động chuyển dữ liệu được gửi để tương ứng với dữ liệu của server Trên server ta cần sử dụng AMF (nghi thức gửi tin nhắn nhị phân, một dạng tin được định dạng của Flash Player) để đảm bảo từng gói dữ liệu nhỏ nhất của giao tiếp dữ liệu Mọi lời gọi của Flash

Remoting đều sử dụng lớp flash.net.NetConnection

2.3.2 Kết nối Real-Time/ Socket

Flash Player hỗ trợ kết nối bậc thấp đó là kết nối socket liên tục cho phép ta tạo các ứng dụng thực thi Hơn thế, bằng cách sử dụng socket dạng nhị phân ta có thể tạo những ứng dụng Flex kết nối thẳng với các dịch vụ không khác gì với việc trực tiếp

sử dụng Flash Player Có 3 dạng kết nối trong các ứng dụng Flex đó là:

XML sockets : là những kết nối đòi hỏi một giao thức liên lạc đặc biệt

Binary sockets : là những socket nhị phân thô

RTMP (Real Time Messaging Protocol) : sử dụng trong truyền thông (video,

audio,…) và cả trong giao tiếp thực RTMP được hỗ trợ trong Flex Data Services, Flash Media Server, …

2.3.3 Tải file lên và tải file xuống

Các ứng dụng Flex hỗ trợ tải file lên và tải file xuống thông qua lớp

flash.net.FileReference trong Flash Player Ta có thể cho phép người dùng tại thời

điểm tải xuống một file cũng có thể chọn và tải lên một hay nhiều file cùng lúc

2.3.3.1 Tải file xuống

Sử dụng phương thức download() của đối tượng FileReference để tải xuống một file Phương thức download() yêu cầu phải có ít nhất một tham số là đối tượng

URLRequest

Ví dụ tải xuống file test.txt

var fileReference:FileReference = new FileReference();

fileReference.download(new URLRequest(“test.txt”));

Trước khi phương thức download được gọi, Flash Player mở hộp thoại nhắc người

dùng chấp nhận file, sau đó chọn nơi lưu cũng như đặt tên cho file Tên file thường được mặc định là tên file tồn tại trên server Nếu muối chỉnh sửa tên mặc định ta có

thể sử dụng tham số thứ hai của phương thức download()

Phương thức download() có khả năng phát hiện lỗi Hai lỗi thường gặp là

IllegalOperationError và SecurityError IllegalOperationError xuất hiện khi hộp

thoại Save đã được mở SecurityError xuất hiện khi swf không được hỗ trợ trong

phạm vi yêu cầu

2.3.3.2 Tải file lên

Phương thức FileReference.browse() cho phép người dùng tìm và chọn một file để tải lên FileReferenceList.browse() thì cho phép chọn nhiều file cùng lúc Trong cả

hai trường hợp thì hộp thoại Browse đều có 2 nút là Open và Cancle Khi chọn nút

Open thì FileReference hay FileReferenceList sẽ gửi sự kiện Event.SELECT, ngược lại nếu chọn nút Cancle thì sẽ gửi sự kiện Event.CANCLE

Khi người dùng đã chọn một hay nhiều file (sự kiện đã được gửi) thì ta có thể bắt

đầu gọi phương thức upload()

Ví dụ :

fileReference.upload(new URLRequest(“upload.php”));

Nếu sử dụng đối tượng FileReferenceList ta phải gọi phương thức upload() cho từng thể hiện lưu trong đối tượng fileList :

var request:URLRequest = new URLRequest(“upload.php”);

for( var i:int = 0; i< fileReferenceList.fileList.lenght; i++) {

Buttons Button, LinkButton, RadioButton, CheckBox

Value selectors HSlider, VSlider, NumericStepper, ColorPicker,

DateField, DateChooser Thành phần text Label, Text, TextInput, TextArea, RichTextEditor

Các điều khiển List-based List, ComboBox, DataGrid, HorizontalList, TileList,

Tree

Các điểu khiển Pop-up PopUpButton, PopUpMenuButton

Navigators ViewStack, Accordion, ButtonBar, LinkBar, MenuBar,

TabBar, TabNavigator, ToggleButtonBar Control bars ControlBar, ApplicationControlBar

Lớp UIComponet kế thừa từ mx.core.FlexSprite và mx.core.FlexSprite lại kế thừa

từ flash.display.Sprite – một phần của Flash Player API

Sau đây là một phần danh sách các thành phần giao diện và mối quan hệ kế thừa giữa các thành phần giao diện và các lớp của Flash Player

Sprite FlexSprite UIComponent Button ComboBase

LinkButton RadioButton CheckBox ComboBox ColorPicker DateField

Hình 8: Mối quan hệ giữa các thành phần giao diện và các lớp Flash Player

2.4.2 Khởi tạo các thành phần giao diện

Dùng MXML tag:

<mx:Button />

Dùng ActionScript

Var button:Button = new Button();

Với ActionScript , thành phần không tự động thêm vào dach sách thể hiện như khi

dùng MXML Vì vậy ta phải dùng phương thức addChild()

• scaleY: Độ co dãn của thành phần theo chiều dọc Tương tự scaleX, khi scaleY thay đổi thì height cung thay đổi

• rotation: Luôn tính theo chiều kim đồng hồ

• alpha: Độ mờ của thành phần Giá trị mặc định là 1 Giá trị của alpha thay đổi trong khoảng từ 0 (trong suốt) đến 1(mờ đục)

• visible: Quy định tính nhìn thấy được của thành phần Giá trị mặc định là true

• enabled: Khả năng tương tác với thành phần Giá trị mặc định là true

• parent

Tham chiếu đến parent của thành phần Thuộc tính parent là read-only Nếu muốn

thay đổi parent của thành phần, ta phải dùng phương thức removeChild() hoặc dùng phương thức addChild() để thêm thành phần vào một khung giao diện mới

Ví dụ:

Dùng MXML

<mx:Button id="button" label="Example Button"

width="200" height="50" enabled="false" />

Dùng ActionScript

var button:Button = new Button( );

button.label = "Example Button";

Có hai loại sự kiện cơ bản:

• Sự kiện của người dùng: xảy ra khi người dùng tương tác với ứng dụng Ví

dụ như sự kiện người dùng nhấn một nút …

• Sự kiện của hệ thống: xảy ra khi ứng dụng phản hồi lại sự khởi tạo, đồng bộ các hàm…

private function clickHandler(event:Event):void {

var target:Button = Button(event.target);

Đã trình bày chi tiết ở phần tìm hiểu về ActionScript

2.4.4.3 Một số sự kiện của thành phần chuẩn trong Flex

vào khung giao diện remove FlexEvent.REMOVE Thành phần đã được gỡ bỏ

khỏi khung giao diện

thuộc tính visible = true

thuộc tính visible = flase resize FlexEvent.RESIZE Kích thước thành phần đã

thay đổi preinitialize FlexEvent.PREINITIALIZE Thành phần đã được khởi tạo

nhưng các con của nó chưa được khởi tạo

initialize FlexEvent.INITIALIZE Thành phần đã được dựng

nhưng chưa kích thước và vị trí

creationComplete FlexEvent

CREATION_COMPLETE

Thành phần đã được dựng, có kích thước và vị trí

Bảng 2: Một số sự kiện của thành phần chuẩn trong Flex

2.5 Làm việc với Media

Trong một ứng dụng, media được kết hợp theo hai cách: khi thực thi hoặc khi biên dịch Kết hợp media khi biên dịch gọi là nhúng, vì nội dung sẽ được biên dịch thành SWF Kết hợp khi thực thi gọi là nạp, vì nội dung tồn tại như la các file riêng lẻ và phải được nạp vào ứng dụng Flex khi chúng được yêu cầu

Mỗi cách sẽ ảnh hưởng khác nhau đến thời gian nạp chương trình, kích thước của SWF, khả năng thay đổi media sau khi ứng dụng đã biên dịch…Ví dụ như những file hình nặng thì thích hợp với cách nạp khi chương trình thực thi hơn là nhúng vào ứng dụng

2.5.1 Những kiểu Media được hỗ trợ trong Flex

Thư viện SWF Graphics và animation Có

Bảng 3: Những kiểu media được hỗ trợ trong Flex

2.5.2 Cách thêm Media vào ứng dụng

Như đã trình bày ở trên, có hai cách:

<mx:Image id="sun" autoLoad="false"/>

<mx:Button label="Load Image" click="sun.load('assets/sun.jpg')"/>

</mx:Application>

Khi dùng thẻ MXML, các thành phần đang sử dụng một đối tượng Loader Lớp Loader này có một thể hiện là LoaderInfo Lớp LoaderInfo sẽ gửi các sự kiện như là: complete, progress, ioError, open, httpStatus, và init

2.5.2.2 Nhúng Media

Khi nhúng media nghĩa là thay vì tham chiếu đến các tài nguyên trực tiếp thì ta đóng gói nó thành SWF Ta có thể nhúng media với MXML, ActionScript hoặc CSS

2.5.2.2.2 Dùng ActionScript

Ta phải khai báo theo cấu trúc [Embed()] và định nghĩa biến của tài nguyên là kiểu

Class Flex compiler sẽ tự động phát sinh một định nghĩa Class tương ứng với loại

media được nhúng vào Cũng như bên MXML, giá trị của biến sẽ tham chiếu đến

Embed()

Sau đây là một số loại của Class:

• BitmapAsset: ứng với tài nguyên là các hình ảnh dạng JPEG, GIF, PNG

• MovieClipAsset: ứng với tài nguyên là các mục của thư viện Flash bên trong

một SWF

• MovieClipLoaderAsset: ứng với tài nguyên là các file SWF

• SoundAsset: ứng với tài nguyên là file MP3

• SpriteClass: ứng với tài nguyên là các thành phần của thư viện SWF tĩnh

hoặc file SVG

• ButtonAsset: hiếm khi dùng

• TextFieldAsset: được cung cấp bởi một số công cụ khác ngoại trừ Flex

Một trong những thế mạnh của ActionScript là khả năng xử lý ứng dụng lúc thực thi Nghĩa là ta có thể thay đổi dữ liệu nhúng lúc thực thi ứng dụng

private var moonAsset:Class;

private function init( ):void{

sunImage.source = sunAsset;}

private function showMoon( ):void{

2.5.3 Làm việc với các loại Media khác nhau

2.5.3.1 Các đối tượng đồ họa

Các đối tượng đồ họa như là các hình ảnh tĩnh, bitmap hoặc là vector dùng để thay đổi skin cho các điều khiển giao diện, để nạp các bức ảnh… Đối tượng đồ họa là một phần quan trọng của Flex

Vector khác với bitmap ở chỗ nó được thể hiện thông qua các định nghĩa đa giác chứ không qua pixel Vì vậy vector có các giải pháp tốt hơn và dung lượng nhỏ hơn

so với bitmap

2.5.3.1.1 Thêm đối tượng đồ họa

Cách duy nhất làm việc với đối tượng đồ họa trong Flex là thông qua thành phần

Image

Flex framework cung cấp các loại đối tượng đồ họa như JPEG, GIF, PNG, SVG – định dạng dựa trên vector, chạy lúc biên dịch và SWF

Với Flex, ta dễ dàng hiển thị một tập hợp hình ảnh chứa trong một mảng bằng cách

dùng thành phần Repeater và thiết lập thuộc tính dataProvider của nó

2.5.3.1.2 Co dãn các đối tượng đồ họa

Một khả năng khác của Flash Player là Scale-9 giúp co dãn các đối tượng đồ họa

mà vẫn giữ nguyên các góc của nó

Ví dụ:

Hình 2 và hình 3 là kéo dãn của hình 1 Nhưng hình 2 với 4 góc bị thay đổi Hình 3 vẫn giữ nguyên được 4 góc Scale-9 sẽ giúp ta thực hiện điều này Để dùng Scale-

9, ta phải xác định tọa độ co dãn bằng chỉ thị Embed() với các tham số

scaleGridTop, scaleGridBottom, scaleGridLeft, scaleGridRight

</mx:Application>

Trong ví dụ trên, ký hiệu circleAnimation trong file library.swf được nhúng vào

Tham số symbol là tham số đặc biệt, được cung cấp chỉ với thư viện SWF Nếu

symbol được tham chiếu đến mà không tồn tại thì sẽ báo lỗi

Nếu thư viện SWF gồm nhiều item, nhưng chỉ một số được tham chiếu đến trong ứng dụng thì chỉ những item được tham chiếu mới được nhúng trong SWF cuối cùng Và ta không cần phải xác định loại item là bitmap, video hay hình động Flex