First off here is the portion of .mxml that I am working with.
<s:Scroller id="scroller">
<s:VGroup id="vGrp" >
<mx:Form id="form"/>
</s:VGroup>
</s:Scroller>
I need the form to auto scroll based on the focused FormItem child that has focus. I have looked at this and tried this method. The issue that I am having is that my form is dynamically populated with FormItems. The example that I liked looks to only take into account that focusing will only happen to children of the VGroup. For me this is not the case and implementing the functions laid out in the linked website did not work for me (even after I did try to modify it to my particular case I was unable to get the scrolling to work properly). Any help would be much appreciated.
Related
I am using mx:Tree (in Flex 4), and assigned a customised MXTreeItemRenderer for every items. As the TreeItemRenderer contains a list with tileLayout, which means the height of every row is variable. So I have to set the tree's "variableRowHeight to true. When I was testing the tree, everything went well. But when I was using the vertical scroller, I met some problems:
The scroll bar did not move to the position I want. When I was scrolling the content, the scroll bar sometimes scrolled to a unwanted position (e.g. the head of the tree). When there are more rows, the problem is more obvious.
When I was scrolling the tree, the images were flicking all the time. That means, the images are reloading I guess. any help?
Is there anyone who can help me solve the problems? many thx :)
One way that I found helpful was to just wrap the tree in a canvas. I was having the same problem with the tree's scrolling because it would do all sorts of funky things, but when you allow the canvas to handle the scrolling instead of the tree everything works out. I chose this over replacing it with the spark tree just because it was a nice quick fix.
<mx:Canvas height="100%" width="100%" verticalScrollPolicy="on">
<mx:Tree width="100%" height="100%"
click="click_handler(event);"
verticalScrollPolicy="off"
itemRenderer="com.fti.view.itemRenderers.defaultRenderer"
itemClose="{treeSample.height = treeSample.measureHeightOfItems();}"
itemOpen="{treeSample.height = treeSample.measureHeightOfItems();}"
id="treeSample"
variableRowHeight="true"/>
</mx:Canvas>
Be sure and include those itemClose and itemOpen properties so the canvas is able to accurately set the height and scroll properly. One warning is that if you're working with larger trees, this can be a bit heavy and impact performance.
use SparkTree
http://kachurovskiy.com/2010/spark-tree/
there is too much bugs with the current tree.
( whating for Flex 5 to clean out thoose things finally ) :)
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>
I have a TabNavigator that has a handful of children. The flow of the application allows the possibility of a user leaving the screen with this TabNavigator, then returning. When this happens, a method called on show of the parent canvas sets selectedChild to the first tab. When actually tested, the TabNavigator returns showing the text on the first tab, but the tab that is highlighted is whatever tab the user was on just before leaving.
Here is some pseudo-code that looks something like what I have:
<mx:Canvas show="init()">
<mx:Script>
<![CDATA[
private function init():void {
menutabs.selectedChild = tab1;
}
]]>
</mx:Script>
<mx:TabNavigator id="menutabs">
<mx:VBox id="tab1" label="Tab 1"><mx:Label text="First Tab Text" /></mx:VBox>
<mx:VBox id="tab2" label="Tab 2"><mx:Label text="Second Tab Text" /></mx:VBox>
<mx:VBox id="tab3" label="Tab 3"><mx:Label text="Third Tab Text" /></mx:VBox>
</mx:TabNavigator>
</mx:Canvas>
So what I am experiencing, for example, is going to another canvas with the application, having been on Tab 2, then returning to this canvas to see the text "First Tab Text" but the highlighted tab along the top is "Tab 2." I have tried handfuls of variations within the init() method of invalidateDisplayList, validateNow, and so on, with no change in the outcome.
Any ideas welcome.
This is the same issue seen in this question
I have also been suffering from the same problem and it appears to be a bug in the Flex framework's TabNavigator control. I have yet to find the solution though.
I have managed to find a temporary workaround:
TabNavigator's parent, referred to as The Parent, should dispatch an additional hide event on the TabNavigator when The Parent's visibility is set to false and dispatches the hide event on The Parent. This will trigger the redrawing of the control which eliminates overlapping content areas.
The Parent should reset TabNavigator selectedIndex to 0 in the hide handler for The Parent.
If you are having issues with TabNavigator tab styling when visibility changes, you can use
tabNavigator.notifyStyleChangeInChildren('tabStyleName',false) in the show handler for the tabNavigator to redraw the tab styles correctly.
I hope these are sufficient to cover your cases.
Did you observe that 'selectedChild' is an actual property of ViewStack, and not TabNavigator?
Since TabNavigator can be considered as ViewStack + TabBar, setting selectedChild has no effect on TabBar.
I suggest to use 'selectedIndex' than to set selectedChild. You can obtain the selectedIndex from the Container itself, using getChildIndex()
I left out a bit of information. My init() method does more than just selectedChild, and I think this other stuff, that didn't necessarily need to run every time, was what was screwing up the re-drawing of the tabs. So I created a new goHomeTab() method to call on show, and call my init() method only on initialize. All seems to be fine now. Thanks.
I have having a problem in my flex/air application, in which when the left mouse button is clicked on a TextInput the focus is stolen by the parent.
So in more detail I have an hierarchy as follows...
accordion
->panel(Custom)
->TextInput
->TextInput
So some really annoying reason when I click on the TextInput's the focus goes to the accordion.
But when i add the same Custom Panel to a Canvas the TextInput works as per normal.
I don't understand why this would be happening?
Does your parent panel have a click effect that shifts focus? This could cause the issue because of event bubbling.
Edit: Could it be an issue with your custom panel? try taking the input text boxes out of the custom panel, putting them in a regular panel, and then putting that into the accordian...you probably won't have the issue still.
Can't reproduce the problem with this tiny example - it works correctly.
<mx:Accordion>
<mx:Panel label="Test">
<mx:TextInput />
<mx:TextInput />
</mx:Panel>
</mx:Accordion>
So, my suggestions would be:
try removing any custom code you have in the accordion (event handler, etc)
try using simple container instead of your custom and see if it still happens. If it doesn't then the problem is in your custom container.