1. mxml문서 안에 CSS 정의하기
<mx:Style>
.isMyStyle{
font-size:10;
}
</mx:Style>
…
<mx:Button label="push" styleName="isMyStyle" x="62" y="76"/>
2. mxml문서 밖에 CSS정의하기
<!—css파일이 있는 해당 경로 지정--> <mx:Style source="flex_skins.css"/> … <mx:Button label="push" styleName="myFontStyle" x="62" y="76"/>
3. actionscript로 CSS정의하기
4. 그래픽(이미지) 스킨 적용하기
Inline:
<mx:Button upSkin=”@Embed(‘assets/myGraphicButton.gif ’)”/>
CSS:
<mx:Style>
Button{
overSkin:Embed(”assets/myGraphicButton.gif ”);
}
</mx:Style>
Action Script:
<mx:Script>
<![CDATA[
[Embed("assets/myGraphicButton.gif")]
var dSkin:Class;
private function init():void
{
myButton.setStyle("downSkin",dSkin);
}
]]>
</mx:Script>
cf. 버튼의 분리된 스킨 관리(upSkin, overSkin, downSkin, disableSkin)
5. CSS를 swf로 변환하여 사용하기
기존의 css를 내부나 외부에서 가지고 접근하게 되면 컴파일 될 경우 어플리케이션 안으로 포함.
따라서 보다 경량적이고 유기적인 방법 모색을 시도한다.
런타임 CSS 적용(swf, swc)
merits
- 재 컴파일과 재 배포가 필요 없기 때문에 간단히 배포(빠른 유지 보수)
- 하나의 어플리케이션에 다수의 스킨을 다방면으로 디플로이 시킬 수 있기 때문에 커스터마이징이 유리
CSS파일을 SWF로 만드는 방법은 간단하다.
물론 Flex Builder가 알아서 해준다.(mxmlc를 이용해서 컴파일 가능)
Package Explore 창에서 해당 css를 선택하고 마우스 우 클릭>compile css to swf를 실행
out-put 폴더(default bin-debug)에 css, swf파일이 추가가 된다.
단 한 줄의 코드로 사용할 수도 버릴 수도 있다.
StyleManager.loadStyleDeclarations(“myStyle.swf”); StyleManager.unloadStyleDeclarations(“myStyle.swf”);
6. swf, swc 를 import하여 component스킨 변경하기
flex builder에는 놀라운 위자드가 있는데 그것이 flash나 photoshop,illustrator에서 작업한 내용을 가지고 스킨을 변경할 수 가 있다고 한다. photoshop이나 illustrator는 designer에게 해보라 하고 우린 flash로 한번 skin을 변경해 보겠다.
flex componet skin을 편집할 수 있는 extension을 깔아 준다.( http://www.adobe.com/products/flex/flexdownloads/ )
flex_skin template가 만들어지고 깔리는 위치는 C:\Documents and Settings\…\Local Settings\Application Data\Adobe\Flash CS4\en\Configuration\Templates\Flex_Skins에 깔릴 것이다.(윈도우 환경)
그리고 cs3,4를 실행하게 되면 start page에 template이 생길 것이다.
혹 생기지 않는 다면 program files폴더에 있는 Flash CS4의 위와 같은 경로로 다시 한번 Flex_Skins를 복사해서 깔아 봐주고 CS3,4를 재 시작하게 되면 생성 될 것이다.
Flex_Skin을 선택하고 flex_skins를 선택하면 전체 컴포넌트 스킨들이 뜰 것이다.
각각 필요한 편집을 마치고 publish setting을 들어가서 Export to SWC를 체크해 주고 publish를 해주게 되면 swc파일이 해당 폴더에 생성 된다.
그 해당 swc를 flex 빌더로 돌아와, 메뉴에서 File>Import를 하게 되면 mx skin artwork(skin artwork)를 선택 기존의 swf나 swc를 선택하고 import를 하게 되면 해당 컴포넌트들의 스킨이 변경 될 것이다.
7. theme 적용하기
마지막으로 Flex builder를 깔게 되면 기본적으로 깔려있는 Theme을 변경해 보자.
Package Explore에서 마우스 오른쪽 클릭 후 properties>Flex Theme 메뉴에 들어가게 되면 7가지(default 포함) Theme이 있는데 하나를 선택하고 OK를 하게 되면 해당 Skin으로 전체 적용이 될 것이다.
default가 아닌 theme을 적용하게 되면 theme관련된 swf, html파일이 자동 생성(theme관련된 정보는 “.actionScriptProperties”안에 명시됨)되는데 호기심이 나는 바람에 swf를 decompile해 보았다.
오~ 수많은 as파일들이 나타나는 군요.
거기엔 actionscript로 각 컴포넌트들의 스킨을 제어하고 있다.
theme를 추가 하고자 한다면 우선 CSS, SWC로 정의 된 파일을 가지고 import 해서 사용 가능하다.
추가적으로 CSS 정의 내릴 웹 툴을 소개한다.(CSS를 잘 안다면 직접 작성하는 천재들은 패스~)
Flex Style Explore(v3.0 beta)
http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html#
본 사이트에서 각 컴포넌트들의 설정 값들을 변경하고 CSS창에 생성되는 소스를 가져다 쓰면 간편하게 이용할 수 있다.
또한 CSS를 Flex builder로 Design모드에서 preview를 해가면서 변경도 가능하다.
보너스 하나 더!!!
각종 컴포넌트 커스트마이징 다운로드
theme관련 다운로드
정말 skin과 CSS 적용하는 방법과 수칙들이 너무나 다양해서 다 설명하기란 역부족인 것 같습니다.
끝 맺음에 앞서 중요한 것은 컴파일 시 적용시키는 CSS보단 swf로 런타임 시 적용 시키는 방법이 더 효율적이고 이상적인 것이라 기억해 주면서…
차후에 부족한 정보는 추가 업데이트 하도록 하겠습니다.
