5 Replies Latest reply on Oct 21, 2008 1:38 PM by Newsgroup_User

    My TitledForm object

    BrandG Level 1
      Recently, I was asked to create a component that would show the title as part of the border of a form. This component creates a VBox to sit behind the title, creates a label to display the title, and then moves the whole shebang up into the form's border. I wanted to offer it here so that anyone who wanted to use it, could. Also, I would ask for some help with a particular problem I have.

      The problem is that I can't find a time in the creation pipeline that would be good for moving this VBox(and it's child label). I have the movement code tied to the Render function, but that seems like overkill, and still doesn't always work. There are some situations (like resizing the form) that make this break down until the mouse is moved over it again. If anyone could tell me how I could improve this, I'd be very grateful.

      Here's the code. In two files:

      TiltedForm.as:

        • 1. Re: My TitledForm object
          Level 7

          "BrandG" <webforumsuser@macromedia.com> wrote in message
          news:gdil1i$q5m$1@forums.macromedia.com...
          > Recently, I was asked to create a component that would show the title as
          > part
          > of the border of a form. This component creates a VBox to sit behind the
          > title,
          > creates a label to display the title, and then moves the whole shebang up
          > into
          > the form's border. I wanted to offer it here so that anyone who wanted to
          > use
          > it, could. Also, I would ask for some help with a particular problem I
          > have.
          >
          > The problem is that I can't find a time in the creation pipeline that
          > would be
          > good for moving this VBox(and it's child label). I have the movement code
          > tied
          > to the Render function, but that seems like overkill, and still doesn't
          > always
          > work. There are some situations (like resizing the form) that make this
          > break
          > down until the mouse is moved over it again. If anyone could tell me how I
          > could improve this, I'd be very grateful.

          Typically you add children in createChildren(), and lay things out and style
          them in updateDisplayList(). Usually you'll set flags in commitProperties()
          or setStyle() or wherever looks appropriate, then schedule a call to
          updateDisplayList by calling invalidateDisplayList().

          It looks to me like your code will keep on producing more and more copies of
          the box as you show, hide, and resize it. Possibly you may want to consider
          creating a protected variable for the box and not creating it again if it
          already exists. You may also want to see if you can add this to the Form's
          rawChildren instead of its regular children. I'm not familiar with the Form
          code, so I am not sure if this is an option.

          HTH;

          Amy


          • 2. Re: My TitledForm object
            -Hob Level 1
            There a bunch of things I would change in your implementation:

            First: Rather than create all your objects in the constructor, move their creation to createChildren().

            Second: Rather than adding myBox to the form's child list with includeInLayout=false, simply add myBox to the form's raw child list. Anything in the raw child list is automatically excluded from the component's layout.

            Third: Only set the label's text property after the title property has been changed by marking the change on title's setter, and committing the change in commitProperties().

            Lastly: Now that myBox is in the raw child list, arrange the raw children in an override of layoutChrome.

            Here's a rough example of what I mean:

            package sc.customcomponents
            {
            import flash.events.Event;

            import mx.containers.Form;
            import mx.containers.VBox;
            import mx.controls.Label;
            import mx.events.ResizeEvent;

            public class TitledForm extends Form
            {
            private var myLabel:Label = null;
            private var myBox:VBox = null;
            public var title:String = "";

            public function TitledForm()
            {
            super();
            }
            override protected function createChildren():void
            {
            setStyle("borderSkin",TitledFormBorder);

            myLabel = new Label();
            myLabel.setStyle("paddingLeft", 5);
            myLabel.setStyle("paddingRight", 5);
            myLabel.setStyle("fontWeight","bold");

            myBox = new VBox();
            myBox.setStyle("backgroundColor","#2C577E");
            myBox.addChild(myLabel);

            this.rawChildren.addChild(myBox);
            }
            protected var titleChanged:Boolean;
            override protected function set title(value:String):void
            {
            super.title = value;
            this.titleChanged = true;
            this.invalidateProperties();
            }
            override protected function commitProperties():void
            {
            super.commitProperties();
            if(this.titleChanged)
            {
            myLabel.text = this.title;
            }
            }
            override protected function layoutChrom(w:Number, h:Number):void
            {
            super.layoutChrom(w,h);
            myBox.x = 10;
            myBox.y = -2;
            myBox.width = myLabel.measuredWidth;
            }
            }
            }
            • 3. Re: My TitledForm object
              BrandG Level 1
              First off, thanks so much, both of you, for your help. I've made all the changes you mentioned, Hob, but now the VBox doesn't display at all. I've tried several X,Y locations, and changed the background to bright white, but if it's on there, I can't see it. I know it's hitting all the functions, so could you tell me why it wouldn't be rendering?

              Thanks again for all your help.
              • 4. Re: My TitledForm object
                BrandG Level 1
                It seemed to be the "rawChidren" add that was making the box disappear, and it doesn't seem to update the position when I use layoutChrome, but I got a much more stable result with Amy's suggestion of moving the positioning code to the updateDisplayList.

                Thanks again to both of you.

                So here's a cleaner, more correct version of the original:


                • 5. Re: My TitledForm object
                  Level 7

                  "BrandG" <webforumsuser@macromedia.com> wrote in message
                  news:gdldpv$gko$1@forums.macromedia.com...
                  > It seemed to be the "rawChidren" add that was making the box disappear,
                  > and it
                  > doesn't seem to update the position when I use layoutChrome, but I got a
                  > much
                  > more stable result with Amy's suggestion of moving the positioning code to
                  > the
                  > updateDisplayList.
                  >
                  > Thanks again to both of you.
                  >
                  > So here's a cleaner, more correct version of the original:
                  >
                  >
                  >
                  >
                  > package sc.customcomponents
                  > {
                  > import flash.events.Event;
                  >
                  > import mx.containers.Form;
                  > import mx.containers.VBox;
                  > import mx.controls.Label;
                  > import mx.events.ResizeEvent;
                  >
                  > public class TitledForm extends Form
                  > {
                  > private var myLabel:Label = null;
                  > private var myBox:VBox = null;
                  > public var _title:String = "";
                  >
                  > public function TitledForm()
                  > {
                  > super();
                  > }
                  >
                  > override protected function createChildren():void
                  > {
                  > setStyle("borderSkin",TitledFormBorder);
                  >
                  > myLabel = new Label();
                  > myLabel.setStyle("paddingLeft", 5);
                  > myLabel.setStyle("paddingRight", 5);
                  > myLabel.setStyle("fontWeight","bold");
                  >
                  > myBox = new VBox();
                  > myBox.includeInLayout = false;
                  > myBox.setStyle("backgroundColor","#2C577E");
                  >
                  > myBox.addChild(myLabel);
                  > this.addChild(myBox);
                  >
                  > super.createChildren();
                  > }
                  >
                  > protected var titleChanged:Boolean;
                  > public function set title(value:String):void
                  > {
                  > _title = value;
                  > this.titleChanged = true;
                  > this.invalidateProperties();
                  > }
                  >
                  > override protected function commitProperties():void
                  > {
                  > super.commitProperties();
                  > if (this.titleChanged)
                  > {
                  > myLabel.text = _title;
                  > }
                  > }
                  >
                  > override protected function updateDisplayList(unscaledWidth:Number,
                  > unscaledHeight:Number):void
                  > {
                  > super.updateDisplayList(unscaledWidth,unscaledHeight);
                  > myBox.move(10,-2);
                  > myBox.width = myLabel.measuredWidth;
                  > }
                  >
                  > }
                  > }

                  There's a good example of adding to rawChildren in the book Flex 3 Training
                  from the Source.

                  HTH;

                  Amy