Flex Examples
The following examples show how you can position items in an absolute-based layout using the top, bottom, left, right, horizontalCenter, and verticalCenter styles.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/26/positioning-items-in-flex-using-a-constraint-based-layout/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
.bugImage {
bottom: 20;
right: 20;
}
</mx:Style>
<mx:Canvas id="canvas"
backgroundColor="black"
backgroundAlpha="0.4"
width="100%"
height="100%">
<mx:Image source="assets/bug.png"
styleName="bugImage" />
</mx:Canvas>
</mx:Application>
View source is enabled in the following example.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/26/positioning-items-in-flex-using-a-constraint-based-layout/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
Form {
paddingLeft: 0;
paddingRight: 0;
paddingTop: 0;
paddingBottom: 0;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.events.SliderEvent;
private function sliderLeft_change(evt:SliderEvent):void {
image.setStyle("left", sliderLeft.value);
image.setStyle("right", NaN);
sliderRight.value = 0;
}
private function sliderRight_change(evt:SliderEvent):void {
image.setStyle("right", sliderRight.value);
image.setStyle("left", NaN);
sliderLeft.value = 0;
}
private function sliderTop_change(evt:SliderEvent):void {
image.setStyle("top", sliderTop.value);
image.setStyle("bottom", NaN);
sliderBottom.value = 0;
}
private function sliderBottom_change(evt:SliderEvent):void {
image.setStyle("bottom", sliderBottom.value);
image.setStyle("top", NaN);
sliderTop.value = 0;
}
]]>
</mx:Script>
<mx:Number id="MAX_WIDTH">{canvas.width - image.width}</mx:Number>
<mx:Number id="MAX_HEIGHT">{canvas.height - image.height}</mx:Number>
<mx:ApplicationControlBar dock="true">
<mx:Form>
<mx:FormItem label="left:" direction="horizontal">
<mx:HSlider id="sliderLeft"
minimum="0"
maximum="{MAX_WIDTH}"
value="0"
liveDragging="true"
snapInterval="1"
dataTipPrecision="0"
showTrackHighlight="true"
change="sliderLeft_change(event);" />
<mx:Label text="{sliderLeft.value}" />
</mx:FormItem>
<mx:FormItem label="right:" direction="horizontal">
<mx:HSlider id="sliderRight"
minimum="0"
maximum="{MAX_WIDTH}"
value="0"
liveDragging="true"
snapInterval="1"
dataTipPrecision="0"
showTrackHighlight="true"
change="sliderRight_change(event);" />
<mx:Label text="{sliderRight.value}" />
</mx:FormItem>
<mx:FormItem label="top:" direction="horizontal">
<mx:HSlider id="sliderTop"
minimum="0"
maximum="{MAX_HEIGHT}"
liveDragging="true"
snapInterval="1"
dataTipPrecision="0"
showTrackHighlight="true"
change="sliderTop_change(event);" />
<mx:Label text="{sliderTop.value}" />
</mx:FormItem>
<mx:FormItem label="bottom:" direction="horizontal">
<mx:HSlider id="sliderBottom"
minimum="0"
maximum="{MAX_HEIGHT}"
liveDragging="true"
snapInterval="1"
dataTipPrecision="0"
showTrackHighlight="true"
change="sliderBottom_change(event);" />
<mx:Label text="{sliderBottom.value}" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:Canvas id="canvas" width="100%" height="100%">
<mx:Image id="image"
source="assets/bug.png"/>
</mx:Canvas>
</mx:Application>
View source is enabled in the following example.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/26/positioning-items-in-flex-using-a-constraint-based-layout/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Number id="HORIZONTAL_MAX">
{int((canvas.width - image.width) / 2)}
</mx:Number>
<mx:Number id="VERTICAL_MAX">
{int((canvas.height - image.height) / 2)}
</mx:Number>
<mx:ApplicationControlBar dock="true">
<mx:Form>
<mx:FormItem label="horizontalCenter:"
direction="horizontal">
<mx:HSlider id="hSlider"
minimum="{-HORIZONTAL_MAX}"
maximum="{HORIZONTAL_MAX}"
liveDragging="true"
snapInterval="1"
dataTipPrecision="0" />
<mx:Label text="{hSlider.value}" />
</mx:FormItem>
<mx:FormItem label="verticalCenter:"
direction="horizontal">
<mx:HSlider id="vSlider"
minimum="{-VERTICAL_MAX}"
maximum="{VERTICAL_MAX}"
liveDragging="true"
snapInterval="1"
dataTipPrecision="0" />
<mx:Label text="{vSlider.value}" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:Canvas id="canvas"
backgroundColor="black"
backgroundAlpha="0.2"
width="100%"
height="100%">
<mx:Image id="image"
source="assets/bug.png"
verticalCenter="{vSlider.value}"
horizontalCenter="{hSlider.value}" />
</mx:Canvas>
</mx:Application>
View source is enabled in the following example.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
this is a really good code to know about using image in FLEX, but it not telling how can we take images from XMLList and show many images vertically in application.
abhishek,
Does this answer your question: “Displaying images from an XML file using the Repeater component”?
Peter
HI,
Can we load images in HBox or VBox and arrage them at top or left… thats like menu may be positioned in left(Vbox) and top(Hbox)…
If I want positioning several TextInput and Buttons in flex with css, should I define some class for each of them? or is the code that I can use for all together?
I always like what you do here, keep on posting!
how can we find the difference of mouse position to vertical center. Is the vertical center is having the same units as the mous pointer position values (x,y)