2 Replies Latest reply on Nov 27, 2006 8:34 AM by TomBaggett

    How do I make this custom Style property work correctly?

    TomBaggett
      I'm trying to create a CSS style property that expects an mx:Effect object to be used in a custom AS class. I want to detect changes being made to the style property and assign the specified effect to an effect trigger belonging to a child of my custom component.

      Unfortunately, the specified mx:Effect object seems to be interpreted as a string instead of an mx:Effect object. Can anyone tell me what I need to correct for this to work as expected?

      You can see the compiled example here and review the source code below. It fails due to a "TypeError: Error #1034: Type Coercion failed: cannot convert "myTestEffect" to mx.effects.Effect.Style" in the custom components styleChanged function at the bottom of this post.

      EffectTest.mxml:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application
      xmlns:mx=" http://www.adobe.com/2006/mxml"
      xmlns:myComps="myComponents.*"
      layout="absolute"
      viewSourceURL="srcview/index.html"
      >

      <mx:Fade id="myTestEffect" alphaFrom="0.0" alphaTo="1.0" duration="1000"/>

      <mx:Style>
      MyCustomPanel {
      testEffect: myTestEffect;
      }
      </mx:Style>

      <myComps:MyCustomPanel/>

      </mx:Application>

      myComponents/MyCustomPanel.as:

      package myComponents
      {
      import mx.containers.Panel;
      import mx.effects.Effect;
      import mx.controls.Alert;

      [Style(name="testEffect", type="mx.effects.Effect", inherit="no")]

      public class MyCustomPanel extends Panel
      {
      public function MyCustomPanel()
      {
      super();
      }

      override public function styleChanged(styleProp:String):void
      {
      var allStyles:Boolean = !styleProp || styleProp == "styleName";

      super.styleChanged(styleProp);

      if (allStyles || styleProp == "testEffect")
      {
      var theTestEffect:Effect = getStyle("testEffect");
      if (theTestEffect)
      Alert.show("Effect assignment successful");
      }
      }
      }
      }
        • 1. Re: How do I make this custom Style property work correctly?
          peterent Level 2
          You cannot pass an instance to the style because the instance does not exist when the style is created at compilation time. But a class works. Try this:

          <mx:Style>
          MyCustomPanel {
          testEffect: ClassReference('MyFadeEffect');
          }
          </mx:Style>

          where MyFadeEffect is a class that extends Fade and sets the properties you want it to have.

          then:
          var effectClass:Class = getStyle("testEffect");
          var newEffect:Effect = new effectClass(); // creates an instance of MyFadeEffect
          • 2. Re: How do I make this custom Style property work correctly?
            TomBaggett Level 1
            Thanks for the quick response! I will definitely take your advice to work around the problem but your answer leads to more questions.

            I can specify effects via an instance when assigning them to effect triggers and it works without a problem, as seen below. How does it handle this at compile time?

            <mx:Fade id="rollOverFadeUp" alphaFrom="0.35" alphaTo="1.0" duration="250"/>
            <mx:Fade id="rollOutFadeDown" alphaFrom="1.0" alphaTo="0.35" duration="250"/>

            <mx:Style> // this is an external .css file in my app
            TextInput {
            rollOverEffect: rollOverFadeUp;
            rollOutEffect: rollOutFadeDown;
            }
            </mx:Style>