프로그램 언어 특히 웹쪽에 구현되어있는 언어들의 경우
처음 접하게 되면서 가장 먼저 찾게 되는 것이 샘플 사이트입니다.
어떤 기능을 제공 하고 있고 개발자에게나 사용자에게 어떻게 다가올 수 있는가를
가장 직관적으로 표현해주고 있습니다.
Sun 의 java 같은 경우도 유명한 샘플로 pet store 가 있습니다.
기능적으로 제공할 수 있는 여러 기능들을 샘플로 만들어서
해당 언어의 새로운 기능을 제시하고
개발자들이 쉽게 다가갈 수 있도록 하기 위한 가이드를 제공하고 있습니다.
http://java.sun.com/developer/technicalArticles/J2EE/petstore/?feed=JSC
- java pet store 2.0 application
심지어는 다른 회사간에 자신의 샘플이 더 좋다는 소문을 뿌리기도 합니다.
http://network.hanb.co.kr/view.php?bi_id=543
- "PetStore Revisited"(J2EE와 .NET 어플리케이션 서버 성능 벤치마크 테스트)에 관한 다른 견해
Flex 같은 경우는 한 어플리케이션에서 Flex 가 보여줄 수 있는 모든것을 담기에는
그 기능적 특성이 다양하기 때문에
각기 다른 기능으로 구성되어진 샘플을 기본적으로 제공하고 있습니다.
플렉스 빌더를 설치하였다면 다음과 같이 확인할 수 있습니다.
빌더를 설치하지 않으셨더라도 아래 주소에서 확인할 수 있습니다.
http://www.adobe.com/devnet/flex/?tab:samples=1
1. Flex Store 에 대하여
이러한 샘플중에서 Flex Store 라는 것을 살펴보도록 하겠습니다.
Flex Store 는 매크로미디어 시절의 1.5 버전에서도 대표적인 샘플중 하나였습니다.
http://flexapps.macromedia.com/flex15/flexstore/flexstore.htm
http://www.zdnet.co.kr/builder/dev/web/0,39031700,39130985,00.htm
This example exposes the power of using style sheets. You can change the default beige and orange theme to blue by commenting out the beige.css style sheet in flexstore.mxml and uncommenting the blue.css style sheet. (Currently, Flex 2 does not support the run-time loading of style sheets.)
---------------------------------------------------------
This example exposes the power of using style sheets. You can change the default beige and orange theme to blue (and back again) by clicking on the FlexStore logo in the upper-left corner of the application.
---------------------------------------------------------
<mx:Style source="beige.css"/>
<!--<mx:Style source="blue.css"/>-->
---------------------------------------------------------
private function loadStyle():void
{
var eventDispatcher:IEventDispatcher =
StyleManager.loadStyleDeclarations(currentTheme + ".swf");
eventDispatcher.addEventListener(StyleEvent.COMPLETE, completeHandler);
}
2. Flex Stroe 의 구성
전체적인 화면 구성을 보려면 아래와 같이
빌더의 outline 에서 확인할 수 있습니다.
preinitialize="loadStyle()"단어를 쓰윽 보고 유추해보신 의미가 대략 맞다고 보시면 됩니다.
creationComplete="startService()"
* flexstore.mxml스타일만 가져오는 경우에는 mx.core.StyleManager 의 loadStyleDeclarations() 메소드를 호출하여 style sheet 를 가져올 수 있습니다. 하지만 샘플에서는 스타일을 가져오고 나서 무언가 이벤트를 호출하기를 원하고 있습니다. 다행히도 loadStyleDeclarations() 메소드는 IEventDispatcher 클래스의 인스턴스를 반환하여 줍니다. 그리고 3가지 이벤트에 접근이 가능합니다.
private function loadStyle():void
{
var eventDispatcher:IEventDispatcher =
StyleManager.loadStyleDeclarations(currentTheme + ".swf");
eventDispatcher.addEventListener(StyleEvent.COMPLETE, completeHandler);
}
private function completeHandler(event:StyleEvent):void
* beige.css
{
image.source = acb.getStyle("storeLogo");
homeView.updateMapImage();
super.initialized = true;
}
-- 중략 --
<mx:ApplicationControlBar id="acb" width="100%" styleName="storeControlBar">
<mx:Image id="image" click="toggleTheme()"
toolTip="Change Theme"/>
<mx:ToggleButtonBar height="100%"
dataProvider="{storeViews}"
styleName="storeButtonBar"/>
</mx:ApplicationControlBar>
.storeControlBar
{
-- 중략 --
storeLogo: Embed("assets/logo_orange.png");
}
댓글 영역
감사합니다.