dành cho Web, www.pikeo.com, một Website chia sẻ hình ảnh và một vài Wesitethô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
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.
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
Giới thiệu thêm một số thành phần và kỹ thuật trong ActionScript và Flex.
Trong thời gian gần đây, hạ tầng CNTT phát triển mạnh mẽ với các mạng băng thông Internet rộng rãi được triển khai phổ biến, từ đó dẫn đến sự gia tăng rõ rệt về nhu cầu sử dụng các ứng dụng trực tuyến (RIA: Rich Internet Application) RIA là những ứng dụng web có tính năng và đặc điểm tương tự như các phần mềm desktop, giúp người dùng không cần cài đặt phần mềm, dễ dàng cập nhật và có thể truy cập từ bất kỳ máy tính nào có kết nối Internet, nâng cao trải nghiệm người dùng Các ứng dụng RIA giúp làm mờ ranh giới giữa ứng dụng trên máy tính để bàn và trực tuyến, được coi là xu hướng tương lai của các ứng dụng web Để tạo ra các ứng dụng RIA, các nhà phát triển có thể sử dụng nhiều giải pháp công nghệ khác nhau phù hợp với yêu cầu của dự án.
DHTML (gồm HTML, CSS, JavaScript) kết hợp với AJAX là công cụ mạnh mẽ để phát triển web động Tuy nhiên, HTML là một chuẩn tài liệu chứ không phải công cụ trình diễn, còn JavaScript chưa đủ mạnh và thiếu tính chặt chẽ Thêm vào đó, DHTML thường gặp vấn đề về khả năng tương thích giữa các trình duyệt, gây khó khăn trong quá trình phát triển và duy trì trang web.
Giải pháp thứ hai là sử dụng công nghệ SilverLight của Microsoft, một plug-in đa nền tảng và đa trình duyệt dành cho các chuyên gia phát triển ứng dụng Silverlight cho phép tạo ra các ứng dụng phong phú với khả năng tích hợp media, tương tác cao và hoạt ảnh sống động Plug-in này tương thích với các trình duyệt như Internet Explorer, mang lại giải pháp tối ưu cho phát triển ứng dụng web đa dạng và linh hoạt.
Firefox trong Windows và Firefox cũng như trình duyệt Safari trên hệ điều hành Mac.
Dù công nghệ mới đang trong quá trình phát triển và thiếu tài liệu hỗ trợ đầy đủ, người dùng cần thêm thời gian để đánh giá và lựa chọn phù hợp Trước đây, Flash do Adobe phát triển nhằm tạo hoạt hình, quảng cáo và trang trí web, với hơn 97% trình duyệt web hiện nay cài đặt Flash Player để hiển thị các tập tin swf Tuy nhiên, Flash không được thiết kế để phát triển ứng dụng chuyên nghiệp do hạn chế về giao diện và chi phí cao, thiếu thư viện hỗ trợ Để khắc phục nhược điểm này, Adobe giới thiệu nền tảng Flex, một công cụ phát triển ứng dụng RIA chuyên nghiệp cho phép kết hợp thiết kế kéo-thả và lập trình mã lệnh, giúp xây dựng các phần của ứng dụng một cách linh hoạt và hiệu quả Sản phẩm của Flex có thể xuất sang dạng ứng dụng Desktop (AIR), mở rộng khả năng sử dụng trên nhiều nền tảng.
Flex là nền tảng phát triển gồm hai thành phần chính là MXML (Macromedia XML) và ActionScript 3.0, dựa trên tiêu chuẩn ECMAScript 4 Rất giống JavaScript, ActionScript 3.0 dễ học và hỗ trợ lập trình hướng đối tượng Flex được hỗ trợ mạnh mẽ nhờ phát triển trên nền tảng Flash nổi tiếng, giúp các nhà phát triển xây dựng ứng dụng hướng tới Flash Player và tránh các vấn đề không tương thích trình duyệt hoặc nền tảng Người dùng Flash hiện nay có thể nâng cấp lên Flex mà không cần chuyển đổi nền tảng, mang lại sự linh hoạt và thuận tiện trong quá trình phát triển ứng dụng.
Hiện nay, trên thế giới đã có nhiều hệ thống và website ứng dụng công nghệ Flex, như trang giới thiệu sản phẩm của Sony Ericsson, Yahoo Messenger phiên bản dành cho Web, và các website phổ biến khác như www.pikeo.com - một nền tảng chia sẻ hình ảnh, giúp nâng cao trải nghiệm người dùng và tối ưu hóa hiệu suất hoạt động của các nền tảng trực tuyến.
Hình 3: Những ứng dụng sử dụng công nghệ Flex
Chúng tôi 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" nhấn mạnh vào ưu điểm của các ứng dụng RIA và công nghệ Flex Trong đó, chúng tôi nghiên cứu ngôn ngữ lập trình ActionScript 3.0 và công nghệ Flex để phát triển các ứng dụng ưu việt, như chương trình quản lý album ảnh và trình chiếu slideshow hình ảnh trực tuyến Đề tài này giúp hiểu rõ hơn về khả năng của công nghệ Flex trong việc xây dựng các ứng dụng web tương tác và đa phương tiện hiệu quả.
FLEX
Giới thiệu
Flex là tập hợp các công nghệ giúp xây dựng và triển khai ứng dụng cho Flash Player, môi trường thực thi cho giao diện và tương tác người dùng Các công nghệ và tiêu chuẩn như XML, dịch vụ web, HTTP, Flash Player và ActionScript tạo đòn bẩy cho Flex trong việc phát triển ứng dụng Internet hoàn chỉnh và biên soạn nhanh nhờ hệ thống thành phần đa dạng gồm điều khiển giao diện, khung thiết kế, mô hình dữ liệu và các thành phần giao tiếp dữ liệu Phiên bản Flex 1.0 và 1.5 được giới thiệu vào năm 2004 bởi Macromedia với mức giá cao, nhưng vào tháng 1 năm 2007, Adobe đã đột phá về bản quyền bằng cách cung cấp miễn phí SDK của Flex 2.0 gồm thư viện lớp hỗ trợ và bộ biên dịch dòng lệnh.
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.
2.1.1 Những công nghệ trong ứng dụng Flex
Flex là một phần quan trọng của Adobe Flash Platform, một bộ công nghệ trung tâm là Flash Player Flash Player đóng vai trò chạy tất cả các ứng dụng Flex, giúp chúng hoạt động mượt mà trên nhiều thiết bị Hầu hết các máy tính kết nối Internet đều đã cài đặt Flash Player, đồng thời một số thiết bị di động cũng tích hợp sẵn công nghệ này, nâng cao khả năng truy cập và trải nghiệm người dùng.
Nội dung Flex 2 được trình diễn đầy đủ và chính xác trên nền tảng Flash Player 9 trở lên Để đảm bảo trải nghiệm xem nội dung Flex 2 đạt hiệu quả tốt nhất, người dùng cần cập nhật hoặc sử dụng phiên bản Flash Player 9 hoặc cao hơn Việc này giúp đảm bảo tính tương thích và thể hiện đầy đủ các tính năng của nội dung Flex 2.
Flex framework giúp xây dựng ứng dụng dễ dàng và biên dịch thành tập tin swf – định dạng mã nhị phân mà Flash Player có thể đọc được Việc sử dụng Flex cho phép phát triển các ứng dụng Flash một cách linh hoạt, tối ưu hóa hiệu suất và dễ dàng phân phối qua trình phát Flash Tập tin swf là chuẩn định dạng nhị phân giúp đảm bảo khả năng chạy trơn tru và tương thích cao trên nền tảng Flash Player.
Flash Player 9 giới thiệu máy ảo ActionScript AVM2 (ActionScript Virtual Machine 2), đánh dấu bước tiến quan trọng trong công nghệ phát triển nội dung web AVM2 hoạt động khác biệt so với các phiên bản Flash Player trước, mang lại hiệu suất và khả năng xử lý tốt hơn cho các ứng dụng đa phương tiện Với AVM2, nội dung swf được biên dịch và chạy theo cách tương tự như các ứng dụng trong Java và NET, giúp nâng cao hiệu quả và khả năng mở rộng của các ứng dụng Flash.
The Flex framework is a comprehensive library of classes built entirely with ActionScript, serving as a collection of classes used in Flex applications It defines controls and manages design elements essential for developing Internet applications This framework provides developers with powerful tools to create rich, interactive web applications efficiently using ActionScript.
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 Định dạng và chuẩn hóa
Quản lý các kiểu định dạng
Flex Builder 2 is an integrated development environment (IDE) designed for building and debugging Flex applications Built on the Eclipse IDE platform, it offers essential tools for coding, error detection, and application development using Flex technologies such as MXML and ActionScript.
Flex framework được tích hợp vào Flex Builder nhưng không bắt buộc phải sử dụng Flex Builder để phát triển ứng dụng Flex Bạn hoàn toàn có thể cài đặt miễn phí Flex SDK, bao gồm bộ biên dịch và Flex framework, để xây dựng dự án của mình Ngoài ra, Flex framework còn có thể tích hợp với các IDE khác hoặc sử dụng các công cụ soạn thảo để viết mã MXML và ActionScript, sau đó biên dịch bằng dòng lệnh command line, mang lại sự linh hoạt trong quá trình phát triển.
Flex Builder là một sản phẩm thương mại Để biết thêm thông tin có thể tham khảo tại http://www.adobe.com/go/flexbuilder
2.1.1.4 Dịch vụ dữ liệu – Data service
Data services đóng vai trò quan trọng trong hầu hết các ứng dụng Flex, giúp tải và gửi dữ liệu từ cơ sở dữ liệu một cách hiệu quả Flash Player hỗ trợ truyền dữ liệu dạng văn bản, định dạng nhị phân AMF (binary messaging format) và đảm bảo kết nối ổn định cho việc truyền dữ liệu thời gian thực từ server đến client Ứng dụng Flex thường yêu cầu dữ liệu XML từ các tài nguyên tĩnh hoặc động như trang PHP để hoạt động hiệu quả.
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
MXML là một ngôn ngữ dựa trên nền tảng XML để mô tả giao diện màn hình thiết kế, tương tự như HTML Với các thẻ MXML, bạn có thể dễ dàng thêm các thành phần như biểu mẫu (form) và phát lại media, giúp phát triển ứng dụng một cách nhanh chóng và linh hoạt.
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 hỗ trợ xây dựng MXML với giao diện WYSIWYG, giúp người dùng thiết kế ứng dụng Flex dễ dàng và trực quan Công cụ WYSIWYG cho phép tạo ra các ứng dụng Flex cơ bản mà không cần phải viết mã, tối ưu hóa quá trình phát triển và tiết kiệm thời gian Đây là giải pháp lý tưởng cho những người mới bắt đầu hoặc muốn nhanh chóng triển khai giao diện người dùng trực quan.
MXML giúp tạo khung và giao diện ứng dụng một cách nhanh chóng, hiệu quả và dễ dàng Quá trình này bắt đầu bằng việc dịch mã MXML sang lớp ActionScript, mở ra khả năng tùy biến và mở rộng chức năng của giao diện một cách linh hoạt Như vậy, sử dụng MXML giúp tối ưu hóa quá trình phát triển ứng dụng Adobe Flex, tiết kiệm thời gian và nâng cao hiệu suất làm việc.
ActionScript là ngôn ngữ lập trình chủ đạo trong Flash Player, đóng vai trò quan trọng trong phát triển các ứng dụng Flex Với khả năng thực hiện các tác vụ phức tạp và linh hoạt hơn so với MXML, ActionScript cho phép lập trình viên tùy chỉnh và mở rộng chức năng của ứng dụng một cách hiệu quả Điều này giúp xây dựng các ứng dụng đa dạng, tương tác cao và phù hợp với nhu cầu của người dùng.
Trong việc phát triển ứng dụng Flex, kết hợp giữa MXML và ActionScript là phương pháp tối ưu và hợp lý hơn MXML giúp đơn giản hóa việc thiết kế giao diện người dùng và thực hiện các tác vụ cơ bản một cách hiệu quả Trong khi đó, ActionScript phù hợp để xử lý các tương tác phức tạp với người dùng, thao tác dữ liệu nâng cao và triển khai các chức năng không có sẵn trong thư viện lớp của Flex Từ đó, việc sử dụng cả hai công cụ này giúp tạo ra những ứng dụng linh hoạt, mạnh mẽ và dễ bảo trì hơn.
2.1.3 Bảo mật của Flash Player
Tính bảo mật của Flash Player chủ yếu liên quan đến bảo vệ dữ liệu, hạn chế các ứng dụng Flex chỉ có thể truy cập nguồn dữ liệu trong cùng một tên miền Trong trường hợp cần truy cập dữ liệu từ domain khác, việc này sẽ bị chấp nhận khi có sự cho phép thông qua file cross-domain policy File cross-domain policy là một tệp XML trên server, xác định các quyền truy cập dữ liệu từ các domain khác để đảm bảo an toàn và kiểm soát truy cập của người dùng.
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: var tieuthuyet:XML=
Mat Ma DaVinci
VHTT
AS cho phép sử dụng biểu thức động để tạo ra XML động, giúp tạo cấu trúc XML linh hoạt theo dữ liệu thực tế Trong đó, dấu { } được dùng để xác định biểu thức động trong chuỗi XML, giúp chèn giá trị biến một cách tự động Ví dụ, đoạn mã biến tên thành "SACH" và tạo ra phần tử XML dựa trên biến đó, thể hiện cách linh hoạt xây dựng XML theo nội dung động trong ứng dụng của bạn.
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);
Lưu ý rằng thành phần không phải là một tên hợp lệ, do đó cần sử dụng cách ghi đúng là datHang(tieuthuyet) Các ví dụ như datHang(tieuthuyet.SACH) hoặc datHang(tieuthuyet.child("SACH")) đều không đúng và không phù hợp để sử dụng trong mã nguồn Việc ghi đúng cú pháp giúp đảm bảo mã được thực thi chính xác và tránh các lỗi không mong muốn Nhớ rằng, khi xử lý các thành phần trong lập trình, cần tuân thủ quy tắc đặt tên và cú pháp chính xác để duy trì tính khả dụng của ứng dụng.
Trong XML, không có cách truy cập trực tiếp vào nút gốc từ một nút con cụ thể nào đó, tuy nhiên, chúng ta có thể sử dụng hàm parent để truy cập tổ tiên của nút đó Ví dụ, hàm getRoot sử dụng đệ quy để duyệt các nút cha liên tiếp cho đến khi tìm được nút gốc Việc này giúp dễ dàng xác định và xử lý cấu trúc cây trong XML một cách hiệu quả.
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 .
Bạn có thể sử dụng ký tự đại diện (*) để truy cập các nút con trong XML, ví dụ như `tieuthuyet.*` để trả về tất cả các nút con của `` Để truy cập đến một nút con cụ thể trong danh sách này, bạn sử dụng toán tử chỉ mục `[ ]`, chẳng hạn như `tieuthuyet.children()[1]` hoặc `tieuthuyet.*[1]` để lấy thành phần con thứ hai của ``, ví dụ như ``.
Trong E4X, các nút con thường được truy cập dựa trên tên của chúng thay vì vị trí Để thực hiện điều này, chúng ta sử dụng hàm `child()` của lớp XML, hàm này giúp truy xuất các nút con một cách dễ dàng bằng tên, hỗ trợ tối ưu cho việc xử lý và quản lý dữ liệu XML.