FLEX scrollable NavigatorContent - apache-flex

I have a TabNaivgator which I fill in runtime with NavigatorContent filled in runtime as well with content.
I see though that my content is taller than the NavigatorContent height, but instead of creating a scrollbar, Flex makes the content exit the NavigatorContent bounds
here is the code: http://pastebin.com/xxnSz6pk
and here is the result: http://dl.dropbox.com/u/4064417/Immagine.png
how do I make that content scroll?
thanx in advance

Use the Scroller component inside the NavigationContent tags, and a Group inside the Scroller tags:
<s:NavigatorContent width="100%" height="100%">
<s:Scroller width="100%" height="100%">
<s:Group>
<!-- Your component(s) here! -->
</s:Group>
</s:Scroller>
</s:NavigatorContent>

Related

Flex 4 VGroup,Hgroup Scroll

Hi Guys I have a problem with vertical scroll bar, please help me, my component structure is as below, Iam working on flex4
<HGROUP>
<VGROUP>
<LABEL/>
<ADVANCEDDATAGRID/>
</VGROUP>
<CANVAS/>
</HGROUP>
heights are given to 100%, I have large data in datagrid, which is creating vertical scrollbar in the middle of the component,I neeed the scrollbar to the parent component that is HGROUP, can anybody help me
Put your component inside a scroller tag and set the vertical scroll policy of advancedatagrid to off.
<s:Scroller width="100%" height="100%" >
<s:HGroup height="100%">
<s:VGroup height="100%">
<s:Label/>
<mx:AdvancedDataGrid width="100%" height="100%" verticalScrollPolicy="off"/>
</s:VGroup>
<mx:Canvas/>
</s:HGroup>
</s:Scroller>

Flex - Scroller that wraps a popup window

Programming in Flex 4.5
I want a scroller to be wrapped around a popup window (based on borderconatiner)
I cant put my scroller correctly.
<s:Scroller width="600" height="70%" id="scroller>
<s:Group id="myGroup">
// Here is the rest of my code..
</s:Group>
</s:Scroller>
Any suggestions?
You should check this example from Tour de Flex
Right click then View Source.

What is the best view architecture in flex?

I have started learning flex 4 and I got myself thinking about how to change views. So I have a question what do people usually use - states or views (ViewStack). The type of web application I am making, can use both, but what do developers use in big projects or maybe they use non of the mentioned before?
Also I have a question about ViewStack. If I write:
<mx:ViewStack id="views" resizeToContent="true" verticalCenter="0" horizontalCenter="0" >
<s:NavigatorContent id="navOne">
<s:Label text="asdas" x="0" y="0"/>
</s:NavigatorContent>
then I can't change location of its child. Label remains in the center of the screen. If I remove vertical and horizontal center from ViewStack and put them in Label's tags, then label will be in top left corner but not in center. How do I control those locations?
As far as you're using Flex 4 you can prefer states. And there are at least two reasons for that:
Flex 4 states are much more declarative than in Flex 3.
Flex 4 hasn't Spark implementation of ViewStack and it is rather obsolete (necessarity of using NavigatorContent with Spark container is another proof of that fact).
The second part of the question. The problem is your ViewStack hasn't any size. So finally it has size of content (Label size). So verticalCenter and horizontalCenter are just alignment of your ViewStack. To control size and alignment of ViewStack you should care about sizes. Something like:
<mx:ViewStack id="views" resizeToContent="true" verticalCenter="0"
horizontalCenter="0" width="500" height="300" >
<s:NavigatorContent id="navOne" width="100%" height="100%">
<s:Label text="asdas" x="0" y="0"/>
</s:NavigatorContent>

Centering Content in Flex 4

I'm building a custom component that extends SkinnableContainer. I can center the content either vertically or horizontally inside it, but not both-- and that is what I need.
I'm setting the layout to HorizontalLayout for the component and setting verticalAlign to middle.
Then I'm creating a canvas to surround another component that goes inside this component, and setting that canvas width to 100%, and then setting textAlign=center, but no dice.
Any help is appreciated.
Use the horizontalCenter and verticalCenter properties to center your groups. The value is the number of pixels from either center where the sign of value denotes direction, 0 is absolute center.
This'll do the trick (assuming you want horizontal layout for your items). The 's' namespace refers to the spark components, since you're asking about flex 4 I assume Halo isn't of interest.
<s:Group>
<!-- Any parent with BasicLayout will acknowledge horizontalCenter and verticalCenter -->
<s:layout>
<s:BasicLayout />
</s:layout>
<s:Group horizontalCenter="0" verticalCenter="0">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:Button />
<s:Button />
<s:Button />
</s:Group>
</s:Group>

Flex full screen mode

I'm new in flex.
I faced problem to make full screen in flex 3.My layout container type like below.
<mx:Application >
<mx:Panel>
<mx:ViewStack>
<mx:VBox >
<mx:VBox >
<mx:Canvas >
<mx:HBox width="300" height="300">
</mx:HBox>
</mx:Canvas>
</mx:VBox>
</mx:VBox>
</mx:ViewStack>
</mx:Panel>
</mx:Application>
the container width and height will be fixed like above.Then when i click a button full screen it will be full screen mode. Please help me with example and tutorial.
best regard.
Mahedi
Assuming you are referring to full screen as in 'use the whole monitor':
Calling stage.displayState = StageDisplayState.FULL_SCREEN; will set your flash movie to full screen mode (provided that the allowFullScreen parameter has been set to true in the object/embed tags of the embedding html page). Scale up the hbox (change its width/height) so that it occupies the whole space available.
Just set
<mx:HBox width="100%" height="100%">
//Other Codes
</mx:HBox>
From what I understand what you want is to change the width / height of the component at run-time.
In this case you need to give an id to the HBOx, add a script block, and call the 'width' / 'height' setter on your block.
Is that what you want to do ?
Thanks
PH

Resources