Flex Examples » Panel http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Smoothing the background fill on an MX Panel container in Flex 3 http://blog.flexexamples.com/2010/03/15/smoothing-the-background-fill-on-an-mx-panel-container-in-flex-3/ http://blog.flexexamples.com/2010/03/15/smoothing-the-background-fill-on-an-mx-panel-container-in-flex-3/#comments Tue, 16 Mar 2010 01:34:36 +0000 Peter deHaan http://blog.flexexamples.com/?p=2601 The following example shows how you can apply smoothing to a background image fill on an MX Panel container in Flex 3 by extending the BitmapAsset class, setting the Boolean smoothing property, and setting the backgroundImage and backgroundSize styles.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/03/15/smoothing-the-background-fill-on-an-mx-panel-container-in-flex-3/ --> <mx:Application name="Embed_smoothing_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">   <mx:Panel id="pnl1" [...]]]> The following example shows how you can apply smoothing to a background image fill on an MX Panel container in Flex 3 by extending the BitmapAsset class, setting the Boolean smoothing property, and setting the backgroundImage and backgroundSize styles.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/15/smoothing-the-background-fill-on-an-mx-panel-container-in-flex-3/ -->
<mx:Application name="Embed_smoothing_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Panel id="pnl1"
            title="default"
            width="100%" height="50%"
            backgroundImage="@Embed('fx_appicon-tn.gif')"
            backgroundSize="100%"/>
 
    <mx:Panel id="pnl2"
            title="smoothing (MXML)"
            width="100%" height="50%"
            backgroundImage="{FxLogo}"
            backgroundSize="100%"/>
 
</mx:Application>

And the custom BitmapAsset class, FxLogo.as, is as follows:

/**
 * http://blog.flexexamples.com/2010/03/15/smoothing-the-background-fill-on-an-mx-panel-container-in-flex-3/ 
 */
package {
    import mx.core.BitmapAsset;
 
    [Embed(source="fx_appicon-tn.gif")]
    public class FxLogo extends BitmapAsset {
        public function FxLogo() {
            smoothing = true;
        }
    }
}

You can also set the backgroundImage and backgroundSize styles in an external .CSS file or <Style> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/15/smoothing-the-background-fill-on-an-mx-panel-container-in-flex-3/ -->
<mx:Application name="Embed_smoothing_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Style>
        .fxLogoStyles {
            backgroundImage: ClassReference("FxLogo");
            backgroundSize: "100%";
        }
    </mx:Style>
 
    <mx:Panel id="pnl1"
            title="default"
            width="100%" height="50%"
            backgroundImage="@Embed('fx_appicon-tn.gif')"
            backgroundSize="100%"/>
 
    <mx:Panel id="pnl2"
            title="smoothing (CSS)"
            width="100%" height="50%"
            styleName="fxLogoStyles" />
 
</mx:Application>

Or you can also set the backgroundImage and backgroundSize styles using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/15/smoothing-the-background-fill-on-an-mx-panel-container-in-flex-3/ -->
<mx:Application name="Embed_smoothing_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            protected function init():void {
                pnl2.setStyle("backgroundImage", FxLogo);
                pnl2.setStyle("backgroundSize", "100%");
            }
        ]]>
    </mx:Script>
 
    <mx:Panel id="pnl1"
            title="default"
            width="100%" height="50%"
            backgroundImage="@Embed('fx_appicon-tn.gif')"
            backgroundSize="100%"/>
 
    <mx:Panel id="pnl2"
            title="smoothing (ActionScript)"
            width="100%" height="50%"
            initialize="init();" />
 
</mx:Application>
 
]]> http://blog.flexexamples.com/2010/03/15/smoothing-the-background-fill-on-an-mx-panel-container-in-flex-3/feed/ 1 Setting a control bar background image fill on a Halo Panel control in Flex 4 http://blog.flexexamples.com/2009/07/08/setting-a-control-bar-background-image-fill-on-a-halo-panel-control-in-flex-4/ http://blog.flexexamples.com/2009/07/08/setting-a-control-bar-background-image-fill-on-a-halo-panel-control-in-flex-4/#comments Thu, 09 Jul 2009 06:59:06 +0000 Peter deHaan http://blog.flexexamples.com/?p=1469 The following example shows how you can set the control bar background image fill on a Halo Panel control (with default Spark skin) in Flex 4 by setting the borderSkin style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/07/08/setting-a-control-bar-background-image-fill-on-a-halo-panel-control-in-flex-4/ --> <s:Application name="Halo_Panel_borderSkin_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo">   <mx:Panel id="panel" borderSkin="skins.CustomPanelBorderSkin" width="80%" height="80%" horizontalCenter="0" [...]]]> The following example shows how you can set the control bar background image fill on a Halo Panel control (with default Spark skin) in Flex 4 by setting the borderSkin style.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/08/setting-a-control-bar-background-image-fill-on-a-halo-panel-control-in-flex-4/ -->
<s:Application name="Halo_Panel_borderSkin_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <mx:Panel id="panel"
            borderSkin="skins.CustomPanelBorderSkin"
            width="80%" height="80%"
            horizontalCenter="0" verticalCenter="0">
        <s:List id="list" labelField="fontName" width="100%" height="100%">
            <s:dataProvider>
                <s:ArrayList source="{Font.enumerateFonts(true)}" />
            </s:dataProvider>
        </s:List>
        <mx:ControlBar width="100%" height="60">
            <s:Group width="100%">
                <s:SimpleText id="lbl"
                        text="The quick brown fox jumps over the lazy dog"
                        fontFamily="{list.selectedItem.fontName}"
                        fontSize="32"
                        maxDisplayedLines="1"
                        width="100%" />
            </s:Group>
        </mx:ControlBar>
    </mx:Panel>
 
</s:Application>

And the custom skin class, skins/CustomPanelBorderSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/08/setting-a-control-bar-background-image-fill-on-a-halo-panel-control-in-flex-4/ -->
<s:SparkSkin name="CustomPanelBorderSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        implements="mx.core.IRectangularBorder">
 
    <fx:Script>
        <![CDATA[
            import mx.core.EdgeMetrics;
            import mx.core.IUIComponent;
 
            /* Define the skin elements that should not be colorized. 
               For panel, border and title backround are skinned, but the content area and title text are not. */
            static private const exclusions:Array = ["background"];
            override public function get colorizeExclusions():Array {
                return exclusions;
            }
 
            /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
            static private const contentFill:Array = ["bgFill"];
            override public function get contentItems():Array {
                return contentFill
            }
 
            private var _metrics:EdgeMetrics = new EdgeMetrics(1, 32, 1, 1);
            public function get borderMetrics():EdgeMetrics {
                var hasPanelParent:Boolean = isPanel(parent);
                var controlBar:IUIComponent = hasPanelParent ? Object(parent).mx_internal::_controlBar : null;
 
                if (controlBar && controlBar.includeInLayout) {
                    _metrics.bottom = controlBar.getExplicitOrMeasuredHeight() + 1;
                } else {
                    _metrics.bottom = 1;
                }
                return _metrics;
            }
 
            public function get backgroundImageBounds():Rectangle {
                return null;
            }
 
            public function set backgroundImageBounds(value:Rectangle):void {
            }
 
            public function get hasBackgroundImage():Boolean {
                return false;
            }
 
            public function layoutBackgroundImage():void {
            }
 
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                var em:EdgeMetrics = borderMetrics;
                if (em.bottom > 1) {
                    cbbg.height = em.bottom - 1;
                    cbdiv.bottom = cbbg.height;
                    cbbg.visible = cbdiv.visible = true;
                } else {
                    cbbg.visible = cbdiv.visible = false;
                }
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
 
            private static var panels:Object = {};
 
            private static function isPanel(parent:Object):Boolean {
                var s:String = getQualifiedClassName(parent);
                if (panels[s] == 1) {
                    return true;
                }
                if (panels[s] == 0) {
                    return false;
                }
                if (s == "mx.containers::Panel") {
                    panels[s] == 1;
                    return true;
                }
                var x:XML = describeType(parent);
                var xmllist:XMLList = x.extendsClass.(@type == "mx.containers::Panel");
                if (xmllist.length() == 0) {
                    panels[s] = 0;
                    return false;
                }
                panels[s] = 1;
                return true;
            }
        ]]>
    </fx:Script>
 
    <!-- drop shadow -->
    <s:Rect left="0" top="0" right="0" bottom="0">
        <s:filters>
            <s:DropShadowFilter blurX="20" blurY="20" alpha="0.32" distance="11" angle="90" knockout="true" />
        </s:filters>
        <s:fill>
            <s:SolidColor color="0" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 1: border -->
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:stroke>
            <s:SolidColorStroke color="0" alpha="0.50" weight="1" />
        </s:stroke>
    </s:Rect>
 
    <!-- layer 2: background fill -->
    <s:Rect id="background" left="1" top="1" right="1" bottom="1">
        <s:fill>
            <s:SolidColor color="0xFFFFFF" id="bgFill" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 3: title bar fill -->
    <s:Rect left="1" right="1" top="1" height="30">
       <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xE2E2E2" />
                <s:GradientEntry color="0xD9D9D9" />
            </s:LinearGradient>
       </s:fill>
    </s:Rect>
 
    <!-- layer 4: title bar highlight -->
    <s:Rect left="1" right="1" top="1" height="30">
       <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0xEAEAEA" />
                <s:GradientEntry color="0xD9D9D9" />
            </s:LinearGradientStroke>
       </s:stroke>
    </s:Rect>
    <s:Rect left="1" right="1" top="31" height="1">
        <s:fill>
            <s:SolidColor color="0xC0C0C0" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 5: control bar background -->
    <s:Rect id="cbbg" left="1" right="1" bottom="1" height="20" alpha="0.6">
        <s:fill>
            <s:BitmapFill source="@Embed('assets/pattern_149.gif')" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 6: control bar divider line -->
    <s:Rect id="cbdiv" left="1" right="1" bottom="20" height="1">
        <s:fill>
            <s:SolidColor color="0xCDCDCD" />
        </s:fill>
    </s:Rect>
 
</s:SparkSkin>

Or, you can set the borderSkin style globally using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/08/setting-a-control-bar-background-image-fill-on-a-halo-panel-control-in-flex-4/ -->
<s:Application name="Halo_Panel_borderSkin_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import skins.CustomPanelBorderSkin;
 
            private function init():void {
                var panelStyles:CSSStyleDeclaration = StyleManager.getStyleDeclaration("mx.containers.Panel");
                panelStyles.setStyle("borderSkin", CustomPanelBorderSkin);
            }
        ]]>
    </fx:Script>
 
    <mx:Panel id="panel"
            borderSkin="skins.CustomPanelBorderSkin"
            width="80%" height="80%"
            horizontalCenter="0" verticalCenter="0">
        <s:List id="list" labelField="fontName" width="100%" height="100%">
            <s:dataProvider>
                <s:ArrayList source="{Font.enumerateFonts(true)}" />
            </s:dataProvider>
        </s:List>
        <mx:ControlBar width="100%" height="60">
            <s:Group width="100%">
                <s:SimpleText id="lbl"
                        text="The quick brown fox jumps over the lazy dog"
                        fontFamily="{list.selectedItem.fontName}"
                        fontSize="32"
                        maxDisplayedLines="1"
                        width="100%" />
            </s:Group>
        </mx:ControlBar>
    </mx:Panel>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/07/08/setting-a-control-bar-background-image-fill-on-a-halo-panel-control-in-flex-4/feed/ 2 Toggling the drop shadow on a Panel container in Flex http://blog.flexexamples.com/2008/10/19/toggling-the-drop-shadow-on-a-panel-container-in-flex/ http://blog.flexexamples.com/2008/10/19/toggling-the-drop-shadow-on-a-panel-container-in-flex/#comments Mon, 20 Oct 2008 05:25:02 +0000 Peter deHaan http://blog.flexexamples.com/2008/10/19/toggling-the-drop-shadow-on-a-panel-container-in-flex/ The following example shows how you can toggle the drop shadow on a Flex Panel container by setting the dropShadowEnabled style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/10/19/toggling-the-drop-shadow-on-a-panel-container-in-flex/ --> <mx:Application name="Panel_dropShadowEnabled_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:CheckBox id="checkBox" label="dropShadowEnabled:" labelPlacement="left" selected="true" /> </mx:ApplicationControlBar> <mx:Panel id="panel" title="Panel [...]]]> The following example shows how you can toggle the drop shadow on a Flex Panel container by setting the dropShadowEnabled style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/19/toggling-the-drop-shadow-on-a-panel-container-in-flex/ -->
<mx:Application name="Panel_dropShadowEnabled_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="dropShadowEnabled:"
                labelPlacement="left"
                selected="true" />
    </mx:ApplicationControlBar>

    <mx:Panel id="panel"
            title="Panel title"
            width="100%"
            height="100%"
            borderColor="haloSilver"
            dropShadowEnabled="{checkBox.selected}">
        <mx:Label text="Panel contents" />
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

You can also set the dropShadowEnabled style in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/19/toggling-the-drop-shadow-on-a-panel-container-in-flex/ -->
<mx:Application name="Panel_dropShadowEnabled_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        Panel {
            border-color: haloSilver;
            dropShadowEnabled: false;
        }
    </mx:Style>

    <mx:Panel id="panel"
            title="Panel title"
            width="100%"
            height="100%">
        <mx:Label text="Panel contents" />
    </mx:Panel>

</mx:Application>

Or, you can set the dropShadowEnabled style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/19/toggling-the-drop-shadow-on-a-panel-container-in-flex/ -->
<mx:Application name="Panel_dropShadowEnabled_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                panel.setStyle("dropShadowEnabled", checkBox.selected);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="dropShadowEnabled:"
                labelPlacement="left"
                selected="true"
                change="checkBox_change(event);" />
    </mx:ApplicationControlBar>

    <mx:Panel id="panel"
            title="Panel title"
            width="100%"
            height="100%"
            borderColor="haloSilver">
        <mx:Label text="Panel contents" />
    </mx:Panel>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/10/19/toggling-the-drop-shadow-on-a-panel-container-in-flex/feed/ 1 Adding a title icon to a Panel container in Flex http://blog.flexexamples.com/2008/10/18/adding-a-title-icon-to-a-panel-container-in-flex/ http://blog.flexexamples.com/2008/10/18/adding-a-title-icon-to-a-panel-container-in-flex/#comments Sun, 19 Oct 2008 06:11:56 +0000 Peter deHaan http://blog.flexexamples.com/2008/10/18/adding-a-title-icon-to-a-panel-container-in-flex/ The following example shows how you can add an icon to a Flex Panel container’s title bar by setting the titleIcon property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/10/18/adding-a-title-icon-to-a-panel-container-in-flex/ --> <mx:Application name="Panel_titleIcon_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:String id="lorem" source="lorem.txt" /> <mx:Panel id="panel" title="Panel title" titleIcon="@Embed('assets/Panel.png')"> <mx:Text id="txt" [...]]]> The following example shows how you can add an icon to a Flex Panel container’s title bar by setting the titleIcon property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/18/adding-a-title-icon-to-a-panel-container-in-flex/ -->
<mx:Application name="Panel_titleIcon_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

    <mx:Panel id="panel"
            title="Panel title"
            titleIcon="@Embed('assets/Panel.png')">
        <mx:Text id="txt"
                text="{lorem}"
                width="500"
                textAlign="justify"
                selectable="false" />
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/18/adding-a-title-icon-to-a-panel-container-in-flex/ -->
<mx:Application name="Panel_titleIcon_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

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

    <mx:Script>
        <![CDATA[
            import mx.controls.Text;
            import mx.containers.Panel;

            [Embed("assets/Panel.png")]
            private const PanelTitleIcon:Class;

            private var panel:Panel;

            private function init():void {
                var txt:Text = new Text();
                txt.text = lorem;
                txt.selectable = false;
                txt.width = 500;
                txt.setStyle("textAlign", "justify");

                panel = new Panel();
                panel.title = "Panel title";
                panel.titleIcon = PanelTitleIcon;
                panel.addChild(txt);
                addChild(panel);
            }
        ]]>
    </mx:Script>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/10/18/adding-a-title-icon-to-a-panel-container-in-flex/feed/ 4 Adding links to a Panel container’s status text in Flex http://blog.flexexamples.com/2008/04/17/adding-links-to-a-panel-containers-status-text-in-flex/ http://blog.flexexamples.com/2008/04/17/adding-links-to-a-panel-containers-status-text-in-flex/#comments Fri, 18 Apr 2008 02:13:27 +0000 Peter deHaan http://blog.flexexamples.com/2008/04/17/adding-links-to-a-panel-containers-status-text-in-flex/ The following example shows how you can assign an HTML formatted string to a Panel container’s status text field using the getStatusTextField() method in the mx_internal namespace.

Since this example uses the mx_internal namespace, you can’t always depend on this behavior to work in future versions of the Flex SDK. Use at your [...]]]> The following example shows how you can assign an HTML formatted string to a Panel container’s status text field using the getStatusTextField() method in the mx_internal namespace.

Since this example uses the mx_internal namespace, you can’t always depend on this behavior to work in future versions of the Flex SDK. Use at your own risk.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/17/adding-links-to-a-panel-containers-status-text-in-flex/ -->
<mx:Application name="Panel_getStatusTextField_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">
 
    <mx:Script>
        <![CDATA[
            import mx.core.IUITextField;
            import mx.controls.Alert;
 
            private function init():void {
                var tf:IUITextField = panel.mx_internal::getStatusTextField();
                tf.selectable = true;
                tf.addEventListener(TextEvent.LINK, textField_link);
                tf.htmlText = "status with <a href='event:showAlert'><u>link</u></a>";
 
            }
 
            private function textField_link(evt:TextEvent):void {
                Alert.show("Success! A Panel container with a link in the status text.", evt.text);
            }
        ]]>
    </mx:Script>
 
    <mx:Panel id="panel"
            title="Title"
            status="status with link"
            width="320"
            height="240">
        <mx:Text text="Click the link in the Panel container's status bar to launch an Alert control."
                width="100%" selectable="false" />
        <mx:ControlBar>
            <mx:Text htmlText="&lt;b&gt;Note:&lt;/b&gt; The status text field must have it's selectable property set to true in order to dispatch the link event."
                    width="100%" selectable="false" />
        </mx:ControlBar>
    </mx:Panel>
 
</mx:Application>

View source is enabled in the following example.

The status text field must have it’s selectable property set to true in order to dispatch the link event.

Note that the Panel container’s status message was initially set to the desired final string, minus any HTML formatting. This ensures that when the status text is created and measured, the HTML formatted text should fit correctly when it is substituted. This may not work if the width of your text changes due to bold fonts or other changes.

 
]]> http://blog.flexexamples.com/2008/04/17/adding-links-to-a-panel-containers-status-text-in-flex/feed/ 5 Setting the background alpha on a Panel container in Flex http://blog.flexexamples.com/2008/03/12/setting-the-background-alpha-on-a-panel-container-in-flex/ http://blog.flexexamples.com/2008/03/12/setting-the-background-alpha-on-a-panel-container-in-flex/#comments Thu, 13 Mar 2008 03:25:43 +0000 Peter deHaan http://blog.flexexamples.com/2008/03/12/setting-the-background-alpha-on-a-panel-container-in-flex/ In a previous example, “Setting the border alpha on a Panel container in Flex”, we saw how you could change a panel’s border alpha by setting the borderAlpha style.

The following example shows how you can set the background alpha on a Flex Panel container by setting the backgroundAlpha style.

Full code after the [...]]]> In a previous example, “Setting the border alpha on a Panel container in Flex”, we saw how you could change a panel’s border alpha by setting the borderAlpha style.

The following example shows how you can set the background alpha on a Flex Panel container by setting the backgroundAlpha style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/12/setting-the-background-alpha-on-a-panel-container-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        creationComplete="init();">

    <mx:Style>
        Application {
            backgroundColor: red;
            backgroundGradientColors: red, black;
        }
    </mx:Style>

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

            private function init():void {
                slider.value = panel.getStyle("backgroundAlpha");
            }

            private function slider_change(evt:SliderEvent):void {
                panel.setStyle("backgroundAlpha", evt.value);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="backgroundAlpha:" />
        <mx:HSlider id="slider"
                minimum="0.0"
                maximum="1.0"
                liveDragging="true"
                snapInterval="0.01"
                tickInterval="0.1"
                change="slider_change(event);" />
    </mx:ApplicationControlBar>

    <mx:Panel id="panel" title="Panel" width="100%" height="100%">
        <mx:ControlBar>
            <mx:Label text="ControlBar" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

You can also set the backgroundAlpha style in MXML, using the following snippet:

<mx:Panel title="Panel" backgroundAlpha="0.75">
...
</mx:Panel>

Or you can set the backgroundAlpha style in an external .CSS file or a <mx:Style /> block, as seen in the following snippet:

<mx:Style>
    Panel {
        backgroundAlpha: 0.75; /* 75% */
    }
</mx:Style>
 
]]> http://blog.flexexamples.com/2008/03/12/setting-the-background-alpha-on-a-panel-container-in-flex/feed/ 3 Setting the border alpha on a Panel container in Flex http://blog.flexexamples.com/2008/03/12/setting-the-border-alpha-on-a-panel-container-in-flex/ http://blog.flexexamples.com/2008/03/12/setting-the-border-alpha-on-a-panel-container-in-flex/#comments Thu, 13 Mar 2008 02:17:37 +0000 Peter deHaan http://blog.flexexamples.com/2008/03/12/setting-the-border-alpha-on-a-panel-container-in-flex/ The following example shows how you can set the border alpha on a Flex Panel container by setting the borderAlpha style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/03/12/setting-the-border-alpha-on-a-panel-container-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" creationComplete="init();"> <mx:Style> Application { backgroundColor: red; backgroundGradientColors: red, black; } </mx:Style> <mx:Script> <![CDATA[ import [...]]]> The following example shows how you can set the border alpha on a Flex Panel container by setting the borderAlpha style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/12/setting-the-border-alpha-on-a-panel-container-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        creationComplete="init();">

    <mx:Style>
        Application {
            backgroundColor: red;
            backgroundGradientColors: red, black;
        }
    </mx:Style>

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

            private function init():void {
                slider.value = panel.getStyle("borderAlpha");
            }

            private function slider_change(evt:SliderEvent):void {
                panel.setStyle("borderAlpha", evt.value);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="borderAlpha:" />
        <mx:HSlider id="slider"
                minimum="0.0"
                maximum="1.0"
                liveDragging="true"
                snapInterval="0.1"
                tickInterval="0.1"
                change="slider_change(event);" />
    </mx:ApplicationControlBar>

    <mx:Panel id="panel" title="Panel" width="100%" height="100%">
        <mx:ControlBar>
            <mx:Label text="ControlBar" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

For an example on setting the Panel container’s background alpha, see “Setting the background alpha on a Panel container in Flex”.

 
]]> http://blog.flexexamples.com/2008/03/12/setting-the-border-alpha-on-a-panel-container-in-flex/feed/ 2 Using embedded fonts with the Panel container in Flex http://blog.flexexamples.com/2008/02/28/using-embedded-fonts-with-the-panel-container-in-flex/ http://blog.flexexamples.com/2008/02/28/using-embedded-fonts-with-the-panel-container-in-flex/#comments Fri, 29 Feb 2008 05:32:07 +0000 Peter deHaan http://blog.flexexamples.com/2008/02/28/using-embedded-fonts-with-the-panel-container-in-flex/ The following example shows how you can use an embedded font with the Flex Panel container so that a Panel container can be rotated or faded without the text “disappearing”. The trick here is to set the panel’s titleStyleName style to a custom style which sets the font family to the embedded font.

Full code [...]]]> The following example shows how you can use an embedded font with the Flex Panel container so that a Panel container can be rotated or faded without the text “disappearing”. The trick here is to set the panel’s titleStyleName style to a custom style which sets the font family to the embedded font.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/28/using-embedded-fonts-with-the-panel-container-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Verdana");
            fontFamily: VerdanaEmbedded;
        }

        Panel {
            titleStyleName: panelTitleStyleName;
        }

        .panelTitleStyleName {
            fontFamily: VerdanaEmbedded;
            fontWeight: normal;
        }
    </mx:Style>

    <mx:Panel fontFamily="VerdanaEmbedded"
            title="Title"
            status="status"
            width="160"
            height="120"
            rotation="15">
        <mx:Text text="The quick brown fox jumped over the lazy dog."
                width="100%" />
        <mx:ControlBar>
            <mx:Label text="ControlBar label" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/02/28/using-embedded-fonts-with-the-panel-container-in-flex/feed/ 4 Indenting a Flex Panel control’s title http://blog.flexexamples.com/2008/01/14/indenting-a-flex-panel-controls-title/ http://blog.flexexamples.com/2008/01/14/indenting-a-flex-panel-controls-title/#comments Tue, 15 Jan 2008 02:56:42 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/14/indenting-a-flex-panel-controls-title/ The following example shows how you can indent the title of a Panel control in Flex by setting the titleStyleName style and textIndent style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/14/indenting-a-flex-panel-controls-title/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> .myPanelTitle { textIndent: 50; } </mx:Style> <mx:Panel title="Lorem ipsum" [...]]]> The following example shows how you can indent the title of a Panel control in Flex by setting the titleStyleName style and textIndent style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/14/indenting-a-flex-panel-controls-title/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .myPanelTitle {
            textIndent: 50;
        }
    </mx:Style>

    <mx:Panel title="Lorem ipsum"
            titleStyleName="myPanelTitle"
            titleIcon="@Embed('assets/images/accept.png')"
            width="200">
        <mx:Text text="The quick brown fox jumped over the lazy dog."
                width="100%" />
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/01/14/indenting-a-flex-panel-controls-title/feed/ 3 Setting the child layout direction of a Flex Panel container http://blog.flexexamples.com/2008/01/13/setting-the-child-layout-direction-of-a-flex-panel-container/ http://blog.flexexamples.com/2008/01/13/setting-the-child-layout-direction-of-a-flex-panel-container/#comments Sun, 13 Jan 2008 18:21:20 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/13/setting-the-child-layout-direction-of-a-flex-panel-container/ The following example shows how you can set a Panel container’s layout to horizontal or vertical in Flex by setting the layout property.

You can also set the Panel container’s layout to “absolute”. For an example, see “Setting the border thickness in a Flex Panel container”.

Full code after the jump.

The following example shows how you can set a Panel container’s layout to horizontal or vertical in Flex by setting the layout property.

You can also set the Panel container’s layout to “absolute”. For an example, see “Setting the border thickness in a Flex Panel container”.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/13/setting-the-child-layout-direction-of-a-flex-panel-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object label="horizontal" />
        <mx:Object label="vertical" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="layout:">
                <mx:ToggleButtonBar id="toggleButtonBar"
                        dataProvider="{arr}"
                        selectedIndex="1"
                        itemClick="panel.layout = event.label;" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Panel id="panel"
            status="{panel.layout}"
            width="320"
            height="160">
        <mx:Label text="Button" />
        <mx:Label text="ButtonBar" />
        <mx:Label text="CheckBox" />
        <mx:Label text="ColorPicker" />
        <mx:Label text="ComboBox" />
        <mx:Label text="DataGrid" />

        <mx:ControlBar>
            <mx:Button label="Submit" />
            <mx:Button label="Cancel" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/01/13/setting-the-child-layout-direction-of-a-flex-panel-container/feed/ 0