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.
{ 5 comments… read them below or add one }
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!