Flex-애플리케이션

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의 핵심 기능이 포함 된 플렉스 프레임 워크 라이브러리입니다.

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를 사용하는 응용 프로그램.