| Package | mx.containers |
| Class | public class Canvas |
| Inheritance | Canvas  Container UIComponent FlexSprite Sprite DisplayObjectContainer InteractiveObject DisplayObject EventDispatcher Object |
x and
y properties of each child.
Flex sets the children of a Canvas layout container to their
preferred width and preferred height.
You may override the value for a child's
preferred width by setting its width property to either
a fixed pixel value or a percentage of the container size.
You can set the preferred height in a similar manner.
If you use percentage sizing inside a Canvas container, some of your components may overlap. If this is not the effect you want, plan your component positions and sizes carefully.
MXML Syntax
Hide MXML Syntax
The <mx:Canvas> tag inherits all the tag attributes
of its superclass. Use the following syntax:
Show MXML Syntax
<mx:Canvas>
...
child tags
...
</mx:Canvas>
See also
| Method | Defined by | ||
|---|---|---|---|
|
Canvas()
Constructor.
| Canvas | ||
 |
Adds a child DisplayObject to this Container.
| Container | |
|
Adds a child DisplayObject to this Container.
| Container | |
|
addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void
Registers an event listener object with an EventDispatcher object so that the listener
receives notification of an event.
| EventDispatcher | |
|
Indicates whether the security restrictions
would cause any display objects to be omitted from the list returned by calling
the
DisplayObjectContainer.getObjectsUnderPoint() method
with the specified point point. | DisplayObjectContainer | |
|
Queues a function to be called later.
| UIComponent | |
|
Deletes a style property from this component instance.
| UIComponent | |
|
Determines whether the specified display object is a child of the DisplayObjectContainer instance or
the instance itself.
| DisplayObjectContainer | |
|
Converts a
Point object from content coordinates to global coordinates. | Container | |
|
Converts a
Point object from content to local coordinates. | Container | |
|
Returns a set of properties that identify the child within
this container.
| UIComponent | |
|
Given a single UIComponentDescriptor, create the corresponding
component and add the component as a child of this Container.
| Container | |
|
Iterate through the Array of
childDescriptors,
and call the createComponentFromDescriptor() method for each one. | Container | |
|
Creates an
id reference to this IUIComponent object
on its parent document object. | UIComponent | |
|
Deletes the
id reference to this IUIComponent object
on its parent document object. | UIComponent | |
|
Returns a UITextFormat object corresponding to the text styles
for this UIComponent.
| UIComponent | |
| UIComponent | ||
|
Shows or hides the focus indicator around this component.
| UIComponent | |
|
drawRoundRect(x:Number, y:Number, w:Number, h:Number, r:Object = null, c:Object = null, alpha:Object = null, rot:Object = null, gradient:String = null, ratios:Array = null, hole:Object = null):void
Programatically draws a rectangle into this skin's Graphics object.
| UIComponent | |
|
Called by the effect instance when it stops playing on the component.
| UIComponent | |
|
Called by the effect instance when it starts playing on the component.
| UIComponent | |
|
Ends all currently playing effects on the component.
| UIComponent | |
|
Executes all the data bindings on this Container.
| Container | |
|
Executes the bindings into this Container's child UIComponent objects.
| Container | |
|
Called after printing is complete.
| UIComponent | |
|
Provides the automation object at the specified index.
| UIComponent | |
|
Returns a rectangle that defines the area of the display object relative to the coordinate system
of the
targetCoordinateSpace object. | DisplayObject | |
|
Gets the nth child component object.
| Container | |
|
Returns the child whose
name property is the specified String. | Container | |
|
Gets the zero-based index of a specific child.
| Container | |
|
Returns an Array of DisplayObject objects consisting of the content children
of the container.
| Container | |
|
Finds the type selectors for this UIComponent instance.
| UIComponent | |
|
A convenience method for determining whether to use the
explicit or measured height
| UIComponent | |
|
A convenience method for determining whether to use the
explicit or measured width
| UIComponent | |
|
Gets the object that currently has focus.
| UIComponent | |
|
Returns an array of objects that lie under the specified point and are children
(or grandchildren, and so on) of this DisplayObjectContainer instance.
| DisplayObjectContainer | |
|
Returns a rectangle that defines the boundary of the display object,
based on the coordinate system defined by the
targetCoordinateSpace
parameter, excluding any strokes on shapes. | DisplayObject | |
|
Returns the item in the
dataProvider that was used
by the specified Repeater to produce this Repeater, or
null if this Repeater isn't repeated. | UIComponent | |
|
Gets a style property that has been set anywhere in this
component's style lookup chain.
| UIComponent | |
|
Converts a
Point object from global to content coordinates. | Container | |
|
Converts the
point object from the Stage (global) coordinates
to the display object's (local) coordinates. | DisplayObject | |
|
Checks whether the EventDispatcher object has any listeners registered for a specific type
of event.
| EventDispatcher | |
|
Indicates whether an object has a specified property defined.
| Object | |
|
Evaluates the display object to see if it overlaps or intersects with the
obj display object. | DisplayObject | |
|
Evaluates the display object to see if it overlaps or intersects with the
point specified by the
x and y parameters. | DisplayObject | |
|
Returns a box Matrix which can be passed to the
drawRoundRect() method
as the rot parameter when drawing a horizontal gradient. | UIComponent | |
|
Initializes the internal structure of this component.
| UIComponent | |
|
Initializes various properties which keep track of repeated instances
of this component.
| UIComponent | |
|
Marks a component so that its
updateDisplayList()
method gets called during a later screen update. | UIComponent | |
|
Marks a component so that its
commitProperties()
method gets called during a later screen update. | UIComponent | |
|
Marks a component so that its
measure()
method gets called during a later screen update. | UIComponent | |
|
Indicates whether an instance of the Object class is in the prototype chain of the object specified
as the parameter.
| Object | |
|
Converts a
Point object from local to content coordinates. | Container | |
|
Converts the
point object from the display object's (local) coordinates to the
Stage (global) coordinates. | DisplayObject | |
|
Measures the specified HTML text, which may contain HTML tags such
as
<font> and <b>,
assuming that it is displayed
in a single-line UITextField using a UITextFormat
determined by the styles of this UIComponent. | UIComponent | |
|
Measures the specified text, assuming that it is displayed
in a single-line UITextField using a UITextFormat
determined by the styles of this UIComponent.
| UIComponent | |
|
Moves the component to a specified position within its parent.
| UIComponent | |
|
Propagate style changes to the children.
| UIComponent | |
|
Returns
true if the chain of owner properties
points from child to this UIComponent. | UIComponent | |
|
Called by Flex when a UIComponent object is added to or removed from a parent.
| UIComponent | |
|
Prepares an IFlexDisplayObject for printing.
| UIComponent | |
|
Indicates whether the specified property exists and is enumerable.
| Object | |
|
Builds or rebuilds the CSS style cache for this component
and, if the
recursive parameter is true,
for all descendants of this component as well. | UIComponent | |
|
For each effect event, register the EffectManager
as one of the event listeners.
| UIComponent | |
|
Removes all children from the child list of this container.
| Container | |
|
Removes a child DisplayObject from the child list of this Container.
| Container | |
|
Removes a child DisplayObject from the child list of this Container
at the specified index.
| Container | |
|
Removes a listener from the EventDispatcher object.
| EventDispatcher | |
|
Replays the specified event.
| UIComponent | |
|
Resolves a child by using the id provided.
| UIComponent | |
|
[static]
Resumes the background processing of methods
queued by
callLater(), after a call to
suspendBackgroundProcessing(). | UIComponent | |
|
Sizes the object.
| UIComponent | |
|
Sets the index of a particular child.
| Container | |
|
Set the current state.
| UIComponent | |
|
Sets the focus to this component.
| UIComponent | |
|
Sets the availability of a dynamic property for loop operations.
| Object | |
|
Sets a style property on this component instance.
| UIComponent | |
|
Called when the
visible property changes. | UIComponent | |
|
Lets the user drag the specified sprite.
| Sprite | |
|
Ends the
startDrag() method. | Sprite | |
|
Detects changes to style properties.
| UIComponent | |
|
Flex calls the
stylesInitialized() method when
the styles for a component are first initialized. | UIComponent | |
|
[static]
Blocks the background processing of methods
queued by
callLater(),
until resumeBackgroundProcessing() is called. | UIComponent | |
|
Swaps the z-order (front-to-back order) of the two specified child objects.
| DisplayObjectContainer | |
|
Swaps the z-order (front-to-back order) of the child objects at the two specified index positions in the
child list.
| DisplayObjectContainer | |
|
Returns a string indicating the location of this object
within the hierarchy of DisplayObjects in the Application.
| FlexSprite | |
|
Validates the position and size of children and draws other
visuals.
| UIComponent | |
|
Validate and update the properties and layout of this object
and redraw it, if necessary.
| UIComponent | |
|
Used by layout logic to validate the properties of a component
by calling the
commitProperties() method. | UIComponent | |
|
Validates the measured size of the component
If the
LayoutManager.invalidateSize() method is called with
this ILayoutManagerClient, then the validateSize() method
is called when it's time to do measurements. | UIComponent | |
|
Handles both the
valid and invalid events from a
validator assigned to this component. | UIComponent | |
|
Returns the primitive value of the specified object.
| Object | |
|
Returns a box Matrix which can be passed to
drawRoundRect()
as the rot parameter when drawing a vertical gradient. | UIComponent | |
|
Checks whether an event listener is registered with this EventDispatcher object or any of
its ancestors for the specified event type.
| EventDispatcher | |
| Method | Defined by | ||
|---|---|---|---|
|
Adjust the focus rectangle.
| UIComponent | |
|
Used internally by the Dissolve Effect to add the overlay to the chrome of a container.
| Container | |
|
Performs any final processing after child objects are created.
| UIComponent | |
|
Processes the properties set on the component.
| UIComponent | |
|
Creates the container's border skin
if it is needed and does not already exist.
| Container | |
|
Create child objects of the component.
| UIComponent | |
|
The event handler called when a UIComponent object gets focus.
| UIComponent | |
|
The event handler called when a UIComponent object loses focus.
| UIComponent | |
|
Finalizes the initialization of this component.
| UIComponent | |
|
Initializes this component's accessibility code.
| UIComponent | |
|
Typically overridden by components containing UITextField objects,
where the UITextField object gets focus.
| UIComponent | |
|
The event handler called for a
keyDown event. | UIComponent | |
|
The event handler called for a
keyUp event. | UIComponent | |
|
Respond to size changes by setting the positions and sizes
of this container's borders.
| Container | |
|
Calculates the preferred minimum and preferred maximum sizes
of the Canvas.
| Canvas | ||
|
Positions the container's content area relative to the viewable area
based on the horizontalScrollPosition and verticalScrollPosition properties.
| Container | |
|
Sets the size of each child of the container.
| Canvas | ||
| Canvas | () | constructor |
public function Canvas()Constructor.
| measure | () | method |
protected override function measure():voidCalculates the preferred minimum and preferred maximum sizes of the Canvas.
The measuredWidth of the Canvas is just large enough
to display all of its children at their preferred widths
without clipping them.
This measure() method calculates the position of the
right-most child, calculates the position of that child's right edge,
and then adds room for the thickness of the Canvas container's border
and the right padding.
The measuredHeight is calculated similarly.
The Canvas container's minWidth and
minHeight properties are not calculated,
so Flex uses a default value of 0.
The Canvas container's maxWidth and
maxHeight properties are not calculated.
The container is assumed to have an infinite maximum
width and height.
All of the values described previously are the measured widths and heights of Canvas. The user can override the measured values by calling the explicitly supplying a value for the following properties:
widthheightminWidthminHeightmaxWidthmaxHeightYou should not call this method directly. The Flex LayoutManager calls it at the appropriate time. At application startup, the Flex LayoutManager attempts to measure all components from the children to the parents before setting them to their final sizes.
This is an advanced method for use in subclassing.
If you override this method, your implementation must either
call the super.measure() method or set the
measuredHeight and
measuredWidth properties.
You may also optionally set the following properties:
measuredMinWidthmeasuredMinHeight| updateDisplayList | () | method |
protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):voidSets the size of each child of the container.
Canvas does not change the positions of its children.
Each child is positioned according to the values of its
x and y properties.
Canvas does set each child's width and height to be equal
to that child's measuredWidth and
measuredHeight if no width
and height values are supplied.
The child can also be made resizable by setting
width and/or height to a percent value.
Resizable children are bound by the right and bottom edges
of the Canvas container.
In this case, the child's minWidth,
minHeight, maxWidth, and
maxHeight values are honored.
You should not call this method directly.
The Flex LayoutManager calls it at the appropriate time.
At application startup, the Flex LayoutManager calls
updateDisplayList() method on every component,
starting with the Application object and working downward.
This is an advanced method for use in subclassing.
If you override this method, your implementation should call the
super.updateDisplayList() method and call the
move() and setActualSize() methods
on each of the children.
For the purposes of performing layout, you should get the size
of this container from the unscaledWidth and
unscaledHeight properties, not the width
and height properties.
The width and height properties
do not take into account the value of the scaleX
and scaleY properties for this container.
unscaledWidth:Number — Specifies the width of the component, in pixels,
in the component's coordinates, regardless of the value of the
scaleX property of the component.
|
|
unscaledHeight:Number — Specifies the height of the component, in pixels,
in the component's coordinates, regardless of the value of the
scaleY property of the component.
|
<?xml version="1.0"?>
<!-- Simple example to demonstrate the Canvas layout container.-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Panel title="Canvas Container Example" height="95%" width="95%"
paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">
<mx:Label width="100%" color="blue"
text="Use absolute positioning to place the children of a Canvas container."/>
<mx:Canvas borderStyle="solid" height="200" width="100%">
<!-- Stagger the position of the TextInput controls using absolute positioning.-->
<mx:TextInput width="100" x="50" y="5"/>
<mx:TextInput width="100" x="100" y="30"/>
<mx:TextInput width="100" x="150" y="55"/>
<!-- Overlap the VBox containers using layout constraints.-->
<mx:VBox right="115" bottom="50" width="75" height="75" backgroundColor="#0080C0"/>
<mx:VBox right="70" bottom="30" width="75" height="75" backgroundColor="#FFFF80"/>
<mx:VBox right="25" bottom="10" width="75" height="75" backgroundColor="#8080C0" alpha="0.8"/>
<mx:Text right="25" y="110"
text="The Canvas container lets you place components on top of each other."/>
</mx:Canvas>
</mx:Panel>
</mx:Application>
