I usually write something like this:
<mx:VBox height="100%" width="155">
<mx:Button label="b1" width="100%"/>
<mx:Buttonlabel="b2" width="100%"/>
<mx:Button label="b3" width="100%"/>
<mx:Button label="b4" width="100%"/>
</mx:VBox>
So I need all the child components to be 100%, anybody knows any other way of doing this, like without having to specify 100% for all children.
Maybe do it programmatically on load? Loop through direct children and set their widths, setting it to 100%
Related
I'm using the following code to load an image to the screen:
<s:Scroller xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
width="100%"
height="100%">
<s:VGroup width="100%" horizontalAlign="center" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalAlign="top">
<s:Label width="100%" text="Being Active" fontSize="14" fontFamily="Black"/>
<s:Image fillMode="scale" smooth="true" scaleMode="letterbox" verticalCenter="0" horizontalCenter="0" width="100%" source="#Embed('assets/img/q3/q3c1all.png')"/>
....
....
</s:VGroup>
</s:Scroller>
In the attached image, it has three images
1. Builder view
2. final design (what designer expects)
3. rendered output (what users will see)
Because of the scaleMode letterbox, there is lots of space above and below image is blanked. And this breaks out the layer. Can someone suggest how can I make the out put looks like design preview (titled Requirement)
How to scale the image proportionately without distorting (like its done in CSS).
To those who struggle with this issue - the solution is to use which will give you full control over the bitmap. One thing to note is - if you are planning to use interaction / events with the image, wrap it inside a container and add click event to it.
I dont know if this is best solution, but it worked for me :)
In Flex4/mxml, I have a bunch of elements like TextFields, Buttons or anything else. I want to place them horizontally next to each other. But for cases where the browser window or screen resolution is too small such that not all of them fit horizontally, I want a layout which automatically shifts the superfluous elements to the row below.
In other words, I need a layout which comprises both, horizontal and vertical layouting, whereas horizontal has priority over vertical. So actually a very simple layout, yet I'm unable to find a solution. How can I achieve that?
For example, the following is a starting point:
<mx:HBox horizontalGap="0" width="{width-30}" horizontalAlign="center" textAlign="center">
<mx:Label paddingLeft="10" text="anytext1" />
<mx:Label id="warn12" text="anytext2" />
<mx:Button label="Do Something1" click="{cf.doSomething(1)}"/>
<mx:Label paddingLeft="0" text="anytext3" />
<mx:Button label="Do Something2" click="{cf.doSomething(2)}"/>
</mx:HBox>
The HBox places all Labels and Buttons next to each other horizontally, and if the screen size is too small, the right most items exceed the right screen border, but I want them to appear below on the left in a second row.
In addition, but less important, I want the Labels and Buttons to be centered if the screen size is bigger than necessary. That's what the horizontalAlign="center" and textAlign="center" are meant for.
You should be able to use a Tile element. It automatically wraps elements to a new line if the screen isn't wide enough to accommodate everything:
<mx:Tile id="myFlow"
direction="horizontal" width="{width-30}"
paddingTop="0" paddingBottom="0"
paddingRight="0" paddingLeft="0"
verticalGap="0" horizontalGap="0">
<mx:Label paddingLeft="10" text="anytext1" />
<mx:Label id="warn12" text="anytext2" />
<mx:Button label="Do Something1" click="{cf.doSomething(1)}"/>
<mx:Label paddingLeft="0" text="anytext3" />
<mx:Button label="Do Something2" click="{cf.doSomething(2)}"/>
</mx:Tile>
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>
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 need to display a horizontal list of images using Flex. I can't use a horizontal TileList because the tiles all end up the size of the first item. Is there a flex control that will allow me to have items with different sizes?
Edit: The list of items would ideally come from a data provider. Unfortunately the control in Chetan Sastry's answer only supports data providers if the items have a fixed width.
Here's a code segment where I do what I think you're describing. The images are various sizes, but this displays them in a squared-up grid. The trick (at least for my requirements) is to set the height and minWidth for the container that goes into each cell.
<mx:TileList id="imgTiles" width="100%" height="100%"
paddingTop="2" paddingBottom="2" paddingLeft="2" paddingRight="2"
itemClick="eTilesClick(event)">
<mx:itemRenderer>
<mx:Component>
<mx:VBox horizontalAlign="center"
height="250" minWidth="150"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
borderColor="#D2D2D2" borderThickness="1"
borderStyle="solid">
<mx:Label text="{data.imageCaption}" height="15" fontSize="10" fontWeight="bold"/>
<mx:Image source="{data.thumbnailUrl}" width="100%"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
How about an HBox with a Repeater for your images?