'UIComponent' 태그의 글 목록

'UIComponent'에 해당되는 글 2건

2008. 5. 13. 20:35

Canvas에 cornerRadius="20" 을 주어서 테두리를 라운드하게 변환한다고 하더라도, 자식 객체인 Button이 라운드 처리된 영역을 빠져나가면 아래와 같이 Button이 라운드 처리된 영역을 빠져나와있는 것을 보실 수 있습니다.

라운드로 처리하더라도 벗어나는 자식객체가 문제가 됩니다.
그렇다면, 만약에 컴포넌트가 원형이어야 된다면 어떨까요? 라운드 처리된 곳도 빠져나가는데, 원형의 컴포넌트가 필요하다면?
원형을 벗어나는 영역은 화면에서 나타나지 않게 하면 간단하게 해결 할 수 있습니다. 이럴 때 mask를 쓰면 됩니다.

mask는 DisplayObject 의 속성으로 mask로 할당된 DisplayObject 의 영역만큼만 해당 컴포넌트를 보여주게 됩니다.
나머지는 화면에 나타나지 않게 되죠. 아래는 레퍼런스에 있는 마스크 예제입니다.

package {
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.text.TextField;

public class maskExample extends Sprite
	{
		private var tf:TextField;
		private var square:Sprite;
		
		public function maskExample()
		{
			tf = new TextField();	
			tf.text = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, " 
			            + "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "
			tf.selectable = false;
			tf.wordWrap = true;
			tf.width = 150;
			addChild(tf);							// TextField 추가
			
			square = new Sprite();
			square.graphics.beginFill(0xFF0000);
			square.graphics.drawRect(0, 0, 40, 40);	// 네모형태로 그리기
			addChild(square);						// 마스크용 Sprite 추가
			
			tf.mask = square;						// TextField의 마스크를 square로 설정
			
			tf.addEventListener(MouseEvent.MOUSE_DOWN, drag);
			tf.addEventListener(MouseEvent.MOUSE_UP, noDrag);	// 마스크 움직일 수 있도록 설정

function drag(event:MouseEvent):void {
			    square.startDrag();		// 마스크 움직이기
			}
			function noDrag(event:MouseEvent):void {
			    square.stopDrag();		// 마스크 멈추기
			}

}

}
}

▲ 네모난 mask를 Drag 해보세요. mask 영역만큼만 TextField가 보입니다.

그럼 위에서 보신 mask를 이용하여 Canvas를 상속받은 myCircleCanvas라는 이름의 둥근 컴포넌트를 만들도록 하겠습니다.
위의 소스에서는 mask를 Sprite 객체를 이용하였습니다만, Flex에서는 Canvas에 Sprite 객체를 addChild 하면 오류가 나므로(Canvas가 상속하고 있는 Container에 addChild 시 IUIComponent가 구현되어있어야 하므로), UIComponent를 이용하도록 하겠습니다.

( 참고: 왜 Sprite는 Canvas에 addChild 안되는 걸까요? )

UIComponent

FlexSprite

Sprite

DisplayObjectContainer

InteractiveObject

DisplayObject

레퍼런스에서 마스크로 사용하였던 Sprite 나 현재 mask로 사용하는 UIComponent는
둘 다 DisplayObject를 상속하고 있으므로 mask 로 할당하여도 됩니다.

아래는 myCircleCanvas 클래스의 코드입니다.
컴포넌트의 구분을 위해 결과물에는 backgroundColor 값을 주었습니다.

package
{
	import flash.events.MouseEvent;
	import mx.containers.Canvas;
	import mx.core.UIComponent;

public class myCircleCanvas extends Canvas
	{
		private var circleMask:UIComponent;			// 마스크용 UIComponent
		
		public function myCircleCanvas()
		{
			super();
			
			circleMask = new UIComponent();
			
			this.addEventListener(MouseEvent.MOUSE_DOWN, drag);
			this.addEventListener(MouseEvent.MOUSE_UP, noDrag);
				// 컴포넌트 드래그해서 움직이게 함. (너무 소스가 허전해서 넣었;;)
		}
		
		override protected function createChildren():void
		{
			super.createChildren();

this.addChild(circleMask);	//마스크를 추가
		}
		
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
			super.updateDisplayList(unscaledWidth, unscaledHeight);
			
			/*
			*	컴포넌트의 크기변화에 따라 mask도 크기 변하도록 제어
			*/
			circleMask.graphics.clear();		
			circleMask.graphics.beginFill(0xFF0000);	
			circleMask.graphics.drawCircle(unscaledWidth>>1, unscaledHeight>>1, unscaledWidth>>1);
				//마스크를 원형으로 그림 
				
			this.mask = circleMask;	// 마스크 설정
		}
		
		private function drag(evt:MouseEvent):void {
		    this.startDrag();	// 움직이게
		}
		private function noDrag(evt:MouseEvent):void {
		    this.stopDrag();	// 그만 움직이게
		}
		
	}
}

결과물은 myCircleCanvas 객체에 Button을 올려놓은 모습입니다.
둥근 mask 영역 밖으로 벗어나는 Button의 영역은 화면에서 나타나지 않음을 확인하실 수 있습니다.
이상 mask를 이용하여 둥근 컴포넌트를 생성하는 것에 대해 간단하게 다루어 보았습니다.

'Dev > Flex' 카테고리의 다른 글

[Flex] 더블클릭(doubleClick)을 사용해보자. (6)	2008.06.03
[Flex] XML을 String 으로 만들기 (15)	2008.05.28
[Flex] DataGrid 의 아이템을 클릭할때는 itemClick 이벤트를 사용하자. (Tip) (12)	2008.04.22
[Flex] 수동으로 이벤트 발생시키기 - dispatchEvent() (7)	2008.03.17
[Flex] 일정시간 후에 자동으로 종료되는 Alert (5)	2008.01.24

Trackback : Comment

[FLEX] 왜 Sprite는 Canvas에 addChild 안되는 걸까?

2007. 12. 4. 10:33

[Dev/Flex]

왜 Sprite는 Canvas에 addChild 안되는 걸까요?

- Sprite는 무엇인가요?

먼저 Sprite는 무엇인지 잘 모르는 분들을 위해 설명을 곁들여보죠.

ActionScript 3 에서는 Sprite Class라 불리우는 새로운 Class를 사용하게 되는데... Sprite Object는 Movie Clip과 유사합니다만, Timeline이 없다는 것이 큰 차이점입니다. Sprite는 timeline을 요구하진 않는 곳에서 쓰일 수 있는 적합한 Base Class 입니다.

인용 : 지돌스타님 블로그

물론, Sprite를 FLEX에서 사용하고 싶다면 UIComponent에 addChild 하여서 사용하면 됩니다. (참고 : 지돌스타님 블로그)

하지만, UIComponent를 상속하고 있는 Canvas에는 왜 addChild가 되지 않는가 하는 것이 이 글의 주요 주제죠.

- Sprite을 Canvas에 addChild 하면 ?

여기서 분명한 것은 Sprite를 Canvas에 addChild하면
"TypeError: Error #1034: 유형 강제 변환에 실패했습니다. flash.display::Sprite@45cd351을(를) mx.core.IUIComponent(으)로 변환할 수 없습니다."
라고 컴파일시에 Error가 난다는 겁니다.

오류가 난 곳을 따라가보면 Canvas가 상속하고 있는 Container 클래스의 addingChild 메소드에서 나는 것을 알 수 있습니다.

override mx_internal function addingChild(child:DisplayObject):void
{
// Throw an RTE if child is not an IUIComponent.
var uiChild:IUIComponent = IUIComponent(child); // 이 줄에서 오류가 납니다.
...
}

IUIComponent 타입인지 확인하고 있는데, Sprite는 IUIComponent type이 아니기때문에 오류가 나고 있는 것입니다.

- IUIComponent는 무엇인가요?

그럼 IUIComponent는 무엇일까요?
클래스 안에 있는 주석으로 다음과 같이 설명되고 있습니다.

The IUIComponent interface defines the basic set of APIs that you must implement to create a child of a Flex container or list.

FLEX의 Visual Component의 기본은 UIComponent 입니다.
IUIComponent

인터페이스는 이 UIComponent 가 구현하고 있는 인터페이스로서 위의 설명에 따르면,
Flex의 Container 나 List의 child들은 IUIComponent 인터페이스를 구현하고 있어야 된다고 합니다.
(아니면 위 에러메세지 처럼 IUIComponent 타입이 아니라서 오류나죠 ㅡㅂㅡ)

- 그렇다면 Canvas는?

Canvas

Container

UIComponent

FlexSprite

Sprite

DisplayObjectContainer

InteractiveObject

DisplayObject

EventDispatcher

Object

인용 : Flexdocs.kr

위의 관계대로 만들어진 Canvas에는 IUIComponent가 구현된(다시 말해 UIComponent를 상속받는) 클래스들은
모두 addChild 될 수 있으나 그렇지 않은 클래스는 addChild 되지 못하게 됩니다.
Sprite는 IUIComponent 인터페이스를 구현하고 있지 않으므로
Container에는 addChild 할 수 없는 것입니다.

- Tip

Sprite를 Canvas 같은 Container 에 추가하여야 하는 일이 생긴다면 아래와 같이 클래스 만드셔서 addChild 하셔도 괜찮을 것 같네요. :)

package
{
import flash.display.Sprite;
import mx.core.UIComponent;

public class mySprite extends UIComponent
{
private var sprite:Sprite;

public function mySprite()
{
   super();

   sprite = new Sprite();
   }

override protected function createChildren():void
{
super.createChildren();

this.addChild(sprite);
}
.....
}
}

참고자료 :
[팁] Sprite 사용법
Flex 2 Beta 3 : Sprites

'Dev > Flex' 카테고리의 다른 글

[Flex] 수동으로 이벤트 발생시키기 - dispatchEvent() (7)	2008.03.17
[Flex] 일정시간 후에 자동으로 종료되는 Alert (5)	2008.01.24
[FLEX] Coloring the Background of Cells (20)	2007.11.20
[FLEX] XML의 값을 Boolean 값으로 캐스팅하는 방법? (1)	2007.11.16
[FLEX] 간단한 아이템 렌더러(Item Renderer)를 만들어보자 (4)	2007.11.12

Trackback : Comment

'Dev > Flex' 카테고리의 다른 글

'Dev > Flex' 카테고리의 다른 글

티스토리툴바