[Flex] CSS를 Embed 하는 방법과 런타임시 적용하는 방법 예제 -지돌스타 블로그-

[Flex] CSS를 Embed 하는 방법과 런타임시 적용하는 방법 예제

2007/10/11 11:40

3 Comments

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

몇일전 난 [Flex] 런 타임(run-time)시 Style sheets 불러오기 글을 썼다.
아래 내용은 이것을 활용한 예제이다.

두가지 경우를 예로 들겠다.

style sheet를 Embed하는 방법
런타임시 style sheet를 불러오는 방법

1. style sheet를 Embed하는 방법

먼저 assets 폴더에 다음과 같은 CSS파일을 만든다. 물론 Embed시 source 이미지는 반드시 있어야 하겠다.

style1.css (Language : css)

.astroBackgroundImage01
{
backgroundImage:Embed(source="aurora_kuenzli.jpg");
fontSize:12;
color:#ff00ff;
}

.astroBackgroundImage02
{
backgroundImage:Embed(source="ngc3603_hst_c720.jpg");
fontSize:14;
color:#ffffff;
}

.astroBackgroundImage03
{
backgroundImage:Embed(source="ngc474_schirmer.jpg");
fontSize:16;
color:#0000ff;
}

그 다음 메인 에플리케이션을 다음과 같이 사용한다.
이 가장 많이 사용하는 CSS를 적용하는 방법이라 할 수 있겠다.

메인 어플리케이션 - CSS를 Embed하는 방법 (Language : xml)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
initialize="init()">
<mx:Style source="assets/style1.css"/>
<mx:Script>
<![CDATA[
[Bindable]
private var arrStyle:Array = ['astroBackgroundImage01','astroBackgroundImage02','astroBackgroundImage03'];

private function init():void
{
this.styleName = arrStyle[0];
}

private function changeSkin(styleName:Object):void
{
this.styleName = styleName;
}
]]>
</mx:Script>
<mx:ComboBox id="styleCombo" top="10" left="10" right="10"
dataProvider="{arrStyle}"
change="changeSkin(styleCombo.selectedItem)">
</mx:ComboBox>
<mx:Label x="237" y="40" text="레이블"/>

</mx:Application>

실행하면 다음과 같은 화면이 나올 것이다.

2. 런타임시 style sheet를 불러오는 방법

위에서 사용한 CSS파일인 style1.css를 그대로 사용한다. 차이점은 style1.css를 SWF파일로 바꾸어야 한다는 것이다. Flex Bulider를 사용한다면 다음 그림에서 보는 것과 같이 style1.css에 마우스 커서를 올려놓고 마우스 오른쪽 버튼을 눌러 Complie CSS to SWF 를 선택하면 된다. 그럼 컴파일시 자동으로 css파일이 bin폴더에 swf로 컴파일되어 들어간다.

만약 Flex Builder를 사용하지 않는다면 DOS나 Linux 프롬포트 창에서 mxmlc 명령을 사용하여 SWF파일로 컴파일 해야한다. 가령 다음과 같이 한다.

$ mxmlc style1.css

메인 어플리케이션은 다음과 같이 만든다.

메인 어플리케이션 - CSS를 런타임시 로딩하는 방법 (Language : xml)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
initialize="init()">
<mx:Script>
<![CDATA[
[Bindable]
private var arrStyle:Array = ['astroBackgroundImage01','astroBackgroundImage02','astroBackgroundImage03'];

private function init():void
{
StyleManager.loadStyleDeclarations('assets/style1.swf',true,true);
this.styleName = arrStyle[0];
}

private function changeSkin(styleName:Object):void
{
this.styleName = styleName;
}
]]>
</mx:Script>
<mx:ComboBox id="styleCombo" top="10" left="10" right="10"
dataProvider="{arrStyle}"
change="changeSkin(styleCombo.selectedItem)">
</mx:ComboBox>
<mx:Label x="237" y="40" text="레이블"/>

</mx:Application>

위 처럼 하면 Embed할때와 동일한 화면을 볼 수 있을 것이다.
참고로 StyleManager의 loadStyleDeclarations의 첫번째 인자에서 로컬이 아닌 원격의 파일 주소라면 반드시 3번째 인자를 true로 설정해야한다. 이때 원격 서버에 crossdomain.xml 설정은 필요 없다.

3. 차이점은 무엇인가?

메인 어플리케이션 파일 사이즈 다르다.

첨부되는 이미지의 사이즈에 따라 다르겠지만
Embed할때 메인 어플리케이션을 컴파일해보면 595KB 였다. 하지만 런타임시 CSS를 적용하도록 한 것은 205KB이다. 거의 3배 이상 차이가 난다. 이것은 메인 어플리케이션 프로그램을 로드하는데도 영향을 줄 수 있겠다. 그 이유는 Embed할때는 말 그대로 CSS가 메인 어플리케이션 상에 포함되어 컴파일 되기 때문이다. 하지만 후자의 경우 메인 어플리케이션 코드만 독립적으로 컴파일되기 때문에 그 안에 CSS정보는 없다. 단지 css에 대한 경로정보만 있다.(StyleManager.loadStyleDeclarations의 첫번째 매개변수가 경로이다.)

Style을 로드해서 사용하는 시점을 내 마음대로 정할 수 있다.

런타임시 Style sheet를 사용하는 경우 Style을 로드하는 시점을 내 마음대로 선정할 수 있다.
하지만 Embed하는 경우는 아에 포함되는 경우이므로 처음부터 로드가 된다.

Style을 쉽게 변경할 수 있다.
Embed하는 경우에는 Style을 변경할때마다. 메인 어플리케이션을 컴파일해야한다.
하지만 런타임시 Style sheet를 사용하는 경우에는 그럴 필요 없이 CSS를 만들고 그것을 컴파일만 하면 되겠다.
그러므로 아주 다양한 Style sheet를 적용하는 것이 쉬워진다.

처음부터 런타임시 CSS를 적용하는 경우는 적용시간을 지체시킬 수 있다.
Embed의 경우는 처음부터 Style을 바로 적용할 수 있지만
런타임시 style sheet를 적용하는 경우에는 프로그램 로딩후 CSS을 로드한 다음 적용해야하므로 처음 프로그램 동작시 Style을 적용하는 경우라면 Embed할때보다 느릴 수 있겠다.

4. 참고자료

[Flex] 런 타임(run-time)시 Style sheets 불러오기
스타일과 테마의 사용

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

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

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

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

[Flex, Flash] 폰트(font) Embed의 이점과 제한점 (2)	2007/10/13
[Flex] 폰트를 런타임(run time)시 동적으로 불러와 적용하는 방법 (8)	2007/10/12
[Flex] CSS를 Embed 하는 방법과 런타임시 적용하는 방법 예제 (3)	2007/10/11
[Flex 팁] 윈도우용 마우스 커서를 Flex에서 사용하기 (6)	2007/10/11
[Flex] 런 타임(run-time)시 Style sheets 불러오기 (4)	2007/10/09
Papervision3D로 만든 Spaceship Demo (0)	2007/10/09