2011. 9. 19. 12:26
[Flex] Application에 Scroller 넣기. 공부/flex2011. 9. 19. 12:26
flex3에서는 Application에 minHeight , minWidth를 정하면 자동으로 스크롤이 생겼는데
spark component로 되면서 스크롤을 따로 넣어주어야 스크롤이 생깁니다.
물론 Application에 width=1000 height=800 이렇게 넣어주면 브라우저가 이 사이즈보다 작아졌을 경우에는 브라우저 자체 스크롤이 생깁니다. 그렇지만 브라우저가 이 사이즈보다 커지면 흰여백으로 채워지기 때문에 width=100% height=100%를 해줘야합니다.
스크롤을 어떻게 써야될까
찾아보니, Application에 SkinClass를 생성해서 body부분이 될 Group컴포넌트를 Scroller로 감싸주면 된다는 것.
<Applicaiont 부분>
<!--- @copy spark.components.SkinnableContainer#contentGroup -->
<s:Scroller width="100%" height="100%">
<s:Group id="contentGroup" width="100%" height="100%" minWidth="1200" minHeight="824" />
</s:Scroller>
또는 Application 내부에 Scroller를 넣어 다른 객체들을 감싸는것.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%" >
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Scroller id="sc" width="100%" height="100%">
<s:Group id="gr" width="100%" height="100%" >
<s:BorderContainer id="bc" width="100%" height="100%" minWidth="1200" minHeight="824">
<s:backgroundFill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x3D7ACF" alpha=".9" />
<s:GradientEntry color="0x3D7ACF" alpha=".6" />
<s:GradientEntry color="0x3D7ACF" alpha=".6" />
<s:GradientEntry color="0x3D7ACF" alpha=".6" />
<s:GradientEntry color="0x3D7ACF" alpha=".6" />
<s:GradientEntry color="0x3D7ACF" alpha=".9" />
</s:LinearGradient>
</s:backgroundFill>
<s:Label id="lb" text="FLEX TEST" color="0xFF0000" fontSize="50"
top="{(bc.height - lb.height)*0.5 }"
left="{(bc.width - lb.width)*0.5}"/>
</s:BorderContainer>
</s:Group>
</s:Scroller>
</s:Application>
결과화면.
주의!!
Application과 Scroller에 minHeight또는 minWidth을 지정하지 않는다.
Application과 Scroller의 width height는 100%!!
Scroller안에 Group을 넣고 Group이나 내부컨테이너에 크기지정하기!!
Scroller가 빠져서 가벼워졌을진 모르겠지만 엄청 귀찮아졌네요..-_- 곰방 익숙해지겠지만....
reference: adobe flex 4.5 help
spark component로 되면서 스크롤을 따로 넣어주어야 스크롤이 생깁니다.
물론 Application에 width=1000 height=800 이렇게 넣어주면 브라우저가 이 사이즈보다 작아졌을 경우에는 브라우저 자체 스크롤이 생깁니다. 그렇지만 브라우저가 이 사이즈보다 커지면 흰여백으로 채워지기 때문에 width=100% height=100%를 해줘야합니다.
스크롤을 어떻게 써야될까
찾아보니, Application에 SkinClass를 생성해서 body부분이 될 Group컴포넌트를 Scroller로 감싸주면 된다는 것.
<Applicaiont 부분>
<skinClass부분>
<!--- @copy spark.components.SkinnableContainer#contentGroup -->
<s:Scroller width="100%" height="100%">
<s:Group id="contentGroup" width="100%" height="100%" minWidth="1200" minHeight="824" />
</s:Scroller>
또는 Application 내부에 Scroller를 넣어 다른 객체들을 감싸는것.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%" >
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Scroller id="sc" width="100%" height="100%">
<s:Group id="gr" width="100%" height="100%" >
<s:BorderContainer id="bc" width="100%" height="100%" minWidth="1200" minHeight="824">
<s:backgroundFill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x3D7ACF" alpha=".9" />
<s:GradientEntry color="0x3D7ACF" alpha=".6" />
<s:GradientEntry color="0x3D7ACF" alpha=".6" />
<s:GradientEntry color="0x3D7ACF" alpha=".6" />
<s:GradientEntry color="0x3D7ACF" alpha=".6" />
<s:GradientEntry color="0x3D7ACF" alpha=".9" />
</s:LinearGradient>
</s:backgroundFill>
<s:Label id="lb" text="FLEX TEST" color="0xFF0000" fontSize="50"
top="{(bc.height - lb.height)*0.5 }"
left="{(bc.width - lb.width)*0.5}"/>
</s:BorderContainer>
</s:Group>
</s:Scroller>
</s:Application>
결과화면.
주의!!
Application과 Scroller에 minHeight또는 minWidth을 지정하지 않는다.
Application과 Scroller의 width height는 100%!!
Scroller안에 Group을 넣고 Group이나 내부컨테이너에 크기지정하기!!
Scroller가 빠져서 가벼워졌을진 모르겠지만 엄청 귀찮아졌네요..-_- 곰방 익숙해지겠지만....
reference: adobe flex 4.5 help
'공부 > flex' 카테고리의 다른 글
| [Flex] Spark DataGrid ItemRenderer (0) | 2011.10.05 |
|---|---|
| [Flex] Date "YYYY/MM/DD" (2) | 2011.09.23 |
| 플렉스 DataGrid 를 Excel 파일로 다운로드하기. (2) | 2010.04.27 |
| TitleWindow 데이터 보내기 (0) | 2010.03.26 |
| datagrid 에서 특정 셀 클릭 제어.(ListEvent) (0) | 2010.02.23 |
