States preloaden

[Thomaz]

Sommige States in mijn app. haperen de eerste keer nogal tijdens een Transition. Sommige objecten blijven zelfs staan en springen te laat naar hun juiste positie.
Daarna werken de Transitions wel heel vloeiend.

Is het daarom mogelijk om ze te "preloaden"?

[TheDutch]

Aan de AddChild tag kan je de attribute "creationPolicy" meegeven net zoals je dit kunt bij Containers :).
Let erop dat ook de "targetFactory" attribute moet worden meegeven om de "creationPolicy" te laten werken.

ps. Ik heb dit niet getest dus ik zou zeggen probeer het en raadpleeg de LiveDocs (http://livedocs.macromedia.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=using_states_079_09.html) waar ik deze info ook vandaan heb. Wanneer ik meer tijd heb zal ik zelf ook even een testje maken.

[Thomaz]

de creationPolicy had ik al gebruikt, maar werkt waarschijnlijk dan niet door het ontbreken van de targetFactory.
Ik heb alleen geen idee wat de targetFactory zou moeten zijn. De help-files geven aan dat dit het item zou moeten zijn die de child toevoegd, maar werken doet het niet erg..
Dit zou ook moeten werken, maar lukt ook niet erg:

<mx:AddChild relativeTo="{mijnPanel}" position="lastChild" creationPolicy="all">
<mx:target>
<formViews:formViews id="mijnForm" formView="catalogusAanvraag" />
</mx:target>
</mx:AddChild>

[TheDutch]

Ik zie net dat de targetFactory alleen nodig is wanneer je het via ActionScript 3 doet. Via MXML is er al een standaard targetFactory :).

Ben nog wat aan het testen...

[TheDutch]

Met creationPolicy op "all" maakt hij zoals het hoort direct de instantie aan waardoor je hem kunt aanspreken zelfs als je die state nog nooit bezocht hebt. Wanneer dit jouw probleem niet oplost dan wil ik je vragen een voorbeeld te maken waarin ik kan zien wat je precies bedoeld. Het is voor mij namelijk nog wat wazig, wellicht is het wat anders :).

[Thomaz]

Het is voor mij ook behoorlijk wazig :S Zojuist heb ik de transition-tijden op 2 sec. gezet om duidelijk te zien wat er gebeurd. Er is steeds 1 button die pas na alle transitions verplaatst. Maar alleen de eerste keer, daarna werkt het vloeiend.
In het kort:

<mx:states>
<mx:State name="detailState">
<mx:SetProperty target="{panel1}" name="width" value="330"/>
<mx:SetProperty target="{panel1}" name="height" value="480"/>
<mx:SetProperty target="{knop}" name="label" value="terug"/>
<mx:SetEventHandler target="{knop}" name="click" handler="contract()"/>
</mx:State>
</mx:states>

<mx:transitions>
<mx:Transition fromState="*" toState="*">
<mx:Sequence targets="{[panel1, knop, ...]}">
<mx:Parallel targets="{[panel1, knop, ...]}">
<mx:Resize duration="500" targets="{[knop, panel1, ...]}"/>
<mx:Move duration="500" targets="{[knop, ...]}"/>
<mx:Fade alphaFrom="0" alphaTo="1" duration="500" targets="{[...]}" filter="add"/>
<mx:Fade alphaFrom="1" alphaTo="0" duration="500" targets="{[...]}" filter="remove"/>
</mx:Parallel>
<mx:RemoveChildAction />
</mx:Sequence>
</mx:Transition>
</mx:transitions>

<mx:Panel x="0" y="0" width="165" height="157" layout="absolute" id="panel1">
<mx:Button id="knop" label="meer" bottom="10" right="10" click="expand()"/>
</mx:Panel>

Misschien komt het omdat de positie van de Button relatief is. Ik zal het ook even proberen met absolute waardes. Maar ik vraag me af of dat wat oplost.

[Thomaz]

Het lijkt er op dat het komt door de relative posities. Daar heeft Flex de eerste keer flink wat moeite mee. Wanneer ik alles absoluut positioneer, is het probleem opgelost.
Dat is jammer, want ik vind relatief erg handig in gebruik...

[TheDutch]

Laat al je targets eens zien waar je nu ... hebt staan :).

[Thomaz]

De xml is flink aangepast, dus hier even het origineel:

<?xml version="1.0" encoding="utf-8"?>
<catalogusAanvraag:CatalogusAanvraag
xmlns:catalogusAanvraag="app.views.catalogus.*"
xmlns:formViews="app.views.forms.*"
xmlns:mx="http://www.adobe.com/2006/mxml">

<catalogusAanvraag:states>
<mx:State name="detailState">
<mx:SetProperty target="{panel1}" name="width" value="330"/>
<mx:SetProperty target="{panel1}" name="height" value="480"/>
<mx:SetProperty target="{knop}" name="label" value="terug"/>
<mx:SetEventHandler target="{knop}" name="click" handler="contract()"/>
<mx:SetProperty target="{title}" name="width"/>
<mx:SetStyle target="{image1}" name="bottom"/>
<mx:AddChild relativeTo="{panel1}" position="lastChild" creationPolicy="all">
<mx:Text id="tekstGroot" text="bla" height="90" styleName="textLarge" top="40" left="100" right="10"/>
</mx:AddChild>
<mx:SetStyle target="{image1}" name="right"/>
<mx:SetProperty target="{title}" name="height" value="30"/>
<mx:AddChild relativeTo="{panel1}" position="lastChild" creationPolicy="all">
<formViews:formViews y="140" horizontalCenter="0" id="form1" formView="catalogusAanvraag" creationPolicy="all" />
</mx:AddChild>
<mx:AddChild relativeTo="{panel1}" position="lastChild" creationPolicy="all">
<mx:Button id="allReleasesButton" label="{allReleasesButtonLabel}" bottom="10" click="{allReleasesButtonAction()}" left="10"/>
</mx:AddChild>
<mx:SetStyle target="{image1}" name="top" value="40"/>
<mx:SetStyle target="{title}" name="right" value="10"/>
</mx:State>
</catalogusAanvraag:states>

<catalogusAanvraag:transitions>
<mx:Transition fromState="*" toState="*">
<mx:Sequence targets="{[panel1, knop, title, image1, tekstGroot, form1, allReleasesButton]}">
<mx:Parallel targets="{[panel1, knop, title, image1, tekstGroot, form1, allReleasesButton]}">
<mx:Resize duration="500" targets="{[knop, panel1, title, image1]}"/>
<mx:Move duration="500" targets="{[knop, title, image1, form1]}"/>
<mx:Fade alphaFrom="0" alphaTo="1" duration="500" targets="{[tekstGroot, form1, allReleasesButton]}" filter="add"/>
<mx:Fade alphaFrom="1" alphaTo="0" duration="500" targets="{[tekstGroot, form1, allReleasesButton]}" filter="remove"/>
</mx:Parallel>
<mx:RemoveChildAction />
</mx:Sequence>
</mx:Transition>
</catalogusAanvraag:transitions>

<mx:Panel x="0" y="0" width="165" height="157" layout="absolute" id="panel1">
<mx:Text text="{promotionName}" styleName="title2" height="60" id="title" top="10" left="10" right="10"/>
<mx:Image includeInLayout="true" source="app/assets/images/catalogus.png" height="90" autoLoad="true" maintainAspectRatio="true" scaleContent="false" bottom="10" id="image1" left="10" width="73"/>
<mx:Button id="knop" label="meer" click="expand()" right="10" bottom="10"/>
</mx:Panel>

</catalogusAanvraag:CatalogusAanvraag>

[TheDutch]

Misschien kan je er nu dan ook precies bijvertellen wat er nu niet goed gaat (aangezien er een boel is veranderd)? :)

[Thomaz]

Zoals ik gezegd, blijft "<mx:Button id="knop"" de eerste keer staan. Maar ik denk dat het komt door de relative positie. Die moet denk ik de eerste keer berekend worden en daarna staat deze in de cache.
Maar misschien is het heel wat anders. Dus als je een idee hebt... :)

[TheDutch]

Ik kan het momenteel moeilijk testen of repliceren. Toch wil ik je vragen dit eens te proberen.

ZOEK:
<mx:Resize duration="500" targets="{[knop, panel1, title, image1]}"/>

VERVANG:
<mx:Resize duration="500" targets="{[panel1, knop, title, image1]}"/>

[Thomaz]

Ah, ik snap waar je heen wilt. Dat is inderdaad eens te proberen. Thnx

[Thomaz]

Helaas, geen verschil.