Flex-퀵 가이드

Flex 란 무엇입니까?

Flex는 강력한 오픈 소스 애플리케이션 프레임 워크로 동일한 프로그래밍 모델, 도구 및 코드베이스를 사용하여 브라우저, 모바일 및 데스크톱 용 기존 애플리케이션을 구축 할 수 있습니다.

Flex는 Flex 클래스 라이브러리 (ActionScript 클래스), Flex 컴파일러, 디버거, MXML 및 ActionScript 프로그래밍 언어 및 기타 유틸리티로 구성된 FLEX SDK를 제공하여 표현적이고 인터랙티브 한 리치 인터넷 애플리케이션 (RIA)을 구축합니다.

Flex는 웹 애플리케이션의 사용자 인터페이스 (UI) 또는 클라이언트 측 기능을 처리합니다. 서버 측 기능은 기존 스크립팅 언어 (Java / PHP 등)로 작성된 서버 측 구성 요소에 따라 다릅니다.

Flex 기반 응용 프로그램은 실제로 SWF 파일로 제공되며 기존 웹 응용 프로그램의 HTML / JavaScript 부분과 매우 유사합니다.

Flex 애플리케이션은 SWF 파일과 HTML 래퍼, CSS 파일 및 서버 측 스크립트 파일 (예 : Java, .CFM, .PHP 등)로 서버에 배포됩니다. 기존 웹 애플리케이션과 같습니다.

이러한 리소스는 일반적인 HTTP 요청 / 응답 방식과 브라우저에서 애플리케이션을 실행하는 Flash Player를 사용하여 서버에서 클라이언트의 브라우저로 전달됩니다.

Flex의 장점

  • Flex 애플리케이션은 일반적으로 Flash Player 기반으로 GPS, 카메라, 로컬 데이터베이스, 그래픽 가속도계와 같은 장치 기능에 액세스 할 수 있습니다.

  • Flex 애플리케이션은 Android, BlackBerry Tablet OS 및 iOS 장치에서 실행할 수 있습니다.

  • Flex 애플리케이션은 데스크톱뿐 아니라 브라우저에서도 실행할 수 있습니다.

  • Flex 애플리케이션은 플랫폼에 독립적입니다. UI는 플랫폼에 고유하거나 각 플랫폼에서 동일하게 만들 수 있습니다.

  • Flex 애플리케이션은 REST, SOAP, JSON, JMS 및 AMF와 같은 업계 표준을 사용하여 Java, Spring, Hibernate, PHP, Ruby, .NET, Adobe ColdFusion 및 SAP와 같은 모든 주요 서버 측 기술과 서버와 상호 작용할 수 있습니다.

  • Flex 애플리케이션은 애플리케이션과의 직관적 인 상호 작용을 통해 풍부한 사용자 경험을 보장하고 시각적으로 풍부한 인터페이스에 정보를 제공합니다.

  • Flex 애플리케이션은 서버에서 새 페이지를 가져 오거나 브라우저를 새로 고칠 필요없이 상태를 한 상태에서 다른 상태로 전환 할 수있는 단일 페이지 애플리케이션입니다.

  • Flex 애플리케이션은 사용자가보기를 변경할 때마다 새 페이지가 아닌 한 번만 애플리케이션을 반환하면되므로 서버의로드를 크게 줄입니다.

Flex의 단점

  • Flex 애플리케이션은 단일 스레드 애플리케이션이지만 Flex는 이러한 문제를 완화하기 위해 비동기 프로그래밍 모델을 제공합니다.

  • Flex는 ActionScript 및 XML 기반입니다. 이 두 가지를 배우는 것은 Flex에서 작업하는 데 필수입니다.

이 튜토리얼은 Adobe Flex Framework로 작업을 시작하기 위해 개발 환경을 준비하는 방법을 안내합니다. 이 튜토리얼은 Flex Framework를 설정하기 전에 컴퓨터에서 JDK 및 Adobe Flash Builder를 설정하는 방법도 알려줍니다.

시스템 요구 사항

FLEX에는 JDK 1.4 이상이 필요하므로 첫 번째 요구 사항은 시스템에 JDK를 설치하는 것입니다.

JDK 1.4 이상.
기억 최소 요구 사항이 없습니다.
디스크 공간 최소 요구 사항이 없습니다.
운영 체제 최소 요구 사항이 없습니다.

주어진 단계에 따라 Flex 애플리케이션 개발을 시작하도록 환경을 설정하십시오.

1 단계-컴퓨터에서 Java 설치 확인

이제 콘솔을 열고 다음을 실행하십시오. java 명령.

OS 직무 명령
윈도우 명령 콘솔 열기 c : \> 자바 버전
리눅스 명령 터미널 열기 $ 자바 버전
맥 터미널 열기 기계 : ~ joseph $ java -version

모든 운영 체제의 출력을 확인하겠습니다.

OS 생성 된 출력
윈도우

자바 버전 "1.6.0_21"

Java (TM) SE 런타임 환경 (빌드 1.6.0_21-b07)

Java HotSpot (TM) Client VM (빌드 17.0-b17, 혼합 모드, 공유)
리눅스

자바 버전 "1.6.0_21"

Java (TM) SE 런타임 환경 (빌드 1.6.0_21-b07)

Java HotSpot (TM) Client VM (빌드 17.0-b17, 혼합 모드, 공유)
맥

자바 버전 "1.6.0_21"

Java (TM) SE 런타임 환경 (빌드 1.6.0_21-b07)

Java HotSpot (TM) 64 비트 서버 VM (빌드 17.0-b17, 혼합 모드, 공유)

2 단계-JDK (Java Development Kit) 설정

Java가 설치되어 있지 않은 경우 Oracle의 Java 사이트 Java SE Downloads 에서 Java SDK (Software Development Kit)를 설치할 수 있습니다 . 다운로드 한 파일에서 JDK 설치 지침을 찾은 다음 주어진 지침에 따라 설정을 설치하고 구성합니다. 마지막으로 java 및 javac (일반적으로 각각 java_install_dir / bin 및 java_install_dir)가 포함 된 디렉토리를 참조하도록 PATH 및 JAVA_HOME 환경 변수를 설정합니다.

설정 JAVA_HOME시스템에 Java가 설치된 기본 디렉토리 위치를 가리키는 환경 변수. 예를 들면-

OS 산출
윈도우 환경 변수 JAVA_HOME을 C : \ Program Files \ Java \ jdk1.6.0_21로 설정합니다.
리눅스 내보내기 JAVA_HOME = / usr / local / java-current
맥 export JAVA_HOME = / Library / Java / Home

Java 컴파일러 위치를 시스템 경로에 추가하십시오.

OS 산출
윈도우 문자열; % JAVA_HOME % \ bin을 시스템 변수 Path 끝에 추가합니다.
리눅스 내보내기 PATH =$PATH:$JAVA_HOME / bin /
맥 필요하지 않음

3 단계-Adobe Flash Builder 4.5 설정

이 튜토리얼의 모든 예제는 Adobe Flash Builder 4.5 Profession IDE 평가판을 사용하여 작성되었습니다. 따라서 컴퓨터에 최신 버전의 Adobe Flash Builder를 설치하는 것이 좋습니다. 또한 운영 체제의 호환성을 확인하십시오.

Adobe Flash Builder IDE를 설치하려면 다음 사이트에서 최신 Adobe Flash Builder 바이너리를 다운로드하십시오. https://www.adobe.com/in/products/flash-builder.html. 설치를 다운로드 한 후 편리한 위치에 바이너리 배포판의 압축을 풉니 다. 예를 들어 Windows의 C : \ flash-builder 또는 Linux / Unix의 / usr / local / flash-builder에서 마지막으로 PATH 변수를 적절하게 설정합니다.

Windows 시스템에서 다음 명령을 실행하거나 FlashBuilder.exe를 두 번 클릭하면 Flash Builder가 시작됩니다.

%C:\flash-builder\FlashBuilder.exe

Flash Builder는 Unix (Solaris, Linux 등) 시스템에서 다음 명령을 실행하여 시작할 수 있습니다.

$/usr/local/flash-builder/FlashBuilder

Adobe Flash Builder 평가판은 60 일 동안 사용할 수 있습니다. 이용 약관에 동의하고 초기 등록 단계를 건너 뛰고 IDE를 계속 진행하십시오. 이해를 돕기 위해 교육 목적으로 평가판을 사용하고 있습니다.

성공적으로 시작한 후 모든 것이 정상이면 다음 결과가 표시됩니다.

Adobe Flash Builder는 FLEX SDK로 사전 구성되어 제공됩니다. Adobe Flash Builder 4.5와 함께 제공되는 예제에서 FLEX SDK 4.5를 사용하고 있습니다.

4 단계 – Apache Tomcat 설정

최신 버전의 Tomcat을 다음에서 다운로드 할 수 있습니다. https://tomcat.apache.org/. 설치를 다운로드 한 후 편리한 위치에 바이너리 배포판의 압축을 풉니 다. 예를 들어 Windows의 C : \ apache-tomcat-6.0.33 또는 Linux / Unix의 /usr/local/apache-tomcat-6.0.33에서 설치 위치를 가리키는 CATALINA_HOME 환경 변수를 설정합니다.

Windows 시스템에서 다음 명령을 실행하여 Tomcat을 시작하거나 startup.bat를 두 번 클릭하기 만하면됩니다.

%CATALINA_HOME%\bin\startup.bat 
or 
C:\apache-tomcat-6.0.33\bin\startup.bat

Tomcat은 UNIX (Solaris, Linux 등) 시스템에서 다음 명령을 실행하여 시작할 수 있습니다.

$CATALINA_HOME/bin/startup.sh 
Or 
/usr/local/apache-tomcat-6.0.33/bin/startup.sh

성공적으로 시작한 후 Tomcat에 포함 된 기본 웹 응용 프로그램은 다음을 방문하여 사용할 수 있습니다. http://localhost:8080/. 모든 것이 정상이면 다음 결과가 표시됩니다.

Tomcat 구성 및 실행에 대한 자세한 내용은 여기에 포함 된 설명서와 Tomcat 웹 사이트 http://tomcat.apache.org에서 찾을 수 있습니다.

Windows 시스템에서 다음 명령을 실행하여 Tomcat을 중지 할 수 있습니다.

%CATALINA_HOME%\bin\shutdown
Or
C:\apache-tomcat-5.5.29\bin\shutdown

UNIX (Solaris, Linux 등) 컴퓨터에서 다음 명령을 실행하여 Tomcat을 중지 할 수 있습니다.

$CATALINA_HOME/bin/shutdown.sh
Or
/usr/local/apache-tomcat-5.5.29/bin/shutdown.sh

Flash Builder를 사용하여 실제 "HelloWorld" 애플리케이션을 만들기 전에 Flex 애플리케이션의 실제 부분이 무엇인지 살펴 보겠습니다.

Flex 애플리케이션은 다음 네 가지 중요한 부분으로 구성되며, 그 중 마지막 부분은 선택 사항이지만 처음 세 부분은 필수입니다.

  • Flex 프레임 워크 라이브러리
  • 클라이언트 측 코드
  • 공용 리소스 (HTML / JS / CSS)
  • 서버 측 코드

HelloWord와 같은 일반적인 Flex 애플리케이션의 다른 부분의 샘플 위치는 다음과 같습니다.

이름 위치
프로젝트 루트 HelloWorld /
Flex 프레임 워크 라이브러리 빌드 경로
공공 자원 HTML 템플릿
클라이언트 측 코드 table-border / com / tutorialspoint / client
서버 측 코드 table-border / com / tutorialspoint / server

애플리케이션 구축 프로세스

시작하려면 Flex 애플리케이션에 Flex 프레임 워크 라이브러리가 필요합니다. 나중에 Flash Builder는 자동으로 라이브러리를 빌드 경로에 추가합니다.

플래시 빌더를 사용하여 코드를 빌드 할 때 플래시 빌더는 다음 작업을 수행합니다.

  • 소스 코드를 HelloWorld.swf 파일로 컴파일합니다.

  • html-template 폴더에 저장된 index.template.html 파일에서 HelloWorld.html (swf 파일 용 래퍼 파일)을 컴파일합니다.

  • 대상 폴더 bin-debug에 HelloWorld.swf 및 HelloWorld.html 파일을 복사합니다.

  • 대상 폴더 bin-debug의 HelloWorld.html에서 동적으로 swf 파일을로드하는 JavaScript 코드 인 swfobject.js를 복사합니다.

  • 프레임 워크 라이브러리를 대상 폴더 bin-debug에 frameworks_xxx.swf라는 이름의 swf 파일 형식으로 복사합니다.

  • 대상 폴더의 다른 플렉스 모듈 (sparkskins_xxx.swf, textLayout_xxx.swf와 같은 .swf 파일)을 복사합니다.

응용 프로그램 시작 프로세스

  • 웹 브라우저의 \ HelloWorld \ bin-debug 폴더에있는 HelloWorld.html 파일을 엽니 다.

  • HelloWorld.swf가 자동으로로드되고 응용 프로그램이 실행되기 시작합니다.

Flex 프레임 워크 라이브러리

다음은 몇 가지 중요한 프레임 워크 라이브러리에 대한 간략한 세부 정보입니다. Flex 라이브러리는 .swc 표기법을 사용하여 표시됩니다.

Sr. 아니요 노드 및 설명
1

playerglobal.swc

이 라이브러리는 컴퓨터에 설치된 FlashPlayer에만 해당되며 Flash Player에서 지원하는 기본 메서드를 포함합니다.
2

textlayout.swc

이 라이브러리는 텍스트 레이아웃 관련 기능을 지원합니다.
삼

framework.swc

Flex의 핵심 기능이 포함 된 Flex 프레임 워크 라이브러리입니다.
4

mx.swc

이 라이브러리는 mx UI 컨트롤의 정의를 저장합니다.
5

charts.swc

이 라이브러리는 차트 컨트롤을 지원합니다.
6

spark.swc

이 라이브러리는 Spark UI 컨트롤의 정의를 저장합니다.
7

sparkskins.swc

이 라이브러리는 Spark UI 컨트롤의 스키닝을 지원합니다.

클라이언트 측 코드

Flex 애플리케이션 코드를 작성할 수 있습니다. MXML 만큼 잘 ActionScript.

Sr. 아니요 유형 및 설명
1

MXML

MXML은 사용자 인터페이스 구성 요소를 배치하는 데 사용할 XML 마크 업 언어입니다. MXML은 빌드 프로세스 중에 ActionScript로 컴파일됩니다.
2

ActionScript

ActionScript는 객체 지향 절차 프로그래밍 언어이며 ECMAScript (ECMA-262) 에디션 4 초안 언어 사양을 기반으로합니다.

Flex에서 ActionScript와 MXML을 혼합하여 다음을 수행 할 수 있습니다.

  • MXML 태그를 사용하여 사용자 인터페이스 구성 요소 레이아웃

  • MXML을 사용하여 서버의 데이터 소스에 대한 액세스와 같은 애플리케이션의 비 시각적 측면을 선언적으로 정의합니다.

  • MXML을 사용하여 사용자 인터페이스 구성 요소와 서버의 데이터 소스간에 데이터 바인딩을 만듭니다.

  • ActionScript를 사용하여 MXML 이벤트 속성 내에 이벤트 리스너를 정의합니다.

  • 다음을 사용하여 스크립트 블록 추가 꼬리표.

  • 외부 ActionScript 파일을 포함합니다.

  • ActionScript 클래스를 가져옵니다.

  • ActionScript 구성 요소를 만듭니다.

공공 자원

이는 호스트 HTML 페이지, CSS 또는 html 템플릿 폴더 아래에있는 이미지와 같이 Flex 애플리케이션에서 참조하는 도움말 파일입니다. 다음 파일이 포함되어 있습니다-

Sr. 아니요 파일 이름 및 설명
1

index.template.html

자리 표시 자와 함께 HTML 페이지를 호스팅합니다. Flash Builder는이 템플릿을 사용하여 HelloWorld.swf 파일로 실제 페이지 HelloWorld.html을 빌드합니다.
2

playerProductInstall.swf

Express 모드에서 Flash Player를 설치하기위한 Flash 유틸리티입니다.
삼

swfobject.js

설치된 Flash Player의 버전을 확인하고 HelloWorld.html 페이지에서 HelloWorld.swf를로드하는 JavaScript입니다.
4

html-template/history

이 폴더에는 응용 프로그램의 기록 관리를위한 리소스가 포함되어 있습니다.

HelloWorld.mxml

이것은 응용 프로그램의 비즈니스 논리를 구현하여 작성된 실제 MXML / AS (ActionScript) 코드이며 Flex 컴파일러는 브라우저에서 Flash Player에 의해 실행될 SWF 파일로 변환됩니다.

샘플 HelloWorld Entry 클래스는 다음과 같습니다.

<?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>

다음 표는 위의 코드 스크립트에서 사용 된 모든 태그에 대한 설명을 제공합니다.

Sr. 아니요 노드 및 설명
1

Application

항상 Flex 애플리케이션의 루트 태그 인 애플리케이션 컨테이너를 정의합니다.
2

Script

ActionScript 언어로 된 비즈니스 로직을 포함합니다.
삼

VGroup

수직 방식으로 Flex UI 컨트롤을 포함 할 수있는 수직 그룹화 컨테이너를 정의합니다.
4

Label

텍스트를 표시하는 매우 간단한 사용자 인터페이스 구성 요소 인 Label 컨트롤을 나타냅니다.
5

Button

일부 작업을 수행하기 위해 클릭 할 수있는 Button 컨트롤을 나타냅니다.

서버 측 코드

이것은 응용 프로그램의 서버 측 부분이며 매우 선택 사항입니다. 애플리케이션 내에서 백엔드 처리를 수행하지 않는 경우이 부분이 필요하지 않지만 백엔드에서 일부 처리가 필요하고 클라이언트 측 애플리케이션이 서버와 상호 작용하는 경우 이러한 구성 요소를 개발해야합니다.

다음 장에서는 위에서 언급 한 모든 개념을 사용하여 HelloWorld Flash Builder를 사용하는 응용 프로그램.

Flash Builder 4.5를 사용하여 Flex 애플리케이션을 만들 것입니다. 간단한 것부터 시작합시다HelloWorld 신청.

1 단계 – 프로젝트 생성

첫 번째 단계는 Flash Builder IDE를 사용하여 간단한 Flex 프로젝트를 만드는 것입니다. 옵션을 사용하여 프로젝트 마법사 시작File > New > Flex Project. 이제 다음과 같이 마법사 창을 사용 하여 프로젝트 이름을 HelloWorld 로 지정합니다.

애플리케이션 유형 선택 Web (runs in Adobe Flash Player). 그러나 이것이 선택되지 않은 경우 다른 기본값을 그대로두고 Finish 버튼을 클릭합니다. 프로젝트가 성공적으로 생성되면 프로젝트 탐색기에 다음 내용이 표시됩니다.

다음은 모든 중요한 폴더에 대한 간략한 설명입니다.

폴더 위치
테이블 테이블 테두리

소스 코드 (mxml / as classes) 파일.

클라이언트 UI 표시를 담당하는 클라이언트 측 특정 Java 클래스를 포함하는 com / tutorialspoint / client 폴더 구조를 만들었습니다.
빈 디버그

이것은 출력 부분이며 실제 배포 가능한 웹 응용 프로그램을 나타냅니다.

History 폴더에는 Flex 애플리케이션의 이력 관리를위한 지원 파일이 포함되어 있습니다.

framework_xxx.swf, flex 프레임 워크 파일은 flex 응용 프로그램에서 사용해야합니다.

HelloWorld.html, 플렉스 애플리케이션 용 래퍼 / 호스트 HTML 파일.

Flex 기반 애플리케이션 인 HelloWorld.swf.

playerProductInstall.swf, 플래시 플레이어 익스프레스 설치 프로그램.

spark_xxx.swf, 스파크 구성 요소 지원을위한 라이브러리.

swfobject.js, HelloWorld.html에서 HelloWorld.swf를로드하는 JavaScript입니다. Flash Player 버전을 확인하고 초기화 매개 변수를 HelloWorld.swf 파일에 전달합니다.

textLayout_xxx.swf, 텍스트 구성 요소 지원을위한 라이브러리.
HTML 템플릿

이것은 구성 가능한 웹 애플리케이션을 나타냅니다. Flash Builder는 html 템플릿에서 bin-debug 폴더로 파일을 컴파일합니다.

History 폴더에는 Flex 애플리케이션의 이력 관리를위한 지원 파일이 포함되어 있습니다.

index.template.html, Flash Builder 특정 구성을위한 자리 표시자가있는 플렉스 애플리케이션 용 래퍼 / 호스트 HTML 파일입니다. 빌드 중에 bin-debug 폴더의 HelloWorld.html로 컴파일됩니다.

playerProductInstall.swf, Flash Player Express 설치 프로그램은 빌드 중에 bin-debug 폴더에 복사됩니다.

swfobject.js, HelloWorld.html에서 HelloWorld.swf를로드하는 JavaScript입니다. Flash Player 버전을 확인하고 초기화 매개 변수를 HelloWorld.swf 파일에 전달하면 빌드 중에 bindebug 폴더에 복사됩니다.

2 단계 – 외부 CSS 파일 만들기

CSS 파일 만들기 styles.css 래퍼 HTML 페이지 용 html-template 폴더.

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;
}

3 단계 – 래퍼 HTML 페이지 템플릿 수정

래퍼 HTML 페이지 템플릿 수정 index.template.html 에 htmltemplate폴더. Flash Builder는 HelloWorld.html로 컴파일 될 기본 래퍼 HTML 페이지 템플릿 html-template / index.template.html을 만듭니다 .

이 파일에는 컴파일 프로세스 중에 Flash Builder가 대체하는 자리 표시자가 포함되어 있습니다. 예 : 플래시 플레이어 버전, 애플리케이션 이름 등

플래시 플러그인이 설치되지 않은 경우 사용자 지정 메시지를 표시하도록이 파일을 수정하겠습니다.

<!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>

4 단계 – 내부 CSS 파일 만들기

CSS 파일 만들기 Style.css ...에 대한 HelloWorld.mxml 에 table tablebordered/com/tutorialspoint폴더. Flex는 HTML UI 컨트롤에 대한 CSS 스타일이 있기 때문에 UI 컨트롤에 유사한 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;
}

5 단계 – 엔트리 레벨 클래스 수정

Flash Builder는 응용 프로그램에 대한 루트 태그 <application> 컨테이너가 있는 기본 mxml 파일 테이블 tableborder / com.tutorialspoint / HelloWorld.mxml을 만듭니다 . "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>

동일한 소스 디렉토리에 더 많은 mxml 또는 actionscript 파일을 작성하여 새 애플리케이션을 정의하거나 헬퍼 루틴을 정의 할 수 있습니다.

6 단계 – 애플리케이션 빌드

Flash Builder에는 Build Automatically기본적으로 선택되어 있습니다. 확인하십시오Problems오류가 있는지 확인합니다. 변경을 완료하면 오류가 표시되지 않습니다.

7 단계 – 애플리케이션 실행

이제

응용 프로그램 실행 메뉴를 클릭 하고HelloWorld 응용 프로그램을 실행합니다.

모든 것이 정상이면 브라우저 팝업, 애플리케이션 실행 및 실행이 표시되어야합니다. 응용 프로그램에 문제가 없으면 다음과 같은 결과가 나타납니다. [ 온라인 시도 ]

Flash Player에서 응용 프로그램을 실행하고 있기 때문에 브라우저 용 Flash Player 플러그인을 설치해야합니다. 화면의 지시에 따라 플러그인을 설치하십시오. 브라우저에 이미 Flash Player 플러그인이 설정되어있는 경우 다음 출력을 볼 수 있습니다.

축하합니다! 다음을 사용하여 첫 번째 애플리케이션을 구현했습니다.Flex.

이 자습서에서는 응용 프로그램을 만드는 방법을 설명합니다. war 파일 및 Apache Tomcat 웹 서버 루트에 배포하는 방법.

이 간단한 예제를 이해했다면 동일한 단계에 따라 복잡한 Flex 애플리케이션을 배포 할 수도 있습니다.

Flex 애플리케이션을 만들기 위해 다음 단계를 따르십시오.

단계 기술
1 packagecom 아래에 HelloWorld라는 이름으로 프로젝트를 만듭니다. Flex-Create Application 장에 설명 된 tutorialspoint.client .
2 아래와 같이 HelloWorld.mxml 을 수정 합니다. 나머지 파일은 변경하지 마십시오.
삼 애플리케이션을 컴파일하고 실행하여 비즈니스 로직이 요구 사항에 따라 작동하는지 확인합니다.

아래 단계에 따라 Flex 애플리케이션의 릴리스 빌드를 생성 한 다음 Tomcat 서버에 배포하십시오.

첫 번째 단계는 Flash Builder IDE를 사용하여 릴리스 빌드를 만드는 것입니다. 옵션을 사용하여 릴리스 빌드 마법사 시작File > Export > Flash Builder > Release Build.

다음과 같이 마법사 창을 사용하여 프로젝트를 HelloWorld 로 선택 합니다.

다른 기본값은 그대로두고 마침 버튼을 클릭합니다. 이제 Flash Builder는 프로젝트의 릴리스 빌드를 포함하는 bin-release 폴더를 만듭니다.

이제 릴리스 빌드가 준비되었습니다. 다음 단계에 따라 Flex 애플리케이션을 배포하겠습니다.

단계 기술
1 응용 프로그램의 bin-release 폴더 내용을 HelloWorld.war 파일 형식으로 압축하고 Apache Tomcat 웹 서버에 배포합니다.
2 마지막 단계에서 아래에 설명 된대로 적절한 URL을 사용하여 웹 애플리케이션을 시작하십시오.

다음은 수정 된 mxml 파일의 내용입니다. 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>

모든 변경이 완료되면 Flex-Create Application 장 에서했던 것처럼 일반 모드에서 응용 프로그램을 컴파일하고 실행하겠습니다 . 응용 프로그램에 문제가 없으면 다음 결과가 표시됩니다. [ 온라인 시도 ]

WAR 파일 생성

이제 응용 프로그램이 제대로 작동하고 전쟁 파일로 내보낼 준비가되었습니다. 다음 단계를 따르십시오-

  • 프로젝트의 bin-release 디렉토리 C : \ workspace \ HelloWorld \ binrelease로 이동합니다.

  • bin-release 디렉토리 내에서 사용 가능한 모든 파일 및 폴더를 선택하십시오.

  • 선택한 모든 파일 및 폴더를 HelloWorld.zip 이라는 파일로 압축합니다 .

  • HelloWorld.zip의 이름을 HelloWorld.war로 바꿉니다.

WAR 파일 배포

Tomcat 서버를 중지하십시오.

  • HelloWorld.war 파일을 tomcat 설치 디렉토리> webapps 폴더에 복사하십시오.

  • Tomcat 서버를 시작하십시오.

  • webapps 디렉토리를 살펴보면 HelloWorld가 생성 된 폴더가있을 것입니다.

  • 이제 HelloWorld.war이 Tomcat 웹 서버 루트에 성공적으로 배포되었습니다.

응용 프로그램 실행

웹 브라우저에 URL을 입력하십시오-

http : // localhost : 8080 / HelloWorld / HelloWorld.html 을 사용하여 애플리케이션을 시작합니다.

서버 이름 (localhost) 및 포트 (8080)는 Tomcat 구성에 따라 다를 수 있습니다.

Flex 애플리케이션의 수명주기

응용 프로그램의 수명주기 단계를 이해하지 않고도 Flex 응용 프로그램을 빌드 할 수 있지만 기본 메커니즘을 아는 것이 좋습니다. 일이 발생하는 순서. 런타임시 다른 Flex 애플리케이션로드와 같은 기능을 구성하고 런타임시 클래스 라이브러리 및 자산을로드 및 언로드하는 프로세스를 관리하는 데 도움이됩니다.

Flex 애플리케이션 수명주기를 잘 이해하면 코드를 최적으로 실행할 위치를 알 수 있으므로 더 나은 애플리케이션을 빌드하고 최적화 할 수 있습니다. 예를 들어, 프리 로더 중에 일부 코드가 실행되도록해야하는 경우 해당 이벤트에 대한 코드를 배치 할 위치를 알아야합니다.

브라우저에서 플렉스 애플리케이션을로드하면 플렉스 애플리케이션의 수명주기 동안 다음 이벤트가 발생합니다.

다음은 다양한 Flex 수명주기 이벤트에 대한 간략한 세부 정보입니다.

Sr. 아니요 이벤트 및 설명
1

preInitialize : mx.core.UIComponent.preinitialize

이벤트 유형 : mx.events.FlexEvent.PREINITIALIZE

이 이벤트는 구성 요소 초기화 시퀀스의 시작 부분에 전달됩니다. 이 이벤트가 전달 될 때 구성 요소는 매우 원시 상태입니다. Button 컨트롤과 같은 많은 구성 요소는 기능을 구현하기 위해 내부 자식 구성 요소를 만듭니다. 예를 들어 Button 컨트롤은 레이블 텍스트를 나타내는 내부 UI TextField 구성 요소를 만듭니다.

Flex가 pre-initialize 이벤트를 전달할 때 구성 요소의 모든 내부 자식을 포함한 자식은 아직 생성되지 않았습니다.
2

초기화 : mx.core.UIComponent.initialize

이벤트 유형 : mx.events.FlexEvent.INITIALIZE

이 이벤트는 사전 초기화 단계 후에 전달됩니다. Flex 프레임 워크는이 단계에서이 구성 요소의 내부 구조를 초기화합니다. 이 이벤트는 구성 요소가 상위에 추가 될 때 자동으로 시작됩니다.

일반적으로 initialize ()를 호출 할 필요가 없습니다.
삼

creationComplete : mx.core.UIComponent.creationComplete

이벤트 유형 : mx.events.FlexEvent.CREATION_COMPLETE

이 이벤트는 구성 요소의 구성, 속성 처리, 측정, 레이아웃 및 그리기가 완료되면 전달됩니다.

이 시점에서 보이는 속성에 따라 구성 요소가 그려져도 보이지 않습니다.
4

applicationComplete : spark.components.Application.applicationComplete

이벤트 유형 : mx.events.FlexEvent.APPLICATION_COMPLETE

애플리케이션이 초기화되고 LayoutManager에 의해 처리되고 표시 목록에 첨부 된 후에 전달됩니다.

이것은 응용 프로그램 생성 수명주기의 마지막 이벤트이며 응용 프로그램이 완전히로드되었음을 나타냅니다.

Flex 수명주기 예

테스트 애플리케이션을 생성하여 Flex 애플리케이션의 테스트 수명주기를 이해하는 단계를 따르십시오.

단계 기술
1 packagecom 아래에 HelloWorld라는 이름으로 프로젝트를 만듭니다. Flex-Create Application 장에 설명 된 tutorialspoint.client .
2 아래와 같이 HelloWorld.mxml 을 수정 합니다. 나머지 파일은 변경하지 마십시오.
삼 애플리케이션을 컴파일하고 실행하여 비즈니스 로직이 요구 사항에 따라 작동하는지 확인합니다.

다음은 수정 된 mxml 파일의 내용입니다. 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>

모든 변경이 완료되면 Flex-Create Application 장 에서했던 것처럼 일반 모드에서 응용 프로그램을 컴파일하고 실행하겠습니다 . 응용 프로그램에 문제가 없으면 다음과 같은 결과가 나타납니다. [ 온라인 시도 ]

Flex는 CSS 구문 및 스타일을 사용하여 HTML 구성 요소에 대한 CSS와 동일한 방식으로 UI 컨트롤에 적용 할 수 있습니다.

방법 # 1 : 외부 스타일 시트 파일 사용

애플리케이션의 클래스 경로에서 사용 가능한 스타일 시트를 참조 할 수 있습니다. 예를 들어 Style.css 파일을com/tutorialspoint/client folder HelloWorld.mxml 파일도 있습니다.

/* 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;
}

그런 다음 css 파일은 다음 코드 스 니펫으로 참조 할 수 있습니다.

<fx:Style source = "/com/tutorialspoint/client/Style.css" />

styleName 속성을 사용하여 UI 구성 요소에 스타일 할당

<s:BorderContainer width = "500" height = "500" id = "mainContainer" 
   styleName = "container"> 
   ...
</s:BorderContainer>

방법 # 2 : Ui 컨테이너 구성 요소 내에서 스타일 사용

<fx : Style> 태그를 사용하여 UI 컨테이너 구성 요소 내에서 스타일을 정의 할 수 있습니다.

클래스 레벨 선택기

<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>

styleName 속성을 사용하여 UI 구성 요소에 스타일을 할당합니다.

<s:Label id = "errorMsg" text = "This is an error message" styleName = "errorLabel" />

ID 레벨 선택기

ID 선택기를 사용하여 스타일 UI 구성 요소.

<fx:Style> 
   /* id level selector  */ 
   #msgLabel { 
      color: gray; 
   } 
</fx:Style>

<s:Label id = "msgLabel" text = "This is a normal message" />

유형 레벨 선택기

하나의 GO에서 한 유형의 UI 구성 요소 스타일을 지정합니다.

<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)" />

CSS 예제를 사용한 플렉스 스타일

테스트 애플리케이션을 생성하여 Flex 애플리케이션의 CSS 스타일을 확인하는 단계를 따르십시오.

단계 기술
1 Flex-Create Application 장에 설명 된대로 com.tutorialspoint.client 패키지 아래에 HelloWorld라는 이름으로 프로젝트를 만듭니다 .
2 아래에 설명 된대로 Style.css, HelloWorld.mxml 을 수정 합니다. 나머지 파일은 변경하지 마십시오.
삼 애플리케이션을 컴파일하고 실행하여 비즈니스 로직이 요구 사항에 따라 작동하는지 확인합니다.

다음은 수정 된 CSS 파일의 내용입니다. 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;
}

다음은 수정 된 mxml 파일의 내용입니다. 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>

모든 변경이 완료되면 Flex-Create Application 장 에서했던 것처럼 일반 모드에서 응용 프로그램을 컴파일하고 실행하겠습니다 . 응용 프로그램에 문제가 없으면 다음과 같은 결과가 나타납니다. [ 온라인 시도 ]

스키닝이란?

  • Flex에서 스키닝은 UI 구성 요소의 모양과 느낌을 완전히 사용자 정의하는 프로세스입니다.

  • 스킨은 구성 요소의 텍스트, 이미지, 필터, 전환 및 상태를 정의 할 수 있습니다.

  • 스킨은 별도의 mxml 또는 ActionScript 구성 요소로 만들 수 있습니다.

  • 스킨을 사용하여 UI 구성 요소의 모든 시각적 측면을 제어 할 수 있습니다.

  • 스킨을 정의하는 과정은 모든 UI 구성 요소에서 동일합니다.

1 단계 – 스킨 만들기

옵션을 사용하여 MXML 스킨 만들기 마법사 시작 File > New > MXML Skin.

패키지 입력 com.tutorialspoint.skin, 이름 GradientBackgroundSkin 기존 플렉스 BorderContainer 컨트롤로 호스트 구성 요소를 선택하십시오.spark.component.BorderContainer.

이제 BorderContainer의 스킨을 만들었습니다. mxml 스킨 파일의 내용 수정src/com.tutorialspoint/skin/GradientBackgroundSkin.mxml.

다음과 같이 채우기 레이어 업데이트-

<!-- 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>

2 단계 : 피부 적용

두 가지 방법으로 구성 요소에 스킨을 적용 할 수 있습니다.

MXML 스크립트에 스킨 적용 (정적)

대다 GradientBackgroundSkin ID가있는 BorderContainer에 mainContainer 그것의 사용 skinClass 속성.

<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">

ActionScript에서 스킨 적용 (동적으로)

대다 GradientBackgroundSkin ID가있는 BorderContainer에 mainContainer 그것의 사용 skinClass 특성.

protected function gradientBackground_clickHandler(event:MouseEvent):void {
   mainContainer.setStyle("skinClass", GradientBackgroundSkin);
}

스킨 예제가있는 플렉스 스타일

테스트 응용 프로그램을 만들어 Flex 응용 프로그램에서 스키닝이 작동하는 것을 확인하려면 다음 단계를 따르십시오.

단계 기술
1 Flex-Create Application 장에 설명 된대로 com.tutorialspoint.client 패키지 아래에 HelloWorld라는 이름으로 프로젝트를 만듭니다 .
2 위에서 설명한대로 com.tutorialspoint.skin 패키지 아래에 GradientBackgroundSkin.mxml 스킨을 만듭니다 . 나머지 파일은 변경하지 마십시오.
삼 아래와 같이 HelloWorld.mxml 을 수정 합니다. 나머지 파일은 변경하지 마십시오.
4 애플리케이션을 컴파일하고 실행하여 비즈니스 로직이 요구 사항에 따라 작동하는지 확인합니다.

다음은 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>

다음은 수정 된 HelloWorld.mxml의 내용입니다. 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>

모든 변경이 완료되면 Flex-Create Application 장 에서했던 것처럼 일반 모드에서 응용 프로그램을 컴파일하고 실행하겠습니다 . 응용 프로그램에 문제가 없으면 다음과 같은 결과가 나타납니다. [ 온라인 시도 ]

데이터 바인딩이란?

데이터 바인딩은 한 개체의 데이터가 다른 개체에 연결되는 프로세스입니다. 소스 속성, 대상 속성 및 소스에서 대상으로 데이터를 복사 할시기를 나타내는 트리거링 이벤트가 필요합니다.

Flex는 아래와 같이 데이터 바인딩을 수행하는 세 가지 방법을 제공합니다.

  • MXML 스크립트 ({})의 중괄호 구문
  • MXML의 <fx : binding> 태그
  • ActionScript의 BindingUtils

데이터 바인딩 – MXML에서 중괄호 사용

다음 예제는 중괄호를 사용하여 대상에 대한 소스의 데이터 바인딩을 지정하는 방법을 보여줍니다.

<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" text = "{txtInput1.text}" />

데이터 바인딩 – MXML에서 <fx : Binding> 태그 사용

다음 예제는 사용 방법을 보여줍니다. 소스의 데이터 바인딩을 대상에 지정하는 태그입니다. 

<fx:Binding source = "txtInput1.text" destination = "txtInput2.text" />
<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" />

데이터 바인딩 – ActionScript에서 BindingUtils 사용

다음 예제는 BindingUtils를 사용하여 소스의 데이터 바인딩을 대상에 지정하는 방법을 보여줍니다.

<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)" />

Flex 데이터 바인딩 예

테스트 응용 프로그램을 만들어 Flex 응용 프로그램에서 스키닝이 작동하는 것을 확인하려면 아래 단계를 따르십시오.

단계 기술
1 Flex-Create Application 장에 설명 된대로 com.tutorialspoint.client 패키지 아래에 HelloWorld 라는 이름으로 프로젝트를 만듭니다 .
2 아래와 같이 HelloWorld.mxml 을 수정 합니다. 나머지 파일은 변경하지 마십시오.
삼 애플리케이션을 컴파일하고 실행하여 비즈니스 로직이 요구 사항에 따라 작동하는지 확인합니다.

다음은 수정 된 HelloWorld.mxml 파일의 내용입니다.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
   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 &lt;fx:Binding&gt;)" 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>

모든 변경이 완료되면 Flex-Create Application 장 에서했던 것처럼 일반 모드에서 응용 프로그램을 컴파일하고 실행하겠습니다 . 응용 프로그램에 문제가 없으면 다음과 같은 결과가 나타납니다. [ 온라인 시도 ]

모든 사용자 인터페이스는 다음 세 가지 주요 측면을 고려합니다.

  • UI Elements− 이는 사용자가 결국보고 상호 작용하는 핵심 시각적 요소입니다. Flex는이 튜토리얼에서 다룰 기본에서 복잡한 것에 이르기까지 널리 사용되는 공통 요소의 방대한 목록을 제공합니다.

  • Layouts− UI 요소가 화면에서 구성되는 방식을 정의하고 GUI (그래픽 사용자 인터페이스)에 최종 모양과 느낌을 제공합니다. 이 부분은 레이아웃 장에서 다룰 것입니다.

  • Behavior− 이러한 이벤트는 사용자가 UI 요소와 상호 작용할 때 발생합니다. 이 부분은 이벤트 처리 장에서 다룹니다.

Flex UI 요소

Flex UI 라이브러리는 복잡한 웹 기반 사용자 인터페이스를 만들기 위해 잘 정의 된 클래스 계층 구조의 클래스를 제공합니다. 이 구성 요소 계층 구조의 모든 클래스는EventDispatcher 아래와 같이 기본 클래스-

모든 기본 UI 컨트롤은 EventDispatcher 및 기타 최상위 클래스의 속성을 상속하는 UI 구성 요소 클래스의 속성을 상속합니다.

Sr. 아니요 제어 및 설명
1 Flex EventDispatcher 클래스

EventDispatcher 클래스는 이벤트를 전달할 수있는 모든 클래스의 기본 클래스입니다. EventDispatcher 클래스를 사용하면 표시 목록의 모든 객체가 이벤트 대상이되어 IEventDispatcher 인터페이스의 메서드를 사용할 수 있습니다.
2 Flex UIComponent

UIComponent 클래스는 대화 형 및 비대화 형의 모든 시각적 구성 요소에 대한 기본 클래스입니다.

기본 컨트롤

다음은 몇 가지 중요한 기본 컨트롤입니다 .

Sr. 아니요 컨트롤 및 설명
1 상표

Label은 한 줄 이상의 균일 한 형식의 텍스트를 렌더링 할 수있는 저수준 UIComponent입니다.
2 본문

Text 컨트롤을 사용하면 응용 프로그램에서 일반 텍스트뿐만 아니라 HTML 내용을 표시 할 수 있습니다.
삼 영상

이미지 컨트롤을 사용하면 런타임에 JPEG, PNG, GIF 및 SWF 파일을 가져올 수 있습니다.
4 LinkButton

LinkButton 컨트롤은 사용자가 마우스를 그 위로 이동하면 내용이 강조 표시되는 테두리없는 Button 컨트롤입니다.

양식 컨트롤을 사용하면 사용자가 데이터를 입력 할 수 있으며 응용 프로그램과의 상호 작용 기능을 제공합니다. 모든 Form UI는 EventDispatcher 및 기타 최상위 클래스의 속성을 상속하는 UIComponent 클래스의 속성을 제어하고 상속합니다.

Sr. 아니요 제어 및 설명
1 Flex EventDispatcher 클래스

EventDispatcher 클래스는 이벤트를 전달할 수있는 모든 클래스의 기본 클래스입니다. EventDispatcher 클래스를 사용하면 표시 목록의 모든 객체가 이벤트 대상이되어 IEventDispatcher 인터페이스의 메서드를 사용할 수 있습니다.
2 Flex UIComponent

UIComponent 클래스는 대화 형 및 비대화 형의 모든 시각적 구성 요소에 대한 기본 클래스입니다.

양식 컨트롤

다음은 몇 가지 중요한 양식 컨트롤입니다.

Sr. 아니요 제어 및 설명
1 단추

Button 구성 요소는 일반적으로 사용되는 사각형 버튼입니다.
2 ToggleButton

ToggleButton 구성 요소는 토글 버튼을 정의합니다.
삼 체크 박스

CheckBox 구성 요소는 선택적인 레이블과 확인 표시를 포함하거나 포함하지 않을 수있는 작은 상자로 구성됩니다.
4 색상 선택기

ColorPicker 컨트롤은 사용자가 견본 목록에서 색상을 선택할 수있는 방법을 제공합니다.
5 콤보 박스

ComboBox 컨트롤은 DropDownListBase 컨트롤의 자식 클래스입니다.
6 DateChooser

DateChooser 컨트롤은 요일 레이블이 지정된 열과 함께 월 이름, 연도 및 요일 그리드를 표시합니다.
7 라디오 버튼

RadioButton 구성 요소를 사용하면 상호 배타적 인 선택 항목 중에서 단일 항목을 선택할 수 있습니다.
8 TextArea

TextArea는 사용자가 서식이 지정된 여러 줄의 텍스트를 입력하고 편집 할 수있는 텍스트 입력 컨트롤입니다.
9 TextInput

TextInput은 사용자가 균일 한 형식의 텍스트 한 줄을 입력하고 편집 할 수있는 텍스트 입력 컨트롤입니다.
10 드롭 다운 목록

DropDownList 컨트롤에는 사용자가 단일 값을 선택할 수있는 드롭 다운 목록이 포함되어 있습니다.
11 NumericStepper

NumericStepper 컨트롤을 사용하면 정렬 된 집합에서 번호를 선택할 수 있습니다.

복잡한 제어 기능은 사용자에게 많은 양의 데이터를보다 쉽게 ​​처리 할 수있는 고급 기능을 제공하고 애플리케이션과의 상호 작용 기능을 제공합니다. 모든 Complex UI 컨트롤은 EventDispatcher 및 기타 최상위 클래스의 속성을 상속하는 UIComponent 클래스의 속성을 상속합니다.

Sr. 아니요 제어 및 설명
1 Flex EventDispatcher 클래스

EventDispatcher 클래스는 이벤트를 전달할 수있는 모든 클래스의 기본 클래스입니다. EventDispatcher 클래스를 사용하면 표시 목록의 모든 객체가 이벤트 대상이되어 IEventDispatcher 인터페이스의 메서드를 사용할 수 있습니다.
2 Flex UIComponent

UIComponent 클래스는 대화 형 및 비대화 형의 모든 시각적 구성 요소에 대한 기본 클래스입니다.

복잡한 컨트롤

다음은 몇 가지 중요한 복잡한 컨트롤입니다.

Sr. 아니요 제어 및 설명
1 DataGrid

DataGrid 컨트롤은 스크롤 가능한 그리드 위에 열 머리글 행을 표시합니다.
2 AdvancedDataGrid

AdvancedDataGrid는 데이터 시각화 기능을 추가하기 위해 표준 DataGrid 컨트롤에 몇 가지 추가 기능을 추가합니다.
삼 메뉴

메뉴 컨트롤은 개별적으로 선택할 수있는 팝업 메뉴를 만듭니다.
4 진행 표시 줄

ProgressBar 컨트롤은 시간 경과에 따른 작업 진행 상황을 시각적으로 표현합니다.
5 RichTextEditor

RichTextEditor 컨트롤을 사용하면 사용자가 텍스트를 입력하고 서식을 지정할 수 있습니다.
6 TileList

TileList 컨트롤 TileList 컨트롤은 타일에 배치 된 여러 항목을 표시합니다.
7 나무

Tree 컨트롤을 사용하면 확장 가능한 트리로 정렬 된 계층 적 데이터를 볼 수 있습니다.
8 비디오 플레이어

VideoPlayer 컨트롤은 점진적 다운로드, 다중 비트 전송률 스트리밍 및 비디오 스트리밍을 지원하는 스킨 가능 비디오 플레이어입니다.
9 Accordian

Accordian 컨트롤에는 자식 MX 컨테이너 또는 Spark NavigatorContent 컨테이너 모음이 있지만 한 번에 하나만 표시됩니다.
10 TabNavigator

TabNavigator 컨트롤에는 자식 컨테이너 사이를 탐색하기위한 TabBar 컨테이너가 포함되어 있습니다.
11 ToggleButtonBar

ToggleButtonBar 컨트롤은 선택 또는 선택 취소 된 상태를 유지하는 버튼의 수평 또는 수직 그룹을 정의합니다.

레이아웃 패널 컨트롤은 사용자가 페이지에서 UI 컨트롤을 구성 할 수 있도록합니다. 모든 Layout 컨트롤은 EventDispatcher 및 기타 최상위 클래스의 속성을 상속하는 UIComponent 클래스의 속성을 상속합니다.

Sr. 아니요 제어 및 설명
1 Flex EventDispatcher 클래스

EventDispatcher 클래스는 이벤트를 전달할 수있는 모든 클래스의 기본 클래스입니다. EventDispatcher 클래스를 사용하면 표시 목록의 모든 객체가 이벤트 대상이되어 IEventDispatcher 인터페이스의 메서드를 사용할 수 있습니다.
2 Flex UIComponent

UIComponent 클래스는 대화 형 및 비대화 형의 모든 시각적 구성 요소에 대한 기본 클래스입니다.

레이아웃 패널

다음은 몇 가지 중요한 레이아웃 패널입니다.

Sr. 아니요 패널 및 설명
1 BorderContainer

BorderContainer 클래스는 컨테이너의 테두리 및 배경 채우기 모양을 제어하는 ​​CSS 스타일 세트를 제공합니다.
2 형태

양식 컨테이너는 양식의 레이아웃을 제어하고, 양식 필드를 필수 또는 선택으로 표시하고, 오류 메시지를 처리하고, 양식 데이터를 Flex 데이터 모델에 바인딩하여 데이터 확인 및 유효성 검사를 수행합니다.
삼 VGroup

VGroup 컨테이너는 VerticalLayout 클래스를 사용하는 그룹 컨테이너입니다.
4 H 그룹

HGroup 컨테이너는 HorizontalLayout 클래스를 사용하는 그룹 컨테이너입니다.
5 패널

Panel 클래스는 제목 표시 줄, 캡션, 테두리 및 자식 콘텐츠 영역을 포함하는 컨테이너입니다.
6 SkinnableContainer

SkinnableContainer 클래스는 시각적 콘텐츠를 제공하는 스킨 가능 컨테이너의 기본 클래스입니다.
7 TabBar

TabBar는 동일한 탭 세트를 표시합니다.
8 TitleWindow

TitleWindow는 패널을 확장하여 닫기 버튼과 이동 영역을 포함합니다.

Effects 개념을 사용하여 플렉스 애플리케이션에 동작을 추가 할 수 있습니다. 예를 들어 텍스트 상자에 포커스가있을 때 텍스트를 더 굵게 만들고 크기를 약간 더 크게 만들 수 있습니다.

모든 효과는 Effect 클래스의 속성을 상속하고 EventDispatcher 및 기타 최상위 클래스의 속성을 상속합니다.

Sr. 아니요 효과 및 설명
1 플렉스 효과 클래스

Effect 클래스는 모든 Flex 효과의 기본 기능을 정의하는 추상 기본 클래스입니다. 이 클래스는 모든 효과에 대한 기본 팩토리 클래스를 정의합니다.

기본 효과

다음은 몇 가지 중요한 기본 시각 효과입니다.

Sr. 아니요 효과 및 설명
1 바래다

페이드 효과는 구성 요소의 알파 속성에 애니메이션을 적용합니다.
2 WipeLeft

WipeLeft 클래스는 왼쪽 지우기 효과를 정의합니다.
삼 WipeRight

WipeRight 클래스는 오른쪽 지우기 효과를 정의합니다.
4 Move3D

Move3D 클래스는 x, y 및 z 차원에서 대상 개체를 이동합니다.
5 Scale3D

Scale3D 클래스는 변환 중심을 중심으로 3 차원으로 대상 개체의 크기를 조정합니다.
6 Rotate3D

Rotate3D 클래스는 x, y 또는 z 축을 중심으로 3 차원으로 대상 개체를 회전합니다.
7 생명 있는

이 Animate 효과는 값 사이의 임의의 속성 세트에 애니메이션을 적용합니다. motionPaths 속성을 설정하여 애니메이션 할 속성과 값을 지정합니다.

Flex는 이벤트 개념을 사용하여 애플리케이션 내의 상태 또는 사용자 상호 작용에 따라 한 개체에서 다른 개체로 데이터를 전달합니다.

ActionScript에는 일반적인 Event이벤트 작업에 필요한 많은 기능을 정의하는 클래스입니다. Flex 애플리케이션 내에서 이벤트가 발생할 때마다 Event 클래스 계층 구조에서 세 가지 유형의 객체가 생성됩니다.

이벤트에는 다음 세 가지 주요 속성이 있습니다.

Sr. 아니요 속성 및 설명
1

Type

그만큼 type어떤 종류의 사건이 방금 일어 났는지 설명합니다. 클릭, 초기화, 마우스 오버, 변경 등이 될 수 있습니다. 실제 값은 MouseEvent.CLICK과 같은 상수로 표시됩니다.
2

Target

그만큼 target Event의 속성은 이벤트를 생성 한 컴포넌트에 대한 객체 참조이며, id가 clickMeButton 인 Button을 클릭하면 해당 클릭 이벤트의 대상이 clickMeButton이됩니다.
삼

CurrentTarget

그만큼 currentTarget속성은 컨테이너 계층 구조를 변경합니다. 주로 이벤트의 흐름을 다룹니다.

이벤트 흐름 단계

이벤트는 이벤트 처리기를 찾는 세 단계를 거칩니다.

Sr. 아니요 단계 및 설명
1

Capture

캡처 단계에서 프로그램은 외부 (또는 상위) 상위에서 가장 안쪽에있는 이벤트 핸들러를 찾기 시작합니다. 캡처 단계는 이벤트를 트리거 한 개체의 부모에서 중지됩니다.
2

Target

대상 단계에서는 이벤트를 트리거 한 구성 요소에서 이벤트 처리기를 확인합니다.
삼

Bubble

버블 단계는 캡처 단계의 역으로, 대상 구성 요소의 상위부터 구조를 통해 다시 작동합니다.

다음 응용 프로그램 코드를 고려하십시오-

<?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>

사용자가 버튼을 클릭하면 패널과 애플리케이션도 클릭 한 것입니다.

이벤트는 이벤트 처리자 할당을 찾기 위해 세 단계를 거칩니다.

Flex 애플리케이션에서 이벤트 처리를 테스트하려면 아래 단계를 따르십시오.

단계 기술
1 Flex-Create Application 장에 설명 된대로 com.tutorialspoint.client 패키지 아래에 HelloWorld 라는 이름으로 프로젝트를 만듭니다 .
2 아래와 같이 HelloWorld.mxml 을 수정 합니다. 나머지 파일은 변경하지 마십시오.
삼 애플리케이션을 컴파일하고 실행하여 비즈니스 로직이 요구 사항에 따라 작동하는지 확인합니다.

다음은 수정 된 mxml 파일의 내용입니다. 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>

모든 변경이 완료되면 Flex-Create Application 장 에서했던 것처럼 일반 모드에서 응용 프로그램을 컴파일하고 실행하겠습니다 . 응용 프로그램에 문제가 없으면 다음과 같은 결과가 나타납니다. [ 온라인 시도 ]

Flex는 사용자 정의 구성 요소를 만드는 두 가지 방법을 제공합니다.

  • ActionScript 사용
  • MXML 사용

ActionScript 사용

기존 구성 요소를 확장하여 구성 요소를 만들 수 있습니다. Flash Builder를 사용하여 구성 요소를 만들려면File > New > ActionScript Class.

아래와 같이 세부 정보를 입력하십시오-

Flash Builder는 다음 CustomButton.as 파일을 생성합니다.

package com.tutorialspoint.client {
   import spark.components.Button;

   public class CustomButton extends Button {
      public function CustomButton() {
         super();
      }
   }
}

MXML 사용

기존 구성 요소를 확장하여 구성 요소를 만들 수 있습니다. Flash Builder를 사용하여 구성 요소를 만들려면File > New > MXML Component.

아래와 같이 세부 정보를 입력하십시오.

Flash Builder는 다음 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:Group>

Flex 애플리케이션에서 사용자 정의 컨트롤을 테스트하려면 다음 단계를 따르십시오.

단계 기술
1 Flex-Create Application 장에 설명 된대로 com.tutorialspoint.client 패키지 아래에 HelloWorld 라는 이름으로 프로젝트를 만듭니다 .
2 아래와 같이 HelloWorld.mxml 을 수정 합니다. 나머지 파일은 변경하지 마십시오.
삼 위에서 설명한대로 CustomLogin.mxml 및 CustomButton.as 구성 요소를 만듭니다 . 아래 설명 된대로 이러한 파일을 수정하십시오. 나머지 파일은 변경하지 마십시오.
4 애플리케이션을 컴파일하고 실행하여 비즈니스 로직이 요구 사항에 따라 작동하는지 확인합니다.

다음은 수정 된 mxml 파일의 내용입니다. 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>

다음은 수정 된 mxml 파일의 내용입니다. 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";
      }
   }
}

다음은 수정 된 mxml 파일의 내용입니다. 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>

모든 변경이 완료되면 Flex-Create Application 장 에서했던 것처럼 일반 모드에서 응용 프로그램을 컴파일하고 실행하겠습니다 . 응용 프로그램에 문제가 없으면 다음과 같은 결과가 나타납니다. [ 온라인 시도 ]

Flex는 클라이언트 측에 서버 측 데이터를 제공하는 RPC 서비스를 제공합니다. Flex는 서버 측 데이터에 대해 상당한 양의 제어를 제공합니다.

  • Flex RPC 서비스를 사용하여 서버 측에서 실행할 사용자 작업을 정의 할 수 있습니다.

  • Flex RPC Sservice는 모든 서버 측 기술과 통합 될 수 있습니다.

  • Flex RPC 서비스 중 하나는 압축 된 바이너리 데이터를 유선을 통해 전송할 수 있도록 내장 된 지원을 제공하며 매우 빠릅니다.

Flex는 다음 세 가지 유형의 RPC 서비스를 제공합니다.

Sr. 아니요 RPC 서비스 및 설명
1

HttpService

<mx : HTTPService> 태그는 MXML 파일에서 HTTPService 객체를 나타내는 데 사용됩니다. HTTPService 객체의 send () 메서드를 호출하면 지정된 URL로 HTTP 요청을하고 HTTP 응답이 반환되며 HTTP HEAD, OPTIONS, TRACE, DELETE 메서드를 사용할 수도 있습니다.
2

WebService

<mx : WebService>는 SOAP 호환 웹 서비스의 작업에 액세스하는 데 사용됩니다.
삼

RemoteObject

<mx : RemoteObject> 태그는 MXML 파일에서 HTTPService 개체를 나타내는 데 사용됩니다. 이 태그를 사용하면 AMF (Action Message Format) 인코딩을 사용하여 Java 개체의 메서드에 액세스 할 수 있습니다.

HTTP 서비스에 대해 자세히 설명하겠습니다. 서버에 배치 된 XML 소스 파일을 사용하고 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>

HTTPService 선언

이제 HTTPService를 선언하고 위 파일의 URL을 전달합니다.

<fx:Declarations>
   <mx:HTTPService id = "itemRequest" 
   url = "http://www.tutorialspoint.com/flex/Items.xml" />
</fx:Declarations>

RPC 호출

itemRequest.send () 메서드를 호출하고 itemRequest 웹 서비스의 lastResult 객체에서 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>

RPC 서비스 호출 예

이제 Flex 애플리케이션에서 RPC 서비스를 테스트하는 단계를 따르십시오.

단계 기술
1 Flex-Create Application 장에 설명 된대로 com.tutorialspoint.client 패키지 아래에 HelloWorld 라는 이름으로 프로젝트를 만듭니다 .
2 아래와 같이 HelloWorld.mxml 을 수정 합니다. 나머지 파일은 변경하지 마십시오.
삼 애플리케이션을 컴파일하고 실행하여 비즈니스 로직이 요구 사항에 따라 작동하는지 확인합니다.

다음은 수정 된 mxml 파일의 내용입니다. 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>

모든 변경이 완료되면 Flex-Create Application 장 에서했던 것처럼 일반 모드에서 응용 프로그램을 컴파일하고 실행하겠습니다 . 응용 프로그램에 문제가 없으면 다음과 같은 결과가 나타납니다. [ 온라인 시도 ]

Flash Builder 4는 Flex 개발주기에서 FlexUnit 통합을위한 뛰어난 내장 지원을 제공합니다.

테스트 케이스 클래스 만들기

Flash Builder 테스트 클래스 만들기 마법사를 사용하여 테스트 케이스 클래스를 만들 수 있습니다. 이 기사에서 볼 수 있듯이 Flash Builder를 사용하면 테스트 케이스를 쉽게 실행할 수 있습니다.

Flash Builder를 사용하여 테스트 케이스 클래스를 생성하려면 File > New > Test Case Class. 아래와 같이 세부 정보를 입력하십시오.

Flash Builder는 다음 TestClass1.을 파일로 만듭니다.

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 {}	
   }
}

FlexUnit 통합 예

이제 Flex 애플리케이션에서 FlexUnit 통합을 테스트하는 단계를 따르십시오.

단계 기술
1 Flex-Create Application 장에 설명 된대로 com.tutorialspoint.client 패키지 아래에 HelloWorld 라는 이름으로 프로젝트를 만듭니다 .
2 아래와 같이 HelloWorld.mxml 을 수정 합니다. 나머지 파일은 변경하지 마십시오.
삼 만들기 TestClass1.as의 전술과 수정으로 테스트 케이스를 TestClass1.as 아래에 설명한다.
4 애플리케이션을 컴파일하고 실행하여 비즈니스 로직이 요구 사항에 따라 작동하는지 확인합니다.

다음은 파일로 수정 된 내용입니다. 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);
      }
   }
}

다음은 수정 된 mxml 파일의 내용입니다. 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>

모든 변경이 완료되면 Flex-Create Application 장 에서했던 것처럼 일반 모드에서 컴파일하겠습니다 .

테스트 케이스 실행

이제 패키지 탐색기에서 TestClass1을 마우스 오른쪽 버튼으로 클릭하고 Run As > FlexUnit Tests. Flash Builder 테스트 창에 다음 출력이 표시됩니다.

Flash Builder는 브라우저에 테스트 결과도 표시합니다.

Flex는 Flex 코드 디버깅의 뛰어난 기능을 제공하며 Flash Builder 4에는 뛰어난 내장 디버거 및 디버깅 관점 지원이 있습니다.

  • 디버그 모드 동안 Flex Application은 디버깅 기능을 지원하는 Flash Builder 4에 내장 된 Flash Player Debugger 버전에서 실행됩니다.

  • 따라서 개발자는 Flash Builder에서 쉽고 내장 된 디버깅 구성을 얻을 수 있습니다.

이 기사에서는 Flash Builder를 사용하여 Flex Client 코드를 디버깅하는 방법을 설명합니다. 다음 작업을 수행합니다.

  • 코드에 중단 점을 설정하고 중단 점 탐색기에서 확인하십시오.
  • 디버깅하는 동안 코드를 한 줄씩 살펴보십시오.
  • 변수 값을 봅니다.
  • 모든 변수의 값을 검사하십시오.
  • 표현식의 값을 검사하십시오.
  • 일시 중단 된 스레드에 대한 스택 프레임을 표시합니다.

디버깅 예

단계 기술
1 Flex-Create Application 장에 설명 된대로 com.tutorialspoint.client 패키지 아래에 HelloWorld 라는 이름으로 프로젝트를 만듭니다 .
2 아래와 같이 HelloWorld.mxml 을 수정 합니다. 나머지 파일은 변경하지 마십시오.
삼 애플리케이션을 컴파일하고 실행하여 비즈니스 로직이 요구 사항에 따라 작동하는지 확인합니다.

다음은 수정 된 mxml 파일의 내용입니다. 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>

모든 변경이 완료되면 Flex-Create Application 장 에서했던 것처럼 일반 모드에서 컴파일하겠습니다 .

1 단계-중단 점 배치

HelloWorld.mxml의 응용 프로그램 초기화 처리기의 첫 번째 줄에 중단 점을 놓습니다.

2 단계-애플리케이션 디버그

이제

디버그 애플리케이션 메뉴를 클릭 하고HelloWorld 응용 프로그램을 디버깅합니다.

모든 것이 정상이면 응용 프로그램이 브라우저에서 시작되고 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 decompression

Application이 시작 되 자마자 application_initialize Handler 메서드의 첫 번째 줄에 중단 점을 배치 했으므로 Flash Builder 중단 점에 초점이 맞춰진 것을 볼 수 있습니다.

일시 중단 된 스레드에 대한 스택 추적을 볼 수 있습니다.

표현식의 값을 볼 수 있습니다.

배치 된 중단 점 목록을 볼 수 있습니다.

이제 application_initializeHandler () 메서드의 마지막 줄에 도달 할 때까지 F6 키를 계속 누릅니다. 기능 키에 대한 참조로 F6은 코드를 한 줄씩 검사하고 F5는 더 안쪽으로 들어가고 F8은 응용 프로그램을 다시 시작합니다. 이제 application_initializeHandler () 메서드의 모든 변수 값 목록을 볼 수 있습니다.

이제 Java 애플리케이션을 디버깅 할 수있는 것과 동일한 방식으로 플렉스 코드를 디버깅 할 수 있음을 알 수 있습니다. 임의의 줄에 중단 점을 배치하고 flex의 디버깅 기능을 사용하십시오.

Flex는 Flex 애플리케이션을 국제화하는 두 가지 방법을 제공합니다. 프로젝트에서 가장 일반적으로 사용되는 컴파일 시간 국제화의 사용을 보여 드리겠습니다.

Sr. 아니요 기술 및 설명
1

Compile Time Internationalization

이 기술은 가장 널리 사용되며 런타임시 오버 헤드가 거의 필요하지 않습니다. 상수 및 매개 변수화 된 문자열을 모두 번역하는 매우 효율적인 기술이며 구현이 가장 간단합니다. 컴파일 시간 국제화는 표준 속성 파일을 사용하여 번역 된 문자열과 매개 변수화 된 메시지를 저장하며 이러한 속성 파일은 응용 프로그램에서 직접 컴파일됩니다.
2

Run Time Internationalization

이 기술은 매우 유연하지만 정적 문자열 국제화보다 느립니다. 현지화 특성 파일을 별도로 컴파일하고 애플리케이션 외부에두고 런타임에로드해야합니다.

Flex 애플리케이션 국제화 워크 플로우

1 단계 – 폴더 구조 만들기

Flex 프로젝트의 src 폴더 아래에 locale 폴더를 만듭니다.이 폴더는 응용 프로그램이 지원할 로케일에 대한 모든 속성 파일의 상위 디렉토리가됩니다. locale 폴더 내에 지원할 각 응용 프로그램의 로케일에 대해 하나씩 하위 폴더를 만듭니다. 로케일 이름 지정 규칙은 다음과 같습니다.

{language}_{country code}

예를 들어, en_US는 미국 영어를 나타냅니다. 로케일 de_DE는 독일어를 나타냅니다. 샘플 애플리케이션은 영어와 독일어의 두 가지 공통 언어를 지원합니다.

2 단계 – 속성 파일 만들기

응용 프로그램에서 사용할 메시지가 포함 된 속성 파일을 만듭니다. 우리는HelloWorldMessages.properties 아래 파일 src > locale > en_US 이 예에서는 폴더입니다.

enterName = Enter your name
clickMe = Click Me
applicationTitle = Application Internationalization Demonstration
greeting = Hello {0}

로케일 고유의 번역 된 값을 포함하는 특성 파일을 작성하십시오. 우리는HelloWorldMessages.properties 아래 파일 src > locale > de_DE이 예에서는 폴더입니다. 이 파일에는 독일어 번역이 포함되어 있습니다. _de는 독일어 로케일을 지정하고 응용 프로그램에서 독일어를 지원할 것입니다.

Flash Builder를 사용하여 속성 파일을 만드는 경우 파일의 인코딩을 UTF-8로 변경합니다. 파일을 선택한 다음 마우스 오른쪽 버튼을 클릭하여 속성 창을 엽니 다. 텍스트 파일 인코딩을 다음과 같이 선택합니다. Other UTF-8. 변경 사항을 적용하고 저장합니다.

enterName = Geben Sie Ihren Namen
clickMe = Klick mich
applicationTitle = Anwendung Internationalisierung Demonstration
greeting = Hallo {0}

3 단계 – 컴파일러 옵션 지정

  • 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 속성을 선택합니다.

  • Flex Compiler를 선택하고 Additional Compiler Arguments 설정에 다음을 추가합니다.

-locale en_US de_DE

  • 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 속성을 선택합니다.

  • Flex Build Path를 선택하고 Source Path 설정에 다음을 추가합니다.

src\locale\{locale}

내재화 사례

이제 Flex 애플리케이션에서 내재화 기술을 테스트하기 위해 다음 단계를 따르십시오.

단계 기술
1 Flex-Create Application 장에 설명 된대로 com.tutorialspoint.client 패키지 아래에 HelloWorld 라는 이름으로 프로젝트를 만듭니다 .
2 아래와 같이 HelloWorld.mxml 을 수정 합니다. 나머지 파일은 변경하지 마십시오.
삼 애플리케이션을 컴파일하고 실행하여 비즈니스 로직이 요구 사항에 따라 작동하는지 확인합니다.

다음은 수정 된 mxml 파일의 내용입니다. 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>

모든 변경이 완료되면 Flex-Create Application 장 에서했던 것처럼 일반 모드에서 응용 프로그램을 컴파일하고 실행하겠습니다 . 응용 프로그램에 문제가 없으면 다음과 같은 결과가 나타납니다. [ 온라인 시도 ]

언어 드롭 다운을 사용하여 언어를 변경하고 결과를 확인합니다.

Flex는 특별한 클래스를 제공합니다 FlexPrintJob 플렉스 객체를 인쇄합니다.

  • FlexPrintJob은 Form 또는 VBox 컨테이너와 같은 하나 이상의 Flex 객체를 인쇄하는 데 사용할 수 있습니다.

  • FlexPrintJob은 개체와 여기에 포함 된 모든 개체를 인쇄합니다.

  • 개체는 표시된 인터페이스의 전체 또는 일부일 수 있습니다.

  • 개체는 인쇄를 위해 특별히 데이터 형식을 지정하는 구성 요소 일 수 있습니다.

  • FlexPrintJob 클래스를 사용하면 페이지에 맞게 출력 크기를 조정할 수 있습니다.

  • FlexPrintJob 클래스는 자동으로 여러 페이지를 사용하여 단일 페이지에 맞지 않는 객체를 인쇄합니다.

  • FlexPrintJob 클래스는 운영 체제가 인쇄 대화 상자를 표시하도록합니다. 사용자 작업 없이는 인쇄 할 수 없습니다.

인쇄 작업 준비 및 보내기

인쇄 작업을 준비하고 전송하여 출력을 인쇄합니다. FlexPrintJob 클래스의 인스턴스를 만들어 보겠습니다.

var printJob:FlexPrintJob = new FlexPrintJob();

인쇄 작업 시작

printJob.start();

Flex는 운영 체제가 인쇄 대화 상자를 표시하도록합니다. 인쇄 작업에 하나 이상의 개체를 추가하고 크기 조정 방법을 지정합니다.

printJob.addObject(myObject, FlexPrintJobScaleType.MATCH_WIDTH);

각 개체는 새 페이지에서 시작됩니다. 인쇄 작업을 프린터로 보내기

printJob.send();

인쇄 예

단계 기술
1 Flex-Create Application 장에 설명 된대로 com.tutorialspoint.client 패키지 아래에 HelloWorld 라는 이름으로 프로젝트를 만듭니다 .
2 아래와 같이 HelloWorld.mxml 을 수정 합니다. 나머지 파일은 변경하지 마십시오.
삼 애플리케이션을 컴파일하고 실행하여 비즈니스 로직이 요구 사항에 따라 작동하는지 확인합니다.

다음은 수정 된 mxml 파일의 내용입니다. 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>

모든 변경이 완료되면 Flex-Create Application 장 에서했던 것처럼 일반 모드에서 응용 프로그램을 컴파일하고 실행하겠습니다 . 응용 프로그램에 문제가 없으면 다음과 같은 결과가 나타납니다. [ 온라인 시도 ]

인쇄하기 버튼을 클릭하면 아래와 같은 데이터 그리드의 출력물을 볼 수 있습니다.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved