Flex 4는 Flex 3를 완전히 갈아 엎었다는 느낌이 든다. 기존 컴포넌트에서 없어진 것도 있고 새로 추가 된 것도 상당히 많다. 익숙해지려면 적지 않은 시간투자가 필요할 것 같다.

 

CSS에 네임스페이스 추가

 

Flex 4부터 CSS에 네임스페이스가 추가가 되었다. 이러한 구분이 필요한 것은 컴포넌트가 기존 halo 컴포넌트 외에 Spark 컴포넌트가 새로 추가가 되면서 필요해진 것이다. 즉 두개의 컴퍼넌트가 다른 네임스페이스를 사용하고 있기 때문에 CSS도 다른 네임스페이스를 쓰게 하는 것이다. 다음 소스를 보면 이해가 쉽겠다.

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark" 
	xmlns:mx="library://ns.adobe.com/flex/halo"
	minWidth="1024" minHeight="768">
    <mx:DateChooser id="main_calendar" x="20" y="20"/>
    <s:Button label="submit" x="220" y="20"/>
	<fx:Style>
	 
	    @namespace s "library://ns.adobe.com/flex/spark";
	    @namespace mx "library://ns.adobe.com/flex/halo";
	 
	    s|Button {
	        color: #FF0000;
	    }
	 
	    mx|DateChooser {
	        color: #0000FF;
	    }
	 
	</fx:Style>    
</s:Application>

 

 

<fx:Style>내에 @namespace를 정의하고 네임스페이스명|컴포넌트 의 형태로 CSS를 정의할 수 있도록 되었다. 그다지 어려운 사실은 아니다. ^^

 

이런 구조로 만들어진데에는 Flex 4가 Flash Catalyst와 연동이 되면서 디자이너와 개발자의 협업에 충실해지기 위한 거라고 한다. 예를 들어 Slider의 경우 liveDragging속성이 CSS쪽에서는 제어할 수 없던 반면 이번 Flex 4부터는 할 수 있게 되어 개발자는 코드상에서 디자이너는 CSS쪽에서 접근이 가능해져 협업이 되는 것이다. 디자이너의 경우 CSS를 직접 건드리지 않고 Flash Catalyst를 통해서 작업하기 때문에 CSS에 대해서는 몰라도 되지만 그 결과물은 CSS에 속성이 정의 되어 있음을 확인할 수 있을 것이다. 이러한 점이 개발자와 디자이너간에 협업을 가능하게 한 것이라고 생각한다.

 

 

고급 CSS (Advanced CSS)

 

Flex 3의 CSS에서 Selector는 단지 2개 였다. Class Selectors와 Type Selectors가 그것이다. 하지만 Flex 4부터는 이 Selector 종류가 크게 늘어났다. 이는 더욱 세밀하게 CSS 작업을 할 수 있다는 것을 의미한다. 이제 거의 HTML CSS와 맞먹을 정도인 것 같다. ^^ (CSS는 개인적으로 Flex의 강점중에 하나라고 생각한다. 기존 Flex 3 만으로도 강력한 CSS기능은 나로 하여금 Flex 매력에 푹 빠지게 했다.)

 

참고로 Class Selector와 Type Selector는 다음과 같다.

 

Type Selector

 

같은 종류의 컴포넌트에 적용된다. 다음과 같은 경우 spark.components.Button 및 이를 확장한 컴포넌트에 적용된다.

 

  s|Button { color: #CC0000; }

 

Class Selector

 

컴포넌트의 styleName을 지정한 컴포넌트라면 종류에 상관없이 적용이 된다.

 

  .header { background-color: #CCCCCC; }

 

 

아래부터는 Flex 4에서 추가된 CSS selector에 대해 예제와 함께 살펴본다.

 

1. ID Selectors

예전부터 컴포넌트 ID별로 CSS를 줄 수 있으면 좋겠다는 생각을 가졌다. Flex 4에 부터 적용되니 기쁘다. ID별로 CSS를 적용할 수 있기 때문에 같은 계열의 컴포넌트라도 하나의 객체로 생성된 유일한 1개의 컴포넌트에만 CSS를 적용할 수 있게 된다. 

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark" 
	xmlns:mx="library://ns.adobe.com/flex/halo"
	minWidth="1024" minHeight="768">
    <s:Button id="btnTest" x="41" y="24" label="ID 적용됨"/>
    <s:Button x="128" y="24" label="ID 적용 안됨" />
	<fx:Style>
		#btnTest{
			color: #0000ff;
		} 
	</fx:Style>    
</s:Application>

 

ID가 btnTest로 지정된 것만 Label색이 파란색으로 지정된다. ID를 이용하기 때문에 네임스페이스 구분이 필요없다. 이제 컴포넌트 끼리 CSS 사생활 침해를 금지 시킬 수 있겠구나~ (농담)

 

 

2. Multiple class selectors

 

이는 Class selector가 확장된 개념이다. Class Selector는 중첩해서 사용할 수 있다. 아래 예제를 보면 쉽게 이해할 수 있을 것이다.

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark" 
	xmlns:mx="library://ns.adobe.com/flex/halo"
	minWidth="1024" minHeight="768">
	<mx:Label styleName="class1 class2" text="중첩 Class Selector 사용" x="8" y="40"/>
	<fx:Style>
		.class1 
		{
			color : #ff0000;
		}
		
		.class2
		{
			fontFamily : "궁서";
		}
	</fx:Style>    
</s:Application>

위 예제에서 Label에 styleName을 설정할 때 class selector를 2개 썼다. class1, class2는 각각 폰트색과 종류를 설정했는데 이 2개의 selector를 사용한 Label은 두개의 class selector에 정의가 적용된다. 결국 Label의 글자색은 빨강, 폰트는 궁서로 보이게 된다.

 

이렇게 class selector를 중첩이 가능하게 됨에 따라 중복되는 selector가 없도록 깔끔하게 CSS구성을 할 수 있게 되었다.

 

 

3. Descendant Selectors

이 selector는 자식/부모 관계에 있는 컴포넌트에 해당한다. Panel위에 Button을 놓았다고 하자. 이때 관계에서 Panel이 부모, Button은 자식이 된다. 특정 부모는 자식에게 어떤 것을 바랄 수 있게 된다. 그래서 사과를 줄수도 있고 바나나도 줄 수 있다. 여기에 특정 부모라는 말이 중요하다. 아무 부모나 자식에게 그렇게 주는 것을 금지한다. 이 관계를 이용한 것이 바로 Descendant selector이다.

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark" 
	xmlns:mx="library://ns.adobe.com/flex/halo"
	minWidth="1024" minHeight="768">
    <s:Panel x="14" y="42" width="250" height="200">
        <s:Button x="12" y="12" label="Button"/>
    </s:Panel>
    <s:Group x="33" y="393" width="200" height="200">
        <s:Button x="33" y="29" label="Button"/>
    </s:Group>
	<fx:Style>
	    @namespace s "library://ns.adobe.com/flex/spark";
	    @namespace mx "library://ns.adobe.com/flex/halo";
		s|Panel s|Button{
			color: #304F6B;
			baseColor: #5387B7;
		} 
	</fx:Style>    
</s:Application>

 

위 코드에서 볼 수 있듯이 Panel에 자식 Button만 CSS를 적용하도록 되어 있기 때문에 Group위에 올라간 Button에는 CSS적용이 안된다.

 

 

4. Pseudo selectors

 

Flex 4에서 상태변화에도 CSS를 적용할 수 있게 되었다. Flex 4에서는 Skin을 ProgrammaticSkin 기반이 아닌 SparkSkin기반으로 MXML형태로 제작할 수 있도록 되어  있다. flex4.swc에 spark.skins.*쪽을 훑어보기 바란다. Button의 경우 ButtonSkin.mxml이 존재하는데 아래와 같이 상태별로 다른 스킨을 줄 수 있도록 되어 있다.

<s:states>
	<s:State name="up" />
	<s:State name="over" />
	<s:State name="down" />
	<s:State name="disabled" />
</s:states>

 

이 상태에 따라서 CSS를 적용할 수 있도록 한것이 바로 Pseudo selector이다. 아래 예제에서 볼 수 있듯이 :를 이용해 컴포넌트의 상태에 따라 CSS를 주는 것을 확인할 수 있다.

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark" 
	xmlns:mx="library://ns.adobe.com/flex/halo"
	minWidth="1024" minHeight="768">
	<s:Button label="Test"/>
	<fx:Style>
	    @namespace s "library://ns.adobe.com/flex/spark";
	    @namespace mx "library://ns.adobe.com/flex/halo";
	 
		s|Button:up{
			color: #304F6B;
			baseColor: #5387B7;
		} 
		
		s|Button:down 
		{
			baseColor: #917541;
			color: #B8A553;
		}
		
		s|Button:over 
		{
			baseColor: #B8A553;
			color: #6B5630;
		}
	</fx:Style>    
</s:Application>

 

 

CSS Selector 사용하기

 

위에서 설명한 Selector 들은 독립적으로 사용하는 것외에도 다른 Selector와 함께 사용할 수 있다.

 

Flex 3에서는 아래와 같이 단순한 Type Selector와 범용적으로 사용되는 Class Selector만 사용할 수 있었다.

 

Button { color:#00FF00; }     /* Simple type selector */
.special { color:#FF0000; }     /* Universal class selector */

하지만 Flex 4부터는 새로운 Selector와 함께 섞어서 사용할 수 있게 되었다. 아래 CSS 적용 예시를 보자.

 

Button { color:#00FF00; }     /* 단순 type selector */
.special { color:#FF0000; }     /* 범용 class selector */
Button.special { color:#FF0000; }     /* class selector와 함께 사용된 Type selector  */
Button#b13 { color:#0000FF; }     /* ID selector와 함께 사용된 Type selector */
#b13 { color:#FF9933; }     /* 범용 id selector */
Panel VBox Button { color:#990000; }     /* Descendant selector */
Button:up { color:#FF9900; }     /* pseudo selector와 함께 사용된 Type selector  */
:up { color:#FF9933; }     /* 범용 pseudo selector */

 

위 내용을 좀더 새부적으로 이해하기 위해 예를 하나 들어보겠다.

 

Panel Button { color:#DD0000; }

 

위처럼 CSS Selector를 중첩한 경우 경우 다음과 같은 상황에 있는 컴포넌트에 color가 설정된다.

 

- Panel 위에 Button

- Panel을 확장한 컴포넌트 위에 Button

- Panel또는 Panel을 확장한 컴포넌트 위에 Button을 확장한 CheckBox와 같은 커스텀 Button

 

 

정리하며

 

Flex 4 CSS의 Selector를 외우기 쉽게 하기 위해 아래를 꼭 기억하자.

  • local name : type selector - 컴포넌트 종류
  • styleName : class selector - 컴포넌트 스타일명
  • identity : id selector - 컴포넌트 ID
  • state : pseudo selector - 컴포넌트 상태
  • display list : descendant selector - 컴포넌트 디스플레이 리스트 부모/자식 관계

 

참고글

 

글쓴이 : 지돌스타(http://blog.jidolstar.com/548)

'비공개 > 스타플(starpl.com)' 카테고리의 다른 글

스타플 - 내별 찾기 게임  (2) 2009.10.22
새로 리뉴얼되는 스타플 타임라인과 키워드에 대한 내 생각  (5) 2009.09.29
[iPhone,iPod]아이폰,아이팟용 애플리케이션을 출시했습니다 - AppConnect  (20) 2009.05.27
[스타플]내 별에 키우는 스타펫 출시!  (4) 2009.05.22
새로 리뉴얼된 스타플. 우주여행, 새로운 위젯, 알림이 서비스 소개  (0) 2009.05.15

+ Recent posts

티스토리툴바