events와 behaviors 사용하기    Using events and behaviors

이벤트가 발생하였을 때 콤포넌트 설정 수정하기
아래 코드는 버튼을 클릭하면 myPanel을 보이지 않게 작용합니다. 
<mx:Panel id="myPanel" layout="absolute" width="80%" height="80%" x="122" y="24">

<mx:Button label="Close" right="30" bottom="40" click="myPanel.visible=false"/>

ActionScript 함수 사용하기
버튼이나 패널등에서 발생하는 이벤트를 <mx:Script>를 에서 ActionScript 로 처리 되는걸 보여줍니다

MXML에서 ActionScript 분리하기
아래 코드 처럼 as 파일로 분리 가능합니다.
<mx:Script source="myFunctions.as" />

행동과 변화에 따른 비주얼 상호작용 추가하기
<mx:Fade id="myFade"/>
<mx:Panel id="myPanel" layout="absolute" width="80%" height="80%" hideEffect="{myFade}" >
위의 코드는 Fade(흐릿해지는 효과) 를 Panel에 추가 한이군요.
visible 이벤트가 발생할 때 Panel이 흐릿해지면서 사라집니다.
 

'Flex' 카테고리의 다른 글

Flex2 php 멀티파일 업로드 예제  (0) 2007.06.23
Flex 어플리케이션 보여주기  (0) 2007.05.20
Flesh Player 보안 처리  (0) 2007.05.20
Flex 어플리케이션 보여주기     Laying out a Flex application
Flex에서는 Style 및 테마를 지정 할수 있습니다.

스타일과 테마를 이용한 비주얼 디자인
아래와 같이 지정하면 Hello 가 36px의 강조로 나타납니다.
<mx:Application ..... >
   <mx:Style>
    TextArea {
        font-size: 36px;
      font-weight: bold;
    } 
  </mx:Style>

  <mx:TextArea text="Hello" ..../>

css 파일로도 만들수 있습니다. 
<mx:Style source="styles.css" />


'Flex' 카테고리의 다른 글

Flex events와 behaviors 사용하기  (0) 2007.05.20
Flesh Player 보안 처리  (0) 2007.05.20
Flex 데이타 연결  (0) 2007.05.18
Flesh Player 보안 처리 하는 방법

플래시 플레이어는 http://a.com 에서 다운한 swf 파일이라면 http://b.com 의 데이타를 원칙적으로 로드할수 없다고 하네요. 그것을 가능하게 해주는 것이 cross-domain 청책 파일이라고 합니다.

cross-domain 정책 파일들 사용하기
cross-domain 정책 파일은 간단한 XML 파일로 이루어져 있습니다.
이름은 crossdomain.xml 이며 서버의 root 에 위치 하면 됩니다. 
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
   <allow-access-from domain="www.yourdomain.com" />
</cross-domain-policy>
더 많은 정보는 http://www.adobe.com/go/tn_14213

remote date 접속 위해 proxy 셋팅하기 
cross-domain이외의 다른 방법으로 proxy 셋팅 사용하여 실제 데이타 접속위치를 숨길수 있습니다. 
<?php     //프록시 예제 proxy.php
$dataURL = "http://www.macromedia.com/desdev/resources/macromedia_resources.xml";
//note that this will not follow redirects
readfile($dataURL);  
?>

proxy를 사용하여 remote date 접속 개발을 위해 Flex 빌더 셋팅하기
project builder 및 launch configuration의 셋팅을 바꾼다.
1. 네비게이터의 project output 폴더의 path를 바꾼 뒤
2. launch configuration 의 아래 박스에 path 셋팅
    Run input box 에는 ex)http://localhost/myApp/myApp.html
    Debug input box 에는 ex)http://localhost/myApp/myApp-debug.html
                                      or http://localhost/myApp/myApp-debug.swf



'Flex' 카테고리의 다른 글

Flex 어플리케이션 보여주기  (0) 2007.05.20
Flex 데이타 연결  (0) 2007.05.18
Flex 어플리케이션 제작과 실행  (0) 2007.05.18
Flex 데이타 연결 방법은 아래와 같이 설명 되어 있습니다.

1. XML 데이타를 만들고
2. <mx:HTTPService 로 연결하고
3. 데이타 컨트롤로 데이타를 묶기
4. 런타임 실행시 로딩하기


데이타 만들기 Generating the data
Flex 는 HTTPService 컴포넌트를 활용하여 XML 데이타로 서버와 통신을 합니다.
기본적으로 로컬이나 서버에 XML 파일이 있으면 되는것 같습니다.
도움말의 http://www.adobe.com/go/flex2_and_php는 Flex2와 PHP를 통합하는 방법을 설명해 놓았군요.

데이타 소스와 연결
HTTPService 컴포넌트 사용방법
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:HTTPService 
    id="productsRequest" 
    url="http://www.somesite.com/products.php" /> 
    ...

데이타 컨트롤로 데이타 보여주기 
<mx:DataGrid x="20" y="80" id="productGrid" width="400" 
			dataProvider="{productRequest.lastResult.products.items}" > 
    <mx:columns>
        <mx:DataGridColumn headerText="Name" dataField="name" />
        <mx:DataGridColumn headerText="Price" dataField="price" /> 
    </mx:columns>
</mx:DataGrid>
데이타 소스의 id인 productsRequest가 dataProvider에서 사용됩니다.

런타임 실행시 로딩하기
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
					creationComplete="productsRequest.send()" >
버튼에서 로딩하려면 아래처럼
<mx:Button x="50" y="8" label="Get Data" click="productsRequest.send();" />

아주 기본적인 데이타 연결 방법에 대해서 설명되어 있습니다.
Flex 작업하는 방법 How Flex Works  부분을 끝내고 자세히 공부해야겠습니다.


'Flex' 카테고리의 다른 글

Flex 어플리케이션 보여주기  (0) 2007.05.20
Flesh Player 보안 처리  (0) 2007.05.20
Flex 어플리케이션 제작과 실행  (0) 2007.05.18
오늘은 Flex 데모 버젼 설치 후 도움말에서 가장 처음 볼수 있는 어플리케이션 제작과 실행 부분을 봤습니다.
제가 필요로 하는 부분은 컴포넌트 제작이지만 기초부터 튼튼히 해 나갈 생각으로 정리를 좀 하려구요.
얼마나 발전해 나가는지 지켜 봐주시면 감사하겠습니다. ^^ (누가 봐줄지.. ㅋ)

Flex 어플리케이션 제작 프로세스

1. 미리 정해진 컴포넌트를 가지고 어플리케이션을 선언
2. 컴포넌트의 위치를 디자인
3. 스타일과 테마를 활용하여 비주얼을 꾸밈
4. dymanic behavior(동적 행동) 를 추가
5. 데이타 서비스를 필요로하면 선언하고 연결
6. Flash Player에서 실행되도록 SWF 파일로 빌드

Flex 어플리케이션의 구성요소

 Flex framework    버튼, 박스등의 콤포넌트를 포함하고 있는 저장소
 MXML                전체적인 모양을 디자인도 하고 내부에 액션스크립트도 넣음.
 ActionScript3.0    플렉스의 행동을 정해주는 코드
 CSS                   스타일 시트
 Graphic assets    그래픽 재료들
 Data                   데이타

Flex 어플리케이션 컴파일과 배치도
사용자 삽입 이미지
그림을 뚫어져라 쳐다보니 디자인 -> 클래스 연동 컴파일 -> 실행 으로 이루어져 있군요.
플래시의 디자인 위주의 개발과는 다른 코드위주의 개발 환경입니다.
Action Script와 MXML, CSS를 활용하고, 플래시에서와 같이 jpg, swf, gif를 포함 할수 있다고 되어 있습니다.

액션 스크립트는 자바와 아주 유사한 형태로 되어 있어 자바를 아시는 분은 좀더 접근하기 쉬울것 같습니다.

모든것의 시작은 MXML로
MXML로 아래와 같이 코딩을 하면 Panel위에 TextArea와 Button이 올라간 어플리케이션이 만들어 집니다. 
<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 
  <mx:Panel>
    <mx:TextArea text="Say hello to Flex!" />
    <mx:Button label="Close" />
  </mx:Panel> 
</mx:Application>
사용자 삽입 이미지

이번은 기본적인 제작 방법과 구성에 대해서 공부해 보았습니다.
다음에는 데이타 연결 개요에 대해 공부해 볼것입니다.
(나름 정리가 되는것 같긴한데 글쓰는게 쉬운게 아니군요 ^^;)

'Flex' 카테고리의 다른 글

Flex 어플리케이션 보여주기  (0) 2007.05.20
Flesh Player 보안 처리  (0) 2007.05.20
Flex 데이타 연결  (0) 2007.05.18

+ Recent posts

티스토리툴바