I have a problem when creating a ViewStack, with a repeater along with other components (i.e. vBox) inside the ViewStack. The repeaters get placed at the bottom of the view. Despite the repeater is listed before other components, it is placed at the bottom.
Is there a workaround where I can get the repeater drawn before the other components?
I googled this and someone else asked the same question on another site, but no one answered. I am pasting sample code from their post. The repeater is drawn last.
Thanks
Here is an example:
<mx:ViewStack id="viewStack" width="100%" height="100%" backgroundColor="#FFFFFF"
backgroundAlpha="1" paddingLeft="5" paddingRight="5" paddingBottom="5">
<mx:Repeater id="editorsRP" dataProvider="{dynamicFields}"
repeatEnd="organizeViewStack();" width="100%" height="100%">
<editor:DynamicFieldEditor label="{FieldGroup(editorsRP.currentItem).name}"
width="100%" height="100%" fields="{FieldGroup(editorsRP.currentItem).fields}" dataProvider="{details}" />
</mx:Repeater>
<editor:NotesEditor id="notesEditor" width="100%" height="100%" label="Notes"
enabled="false" notesProvider="{attachment}" />
</mx:ViewStack>
I believe the problem is when the dataProvider is having it value set / changed.
This isn't shown in the code above, so it's hard to know. However, whenever the value of this is changed, the existing children created by the repeater will be removed from the parent, and new ones will be added.
If the ViewStack's children have already been created, then the children from the repeater will be placed after the existing children.
For example:
<mx:TabNavigator width="500">
<mx:VBox label="Static 1" />
<mx:Repeater dataProvider="{['a','b','c']}">
<mx:VBox label="From repeater" />
</mx:Repeater>
<mx:VBox label="Static 2" />
</mx:TabNavigator>
In this instance, the dataProvider is set during the initialization of the repeater, so the tabs appear in order:
¦ Static 1 ¦ From Repeater ¦ From Repeater ¦ From Repeater ¦ Static 2 ¦
However, if the value of the dataProvider changes (or the dataProvider dispatches a CollectionChangeEvent), then the 3 repeater children would be removed, and new children added. This would leave the tab order:
¦ Static 1 ¦ Static 2 | From Repeater ¦ From Repeater ¦ From Repeater ¦
I notice you've wired an organizeViewStack method to the repeatEnd event handler - although the code for the method isn't shown.
This looks like the best way of managing this - reshuffling the order of the children once they've been set.
I'm guessing a bit, but
All of a ViewStack's children must be a container. The Repeater is not a container. So, it's placement as a ViewStack children is irrelevant, because for all intents and purposes it is ignored.
However, when the repeater executes it creates a bunch of containers and adds them to the parent (AKA ViewStack); thus giving them a different Z-order than what you might expect from the code.
Are you trying to create many different children of the ViewStack? Or are you expecting the "DynamicFieldEditors" to be stacked somehow?
Related
I want to set value of a progress bar in an accordian but I am encountering 'setProgress is not a function' error. Any idea what's wrong with following code.
Observation:
If I move the progress bar out of the Accordian then the error goes away and the progress bar appears fine.
I want to set the progress bar eventually to {repMonitor.currentItem.threatLevel} but for now I am just testing with hypothetical threat value i.e 60
<mx:Accordion id="monAccordian" includeIn="Monitoring" x="10" y="10" width="554" height="242" change="monAccordianChange()" >
<mx:Repeater id="repMonitor" dataProvider="{monitoringArray}">
<mx:Canvas width="100%" height="100%" label="{repMonitor.currentItem.firstName+' '+ repMonitor.currentItem.lastName}" >
<mx:Image x="10" y="10" source="{repMonitor.currentItem.imageName}" width="175" height="118"/>
<s:Label x="200" y="14" text="Threat Level:"/>
<mx:ProgressBar x="200" y="30" mode="manual" label="" id="bar" width="200" creationComplete="bar.setProgress(60,100);" />
</mx:Canvas>
</mx:Repeater>
</mx:Accordion>
This stems from the fact that your ProgressBar is in a repeater. You cannot reference the repeated items by id because you would have a variable number of ProgressBars with id "bar".
There are also special considerations when using event listeners inside of Repeater objects:
Event handlers in Repeater components
When a Repeater component is busy
repeating, each repeated object that
it creates can bind at that moment to
the Repeater component's currentItem
property, which is changing as the
Repeater component repeats. You cannot
give each instance its own event
handler by writing something like
click="doSomething({r.currentItem})"
because binding expressions are not
allowed in event handlers, and all
instances of the repeated component
must share the same event handler.
Repeated components and repeated
Repeater components have a
getRepeaterItem() method that returns
the item in the dataProvider property
that was used to produce the object.
When the Repeater component finishes
repeating, you can use the
getRepeaterItem() method to determine
what the event handler should do based
on the currentItem property. To do so,
you pass the
event.currentTarget.getRepeaterItem()
method to the event handler. The
getRepeaterItem() method takes an
optional index that specifies which
Repeater components you want when
nested Repeater components are
present; the 0 index is the outermost
Repeater component. If you do not
specify the index argument, the
innermost Repeater component is
implied.
You can read more about this in the Repeater docs.
I'm binding an array of items to a data grid using ItemRenderer. I use the data variable to control the bindable data. I also have someComponentVariable that need be inserted into every row but its declared at the component scope, so the data grid doesn't seem to reconize it (compile error).
How can I use this variable (someComponentVariable) inside the ItemRenderer?
Code Example
<mx:DataGrid id="userBonusesGrid" width="100" height="248" showHeaders="false" wordWrap="true">
<mx:columns>
<mx:DataGridColumn headerText="" width="36">
<mx:itemRenderer>
<mx:Component>
<mx:VBox verticalAlign="middle" horizontalAlign="center">
<ns1:SidePanelBonus
bonusName="{data.name}" description="{data.description}"
arrow="{someComponentVariable}">
</ns1:SidePanelBonus>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
If someComponentVariable is a public property of the class enclosing DataGrid, you can use outerDocument to access it from a component.
<ns1:SidePanelBonus bonusName="{data.name}" description="{data.description}"
arrow="{outerDocument.someComponentVariable}">
</ns1:SidePanelBonus>
See the "using the Component tag" section in Creating inline item renderers and editors for more info about outerDocument
No you can not use it at all. Each itemRenderer in data grid can only access the item for which the renderer was created. And this is done purposely because itemRendrers change dynamically, they are not bound for data forever, when you scroll, the items get scrolled not the renderers, they remain in same position or they might change, but corresponding item renderer's data always changes when you scroll. They dont share one to one relationship.
The only solution is to pass the data in the item in the form of some parent child relationship.
I'm writing an Adobe AIR application using a ViewStack for the different application states. Is there a way to make sure that each view component is created/destroyed each time it is shown/hidden?
For instance, if I have a TextInput in a view, I want it to reset to its initial state each time I change to that view, rather than having previously entered text. Or, if I have a Timer, I want it to be destroyed when I leave the view so that it doesn't keep running when I'm in an unrelated part of the application. I know that I can manually initialize/destroy everything on the show() and hide() events, but is there an easier way?
AFAIK there is no built-in way to do this, so you'll have to do it manually by handling the show and hide events as you mention.
ViewStack does however have two methods "saveState" and "loadState" which could perhaps help you out with this. The history manager uses these methods to enable back/forward navigation. The docs don't seem to have any examples though.
ViewStacks can be the work of the devil when it comes to creation/deletion policies and managing state. We had all sorts of problems when we developed fiat ecoDrive and by about 3/4 of the way though we we're all very anti ViewStacks for the management of view state within our application.
However... a good bet would be to first set the creationPolicy to ContainerCreationPolicy.NONE. That way it's in your control as to when to create any of the panels in your ViewStack. Then i would think you would need to have some sort of logic so that as the ViewStack changes a panel it deletes or resets the one you were on.
Another viable alternative would be to use view states instead. Have a base state which acts as the main container and then a simple state for each of your sections. That way when you switch to a new state, the old state gets removed in reverse order to the way it was created. You do have to be disciplined with states though as they can end up getting really complex and messy when they start becoming nested. If you keep it simple it may work as you require.
In MXML 2009, you can use itemDestructionPolicy="auto" to destroy a component after use it. If you use this property in the first view component with two states (init, logged), you can destroy and reinitialize all child view components. Example :
<s:states>
<s:State name="init" />
<s:State name="logged" />
</s:states>
<s:SkinnableContainer id="skincon" width="100%" height="100%" backgroundAlpha="0"
backgroundColor="#FFFFFF">
<s:VGroup id="MainContainer" width="100%" height="100%" paddingTop="0"
paddingLeft="20" paddingRight="20" gap="0">
<views:_HeaderView id="header" />
<mx:ViewStack id="viewStack" width="100%" height="100%">
<s:NavigatorContent includeIn="init" itemDestructionPolicy="auto">
<s:layout>
<s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
</s:layout>
<views:LoginView title="Login" id="loginView" />
</s:NavigatorContent>
<s:NavigatorContent includeIn="logged" itemDestructionPolicy="auto">
<s:layout>
<s:VerticalLayout horizontalAlign="center" verticalAlign="top" />
</s:layout>
<views:_CentralView id="userView" />
</s:NavigatorContent>
</mx:ViewStack>
<views:_FooterView id="footer" />
</s:VGroup>
</s:SkinnableContainer>
Both answers are correct -- there doesn't seem to be any built-in way to do it. I solved the problem by creating a "wrapper" component for my view component. It creates a new view component each time the view is shown. This isn't ideal, but fits my requirements nicely, and required few changes to my application structure.
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" show="init()" hide="cleanup()">
<mx:Script>
<![CDATA[
private var myComponent:MyComponent;
private function init():void
{
myComponent = new MyComponent();
componentContainer.addChild(myComponent);
}
private function cleanup():void
{
componentContainer.removeAllChildren();
}
]]>
</mx:Script>
<mx:Canvas width="100%" height="100%" id="componentContainer" />
</mx:Canvas>
Build your "views" as separate Modules, and then use the ViewStack to switch between them. You could then write a function to destroy the unused module(s) (check each module against the selectedChild property) when the ViewStack's "change" event is fired.
2¢
I am using different states for my different views. On each state change i add and remove components.
This causes the add and remove events of UIComponent fire which allows me to initialize and cleanup my components each time they are added.
This is the idea...
<mx:states>
<mx:State name="state1">
<mx:AddChild>
<mx:SomeUIComponent id="myComp" add="myComp.initialize()" remove="myComp.cleanup()"/>
</mx:AddChild>
</mx:State>
</mx:states>
I am having a issue with databinding child repeaters inside an accordion control, hopefully you can help...
I have an accordion in a ViewStack (of which,that ViewStack is also in another top-level ViewStack). I have a repeater in each child of the accordion control. The component looks like such:
<mx:Box
xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init()"
>
<mx:ViewStack>
...
<mx:Accordion creationComplete="accordianInit()">
<mx:Box label="Groups" width="100%">
<mx:Repeater id="rpGroups" width="100%">
<mx:CheckBox id="chkGroups"
label="{rpGroups.currentItem.name}" />
</mx:Repeater>
</mx:Box>
<mx:Box label="Contacts">
<mx:Repeater id="rpContacts">
<mx:CheckBox id="chkContacts"
label=quot;{rpContacts.currentItem.full_name}" />
</mx:Repeater>
</mx:Box>
</mx:Accordion>
...
</mx:ViewStack>
<mx:Box>
The problem is that if I bind the 2 repeaters in the init function, then both repeaters don't show any data. If I bind the repeaters in the accordianInit function, then only the first repeater (rpGroups) gets databound...
Where should I be data binding the repeaters so that both repeaters repeat properly?
Hopefully this makes sense, if not I can elaborate more, any help is appreciated.
Bind the dataProvider of the repeater to the source in MXML itself:
<mx:Repeater dataProvider="{the_data}" ... />
The reason you're seeing the behavior you are is because the Accordion (and ViewStack) does not create all of it's children right away. It only creates the child that is visible (so, the first Box, and the first ViewStack child initially).
Because of this behavior, when you try to assign data to the repeaters in the first init() event handler the repeaters have no instantiated container to repeat children into. When you assign data to the repeaters in accordionInit() then only the first Box has been created, which is why only the first repeater works.
If you don't want to bind to the data via the dataProvider attribute of the Repeater tag (as I've shown above), then you can use a change handler on the Accordion to set the repeater data as the user changes panes (because as the user clicks into the panes, they get created by the Flex framework).
All of this comes about from the creationPolicy property: http://livedocs.adobe.com/flex/3/html/layoutperformance_05.html
Our resident Flex expert is out for the day and I thought this would be a good chance to test this site out. I have a dropdown with a dataProvider that is working fine:
<ep:ComboBox id="dead_reason" selectedValue="{_data.dead_reason}"
dataProvider="{_data.staticData.dead_reason}"
labelField="#label" width="300"/>
The ComboBox is custom but I'm not sure if that matters for the question. I need to change the combo box to radios (all in one group) but maintain the dynamic options. In other words, what is the best way to generate dynamic RadioButtons?
Try using an <mx:Repeater> Something like:
<mx:Repeater dataProvider="{_data.staticData.dead_reason}">
<mx:RadioButton groupName="reasons" ...>
</mx:Repeater>
<mx:RadioButtonGroup id="RDO_Group"/>
<mx:Repeater id="myRepeater" dataProvider="{_data.staticData.dead_reason}">
<mx:RadioButton id="rdo" label="{myRepeater.currentItem}" value="{myRepeater.currentItem}" groupName="RDO_Group"/>
</mx:Repeater>
is the best way.