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" />
Related
I am a newbie to flex, using flex 4.6 with FB 4.7. I am trying to create a BusyIndicator "in front of" (and in the middle of) a Button. I found some examples on Google on image stacking, but for some reason it does not work with a button/indicator combination and I don't know why... I tried using the depth property, but it has no effect, the button appears above the indicator, i.e assuming the indicator is marked by [x]:
[button]
[x] <== indicator
What I want is that the indicator will be in front of, and in the middle of, the button:
[bu[x]ton]
Here is the layout I am using:
<s:VGroup width="100%" height="100%" verticalAlign="top" horizontalAlign="center">
<s:Button id="mybtn" label="My Inbox" click="onInbox()" depth="1"/>
<s:BusyIndicator id="myBusyIndicator" rotationInterval="50" depth="2" />
</s:VGroup>
Any ideas how to do this?
thanks!
It appears you are misunderstanding what layout groups (VGroup, HGroup, TileGroup) do. They work in 2 dimensions, not three. So by placing two objects in a VGroup, they are stacked vertically along the y-axis, rather than along the z-axis (as you want).
What you want is to just use a simple Group here. Group has no Layout to it (it's the parent for Vgroup, and many other classes for that matter) and so all the positioning is handled by the children, rather than the parent (the Group).
<s:Group>
<s:Button/>
<s:BusyIndicator horizontalCenter="0" verticalCenter="0"/>
</s:Group>
That creates a button at level 0, and then places a BusyIndicator at level 1 (1 > 0), and centers it both horizontally and vertically (horizontalCenter and verticalCenter are in pixels from center to their respective axis)
This example shows how you can have Images in your spark TextArea and set their float and paddingLeft/paddingRight properties:
<s:RichEditableText id="myRET1" width="300">
<s:textFlow>
<s:TextFlow columnWidth="290">
<s:p id="p1">Images in a flow are a good thing. For example, here is a float.
<s:img id="image1" float="none" source="#Embed(source='../assets/bulldog.jpg')" paddingRight="10" paddingTop="10" paddingBottom="10" paddingLeft="10">
</s:img>
Don't you agree? It should show on the left. If it doesn't show up on the left, then it is a bug. You can submit bugs at http://bugs.adobe.com/jira/. You can set how the float is positioned within
the paragraph by using the ComboBox below. You can select left, right, start, end, or none. This example does not use the clearFloats property. That is in a different example.</s:p>
</s:TextFlow>
</s:textFlow>
</s:RichEditableText>
Is it possible to specify the image's float/padding via Flex's CSS?
yes it's possible to specify the image via css :
1)create a skin contains this image and those properties(padding)
2)create file css contains name space of component and call class reference (the class passed as parameter skins)
3)define in file mxml the style name equal the name space specified in steps 1
Newbie here,
I have a skinned button at x=47 y=126 which is later "covered" by a .png that loads dynamically. Once the .png loads, the button disappears. How can I tell Flash Builder 4 to place the .png behind the button so that it is always clickable. FYI: if I move the button away from the graphic, it works just fine, but, for design purposes, I really would like it to stay where it is.
Thanks,
Jason M.
You could also try giving the button a depth value of 1 or higher.
"Spark containers order their items based on their depth property, with the lowest depth in the back, and the higher in the front.Items with the same depth value appear in the order they are added to the container."
<s:Button x="47" y="126" depth="1" skin="customSkin"/>
Conversely you could add a smaller depth to the .png, or if you are drawing them in the same container change the order they are in there. (From the quote above on depth)
If you need to have an image as a background for your button you should place it behind button the following way:
<s:Group>
<s:BitmapImage />
<s:Button />
</s:Group>
I suppose your case is the following:
<s:Group>
<s:Button />
<s:BitmapImage />
</s:Group>
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>