5 Replies Latest reply on May 25, 2006 11:38 AM by ur_dtrain

    State transition errors

    ur_dtrain Level 1
      Here's the error:

      ReferenceError: Error #1069: Property left not found on mx.containers.Canvas and there is no default value.
      at mx.states::SetProperty/apply()[C:\dev\beta3\sdk\frameworks\mx\states\SetProperty.as:179]
      at mx.core::UIComponent/mx.core:UIComponent::applyState()[C:\dev\beta3\sdk\frameworks\mx\cor e\UIComponent.as:6432]
      at mx.core::UIComponent/mx.core:UIComponent::commitCurrentState()[C:\dev\beta3\sdk\framework s\mx\core\UIComponent.as:6272]
      at mx.core::UIComponent/setCurrentState()[C:\dev\beta3\sdk\frameworks\mx\core\UIComponent.as :6208]
      at mx.core::UIComponent/set currentState()[C:\dev\beta3\sdk\frameworks\mx\core\UIComponent.as:3854]
      at UIPlay/__cat2_click()[C:\Documents and Settings\drk\My Documents\Flex Builder 2.0\UIPlay\UIPlay.mxml:219]

      Here's the transition:
      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%" backgroundColor="#FFFFFF">
      <mx:states>
      <mx:State name="open1">
      <mx:SetProperty target="{cat1}" name="width" value="390"/>
      <mx:SetProperty target="{cat1}" name="height" value="390"/>
      <mx:SetProperty target="{cat1}" name="left" value="0"/>
      <mx:SetProperty target="{cat1}" name="top" value="0"/>
      </mx:State>
      </mx:states>
      <mx:Canvas id="mystage" width="390" height="390" horizontalCenter="0" resizeEffect="Resize">
      <mx:Canvas id="cat1" left="30" top="30" width="150" height="150" backgroundColor="#999999" click="{currentState='open1';}" useHandCursor="true" buttonMode="true"/>
      </mx:Canvas >
      </mx:Application>

      I was just getting back into using states, something I've avoided since alpha due to bugs. In the full version of this test application, I have sub Canvases that work fine with left/right/top/bottom state changes, but in this case - no luck.

      Edit: It also appears that the transistion effects SetStyleAction and SetPropertyAction also do not apply to these properties.
        • 1. Re: State transition errors
          ExMan
          Hey Darin,
          left, right, top and bottom are styles not properties so you need to use SetStyle inside states instead of SetProperty.

          Thanks
          -Ashish

          • 2. Re: State transition errors
            ur_dtrain Level 1
            Thanks Mark.
            I did recognize that after further testing, but I still could not get the SetStyleAction to function properly in Transitions where I changed these properties.

            Along the same lines, are styles like cornerRadius and drop shadows not available for simple canvases?
            • 3. Re: State transition errors
              ur_dtrain Level 1
              quote:

              eft, right, top and bottom are styles not properties so you need to use SetStyle inside states instead of SetProperty.


              Everywhere I've seen them mentioned in the documentation, they are reffered to (rightly IMNSHO) as properties. The actual coding and usage should reflect this fact. Layout constraints do not say 'style' to me.

              I live in SOHO != I have style
              I live in SOHO = I'm pretending that my address means I have style

              This is probably why neither SetStyleAction nor SetPropertyAction are functional for these 'styles'.
              • 4. State transition errors
                ExMan Level 1
                My name is Ashish not mark ;)

                Canvas does support cornerRadius and drop shadows. To get these styles to work you need to set the borderStyle to solid so it can show rounded border. To show drop shadow, you need to set dropShadowEnabled to true.

                I just checked the documentation and I couldn't find the reference to left, right,.. etc as properties. They are listed as styles.

                Here is the ActionScript reference. You can browse to Canvas look up all these styles.

                http://livedocs.macromedia.com/labs/1/flex20beta3/langref/index.html

                Also, you can go to the live docs and search for any of these styles.

                Flex 2.0 LiveDocs

                There might be some places which has listed them wrong as you have seen. Please let me know the urls so we can fix it.


                Now, the issue with SetStyleAction. I have added the transition to your sample code. When you set left and top styles, move effect will be played and when you are setting width and height properties resize effect would play. Keep in mind, these action effects are just the triggers, you need to use these action effects with other effects to choreograph the transition.

                I have also added cornerRadius and dropShadow styles.


                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" width="800" height="800" backgroundColor="#FFFFFF">
                <mx:states>
                <mx:State name="open1">
                <mx:SetProperty target="{cat1}" name="width" value="390"/>
                <mx:SetProperty target="{cat1}" name="height" value="390"/>
                <mx:SetStyle target="{cat1}" name="left" value="0"/>
                <mx:SetStyle target="{cat1}" name="top" value="0"/>
                </mx:State>
                </mx:states>

                <mx:transitions>
                <mx:Transition>
                <mx:Sequence> <!-- You can also define target on Sequence tag instead of defining on individual effects -->
                <mx:SetStyleAction target="{cat1}"/>
                <mx:Move target="{cat1}"/>
                <mx:SetPropertyAction target="{cat1}"/>
                <mx:Resize target="{cat1}"/>
                </mx:Sequence>
                </mx:Transition>
                </mx:transitions>


                <mx:Canvas id="mystage" width="390" height="390" horizontalCenter="0" resizeEffect="Resize">
                <mx:Canvas id="cat1" left="30" top="30" width="150" height="150" backgroundColor="#999999" click="currentState='open1'" useHandCursor="true" buttonMode="true" cornerRadius="10" borderStyle="solid" dropShadowEnabled="true"/>
                </mx:Canvas >
                </mx:Application>


                Let me know if you have any questions.

                Thanks
                -Ashish

                • 5. Re: State transition errors
                  ur_dtrain Level 1
                  Thanks Ashish!
                  I didn't realize the border had to be enabled to generate the corner radius and drop shadow effects. Using the Index in live docs to look up 'left' - the first entry is for flash.geom.Rectangle:

                  "left — Property in class flash.geom.Rectangle
                  The x coordinate of the top-left corner of the rectangle."

                  Same for right; I guess I just shouldn't be so lazy when reading the docs because two lines down it says it's a style for UIComponent (oops).