6 Replies Latest reply on Feb 19, 2008 7:04 AM by atta707

    Textinput in panel header

    kruse Level 1
      I need to have a text input field in the header of a panel.
      Is this possible?
        • 1. Re: Textinput in panel header
          atta707 Level 2
          yes, it is possible.

          Override the createChildren method of the Panel class and create a new TextBox and add it to the protected property called titleBar:

          override protected function createChildren() : void {
          super.createChildren();
          var tb:UIComponent = this.titleBar;
          this.ti = new TextInput();
          tb.addChild(ti);
          }

          then override the layoutChrome method and position the text box whereever you like it.

          override protected function layoutChrome(unscaledWidth:Number, unscaledHeight:Number) : void {
          super.layoutChrome(unscaledWidth, unscaledHeight);
          //when adding to a UIComponent (not a Container) need explicit width/height
          tb.width = unscaledWidth / 2; //make it big so as we add cart items we can stretch)
          tb.height = titleBar.measuredHeight;

          tb.move(statusTextField.x - ti.width, titleTextField.y - 1);
          }

          and that's it!

          I think the phone sample that comes with Flex Builder has used this notion and you can consult it for more info.

          ATTA
          • 2. Re: Textinput in panel header
            kruse Level 1
            This works great.
            Well almost great.
            There is a little issue with data in the new textinput field.

            The data that should be present in the textinput field comes from a binding value.
            If I try to get the data e.g. ti.text = bindingObj.name
            It fails. Because the bindingObj do not contain any value called name when the field is created.
            It is first later that the data is populated.

            How do I populate my new textinput field with data from a binding value?
            • 3. Re: Textinput in panel header
              kruse Level 1
              No one that have experienced this problem before?
              • 4. Re: Textinput in panel header
                atta707 Level 2
                when does the line ti.text = bindingObj.name execute?

                how about just adding a callLater(_setText) and in your _setText function write this same line?

                how about executing this line on complete event of the panel?

                ATTA
                • 5. Re: Textinput in panel header
                  kruse Level 1
                  bindingObj.name is just an object called BindingObj.

                  e.g var bindingObject : Object = new Object;
                  bindingObject.name = 'Morten Kruse'

                  I have tried to run it at the panel complete event.
                  But because the bindingObject is a binding

                  [binding]
                  bindingObject:Object;

                  it does not contain any value even though the panel is completed.
                  It seams the binding value bindingObject does get it's value after the panel is finished.
                  Resulting to fail at the ti.text = bindingObj.name
                  • 6. Re: Textinput in panel header
                    atta707 Level 2
                    maybe you want to show a bare minimum working app with this problem.