[Flex] 런 타임(run-time)시 Style sheets 불러오기 -지돌스타 블로그-

[Flex] 런 타임(run-time)시 Style sheets 불러오기

2007/10/09 22:19

4 Comments

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

style sheets를 런 타임시에 불러올 수 있는 방법을 찾던중 Flexdocs 에 없지만 영문 라이브독에는 있는 것을 발견했다. 내용도 어려운 내용이 아니라 짬을 내서 직접 번역을 해보았다. 조만간 http://flexdocs.kr 에도 업데이트 하도록 하겠다.

---------------------------------------------------------------------------------------------------
StyleManager를 이용하면 런타임(run-time)에 style sheets를 불러올 수 있다. 이 style sheets는 SWF 형태의 파일로 만들어 Flex 어플리케이션이 실행하는 동안 동적으로 불러서 사용할 수 있다. (여기서 불러온다는 말은 Load 를 뜻한다.)

컴파일시에 Embed할 필요없이 images(graphical skins), 폰트, 각종 type, 클래스 selector, programmatic 스킨을 런타임시 Style sheets를 불러올 수 있다. 이것은 스킨과 폰트가 메인 어플리케이션에서 SWF파일 형태로 분리되는 것을 의미한다. 결과적으로 어플리케이션의 SWF파일의 사이즈는 더 작아져서 초기에 다운로드 하는 시간을 줄일 수 있게 된다. 그러나 처음 런타임시 이 방법을 이용하면, 스타일 및 스킨을 적용하기 위해 Flex는 CSS기반 SWF파일을 다운로드 해야만 하기 때문에 더 시간이 걸릴 수 있다.

런타임시 style sheets를 불러오는 단계는 3가지로 압축된다.

당신의 어플리케이션에 CSS파일을 만든다.
CSS파일을 mxmlc 컴파일러를 이용해 SWF로 컴파일 한다.(Flex Bulider에서는 css파일 위에 오른쪽 마우스버튼을 누르면 Context menu에 Complie CSS to SWF를 check하면 run시 자동으로 bin폴더에 생성된다.)
당신의 어플리케이션에 StyleManager.loadStyleDeclarations() 메소드를 호출한다. 이 메소드는 CSS기반의 SWF 파일을 런타임시 당신의 어플리케이션에 불러오는 기능을 가진다. 이 메소드를 실행할 때, Flex는 StyleManager안에 새 CSSStyleDeclarations를 만들어 등록하게 된다.

부주제

런타임(run-time) style sheet를 만들기
CSS 기반 SWF 파일 컴파일
런타임시에 style sheets를 불러오기
런타임시 style sheet를 내려놓기(내려놓는 말은 unload 를 뜻한다.)
커스텀 컴포넌트(custom components)에서 런타임 style sheets 를 사용하기
런타임 style sheets로서 테마 SWF 파일 사용하기

런타임(run-time) style sheet를 만들기

런타임시에 style sheets를 불러오기 위해 우리는 SWF파일로 컴파일된 style sheets를 만들어야 한다. 런타임 style sheet는 어느 다른 style sheet와 같다. 이는 다음 예제에서 보이는 것 같이 기본 style 속성으로 설정한 단순한 style sheet가 될 수 있다.

BasicStyles.css (Language : css)

/* styles/runtime/assets/BasicStyles.css */
Button {
fontSize: 24;
color: #FF9933;
}

Label {
fontSize: 24;
color: #FF9933;
}

또한 style sheets는 다음 예제와 같이 좀더 복잡하게 embed한 programmatic 또는 graphical 스킨, 폰트, style 속성등을 조합하여 여러가지 type 및 클래스 selectors를 만들어 사용할 수 있다.

ComplexStyles.css (Language : css)

/* styles/runtime/assets/ComplexStyles.css */
Application {
backgroundImage : "assets/greenBackground.gif";
theme-color: #9DBAEB;
}
Button {
fontFamily: Tahoma;
color: #000000;
fontSize: 11;
fontWeight: normal;
text-roll-over-color: #000000;
upSkin: Embed(source="../../../assets/orb_up_skin.gif");
overSkin: Embed(source="../../../assets/orb_over_skin.gif");
downSkin: Embed(source="../../../assets/orb_down_skin.gif");
}

.noMargins {
margin-right: 0;
margin-left: 0;
margin-top: 0;
margin-bottom: 0;
horizontal-gap: 0;
vertical-gap: 0;
}

컴파일되지 않은 CSS 파일은 런타임시에 Flex 어플리케이션에 불러올 수 없다. 반드시 SWF파일로 컴파일 하여 불러와야 한다. (이 글의 맨 끝에 추가내용을 통해 꼭 그렇지만은 않다는 것을 알 수 있을 것이다.)

CSS 기반 SWF 파일 컴파일

런타임시 style sheet를 불러오기 전에 반드시 SWF파일로 컴파일 해야만 한다.

CSS 파일을 SWF 파일로 컴파일 하기 위해 mxmlc command-line 컴파일러를 사용한다. 이 컴파일러를 이용해 만들어진 기본 결과물은 CSS파일 이름과 동일한 같은 파일 이름을 가진 SWF이다. 즉, 확장자 .css대신 .swf파일이라는 것이다. 다음 예제는 BasicStyles.swf파일을 만드는 법을 보여주고 있다.

>mxmlc /skins/runtime/BasicStyles.css

SWF파일로 컴파일된 style sheet는 .css 확장자를 사용하지 않는다. 대신 .swf 확장자이다.

Flex 어플리케이션에서 컴파일 할 때, 컴파일러는 CSS기반인 SWF파일과 연결상태를 확인을 하지 않는다. 이것은 메인 어플리케이션을 컴파일하기 전에 CSS기반으로한 SWF파일을 요구하지 않는다는 말이다.

런타임시에 style sheets를 불러오기

StyleManager의 loadStyleDeclarations() 메소드를 이용하면 런타임시에 CSS기반의 SWF파일을 불러올 수 있다. 이 메소드를 사용하기 위해 반드시 mx.core.StyleManager 클래스를 import해야한다.

런타임시 CSS기반 SWF를 불러오기 (Language : xml)

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>
<![CDATA[
import mx.styles.StyleManager;

public function applyRuntimeStyleSheet():void {
StyleManager.loadStyleDeclarations("assets/BasicStyles.swf")
}
]]>
</mx:Script>

<mx:Label text="Click the button to load a new CSS-based SWF file"/>
<mx:Button id="b1" label="Click Me" click="applyRuntimeStyleSheet()"/>

</mx:Application>

loadStyleDeclaration() 메소드의 첫번째 매개변수(parameter)는 불러올 style sheet의 위치이다. 이 위치는 지역(local) 또는 원격(remote)이 될 수 있다.

다음 예제는 지역 및 원격 SWF 파일을 불러오는 예제이다.

SWF파일을 불러오는 예제 (Language : java)

// Load a locally-accessible style sheet:
StyleManager.loadStyleDeclarations("assets/LocalStyles.swf");

// Load a remote style sheet:
StyleManager.loadStyleDeclarations("http://www.domain2.com/styles/RemoteStyles.swf", true, true);

style sheets가 지역위치(local - 어플리케이션이 로딩되는 같은 도메인에 위치)한다면 추가적인 설정없이 불러올 수 있다. 만약 원격위치(remote - 어플리케이션이 로딩되는 곳과 정확히 맞지 않는 도메인에 위치)한다면 반드시 loadStyleDeclarations()의 3번째 매개변수 trustContent를 true로 설정해야 한다. style sheet를 원격에서 로딩하기 위해 따로 crossdomain.xml 파일은 필요없다.

또한 원격 style sheets를 사용하기 위해 반드시 네트워크 접근(network access : use-network 컴파일러 속성은 기본적으로 true로 설정된다)과 함께 불러올 어플리케이션을 컴파일 해야한다. 만약 지역 파일 시스템에서 어플리케이션을 컴파일하고 실행한다면 원격으로 SWF 파일을 접근하지 않아도 된다.

loadStyleDeclarations() 메소드는 IEventDispatcher 클래스의 객체를 반환한다. style sheets를 성공적으로 불러왔는지 확인하기 위해 송출하는 이벤트를 사용하면 된다. 이 이벤트를 이용하면 style sheets를 불러오는 동안 StyleEvent.PROGRESS, StyleEvent.COMPLETE 그리고 StyleEvent.ERROR 이벤트를 listen할 수 있다.

다음 어플리케이션은 style sheet 로드를 끝마쳤을때 이벤트 listen 메소드를 호출하고 있다.

style sheets를 호출후 로드가 완료했을때 메소드를 호출하는 방법 (Language : xml)

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">

<mx:Script>
<![CDATA[
import mx.styles.StyleManager;
import mx.events.StyleEvent;

public function init():void {
var myEvent:IEventDispatcher =
StyleManager.loadStyleDeclarations("assets/ACBStyles.swf");
myEvent.addEventListener(StyleEvent.COMPLETE, getImage);
}

private function getImage(event:StyleEvent):void {
map1.source = acb.getStyle("dottedMap");
}
]]>
</mx:Script>

<mx:ApplicationControlBar id="acb" width="100%" styleName="homeMap">
<mx:Image id="map1"/>
<mx:Button label="Submit"/>
</mx:ApplicationControlBar>

</mx:Application>

loadStyleDeclarations()의 메소드의 2번째 매개변수는 update이다. styles을 즉시 강제로 적용시키기 위해 이 update 매개변수를 true로 설정한다. update가 바로 적용되는 것을 피하기 위해서는 false로 지정하면 된다. 그렇게 하면 update 속성을 true로 설정한 loadStyleDeclarations()와 unloadStyleDeclarations()가 호출되는 다음 시기에 style이 적용된다.

지속적으로 loadStyleDeclarations() 메소드의 2번째 매개변수 update를 true로 설정하면 Adobe Flash Player는 모든 style들을 일일히 display 목록에서 다시 적용하므로 포퍼먼스를 감소시킬 수 있다. 만약 여러개의 CSS기반 SWF 파일을 동시에 불러올거라면 이 update 매개변수를 false로 지정하고 마지막에 호출하는 style SWF만 true로 지정하고 loadStyleDeclarations() 메소드를 호출한다. 결과적으로 Flash Player는 여러개의 style SWF을 각각 적용하는 것이 아니라 모든 새 style SWF를 한번에 적용하게 된다.

다음 예제는 3개의 style SWF 파일들을 불러온다. 그러나 3번째가 불러올때까지 적용하진 않고 있다.

여러개의 style SWF을 적용하는 방법 (Language : xml)

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">

<mx:Script>
<![CDATA[
import mx.styles.StyleManager;
import mx.events.StyleEvent;

public function init():void {
StyleManager.loadStyleDeclarations(
"assets/ButtonStyles.swf", false);
var myEvent:IEventDispatcher =
StyleManager.loadStyleDeclarations(
"assets/LabelStyles.swf", false);
myEvent.addEventListener(StyleEvent.COMPLETE, doUpdate);
}

public function doUpdate(event:StyleEvent):void {
StyleManager.loadStyleDeclarations(
"assets/ACBStyles.swf", true);
}
]]>
</mx:Script>

<mx:Label text="This is a label"/>

<mx:ApplicationControlBar id="acb" width="100%">
<mx:Button label="Submit"/>
</mx:ApplicationControlBar>

</mx:Application>

런타임시 style sheet를 내려놓기(내려놓는 말은 unload 를 뜻한다.)

런타임시 불러온 style sheet를 내려놓을 수 있다. 이것은 StyleManager의 unloadStyleDeclarations() 메소드를 사용하면 된다. 이 메소드를 호출하면 style SWF에 의해 적용된 모든 style 속성이 원래대로 돌아간다.

다음 예제는 한개의 style SWF를 불러오고 내려놓는 것은 check box를 이용해 구현하고 있다.

style SWF를 적용후 다시 되돌림 (Language : xml)

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.styles.StyleManager;

public function toggleStyleSheet():void {
if (cb1.selected == true) {
StyleManager.loadStyleDeclarations(
"assets/ButtonStyles.swf", true, false)
StyleManager.loadStyleDeclarations(
"assets/LabelStyles.swf", true, false)
} else {
StyleManager.unloadStyleDeclarations(
"assets/ButtonStyles.swf", true);
StyleManager.unloadStyleDeclarations(
"assets/LabelStyles.swf", true);
}
}
]]>
</mx:Script>

<mx:Button id="b1" label="Click Me"/>

<mx:Label id="l1" text="Click the button"/>

<mx:CheckBox id="cb1"
label="Load style sheet"
click="toggleStyleSheet()"
selected="false"
/>
</mx:Application>

커스텀 컴포넌트(custom components)에서 런타임 style sheets 를 사용하기

커스텀 컴포넌트에 런타임시 style sheets를 사용할 수 있다. 일반적으로 컴포넌트를 초기화한 후에 loadStyleDeclaration()메소드를 호출하면 된다. 만약 style sheet가 클래스 selectors를 포함하고 있다면 컴포넌트의 styleName 속성을 설정함으로써 적용할 수 있다.

다음 예제는 specialStyle이라고 명명한 클래스 selector안에 style속성과 skin을 정의하고 있다.

CustomComponentStyles.css (Language : css)

/* styles/runtime/assets/CustomComponentStyles.css */
.specialStyle {
fontSize: 24;
color: #FF9933;
upSkin: Embed(source="SubmitButtonSkins.swf", symbol="MyUpSkin");
overSkin: Embed(source="SubmitButtonSkins.swf", symbol="MyOverSkin");
downSkin: Embed(source="SubmitButtonSkins.swf", symbol="MyDownSkin");
}

다음 예제는 위에서 정의한 style sheet를 불러오는 커스텀 컴포넌트이다. 이 컴포넌트가 초기화하는 동안 클래스 selector specialStyle를 적용하고 있다.

MyButton.as (Language : java)

// styles/runtime/MyButton.as -->
package {

import mx.controls.Button;
import mx.events.*;
import mx.styles.StyleManager;

public class MyButton extends Button {

public function MyButton() {
addEventListener(FlexEvent.INITIALIZE,
initializeHandler);
}

// Gets called when the component has been initialized
private function initializeHandler(event:FlexEvent):void {
StyleManager.loadStyleDeclarations(
"assets/CustomComponentStyles.swf");
this.styleName = "specialStyle";
}
}
}

런타임 style sheets로서 테마 SWF 파일 사용하기

만약 테마 SWC파일이 존재한다면 런타임 Style sheet처럼 사용할 수 있다. 이를 위해 테마 SWC 파일로부터 CSS파일을 빼내야만 한다.

다음에 소개하는 예제는 커맨드 라인을 사용하여 이 과정을 보여주고 있다.

PKZip 또는 그와 유사한 아키브 유틸리티를 이용하여 SWF 파일로부터 CSS파일을 뽑아낸다.
$ unzip haloclassic.swc defaults.css
(옵션)CSS 파일 의미있는 이름으로 바꾼다. style SWF파일의 이름과 같게 한다. 다음 예제는 defaults.css파일을 haloclassic.css로 이름을 변경하고 있다.
$ mv defaults.css haloclassic.css
style SWF 파일을 만들기 위해 컴파일 한다. 이때 다음 예제처럼 include-libraries 옵션을 사용하여 테마 SWF 파일과 style SWF파일에 추가한다.
# mxmlc -include-libraries=haloclassic.swc haloclassic.css

만약 테마 SWC파일 안에 여러개의 CSS파일을 가진다면 style SWF 파일을 컴파일 하기전에 CSS 모두를 뽑아내야한다.

추가내용

LiveDocs에서는loadStyleDeclarations()를 CSS를 직접 불러올 수 없다고 했다. 맞는 말이지만 그외의 방법으로 CSS를 불러올 수 있다. 아래 링크는 CSS를 직접 불러와 적용시켜주는 컴포넌트를 소개하고 있다.

CSS를 직접 불러오는 방법
http://www.rubenswieringa.com/blog/cssloader

원본글

http://livedocs.adobe.com/labs/flex3/html/help.html?content=styles_26.html

번역 : 지돌스타(http://blog.jidolstar.com/242)

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

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

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

[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
[Flex] 자잘한 버그를 없앤 말풍선 컴포넌트, 아이콘 컴포넌트 추가 (17)	2007/10/08
[Flex] StyleManger.setStyleDeclaration()와 setStyle() 적용 우선순위! (1)	2007/10/08

Adobe Flash Platform flex, loadStyleDeclaration, Style Sheet, StyleManager, 런타임, 스타일 시트

Trackback 주소: http://blog.jidolstar.com/trackback/242

2007/10/09 23:15

Delete

[Flex] Flex Store 따라가보기 - [1] Tracked from Inspiration, Feel Good Factor for Flex Dev

열이아빠

2007/10/09 23:16

Reply | Edit

2.0.1 에서 추가되었기때문에 이전 번역본에서는 없었던 것이죠.
Flex Store 데모에서도 해당 기능이 설명되어 있습니다.
저도 시간나면 Flex Store 이야기도 마무리 지어야 할텐데..
앞부분만 올려놓고 계속 미루고 있네요..ㅎㅎ
지돌스타

2007/10/10 09:52

Reply | Edit

아~ 글쿤요~
Flex Store 예시가 있는지 몰랐습니당.. 헷헷~
계속 좋은글 기대할께용~
푸른여행

2009/02/05 18:39

Reply | Edit

CSS를 직접 불러오는 방법
http://www.rubenswieringa.com/blog/cssloader
링크 주소가 없어졌나 봅니다.
다른 내용이 나와요.
지돌스타

2009/02/06 10:32

Reply | Edit

그렇군요. 좋은 소스코드이던데... 검색해보면 나오지 않을까요? ^^