5 Replies Latest reply on Nov 19, 2008 4:43 AM by Mirza Asim

    Background image in textField

    Mirza Asim
      Is it possible to set a background image in TextField? Whether using HTML text or any other method but within TextField?

      Regards,
      Mirza Asim
        • 1. Re: Background image in textField
          Gregory Lafrance Level 6
          Don't know if this is what you want, but it works:
          • 2. Re: Background image in textField
            Mirza Asim Level 1
            Thanks Greg Lafrance!
            But I need something with UITextField/TextField rather using UITextField with some otehr component or something.

            Thanks anyways :)

            Regards
            Mirza Asim
            • 3. Re: Background image in textField
              atta707 Level 2
              Asim,

              For UITextField and TextField, it has to be a composite component as you don't access to the 'graphics' instance. This composite component would include an image in the background -- using addChildAt() method -- sets it's opacity to an appropriate level and then adds the UITextField on top of it.

              The following code -- inspired by Greg's code above -- could be adopted into a new class that extends UIComponent and implements the usual life cycle methods of a UIComponent and createChidren method would pace both the image and the UITextField at 0,0:

              private function testIt(event:Event) : void {
              var myTextField:UITextField = new UITextField();
              myTextField.text="Test";
              myTextField.width = 100;
              myTextField.height = 16;
              myTextField.background = false;
              myTextField.border = true;
              var canvas:Canvas = new Canvas();

              canvas.width = 100;
              canvas.height = 16;
              var image:Image = new Image();
              image.source = "../assets/images/save.gif";
              image.alpha = .5;
              image.height = myTextField.height;
              image.width = myTextField.width;

              canvas.addChildAt(image, 0);
              image.move(0, 0);

              canvas.addChild(myTextField);
              myTextField.move(0, 0);

              this.addChild(canvas);
              }
              Hope this helps.

              ATTA
              • 4. Re: Background image in textField
                atta707 Level 2
                Asim,

                For UITextField and TextField, it has to be a composite component as you don't access to the 'graphics' instance. This composite component would include an image in the background -- using addChildAt() method -- sets it's opacity to an appropriate level and then adds the UITextField on top of it.

                The following code -- inspired by Greg's code above -- could be adopted into a new class that extends UIComponent and implements the usual life cycle methods of a UIComponent and createChidren method would pace both the image and the UITextField at 0,0:

                private function testIt(event:Event) : void {
                var myTextField:UITextField = new UITextField();
                myTextField.text="Test";
                myTextField.width = 100;
                myTextField.height = 16;
                myTextField.background = false;
                myTextField.border = true;
                var canvas:Canvas = new Canvas();

                canvas.width = 100;
                canvas.height = 16;
                var image:Image = new Image();
                image.source = "../assets/images/save.gif";
                image.alpha = .5;
                image.height = myTextField.height;
                image.width = myTextField.width;

                canvas.addChildAt(image, 0);
                image.move(0, 0);

                canvas.addChild(myTextField);
                myTextField.move(0, 0);

                this.addChild(canvas);
                }
                Hope this helps.

                ATTA
                • 5. Re: Background image in textField
                  Mirza Asim Level 1
                  I think I should elaborate a bit... I want to use this UITextField as an Itemrenderer of Advanced datagrid. And I am avoiding to use any UIComponent for this purpose because it makes the datagrid rendering very slow.
                  Thats why I want a solution without using UIComponent. Otherwise, using UIComponent I already implemented it, but it made my application very slow.

                  Regards,
                  Mirza Asim