Adobe Flex 3 Help

Creating MXML components visually

You use Flex Builder to create custom MXML components.

  1. Select File > New > MXML Component.

    The New MXML Component dialog box appears:

  2. Specify the parent folder for your custom component file.

    Save the file in a folder in the current project folder or in the source path of the current project if you want the component to appear in the Components view.

  3. Specify a filename for the component.

    The filename defines the component name. For example, if you name the file LoginBox.mxml, the component is named LoginBox.

  4. Select the base component of your custom component.

    Custom components are typically derived from existing components. Containers are commonly used as the base components of layout custom components.

  5. (Optional) If you base the component on a Panel or TitleWindow component, a Layout pop-up menu appears letting you select how the children of the component will be laid out--absolutely, horizontally, or vertically.
  6. (Optional) If you base the component on any container, you get options to set the width and height of the component.

    You can set these options to a fixed width and height or to percentages, or you can clear them. When you create an instance of the component, you can override the component's width and height in the instance.

    If you set a percentage width and height or if you set no width and height, you can preview how the component will look at different sizes using the Design Area pop-up menu in the toolbar of the MXML editor's toolbar in Design mode. For more information, see Designing components visually.

  7. Click Finish.

    Flex Builder saves the file in the parent folder and opens it in the editor.

    If you saved the file in the current project or in the source path of the current project, Flex Builder also displays the component in the Components view so that you can rapidly insert it in your applications. For more information, see Add components in MXML Design mode.

Note: The Components view lists only visible custom components (components that inherit from the UIComponent class). For more information, see Adobe Flex Language Reference.

  1. Create your custom component.

    For more information, see Simple MXML Components in Creating and Extending Adobe Flex 3 Components.