CSS에 관해

플렉스에서는 디자인요소로써 CSS를 지원한다.

CSS를 통해 컴포넌트들의 color, fontSize등의 스타일을 지정할 수 있으며,

swf를 통해 동적 로딩도 가능하다.

CSS를 사용하는 방법에는 인라인, 로컬, 외부 CSS파일 사용으로 나뉜다.

[인라인방식]
인라인 방식은 mxml 태그 내에 직접 적용하는 방법으로 아래와 같이 사용된다.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Label text="siking.tistory.com" color="#9933FF" fontSize="12" /> </mx:Application>

소스를 보시다시피 mxml에서는 반드시 낙타 표기법으로 스타일 속성을 지정해야 한다.
CSS에서는 font-size와 같이 사용할 수도 있지만 mxml에서는 반드시 fontSize로 사용해야한다.

[로컬 방식]
로컬 방식은 <mx:Style>태그안에 css구문을 삽입하여 사용하는 방식으로 현재 문서 및
하위 문서에 적용된다. 사용방식은 아래와 같다.<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Style> .myStyle { color : #9933FF; fontSize : 12; } </mx:Style> <mx:Label text="siking.tistory.com" styleName="myStyle" /> </mx:Application>

[외부에서 불러오는 방식]
외부 css파일을 사용하면 하나 이상의 애플리케이션에서 동일하게 적용할 수 있다.
사용방식은 아래와 같다.

mxml파일
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Style source="myStyle.css" /> <mx:Label text="siking.tistory.com" styleName="myStyle"/> </mx:Application>
css파일
Label { fontFamily : italic; } .myStyle { color : #9933FF; fontSize : 12; }

여기서 주의할점은 외부에서 불러와서 사용하는 경우 <mx:Style>태그에 추가로 지정된
스타일은 컴파일러가 무시되기 때문에<mx:Style> 태그의 내용은 비워둬야 하고, 추가로
스타일을 지정할 경우에는 추가로 <mx:Style>을 만들어 사용하면 된다.


아래와 같이 Time format에 관한것도 지정할 수 있다.<?xml version="1.0"?> <!-- styles/TimeFormat.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()"> <mx:Script><![CDATA[ public function initApp():void { myTree.setStyle("openDuration", 1000); } ]]></mx:Script> <mx:XMLList id="treeData"> <node label="Mail Box"> <node label="Inbox"> <node label="Marketing"/> <node label="Product Management"/> <node label="Personal"/> </node> <node label="Outbox"> <node label="Professional"/> <node label="Personal"/> </node> <node label="Spam"/> <node label="Sent"/> </node> </mx:XMLList> <mx:Panel title="Tree Control Example" width="100%"> <mx:Tree id="myTree" width="100%" labelField="@label" dataProvider="{treeData}"/> </mx:Panel> </mx:Application>

아래 트리 목록을 펼쳐보세요.

[Selector]
위의 예제들을 보다보면 자연스럽게 알게되겠지만, 잠깐 집고 넘어가려고 한다.
위의 CSS 예제들을 보면 Button, .myButton과 같은 것들을 볼 수 있는데
이러한 것을 Selector라고 칭한다.

-Type Selector
여기서 Button이나 TextInput,이나 Label과 같은 컴포넌트를 칭하는 것을 그대로 쓰는것을
Type Selector라고 한다.
앞에 .을 붙이지 않고 Button이라고 칭하여 사용할 경우 Button클래스의 각 인스턴스에
영향을 미치게 된다. 따라서,

Button { color:#FF0000 }

라고 하는 경우 모든 Button의 color가 #FF0000 으로 지정이 된다.

-Class Selector
또한 .myButton과 같이 앞에 .을 붙여 사용하는 것을 class Selector라고 한다.
이렇게 사용하는경우 styleName이 .myButton으로 설정되는 경우에만 적용이 된다.
따라서,
. myButton { color:#FF0000 }

라고 하는 경우 <mx:Button styleName="myButton" /> 과 같이 설정된 경우에만 적용이 된다.

-Global Selector
global selector는 애플리케이션 전체를 통틀어서 적용할 때 유용하다.
사용방법은 아래와 같다.
global { color:#FF0000 }

이 세가지의 타입이 중복으로 정의되었을 시 우선순위는 class > type > global 순으로 된다.
위의 세가지 예를 보기로 들자면 .myButton 에 설정된 값이 최종적인 결과로 나온다는 뜻이다.


[StyleManager]
StyleManager라는 클래스를 통해서도 스타일을 적용할 수 있다.
(StyleManager는 ActionScript 를 사용해 class 실렉터 및 타입 실렉터에 액세스할 수 있도록
한다. StyleManager 를 사용하면, 새로운 CSS 스타일 선언을 정의해, 그것을 Flex 어플리케이션의 컨트롤에 적용할 수가 있다).
 <?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp(event)"> <mx:Style> .myStyle { color: red; } </mx:Style> <mx:Script><![CDATA[ import mx.styles.StyleManager; public function initApp(e:Event):void { StyleManager.getStyleDeclaration("Button").setStyle("fontSize",24); StyleManager.getStyleDeclaration(".myStyle").setStyle("color",0xCC66CC); StyleManager.getStyleDeclaration("global").setStyle("fontStyle","italic"); } ]]></mx:Script> <mx:Button id="myButton" label="Click Me" styleName="myStyle"/> <mx:Label id="myLabel" text="This is a label." styleName="myStyle"/> </mx:Application>

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp();"> <mx:Script><![CDATA[ public function initApp():void { myButton.setStyle("fontSize",15); StyleManager.getStyleDeclaration("Button").setStyle("color",0x9933FF); } ]]> </mx:Script> <mx:Button id="myButton" label="Click Me"/> <mx:Button id="myButton2" label="Click Me" y="30"/> </mx:Application>

하나의 객체에 관해 복수의 스타일을 지정하고자 할 경우 아래와 같이 할 수 있다.<?xml version="1.0"?> <!-- styles/StyleDeclarationTypeSelector.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()"> <mx:Script><![CDATA[ import mx.styles.StyleManager; private var myDynStyle:CSSStyleDeclaration; private function initApp():void { myDynStyle = new CSSStyleDeclaration('myDynStyle'); myDynStyle.setStyle('color', 'blue'); myDynStyle.setStyle('fontFamily', 'georgia'); myDynStyle.setStyle('themeColor', 'green'); myDynStyle.setStyle('fontSize', 24); StyleManager.setStyleDeclaration("Button", myDynStyle, true); } ]]></mx:Script> <mx:Button id="myButton" label="Click Me"/> </mx:Application>

그런데 위 화면을 보면 버튼이 Label과 같은 형태로 보이게 된다. 그 이유는 livedocs에
나와있는데 영어가 짧은 관계로 정확하게는 해석을 못하겠고 CSSStyleDeclaration에서
지정된 스타일 외의 다른 스타일들은 null로 된다는 뜻인 것 같다.

기존의 값들을 유지하기 위해서는 아래와 같이 class Selector(.myButtonStyle)를 사용하면 버튼의 형태가 그대로 나오게 된다.<?xml version="1.0"?> <!-- styles/StyleDeclarationClassSelector.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()"> <mx:Script><![CDATA[ import mx.styles.StyleManager; private var myDynStyle:CSSStyleDeclaration; private function initApp():void { myDynStyle = new CSSStyleDeclaration('myDynStyle'); myDynStyle.setStyle('color', 'blue'); myDynStyle.setStyle('fontFamily', 'georgia'); myDynStyle.setStyle('themeColor', 'green'); myDynStyle.setStyle('fontSize', 24); StyleManager.setStyleDeclaration(".myButtonStyle", myDynStyle, true); myOtherButton.styleName=myDynStyle; } ]]></mx:Script> <mx:Button id="myButton" label="Click Me" styleName="myButtonStyle"/> <mx:Button id="myOtherButton" label="Click Me"/>

CSSStyleDeclaration 오브젝트를 삭제하려면 아래와 같이 하면 된다.
clearStyleDeclaration()메소드를 사용하면 지정된 selector의 스타일만 제거한다.
아래와 같이 class selector를 삭제하게 되면 class selector 스타일만 제거가 되고,
type selector의 스타일은 남겨두게 된다.
StyleManager.clearStyleDeclaration(".myButtonStyle", true);
뒤의 값을 true로 설정하면 스타일을 강제적으로 즉시 갱신한다. 어플리케이션의 스타일을 강제적으로 즉시 갱신하지 않게 하려면 ,false 로 설정하면 된다. 스타일은, 다음번, 이 Methods 또는 setStyleDeclaration() Methods가 true 로 설정된 update property로 불려 갈 때 갱신된다.


[CSS에서의 상속]

ActionScript 컴퍼넌트에 구현한 스타일 properties 는, 클래스의 모든 서브 클래스에 자동적으로
 상속된다. 메소드나 properties 의 상속과 같다. 이런 종류의 상속을 "객체 지향의 상속 " 이라고
 한다.

일부의 스타일 properties 는 CSS (CSS) 상속도 지원(support)한다. CSS 상속에서는, 부모 컨테
이너로 설정한 스타일 properties 의 값이, 어플리케이션을 실행했을 때에, 그 컨테이너의 child에
게 상속된다. 예를 들어, Panel 컨테이너로 fontFamily를 Times 로 정의했을 경우, 그 properties
가 재정의(override) 되지 않는 이상 그 컨테이너의 모든 child에는 Times라는 fontFamily 가 적
용된다.

일반적으로 칼라와 텍스트 스타일은, 설정 방법법 (스타일 시트에 의한 방법, 또는 setStyle()메소드에 의한 방법)에 관련되지 않고 상속 가능하다. 그 이외의 스타일은, 특별한 설정이 없는 한 상속 받을 수 없다.

CSS 상속을 지원(support)하지 않는 부모로 설정한 스타일 (textDecoration 등)은, 부모 컨테이너
에서만 사용되어 자식컨테이너에는 적용되지 않는다. CSS상속의 규칙에는 예외가 있다.
CSS 스타일 정의로 global 타입 selector를 사용하면, properties 가 상속 가능한가 어떤가에 관계
없이, 모든 컨트롤에 스타일 properties 가 적용된다.

또한 Button의 color값을 설정해줄 경우, Button을 상속한 컴포넌트인 CheckBox나
RadioButton 의 color값에도 모두 적용이 된다. 따라서 이와 같은 상속을 원하지 않을 경우에는
class selector를 사용하면 된다.

[Style metadata]

컴퍼넌트의 스타일 properties 의 MXML 태그 속성을 정의하는 경우 사용한다.

기본적인 문장 구문은 아래와 같다.[Style(name="style_name"[, property="value",...]아래 예는,textSelectedColor 스타일 properties 의 정의를 나타내고 있다.[Style(name="textSelectedColor", type="Number", format="Color", inherit="yes")] 다음의 예는, verticalAlign 스타일 properties 의 정의를 나타내고 있다.[Style(name="verticalAlign", type="String", enumeration="bottom, middle, top", inherit="no")]