[Flex 4] Float left or right in layouts or containers?
i have a main container, that is dynamic, 100% width, and in it there are 3 components. one should be floating to left, to right and the other will be centered. how do i do that?
What do you mean by float? Is there any reason a group with a HorizontalLayout won't work?
<s:group layout="{new HorizontalLayout()}" width="100%>
<container1>
<container2>
<container2>
</s:group>
Add your 3 components to an HGroup (spark) or an HBox (halo). If you want dividers that allow your components to be resized, you can use an HDividedBox. Hope that helps.
Edit: Here's a code example based on your comment:
<s:HGroup width="100%">
<s:Panel id="fixedPanel1" width="150"/>
<s:Panel id="variablePanel" width="100%"/>
<s:Panel id="fixedPanel2" width="150"/>
</s:HGroup>
Is this what your are looking for?
Related
Is there a Flex layout class that wraps to the next line and does not size all the items the same size?
I've tried using TileLayout but the problem with that is that all the items are sized to the largest item. I want to set the gap between each to be consistent. Basically a variableColumnWidth type of feature.
<s:List id="exampleList"
selectedIndex="0"
width="100%"
dataProvider="{examplesCollection}"
change="exampleList_changeHandler(event)"
height="250"
>
<s:layout>
<s:TileLayout verticalGap="0" horizontalGap="0" />
</s:layout>
</s:List>
I'm using Apache Flex 4.12.
I think that the quickest way would be to implement an item renderer, like this example. The other option is to implement your own layout which you can adapt to what you need, for this you need to understand very well how layouts work.
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>
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>
In a Flex Mobile project I have a simple itemRenderer where I'm trying to create an "bubble" texting effect, similar to ichat or iphone (just so you get what im going for). But if the text is longer than the screen it runs off, rather than just going down a line.
If I set Group thats holding the rectangle(to create the bubble effect) and the label to 100% it works and keeps it from exceeding the list containers bounds, BUT the group is always at 100% and looks bad, I'm trying to keep the "bubble" JUST AROUND the text.
Anyway so, at the top of my itemRenderer I tried specifying:
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" width="100%" height="100%">
And here's my layout I figured since msg_container has a width of 100% I was hoping bubble_lable_group would just not exceed that but...it doesnt...it just runs off. I tried setting a max width but that does not allow you to input percents. And just to say it 1 more time. I know if i set bubble_lable_group width to 100% it works, and keeps it from going off the edge, but then the rectangle "bubble" stretches all the way across and just looks bad.
<s:VGroup id="main_container" horizontalAlign="left" paddingBottom="10" paddingTop="10"
verticalAlign="top" width="100%">
<s:VGroup id="name_container" width="100%">
<s:Label id="name_label" fontSize="20" fontWeight="bold" text="Name: " />
</s:VGroup>
<s:VGroup id="msg_container" width="100%" paddingLeft="20">
<s:Group id="bubble_lable_group">
<s:Rect id="the_bubble_shape" width="100%" height="100%" radiusX="15" radiusY="15" >
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="{grOne}"/>
<s:GradientEntry color="{grTwo}"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Label id="msg_txt" width="100%" text="msg text here"
fontSize="18" color="#FFFFFF" paddingTop="15" paddingRight="15" paddingBottom="15" paddingLeft="15"/>
</s:Group>
</s:VGroup>
</s:VGroup>
Any Ideas or tricks I could pull to achieve the effect i'm going for and keep it all inside the parent List container? I'm stumped.
EDIT:
Here's some screenshots to help illustrate the issue:
Well, it looks like you want to set the maxWidth property. Only, you can only set that with pixels, not percents. I am guessing that since you are on mobile, you don't want to be setting absolute pixels. Soooo, what if you did something a bit tricky? Data bind the max width to be the width of the renderer minus the padding of your message container...
<s:Group id="bubble_lable_group" maxWidth="{width - msg_container.paddingLeft}" >
Feels like a hack, but it works for me :)
NOTE: Using the standard ItemRenderer class is quite inefficient in Mobile. It may not be an issue for you, but just be aware of it. See this presentation from 360Flex for more info on that: http://zaa.tv/2011/06/360flex-denver-2011-flex-performance-tips-and-tricks/
I was looking for a different question, but this might be helpful to clipAndEnableScrolling="true"
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>