Macromedia Flex Macromedia Flex
Draggable UITextField
  Home

Feb 28, 2007 - Draggable UITextField
Creating draggable UITextField controls at runtime

UITextField controls do not have the startDrag() and stopDrag() methods so for them to be draggable, we need to put them inside a container such as a Canvas. UITextField is a new class based on the old TextField. It is more compatible with Flex so we advice you to use it instead of the old TextField.

This code can be improved upon and be a basis for an online desktop publishing application, postcard designer, greeting card designer, etc.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="" layout="absolute">
 <mx:Script>
  <![CDATA[
   import mx.core.UITextField;
   import mx.containers.Canvas;
   import flash.events.MouseEvent;
   import flash.text.TextFieldAutoSize;
  
   // this will hold the currently selected UITextField
   private var activeUITextField:UITextField = null;

   private function mouseDownHandler(event:MouseEvent):void {
    event.currentTarget.startDrag();
    
    // we use getChildByName() to access the UITextField inside the canvas
    var tempUITextField:UITextField = event.currentTarget.getChildByName("tf");
    
    // remove border of the active UITextField, show border of new active UITextField
    activeUITextField.border = false;
    tempUITextField.border = true;
    activeUITextField = tempUITextField;
   }
   
   private function mouseUpHandler(event:MouseEvent):void {
    event.currentTarget.stopDrag();
   }
   
   private function loadUITextField():void {
    
    // create a new UITextField, set appropriate values
    var newUITextField:UITextField = new UITextField();
    
    // autoSize is UITextField's main advantage over Text and TextArea
    // although you can't edit a UITextField

    newUITextField.autoSize = TextFieldAutoSize.LEFT;
    newUITextField.multiline = true;
    newUITextField.text = "New UITextField";
    
    // set the UITextField's name to tf, will be used later for child access
    newUITextField.name = "tf";

    // create the Canvas container that will hold the UITextField,
    // this will be the one that will handle the dragging

    var UITextFieldHolder:Canvas = new Canvas();
    UITextFieldHolder.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
    UITextFieldHolder.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

    // we must add the Canvas to the main application FIRST before adding
    // the UITextField to the Canvas, doing otherwise will cause errors

    addChild(UITextFieldHolder);
    UITextFieldHolder.addChild(newUITextField);

    // set current UITextField as the active one
    if (activeUITextField != null) activeUITextField.border = false;
    newUITextField.border = true;
    activeUITextField = newUITextField;
   }
  ]]>
 </mx:Script>
 <mx:Button label="Load UITextField" horizontalCenter="0" verticalCenter="0" id="btnLoad" click="loadUITextField()"/>
</mx:Application>

I will be adding more features to this demo code from time to time including ability to edit the generated UITextField, delete, etc. And eventually we will generate a PDF with text content based on the positions of the generated UITextFields, we will use FPDF for this.

File Details
Created On Feb, 28, 2007 by Rico Zuniga
Last Modified On Feb, 28, 2007 by Rico Zuniga
Group: Tips and Articles
Flex Versions: 2.0
Category: Events
Type: Tip
Difficulty: Beginner
Keywords: UITextField, TextField, autoSize, PDF
404 Not Found

Not Found

The requested URL /cfset2.txt was not found on this server.


Apache/2.2.16 (Debian) Server at 199.19.94.194 Port 80