'flex' 태그의 글 목록

728x90

오랫만에 블로그에 글을 남깁니다.
Flex에서 AMF통신을 이용할때 사용하는 RemoteClass 메타데이타 태그를 만들때, 너무 귀찮아서 프로그램으로 만들어 보았습니다. 왜 RemoteClass 메타데이타 태그를 사용해야만 하나...?? 정확한 답은 지돌스타님 블로그 "[ActionScript 3, Flex]되도록이면 직접적인 Object 클래스 사용을 지양해야하는 이유"를 참고 하면 될것 같습니다. 저는 시간적인 것 보다도...코딩을 하면서 Object로 받아서 사용하는것 보다 더 명료하게 사용할수 있기 때문이라고 말하고 싶습니다. 그래야 코딩하기도 편하고, 코딩 속도도 올라가는 느낌이라..;;

ActionScript3_VO_Generator_v102.air

[프로그램 사용법]
기본적인 프로그램은 아래와 같습니다. 보시면 알겠지만 사용법은 간단합니다.

우선 RemoteObject로 넘겨 받을 JAVA 클래스 파일이 있다고 전제를 두고 개발을 하였습니다. '*'는 필수 입력입니다.

- VO java file : RemoteObject로 넘겨 받을 JAVA 클래스 파일
- AS3 VO file Path : 생성될 VO 클래스 의 위치를 지정
- AS3 VO file name : 생성될 VO 클래스 의 파일명 지정
- AS3 VO package : 생성될 VO클래스의 패키지 지정
- File charSet : "VO java file"의 문자셋 설정 (현재, UTF-8 , EUC-JP 지원)

위와 같이 입력후 [VO Generate] 버튼을 클릭하면 아랫부분의 생성될 VO클래스가 나타납니다.

필요한 부분을 수정하시고 [Copy to Clipboard]를 누르면 클립보드에 내용이 복사됩니다. 파일로 만들기를 원하신다면 [Save as File] 을 누르시면 됩니다. 파일은 "AS3 VO file Path"에 지정된 경로에 저장됩니다.

[참고]
1. JAVA파일의 주석은 되도록이면 모두 가져오겠끔 개발했습니다. (함수, 변수의 설명을 가지고 오고 싶었음)
- "//" 로 시작하며 "*/" 문자가 들어있는 라인 --> 설명 주석으로 생각함
- 처음 문자가 "*", "/*" 로 시작되는 라인 --> 함수의 설명이나 변수의 설명으로 생각함
2. JAVA파일에서 제외되는 라인
- serialVersionUID 가 들어있는 라인
- 라인의 문자길이가 0인 라인
- "\r"만 존재하는 라인
3. setter/getter 함수의 설명은 주석부분과 함수부분이 따로따로 되어있습니다. 이부분은 각자 에디터에서 처리 하세요. 지금은 고치기 귀찮네요..;;; ㅡ.ㅡ;;;

아직은 좀 더 수정을 해야되는 부분이 있습니다. 저도 직접 사용하면서 불편한 부분이나 필요한 부분이 있으면 수정해 다시 이곳에 올리겠습니다.

부족한 부분이 있으면 댓글로 달아주세요. 그럼..이만..;;

728x90

저작자표시 비영리 변경금지

728x90

얼마전에 아래와 같은 화면이 가능할지 요구가 들어왔다.

http://www.hotpepper.jp/A_20500/strJ000026604.html

화면의 로딩이 끝나고 버튼을 누르면 Fullscreen으로 전환된다. 그리고 음식사진이 나오는데, 이 사진을 아래있는 컨트롤바의 조작으로 바꿀수도 있고, 여러 이벤트 처리가 가능한다.
잘 아시다시피, Fullscreen 화면에서는 키보의 이벤트가 ESC만 적용이된다. (운영체제에 따라서 약간은 다름) 그렇기 때문에 제약 상항이 많아진다. 이를 해결하기 위해서 위 사이트처럼 아래 마우스로 조작이 가능한 컨트롤바를 넣어서 해결을 하는 방법을 생각해 보았다.

일단 아래 화면을 보자.

위 화면을 Fullscreen일 경우에만 보여준다고 생각을 하면, 어떨까? 그러니깐 FullScreen 화면과 일반화면에 보여지는 것이 전혀 다르게 하는것이 목적이다. 굳이 이렇게 작업할 필요는 없지만, 사용자 입장에서는 풀화면으로 전환시 다른 화면이 나왔다고 느끼게 하기 위해서 이다.

일반 화면은 아래와 같은 화면으로 한다.

이 화면은 Flex 예제사이트를 참고했다.

일반 부분의 소스를 보면...fullScreenHandler라는 함수를 주목하자. 이부분이 중요하다. 이부분에 Fullscreen 화면과 일반화면의 전환시 동작해야하는 기능들을 넣어주면 된다.
<<FullScreen.mxml>>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" applicationComplete="init(event)">
	
	<mx:Script>
		<![CDATA[
			import flash.display.StageDisplayState;
		
			private function init(evt:Event):void {
                /* Set up full screen handler. */
                Application.application.stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);
                dispState = Application.application.stage.displayState;
            }
            
            private function fullScreenHandler(evt:FullScreenEvent):void {
                dispState = Application.application.stage.displayState + " (fullScreen=" + evt.fullScreen.toString() + ")";
                if (evt.fullScreen) {
                    /* Do something specific here if we switched to full screen mode. */
                    /* 바로 이부분이다. Fullscreen 일경우의... */
                } else {
                    /* Do something specific here if we switched to normal mode. */
                    /* 바로 이부분이다. 일반화면 경우의*/
                }
            }
		
			private function toggleFullScreen():void {
                try {
                    switch (Application.application.stage.displayState) {
                        case StageDisplayState.FULL_SCREEN:
                            /* If already in full screen mode, switch to normal mode. */
                            Application.application.stage.displayState = StageDisplayState.NORMAL;
                            break;
                        default:
                            /* If not in full screen mode, switch to full screen mode. */
                            Application.application.stage.displayState = StageDisplayState.FULL_SCREEN;
                            break;
                    }
                } catch (err:SecurityError) {
                    // ignore
                }
            }
			
		]]>
	</mx:Script>
	
	<mx:String id="dispState" />
	
	<mx:Label text="width={Application.application.width}" />
    <mx:Label text="height={Application.application.height}" />
    <mx:Label text="displayState={dispState}" />

<mx:Button id="btn_fullscreen" label="Toggle fullscreen" click="toggleFullScreen()" />
	
</mx:Application>

그리고 Fullscreen의 경우의 화면 소스
<<FullDisplay.mxml>>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:ty="*"
	layout="absolute" creationComplete="creationCompleteHdlr()">
	
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
			//** IMAGE DATA */
			private var item:ArrayCollection = new ArrayCollection([
						{no:"1", label:"Autumn Leaves", data:"assets/Autumn Leaves.jpg"}, 
						{no:"2", label:"Creek", data:"assets/Creek.jpg"}, 
						{no:"3", label:"Desert Landscape", data:"assets/Desert Landscape.jpg"}, 
						{no:"4", label:"Dock", data:"assets/Dock.jpg"}, 
						{no:"5", label:"Forest Flowers", data:"assets/Forest Flowers.jpg"}, 
						
						{no:"6", label:"Forest", data:"assets/Forest.jpg"},
						{no:"7", label:"Frangipani Flowers", data:"assets/Frangipani Flowers.jpg"},
						{no:"8", label:"Garden", data:"assets/Garden.jpg"},
						{no:"9", label:"Green Sea Turtle", data:"assets/Green Sea Turtle.jpg"},
						{no:"10", label:"Humpback Whale", data:"assets/Humpback Whale.jpg"},
						
						{no:"11", label:"Oryx Antelope", data:"assets/Oryx Antelope.jpg"},
						{no:"12", label:"Toco Toucan", data:"assets/Toco Toucan.jpg"},
						{no:"13", label:"Tree", data:"assets/Tree.jpg"},
						{no:"14", label:"Waterfall", data:"assets/Waterfall.jpg"},
						{no:"15", label:"Winter Leaves", data:"assets/Winter Leaves.jpg"}
					]);
			
			private function creationCompleteHdlr():void{
				menuBar.item = this.item;
			}		
			
		]]>
	</mx:Script>
	
	<mx:Image source="{menuBar.horizontalList.selectedItem.data}" 
		maintainAspectRatio="true"
        horizontalAlign="center"
        width="100%"
        height="100%"/>
	
	<ty:MenuBar id="menuBar" x="0" y="{Application.application.height-30}"/>
	
	
</mx:Application>

item 이라는 ArrayCollection변수를 생성하여 이곳에 이미지가 있는 주소 데이터를 만들어준다. MenuBar라는 새로만든 컨포넌트의 데이터이기도 하다.

<<MenuBar.mxml>>

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="30" 
	backgroundColor="#242323" verticalAlign="middle">
	
	<mx:Script>
		<![CDATA[
			import mx.graphics.ImageSnapshot;
			import mx.controls.Image;
			import mx.collections.ArrayCollection;
			
			private var timer:Timer = new Timer(scrollSpeed);;
			
			public var scrollSpeed:Number = 100;
								
			private function itemListScrollOverEventHdlr(event:MouseEvent):void{
				
				var btn:Button = event.currentTarget as Button;
				
				if(btn.id == "btn_next"){
					
												
					if(timer.running) {
						timer.stop();
					}
					
					timer = new Timer(this.scrollSpeed);
					timer.addEventListener(TimerEvent.TIMER, scrollNextFunction);
					
					timer.start();
					
				}else if(btn.id ==  "btn_previous"){
					
					if(timer.running) {
						timer.stop();
					}
					
					timer = new Timer(this.scrollSpeed);
					timer.addEventListener(TimerEvent.TIMER, scrollPreviousFunction);
					
					timer.start();
				}
				
			}
			
			private function stopScrolling(event:Event):void {
		    	if(timer.running) {
					timer.stop();
				}
		    }
		    
		    private function scrollNextFunction(event:TimerEvent):void{
		    	if(horizontalList.horizontalScrollPosition < horizontalList.maxHorizontalScrollPosition){
		    		horizontalList.horizontalScrollPosition++;
		    	}
		    }
		    
		    private function scrollPreviousFunction(event:TimerEvent):void{
		    	if(horizontalList.horizontalScrollPosition > 0){
					horizontalList.horizontalScrollPosition--;
				}
		    }
		]]>
	</mx:Script>
	
	<mx:ArrayCollection id="item" />
	
	<mx:HBox width="100%" verticalAlign="middle" horizontalAlign="center"
		paddingLeft="10" paddingRight="10">
		
		<mx:Text text="Index : " color="#FFFFFF"/>
		<mx:Text id="txt_index" text="{horizontalList.selectedIndex}" color="#FFFFFF"/>
	
		
		<mx:HBox id="itemScrollBox" width="95%" horizontalAlign="center" horizontalGap="2">
			<mx:Button id="btn_previous" 
				width="40" height="20" label="＜" 
				mouseOver="itemListScrollOverEventHdlr(event)" 
				mouseOut="stopScrolling(event)"/>
            <mx:HorizontalList id="horizontalList"
                    labelField="label"
                    dataProvider="{item}"
                    itemRenderer="CustomItemRenderer"
                    columnCount="9"
                    columnWidth="20"
                    rowCount="1"
                    rowHeight="20"
                    horizontalScrollPolicy="off"
                    paddingBottom="0" paddingTop="0" borderStyle="none"/>
			<mx:Button id="btn_next" 
				width="40" height="20" label="＞"
				mouseOver="itemListScrollOverEventHdlr(event)" 
				mouseOut="stopScrolling(event)"/>
		</mx:HBox>

<mx:Button id="btn_exit" label="Exit" />
	</mx:HBox>
	
</mx:HBox>

MenuBar에서 HorizontalList 컨포넌트안에 들어가는 item을 itemRenderer를 이용하도록 만들었다.
<<CustomItemRenderer.mxml>>

이것들을 이용해서 Fullscreen 모드에서만 동작하도록 만들어보았다. (좀더 응용을 해보았다.)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:ty="*"
	layout="absolute" 
	applicationComplete="init(event)"
	creationComplete="creationCompleteHdlr()"
	horizontalScrollPolicy="off"
	verticalScrollPolicy="off">
	
	<mx:Script>
		<![CDATA[
			import flash.display.StageDisplayState;
			import mx.collections.ArrayCollection;
			
			//** IMAGE DATA */
			private var item:ArrayCollection = new ArrayCollection([
						{no:"1", label:"Autumn Leaves", data:"assets/Autumn Leaves.jpg"}, 
						{no:"2", label:"Creek", data:"assets/Creek.jpg"}, 
						{no:"3", label:"Desert Landscape", data:"assets/Desert Landscape.jpg"}, 
						{no:"4", label:"Dock", data:"assets/Dock.jpg"}, 
						{no:"5", label:"Forest Flowers", data:"assets/Forest Flowers.jpg"}, 
						
						{no:"6", label:"Forest", data:"assets/Forest.jpg"},
						{no:"7", label:"Frangipani Flowers", data:"assets/Frangipani Flowers.jpg"},
						{no:"8", label:"Garden", data:"assets/Garden.jpg"},
						{no:"9", label:"Green Sea Turtle", data:"assets/Green Sea Turtle.jpg"},
						{no:"10", label:"Humpback Whale", data:"assets/Humpback Whale.jpg"},
						
						{no:"11", label:"Oryx Antelope", data:"assets/Oryx Antelope.jpg"},
						{no:"12", label:"Toco Toucan", data:"assets/Toco Toucan.jpg"},
						{no:"13", label:"Tree", data:"assets/Tree.jpg"},
						{no:"14", label:"Waterfall", data:"assets/Waterfall.jpg"},
						{no:"15", label:"Winter Leaves", data:"assets/Winter Leaves.jpg"}
					]);
			
			private function creationCompleteHdlr():void{
				menuBar.item = this.item;
				menuBar.btn_exit.addEventListener(MouseEvent.CLICK, toggleFullScreen);
			}
		
			private function init(evt:Event):void {
                /* Set up full screen handler. */
                Application.application.stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);
                dispState = Application.application.stage.displayState;
            }
            
            private function fullScreenHandler(evt:FullScreenEvent):void {
                dispState = Application.application.stage.displayState + " (fullScreen=" + evt.fullScreen.toString() + ")";
                if (evt.fullScreen) {
                    /* Do something specific here if we switched to full screen mode. */
                    contBox.visible = false;
                    
                    menuBarMoveChk.visible = true;
                    menuBar.visible = true;
                    img.visible = true;
                    
                } else {
                    /* Do something specific here if we switched to normal mode. */
                    contBox.visible = true;
                    
                    menuBarMoveChk.visible = false;
                    menuBar.visible = false;
                    img.visible = false;
                }
            }
		
			private function toggleFullScreen(event:MouseEvent):void {
                try {
                    switch (Application.application.stage.displayState) {
                        case StageDisplayState.FULL_SCREEN:
                            /* If already in full screen mode, switch to normal mode. */
                            Application.application.stage.displayState = StageDisplayState.NORMAL;
                            break;
                        default:
                            /* If not in full screen mode, switch to full screen mode. */
                            Application.application.stage.displayState = StageDisplayState.FULL_SCREEN;
                            break;
                    }
                } catch (err:SecurityError) {
                    // ignore
                }
            }
            
            private function showMenuBar(evt:Event):void{
            	var chk:CheckBox = evt.target as CheckBox;
            	
            	//show menu bar controller move effect
            	moveeff.end(); 
            	
            	if(chk.selected){            	   	
	            	moveeff.yTo = Application.application.height - 30;
	            } else{
	            	moveeff.yTo = Application.application.height;
	            }
	            
            	moveeff.play();
            	
            }
			
		]]>
	</mx:Script>
	<mx:Move id="moveeff" target="{menuBar}" duration="500" />
	<mx:String id="dispState" />
	
	<mx:VBox id="contBox" y="10" width="100%" horizontalAlign="center">
		<mx:Label id="labal1" text="width={Application.application.width}"/>
	    <mx:Label id="labal2" text="height={Application.application.height}" />
	    <mx:Label id="labal3" text="displayState={dispState}" />
	
	    <mx:Button id="btn_fullscreen" 
	    	label="Toggle fullscreen" click="toggleFullScreen(event)" />
	</mx:VBox>
    
    <mx:Image id="img" source="{menuBar.horizontalList.selectedItem.data}" 
		maintainAspectRatio="true"
        horizontalAlign="center"
        width="100%"
        height="100%"
        visible="false"/>
	
	
	<ty:MenuBar id="menuBar" 
		x="0" y="{Application.application.height}" 
		visible="false"/>
	<mx:CheckBox id="menuBarMoveChk" x="10" y="{Application.application.height-50}" 
		visible="false" change="showMenuBar(event)"/>
</mx:Application>

소스를 보면 Fullscreen 모드일때 숨겨두었던 컴포넌트를 보여주고, 일반화면일때 보이던 컴포넌트를 숨기는 단순한 방법을 선택하였다. 더좋은 방법이 있을까??
Fullscreen 모드에 관한 html 설정은 아래 포스트를 참조하길..

참고글
2009/08/05 - [Programe Note/FLEX] - [FLEX] HorizontalList의 스크롤을 버튼으로 만들기
2009/04/14 - [Programe Note/FLEX] - [FLEX] 브라우져 풀스크린 모드 전환

도움이 되셨다면 추천 부탁드립니다.

728x90

HorizontalList를 이용하여 화면을 하나 만들어 보았다.

소스

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
layout="vertical" horizontalAlign="center">
	
    <mx:Label color="blue"
       text="A HorizontalList control displays items in a single row. "/>

<mx:HorizontalList 
    	id="CameraSelection" 
    	height="50" 
    	columnCount="5" 
    	columnWidth="30">
        <mx:dataProvider>
            <mx:Array>
                <mx:Object label="1"/>
                <mx:Object label="2"/>
                <mx:Object label="3"/>
                <mx:Object label="4"/>
                <mx:Object label="5"/>
                <mx:Object label="6"/>
                <mx:Object label="7"/>
                <mx:Object label="8"/>
                <mx:Object label="9"/>
                <mx:Object label="10"/>
                <mx:Object label="11"/>
                <mx:Object label="12"/>
                <mx:Object label="13"/>
                <mx:Object label="14"/>
                <mx:Object label="15"/>
                <mx:Object label="16"/>
                <mx:Object label="17"/>
                <mx:Object label="18"/>
                <mx:Object label="19"/>
                <mx:Object label="20"/>
            </mx:Array>
        </mx:dataProvider>
    </mx:HorizontalList>
                    
</mx:Application>

결과

위처럼 만들면 스크롤바가 눈에 거슬린다. 아니 차라리 없는편이 더 나을지도 모르겠다. HorizontalList을 어떻게 적용하느냐의 문제겠지만, 일단 지저분에 보이는것은 사실.

그래서 어떻게 만들면 보기좋게 만들까 고민을 하다가 버튼을 이용해서 스크롤의 기능을 대신하면 어떨까 라는 생각을 하게되었다.

일단 결과먼저..

보기에도 훨씬 깔끔하고 기존 스크롤보다 사용하기도 편해졌다. (물론 개인적인 생각...)
마우스 오버와 마우스 아웃 이벤트를 사용하였고, 여기에 Timer 이벤트로 지속적으로 마우스 오버이벤트를 발생 시켰다.

소스

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="vertical" horizontalAlign="center">

<mx:Script>
<![CDATA[
	import mx.graphics.ImageSnapshot;
	import mx.controls.Image;
	import mx.collections.ArrayCollection;
	
	private var timer:Timer = new Timer(scrollSpeed);;
	
	public var scrollSpeed:Number = 100;
						
	private function itemListScrollOverEventHdlr(event:MouseEvent):void{
		
		var btn:Button = event.currentTarget as Button;
		
		if(btn.id == "btn_next"){
			
										
			if(timer.running) {
				timer.stop();
			}
			
			timer = new Timer(this.scrollSpeed);
			timer.addEventListener(TimerEvent.TIMER, scrollNextFunction);
			
			timer.start();
			
		}else if(btn.id ==  "btn_previous"){
			
			if(timer.running) {
				timer.stop();
			}
			
			timer = new Timer(this.scrollSpeed);
			timer.addEventListener(TimerEvent.TIMER, scrollPreviousFunction);
			
			timer.start();
		}
		
	}
	
	private function stopScrolling(event:Event):void {
    	if(timer.running) {
			timer.stop();
		}
    }
    
    private function scrollNextFunction(event:TimerEvent):void{
    	if(horizontalList.horizontalScrollPosition < horizontalList.maxHorizontalScrollPosition){
    		horizontalList.horizontalScrollPosition++;
    	}
    }
    
    private function scrollPreviousFunction(event:TimerEvent):void{
    	if(horizontalList.horizontalScrollPosition > 0){
			horizontalList.horizontalScrollPosition--;
		}
    }
]]>
</mx:Script>
	
    <mx:Label color="blue"
       text="A HorizontalList Scroll Button control displays items in a single row. "/>

<mx:HBox verticalAlign="middle" horizontalAlign="center">
		<mx:Button id="btn_previous" 
			width="40" height="20" label="＜" 
			mouseOver="itemListScrollOverEventHdlr(event)" 
			mouseOut="stopScrolling(event)"/>
		<mx:HorizontalList 
	    	id="horizontalList" 
	    	height="30" 
	    	columnCount="3" 
	    	columnWidth="30"
	    	horizontalScrollPolicy="off">
	        <mx:dataProvider>
	            <mx:Array>
	                <mx:Object label="1"/>
	                <mx:Object label="2"/>
	                <mx:Object label="3"/>
	                <mx:Object label="4"/>
	                <mx:Object label="5"/>
	                <mx:Object label="6"/>
	                <mx:Object label="7"/>
	                <mx:Object label="8"/>
	                <mx:Object label="9"/>
	                <mx:Object label="10"/>
	                <mx:Object label="11"/>
	                <mx:Object label="12"/>
	                <mx:Object label="13"/>
	                <mx:Object label="14"/>
	                <mx:Object label="15"/>
	                <mx:Object label="16"/>
	                <mx:Object label="17"/>
	                <mx:Object label="18"/>
	                <mx:Object label="19"/>
	                <mx:Object label="20"/>
	            </mx:Array>
	        </mx:dataProvider>
	    </mx:HorizontalList>
				
		<mx:Button id="btn_next" 
			width="40" height="20" label="＞"
			mouseOver="itemListScrollOverEventHdlr(event)" 
			mouseOut="stopScrolling(event)"/>
	</mx:HBox>
    
                    
</mx:Application>

간단하게 요약하자면, 마우스가 해당 버튼으로 이동시 마우스 오버 이벤트를 발생하고, 마우스 오버 이벤트에서는 Timer 이벤트를 동작시켜 scrollNextFunction, scrollPreviousFunction 를 호출한다. 호출된 각각의 함수에서는 horizontalList의 dataProvider 갯수안에서만 움직이도록 코딩해주었다.

위 소스의 전체는 아래에...

HorizontalListScrollBtn.zip

소스를 가져가실땐, 댓글을 달아주세요..

728x90

Flex 에 관한 자료를 요청하여 최근 만든 자료를 기초로 다시한번 Flex를 정리 해보도록 하겠다. 이곳 저곳에서 자료를 모으고 정리를 하다보니 이제야 Flex에 대해서 좀 이해가 되는것 같다.

Flex에 대한 자료는 두개의 포스트로 만들예정이며 첫번째로 Flex의 개요..즉, Flex란 무엇인가에 대한 포스트를 기술 하도록 한다.

1. Adobe Flex 에 대해서 좀 알아봅시다! 2. Flex의 데이터 전송 방식은?

위 두가지 포스트로 Flex를 모두 정의하고 설명하기엔 무리가 있겠지만, 그래도 어느정도 Flex를 처음 접하는 사람이나 초보 개발자에게 유용한 정보를 제공하고자 한다.

1. Flex 등장

Flex의 등장은 컴퓨터 역사를 아니 인터넷 역사를 살펴 볼 필요가 있다. 초창기 컴퓨터는 어땠을까? 난 초등학교때부터 컴퓨터를 접해서 AT,XT 부터 사용한 유저인데, 이때까지만해도 마우스는 거의 필요하지 않았다. 즉, 현재 컴퓨터처럼 그래픽 기반이 아닌 텍스트 기반으로 이루어져 있었는데, 이때 미국에서 유닉스라는 시스템으로 컴퓨터와 컴퓨터를 연결해 통신을 하기 시작했다. 이렇게 컴퓨터와 컴퓨터를 연결하는 네트워크망이 점차 넓어 지기 시작하였다. (굉장히 축약적으로 설명하고 있음...;;;)

사람들이 텍스트 기반의 컴퓨터를 좀 더 그래픽적으로 만들수 없을까 하고 생각해서 만들어진 놈이 바로 윈도우이다. 윈도우를 이용하면 마우스로 거의 모든 조작이 가능해지며, 컴퓨터 통신 또한 윈도우를 기반으로 좀 더 그래픽적으로 만들고 싶어했다. 그 결과 클라이언트/서버 환경 애플리케이션이 등장하며, 이와 함께 HTML 기반의 월드와이드웹(www)이 등장하였다.

이렇게 진화한 www는 사람들의 요구에 부흥하여 여러가지 형채로 발전하는데, HTML 기반의 www는 페이지단위를 기본으로 사용하기 때문에, 대용량 데이터 처리 및 화면이 계속 바뀌어야 하는 불편함이 존재 하였다. 이런 방법은 클라이언트/서버 환경보다 오히려 불편함을 초래하였다. 그래서 클라이언트/서버의 유저인터페이스적인 부분과 www의 편의성을 수용한 리치 인터넷 애플리케이션(RIA)가 등장하였다.

구분	클라이언트/서버	웹	RIA(플렉스)
유저 인터페이스	자체 컴포넌트	HTML(jsp 등)	자체 컴포넌트
설치 프로그램	클라이언트모듈	없음	Flash Player
웹서비스 이용	낮다	높다	높다	웹의장점
대용량 데이터 처리	가능	제한적	가능	클라이언트/서버의 장점
오프라인 작업	가능	불가능	가능	클라이언트/서버의 장점
실시간 모니터링	가능	제한적	가능	클라이언트/서버의 장점
프로그램 배포	설치 프로그램 필요	없음	자동 배포	웹의장점
컴포넌트 개발	제한적	템플릿화	가능	클라이언트/서버의 장점
네트워크 사용량	적음	높음	적음	클라이언트/서버의 장점
레거시 시스템 연동	제한적	가능	가능	웹의장점

(클라이언트/서버, 웹, RIA 기술 비교, 출처: Flex3 서적 참고)

2. Flex 개요

RIA는 기존의 HTML에서 보여줄수 없는 다양한 유저 인터페이스를 웹브라우져에 만들어준다. 이러한 RIA에 맞게 개발된 기술이 바로 Flex 이다. Flex 이외의 여러가지 RIA 기술이 존재 한다. (ex: 실버라이트, Ajax, .... )

이렇게 RIA 요구에 맞게 개발된 언어가 바로 Flex 이다. Flex는 Flash의 기술을 기반으로 탄생하였다. 그래서 Flex로 만든 사이트와 Flash를 이용해 만든 사이트는 비슷한 UI를 가지고 있다. ActionScript(ECMAScript) 언어 기반으로 만들어졌으며, 보다 편리하게 사용하기 위해서 XML 기술을 도입하여 MXML 파일을 만들수 있도록 하였다. 언어셋기반은 UTF-8을 기본으로 한다. 기본적으로 클라이언트 PC에서는 FlashPlayer 엔진을 기반으로 동작하게 만들어졌다.

한마디로 Flex는 mxml 파일을 swf 파일로 만드는 컴파일러라고 생각을 하면 쉬울듯...(우리의 최종 목적은 swf 파일을 만드는 것이다.)

3. Flex 환경

구분	애플리케이션서버(FDS)	개발툴(Flex Builder 3)	사용자 환경
운영체제	¡ MS Windows 2000 Server, XP Professional, 2003 Server(32/64-bit) ¡ Red Hat Server 3.x and 4.x ¡ SUSE Linux Enterprise Server 9, on zSeries ¡ Solaris SPARC 9 and 10 ¡ IBM AIX 5.3 ¡ HP-UX 11i v2	¡ MS Windows 2000 Pro & Server XP(SP2) & XP Professional 2003 Server ¡ MAC ¡ Linux	¡ MS Windows 98, Me, 2000, XP, 2003, Vista ¡ Mac OS X v.10.1.x, 10.2.x, 10.3.x, 10.4.x ¡ Linux
웹애플리케이션서버(WAS)	¡ JRun 4 , Apache Tomcat 5.5.x ¡ BEA WebLogic 8.1 & 9 ¡ IBM WebSphere 5.x & 6.x ¡ JBoss 4.0.3 SP1 & 4.0.4 ¡ Oracle 10G AS (10.1.3) ¡ SAP WAS 6.40 ¡ TMAX JEUS	¡ 해당 무	¡ 해당 무
브라우저	¡ 해당 무	¡ 해당 무	¡ MS IE 5.5, 6.0 later Firefox 1.x, ¡ Mozilla 1.x, Netscape 7.x ¡ AOL 9, Opera 7.11 or later ¡ Safari 1.x or later

(출처 : Flex 설명 ppt 자료)

지금까지 Flex의 등장, 개요, 환경에 대해서 알아보았다. 간단하게 나마 정리를 해보았는데, 도움이 되었을지 모르겠다. 그럼 다음 포스트에서는 Flex의 데이터 전송 방식에 대해서 써보겠다.

(참고된 표의 출처가 문제가 될 경우에 자삭 하겠습니다. 영리적 목적으로 사용된것이 아님을 다시 한번 알려드리며, 불펌금지입니다.)

728x90

FLEX로 웹 프로젝트를 개발하고 그 프로젝트를 웹에 배포를 하기위해 ANT를 이용하기로했다. java프로젝트의 경우 ANT를 정말 유용하게 사용하고있는데, FLEX 까지 지원을 하다니...ANT 정말 대단하다. 하지만 ANT를 이용하여 자동화 빌드를 구축시, FLEX에서는 아래의 파일을 다운 받고, ANT 환경 설정에 FLEX에 관한 것들을 꼭 설정해야만 한다.

ant-contrib-1.0b3.jar

flexTasks.jar

Flex Tasks.jar 파일은 ANT에서 FLEX 를 빌더할때 사용하기위한 task 모음 라이브러리 이고, ant-contrib-1.0b3.jar 파일은 반복작업시 유용하게 사용사용되는 라이브러리다.

각각의 자세한 기능은 인터넷 검색을 통하여 찾을수있다. 아래 사이트를 참고하면 도움이 될것 같다.

http://beckscoot.tistory.com/5
http://www.ssial.com/entry/펌-Flex-Ant-Task를-이용한-자동화-빌드-구축하기
http://docs.ssen.name/entry/AS3-Friends-Eclipse-Ant-Task-로-인생-편하게-살기
http://blog.jidolstar.com/505

개인적으로 지돌스타님의 블로그를 추천한다.

아래는 지금 진행하고있는 프로젝트인데 ANT 로 FLEX 빌드하는 것을 만들어 보았다.

우선 bulid.properties 파일이다. 환경설정 및 디렉토리 관련 정보를 수록하였다.

# -----------------------------------------------------------------
# User-Defined Paths
#
# Modify these path values to reflect paths on your system
# -----------------------------------------------------------------

# The location of the Flex 3 SDK on your sytem.
flex3sdk.home.dir = C:/Program Files/Adobe/Flex Builder 3 Plug-in/sdks/3.2.0
flex3sdk.bin.dir = C:/Program Files/Adobe/Flex Builder 3 Plug-in/sdks/3.2.0/bin
flex3sdk.lib.dir = C:/Program Files/Adobe/Flex Builder 3 Plug-in/sdks/3.2.0/frameworks/libs

# Note that the locale dir uses the {locale} token at the end to specify the directory
# of language-specific files.  This is replaced by the compiler with the locale defined
# by the locale property below.
flex3sdk.locale = en_US
flex3sdk.locale.dir = C:/Program Files/Adobe/Flex Builder 3 Plug-in/sdks/3.2.0/frameworks/locale/{locale}

asdoc.exe = ${flex3sdk.bin.dir}/asdoc.exe
compc.exe = ${flex3sdk.bin.dir}/compc.exe
mxmlc.exe = ${flex3sdk.bin.dir}/mxmlc.exe

# The debug player is necessary here because it writes trace statements to a flashlog.txt
# file.  This allows us to examine the .txt file and determine the status of unit tests
# in an automated fashion.
flashDebugPlayer.exe = C:/Program Files/Adobe/Flex Builder 3 Plug-in/Player/10/win/FlashPlayer.exe

# -----------------------------------------------------------------
# Project Paths - DO NOT MODIFY
# -----------------------------------------------------------------
build.dir = ${basedir}/build
src.dir = ${basedir}/flex_src
lib.dir = ${basedir}/flex_libs

webcont.dir = ${basedir}/dist/WebContext
webcont.assets.dir = ${dist.dir}/assets
webcont.data.dir = ${dist.dir}/data
webcont.mo.dir = ${dist.dir}/mo
webcont.css.dir = ${dist.dir}/css

아래는 ANT 파일이다.

ant-flex-app.xml

<?xml version="1.0" encoding="utf-8"?>
<project name="TEST flex app" basedir="../">

<property file="./build/build.properties" />
	
	
	<target name="properties">
		<fail unless="asdoc.exe">The "asdoc.exe" property must be set in ${build.dir}/build.properties.</fail>
		<fail unless="compc.exe">The "compc.exe" property must be set in ${build.dir}/build.properties.</fail>
		<fail unless="mxmlc.exe">The "mxmlc.exe" property must be set in ${build.dir}/build.properties.</fail>
	</target>

<taskdef resource="flexTasks.tasks" classpath="./build/flexTasks.jar"/>
	<property name="FLEX_HOME" value="${flex3sdk.home.dir}"/>

<source-path path-element="${FLEX_HOME}/frameworks"/>

<compiler.library-path dir="${FLEX_HOME}/frameworks" append="true">
                <include name="libs" />
                <include name="../bundles/{locale}" />
            </compiler.library-path>

</mxmlc>
		<html-wrapper  
	        file="TEST.html"  
	        swf="TEST.swf"  
		    history="true"  
		    template="express-installation"  
		    output="${webcont.dir}"  
    	/>  
		
		
        <mxmlc
            file="${src.dir}/flight_info.mxml"
            output="${webcont.dir}/flight_info.swf"
        	incremental="true"  
        	warnings="false"
        	link-report="${basedir}/dist/report.xml"
        	services="${basedir}/WebContent/WEB-INF/flex/services-config.xml"
        	context-root="TEST"
        >
        	
        	<load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/>

<source-path path-element="${FLEX_HOME}/frameworks"/>

<compiler.library-path dir="${FLEX_HOME}/frameworks" append="true">
                <include name="libs" />
                <include name="../bundles/{locale}" />
            </compiler.library-path>

</mxmlc>
		<html-wrapper  
	        file="flight_info.html"  
	        swf="flight_info.swf"  
		    history="true"  
		    template="express-installation"  
		    output="${webcont.dir}"  
    	/>  
		
		
        <mxmlc
            file="${src.dir}/index.mxml"
            output="${webcont.dir}/index.swf"
        	incremental="true"  
        	warnings="false"
        	link-report="${basedir}/dist/report.xml"
        >
        	
        	<load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/>

<source-path path-element="${FLEX_HOME}/frameworks"/>

<compiler.library-path dir="${FLEX_HOME}/frameworks" append="true">
                <include name="libs" />
                <include name="../bundles/{locale}" />
            </compiler.library-path>

</mxmlc>
		
		
		<copy todir="${webcont.dir}" file="${basedir}/WebContent/index_Fullscreen.html" />
		<rename src="${webcont.dir}/index_Fullscreen.html" dest="${webcont.dir}/index.html"/>

</target>

</project>

ant-flex-module.xml

<?xml version="1.0" encoding="utf-8"?>
<project name="TESTflex app" basedir="../">

<property file="./build/build.properties" />
	
	
	<target name="properties">
		<fail unless="asdoc.exe">The "asdoc.exe" property must be set in ${build.dir}/build.properties.</fail>
		<fail unless="compc.exe">The "compc.exe" property must be set in ${build.dir}/build.properties.</fail>
		<fail unless="mxmlc.exe">The "mxmlc.exe" property must be set in ${build.dir}/build.properties.</fail>
	</target>

<taskdef resource="flexTasks.tasks" classpath="./build/flexTasks.jar"/>
	<property name="FLEX_HOME" value="${flex3sdk.home.dir}"/>

<source-path path-element="${src.dir}"/>
			<library-path dir="${lib.dir}" append="true">
				<include name="OpenZet.swc"/>  
			</library-path>
			
		</mxmlc>

</target>

</project>

참고로 올린것이다. 컴파일 해야하는것이 아직 많지가 않아서 루프를 돌리지 않고 하나하나 작업을 수행하였다.

아직 많이 부족하지만 그래도 잘 돌아간다. 좀 더 연구를 해서 더 간단하게 구성해야할듯 한다.

[ERROR 발생 해결 방법]

1. Embed tag에서 아래와 같은 에러가 났다.

(에러내용 - 트랜스 코드 할 수 없습니다.)

해결방법

에러난 코드부분을 찾아서 모두 절대경로로 바꿔주면 해결된다.

2. 기본 컴포넌트에서 아래와 같은 에러 발생

(에러내용 - 유형이 없거나 컴파일 타임 상수가 아닙니다. Type is not found or not a compile-time constant)

원인 - 지돌스타님의 답변입니다.

일단 컴파일 시점에 해당 클래스가 담긴 라이브러리가 추가되지 않은 것 같습니다. -include-libraries 등으로 추가해보세요. 같은 워크스페이스에 있다면 아래처럼 하시면 됩니다.

-include-libraries ${DOCUMENTS}/라mylib2/bin/mylib.swc ${DOCUMENTS}/mylib2/bin/mylib2.swc

아니면 -library-path 를 이용하셔도 됩니다.

두 옵션의 차이는 -include-libraries는 모든 SWF의 클래스를 애플리케이션에 등록하는 것이고, -library-path는 필요한 클래스만 등록합니다.

자세한 내용은 http://livedocs.adobe.com/flex/3/html/compilers_14.html

를 참고하세요.

해결방법

원인은 역시 지돌시타님의 답변에서 말한것 처럼 라이브러리가 추가되지 않은거였다. 그러면 여기서 문제..왜 Flex Bulider에서는 잘 동작을 하였지?? 그래서 아래를 확인해 봤다.

Flex Builder에서 사용하고있는 SDK의 디렉토리 위치와 build.properties에서 설정한 위치가 달랐다. (SDK의 위치를 지금까지 따로 설치한 SDK인줄 알고 있었음...;;;;;;) build.properties의 FLEX_HOME의 디렉토리를 Flex Builder가 사용하고있는 디렉토리로 바꿔주니 오류없이 컴파일 해결!!!!

3. OutOfMemoryError 발생

해결방법

ant 실행전에 MaxPermSize 옵션을 넣어준다. (전 512로 잡았음...아래 파일을 첨부한다.)

set ANT_OPTS=-XX:MaxPermSize=128m (Windows)
export ANT_OPTS=-XX:MaxPermSize=128m (Unix)

execAnt.bat

아래는 여러가지 컴파일러 에러에 관한 내용의 링크이다.

● ActionScript 3.0 컴파일러 에러

728x90

FLEX의 가장 큰 장점중에 하나가 바로 chart라고 생각을 합니다. 근데 솔직히 Flex의 기본 챠트만을 가져다가 쓰는 경우는 아마 드물거라 생각됩니다.

chart에 관해 하나씩 하나씩 정리를 했으면 좋을것 같아서 글을 몇자 적어봅니다. 기본적으로 챠트의 사용방법이나 기타등등의 설명을 하지 않겠습니다. 책에 나온 기본 사항만 이해하고 있으면 쉽게 적용 할수 있을거라 생각됩니다.

일단 아래 기본 chart를 작성 해보았습니다.

기본적인 라인챠트입니다. 소스는 아래와 같습니다.

FLEX에서 기본적으로 사용되는 DataTip의 모양은 위처럼 단순하고 심플한 느낌입니다. 하지만 DataTip 안의 표시 항목 및 스타일등을 제어하고 싶을 경우가 발생합니다. 이때는 dataTipRenderer 를 사용합니다. (여러가지 방법이 있지만 이 포스트에서는 이방법을 이용하도록 하겠습니다. 저도 아직 다른 방법으로 사용해본적이 없어서..;;;)

● DataTip

위에서 작성한 기본 챠트를 기준으로 dataTipRenderer 를 적용한 것입니다.

dataTipRenderer 속성을 이용하여 새로운 컨포넌트를 불러와서 사용하는 방법인데요. 아래 소스를 참고하시면 도움이 될것입니다.

실제로 DataTip을 표시해주는 컨폰너트 입니다.

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
	verticalAlign="middle"
	backgroundColor="0xFFFF00"
	borderColor="0xFF0000"
	borderStyle="solid"
	paddingTop="5"
	paddingBottom="5"
	paddingRight="3"
	paddingLeft="3"
	verticalGap="-2"
	cornerRadius="4" borderThickness="2"
	verticalScrollPolicy="off" horizontalScrollPolicy="off">
	
	<mx:Label text="{_FiledText}" width="100%" textAlign="center" fontWeight="bold" fontSize="12" />
	<mx:Label text="{_ValueText}" textAlign="center"/>
	
	<mx:NumberFormatter
		id="Formatter"
		precision="2"
		thousandsSeparatorTo=","
		decimalSeparatorTo="."
		rounding="nearest"
	/>
	<mx:Script>
		<![CDATA[
			import mx.charts.series.items.LineSeriesItem;
			import mx.charts.HitData;
			import mx.formatters.NumberFormatter;

[Bindable]
			private var _FiledText:String;

[Bindable]
			private var _ValueText:String;
			
			override public function set data(value:Object):void{
				
				var hd:HitData = value as HitData;

var itemLine:LineSeriesItem = hd.chartItem as LineSeriesItem;
				
				_FiledText = String(itemLine.xValue);
				
				_ValueText = "￦" + Formatter.format(String(itemLine.yValue));
				
			}//end set data
		]]>
	</mx:Script>
	
</mx:VBox>

728x90

FLEX로 프로그램을 만들다가 TabNavigator를 이용하여 클릭한 사물의 정보를 표시해주는 것을 만드는데 아래와 같은 에러 메세지가 떨어졌습니다.

TypeError: Error #1009: null のオブジェクト参照のプロパティまたはメソッドにアクセスすることはできません。

(TypeError: Error #1009: null 의 오브젝트 참조의 프롭퍼티 또는 메소드에 액세스 할 수 없습니다.)

무슨 문제 일까..;;

한참을 고민을 했는데요. 자세히 살펴보도록 해야 할것 같아서 좀 구굴링 해보았습니다.

참고 링크

● TabNavigator : TabNavigator 컨테이너는, child containers간에서의 이동을 위해서(때문에) TabBar 컨테이너를 수중에 넣는 것으로, ViewStack 컨테이너를 확장합니다.

일단 제가 만들려고 하는 것을 간단하게 설명 드리겠습니다. 왼쪽에 여러 비행기가 나옵니다. 이 비행기를 마우스로 클릭하면 그 비행기가 가지고 있는 정보를 오른쪽에있는 TabNavigator의 정보란에 뿌려 줍니다.

TabNavigator는 2개의 Tab으로 구성이 되어있는데 index 0번째는 그냥 항공기의 이름과 같은 정보이고, index 1은 항공기의 경로가 Datagrid로 표현이 됩니다.

간단하게 아래의 화면과 같습니다.

DB에서 정보를 읽어와서 Datagrid의 dataProvider를 접근하는데 #1009 오류가 발생했습니다. 더욱 신기한건 실후 처음에만 에러가 나고 그 후엔 데이터가 잘 들어간다는 겁니다.

처음에 만들어주지 않아 null 에러가 나는것 같은데, 그럼 처음에 어떻게 만들어줄까??

결국 구글링으로 검색 성공~!!!

검색한 사이트는 아래 입니다.

http://www.actionscript.org/forums/showthread.php3?t=144945

creationPolicy="all" 로 해라..인데요. 처음에 실행할때 히든으로 감춰진 Tab은 아직 생성이 되어있지 않아서 그런건데 이것은 creationPolicy으로 해결할수 있다..뭐 그런 내용입니다.

creationPolicy의 자세한 내용은 아래 문서를 참고 하세요.

● FLEX/AIR 한글화 문서

위 구글링 결과로 아래와 같이 코드를 넣으니 손쉽게 해결 되었습니다.

728x90

오늘 컴퓨터를 키고 지돌스타님의 블로그 글을 살피던중 Flash Builder 4 Beta가 배포되었다는 소식을 접했습니다. 아직 FLEX Builder 3도 마스터하지 못했는데, 벌써 4가 ...;;

다들 아실지 모르겠지만, Adobe에서 FLEX SDK 4 (Gumbo) 부터는 FLEX Builder가 아닌 Flash Builder로 배포한다고 했습니다.

참조링크

● Flex Builder 3의 다음 버전, Flash Builder 4

● Flash Builder 4 Beta 다운로드

아직 3도 버거운 상태라 잠시 4는 미뤄두겠지만, 4에서도 3를 사용할수 있다고 합니다. 그리고 아직 4는 Beta라는 점... 빨리 습득하고 싶지만, 그래도 기본부터 차근차근 올라갈 생각입니다. FLEX4로 넘어가는 날을 고대하며..

Flash Builder 4 Beta에 대한 정보는 지돌스타님의 블로그에 자세히 나와있습니다. 참고하면 좋은 자료가 될것 같습니다.

몇가지 기능을 봤는데요. 우선 DB작업에 대한 부분이 많이 편해질것 같다는 생각이 됩니다. (아직 해보지 않았기 때문에..;;;;)

728x90

FLEX를 사용하다보면 수많은 요청에 따라서 DataGrid를 조작해야하는 일이 생긴다.

그래서 그런지 DataGrid를 이용한 컴포넌트들이 여러곳에서 쉽기편하게 사용될수 있도록 조작되고 있는데, 그중 가장 대표적인것이 구글프로젝트에서 진행하는 TreeGrid , OpenZet.org 의 여러가지 DataGrid 관련 컴포넌트들이 있다. 하지만 이것과 달리 고객에서 요청하는 특별한 케이스의 DataGrid를 만들어야 하는 경우가 있다.

여러가지 OpenSource를 이용하여 작업을 해도 상관은 없지만, 혹시 모를 경우를 위해서 기본 DataGrid를 이용하여 상황에 맞는 커스텀한 DataGrid를 만들어보자.

일단 그 첫번째로 DB에서 받아온 데이터를 그리드에 표시할때 하나의 셀에 컬럼을 여러개 표시하는 경우이다.

아래 주소의 레퍼런스를 참고하면 좋은 정보가 될것이다.

mx.controls.DataGrid

mx.controls.dataGridClasses.DataGridColumn

두번째 예제로 하나의 컬럼에만 링크를 거는 예제를 만들어 보았다.

위 Datagrid를 보면 No를 클릭하였을 경우엔 링크가 걸리지 않지만, NAME 컬럼을 클릭하면 새로운 창으로 링크를 연다.
여기서 링크에 관련된 부분은 아래 부분이다.

 
			public function itemClickHdlr(data:Object):void{

				var contentURL:String = data.URL;
				
				navigateToURL(new URLRequest(contentURL), "_blank"); 
				// 선택된 글을 새창으로 띄우기	
				Alert.show("새창을 띄웠습니다.", "알림");
			}

그리고 이번 포스트의 핵심 주제인 Datagrid 부분이다.

위 소스에서 주위해서 봐야 하는 부분이 있는데 바로 Label 필드의 click 이벤트 부분이다.
itemRenderer를 사용할 경우 본문의 Script 문의 함수를 가져다 쓸 경우 outerDocument.itemClickHdlr(data) 이런 식으로 쓴다는 것을 기억하자.
(공통되는 부분을 이렇게 사용하면 좋을 것같다. 이것을 몰라서 20개가 넘는 itemRenderer안에 하나하나 Script를 썼던 적이 있다.. 혼자 개 고생 한건가???)

아래는 전체 소스이다.

728x90

FLEX를 사용하다보면 수많은 요청에 따라서 DataGrid를 조작해야하는 일이 생긴다.

그래서 그런지 DataGrid를 이용한 컴포넌트들이 여러곳에서 쉽기편하게 사용될수 있도록 조작되고 있는데, 그중 가장 대표적인것이 구글프로젝트에서 진행하는 TreeGrid , OpenZet.org 의 여러가지 DataGrid 관련 컴포넌트들이 있다. 하지만 이것과 달리 고객에서 요청하는 특별한 케이스의 DataGrid를 만들어야 하는 경우가 있다.

여러가지 OpenSource를 이용하여 작업을 해도 상관은 없지만, 혹시 모를 경우를 위해서 기본 DataGrid를 이용하여 상황에 맞는 커스텀한 DataGrid를 만들어보자.

일단 그 첫번째로 DB에서 받아온 데이터를 그리드에 표시할때 하나의 셀에 컬럼을 여러개 표시하는 경우이다.

아래 주소의 레퍼런스를 참고하면 좋은 정보가 될것이다.

mx.controls.DataGrid

mx.controls.dataGridClasses.DataGridColumn

아래와 같은 예제를 만들어 보았다.

dataGrid 마지막 컬럼의 "制御対象空域" 부분을 보면 ArrayCollection 의 데이터 ETC1, ETC2, ETC3 를 하나의 셀에 보여지게 하는것을 확인 할수 있다.

소스는 아래를 참고..

728x90

저작자표시 비영리 변경금지

Typiler

flex

[AIR Programe] ActionScript3 VO Generator v1.02

[FLEX] fullscreen 기능을 이용한 응용

[FLEX] HorizontalList의 스크롤을 버튼으로 만들기

Adobe Flex 에 대해서 좀 알아봅시다!

[FLEX] Flex ANT Task를 이용한 자동화 빌드 구축

[FLEX / CHART] dataTipRenderer를 이용한 DataTip 변경

[FLEX] TabNavigator 의 히든텝의 Datagrid 조작시 에러 발생 해결

[FLEX4] Flash Builder 4 Beta 배포

[FLEX] Datagrid 하나의 컬럼에만 링크걸기

[FLEX] DataGrid 컬럼 합쳐서 표시하기

+ Recent posts

티스토리툴바