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