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

Flex/AIR 환경에서 사용자가 만든 커스텀 UI 컴포넌트에 기본 스타일(CSS)을 적용하는 3가지 방법에 대해서 소개한다.

여기서는 Flex SDK에서 기본으로 제공하는 LinkBar 컴포넌트를 확장한 TagBar를 예로 들어보고자 한다.
다음 실행화면과 같이 기본 스타일이 적용되는 TagBar를 만들어보겠다.

TagBar 컴포넌트는 LinkBar 컴포넌트의 단순한 확장형태이기 때문에 아래와 같이 CSS를 적용하면 위와 같은 모습으로 만들 수 있다. 아래 CSS파일과 같이 TagBar Type Selector에 몇가지 속성 값을 설정하고 Application안에서 <mx:Style>에 포함해서 사용하면 된다.

TagBar {

  color: #00A7E3;

  fontFamily: Lucida Grande, Tahoma, Verdana, Arial;

  backgroundColor:#000000;

  fontSize: 12;

  fontWeight: normal;

  paddingBottom: 0;

  paddingLeft: 0;

  paddingRight: 0;

  paddingTop: 0;

  separatorWidth: 1;

}

하지만 우리의 목적은 애플리케이션을 통해 CSS를 적용하는 것이 아닌 컴포넌트를 가져다가 사용하는 것만으로도 기본 스타일(CSS)이 적용되는 컴포넌트를 만드는것이다.

아래는 위 프로그램의 애플리케이션 코드이다. 여기서 TagBar 컴포넌트를 사용하는 예를 보여주고 있다. 주의 깊게 볼 것은 이 코드안에는 TagBar에 대한 CSS 적용을 전혀 안하고 있다는 점이다.

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

<mx:Application

        xmlns:tagbar="tagbar1.*"

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

        backgroundColor="#ffffff">

        <tagbar:TagBar dataProvider="{myViewStack}"/>

    <mx:ViewStack id="myViewStack" width="500" height="200">

        <mx:Canvas

        id="airInfo"

        label="AIR Informations"

        width="100%"

        height="100%"

        backgroundColor="#cccccc">

            <mx:Label text="AIR Informations"/>

        </mx:Canvas>

        <mx:Canvas

        id="flexInfo"

        label="Flex Informations"

        width="100%"

        height="100%" 

        backgroundColor="#cccccc">

            <mx:Label text="Flex Informations"/>

        </mx:Canvas>

        <mx:Canvas

        id="thermoInfo"

        label="Thermo Informations"

        width="100%"

        height="100%" 

        backgroundColor="#cccccc">

            <mx:Label text="Thermo Informations"/>

        </mx:Canvas>

    </mx:ViewStack>

</mx:Application>

참고로 CSS를 적용시키는 방법에는 크게 다음과 같은 2가지가 있다.

•  동적방법 : StyleManager로 SWF로 만들어진 CSS를 읽어와 적용시키는 방법
•  정적방법 : <mx:Style>로 CSS를 정의하여 애플리케이션 안에 포함시키는 방법

이와 관련된 내용은 다음글을 참고하면 되겠다.

• 런 타임(run-time)시 Style sheets 불러오기 : http://blog.jidolstar.com/242
• CSS를 Embed 하는 방법과 런타임시 적용하는 방법 예제 : http://blog.jidolstar.com/245 
• 폰트를 런타임(run time)시 동적으로 불러와 적용하는 방법 : http://blog.jidolstar.com/247

이와 같은 컴포넌트를 사용하는 애플리케이션에서 스타일을 적용하는 방법이다. 이와 별도로 커스텀 UI 컴포넌트를 만드는 개발자는 컴포넌트 자체에서 기본 스타일을 적용시키는 것도 함께 고려해야한다.

우리는 Test라는 Flex 프로젝트를 만들어 위와 같은 구성으로 예제 프로그램을 제작하고자 한다. TagBar 컴포넌트는 3개지만 네임스페이스가 다른 점에 주목하자. 또한 3번째 예에서 사용될 theme 폴더의 위치를 확인하자.

1. static 으로 초기화 하는 방법 (CSSStyleDeclaration.defaultFactory활용)

가장 많이 사용하는 방법중에 하나이다. 제작된 커스텀 UI 컴포넌트 클래스 안에 static 초기화 함수를 만들어 CSS를 적용시키는 방법이다.

package tagbar1

{

import mx.controls.LinkBar;

import mx.styles.CSSStyleDeclaration;

import mx.styles.StyleManager;

       

public class TagBar extends LinkBar

{

        private static var classConstructed:Boolean = classConstruct();

       

        private static function classConstruct():Boolean

        {

               // 기존에 TagBar이름의 type selector

               // 스타일 선언에 대한 인스턴스를 가져온다.

               var styleDeclaration:CSSStyleDeclaration

                       = StyleManager.getStyleDeclaration("TagBar");

              

               // 이전에 스타일 선언이 되어있지 않은 경우라면

               // 스타일선언 인스턴스를 새로 하나 만든다.

               if (!styleDeclaration)

                       styleDeclaration = new CSSStyleDeclaration();

              

               // defaultFactory를 이용해 스타일을 정의한다.

               styleDeclaration.defaultFactory = function ():void

               {

                       this.color = 0x00A7E3;

                       this.fontFamily = "Lucida Grande, Tahoma," +

                                                       "Verdana, Arial";

                       this.fontSize = 11;

                       this.fontWeight = "normal";

                       this.backgroundColor = 0x000000;

                       this.paddingBottom = 0;

                       this.paddingLeft = 0;

                       this.paddingRight = 0;

                       this.paddingTop = 0;

               }

              

               //선언된 스타일을 적용시킨다.

               StyleManager.setStyleDeclaration("TagBar",

                                      styleDeclaration, false);

              

               return true;

        }

 

}

 

}

 

장점

• 컴포넌트 안에 기본 스타일을 적용할 수 있기 대문에 외부 CSS 의지하지 않아도 된다.
• CSS selector들을 통해 오버라이드, 인라인 스타일, setStyle()등의 방법을 함께 사용할 수 있다.
• Flex Library 프로젝트안에 컴포넌트가 들어가는 경우에 이 방법을 쓰면 유용하다.

단점

• 프로그램 코드 안에 선언되므로 개발자외 디자이너는 스타일링을 하기 어렵다.
• 잘못사용하면 에러가 날 경우가 다분하다.
  

 

2. MXML 컴포넌트를 이용하는 방법

이 방법은 ActionScript로 추상 클래스에 해당하는 컴포넌트를 만들고 이것을 확장해서 기본 스타일을 적용시킨 MXML 컴포넌트를 만들면 된다.

다음과 같이 LinkBar를 TagBarBase라는 이름으로 확장하고 내부를 구현한다.

package tagbar2

{

        import mx.controls.LinkBar;

 

        public class TagBarBase extends LinkBar

        {

               /* TagBar 컴포넌트를 구현한다 */

        }

}

그 다음 TagBarBase를 확장한 TagBar.mxml을 아래와 같이 작성하면 되겠다.

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

<TagBarBase

        xmlns="tagbar2.*"

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

        color="#00A7E3"

        fontFamily="Lucida Grande, Tahoma, Verdana, Arial"

        fontSize="11"

        fontWeight="normal"
backgroundColor="#000000"

        paddingBottom="0"

        paddingLeft="0"

        paddingRight="0"

        paddingTop="0"

        separatorWidth="1">

</TagBarBase>

애플리케이션 코드에서  xmlns:tagbar="tagbar1.*"을 xmlns:tagbar="tagbar2.*"으로 수정해서 실행하면 되겠다. 결과 화면은 첫번째와 동일하다.

장점

• MXML, CSS, ActionScript을 사용하지 않고 Flex Builder의 Properties 패널을 이용해 디자이너라도 쉽게 컴포넌트의 스타일을 적용할 수 있다.

• Flex Builder 디자인 뷰(design view)로 실행해보지 않고 적용결과를 볼 수 있다.

단점

• 추가적인 MXML 코드를 만들어야하는 번거로움이 있다.
• 이 컴포넌트를 여러개 만들어 사용하는 경우 생성되는 개개의 컴포넌트마다 모두 적용되기 때문에 포퍼먼스를 떨어뜨릴 수 있다. 첫번째의 경우는 static 함수로 단 한번의 Type Selector 정의로 모든 TagBar 객체에 적용된다는 점을 비교해보면 쉽게 이해할 수 있다.

 

3. 테마 CSS 파일을 사용하는 방법

이 방법은 기본 스타일을 정의한 theme.css 파일과 제작한 컴포넌트를 묶는(Bundle) 방법이다.
먼저 아래와 같은 CSS파일을 theme.css라는 이름으로 프로젝트 바로 밑에 theme폴더를 만들어 위치시키자.([그림 1] 참고)

/* theme.css */

TagBar {

  color: #00A7E3;

  fontFamily: Lucida Grande, Tahoma, Verdana, Arial;

  backgroundColor:#000000;

  fontSize: 12;

  fontWeight: normal;

  paddingBottom: 0;

  paddingLeft: 0;

  paddingRight: 0;

  paddingTop: 0;

  separatorWidth: 1;

}

그리고 tagbar3 네임스페이스 안에 아래와 같은 TagBar를 제작한다. CSS 설정이 전혀 없는 것이 주목하자.

package tagbar3

{

        import mx.controls.LinkBar;

 

        public class TagBar extends LinkBar

        {

               public function TagBar()

               {

                       super();

               }

              

        }

}

애플리케이션 코드에서  xmlns:tagbar="tagbar2.*"을 xmlns:tagbar="tagbar3.*"으로 수정해서 사용해보자.  

[그림 3]과 같이 CSS가 적용되지 않은 모습을 볼 수 있을 것이다. 위에서 정의한 테마 CSS를 적용해보자.

메뉴에서 Project > Properties로 들어간 후 Flex Compiler 메뉴를 선택한후 다음과 같이 Additional compiler arguments에 "-compiler.theme=../theme/theme.css" 를 추가한다.


그런 다음 다시 실행해보자. 첫번째, 두번째 경우와 동일한 화면을 볼 수 있을 것이다.
애플리케이션 코드 내부에 CSS에 대한 어떠한 언급도 안했다는 것이 큰 차이점이라는 것을 아는 것이 중요하다.


테마(Theme) CSS는 SWC 형태로도 만들어져 사용할 수 있다.
CSS를 SWC로 만들기 위해서 Flex SDK의 bin 폴더안에 있는 compc.exe를 이용해야한다.
Flex Builder에서 compc.exe를 이용해 CSS를 SWC형태로 만들고 이것을 앞서 설명한 방법과 비슷하게 애플리케이션에 적용시켜보겠다.

먼저 메뉴에서 Run > External Tools > Open External Tools Dialog... 를 들어간다. 아래 [그림 5]과 같이 메뉴 아이콘을 통해 직접 접근해도 된다.



[그림 6]과 같이 화면이 나오면 왼쪽 Program을 선택후 오른쪽 마우스 버튼을 눌러 New를 선택하여 새로운 툴을 등록한다. 그리고 오른쪽 화면에 아래와 같이 입력하면 되겠다.

• Name : 적당한 이름으로 넣는다.
• Location : compc.exe가 위치한 경로
• Working Directory : 기본 작업 폴더이다. 여기서는 theme.css가 위치한 경로를 적어줬다.
• Arguments : compc.exe를 실행시 컴파일 옵션이다. 여기서는 theme.css를 theme.swc로 변환하는 것을 목적으로 한다. -o는 output 옵션이다. -include-file의 앞에 값은 SWC내에 들어갈 css이름, 뒤에 값은 대상 css의 경로다.
  

설정뒤 [Run]버튼을 누르거나 [그림 5]에서 위에서 설정한 이름을 클릭하면 Console 창에 아래와 같은 로그를 찍으면서 theme.swc를 theme폴더에 만들어 준다.

Loading configuration file C:\Program Files\Adobe\Flex Builder 3\sdks\3.1.0\frameworks\flex-config.xml
E:\워크스페이스경로\Test\theme\theme.swc (1289 bytes)

실행되는 로그를 보니깐 flex-config.xml를 로딩하는 것을 볼 수 있다.
실제로 옵션을 주지 않고 flex-config.xml 안에 넣는 방법도 있으나 여기서는 생략한다.

마지막으로 [그림 4]에 "-compiler.theme=../theme/theme.css" 대신 "-theme=../theme/theme.swc"를 넣어준다.
실행 결과는 동일하다.

장점

• 첫번째, 두번째 경우와 달리 기본 스타일을 적용시킨 CSS파일과 컴포넌트가 분리하여 관리할 수 있다.
  
  

단점

• 두번째와 달리 디자이너는 CSS 코딩을 하더라도 직접 그 결과를 볼 수 없다.

 

정리하며

CSS를 애플리케이션에 직접 넣지 않고 기본스타일을 커스텀 UI 컴포넌트에 적용하는 방법에 대해서 알아보았다.
마지막에 언급한 테마 CSS를 이용하는 방법은 더 공부할 여지가 있다. 관련글 블로깅하셨다면 트랙백 걸어주시면 감사하겠다.

커스텀 UI 컴포넌트에 스타일을 적용할시 다음 3가지 경우를 만족할 수 있도록 제작해야겠다.

• 정적 스타일 적용에 대응하도록
• 동적 스타일 적용에 대응하도록
• 기본 스타일 적용이 되도록
  

참고자료

• Setting up default CSS for your Flex component : http://mannu.livejournal.com/404681.html
• About themes : http://livedocs.adobe.com/flex/3/html/help.html?content=styles_12.html
• Using Styles and Themes : http://livedocs.adobe.com/flex/3/html/help.html?content=styles_01.html
• Building a simple style browser in flex 3 : http://blog.flexexamples.com/2007/09/12/building-a-simple-style-browser-in-flex-3/

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

 

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

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

Adobe Flash Platform AIR, css, CSSStyleDeclaration, Custom Component, defaultFactory, flex, Style, theme css, 스타일, 커스텀 컴포넌트