ASDoc

The UIComponent class is the base class for all interactive components. Interactive components can participate in tabbing and other kinds of keyboard focus manipulation, accept low-level events like keyboard and mouse input, and be disabled so that it does not receive mouse and keyboard input. This is in contrast to non-interactive components like Label and ProgressBar which simply display things and are not manipulated by the user. Non-interactive components should inherit from UIObject. Similar to UIObject, the UIComponent class is not used as an MXML tag.

All user interface components in Flex extend the UIObject class. Flex components inherit the following properties from the UIComponent class.

drawFocus

getFocus

getFocusManager

setEnabled

setFocus

enabled

errorString

tabEnabled

tabIndex

version

Comments

gumnam said on Jul 18, 2005 at 3:02 PM :

This document explains symbolColor and symbolBackgroundColor styles for checkbox and radio buttons. But they never work for me. Or may be I am not using them correctly. Could you tell me why this little snippet does not change colors ?

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" width="100%" height="100%">

<mx:Script><![CDATA[ function test() {

check.setStyle("fillColors", [0xCCCCCC,0xCCCCCC]);
check.setStyle("symbolColor" , 0xFF0000);
radio1.setStyle("symbolColor", 0xFF0000);
}]]>
</mx:Script>
<mx:RadioButton id="radio1" groupName="gp" selected="true" symbolBackgroundColor="0x00FF00" />
<mx:RadioButton id="radio2" groupName="gp" />
<mx:RadioButtonGroup id="gp" />
<mx:CheckBox id="check" selected="true"/>
<mx:Button id="btn" label="123" click="test();" /> </mx:Application>

mr_dan said on Aug 9, 2006 at 7:36 PM :

Regarding the previous comment, I think the user is trying to affect the "borderColor" property. -As both <mx:CheckBox and <mx:RadioButton are inherited from <mx:Button, I can see why the lower-level, symbol-related styles could be masked by such extensive styling inheritance...

Additionally, there is small, but easily overlooked typo in this documentation for the "keyDown" and "keyUp" events of UIComponent. The bullet point related to the <CONTROL> key is incorrectly abreviated "crtlKey", when is should read, "ctrlKey". (having unknowingly copied & pasted the incorrect event property, I discovered this.)

-Dan

p.s. This comment-submission form is s l u g g i s h, at best, due to all of the Javascript running. (100% CPU @450MHz, while typing) Can something be done about this?

Current page: http://livedocs.adobe.com/flex/15/asdocs_en/mx/core/UIComponent.html

Methods
	`drawFocus`Draw or remove the graphics on the object that show that it has focus.
	`getFocus( ) : Object`Gets the object that currently has focus.
	`getFocusManager( ) : Object`Gets the FocusManager that controls focus for this component and its peers.
	`setEnabled( enabled: Boolean) : Void`This is an advanced method for use in subclassing. This method is called by Flex when the enabled property is changed, and is normally used to set the enabled property on child objects.
	`setFocus( ) : Void`Sets the focus to this component.

Properties
	`enabled: Boolean`Whether the component can accept user interaction.
	`errorString: String`The text that will be displayed by a component's ToolTip when a component is monitored by a Validator and validation fails.
	`tabEnabled: Boolean` If true, object can receive focus.
	`tabIndex: Number`Number that specifies the component's tabbing order in relation to other components in an application.
`static`	`version: String`Version string for this class.

Effects
`focusInEffect`	Component gains keyboard focus.
`focusOutEffect`	Component loses keyboard focus.

Events
`focusIn`	Broadcast when an object receives focus. The event object's target property contains a reference to the component that triggered the event. The event object's type property contains the name of the event, `focusIn`.
`focusOut`	Broadcast when an object loses focus. The event object's target property contains a reference to the component that triggered the event. The event object's type property contains the name of the event, `focusOut`.
`invalid`	Broadcast when a component is monitored by a Validator and the validation failed The event object's target property contains a reference to the component that triggered the event. The event object's type property contains the name of the event, `invalid`.
`keyDown`	Broadcast when a key is pressed. The event object's target property contains a reference to the component that triggered the event. The event object's type property contains the name of the event, `keyDown`. The event object also contains the following properties: code: The key code for the key that was pressed ascii: The ascii value for the key that was pressed shiftKey: true if the shift key is down crtlKey: true if the control key is down
`keyUp`	Broadcast when a key is released. The event object's target property contains a reference to the component that triggered the event. The event object's type property contains the name of the event, `keyUp`. The event object also contains the following properties: code: The key code for the key that was released ascii: The ascii value for the key that was released shiftKey: true if the shift key is down crtlKey: true if the control key is down
`valid`	Broadcast when a component is monitored by a Validator and the validation succeeded The event object's target property contains a reference to the component that triggered the event. The event object's type property contains the name of the event, `valid`.
`valueCommitted`	Broadcast when values are changed programmatically. The event object's target property contains a reference to the component that triggered the event. The event object's type property contains the name of the event, `valueCommitted`.

Styles
`backgroundAlpha`	`Type: Number CSS Inheritance: no`Alpha level of the SWF file or image defined by backgroundImage, or the color defined by the backgroundColor property. Valid values range from 0 to 100. The default value is 100.
`backgroundColor`	`Type: Number Format: Color CSS Inheritance: no`Background color of the component. Note that some components, like a Button, do not have a background because they are completely filled with the button face or other graphics. The DataGrid control also ignores this style.
`backgroundDisabledColor`	`Type: Number Format: Color CSS Inheritance: yes`Background color of components when disabled. The default value is 0xEFEEEF (light gray). You can either have a backgroundColor or a backgroundImage, but not both.
`backgroundImage`	`Type: String Format: File CSS Inheritance: no`Background image of a control. You can either have a backgroundColor or a backgroundImage, but not both.
`backgroundSize`	`Type: String CSS Inheritance: no`Scales the image specified by backgroundImage to different percentage sizes. By default, the value is auto, which maintains the original size of the image. A value of 100% stretches the image to fit the entire screen. You must include the percent sign with the value.
`barColor`	`Type: Number Format: Color CSS Inheritance: yes`Color of the outer bar.
`borderCapColor`	`Type: Number Format: Color CSS Inheritance: yes`Outside left and outside right color for skins.
`borderColor`	`Type: Number Format: Color CSS Inheritance: no`Black section of a three-dimensional border, or the color section of a two-dimensional border. The following components support this style: Button, CheckBox, ComboBox, NumericStepper, ProgressBar, RadioButton, ScrollBar, Slider, and all components that support the `borderStyle` style.
`borderSides`	`Type: String CSS Inheritance: no`Bounding box sides. Only used when borderStyle="solid". Space-delimited string containing the sides of the border to show. Order is not important. The default value is "left top right bottom".
`borderStyle`	`CSS Inheritance: no`Bounding box style. The possible values are: "none", "solid", "inset" and "outset". The default value is "inset". Note:The `borderStyle` style is not supported by the Button control or the Panel container. To make solid border Panels, set the `borderThickness` property, and set the `dropShadow` property to `false` if desired.
`borderThickness`	`Type: Number CSS Inheritance: no`Bounding box thickness. Only used when borderStyle="solid". The default value is 1.
`cornerRadius`	`Type: Number CSS Inheritance: no`Radius of component corners. The following components support this style: Panel, TitleWindow, Alert, Button, Tab, Link, ScrollBar, NumericStepper, ComboBox and any component that supports borderStyle="solid". The default value is 0.
`disabledColor`	`Type: Number Format: Color CSS Inheritance: yes`Disabled color of the UIComponent.
`dropShadow`	`Type: Boolean CSS Inheritance: no`Boolean property that controls the visibility of the component's drop shadow. The default value is `false`. This style must be used with borderStyle="solid". For drop shadows to appear on containers, set backgroundColor or backgroundImage. Otherwise, since the default background of a container is transparent, the shadow appears behind the container.
`errorColor`	`Type: Number Format: Color CSS Inheritance: yes`Color of the error text.
`fillColors`	`Type: Array CSS Inheritance: no`Colors used to tint the background of the control. Pass the same color for both values for "flat" looking control. The default value is [0xE6EEEE,0xFFFFFF].
`highlightColor`	`Type: Number Format: Color CSS Inheritance: yes`Color of the control when it is in focus.
`modalTransparency`	`Type: Number CSS Inheritance: yes`Modality is simulated by creating a large transparent window underneath the TitleWindow component. Due to the way transparent windows are rendered, you may notice a slight dimming of the objects under the transparent window. The effective transparency can be set by changing the modalTransparency value from 0 (fully transparent) to 100 (opaque). If you make the window partially transparent, you can also set the color of the window by changing the Modal skin in the default theme.
`scrollTrackColor`	`Type: Number Format: Color CSS Inheritance: yes`Scroll track for a scroll bar. The default value is 0xEFEEEF (light gray).
`selectedFillColors`	`Type: Array CSS Inheritance: no`Colors used to tint the background of the control when in its selected state. Pass the same color for both values for "flat" looking control. The default value is undefined, which means the colors will be derived from themeColor.
`shadowCapColor`	`Type: Number Format: Color CSS Inheritance: yes`Left and right inside edges of a button's skin.
`shadowColor`	`Type: Number Format: Color CSS Inheritance: yes`Bottom inside color of a button's skin. A section of the three-dimensional border. The default value is 0x848384 (dark gray).
`shadowDirection`	`CSS Inheritance: no`Direction of drop shadow. Possible values are "left", "center" and "right". The default value is "center".
`shadowDistance`	`Type: Number CSS Inheritance: no`Distance of drop shadow. Negative values move shadow above the panel. The default value is 2.
`symbolBackgroundColor`	`Type: Number Format: Color CSS Inheritance: yes`Background color of check boxes and radio buttons. The default value is 0xFFFFFF (white).
`symbolBackgroundDisabledColor`	`Type: Number Format: Color CSS Inheritance: yes`Background color of check boxes and radio buttons when disabled. The default value is 0xEFEEEF (light gray).
`symbolBackgroundPressedColor`	`Type: Number Format: Color CSS Inheritance: yes`Background color of check boxes and radio buttons when pressed. The default value is 0xFFFFFF (white).
`symbolColor`	`Type: Number Format: Color CSS Inheritance: yes`The check mark of a check box or the dot of a radio button. The default value is 0x000000 (black).
`symbolDisabledColor`	`Type: Number Format: Color CSS Inheritance: yes`Disabled check mark or radio button dot color. The default value is 0x848384 (dark gray).
`themeColor`	`Type: Number Format: Color CSS Inheritance: yes`Background of a component. Possible values are "haloGreen", "haloBlue", "haloOrange", and "haloSilver". This property can take any valid color as its value, but you only get the "halo" effect if you use one of the halo colors.

mx.core Class UIComponent