Capturing text input

The qnx.fuse.ui.text package contains the classes required for displaying text on the screen and for gathering text input from the user.

The Label class enables you to display formatted text within your application. The Label class cannot be used to gather text input, and it cannot get input focus.

The TextInput class enables you to create a single -ine text field that the user can use to enter text. The TextArea class enables you to create a multi-line text field that the user can use to enter text. When a TextInput or TextArea instance gains focus, the keyboard automatically appears enabling the user to enter text into the field. You can define the type of keyboard that appears, depending on the context of the current application.

Create a text input field

When the user clicks in a text input field, the keyboard appears. You can define the type of keyboard for each text input field. The keyboard type defines the layout of the keyboard, including the types of keys, and the Return key type. The following task demonstrates how to create a text input field that enables the following keyboard.

  1. Import the required classes.
    import flash.display.Sprite;
    import qnx.fuse.ui.text.KeyboardType;
    import qnx.fuse.ui.text.ReturnKeyType;
    import qnx.fuse.ui.text.TextInput;
    import qnx.fuse.ui.text.TextInputIconMode;
  2. Add the following statement to your class, directly before the class signature. This statement sets the stage width and height, the frame rate, and the background color of your application.
    [SWF(height="600", width="1024", frameRate="30", backgroundColor="#FFFFFF")]
  3. Create an application framework by extending Sprite.
    class TextInputSample extends Sprite
    {
    
  4. Create a constructor for your class and invoke initializeUI().
         public function TextInputSample()
         {
    	     initializeUI();
         }
  5. Create the initializeUI function to set up and initialize the UI controls.
         private function initializeUI():void
         {
  6. In the initializeUI function, instantiate the TextInput class and position the control on the stage.
             var myInput:TextInput = new TextInput();
             myInput.setPosition(200, 200);
             myInput.width = 300;
  7. In the initializeUI function, set the keyboard type and keyboard Enter key type. In the following code sample, the text input field is used to type a URL to connect to a remote server. The URL keyboard is specified (by specifying the KeyboardType.URL constant), and the Enter key is set to use the Connect key.
             myInput.softKeyboardType = KeyboardType.URL;
             myInput.returnKeyLabel = ReturnKeyType.CONNECT;
  8. In the initializeUI function, set the clearIconMode property. By default, the text input field contains a clear icon that the user can click to clear the text input field. The icon is enabled by default, however you can define when the icon is available to the user.
             myInput.clearIconMode = TextInputIconMode.UNLESS_EDITING;
  9. In the initializeUI function, add the text input field to the stage.
             this.addChild(myInput);
         }
    }

Create a text input area

The following task demonstrates how to create aTextArea that enables the email keyboard type, and the default return key.

  1. Import the required classes.
    import flash.display.Sprite;
    import qnx.fuse.ui.text.KeyboardType;
    import qnx.fuse.ui.text.ReturnKeyType;
    import qnx.fuse.ui.text.TextArea;
    
  2. Add the following statement to your class, directly before the class signature. This statement sets the stage width and height, the frame rate, and the background color of your application.
    [SWF(height="600", width="1024", frameRate="30", backgroundColor="#FFFFFF")]
  3. Create an application framework by extending Sprite.
    class TextAreaSample extends Sprite
    {
    
  4. Create a constructor for your class and invoke initializeUI().
         public function TextAreaSample()
         {
    	     initializeUI();
         }
  5. Create the initializeUI function to set up and initialize the UI controls.
         private function initializeUI():void
         {
  6. In the initializeUI function, instantiate the TextArea class and position the control on the stage.
             var myArea:TextArea = new TextArea();
             myArea.setPosition(100, 100);
             myArea.width = 700;
             myArea.height = 300;
  7. In the initializeUI function, set the keyboard type and keyboard Enter key type. In the following code sample, the text input field is used to type a URL to connect to a remote server. The EMAIL keyboard is specified (by specifying the KeyboardType.EMAIL constant).
             myArea.softKeyboardType = KeyboardType.EMAIL;
             myArea.returnKeyLabel = ReturnKeyType.DEFAULT;
  8. In the initializeUI function, add the text input field to the stage.
             this.addChild(myArea);
         }
    }