Khóa luậ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

Nội dung text: Khóa luậ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

1. 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 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
2. 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 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
3. 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ẹ đã 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 Vũ Tấn Hưng 1 Nguyễn Thị Minh Toàn
4. 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. 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 Vũ Tấn Hưng 2 Nguyễn Thị Minh Toàn
5. 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. 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 Vũ Tấn Hưng 3 Nguyễn Thị Minh Toàn
6. 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. 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 Vũ Tấn Hưng 4 Nguyễn Thị Minh Toàn
7. 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
8. 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
9. 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
10. 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 Toàn
11. 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 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 Vũ Tấn Hưng 9 Nguyễn Thị Minh Toàn
12. 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
13. 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 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. 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
14. 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
15. 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
16. 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. 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. 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
17. 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: 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
18. 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 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 Nguồn Biên dịch Triển khai ActionScript3 ActionScript + ActionScript Mã nhị phân MXML được phát AVM2 sinh + Tài nguyên Tài nguyên Tài nguyên (PNG, Gif, ) (PNG, Gif, ) 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
19. 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ẻ Thẻ 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ụ: example@example.com 123 555-1212 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ụ: 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ẻ 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ụ: 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
20. 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ẻ 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ẻ mô hình cấu trúc dựa trên XML. Ví dụ: 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ẻ , 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ụ: 2.2.1.3. Dùng ActionScript Hai thẻ và 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
21. 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ẻ • 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ụ: Vũ Tấn Hưng 19 Nguyễn Thị Minh Toàn
22. Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa 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ẻ Thẻ yêu cầu hai thuộc tính: source và destination. Ví dụ: 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
23. 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 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. Vũ Tấn Hưng 21 Nguyễn Thị Minh Toàn
24. 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
25. 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ụ: 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ụ: 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
26. Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa 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(); parameters.a = “one”; parameters.b = “two”; service.request = parameters; Tuy nhiên, nếu sử dụng MXML để tạo một đối tượng HTTPService thì thông thường khi khai báo tham số ta cũng nên sử dụng MXML: two 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”; Vũ Tấn Hưng 24 Nguyễn Thị Minh Toàn
27. Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa 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. 2.3.1.2.1. Sử dụng MXML Đầu tiên ta phải khởi tạo một thành phần WebService, gán id và giá trị cho thuộc tính wsdl, gán nhãn cho các hành động. Tất cả các hành động ta gán cho WebService đều có thể truy cập như những thuộc tính. Kết quả trả về được thể hiện theo 2 cách : thể hiện rõ ràng hoặc sử dụng liên kết dữ liệu. Để 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 Ví dụ: var exampleService:WebService = new WebService( ); exampleService.wsdl = " "; exampleService.loadWSDL( ); Sau đó ta có thể gửi yêu cầu : exampleService.testOperation.send(); Vũ Tấn Hưng 25 Nguyễn Thị Minh Toàn
28. Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa 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 mx.rpc.events.FaultEvent. Ví dụ: exampleService.testOperation.addEventListener(ResultEvent.RESULT, onResult); exampleService.testOperation.addEventListener(FaultEvent.FAULT, onError); Nếu muốn dùng kết buộc dữ liệu thì ta phải khai báo WebService là [Bindable] 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 String xsd:string String Integer xsd:int Int Floating-point number xsd:float Number Boolean xsd:boolean Boolean Date xsd:date Date 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. Vũ Tấn Hưng 26 Nguyễn Thị Minh Toàn
29. 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.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 Vũ Tấn Hưng 27 Nguyễn Thị Minh Toàn
30. Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa 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++) { fileReferenceList.fileList[i].upload(request); } 2.4. Các thành phần giao diện 2.4.1. Khái quát Loại Thành phần 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 Vũ Tấn Hưng 28 Nguyễn Thị Minh Toàn
31. 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ác điểu khiển Pop-up PopUpButton, PopUpMenuButton Windows Panel, TitleWindow Navigators ViewStack, Accordion, ButtonBar, LinkBar, MenuBar, TabBar, TabNavigator, ToggleButtonBar Control bars ControlBar, ApplicationControlBar Media và progress Image, SWFLoader, VideoDisplay, ProgressBar indicators Bảng 1: Các thành phần giao diện Tất cả các thành phần giao diện đều có liên quan với nhau vì đều kế thừa từ lớp UIComponent (mx.core.UIComponent). UIComponent là một phần của Flex framework. Nó là lớp trừu tượng. 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 Object EventDispatcher DisplayObject Flash Player InteractiveObject DisplayObjectContainer Sprite FlexSprite Flex Frame UIComponent -work 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 Vũ Tấn Hưng 29 Nguyễn Thị Minh Toàn
32. 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.4.2. Khởi tạo các thành phần giao diện Dùng MXML tag: 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() addChild(button); 2.4.3. Các thuộc tính phổ biến của các thành phần giao diện Các thuộc tính phổ biến của Các thành phần giao diện: • x, y • width, height • scaleX: Độ co dãn của thành phần theo chiều ngang. Thuộc tính scaleX và width có quan hệ với nhau. Nếu thay đổi scaleX thì width sẽ thay đổi theo (nhưng width thay đổi thì không ảnh hưởng đến scaleX). • 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 Vũ Tấn Hưng 30 Nguyễn Thị Minh Toàn
33. Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa 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 Dùng ActionScript var button:Button = new Button( ); button.label = "Example Button"; button.width = 200; button.height = 50; button.enabled = false; addChild(button); 2.4.4. Xử lý sự kiện 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 2.4.4.1. Xử lý sự kiện dùng MXML Khi tạo thành phần dùng MXML, ta có thể thêm xử lý sự kiện bằng thuộc tính có cùng tên với sự kiện mà ta muốn xử lý. Ví dụ: Hoặc Vũ Tấn Hưng 31 Nguyễn Thị Minh Toàn
34. 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 function clickHandler(event:Event):void { var target:Button = Button(event.target); target.alpha -= .1; if(target.alpha < 0) { target.alpha = 1; } } 2.4.4.2. Xử lý sự kiện dùng ActionScript Đã 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 Sự kiện Mô tả add FlexEvent.ADD Thành phần đã được thêm vào khung giao diện remove FlexEvent.REMOVE Thành phần đã được gỡ bỏ khỏi khung giao diện show FlexEvent.SHOW Thành phần đã được đặt thuộc tính visible = true hide FlexEvent.HIDE Thành phần đã được đặt 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í Vũ Tấn Hưng 32 Nguyễn Thị Minh Toàn
35. Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa creationComplete FlexEvent. Thành phần đã được dựng, có CREATION_COMPLETE 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 Định dạng Loại media Yêu cầu khi biên dịch SWF Graphics và animation Không Thư viện SWF Graphics và animation Có GIF Graphics Không JPEG Graphics Không PNG Graphics Không SVG Graphics Có MP3 Audio Không FLV Video Không 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: Vũ Tấn Hưng 33 Nguyễn Thị Minh Toàn
36. 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.5.2.1. Nạp Media Ta có thể dùng thẻ MXML. Ví dụ: Nếu không muốn nạp tự động như ví dụ trên thì ta có thể dùng phương thức load(). Ví dụ : 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.1. Dùng MXML Với MXML, cấu trúc nhúng media bắt đầu bằng @Embed . Kí tự @ chỉ ra cho bộ compiler biết là nó sẽ nhận một chỉ thị, trong trường hợp này là chỉ thị từ Embed() Ví dụ: Vũ Tấn Hưng 34 Nguyễn Thị Minh Toàn
37. 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.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. Ví dụ: <![CDATA[ [Embed(source="assets/sun.jpg")] private var sunAsset:Class; [Embed(source="assets/moon.jpg")] private var moonAsset:Class; private function init( ):void{ sunImage.source = sunAsset;} Vũ Tấn Hưng 35 Nguyễn Thị Minh Toàn
38. 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 function showMoon( ):void{ sunImage.source = moonAsset;} ]]> 2.5.2.2.3. Dùng CSS Dùng CSS để định dạng kiểu dáng cho các thành phần. Ví dụ: Button { down-skin:Embed(source="assets/btnDown.PNG"); over-skin:Embed(source="assets/btnOver.PNG"); up-skin:Embed(source="assets/btnUp.PNG"); } 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. Vũ Tấn Hưng 36 Nguyễn Thị Minh Toàn
39. Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa 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ó. Ví dụ: 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 1 Hình 2 Hình 3 Vũ Tấn Hưng 37 Nguyễn Thị Minh Toàn
40. Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa 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. Ví dụ: 2.5.3.1.3. Thư viện SWF Thư viện SWF cho phép ta cung cấp chỉ một file nhưng lại chứa rất nhiều tài nguyên cần thiết cho ứng dụng. Điều đó giúp cho người thiết kế dễ dàng chỉnh sửa thay đổi tài nguyên trong suốt quá trình phát triển ứng dụng. Ví dụ: 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 Vũ Tấn Hưng 38 Nguyễn Thị Minh Toàn
41. Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa sẽ tự làm điều đó. Nếu muốn thay đổi kiểu của các item trong thư viện, ví dụ như từ bitmap thành video, ta chỉ cần thay đổi trong thư viện mà không phải đụng đến mã. 2.5.3.1.4. Xây dựng thư viện tài nguyên dùng lớp tĩnh trong Flex Một cách khác để quản lý tài nguyên là định nghĩa lớp bằng ActionScript, lớp này sẽ xác định tất cả tài nguyên trong ứng dụng. Trong lớp này, tài nguyên sẽ bao hàm các thuộc tính hằng số khai báo tĩnh và public mà ta có thể tham chiếu đến trong ứng dụng. Ví dụ: package com.oreilly.programmingflex.assets{ public class Images{ [Embed(source="/assets/btnOver.png")] public static const LOGO:Class; [Embed(source="/assets/sun.jpg")] public static const LOGOUT_ICON:Class; } } Và sau đó tham chiếu đến tài nguyên đã được nhúng trên bằng ActionScript hoặc MXML Vũ Tấn Hưng 39 Nguyễn Thị Minh Toàn
42. 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.5.3.2. Làm việc với Audio và Video Audio và Video thường được nhúng, tải - loading hoặc đưa - streaming vào ứng dụng. Nhưng những file audio video có kích thước lớn nên nó thường được nạp hoặc đưa vào hơn là nhúng. Load audio và video tương tự như với đối tượng đồ họa nhưng có thêm một vài khả năng như điều khiển playback. Streaming cũng giống như loading nhưng nó dựa vào server để chia nhỏ và trả dữ liệu media về cho client. 2.5.3.2.1. Thêm hiệu ứng âm thanh Flex framework cung cấp thành phần SoundEffect để xử lý hiệu ứng âm thanh với thuộc tính duration để hiệu chỉnh thời gian, mặc định là 500 milliseconds Ví dụ: Nhưng nếu muốn cung cấp đầy đủ các điều khiển cho file audio bà video, Flash Player cung cấp một package flash.media bao gồm các lớp như Sound, SoundChannel, và SoundTransform. Cụ thể là một lớp Sound phát một MP3 với phương thức play(). Phương thức này trả về một thể hiện của SoundChannel. SoundChannel tham chiếu đến SoundTransform để điều khiển các kênh phát của các audio. 2.5.3.2.2. Làm việc với video Flex cũng có khả năng hiển thị video. Có 3 dạng codec (một kỹ thuật nén dùng khi mã hóa kỹ thuật số video) được Flash Player hỗ trợ: On2 VP6, Sorenson Spark và Screen. Thường thì On2 VP6 là tốt nhất vì nó cho chất lượng video tốt. Cách đưa video vào ứng dụng cũng tương tự như audio. 2.5.3.2.3. Streaming Media Streaming cũng giống như loading nhưng nó dựa vào server để chia nhỏ và trả dữ liệu media về cho client. Điều này giúp người dùng bắt đầu xem nội dung audio và Vũ Tấn Hưng 40 Nguyễn Thị Minh Toàn
43. Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa video nhanh chóng hơn và có thể nghe từ giữa đoạn mà không cần phải tải xuống toàn bộ file. Flash Player hỗ trợ streaming thông qua Real Time Messaging Protocol (RTMP). RTML được phát triển bởi Adobe, là một phần của sản phẩm Flash Media Server ( Ví dụ: bufferTime là thuộc tính của VideoDisplay, chỉ có ảnh hưởng với video được stream. 2.6. Quản lý các trạng thái Trong thuật ngữ Flex, một trạng thái là một tập hợp các thay đổi của hiển thị. Mọi ứng dụng Flex đều có ít nhất một trạng thái gọi là trạng thái căn bản. Flex framework cung cấp một thư viện cho các trạng thái và cho sự quản lý trạng thái. Ta có thể tạo và quản lý các trạng thái bằng MXML hoặc ActionScript. Vũ Tấn Hưng 41 Nguyễn Thị Minh Toàn
44. 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.6.1. Khởi tạo trạng thái Ta khởi tạo các trạng thái ở mức ứng dụng hoặc mức thành phần. Mặc dù có thể khởi tạo trạng thái bằng ActionScript nhưng dùng MXML lại tiện lợi hơn. Trạng thái là những thể hiện của lớp mx.states.State. Ta có thể khởi tạo một trạng thái mới bằng thẻ trong MXML. Ví dụ: Một định nghĩa trạng thái phải bao gồm: thêm bớt các thành phần, thiết lập các thuộc tính, thiết lập các kiểu, thiết lập các bộ xử lý sự kiện, thực hiện các tùy chỉnh tái định nghĩa. 2.6.2. Áp dụng các trạng thái Các ứng dụng hoặc thành phần đều mặc định là áp dụng trạng thái căn bản. Ta có thể định nghĩa nhiều trạng thái nhưng vào một thời điểm chỉ áp dụng được một trạng thái. Để áp dụng trạng thái ta dùng thuộc tính currentState. Ví dụ: 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 Vũ Tấn Hưng 42 Nguyễn Thị Minh Toàn
45. 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ếu muốn định nghĩa một trạng thái dựa trên một trạng thái khác ngoài trạng thái căn bản thì ta dùng thuộc tính basedOn của thẻ . Ví dụ: 2.6.4. Thêm bớt các thành phần Một trong những cách dùng thông thường của trạng thái là thêm bớt các thành phần. Ta dùng thẻ để thêm một hoặc nhiều thành phần. Nếu muốn thêm một thành phần như là con của thành phần khác, ta dùng thuộc tính relativeTo. Các thành phần con sẽ tự động thêm vào cuối. Ta có thể tự xác định ví trí bằng cách sử dụng hai thuộc tính giá trị lastChild hoặc FirstChild. Ngoài ra, nếu muốn thêm thành phần ngay trước hoặc sau thành phần hiện tại, ta dùng hai thuộc tính giá trị before hoặc after. Ví dụ: Gỡ bỏ thành phần bằng thẻ . Quy trình gỡ bỏ cũng tương tự như quy trình thêm vào. Thẻ chỉ yêu cầu một thuộc tính là target để xác định thành phần ta muốn gỡ bỏ. Vũ Tấn Hưng 43 Nguyễn Thị Minh Toàn
46. 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í dụ: 2.6.5. Thiết lập các thuộc tính Dùng thẻ . Thẻ này có các thuộc tính target, name, và value. Thuộc tính target để ta xác định đối tượng nào sẽ áp dụng giá trị thuộc tính mới. Name là tên của thuộc tính mới đó. Value là giá trị của thuộc tính mới. Ví dụ: Vũ Tấn Hưng 44 Nguyễn Thị Minh Toàn
47. 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.6.6. Thiết lập các kiểu Dùng thẻ nếu muốn thay đổi cách thể hiện như màu sắc, font chữ của thành phần khi trạng thái thay đổi. Thẻ này có những thuộc tính tương tự thẻ . Ví dụ: 2.6.7. Thiết lập bộ điều khiển sự kiện - Event Handlers Dùng thẻ để thêm hoặc thay đổi event handlers. Thẻ này gồm các thuộc tính target, name, và handler. Ví dụ: Vũ Tấn Hưng 45 Nguyễn Thị Minh Toàn
48. 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.7. Sử dụng các hiệu ứng và sự chuyển tiếp giữa các trạng thái 2.7.1. Sử dụng hiệu ứng Một số hiệu ứng cơ bản: Hiệu ứng Mô tả Blur Làm mờ Move Di chuyển một thành phần Fade Hiện rõ dần theo một giá trị alpha Glow Làm sáng lên Resize Làm thay đổi kích thước của thành phần Rotate Quay một thành phần Zoom Phóng to thành phần theo tỷ lệ x, y WipeLeft Quét từ trái qua WipeRight Quét từ phải qua WipeUp Quét từ trên xuống WipeDown Quét từ dưới lên Bảng 4 : Một số hiệu ứng cơ bản Ta có thể dùng các thuộc tính xFrom, xTo, yFrom, và yTo để xác định sự di chuyển của thành phần. Ví dụ : Hoặc private var moveEffect:Move = new Move( ); moveEffect.xFrom = -100; 2.7.1.1. Phát các hiệu ứng Để phát lại một đoạn hiệu ứng nào đó, ta dùng phương thức play(). Nhưng để dùng được phương thức này thì trước tiên ta phải xác định được mục tiêu là các thành phần nào bằng thuộc tính target cho hiệu ứng đó. Vũ Tấn Hưng 46 Nguyễn Thị Minh Toàn
49. 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í dụ : moveEffect.target = textInput; moveEffect.play( ); Ta cũng có thể chỉ định nhiều đối tượng cho một hiệu ứng vào cùng một thời điểm bằng thuộc tình targets Ví dụ : moveEffect.targets = [textInput1, textInput2, textInput3, textInput4]; Đối tượng cũng có thể là một khung thiết kế Ví dụ : moveEffect.target = vbox; Một cách khác để chạy hiệu ứng là dùng Triggers Triggers xuất hiện khi ứng dụng Flex bắt đầu một hiệu ứng. Dùng triggers cho phép ta khởi tạo và sử dụng hiệu ứng hoàn toàn bằng MXML. Khi dùng triggers ta không cần phải thiết lập thuộc tính target. Sau đây là một số triggers chuẩn: • addedEffect • rollOverEffect • removeEffect • rollOutEffect • creationCompleteEffect • mouseDownEffect • focusInEffect • mouseUpEffect • focusOutEffect • moveEffect • hideEffect • resizeEffect • showEffect Ví dụ: Vũ Tấn Hưng 47 Nguyễn Thị Minh Toàn
50. Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa Hoặc 2.7.1.2. Các hiệu ứng ghép Ngoài các hiệu ứng đơn, ta có thể tạo ra các hiệu ứng ghép bằng cách kết hợp nhiều hiệu ứng đơn lại với nhau. Có hai cách ghép là: theo kiểu tuần tự hoặc là song song. • Hiệu ứng ghép theo kiểu tuần tự: Hiệu ứng này nối tiếp hiệu ứng kia. Ta dùng thẻ Sequence. Đồng thời ta có thể thêm một khoảng thời gian nghỉ giữa hai hiệu ứng. Ví dụ : • Hiệu ứng ghép song song: Phát các hiệu ứng cùng một lúc. Ví dụ: Ngoài ra, ta có thể lồng hiệu ứng ghép này trong hiệu ứng ghép kia Ví dụ: Vũ Tấn Hưng 48 Nguyễn Thị Minh Toàn
51. 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.7.1.3. Một số phương thức khác Theo mặc định thì các hiệu ứng sẽ diễn ra liên tục, nhưng ta có thể hiệu chỉnh các hiệu ứng bằng các phương thức như: pause(), resume(), reverse() Ngoài ra ta còn có thể hoãn hiệu ứng hoặc lặp lại hiệu ứng. Ví dụ: 2.7.2. Transitions - Sự chuyển tiếp giữa các trạng thái Transitions cho phép ta chèn các hiệu ứng vào sự chuyển tiếp giữa các trạng thái. Ta có thể tạo transitions bằng MXML hoặc bằng ActionScript. 2.7.2.1. Tạo transitions với MXML Với MXML, tạo transitions ta dùng thẻ Transition Ví dụ: Hoặc ta có thể dùng dấu * với ý nghĩa là tất cả các trạng thái Để chèn hiệu ứng vào giữa hai trạng thái, ta định nghĩa hiệu ứng bên trong thẻ Transition. Ví dụ: Vũ Tấn Hưng 49 Nguyễn Thị Minh Toàn
52. Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa Khi đó các thuộc tính to và from của hiệu ứng sẽ được tự động gán cho giá trị các thuộc tính fromState và toState của transition. Tuy nhiên ta vẫn có thể tự thiết lập các thuộc tính đó như ví dụ sau: 2.7.2.2. Sử dụng bộ lọc transition Nếu ta muốn hiệu ứng chỉ áp dụng cho một hành động nào đó của các đối tượng được áp dụng hiệu ứng thì ta phải dùng bộ lọc. Trong ví dụ sau, hiệu ứng Blur chi áp dụng cho các đối tượng nào đang chuyển động trong suốt transition. Ví dụ : Một số giá trị của bộ lọc : add, remove, show, hide, move, và resize Vũ Tấn Hưng 50 Nguyễn Thị Minh Toàn
53. 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 3. ActionScript 3.1. Giới thiệu ActionScript là ngôn ngữ lập trình chính thức của Adobe Flash. Trong khi trước đây được quan niệm là một công cụ trong hoạt hình, ActionScript đã mở rộng thành ngôn ngữ lập trình hoàn chỉnh để tạo nội dung và ứng dụng trong Web, thiết bị di động và trên máy tính. Mã ActionScript (AS) có thể viết trong những công cụ soạn thảo văn bản đơn giản như Notepad, tuy nhiên hầu hết các lập trình viên sử dụng hai công cụ cung cấp bởi hệ thống Adobe là Flex Builder và Flash. Phiên bàn AS 1.0 được giới thiệu vào năm 2000 cùng với Flash 4. Phiên bản này chịu nhiều ảnh hưởng của JavaScript và chuẩn ECMA-262, hỗ trợ những đối tượng và kiểu dữ liệu cơ bản. Phiên bản AS 2.0 xuất hiện vào tháng 9 năm 2003 cùng với Flash MX 2004 để đáp ứng nhu cầu người dùng về một ngôn ngữ có thể xây dựng những ứng dụng phức tạp và lớn hơn. Phiên bản này đã hỗ trợ lập trình hướng đối tượng như ngôn ngữ Java và C++ với từ khóa như class và extend. Vào năm 2006, AS 3.0 được phát hành với nhiều đặc điểm mới : kiểm tra kiểu dữ liệu lúc biên dịch và lúc chạy chương trình, chuẩn hóa vi65c quản lý sự kiện dựa trên chuẩn quản lý sự kiện DOM ; hỗ trợ packages, namespace ; biên dịch thành mã nhị phân mới (không tương thích với phiên bản 1.0 và 2.0), tích hợp E4X để thao tác trên dữ liệu XML. Chương 3 sẽ giới thiệu một số đặc điểm và thành phần trong AS 3.0. 3.2. Các thành phần cơ bản trong ActionScript 3.2.1. Lớp và đối tượng Bước đầu tiên để viết một chương trình là xác định những lớp của nó. Một số lớp trong chương trình được viết bởi người dùng để thực hiện một số thao tách riêng biệt (custom classes), một số khác được cung cấp bởi ActionScript và các chế độ thực thi của Flash (built-in classes) được thiết lập sẵn dùng để thực hiện các nhiệm Vũ Tấn Hưng 51 Nguyễn Thị Minh Toàn
54. 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 như thao tác với số và văn bản, nghe âm thanh, thể hiện hình ảnh, kết nối mạng và đáp ứng các yêu cầu của người dùng. Từ những lớp trong chương trình, chúng ta tạo được những đối tượng và ra lệnh cho chúng thực hiện công việc. Một nhóm lớp quan trọng được xây dựng trực tiếp từ ActionScript gọi là lớp tự nhiên - Native classes dùng để thao tác các loại thông tin căn bản như là số và văn bản. Native classes của ActionScript Lớp Mô tả String Kiểu chuỗi Boolean Kiểu logic đúng hoặc sai Number Kiểu số có dấu chấm động Int Kiểu số nguyên Uint Kiểu số nguyên dương Array Kiểu mảng Error Kiểu lỗi chương trình Date Kiểu ngày tháng Math Bao gồm các giá trị toán học thông thường và các hàm RegExp Định nghĩa công cụ tìm kiếm và thay thế văn bản Function Thể hiện một tập hợp các lệnh được thi hành hoặc gọi nhiều lần Object Định nghĩa các tính năng cơ bản của mọi đối tượng trong ActionScript Bảng 5: Các lớp tự nhiên của ActionScript Chương trình ActionScript được tạo bởi nhiều lớp. Mỗi lớp được đặt tên, có đặc trưng và một vai trò trong chương trình lớn. Để bắt đầu một chương trình, Flash tự động tạo một lớp chính - main class cho chương trình. Để khởi tạo một đối tượng mới từ một lớp ta dùng new: new ClassName Vũ Tấn Hưng 52 Nguyễn Thị Minh Toàn
55. 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.2. Packages Package là một nhóm các lớp. Mỗi package phân định một vùng độc lập của chương trình. Tên của package phải bắt đầu bằng ký tự viết thường. Trong khi tên lớp thường bắt đầu bằng ký tự viết hoa. Điều này giúp chúng ta dễ dàng phân biệt tên lớp và tên package. Tên của package sẽ được tự động gán cho 1 phần trong tên lớp thuộc package đó. Ví dụ như lớp Player thuộc package game sẽ có tên là game.Player Định nghĩa một package: package packageName{ } Một package muốn sử dụng những lớp public của package khác thì phải import. Import packageName.* 3.2.3. Hàm và biến Để định nghĩa một hàm ta dùng function Để định nghĩa một biến ta dùng var Ví dụ : package vuonThu { public class VuonThuAo { public function VuonThuAo ( ) { var thu = new ThuAo; } } } 3.2.3.1. Biến Biến có thể được khai báo là public, internal, protected hoặc private. Điều khiển truy xuất biến: Vũ Tấn Hưng 53 Nguyễn Thị Minh Toàn
56. Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa Thuộc tính Truy xuất biến trong Public Internal Protected Private Lớp chứa định nghĩa biến Cho phép Cho phép Cho phép Cho phép Lớp kế thừa của lớp chứa Cho phép Cho phép Cho phép Không cho định nghĩa biến phép Khác lớp nhưng cùng một Cho phép Cho phép Không cho Không cho package phép phép Không thuộc cùng một Cho phép Không cho Không cho Không cho package phép phép phép Bảng 6: Điều khiển truy xuất biến 3.2.3.2. Hàm Điều khiển truy xuất hàm: Thuộc tính Public Internal Hàm trong cùng một Cho phép Cho phép package Hàm không thuộc cùng Cho phép Không cho phép một package Bảng 7: Điều khiển truy xuất hàm Nếu hàm không được định nghĩa là public hay internal thì ActionScript mặc định hiểu là internal. 3.2.3.2.1. Hàm toàn cục Một hàm được định nghĩa tại một package không tên gọi là hàm toàn cục. Hàm này có thể sử dụng trong toàn chương trình mà không cần import. Ví dụ: package { Vũ Tấn Hưng 54 Nguyễn Thị Minh Toàn
57. Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa import flash.system.*; public function isLinux ( ) { return Capabilities.os == "Linux"; } package setup { public class Welcome { public function Welcome ( ) { if (isLinux( )) { }}}} isLinux() được sử dụng trong package setup mà không cần import 3.2.3.2.2. Hàm lồng Ví dụ: public function a ( ) { b( ); function b ( ) { } } Hàm b() chỉ được sử dụng bên trong hàm a(). Bên ngoài hàm a() không thể gọi hàm b() 3.2.3.2.3. Hàm ở cấp ngoài cùng Trong một file A.as, khi một hàm được định nghĩa ngoài cùng, không thuộc bất kỳ một package nào thì nó có thể được sử dụng ở bất kỳ đâu trong A.as. Và hàm này không được khai báo internal hay public. Ví dụ: function f ( ) { } package { Vũ Tấn Hưng 55 Nguyễn Thị Minh Toàn
58. 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ó thể dùng f() ở đây class A { //Có thể dùng f() ở đây public function A ( ) { //Có thể dùng f() ở đây } } } //Có thể dùng f() ở đây 3.2.3.2.4. Hàm được gán cho một biến function a ( ) { } var b = a; Kết quả trả về của hàm a() được gán cho biến b. Khi gán var b = a(), dấu ngoặc () được lượt bỏ. 3.2.3.2.5. Truyền tham số trong hàm function (param1, param2, paramn) { } Khi biến được gán var someVariable = function (param1, param2, paramn) thì hàm có thể được sử dụng thong qua biến someVariable(arg1, arg2, argn) 3.2.3.2.6. Hàm đệ quy Hàm gọi lại chính nó Ví dụ: function trouble ( ) { trouble( ); } Vũ Tấn Hưng 56 Nguyễn Thị Minh Toàn
59. Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa Hàm tính giai thừa sử dụng đệ quy function factorial (n) { if (n < 0) { return; } else if (n <= 1) { return 1; } else { return n * factorial(n-1); } } factorial(3); // Giá trị trả về: 6 factorial(5); // Giá trị trả về: 120 3.3. Sự kiện và xử lý sự kiện Trong ActionScript, sự kiện được chia làm hai loại: • Sự kiện được thiết lập sẵn (built-in event): mô tả những thay đổi trạng thái trong môi trường thực thi. Ví dụ như sự kiện click chuột. • Sự kiện tự định nghĩa (custom event): mô tả những thay đổi trạng thái của chương trình. Ví dụ như sự kiện kết thúc game. Các sự kiện rất thường gặp trong ActionScript. Trong thực tế, một chương trình thuần ActionScript, sau khi hàm main được thực thi thì tất cả những mã sau đó đều được thi hành bằng sự kiện. Vì vậy, ActionScript cung cấp cấu trúc sự kiện rất dồi dào, phong phú làm cơ sở cho cả built-in event và custom event 3.3.1. Sự kiện ActionScript cơ bản Xử lý sự kiện trong ActionScript chúng ta dùng event listeners. Event listeners là một hàm hoặc một phương thức được thực thi khi một sự kiện được gọi. Nó đợi, nghe ngóng sự kiện xảy ra. Muốn thông báo cho chương trình biết một sự kiện đang Vũ Tấn Hưng 57 Nguyễn Thị Minh Toàn
60. 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 gọi, ActionScript gọi thực thi tất cả các event listeners nào đã được đăng ký với sự kiện đó. Quy trình thông báo như vậy gọi là việc gửi sự kiện (event dispatch). Khi việc gửi sự kiện bắt đầu, ActionScript tạo một đối tượng gọi là đối tượng sự kiện (event object) thay mặt cho sự kiện đó. Đối tượng sự kiện luôn luôn là một thể hiện của lớp sự kiện. Việc gửi sự kiện trong ActionScript có sự kiện đích (event target) luôn luôn gắn liền với sự kiện. Để phản hồi sự kiện được gửi đến, phương thức đăng ký sự kiện chỉ đơn giản đăng ký với event target. Theo đó, tất cả các đối tượng event target đều là những thể hiện của lớp kế thừa từ lớp EventDispatcher hoặc lớp thực thi interfaces IEventDispatcher. Lớp EventDispatcher cung cấp các phương thức đăng ký hoặc hủy đăng ký một phương thức đăng ký sự kiện : addEventListener( ) and removeEventListener( ) 3.3.2. Đăng ký một phương thức đăng ký sự kiện - Event listener Gồm 5 bước: 1. Quyết định tên gọi loại sự kiện. Flash cung cấp nhiều loại sự kiện đã được định nghĩa sẵn. Tên của mỗi loại sự kiện được truy xuất thông qua các hằng số của lớp sự kiện hoặc một trong các đại diện của nó. Ví dụ như hằng số của loại sự kiện kết thức hàm Event.COMPLETE có giá trị là “complete” Ví dụ: complete event Event object type: flash.events.Event Event.type property = flash.events.Event.COMPLETE theURLLoader.addEventListener(Event.COMPLETE, someListener); Vũ Tấn Hưng 58 Nguyễn Thị Minh Toàn
61. Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa Event.type property cho ta biết hằng số cho sự kiện “complete” là flash.events.Event.COMPLETE Mặt khác, để phản hồi loại sự kiện được gọi, đầu tiên chúng ta phải tìm được hằng số đại diện cho nó. 2. Quyết định kiểu dữ liệu của đối tượng sự kiện tượng trưng cho sự kiện đó. Ví dụ: complete event Event object type: flash.events.Event Event.type property = flash.events.Event.COMPLETE theURLLoader.addEventListener(Event.COMPLETE, someListener); Event object type cho ta biết kiểu dữ liệu của đối tượng Event.COMPLETE là flash.events.Event 3. Tạo một phương thức đăng ký sự kiện để phản hồi cho sự kiện. Phương thức đăng ký sự kiện phải được định nghĩa là tham số có cùng kiểu dữ liệu với đối tượng sự kiện ở bước 2. Ví dụ: private function completeListener (e: flash.events.Event):void { trace("Load complete"); } Tất cả phương thức đăng ký sự kiện đều có kiểu trả về là void. Phương thức đăng ký sự kiện là phương thức thường được khai báo private nên không thể truy xuất từ lớp khác. 4. Sử dụng phương thức addEventListener() của lớp EventDispatcher để đăng ký phương thức đăng ký sự kiện với event target. complete event Event object type: flash.events.Event Event.type property = flash.events.Event.COMPLETE theURLLoader.addEventListener(Event.COMPLETE, someListener); Vũ Tấn Hưng 59 Nguyễn Thị Minh Toàn
62. Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa someListener() sẽ đăng ký phương thức đăng ký sự kiện với event target theURLLoader cho sự kiện Event.COMPLETE Tham số đầu tiên của addEventListener() là tên của loại sự kiện, tham số thứ hai là một tham chiếu cho phương thức đăng ký sự kiện. Đây là dạng đầy đủ của phương thức addEventListener(): addEventListener(type, listener, useCapture, priority, useWeakReference) Hai tham số đầu tiên là bắt buộc. 5. Đợi sự kiện xảy ra Chúng ta đã khởi tạo một phương thức đăng ký sự kiện cho Event.COMPLETE và đăng ký nó với event target. Gọi thực thi someListener(): theURLLoader.load (new URLRequest(“someFile.txt”)); Khi đã load xong someFile.txt, ActionScript gửi đi sự kiện Event.COMPLETE đã đăng ký, và someListener() được thực thi. Sau là một ví dụ đầy đủ về 5 bước: package { import flash.display.*; import flash.net.*; import flash.events.*; public class FileLoader extends Sprite { public function FileLoader ( ) { // Tạo đối tượng sự kiện đích var urlLoader:URLLoader = new URLLoader( ); // Đăng ký phương thức đăng ký sự kiện urlLoader.addEventListener(Event.COMPLETE, completeListener); // Gọi hàm để kích hoạt sự kiện xảy ra urlLoader.load(new URLRequest("someFile.txt")); } // Định nghĩa phương thức đăng ký sự kiện Vũ Tấn Hưng 60 Nguyễn Thị Minh Toàn
63. 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 function completeListener (e:Event):void { trace("Load complete"); } } } 3.3.3. Hủy đăng ký một phương thức đăng ký sự kiện - Event listener Sử dụng phương thức removeEventListener() của lớp EventDispatcher eventTarget.removeEventListener(type, listener, useCapture) Ví dụ: stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveListener); Để tiết kiệm bộ nhớ, event listeners phải được hủy nếu nó không cần dùng đến trong chương trình. 3.3.4. Đối tượng Target Trong mọi việc gửi sự kiện, đối tượng sự kiện truyền cho các phương thức đăng ký sự kiện sẽ định nghĩa một biến target tham chiếu đến đối tượng target. public function someListener (e:SomeEvent):void { trace(e.target); } 3.3.5. Quyền ưu tiên đối với phương thức đăng ký sự kiện - Event Listener Khi nhiều event listener được đăng ký cho một loại sự kiện của một đối tượng nào đó thì cái nào đăng ký trước sẽ được ưu tiên. Ví dụ như có 2 event listener: completeListenerA() và completeListenerB(). Khi sự kiện Event.COMPLETE được gọi thì completeListenerA() sẽ thực thi trước vì nó được đăng ký trước. Ví dụ: package { Vũ Tấn Hưng 61 Nguyễn Thị Minh Toàn
64. Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa import flash.display.*; import flash.net.*; import flash.events.*; public class FileLoader extends Sprite { public function FileLoader ( ) { var urlLoader:URLLoader = new URLLoader( ); urlLoader.addEventListener(Event.COMPLETE, completeListenerA); urlLoader.addEventListener(Event.COMPLETE, completeListenerB); urlLoader.load(new URLRequest("someFile.txt")); } private function completeListenerA (e:Event):void { trace("Listener A: Load complete"); } private function completeListenerB (e:Event):void{ trace("Listener B: Load complete"); } } } Để thay đổi thứ tự mặc định xảy ra của event listeners, ta có thể dùng tham số priority của phương thức addEventListener() addEventListener(type, listener, useCapture, priority, useWeakReference) Tham số priority là số nguyên nếu không được xác định thì nó được mặc định là 0. 3.4. ActionScript động ActionScript rất độc đáo khi cho phép sửa đổi cấu trúc của tất cả các lớp, thậm chí là của các đối tượng riêng lẻ trong lúc thực thi. Ví dụ như trong lúc thực thi, một chương trình có thể: • Thêm những phương thức mới hoặc những biến thể mới vào bất kỳ lớp nào. Vũ Tấn Hưng 62 Nguyễn Thị Minh Toàn
65. Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa • Thêm những phương thức mới hoặc những biến mới vào bất kỳ đối tượng đơn, đặc biệt nào. • Tạo một lớp mới trọn vẹn từ đầu. • Thay đổi lớp cha của một lớp. 3.4.1. Biến động Biến động chỉ được thêm vào lớp động (lớp được khai báo với thuộc tính dynamic). Lớp con của lớp động cũng không được xem là động nếu định nghĩa của nó không có thuộc tính dynamic. Ví dụ: dynamic public class Person { } // Lớp Person không định nghĩa biến eyeColor. var person:Person = new Person( ); person.eyeColor = "brown"; Ta định nghĩa lớp Person là dynamic nên ta có thể thêm một biến mới eyeColor vào đối tượng Person mặc dù lớp Person không định nghĩa biến eyeColor. Nếu ta định nghĩa kiểu dữ liệu khi tạo biến eyeColor: person.eyeColor:String = "brown"; thì sẽ bị báo lỗi là: “Error! :String is not allowed here” 3.4.2. Tự động thêm hành vi mới cho một thể hiện Cú pháp như sau: someObject.someDynamicVariable = someFunction; hoặc someObject.someDynamicVariable = function (param1, param2, paramn) { } someObject là tên một thể hiện của một lớp động. someDynamicVariable là một biến động mới hoặc đã có. Vũ Tấn Hưng 63 Nguyễn Thị Minh Toàn
66. 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í dụ: var info:Object = new Object( ); info.city = "Toronto"; info.country = "Canada"; info.getAddress = function ( ):String { return this.city + ", " + this.country; } trace(info.getAddress( )); 3.4.3. Tham chiếu động cho biến và phương thức Cú pháp: someObject[someExpression] someObject là một tham chiếu đến đối tượng mà biến của nó truy xuất đến. someExpression là tên biến. Ví dụ: var info:Object = new Object( ); info["city"] = "Toronto"; hoặc: var detail:String = "city"; trace(info[detail]); // Xuất ra màn hình: Toronto Chú ý trong trường hợp nếu ta đặt tên biến là số thì trong dấu [] vẫn được chấp nhận var info:Object = new Object( ); info["411"] = "Information Line"; Nhưng khi khởi tạo biến bằng toán tử (.) thì sẽ bị báo lỗi var info:Object = new Object( ); info.411 = "Information Line"; // Thông báo lỗi: Identifiers must not start with a number Vũ Tấn Hưng 64 Nguyễn Thị Minh Toàn
67. 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.5. XML và E4X Từ Flash Player 5, ActionScript (AS) đã có công cụ làm việc với XML. Ở AS 1.0 và 2.0 dữ liệu XML được tạo ra và xử lý bằng biến và hàm của lớp XML được xây dựng sẵn. Lớp XML dựa trên W3C DOM, một chuẩn giao tiếp với XML. Ở AS 3.0 bộ công cụ để làm việc với XML đã được nâng cấp hoàn toàn. AS 3.0 triển khai ECMAScript cho XML (E4X), một ngôn ngữ chính thức làm việc với XML như một kiểu dữ liệu cơ bản. E4X rất tiện dụng và linh hoạt để làm việc với XML. 3.5.1. Dữ liệu phân cấp XML Chúng ta xem XML như là một dữ liệu phân cấp. Nếu xem dữ liệu XML như là một cây phân cấp thì trong đó những thành phần được xem là những nút (node) trên cây. Xét ví dụ (1) đoạn dữ liệu XML sau: Mat Ma DaVinci Dan Brown VHTT Các thành phần , , , và các chuỗi “Mat Ma DaVinci”, “Dan Brown”, “VHTT” được xem là các nút (node) trên cây. Thành phần là gốc của cây hay nút gốc của dữ liệu XML. Các nút , , là thành phần con của . , , là các thành phần anh em của nhau. Các thành phần , , có một nút con văn bản lần lượt là “Mat Ma DaVinci”, “Dan Brown”, “VHTT”. Các nút văn bản này là nút cuối cùng trên cây. 3.5.1.1. Biểu diễn dữ liệu XML trong E4X Trong E4X dữ liệu XML được biểu diễn bằng một trong hai kiểu dữ liệu cơ bản của AS là XML và XMLList và những lớp tương ứng của chúng cũng được đặt tên là Vũ Tấn Hưng 65 Nguyễn Thị Minh Toàn
68. Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa XML và XMLList, nếu một thành phần XML có các thành phần con (như con của là ) hoặc có các nút con văn bản (như con của là “Mat Ma DaVinci”) thì những thành phần con này được gói trong XMLList bởi một thể hiện của cha chúng. Các nút con của một thành phần XML luôn được gói trong một XMLList, thậm chí thành phần đó chỉ có duy nhất một con. Nếu một thành phần XML có các thuộc tính, chú thích, câu lệnh thì chúng cũng được gói trong XMLList. Tuy nhiên chú thích và các câu lệnh theo mặc định bị loại bỏ bởi E4X. Xét lại đoạn ví dụ: Mat Ma DaVinci Dan Brown VHTT Thành phần được giữ bởi một thể hiện của XML. Thể hiện này chứa 2 thể hiện XMLList, một cho các thuộc tính của , cái còn lại cho các thành phần con của nó. Thành phần có duy nhất một thuộc tính do đó XMLList cho thuộc tính chứa duy nhất một thể hiện (ISBN). XMLList cho các thành phần con của chứa 3 thể hiện là , , . Mỗi một thể hiện XML có một XMLList gồm duy nhất một thể hiện XML lần lượt là “Mat Ma DaVinci”, “Dan Brown”, “VHTT”. 3.5.1.2. Tạo dữ liệu XML với E4X Để tạo một XML trong ví dụ trên bằng E4X chúng ta có 3 cách: 1. Sử dụng hàm khởi tạo XML để tạo một thể hiện XML mới, sau đó để tạo phần còn lại chúng ta sẽ sử dụng những kỹ thuật được trình bày ở phần sau "Thay đổi và tạo mới nội dung XML”. 2. Sử dụng hàm khởi tạo XML để tạo một thể hiện XML mới, sau đó nhập dữ liệu từ tập tin bên ngoài, phần này được trình bày ở “Nạp dữ liệu XML”. 3. Viết dữ liệu XML trực tiếp dưới dạng văn bản, như chuỗi hoặc số. Ví dụ (2) sau sử dụng cách thứ 3 để tạo dữ liệu XML: Vũ Tấn Hưng 66 Nguyễn Thị Minh Toàn
69. Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa var tieuthuyet:XML= Mat Ma DaVinci Dan Brown VHTT ; AS cũng cho phép một biểu thức động được sử dụng để tạo XML. Dấu { } dùng để xác định biểu thức động trong chuỗi XML . Đoạn mã sau xác định tên của một cách động: var ten:String = “SACH”; var tieuthuyet:XML = ; 3.5.2. Truy cập dữ liệu XML E4X cung cấp 2 công cụ chính để truy cập dữ liệu XML phân cấp: Các phương thức truy cập trong XML và XMLList (attribute( ), attributes( ), child(), children( ), comments( ), descendants( ), elements( ), parent( ), processingInstructions( ) và text( )). Truy cập với cú pháp dấu (.), ( ) và thuộc tính với toán tử @. Hai cách truy cập này thông thường thì tương đương nhau, tuy nhiên các trường hợp sau đây chúng ta phải sử dụng XML và XMLList: • Cha của một thể hiện XML (truy cập thông qua parent()). • Chú thích (truy cập thông qua comments()). • Câu lệnh (truy cập thông qua processingInstructions()). 3.5.2.1. Truy cập nút XML gốc Ở ví dụ (2) chúng ta đã gán một đoạn XML cho biến tieuthuyet. Để truy cập thành phần gốc của , đơn giản chúng ta chỉ cần sử dụng biến tieuthuyet. Ví dụ (3), đoạn mã sau truyền thành phần cho một hàm datHang(): datHang(tieuthuyet); Vũ Tấn Hưng 67 Nguyễn Thị Minh Toàn
70. 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ưu ý rằng thành phần không phải là một tên do đó chúng ta phải ghi datHang(tieuthuyet), các ghi sau là không hợp lệ: datHang(tieuthuyet.SACH); datHang(tieuthuyet.child(“SACH”)); Lưu ý không có cách truy cập trực tiếp nút gốc từ một nút con cho trước, tuy nhiên chúng ta vẫn có thể sử dụng hàm parent của XML để truy cập tổ tiên của chúng như ví dụ (4) sau: public function getRoot (childNode:XML):XML { var parentNode:XML = childNode.parent( ); if (parentNode != null) { return getRoot(parentNode); } else { return childNode; } } 3.5.2.2. Truy cập những nút con Để truy cập XMLList biểu diễn những nút con của chúng ta có thể sử dụng hàm children() của XML, ví dụ: tieuthuyet.children(); // trả về một XMLList biểu diễn các nút con của . Cách khác chúng ta có thể sử dụng ký tự đại diện (*). Ví dụ: tieuthuyet.*; // trả về một XMLList biểu diễn các nút con của . Để truy cập đến một nút con cụ thể trong XMLList chúng ta sử dụng toán tử [ ]. Ví dụ để truy cập đến thành phần con thứ 2 của là , ta sử dụng: tieuthuyet.children()[1] hoặc tieuthuyet.*[1] Trong E4X các nút con thường được truy cập bởi tên của chúng hơn là vị trí. Để truy cập nút qua tên, chúng ta sử dụng hàm child() của lớp XML, hàm này trả về XMLList chứa các thành phần con có tên tương ứng. Ví dụ để nhận một XMLList chứa các thành phần con của có tên là chúng ta sử dụng: tieuthuyet.child(“TACGIA”) Vũ Tấn Hưng 68 Nguyễn Thị Minh Toàn
71. Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa Hoặc chúng ta có thể sử dụng cú pháp truy cập thông qua biến như sau: tieuthuyet.TACGIA 3.5.3. Thao tác dữ liệu XML với câu lệnh for-each-in và for-in Văn bản có cấu trúc XML thường chứa những dữ liệu cần được xử lý có hệ thống. Ví dụ, văn bản XML có thể chứa thông tin về dân số của một quốc gia trên thế giới, hoặc các địa điểm trên bản đồ, hoặc giá các mặt hàng trong đơn đặt hàng. Phương thức truy cập giống nhau cho các loại thông tin trong XML. Để dễ dàng xử lý các dữ liệu có định dạng XML thì E4X đã bổ sung thêm vòng lập for-each-in vào AS. Vòng lập for-each-in cung cấp cách thức tiện lợi, dễ dàng truy cập đến giá trị của các biến đối tượng hay các thành phần trong mảng. Cú pháp của for-each-in: for each (bien in DoiTuong) { cau lenh } Ví dụ: for each (var nut_con:XML in tieuthuyet.*) { trace(nut_con); } 3.5.4. Trích lọc dữ liệu XML Toán tử trích lọc dữ liệu trong E4X rất đơn giản nhưng lại là công cụ tìm kiếm mạnh mẽ, nó có thể tìm trong bất kỳ XMLList nào và trả về một tập con thỏa một điều kiện nhất định. Cú pháp như sau: motXMLList.(dieukien) Với mỗi thành phần trong motXMLList thì dieukien được thực hiện một lần, nếu dieukien trả về là true thì thành phần đó được thêm vào trong XMLList kết quả. Ví dụ xét đoạn XML sau thể hiện danh sách nhân viên trong một công ty: var nhansu:XML = Vũ Tấn Hưng 69 Nguyễn Thị Minh Toàn
72. Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa Hang Ly Lan Le 30000 Thiet Ke Sang Tran Lan Le 25000 Thiet Ke Lan Le Hung Vu 45000 Truong Phong Giả sử chúng ta muốn một danh sách các nhân viên mà có trưởng phòng là Lan Le. Chúng ta sẽ trích lọc danh sách của như sau: // Đầu tiên gán một biến thể hiện tất cả thành phần . var tatcanhanvien:XMLList = nhansu.*; // Bây giờ trích lọc các nhân viên: var nhanvienduoiquyenLan:XMLList = tatcanhanvien.(TRUONGPHONG == “Lan Le”); Biểu thức tatcanhanvien.(TRUONGPHONG == “Lan Le”) trả về một XMLList chứa các thành phần trong tatcanhanvien mà là “Lan Le”. Vũ Tấn Hưng 70 Nguyễn Thị Minh Toàn
73. 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.5.5. Thay đổi hoặc tạo mới nội dung XML Trong E4X việc thay đổi hoặc thêm nội dung vào một thể hiện XML được thực hiện khá đơn giản. Để thay đổi nội dung của một thành phần XML chúng ta gán thành phần đó với một giá trị khác thay vì một đối tượng XML hay XMLList. Ví dụ: var tieuthuyet:XML= Mat Ma DaVinci Dan Brown VHTT ; Để thay đổi nội dung của từ “Mat Ma DaVinci” thành “Cuon theo chieu gio” ta sử dụng: tieuthuyet.TUA[0] = “Cuon theo chieu gio”; Để thay đổi giá trị thuộc tính, đơn giản gán thuộc tính đó với một giá trị mới trong câu lệnh gán. Giá trị mới đó được chuyển thành chuỗi và thay thế giá trị hiện tại. Ví dụ bảng mã sau đổi thuộc tính ISBN từ “1231456” thành “09060906”: tieuthuyet.@ISBN = “09060906”; Để thay thế một thành phần XML bằng một thành phần mới chúng ta gán thành phần đó với một đối tượng XML hoặc XMLList. Ví dụ, đoạn mã sau thành phần thay thế thành phần var doc:XML = E4X that vui ; doc.P = E4X that tien loi ; // Kết quả: E4X that tien loi Nội dung của một thành phần cũng có thể được thay đổi bằng hàm replace( ) của lớp XML. Ví dụ: // doc.P = E4X that tien loi doc.replace(“P”, E4X that tien loi ); Vũ Tấn Hưng 71 Nguyễn Thị Minh Toàn
74. 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.5.6. Thêm thuộc tính hoặc thành phần mới Chúng ta có thể thêm thuộc tính hoặc thành phần mới vào văn bản sử dụng cú pháp gán tương tự như chúng ta thay đổi hoặc thay thế một thành phần hoặc thuộc tính có sẵn. Trong E4X khi một giá trị được gán cho một thuộc tính hoặc một thành phần chưa có, AS tự động thêm thuộc tính hoặc thành phần đó vào văn bản. Ví dụ, ta sẽ xây dựng từ đầu như sau: var tieuthuyet:XML = ; Tiếp theo chúng ta thêm thuộc tính ISBN: tieuthuyet.@ISBN = ”1231456”; Cuối cùng chúng ta thêm các thành phần , , : tieuthuyet.TUA = “Mat Ma Davinci”; tieuthuyet.TACGIA = “Dan Brown”; tieuthuyet.NHAXUATBAN = “VHTT”; Với mỗi phép gán thì thành phần mới được thêm vào cuối. Do đó kết quả của đoạn mã trên là: Mat Ma DaVinci Dan Brown VHTT Để thêm một nút con mới vào sau mọi nút con khác, ta sử dụng kĩ thuật sau: cha.insertChildAfter(cha.*[cha.*.length()-1], ) hoặc: cha.*[cha.*.length()-1] = cha.*.[cha.*.length()-1] + hoặc: cha.appendChild( ) Để thêm một nút con mới vào sau một nút con cho trước, sử dụng một trong các kĩ thuật sau: Vũ Tấn Hưng 72 Nguyễn Thị Minh Toàn
75. Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa cha.insertChildAfter(cha.existingChild[n], ) hoặc: cha.existingChild[n] = cha.existingChild[n] + hoặc: cha.*[chi_so] = cha.*[chiso] + 3.5.7. Xóa thành phần và thuộc tính Để xóa một thành phần hay thuộc tính ta sử dụng toán tử delete như sau: delete thanhphanHaythuoctinh Ví dụ, đoạn mã sau sẽ xóa thuộc tính ISBN của thành phần : delete tieuthuyet.@ISBN; Đoạn mã sau sẽ xóa thành phần của : delete tieuthuyet.TUA; Để xóa tất cả thành phần con chứa trong một thành phần: delete tieuthuyet.*; // Xóa , , Sử dụng kỹ thuật tương tự để xóa bỏ nội dung văn bản của một thành phần: delete tieuthuyet.TUA.*; // Xóa bỏ “Mat Ma Davinci” Để xóa bỏ tất cả các thuộc tính của thành phần: delete tieuthuyet.@.*; // Xóa tất cả thuộc tính (trong trường hợp này là ISBN). 3.5.8. Nạp dữ liệu XML Trong hầu hết các ứng dụng thực tế chúng ta thường phải nạp dữ liệu XML từ tài nguyên bên ngoài. Để nạp dữ liệu XML bên ngoài vào một thể hiện XML, ta thực hiện những bước sau: Tạo một đối tượng URLRequest để mô tả vị trí của dữ liệu XML bên ngoài (có thể là một tập tin hoặc một đoạn mã trả về một XML ở phía máy chủ.) Tạo một đối tượng URLLoader và sử dụng phương thức load của nó để nạp XML. Đợi cho đến khi dữ liệu XML được nạp. Truyền dữ liệu XML được nạp cho hàm khởi tạo của một thể hiện XML mới. Ví dụ: Vũ Tấn Hưng 73 Nguyễn Thị Minh Toàn
76. Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa package { import flash.display.*; import flash.events.*; import flash.net.*; // Mô tả những đoạn mã cần thiết để nạp dữ liệu XML từ bên ngoài public class XMLLoader extends Sprite { // Đây là biến sẽ được gán cho dữ liệu XML được nạp private var tieuthuyet:XML; // Đối tượng được dùng để nạp XML private var urlLoader:URLLoader; // Hàm khởi tạo public function XMLLoader ( ) { // Xác định vị trí của dữ liệu XML bên ngoài var urlRequest:URLRequest = new URLRequest("tieuthuyet.xml"); // Tạo một đối tượng để nạp dữ liệu văn bản bên ngoài urlLoader = new URLLoader( ); // Đăng ký để được thông báo khi nạp xong dữ liệu XML urlLoader.addEventListener(Event.COMPLETE, completeListener); // Nạp XML urlLoader.load(urlRequest); } // Hàm được gọi tự động khi dữ liệu XML nạp xong private function completeListener(e:Event):void { tieuthuyet = new XML(urlLoader.data); trace(tieuthuyet.toXMLString( )); } } } Vũ Tấn Hưng 74 Nguyễn Thị Minh Toàn
77. 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 4. Ứng dụng 4.1. Giới thiệu ứng dụng Đây là ứng dụng cho phép quản lí hình ảnh, tạo và chia sẻ Slideshow trên mạng. Một số chức năng cơ bản của ứng dụng như: • Người dùng có thể tải hình ảnh lên, tạo album cá nhân, quản lí các hình ảnh trong album như thêm, xóa hình ảnh, sắp xếp hình ảnh, kéo thả hình ảnh. • Xem hình theo nhiều dạng như thumbnail, list, carousel. • Tạo slideshow và cho phép nhúng slideshow đó vào một trang web khác. 4.2. Yêu cầu chức năng ™ Chức năng đăng ký và đăng nhập ™ Chức năng tải ảnh lên ™ Chức năng xem • Xem ảnh • Xem album • Xem slideshow ™ Chức năng tạo mới • Tạo album • Tạo slideshow ™ Chức năng chỉnh sửa: Hiệu chỉnh thuộc tính slideshow ™ Chức năng thêm: Thêm ảnh vào album (copy, move) ™ Chức năng xóa • Xóa ảnh khỏi album • Xóa album ™ Chức năng sắp xếp: Sắp xếp theo tên, dung lượng ảnh, thời gian và tự sắp xếp hình ảnh theo thứ tự người dùng thích. Vũ Tấn Hưng 75 Nguyễn Thị Minh Toàn