Google Git
Sign in
apache / flex-site / HEAD / . / content / doc / flex / using / flx_ascomponents_as.html
blob: 3d5c45d8c2ab236c2c961b7975a0375604a6c0cd [file] [log] [blame]
<?xml version="1.0" encoding="UTF-8"?>
<!--
Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-us" xml:lang="en-us">
<head>
<meta name="DC.Type" content="topic"/>
<meta name="DC.Title" content="Create simple visual components in ActionScript"/>
<meta name="DC.Format" content="XHTML"/>
<meta name="DC.Identifier" content="WS2db454920e96a9e51e63e3d11c0bf69084-7fea_verapache"/>
<title>Create simple visual components in ActionScript</title>
</head>
<body id="WS2db454920e96a9e51e63e3d11c0bf69084-7fea_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7fea_verapache"><!-- --></a>
<div>
<p>You define custom ActionScript components to extend the
Flex component library. For example, you
can create a customized <a href="https://flex.apache.org/asdoc/spark/components/Button.html" target="_blank">Button</a>, <a href="https://flex.apache.org/asdoc/mx/controls/Tree.html" target="_blank">Tree</a>, or <a href="https://flex.apache.org/asdoc/mx/controls/DataGrid.html" target="_blank">DataGrid</a> component
as an ActionScript component.</p>
<p>For information on creating advanced components in ActionScript,
see <a href="flx_ascomponents_spark_advanced_sas.html#WS460ee381960520ad-2811830c121e9107ecb-8000_verapache">Create advanced
Spark visual components in ActionScript</a> and <a href="flx_ascomponents_advanced_asa.html#WS2db454920e96a9e51e63e3d11c0bf69084-7cdd_verapache">Create
advanced MX visual components in ActionScript</a>. </p>
</div>
<div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf684f9-7fff_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf684f9-7fff_verapache"><!-- --></a>
<h2 class="topictitle2">About ActionScript components</h2>
<div>
<p>You
create reusable components by using ActionScript, and reference
these components in your Flex applications as MXML tags. Components
created in ActionScript can contain graphical elements, define custom
business logic, or extend existing Flex components. </p>
<p>Flex components are implemented as a class hierarchy in ActionScript.
Each component in your application is an instance of an ActionScript
class. All Flex visual components are derived from the ActionScript <a href="https://flex.apache.org/asdoc/mx/core/UIComponent.html" target="_blank">UIComponent</a> class.
To create your own components, you can create a subclass from the
UIComponent class or from any of its subclasses. For a complete
description of the class hierarchy, see the <a href="https://flex.apache.org/asdoc/" target="_blank">ActionScript 3.0 Reference for Apache Flex</a>.</p>
<p>The class you choose to use as the superclass of your custom
component depends on what you are trying to accomplish. For example,
you might require a custom button control. You could create a subclass
of the UIComponent class, and then recreate all of the functionality
built into the Flex Button class. A better and faster way to create
your custom button component is to create a subclass of the Flex
Button class, and then modify it in your custom class. </p>
<p>
<em>Simple components</em> are subclasses of existing Flex components
that modify the behavior of the component, or add new functionality
to it. For example, you might add a new event type to a <a href="https://flex.apache.org/asdoc/spark/components/Button.html" target="_blank">Button</a> control,
or modify the default styles or skins of a <a href="https://flex.apache.org/asdoc/mx/controls/DataGrid.html" target="_blank">DataGrid</a> control.</p>
<p>You can also create advanced ActionScript components. Advanced
ActionScript components might have one of the following requirements:</p>
<ul>
<li>
<p>Modify the appearance of a control or the layout functionality
of a container</p>
</li>
<li>
<p>Encapsulate one or more components into a composite component</p>
</li>
<li>
<p>Subclass UIComponent to create components</p>
</li>
</ul>
<p>For information on creating advanced ActionScript components,
see <a href="flx_ascomponents_advanced_asa.html#WS2db454920e96a9e51e63e3d11c0bf69084-7cdd_verapache">Create advanced
MX visual components in ActionScript</a>. </p>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf684f9-7ffe_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf684f9-7ffe_verapache"><!-- --></a>
<h3 class="topictitle3">Example: Creating a simple component</h3>
<div>
<p>When you define a simple component, you do not create a
component yourself, but instead modify the behavior of an existing
component. In this section, you create a customized TextArea control
by extending the <a href="https://flex.apache.org/asdoc/spark/components/TextArea.html" target="_blank">spark.components.TextArea</a> component.
This component adds an event listener for the <a href="https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/InteractiveObject.html#keyDown" target="_blank">keyDown</a> event
to the TextArea control. The <samp class="codeph">KeyDown</samp> event deletes
all the text in the control when a user presses the Control+Alt+Z
key combination.</p>
<pre class="codeblock">package myComponents
{
// createcomps_as/myComponents/DeleteTextArea.as
import spark.components.TextArea;
import flash.events.KeyboardEvent;
public class DeleteTextArea extends TextArea {
// Constructor
public function DeleteTextArea() {
// Call super().
super();
// Add event listener for keyDown event.
addEventListener("keyDown", myKeyDown);
}
// Define private keyDown event handler.
private function myKeyDown(eventObj:KeyboardEvent):void {
// Check to see if Ctrl+Alt+Z pressed. Keycode is 90.
if (eventObj.ctrlKey &amp;&amp; eventObj.keyCode == 90)
text = "";
}
}
}</pre>
<p>The filename for this component is DeleteTextArea.as, and its
location is the myComponents subdirectory of the application, as
specified by the <samp class="codeph">package</samp> statement. For more information
on using the <samp class="codeph">package</samp> statement and specifying the
directory location of your components, see <a href="flx_createcomps_basicas_cca.html#WS2db454920e96a9e51e63e3d11c0bf69084-79fc_verapache">Custom
ActionScript components</a>. </p>
<p>You can now use your new TextArea control in an application,
as the following example shows:</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- createcomps_as/MainDeleteTextArea.mxml --&gt;
&lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:MyComp="myComponents.*"&gt;
&lt;MyComp:DeleteTextArea/&gt;
&lt;/s:Application&gt;</pre>
<div class="note"><span class="notetitle">Note:</span> Your class must be specified as <samp class="codeph">public</samp> for
you to be able to access it by using an MXML tag. </div>
<p>In this example, you first define the <samp class="codeph">MyComp</samp> namespace
to specify the location of your custom component. You then reference
the component as an MXML tag by using the namespace prefix. </p>
<p>You can specify any inherited properties of the superclass in
MXML, as the following example shows:</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- createcomps_as/MainDeleteTextAreaProps.mxml --&gt;
&lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:MyComp="myComponents.*"&gt;
&lt;MyComp:DeleteTextArea
maxChars="50"
text="My Message"/&gt;
&lt;/s:Application&gt;</pre>
<p>You do not have to change the name of your custom component when
you create a subclass of a Flex class. In the previous example,
you could have named your custom component TextArea, and written
it to the TextArea.as file in the myComponents directory, as the
following example shows:</p>
<pre class="codeblock"> package myComponents
 {
  import spark.components.TextArea;
  import flash.events.KeyboardEvent;
 
  public class TextArea extends TextArea {
  ...
  }
 }</pre>
<p>You can now use your custom TextArea control, and the standard
TextArea control, in an application. To differentiate between the
two controls, you use the namespace prefix, as the following example
shows:</p>
<pre class="codeblock"> &lt;?xml version="1.0"?&gt;
 &lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:MyComp="myComponents.*" &gt;
  &lt;MyComp:TextArea/&gt;
  &lt;s:TextArea/&gt;
 &lt;/s:Application&gt;</pre>
</div>
</div>
</div>
<div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf684f9-7ffd_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf684f9-7ffd_verapache"><!-- --></a>
<h2 class="topictitle2">Adding properties and methods to
a component</h2>
<div>
<p>To make your custom components reusable, you design them
so that users can pass information to them. You do this by adding
public properties and methods to your components, and by making
the components accessible in MXML. </p>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf69084-79f7_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-79f7_verapache"><!-- --></a>
<h3 class="topictitle3">Defining public properties in ActionScript</h3>
<div>
<p>You can use one of the following methods to add public
properties to your ActionScript components:</p>
<ul>
<li>
<p>Define public variables</p>
</li>
<li>
<p>Define public getter and setter methods</p>
</li>
</ul>
</div>
<div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf684f9-7ffb_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf684f9-7ffb_verapache"><!-- --></a>
<h4 class="topictitle4">Accessing public properties in
MXML</h4>
<div>
<p>All public properties defined in your component are accessible
in MXML by using MXML tag properties. For example, you might allow
the user to pass a value to your component, as the following example
shows:</p>
<pre class="codeblock"> &lt;MyComp:MyCustomComponent prop1="3"/&gt;</pre>
<p>To create a component that takes tag attributes in MXML, you
define a public variable with the same name as the tag attribute
in your class definition:</p>
<pre class="codeblock"> public class MyCustomComponent extends TextArea {
 
  // Define an uninitialized variable.
  public var prop1:Number;
 
  // Define and initialize a variable.
  public var prop2:Number=5;
  ...
 }</pre>
<p>You can also use public getter and setter methods to define a
property, as the following example shows:</p>
<pre class="codeblock"> public class MyCustomComponent extends TextArea {
 
  private var _prop1:Number;
 
  public function get prop1():Number {
  // Method body.
  // Typically the last line returns the value of the private variable.
  return _prop1;
  }
 
  public function set prop1(value:Number):void {
  // Typically sets the private variable to the argument.
  _prop1=value;
  // Define any other logic, such as dispatching an event.
  }
 }</pre>
<p>You can define and initialize a private variable, as the following
example shows:</p>
<pre class="codeblock"> private var _prop2:Number=5;</pre>
<p>When you specify a value to the property in MXML, Flex automatically
calls the setter method. If you do not set the property in MXML,
Flex sets it to its initial value, if you specified one, or to the
type's default value, which is <samp class="codeph">NaN</samp> for a variable
of type Number. </p>
</div>
</div>
<div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf69084-79fa_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-79fa_verapache"><!-- --></a>
<h4 class="topictitle4">Defining public properties as variables</h4>
<div>
<p>In the following example, you use the Control+Alt+I key
combination to extend the <a href="https://flex.apache.org/asdoc/spark/components/TextArea.html" target="_blank">TextArea</a> control
to let the user increase the font size by one point, or use the Control+Alt+M
key combination to decrease the font size by one point:</p>
<pre class="codeblock">package myComponents
{
// createcomps_as/myComponents/TextAreaFontControl.as
import spark.components.TextArea;
import flash.events.KeyboardEvent;
import flash.events.Event;
public class TextAreaFontControl extends TextArea
{
// Constructor
public function TextAreaFontControl() {
super();
// Add event listeners.
addEventListener("keyDown", myKeyDown);
addEventListener("creationComplete", myCreationComplete);
}
// Define private var for current font size.
private var currentFontSize:Number;
// Define a public property for the minimum font size.
public var minFontSize:Number = 5;
// Define a public property for the maximum font size.
public var maxFontSize:Number = 15;
// Initialization event handler for getting default font size.
private function myCreationComplete(eventObj:Event):void {
// Get current font size
currentFontSize = getStyle('fontSize');
}
// keyDown event handler.
private function myKeyDown(eventObj:KeyboardEvent):void {
// Was Ctrl key pressed?
if (eventObj.ctrlKey)
{
switch (eventObj.keyCode) {
// Was Ctrl+Alt+I pressed?
case 73 :
if (currentFontSize &lt; maxFontSize) {
currentFontSize = currentFontSize + 1;
setStyle('fontSize', currentFontSize);
}
break;
// Was Ctrl+Alt+ pressed?
case 77 :
if (currentFontSize &gt; minFontSize) {
currentFontSize = currentFontSize - 1;
setStyle('fontSize', currentFontSize);
}
break;
default :
break;
}
}
}
}
}</pre>
<p>Notice that the call to the <samp class="codeph">getStyle()</samp> method
is in the event listener for the <samp class="codeph">creationComplete</samp> event.
You must wait until component creation is complete before calling <samp class="codeph">getStyle()</samp> to
ensure that Flex has set all inherited styles. However, you can
call <samp class="codeph">setStyle()</samp> in the component constructor to
set styles. </p>
<p>This example uses variables to define public properties to control
the maximum font size, <samp class="codeph">maxFontSize</samp>, and minimum
font size, <samp class="codeph">minFontSize</samp>, of the control. Users can
set these properties in MXML, as the following example shows:</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- createcomps_as/MainTextAreaFontControl.mxml --&gt;
&lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:MyComp="myComponents.*"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;MyComp:TextAreaFontControl id="myTAFS"
minFontSize="8"
maxFontSize="50"/&gt;
&lt;s:Button
label="Get Font Size"
click="myTA.text=String(myTAFS.getStyle('fontSize'));"/&gt;
&lt;s:TextArea id="myTA"/&gt;
&lt;/s:Application&gt;</pre>
</div>
</div>
<div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf684f9-7ff9_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf684f9-7ff9_verapache"><!-- --></a>
<h4 class="topictitle4">Defining public properties by using
getter and setter methods</h4>
<div>
<p>There
are no restrictions on using public variables to define public properties, However,
it's best to use getter and setter methods so that you can control
user interaction with your component, as described in <a href="flx_createcomps_basicas_cca.html#WS2db454920e96a9e51e63e3d11c0bf69084-79fb_verapache">Defining
properties as getters and setters</a>.</p>
<p>The following example code defines a component named TextAreaFontControlGetSet
that replaces the public property definition for the <samp class="codeph">maxFontSize</samp> property
shown in <a href="flx_ascomponents_as.html#WS2db454920e96a9e51e63e3d11c0bf69084-79fa_verapache">Defining
public properties as variables</a>: </p>
<pre class="codeblock">package myComponents
{
// createcomps_as/myComponents/TextAreaFontControlGetSet.as
import spark.components.TextArea;
import flash.events.KeyboardEvent;
import flash.events.Event;
public class TextAreaFontControlGetSet extends TextArea
{
public function TextAreaFontControlGetSet()
{
super();
addEventListener("keyDown", myKeyDown);
addEventListener("creationComplete", myCreationComplete);
}
private var currentFontSize:Number;
public var minFontSize:Number = 5;
// Define private variable for maxFontSize.
private var _maxFontSize:Number = 15;
// Define public getter method.
public function get maxFontSize():Number {
return _maxFontSize;
}
// Define public setter method.
public function set maxFontSize(value:Number):void {
if (value &lt;= 30) {
_maxFontSize = value;
} else _maxFontSize = 30;
}
private function myCreationComplete(eventObj:Event):void {
// Get current font size
currentFontSize = getStyle('fontSize');
}
// keyDown event handler.
private function myKeyDown(eventObj:KeyboardEvent):void {
// Was Ctrl key pressed?
if (eventObj.ctrlKey)
{
switch (eventObj.keyCode) {
// Was Ctrl+Alt+I pressed?
case 73 :
if (currentFontSize &lt; maxFontSize) {
currentFontSize = currentFontSize + 1;
setStyle('fontSize', currentFontSize);
}
break;
// Was Ctrl+Alt+M pressed?
case 77 :
if (currentFontSize &gt; minFontSize) {
currentFontSize = currentFontSize - 1;
setStyle('fontSize', currentFontSize);
}
break;
default :
break;
}
}
}
}
}</pre>
<p>In this example, the setter method checks that the specified
font size is less than the predefined limit of 30 pixels. If the
font size is greater than the limit, it sets it to the limit. </p>
</div>
</div>
<div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf69084-7a1c_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7a1c_verapache"><!-- --></a>
<h4 class="topictitle4">Creating a default property</h4>
<div>
<p>You can
define a default property for your ActionScript components by using
the <samp class="codeph">[DefaultProperty]</samp> metadata tag. You can then
use the default property in MXML as the child tag of the component
tag without specifying the property name. For more information on
using the default property, including an example, see <a href="flx_ascomponents_as.html#WS2db454920e96a9e51e63e3d11c0bf69084-79fa_verapache">Defining
public properties as variables</a>.</p>
<p>You can use the <samp class="codeph">[DefaultProperty]</samp> metadata tag
in your ActionScript component to define a single default property,
as the following example shows: </p>
<pre class="codeblock">package myComponents
{
// createcomps_as/myComponents/TextAreaDefaultProp.as
import spark.components.TextArea;
// Define the default property.
[DefaultProperty("defaultText")]
public class TextAreaDefaultProp extends TextArea {
public function TextAreaDefaultProp()
{
super();
}
// Define a setter method to set the text property
// to the value of the default property.
public function set defaultText(value:String):void {
if (value!=null)
text=value;
}
public function get defaultText():String {
return text;
}
}
}</pre>
<p>In this example, you add a new property to the TextArea control,
called <samp class="codeph">defaultText</samp>, and specify it as the default
property of the control. The setter method for <samp class="codeph">defaultText</samp> just
sets the value of the <samp class="codeph">text</samp> property of the control.
You can then use the default property in MXML, as the following
example shows:</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- createcomps_as/MainTextAreaDefaultProp.mxml --&gt;
&lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:MyComp="myComponents.*"&gt;
&lt;MyComp:TextAreaDefaultProp&gt;Hello&lt;/MyComp:TextAreaDefaultProp&gt;
&lt;/s:Application&gt;</pre>
<p>The one place where Flex prohibits the use of a default property
is when you use the ActionScript class as the root tag of an MXML
component. In this situation, you must use child tags to define
the property, as the following example shows:</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- as/myComponents/TextAreaDefaultPropMXML.mxml --&gt;
&lt;MyComp:TextAreaDefaultProp xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:MyComp="myComponents.*"&gt;
&lt;MyComp:defaultText&gt;Hello&lt;/MyComp:defaultText&gt;
&lt;/MyComp:TextAreaDefaultProp&gt;</pre>
</div>
</div>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf69084-79f4_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-79f4_verapache"><!-- --></a>
<h3 class="topictitle3">Using data binding with custom
properties</h3>
<div>
<p>Data binding defines a
syntax for automatically copying the value of a property of one
object, the <em>source</em> property, to a property of another object,
the <em>destination</em> property, at run time. Data binding is usually
triggered when the value of the source property changes.</p>
<p>The following example shows a Text control that gets its data
from a <a href="https://flex.apache.org/asdoc/mx/controls/HSlider.html" target="_blank">HSlider</a> control's <samp class="codeph">value</samp> property.
The property name inside the curly braces ({ }) specifies a binding
expression that copies the value of the source property, <samp class="codeph">mySlider.value</samp>,
into the destination property, the <a href="https://flex.apache.org/asdoc/mx/controls/Text.html" target="_blank">Text</a> control's <samp class="codeph">text</samp> property.</p>
<pre class="codeblock"> &lt;mx:HSlider id="mySlider"/&gt;
 &lt;mx:Text text="{mySlider.value}"/&gt;</pre>
<p>The current value of the HSlider control appears in the Text
control when you stop moving the slider. To get continuous updates
as you move the slider, set the <samp class="codeph">HSlider.liveDragging</samp> property
to <samp class="codeph">true</samp>.</p>
</div>
<div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf684f9-7ff5_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf684f9-7ff5_verapache"><!-- --></a>
<h4 class="topictitle4">Using properties as the destination
of a binding expression</h4>
<div>
<p>Properties in your custom components can take advantage
of data binding. Any property defined as a variable or defined by
using a setter and getter method can automatically be used as the
destination of a binding expression. </p>
<p>For example, in the section <a href="flx_ascomponents_as.html#WS2db454920e96a9e51e63e3d11c0bf69084-79f7_verapache">Defining
public properties in ActionScript</a>, you created a class with
the public property <samp class="codeph">maxFontSize</samp>. You can use the <samp class="codeph">maxFontSize</samp> property
as the destination of a binding expression, as the following example
shows:</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- createcomps_as/MainTextAreaFontControlBindingDest.mxml --&gt;
&lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:MyComp="myComponents.*" &gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;MyComp:TextAreaFontControl id="myTA"
maxFontSize="{Number(myTI.text)}"/&gt;
&lt;s:Label text="Enter max font size."/&gt;
&lt;s:TextInput id="myTI" text="25"/&gt;
&lt;/s:Application&gt;</pre>
<p>In this example, any value that the user enters into the <a href="https://flex.apache.org/asdoc/mx/controls/TextInput.html" target="_blank">TextInput</a> control
is automatically copied to the <samp class="codeph">maxFontSize</samp> property.</p>
</div>
</div>
<div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf684f9-7ff4_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf684f9-7ff4_verapache"><!-- --></a>
<h4 class="topictitle4">Using properties as the source
of a data binding expression</h4>
<div>
<p>When a property is the source of a data binding expression,
Flex automatically copies the value of the source property to any
destination property when the source property changes. However,
in order to signal to Flex to perform the copy, you must register
the property with Flex and the source property must dispatch an
event. </p>
<p>To register a property as a source for data bindings, you use
the <samp class="codeph">[Bindable]</samp> metadata tag. You can use this tag
in three places:</p>
<ul>
<li>
<p>Before a class definition, in order to make all public
properties defined as variables usable as the source of a binding
expression. You can also do this by using setter and getter methods,
in which case you use the <samp class="codeph">[Bindable]</samp> tag before
the getter method.
</p>
</li>
<li>
<p>Before a property that a variable defines, in order to make
that specific property support binding</p>
</li>
<li>
<p>Before a getter method for a property implemented by using
setter and getter methods</p>
</li>
</ul>
<div class="note"><span class="notetitle">Note:</span> When you use the <samp class="codeph">[Bindable]</samp> metadata
tag before a public class definition, it applies only to public
properties; it does not apply to private or protected properties,
or to properties defined in any other namespace. You must insert
the <samp class="codeph">[Bindable]</samp> metadata tag before a nonpublic
property to make it usable as the source for a data binding expression.</div>
<p>For more information on the <samp class="codeph">[Bindable]</samp> metadata
tag, see <a href="flx_metadata_me.html#WS2db454920e96a9e51e63e3d11c0bf69084-7fe9_verapache">Metadata
tags in custom components</a>. </p>
<p>The following example modifies the component in the section <a href="flx_ascomponents_as.html#WS2db454920e96a9e51e63e3d11c0bf69084-79f7_verapache">Defining
public properties in ActionScript</a> to make the <samp class="codeph">maxFontSize</samp> and <samp class="codeph">minFontSize</samp> properties
usable as the source for data bindings:</p>
<pre class="codeblock"> // Define public properties for tracking font size.
[Bindable]
public var maxFontSize:Number = 15;
[Bindable]
public var minFontSize:Number = 5;</pre>
<p>If you omit the event name from the <samp class="codeph">[Bindable]</samp> metadata
tag, Flex automatically dispatches an event named <samp class="codeph">propertyChange</samp> when
the property changes to trigger the data binding. If the property
value remains the same on a write operation, Flex does not dispatch
the event or update the property.</p>
<p>When you define a property by using getter and setter methods
so that the property is usable as the source for data binding, you
include the <samp class="codeph">[Bindable]</samp> metadata tag before the
getter method, and optionally include the name of the event dispatched
by the setter method when the property changes, as the following
example shows:</p>
<pre class="codeblock">package myComponents
{
// createcomps_as/myComponents/TextAreaFontControlBinding.as
import spark.components.TextArea;
import flash.events.KeyboardEvent;
import flash.events.Event;
public class TextAreaFontControlBinding extends TextArea
{
public function TextAreaFontControlBinding()
{
super();
addEventListener("keyDown", myKeyDown);
addEventListener("creationComplete", myCreationComplete);
}
private var currentFontSize:Number;
public var minFontSize:Number = 5;
// Define private variable for maxFontSize.
public var _maxFontSize:Number = 15;
// Define public getter method, mark the property
// as usable for the source of data binding,
// and specify the name of the binding event.
[Bindable("maxFontSizeChanged")]
public function get maxFontSize():Number {
return _maxFontSize;
}
// Define public setter method.
public function set maxFontSize(value:Number):void {
if (value &lt;= 30) {
_maxFontSize = value;
} else _maxFontSize = 30;
// Dispatch the event to trigger data binding.
dispatchEvent(new Event("maxFontSizeChanged"));
}
private function myCreationComplete(eventObj:Event):void {
// Get current font size
currentFontSize = getStyle('fontSize');
}
// keyDown event handler.
private function myKeyDown(eventObj:KeyboardEvent):void {
// Was Ctrl key pressed?
if (eventObj.ctrlKey)
{
switch (eventObj.keyCode) {
// Was Ctrl+Alt+I pressed?
case 73 :
if (currentFontSize &lt; maxFontSize) {
currentFontSize = currentFontSize + 1;
setStyle('fontSize', currentFontSize);
}
break;
// Was Ctrl+Alt+M pressed?
case 77 :
if (currentFontSize &gt; minFontSize) {
currentFontSize = currentFontSize - 1;
setStyle('fontSize', currentFontSize);
}
break;
default :
break;
}
}
}
}
}</pre>
<p>In this example, the setter updates the value of the property,
and then dispatches an event to trigger an update of any data binding
destination. The name of the event is not restricted. You can use
this component in an application, as the following example shows:</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- createcomps_as/MainTextAreaFontControlBindingSource.mxml --&gt;
&lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:MyComp="myComponents.*"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;MyComp:TextAreaFontControlBinding id="myTA"
maxFontSize="{Number(myTI.text)}"/&gt;
&lt;s:Label text="Enter max font size."/&gt;
&lt;s:TextInput id="myTI" text="15"/&gt;
&lt;s:Label text="Current max font size."/&gt;
&lt;s:TextArea text="{String(myTA.maxFontSize)}"/&gt;
&lt;/s:Application&gt;</pre>
</div>
</div>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf684f9-7ff3_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf684f9-7ff3_verapache"><!-- --></a>
<h3 class="topictitle3">Defining a method override</h3>
<div>
<p>You can
override a method of a base class in your ActionScript component.
To override the method, you add a method with the same signature
to your class, and prefix it with the <samp class="codeph">override</samp> keyword.
The following example overrides the <samp class="codeph">HGroup.addElement()</samp> method
to open an Alert box when a new item is added to it:</p>
<pre class="codeblock">package myComponents
{
// createcomps_as/myComponents/HGroupWithAlert.as
import mx.controls.Alert;
import spark.components.HGroup;
import mx.core.IVisualElement;
public class HGroupWithAlert extends HGroup
{
// Define the constructor.
public function HGroupWithAlert() {
super();
}
// Define the override.
override public function addElement(child:IVisualElement):IVisualElement {
// Call super.addChild().
super.addElement(child);
// Open the Alert box.
Alert.show("Item added successfully");
return child;
}
}
}</pre>
<p>Notice that the method implementation calls the <samp class="codeph">super.addElement()</samp> method.
The call to <samp class="codeph">super.addElement()</samp> causes Flex to invoke
the superclass's <samp class="codeph">addElement()</samp> method to perform
the operation. Your new functionality to open the Alert box occurs
after the <samp class="codeph">super.addElement()</samp> method. </p>
<p>You might have to use <samp class="codeph">super()</samp> to call the base
class method before your code, after your code, or not at all. The
location is determined by your requirements. To add functionality
to the method, you call <samp class="codeph">super()</samp> before your code.
To replace the base class method, you do not call <samp class="codeph">super()</samp> at
all. </p>
<p>The following example uses this component in an application:</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- createcomps_as/MainHBoxWithAlert.mxml --&gt;
&lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:MyComp="myComponents.*"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;fx:Script&gt;
&lt;![CDATA[
import spark.components.Button;
public function addButton():void {
var myButton:Button = new Button();
myButton.label = "New Button";
myHGroup.addElement(myButton);
}
]]&gt;
&lt;/fx:Script&gt;
&lt;MyComp:HGroupWithAlert id="myHGroup"/&gt;
&lt;s:Button label="Add Button"
click="addButton();"/&gt;
&lt;/s:Application&gt;</pre>
</div>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf684f9-7ff2_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf684f9-7ff2_verapache"><!-- --></a>
<h3 class="topictitle3">Initializing inherited properties
with tag attributes in MXML</h3>
<div>
<p>In an MXML component, you can initialize the value of any
inherited public, writable property by defining a child tag of the
MXML component with an <samp class="codeph">id</samp> property that matches
the name of the inherited property. For example, you define a custom
Panel component based on the Flex Panel container, named MyPanel.as,
as the following example shows:</p>
<pre class="codeblock">package myComponents
{
// createcomps_as/myComponents/MyPanel.as
import spark.components.Panel;
import spark.components.TextInput;
public class MyPanel extends Panel {
// Define public variables for two child components.
public var myInput:TextInput;
public var myOutput:TextInput;
public function MyPanel() {
super();
}
// Copy the text from one child component to another.
public function xfer():void {
myOutput.text = myInput.text;
}
}
}</pre>
<p>In this example, the MyPanel component defines two variables
corresponding to TextInput controls. You then create a custom MXML
component, named MyPanelComponent.mxml, based on MyPanel.as, as
the following example shows:</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- createcomps_as/myComponents/MyPanelComponent.mxml --&gt;
&lt;MyComps:MyPanel xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:MyComps="myComponents.*"&gt;
&lt;MyComps:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/MyComps:layout&gt;
&lt;s:TextInput id="myInput"/&gt;
&lt;s:TextInput id="myOutput"/&gt;
&lt;/MyComps:MyPanel&gt;</pre>
<p>Notice that the value of the <samp class="codeph">id</samp> property for
the two TextInput controls matches the variable names of the properties
defined in the MyPanel component. Therefore, Flex initializes the
inherited properties with the TextInput controls that you defined
in MXML. This technique for initializing properties can be referred
to as <em>code behind</em>.</p>
<p>You can use your custom component in the following Flex application:</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- createcomps_as/MainCodeBehindExample.mxml --&gt;
&lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:MyComps="myComponents.*"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;MyComps:MyPanelComponent id="myP"/&gt;
&lt;s:Button label="Copy" click="myP.xfer();"/&gt;
&lt;/s:Application&gt;</pre>
<p>If the value of the <samp class="codeph">id</samp> property of a TextInput
control does not match an inherited property name, Flex creates
a property of the component, where the <samp class="codeph">id</samp> property defines
the name of the new property. </p>
<p>To support initialization from MXML, an inherited property must
have the following characteristics:</p>
<ul>
<li>
<p>The inherited property must be public.</p>
<p>If you try
to initialize a nonpublic inherited property, the Flex compiler
issues an error. </p>
</li>
<li>
<p>The inherited property must be writable.</p>
<p>If you try
to initialize a constant, or a property defined by a getter method without
a corresponding setter method, the Flex compiler issues an error. </p>
</li>
<li>
<p>The data type of the value that you specify to the inherited
property must by compatible with the data type of the property.</p>
<p>If
you try to initialize a property with a value of an incompatible
data type, the Flex compiler issues an error.</p>
</li>
</ul>
</div>
</div>
</div>
<div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf684f9-7ff1_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf684f9-7ff1_verapache"><!-- --></a>
<h2 class="topictitle2">Defining events in ActionScript components</h2>
<div>
<p>Flex
components dispatch their own events and listen to other events.
An object that wants to know about another object's events registers
as a listener with that object. When an event occurs, the object
dispatches the event to all registered listeners.</p>
<p>The core class of the Flex architecture, <a href="https://flex.apache.org/asdoc/mx/core/UIComponent.html" target="_blank">mx.core.UIComponent</a>,
defines core events, such as <a href="https://flex.apache.org/asdoc/mx/core/UIComponent.html#event:updateComplete" target="_blank">updateComplete</a>, <samp class="codeph">resize</samp>, <samp class="codeph">move</samp>, <samp class="codeph">creationComplete</samp>,
and others that are fundamental to all components. Subclasses of
these classes inherit and dispatch these events.</p>
<div class="p">Custom components that extend existing Flex classes inherit all
the events of the superclass. If you extend the <a href="https://flex.apache.org/asdoc/spark/components/Button.html" target="_blank">Button</a> class
to create the MyButton class, you can use the events inherited from
the Button class, such as <samp class="codeph">mouseOver</samp> or <samp class="codeph">creationComplete</samp>,
as the following example shows: <pre class="codeblock">&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- createcomps_as/MainMyButtonAS.mxml --&gt;
&lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:MyComp="myComponents.*"&gt;
&lt;fx:Script&gt;
&lt;![CDATA[
import flash.events.Event;
private function handleClick(eventObj:Event):void {
// Define event listener.
}
private function handleCreationComplete(eventObj:Event):void {
// Define event listener.
}
]]&gt;
&lt;/fx:Script&gt;
&lt;MyComp:MyButton
click="handleClick(event);"
creationComplete="handleCreationComplete(event);"/&gt;
&lt;/s:Application&gt;</pre>
</div>
<p>Your custom components can also define new events based on the
requirements of your components. For example, the section <a href="flx_ascomponents_as.html#WS2db454920e96a9e51e63e3d11c0bf69084-79f4_verapache">Using
data binding with custom properties</a> showed how to define
a custom event so that properties of your component can work with
the Flex data binding mechanism. </p>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf684f9-7ff0_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf684f9-7ff0_verapache"><!-- --></a>
<h3 class="topictitle3">Handling predefined events within
the custom component</h3>
<div>
<p>The previous example showed a custom component, MyButton,
dispatching two events. In that example, you defined the event listeners
in the main application file. </p>
<p>Your custom component can also define event listeners within
the component itself to handle the events internally. For example, <a href="flx_ascomponents_as.html#WS2db454920e96a9e51e63e3d11c0bf69084-79fa_verapache">Defining
public properties as variables</a> defined event listeners for
the <samp class="codeph">keyDown</samp> and <samp class="codeph">creationComplete</samp> events
within the body of the component. This allows the component to handle those
events internally. </p>
<div class="note"><span class="notetitle">Note:</span> Even though you define event listeners for the
events in the component itself, your application can also register
listeners for those events. The event listeners defined within the
component execute before any listeners defined in the application.</div>
<p>The example used the <samp class="codeph">creationComplete</samp> event
to access the default <samp class="codeph">fontSize</samp> property of the
component. You could not access this property in the constructor
itself because Flex does not define it until after the component
is created. For more information on the initialization order of
a component, see <a href="flx_ascomponents_advanced_asa.html#WS2db454920e96a9e51e63e3d11c0bf69084-7cdd_verapache">Create
advanced MX visual components in ActionScript</a>. </p>
</div>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf684f9-7fef_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf684f9-7fef_verapache"><!-- --></a>
<h3 class="topictitle3">Dispatching custom events</h3>
<div>
<p>Your
ActionScript component can define custom events and use the predefined events.
You use custom events to support data binding, to respond to user
interactions, or to trigger actions by your component. For an example
that uses events to support data binding, see <a href="flx_ascomponents_as.html#WS2db454920e96a9e51e63e3d11c0bf69084-79f4_verapache">Using
data binding with custom properties</a>. </p>
<p>For each custom event dispatched by your component, you must
do the following:</p>
<ol>
<li>
<p>Create an <a href="https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/events/Event.html" target="_blank">Event</a> object
describing the event.</p>
</li>
<li>
<p>(Optional) Use the <samp class="codeph">[Event]</samp> metadata tag
to make the event public so that other components can listen for
it. </p>
</li>
<li>
<p>Dispatch the event by using the <a href="https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/events/EventDispatcher.html#disaptchEvent()" target="_blank">dispatchEvent()</a> method.</p>
</li>
</ol>
<p>To add information to the event object, you define a subclass
of the flash.events.Event class to represent the event object. For
more information on creating custom event classes, see <a href="flx_createevents_cre.html#WS2db454920e96a9e51e63e3d11c0bf69084-7a22_verapache">Custom
events</a>.</p>
<p>You might define some custom events that are used internally
by your component, and are not intended to be recognized by the
other components. For example, the following component defines a
custom event, dispatches it, and handles it all within the component:</p>
<pre class="codeblock">package myComponents
{
// createcomps_as/myComponents/ModalTextEvent.as
import spark.components.TextArea;
import flash.events.Event;
[Event(name="enableChanged", type="flash.events.Event")]
public class ModalTextEvent extends TextArea {
public function ModalTextEvent() {
super();
// Register event listener.
addEventListener("enableChanged", enableChangedListener);
}
public function enableInput(value:Boolean):void {
// Method body.
// Dispatch event.
dispatchEvent(new Event("enableChanged"));
}
private function enableChangedListener(eventObj:Event):void {
// Handle event.
}
}
}</pre>
<p>In
this example, the public method <samp class="codeph">enableInput()</samp> lets
the user enable or disable input to the control. When you call the <samp class="codeph">enableInput()</samp> method,
the component uses the <samp class="codeph">dispatchEvent()</samp> method to
dispatch the <samp class="codeph">enableChanged</samp> event. The <samp class="codeph">dispatchEvent()</samp> method
has the following signature:</p>
<pre class="codeblock"> dispatchEvent(eventObj)</pre>
<p>The <em>eventObj</em> argument is the event object that describes
the event. </p>
<p>If you want an MXML component to be able to register a listener
for the event, you must make the event known to the Flex compiler
by using the <samp class="codeph">[Event]</samp> metadata tag. For each public
event that your custom component dispatches, you add an <samp class="codeph">[Event]</samp> metadata
keyword before the class definition that defines that event, as
the following example shows:</p>
<pre class="codeblock"> [Event(name="enableChanged", type="flash.events.Event")]
 public class ModalTextEvent extends TextArea {
  ...
 }</pre>
<p>If you do not identify an event in the class file with the <samp class="codeph">[Event]</samp> metadata
tag, the compiler generates an error when an MXML component attempts
to register a listener for that event. Any component can register
an event listener for the event in ActionScript using the <samp class="codeph">addEventListener()</samp> method,
even if you omit the <samp class="codeph">[Event]</samp> metadata tag. </p>
<p>You can then handle the event in MXML, as the following example
shows:</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- as/ASMainModalTextEvent.mxml --&gt;
&lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:MyComps="myComponents.*"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;fx:Script&gt;
&lt;![CDATA[
import flash.events.Event;
private function handleEnableChanged(event:Event):void {
myTA.text="Got Event";
}
]]&gt;
&lt;/fx:Script&gt;
&lt;MyComps:ModalTextEvent id="myMT"
enableChanged="handleEnableChanged(event);"/&gt;
&lt;s:Button click="myMT.enableInput(true);"/&gt;
&lt;s:TextArea id="myTA"/&gt;
&lt;/s:Application&gt;</pre>
</div>
</div>
</div>
<div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf684f9-7fee_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf684f9-7fee_verapache"><!-- --></a>
<h2 class="topictitle2">Applying styles to custom components</h2>
<div>
<p>Style properties define the look of a component, from the
size of the fonts used to the color of the background. Your custom
ActionScript components inherit all of the styles of the base class,
so you can set them in the same way as for that base class. </p>
<p>To change
style properties in custom components, use the <a href="https://flex.apache.org/asdoc/mx/core/UIComponent.html#setStyle()" target="_blank">setStyle()</a> method
in the component's constructor. This applies the same style to all
instances of the component, but users of the component can override
the settings of the <samp class="codeph">setStyle()</samp> method in MXML tags.
Any style properties that are not set in the component's class file
are inherited from the component's superclass.</p>
<p>The following ActionScript class file sets the <samp class="codeph">color</samp> and <samp class="codeph">fontWeight</samp> styles
of the BlueButton control:</p>
<pre class="codeblock">package myComponents
{
// createcomps_as/myComponents/BlueButton.as
import spark.components.Button;
public class BlueButton extends Button
{
public function BlueButton() {
super();
// Set the label text to blue.
setStyle("color", 0x0000FF);
// Set the borderColor to blue.
setStyle("fontWeight", "bold");
}
}
}</pre>
<p>The following MXML file uses the BlueButton control with the
default <samp class="codeph">color</samp> and <samp class="codeph">fontWeight</samp> styles
set in your component's class file:</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- createcomps_as/ASMainBlueButton.mxml --&gt;
&lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:MyComps="myComponents.*"&gt;
&lt;MyComps:BlueButton label="Submit"/&gt;
&lt;/s:Application&gt;</pre>
<p>Setting the styles in a constructor does not prevent users of
the component from changing the style. For example, the user could
still set their own value for the <samp class="codeph">color</samp> style,
as the following example shows:</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- as/MainBlueButtonRed.mxml --&gt;
&lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:MyComps="myComponents.*"&gt;
&lt;MyComps:BlueButton label="Submit" color="0xFF0000"/&gt;
&lt;/s:Application&gt;</pre>
<p>In addition to setting the <samp class="codeph">color</samp> property, you
can set the font face, font size, and other style properties. For
more information on the available style properties, see the parent
control's class information. </p>
<p>You can also define new style properties for your components.
For more information, see <a href="flx_skinstyle_ss.html#WS2db454920e96a9e51e63e3d11c0bf69084-7a20_verapache">Custom
style properties</a>. </p>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf684f9-7fed_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf684f9-7fed_verapache"><!-- --></a>
<h3 class="topictitle3">Applying styles from a defaults.css
file</h3>
<div>
<p>If you package your component in a SWC file, you can define
a global style sheet, named defaults.css, in the SWC file. The defaults.css
file defines the default style settings for all of the components
defined in the SWC file.</p>
<p>For more information, see <a href="flx_mxmlcomponents_mxc.html#WS2db454920e96a9e51e63e3d11c0bf69084-7a00_verapache">Applying
styles from a defaults.css file</a>.</p>
</div>
</div>
<div>
<p><strong>Navigation</strong></p>
<p><a href="index.html">Using Flex</a> &raquo; <a href="flx_p8a_custom_components.html">Custom components</a></p>
</div>
<p>Adobe and Adobe Flash Platform are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries and are used by permission from Adobe. No other license to the Adobe trademarks are granted.</p>
</div>
</body>
</html>