[Flex] 자식 컴포넌트에 CSS를 적용시키는 통상적인 방법 소개 -지돌스타 블로그-

[Flex] 자식 컴포넌트에 CSS를 적용시키는 통상적인 방법 소개

2007/12/10 13:57

3 Comments

[공지]이미지나 링크가 깨졌다면 댓글 부탁드립니다.

이 글은 Slider뿐 아니라 Flex 기본 컴포넌트와 유저 커스텀 컴포넌트에 직접적으로 관련되어 있는 내용이므로 반드시 숙지할 필요가 있겠다.

-----------
다음 예제는 Flex의 HSlider (또는 VSlider) 컨트롤의 CSS(Cascading Style Sheets)를 사용하는 방법을 보여주고 있다.

MXML 코드 (Language : xml)

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">

<mx:Style>
@font-face{
src: url("./fonts/arial.ttf");
fontFamily: "ArialEmbedded";
}

.MyLabel {
fontFamily: ArialEmbedded;
fontSize: 15;
fontWeight: normal;
}

.MyDataTip {
backgroundAlpha: 1.0;
backgroundColor: haloBlue;
color: white;
cornerRadius: 10;
fontWeight: bold;
letterSpacing: 1;
}

.MySlider {
dataTipOffset: 0;
dataTipPrecision: 0;
dataTipPlacement: left;
dataTipStyleName: MyDataTip;
showTrackHighlight: true;
labelStyleName: MyLabel;
}
</mx:Style>

<mx:Array id="labelArr">
<mx:Number>-10</mx:Number>
<mx:Number>0</mx:Number>
<mx:Number>10</mx:Number>
<mx:Number>20</mx:Number>
</mx:Array>

<mx:HSlider id="slider"
minimum="-10"
maximum="20"
labels="{labelArr}"
snapInterval="1"
tickInterval="10"
styleName="MySlider" />

</mx:Application>

Slider는 Child로 SliderDataTip과 SliderLabel을 사용한다.(물론 Button을 확장한 SliderThumb등 및 Skin관련 들도 포함되어 있다. SliderDataTip은 ToolTip을 상속받은 것이고 Label은 SliderLabel을 상속받아 만든 것이다. 그 안에 기능은 아주 단순하게 되어 있기 때문에 부모 클래스와 다른 점이 없다. 단지 Slider에서 사용하는데 적절한 Class명으로 변경시켜준 것이다. 궁금하다면 mx.controls.sliderClasses에 있는 SliderLabel.as와 SliderDataTip.as을 열어보기 바란다.
이렇게 기능이 포함안되는데 상속하는 이유중에 하나는 Slider의 Child에 CSS를 Class단위로 적용할 때 유용하기 때문이다. 즉, CSS에서 ToolTip{}을 사용하면 다른 컴포넌트의 ToolTip에 전부 적용되지만 SliderDataTip{}을 하면 다른 컴포넌트의 ToolTip이 아닌 Slider의 ToolTip에만 CSS를 적용할 수 있는 것이다.

위 코드에서 중요하게 볼 점은 빨간부분이다.
Child에 CSS를 적용시키기 위한 방법으로 위와 같은 방법을 쓰는 것이다.
CSS는 inherit(상속)될 수도 있고 안될 수도 있다. 폰트크기나 색등은 inherit가 된다. 하지만 보통 특정한 컴포넌트는 상속되지 않는다. 상속되지 않은 Style인 경우 부모안에 있는 자식 컴포넌트에 Style을 직접 적용할 방법은 없다.

Style Metadata에 [Style(name="fontSize", type="uint", inherit="yes")]로 되어 있다면 fontSize는 자식으로 상속된다. 가령 Panel에 fontSize를 적용하면 그 자식 컴포넌트의 fontSize도 적용되듯이 말이다.
하지만 Style Metadata의 inherit속성이 no(이것이 default) 라면 부모에서 지정해도 자식 컴포넌트에게는 적용이 되지 않는다. 가령 backgroundColor같은 것이다. 상식적으로도 이 속성은 자식으로 상속되지 않는 것이 당연하지 않을까?

이와 같이 부모컴포넌트가 자식 컴포넌트의 상속되지 않는 Style을 적용시키는 방법으로
Flex SDK에 있는 컴포넌트들은 아래와 같은 방법으로 자식 컴포넌트의 style을 적용시킨다.

Slider.as 일부 (Language : java)

override public function styleChanged(styleProp:String):void
{
var anyStyle:Boolean = styleProp == null || styleProp == "styleName";

super.styleChanged(styleProp);

...(생략)

if (styleProp == "labelStyleName" || anyStyle)
{
   labelStyleChanged = true;
   invalidateProperties();
}

...(생략)

invalidateDisplayList();
}

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

...(생략)

if (labelStyleChanged && !labelsChanged)
{
   labelStyleChanged = false;

   if (labelObjects)
   {
var labelStyleName:String = getStyle("labelStyleName");
n = labelObjects.numChildren;
for (i = 0; i < n; i++)
{
   ISimpleStyleClient(labelObjects.getChildAt(i)).styleName = labelStyleName;
}
   }
}

...(생략)

}

위에 보면 두개의 함수 styleChanged()와 commitProperties()가 있다. 둘다 UIComponent에서 제공되는 함수로 styleChanged()는 style이 바뀌면 자동으로 호출되며 바뀐 style속성 key값이 넘어온다. 위 코드에서 이 키값이 없다면 전체 Style이 변경된 것으로 하고 키 값이 있으면 그 키값에 해당되는 style만 적용하도록 하게 만들어져 있는데, 특별히 label인 경우 labelStyleName이 변경된 경우에 commitProperties()에서 label.styleName 속성을 변경시켜주고 있다.

Flex SDK에서 제공하는 거의 모든 컴포넌트들이 자식 컴포넌트에 CSS를 적용시킬때 이러한 방법을 쓰고 있다.

컴포넌트를 만들때 항상 고려해야 하는 부분중에 하나이므로 반드시 Flex SDK에서 제공하는 기본 컴포넌트를 분석할 필요가 이런 것에서부터 나오는 것이라 생각된다.

추가내용
어느 글을 보니까, x, y, width, height와 같은 Layout 관련 속성은 컴포넌트의 기본 인자이므로 적용할 수 없다고 하는데, 사용자가 만드는 커스텀 컴포넌트라면 꼭 그렇지 않다. CSS로 충분히 컴포넌트의 레이아웃을 바꿀 수 있도록 만들 수 있다. 컴포넌트에 들어가는 텍스트 조차도 말이다. 동적으로 CSS를 로드하는 방법을 쓴다면 다국어 버전등도 CSS로 충분히 표현할 수 있다. 디자이너와 각종 레이아웃및 스킨에 대한 협의도 이 CSS를 이용하면 훨씬 간편해질 수 있다. Flex에서 CSS는 정말 다양하게 사용할 수 있음을 말하고 싶다. ^^

출처 : http://blog.flexexamples.com/2007/09/12/styling-the-hslider-control-using-css/

번역 및 내용추가 : 지돌스타(http://blog.jidolstar.com/274)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Adobe Flash Platform' 카테고리의 다른 글

[Flex] 실행 중인 디버거나 호스트 응용 프로그램 위치를 지정하십시오 (3)	2007/12/29
[Flex] Flex 학습 추천 방법 10 (3)	2007/12/14
[Flex] 자식 컴포넌트에 CSS를 적용시키는 통상적인 방법 소개 (3)	2007/12/10
Flex와 PHP를 이용한 Session 로그인과 로그아웃 구현 (17)	2007/12/07
3D Flex 게시판 소스 공개!!! 받아가세요~ ^^ (11)	2007/12/03
[Flex] UIComponent의 폭, 높이 관련 속성에 대한 정리 (1)	2007/10/30