Flex Examples » Box http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Changing the arrow button skins on a Flex container’s scroll bars http://blog.flexexamples.com/2008/02/10/changing-the-arrow-button-skins-on-a-flex-containers-scroll-bars/ http://blog.flexexamples.com/2008/02/10/changing-the-arrow-button-skins-on-a-flex-containers-scroll-bars/#comments Sun, 10 Feb 2008 07:34:11 +0000 Peter deHaan http://blog.flexexamples.com/2008/02/10/changing-the-arrow-button-skins-on-a-flex-containers-scroll-bars/ The following example shows how you can change the up arrow and down arrow skins on a horizontal/vertical scroll bar in a Flex container by setting the horizontalScrollBarStyleName, verticalScrollBarStyleName, downArrowSkin, and upArrowSkin styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/02/10/changing-the-arrow-button-skins-on-a-flex-containers-scroll-bars/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> [...]]]> The following example shows how you can change the up arrow and down arrow skins on a horizontal/vertical scroll bar in a Flex container by setting the horizontalScrollBarStyleName, verticalScrollBarStyleName, downArrowSkin, and upArrowSkin styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/10/changing-the-arrow-button-skins-on-a-flex-containers-scroll-bars/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        Container {
            verticalScrollBarStyleName: myVScrollBarStyleName;
            horizontalScrollBarStyleName: myHScrollBarStyleName;
        }

        .myVScrollBarStyleName {
            downArrowSkin: Embed("assets/bullet_add.png");
            upArrowSkin: Embed("assets/bullet_delete.png");
        }

        .myHScrollBarStyleName {
            downArrowSkin: Embed("assets/bullet_add.png");
            upArrowSkin: Embed("assets/bullet_delete.png");
        }
    </mx:Style>

    <mx:String id="lorem" source="lorem.txt" />

    <mx:Box clipContent="true"
            backgroundColor="haloSilver"
            horizontalScrollPolicy="on"
            verticalScrollPolicy="on"
            width="320"
            height="240">
        <mx:Text text="{lorem}" width="550" />
    </mx:Box>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/02/10/changing-the-arrow-button-skins-on-a-flex-containers-scroll-bars/feed/ 12 Clipping a Flex container’s content using the clipContent property http://blog.flexexamples.com/2008/02/02/clipping-a-flex-containers-content-using-the-clipcontent-property/ http://blog.flexexamples.com/2008/02/02/clipping-a-flex-containers-content-using-the-clipcontent-property/#comments Sun, 03 Feb 2008 01:42:03 +0000 Peter deHaan http://blog.flexexamples.com/2008/02/02/clipping-a-flex-containers-content-using-the-clipcontent-property/ The following example shows how you can clip a container’s content in Flex by setting the clipContent property.
According to the Flex 3 documentation for the Container class’s clipContent property:

Whether to apply a clip mask if the positions and/or sizes of this container’s children extend outside the borders of this container. If [...]]]> The following example shows how you can clip a container’s content in Flex by setting the clipContent property.
According to the Flex 3 documentation for the Container class’s clipContent property:

Whether to apply a clip mask if the positions and/or sizes of this container’s children extend outside the borders of this container. If false, the children of this container remain visible when they are moved or sized outside the borders of this container. If true, the children of this container are clipped.
If clipContent is false, then scrolling is disabled for this container and scrollbars will not appear. If clipContent is true, then scrollbars will usually appear when the container’s children extend outside the border of the container.
The default value is true. 

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/02/clipping-a-flex-containers-content-using-the-clipcontent-property/ -->
<mx:Application name="Box_clipContent_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="clipContent:"
                labelPlacement="left"
                selected="false" />
    </mx:ApplicationControlBar>
 
    <mx:Box id="box"
            clipContent="{checkBox.selected}"
            width="320"
            height="240">
        <mx:Image id="img"
                source="http://www.helpexamples.com/flash/images/image1.jpg" />
    </mx:Box>
 
    <mx:Label text="{img.width} x {img.height}" />
 
</mx:Application>

View source is enabled in the following example.

As you can see, the Box container is set to 320 pixels wide by 240 pixels high. The image being loaded is 400 pixels high by 267 pixels wide. When the clipContent property is set to false, the image exceeds the bounds of the Box container causing it to overlap the Label control. If you set the clipContent property to true, the image doesn’t exceed the bounds of the Box container and horizontal and vertical scroll bars appear, allowing you to scroll to see the rest of the content.

 
]]> http://blog.flexexamples.com/2008/02/02/clipping-a-flex-containers-content-using-the-clipcontent-property/feed/ 10 Changing a Box container’s direction in Flex http://blog.flexexamples.com/2008/01/04/changing-a-box-containers-direction-in-flex/ http://blog.flexexamples.com/2008/01/04/changing-a-box-containers-direction-in-flex/#comments Sat, 05 Jan 2008 07:21:51 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/04/changing-a-box-containers-direction-in-flex/ The following example shows you how you can change the direction of a Box container in Flex by setting the direction property to one of the constants in the BoxDirection class. The <mx:Box /> container is the superclass of the HBox container and VBox container. The subclasses (HBox and VBox) do not add any new [...]]]> The following example shows you how you can change the direction of a Box container in Flex by setting the direction property to one of the constants in the BoxDirection class. The <mx:Box /> container is the superclass of the HBox container and VBox container. The subclasses (HBox and VBox) do not add any new functionality, they simply set the direction property automatically to “horizontal” or “vertical”.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/04/changing-a-box-containers-direction-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .myBox {
            paddingLeft: 10;
            paddingRight: 10;
            paddingTop: 10;
            paddingBottom: 10;
            backgroundColor: haloSilver;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;
            import mx.containers.BoxDirection;

            private function comboBox_init():void {
                var arr:Array = [];
                arr.push({label:BoxDirection.HORIZONTAL});
                arr.push({label:BoxDirection.VERTICAL});
                comboBox.dataProvider = arr;
            }

            private function comboBox_change(evt:ListEvent):void {
                box.direction = comboBox.selectedLabel;
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="direction:">
                <mx:ComboBox id="comboBox"
                        initialize="comboBox_init();"
                        change="comboBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Box id="box" direction="horizontal" styleName="myBox">
        <mx:Image source="Button.png" toolTip="Button" />
        <mx:Image source="ButtonBar.png" toolTip="ButtonBar" />
        <mx:Image source="CheckBox.png" toolTip="CheckBox" />
        <mx:Image source="ColorPicker.png" toolTip="ColorPicker" />
        <mx:Image source="ComboBox.png" toolTip="ComboBox" />
    </mx:Box>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/01/04/changing-a-box-containers-direction-in-flex/feed/ 0