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.