Positioning items in Flex using a constraint based layout

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.

View MXML

<?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.

View MXML

<?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.

View MXML

<?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.

6 thoughts on “Positioning items in Flex using a constraint based layout

  1. 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.

  2. 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?

  3. 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)

Comments are closed.