<s:Button id="btn1" label="1" width="18" includeInLayout="true" visible="true" click="onSmallBtnClick();" />
<s:Button id ="btn2" label="2" width="18" includeInLayout="true" visible="true" click="onSmallBtnClick();" />
<s:Button id ="btn3" label="3" width="18" includeInLayout="true" visible="true" click="onSmallBtnClick();" />
<s:Button id="bigButton" label="bigButton" width="72" includeInLayout="false" visible="false" />
private function onSmallBtnClick():void {
hideBtn(btn1);
hideBtn(btn2);
hideBtn(btn3);
showBtn(bigButton);
}
private function showBtn(button:Button):void {
button.visible = true;
button.includeInLayout = true;
}
private function hideBtn(button:Button):void {
button.visible = false;
button.includeInLayout = false;
}
Hi all, in the Flex code above, I have 4 four buttons on my interface. The interface should begin with small buttons 1,2,3 visible and the bigButton invisible. When either of the small buttons are clicked, the bigButton appears in place of the 3 small buttons. The widths of the small buttons are set at 18, while the bigButton width is set at 72.
My question is, shouldn't the width of the bigButton be 54, as 18x3 = 54? Or is there some padding within the buttons that I should know of? In this live docs page, it says..
By default, Flex stretches the Button control width to fit the size of
its label, any icon, plus 6 pixels of padding around the icon. You can
override this default width by explicitly setting the width property
of the Button control to a specific value or to a percentage of its
parent container. If you specify a percentage value, the button
resizes between its minimum and maximum widths as the size of its
parent container changes.
Could this be the problem? Since I have 3 buttons and the padding around the icons take up 6x3 = 18 pixels. The buttons don't seem to have any gap between them. So I am curious to know where does the extra 18 pixels come from.
Thanks.
As soon as I don't see any x or left things set for buttons, I guess you use something like HGroup or any other container with HorizontalLayout.
It has a property named gap, and this property is 6 by default.
But it will not add 18px, it will add 12px...
Try to set minWidth to 0 for all buttons.
Related
<mx:Button id="callButton" x="35" y="6" width="202" height="45" label="Call" alpha="1.0"
borderColor="#FFF600" click="callOneClick(event)"
fillAlphas="[0.94, 1.0, 0.47, 0.47]" fillColors="[#FEDC00, #FEBC00]" fontSize="16"/>
This is the button I'm using in my mxml file. How can I set .png background image to my button and still have button label?
Flex 3 mx buttons allow you to set an image as the background for a button by setting the skin attributes in MXML. You can set different states using the up/over/down values. Your label will appear above the images you set but fillColours and fillAlphas will no longer have any effect.
<mx:Button id="callButton"
label="Call"
overSkin="#Embed(source='../assets/over_skin.png')"
upSkin="#Embed(source='../assets/up_skin.png')"
downSkin="#Embed(source='../assets/down_skin.png')"/>
http://livedocs.adobe.com/flex/3/html/help.html?content=skinning_3.html
You could also assign them using styles in your CSS and setting the styleName property of the button. Your CSS would look like this:
.myButtonStyle {
upSkin: ClassReference("../assets/up_skin.png");
overSkin: ClassReference("../assets/over_skin.png");
downSkin: ClassReference("../assets/down_skin.png");
}
Do you know any collapsible flex container that can handle dynamic content that works when pre-collapsed?
I tried the CollapsiblePanel component by Arc90 for Flex, but it did not work when pre-collapsed.
If I have a VBox inside the panel, and I set the "collapsed" property of the CollapsiblePanel to true, the size of the CollapsiblePanel cannot be restored. It seems like this is what is happening:
The CollapsiblePanel's collapsed property is pre-set to true in the MXML markup.
The VBox auto-adjusts its height to 0 since the CollapsiblePanel is collapsed.
When the CollapsiblePanel's collapsed property changes to false (i.e., it is expanded by the user), the VBox does not expand itself because its parent's content area is 0.
Therefore the CollapsiblePanel remains at the same height because its content's height is 0.
Therefore...
Note: This occurs only when the CollapsiblePanel is pre-collapsed, as seen in the markup below.
I've already tried this (didn't work):
<containers:CollapsiblePanel minimize="pnl_minimize(event)"
restore="pnl_restore(event)" height="100%" width="100%" collapsed="true">
<mx:VBox width="100%" height="100%" verticalGap="0">
<mx:LinkButton id="lnkSales1" label="Sales 1" />
<mx:LinkButton id="lnkSales2" label="Sales 2" />
</mx:VBox>
</containers:CollapsiblePanel>
private function pnl_restore(event:Event):void
{
var objPanel:CollapsiblePanel = event.target as CollapsiblePanel;
var objChildArray:Array = objPanel.getChildren();
for each (var obj:Object in objChildArray)
{
obj.invalidateSize();
}
objPanel.invalidateSize();
}
Is there anyone who has succeeded in doing something like this? What component did you use?
Finally got a solution, though it's a bit of a workaround. I allow all the panels to be loaded and then collapse them programmatically instead of pre-collapsing them in the markup. This way their size is already computed and can be restored without any issues when the user restores them.
Does anyone have a better solution?
i have one value in text box(eg:1200) once i drag the HSlider from left to right text box value to increase 1200+150 for each intrevel.if right to left has to decres 150 as same.
<mx:HSlider id="slider" minimum="0" maximum="10" snapInterval="1" liveDragging="true"/>
<mx:Label text="{1200 + slider.value*150}"/>
you could use binding tag, i read somewhere
do one thing, take one bindable variable
[Bindable]private var counter:int;
and then,
set the snap interval of your slider to 150
when you move your slider, put the slider value in this counter variable, ryt
i mean, on the change property of slider, put value of slider in the bindable counter variable
and then in textinput, <textinput text="{counter}"/>
I need to programmatically add a set of controls with some amount of pixels between them. I can't seem to find how to do this in the Flex docs. How can I do it?
Most Containers have some logic to place the items for you, e.g. vertically or horizontally. I.e. if you want to place them horizontally with 5 pixels of space you would use a HBox (VBox for vertical layout):
<mx:HBox horizontalGap="5">
<Component1/>
<Component2/>
<etc.../>
</mx:HBox>
Or script:
...
var box: HBox = new HBox();
box.horizontalGap = 5;
box.addChild(new Component1());
box.addChild(new Component2());
addChild(box);
But if you want to place them yourself using x,y coordinates (i.e. absolute positioning) you can use Canvas:
<mx:Canvas>
<Component1 x="100" y="100"/>
<Component2 x="100" y="200"/>
<etc.../>
</mx:Canvas>
script version:
var canvas: Canvas = new Canvas();
var component1: Component1 = new Component1();
component1.x = 100;
component1.y = 100;
canvas.addChild(component1);
var component2: Component2 = new Component2();
component2.x = 100;
component2.y = 100;
canvas.addChild(component2);
Inside a container with absolute positioning, e.g. Canvas, you can position elements with x and y (or right, left, top, bottom)
elem.x = 100;
elem.y = 200;
canvas.addChild(elem);
You can also use Spacer to add some space in between components.
<mx:HBox>
<Component1 />
<mx:Spacer width="10" />
<Component2 />
</mx:HBox>
If your window can be re-sized, absolute layout is not recommended - It may be a good idea to use width="100%" and height=100% and then use the minHeight/minWidth/maxWidth etc.
In your case, you could set the minimum width/height of the spacer (between 2 components) so that the page scales proportionately.
I have a HorizontalList control that uses a custom ItemRenderer to represent each item as a toggle-button. The list allows drag and drop, and I used this method to rotate the drop feedback (line) into a vertical position instead of horizontal, but with the buttons mashed together, the drop feedback is pretty subtle. I'd like to space out the buttons somehow, so that the drop feedback is more obvious.
I've looked through the properties and nothing stands out. There are padding and margin properties, but their descriptions say they affect the list control itself, not the items.
Below is the code of my ItemRenderer. I've added padding to it, but that doesn't seem to change anything. If I add padding, that affects the inside of the button, not the space between them, and the button control doesn't have margin properties.
I suppose I could base my ItemRenderer on a canvas in order to get a margin, but then I wouldn't inherit all of the functionality of a button.
<?xml version="1.0" encoding="utf-8"?>
<mx:Button
xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="go();"
toggle="true"
>
<mx:Script>
<![CDATA[
private var _val:int = -1;
private function go():void {
this.label = data.title;
_val = data.index;
}
override protected function clickHandler(event:MouseEvent):void{
//todo: bubble an event that causes all other
//buttons in the list to un-toggle
//now do the default clickHandler
super.clickHandler(event);
}
]]>
</mx:Script>
</mx:Button>
How about writing your item renderer as a container (either Canvas or HBox) and placing the Button element inside?
Make a custom skin for your buttons that includes the spacing you need. You may need to combine it with padding styles to ensure that text or icons don't go outside the skin.
It's a bit on the hacky side, but you can also lie about your columnWidth for the actual HorizontalList object. Set it to something larger than your actual itemRenderer width.