Flex Examples » percentWidth http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Creating a resizing ToolBar in Flex http://blog.flexexamples.com/2008/01/06/creating-a-resizing-toolbar-in-flex/ http://blog.flexexamples.com/2008/01/06/creating-a-resizing-toolbar-in-flex/#comments Sun, 06 Jan 2008 08:26:27 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/06/creating-a-resizing-toolbar-in-flex/ The following example shows how you can create a toolbar in Flex by using the ToolBar container which automatically wraps and re-lays out its children when the toolbar is resized. According to the documentation in the class file (see [SDK Directory]\frameworks\projects\framework\src\mx\controls\richTextEditorClasses\ToolBar.as):

The ToolBar container lays out its children in a single horizontal row. If [...]]]> The following example shows how you can create a toolbar in Flex by using the ToolBar container which automatically wraps and re-lays out its children when the toolbar is resized. According to the documentation in the class file (see [SDK Directory]\frameworks\projects\framework\src\mx\controls\richTextEditorClasses\ToolBar.as):

The ToolBar container lays out its children in a single horizontal row. If the width of the container is less than the measured width, the children wrap to the next line.
While wrapping, any VRule controls (separators) at the end of a row or the beginning of a row are not drawn.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/06/creating-a-resizing-toolbar-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Array id="images">
        <mx:Object label="Button" />
        <mx:Object label="ButtonBar" />
        <mx:Object label="CheckBox" />
        <mx:Object label="ColorPicker" />
        <mx:Object label="ComboBox" />
        <mx:Object label="DataGrid" />
        <mx:Object label="DateChooser" />
        <mx:Object label="DateField" />
        <mx:Object label="HorizontalList" />
        <mx:Object label="HRule" />
        <mx:Object label="HSlider" />
        <mx:Object label="Image" />
        <mx:Object label="Label" />
        <mx:Object label="LinkBar" />
        <mx:Object label="LinkButton" />
        <mx:Object label="List" />
        <mx:Object label="Menu" />
        <mx:Object label="MenuBar" />
        <mx:Object label="NumericStepper" />
        <mx:Object label="ProgressBar" />
        <mx:Object label="RadioButton" />
        <mx:Object label="RadioButtonGroup" />
        <mx:Object label="RichTextEditor" />
        <mx:Object label="Spacer" />
        <mx:Object label="SWFLoader" />
        <mx:Object label="TabBar" />
        <mx:Object label="Text" />
        <mx:Object label="TextArea" />
        <mx:Object label="TextInput" />
        <mx:Object label="TileList" />
        <mx:Object label="Tree" />
        <mx:Object label="VideoDisplay" />
        <mx:Object label="VRule" />
        <mx:Object label="VScrollBar" />
        <mx:Object label="VSlider" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="percentWidth:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="100"
                        value="35"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="10"
                        dataTipPrecision="0" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:VBox id="vBox"
            verticalAlign="middle"
            horizontalAlign="center"
            backgroundColor="black"
            backgroundAlpha="0.1"
            width="100%"
            height="200">
        <mx:ToolBar id="toolBar"
                 percentWidth="{slider.value}"
                 backgroundColor="haloSilver"
                 minWidth="18">
            <mx:Repeater id="imgRepeater"
                    dataProvider="{images}">
                <mx:Image id="img"
                        source="assets/{imgRepeater.currentItem.label}.png"
                        toolTip="{imgRepeater.currentItem.label}" />
            </mx:Repeater>
        </mx:ToolBar>
    </mx:VBox>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/01/06/creating-a-resizing-toolbar-in-flex/feed/ 9 Setting a Flex component or control’s width to a percentage value http://blog.flexexamples.com/2007/09/23/setting-a-flex-component-or-controls-width-to-a-percentage-value/ http://blog.flexexamples.com/2007/09/23/setting-a-flex-component-or-controls-width-to-a-percentage-value/#comments Mon, 24 Sep 2007 03:09:16 +0000 Peter deHaan http://blog.flexexamples.com/2007/09/23/setting-a-flex-component-or-controls-width-to-a-percentage-value/ The following example shows how you can set a Button control to use percentage-based width and heights in ActionScript by using the [aptly named] percentWidth and percentHeight properties respectively.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/09/23/setting-a-flex-component-or-controls-width-to-a-percentage-value/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.events.SliderEvent; private [...]]]> The following example shows how you can set a Button control to use percentage-based width and heights in ActionScript by using the [aptly named] percentWidth and percentHeight properties respectively.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/23/setting-a-flex-component-or-controls-width-to-a-percentage-value/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private function wSlider_change(evt:SliderEvent):void {
                button.percentWidth = evt.value;
                button.label = "w:" + button.width +
                                ", h:" + button.height;
            }

            private function hSlider_change(evt:SliderEvent):void {
                button.percentHeight = evt.value;
                button.label = "w:" + button.width +
                                ", h:" + button.height;
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="percentWidth:" />
        <mx:HSlider id="wSlider"
                liveDragging="true"
                showTrackHighlight="true"
                minimum="10"
                maximum="100"
                change="wSlider_change(event);"
                snapInterval="1"
                tickInterval="10"
                labels="[10%,100%]" />

        <mx:Spacer width="100%" />

        <mx:Label text="percentHeight:" />
        <mx:HSlider id="hSlider"
                liveDragging="true"
                showTrackHighlight="true"
                minimum="10"
                maximum="100"
                change="hSlider_change(event);"
                snapInterval="1"
                tickInterval="10"
                labels="[10%,100%]" />
    </mx:ApplicationControlBar>

    <mx:Button id="button" label="Button" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/09/23/setting-a-flex-component-or-controls-width-to-a-percentage-value/feed/ 2