In my Flex application I have a button with the following declaration placed above a custom data-grid component.
<mx:Button id="resetButton" label="Reset" visible="true" />
The button is now placed just above the grid and I would need to move it a few pixels higher so that there is a little space between them.
I noticed that there is a paddingBottom attribute for the Button component but no marginBottom equivalent.
I could not find any advice on Google. What is the correct way to achieve this?
EDIT:
The bottom property did not have any effect in my case (perhaps due to the layout we used) so I ended up surrounding the Button with a new VBox component like this:
<mx:VBox paddingBottom="5">
<mx:Button id="resetButton" label="Reset" visible="true" />
</mx:VBox>
you can use top, bottom, left, right attribute instead of marginTop, marginBottom, marginLeft, marginRight. The function of top is same as marginTop
<mx:Button id="btnSave"
top="50"
bottom="50"
left="50"
right="50"
click="btnSave_clickHandler(event)"
label="SAVE to File" />
May this will help you.
It sounds like your button and grid are already in a VBox. If that is the case, you can simply add a spacer after the button. It is much more lightweight than surrounding a single button with a VBox.
<mx:Spacer height="5"/>
Related
I'm having a panel which shows an image and control bar with buttons in the form of thumbnail image of right mark. When a user clicks on the thumbnail of right mark I want to stick the thumbnail image of that right mark to the mouse pointer and when he clicks on the image, the thumbnail related image should be paste on the image. Same concept of drag and drop with click event.
Your question is still pretty hard to understand, but I'm fairly certain that what you need is Sprite#startDrag() and Sprite#stopDrag().
Here's a little example setup to get you started:
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:Button label="pick it up" click="myImage.startDrag(true)" />
<s:Image id="myImage" source="#Embed('test.png')" />
<s:Button label="drop it" click="myImage.stopDrag()" />
Note that I set the lockCenter argument to true. This will make the Image stick to the mouse. Otherwise you would start dragging the image from its original location.
Try this:to pick button single click and to drop you have to do double click.
<mx:LinkButton id="myLButton" height="100" width="100" color="red" label="Click"
doubleClickEnabled="true" click="myLButton.startDrag(false)" doubleClick="myLButton.stopDrag()"/>
I'm trying to make a button in Flash Builder 4.5 that is multi-lined (specific line break, both are left justified), with the second line being italicized. I can do this by making a button, and throwing a label on top of it, but it wrecks the button functionality where that label sits.
Is there an easy functionality to do this, or is it starting to step into custom skins? (I've looked at it, but I'm pretty new to FB, and it looks like a steep learning curve)
Yeah, you definitely want skinning. It's fairly easy since it generates all the code for you. You just need to find the label for the button and modify it to your will.
Sorry to say, but this is the only way to do it properly. If what you're trying to do is just hack it together, I don't think you should be touching code...
Minor clarification/addition:
While having multiple lines in the button label is as easy as setting the 'maxDisplayedLines' attribute of the 'labelDisplay' in the skin to anything larger than '1', s:Label does NOT support multiple styles; i.e. you can't have one line regular and the second line italic.
FTQuest
To create a multi-lined Label of a Button:
Skin your Button (Simplest way: Create Skin from the Design view)
In the Skin, scroll to where you see the Label with the id="labelDisplay"
Set a Fixed Width to that Label in the Skin & you're Done!
Once you populate the label property of the Button, it'll auto multi-line for you
There was nothing I've found to do what I wanted to do (I did find Flexlib and canvasButton, but it didn't seem to work for me)
What I ended up doing is making my own "simulated" buttons. A container with 2 lines of labels (one normal, one italic, like I wanted) with another container over it. mouseOver and mouseOut and click were all bound to the top container to make it seem like one large button. (I also used some alpha transparency to simulate highlighting.
For the curious (or other beginners with similar issue) -this is what I've done
<s:BorderContainer id="bottomContainer" x="129" y="99" width="200" height="44" backgroundColor="#EEEEEE"
borderVisible="false" cornerRadius="6">
<s:Label id="encLabel1" x="48" y="8" color="#000000" fontFamily="Arial"
text="Create a new encounter"/>
<s:Label id="encLabel2" x="48" y="24" color="#000000" fontStyle="italic"
text="Single encounter"/>
<s:Image x="10" y="10" source="assets/001_01.png"/>
</s:BorderContainer>
<s:BorderContainer id="coverContainer" x="129" y="99" width="200" height="44" backgroundColor="#000000"
borderVisible="false" cornerRadius="6" alpha=".1" mouseOver="alphaOver(event)" mouseOut="alphaOver(event)" click="trace('working')">
</s:BorderContainer>
I am using the AutoComplete component in my Flex website. Everything is fine, but there is one issue.
If i type something in the text area, and the items that are searched are alot, i want to increase the height of the dropdown box. I am unable to figure that out.
below is the code to my autocomplete
<auto:AutoComplete borderStyle="none" id="txt_global_search"
textAlign="left" prompt="Search Content"
dataProvider="{global_search_list}"
allowEditingNewValues="true" allowMultipleSelection="true" allowNewValues="true"
backspaceAction="remove"
labelField="label"
width="200" height="23" right="400" top="1"
autoSelectEnabled="false"
matchType="anyPart"
keyUp="{event.keyCode == Keyboard.ENTER?openItemWindow():searchChange()}"
dropDownItemRenderer="{new ClassFactory(indexCloud.index_cloud_global_search_item_renderer)}" />
Regards
Zeeshan
Which AutoComplete are you using?
With the Flextras AutoComplete ( http://www.flextras.com/?event=ProductHome&ProductID=10 ); you can extend the height of the drop down box by specifying the rowcount property. The Flex ComboBox works similarly.
It is possible your the component you're using offers similar functionality.
In my Flex3 app I have some floating windows which contain variable amounts of text. The windows are meant to be user-resizable. Currently, while I can resize the windows OK, I can't get the text in a TextArea in the window to re-flow when the window is resized. I've come across blog postings that there's a size bug in TextArea that means that setting the text content does not re-size the TextArea properly, together with suggested workarounds. In my case, the content stays the same but the geometry of the container changes. What seems to be happening is that the TextArea adopts a fixed size when it is first rendered, and no amount of resizing the container changes that. Can anyone suggest a means of creating a fluid text area in Flex?
Ian
By binding the textArea's width to its container's with, you can manage to keep the margins and borders and don't have to deal with percentages.
Also, your textArea will be resized each time its parent changes in size.
i'm thinking of something like this:
<fx:Script>
<![CDATA[
import spark.layouts.supportClasses.LayoutBase;
protected function onButtonClicked(event:MouseEvent):void
{
currentState = (event.target.selected ? 'largeState' : 'smallState');
}
]]>
</fx:Script>
<s:TitleWindow id="window" width="300" height="200">
<s:TextArea width="{window.width - 10}" height="{window.height - 60}"
text="{IMyConsts.LOREMIPSUM}" borderVisible="false" />
<s:ToggleButton id="btnEffect" bottom="5" click="onButtonClicked(event)"
label="{btnEffect.selected ? 'Go smaller' : 'Go larger'}" />
</s:TitleWindow>
<s:states>
<s:State name="smallState" />
<s:State name="largeState" />
</s:states>
<s:transitions>
<s:Transition fromState="smallState" toState="*">
<s:Resize target="{window}" widthTo="400" heightTo="300" />
</s:Transition>
<s:Transition fromState="largeState" toState="*">
<s:Resize target="{window}" widthTo="300" heightTo="250" />
</s:Transition>
</s:transitions>
I found a great example of fluid windows please do visit it. They provide source code also so may be you would get better idea.
http://examples.adobe.com/flex3/devnet/dashboard/main.html
You could try Text Layout Framework from Adobe:
http://labs.adobe.com/technologies/textlayout/
I can take a whack at this... but don't laugh..
I am not sure if you need to use a particular container but in any event, set the width and height to 100% and use Grid > GridRow and GridItem to size and resize Text Control you can specify the width of the table or just use it just like an HTML table in Flex to manipulate the size of controls and containers....
hope that helps...
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.