How to change view state?

Question

Following is a simplified version of my mxml:

<s:BorderContainer>
 <s:states>
  <s:State name="create"/>
  <s:State name="edit"/>
 </s:states>
 <s:transitions>
  <s:Transition fromState="create" toState="edit">
   <s:Sequence target="{creation}">
    <s:Fade/>
    <s:RemoveAction/>
   </s:Sequence>
  </s:Transition>
 </s:transitions>
 <comp:create includeIn="create"/>
 <comp:edit includeIn="edit"/>
</s:BorderContainer>

Within <comp:create includeIn="create"/> I have a button that once clicked calls: this.parent.currentState='edit'. But for some reason I get the following error: "A term is undefined and has no properties..." which points me to the line this.parent.currentState='edit'. Anyone what's wrong? Thanks.

Answer 1

You can encapsulate this a lot better.

Make sure your component re-dispatches the click event, and you can do this, which is much nicer (and also has the benefit of not tying your create and edit components to your BorderContainer)

something like...

<s:BorderContainer id="contentHolder">
    <s:states>
        <s:State name="create"/>
        <s:State name="edit"/>
    </s:states>
    <s:transitions>
        <s:Transition fromState="create" toState="edit">
            <s:Sequence target="{creation}">
                <s:Fade/>
                <s:RemoveAction/>
            </s:Sequence>
        </s:Transition>
    </s:transitions>

    <comp:create includeIn="create" click="contentHolder.currentstate='edit'"/>
    <comp:edit includeIn="edit" click="contentHolder.currentstate='create'"/>
</s:BorderContainer>