Flex - Hướng dẫn nhanh
Flex là gì?
Flex là một khung ứng dụng mã nguồn mở, mạnh mẽ cho phép bạn xây dựng các ứng dụng truyền thống cho trình duyệt, thiết bị di động và máy tính để bàn bằng cách sử dụng cùng một mô hình lập trình, công cụ và cơ sở mã.
Flex cung cấp FLEX SDK bao gồm thư viện lớp Flex (các lớp ActionScript), trình biên dịch Flex, trình gỡ lỗi, ngôn ngữ lập trình MXML và ActionScript, và các tiện ích khác để xây dựng các ứng dụng internet giàu tính tương tác và biểu cảm (RIA)
Flex chăm sóc giao diện người dùng (UI) hoặc chức năng phía máy khách của ứng dụng web. Chức năng phía máy chủ phụ thuộc vào các thành phần phía máy chủ được viết bằng ngôn ngữ kịch bản truyền thống (Java / PHP, v.v.)
Một ứng dụng dựa trên Flex thực sự được phân phối dưới dạng tệp SWF và nó gần giống với phần HTML / JavaScript của ứng dụng web truyền thống.
Ứng dụng Flex được triển khai dưới dạng (các) tệp SWF cùng với trình bao bọc HTML, (các) tệp CSS và bất kỳ tệp kịch bản phía máy chủ nào (tức là Java, .CFM, .PHP, v.v.) tới máy chủ. Giống như các ứng dụng web truyền thống.
Các tài nguyên này được phân phối từ máy chủ đến trình duyệt của khách hàng bằng cách sử dụng thời trang phản hồi / yêu cầu HTTP tùy chỉnh và Flash Player chạy ứng dụng trong trình duyệt.
Ưu điểm của Flex
Các ứng dụng Flex thường dựa trên Flash Player có thể truy cập các khả năng của thiết bị như GPS, máy ảnh, cơ sở dữ liệu cục bộ, gia tốc kế đồ họa.
Các ứng dụng Flex có thể chạy trên các thiết bị Android, BlackBerry Tablet OS và iOS.
Ứng dụng Flex có thể chạy trên Trình duyệt cũng như trên Máy tính để bàn.
Các ứng dụng Flex độc lập với nền tảng. Giao diện người dùng có thể là bản địa của nền tảng hoặc có thể được tạo giống nhau trên mỗi nền tảng.
Các ứng dụng Flex có thể tương tác với máy chủ bằng tất cả các công nghệ phía máy chủ chính như Java, Spring, Hibernate, PHP, Ruby, .NET, Adobe ColdFusion và SAP bằng cách sử dụng các tiêu chuẩn công nghiệp như REST, SOAP, JSON, JMS và AMF.
Ứng dụng Flex đảm bảo trải nghiệm người dùng phong phú thông qua tương tác trực quan với ứng dụng và trình bày thông tin trong một giao diện trực quan phong phú hơn.
Ứng dụng Flex là một ứng dụng trang đơn trong đó các trạng thái có thể chuyển đổi từ trạng thái này sang trạng thái khác mà không phải tải trang mới từ máy chủ hoặc để làm mới trình duyệt.
Ứng dụng Flex giúp giảm tải trên máy chủ đến mức đáng kể vì chỉ cần trả lại ứng dụng một lần, thay vì một trang mới mỗi khi người dùng thay đổi chế độ xem.
Nhược điểm của Flex
Các ứng dụng Flex là các ứng dụng đơn luồng nhưng Flex cung cấp một mô hình lập trình không đồng bộ để giảm thiểu mối lo ngại này.
Flex dựa trên ActionScript và XML. Học hai điều này là điều bắt buộc để làm việc trong Flex.
Hướng dẫn này sẽ hướng dẫn bạn cách chuẩn bị môi trường phát triển để bắt đầu công việc của bạn với Adobe Flex Framework. Hướng dẫn này cũng sẽ dạy bạn cách thiết lập JDK và Adobe Flash Builder trên máy của bạn trước khi bạn thiết lập Flex Framework.
Yêu cầu hệ thống
FLEX yêu cầu JDK 1.4 trở lên, vì vậy yêu cầu đầu tiên là phải cài đặt JDK trong máy của bạn.
| JDK | 1.4 Hoặc cao hơn. |
|---|---|
| Ký ức | Không có yêu cầu tối thiểu. |
| Dung lượng đĩa | Không có yêu cầu tối thiểu. |
| Hệ điều hành | Không có yêu cầu tối thiểu. |
Làm theo các bước đã cho để thiết lập môi trường của bạn để bắt đầu phát triển ứng dụng Flex.
Bước 1 - Xác minh cài đặt Java trên máy của bạn
Bây giờ hãy mở bảng điều khiển và thực hiện các thao tác sau java chỉ huy.
| Hệ điều hành | Bài tập | Chỉ huy |
|---|---|---|
| các cửa sổ | Mở bảng điều khiển lệnh | c: \> java -version |
| Linux | Mở Command Terminal | $ java -version |
| Mac | Mở thiết bị đầu cuối | máy: ~ joseph $ java -version |
Hãy xác minh kết quả đầu ra cho tất cả các hệ điều hành -
| Hệ điều hành | Đầu ra đã tạo |
|---|---|
| các cửa sổ | phiên bản java "1.6.0_21" Môi trường thời gian chạy Java (TM) SE (bản dựng 1.6.0_21-b07) Máy khách Java HotSpot (TM) (xây dựng 17.0-b17, chế độ hỗn hợp, chia sẻ) |
| Linux | phiên bản java "1.6.0_21" Môi trường thời gian chạy Java (TM) SE (bản dựng 1.6.0_21-b07) Máy khách Java HotSpot (TM) (xây dựng 17.0-b17, chế độ hỗn hợp, chia sẻ) |
| Mac | phiên bản java "1.6.0_21" Môi trường thời gian chạy Java (TM) SE (bản dựng 1.6.0_21-b07) Máy chủ ảo Java HotSpot (TM) 64-Bit (bản dựng 17.0-b17, chế độ hỗn hợp, chia sẻ) |
Bước 2 - Thiết lập Bộ phát triển Java (JDK)
Nếu bạn chưa cài đặt Java, thì bạn có thể cài đặt Bộ phát triển phần mềm Java (SDK) từ Trang web Java của Oracle Tải xuống Java SE . Bạn sẽ tìm thấy hướng dẫn cài đặt JDK trong các tệp đã tải xuống, sau đó làm theo hướng dẫn đã cho để cài đặt và định cấu hình thiết lập. Cuối cùng đặt các biến môi trường PATH và JAVA_HOME để tham chiếu đến thư mục chứa java và javac, thường là java_install_dir / bin và java_install_dir tương ứng.
Đặt JAVA_HOMEbiến môi trường để trỏ đến vị trí thư mục cơ sở nơi Java được cài đặt trên máy của bạn. Ví dụ -
| Hệ điều hành | Đầu ra |
|---|---|
| các cửa sổ | Đặt biến môi trường JAVA_HOME thành C: \ Program Files \ Java \ jdk1.6.0_21 |
| Linux | xuất JAVA_HOME = / usr / local / java-current |
| Mac | export JAVA_HOME = / Library / Java / Home |
Nối vị trí trình biên dịch Java vào Đường dẫn Hệ thống.
| Hệ điều hành | Đầu ra |
|---|---|
| các cửa sổ | Nối chuỗi;% JAVA_HOME% \ bin vào cuối biến hệ thống, Đường dẫn. |
| Linux | xuất PATH =$PATH:$JAVA_HOME / bin / |
| Mac | không yêu cầu |
Bước 3 - Thiết lập Adobe Flash Builder 4.5
Tất cả các ví dụ trong hướng dẫn này đã được viết bằng Adobe Flash Builder 4.5 Profession IDE Trial Version. Do đó, đề nghị bạn cài đặt phiên bản Adobe Flash Builder mới nhất trên máy của mình. Ngoài ra, hãy kiểm tra khả năng tương thích của hệ điều hành.
Để cài đặt Adobe Flash Builder IDE, hãy tải xuống các tệp nhị phân Adobe Flash Builder mới nhất từ https://www.adobe.com/in/products/flash-builder.html. Sau khi bạn tải xuống bản cài đặt, hãy giải nén bản phân phối nhị phân vào một vị trí thuận tiện. Ví dụ, trong C: \ flash-builder trên windows, hoặc / usr / local / flash-builder trên Linux / Unix và cuối cùng đặt biến PATH một cách thích hợp.
Flash Builder sẽ bắt đầu, khi bạn thực hiện các lệnh sau trên máy tính Windows hoặc khi bạn có thể chỉ cần nhấp đúp vào FlashBuilder.exe
%C:\flash-builder\FlashBuilder.exeFlash Builder có thể được khởi động bằng cách thực hiện các lệnh sau trên máy Unix (Solaris, Linux, v.v.) -
$/usr/local/flash-builder/FlashBuilderPhiên bản dùng thử Adobe Flash Builder có thể được sử dụng trong 60 ngày. Chỉ cần chấp nhận các điều khoản và điều kiện và bỏ qua các bước đăng ký ban đầu để tiếp tục với IDE. Để chúng tôi hiểu rõ, chúng tôi đang sử dụng phiên bản dùng thử cho mục đích giảng dạy.
Sau khi khởi động thành công, nếu mọi thứ đều ổn thì nó sẽ hiển thị kết quả sau:
Adobe Flash Builder được định cấu hình sẵn với FLEX SDK. Chúng tôi đang sử dụng FLEX SDK 4.5 trong các ví dụ đi kèm với Adobe Flash Builder 4.5.
Bước 4 - Thiết lập Apache Tomcat
Bạn có thể tải xuống phiên bản Tomcat mới nhất từ https://tomcat.apache.org/. Khi bạn đã tải xuống bản cài đặt, hãy giải nén bản phân phối nhị phân vào một vị trí thuận tiện. Ví dụ, trong C: \ apache-tomcat-6.0.33 trên windows hoặc /usr/local/apache-tomcat-6.0.33 trên Linux / Unix và đặt biến môi trường CATALINA_HOME trỏ đến vị trí cài đặt.
Tomcat có thể được khởi động bằng cách thực hiện các lệnh sau trên máy tính windows hoặc bạn chỉ cần nhấp đúp vào startup.bat
%CATALINA_HOME%\bin\startup.bat
or
C:\apache-tomcat-6.0.33\bin\startup.batTomcat có thể được khởi động bằng cách thực hiện các lệnh sau trên máy UNIX (Solaris, Linux, v.v.) -
$CATALINA_HOME/bin/startup.sh
Or
/usr/local/apache-tomcat-6.0.33/bin/startup.shSau khi khởi động thành công, các ứng dụng web mặc định đi kèm với Tomcat sẽ khả dụng bằng cách truy cập http://localhost:8080/. Nếu mọi thứ đều ổn, thì nó sẽ hiển thị kết quả sau:
Thông tin thêm về cấu hình và chạy Tomcat có thể được tìm thấy trong tài liệu bao gồm ở đây, cũng như trên trang web Tomcat: http://tomcat.apache.org
Có thể dừng Tomcat bằng cách thực hiện các lệnh sau trên máy tính Windows:
%CATALINA_HOME%\bin\shutdown
Or
C:\apache-tomcat-5.5.29\bin\shutdownCó thể dừng Tomcat bằng cách thực hiện các lệnh sau trên máy UNIX (Solaris, Linux, v.v.) -
$CATALINA_HOME/bin/shutdown.sh
Or
/usr/local/apache-tomcat-5.5.29/bin/shutdown.shTrướ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-template |
| 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 giao diện người dùng tia lửa. |
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ữ nháp 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 một ứ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
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 để thực hiện 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ỳ 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 yêu cầu ở 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 sử dụng Flash Builder.
Chúng tôi sẽ sử dụng Flash Builder 4.5 để tạo Ứng dụng linh hoạt. Hãy bắt đầu với mộtHelloWorld ứng dụng.
Bước 1 - Tạo dự án
Bước đầu tiên là tạo một Dự án Flex đơn giản bằng Flash Builder IDE. Khởi chạy trình hướng dẫn dự án bằng tùy chọnFile > New > Flex Project. Bây giờ đặt tên dự án của bạn là HelloWorld bằng cách sử dụng cửa sổ hướng dẫn như sau:
Chọn loại ứng dụng Web (runs in Adobe Flash Player). Tuy nhiên, nếu điều này không được chọn, thì hãy để các giá trị mặc định khác như vậy và nhấp vào nút Kết thúc. Khi dự án của bạn được tạo thành công, bạn sẽ có nội dung sau trong Project Explorer của mình -
Đây là mô tả ngắn gọn về tất cả các thư mục quan trọng -
| Thư mục | Vị trí |
|---|---|
| bảng có viền | Tệp mã nguồn (mxml / as các lớp). Chúng tôi đã tạo cấu trúc thư mục com / tutorialspoint / client chứa các lớp java cụ thể phía máy khách chịu trách nhiệm hiển thị giao diện người dùng máy khách. |
| bin-debug | Đây là phần đầu ra, nó đại diện cho ứng dụng web có thể triển khai thực tế. Thư mục lịch sử chứa các tệp hỗ trợ quản lý lịch sử của ứng dụng Flex. framework_xxx.swf, các tệp khung flex phải được ứng dụng flex sử dụng. HelloWorld.html, tệp HTML trình bao bọc / máy chủ cho ứng dụng flex. HelloWorld.swf, ứng dụng dựa trên flex của chúng tôi. playerProductInstall.swf, trình cài đặt nhanh player flash. spark_xxx.swf, thư viện hỗ trợ thành phần tia lửa. swfobject.js, JavaScript chịu trách nhiệm tải HelloWorld.swf trong HelloWorld.html. Nó kiểm tra phiên bản trình phát flash và chuyển tham số khởi tạo vào tệp HelloWorld.swf. textLayout_xxx.swf, thư viện hỗ trợ thành phần văn bản. |
| html-template | Điều này đại diện cho ứng dụng web có thể định cấu hình. Flash Builder biên dịch các tệp từ html-template vào thư mục bin-debug. Thư mục lịch sử chứa các tệp hỗ trợ quản lý lịch sử của ứng dụng Flex. index.template.html, wrapper / host Tệp HTML cho ứng dụng flex có các trình giữ chỗ cho cấu hình cụ thể của Flash Builder. Được biên dịch sang HelloWorld.html trong thư mục bin-debug trong quá trình xây dựng. playerProductInstall.swf, trình cài đặt flash player express được sao chép vào thư mục bin-debug trong quá trình xây dựng. swfobject.js, JavaScript chịu trách nhiệm tải HelloWorld.swf trong HelloWorld.html. Nó kiểm tra phiên bản trình phát flash và chuyển tham số khởi tạo đến tệp HelloWorld.swf được sao chép vào thư mục bindebug trong quá trình xây dựng. |
Bước 2 - Tạo tệp CSS bên ngoài
Tạo tệp CSS styles.css cho trang HTML Wrapper trong html-template thư mục.
html, body {
height:100%;
}
body {
margin:0;
padding:0;
overflow:auto;
text-align:center;
}
object:focus {
outline:none;
}
#flashContent {
display:none;
}
.pluginHeader {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#9b1204;
text-decoration:none;
font-weight:bold;
}
.pluginInstallText {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
line-height:18px;
font-style:normal;
}
.pluginText {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
line-height:18px;
font-style:normal;
}Bước 3 - Sửa đổi mẫu trang HTML của Wrapper
Sửa đổi mẫu trang HTML Wrapper index.template.html trong htmltemplatethư mục. Flash Builder sẽ tạo một mẫu trang HTML Wrapper mặc định html-template / index.template.html , mẫu này sẽ được biên dịch thành HelloWorld.html.
Tệp này chứa trình giữ chỗ mà Flash Builder sẽ thay thế trong quá trình biên dịch. Ví dụ: phiên bản trình phát flash, tên ứng dụng, v.v.
Hãy để chúng tôi sửa đổi tệp này để hiển thị thông báo tùy chỉnh trong trường hợp plugin flash chưa được cài đặt.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml:lang = "en">
<head>
<title>${title}</title>
<meta name = "google" value = "notranslate" />
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<link rel = "stylesheet" href = "styles.css" type = "text/css"></link>
<link rel = "stylesheet" type = "text/css" href = "history/history.css" />
<script type = "text/javascript" table table-bordered = "history/history.js">
</script>
<script type = "text/javascript" table table-bordered = "swfobject.js"></script>
<script type = "text/javascript">
// For version detection, set to min. required Flash Player version,
//or 0 (or 0.0.0), for no version detection.
var swfVersionStr = "${version_major}.${version_minor}.${version_revision}"; // To use express install, set to playerProductInstall.swf, //otherwise the empty string. var xiSwfUrlStr = "${expressInstallSwf}";
var flashvars = {};
var params = {};
params.quality = "high";
params.bgcolor = "${bgcolor}"; params.allowscriptaccess = "sameDomain"; params.allowfullscreen = "true"; var attributes = {}; attributes.id = "${application}";
attributes.name = "${application}"; attributes.align = "middle"; swfobject.embedSWF ( "${swf}.swf", "flashContent",
"${width}", "${height}",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
// JavaScript enabled so display the flashContent div in case
//it is not replaced with a swf object.
swfobject.createCSS("#flashContent", "display:block;text-align:left;");
</script>
</head>
<body>
<div id = "flashContent">
<p style = "margin:100px;">
<table width = "700" cellpadding = "10" cellspacing = "2" border = "0">
<tr>
<td class = "pluginHeader">Flash Player Required</td>
</tr>
<tr>
<td class = "pluginText">The Adobe Flash Player version
10.2.0 or greater is required.</td>
</tr>
<tr>
<td class = "pluginInstallText" align = "left">
<table border = "0" width = "100%">
<tr class = "pluginInstallText" >
<td>Click here to download and install Adobe Flash Player:</td>
<td> </td>
<td align = "right">
<script type = "text/javascript">
var pageHost
= ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a target = '_blank'"
+" href = 'http://get.adobe.com/flashplayer/'><"
+"img style = 'border-style: none' table table-bordered = '"
+pageHost
+"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
+" alt = 'Get Adobe Flash player' /></a>" );
</script>
</td>
</tr>
</table>
</tr>
</table>
</p>
</div>
<noscript>
<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width = "${width}" height = "${height}" id = "${application}"> <param name = "movie" value = "${swf}.swf" />
<param name = "quality" value = "high" />
<param name = "bgcolor" value = "${bgcolor}" /> <param name = "allowScriptAccess" value = "sameDomain" /> <param name = "allowFullScreen" value = "true" /> <!--[if !IE]>--> <object type = "application/x-shockwave-flash" data = "${swf}.swf"
width = "${width}" height = "${height}">
<param name = "quality" value = "high" />
<param name = "bgcolor" value = "${bgcolor}" />
<param name = "allowScriptAccess" value = "sameDomain" />
<param name = "allowFullScreen" value = "true" />
<!--<![endif]-->
<!--[if gte IE 6]>-->
<p>
<p style = "margin:100px;">
<table width = "700" cellpadding = "10" cellspacing = "2"
border = "0">
<tr>
<td class = "pluginHeader">Flash Player Required</td>
</tr>
<tr>
<td class = "pluginText">The Adobe Flash Player version
10.2.0 or greater is required.</td>
</tr>
<tr>
<td class = "pluginInstallText" align = "left">
<table border = "0" width = "100%">
<tr class = "pluginInstallText" >
<td>Click here to download and install Adobe Flash
Player:</td>
<td> </td>
<td align = "right">
<script type = "text/javascript">
var pageHost
= ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a target = '_blank'"
+" href = 'http://get.adobe.com/flashplayer/'><"
+"img style = 'border-style: none' table table-bordered = '"
+pageHost
+"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
+" alt = 'Get Adobe Flash player' /></a>" );
</script>
</td>
</tr>
</table>
</tr>
</table>
</p>
</p>
<!--<![endif]-->
<p style = "margin:100px;">
<table width = "700" cellpadding = "10" cellspacing = "2" border = "0">
<tr><td class = "pluginHeader">Flash Player Required</td></tr>
<tr><td class = "pluginText">The Adobe Flash Player version
10.2.0 or greater is required.</td></tr>
<tr>
<td class = "pluginInstallText" align = "left">
<table border = "0" width = "100%">
<tr class = "pluginInstallText" >
<td>Click here to download and install Adobe Flash
Player:</td>
<td> </td>
<td align = "right">
<script type = "text/javascript">
var pageHost
= ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a target = '_blank'"
+" href = 'http://get.adobe.com/flashplayer/'><"
+"img style = 'border-style: none' table table-bordered = '"
+pageHost
+"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
+" alt = 'Get Adobe Flash player' /></a>" );
</script>
</td>
</tr>
</table>
</td>
</tr>
</table>
</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</noscript>
</body>
</html>Bước 4 - Tạo tệp CSS nội bộ
Tạo tệp CSS Style.css cho HelloWorld.mxml trong table tablebordered/com/tutorialspointthư mục. Flex cung cấp các kiểu css tương tự cho các Điều khiển giao diện người dùng của nó vì có các kiểu css cho các điều khiển Giao diện người dùng HTML.
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
.heading {
fontFamily: Arial, Helvetica, sans-serif;
fontSize: 17px;
color: #9b1204;
textDecoration:none;
fontWeight:normal;
}
.button {
fontWeight: bold;
}
.container {
cornerRadius :10;
horizontalCenter :0;
borderColor: #777777;
verticalCenter:0;
backgroundColor: #efefef;
}Bước 5 - Sửa đổi lớp cấp độ đầu vào
Flash Builder sẽ tạo bảng tệp mxml mặc định tablebordered / com.tutorialspoint / HelloWorld.mxml , chứa thẻ root <application> cho ứng dụng. Hãy để chúng tôi sửa đổi tệp này để hiển thị "Hello, World!" -
<?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:Style source = "/com/tutorialspoint/client/Style.css" />
<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:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" styleName = "button" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Bạn có thể tạo thêm tệp mxml hoặc tệp chỉ định hành động trong cùng một thư mục nguồn để xác định các ứng dụng mới hoặc để xác định các quy trình của trình trợ giúp.
Bước 6 - Xây dựng ứng dụng
Flash Builder có Build Automaticallytheo mặc định được chọn. Chỉ cần kiểm traProblemsXem nếu có bất kỳ lỗi nào. Sau khi thực hiện xong các thay đổi, bạn sẽ không thấy bất kỳ lỗi nào.
Bước 7 - Chạy ứng dụng
Bây giờ hãy nhấp vào
Nếu mọi thứ đều ổn, bạn phải thấy trình duyệt bật lên, ứng dụng bật lên và đang chạy. Nếu mọi thứ đều ổn với ứng dụng của bạn, ứng dụng sẽ cho kết quả như sau: [ Dùng thử trực tuyến ]
Bởi vì, bạn đang chạy ứng dụng của mình trong trình phát flash, sau đó nó sẽ cần phải cài đặt plugin Flash Player cho trình duyệt của bạn. Chỉ cần làm theo hướng dẫn trên màn hình để cài đặt plugin. Nếu bạn đã đặt plugin Flash Player cho trình duyệt của mình, thì bạn sẽ có thể thấy kết quả sau:
Xin chúc mừng! Bạn đã triển khai ứng dụng đầu tiên của mình bằngFlex.
Hướng dẫn này sẽ giải thích cho bạn cách tạo một ứng dụng war và cách triển khai tệp đó trong gốc máy chủ Web Apache Tomcat.
Nếu bạn hiểu ví dụ đơn giản này thì bạn cũng có thể triển khai một ứng dụng Flex phức tạp theo các bước tương tự.
Hãy để chúng tôi làm theo các bước sau để tạo một ứng dụng Flex -
| Bươc | Sự miêu tả |
|---|---|
| 1 | Tạo một dự án với tên HelloWorld dưới một packagecom. tutorialspoint.client như được giải thích trong chương Flex - Create Application . |
| 2 | Sửa đổi HelloWorld.mxml như được giải thích bên dưới. Giữ phần còn lại của các tệp không thay đổi. |
| 3 | Biên dịch và chạy ứng dụng để đảm bảo logic nghiệp vụ đang hoạt động theo yêu cầu. |
Làm theo các bước dưới đây để tạo một bản phát hành của ứng dụng Flex và sau đó triển khai nó đến máy chủ tomcat -
Bước đầu tiên là tạo một bản phát hành bằng Flash Builder IDE. Khởi chạy thuật sĩ xây dựng bản phát hành bằng cách sử dụng tùy chọnFile > Export > Flash Builder > Release Build.
Chọn dự án là HelloWorld bằng cách sử dụng cửa sổ thuật sĩ như sau
Để lại các giá trị mặc định khác như vậy và nhấp vào nút Kết thúc. Bây giờ, Flash Builder sẽ tạo một thư mục bin-release chứa bản phát hành của dự án.
Bây giờ bản phát hành của chúng tôi đã sẵn sàng, hãy làm theo các bước sau để triển khai ứng dụng Flex -
| Bươc | Sự miêu tả |
|---|---|
| 1 | Zip nội dung của thư mục bin-release của ứng dụng ở dạng tệp HelloWorld.war và triển khai nó trong Apache Tomcat Webserver. |
| 2 | Khởi chạy ứng dụng web của bạn bằng URL thích hợp như được giải thích bên dưới trong bước cuối cùng. |
Sau đây là nội dung của tệp mxml đã sửa đổi table table-bordered/com.tutorialspoint/HelloWorld.mxml.
<?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:Style source = "/com/tutorialspoint/client/Style.css" />
<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:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" styleName = "button" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Khi bạn đã sẵn sàng với tất cả các thay đổi được thực hiện, hãy để chúng tôi biên dịch và chạy ứng dụng ở chế độ bình thường như chúng tôi đã làm trong chương Flex - Create Application . Nếu mọi thứ đều ổn với ứng dụng của bạn, thì ứng dụng sẽ tạo ra kết quả sau: [ Dùng thử trực tuyến ]
Tạo tệp WAR
Bây giờ ứng dụng của chúng tôi đang hoạt động tốt và chúng tôi đã sẵn sàng xuất nó dưới dạng tệp chiến tranh. Làm theo các bước sau -
Chuyển đến thư mục bin-release của dự án C: \ workspace \ HelloWorld \ binrelease
Chọn tất cả các tệp & thư mục có sẵn bên trong thư mục bin-release.
Zip tất cả các tệp & thư mục đã chọn trong một tệp có tên HelloWorld.zip .
Đổi tên HelloWorld.zip thành HelloWorld.war.
Triển khai tệp WAR
Dừng máy chủ tomcat.
Sao chép tệp HelloWorld.war vào thư mục cài đặt tomcat> thư mục ứng dụng web.
Khởi động máy chủ tomcat.
Nhìn vào thư mục ứng dụng web, có một thư mục HelloWorld đã được tạo.
Bây giờ HelloWorld.war đã được triển khai thành công trong Tomcat Webserver root.
Chạy ứng dụng
Nhập URL vào trình duyệt web -
http: // localhost: 8080 / HelloWorld / HelloWorld.html để khởi chạy ứng dụng.
Tên máy chủ (localhost) và cổng (8080) có thể thay đổi tùy theo cấu hình tomcat của bạn.
Vòng đời của ứng dụng Flex
Mặc dù, bạn có thể xây dựng các ứng dụng Flex mà không cần hiểu các giai đoạn vòng đời của một ứng dụng, nhưng rất tốt nếu biết cơ chế cơ bản; thứ tự mà mọi thứ xảy ra. Nó sẽ giúp bạn định cấu hình các tính năng như tải các ứng dụng Flex khác trong thời gian chạy và quản lý quá trình tải và dỡ các thư viện và tài sản của lớp trong thời gian chạy.
Hiểu rõ về vòng đời ứng dụng Flex sẽ cho phép bạn xây dựng các ứng dụng tốt hơn và tối ưu hóa chúng bởi vì bạn sẽ biết nơi để chạy mã một cách tối ưu. Ví dụ: nếu bạn cần đảm bảo rằng một số mã chạy trong trình tải trước, bạn cần biết vị trí đặt mã cho sự kiện đó.
Khi chúng tôi tải ứng dụng flex trong một trình duyệt, các sự kiện sau sẽ xảy ra trong vòng đời của ứng dụng flex.
Sau đây là chi tiết ngắn gọn về các sự kiện khác nhau của Vòng đời Flex.
| Sr.No | Sự kiện & Mô tả |
|---|---|
| 1 | preInitialize: mx.core.UIComponent.preinitialize Loại sự kiện: mx.events.FlexEvent.PREINITIALIZE Sự kiện này được gửi ở đầu chuỗi khởi tạo thành phần. Thành phần ở trạng thái rất thô khi sự kiện này được gửi đi. Nhiều thành phần, chẳng hạn như Điều khiển nút tạo ra các thành phần con bên trong để triển khai chức năng. Ví dụ: điều khiển Nút tạo một thành phần Trường văn bản giao diện người dùng nội bộ để thể hiện văn bản nhãn của nó. Khi Flex gửi sự kiện khởi tạo trước, các phần tử con, bao gồm tất cả các phần tử con bên trong, của một thành phần vẫn chưa được tạo. |
| 2 | khởi tạo: mx.core.UIComponent.initialize Loại sự kiện: mx.events.FlexEvent.INITIALIZE Sự kiện này được gửi sau giai đoạn khởi tạo trước. Khung Flex khởi tạo cấu trúc bên trong của thành phần này trong giai đoạn này. Sự kiện này tự động kích hoạt khi thành phần được thêm vào thành phần chính. Bạn không cần phải gọi khởi tạo () nói chung. |
| 3 | createComplete: mx.core.UIComponent.creationComplete Loại sự kiện: mx.events.FlexEvent.CREATION_COMPLETE Sự kiện này được gửi đi khi thành phần đã hoàn thành việc xây dựng, xử lý tài sản, đo đạc, bố trí và vẽ. Tại thời điểm này, tùy thuộc vào thuộc tính hiển thị của nó, thành phần sẽ không hiển thị mặc dù nó đã được vẽ. |
| 4 | applicationComplete: spark.components.Application.applicationComplete Loại sự kiện: mx.events.FlexEvent.APPLICATION_COMPLETE Được gửi đi sau khi Ứng dụng đã được khởi tạo, được xử lý bởi LayoutManager và được đính kèm vào danh sách hiển thị. Đây là sự kiện cuối cùng của vòng đời tạo ứng dụng và báo hiệu rằng ứng dụng đã được tải hoàn toàn. |
Ví dụ về vòng đời của Flex
Chúng ta hãy làm theo các bước để hiểu vòng đời thử nghiệm của một ứng dụng Flex bằng cách tạo một ứng dụng thử nghiệm -
| Bươc | Sự miêu tả |
|---|---|
| 1 | Tạo một dự án với tên HelloWorld dưới một packagecom. tutorialspoint.client như được giải thích trong chương Flex - Create Application . |
| 2 | Sửa đổi HelloWorld.mxml như được giải thích bên dưới. Giữ phần còn lại của các tệp không thay đổi. |
| 3 | Biên dịch và chạy ứng dụng để đảm bảo logic nghiệp vụ đang hoạt động theo yêu cầu. |
Sau đây là nội dung của tệp mxml đã sửa đổi src/com.tutorialspoint/HelloWorld.mxml.
<?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 = "reportEvent(event)"
preinitialize = "reportEvent(event)"
creationComplete = "reportEvent(event)"
applicationComplete = "reportEvent(event)">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
[Bindable]
private var report:String = "";
private function reportEvent(event:FlexEvent):void {
report += "\n" + (event.type + " event occured at: "
+ getTimer() + " ms" + "\n");
}
]]>
</fx:Script>
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label textAlign = "center" width="100%" id = "lblHeader"
fontSize = "40" color = "0x777777" styleName = "heading"
text = "Life Cycle Events Demonstration" />
<s:TextArea id = "reportText" text = "{report}" editable = "false"
width = "300" height = "200">
</s:TextArea>
</s:VGroup>
</s:BorderContainer>
</s:Application>Khi bạn đã sẵn sàng với tất cả các thay đổi được thực hiện, hãy để chúng tôi biên dịch và chạy ứng dụng ở chế độ bình thường như chúng tôi đã làm trong chương Flex - Create Application . Nếu mọi thứ đều ổn với ứng dụng của bạn, ứng dụng sẽ cho kết quả như sau: [ Dùng thử trực tuyến ]
Flex hỗ trợ việc sử dụng cú pháp và kiểu CSS để áp dụng cho các điều khiển giao diện người dùng của nó giống như cách CSS cho các thành phần HTML.
Cách # 1: Sử dụng tệp bảng định kiểu bên ngoài
Bạn có thể tham khảo một biểu định kiểu có sẵn trong đường dẫn lớp của ứng dụng. Ví dụ: hãy xem xét tệp Style.css trongcom/tutorialspoint/client folder nơi tệp HelloWorld.mxml cũng nằm.
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
...
.container {
cornerRadius :10;
horizontalCenter :0;
borderColor: #777777;
verticalCenter:0;
backgroundColor: #efefef;
}Sau đó, tệp css có thể được giới thiệu bằng đoạn mã sau
<fx:Style source = "/com/tutorialspoint/client/Style.css" />Gán kiểu cho thành phần giao diện người dùng bằng thuộc tính styleName
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
...
</s:BorderContainer>Cách # 2: Sử dụng kiểu trong thành phần vùng chứa Ui
Bạn có thể xác định kiểu trong thành phần vùng chứa giao diện người dùng bằng cách sử dụng thẻ <fx: Style>
Bộ chọn cấp độ lớp học
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
/* class level selector */
.errorLabel {
color: red;
}
</fx:Style>Gán kiểu cho thành phần giao diện người dùng bằng cách sử dụng thuộc tính styleName.
<s:Label id = "errorMsg" text = "This is an error message" styleName = "errorLabel" />Bộ chọn mức Id
Tạo kiểu thành phần giao diện người dùng bằng cách sử dụng bộ chọn id.
<fx:Style>
/* id level selector */
#msgLabel {
color: gray;
}
</fx:Style>
<s:Label id = "msgLabel" text = "This is a normal message" />Bộ chọn mức loại
Tạo kiểu cho một loại Thành phần giao diện người dùng trong một GO.
<fx:Style>
/* style applied on all buttons */
s|Button {
fontSize: 15;
color: #9933FF;
}
</fx:Style>
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" />Ví dụ về phong cách linh hoạt với CSS
Hãy để chúng tôi làm theo các bước để kiểm tra kiểu CSS của ứng dụng Flex bằng cách tạo một ứng dụng thử nghiệm -
| Bươc | Sự miêu tả |
|---|---|
| 1 | Tạo một dự án với tên HelloWorld trong một gói com.tutorialspoint.client như được giải thích trong chương Flex - Create Application . |
| 2 | Sửa đổi Style.css, HelloWorld.mxml như được giải thích bên dưới. Giữ phần còn lại của các tệp không thay đổi. |
| 3 | Biên dịch và chạy ứng dụng để đảm bảo logic nghiệp vụ đang hoạt động theo yêu cầu. |
Sau đây là nội dung của tệp CSS đã sửa đổi src/com.tutorialspoint/Style.css.
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
.heading
{
fontFamily: Arial, Helvetica, sans-serif;
fontSize: 17px;
color: #9b1204;
textDecoration:none;
fontWeight:normal;
}
.button {
fontWeight: bold;
}
.container {
cornerRadius :10;
horizontalCenter :0;
borderColor: #777777;
verticalCenter:0;
backgroundColor: #efefef;
}Sau đây là nội dung của tệp mxml đã sửa đổi src/com.tutorialspoint/HelloWorld.mxml.
<?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)">
<!--Add reference to style sheet -->
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<!--Using styles within mxml file -->
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
/* class level selector */
.errorLabel {
color: red;
}
/* id level selector */
#msgLabel {
color: gray;
}
/* style applied on all buttons */
s|Button {
fontSize: 15;
color: #9933FF;
}
</fx:Style>
<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 = "CSS Demonstrating Application";
}
]]>
</fx:Script>
<s:BorderContainer width = "560" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label width = "100%" id = "lblHeader" fontSize = "40"
color = "0x777777" styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" />
<s:Label id = "errorMsg"
text = "This is an error message" styleName = "errorLabel" />
<s:Label id = "msgLabel" text = "This is a normal message" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Khi bạn đã sẵn sàng với tất cả các thay đổi được thực hiện, hãy để chúng tôi biên dịch và chạy ứng dụng ở chế độ bình thường như chúng tôi đã làm trong chương Flex - Create Application . Nếu mọi thứ đều ổn với ứng dụng của bạn, điều này sẽ tạo ra kết quả sau: [ Thử trực tuyến ]
Skinning là gì?
Skinning trong Flex, là một quá trình tùy chỉnh hoàn toàn giao diện của một Thành phần UI.
Skin có thể xác định văn bản, hình ảnh, bộ lọc, chuyển tiếp và trạng thái của một thành phần.
Một Skin có thể được tạo dưới dạng một thành phần mxml hoặc ActionScript riêng biệt.
Sử dụng skin, chúng ta có thể kiểm soát tất cả các khía cạnh trực quan của một thành phần UI.
Quá trình xác định da giống nhau đối với tất cả các thành phần giao diện người dùng.
Bước 1 - Tạo da
Khởi chạy Trình hướng dẫn tạo da MXML bằng tùy chọn File > New > MXML Skin.
Nhập gói dưới dạng com.tutorialspoint.skin, tên là GradientBackgroundSkin và chọn thành phần máy chủ làm điều khiển BorderContainer linh hoạt hiện cóspark.component.BorderContainer.
Bây giờ bạn đã tạo một skin cho BorderContainer. Sửa đổi nội dung của tệp skin mxmlsrc/com.tutorialspoint/skin/GradientBackgroundSkin.mxml.
Cập nhật lớp điền như sau:
<!-- fill -->
<s:Rect id = "backgroundRect" left = "0" right = "0" height = "100%" top = "0">
<s:fill>
<s:LinearGradient rotation = "90">
<s:GradientEntry color = "0x888888" ratio = "0.2" />
<s:GradientEntry color = "0x111111" ratio = "1" />
</s:LinearGradient>
</s:fill>
</s:Rect>Bước 2: Đắp da
Bạn có thể thoa da trên một thành phần theo hai cách:
Áp dụng skin trong tập lệnh MXML (tĩnh)
Ứng dụng GradientBackgroundSkin đến một BorderContainer có id mainContainer sử dụng nó skinClass thuộc tính.
<s:BorderContainer width = "560" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center" verticalAlign = "middle"
skinClass = "com.tutorialspoint.skin.GradientBackgroundSkin">Áp dụng skin trong ActionScript (động)
Ứng dụng GradientBackgroundSkin đến một BorderContainer có id mainContainer sử dụng nó skinClass bất động sản.
protected function gradientBackground_clickHandler(event:MouseEvent):void {
mainContainer.setStyle("skinClass", GradientBackgroundSkin);
}Ví dụ về phong cách linh hoạt với da
Hãy để chúng tôi làm theo các bước sau để xem skinning hoạt động trong ứng dụng Flex bằng cách tạo một ứng dụng thử nghiệm -
| Bươc | Sự miêu tả |
|---|---|
| 1 | Tạo một dự án với tên HelloWorld trong một gói com.tutorialspoint.client như được giải thích trong chương Flex - Create Application . |
| 2 | Tạo da GradientBackgroundSkin.mxml theo gói com.tutorialspoint.skin như đã giải thích ở trên. Giữ phần còn lại của các tệp không thay đổi. |
| 3 | Sửa đổi HelloWorld.mxml như được giải thích bên dưới. Giữ phần còn lại của các tệp không thay đổi. |
| 4 | Biên dịch và chạy ứng dụng để đảm bảo logic nghiệp vụ đang hoạt động theo yêu cầu. |
Sau đây là nội dung của tệp GradientBackgroundSkin.mxml src/com/tutorialspoint/skin/GradientBackg roundSkin.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Skin xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx">
<!-- host component -->
<fx:Metadata>
[HostComponent("spark.components.BorderContainer")]
</fx:Metadata>
<!-- states -->
<s:states>
<s:State name = "disabled" />
<s:State name = "disabled" />
<s:State name = "normal" />
</s:states>
<!-- SkinParts
name = contentGroup, type = spark.components.Group, required = false
-->
<!-- fill -->
<s:Rect id = "backgroundRect" left = "0" right = "0" height = "100%" top = "0">
<s:fill>
<s:LinearGradient rotation = "90">
<s:GradientEntry color = "0x111111" ratio = "0.2" />
<s:GradientEntry color = "0x888888" ratio = "1" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- must specify this for the host component -->
<s:Group id = "contentGroup" left = "0" right = "0" top = "0" bottom = "0" />
</s:Skin>Sau đây là nội dung của HelloWorld.mxml được sửa đổi filesrc/com/tutorialspoint/client/HelloWorld.mxml.
<?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:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import com.tutorialspoint.skin.GradientBackgroundSkin;
import mx.controls.Alert;
import mx.events.FlexEvent;
import spark.skins.spark.BorderContainerSkin;
protected function btnClickMe_clickHandler(event:MouseEvent):void {
Alert.show("Hello World!");
}
protected function application_initializeHandler(event:FlexEvent):void {
lblHeader.text = "My Hello World Application";
}
protected function gradientBackground_clickHandler(event:MouseEvent):void {
mainContainer.setStyle("skinClass", GradientBackgroundSkin );
}
protected function standardBackground_clickHandler(event:MouseEvent):void {
mainContainer.setStyle("skinClass", BorderContainerSkin );
}
]]>
</fx:Script>
<fx:Declarations>
<s:RadioButtonGroup id = "selectorGroup" />
</fx:Declarations>
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
skinClass = "spark.skins.spark.BorderContainerSkin"
horizontalCenter = "0" verticalCenter = "0" cornerRadius = "10">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "green"
styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" />
<s:RadioButton color = "gray" fontWeight = "bold"
group = "{selectorGroup}" label = "Standard Background"
click = "standardBackground_clickHandler(event)" selected = "true" />
<s:RadioButton color = "gray" fontWeight = "bold"
group = "{selectorGroup}" label = "Gradient Background"
click = "gradientBackground_clickHandler(event)" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Khi bạn đã sẵn sàng với tất cả các thay đổi được thực hiện, hãy để chúng tôi biên dịch và chạy ứng dụng ở chế độ bình thường như chúng tôi đã làm trong chương Flex - Create Application . Nếu mọi thứ đều ổn với ứng dụng của bạn, ứng dụng sẽ cho kết quả như sau: [ Dùng thử trực tuyến ]
Liên kết dữ liệu là gì?
Data Binding là một quá trình trong đó dữ liệu của một đối tượng được gắn với một đối tượng khác. Nó yêu cầu một thuộc tính nguồn, một thuộc tính đích và một sự kiện kích hoạt cho biết thời điểm sao chép dữ liệu từ nguồn đến đích.
Flex cung cấp ba cách để thực hiện Liên kết dữ liệu như bên dưới
- Cú pháp ngoặc nhọn trong Tập lệnh MXML ({})
- thẻ <fx: binding> trong MXML
- BindingUtils trong ActionScript
Liên kết dữ liệu - Sử dụng dấu ngoặc nhọn trong MXML
Ví dụ sau minh họa cách sử dụng dấu ngoặc nhọn để chỉ định liên kết dữ liệu của nguồn với đích.
<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" text = "{txtInput1.text}" />Liên kết dữ liệu - Sử dụng thẻ <fx: Binding> trong MXML
Ví dụ sau minh họa cách sử dụng
<fx:Binding source = "txtInput1.text" destination = "txtInput2.text" />
<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" />Data Binding - Sử dụng BindingUtils trong ActionScript
Ví dụ sau minh họa cách sử dụng BindingUtils để chỉ định liên kết dữ liệu của một nguồn với đích.
<fx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.events.FlexEvent;
protected function txtInput2_preinitializeHandler(event:FlexEvent):void {
BindingUtils.bindProperty(txtInput2,"text",txtInput1, "text");
}
]]>
</fx:Script>
<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2"
preinitialize = "txtInput2_preinitializeHandler(event)" />Ví dụ về ràng buộc dữ liệu linh hoạt
Hãy để chúng tôi làm theo các bước được đưa ra bên dưới để xem việc lột da hoạt động trong ứng dụng Flex bằng cách tạo một ứng dụng thử nghiệm -
| Bươc | Sự miêu tả |
|---|---|
| 1 | Tạo một dự án với tên HelloWorld trong một gói com.tutorialspoint.client như được giải thích trong chương Flex - Create Application . |
| 2 | Sửa đổi HelloWorld.mxml như được giải thích bên dưới. Giữ phần còn lại của các tệp không thay đổi. |
| 3 | Biên dịch và chạy ứng dụng để đảm bảo logic nghiệp vụ đang hoạt động theo yêu cầu. |
Sau đây là nội dung của tệp HelloWorld.mxml được sửa đổisrc/com/tutorialspoint/client/HelloWorld.mxml.
<?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">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.events.FlexEvent;
protected function txtInput6_preinitializeHandler(event:FlexEvent):void {
BindingUtils.bindProperty(txtInput6,"text",txtInput5, "text");
}
]]>
</fx:Script>
<fx:Binding source = "txtInput3.text" destination = "txtInput4.text" />
<s:BorderContainer width = "500" height = "550" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" text = "Data Binding Demonstration"
fontSize = "40" color = "0x777777" styleName = "heading" />
<s:Panel title = "Example #1 (Using Curly Braces,\{\})" width = "400"
height = "100" >
<s:layout>
<s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
</s:layout>
<s:HGroup >
<s:Label text = "Type here: " width = "100" paddingTop = "6" />
<s:TextInput id = "txtInput1" />
</s:HGroup>
<s:HGroup >
<s:Label text = "Copied text: " width = "100" paddingTop = "6" />
<s:TextInput id = "txtInput2" text = "{txtInput1.text}" />
</s:HGroup>
</s:Panel>
<s:Panel title = "Example #2 (Using <fx:Binding>)" width = "400"
height = "100" >
<s:layout>
<s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
</s:layout>
<s:HGroup >
<s:Label text = "Type here: " width = "100" paddingTop = "6" />
<s:TextInput id = "txtInput3" />
</s:HGroup>
<s:HGroup >
<s:Label text = "Copied text: " width = "100" paddingTop = "6" />
<s:Label id = "txtInput4" />
</s:HGroup>
</s:Panel>
<s:Panel title = "Example #3 (Using BindingUtils)" width = "400"
height = "100" >
<s:layout>
<s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
</s:layout>
<s:HGroup >
<s:Label text = "Type here: " width = "100" paddingTop = "6" />
<s:TextInput id = "txtInput5" />
</s:HGroup>
<s:HGroup >
<s:Label text = "Copied text: " width = "100" paddingTop = "6" />
<s:TextInput enabled = "false" id = "txtInput6"
preinitialize = "txtInput6_preinitializeHandler(event)" />
</s:HGroup>
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>Khi bạn đã sẵn sàng với tất cả các thay đổi được thực hiện, hãy để chúng tôi biên dịch và chạy ứng dụng ở chế độ bình thường như chúng tôi đã làm trong chương Flex - Create Application . Nếu mọi thứ đều ổn với ứng dụng của bạn, ứng dụng sẽ cho kết quả như sau: [ Dùng thử trực tuyến ]
Mọi giao diện người dùng đều xem xét ba khía cạnh chính sau:
UI Elements- Đây là những yếu tố hình ảnh cốt lõi mà người dùng cuối cùng nhìn thấy và tương tác. Flex cung cấp một danh sách khổng lồ các phần tử được sử dụng rộng rãi và phổ biến, từ cơ bản đến phức tạp mà chúng tôi sẽ đề cập trong hướng dẫn này.
Layouts- Họ xác định cách tổ chức các phần tử giao diện người dùng trên màn hình và cung cấp giao diện cuối cùng cho GUI (Giao diện người dùng đồ họa). Phần này sẽ được đề cập trong chương Bố cục.
Behavior- Những sự kiện này xảy ra khi người dùng tương tác với các phần tử UI. Phần này sẽ được đề cập trong chương Xử lý sự kiện.
Phần tử giao diện người dùng linh hoạt
Thư viện Flex UI cung cấp các lớp theo hệ thống phân cấp lớp được xác định rõ ràng để tạo giao diện người dùng dựa trên web phức tạp. Tất cả các lớp trong cấu trúc phân cấp thành phần này đã được bắt nguồn từEventDispatcher lớp cơ sở như hình dưới đây -
Mọi điều khiển giao diện người dùng cơ bản đều kế thừa các thuộc tính từ lớp Thành phần giao diện người dùng, lớp này kế thừa các thuộc tính từ EventDispatcher và các lớp cấp cao nhất khác.
| Sr.No | Kiểm soát & Mô tả |
|---|---|
| 1 | Lớp Flex EventDispatcher Lớp EventDispatcher là lớp cơ sở cho tất cả các lớp có thể gửi sự kiện. Lớp EventDispatcher cho phép bất kỳ đối tượng nào trên danh sách hiển thị là mục tiêu sự kiện và như vậy, sử dụng các phương thức của giao diện IEventDispatcher. |
| 2 | Flex UIComponent Lớp UIComponent là lớp cơ sở cho tất cả các thành phần trực quan, cả tương tác và không tương tác. |
Điều khiển cơ bản
Sau đây là một số điều khiển cơ bản quan trọng -
| Sr.No | Điều khiển & Mô tả |
|---|---|
| 1 | Nhãn Nhãn là một thành phần UIC cấp thấp có thể hiển thị một hoặc nhiều dòng văn bản có định dạng thống nhất. |
| 2 | Bản văn Điều khiển Văn bản cho phép bạn hiển thị nội dung HTML cũng như văn bản bình thường trong ứng dụng của mình. |
| 3 | Hình ảnh Điều khiển Hình ảnh cho phép bạn nhập các tệp JPEG, PNG, GIF và SWF trong thời gian chạy. |
| 4 | LinkButton Điều khiển LinkButton là một điều khiển Nút không viền có nội dung được đánh dấu khi người dùng di chuyển chuột qua nó. |
Điều khiển biểu mẫu cho phép người dùng nhập dữ liệu và cung cấp cho họ khả năng tương tác với ứng dụng. Mọi giao diện người dùng Biểu mẫu kiểm soát và kế thừa các thuộc tính từ lớp UIComponent, lớp này kế thừa các thuộc tính từ EventDispatcher và các lớp cấp cao nhất khác.
| Sr.No | Kiểm soát & Mô tả |
|---|---|
| 1 | Lớp Flex EventDispatcher Lớp EventDispatcher là lớp cơ sở cho tất cả các lớp có thể gửi sự kiện. Lớp EventDispatcher cho phép bất kỳ đối tượng nào trên danh sách hiển thị là mục tiêu sự kiện và như vậy, sử dụng các phương thức của giao diện IEventDispatcher. |
| 2 | Flex UIComponent Lớp UIComponent là lớp cơ sở cho tất cả các thành phần trực quan, cả tương tác và không tương tác. |
Kiểm soát biểu mẫu
Sau đây là một số điều khiển biểu mẫu quan trọng -
| Sr.No | Kiểm soát & Mô tả |
|---|---|
| 1 | Cái nút Thành phần Nút là một nút hình chữ nhật thường được sử dụng. |
| 2 | Nút bật tắt Thành phần ToggleButton xác định một nút bật tắt. |
| 3 | CheckBox Thành phần CheckBox bao gồm một nhãn tùy chọn và một hộp nhỏ có thể chứa dấu kiểm hoặc không. |
| 4 | ColorPicker Điều khiển ColorPicker cung cấp cách để người dùng chọn màu từ danh sách mẫu. |
| 5 | ComboBox Điều khiển ComboBox là một lớp con của điều khiển DropDownListBase. |
| 6 | DateChooser Điều khiển DateChooser hiển thị tên của tháng, năm và lưới các ngày trong tháng, với các cột được gắn nhãn cho ngày trong tuần. |
| 7 | Nút radio Thành phần RadioButton cho phép người dùng thực hiện một lựa chọn duy nhất trong một tập hợp các lựa chọn loại trừ lẫn nhau. |
| số 8 | TextArea TextArea là một điều khiển nhập văn bản cho phép người dùng nhập và chỉnh sửa nhiều dòng văn bản được định dạng. |
| 9 | TextInput TextInput là một điều khiển nhập văn bản cho phép người dùng nhập và chỉnh sửa một dòng văn bản có định dạng thống nhất. |
| 10 | Danh sách thả xuống Điều khiển DropDownList chứa một danh sách thả xuống mà từ đó người dùng có thể chọn một giá trị. |
| 11 | NumericStepper Điều khiển NumericStepper cho phép bạn chọn một số từ một tập hợp có thứ tự. |
Các điều khiển phức tạp cung cấp cho người dùng các khả năng nâng cao để xử lý lượng lớn dữ liệu theo cách dễ dàng hơn và cung cấp cho họ khả năng tương tác với ứng dụng. Mọi điều khiển Complex UI kế thừa các thuộc tính từ lớp UIComponent, lớp này kế thừa các thuộc tính từ EventDispatcher và các lớp cấp cao nhất khác.
| Sr.No | Kiểm soát & Mô tả |
|---|---|
| 1 | Lớp Flex EventDispatcher Lớp EventDispatcher là lớp cơ sở cho tất cả các lớp có thể gửi sự kiện. Lớp EventDispatcher cho phép bất kỳ đối tượng nào trên danh sách hiển thị là mục tiêu sự kiện và như vậy, sử dụng các phương thức của giao diện IEventDispatcher. |
| 2 | Flex UIComponent Lớp UIComponent là lớp cơ sở cho tất cả các thành phần trực quan, cả tương tác và không tương tác. |
Điều khiển phức tạp
Sau đây là một số điều khiển phức hợp quan trọng -
| Sr.No | Kiểm soát & Mô tả |
|---|---|
| 1 | Lưới dữ liệu Điều khiển DataGrid hiển thị một hàng tiêu đề cột phía trên một lưới có thể cuộn. |
| 2 | AdvancedDataGrid AdvancedDataGrid thêm một số chức năng bổ sung vào điều khiển DataGrid tiêu chuẩn để thêm các tính năng trực quan hóa dữ liệu. |
| 3 | Thực đơn Điều khiển Menu tạo một menu bật lên gồm các lựa chọn có thể chọn riêng. |
| 4 | Thanh tiến trình Điều khiển ProgressBar cung cấp một trình bày trực quan về tiến trình của một nhiệm vụ theo thời gian. |
| 5 | Biên tập soạn thảo văn bản Điều khiển RichTextEditor cho phép người dùng nhập và định dạng văn bản. |
| 6 | TileList Điều khiển TileList Điều khiển TileList hiển thị một số mục được bố trí trong các ô. |
| 7 | Cây Điều khiển cây cho phép người dùng xem dữ liệu phân cấp được sắp xếp dưới dạng cây có thể mở rộng. |
| số 8 | Trình phát video Điều khiển VideoPlayer là một trình phát video có thể thay đổi hỗ trợ tải xuống liên tục, phát trực tuyến đa tốc độ bit và phát video trực tuyến. |
| 9 | Tiếng Accordian Điều khiển Accordian có một bộ sưu tập các vùng chứa MX con hoặc các vùng chứa Spark NavigatorContent, nhưng chỉ một trong số chúng được hiển thị tại một thời điểm. |
| 10 | TabNavigator Điều khiển TabNavigator bao gồm một vùng chứa TabBar để điều hướng giữa các vùng chứa con của nó. |
| 11 | ToggleButtonBar Điều khiển ToggleButtonBar xác định một nhóm nút ngang hoặc dọc duy trì trạng thái đã chọn hoặc bỏ chọn của chúng. |
Điều khiển bảng bố cục cung cấp cho người dùng tổ chức các điều khiển giao diện người dùng trên trang. Mọi điều khiển Layout kế thừa các thuộc tính từ lớp UIComponent, lớp này kế thừa các thuộc tính từ EventDispatcher và các lớp cấp cao nhất khác.
| Sr.No | Kiểm soát & Mô tả |
|---|---|
| 1 | Lớp Flex EventDispatcher Lớp EventDispatcher là lớp cơ sở cho tất cả các lớp có thể gửi sự kiện. Lớp EventDispatcher cho phép bất kỳ đối tượng nào trên danh sách hiển thị là mục tiêu sự kiện và như vậy, sử dụng các phương thức của giao diện IEventDispatcher. |
| 2 | Flex UIComponent Lớp UIComponent là lớp cơ sở cho tất cả các thành phần trực quan, cả tương tác và không tương tác. |
Bảng bố cục
Sau đây là một số Bảng bố cục quan trọng -
| Sr.No | Bảng điều khiển & mô tả |
|---|---|
| 1 | BorderContainer Lớp BorderContainer cung cấp một tập hợp các kiểu CSS kiểm soát sự xuất hiện của đường viền và phần nền của vùng chứa. |
| 2 | Hình thức Vùng chứa Biểu mẫu cung cấp quyền kiểm soát bố cục của biểu mẫu, đánh dấu các trường biểu mẫu theo yêu cầu hoặc tùy chọn, xử lý thông báo lỗi và liên kết dữ liệu biểu mẫu với mô hình dữ liệu Flex để thực hiện kiểm tra và xác thực dữ liệu. |
| 3 | VGroup Vùng chứa VGroup là vùng chứa Nhóm sử dụng lớp VerticalLayout. |
| 4 | HGroup Vùng chứa HGroup là vùng chứa Nhóm sử dụng lớp HorizontalLayout. |
| 5 | Bảng điều khiển Lớp Panel là một vùng chứa bao gồm thanh tiêu đề, chú thích, đường viền và vùng nội dung cho các phần tử con của nó. |
| 6 | SkinnableContainer Lớp SkinnableContainer là lớp cơ sở cho các vùng chứa có thể lột da cung cấp nội dung trực quan. |
| 7 | TabBar TabBar hiển thị một tập hợp các tab giống nhau. |
| số 8 | TitleWindow Bảng TitleWindow mở rộng để bao gồm nút đóng và khu vực di chuyển. |
Chúng ta có thể thêm hành vi vào ứng dụng linh hoạt bằng cách sử dụng khái niệm Hiệu ứng. Ví dụ: khi một hộp văn bản được lấy nét, chúng ta có thể làm cho văn bản của nó trở nên đậm hơn và làm cho kích thước của nó lớn hơn một chút.
Mọi hiệu ứng kế thừa các thuộc tính từ lớp Hiệu ứng mà lần lượt kế thừa các thuộc tính từ EventDispatcher và các lớp cấp cao nhất khác.
| Sr.No | Hiệu ứng & Mô tả |
|---|---|
| 1 | Lớp hiệu ứng linh hoạt Lớp Effect là một lớp cơ sở trừu tượng xác định chức năng cơ bản của tất cả các hiệu ứng Flex. Lớp này xác định lớp nhà máy cơ sở cho tất cả các hiệu ứng. |
Hiệu ứng cơ bản
Sau đây là một số Hiệu ứng Hình ảnh Cơ bản quan trọng -
| Sr.No | Hiệu ứng & Mô tả |
|---|---|
| 1 | Phai màu Hiệu ứng Fade làm hoạt hình thuộc tính alpha của một thành phần. |
| 2 | WipeLeft Lớp WipeLeft xác định hiệu ứng quét bên trái. |
| 3 | WipeRight Lớp WipeRight xác định hiệu ứng xóa đúng. |
| 4 | Move3D Lớp Move3D di chuyển một đối tượng mục tiêu theo các kích thước x, y và z. |
| 5 | Thang đo 3D Lớp Scale3D chia tỷ lệ một đối tượng mục tiêu theo ba chiều xung quanh tâm biến đổi. |
| 6 | Xoay 3D Lớp Rotate3D xoay một đối tượng mục tiêu theo ba chiều xung quanh các trục x, y hoặc z. |
| 7 | Hoạt hình Hiệu ứng Animate này tạo hoạt ảnh một tập hợp các thuộc tính tùy ý giữa các giá trị. Chỉ định các thuộc tính và giá trị để tạo hoạt ảnh bằng cách đặt thuộc tính motionPaths. |
Flex sử dụng khái niệm sự kiện để truyền dữ liệu từ đối tượng này sang đối tượng khác tùy thuộc vào trạng thái hoặc tương tác của người dùng trong ứng dụng.
ActionScript có một Eventlớp xác định nhiều chức năng cần thiết để làm việc với các sự kiện. Mỗi khi một sự kiện xảy ra trong ứng dụng Flex, ba loại đối tượng từ phân cấp lớp Sự kiện sẽ được tạo.
Sự kiện có ba thuộc tính chính sau đây
| Sr.No | Kê khai tài sản |
|---|---|
| 1 | Type Các typenói về loại sự kiện vừa xảy ra. Điều này có thể là nhấp chuột, khởi tạo, di chuột qua, thay đổi, v.v. Các giá trị thực tế sẽ được biểu diễn bằng các hằng số như MouseEvent.CLICK. |
| 2 | Target Các target thuộc tính của Event là một đối tượng tham chiếu đến thành phần tạo ra sự kiện. Nếu bạn nhấp vào một Nút có id là clickMeButton, thì mục tiêu của sự kiện nhấp đó sẽ là clickMeButton |
| 3 | CurrentTarget Các currentTargetthuộc tính phân cấp vùng chứa khác nhau. Nó chủ yếu giải quyết luồng sự kiện. |
Các giai đoạn của dòng sự kiện
Một sự kiện trải qua ba giai đoạn tìm kiếm người xử lý sự kiện.
| Sr.No | Giai đoạn & Mô tả |
|---|---|
| 1 | Capture Trong giai đoạn nắm bắt, chương trình sẽ bắt đầu tìm kiếm các trình xử lý sự kiện từ cấp chính bên ngoài (hoặc trên cùng) đến cấp trong cùng. Giai đoạn bắt giữ dừng lại ở cấp độ gốc của đối tượng đã kích hoạt sự kiện. |
| 2 | Target Trong giai đoạn đích, thành phần đã kích hoạt sự kiện, được kiểm tra để tìm trình xử lý sự kiện. |
| 3 | Bubble Giai đoạn Bong bóng đảo ngược với giai đoạn bắt, hoạt động trở lại thông qua cấu trúc, từ thành phần chính của thành phần mục tiêu trở lên. |
Hãy xem xét mã ứng dụng 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" >
<s:Panel>
<s:Button id = "clickMeButton" label = "Click Me!" click = "doAction( );" />
</s:Panel>
</s:Application>Khi người dùng nhấp vào Nút, họ cũng đã nhấp vào Bảng điều khiển và Ứng dụng.
Sự kiện trải qua ba giai đoạn tìm kiếm các nhiệm vụ xử lý sự kiện.
Hãy để chúng tôi làm theo các bước dưới đây để kiểm tra việc phân phối sự kiện trong ứng dụng Flex -
| Bươc | Sự miêu tả |
|---|---|
| 1 | Tạo một dự án với tên HelloWorld trong một gói com.tutorialspoint.client như được giải thích trong chương Flex - Create Application . |
| 2 | Sửa đổi HelloWorld.mxml như được giải thích bên dưới. Giữ phần còn lại của các tệp không thay đổi. |
| 3 | Biên dịch và chạy ứng dụng để đảm bảo logic nghiệp vụ đang hoạt động theo yêu cầu. |
Sau đây là nội dung của tệp mxml đã sửa đổi src/com.tutorialspoint/HelloWorld.mxml.
<?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">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
protected function reportEvent(event:MouseEvent):void {
var target:String = event.target.id;
var currentTarget:String = event.target.id;
var eventPhase: String;
if(event.target is Button) {
var button:Button = event.target as Button;
target = button.label + " Button";
} else if(event.target is HGroup) {
var hGroup:HGroup = event.target as HGroup;
target = hGroup.id + " HGroup";
} else if(event.target is Panel) {
var panel:Panel = event.target as Panel;
target = panel.id + " Panel";
}
if(event.currentTarget is Button) {
var button1:Button = event.currentTarget as Button;
currentTarget = button1.label + " Button";
} else if(event.currentTarget is HGroup) {
var hGroup1:HGroup = event.currentTarget as HGroup;
currentTarget = hGroup1.id + " HGroup";
} else if(event.currentTarget is Panel) {
var panel1:Panel = event.currentTarget as Panel;
currentTarget = panel1.id + " Panel";
}
var eventPhaseInt:uint = event.eventPhase;
if(eventPhaseInt == EventPhase.AT_TARGET) {
eventPhase = "Target";
} else if(eventPhaseInt == EventPhase.BUBBLING_PHASE) {
eventPhase = "Bubbling";
} else if(eventPhaseInt == EventPhase.CAPTURING_PHASE) {
eventPhase = "Capturing";
}
reports.text += " Target: " + target + "\n currentTarget: " +
currentTarget + "\n Phase: " + eventPhase + "\n----------\n";
}
]]>
</fx:Script>
<s:BorderContainer width = "630" height = "480" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "10"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label id = "lblHeader" text = "Event Handling Demonstration"
fontSize = "40" color = "0x777777" styleName = "heading" />
<s:Panel id = "parentPanel" title = "Main Parent"
click = "reportEvent(event)" width = "500"
height = "100" includeInLayout = "true" visible = "true">
<s:layout>
<s:VerticalLayout gap = "10" verticalAlign = "middle"
horizontalAlign = "center" />
</s:layout>
<s:HGroup id = "mainHGroup" click = "reportEvent(event)">
<s:Button label = "Click Me" click = "reportEvent(event)" />
</s:HGroup>
</s:Panel>
<s:Panel id = "reportPanel" title = "Events" width = "500" height = "230">
<mx:Text id = "reports" />
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>Khi bạn đã sẵn sàng với tất cả các thay đổi được thực hiện, hãy để chúng tôi biên dịch và chạy ứng dụng ở chế độ bình thường như chúng tôi đã làm trong chương Flex - Create Application . Nếu mọi thứ đều ổn với ứng dụng của bạn, ứng dụng sẽ cho kết quả như sau: [ Dùng thử trực tuyến ]
Flex cung cấp hai cách để tạo các thành phần tùy chỉnh.
- Sử dụng ActionScript
- Sử dụng MXML
Sử dụng ActionScript
Bạn có thể tạo một thành phần bằng cách mở rộng thành phần hiện có. Để tạo một thành phần bằng Flash Builder, hãy nhấp vàoFile > New > ActionScript Class.
Nhập thông tin chi tiết như hình bên dưới -
Flash Builder sẽ tạo tệp CustomButton.as sau.
package com.tutorialspoint.client {
import spark.components.Button;
public class CustomButton extends Button {
public function CustomButton() {
super();
}
}
}Sử dụng MXML
Bạn có thể tạo một thành phần bằng cách mở rộng thành phần hiện có. Để tạo một thành phần bằng Flash Builder, hãy nhấp vàoFile > New > MXML Component.
Nhập thông tin chi tiết như hình bên dưới.
Flash Builder sẽ tạo tệp CustomLogin.mxml sau.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Group 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 = "400" height = "300">
</s:Group>Hãy để chúng tôi làm theo các bước sau để kiểm tra các điều khiển tùy chỉnh trong ứng dụng Flex -
| Bươc | Sự miêu tả |
|---|---|
| 1 | Tạo một dự án với tên HelloWorld trong một gói com.tutorialspoint.client như được giải thích trong chương Flex - Create Application . |
| 2 | Sửa đổi HelloWorld.mxml như được giải thích bên dưới. Giữ phần còn lại của các tệp không thay đổi. |
| 3 | Tạo thành phần CustomLogin.mxml và CustomButton.as như đã giải thích ở trên. Sửa đổi các tệp này như được giải thích bên dưới. Giữ phần còn lại của các tệp không thay đổi. |
| 4 | Biên dịch và chạy ứng dụng để đảm bảo logic nghiệp vụ đang hoạt động theo yêu cầu. |
Sau đây là nội dung của tệp mxml đã sửa đổi src/com.tutorialspoint/client/CustomLogin.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Group 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 = "400" height = "300">
<s:Form>
<s:FormItem label = "UserName:">
<s:TextInput width = "200" />
</s:FormItem>
<s:FormItem label = "Password:">
<s:TextInput width = "200" displayAsPassword = "true" />
</s:FormItem>
<s:FormItem>
<s:Button label = "Login" />
</s:FormItem>
</s:Form>
</s:Group>Sau đây là nội dung của tệp mxml đã sửa đổi src/com.tutorialspoint/client/CustomButton.as.
package com.tutorialspoint.client {
import spark.components.Button;
public class CustomButton extends Button {
public function CustomButton() {
super();
this.setStyle("color","green");
this.label = "Submit";
}
}
}Sau đây là nội dung của tệp mxml đã sửa đổi src/com.tutorialspoint/client/HelloWorld.mxml.
<?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"
xmlns:client = "com.tutorialspoint.client.*"
initialize = "application_initializeHandler(event)">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function application_initializeHandler(event:FlexEvent):void {
//create a new custom button
var customButton: CustomButton = new CustomButton();
asPanel.addElement(customButton);
}
]]>
</fx:Script>
<s:BorderContainer width = "630" height = "480" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "10"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label id = "lblHeader" text = "Custom Controls Demonstration"
fontSize = "40" color = "0x777777" styleName = "heading" />
<s:Panel title = "Using MXML Component" width = "400" height = "200">
<client:CustomLogin>
</client:CustomLogin>
</s:Panel>
<s:Panel title = "Using AS Component" width = "400" height = "100">
<s:VGroup id = "asPanel" width = "100%" height = "100%" gap = "10"
horizontalAlign = "center" verticalAlign = "middle">
</s:VGroup>
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>Khi bạn đã sẵn sàng với tất cả các thay đổi được thực hiện, hãy để chúng tôi biên dịch và chạy ứng dụng ở chế độ bình thường như chúng tôi đã làm trong chương Flex - Create Application . Nếu mọi thứ đều ổn với ứng dụng của bạn, ứng dụng sẽ cho kết quả như sau: [ Dùng thử trực tuyến ]
Flex cung cấp dịch vụ RPC để cung cấp dữ liệu phía máy chủ cho phía máy khách. Flex cung cấp một lượng kiểm soát hợp lý đối với dữ liệu phía máy chủ.
Sử dụng các dịch vụ Flex RPC, chúng tôi có thể xác định các hành động của người dùng sẽ được thực thi ở phía máy chủ.
Flex RPC Sservices có thể được tích hợp với bất kỳ công nghệ phía máy chủ nào.
Một trong những Dịch vụ Flex RPC cung cấp hỗ trợ sẵn có cho dữ liệu nhị phân nén được truyền qua dây và khá nhanh.
Flex cung cấp ba loại Dịch vụ RPC sau
| Sr.No | Dịch vụ và mô tả RPC |
|---|---|
| 1 | HttpService Thẻ <mx: HTTPService> được sử dụng để đại diện cho đối tượng HTTPService trong tệp MXML. Khi bạn thực hiện cuộc gọi đến phương thức send () của đối tượng HTTPService, nó thực hiện một yêu cầu HTTP đến URL được chỉ định và phản hồi HTTP sẽ được trả về. Bạn cũng có thể sử dụng các phương thức HTTP HEAD, OPTIONS, TRACE và DELETE. |
| 2 | WebService <Mx: WebService> được sử dụng để truy cập vào các hoạt động của các dịch vụ web tuân thủ SOAP. |
| 3 | RemoteObject Thẻ <mx: RemoteObject> được sử dụng để đại diện cho đối tượng HTTPService trong tệp MXML. Thẻ này cung cấp cho bạn quyền truy cập vào các phương thức của đối tượng Java bằng cách sử dụng mã hóa Định dạng Thông báo Hành động (AMF). |
Chúng ta sẽ thảo luận chi tiết về Dịch vụ HTTP. Chúng tôi sẽ sử dụng tệp nguồn XML được đặt tại máy chủ và truy cập tệp đó ở phía máy khách thông qua Dịch vụ HTTP.
Items.xml
<items>
<item name = "Book" description = "History of France"></item>
<item name = "Pen" description = "Parker Pen"></item>
<item name = "Pencil" description = "Stationary"></item>
<items>Khai báo HTTPService
Bây giờ khai báo một HTTPService và chuyển nó url của tệp ở trên
<fx:Declarations>
<mx:HTTPService id = "itemRequest"
url = "http://www.tutorialspoint.com/flex/Items.xml" />
</fx:Declarations>Cuộc gọi RPC
Thực hiện cuộc gọi đến phương thức itemRequest.send () và liên kết các giá trị từ đối tượng lastResult của webservice itemRequest với thành phần Flex UI.
...
itemRequest.send();
...
<mx:DataGrid id = "dgItems" height = "80%" width = "75%"
dataProvider = "{itemRequest.lastResult.items.item}">
<mx:columns>
<mx:DataGridColumn headerText = "Name" dataField = "name" />
<mx:DataGridColumn headerText = "Description" dataField = "description" />
</mx:columns>
</mx:DataGrid>Ví dụ về cuộc gọi dịch vụ RPC
Bây giờ, Chúng ta hãy làm theo các bước để kiểm tra các dịch vụ RPC trong ứng dụng Flex -
| Bươc | Sự miêu tả |
|---|---|
| 1 | Tạo một dự án với tên HelloWorld trong một gói com.tutorialspoint.client như được giải thích trong chương Flex - Create Application . |
| 2 | Sửa đổi HelloWorld.mxml như được giải thích bên dưới. Giữ phần còn lại của các tệp không thay đổi. |
| 3 | Biên dịch và chạy ứng dụng để đảm bảo logic nghiệp vụ đang hoạt động theo yêu cầu. |
Sau đây là nội dung của tệp mxml đã sửa đổi src/com.tutorialspoint/HelloWorld.mxml.
<?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"
minWidth = "500" minHeight = "500" creationComplete = "init(event)">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
protected function init(event:FlexEvent):void {
itemRequest.send();
}
]]>
</fx:Script>
<fx:Declarations>
<mx:HTTPService id = "itemRequest"
url = "http://www.tutorialspoint.com/flex/Items.xml" />
</fx:Declarations>
<s:BorderContainer width = "630" height = "480" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "10"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label id = "lblHeader" text = "RPC Service Demonstration"
fontSize = "40" color = "0x777777" styleName = "heading" />
<s:Panel id = "parentPanel" title = "Using RPC Services"
width = "500" height = "200" >
<s:layout>
<s:VerticalLayout gap = "10"
verticalAlign = "middle" horizontalAlign = "center" />
</s:layout>
<mx:DataGrid id = "dgItems" height = "80%" width = "75%"
dataProvider = "{itemRequest.lastResult.items.item}">
<mx:columns>
<mx:DataGridColumn headerText = "Name" dataField = "name" />
<mx:DataGridColumn headerText = "Description"
dataField = "description" />
</mx:columns>
</mx:DataGrid>
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>Khi bạn đã sẵn sàng với tất cả các thay đổi được thực hiện, hãy để chúng tôi biên dịch và chạy ứng dụng ở chế độ bình thường như chúng tôi đã làm trong chương Flex - Create Application . Nếu mọi thứ đều ổn với ứng dụng của bạn, ứng dụng sẽ cho kết quả như sau: [ Dùng thử trực tuyến ]
Flash Builder 4 có một hỗ trợ sẵn có tuyệt vời để tích hợp FlexUnit trong Chu trình phát triển Flex.
Tạo lớp trường hợp thử nghiệm
Bạn có thể tạo Lớp trường hợp kiểm tra bằng cách sử dụng trình hướng dẫn Tạo lớp kiểm tra Flash Builder. Việc chạy các trường hợp thử nghiệm thật dễ dàng với Flash Builder như bạn sẽ thấy trong bài viết này.
Để tạo một lớp test case bằng Flash Builder, hãy nhấp vào File > New > Test Case Class. Nhập thông tin chi tiết như hình bên dưới.
Flash Builder sẽ tạo TestClass1. như một tệp sau đây.
package com.tutorialspoint.client {
public class TestClass1 {
[Before]
public function setUp():void {}
[After]
public function tearDown():void {}
[BeforeClass]
public static function setUpBeforeClass():void {}
[AfterClass]
public static function tearDownAfterClass():void {}
}
}Ví dụ về tích hợp FlexUnit
Bây giờ, chúng ta hãy làm theo các bước để kiểm tra Tích hợp FlexUnit trong một ứng dụng Flex -
| Bươc | Sự miêu tả |
|---|---|
| 1 | Tạo một dự án với tên HelloWorld trong một gói com.tutorialspoint.client như được giải thích trong chương Flex - Create Application . |
| 2 | Sửa đổi HelloWorld.mxml như được giải thích bên dưới. Giữ phần còn lại của các tệp không thay đổi. |
| 3 | Tạo trường hợp thử nghiệm TestClass1.as như được mô tả ở trên và Sửa đổi TestClass1.as như được giải thích bên dưới. |
| 4 | Biên dịch và chạy ứng dụng để đảm bảo logic nghiệp vụ đang hoạt động theo yêu cầu. |
Sau đây là nội dung của tập tin được sửa đổi src/com.tutorialspoint/client/TestClass1.as.
package com.tutorialspoint.client {
import org.flexunit.asserts.assertEquals;
public class TestClass1 {
private var counter: int = 1;
[Before]
public function setUp():void {
//this code will run before every test case execution
}
[After]
public function tearDown():void {
//this code will run after every test case execution
}
[BeforeClass]
public static function setUpBeforeClass():void {
//this code will run once when test cases start execution
}
[AfterClass]
public static function tearDownAfterClass():void {
//this code will run once when test cases ends execution
}
[Test]
public function testCounter():void {
assertEquals(counter, 1);
}
}
}Sau đây là nội dung của tệp mxml đã sửa đổi src/com.tutorialspoint/HelloWorld.mxml.
<?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"
minWidth = "500" minHeight = "500">
</s:Application>Khi bạn đã sẵn sàng với tất cả các thay đổi được thực hiện, hãy để chúng tôi biên dịch ở chế độ bình thường như chúng tôi đã làm trong chương Flex - Create Application .
Chạy các trường hợp kiểm tra
Bây giờ Nhấp chuột phải vào TestClass1 trong trình khám phá gói và chọn Run As > FlexUnit Tests. Bạn sẽ thấy kết quả sau trong cửa sổ kiểm tra Flash Builder.
Flash Builder cũng hiển thị kết quả kiểm tra trong trình duyệt.
Flex cung cấp khả năng gỡ lỗi tuyệt vời cho mã flex và Flash Builder 4 có trình gỡ lỗi tích hợp sẵn và hỗ trợ phối cảnh gỡ lỗi tuyệt vời.
Trong chế độ gỡ lỗi, Ứng dụng Flex chạy trên phiên bản Trình gỡ lỗi Flash Player được tích hợp trong Flash Builder 4 hỗ trợ khả năng gỡ lỗi.
Vì vậy, các nhà phát triển có được cấu hình gỡ lỗi dễ dàng và sẵn có trong Flash Builder
Trong bài viết này, chúng tôi sẽ trình bày cách sử dụng gỡ lỗi mã Flex Client bằng Flash Builder. Chúng tôi sẽ thực hiện các nhiệm vụ sau
- Đặt các điểm ngắt trong mã và xem chúng trong Breakpoint Explorer.
- Bước qua từng dòng mã trong quá trình gỡ lỗi.
- Xem các giá trị của biến.
- Kiểm tra giá trị của tất cả các biến.
- Kiểm tra giá trị của một biểu thức.
- Hiển thị khung ngăn xếp cho các luồng bị treo.
Ví dụ gỡ lỗi
| Bươc | Sự miêu tả |
|---|---|
| 1 | Tạo một dự án với tên HelloWorld trong một gói com.tutorialspoint.client như được giải thích trong chương Flex - Create Application . |
| 2 | Sửa đổi HelloWorld.mxml như được giải thích bên dưới. Giữ phần còn lại của các tệp không thay đổi. |
| 3 | Biên dịch và chạy ứng dụng để đảm bảo logic nghiệp vụ đang hoạt động theo yêu cầu. |
Sau đây là nội dung của tệp mxml đã sửa đổi src/com.tutorialspoint/HelloWorld.mxml.
<?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:Style source = "/com/tutorialspoint/client/Style.css" />
<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:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" styleName = "button" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Khi bạn đã sẵn sàng với tất cả các thay đổi được thực hiện, hãy để chúng tôi biên dịch ở chế độ bình thường như chúng tôi đã làm trong chương Flex - Create Application .
Bước 1 - Đặt điểm ngắt
Đặt một điểm ngắt trên dòng đầu tiên của ứng dụng khởi tạo Trình xử lý của HelloWorld.mxml
Bước 2 - Ứng dụng gỡ lỗi
Bây giờ hãy nhấp vào
Nếu mọi thứ đều ổn, ứng dụng sẽ khởi chạy trong trình duyệt và bạn sẽ thấy nhật ký gỡ lỗi sau trong bảng điều khiển Flash Builder.
[SWF] \HelloWorld\bin-debug\HelloWorld.swf
- 181,509 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\1
- 763,122 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\2
- 1,221,837 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\3
- 1,136,788 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\4
- 2,019,570 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\5
- 318,334 bytes after decompressionNgay sau khi Ứng dụng khởi chạy, bạn sẽ thấy trọng tâm là điểm ngắt của Flash Builder vì chúng tôi đã đặt điểm ngắt trên dòng đầu tiên của phương thức application_initialize Handler.
Bạn có thể thấy ngăn xếp cho các chủ đề bị treo.
Bạn có thể thấy các giá trị cho các biểu thức.
Bạn có thể xem danh sách các điểm ngắt được đặt.
Bây giờ tiếp tục nhấn F6 cho đến khi bạn đến dòng cuối cùng của phương thức application_initializeHandler (). Đối với các phím chức năng, F6 kiểm tra từng dòng mã, F5 bước vào bên trong thêm và F8 sẽ tiếp tục ứng dụng. Bây giờ bạn có thể thấy danh sách các giá trị của tất cả các biến của phương thức application_initializeHandler ().
Bây giờ bạn có thể thấy mã flex có thể được gỡ lỗi giống như cách mà một Ứng dụng Java có thể được gỡ lỗi. Đặt các điểm ngắt vào bất kỳ dòng nào và chơi với khả năng gỡ lỗi của flex.
Flex cung cấp hai cách để quốc tế hóa ứng dụng Flex, Chúng tôi sẽ chứng minh việc sử dụng Thời gian biên dịch Quốc tế hóa đang được sử dụng phổ biến nhất trong các dự án.
| Sr.No | Kỹ thuật & Mô tả |
|---|---|
| 1 | Compile Time Internationalization Kỹ thuật này là phổ biến nhất và đòi hỏi rất ít chi phí trong thời gian chạy; là một kỹ thuật rất hiệu quả để dịch cả chuỗi hằng số và chuỗi tham số hóa; đơn giản nhất để thực hiện. Quốc tế hóa Thời gian biên dịch sử dụng các tệp thuộc tính tiêu chuẩn để lưu trữ các chuỗi đã dịch và thông báo được tham số hóa, và các tệp thuộc tính này được biên dịch trực tiếp trong ứng dụng. |
| 2 | Run Time Internationalization Kỹ thuật này rất linh hoạt nhưng chậm hơn so với quốc tế hóa chuỗi tĩnh. Bạn cần phải biên dịch các tệp thuộc tính bản địa hóa riêng biệt, để chúng bên ngoài ứng dụng và tải chúng khi chạy. |
Quy trình quốc tế hóa một ứng dụng linh hoạt
Bước 1 - Tạo cấu trúc thư mục
Tạo một thư mục ngôn ngữ trong thư mục src của dự án Flex, đây sẽ là thư mục mẹ cho tất cả các tệp thuộc tính cho các ngôn ngữ mà ứng dụng sẽ hỗ trợ. Bên trong thư mục ngôn ngữ, hãy tạo các thư mục con, một cho mỗi ngôn ngữ của ứng dụng sẽ được hỗ trợ. Quy ước đặt tên một ngôn ngữ là
{language}_{country code}Ví dụ, en_US đại diện cho tiếng Anh của Hoa Kỳ. Ngôn ngữ de_DE đại diện cho tiếng Đức. Ứng dụng mẫu sẽ hỗ trợ hai ngôn ngữ phổ biến: tiếng Anh và tiếng Đức.
Bước 2 - Tạo tệp thuộc tính
Tạo tệp thuộc tính chứa các thông báo sẽ được sử dụng trong ứng dụng. Chúng tôi đã tạo ra mộtHelloWorldMessages.properties nộp dưới src > locale > en_US trong ví dụ của chúng tôi.
enterName = Enter your name
clickMe = Click Me
applicationTitle = Application Internationalization Demonstration
greeting = Hello {0}Tạo tệp thuộc tính chứa các giá trị đã dịch cụ thể cho ngôn ngữ. Chúng tôi đã tạo ra mộtHelloWorldMessages.properties nộp dưới src > locale > de_DEtrong ví dụ của chúng tôi. Tệp này chứa các bản dịch bằng tiếng Đức. _de chỉ định ngôn ngữ Đức và chúng tôi sẽ hỗ trợ ngôn ngữ Đức trong ứng dụng của mình.
Nếu bạn đang tạo tệp thuộc tính bằng Flash Builder, hãy thay đổi mã hóa của tệp thành UTF-8. Chọn tệp và sau đó nhấp chuột phải vào tệp đó để mở cửa sổ thuộc tính của nó. Chọn Mã hóa tệp văn bản là Other UTF-8. Áp dụng và Lưu thay đổi.
enterName = Geben Sie Ihren Namen
clickMe = Klick mich
applicationTitle = Anwendung Internationalisierung Demonstration
greeting = Hallo {0}Bước 3 - Chỉ định tùy chọn Trình biên dịch
Nhấp chuột phải vào dự án của bạn và chọn Thuộc tính.
Chọn Trình biên dịch Flex và thêm phần sau vào cài đặt Đối số của Trình biên dịch Bổ sung -
-locale en_US de_DENhấp chuột phải vào dự án của bạn và chọn Thuộc tính.
Chọn Đường dẫn tạo linh hoạt và thêm phần sau vào cài đặt Đường dẫn nguồn -
src\locale\{locale}Ví dụ về nội bộ hóa
Bây giờ Chúng ta hãy làm theo các bước sau để kiểm tra kỹ thuật Nội bộ hóa trong ứng dụng Flex -
| Bươc | Sự miêu tả |
|---|---|
| 1 | Tạo một dự án với tên HelloWorld trong một gói com.tutorialspoint.client như được giải thích trong chương Flex - Create Application . |
| 2 | Sửa đổi HelloWorld.mxml như được giải thích bên dưới. Giữ phần còn lại của các tệp không thay đổi. |
| 3 | Biên dịch và chạy ứng dụng để đảm bảo logic nghiệp vụ đang hoạt động theo yêu cầu. |
Sau đây là nội dung của tệp mxml đã sửa đổi src/com.tutorialspoint/HelloWorld.mxml.
<?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"
minWidth = "500" minHeight = "500">
<fx:Metadata>
[ResourceBundle("HelloWorldMessages")]
</fx:Metadata>
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.controls.Alert;
[Bindable]
private var locales:Array = [{label:"English", locale:"en_US"},
{label:"German", locale:"de_DE"}];
private function comboChangeHandler():void {
resourceManager.localeChain = [localeComboBox.selectedItem.locale];
}
protected function clickMe_clickHandler(event:MouseEvent):void {
var name:String = txtName.text;
var inputArray:Array = new Array();
inputArray.push(name);
Alert.show(resourceManager.getString('HelloWorldMessages'
,'greeting',inputArray));
}
]]>
</fx:Script>
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40"
color = "0x777777"
text = "{resourceManager.getString('HelloWorldMessages','applicationTitle')}"
styleName = "heading" width = "90%" height = "150" />
<s:Panel width = "300" height = "150">
<s:layout>
<s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
</s:layout>
<s:HGroup >
<s:Label text = "{resourceManager.getString('HelloWorldMessages','enterName')}"
paddingTop = "2" />
<s:TextInput id = "txtName" />
</s:HGroup>
<s:Button
label = "{resourceManager.getString('HelloWorldMessages','clickMe')}"
click = "clickMe_clickHandler(event)" right = "10" />
</s:Panel>
<mx:ComboBox id = "localeComboBox" dataProvider = "{locales}"
change = "comboChangeHandler()" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Khi bạn đã sẵn sàng với tất cả các thay đổi được thực hiện, hãy để chúng tôi biên dịch và chạy ứng dụng ở chế độ bình thường như chúng tôi đã làm trong chương Flex - Create Application . Nếu mọi thứ đều ổn với ứng dụng của bạn, ứng dụng sẽ cho kết quả như sau: [ Dùng thử trực tuyến ]
Thay đổi ngôn ngữ bằng cách sử dụng ngôn ngữ thả xuống và xem kết quả.
Flex cung cấp một lớp học đặc biệt FlexPrintJob để in các đối tượng flex.
FlexPrintJob có thể được sử dụng để in một hoặc nhiều đối tượng Flex, chẳng hạn như hộp chứa Biểu mẫu hoặc VBox.
FlexPrintJob in đối tượng và tất cả các đối tượng mà nó chứa.
Các đối tượng có thể là tất cả hoặc một phần của giao diện hiển thị.
Các đối tượng có thể là các thành phần định dạng dữ liệu đặc biệt để in.
Lớp FlexPrintJob cho phép bạn mở rộng đầu ra để vừa với trang.
Lớp FlexPrintJob tự động sử dụng nhiều trang để in một đối tượng không vừa trên một trang.
Lớp FlexPrintJob khiến hệ điều hành hiển thị hộp thoại In. Bạn không thể in nếu không có một số thao tác của người dùng.
Chuẩn bị và gửi lệnh in
Bạn in đầu ra bằng cách chuẩn bị và gửi lệnh in. Hãy tạo một phiên bản của lớp FlexPrintJob
var printJob:FlexPrintJob = new FlexPrintJob();Bắt đầu công việc in
printJob.start();Flex sẽ làm cho hệ điều hành hiển thị hộp thoại Print. Thêm một hoặc nhiều đối tượng vào lệnh in và chỉ định cách chia tỷ lệ chúng
printJob.addObject(myObject, FlexPrintJobScaleType.MATCH_WIDTH);Mỗi đối tượng bắt đầu trên một trang mới. Gửi lệnh in đến máy in
printJob.send();Ví dụ về in ấn
| Bươc | Sự miêu tả |
|---|---|
| 1 | Tạo một dự án với tên HelloWorld trong một gói com.tutorialspoint.client như được giải thích trong chương Flex - Create Application . |
| 2 | Sửa đổi HelloWorld.mxml như được giải thích bên dưới. Giữ phần còn lại của các tệp không thay đổi. |
| 3 | Biên dịch và chạy ứng dụng để đảm bảo logic nghiệp vụ đang hoạt động theo yêu cầu. |
Sau đây là nội dung của tệp mxml đã sửa đổi src/com.tutorialspoint/HelloWorld.mxml.
<?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:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.printing.FlexPrintJob;
import mx.printing.FlexPrintJobScaleType;
protected function btnClickMe_clickHandler(event:MouseEvent):void {
// Create an instance of the FlexPrintJob class.
var printJob:FlexPrintJob = new FlexPrintJob();
// Start the print job.
if (printJob.start() != true) return;
// Add the object to print. Do not scale it.
printJob.addObject(myDataGrid, FlexPrintJobScaleType.NONE);
// Send the job to the printer.
printJob.send();
}
protected function application_initializeHandler(event:FlexEvent):void {
lblHeader.text = "My Hello World Application";
}
]]>
</fx:Script>
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
styleName = "heading" />
<mx:DataGrid id = "myDataGrid" width = "300">
<mx:dataProvider>
<fx:Object Product = "Flex" Code = "1000" />
<fx:Object Product = "GWT" Code = "2000" />
<fx:Object Product = "JAVA" Code = "3000" />
<fx:Object Product = "JUnit" Code = "4000" />
</mx:dataProvider>
</mx:DataGrid>
<s:Button label = "Print Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)"
styleName = "button" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Khi bạn đã sẵn sàng với tất cả các thay đổi được thực hiện, hãy để chúng tôi biên dịch và chạy ứng dụng ở chế độ bình thường như chúng tôi đã làm trong chương Flex - Create Application . Nếu mọi thứ đều ổn với ứng dụng của bạn, ứng dụng sẽ cho kết quả như sau: [ Dùng thử trực tuyến ]
Nhấp vào nút in tôi và bạn có thể thấy bản in của lưới dữ liệu được hiển thị bên dưới.
