Posted by EHXM. Posted in " Adobe Flash Platform/Tech Note "2010/02/03 13:20

Flex 4 Spark에는 Canvas, Box, HBox, VBox, TileList 등의 Container들이 Group Container 하나로 통일되었습니다.

이전에는 여러 Container가 비슷한 기능을 가지고 item을 표현하는 방식만 달랐는데요,

같은 기능은 Group Container로 통일하고 Scroller와 Layout을 따로 설정하도록 해 놓았습니다.

그래서 Group Container 하나로 Layout을 다르게 적용하면 이전의 Canvas, Box, Hbox등과 같은 Container의 구현이 가능하죠.






여기에서는 Group Container의 스크롤 기능을 제어하는 방법을 알아보겠습니다.


위에서 설명한 대로 아래와 같이 아무 설정없이 Group 크기보다 더 큰 Element를 추가하면

아래 예제1과 같이 Group크기는 자식 element에 맞춰 자동으로 커지게 됩니다.


예제1 소스

01.<!--
02.<?xml version="1.0" encoding="utf-8"?>
03.<s:Application minHeight="768" minWidth="1024" 
04.               xmlns:mx="library://ns.adobe.com/flex/halo" 
05.               xmlns:s="library://ns.adobe.com/flex/spark" 
06.               xmlns:fx="http://ns.adobe.com/mxml/2009"
07.               width="400" height="400">
08.    <fx:Declarations>
09.    </fx:Declarations>  
10.          
11.        <s:Group id="test1" width="200" height="200">
12.            <s:Rect width="200" height="390" x="0" y="0">
13.                <s:fill>
14.                    <mx:LinearGradient rotation="45">
15.                        <mx:entries>
16.                            <mx:GradientEntry color="red"></mx:GradientEntry>
17.                            <mx:GradientEntry color="yellow"></mx:GradientEntry>
18.                        </mx:entries>
19.                    </mx:LinearGradient>
20.                </s:fill>
21.                <s:stroke>
22.                    <mx:SolidColorStroke color="black"></mx:SolidColorStroke>
23.                </s:stroke>         
24.            </s:Rect>       
25.        </s:Group>
26.</s:Application>
27.//-->

예제1 결과
Get Adobe Flash Player

여기에서 Group의 clipAndEnableScrolling 속성을 true로 설정하면 Group의 크기에 맞게 자식 Content를 보여줄 수 있습니다.
예제2 소스
01.<!--
02.<?xml version="1.0" encoding="utf-8"?>
03.<s:Application minHeight="768" minWidth="1024" 
04.               xmlns:mx="library://ns.adobe.com/flex/halo" 
05.               xmlns:s="library://ns.adobe.com/flex/spark" 
06.               xmlns:fx="http://ns.adobe.com/mxml/2009"
07.               width="400" height="400">
08.    <fx:Declarations>
09.    </fx:Declarations>  
10.          
11.        <s:Group id="test1" width="200" height="200" clipAndEnableScrolling="true">
12.            <s:Rect width="200" height="390" x="0" y="0">
13.                <s:fill>
14.                    <mx:LinearGradient rotation="45">
15.                        <mx:entries>
16.                            <mx:GradientEntry color="red"></mx:GradientEntry>
17.                            <mx:GradientEntry color="yellow"></mx:GradientEntry>
18.                        </mx:entries>
19.                    </mx:LinearGradient>
20.                </s:fill>
21.                <s:stroke>
22.                    <mx:SolidColorStroke color="black"></mx:SolidColorStroke>
23.                </s:stroke>         
24.            </s:Rect>       
25.        </s:Group>
26.</s:Application>
27.//-->

예제2 결과
Get Adobe Flash Player
Group Container를 Scroller에 아래 예제3과 같이 포함시키면 스크롤이 표시됩니다.
에제3 소스
01.<!--
02.<?xml version="1.0" encoding="utf-8"?>
03.<s:Application minHeight="768" minWidth="1024" 
04.               xmlns:mx="library://ns.adobe.com/flex/halo" 
05.               xmlns:s="library://ns.adobe.com/flex/spark" 
06.               xmlns:fx="http://ns.adobe.com/mxml/2009"
07.               width="400" height="400">
08.    <fx:Declarations>
09.    </fx:Declarations>  
10.    <s:Scroller>
11.        <s:Group id="test1" width="200" height="200" clipAndEnableScrolling="true">
12.            <s:Rect width="200" height="390" x="0" y="0">
13.                <s:fill>
14.                    <mx:LinearGradient rotation="45">
15.                        <mx:entries>
16.                            <mx:GradientEntry color="red"></mx:GradientEntry>
17.                            <mx:GradientEntry color="yellow"></mx:GradientEntry>
18.                        </mx:entries>
19.                    </mx:LinearGradient>
20.                </s:fill>
21.                <s:stroke>
22.                    <mx:SolidColorStroke color="black"></mx:SolidColorStroke>
23.                </s:stroke>         
24.            </s:Rect>       
25.        </s:Group>
26.    </s:Scroller>
27.          
28.</s:Application>
29.//-->

예제3 결과
Get Adobe Flash Player
여기에서 보여지는 부분을 Viewport라고 합니다.

그래서 여기에서는 Viewport의 Width Height는 Group의 크기이고,
Viewport.ContentWidth ContentHeight는 포함시킨 Rect의 크기인 것을 알 수 있습니다.
그리고 이 Viewport의 위치를 horizontalScrollPosition, verticalScrollPosition으로 나타냅니다.
그러므로 마우스로 스크롤해서 내려가면 ContentHeight 범위 내에서 verticalScrollPosition이 증가하게 됩니다.

위의 예에서도 내용을 클릭하고 스크롤하면 스크롤바가 이동되는데요, default 이동 값은 아주 작은 것을 알 수 있습니다.
Group에 마우스 휠 처리 이벤트를 등록하고 event.preventDefault를 통해 기본적으로 주어지는 처리되는 이벤트를 없애고
event.delta를 이용해서 원하는 만큼 스크롤 이동값을 정할 수 있습니다.
예제4 소스
01.<!--
02.<?xml version="1.0" encoding="utf-8"?>
03.<s:Application minHeight="768" minWidth="1024" 
04.               xmlns:mx="library://ns.adobe.com/flex/halo" 
05.               xmlns:s="library://ns.adobe.com/flex/spark" 
06.               xmlns:fx="http://ns.adobe.com/mxml/2009"
07.               width="400" height="400">
08.  
09.    <fx:Script>
10.        <![CDATA[
11.            protected function test1_mouseWheelHandler(event:MouseEvent):void
12.            {
13.                // TODO Auto-generated method stub
14.                event.preventDefault();
15.                test1.verticalScrollPosition -= event.delta * 10;
16.            }
17.        ]]>
18.    </fx:Script>
19.  
20.    <fx:Declarations>
21.    </fx:Declarations>  
22.    <s:Scroller>
23.        <s:Group id="test1" width="200" height="200" clipAndEnableScrolling="true"
24.                  mouseWheel="test1_mouseWheelHandler(event)">
25.            <s:Rect width="200" height="390" x="0" y="0">
26.                <s:fill>
27.                    <mx:LinearGradient rotation="45">
28.                        <mx:entries>
29.                            <mx:GradientEntry color="red"></mx:GradientEntry>
30.                            <mx:GradientEntry color="yellow"></mx:GradientEntry>
31.                        </mx:entries>
32.                    </mx:LinearGradient>
33.                </s:fill>
34.                <s:stroke>
35.                    <mx:SolidColorStroke color="black"></mx:SolidColorStroke>
36.                </s:stroke>         
37.            </s:Rect>       
38.        </s:Group>
39.    </s:Scroller>
40.          
41.</s:Application>
42.//-->

예제4 결과
Get Adobe Flash Player
위를 클릭하고 휠을 내려보세요. 이제 스크롤 하면 원하는 만큼 잘 내려가네요.

제가 처음에 스크롤 바없이 어떤 이벤트에 의해 안의 내용들을 이동시키고 싶어서 이런 기능을 검색하게 되었는데요,
스크롤바를 숨기고 싶으면 Scroller의 horizontalScrollPolicy="off" verticalScrollPolicy="off" 를 통해 가능합니다.
그리고 나서 마우스 휠 이벤트를 prevent 해주고 해당하는 이벤트에서 viewport position만 이동시켜 주면 됩니다.

아래는 스크롤 바만 제거한 예제입니다. 스크롤바가 없어도 마우스 휠 이벤트는 그대로 적용되는 것을 알 수 있습니다.
예제5 소스
01.<!--
02.<?xml version="1.0" encoding="utf-8"?>
03.<s:Application minHeight="768" minWidth="1024" 
04.               xmlns:mx="library://ns.adobe.com/flex/halo" 
05.               xmlns:s="library://ns.adobe.com/flex/spark" 
06.               xmlns:fx="http://ns.adobe.com/mxml/2009"
07.               width="400" height="400">
08.  
09.    <fx:Script>
10.        <![CDATA[
11.            protected function test1_mouseWheelHandler(event:MouseEvent):void
12.            {
13.                // TODO Auto-generated method stub
14.                event.preventDefault();
15.                test1.verticalScrollPosition -= event.delta * 10;
16.            }
17.        ]]>
18.    </fx:Script>
19.  
20.    <fx:Declarations>
21.    </fx:Declarations>  
22.    <s:Scroller verticalScrollPolicy="off" horizontalScrollPolicy="off">
23.        <s:Group id="test1" width="200" height="200" clipAndEnableScrolling="true"
24.                  mouseWheel="test1_mouseWheelHandler(event)">
25.            <s:Rect width="200" height="390" x="0" y="0">
26.                <s:fill>
27.                    <mx:LinearGradient rotation="45">
28.                        <mx:entries>
29.                            <mx:GradientEntry color="red"></mx:GradientEntry>
30.                            <mx:GradientEntry color="yellow"></mx:GradientEntry>
31.                        </mx:entries>
32.                    </mx:LinearGradient>
33.                </s:fill>
34.                <s:stroke>
35.                    <mx:SolidColorStroke color="black"></mx:SolidColorStroke>
36.                </s:stroke>         
37.            </s:Rect>       
38.        </s:Group>
39.    </s:Scroller>
40.          
41.</s:Application>
42.//-->

예제5 결과
Get Adobe Flash Player






Flash에서 스크롤 처리를할때 웹 브라우저의 스크롤을 막는 방법은 어떻게 하는 걸까요?
혹시 아시는 분은 댓글을 달아주시면 감사하겠습니다.

'Flex' 카테고리의 다른 글

flex 특수 문자 예)  (0) 2010.11.08
Flash Builder 4 Beta2에서 SVN 설치하기  (0) 2010.10.18
flex 다국어  (0) 2010.10.01
Flex Encryption (MD5, SHA1, SHA224, SHA256, HMAC)  (0) 2010.10.01
HTTPService Parameters  (0) 2010.09.29
특수문자 및 의미                변경문자
"                                        &quo
'                                        &apo
<                                       &lt;
>                                       &gt;
&                                       &amp;

Backspace                       \b
From feed                         \f
New Line                          \n
Carriage Return                  \r
Tab                                 \t
\'                                   '
\"                                   "
\\                                 \
\unnnn                           16진수 표현
\xnn                              ASCII 표현

label.text = " &amp; 사용";

'Flex' 카테고리의 다른 글

[Flex 4] 스크롤 기능 제어하기 Scroller  (1) 2010.11.17
Flash Builder 4 Beta2에서 SVN 설치하기  (0) 2010.10.18
flex 다국어  (0) 2010.10.01
Flex Encryption (MD5, SHA1, SHA224, SHA256, HMAC)  (0) 2010.10.01
HTTPService Parameters  (0) 2010.09.29
SVN이란 Subversion의 줄임말로서 소프트웨어 버젼관리 시스템입니다.
SVN을 사용하는 이유는 크게 보면 공동작업을 위해서 입니다. 소규모 프로젝트일 경우 혼자만의 작업이 되어 자기 스스로 자기가 편한데로 소스를 보관하면 됐지만 대규모 프로젝트일 경우, 프로젝트를 한명이 할 수 없는 경우가 대부분이며 차후 수정 및 버그 수정 등을 위하여 버젼관리는 필수 요소입니다. 소프트웨어 버젼관리 시스템의 장점은 아래와 같습니다.

개발자간 소스를 공유할 수 있다.
개발버젼과 릴리즈 버젼을 따로 분리하여 관리할 수 있다.
소스의 수정과 파일의 추가 및 삭제의 기록이 자동으로 남기 때문에 차후 버그나 문제점 발생시 되돌리기 쉬울뿐만 아니라 문제점을 빠르게 찾을 수 있다.
공동작업을 할 경우 서로 상대방이 수정한 소스코드를 확인할 수 있다.
라이브러리를 항상 최신으로 업데이트 유지 할 수 있다.

기타등등 SVN을 사용함으로서 얻어지는 효과는 매우 크다고 할 수 있습니다. 물론 처음에 접하기는 좀 생소한감이 있을 수 있지만 배우기가 어렵지 않고 약간의 개념만 가지고도 쉽게 사용할 수 있다는 장점이 있습니다.

그럼 이제 Flash Builder 4 Beta2에서 SVN을 사용하기 위한 준비 사항을 알아보겠습니다.
(하단 내용은 지돌스타님의 블로그를 참조하였습니다.)

우선 SVN을 사용하기 위해서는 Subclipse를 설치해야 합니다. 설치하는 방법은 Flash Builder에서
Help → Software Updates  → Find and Install을 선택합니다.



Find and Install... 을 선택하시면 아래와 같은 화면이 나타납니다.


위와 같이 Install/Update 차이 나타나면 "Search for new features to install"을 선택한후 Next를 클릭합니다.


Install 창이 나타나면 New Remote Site를 클릭하여 업데이트 받을 사이트를 등록합니다.
New Update 창이 나타나면 아래 내용대로 입력하여 주신 후 OK 버튼을 클릭합니다.

Name : Subclipse 1.6.x (자신이 알아 볼 수 있게만 입력하여 주시면 됩니다.)
URL : http://subclipse.tigris.org/update_1.6.x

최신 버젼에 관해서는 http://subclipse.tigris.org에 방문하시면 보실 수 있습니다.

Subclipse 1.6.x 사이트가 추가 되었다면 이제 Finish 버튼을 클릭하여 업데이트할 수 있는 내역을 검색합니다.
검색이 끝나고 나면 아래와 같이 Updates 항목을 선택할 수 있는 창이 나타납니다. 그중 Subclipse 1.6.x 앞에 체크부분에 체크를 하여 주시면 x표시가 나면서 설치가 불가능한 항목들이 나타납니다.


설치가 불가능한 항목들의 체크박스를 해제하시면 설치를 계속 진행할 수 있습니다.
(설치가 불가능한 항목은 따로 설치하지 않으시더라도 SVN을 사용하는데에는 지장이 없습니다. 그래도 설치를 하시고 싶으신 분들은 해당 항목이 필요로 하는 Plug-in을 설치하신후 업데이트 하시면 됩니다.)



이제 Next 버튼을 눌러 다음 라이센스 항목으로 이동한 후 License 항목을 보신후 "I accept the terms in the license agreements"를 선택하시고 Next버튼을 클릭합니다.


옵션항목이 나타나면 Next 버튼을 클릭합니다.


인스톨화면이 나타나면 설치 경로를 설정하여 주시고 Default 경로로 하시고 싶다면 바로 Finish 버튼을 눌러 Install을 진행합니다.



업데이트가 완료되면 변경사항을 적용하기 위해 Flash Builder를 다시 시작할 필요가 있다는 메세지가 나타납니다. 여기서 Yes버튼을 클릭하여 Flash Builder를 재시작 하여 줍니다.


재부팅이 되고 나면 Builder 상단 메뉴에서 Window 메뉴를 선택하시고 Other Views... 를 선택합니다.


표시할 수 있는 창 목록이 나타나고 아래부분에 보시면 SVN 항목이 추가되어져 있는걸 보실 수 있습니다.



이제 모든 설치가 완료 되었습니다. 사용 방법은 차후 다시 리포팅 하겠습니다.
저작자 표시 비영리

'Flex' 카테고리의 다른 글

[Flex 4] 스크롤 기능 제어하기 Scroller  (1) 2010.11.17
flex 특수 문자 예)  (0) 2010.11.08
flex 다국어  (0) 2010.10.01
Flex Encryption (MD5, SHA1, SHA224, SHA256, HMAC)  (0) 2010.10.01
HTTPService Parameters  (0) 2010.09.29

1. 다국어 패키지를 복사..

 1- 1. cmd >cd $FlexHome$\sdks\3.2.0\bin

 1 - 2. cmd > copylocale.exe en_US 적용할 언어[ex)ko_KR]


2. 제대로 생성됐는지 확인.

  2 - 1. cmd > cd $FlexHome$\3.2.0\frameworks\locale

  2 - 2. cmd > dir --> swc파일 생성 확인.

3. Flex Builder에서 설정.

  3 - 1. Project >>마우스 오른쪽 클릭 >> Properties >> Flex Compiler

  3 - 2. Additional compiler arguments  >> -locale en_US en_KR -source-path=locale/{locale}

     ( 경로 확인. - src 디렉토리 기준임.)

얼마전 프로젝트를 하면서 Tour de Flex 를 다운받은적이 있다..

이것저것 보는데
Localization 이라는게 있는것이다


플젝 하면서 다국어 버전을 만들라고 요청 온적이 있었는데..

우리는 그냥 Localizer.as 파일을 만들어서 일일히 변환 해주는 노가다를 했었다(물론 xml로 언어는 가져오지만 그래도 좀...)

Localization을 보니 플랙스에서 가지고 있는 locale을 바꿔 주는것이다..
오~! 이런 획기적인?

그래서 한번 찾아봤다..

Flex 3:Feature Introductions: Runtime Localization


오 이런게? 흠....

보면 알겠지만 (사실 나도 영어는 딸려서...)
fr_FR, en_US 버전 두개를 만들어 언어 변환을 해주는것이다

그럼 TEST 시작..

일단 en_US의 카피 본이 필요 하다
자신이 설치한 Flex Builder 에 가보면
난 디폴트로 설치를 해서 경로가 C:\Program Files\Adobe 이곳이다
그럼 기본으로 Flex 가 가지고 있는 locale 을 알아보자
C:\Program Files\Adobe\Flex Builder 3 Plug-in\sdks\3.2.0\frameworks\locale
으로 들어가보자
경로는 Bulider 설치 폴더\sdks\3.2.0\frameworks\locale 이다
그럼 en_US,ja_JP 폴더 두개가 있을것이다..

이게 플렉스에서 가지고 있는 두가지 버전의 locale 이다...하난 영어,하는 일어..(췟)

난 한국사람이기 때문에 영어,한국어 두가지의 locale 버전을 만들것이다..

그럼 기본으로 가지고 있는 locale 을 카피 한다

도스창을 연다 시작프로그램 >> 실행 >> cmd
C:\Program Files\Adobe\Flex Builder 3 Plug-in\sdks\3.2.0\bin
요기로 가서
copylocale.exe 원본locale 복사locale 이렇게 적는다
나는 copylocale.exe en_US en_KR 을 했다


이렇게 실행이 된다
다시
C:\Program Files\Adobe\Flex Builder 3 Plug-in\sdks\3.2.0\frameworks\locale
로 가보면 en_US, en_KR, ja_JP 가 있다
en_KR  폴더에 가면
automation_agent_rb.swc, datavisualization_rb.swc
파일만 없고 나머지 파일은 있는것을 확인할 수 있다 (저 위에 있는것은 bulider 정식 버전에서 쓰이나 차트나, AdvancedDataGrid등 이런것들이다..)

이제 빌더로 가보자~!

flex 에서 application.mxml 이 있는 경로에 locale 이란 폴더를 만들어 준다
그리고 언어 변환을 할 en_US,en_KR 두개의 폴더를 locale 폴더 안에 만들어준다
그리고 properties 파일을 만들어 준다
properties 파일은 java에서 HashMap,HashTable 과 같이 key = value 로 들어가는 프로퍼티들을 모은 파일이다 flex에서 따지자면 Object같은? Object도 Object.key = value; 로 할수 있으니까..

나는 jang.properties 파일을 만들것이다 (각각 en_US, en_KR 폴더에 하나씩 만들어 준다)
이제 properties 파일을 열고 KEY = VALUE를 넣어준다

이런구조?

여기서 주의해야 할점... properties 파일은 이클립스에서 기본적으로 만들때 파일 encoding이
ISO-8859-1 이다 저장을 할려면 안될것이다..그러므로 UTF-8로 변환을 해주어야 한다
(각 파일마다 전부 UTF-8로 변환을 해주었다면 알아서 UTF-8로 변환 해주니까 상관없음...

encoding 변환방법

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:Metadata>
        [ResourceBundle("jang")]
    </mx:Metadata>
   
    <mx:Script>
        <![CDATA[
           
        [Bindable]
        private var locales:Array = [ "en_US" , "en_KR" ];

        private function localeComboBox_initializeHandler(event:Event):void
        {
            localeComboBox.selectedIndex = locales.indexOf(resourceManager.localeChain[0]);
        }
  
        private function localeComboBox_changeHandler(event:Event):void
        {
            resourceManager.localeChain = [ localeComboBox.selectedItem ];
        }
        ]]>
    </mx:Script>
   
    <mx:Label text="{resourceManager.getString('jang', 'NAME')}"/>
   
     <mx:ComboBox id="localeComboBox" dataProvider="{locales}"
                 change="localeComboBox_changeHandler(event)"/>
</mx:Application>

Localization.mxml 파일을 이렇게 고친후

Flex 컴파일에서 설정 하자~!


Project >>마우스 오른쪽 클릭 >> Properties
를 클릭후
Flex Compiler >> Additional compiler arguments 로 간다
그리고 -locale en_US en_KR -source-path=locale/{locale}이렇게 넣어 준다


OK 누른후 Localization.mxml 실행


After a question on our flex forum about MD5 encryption, I decided to write an example about all the encryption types available in Flex.

Encryption is not available by default, you have to download the latest version of the (open source) project AS3corelib.

If you would like to encrypt a String with an MD5, you have the MD5 class in as3corelib-.92.1srccomadobecryptoMD5.as.

Import this class and than just call

1
MD5.hash("some string");

and there you go…

To show you every encryption method I’ve written this example.


Flex in HMAC with Your HMAC key as security key: 28df358053e410a65bae3d52a73ef921  
Actionscript code: HMAC.hash("Flex","Your HMAC key");


Flex in MD5:   09d2bd168181f1e64c2b1651a80a8aa8          

Actionscript code: MD5.hash("Flex");


Flex in SHA1:   6b1f893805e29582969095a741d60a5f43734af8        

Actionscript code: SHA1.hash("Flex");


Flex in SHA224:  c5e91507b9a0e573c6e93e5adec2de26c27545704e2f954db0c9fbd5   

Actionscript code: SHA224.hash("Flex");


Flex in SHA256:  c2a520b84ceea67ca4f3f74f908a5a310d104b42226714809b4e39de7eae2d24  Actionscript code: SHA256.hash("Flex");

'Flex' 카테고리의 다른 글

Flash Builder 4 Beta2에서 SVN 설치하기  (0) 2010.10.18
flex 다국어  (0) 2010.10.01
HTTPService Parameters  (0) 2010.09.29
FLEX로 화면캡쳐 및 이미지파일로 저장하기  (0) 2010.08.13
flex  (0) 2010.06.21

HTTPService 콤포넌트를 이용하여 웹서버에 요청할 때 파라미터를 전달하는 다양한 방법

MXML

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="359" width="480">
 <mx:Script>
  <![CDATA[
   import mx.rpc.events.ResultEvent;
   import mx.rpc.events.FaultEvent;
   import mx.controls.Alert;
         [Bindable]
         private var employeeInfo:XMLList;
         public function handleXML(event:ResultEvent):void
         {
            employeeInfo = event.result.emp as XMLList;
         }
         public function handleFault(event:FaultEvent):void
         {
            Alert.show(event.fault.faultString, "Error");
         }
        
         public function getDetailedInfo1():void {
          var http:HTTPService = new HTTPService();
          http.method="POST";
          http.url = "http://localhost/flex/xmlEmpService4.jsp";
          http.resultFormat = "e4x";
          http.request.empno = txtEmpno.text;
          http.addEventListener("result", handleXML);
          http.addEventListener("fault", handleFault);
          http.send();
         }
        
         public function getDetailedInfo2():void {
           var params:Object = new Object();
           params.empno = txtEmpno.text;
           xmlRPC.send(params);
         }
        
         public function getDetailedInfo3():void {
           xmlRPC.url="http://localhost/flex/xmlEmpService4.jsp?empno="+txtEmpno.text;
           xmlRPC.send();
         }
        
         public function getDetailedInfo4():void {
           var params:Object = new Object();
           params["empno"] = txtEmpno.text;
           xmlRPC.send(params);
         }

         public function getDetailedInfo5():void {
           xmlRPC.request.empno = txtEmpno.text;
           xmlRPC.send();
         }
        public function clearDataGrid():void {
          employeeInfo = null;
        }
  ]]>
 </mx:Script>
    <mx:HTTPService result="handleXML(event);" fault="handleFault(event);" id="xmlRPC" resultFormat="e4x"
         method="POST" url="http://localhost/flex/xmlEmpService4.jsp" useProxy="false">
     <mx:request xmlns="">
      <empno>{ txtEmpno.text }</empno>
     </mx:request>
 </mx:HTTPService>
 
  <mx:Label x="49.5" y="39" text="HTTPService를 이용하여 파라미터를 전달하는 방법 테스트" fontSize="13" fontWeight="bold" textDecoration="underline"/>
  <mx:Label x="43" y="85" text="사번(empno)입력" fontSize="12"/>
  <mx:TextInput x="157" y="83" width="88" id="txtEmpno" text="7839"/>
 
  <mx:DataGrid x="43" y="113" height="142" id="EmpList" dataProvider="{employeeInfo}" fontSize="12" textAlign="center">
   <mx:columns>
    <mx:DataGridColumn headerText="사 번" dataField="empno"/>
    <mx:DataGridColumn headerText="이 름" dataField="ename"/>
   </mx:columns>
  </mx:DataGrid>
 
  <mx:Button x="253" y="83" label="&lt;empno&gt;7839&lt;/empno&gt;" click="xmlRPC.send();" width="187" height="22"/>
  <mx:Button x="253" y="113" label="http.request.empno='7839'" width="187" id="btnDetail"
  click="getDetailedInfo1();"/>  
  <mx:Button x="253" y="143" label="params.empno='7839'" width="187" id="btnDetail0"
   click="getDetailedInfo2();"/>
  <mx:Button x="253" y="173" label="emp.jsp?empno=7839" width="187" id="btnDetail1"
   click="getDetailedInfo3();"/>
  <mx:Button x="253" y="203" label="params['empno']='7839'" width="187" id="btnDetail2"
   click="getDetailedInfo4();"/>
  <mx:Button x="253" y="208" label="http.request.empno='7839'" width="187" id="btnDetail5"
   click="getDetailedInfo5();"/>
  <mx:Button x="253" y="233" label="Clear DataGrid" width="187" id="btnDetail3"
   click="clearDataGrid();" fillAlphas="[1.0, 1.0]" fillColors="[#F8BA35, #F8BA35]"/>
</mx:Application>



테스트용 서버측 프로그램 (xmlEmpService04.jsp)

<%@ page contentType="text/xml;charset=utf-8" import="java.sql.*" %>
<%
 Connection conn = null;
 Statement stmt = null;

 String jdbc_driver = "oracle.jdbc.OracleDriver";
 String db_url = "jdbc:oracle:thin:@localhost:1521:ora9i";
 String empno = request.getParameter("empno");

 try{
  Class.forName(jdbc_driver);

  conn = DriverManager.getConnection(db_url,"scott","tiger");

  stmt = conn.createStatement();

  ResultSet rs = stmt.executeQuery("select * from emp where empno="+empno);
 // EMPNO  ENAME  JOB  MGR  HIREDATE  SAL  COMM  DEPTNO        
  %>
  <?xml version="1.0" encoding="utf-8"?>
  <employee>

  <%
  while(rs.next()) { %>
  <emp>
    <empno><%=rs.getInt(1)%></empno>
    <ename><%=rs.getString(2)%></ename>
    <job><%=rs.getString(3)%></job>
    <mgr><%=rs.getString(4)%></mgr>
    <hiredate><%=rs.getString(5)%></hiredate>
    <sal><%=rs.getInt(6)%></sal>
    <comm><%=rs.getString(7)%></comm>
    <deptno><%=rs.getInt(8)%></deptno>
</emp>
<%  } %>
</employee>
<%
  rs.close();
  stmt.close();
  conn.close();
 }
 catch(Exception e) {
  out.println(e);
 }
%>

'Flex' 카테고리의 다른 글

Flash Builder 4 Beta2에서 SVN 설치하기  (0) 2010.10.18
flex 다국어  (0) 2010.10.01
Flex Encryption (MD5, SHA1, SHA224, SHA256, HMAC)  (0) 2010.10.01
FLEX로 화면캡쳐 및 이미지파일로 저장하기  (0) 2010.08.13
flex  (0) 2010.06.21

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
 usePreloader="false" horizontalScrollPolicy="off"
 verticalScrollPolicy="off"
 paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
 <mx:Script>
  <![CDATA[

 import mx.core.UIComponent;
 import com.adobe.images.PNGEncoder;

   private function getBitmapData( target : UIComponent ) : BitmapData {
  var bd : BitmapData = new BitmapData( target.width, target.height );
  var m : Matrix = new Matrix();
  bd.draw( target, m );
  return bd;
   }
  
   public function CapImage():void {
     var bd : BitmapData = getBitmapData( UIComponent( imgPanel ) );
     targetImage.source = new Bitmap( bd );    
   }
  
   public function SaveAsPng():void {
  var
url:String = "print.php";
        var request:URLRequest = new URLRequest(url);
  var imageData:ByteArray = PNGEncoder.encode(getBitmapData(UIComponent( imgPanel )));

  var urlR:URLRequest = new URLRequest(url); 
           
  var boundary:String = '------wsos------';
  urlR.contentType = 'multipart/form-data; boundary='+boundary;
  boundary = '--'+boundary;
 
  var data:ByteArray = new ByteArray;
 
  data.writeUTFBytes(boundary+'\r\n');
 
  // start new part
  data.writeUTFBytes('Content-Disposition: form-data; name="file_upload"; filename="image.png"\r\n');
  data.writeUTFBytes('Content-Type: image/png\r\n');
  data.writeUTFBytes('Content-Transfer-Encoding: binary\r\n\r\n');
 
  // write image data
  data.writeBytes(imageData);
  // terminate part
  data.writeUTFBytes('\r\n'+boundary+'\r\n');
 
  // start a new part if you want to send other POST variables
  data.writeUTFBytes('Content-Disposition: form-data; name="test"\r\n\r\n');
  data.writeUTFBytes('wsos');
  data.writeUTFBytes('\r\n'+boundary+'\r\n');
 
  urlR.data = data;
  urlR.method = URLRequestMethod.POST;
 
  navigateToURL(urlR,"_self");      
   }
   ]]>
 </mx:Script>
<mx:VBox width="100%" height="100%">
 <mx:Image id="targetImage" width="100%" height="50%"/>
 <mx:HBox width="100%">
  <mx:Button label="화면캡쳐" click="CapImage();"/>
  <mx:Button label="이미지로 저장(PNG)" click="SaveAsPng();"/>
 </mx:HBox>
 <mx:Panel id="imgPanel" width="100%" height="50%" layout="absolute" title="이미지저장">
  <mx:TextArea top="10" bottom="10" left="10" right="10"/>
 </mx:Panel>
</mx:VBox>
</mx:Application>

print.php

<?
/*
$result = array_merge($HTTP_GET_VARS,$HTTP_POST_VARS);
print_r($result);
print_r($HTTP_POST_FILES);
*/

$files = $HTTP_POST_FILES["file_upload"];

if($files){

 Header("Content-type:application/octet-stream");
 Header("Content-Length:".$files["size"]);   
 Header("Content-Disposition:attachment;filename=".$files["name"]);
 Header("Content-type:file/unknown");

 //Header("Content-type:image/png");        

 Header("Pragma: no-cache");
 Header("Expires: 0");

 $filename = $files["tmp_name"];
 $fd = fopen ($filename, "r");
 $contents = fread ($fd, filesize ($filename));

 echo $contents;
 
 fclose ($fd);
}

?>
 

 

2. 데모

3. 참고

'Flex' 카테고리의 다른 글

Flash Builder 4 Beta2에서 SVN 설치하기  (0) 2010.10.18
flex 다국어  (0) 2010.10.01
Flex Encryption (MD5, SHA1, SHA224, SHA256, HMAC)  (0) 2010.10.01
HTTPService Parameters  (0) 2010.09.29
flex  (0) 2010.06.21
Flex builder나 Flash debug player 에 들어있는기능이 모자르다고 느끼는 분들은 써보시길.

사용법은 압축을 풀고 de\richinternet\utils\Dumper.as를

플렉스 서버 WEB-INF\flex\user_class\de\richinternet\utils\Dumper.as로 카피하고


mxml 스크립트에 임포트 시킨후 사용하면 된다.

사용은 파일중에 starter.exe를 실행시킨후 사용하면 된다.




사용예)

import de.richinternet.utils.Dumper;
  
   function traceTest() {
    Dumper.dump("a normal message");
    Dumper.info("also a normal message");
    Dumper.warn("oops, a warning message");
    Dumper.error("Houston we have a problem!");
    Dumper.dump("this is also an error!", Dumper.ERROR);
   }


참고로 이 프로그램은 플래시의 local connection을 이용한 프로그램으로 starter.exe라는 플래시 플레이어가 실행되어 있어야 한다. starter.exe 파일의 위치는 어디에 있던 상관 없다. 자세한 내용은 아래의 출처로


출처 :

http://www.richinternet.de/blog/index.cfm?mode=entry&entry=EB3BA9D6-A212-C5FA-A9B1B5DB4BB7F555


'Flex' 카테고리의 다른 글

Flash Builder 4 Beta2에서 SVN 설치하기  (0) 2010.10.18
flex 다국어  (0) 2010.10.01
Flex Encryption (MD5, SHA1, SHA224, SHA256, HMAC)  (0) 2010.10.01
HTTPService Parameters  (0) 2010.09.29
FLEX로 화면캡쳐 및 이미지파일로 저장하기  (0) 2010.08.13

+ Recent posts