I have a GridItemRenderer in which I want to place 3 labels so that the first label will be attached to the left and the other two labels will be attached to the right. Furthermore, the last label should be sized between 50-150px (100% if possible) in width and I would like all renderers to look the same.
Another requirement is that the labels will not overlap.
If there is not enough room, the last label should be truncated to fit.
Here is an example of the renderer:
Here is what I have:
<s:HGroup width="100%" height="17" verticalAlign="middle">
<s:Label id="name" showTruncationTip="true" maxDisplayedLines="1" />
<s:Spacer width="100%" />
<s:Label id="id" showTruncationTip="true" maxDisplayedLines="1" />
<s:Label id="comment" width="100%" minWidth="50" maxWidth="150" color="0x000000" showTruncationTip="true" maxDisplayedLines="1" />
</s:HGroup>
The problem is that the comment label resizes based on the name width even if there is enough width, while I want it fixed (so that all of the renderers will look the same).
Is there any way I can limit the comment label with min and max width values while suggesting that it should be as wide as can be?
The sad part of being a flex coder is that I sometimes feel alone in this world. It seems that no-one cares these days about flex ...
Nevertheless, for the sake of stray dogs like me getting in here, I'll continue with the habit of answering my own questions.
It seems that the spacer was the culprit. For some reason, it seems that its width was more important than others.
Anyway, by removing the spacer and assigning a width of 100% to the name label and reducing the comment label to 50% (just so that name will be more prominent), I managed to do what I wanted.
Related
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>
I am a newbie to flex, using flex 4.6 with FB 4.7. I am trying to create a BusyIndicator "in front of" (and in the middle of) a Button. I found some examples on Google on image stacking, but for some reason it does not work with a button/indicator combination and I don't know why... I tried using the depth property, but it has no effect, the button appears above the indicator, i.e assuming the indicator is marked by [x]:
[button]
[x] <== indicator
What I want is that the indicator will be in front of, and in the middle of, the button:
[bu[x]ton]
Here is the layout I am using:
<s:VGroup width="100%" height="100%" verticalAlign="top" horizontalAlign="center">
<s:Button id="mybtn" label="My Inbox" click="onInbox()" depth="1"/>
<s:BusyIndicator id="myBusyIndicator" rotationInterval="50" depth="2" />
</s:VGroup>
Any ideas how to do this?
thanks!
It appears you are misunderstanding what layout groups (VGroup, HGroup, TileGroup) do. They work in 2 dimensions, not three. So by placing two objects in a VGroup, they are stacked vertically along the y-axis, rather than along the z-axis (as you want).
What you want is to just use a simple Group here. Group has no Layout to it (it's the parent for Vgroup, and many other classes for that matter) and so all the positioning is handled by the children, rather than the parent (the Group).
<s:Group>
<s:Button/>
<s:BusyIndicator horizontalCenter="0" verticalCenter="0"/>
</s:Group>
That creates a button at level 0, and then places a BusyIndicator at level 1 (1 > 0), and centers it both horizontally and vertically (horizontalCenter and verticalCenter are in pixels from center to their respective axis)
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 have an AdvancedDataGrid component, which has AdvancedDataGridColumn's that are rendered using MXAdvancedDataGridItemRenderer. When user stretches any columns, I want all rows to adjust it's height. So, I set variableRowHeight to true and wordWrap to true.
The problem is that it doesn't always readjust its height. Stretching a column will cause it to overflows into another row. Now, if i just click on the column separator, it will readjust. So basically, first stretching it and then just clicking on column separator solves the overflow problem.
Anyone encounter this overflow issue before?
Update
Step1 (Initial):
Step2 (After first re-size):
Step3 (After clicking on column separator):
ItemRenderer:
<fx:Component className="nameRenderer">
<s:MXAdvancedDataGridItemRenderer width="100%">
<s:layout>
<s:HorizontalLayout />
</s:layout>
<mx:Image source="application/documentManager/mimeTypeIcons/{data.img}" toolTip="{data.tooltip}"
horizontalCenter="0" verticalCenter="0" />
<mx:Text top="5" left="5" right="5" bottom="5" text="{data.data.name}" toolTip="{data.tooltip}" width="100%" />
</s:MXAdvancedDataGridItemRenderer>
</fx:Component>
in my last project, i did a lot with the adg.
But i never had this issue. Can you give me a Screenshot?
I had some probems with the scrollbars. After installing FlashBuilder Burrito with the hero-SDK, this issue gone away.
They did a few things with adg and the dg is now also available as a spark.
Probably this will solve your issue?
BR
Frank
Here's a problem I keep running into:
I have a lot of situations where I need to display some text with a styled container like so:
<mx:Canvas>
<mx:Text text="{text}" left="5" verticalCenter="0" right="5" />
</mx:Canvas>
As you can see - the text in constrained by the left and right margins of the canvas and I have not specified a height for the text control because I want it to grow vertically when I add text to it. Reason being - if there is one line of text I want it to display in the center of the canvas but if there are two or three lines of text I want the text control to show those two or three lines of text.
What keeps happening however, is that it will only display one line of text - no matter how many times I call invalidateSize() on it or the container. What do I do?
CAVEAT: The canvas height and width is set by the component that instantiates it (this is all wrapped up in a custom component) so I can't explicitly set the width or height of the text control...
NOTE: Ok, maybe it's an easy fix because as I was typing this question I figured it out - but, here's a chance to answer an easy question!?
The Text component needs a width if you want it to automatically wrap for you. If you used a string with newlines in it it will work grow as you expected without a width. For you, use:
Edit: Ok, you want it centered in a canvas of varying size. Then you can:
<mx:HBox
width="500"
paddingLeft="5"
paddingRight="5">
<mx:Spacer width="100%" />
<mx:Text
width="100%"
text="{text}" />
<mx:Spacer width="100%" />
</mx:HBox>
Take a look at the TextArea component.