<?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 http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="DC.Type" content="topic"/>
<meta name="DC.Title" content="Custom Flex components"/>
<meta name="DC.Format" content="XHTML"/>
<meta name="DC.Identifier" content="WS2db454920e96a9e51e63e3d11c0bf68268-8000_verapache"/>
<link rel="stylesheet" type="text/css" href="commonltr.css"/>
<title>Custom Flex components</title>
</head>
<body id="WS2db454920e96a9e51e63e3d11c0bf68268-8000_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf68268-8000_verapache"><!-- --></a>


   <h1 class="topictitle1">Custom Flex components</h1>

   <div>
      <p> Flex supports a component-based
development model. You use the predefined components included with
Flex to build your applications, and create components for your
specific application requirements. You can create custom components
by using MXML or ActionScript.</p>

   </div>

   <div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf68268-7fff_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf68268-7fff_verapache"><!-- --></a>
      <h2 class="topictitle2">About custom components</h2>

      
      <div>
         <p>Defining your own custom components has several benefits.
One advantage is that components let you divide your applications
into modules that you can develop and maintain separately. By implementing
commonly used logic within custom components, you can also build
a suite of reusable components that you can share among multiple
Flex applications. </p>

         <p>Also, you can extend the Flex class hierarchy to base your custom
components on the set of predefined Flex components. You can create
custom versions of Flex visual controls, as well as custom versions
of nonvisual components, such as validators, formatters, and effects. </p>

         <p>You can build an entire Flex application in a single MXML file
that contains both your MXML code and any supporting ActionScript
code. However, as your application gets larger, your single file
also grows in size and complexity. This type of application would
soon become difficult to understand and debug, and very difficult
for multiple developers to work on simultaneously. By breaking it
up into components, you can simplify the architecture and divide
the application among multiple developers.</p>

      </div>

      <div class="nested2" id="WS4b4ddee4904fe779-7c8da0131219ccf556a-8000_verapache"><a name="WS4b4ddee4904fe779-7c8da0131219ccf556a-8000_verapache"><!-- --></a>
         <h3 class="topictitle3">Using modules in application development</h3>

         
         <div>
            <p>A common coding practice is to divide an application into
functional units, or modules, where each module performs a discrete
task. Dividing your application into modules provides you with many
benefits, including the following:</p>

            <dl>
               
                  <dt class="dlterm">Ease of development</dt>

                  <dd>
                     <p>Different developers or development groups can develop and
debug modules independently of each other. </p>

                  </dd>

               
                  <dt class="dlterm">Reusability</dt>

                  <dd>
                     <p>You can reuse modules in different applications so that you
do not have to duplicate your work.</p>

                  </dd>

               
                  <dt class="dlterm">Maintainability</dt>

                  <dd>
                     <p>By developing your application in discrete modules, you can isolate
and debug errors faster than you could if you developed your application in
a single file. </p>

                     <p>In Flex, a module corresponds to a custom
component, implemented either in MXML or in ActionScript. The following
image shows an example of a Flex application divided into components:</p>

                     <div class="figborder">
                        <img src="images/inb_as.png" alt="Flex application divided into components"/>
                     </div>

                     <p>This example
shows the following relationships among the components:</p>

                     <ul>
                        <li>
                           <p>You define a main MXML file that contains the <samp class="codeph">&lt;s:Application&gt;</samp> tag. </p>

                        </li>

                        <li>
                           <p>In your main MXML file, you define an ActionScript block
that uses the <samp class="codeph">&lt;fx:Script&gt;</samp> tag. Inside the
ActionScript block, you write ActionScript code, or include external
logic defined by an ActionScript file. Typically, you use this area
to write small amounts of ActionScript code. If you must write large
amounts of ActionScript code, you should include an external file.</p>

                        </li>

                        <li>
                           <p>The main MXML file uses MXML and ActionScript to reference
components supplied with Flex, and to reference your custom components. </p>

                        </li>

                        <li>
                           <p>Custom components can reference other custom components. </p>

                        </li>

                     </ul>

                  </dd>

               
            </dl>

         </div>

      </div>

      <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf68268-7ffd_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf68268-7ffd_verapache"><!-- --></a>
         <h3 class="topictitle3">The Flex class hierarchy</h3>

         
         <div>
            <p>
               
               
               Flex is implemented as an ActionScript
class hierarchy. That class hierarchy contains component classes,
manager classes, data-service classes, and classes for all other
Flex features. For a complete description of the class hierarchy,
see the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/" target="_blank">ActionScript 3.0 Reference for the Adobe<sup>®</sup>
Flash<sup>®</sup> Platform</a>. </p>

            <p>All visual components are derived from the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/core/UIComponent.html" target="_blank">UIComponent </a>ActionScript
class. Flex nonvisual components are also implemented as a class
hierarchy in ActionScript. The most commonly used nonvisual classes
are the Validator, Formatter, and Effect base classes.</p>

            <p>
               You
create custom components by extending the Flex class hierarchy using
the MXML and ActionScript languages. Components inherit the properties, methods,
events, styles, and effects of their superclasses. </p>

         </div>

      </div>

      <div class="nested2" id="WS4b4ddee4904fe779-5425298e1219cd43fc7-8000_verapache"><a name="WS4b4ddee4904fe779-5425298e1219cd43fc7-8000_verapache"><!-- --></a>
         <h3 class="topictitle3">Spark and MX components</h3>

         
         <div>
            <p>Flex defines two sets of components: Spark and MX. The
Spark components are new for Flex 4 and are defined in the spark.*
packages. The MX components shipped in previous releases of Flex
and are defined in the mx.* packages. </p>

            <p>Spark and MX define some of the same components. For example,
Spark defines a button control in the spark.components package,
and MX defines a button control in the mx.controls package. When
a component is available in both Spark and MX, it’s best to use
the Spark component.</p>

            <p>Spark and MX also define components that are unique. For example,
Spark defines components to perform three dimensional effects. MX
defines charting controls not included in Spark. Your applications
often contains a mixture of Spark and MX components.</p>

         </div>

      </div>

      <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf68268-7ff9_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf68268-7ff9_verapache"><!-- --></a>
         <h3 class="topictitle3">Customizing existing components</h3>

         
         <div>
            <p>One reason for you to create a component is to customize
an existing component for your application requirements. This customization
could be as simple as setting the <samp class="codeph">label</samp> property
of a <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/Button.html" target="_blank">Button</a> control
to <em>Submit</em> to create a custom button for all of your forms.</p>

            <p>You might also want to modify the behavior of a Flex component.
For example, a <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/containers/VBox.html" target="_blank">VBox</a> container
lays out its children from the top of the container to the bottom in
the order in which you define the children within the container.
Instead, you might want to customize the VBox container to lay out
its children from bottom to top.</p>

            <p>Another reason to customize a Flex component is to add logic
or behavior to it. For example, you might want to modify the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/TextInput.html" target="_blank">TextInput</a> control
so that it supports a key combination to delete all the text entered
into the control. Or, you might want to modify a component so that
it dispatches a new event type when a user carries out an action. </p>

            <p>
               
               
               To create your own components,
you create subclasses from the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/core/UIComponent.html" target="_blank">UIComponent</a> class,
or any other class in the Flex component hierarchy. For example,
if you want to create a component that behaves almost the same as
a Button component does, you can extend the Button class instead
of recreating all the functionality of the Button class from the
base classes. </p>

            <p>Depending on the modifications that you want to make, you can
create a subclass of a Flex component in MXML or ActionScript. </p>

         </div>

         <div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf68268-7ffe_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf68268-7ffe_verapache"><!-- --></a>
            <h4 class="topictitle4">The relationship between MXML components
and ActionScript components</h4>

            
            <div>
               <p>To create a custom component in ActionScript, you create
a subclass from a class in the Flex class hierarchy. The name of
your class (for example, MyASButton), must correspond to the name
of the ActionScript file; for example, MyASButton.as. The subclass
inherits all of the properties and methods of the superclass. In
this example, you use the <samp class="codeph">&lt;MyASButton&gt;</samp> tag
to reference it in MXML.</p>

               <p>When you create a custom component in MXML, the Flex compiler
automatically creates an ActionScript class. The name of the MXML
file (for example, MyMXMLButton.mxml) corresponds to the ActionScript
class name. In this example, the ActionScript class is named MyMXMLButton,
and you use the <samp class="codeph">&lt;MyMXMLButton&gt;</samp> tag to reference
it in MXML.</p>

               <p>The following example shows two components based on the Flex <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Button.html" target="_blank">Button</a> component,
one defined in ActionScript and the other in MXML:</p>

               <div class="figborder">
                  <img src="images/cci_ButtnComp_as_mxml.png" alt="Two components based on the Flex Button component, one defined in ActionScript and the other in MXML"/>
               </div>

               <p>Both implementations create a component as a subclass of the
Button class and, therefore, inherit all of the public and protected
properties, methods, and other elements of the Button class. Within
each implementation, you can override inherited items, define new
items, and add your custom logic. </p>

               <div class="note"><span class="notetitle">Note:</span> You cannot override an inherited property defined
by a variable, but you can override a property defined by setter
and getter methods. You can reset the value of an inherited property
defined by a variable. You typically reset it in the constructor
of the subclass for an ActionScript component, or in an event handler
for an MXML component because MXML components cannot define a constructor. </div>

               <p>However, when you use MXML, the Flex compiler performs most of
the overhead required to create a subclass of a component for you.
This makes it much easier to create components in MXML than in ActionScript. </p>

            </div>

         </div>

         <div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf68268-7ffc_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf68268-7ffc_verapache"><!-- --></a>
            <h4 class="topictitle4">Deciding to create components in
MXML or ActionScript</h4>

            
            <div>
               <p>One of the first decisions that you must make when creating
custom components is deciding whether to write them in MXML or in
ActionScript. Ultimately, it is the requirements of your application
that determine how you develop your custom component.</p>

               <p>Some basic guidelines include the following: </p>

               <ul>
                  <li>
                     <p>MXML components and ActionScript components both define
new ActionScript classes.</p>

                  </li>

                  <li>
                     <p>Almost anything that you can do in a custom ActionScript
custom component, you can also do in a custom MXML component. However,
for simple components, such as components that modify the behavior
of an existing component or add a basic feature to an existing component,
it is simpler and faster to create them in MXML.</p>

                  </li>

                  <li>
                     <p>When your new component is a composite component that contains
other components, and you can express the positions and sizes of
those other components using one of the Flex containers, you should
use MXML to define your component. </p>

                  </li>

                  <li>
                     <p>To modify the behavior of the component, such as the way
a container lays out its children, use ActionScript.</p>

                  </li>

                  <li>
                     <p>To create a visual component by creating a subclass from
UIComponent, use ActionScript.</p>

                  </li>

                  <li>
                     <p>To create a nonvisual component, such as a formatter, validator,
or effect, use ActionScript. </p>

                  </li>

                  <li>
                     <p>To add logging support to your control, use ActionScript.
For more information, see <a href="flx_logging_lg.html#WS2db454920e96a9e51e63e3d11c0bf69084-7ffc_verapache">Logging</a>.</p>

                  </li>

               </ul>

               <p>For more information on custom MXML components, see <a href="flx_mxmlcomponents_mxc.html#WS2db454920e96a9e51e63e3d11c0bf69084-7feb_verapache">Simple
MXML components</a>. For more information on ActionScript components,
see <a href="flx_ascomponents_as.html#WS2db454920e96a9e51e63e3d11c0bf69084-7fea_verapache">Create
simple visual components in ActionScript </a>.</p>

            </div>

         </div>

      </div>

      <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf68268-7ff8_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf68268-7ff8_verapache"><!-- --></a>
         <h3 class="topictitle3">Creating new components</h3>

         
         <div>
            <p>Your application might require you to create new components,
rather than modifying existing ones. To create components, you typically
create them in ActionScript by creating a subclass from the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/core/UIComponent.html" target="_blank">UIComponent</a> class.
This class contains the generic functionality of all Flex components.
You then add the required functionality to your new component to
meet your application requirements. </p>

            <p>For more information, see <a href="flx_ascomponents_advanced_asa.html#WS2db454920e96a9e51e63e3d11c0bf69084-7cdd_verapache">Create
advanced MX visual components in ActionScript</a>.</p>

         </div>

      </div>

   </div>

   <div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf68268-7ffb_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf68268-7ffb_verapache"><!-- --></a>
      <h2 class="topictitle2">Creating custom components</h2>

      
      <div>
         <p>You create custom components as either MXML or ActionScript
files. </p>

      </div>

      <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf68268-7ff7_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf68268-7ff7_verapache"><!-- --></a>
         <h3 class="topictitle3">Creating MXML components</h3>

         
         <div>
            <p>Flex supplies the Spark <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/ComboBox.html" target="_blank">ComboBox</a> control
that you can use as part of a form that collects address information
from a customer. In the form, you can include a ComboBox control
to let the user select the state portion of the address from a list
of the 50 states in the U.S. In an application that has multiple
forms where a user can enter an address, it would be tedious to
create and initialize multiple ComboBox controls with the same information
about all 50 states.</p>

            <p>Instead, you create an MXML component that contains a ComboBox
control with all the 50 states defined within in it. Then, wherever
you need to add a state selector to your application, you use your
custom MXML component. The following example shows a possible definition
for a custom ComboBox control:</p>

            <pre class="noswf">&lt;?xml version="1.0"?&gt; 
&lt;!-- createcomps_intro\StateComboBox.mxml --&gt; 
&lt;!-- Specify the root tag and namespace. --&gt; 
&lt;s:ComboBox xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx"&gt; 
    &lt;s:dataProvider&gt;   
        &lt;s:ArrayList&gt; 
            &lt;fx:String&gt;AK&lt;/fx:String&gt; 
            &lt;fx:String&gt;AL&lt;/fx:String&gt; 
            &lt;!-- Add all other states. --&gt; 
        &lt;/s:ArrayList&gt; 
    &lt;/s:dataProvider&gt; 
&lt;/s:ComboBox&gt;</pre>

            <p>This example shows the following:</p>

            <ol>
               <li>
                  <p>The first line of the custom MXML component definition
specifies the declaration of the XML version.</p>

               </li>

               <li>
                  <p>The first MXML tag of the component, called its <em>root</em> tag,
specifies a Flex component or a custom component. MXML components
correspond to ActionScript classes, therefore, the root tag specifies
the superclass of the MXML component. In this example, the MXML
component specifies the Flex ComboBox control as its superclass. </p>

               </li>

               <li>
                  <p>The <samp class="codeph">xmlns</samp> properties in the root tag specifies
the Flex XML namespaces. In this example, the <samp class="codeph">xmlns</samp> property
indicates that tags in the MX namespace use the prefix <em>mx:</em>.</p>

               </li>

               <li>
                  <p>The remaining lines of the component specify its definition.</p>

               </li>

            </ol>

            <p>The main application, or any other MXML component file, references
the StateComboBox component, as the following example shows:</p>

            <pre class="codeblock">&lt;?xml version="1.0"?&gt; 
&lt;!-- createcomps_intro/IntroMyApplication.mxml --&gt; 
&lt;!-- Include the namespace definition for your custom components. --&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="*"&gt; 
 
    &lt;!-- Use the filename as the MXML tag name. --&gt; 
    &lt;MyComp:StateComboBox/&gt; 
&lt;/s:Application&gt;</pre>

            <p>The MXML tag name for a custom component is composed of two parts:
the namespace prefix, in this case <samp class="codeph">MyComp</samp>, and
the tag name. The namespace prefix tells Flex where to look for
the file that implements the custom component. The tag name corresponds
to the filename of the component, in this case StateComboBox.mxml.
Therefore, a file named StateComboBox.mxml defines a component with
the tag name of <samp class="codeph">&lt;</samp>
               <em>namespace:</em>
               <samp class="codeph">StateComboBox&gt;</samp>.</p>

            <p>As part of the <samp class="codeph">&lt;s:Application&gt;</samp> tag, the
main application file includes the following namespace definition: <samp class="codeph">xmlns:MyComp="*"</samp>.
This definition specifies that the component is in the same directory
as the main application file, or in a directory included in the
ActionScript source path. For more information on deploying MXML
components, see <a href="flx_mxmlcomponents_mxc.html#WS2db454920e96a9e51e63e3d11c0bf69084-7feb_verapache">Simple
MXML components</a>.</p>

            <p>The best practice is to put your custom components in a subdirectory
of your application. That practice helps to ensure that you do not
have duplicate component names because they have a different namespace.
If you stored your component in the myComponents subdirectory of
your application, you would specify the namespace definition as <samp class="codeph">xmlns:MyComp="myComponents.*"</samp>.</p>

            <p>The StateComboBox.mxml file specifies the ComboBox control as
its root tag, so you can reference all of the properties of the
ComboBox control in the MXML tag of your custom component, or in
the ActionScript specified in an <samp class="codeph">&lt;fx:Script&gt;</samp> tag.
For example, the following example specifies the <samp class="codeph">ComboBox.maxChars</samp> property
and a listener for the <samp class="codeph">ComboBox.close</samp> event for
your custom control:</p>

            <pre class="codeblock">&lt;?xml version="1.0"?&gt; 
&lt;!-- createcomps_intro/MyApplicationProperties.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 handleCloseEvent(eventObj:Event):void { 
                // ... 
            } 
        ]]&gt; 
    &lt;/fx:Script&gt; 
 
    &lt;MyComp:StateComboBox maxChars="25" 
        close="handleCloseEvent(event);"/&gt; 
&lt;/s:Application&gt;</pre>

            <p>For more information on MXML components, see <a href="flx_mxmlcomponents_mxc.html#WS2db454920e96a9e51e63e3d11c0bf69084-7feb_verapache">Simple
MXML components</a>. </p>

         </div>

      </div>

      <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf68268-7ff6_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf68268-7ff6_verapache"><!-- --></a>
         <h3 class="topictitle3">Creating ActionScript components</h3>

         
         <div>
            <p>
               You
create ActionScript components by defining ActionScript classes.
You can create the following types of components in ActionScript:</p>

            <dl>
               
                  <dt class="dlterm">User-interface, or visual, components</dt>

                  <dd>
                     <p>
                        User-interface
components contain both processing logic and visual elements. You
create custom user-interface components to modify existing behavior
or add new functionality to the component. These components usually
extend the Flex component hierarchy. You can extend from the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/core/UIComponent.html" target="_blank">UIComponent</a> class,
or any of the Flex components, such as <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Button.html" target="_blank">Button</a>, <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/ComboBox.html" target="_blank">ComboBox</a>,
or <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/DataGrid.html" target="_blank">DataGrid</a>.
Your custom ActionScript component inherits all of the methods,
properties, events, styles, and effects of its superclass.</p>

                  </dd>

               
                  <dt class="dlterm">Nonvisual components</dt>

                  <dd>
                     <p>
                        Nonvisual
components define nonvisual elements. Flex includes several types
of nonvisual components that you can create, including formatters,
validators, and effects. You create nonvisual components by creating
a subclass from the Flex component hierarchy. For validators, you create
subclasses of the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/validators/Validator.html" target="_blank">Validator</a> class;
for formatters you create subclasses of the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/formatters/Formatter.html" target="_blank">Formatter</a> class;
and for effects, you create subclasses of the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/effects/Effect.html" target="_blank">Effect</a> class.</p>

                     <p>For
example, you can define a custom button component based on the Spark <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Button.html" target="_blank">Button</a> class,
as the following example shows: </p>

                     <pre class="noswf">package myComponents 
{ 
    // createcomps_intro/myComponents/MyButton.as 
    import spark.components.Button; 
 
    public class MyButton extends Button { 
    
        // Define the constructor. 
        public function MyButton() { 
            // Call the constructor in the superclass. 
            super(); 
            // Set the label property to "Submit". 
            label="Submit"; 
        } 
    } 
}</pre>

                     <p>In this example, you write your MyButton class to
the MyButton.as file. </p>

                     <p>You must define your custom components
within an ActionScript package. The package reflects the directory
location of your component in the directory structure of your application.
Typically, you put custom ActionScript components in directories
that are in the ActionScript source path, subdirectories of your application,
or for Adobe<sup>®</sup> LiveCycle™ Data
Services ES, in the WEB-INF/flex/user_classes directory. In this
example, the <samp class="codeph">package</samp> statement specifies that the
MyButton.as file is in the myComponents subdirectory of your Flex
application. </p>

                     <p>In the MXML file that references the custom
component, you define the namespace and reference it in an MXML
file as the following example shows:</p>

                     <pre class="codeblock">&lt;?xml version="1.0"?&gt; 
&lt;!-- createcomps_intro/MyApplicationASComponent.mxml --&gt; 
&lt;!-- Include the namespace definition for your custom components. --&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;!-- Use the filename as the MXML tag name. --&gt; 
    &lt;MyComp:MyButton/&gt; 
 
&lt;/s:Application&gt;</pre>

                     <p>In this example, you first
define the <samp class="codeph">MyComp</samp> namespace that specifies the location
of your custom component in the application’s directory structure.
You then reference the component as an MXML tag using the namespace
prefix. </p>

                     <p>For more information, see <a href="flx_ascomponents_as.html#WS2db454920e96a9e51e63e3d11c0bf69084-7fea_verapache">Create
simple visual components in ActionScript </a>.</p>

                  </dd>

               
            </dl>

         </div>

      </div>

      <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf68268-7ff5_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf68268-7ff5_verapache"><!-- --></a>
         <h3 class="topictitle3">Deploying components</h3>

         
         <div>
            <p>
               When
you deploy your custom components as MXML or ActionScript files,
you typically deploy them in the same directory structure as your
application files, in a directory specified in the ActionScript
source path, or for LiveCycle Data Services ES, in the WEB-INF/flex/user_classes
directory.</p>

            <p>For security reasons, you may decide not to deploy your custom
components as source code files. Alternatively, you can deploy your
components as SWC files or as part of a Runtime Shared Library (RSL). </p>

            <p>A <em>SWC file</em> is an archive file for Flex components. SWC
files make it easy to exchange components among Flex developers.
You need only exchange a single file, rather than the MXML or ActionScript
files and images and other resource files. In addition, the SWF
file inside a SWC file is compiled, which means that the code is
hidden from casual view. </p>

            <p>SWC files can contain one or more components and are packaged
and expanded with the PKZip archive format. You can open and examine
a SWC file using WinZip, JAR, or another archiving tool. However,
you should not manually change the contents of a SWC file, and you
should not try to run the SWF file that is in a SWC file outside
of a SWC file. </p>

            <p>To create a SWC file, use the compc utility in the <em>flex_install_dir</em>/bin
directory. The compc utility generates a SWC file from MXML component
source files and/or ActionScript component source files. For more
information on compc, see <a href="flx_compilers_cpl.html#WS2db454920e96a9e51e63e3d11c0bf69084-7ffd_verapache">Flex compilers</a>.</p>

            <p>
               
               
               One way to reduce the size of your application’s
SWF file is by externalizing shared assets into stand-alone files
that can be separately downloaded and cached on the client. These
shared assets are loaded by any number of applications at run time,
but only need to be transferred to the client once. These shared files
are known as Runtime Shared Libraries or RSLs.</p>

            <p>For more information, including information on how to create
an RSL file, see <a href="flx_rsl_rsl.html#WS2db454920e96a9e51e63e3d11c0bf69084-7fd1_verapache">Runtime
Shared Libraries</a>.</p>

            <p/>

         </div>

      </div>

         <p>Adobe, Adobe LiveCycle Data Services ES 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>