6 Replies Latest reply on May 5, 2011 3:26 AM by nikos101

    Custom component advice needed please

    nikos101 Level 2

      Hi there, I'm trying to create a simple component that is basically a 2 state skinnable component with a text field.

       

      I declare it in mxml where I want to use it like this:

       

              <customComponents:ToggledBackground  label="1.Values" skinClass="nikos.customComponents.ToggledBackgroundSkin" width="100" height="100">
                 
              </customComponents:ToggledBackground>

       

      but I don't see anything for the component, in fact I down even see the holding homponent until I move the mouse wheel

       


      package nikos.customComponents
      {

       

      import flash.events.Event;
      import flash.events.MouseEvent;

       

      import mx.core.mx_internal;
      import mx.events.FlexEvent;

       

      import spark.components.supportClasses.SkinnableComponent;
      import spark.components.supportClasses.TextBase;

       

      use namespace mx_internal;

       


      [Event(name="change", type="flash.events.Event")]

       


      [SkinState("on")]

       

      [SkinState("off")]

       


      public class ToggledBackground extends SkinnableComponent
      {

       

          public function ToggledBackground()
          {
              super();
         
          }

       

          private var _on:Boolean;
         
          [SkinPart(required="true")]
          public var labelDisplay:TextBase;

       

          [Bindable]
         
          /**
           *  Contains <code>true</code> if the button is in the down state,
           *  and <code>false</code> if it is in the up state.
           *
           * 
           *  @langversion 3.0
           *  @playerversion Flash 10
           *  @playerversion AIR 1.5
           *  @productversion Flex 4
           */   
          public function get on():Boolean
          {
              return _on;
          }
         
          /**
           *  @private
           */   
          public function set on(value:Boolean):void
          {
              if (value == _on)
                  return;

       

              _on = value;           
              dispatchEvent(new FlexEvent(FlexEvent.VALUE_COMMIT));
              invalidateSkinState();
          }

       

          //content_______________________
          /**
           *  @private
           *  Storage for the content property.
           */
          private var _content:*;
         
          [Bindable("contentChange")]

       

          public function get content():Object
          {
              return _content;
          }
         
          /**
           *  @private
           */
          public function set content(value:Object):void
          {
              _content = value;
             
              // Push to the optional labelDisplay skin part
              if (labelDisplay)
                  labelDisplay.text = label;
              dispatchEvent(new Event("contentChange"));
          }
         
          //----------------------------------
          //  label
          //----------------------------------
         
          [Bindable("contentChange")]

       

          public function set label(value:String):void
          {
              // label property is just a proxy to the content.
              // The content setter will dispatch the event.
              content = value;
          }
         
          /**
           *  @private
           */
          public function get label():String         
          {
              return (content != null) ? content.toString() : "";
          }
         
         
          //--------------------------------------------------------------------------
          //
          //  States
          //
          //--------------------------------------------------------------------------

       

          /**
           *  @private
           */
          override protected function getCurrentSkinState():String
          {
              if (!_on)
                  return 'On';
              else
                  return 'Off';
          }

       

      }

       

      }

        • 1. Re: Custom component advice needed please
          saisri2k2 Level 4

          What do you have in the skin class?

          • 2. Re: Custom component advice needed please
            nikos101 Level 2

            <?xml version="1.0" encoding="utf-8"?>
            <Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/mx">
                <!-- host component -->
                <fx:Metadata>
                    [HostComponent("nikos.customComponents.ToggledBackground")]
                </fx:Metadata>
               
                <!-- states -->
                <states>
                    <State name="on" />
                    <State name="off" />
                </states>
               
                <!-- SkinParts
                name=labelDisplay, type=spark.components.supportClasses.TextBase, required=false
                -->

             

               
                    <Path data="M15,10L150,10L190,60L150,110L15,110L60,60" winding="nonZero" x="-5" y="-2">
                        <fill>
                            <LinearGradient x="111.7" y="12.1" scaleX="83.77154946639104" rotation="91.29962161751304">
                                <GradientEntry color="#335CFC" ratio="0"/>
                                <GradientEntry color="#000099" ratio="1"/>
                            </LinearGradient>
                        </fill>
                        <stroke>
                            <SolidColorStroke color="#BCFDAC" alpha="1" weight="1" miterLimit="0"/>
                        </stroke>
                    </Path>
               
                <RichText id="labelDisplay">
                   
                </RichText>
            </Skin>

            • 3. Re: Custom component advice needed please
              JeffryHouser Level 4

              As best I can tell, you never set any text value to the labelDisplay, nor do anything else to give it a size.  Won't it have zero height and zero width? Your path also has no size to it; but I'm not sure if that is a problem.

              • 4. Re: Custom component advice needed please
                nikos101 Level 2

                This sets the text:

                 

                public function set content(value:Object):void
                    {
                        _content = value;
                       
                        // Push to the optional labelDisplay skin part
                        if (labelDisplay)
                            labelDisplay.text = label;
                        dispatchEvent(new Event("contentChange"));
                    }

                 

                I think you are right about the skin size so I changed it to this:

                 

                <Skin xmlns:fx="http://ns.adobe.com/mxml/2009"  left="0" top="0" right="0" bottom="0"
                        xmlns="library://ns.adobe.com/flex/spark"
                        xmlns:mx="library://ns.adobe.com/flex/mx">

                 

                however in my app everything is messed up when using the skin, I keep needing to move the mouse wheel to see anything

                • 5. Re: Custom component advice needed please
                  nikos101 Level 2

                  this is the error im getting:

                   

                  ArgumentError: Undefined state 'On'.
                      at mx.core::UIComponent/getState()[E:\dev\4.x\frameworks\projects\framework\src\mx\core\UICo mponent.as:10168]

                  • 6. Re: Custom component advice needed please
                    nikos101 Level 2

                    the problem was this:

                     

                      override protected function getCurrentSkinState():String
                        {
                            if (!_on)
                                return 'On';
                            else
                                return 'Off';
                        }

                     

                    this fixed it :

                     

                      override protected function getCurrentSkinState():String
                        {
                            if (!_on)
                                return 'on';
                            else
                                return 'off';
                        }