Flex - Ứng dụng

Trước khi bắt đầu tạo ứng dụng “HelloWorld” thực tế bằng Flash Builder, hãy để chúng tôi xem các phần thực tế của ứng dụng Flex là gì -

Một ứng dụng Flex bao gồm bốn phần quan trọng sau đây, trong đó phần cuối cùng là tùy chọn nhưng ba phần đầu tiên là bắt buộc.

Thư viện khung Flex
Mã phía máy khách
Tài nguyên công cộng (HTML / JS / CSS)
Mã phía máy chủ

Vị trí mẫu của các phần khác nhau của một ứng dụng Flex điển hình như HelloWord sẽ như hình dưới đây:

Tên	Vị trí
Gốc dự án	Chào thế giới/
Thư viện khung Flex	Xây dựng đường dẫn
Tài nguyên công cộng	html-mẫu
Mã phía máy khách	bảng table-viền / com / tutorialspoint / client
Mã phía máy chủ	bảng table-viền / com / tutorialspoint / server

Quy trình xây dựng ứng dụng

Để bắt đầu, ứng dụng Flex yêu cầu các thư viện khung Flex. Sau đó, Flash Builder sẽ tự động thêm các thư viện để xây dựng đường dẫn.

Khi chúng tôi xây dựng mã của mình bằng trình tạo Flash, trình tạo Flash sẽ thực hiện các tác vụ sau:

Biên dịch mã nguồn thành tệp HelloWorld.swf.
Biên dịch HelloWorld.html (tệp trình bao bọc cho tệp swf) từ tệp index.template.html được lưu trữ trong thư mục html-template
Sao chép các tệp HelloWorld.swf và HelloWorld.html trong thư mục đích, bin-debug.
Sao chép swfobject.js, một mã JavaScript chịu trách nhiệm tải động tệp swf trong HelloWorld.html trong thư mục đích, bin-debug
Sao chép thư viện khung ở dạng tệp swf có tên là frameworks_xxx.swf trong thư mục đích, bin-debug
Sao chép các mô-đun flex khác (tệp .swf như sparkskins_xxx.swf, textLayout_xxx.swf) trong thư mục đích.

Quy trình khởi chạy ứng dụng

Mở tệp HelloWorld.html có sẵn trong thư mục \ HelloWorld \ bin-debug trong bất kỳ trình duyệt web nào.
HelloWorld.swf sẽ tự động tải và ứng dụng sẽ bắt đầu chạy.

Thư viện khung Flex

Sau đây là chi tiết ngắn gọn về một số thư viện khung quan trọng. Xin lưu ý rằng, các thư viện Flex được biểu thị bằng ký hiệu .swc

Sr.No	Nút & Mô tả
1	playerglobal.swc Thư viện này dành riêng cho FlashPlayer được cài đặt trên máy của bạn và chứa các phương thức gốc được hỗ trợ bởi trình phát flash.
2	textlayout.swc Thư viện này hỗ trợ các tính năng liên quan đến bố cục văn bản.
3	framework.swc Đây là thư viện khung flex chứa các tính năng cốt lõi của Flex.
4	mx.swc Thư viện này lưu trữ các định nghĩa về điều khiển giao diện người dùng mx.
5	charts.swc Thư viện này hỗ trợ các điều khiển biểu đồ.
6	spark.swc Thư viện này lưu trữ các định nghĩa về điều khiển giao diện người dùng tia lửa.
7	sparkskins.swc Thư viện này hỗ trợ việc phân loại các điều khiển Spark UI.

Mã phía máy khách

Mã ứng dụng Flex có thể được viết bằng MXML cũng như ActionScript.

Sr.No	Loại & Mô tả
1	MXML MXML là một ngôn ngữ đánh dấu XML mà chúng tôi sẽ sử dụng để sắp xếp các thành phần giao diện người dùng. MXML được biên dịch thành ActionScript trong quá trình xây dựng.
2	ActionScript ActionScript là một ngôn ngữ lập trình thủ tục hướng đối tượng và dựa trên đặc tả ngôn ngữ soạn thảo phiên bản 4 của ECMAScript (ECMA-262).

Trong Flex, chúng ta có thể kết hợp ActionScript và MXML, để làm như sau:

Bố trí các thành phần giao diện người dùng sử dụng thẻ MXML
Sử dụng MXML để xác định rõ ràng các khía cạnh không trực quan của ứng dụng, chẳng hạn như quyền truy cập vào nguồn dữ liệu trên máy chủ
Sử dụng MXML để tạo liên kết dữ liệu giữa các thành phần giao diện người dùng và nguồn dữ liệu trên máy chủ.
Sử dụng ActionScript để xác định trình xử lý sự kiện bên trong các thuộc tính sự kiện MXML.
Thêm các khối tập lệnh bằng cách sử dụng nhãn.
Bao gồm các tệp ActionScript bên ngoài.
Nhập các lớp ActionScript.
Tạo các thành phần ActionScript.

Tài nguyên công cộng

Đây là các tệp trợ giúp được tham chiếu bởi ứng dụng Flex, chẳng hạn như trang HTML Máy chủ, CSS hoặc hình ảnh nằm trong thư mục html-template. Nó chứa các tệp sau:

Sr.No	Tên & Mô tả tệp
1	index.template.html Lưu trữ trang HTML, với trình giữ chỗ. Flash Builder sử dụng mẫu này để tạo trang HelloWorld.html thực với tệp HelloWorld.swf.
2	playerProductInstall.swf Đây là một tiện ích flash để cài đặt Flash Player ở chế độ nhanh.
3	swfobject.js Đây là JavaScript chịu trách nhiệm kiểm tra phiên bản trình phát flash được cài đặt và tải HelloWorld.swf trong trang HelloWorld.html.
4	html-template/history Thư mục này chứa các tài nguyên để quản lý lịch sử của ứng dụng.

HelloWorld.mxml

Đây là mã MXML / AS (ActionScript) thực tế được viết để triển khai logic nghiệp vụ của ứng dụng và trình biên dịch Flex chuyển thành tệp SWF sẽ được thực thi bởi trình phát flash trong trình duyệt.

Một lớp HelloWorld Entry mẫu sẽ như sau:

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "library://ns.adobe.com/flex/spark" 
   xmlns:mx = "library://ns.adobe.com/flex/mx"
   width = "100%" height = "100%"
   minWidth = "500" minHeight = "500" 
   initialize = "application_initializeHandler(event)">

   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         protected function btnClickMe_clickHandler(event:MouseEvent):void {
            Alert.show("Hello World!");				
         }

         protected function application_initializeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Application";				
         }
      ]]>
   </fx:Script>
   
   <s:VGroup horizontalAlign = "center" width = "100%" height = "100%" 
      paddingTop = "100" gap = "50">
      <s:Label id = "lblHeader" fontSize = "40" color = "0x777777" />
      <s:Button label = "Click Me!" id = "btnClickMe" 
         click = "btnClickMe_clickHandler(event)" />
   </s:VGroup>	
</s:Application>

Bảng sau cung cấp mô tả của tất cả các thẻ được sử dụng trong đoạn mã trên.

Sr.No	Nút & Mô tả
1	Application Xác định vùng chứa Ứng dụng luôn là thẻ gốc của ứng dụng Flex.
2	Script Chứa logic nghiệp vụ bằng ngôn ngữ ActionScript.
3	VGroup Xác định Vùng chứa nhóm theo chiều dọc có thể chứa các điều khiển giao diện người dùng linh hoạt theo kiểu dọc.
4	Label Đại diện cho một điều khiển Nhãn, một thành phần giao diện người dùng rất đơn giản hiển thị văn bản.
5	Button Đại diện cho một nút điều khiển, có thể được nhấp để thực hiện một số hành động.

Mã phía máy chủ

Đây là phần phía máy chủ của ứng dụng của bạn và nó rất tùy chọn. Nếu bạn không thực hiện bất kỳ quá trình xử lý phụ trợ nào trong ứng dụng của mình, thì bạn không cần phần này nhưng nếu có một số xử lý cần thiết ở phần phụ trợ và ứng dụng máy khách của bạn tương tác với máy chủ, thì bạn sẽ phải phát triển các thành phần này.

Trong chương tiếp theo, chúng tôi sẽ sử dụng tất cả các khái niệm được đề cập ở trên để tạo HelloWorld ứng dụng bằng Flash Builder.