How could I add separating line around HBox children component?
Like if I choose borderstyle as solid for the hbox, the problem is the line between the children component, like text components, who could I show it in efficient way, not just adding HBox to each element.
A HBox is just a box with a horizontal layout of children - it doesn't actually have vertical lines running between those children, so you're not going to be able to use borders or anything on the HBox.
Your best bet is probably adding VRule components in between each child component, something like:
<mx:HBox width="100%" borderColor="#000000" borderStyle="solid">
<mx:Image />
<mx:VRule height="100%" strokeColor="#000000" strokeWidth="1"/>
<mx:Image />
<mx:VRule height="100%" strokeColor="#000000" strokeWidth="1"/>
<mx:Image />
</mx:HBox>
You can adjust the VRule and HBox border styles to be consistent however you like. The only other options I can think of are to put borders around each child component with no border on the HBox (may need child padding depending on your components), embed all your components in Box components within the HBox like you suggest, or doing something completely crazy like using a HorizontalList and embedding your components in a custom item renderer that is a consistent size with a border.
Personally I'd just use VRule separators and move on. I'd rather double up on children than have all my components of interest one family level deeper in the HBox. If you need to generate your HBox children from a variable array or suchlike, then you may want to put each one in a Box and use a Repeater or something. Some more detail would help for more specific answers.
Related
I have a buttonbar which has both buttons with only small icons and buttons with short text labels. Problem is that each button gets huge padding while I want to set width of the button relative to its contents. Below is illustration of my problem:
Current one http://i.imgur.com/I8goS.png
With buttonWidth=32 http://i.imgur.com/s0fD5.png
I can set buttonWidth to 32 for my buttonbar which works fine for my icons, but not for text. Is there way to remove that huge padding of the buttons?
If I understand what you are after there, you can use a layout inside the buttonbar tag something like this:
<s:layout>
<s:HorizontalLayout variableColumnWidth="true" gap="0"/>
</s:layout>
I am in need of a strange solution. I have one requirement in which I am displaying two components in a VBox. But on click of the main container I need to maximize that and need to display the components in horizontal. I was just wondering whether I can change the VBox to HBox and viceversa dynamically using actionscript or some other way.
Thanks in Advance,
Cheers, PK
Use a mx:Box and set the direction property dynamically.
MXML:
<mx:Box id="box" direction="vertical"/>
AS3:
box.direction = BoxDirection.HORIZONTAL;
I'm using a custom itemrenderer to display a list of photos and need to know how to control the width. At the moment it does this:
(source: tdwright.co.uk)
Which, as I'm sure you'll agree, is eye-bleedingly ugly.
The list is created like this:
<mx:Panel width="100%" height="100%" layout="absolute" title="Photos">
<mx:List x="0" y="0" width="100%" height="100%" id="photoList" dataProvider="{photos}" itemRenderer="thumbnails" rowHeight="100"/>
</mx:Panel>
And the itemrenderer component looks like this:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Image source="{data.src}" id="image" scaleContent="true" toolTip="{data.caption}" height="100%" horizontalAlign="center"/>
</mx:VBox>
I've tried placing width="100%" in a whole bunch of places, but without success. If anyone knows how I can control this I'd be very grateful.
If you set these properties inside the itemrenderer verticalScrollPolicy="off" horizontalScrollPolicy="off" the bars are disappeared
I don't know why they choose for the terrible "off" instead of False
A couple of observations here, based on a miasma of similar painful experiences. (Caveat: I have not built a test app to confirm everything here for this specific case)
Assuming that what you want is for the list to size its width based on the size of the itemRenderer elements it contains, those itemRenderer elements need to provide width information. Using a VBox in this fashion with scroll bars permitted means the VBox will attempt to "arbitrate" between the size of the content (Image) and the size of the parent. So yes, first thing to do is turn off the scrollbars on the VBox, assuming you can't just get rid of the VBox altogether. (I'm guessing you want the VBox so that you can put a title or something under the image as a next step)
The List as you have it specified is sized to 100% of its parent, the Panel, which is itself sized to 100% of its parent. Rather than size these elements "top down", consider letting their width be unspecified so that Flex will compute their required width bottom-up. Use maxWidth on the List or the Panel constrain their size if you need to for laying them out relative to their peers.
Another important thing to know about is the "minHeight=0" trick. Turns out, the sizing algorithm used by Flex behaves quite differently when minHeight or minWidth is set to something other than the default NaN. Setting it to 0 is extremely useful in many of these cases. Try minWidth=0 on the VBox and/or the List.
In addition to turning off the scrolling policy, set left and right to 0. That should anchor the width to the width of the parent.
I have a DataGrid with an drop-in Button itemRenderer:
<mx:DataGridColumn headerText="" width="135"
itemRenderer="ActionButtonItemRenderer" />
However, the button extends all the way both the right and left edge of the DataGridColumn. I've tried messing with the width properties and paddingLeft and paddingRight styles of both the DataGridColumn and the itemRenderer, but nothing seems to work.
NOTE: I do not want to use a Container or UIComponent with the Button as a child as the itemRenderer - too much code.
Is there a simple way to add left and right padding?
The button should only be as wide as you specified when you created it as a component, unless you created the component with 100% as the width. So, try a different percent width, a fixed pixel value, or (as you said you don't want to do) using a canvas based item renderer component with a button positioned inside of it.
Well, I don't know about 'simple'... but it doesn't require a new class.
public var itemRenderer:ClassFactory ;
[...]
itemRenderer = new ClassFactory(ActionButtonItemRenderer);
itemRenderer.properties = "{width:135}";
[...]
I see that Flex3 has a class called ApplicationControlBar dedicated to "holding components that provide global navigation and application commands." (quoted from the langref). The question is: is there an advantage of using this class instead of just adding a plain HBox with a greyish background, or is it just a matter of taste?
In my current code, I use the following box:
<mx:HBox verticalAlign="middle" horizontalGap="5" backgroundColor="0xCCCCCC"
width="100%" paddingTop="5" paddingRight="5" paddingBottom="5"
paddingLeft="5">
Granted, this requires explicitly specifying a few attributes, but other than that?
ApplicationControlBar is essentially an HBox with both scroll policies set to false and a transparent background. The only other feature it offers is the ability to be docked. From the Livedocs:
Docked mode: The bar is always at the top of the application's drawing area and becomes part of the application chrome. Any application-level scroll bars don't apply to the component, so that it always remains at the top of the visible area, and the bar expands to fill the width of the application. To create a docked bar, set the value of the dock property to true.
If you look at the source for ApplicationControlBar and Application.dockControlBar you'll see that when docked=true the bar is added to rawChildren instead of children which is what allows it to "ignore" scollbars and such.
In addition to the previous answer I can add, that it's possible to set the gradient background to the ApplicationControlBar, which is not allowed to the HBox, if you're not using the special border type, of course :)
But even with HBox you can still draw your own gradient background without setting the border style.