| | {section} |
| | {column:width=80%} |
| | |
| | h2. 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.) |
| | {column} |
| | {column} |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/3f.+Customizing+components} |
| | {adbe-next:http://learn.adobe.com/wiki/display/Flex/Code+Behind} |
| | {rate:title=User rating|theme=dynamic|key=focal|display=default} |
| | {adbe-pod} |
| | h6. Learn more |
| | * LiveDocs: {adbe-popup:http://livedocs.adobe.com/flex/3/html/Part3_as_components_1.html}Developing custom ActionScript components{adbe-popup} |
| | * {adbe-popup:http://www.adobe.com/devnet/actionscript/articles/actionscript3_overview.html}ActionScript 3.0 overview{adbe-popup} |
| | * {adbe-popup:http://livedocs.adobe.com/flex/3/html/Part6_ProgAS_1.html}Programming with ActionScript 3.0{adbe-popup} |
| | * {adbe-popup:http://www.senocular.com/flash/tutorials/as3withflashcs3/}Getting Started with ActionScript 3.0{adbe-popup} |
| | {adbe-pod} |
| | {column} |
| | {section} |
| | |
| | h2. MainForm.MXML |
| | |
| | {code} |
| | <?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> |
| | {code} |
| | |
| | h2. TextInputEmail.as |
| | |
| | {code} |
| | 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; |
| | } |
| | } |
| | } |
| | } |
| | {code} |
| | * Download a {adbe-popup:http://learn.adobe.com/wiki/download/attachments/5701770/Flex3GSEIII_f_CustomComps.zip}ZIP file {adbe-popup}that contains the applications in this module. To import the project into Flex Builder, select File > Import Flex Project. |
| | |
| | h2. Rendered Application |
| | |
| | | {test-flash:350|150|EmailInputExample.swf}EmailInputExample{test-flash} |
| | | {test-flash:150|350|EmailInputExample.swf}EmailInputExample{test-flash} |
| | |
| | |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/3f.+Customizing+components} |
| | {adbe-next:http://learn.adobe.com/wiki/display/Flex/Code+Behind} |
