Flex 2 개발 가이드 > 유저 인터페이스의 커스터마이즈 > 스킨의 사용 > 프로그램 스킨 > 프로그램 스킨의 적용

프로그램 스킨의 적용

그래피컬 스킨과 같이, 다음에 나타내는 방법에 의해, 어플리케이션 중(안)에서 프로그램 스킨을 컨트롤에 적용할 수 있습니다.

이러한 어느 경우여도, 컴퍼넌트에 프로그램 스킨을 적용할 때는, 완전한 파일명은 아니고, 프로그램 스킨의 클래스명으로 지정합니다. 예를 들어, 완전한 파일명인 "SampleSkin.as" 는 아니고, "SampleSkin" 를 사용합니다.

어플리케이션의 컴파일시에는, 이 프로그램 스킨의 클래스가 소스 패스에 놓여져 있을 필요가 있습니다. 게다가 이 스킨의 클래스를, Flex 어플리케이션의 ActionScript 블록 또는 헬퍼 클래스에 읽어들이는 일도 필요합니다.

프로그램 스킨이 이름 첨부의 패키지에 포함되어 있는 경우, 패키지의 레벨을 피리어드로 단락지어 주세요. 예를 들어, SampleButtonSkin 클래스가 my.skins 패키지에 포함되어 있는 경우, 이것을 적용할 때는 "my.skins.SampleButtonSkin" 를 사용합니다. 이것은 패키지내의 임의의 클래스를 참조할 때 것과 같습니다. 프로그램 스킨이 이름 첨부의 패키지에 포함되지 않은 경우, 그러한 스킨은 이름이 없는 패키지에 포함되어 있을 필요가 있습니다. 그러한 스킨을 이름이 없는 패키지에 추가하려면 , 클래스를 package 명령문(statement)로 둘러쌉니다.

상세한 것에 대하여는,프로그램 스킨의 컴파일을 참조해 주세요.

CSS 파일의 사용

CSS 파일내의 프로그램 스킨을,ClassReference 지시문을 사용해 적용합니다. 이 지시문은, 인수로서 클래스명을 취합니다. 어플리케이션의 컴파일시에는, 이 프로그램 스킨의 클래스가 소스 패스에 놓여져 있을 필요가 있습니다.

다음의 CSS 파일의 예에서는, SampleAccordionHeaderSkin 및 SampleButtonSkin 프로그램 스킨을, AccordionHeader 및 Button 컨트롤의 선택된 상태에 적용합니다. 

/* MyTheme.css */
AccordionHeader {
    upSkin: ClassReference('SampleAccordionHeaderSkin');
    overSkin: ClassReference('SampleAccordionHeaderSkin');
    downSkin: ClassReference('SampleAccordionHeaderSkin');
    disabledSkin: ClassReference('SampleAccordionHeaderSkin');
    selectedUpSkin: ClassReference('SampleAccordionHeaderSkin');
    selectedOverSkin: ClassReference('SampleAccordionHeaderSkin');
    selectedDownSkin: ClassReference('SampleAccordionHeaderSkin');
    selectedDisabledSkin: ClassReference('SampleAccordionHeaderSkin');
}
Button {
    upSkin: ClassReference('SampleButtonSkin');
    overSkin: ClassReference('SampleButtonSkin');
    downSkin: ClassReference('SampleButtonSkin');
    disabledSkin: ClassReference('SampleButtonSkin');
}

CSS 파일과 같이, 다음의 예와 같이,<mx:Style> 태그를 사용해 스타일 시트를 정의하는지, 외부 스타일 시트를 참조할 수 있습니다. 

<mx:Style source="MyTheme.css"/>

인 라인 문장구조법의 사용

스킨을 교환하는 상태 마다 프로그램 스킨 클래스를 지정하는 것으로써, 그 클래스를 인 라인으로 포함할 수가 있습니다. 클래스명은, curly braces { } 로 둘러쌉니다. 어플리케이션의 컴파일시에는, 이 프로그램 스킨의 클래스가 소스 패스에 놓여져 있을 필요가 있습니다.

다음의 예에서는, SampleButtonSkin 프로그램 스킨을 Button 컨트롤의 upSkin 상태, overSkin 상태, downSkin 상태, disabledSkin 상태에 적용합니다. 

<mx:Button label="Button" id="button1" 
upSkin="{SampleButtonSkin}" 
overSkin="{SampleButtonSkin}" 
downSkin="{SampleButtonSkin}" 
disabledSkin="{SampleButtonSkin}"/>

인 라인으로 프로그램 스킨을 적용할 때는, 컴파일러로 해당의 클래스명을 해결할 수 있도록(듯이), 클래스를 어플리케이션에 읽어들일 필요가 있습니다. 다음에 예를 나타냅니다. 

<mx:Script>
    import SampleButtonSkin;
    import SampleAccordionHeaderSkin;
</mx:Script>

스킨에서의 setStyle() 메소드 및 StyleManager 의 사용

setStyle() 메소드를 사용하면, 프로그램 스킨을 컨트롤의 단일의 인스턴스에 적용할 수 있습니다. 이 메소드내에서, 치환하는 스킨의 properties 및 프로그램 스킨의 클래스명을 지정합니다. 어플리케이션의 컴파일시에는, 이 프로그램 스킨의 클래스가 소스 패스에 놓여져 있을 필요가 있습니다.

다음의 예에서는, SampleButtonSkin 스킨을 button1 컨트롤의 upSkin 상태에 적용합니다. 

button1.setStyle("upSkin", SampleButtonSkin);

StyleManager 클래스를 사용하면, 1 개의 프로그램 스킨을 모든 Button 컨트롤 상태에 적용할 수 있습니다. 다음의 예에서는, 모든 Button 컨트롤의 upSkin 상태에 SampleButtonSkin 스킨을 적용합니다. 

StyleManager.getStyleDeclaration("Button"). setStyle("upSkin", SampleButtonSkin);

setStyle() 메소드로 프로그램 스킨을 적용할 때는, 컴파일러로 해당의 클래스명을 해결할 수 있도록(듯이), 클래스를 어플리케이션에 읽어들일 필요가 있습니다. 다음에 예를 나타냅니다. 

<mx:Script>
    import SampleButtonSkin;
    import SampleAccordionHeaderSkin;
</mx:Script>

setStyle() 메소드의 사용 방법의 상세한 것에 대하여는,setStyle() 메소드와 getStyle() 메소드의 사용을 참조해 주세요. StyleManager 의 사용 방법의 상세한 것에 대하여는,StyleManager 클래스의 사용을 참조해 주세요.