오래간만에 강좌를 올립니다.
Flex CSS의 2번째 강좌인 Programmatic Skin 에 대한 강좌입니다.
이 강좌는 제 블로그에 올라가 있는 Gauge 컴포넌트(http://blog.jidolstar.com/227)를 이용하여 어떻게 스킨을 만드는지 알려주고 있습니다.
하나의 컴포넌트에 여러개의 스킨을 입힐 수 있는데
그 스킨의 종류에는 크게 2가지입니다.
1. Programmatic Skin
- skin을 프로그래머가 직접 만든다. 복잡한 그림은 그릴 수 없으나 다양한 표현이 가능하다.
2. Graphical Skin
- 디자이너가 그려준 스킨이다. png,jpeg,swf와 같은 이미지를 스킨으로 입힌다고 보면 된다.
Flex SDK에서는 이 2개의 스킨을 모두 이용합니다.
기본적으로 Programmatic Skin을 이용합니다. Button에 upSkin, downSkin, overSkin등에 선색, 배경색 등을 지정할 수 있는 것은 다 Programmatic Skin을 활용했기 때문에 가능합니다. 만약 upSkin, downSkin, overSkin등에 이미지를 썼다면 그것은 Graphical Skin입니다.
Gauge라는 새로운 컴포넌트를 만들면서 거기에 스킨을 어떻게 입히는지 배워보는 시간이 될겁니다.
한가지 아셔야할 사항은 스킨분야도 이게 다가 아니라는 겁니다.
Flex Component Kit를 이용해서 디자이너가 직접 스킨을 입힌 컴포넌트를 만들어 SWC로 배포하는 방법, stateful skin을 이용하는 방법, flash linkage를 이용하여 하나의 SWF안에 여러개 스킨을 담아서 사용하는 방법, flash로 제작된 Class 단위 스킨을 만들어 Flex에서 로드하여 StyleManager 또는 setStyle()등을 이용해 스킨을 만드는 방법등... 다양하게 스킨을 만들어 사용할 수 있습니다. 물론 앞서 말한 Programmatic Skin과 Graphical Skin중 하나가 되지만 어쨌든 스킨만들어 사용하는 방법은 너무 다양하다는것.....
또 CSS를 정적으로 프로그램안에 포함시키는 방법과 CSS를 SWF로 만들어 동적 로딩하는 방법이 있다는 것 아시죠?
서로 다른 CSS 적용방식을 고려해서 스킨을 적용한 컴포넌트를 만들어야 할겁니다.(이 부분 해결에 대해서는 숙제로 남깁니다.)
아래 동영상 강의는 Gauge 컴포넌트를 만들때 스킨을 입히는 부분만 설명하고 있습니다.
나머지 내용은 여러분이 스스로 공부하시는 편이 좋을 것 같습니다.
만약 이해가 안되시거나 너무 어려우면 질문해주세요. ^^
[동영상강의]
거의 1시간 반 분량입니다. 힘내세요. ^^
중간에 쩝쩝 그래서 죄송합니다. ㅎㅎㅎ 제가 듣기에도 거북하다는 ㅋㅋ
http://blog.jidolstar.com/FlexLecture/20080822_ProgrammaticSkin/
http://blog.jidolstar.com/FlexLecture/20080822_ProgrammaticSkin2/
http://blog.jidolstar.com/FlexLecture/20080822_ProgrammaticSkin3/
숙제
1. http://livedocs.adobe.com/flex/3/html/help.html?content=skinning_1.html 에서 스킨에 대해 전반적으로 공부한다.
2. http://blog.jidolstar.com/227 에 들어가서 Gauage 컴포넌트에 대해 학습하고 익힌다.(블로그가시면 google adsense한번 눌러줘주는 센스!?)
3. interface 설계 및 활용에 대해서 조사해본다.(검색을 주로 이용하세요.)
4. 동영상안의 AnalogGauge말고도 IGauage를 구현한 다른 Gauge를 만들어보자. 가령, DigitalGauge등...
5. [Style] Metadata에 대해서 학습한다.
6. [Event] Metadata에 대해서 학습한다.
7. 동영상에서 만들어진 AnalogGauge는 StyleManager.loadStyleDeclination()함수를 이용하여 스킨정보가 포함된 CSS를 로드하여 적용하는 경우에는 CSS가 제대로 적용되지 않는다. 적용되지 않는 이유를 밝히고 동적 CSS로드할때도 스킨이 제대로 적용될수 있도록 구현해보자.
(참고 : UIComponent의 styleChanged(), createSkin()함수 부분을 다시 보자.)
이 글을 다른 별님들에게 추천합니다.)
Since 2001.2.7 과학기술부 등록 비영리민간단체 천문노트. Copyright All rights reserved.