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}"/>
Related
<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.
in flex my button appears in the line below a formitem. is there any other way of adding in a button so that it will appear on the same level as the rest of the formitem? There does not seem to be a button property on the formitem code. Attached is an example of a formitem and the code for a button underneath. Any suggestions most welcome, thank you.
<ch:FormItem label="Gym Dosier Type:" >
<pss:dossierFinder id="gymOriginFinder" displayLabel="true"
allowMultipleSelection="false"
autoContactServer="true"
initialAccountClass="{AccountClassConstants.gym}"
accountClassEnabled="false"
initialMultigym="{gymInterdossierchinder.model.selectedItem.code}"
initialgymsource="{gymsource.model.selectedItem.internalCode}"/>
<mx:Button id = "addLineButton" icon="{addIcon}" toolTip="Add new gym member" click="{addPack(event)}" enabled="true"/>
</ch:FormItem>
I am not clear if the <ch:FormItem/> is your own separate component or just extends mx:FormItem, but in latter case, uou can set the direction parameter of the FormItem component to horizontal.
I'm not sure if this is possible, is there a way to get the <mx:Form> to set its own height based on the position of an element within it?
For example something like this:
<mx:Form height="{submitBtn.y + submitBtn.height}">
<mx:FormItem>... </mx:FormItem>
<mx:FormItem>... </mx:FormItem>
<mx:FormItem>... </mx:FormItem>
<mx:FormItem>
<s:Button id="submitBtn" label="Submit" />
</mx:FormItem>
</mx:Form>
where the form height is dynamically set based on submitBtn's y position and its height.
I tried using Alert.show to show these values and turned out submitBtn.y = 0 and submitBtn.height = 21. height sounds reasonable, but I know the submitBtn.y can't be 0 since it's below several other
Is it possible to set the form height dynamically?
Yes. Do it in the measure method:
private var n:Number = 0;
override protected function measure() : void {
super.measure();
if (submitBtn) {
var fi:FormItem = FormItem(submitBtn.parent);
n = fi.y + fi.height;
}
}
Then just set the height to n.
Edit: I changed this to specify the containing FormItem, not the button, which is what I tested in my own sample code first. You can either get the button's parent or give that FormItem an ID. But this way does work.
your submitBtn.y will always return 0, since it's the y position inside the mx:FormItem element (like the relative y position)
So as I guess you want to set the y position of a form based of the y position of a button inside the form. why do you want that ?
check out the localToGlobal() method available to all children of DisplayObject. It will convert your x,y coordinates to the global x,y. You should be able to use this in your calculations.
I hope that thread is not closed cause I just have had the same problem like you and found the correct solution, so I will try to explain.
Whenever my application starts it reads a file and parse it, containing some information that will fit some forms, and I create them dynamically without specificating any height or width.
I add them to a viewStack like this:
<mx:ViewStack id="viewStack" resizeToContent="true">
</mx:ViewStack>
that is inside a component to show Information for some items, depending the class of the item one of the form is shown fitting the necessary information in.
As you can notice, the viewstack has inside a property resizeToContent that when I select an item from a datagrid, the viewstack changes the selectedIndex (indicating another form) and automatically changing its size resizing to the new content.
If for some reason you need the height of the form, you can use, instead of measure(), the measuredHeight property.
I will add some of the code used for you to understand:
onCreationComplete(){
...
for each (var form:Form in DataModel.getForms())
{
viewStack.addChild(form);
}
...
}
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.
I'm adding dynamically labels to hbox, and i need to remove all spaces between the text of 2 nearby labels
i did horizontalGap = 0 for Hbox
padding left and right = 0 for labels
anything else i could do ?
or maybe some other component ?
here is the code
<mx:HBox horizontalGap="0">
<mx:Label text="wo" paddingLeft="0" paddingRight="0"/>
<mx:Label text="rd" paddingLeft="0" paddingRight="0"/>
</mx:HBox>
Why not use only one label and "dynamically" change its text property?
If you just don't want to do it like that, try using negative horizontalGap on the HBox until you get the desired effect, or paddingLeft negative on the second label. (horizontalGap would affect the layout of all the labels in the HBox)