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;
Related
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!
How do I set the individual button sizes in a Spark ButtonBar? It used to be something like:
<mx:ButtonBar id="myButtonBar" buttonHeight="12" buttonWidth="250" >
I get an error when I try to do the same in Spark:
Cannot resolve attribute 'buttonHeight' for component type spark.components.ButtonBar
I don't want to create a separate skin...just something that will work inline if possible
Just set its layout.
<s:ButtonBar id="myButtonBar">
<s:layout>
<s:HorizontalLayout variableColumnWidth="false" gap="0" columnWidth="250"/>
</s:layout>
</s:ButtonBar>
Many things are just different in Spark :)
I see two different ways to approach this.
Create a custom skin class and set the Button Width that way. You'll have to review the existing ButtonBar Skin to figure out specifics.
Extend the button class to set he new button width and use that class to create new factories for the button related skin parts
You could also roll back to the Flex 3 ButtonBar and use the buttonWidth style. Some things are just easier in Halo.
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.
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 am new to flex, and do not know how to add an image (or other ui component) to canvas, so user can select it (and see that it's selected), also I want to add a possibility for example to click backspace and remove selected image from scene. How to do that?
Maybe you can point me to a doc to read?
I am not sure what you exactly need.
Do you need to add one image to the canvas, or possibly multiple?
And how do you need to lay out these images? Horizontal? Vertical? Tiled?
One way of doing it could be to add a TileList to your canvas, and as dataprovider an ArrayCollection that holds the sources of the images you need.
Create an itemrenderer for the List or TileList and you will be able to display the images.
The images will then be selectable. When you add an eventListener to the keyDown event you can catch the backscpace button being clicked and remove the selected item from the tilelist.
<mx:TileList id="myTileList" dataProvider="{myImages}" itemRenderer="your.domain.MyItemRenderer" keyDown="{keyDownHandler(event)}" />
Adobe LiveDocs and a few of the words I used in this answer might help you further.
Hope this helps.