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

Resources

 

MXML

  • Selecting months is a very common task.
  • Rather than re-creating a months menu everytime you need one, create a re-useable component.
  • The new custom MXML component inherits the properties, methods and events of the original Flex component
  • MXML components do not have the Application component tags
  • Custom MXML components can reference other Flex components
  • Custom MXML components can not be named the same as existing Flex components
  • The component file name becomes the name of the custom component that is used in your application
  • Create a namespace to have access to your components directory or to a specific component in the directory. (xmlns:custom="components.*")
  • Call your component with the namespace you created ( <custom:ComboBoxMonths id="month" />)
previous page next page

User rating?

ComboBoxMonths.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:dataProvider>
    <mx:ArrayCollection>
      <mx:String>January</mx:String>
      <mx:String>February</mx:String>
      <mx:String>March</mx:String>
      <mx:String>April</mx:String>
      <mx:String>May</mx:String>
      <mx:String>June</mx:String>
      <mx:String>July</mx:String>
      <mx:String>August</mx:String>
      <mx:String>September</mx:String>
      <mx:String>October</mx:String>
      <mx:String>November</mx:String>
      <mx:String>December</mx:String>
    </mx:ArrayCollection>
  </mx:dataProvider>
</mx:ComboBox>

MainForm.mxml

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

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private function showMonth():void{
                Alert.show("Thank you " + fullname.text + '! \nYour gift will arrive in ' + month.selectedItem + '.');
            }
        ]]>
    </mx:Script>

    <mx:Form>
        <mx:FormHeading label="Get a free gift!" />
        <mx:FormItem label="Name">
            <mx:TextInput id="fullname" />
        </mx:FormItem>
        <mx:FormItem label="Select delivery month">
            <custom:ComboBoxMonths id="month" />
        </mx:FormItem>
        <mx:FormItem>
            <mx:Button label="Submit"
                click="showMonth()" />
        </mx:FormItem>
    </mx:Form>
</mx:Application>
  • Download a
    ZIP filethat contains the applications in this module. To import the project into Flex Builder, select File > Import Flex Project.

Rendered Example

previous page next page

Note: I believe the canvas width in the rendered example above was set too small.

If you downloaded the zip file that contains the applications in this module, MainForm.mxml above refers to CustomComponent1.mxml in the zip file.  You'll need to change the following line to match the tutorial above:

<custom:ComboBoxMonths0 id="month" />

(note the zero after ComboBoxMonths)

Added by Annette Kunovic , 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