UIComponent  - AS3 Flash

Gets or sets a value that indicates whether the component can accept user interaction. A value of true indicates that the component can accept user interaction; a value of false indicates that it cannot.

If you set the enabled property to false, the color of the container is dimmed and user input is blocked (with the exception of the Label and ProgressBar components).

The default value is true.

Gets or sets a Boolean value that indicates whether the component can receive focus after the user clicks it. A value of true indicates that it can receive focus; a value of false indicates that it cannot.

If this property is false, focus is transferred to the first parent whose mouseFocusEnabled property is set to true.

The default value is true.

Related API Elements

Gets or sets the FocusManager that controls focus for this component and its peers. Each pop-up component maintains its own focus loop and FocusManager instance. Use this property to access the correct FocusManager for this component.

Gets or sets the height of the component, in pixels.

Setting this property causes a resize event to be dispatched. See the resize event for detailed information about when it is dispatched.

If the scaleY property of the component is not 1.0, the height of the component that is obtained from its internal coordinates will not match the height value from the parent coordinates. For example, a component that is 100 pixels in height and has a scaleY of 2 has a value of 100 pixels in the parent, but internally stores a value indicating that it is 50 pixels in height.

Gets or sets a value that indicates whether the component can receive focus after the user clicks it. A value of true indicates that it can receive focus; a value of false indicates that it cannot.

If this property is false, focus is transferred to the first parent whose mouseFocusEnabled property is set to true.

The default value is true.

Related API Elements

Multiplies the current width of the component by a scale factor.

Related API Elements

Multiplies the current height of the component by a scale factor.

Related API Elements

Gets or sets a value that indicates whether the current component instance is visible. A value of true indicates that the current component is visible; a value of false indicates that it is not.

When this property is set to true, the object dispatches a show event. When this property is set to false, the object dispatches a hide event. In either case, the children of the object do not generate a show or hide event unless the object specifically writes an implementation to do so.

The default value is true.

Related API Elements

Gets or sets the width of the component, in pixels.

Setting this property causes a resize event to be dispatched. See the resize event for detailed information about when it is dispatched.

If the scaleX property of the component is not 1.0, the width of the component that is obtained from its internal coordinates will not match the width value from the parent coordinates. For example, a component that is 100 pixels in width and has a scaleX of 2 has a value of 100 pixels in the parent, but internally stores a value indicating that it is 50 pixels wide.

Related API Elements

Gets or sets the x coordinate that represents the position of the component along the x axis within its parent container. This value is described in pixels and is calculated from the left.

Setting this property causes the ComponentEvent.MOVE event to be dispatched.

The default value is 0.

Related API Elements

Gets or sets the y coordinate that represents the position of the component along the y axis within its parent container. This value is described in pixels and is calculated from the top.

Setting this property causes the move event to be dispatched.

Related API Elements

Creates a new UIComponent component instance.

Deletes a style property from this component instance.

This does not necessarily cause the getStyle() method to return a value of undefined.

Parameters

Related API Elements

Shows or hides the focus indicator on this component.

The UIComponent class implements this method by creating and positioning an instance of the class that is specified by the focusSkin style.

Parameters

Initiates an immediate draw operation, without invalidating everything as invalidateNow does.

Retrieves the object that currently has focus.

Note that this method does not necessarily return the component that has focus. It may return the internal subcomponent of the component that has focus. To get the component that has focus, use the focusManager.focus property.

Retrieves a style property that is set in the style lookup chain of the component.

The type that this method returns varies depending on the style property that the method retrieves. The range of possible types includes Boolean; String; Number; int; a uint for an RGB color; a Class for a skin; or any kind of object.

If you call this method to retrieve a particular style property, it will be of a known type that you can store in a variable of the same type. Type casting is not necessary. Instead, a simple assignment statement like the following will work:

var backgroundColor:uint = getStyle("backgroundColor");

If the style property is not set in the style lookup chain, this method returns a value of undefined. Note that undefined is a special value that is not the same as false, "", NaN, 0, or null. No valid style value is ever undefined. You can use the static method StyleManager.isValidStyleValue() to test whether a value was set.

Parameters

Related API Elements

import fl.controls.ComboBox;
import fl.controls.DataGrid;
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;

var myComboBox:ComboBox = new ComboBox();
myComboBox.setStyle("textPadding", 6);
myComboBox.setStyle("disabledAlpha", 0.8);

var styleObject:Object = ComboBox.getStyleDefinition();
var styleDP:DataProvider = new DataProvider();
var styleName:String;
var styleDefaultValue:String;
var styleCurrentValue:String;

for (styleName in styleObject) {
    styleDefaultValue = String(styleObject[styleName]);
    styleCurrentValue = String(myComboBox.getStyle(styleName));
    styleDP.addItem({name:styleName, defaultValue:styleDefaultValue, currentValue:styleCurrentValue});
}
styleDP.sortOn("name", Array.CASEINSENSITIVE);

var c1:DataGridColumn = new DataGridColumn("name");
c1.headerText = "Style name:";
var c2:DataGridColumn = new DataGridColumn("defaultValue");
c2.headerText = "Default style value:";
var c3:DataGridColumn = new DataGridColumn("currentValue");
c3.headerText = "Current style value:"

var styleDataGrid:DataGrid = new DataGrid();
styleDataGrid.addColumn(c1); // name
styleDataGrid.addColumn(c2); // defaultValue
styleDataGrid.addColumn(c3); // currentValue
styleDataGrid.dataProvider = styleDP;
styleDataGrid.setSize(stage.stageWidth - 20, stage.stageHeight - 20);
styleDataGrid.move(10, 10);
addChild(styleDataGrid);

Retrieves the default style map for the current component. The style map contains the type that is appropriate for the component, depending on the style that the component uses. For example, the disabledTextFormat style contains a value of null or a TextFormat object. You can use these styles and call setStyle() on the current component. The following code overrides the default disabledTextFormat style on the specified component:

componentInstance.setStyle("disabledTextFormat", new TextFormat());

Related API Elements

import fl.controls.*;
import fl.containers.*;
import fl.controls.listClasses.*;
import fl.controls.dataGridClasses.*;
import fl.controls.progressBarClasses.*;
import fl.core.UIComponent;
import fl.data.DataProvider;

var dp:DataProvider = new DataProvider();
dp.addItem( { label: "BaseScrollPane",    data:BaseScrollPane } );
dp.addItem( { label: "Button",             data:Button } );
dp.addItem( { label: "CellRenderer",    data:CellRenderer } );
dp.addItem( { label: "CheckBox",         data:CheckBox } );
dp.addItem( { label: "ColorPicker",     data:ColorPicker } );
dp.addItem( { label: "ComboBox",         data:ComboBox } );
dp.addItem( { label: "DataGrid",         data:DataGrid } );
dp.addItem( { label: "HeaderRenderer",    data:HeaderRenderer } );
dp.addItem( { label: "ImageCell",        data:ImageCell } );
dp.addItem( { label: "IndeterminateBar",data:IndeterminateBar } );
dp.addItem( { label: "Label",             data:Label } );
dp.addItem( { label: "List",             data:List } );
dp.addItem( { label: "NumericStepper",     data:NumericStepper } );
dp.addItem( { label: "ProgressBar",     data:ProgressBar } );
dp.addItem( { label: "RadioButton",     data:RadioButton } );
dp.addItem( { label: "ScrollPane",         data:ScrollPane } );
dp.addItem( { label: "Slider",             data:Slider } );
dp.addItem( { label: "TextArea",         data:TextArea } );
dp.addItem( { label: "TextInput",         data:TextInput } );
dp.addItem( { label: "TileList",         data:TileList } );
dp.addItem( { label: "UILoader",         data:UILoader } );
dp.addItem( { label: "UIComponent",     data:UIComponent } );

var cb:ComboBox = new ComboBox();
cb.move(10,10);
cb.setSize(300,25);
cb.prompt = "Select a component to view its styles";
cb.rowCount = 12;
cb.dataProvider = dp;
cb.addEventListener(Event.CHANGE, showStyleDefinition);
addChild(cb);

var dg:DataGrid = new DataGrid();
dg.setSize(425,300);
dg.move(10,50);
dg.columns = [ new DataGridColumn("StyleName"), new DataGridColumn("DefaultValue") ];
addChild(dg);

function showStyleDefinition(e:Event):void {
    var componentClass:Class = e.target.selectedItem.data as Class;
    var styles:Object = componentClass["getStyleDefinition"].call(this);
    trace(styles.toString());
    var styleData:DataProvider = new DataProvider();
    for(var i:* in styles) {
        trace(i + " : " + styles[i]);
        styleData.addItem( { StyleName:i, DefaultValue:styles[i] } );
    }
    styleData.sortOn("StyleName");
    dg.dataProvider = styleData;
}

Returns the specified style for a component, considering all styles set on the global level, component level and instance level.

For example, if a component has a style set at the global level to myStyle and you call getStyle("myStyle") on an instance that does not have an instance setting, it returns null. If you call getStyleValue("myStyle"), it returns "myStyle", because it is active at the global level.

Parameters

Marks a property as invalid and redraws the component on the next frame unless otherwise specified.

Parameters

Merges the styles from multiple classes into one object. If a style is defined in multiple objects, the first occurrence that is found is used.

Parameters

Moves the component to the specified position within its parent. This has the same effect as changing the component location by setting its x and y properties. Calling this method triggers the ComponentEvent.MOVE event to be dispatched.

To override the updateDisplayList() method in a custom component, use the move() method instead of setting the x and y properties. This is because a call to the move() method causes a move event object to be dispatched immediately after the move operation is complete. In contrast, when you change the component location by setting the x and y properties, the event object is dispatched on the next screen refresh.

Parameters

Related API Elements

Sets the focus to this component. The component may in turn give the focus to a subcomponent.

Note: Only the TextInput and TextArea components show a focus indicator when this method sets the focus. All components show a focus indicator when the user tabs to the component.

Sets the component to the specified width and height.

Parameters

Sets a style property on this component instance. This style may override a style that was set globally.

Calling this method can result in decreased performance. Use it only when necessary.

Parameters

Related API Elements

import fl.controls.Button;

var myFormat:TextFormat = new TextFormat();
myFormat.font = "Georgia";

var b:Button = new Button();
b.label = "Hello World";
b.setStyle("textFormat", myFormat);
addChild(b);

import fl.controls.Button;

var flashIcon:Loader = new Loader();
flashIcon.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
flashIcon.load(new URLRequest("http://www.helpexamples.com/flash/images/logo.png"));

var myButton:Button = new Button();
myButton.label = "Flash";
myButton.move(10, 10);
addChild(myButton);

function completeHandler(event:Event):void {
    flashIcon.width = 16;
    flashIcon.height = 16;
    myButton.setStyle("icon", flashIcon);
}

Validates and updates the properties and layout of this object, redrawing it if necessary.

Properties that require substantial computation are normally not processed until the script finishes executing. This is because setting one property could require the processing of other properties. For example, setting the width property may require that the widths of the children or parent of the object also be recalculated. And if the script recalculates the width of the object more than once, these interdependent properties may also require recalculating. Use this method to manually override this behavior.

Dispatched after the component visibility changes from visible to invisible.

This event has the following properties:

import fl.controls.Button;
import fl.controls.List;
import fl.events.ComponentEvent;
import fl.events.ListEvent;

var toggleButton:Button = new Button();
toggleButton.label = "toggle visibility";
toggleButton.toggle = true;
toggleButton.selected = true;
toggleButton.emphasized = toggleButton.selected;
toggleButton.addEventListener(Event.CHANGE, changeHandler);
toggleButton.width = 150;
toggleButton.move(10, 10);
addChild(toggleButton);

var myList:List = new List();
myList.addItem({label:"Item 1"});
myList.addItem({label:"Item 2"});
myList.addItem({label:"Item 3"});
myList.addItem({label:"Item 4"});
myList.addItem({label:"Item 5"});
myList.move(10, 40);
myList.addEventListener(ComponentEvent.HIDE, hideHandler);
myList.addEventListener(ComponentEvent.SHOW, showHandler);
myList.addEventListener(ListEvent.ITEM_ROLL_OVER, itemRollOverHandler);
myList.addEventListener(ListEvent.ITEM_ROLL_OUT, itemRollOverHandler);
addChild(myList);


function changeHandler(event:Event):void {
    toggleButton.emphasized = toggleButton.selected;
    myList.visible = toggleButton.selected;
}

function hideHandler(event:ComponentEvent):void {
    trace("hiding list");
    myList.removeEventListener(ListEvent.ITEM_ROLL_OVER, itemRollOverHandler);
    myList.removeEventListener(ListEvent.ITEM_ROLL_OUT, itemRollOverHandler);
}

function showHandler(event:ComponentEvent):void {
    trace("showing list");
    myList.addEventListener(ListEvent.ITEM_ROLL_OVER, itemRollOverHandler);
    myList.addEventListener(ListEvent.ITEM_ROLL_OUT, itemRollOverHandler);
}

function itemRollOverHandler(event:ListEvent):void {
    trace(event.type + ":", event.item.label);
}

function itemRollOutHandler(event:ListEvent):void {
    trace(event.type + ":", event.item.label);
}

Related API Elements

Dispatched after the component is moved.

This event has the following properties:

import fl.controls.Slider;
import fl.containers.UILoader;
import fl.events.ComponentEvent;
import fl.events.SliderEvent;

var myUILoader:UILoader = new UILoader();
myUILoader.source = "http://www.helpexamples.com/flash/images/image3.jpg";
myUILoader.move(10, 20); 
myUILoader.addEventListener(ComponentEvent.MOVE, moveHandler);
addChild(myUILoader);

var mySlider:Slider = new Slider();
mySlider.liveDragging = true;
mySlider.minimum = myUILoader.x;
mySlider.maximum = myUILoader.x + 200;
mySlider.snapInterval = 1;
mySlider.tickInterval = 10;
mySlider.move(10, 10);
mySlider.addEventListener(SliderEvent.CHANGE, changeHandler);
addChild(mySlider);

function changeHandler(event:SliderEvent):void {
    myUILoader.x = event.value;
}

function moveHandler(event:ComponentEvent):void {
    trace("[move] x:" + event.currentTarget.x + ", y:" + event.currentTarget.y);
}

Dispatched after the component is resized.

This event has the following properties:

import fl.containers.UILoader;
import fl.events.ComponentEvent;

var myUILoader:UILoader = new UILoader();
myUILoader.scaleContent = false;
myUILoader.addEventListener(ComponentEvent.RESIZE, resizeHandler);
myUILoader.source = "http://www.helpexamples.com/flash/images/image3.jpg";
addChild(myUILoader);

function resizeHandler(event:ComponentEvent):void {
    var myImg:UILoader = event.currentTarget as UILoader;
    var newX:uint = (stage.stageWidth - myImg.width) / 2;
    var newY:uint = (stage.stageHeight - myImg.height) / 2;
    myImg.move(newX, newY);
}

Dispatched after the component visibility changes from invisible to visible.

This event has the following properties:

import fl.controls.Button;
import fl.controls.List;
import fl.events.ComponentEvent;
import fl.events.ListEvent;

var toggleButton:Button = new Button();
toggleButton.label = "toggle visibility";
toggleButton.toggle = true;
toggleButton.selected = true;
toggleButton.emphasized = toggleButton.selected;
toggleButton.addEventListener(Event.CHANGE, changeHandler);
toggleButton.width = 150;
toggleButton.move(10, 10);
addChild(toggleButton);

var myList:List = new List();
myList.addItem({label:"Item 1"});
myList.addItem({label:"Item 2"});
myList.addItem({label:"Item 3"});
myList.addItem({label:"Item 4"});
myList.addItem({label:"Item 5"});
myList.move(10, 40);
myList.addEventListener(ComponentEvent.HIDE, hideHandler);
myList.addEventListener(ComponentEvent.SHOW, showHandler);
myList.addEventListener(ListEvent.ITEM_ROLL_OVER, itemRollOverHandler);
myList.addEventListener(ListEvent.ITEM_ROLL_OUT, itemRollOverHandler);
addChild(myList);


function changeHandler(event:Event):void {
    toggleButton.emphasized = toggleButton.selected;
    myList.visible = toggleButton.selected;
}

function hideHandler(event:ComponentEvent):void {
    trace("hiding list");
    myList.removeEventListener(ListEvent.ITEM_ROLL_OVER, itemRollOverHandler);
    myList.removeEventListener(ListEvent.ITEM_ROLL_OUT, itemRollOverHandler);
}

function showHandler(event:ComponentEvent):void {
    trace("showing list");
    myList.addEventListener(ListEvent.ITEM_ROLL_OVER, itemRollOverHandler);
    myList.addEventListener(ListEvent.ITEM_ROLL_OUT, itemRollOverHandler);
}

function itemRollOverHandler(event:ListEvent):void {
    trace(event.type + ":", event.item.label);
}

function itemRollOutHandler(event:ListEvent):void {
    trace(event.type + ":", event.item.label);
}

Related API Elements

The version number of the components.

import fl.controls.CheckBox;

var myCheckBox:CheckBox = new CheckBox();
trace(myCheckBox.version);