'Programe Note/FLEX_AIR' 카테고리의 글 목록

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

AIR로 개발을 진행하면서 참고해야할 로컬 데이터베이스의 URL입니다.

로컬에 데이터베이스 파일을 만들어 실제 데이터베이스를 사용하는 것과 같이 SQL을 날려서 사용하는 아주 편리한 놈입니다. 따로 데이터베이스를 설치해줄 필요도 없고, 파일로 관리할수도 있고...;;

단, 서버-클라이언트간 통신프로그램을 만든다고하면 유용하지 않습니다.;;;

사이트는 아래를 참고해주세요.

로컬 데이터베이스의 SQL 참조 사이트

AIR를 공하는데 도움이 됩니다.

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

챠트를 만들다보니 데이터가 큰 챠트는 문제가 있음을 발견하였다. 스크롤이 없어서 챠트가 화면에 표시될때, 눈에 보이지 않을정도로 작아진다는 것이다. openzet의 컨포넌트중 ChartZoomer를 이용하면 되겠지만, 이것또한 줌을 조작해야하는 공간이 필요하다. 그냥 단순히 스크롤을 만들고 싶다. 구글링을 하던중 몇가지 발견을 하여 여기에 포스팅을 한다.

지난 포스트에 이어서 두번째 방법으로 http://www.iwobanas.com 블로그에 소개된 방법을 사용해 보았다.

이 포스트 역시 내가 개발한 것이 아니라, 소스는 해당 블로그에서 받고, 내용을 참고하면 좋을것 같다.

소스 다운로드 : http://www.iwobanas.com/2009/06/scrollable-chart-axis-renderer/

http://www.iwobanas.com/2009/07/scrolling-and-zooming-chart-with-chartscroller/

지난번 포스트에서 소개한 스크롤 챠트와는 모양이 좀 다르다.

일단 데이터가 적거나 많거나 사용이 가능하며, 스크롤이 전혀 나오지 않다. 하지만 챠트를 마우스를 이용하여 드레그 해보자. 그럼 챠트가 이동하는 것을 볼수 있을것이다. 또한 마우스의 휠을 이용하면 크기가 확대/축소가 가능하다.

아래 챠트도 한번 보자.

위 차트는 아까것과 달리 X축에만 이벤트가 걸려있다. 마우스를 X축에 올리면 마우스 커서가 손모양으로 바뀌며, 드레그와 휠 이벤트 준비가 된다.

위 사이트에 들어가서 잘 읽어보면 알겠지만, 아직 미완성인것 같다. 문제점이 좀 있다는 이야기..

가장 큰 문제는 ... 실제로 데이터가 없는 부분까지도 마우스 드레그와 휠 동작이 된다. 만약 사용하고자 한다면, 이분을 손보고 사용을 해야할것 같다.

[FLEX CHART] 스크롤 챠트 - 1 [FLEX CHART] 스크롤 챠트 - 2

728x90

챠트를 만들다보니 데이터가 큰 챠트는 문제가 있음을 발견하였다. 스크롤이 없어서 챠트가 화면에 표시될때, 눈에 보이지 않을정도로 작아진다는 것이다. openzet의 컨포넌트중 ChartZoomer를 이용하면 되겠지만, 이것또한 줌을 조작해야하는 공간이 필요하다. 그냥 단순히 스크롤을 만들고 싶다. 구글링을 하던중 몇가지 발견을 하여 여기에 포스팅을 한다.

일단 첫번째 방법으로 http://www.connectedpixel.com 에 소개된 방법을 이용해 보았다.

아래는 아무것도 쓰지 않은 그냥 일반 챠트다.

수많은 데이터가 존재하여 한눈에 차트를 볼수는 있지만, 정확히 무슨 내용인지 알기 힘들다는 단점이 있다. 그럼 여기에 스크롤바를 달아보자.

스크롤이 달리니 한결 보기 편해졌다. 하지만 뭔가 이상하지 않나?? 그렇다... 바로 Y축이 스크롤을 할때 사라진다는 점이다. Y축이 사라지기 때문에 스크롤을 하여 가장 마지막 데이터를 볼때, 어떤 내용인지 잊어버릴수 있다.

그럼...이것을 다른 방식의 스크롤을 사용해 보자.

Y축이 사라지지 않게 스크롤을 X축에 넣어서 만들었다. 훨씬 보기 편하며, 간결해진 모습이다. 하지만, 문제가 없을까?? 데이터를 한눈에 보고싶을땐?? 축소가 안되는것일까?? 음.. 여러가지 문제가 있다. 그러나 걱정 말자. 친절하게 아래와 같은 챠트도 있으니...

위 챠트는 줌을 이용하여 크기까지 변경이 가능하게 되어있으며, 스킨까지 적용하게 되어있다.

이러한 방식으로 X축이 아닌, Y축에 스크롤을 넣는 방법도 있다.

이렇게 챠트에 스크롤을 넣어서 만드는 방법이 있다는 것을 알게되었다. 소스는 위 사이트에서 직접 다운로드를 할수 있으며, 내가 만든 소스가 아니기 때문에 여기에 소스를 올리지 않을 것이다.

소스 다운로드 : http://www.connectedpixel.com/blog/scrollingcharts

그러나 위 챠트도 몇가지 문제점이 있다.

1> 현재 예제를 만들기 위해서 그랬을지는 모르겠지만, XML을 사용하고 있다. 이것을 ArrayCollection 으로 바꾸면 동작을 하지 않는다.

2> 내가 새로만든 커스텀한 챠트에 적용이 안된다.

위 문제가 상관이 없다고 생각한다면, 누구나 쉽게 적용할수 있을것이다.

[FLEX CHART] 스크롤 챠트 - 1 [FLEX CHART] 스크롤 챠트 - 2

728x90

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

Flex에 대한 자료는 두개의 포스트로 만들예정이며 두번째로 Flex의 데이터 전송 방식에 대해서 알아보록 하겠다. 첫번째 포스트를 올리고 상당히 지난 시점에서 올리게되었는데, 나도 무진장 바쁘다..;;;;

이 자료는 Flex에 대한 자료 요청이 있어서 내 나름대로 하나씩 정리해며, 작성한 문서를 기준으로 포스팅을 하는것이다. 일부 자료는 인터넷에 올라온 것을 가져다 썼으며, 절대 상업적인 이득을 취득함이 아닌 단순 정보 전달에 해당하여 올림을 알려드린다. 만약 문제가 발생한다면 자삭처리 하겠다.

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

Flex에서 데이터를 처리하는 방식은 어떤 방식이 있을까? 앞장에서 살펴 본 Flex 개요에 의하면 클라이언트/서버의 장점인 대용량 데이터 처리가 용이하다고 나왔다. 과연 어떤 부분에서 이런 이야기가 나왔을까?

크게 Flex의 데이터 처리 방식은 3가지로 나누어 볼수가 있다. 모든 Flex 서적에서 다루고 있는 내용이지만 다시한번 설명을 해보도록 하겠다.

(1) 클라이언트 사이드만의 어플리케이션
(2) HTTPService 및 WebService를 사용한 데이터 액세스
(3) 라이브사이클 데이터 서비스를 사용한 데이터 액세스

(1) 클라이언트 사이드만의 어플리케이션

Flex는 HTML, ColdFusion, PHP 및 그 외의 종류의 Web 페이지에 포함된 SWF 파일로 배치된다. 유저가 Flex 어플리케이션을 실행하려면, 그 어플리케이션에 관련지을 수 있었던 Web페이지를 요구한다. 그러면 SWF파일이 브라우저에 다운로드되어 Flash Player로 실행횐다. 대부분의 Flex 어플리케이션은 어느 정도의 서버 interaction을 포함하고 있지만, 클라이언트 상에서의 실행시에 srandalone기능을 제공하는 Flex 어플리케이션을 적성할 수도 있다.

(2) HTTPService 및 WebService를 사용한 데이터 액세스

Flex의 HTTPService 와 WebService 태그를 사용하면, 리모트 서버로부터 데이터를 취득할 수가 있다. 리모트 프로듀서 콜(RPC)컴포넌트라고 불리는 이러한 태그를 사용하면, 어플리케이션이 리모트 서버와 데이터를 제공 받거나 어플리케이션으로부터 서버에 데이터를 송신할 수 있다. Web 어플리케이션은 적절한 데이터를 취득해, XML등으로 클라이언트 어플리케이션에 돌려준다.

(3) 라이브사이클 데이터 서비스를 사용한 데이터 액세스

라이브사이클 데이터 서비스(LCDS, 구 Flex 데이터 서비스)는 Java 어플리케이션 서버나 Java컨테이너로 실행되어 다음과 같은 기능을 제공한다.

- 확장 데이터 서비스

> 복수 클라이언트 간의 데이터 공유

> 클라이언트간의 데이터 통신의 지원

> 자동 서버 데이터 푸쉬

> 서버의 Resource에 액세스 하는 클라이언트의 인증

> 데이터서비스 로깅

- 확장 RPC 기능

라이브사이클 데이터 서비스는 Adobe 제품으로 돈을 내고 구입을 하여한다. 비슷한 기능을 구현한 오픈소스인 BlazeDS 라는 오픈프로젝트가 있는데, 라이브사이클 데이터 서비스의 일부기능을 제외한것을 구현했다. 현재 거의 모든 기능이 대부분 구현됬다고 봐도 무방하며, 아래 사이트를 찾아가서 참조하면 좋을것 같다.

http://livedocs.adobe.com/blazeds/1/blazeds_devguide/

정말 간단하게 알아본 Flex의 데이터 전송 방식... 알면 힘이되는 정보이니 더욱 자세한 자료는 인터넷이나 서적을 통해서 알아보자!!

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

Typiler

Programe Note/FLEX_AIR

[AIR Programe] ActionScript3 VO Generator v1.02

로컬 데이터베이스의 SQL

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

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

[FLEX CHART] 스크롤 챠트 - 2

[FLEX CHART] 스크롤 챠트 - 1

Flex의 데이터 전송 방식은?

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

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

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

+ Recent posts

티스토리툴바