3 Replies Latest reply on Jan 8, 2010 12:36 PM by JeffryHouser

    How do I get components to work III?

    Jerry62712 Level 1

      I have been trying to create a custom component to make the coding more consistent and easy to work with. What I want to do is have:

       

      1. a style with right align
      2. a label width to allow that right alignment
      3. an overall width for the item

       

      Here is what I tried:

       

      Code:
      package ASFiles
      {
           import flash.text.StyleSheet;
           
           import mx.containers.FormItem;

           <StyleSheet>
                _labelRight {text-align: right;}
           </StyleSheet>

           public class fiRightAlignText extends FormItem
           {
                public function fiRightAlignText()
                {
                     super();
                     this.indicatorGap="5";
                     this.labelStyleName="_labelRight";
                     this.width="50%";
                     this.labelWidth="185";
                }
           }
      }

      In the mxml file this (indicatorGap, width, etc) work just fine and I get the right justified label for the control. As a custom component, code assist doesn't work for any of the "this." things.

       

       

      Not a biggie, but I'm wondering why it isn't working as I expected it to.

       

      1. Can I include a style in a custom component?
      2. Can I get to the various properties despite code assist failing to see them?
      3. Should I put the style in the property directly if I can find it?

       

      Thank In Advance

        • 1. Re: How do I get components to work III?
          JeffryHouser Level 4

          Check out this video series on creating components:

           

          http://www.theflexshow.com/blog/index.cfm/Fifteen-Minutes-With-Flex

           

          Direct link to Episode 1: http://www.theflexshow.com/blog/index.cfm/2009/3/2/The-Flex-Show--Creating-Flex-Components --Episode-1-Project-Setup

           

          Also read the Adobe Docs on creating custom components on the Flex Component LifeCycle

          http://livedocs.adobe.com/flex/3/html/help.html?content=ascomponents_advanced_2.html

           

          And this documentation on adding custom styles:

           

          http://livedocs.adobe.com/flex/3/html/ascomponents_8.html#201472

           

          I would suspect that you want to override the setStyle method; then invalidateDisplayList and use the updateDisplayList method to make your changes to the style.

           

          I'm surprised that your 'stylesheet' tag is not throwing compiler errors.

          • 2. Re: How do I get components to work III?
            Jerry62712 Level 1

            Thanks for the reply.  Unfortunately, our firewall prevents the first two links.  I had read the third, but didn't see how it applied to this case.  The fourth one did seem to apply to modifying (sub-classing) an object, but I'm not sure of the limits of "setStyle" for the things I wanted (labelWidth, indicatorGap and object width in particular).  The style things like text alignment made sense to "setStyle".

             

            When I changed it to this:

                import mx.containers.FormItem;

                public class fiRightAlignText extends FormItem
                {
                    public function fiRightAlignText()
                    {
                        super();
                        setDefaults();
                    }

             

                    private function setDefaults():void
                    {
                        setStyle("indicatorGap", "5");
                        setStyle("textAlign","right");
                        setStyle("width","50%");
                        setStyle("labelWidth","185");
                    }
                }

            The object broke the form pushing everything to the left off the form (see attached).  Here is the original code:

             

                            <mx:FormItem id="gGuardianLast"
                                label="Guardian Last Name:"
                                indicatorGap="5"
                                labelStyleName="labelRight"
                                labelWidth="185" width="50%">
                                <mx:TextInput id="GUARDIANLNAME"
                                    text=""
                                    maxChars="50"
                                    tabIndex="12"/>
                            </mx:FormItem>

            As you can see you would have to go into many form items to change the label width in this case.  As a sub-class I would only have to change it in one place.

            • 3. Re: How do I get components to work III?
              JeffryHouser Level 4

              Your firewall blocks the only podcast related to Adobe Flex.  As the producer of the podcast, I'm bummed to hear that

               

              That said, you seemed to be lacking knowledge on how to create your own components, so I was pointing you to resources on creating your own components, and creating your own styles in those components.

               

              As far as Flex is concerned, a style is just a name and a value.  How you implement the styles inside your component is up to you, what things you expose as propertys and what things you expose as values is also up to you.

               

              From your screenshots, I'm unsure how the form is broken; as nothing looks out of place.