Components: application building blocks

What is a component?

Components are the building blocks of any Flash Catalyst project. All of your application’s visual controls such as buttons, menus, and scrollbars will be components. Anything in the application that you want your user to interact with will be a component. When you create a component, you define a combination of visual elements and interactive behaviors that can be reused within an application. Components also provide a way for you to group elements of your application together for easier management and editing.

Components skin parts and states

All components are made up of skin parts and states.

Skin parts define the visual aspects of the component. Some components have only a single part, while others have many parts. Some of those parts may be required and must be specified whenever you work with the component, while others may be optional.

A button, for example, has both a required label, the text on the button, and an optional shape to serve as the background. Scrollbars have a required thumb, the piece your user drags to scroll, and a required track, the bar within which the thumb is scrolled. They also have optional arrows at either end. Custom/Generic components always have only a single part: the artwork used in creating the component.

States define the appearance of the component as the user interacts with it. Conceptually, component states are the same as application states. See Types of states for more general information on states. Some components have a set of pre-defined states that cannot be altered. An example of this is a button, which has Up, Over, Down and Disabled states. Custom/Generic components will have a single state when you first create them, but then you are free to add additional states as needed.

View full size graphic
This button has one required part: Label; and four states: Up, Over, Down, Disabled.
View full size graphic
This search entry field has two parts: Prompt Display and Text Display; and four states: Normal, Disabled, Prompt Normal, Prompt Disabled.
View full size graphic
This scrollbar has four parts: Thumb, Track, Left Button, Right Button; and three states: Normal, Disabled, Inactive.
View full size graphic
This data list has one part: Repeated Item; and two states: Normal, Disabled.

Creating components

Creating instances of components

Anytime you either drag a component from the Project Library or the Common Library, or whenever you convert artwork to a component, you are creating an instance of the component. Components can either be created directly in Flash Catalyst, already exist in the Flex framework, or be given to you by a developer.

For more information on creating instances from the Project Library, see Project library.

You can convert your own artwork to a Custom/Generic component or use your own artwork as a skin for an existing Flex component. See Create a component from your own artwork for details on creating custom/generic components.

You can create instances of components that exist in the Flex framework that already have a predefined look by dragging them from the Common Library. See Insert Flex Components from the Common Library Panel for details.

Create a component from your own artwork

You can use your own artwork to create either a Custom/Generic component or as a skin for a component from the Flex framework.

When you convert artwork to a Custom/Generic component, Flash Catalyst groups the selected objects as a new component. When you convert your own artwork to a Flex component, the artwork is applied as the component’s skin.

The component is added to the project library and appears in the Components category in the Project Library panel. Flash Catalyst automatically replaces your artwork with an instance of the component. The component is now part of your application, and you can share that same instance of the component to other states. The instance of the component is also represented in the Layers panel.

To convert artwork to a component:

  1. Using the Layers panel or in the artboard, select the objects you want to convert to a component.

  2. In the HUD, click Choose Component and choose a component type. You can select one of the existing Flex types or Custom/Generic component.

    Note: Some projects will include Custom Skinnable Components, which will be listed at the bottom of the HUD’s drop-down of component types. See Custom skinnable components for more information.
  3. Once you select the component type, the HUD will change to allow you to switch to Edit-in-Place mode for that component. See Editing a component with edit-in-place.

  • To make a component based on an existing one, right-click the component’s name in the Project Library panel and choose Duplicate.

  • To rename a component in the Project Library panel, right-click the component’s name and choose Rename. You can also double-click the component’s name. Type a new name and press Enter (Windows) or Return (Mac OS). Component names must contain only letters, numbers, or the underscore character. They must be unique to the project and begin only with a letter or underscore.

If you create a component from artwork that is shared in multiple states, you lose state-specific properties or transition effects associated with that item upon component creation. It is a good practice to define component structure before building transitions. If you plan to convert artwork to components, avoid sharing that artwork to other states until you have created your components.

Insert Flex Components from the Common Library Panel

The Common Library displays pre-built Flex components that can be used in your application. Some of these components have skins that can be edited in Flash Catalyst, which are designated by a pencil icon in the panel. Others do not have skins that you can edit in Flash Catalyst. You can drag either type of component onto the artboard to use it in your application.

Note: The Common Library panel also contains a set of placeholders, which are not components but rather images for wireframing common interface elements. See Using placeholders.

The components that allow you to edit their skins are:

Button
Used for adding basic user interaction to your project.

Check Box
Used in a group of selections where the user can select zero or more options from the choices.

Data List
A list of items presented in a scrollable list.

Horizontal Scrollbar
Add a horizontal scrollbar to another component to provide scrolling capability.

Horizontal Slider
A horizontal slider can provide the user with the ability to choose from a predetermined range of values.

Radio Button
Used to present the user with a set of mutually exclusive options.

Text Input
A simple text field into which the user can type values.

Toggle Button
Similar in functionality to the Button, except that the Toggle Button retains a “selected” appearance until another button in the same group is selected.

Vertical Scrollbar
Identical to the Horizontal Scrollbar, except vertical.

Vertical Slider
Identical to the Horizontal Slider, except vertical.

The components whose skins cannot be edited are:

Button Bar
A set of toggle buttons, usually used for site navigation.

Combo Box
A drop-down list that allows users to either select one from a list of provided values, or enter their own value.

Drop-down
A list from which users can select from a set of provided values.

Numeric Stepper
Used to allow users to select a numeric value by either typing a number or using the arrows to progress up or down through a range of values.

Tab Bar
A set of tabs, often used for site navigation.

Custom skinnable components

Developers can create components in Flash Builder that have predefined states and parts. You can then use Flash Catalyst to define the look and feel of these custom skinnable components. For more information, see Custom skinnable components.

Naming components

Eventually, your components will be referenced or edited by a Flex developer in Flash Builder. Therefore, it is important that you name components as you create them, and that you give them names that are easily understood by your developer. Some naming best practices include:

  • Give each component a clear name that represents its purpose. Rather than Button, name a navigation item HomeButton. A custom data list component should be called CrewList, rather than DataList42.

  • All native components in Flex use a casing scheme known as Pascal Case, where all single-word names are capitalized. Multi-word names are combined into a single word, and the first letter of each word is capitalized. As most Flex developers are in the habit of naming components using this same method, you should follow suit. Thus, use Browncoats instead of browncoats, and CastAndCrew instead of castandcrew.

  • Communicate with your developer. If you are at all unsure of a good name for a component, talk to your developer. The most important key to successful workflow between you and the developer is communication.

Nesting components

Components can be nested within other components. For example, when created Custom/Generic components, you can include other components such as Buttons, Text Inputs, Scrollbars, or even other Custom/Generic components.

Some components require that other components be nested within them in order to achieve the desired behavior. For example, in order to create a scrollable Data List or a Scroll Panel, you must include a scrollbar component as part of the definition.

View full size graphic
In this example, a component named "TabsListSkin" is nested inside of a component named "MenuBar", which is in turn nested inside a component named "ContentSection". Double-clicking a component on the artboard allows you to navigate down into nested components; clicking the name in the breadcrumb allows you to navigate back up and out of nested components.

Editing a component with edit-in-place

After adding a component to the artboard, you can edit the component by using Edit-In-Place and modify its individual parts. When you edit component parts using Edit-In-Place, the changes apply to all instances of the component in all states. Any properties that you have applied in each state, such as opacity, are preserved.

All components, except Custom/Generic components, have a set of predefined states that cannot be edited. Custom/Generic components will have no predefined states, and you are free to add additional states as needed.

  1. Select the component you want to edit. If the component type has any required parts that need to be specified, the HUD will display a message letting you know that you need to specify parts and provide a button to go into Edit-in-Place and set the parts. If the component has no required parts, or if the required parts have already been specified, the HUD will list the component’s states as buttons. Clicking any of the state buttons will take you to Edit-in-Place mode. In the HUD, choose the state you want to edit, or click Edit Parts or Edit Appearance.

    Note: You can also double-click a component to enter Edit-In-Place or choose Modify > Edit Component.

    Flash Catalyst changes to Edit-In-Place mode, indicated by a dimmed artboard. The states of the component appear in the States panel. The Breadcrumbs bar shows the name of the component you have open.

    The Layers panel divides into sections. The top section shows the layers for the component your are editing. Below that, one or more sections show the layers for the main application and any parent components. You can drag objects between any of these sections.

    View full size graphic
    Breadcrumbs bar
  2. Use the Layers panel to hide or show artwork in each state.

    When a component is in Edit-In-Place:

    • You can duplicate states, add new blank states, or delete states in the States panel if you are editing a Custom/Generic component.

    • You can modify the artwork in each state by using the drawing tools and Properties panel. For example, you can change the size, stroke, fill, and opacity of a shape or other parts of the component.

  3. Exit Edit-In-Place mode by pressing Escape or clicking the name of the application in the Breadcrumb bar above the artboard. You can also double-click the dimmed area in the artboard or choose Modify > Exit Editing.

Moving the parts of a component while in Edit-In-Place can change the size of the component. If you have Auto Size Component Bounds selected in the Modify menu, the component bounds resize automatically in all states. When Auto Size Component Bounds is turned off, you can select Clip To Component Bounds in the Modify menu. Clip To Component Bounds clips any parts that extend beyond the component.

Editing definitions versus instances of components

It is important to note that when you edit a component in place, you are editing the component definition. Any changes you make to the definition will affect all instances of that component in the application. You can edit some properties of individual instances of components without editing the component definition, such as size and position, by simply selecting the instance on the artboard and making the necessary changes.

Set instance properties

Components have a variety of properties that be set in the Properties panel, such as their position on the artboard, their opacity, and their rotation.

View full size graphic
A.
With a data list component selected on the artboard, the Properties panel enables editing of a variety of properties.

To change component properties, select the component in the artboard, and modify its properties in the Properties panel. When you apply component properties, the changes only apply to the current state. You are not editing the component itself; instead, you are merely applying those properties to that instance in that state. To apply the same properties to the same instance in all other states, select the component on the artboard and choose States > Make Same In All Other States.

To make other changes that apply to all instances of the component, edit the component using Edit-In-Place. When you edit a component using Edit-In-Place, the changes you make apply to all instances in all states. See Editing a component with edit-in-place.

Component properties include:

Accepts Mouse Events
Makes an object appear visible to the mouse. If you deselect Accepts Mouse Events, mouse events pass through to the next item in the layer order. Changing this setting does not change how the component appears.

Transparency Accepts Mouse
Areas within the component or group bounds that are transparent respond to mouse rollovers and clicks. The mouse-responsive area is always a rectangle (as opposed to following the contours of the opaque pixels). In most cases, objects underneath the transparent area no longer respond to mouse rollovers and clicks, because the transparent group/component on top is “blocking” them.
Suppose you have a text list with a background image spanning the entire list area. In order for the list to be visible, individual list items (Repeated Items) must have a transparent background. Check “Transparency accepts mouse” so that the user can click anywhere within the list item to select it (not just on the opaque text.)

Tab Index
Controls the order of items when pressing tab to move the keyboard focus. Lower numbers place the item earlier in the sequence. The -1 indicates a default order based on the Layer panel order.

Tab To Focus
Means that it is possible to give the component keyboard focus by tabbing to it. If Tab To Focus is deselected, pressing tab does not give the component keyboard focus. It must be clicked to get focus.

Tooltip
Enter text to display as a tool tip when the user interacts with the component.

Display As Password
Displays the text field’s contents as a series of asterisks.

Editable
The text in a Text Input can be selected, but cannot be edited (when deselected).

Max Characters
Automatically sizes a Text Input control to accommodate a specific number of characters. This property is only applicable for a wireframe text input that has not been manually resized.

Selected Index
The item selected in a list by default. The first item is 0, the second items is 1, and so on. A value of -1 means nothing is selected.

Focus Ring
The color of the halo or highlight shown on a control when it has the keyboard focus.

Hand Cursor
Rolling over the object with the mouse shows a pointing hand.

Accessible Text
The text describing the object for screen reader technologies.

Radio Button Group
Only one radio button within a group can be selected. Radio buttons are in the same group if this property is set to the same name. Radio buttons are also in the same group if they are grouped, inside the same component, or at the application level.

Page Size
How far the thumb moves in a scrollbar when clicking in the track.

Step Size
How far the thumb moves when clicking the arrows. In a slider, Step Size controls how far the thumb moves when pressing the arrow keys.

Snap Interval
Forces the thumb in a scrollbar to snap in increments rather than moving smoothly. Page Size and Step Size are always forced to be multiples of the Snap Interval.

See the following for more information on setting object properties:

Modify drawing and text properties

Resizing component definitions

If you resize a component while editing the component’s definition, you will resize all instances of that component. If all instances of the component are at the original size, meaning that you have not manually resized any instance, then the instances will simply resize to match the new component defintion. However, if you have any instances of the component that have been resized or constrained on both sides on the artboard, then Flash Catalyst will display a dialog box warning you that you have resized instances when you leave Edit-in-Place mode. In this case, the instances will not resize; rather, the artwork within the component will be resized.

For example, say you have a button whose initial width is 100 pixels. You place an instance of that button on the artboard and leave it at that size. Then, you place a second instance and, using the Free Transform tool or the Properties panel, you resize the second instance to a width of 200 pixels. Then, you double-click either instance to enter Edit-in-Place mode. Working in Edit-in-Place, you add artwork that increases the default width of the button to 250 pixels. When you exit Edit-in-Place, you will see a dialog box informing you that you have changed the size. The first instance of the button, which you left at its original size, will simply expand to 250 pixels. The second button, however, will remain at the size you set - 200 pixels - and the artwork within the button will be squeezed into the smaller widht.

This same issue will happen if you move or rotate artwork within the defition of a component such that the overall dimensions of the artwork change. Flash Catalyst will display a bounding box showing the overall dimensions of the artwork, so while you work in Edit-in-Place mode you can visually see if any changes you make will alter the dimensions and casue this behavior.

If you have instances of components that become distorted due to resizing the definition, you can select the artwork and click the Reset to Default Size button on the Properties panel to resize the instance to match the definition’s size.

Making components resizable

You can make components resizable so that individual instances of the component can exist in different sizes and so that components can dynamically resize to fit different screen sizes. For more information, see Resizing Applications and Components.