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
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.2 MB, 122 trang )
TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN
KHOA CÔNG NGHỆ THÔNG TIN
VŨ TẤN HƯNG
NGUYỄN THỊ MINH TỒ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
TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN
KHOA CÔNG NGHỆ THÔNG TIN
VŨ TẤN HƯNG – 05HC084
NGUYỄN THỊ MINH TỒ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
Tìm hiểu ngơn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa
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ẹ đã ln 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
Vũ Tấn Hưng
1
Nguyễn Thị Minh Toàn
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 LỤC
Chương 1. Tổng quan ........................................................................................... 8
Chương 2. FLEX ................................................................................................. 11
2.1.
2.1.1.
2.1.2.
2.1.3.
2.1.4.
2.1.5.
2.1.6.
2.2.
2.2.1.
2.2.2.
2.2.3.
2.3.
2.3.1.
2.3.2.
2.3.3.
2.4.
2.4.1.
2.4.2.
2.4.3.
2.4.4.
2.5.
2.5.1.
2.5.2.
2.5.3.
2.6.
2.6.1.
2.6.2.
2.6.3.
2.6.4.
2.6.5.
2.6.6.
2.6.7.
2.7.
2.7.1.
2.7.2.
Giới thiệu ........................................................................................................................... 11
Những công nghệ trong ứng dụng Flex .........................................................................................11
Sử dụng những phần tử của Flex ...................................................................................................14
Bảo mật của Flash Player ..............................................................................................................15
Làm việc với dịch vụ dữ liệu - Data services.................................................................................15
Sự khác biệt giữa ứng dụng HTML và ứng dụng Flex Web..........................................................16
Cách làm việc của ứng dụng Flex..................................................................................................16
Làm việc với dữ liệu.......................................................................................................... 17
Sử dụng mơ hình dữ liệu................................................................................................................17
Kết buộc dữ liệu.............................................................................................................................19
Kết buộc dữ liệu cho lớp tự định nghĩa..........................................................................................21
Giao tiếp dữ liệu từ xa ...................................................................................................... 21
Việc yêu cầu và nhận giao tiếp dữ liệu ..........................................................................................22
Kết nối Real-Time/ Socket ............................................................................................................27
Tải file lên và tải file xuống...........................................................................................................27
Các thành phần giao diện................................................................................................. 28
Khái quát........................................................................................................................................28
Khởi tạo các thành phần giao diện.................................................................................................30
Các thuộc tính phổ biến của các thành phần giao diện ..................................................................30
Xử lý sự kiện .................................................................................................................................31
Làm việc với Media........................................................................................................... 33
Những kiểu Media được hỗ trợ trong Flex ....................................................................................33
Cách thêm Media vào ứng dụng ....................................................................................................33
Làm việc với các loại Media khác nhau ........................................................................................36
Quản lý các trạng thái ...................................................................................................... 41
Khởi tạo trạng thái .........................................................................................................................42
Áp dụng các trạng thái...................................................................................................................42
Định nghĩa các trạng thái dựa trên các trạng thái có sẵn ...............................................................42
Thêm bớt các thành phần...............................................................................................................43
Thiết lập các thuộc tính..................................................................................................................44
Thiết lập các kiểu...........................................................................................................................45
Thiết lập bộ điều khiển sự kiện - Event Handlers..........................................................................45
Sử dụng các hiệu ứng và sự chuyển tiếp giữa các trạng thái ........................................ 46
Sử dụng hiệu ứng...........................................................................................................................46
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
Vũ Tấn Hưng
2
Nguyễn Thị Minh Toàn
Tìm hiểu ngơn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa
3.2.
3.2.1.
3.2.2.
3.2.3.
3.3.
3.3.1.
3.3.2.
3.3.3.
3.3.4.
3.3.5.
3.4.
3.4.1.
3.4.2.
3.4.3.
3.5.
3.5.1.
3.5.2.
3.5.3.
3.5.4.
3.5.5.
3.5.6.
3.5.7.
3.5.8.
Các thành phần cơ bản trong ActionScript.................................................................... 51
Lớp và đối tượng ...........................................................................................................................51
Packages ........................................................................................................................................53
Hàm và biến...................................................................................................................................53
Sự kiện và xử lý sự kiện.................................................................................................... 57
Sự kiện ActionScript cơ bản ..........................................................................................................57
Đăng ký một phương thức đăng ký sự kiện - Event listener ..........................................................58
Hủy đăng ký một phương thức đăng ký sự kiện - Event listener...................................................61
Đối tượng Target ...........................................................................................................................61
Quyền ưu tiên đối với phương thức đăng ký sự kiện - Event Listener ..........................................61
ActionScript động ............................................................................................................. 62
Biến động.......................................................................................................................................63
Tự động thêm hành vi mới cho một thể hiện .................................................................................63
Tham chiếu động cho biến và phương thức...................................................................................64
XML và E4X ..................................................................................................................... 65
Dữ liệu phân cấp XML ..................................................................................................................65
Truy cập dữ liệu XML ...................................................................................................................67
Thao tác dữ liệu XML với câu lệnh for-each-in và for-in..............................................................69
Trích lọc dữ liệu XML...................................................................................................................69
Thay đổi hoặc tạo mới nội dung XML ..........................................................................................71
Thêm thuộc tính hoặc thành phần mới...........................................................................................72
Xóa thành phần và thuộc tính ........................................................................................................73
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.
4.5.2.
4.5.3.
4.5.4.
4.5.5.
4.6.
4.6.1.
4.6.2.
4.6.3.
Màn hình đăng nhập ......................................................................................................................77
Màn hình đăng ký ..........................................................................................................................79
Màn hình quản lý ...........................................................................................................................80
Màn hình xem ảnh .........................................................................................................................86
Màn hình tạo slideshow .................................................................................................................90
Cơ sở dữ liệu...................................................................................................................... 93
Mơ hình quan hệ ............................................................................................................................93
Thuyết minh mơ hình quan hệ và thuộc tính .................................................................................94
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
Vũ Tấn Hưng
3
Nguyễn Thị Minh Toàn
Tìm hiểu ngơn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa
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.
7.2.2.
7.3.
Chuẩn hóa dữ liệu người dùng nhập vào .......................................................................................99
Định dạng dữ liệu ........................................................................................................................101
Tùy biến giao diện ........................................................................................................... 102
7.3.1.
7.3.2.
7.3.3.
7.3.4.
Sử dụng các Style ........................................................................................................................102
Sử dụng Skin ...............................................................................................................................102
Dùng Themes...............................................................................................................................103
CSS thực thi.................................................................................................................................104
Phần 2: ActionScript ............................................................................................ 105
7.4.
Điều kiện – Vịng lập – Tố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.
7.6.2.
7.6.3.
7.6.4.
7.7.
Tái định nghĩa – ghi đè một phương thức....................................................................................107
Phương thức Super()....................................................................................................................108
Ngăn chặn kế thừa và phương thức định nghĩa lại.......................................................................108
Composition.................................................................................................................................109
Interfaces ......................................................................................................................... 109
7.7.1.
7.7.2.
7.7.3.
7.8.
Tại sao phải dùng Interface?........................................................................................................110
Cú pháp và cách sử dụng interface ..............................................................................................110
Kế thừa interface..........................................................................................................................111
Mảng ................................................................................................................................ 112
7.8.1.
7.8.2.
7.8.3.
7.8.4.
Thêm phần tử vào mảng ..............................................................................................................112
Xóa bỏ phần tử trong mảng: ........................................................................................................114
Phương thức toString(): ...............................................................................................................114
Mảng đa chiều .............................................................................................................................115
7.9.
Xử lý lỗi ............................................................................................................................ 115
7.10.
XML và E4X ................................................................................................................... 116
7.10.1.
7.10.2.
7.10.3.
7.10.4.
7.10.5.
Truy cập những nút văn bản ........................................................................................................116
Truy cập nút cha ..........................................................................................................................117
Truy cập nút anh em ....................................................................................................................118
Truy cập những thuộc tính...........................................................................................................118
Truy cập các nút hậu duệ .............................................................................................................119
Vũ Tấn Hưng
4
Nguyễn Thị Minh Toàn
Tìm hiểu ngơn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa
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
Vũ Tấn Hưng
5
Nguyễn Thị Minh Toàn
Tìm hiểu ngơn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa
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
Vũ Tấn Hưng
6
Nguyễn Thị Minh Toàn
Tìm hiểu ngơn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa
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 5: Tổng kết
Tổng kết những kết quả đạt được và mặt hạn chế của đề tài đồng thời đưa ra
hướng phát triển cho hệ thống sau này.
Chương 6: Danh mục tài liệu tham khảo
Chương 7: Phụ lục
Giới thiệu thêm một số thành phần và kỹ thuật trong ActionScript và Flex.
Vũ Tấn Hưng
7
Nguyễn Thị Minh Toàn
Tìm hiểu ngơn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa
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
Vũ Tấn Hưng
8
Nguyễn Thị Minh Tồn
Tìm hiểu ngơn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa
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 chun
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
Vũ Tấn Hưng
9
Nguyễn Thị Minh Toàn
Tìm hiểu ngơn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa
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.
Vũ Tấn Hưng
10
Nguyễn Thị Minh Toàn
Tìm hiểu ngơn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa
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
hồ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.
Hình 4: Flex SDK
2.1.1. Những công nghệ trong ứng dụng Flex
2.1.1.1. Flash Player
Flex là một phần của Adobe Flash Platform – một bộ công nghệ với Flash Player là
trung tâm. Flash Player chạy tất cả các ứng dụng Flex. Hầu hết các máy tính kết nối
Internet đều có cài đặt Flash Player và một số thiết bị di động có tích hợp Flash. Vì
vậy Flash Player là một phần mềm có mặt hầu hết mọi nơi.
Vũ Tấn Hưng
11
Nguyễn Thị Minh Toàn
Tìm hiểu ngơn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa
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
Vũ Tấn Hưng
12
Nguyễn Thị Minh Toàn
Tìm hiểu ngơn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa
Định dạng và chuẩn hóa
Quản lý con trỏ
Quản lý trạng thái
Các hiệu ứng
Quản lý kéo thả
Ghi chú (Tool tips)
Quản lý các kiểu định dạng
2.1.1.3. Flex Builder 2
Hình 6: Flex Builder 2
Flex Builder 2 là một môi trường phát triển ứng dụng (IDE - Integrated
Development Environment) dành cho việc xây dựng và tìm lỗi trong ứng dụng Flex.
Dựa trên Eclipse IDE, Flex Builder có những cơng cụ sẵn có để viết mã, sửa lỗi, và
xây dựng ứng dụng sử dụng công nghệ Flex như MXML và ActionScript.
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 />
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
Vũ Tấn Hưng
13
Nguyễn Thị Minh Toàn
Tìm hiểu ngơn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa
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.
Ngồ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.
2.1.2.2. ActionScript
ActionScript là ngơn ngữ lập trình trong Flash Player và là công cụ chủ yếu trong
các ứng dụng Flex. ActionScript có thể làm nhiều việc mà MXML khơng thể.
Mặc dù có thể xây dựng một ứng dựng dụng thuần MXML hoặc thuần ActionScript
nhưng thông thường và hợp lý hơn nếu ta xây dựng ứng dụng với cả MXML và
ActionScript. MXML đơn giản hóa việc thiết kế giao diện và thực hiện những tác
Vũ Tấn Hưng
14
Nguyễn Thị Minh Toàn
Tìm hiểu ngơn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa
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:
<?xml version="1.0"?>
" /><cross-domain-policy>
<allow-access-from domain=”*.example.com" />
</cross-domain-policy>
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.
Vũ Tấn Hưng
15
Nguyễn Thị Minh Toàn
Tìm hiểu ngơn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa
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ể.
2.1.5. Sự khác biệt giữa ứng dụng HTML và ứng
dụng Flex Web
Cả ứng dụng HTML và Flex đều có n tầng. Ít nhất là 3 tầng
HTML
Flex
Tầng dữ liệu
Tầng dữ liệu
Tầng giao tiếp
Tầng giao tiếp
Tầng thể hiện
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 tốn từ server, ngầm giải phóng
tài ngun 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
Nguồn
Biên dịch
Triển khai
ActionScript3
ActionScript
+
ActionScript
được phát
sinh
Mã nhị phân
AVM2
MXML
Tài nguyên
(PNG, Gif,…)
Tài nguyên
(PNG, Gif,…)
+
Tài nguyên
Hình 7: Mơ hình nguồn – biên dịch – triển khai của ứng dụng Flex
Vũ Tấn Hưng
16
Nguyễn Thị Minh Toàn
Tìm hiểu ngơn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa
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.
Ví dụ:
<mx:Model id="userData">
<user>
<email></email>
…
</user>
</mx:Model>
Thẻ này chỉ có một nút gốc. Do đó khi tham chiếu, ta khơng cần dùng nút gốc.
Ví dụ:
<mx:Button click="trace(userData.email)" />
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
Vũ Tấn Hưng
17
Nguyễn Thị Minh Toàn
Tìm hiểu ngơn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa
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.
Ví dụ:
<mx:XML id="chaptersXml" xmlns="">
<chapters label="Chapters">
<chapter label="Chapter 1">
<file label="File 1.1" />
</chapter>
…
</chapters>
</mx: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.
Ví dụ:
<mx:Button click="trace(chaptersXml.chapter[0].@label)" />
2.2.1.3. Dùng ActionScript
Hai thẻ <mx:Model> và <mx:XML> chỉ thích hợp với những dữ liệu tĩnh, khơng
thích hợp với dữ liệu phức tạp, dữ liệu động.
Ví dụ: Định nghĩa mơ hình dữ liệu cho người dùng
package com.oreilly.programmingflex.data {
public class User {
private var _nameFirst:String;
private var _nameLast:String;
Vũ Tấn Hưng
18
Nguyễn Thị Minh Toàn
Tìm hiểu ngơn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa
private var _email:String;
private var _lastLogin:Date;
private var _userType:uint;
public function get nameFirst( ):String {
return _nameFirst;
}
public function set nameFirst(value:String):void {
_nameFirst = nameFirst;
}
…}}
2.2.2. Kết buộc dữ liệu
Kết buộc dữ liệu giúp ta liên kết dữ liệu từ một đối tượng này đến một đối tượng
khác. Có nhiều cách sử dụng kết buộc dữ liệu, thường gặp nhất là:
• Liên kết từ dữ liệu vào (như checkbox, text input …) với những mơ hình dữ
liệu.
• 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
• Cú pháp {}
• Thẻ <mx:Binding>
• BindingUtils
2.2.2.1. Cú pháp {}
Đây là kỹ thuật đơn giản nhất và nhanh nhất để áp dụng kết buộc dữ liệu.
Ví dụ:
<mx:HBox>
<mx:ComboBox id="level">
<mx:Array>
<mx:Object label="A" data="1" />
<mx:Object label="B" data="2" />
Vũ Tấn Hưng
19
Nguyễn Thị Minh Toàn
Tìm hiểu ngơn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa
</mx:Array>
</mx:ComboBox>
<mx:TextInput id="selectedLevel" text="{level.value}" />
</mx:HBox>
Khi đó, Text Input sẽ chọn dữ liệu tương thích với Combo Box được chọn và sẽ tự
động cập nhật nếu người dùng chọn combo box khác. Nếu khơng có dấu {} thì dữ
liệu của Text Input sẽ là chuỗi có giá trị “level.value”
2.2.2.2. Thẻ <mx:Binding>
Thẻ <mx:Binding> yêu cầu hai thuộc tính: source và destination.
Ví dụ:
<mx:XML id="xmlData">
<userData email="{email.text}" phone="{phone.text}" />
</mx:XML>
<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)
Vũ Tấn Hưng
20
Nguyễn Thị Minh Toàn
Tìm hiểu ngơn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa
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 q trình thực thi chương trình. Khơng
hồn tồ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. Ngồ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.
Vũ Tấn Hưng
21
Nguyễn Thị Minh Toàn
Tìm hiểu ngơn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa
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
Vũ Tấn Hưng
22
Nguyễn Thị Minh Toàn
Tìm hiểu ngơn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa
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
tồn bộ sự phản hồi được trả về.
Ví dụ:
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ố
Vũ Tấn Hưng
23
Nguyễn Thị Minh Toàn
