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.
Related
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"/>
My first steps with Flex (currently using Flex 3) and I want to define 2 states where in the first I have a list and a panel with some button bellow it. When clicking one of the buttons in that panel, I'm expecting to change the state to the "ListState". How should I define which component bellong to which state in this case?
How can I also animate the transition between them by enlarging the list and "move" the panel down outside the application?
The expected behavior is presented in the following picture:
Thanks in advance
You can achieve This without States. As I have understood your task. I will suggest you to use Canvas with 100% height and width. inside canvas You use List and Panel
List will
<mx:List id="List" height="{cnvas.height-panel.height}" width="100%"/>
panel will <mx:Pannel id="panel" height="300" y="{cnvas.height-panel.height}" width="100%" paddingTop="10">
Now When you click button set slideUP.play() and pannel.height=0.
Addition to this you have to set annimation:
<mx:AnimateProperty id="slideUP" target="{panel}" property="y"
fromValue="{cnvas.height-panel.height}" toValue="{cnvas.height}" duration="400" />
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>
Im creating a person search interface in Adobe Flex / Actionscript where we have an image for each person and a bit of text. Im looking to implement some like this:
HorizontalList Interface
OR
Carousel Interface
Both of these packages are unfortunately only for desktop Flex, I was wondering if anyone knew mobile flex (particularly Blackberry Playbook) alternatives?
Thanks
Phil
If you're using the standard s:List, you can change its layout property to a HorizontalLayout instance.
Basically, something like this:
<s:List>
<s:layout>
<s:HorizontalLayout/>
</s:layout>
</s:List>
Maybe you could use a TileList instead. This is a horizontal list that automatically uses the next row if the page is full. You can fill it with data by using the DataProvider tag.
Here is an example:
<mx:TileList id="tileList" borderStyle="none" paddingBottom="0"
paddingTop="5" paddingLeft="5" paddingRight="5" itemClick="onClickHandler(event)"
dataProvider="{yourArrayList}" itemRenderer="renderer.WidgetRenderer" />
The class widgetrenderer creates my imageButtons (so normal images can be used too). These buttons are made of the data in my arraylist that can be approached by data.(the item in the arraylist his properties) If you need the clicked item you can use the id of your tilelist and choose for selected item.
In this example:
var object:Object = tileList.selectedItem;
I don't know if you understand my explanation, if not feel free to ask.
I hope this could help you.
There is a perfect example of this in tour de flex that uses a custom layout with the postLayoutTransform properties to build the 3d effect.
I don't know how to link to the specific example, but if you go here just click on Other Components -> Layouts -> Carousel
Cheers!
Horizontal List should work fine on mobile!
I have an mxml panel in which I'm using a repeater. The panel can be resized horizontally and I would like for the repeated components to resize together with panel. Here is a simplified example of how things look like:
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" ...>
<!-- scripts and some controls -->
<mx:VBox width="100%">
<core:Repeater width="100%" dataProvider="model">
<ns1:MyItemRenderer width="100%" />
</core:Repeater>
</mx:VBox>
</mx:TitleWindow>
When I resize the component, the width of the repeated items does not change.
There also buttons and event handlers, which add and remove items from the model. When this is done, the repeater updates to display the correct number of items and all the items are resized correctly.
I have not been able to get the items to resize when the root panel is resized. I can see, that the VBOx around the repeater is getting a resize event. However, the repeated items are not getting the event. I tried to dispatch a resize event to the repeated items manually from a resize handler I hooked up to the VBox but that didn't help.
I also tried adding and removing a dummy-item from the ArrayCollection which is the dataProvider (because that triggers a correct resize otherwise as mentioned above) However, doing this in the resize handler of the VBox just leads to the repeater not showing any items at all.
Is there any way to get items in a repeater to resize with their enclosing container?
The ItemRenderer I'm using resizes correctly when used in a mx:List. It is built so it can work both with the data property set by the List container an getRepeaterItem() when used in a Repeater. In this particular case, I cannot use the List as a container because of the way it behaves with regards to controlling its height via the rowCount, height and maxHeight properties which doesn't work out for me in this particular case (I spare you the details).
override updateDisplayList in the titleWindow and when the height or width changes, invalidate the displayList on every item created inside the repeater.
That said, using repeaters are generally considered bad practice because every component inside it is rendered. A list based class--which makes use of renderer recyling is considered to be much more performant.
Based on your code segment, I can't tell whether your code could be re-worked without repeaters, or not.
For the record, I figured out the following "solution":
Use the maxHeight attribute on the box enclosing the repeater, binding it to an expression that derives the correct value from the other components... I still need to hardcode any space I want to reserve for components that come after the box containing the repeater if I don't want to have them pushed out of the enclosing panel but it is good enough for now.
essentially:
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" ...>
<!-- scripts and some controls -->
<mx:VBox id="outerBox" height="100%">
<mx:VBox id="innerBox" width="100%"
maxHeight="{outerBox.height - innerBox.y - 40}">
<!-- reserve 40 px for the button -->
<core:Repeater width="100%" dataProvider="model">
<ns1:MyItemRenderer width="100%" />
</core:Repeater>
</mx:VBox>
<mx:Button label="Stay Visible"/>
</mx:VBox>
</mx:TitleWindow>