Flex 2 개발 가이드 > 유저 인터페이스의 커스터마이즈 > 스타일과 테마의 사용 > StyleManager 클래스의 사용

StyleManager 클래스의 사용

StyleManager 클래스에 의해, ActionScript 를 사용해 class 실렉터 및 타입 실렉터에 액세스 할 수 있습니다. 또, 상속 가능한 properties 와 상속 불가능한 properties 를 글로벌하게 적용할 수도 있습니다. StyleManager 를 사용하면, 새로운 CSS 스타일 선언을 정의해, 그것을 Flex 어플리케이션의 컨트롤에 적용할 수가 있습니다.

StyleManager 를 사용해 값을 설정에는, 다음의 문장구조법을 사용합니다. 

mx.styles.StyleManager.getStyleDeclaration(style_name). setStyle("property", value);

style_name 로 지정할 수 있는 것은, 리터럴인 global, Button 나 TextArea 등의 타입 실렉터, 또는 <mx:Style> 태그 또는 외부 스타일 시트로 정의하는 class 실렉터입니다. 글로벌 스타일은, 각 오브젝트로 명시적으로 재정의(override) 되지 않는 이상 모든 오브젝트에 적용됩니다.

getStyleDeclaration() 메소드는,textDecoration, 등의 상속 불가능한 스타일을 1 번에 복수의 클래스에 적용하는 경우에 도움이 됩니다. 이 properties 는,CSSStyleDeclaration 타입의 오브젝트를 참조합니다. 타입 실렉터나 외부 스타일 시트는, 이미 CSSStyleDeclaration 타입의 것이라고 상정됩니다. Flex 에서는, 이 타입의 오브젝트에 정의한 class 실렉터가 내부에서 변환됩니다.

다음에 나타내는 예에서는,fontSize properties 를 ToolTip,myStyle, 및 global 의 각 스타일명에 적용합니다. 

import mx.styles.StyleManager;
// Type selector; applies to all ToolTips and subclasses of ToolTip.
StyleManager.getStyleDeclaration("ToolTip"). setStyle("fontSize", 24); 

// Class selector; applies to all controls using the style named myStyle.
// Note that class selectors must be prefixed with a period.
StyleManager.getStyleDeclaration(".myStyle"). setStyle("fontSize", 24);

// Global style: applies to all controls.
StyleManager.getStyleDeclaration("global"). setStyle("fontSize", 24);

메모

 

상속 가능한 스타일에서도, 상속 불가능한 스타일에서도,global 스타일로 설정했을 경우는, 계층내의 위치 (와)는 관계없는 것으로 모든 컨트롤에 적용됩니다.

다음의 예에서는,global 실렉터를 사용해, 모든 컴퍼넌트에 대해서 fontFamily 스타일 properties 및 fontWeight 스타일 properties 를 정의합니다. 게다가 모든 TextInput 컨트롤의 borderStyle 를 solid 로 설정합니다. 

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="500" height="400" initialize="initializeStyles() ">
    <mx:Script><! [CDATA[
        import mx.styles.StyleManager;
        public function initializeStyles() :void {
            // Initialize the global settings.
            StyleManager.getStyleDeclaration("global"). 
                setStyle("fontFamily", "Arial");
            StyleManager.getStyleDeclaration("global"). 
                setStyle("fontWeight", "bold");
        
            // Initialize all TextInput controls to have solid borders.
            StyleManager.getStyleDeclaration("TextInput"). 
                setStyle("borderStyle", "solid");
        }
    ]]></mx:Script>
    <mx:Button id="btn2" label="Click Me"/> 
    <mx:TextInput width="425" height="250" text="this is a text area"/>
</mx:Application>

CSSStyleDeclaration 클래스에서 ActionScript 를 사용하면, CSS 스타일 선언을 작성할 수 있습니다. 이것을 이용하면, 실행시에 스타일 시트를 작성해 편집해, Flex 어플리케이션의 클래스에 적용할 수 있습니다. 실행시에 스타일 정의의 변경이나 스타일의 적용을 실시하려면 ,setStyle() 메소드를 사용합니다.

StyleManager 는,setStyleDeclaration() 메소드도 갖추고 있습니다. 이 메소드를 사용하면 CSSStyleDeclaration 오브젝트를 실렉터로서 적용할 수 있으므로, 어느 타입의 컴퍼넌트 모두에게 스타일 시트를 적용할 수 있습니다. 이 실렉터는, class 실렉터 또는 타입 실렉터로서 기능합니다.

다음의 예에서는, 새로운 CSSStyleDeclaration 오브젝트를 작성해, 몇개의 스타일 properties 를 오브젝트에 적용합니다. 다음에, StyleManager 의 setStyleDeclaration() 메소드를 사용해 모든 Button 컨트롤에 새로운 스타일을 적용합니다. 

<mx:Script><! [CDATA[ 
    import mx.styles.StyleManager;
    import mx.styles.CSSStyleDeclaration;
        
    private var myDynStyle:CSSStyleDeclaration = new
        CSSStyleDeclaration("myDynStyle");
    
    private function init() :void {
        myDynStyle.setStyle('color', 'blue');
        myDynStyle.setStyle('fontFamily', 'Arial');
        
        // Apply the new style to all Button controls.
        StyleManager.setStyleDeclaration("Button", myDynStyle, true);
    }
]]></mx:Script>

타입 실렉터에 새로운 CSSStyleDeclaration 를 설정하면, 기존의 타입 실렉터 전체가 새로운 실렉터로 옮겨놓을 수 있습니다. 새로운 CSSStyleDeclaration 로 명시적으로 값이 정의되어 있지 않은 스타일 properties 는, 모두 null 로 설정됩니다. 이것에 의해, "defaults.css" 파일 또는 이미 적용 끝난 스타일 시트로 정의되고 있는 스킨이나 마진등의 properties 가 삭제되는 일이 있습니다.

모든 스타일 properties 가 무효가 되지 않게 하려면 , class 실렉터를 사용해 새로운 CSSStyleDeclaration 오브젝트를 적용합니다. class 실렉터의 스타일 properties 로 기존의 타입 실렉터의 properties 를 옮겨놓을 수 있을 것은 없기 때문에, 컴퍼넌트의 디폴트 설정을 유지할 수 있습니다.

다음의 예에서는, myButtonStyle 를 b1 Button 컨트롤에 적용합니다. 

<? 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.styles.CSSStyleDeclaration;
        
    private var myDynStyle:CSSStyleDeclaration = new
        CSSStyleDeclaration("myDynStyle");
    private function init() :void {
        myDynStyle.setStyle('color', 'blue');
        myDynStyle.setStyle('themeColor', 'green');
        myDynStyle.setStyle('fontFamily', 'georgia');
        // Use class selector to apply style to certain class of components.
        StyleManager.setStyleDeclaration(".myButtonStyle", myDynStyle, true);
    }
  ]]></mx:Script>
  <mx:Button id="b1" label="Click Me" styleName="myButtonStyle"/> 
</mx:Application>

CSSStyleDeclaration 오브젝트를 삭제하려면 , 다음의 예와 같이, StyleManager 의 clearStyleDeclaration() 메소드를 사용합니다. 

StyleManager.clearStyleDeclaration(".myButtonStyle", true);

clearStyleDeclaration() 메소드를 사용하면, 지정한 실렉터의 스타일만이 삭제됩니다. 컴퍼넌트에 class 실렉터를 적용해, 그 컴퍼넌트의 class 실렉터에 대해서 이 메소드를 호출하면, 이 컴퍼넌트의 타입 실렉터의 스타일은 삭제되지 않고 남습니다.

setStyleDeclaration() 메소드 및 clearStyleDeclaration() 메소드는 많은 계산 처리를 실시합니다. update 파라미터를 false 로 설정하면, 새로운 스타일을 Adobe Flash Player 가 곧바로 적용 또는 클리어 하지 않게 할 수 있습니다.

다음의 예에서는, 다양한 타겟으로 새로운 class 실렉터를 설정합니다만, 마지막 스타일 선언의 적용까지 갱신을 trigger 하지 않습니다. 

StyleManager.setStyleDeclaration("Button", myButtonStyle, false);
StyleManager.setStyleDeclaration("Label", myLabelStyle, false);
StyleManager.setStyleDeclaration("TextArea", myTextAreaStyle, true);

update 파라미터로서 false 를 건네주면, Flash Player 는 실렉터를 저장하는 것만으로 스타일을 적용하지 않습니다. update 파라미터로서 true 를 건네주면, Flash Player 는 어플리케이션에 포함되는 각 비주얼 컴퍼넌트의 스타일을 재계산합니다.