| Package | xp.controls |
| Class | public class ImageBox |
| Inheritance | ImageBox ContentLoader mx.core.UIComponent |
@Embed(source='filename').
Note: Flex also includes the SWFLoader control for loading Flex applications. You typically use the Image control for loading static graphic files and SWF files, and use the SWFLoader control for loading Flex applications.
Embedded images load immediately, because they are already part of the Flex SWF file. However, they add to the size of your application and slow down the application initialization process. Embedded images also require you to recompile your applications whenever your image files change.
The alternative to embedding a resource is to load the resource at runtime. You can load a resource from the local file system in which the SWF file runs, or you can access a remote resource, typically though an HTTP request over a network. These images are independent of your Flex application, so you can change them without causing a recompile operation as long as the names of the modified images remain the same. The referenced images add no additional overhead to an application's initial loading time. However, you might experience a delay when you use the images and load them into Flash Player.
A SWF file can access one type of external resource only, either local or over a network;
it cannot access both types. You determine the type of access allowed by the SWF file
using the use-network flag when you compile your application.
When the use-network flag is set to false, you can access
resources in the local file system, but not over the network.
The default value is true, which allows you to access resources
over the network, but not in the local file system.
When you load images at runtime, you should be aware of the security restrictions of Flash Player. For example, you can load an image from any domain by using a URL, but the default security settings won't allow your code to access the bitmap data of the image unless it came from the same domain as the application. To access bitmap data from images on other servers, you must use a crossdomain.xml file.
The PNG and GIF formats also support the use of an alpha channel for creating transparent images.
MXML Syntax
Hide MXML Syntax
The <xp:ImagePlus> tag inherits the tag attributes of its superclass,
and adds the following tag attribute:
<xp:XPImagePlus
Properties
blockTillLoaded="true|false"
newEffectTarget="null"
oldEffectTarge="true|false"
Styles
Effects
completeEffect="No default"
Events
ready="No default"
targetChanged="No default"
/>
See also
| Property | Defined by | ||
|---|---|---|---|
![]() | autoLoad : Boolean
A flag that indictes whether content starts loading automatically
or waits for a clal to the
load() method. | ContentLoader | |
| blockTillLoaded : Boolean
A flag that indicates whether to block loading an image until the current image has completed loading
and running its effect.
| ImageBox | ||
![]() | bytesLoaded : Number
The number of bytes of the SWF or image file already loaded.
| ContentLoader | |
![]() | bytesTotal : Number
The total size of the SWF or image file.
| ContentLoader | |
| completeEffect : Effect
The effect to be played when the image has been loaded
| ImageBox | ||
![]() | content : DisplayObject
This property contains the object that represents
the content that was loaded in the ContentLoader control.
| ContentLoader | |
![]() | contentHeight : Number
Height of the scaled content loaded by the control, in pixels.
| ContentLoader | |
![]() | contentWidth : Number
Width of the scaled content loaded by the control, in pixels.
| ContentLoader | |
![]() | loaderContext : LoaderContext
A LoaderContext object to use to control loading of the content.
| ContentLoader | |
![]() | maintainAspectRatio : Boolean
A flag that indicates whether to maintain the aspect ratio
of the loaded content.
| ContentLoader | |
| newEffectTarget : UIComponent [write-only]
| ImageBox | ||
| oldEffectTarget : UIComponent [write-only]
| ImageBox | ||
![]() | percentLoaded : Number
The percentage of the image or SWF file already loaded.
| ContentLoader | |
![]() | scaleContent : Boolean
A flag that indicates whether to scale the content to fit the
size of the control or resize the control to the content's size.
| ContentLoader | |
![]() | showBusyCursor : Boolean
A flag that indicates whether to show a busy cursor while
the content loads.
| ContentLoader | |
![]() | source : Object
The URL, object, class or string name of a class to
load as the content.
| ContentLoader | |
![]() | trustContent : Boolean
If
true, the content is loaded
into your security domain. | ContentLoader | |
| Property | Defined by | ||
|---|---|---|---|
| _completeEffect : Effect | ImageBox | ||
| Method | Defined by | ||
|---|---|---|---|
|
ImageBox()
Constructor.
| ImageBox | ||
|
load(url:Object = null):void
Loads an image or SWF file.
| ImageBox | ||
| Method | Defined by | ||
|---|---|---|---|
|
getBorderMetrics():EdgeMetrics
Returns an EdgeMetrics object that has four properties:
left, top, right,
and bottom. | ImageBox | ||
|
getLoader():Object
Creates a new loader
| ImageBox | ||
![]() |
getLoaderContext():LoaderContext
Get the loader context
| ContentLoader | |
![]() |
loadClassObject(cls:Class):void
| ContentLoader | |
![]() |
loadDisplayObject(disp:DisplayObject):void
| ContentLoader | |
![]() |
measureContent():void
| ContentLoader | |
| Event | Summary | Defined by | ||
|---|---|---|---|---|
![]() | Dispatched when content loading is complete. | ContentLoader | ||
![]() | Dispatched when a network request is made over HTTP and Flash Player can detect the HTTP status code. | ContentLoader | ||
![]() | Dispatched when the properties and methods of a loaded SWF file are accessible. | ContentLoader | ||
![]() | Dispatched when an input/output error occurs. | ContentLoader | ||
![]() | Dispatched when a network operation starts. | ContentLoader | ||
![]() | Dispatched when content is loading. | ContentLoader | ||
| Dispatched when content loading is complete and the image is ready. | ImageBox | |||
![]() | Dispatched when a security error occurs while content is loading. | ContentLoader | ||
![]() | Dispatched when a loaded object is removed, or when a second load is performed by the same ContentLoader control and the original content is removed prior to the new load beginning. | ContentLoader | ||
| Style | Description | Defined by | ||
|---|---|---|---|---|
|
backgroundAlpha
| Type: Number CSS Inheritance: no Alpha level of the color defined by the backgroundColor
property, of the image or SWF file defined by the backgroundImage
style.
Valid values range from 0.0 to 1.0.
The default value is 1.0. | ImageBox | ||
|
backgroundColor
| Type: uint Format: Color CSS Inheritance: no Background color of a component. You can have both a backgroundColor and a
backgroundImage set.
Some components do not have a background.
The DataGrid control ignores this style.
The default value is undefined, which means it is not set.
If both this style and the backgroundImage style
are undefined, the component has a transparent background.
For the Application container, this style specifies the background color while the application loads, and a background gradient while it is running. Flex calculates the gradient pattern between a color slightly darker than the specified color, and a color slightly lighter than the specified color. The default skins of most Flex controls are partially transparent. As a result, the background color of
a container partially "bleeds through" to controls that are in that container. You can avoid this by setting the
alpha values of the control's
<mx:Container backgroundColor="0x66CC66"/>
<mx:ControlName ... fillAlphas="[1,1]"/>
</mx:Container>
| ImageBox | ||
|
backgroundDisabledColor
| Type: uint Format: Color CSS Inheritance: yes Background color of the component when it is disabled. The global default value is undefined.
The default value for List controls is 0xDDDDDD (light gray).
If a container is disabled, the background is dimmed, and the degree of
dimming is controlled by the disabledOverlayAlpha style.
| ImageBox | ||
|
backgroundImage
| Type: Object Format: File CSS Inheritance: no Background image of a component. This can be an absolute or relative URL or class. You can either have both a backgroundColor and a
backgroundImage set at the same time. The background image is displayed
on top of the background color.
The default value is undefined, meaning "not set".
If this style and the backgroundColor style are undefined,
the component has a transparent background.
The default skins of most Flex controls are partially transparent. As a result, the background image of
a container partially "bleeds through" to controls that are in that container. You can avoid this by setting the
alpha values of the control's
<mx:Container backgroundColor="0x66CC66"/>
<mx:ControlName ... fillAlphas="[1,1]"/>
</mx:Container>
| ImageBox | ||
|
backgroundSize
| Type: String CSS Inheritance: no Scales the image specified by backgroundImage
to different percentage sizes.
A value of "100%" stretches the image
to fit the entire component.
To specify a percentage value, you must include the percent sign (%).
The default value is "auto", which maintains
the original size of the image.
| ImageBox | ||
|
borderAlpha
| Type: Number CSS Inheritance: no Alpha level of the color defined by the borderColor
property.
Valid values range from 0.0 to 1.0.
The default value is 1.0. | ImageBox | ||
|
borderColor
| Type: uint Format: Color CSS Inheritance: no Color of the border. The default value depends on the component class; if not overridden for the class, the default value is 0xB7BABC.
| ImageBox | ||
|
borderSides
| Type: String CSS Inheritance: no Bounding box sides. A space-delimited String that specifies the sides of the border to show. The String can contain "left", "top",
"right", and "bottom" in any order.
The default value is "left top right bottom",
which shows all four sides.
This style is only used when borderStyle is "solid".
| ImageBox | ||
|
borderSkin
| Type: Class CSS Inheritance: no The border skin of the component. The default value is mx.skins.halo.HaloBorder. | ImageBox | ||
|
borderStyle
| Type: String CSS Inheritance: no Bounding box style. The possible values are "none", "solid",
"inset", and "outset".
The default value depends on the component class;
if not overridden for the class, the default value is "inset".
The default value for most Containers is "none".
| ImageBox | ||
|
borderThickness
| Type: Number Format: Length CSS Inheritance: no Bounding box thickness. Only used when borderStyle is set to "solid".
The default value is 1. | ImageBox | ||
![]() | Type: Class CSS Inheritance: no The name of class to use as the ContentLoader border skin if the control cannot load the content. | ContentLoader | ||
![]() | Type: Class CSS Inheritance: no The name of the class to use as the ContentLoader skin if the control cannot load the content. | ContentLoader | ||
|
cornerRadius
| Type: Number Format: Length CSS Inheritance: no Radius of component corners. The default value depends on the component class; if not overriden for the class, the default value is 0. The default value for ApplicationControlBar is 5. | ImageBox | ||
|
dropShadowColor
| Type: uint Format: Color CSS Inheritance: yes Color of the drop shadow. The default value is 0x000000. | ImageBox | ||
|
dropShadowEnabled
| Type: Boolean CSS Inheritance: no Boolean property that specifies whether the component has a visible drop shadow. This style is used with borderStyle="solid".
The default value is false.
Note: For drop shadows to appear on containers, set
| ImageBox | ||
![]() | Type: String CSS Inheritance: no The horizontal alignment of the content when it does not have a one-to-one aspect ratio. | ContentLoader | ||
|
shadowDirection
| Type: String CSS Inheritance: no Direction of the drop shadow. Possible values are "left", "center",
and "right".
The default value is "center". | ImageBox | ||
|
shadowDistance
| Type: Number Format: Length CSS Inheritance: no Distance of the drop shadow. If the property is set to a negative value, the shadow appears above the component. The default value is 2. | ImageBox | ||
![]() | Type: String CSS Inheritance: no The vertical alignment of the content when it does not have a one-to-one aspect ratio. | ContentLoader | ||
| Effect | Description | Defined by | ||
|---|---|---|---|---|
|
acompleteEffect
| Triggering event: complete
An effect that is started when the complete event is dispatched. | ImageBox | ||
![]() | Triggering event: complete
An effect that is started when the complete event is dispatched. | ContentLoader | ||
| blockTillLoaded | property |
blockTillLoaded:Boolean [read-write]A flag that indicates whether to block loading an image until the current image has completed loading and running its effect.
The default value is false.
public function get blockTillLoaded():Boolean
public function set blockTillLoaded(value:Boolean):void
| _completeEffect | property |
protected var _completeEffect:Effect
| completeEffect | property |
completeEffect:Effect [read-write]The effect to be played when the image has been loaded
Implementation public function get completeEffect():Effect
public function set completeEffect(value:Effect):void
| newEffectTarget | property |
newEffectTarget:UIComponent [write-only]This property can be used as the source for data binding.
Implementation public function set newEffectTarget(value:UIComponent):void
| oldEffectTarget | property |
oldEffectTarget:UIComponent [write-only]This property can be used as the source for data binding.
Implementation public function set oldEffectTarget(value:UIComponent):void
| ImageBox | () | constructor |
public function ImageBox()Constructor.
| getBorderMetrics | () | method |
protected function getBorderMetrics():EdgeMetrics
Returns an EdgeMetrics object that has four properties:
left, top, right,
and bottom.
The value of each property is equal to the thickness of one side
of the border, expressed in pixels.
Unlike viewMetrics, this property is not
overriden by subclasses of Container.
EdgeMetrics |
| getLoader | () | method |
protected override function getLoader():ObjectCreates a new loader
ReturnsObject |
| load | () | method |
public override function load(url:Object = null):void
Loads an image or SWF file.
The url argument can reference a GIF, JPEG, PNG,
or SWF file; you cannot use this method to load an SVG file.
Instead, you must load it using an Embed statement
with the source property.
url:Object (default = null) — Absolute or relative URL of the GIF, JPEG, PNG,
or SWF file to load.
|
| ready | event |
flash.events.Event
xp.events.Events.READY
Dispatched when content loading is complete and the image is ready.
This event is dispatched regardless of whether the load was triggered
by an autoload or an explicit call to the load() method.
The Events.READY constant defines the value of the
type property of the event object for an ready event.
The properties of the event object have the following values:
| Property | Value |
|---|---|
bubbles | false |
cancelable | false |
currentTarget | The Object that defines the
event listener that handles the event. For example, if you use
myButton.addEventListener() to register an event listener,
myButton is the value of the currentTarget. |
target | The Object that dispatched the event;
it is not always the Object listening for the event.
Use the currentTarget property to always access the
Object listening for the event. |