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 <?xml version="1.0" encoding="UTF-8" ?> <Form version="1.JFrameFormInfo"> <NonVisualComponents> <Menu class="javax.JMenuBar" name="jMenuBar1"> <SubComponents> Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa <Menu class="javax.JMenu" name="jMenu2"> <Properties> <Property name="text" type="java.String" value= "Nguyên lý"/> </Properties> <SubComponents> <MenuItem class="javax.JMenuItem" name="jMenuItem1"> <Properties> <Property name="text" type="java.String" value="Show"/> </Properties> <Events> <EventHandler event="actionPerformed" listener="java.ActionListener" parameters="java.ActionEvent" handler="jMenuItem1ActionPerformed"/> </Events> </MenuItem> </SubComponents> </Menu> <Menu class="javax.JMenu" name="jMenu1"> <Properties> <Property name="text" type="java.String" value="Help"/> </Properties> <SubComponents> <MenuItem class="javax.JMenuItem" name="jMenuItem2"> <Properties> <Property name="text" type="java.String" value=" Thông tin"/> </Properties> <Events> <EventHandler event="actionPerformed" listener="java.ActionListener" parameters="java.ActionEvent" handler="jMenuItem2ActionPerformed"/> </Events> </MenuItem> <MenuItem class="javax.JMenuItem" name="jMenuItem3"> <Properties> <Property name="text" type="java.String" value="Version"/> </Properties> </MenuItem> </SubComponents> </Menu> </SubComponents> </Menu> </NonVisualComponents> 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 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 <?xml version="1.0" encoding="UTF-8" ?> <Form version="1.JFrameFormInfo"> <NonVisualComponents> <Menu class="javax.JMenuBar" name="jMenuBar1"> <SubComponents> Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa <Menu class="javax.JMenu" name="jMenu2"> <Properties> <Property name="text" type="java.String" value= "Nguyên lý"/> </Properties> <SubComponents> <MenuItem class="javax.JMenuItem" name="jMenuItem1"> <Properties> <Property name="text" type="java.String" value="Show"/> </Properties> <Events> <EventHandler event="actionPerformed" listener="java.ActionListener" parameters="java.ActionEvent" handler="jMenuItem1ActionPerformed"/> </Events> </MenuItem> </SubComponents> </Menu> <Menu class="javax.JMenu" name="jMenu1"> <Properties> <Property name="text" type="java.String" value="Help"/> </Properties> <SubComponents> <MenuItem class="javax.JMenuItem" name="jMenuItem2"> <Properties> <Property name="text" type="java.String" value=" Thông tin"/> </Properties> <Events> <EventHandler event="actionPerformed" listener="java.ActionListener" parameters="java.ActionEvent" handler="jMenuItem2ActionPerformed"/> </Events> </MenuItem> <MenuItem class="javax.JMenuItem" name="jMenuItem3"> <Properties> <Property name="text" type="java.String" value="Version"/> </Properties> </MenuItem> </SubComponents> </Menu> </SubComponents> </Menu> </NonVisualComponents> dành cho Web), www.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 <?xml version="1.0" encoding="UTF-8" ?> <Form version="1.JFrameFormInfo"> <NonVisualComponents> <Menu class="javax.JMenuBar" name="jMenuBar1"> <SubComponents> Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa <Menu class="javax.JMenu" name="jMenu2"> <Properties> <Property name="text" type="java.String" value= "Nguyên lý"/> </Properties> <SubComponents> <MenuItem class="javax.JMenuItem" name="jMenuItem1"> <Properties> <Property name="text" type="java.String" value="Show"/> </Properties> <Events> <EventHandler event="actionPerformed" listener="java.ActionListener" parameters="java.ActionEvent" handler="jMenuItem1ActionPerformed"/> </Events> </MenuItem> </SubComponents> </Menu> <Menu class="javax.JMenu" name="jMenu1"> <Properties> <Property name="text" type="java.String" value="Help"/> </Properties> <SubComponents> <MenuItem class="javax.JMenuItem" name="jMenuItem2"> <Properties> <Property name="text" type="java.String" value=" Thông tin"/> </Properties> <Events> <EventHandler event="actionPerformed" listener="java.ActionListener" parameters="java.ActionEvent" handler="jMenuItem2ActionPerformed"/> </Events> </MenuItem> <MenuItem class="javax.JMenuItem" name="jMenuItem3"> <Properties> <Property name="text" type="java.String" value="Version"/> </Properties> </MenuItem> </SubComponents> </Menu> </SubComponents> </Menu> </NonVisualComponents> Chương 2. 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.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. Hình 4: Flex SDK 2. Những công nghệ trong ứng dụng Flex 2.
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 <?xml version="1.0" encoding="UTF-8" ?> <Form version="1.JFrameFormInfo"> <NonVisualComponents> <Menu class="javax.JMenuBar" name="jMenuBar1"> <SubComponents> Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa <Menu class="javax.JMenu" name="jMenu2"> <Properties> <Property name="text" type="java.String" value= "Nguyên lý"/> </Properties> <SubComponents> <MenuItem class="javax.JMenuItem" name="jMenuItem1"> <Properties> <Property name="text" type="java.String" value="Show"/> </Properties> <Events> <EventHandler event="actionPerformed" listener="java.ActionListener" parameters="java.ActionEvent" handler="jMenuItem1ActionPerformed"/> </Events> </MenuItem> </SubComponents> </Menu> <Menu class="javax.JMenu" name="jMenu1"> <Properties> <Property name="text" type="java.String" value="Help"/> </Properties> <SubComponents> <MenuItem class="javax.JMenuItem" name="jMenuItem2"> <Properties> <Property name="text" type="java.String" value=" Thông tin"/> </Properties> <Events> <EventHandler event="actionPerformed" listener="java.ActionListener" parameters="java.ActionEvent" handler="jMenuItem2ActionPerformed"/> </Events> </MenuItem> <MenuItem class="javax.JMenuItem" name="jMenuItem3"> <Properties> <Property name="text" type="java.String" value="Version"/> </Properties> </MenuItem> </SubComponents> </Menu> </SubComponents> </Menu> </NonVisualComponents> 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 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à. 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 <?xml version="1.0" encoding="UTF-8" ?> <Form version="1.JFrameFormInfo"> <NonVisualComponents> <Menu class="javax.JMenuBar" name="jMenuBar1"> <SubComponents> Tìm hiểu ngôn ngữ lập trình trong Adobe Flash - Xây dựng ứng dụng minh họa <Menu class="javax.JMenu" name="jMenu2"> <Properties> <Property name="text" type="java.String" value= "Nguyên lý"/> </Properties> <SubComponents> <MenuItem class="javax.JMenuItem" name="jMenuItem1"> <Properties> <Property name="text" type="java.String" value="Show"/> </Properties> <Events> <EventHandler event="actionPerformed" listener="java.ActionListener" parameters="java.ActionEvent" handler="jMenuItem1ActionPerformed"/> </Events> </MenuItem> </SubComponents> </Menu> <Menu class="javax.JMenu" name="jMenu1"> <Properties> <Property name="text" type="java.String" value="Help"/> </Properties> <SubComponents> <MenuItem class="javax.JMenuItem" name="jMenuItem2"> <Properties> <Property name="text" type="java.String" value=" Thông tin"/> </Properties> <Events> <EventHandler event="actionPerformed" listener="java.ActionListener" parameters="java.ActionEvent" handler="jMenuItem2ActionPerformed"/> </Events> </MenuItem> <MenuItem class="javax.JMenuItem" name="jMenuItem3"> <Properties> <Property name="text" type="java.String" value="Version"/> </Properties> </MenuItem> </SubComponents> </Menu> </SubComponents> </Menu> </NonVisualComponents> Đị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. 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.