Log In  
  Getting Started  
----------------------------------------

Resources

 

Custom Components - ActionScript 3.0

  • You can use ActionScript to create Custom Components as well.
  • This example shows how you can extend the TextInput field to take advantage of email validators.
  • You also create custom components that are not ex
  • It has its own constructor, which first calls its super class constructor. This provides access to all properties, methods and events of the super class.
  • The component needs to handle validator events.
  • You can then use it just like any component.
  • You need to define a package for your component. Packages allow you to bundle your components making code sharing easier and minimize naming conflicts. (It's best practice to use com.*.components where *=your own designator, and use components because this is an extension of an existing component.)
previous page next page

User rating?

MainForm.MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	backgroundColor="#FFFFFF"
	backgroundAlpha="0"
	xmlns:me="com.mycustom.components.*">

	<mx:Form>
             <mx:FormItem label="Email Address:" >
		<me:TextInputEmail />
             </mx:FormItem>
             <mx:FormItem>
		<mx:Button label="Submit" />
             </mx:FormItem>
	</mx:Form>

</mx:Application>

TextInputEmail.as

package com.mycustom.components
{
    import mx.controls.TextInput;
    import mx.events.ValidationResultEvent;
    import mx.validators.EmailValidator;
    import flash.events.Event;
    import mx.validators.ValidationResult;

    public class TextInputEmail extends TextInput
    {
        private var emailValidator:EmailValidator = new EmailValidator();
        private var validator:ValidationResultEvent;

        public function TextInputEmail()
        {
            super();
            this.emailValidator.source = this;
            this.emailValidator.property = "text";
            this.addEventListener("enter", this.validate);

        }

        private function validate(event:Event):void
        {
            validator = emailValidator.validate();

            if (validator.type == ValidationResultEvent.VALID)
            {
                this.errorString = "";
            } else {
                this.errorString = validator.message;
            }
        }
    }
}
  • Download a ZIP file that contains the applications in this module. To import the project into Flex Builder, select File > Import Flex Project.

Rendered Application

previous page next page

0 comments
Added by Mark Nichoson , last edited by matthew horn on Apr 22, 2008  (view change)
Labels: 
(None)

Powered by Atlassian Confluence 2.7.1, the Enterprise Wiki. Bug/feature request - Atlassian news - Contact administrators