Custom components-create mxml Components

Create a simple mxml component example

Components/countrycombobox. mxml

 
<? XML version = "1.0" encoding = "UTF-8"?><Mx: ComboBoxXmlns: MX ="Http://www.adobe.com/2006/mxml"><Mx: dataprovider><Mx: String>United States</MX: String><Mx: String>United Kingdom</MX: String><! --Add all other countries.--></MX: dataprovider></MX: ComboBox>
 

Main Application mxml File

 
<? XML version = "1.0" encoding = "UTF-8"?><Mx: ApplicationXmlns: MX ="Http://www.adobe.com/2006/mxml"Xmlns: Custom ="Components .*"Width ="220"Height ="115"><Custom: countrycombobox/></MX: Application>
 

 
Attributes and methods of custom components
 

Example

 
Components/countrycombobox. mxml
 

<? XML version = "1.0" encoding = "UTF-8"?><Mx: ComboBoxXmlns: MX ="Http://www.adobe.com/2006/mxml"><Mx: dataprovider><Mx: String>United States</MX: String><Mx: String>United Kingdom</MX: String><! --Add all other countries...--></MX: dataprovider></MX: ComboBox>
 
 
Main Application mxml File
 
<? XML version = "1.0" encoding = "UTF-8"?>  <Mx: Application Xmlns: MX =" Http://www.adobe.com/2006/mxml "Xmlns: Custom =" Components .* "Width =" 270 "Height =" 170 " >  <Mx: SCRIPT>  <!  [ CDATA [  Import Flash. Events. event; Private   Function Handlecloseevent ( Eventobj : Event )  :  Void  { Status. Text =   "You selected: \ r"   + Countries. selecteditem As String; }  ]  >  </MX: SCRIPT>  <Mx: Panel Title ="Custom component inheritance "Paddingtop =" 10 "Paddingbottom =" 10 "Paddingleft =" 10 "Paddingright =" 10 " >  <Custom: countrycombobox Id =" Countries "Rowcount =" 5 "Close =" handlecloseevent ( Event ) ;" />  <Mx: Text Id ="Status "Text =" Please select a country from the list. "Width =" 136 " />  </MX: Panel>  </MX: Application> 
 
Create compound mxml component
 
Example
 
Components/addressform. mxml
 
 <? XML version = "1.0" encoding = "UTF-8"?>  <Mx: Form Xmlns: MX =" Http://www.adobe.com/2006/mxml "Xmlns: Custom =" Components .* " > <Mx: formitem Label =" Name " >  <Mx: textinput/>  </MX: formitem>  <Mx: formitem Label =" Street " >  <Mx: textinput/>  </MX: formitem>  <Mx: formitem Label =" City " >  <Mx: textinput/> </MX: formitem>  <Mx: formitem Label =" State/County " >  <Mx: textinput/>  </MX: formitem>  <Mx: formitem Label =" Country " >  <Custom: countrycombobox/>  </MX: formitem>  </MX: Form> 
 
Components/countrycombobox. mxml
 
<? XML version = "1.0" encoding = "UTF-8"?><Mx: ComboBoxXmlns: MX ="Http://www.adobe.com/2006/mxml"><Mx: dataprovider><Mx: String>United States</MX: String><Mx: String>United Kingdom</MX: String><! --Add all other countries...--></MX: dataprovider></MX: ComboBox>
 
 
Main Application mxml File
 
<? XML version = "1.0" encoding = "UTF-8"?>  <Mx: Application Xmlns: MX =" Http://www.adobe.com/2006/mxml "Xmlns: Custom =" Components .* "Viewsourceurl =" Src/mxmlcomponentcomposite/index.html "Width =" 400 "Height =" 290 " >  <Mx: Panel Title =" Composite component "Paddingtop =" 10 "Paddingbottom =" 10 "Paddingleft =" 10 "Paddingright =" 10 " >  <Custom: addressform   />  </MX: Panel>  </MX: Application> 
 
Create and reuse mxml Components
 
Example
 
Components/countrycombobox. mxml
 
 <? XML version = "1.0" encoding = "UTF-8"?>  <Mx: ComboBox Xmlns: MX =" Http://www.adobe.com/2006/mxml " >  <Mx: SCRIPT> <!  [ CDATA [  Private   VaR Countryarrayshort : Array =   [  "Us" , "UK"  ] ; Private   VaR Countryarraylong : Array =   [  "United States" ,"United Kingdom"  ] ; // Determines display state. The inspectable metadata tag              // Is used by Flex builder 2              [ Inspectable ( Defaultvalue =  True  )]  Private   VaR _ Useshortnames : Boolean =   True ; // Implicit setter             Public   Function   Set Useshortnames ( State : Boolean )  :  Void  {  // Call method to set the dataprovider Based on the name length. _ Useshortnames = State; If   ( State )  {  This . Dataprovider = Countryarrayshort; }  Else  {  This . Dataprovider = Countryarraylong; }  // Dispatch an event when the value changes                  // (Used in data binding .) Dispatchevent (  New Event (  "Changeuseshortnames"  )) ; } // Allow other components to bind to this property              [  Bindable  ( Event =  "Changeuseshortnames"  )]  Public   Function   Get Useshortnames ()  : Boolean {  Return _ Useshortnames; }  ]  > </MX: SCRIPT>  </MX: ComboBox> 
 
Main Application mxml File
 
 <? XML version = "1.0" encoding = "UTF-8"?>  <Mx: Application Xmlns: MX =" Http://www.adobe.com/2006/mxml "Xmlns: Custom =" Components .* "Viewsourceurl =" Src/mxmlcomponentadvanced/index.html "Width =" 260 "Height =" 200 " >  <Mx: Panel Title ="Advanced custom components "Paddingtop =" 10 "Paddingbottom =" 10 "Paddingleft =" 10 "Paddingright =" 10 " >  <! --  Set a custom property on a custom component  -->  <Custom: countrycombobox Id =" Countries "Useshortnames =" False " /> <! --  Use Data Binding to display the latest stateof the property.  -->  <Mx: Label TEXT =" Useshortnames = { Countries. useshortnames } " />  <Mx: controlbar Horizontalalign =" Right " >  <Mx: button Label =" Toggle display "Click =" countries. useshortnames =  ! Countries. useshortnames ;" />  </MX: controlbar>  </MX: Panel>  </MX: Application>