Menu ▾ ▴

Spark WindowedApplication

SourceForge Editorial Staff

Darrell Loverin (Dev)
Robert Vollmar (QA)

Functional and Design Specification

Glossary

  • Flex Chrome - Application chrome drawn using Flex/Flash instead of the native operating system. The Flex Chrome consists of a title bar, a border, and a gripper for resizing the window.

  • System Chrome - Application chrome drawn by the native operating system using its native widgets. The chrome consists of a title bar and a window frame for resizing the window.

Summary and Background

The Spark WindowedApplication component is a skinnable version of the Halo WindowedApplication. The Spark WindowedApplication has most of the properties and methods from the Halo WindowedApplication. The main difference between the Spark and Halo versions of WindowedApplication is the Spark component does not support the styles on the Halo component. Instead the style decisions are embedded into the component's skin. If a developer want to use different styles, they can easily create a custom skin.

Usage Scenarios

Use spark.components.WindowedApplication as the root class when creating an AIR application that will be built with Spark components. The advantage of using Spark WindowedApplication over Halo WindowedApplication is the Spark WindowedApplication can be easily skinned and Spark graphic elements may be placed directly in the application without the need to wrap them in a Group tag.

Detailed Description

Most of the properties and methods are the same. All the styles on the Halo component are not available in the Spark component.

Differences between Spark and Halo Components

Properties

  • h5. Added resizeAffordance

The number of pixels from the edge of the application where a mouse click can initiate a resize of the application.

  • h5. Changed statusBar:UIComponent

The type of the status bar was changed from UIComponent to Group.

  • h5. Removed statusBarFactory:IFactory

Used for Halo custom status bars. Not needed in Spark.

  • h5. Removed statusBarStyleFilters:Object

Spark styles are created within the skin.

  • h5. Chanaged titleBar:UIComponent

The type of titleBar has changed from UIComponent to FxTitleBar. Not sure if this should really stay a more generic type like UIComponent.

  • h5. Removed titleBarFactory:IFactory

The titleBar will be created by the Spark infrastructure.

  • h5. Removed titleBarStyleFilters:Object

The titleBar does not support any external styles.

Methods

No changes.

Events

No changes.

Styles

All REMOVED:

buttonAlignment="auto" buttonPadding="2" closeButtonSkin="mx.skins.halo.windowCloseButtonSkin" gripperPadding="3" gripperStyleName="gripperStyle" headerHeight="undefined" maximizeButtonSkin="mx.skins.halo.WindowMaximizeButtonSkin" minimizeButtonSkin="mx.skins.halo.WindowMinimizeButtonSkin" restoreButtonSkin="mx.skins.halo.WindowRestoreButtonSkin" showFlexChrome="true" statusBarBackgroundColor="0xC0C0C0" statusBarBackgroundSkin="mx.skins.halo.StatusBarBackgroundSkin" statusTextStyleName="undefined" titleAlignment="auto" titleBarBackgroundSkin="mx.skins.halo.ApplicationTitleBarBackgroundSkin" titleBarButtonPadding="5" titleBarColors=" 0×000000, 0×000000 " titleTextStyleName="undefined"

Effects

No changes.

New Properties added to both Halo and Spark WindowedApplication

  • h5. backgroundFrameRate

Specifies framerate to use when the application is inactive. When set to -1 no background framerate throttling will occur.

API Description

To save space only the changes from the Halo WindowedApplication are listed. Since most all of the properties and methods are the same, those are not copied here.

sparks.components.WindowedApplication

/**
 *  The WindowedApplication defines the application container
 *  that you use to create Flex applications for AIR applications.
 *
 *  <p>The WindowedApplication serves two roles. It is a replacement for the &lt;spark.components:Application&gt;
 *  tag, functioning as the entry point to a Flex-based AIR application. In addition,
 *  as a container the WindowedApplication defines the layout of the initial window
 *  of a Flex AIR application -- any visual controls defined in the WindowedApplication
 *  become the content of the initial window loaded by the AIR application.</p>
 *
 *  <p>A WindowedApplication is the top-level application of a Flex-based AIR application. It is not
 *  designed to be loaded by other Flex applications. If a WindowedApplication needs to load other
 *  applications, use the Application class as container for those applications. If other windows
 *  are required, use the Window class as a container for those windows.</p>
 *  
 *  <p>Note that because
 *  the WindowedApplication only represents the visual content of a single window, and not
 *  all the windows in a multi-window application, a WindowedApplication instance only dispatches
 *  display-related events (events that the WindowedApplication class inherits from display object base
 *  classes such as InteractiveObject or UIComponent) for its own stage and window, and not for
 *  events that occur on other windows in the application. This differs from a browser-based application,
 *  where a Spark Application container dispatches events for all the windows in the application (because
 *  technically those windows are all display objects rendered on the single Application stage).</p>
 *
 *  @mxml
 *
 *  <p>The <code>&lt;spark.components:WindowedApplication&gt;</code> tag inherits all of the tag
 *  attributes of its superclass and adds the following tag attributes:</p>
 *
 *  <pre>
 *  &lt;spark.components:WindowedApplication
 *    <strong>Properties</strong>
 *    alwaysInFront="false"
 *    autoExit="true"
 *    dockIconMenu="<i>null</i>"
 *    maxHeight="10000"
 *    maxWidth="10000"
 *    menu="<i>null</i>"
 *    minHeight="100"
 *    minWidth="100"
 *    showGripper="true"
 *    showStatusBar="true"
 *    showTitleBar="true"
 *    status=""
 *    systemTrayIconMenu="<i>null</i>"
 *    title=""
 *    titleIcon="<i>null</i>"
 * 
 *    <strong>Effects</strong>
 *    closeEffect="<i>No default</i>"
 *    minimizeEffect="<i>No default</i>"
 *    unminimizeEffect="<i>No default</i>"
 * 
 *    <strong>Events</strong>
 *    applicationActivate="<i>No default</i>"
 *    applicationDeactivate="<i>No default</i>"
 *    closing="<i>No default</i>"
 *    displayStateChange="<i>No default</i>"
 *    displayStateChanging="<i>No default</i>"
 *    invoke="<i>No default</i>"
 *    moving="<i>No default</i>"
 *    networkChange="<i>No default</i>"
 *    resizing="<i>No default</i>"
 *    windowComplete="<i>No default</i>"
 *    windowMove="<i>No default</i>"
 *    windowResize="<i>No default</i>"
 *  /&gt;
 *  </pre>
 * 
 *  
 *  @langversion 3.0
 *  @playerversion AIR 1.5
 *  @productversion Flex 4
 */
public class WindowedApplication extends Application implements IWindow
{
    include "../core/Version.as";

    //--------------------------------------------------------------------------
    //
    //  Constructor
    //
    //--------------------------------------------------------------------------

    /**
     *  Constructor.
     *  
     *  @langversion 3.0
     *  @playerversion AIR 1.5
     *  @productversion Flex 4
     */
    public function WindowedApplication();

    //--------------------------------------------------------------------------
    //
    //  Skin Parts
    //
    //--------------------------------------------------------------------------

    //----------------------------------
    //  gripper
    //----------------------------------

    /**
     *  A skin part that defines the gripper button used to resize the window. 
     *  
     *  @langversion 3.0
     *  @playerversion Flash 10
     *  @playerversion AIR 1.5
     *  @productversion Flex 4
     */
    <a href="SkinPart%20%28required%3D%26quot%3Bfalse%26quot%3B%29">SkinPart (required="false")</a>
    public var gripper:Button;

    //----------------------------------
    //  statusBar
    //----------------------------------

    /**
     *  The SkinPart that displays the status bar.
     *  
     *  @langversion 3.0
     *  @playerversion AIR 1.5
     *  @productversion Flex 4
     */
    <a href="SkinPart%20%28required%20%3D%20%26quot%3Bfalse%26quot%3B%29">SkinPart (required = "false")</a>
    public var statusBar:IVisualElement;

    //----------------------------------
    //  statusText
    //----------------------------------

    /**
     *  A reference to the UITextField that displays the status bar's text.
     *  
     *  @langversion 3.0
     *  @playerversion AIR 1.1
     *  @productversion Flex 3
     */
    <a href="SkinPart%20%28required%3D%26quot%3Bfalse%26quot%3B%29">SkinPart (required="false")</a>
    public var statusText:TextGraphicElement;

    //----------------------------------
    //  titleBar
    //----------------------------------

    /**
     *  The UIComponent that displays the title bar.
     *  
     *  @langversion 3.0
     *  @playerversion AIR 1.5
     *  @productversion Flex 4
     */
    <a href="SkinPart%20%28required%3D%26quot%3Bfalse%26quot%3B%29">SkinPart (required="false")</a>
    public var titleBar:TitleBar;

     ...

    //--------------------------------------------------------------------------
    //
    //  Properties
    //
    //--------------------------------------------------------------------------

    //---------------------------------
    //  resizeAffordance
    //---------------------------------

    /**
     *  Provides a margin of error around the application's border so a resize
     *  and be more easily started. A click on the application is considered a
     *  click on the application's border if the click occurs with the resizeAffordance
     *  number of pixels from the outside edge of the application's window.
     *  
     *  @langversion 3.0
     *  @playerversion AIR 1.5
     *  @productversion Flex 4
     */
    public var resizeAffordance:Number = 6;

    //---------------------------------
    //  backgroundFrameRate
    //---------------------------------

    /**
     *  Specifies framerate to use when the application is inactive.
     *  When set to -1 no background framerate throttling will occur.
     *
     *  @default 1
     *  
     *  @langversion 3.0
     *  @playerversion AIR 1.5
     *  @productversion Flex 4
     */

WindowedApplicationSkin

This is the default skin used by the Spark WindowedApplication. The skin has four states. The two primary states are for when the skin is normal/disabled and active/inactive. The application is active when one of its controls has keyboard focus.

The four states are:

  • "normal"
  • "disabled"
  • "normalInactive
  • "disableInactive"

The application is active in the "normal"and "disabled" states.

The active and inactive flavor of the states are used to emphasize and de-emphasize the Flex Chrome. The Flex Chrome is emphasized when the application is active setting the chrome alpha to 1.0. The Flex Chrome is de-emphasized when the application is inactive by setting the chrome alpha to 0.5 . The goal is to mimic the look of OS application system chrome when a window changes state between active/inactive.

When the application is not using system chrome the skin will only display a background color. To use the Flex Chrome set the Application's skinClass property to "FlexChromeSkin". The Flex Chrome Skin contains a title bar, a status bar, and a gripper.

<!--

      ADOBE SYSTEMS INCORPORATED
      Copyright 2009 Adobe Systems Incorporated
      All Rights Reserved.

      NOTICE: Adobe permits you to use, modify, and distribute this file
      in accordance with the terms of the license agreement accompanying it.

-->

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
    alpha.disabledGroup="0.5" >

    <fx:Script>
        /*  Define the skin elements that should not be colorized. 
         *  For WindowedApplication, border and status bar backround are colorized,
         *  but the content area and status text are not. 
         *  Exclude the titleBar and scroller because they are SparkSkins and we 
         *  don't want to colorize them twice.
         */
        static private const exclusions:Array = <a href="%26quot%3BbackgroundRect%26quot%3B%2C%20%26quot%3BbgFill%26quot%3B%2C%20%26quot%3BcontentGroup%26quot%3B">"backgroundRect", "bgFill", "contentGroup"</a>;
        override public function get colorizeExclusions():Array {return exclusions;}
    </fx:Script>

     <s:states>
        <s:State name="normal" />
        <s:State name="disabled" stateGroups="disabledGroup" />
        <s:State name="normalInactive" stateGroups="inactiveGroup" />
        <s:State name="disabledInactive" stateGroups="disabledGroup, inactiveGroup" />
    </s:states>

    <!-- layer 1: background fill -->
    <s:Rect id="backgroundRect" left="1" right="1" top="1" bottom="1" >
        <s:fill>
            <s:SolidColor id="bgFill" color="{fxComponent.backgroundColor as uint}" />
        </s:fill>
    </s:Rect>

    <!-- layer 2: content -->
    <s:Group id="contentGroup" width="100%" height="100%" minHeight="0" minWidth="0"/>

</s:SparkSkin>

Flex Chrome Skin

The Flex Chrome Skin is a skin that may be used when an AIR application has turned off its System Chrome. The skin contains a title bar, a status bar, and a gripper. The gripper indicates an area of the chrome you can click on to start resizing the application's window.

<!--

      ADOBE SYSTEMS INCORPORATED
      Copyright 2009 Adobe Systems Incorporated
      All Rights Reserved.

      NOTICE: Adobe permits you to use, modify, and distribute this file
      in accordance with the terms of the license agreement accompanying it.

-->

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
    alpha.disabledGroup="0.5" >

    <fx:Script>
        /*  Define the skin elements that should not be colorized. 
         *  For WindowedApplication, border and status bar backround are colorized,
         *  but the content area and status text are not. 
         *  Exclude the titleBar because it is a SparkSkin and we 
         *  don't want to colorize it twice.
         */
        static private const exclusions:Array = ["backgroundRect", "bgFill", "contentGroup", "titleBar",
                                                 "titleBarBackground", "titleBarBgFill", "statusText",
                                                 "borderBgFill", "border"];
        override public function get colorizeExclusions():Array {return exclusions;}
    </fx:Script>

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" stateGroups="disabledGroup" />
        <s:State name="normalInactive" stateGroups="inactiveGroup" />
        <s:State name="disabledInactive" stateGroups="disabledGroup, inactiveGroup" />
    </s:states>

    <!-- layer 1: background fill -->
    <s:Rect id="backgroundRect" left="1" right="1" top="1" bottom="1" >
        <s:fill>
            <s:SolidColor id="bgFill" color="{fxComponent.backgroundColor as uint}" />
        </s:fill>
    </s:Rect>

    <!-- title bar background fill for when the title bar is inactive -->
    <s:Rect id="titleBarBackgroundRect" left="0" right="0" top="0" height="24"  >
        <s:fill>
            <s:SolidColor id="titleBarBgFill" color="0xFFFFFF" />
        </s:fill>
    </s:Rect>


    <!-- layer 2: titlebar + content + status bar -->
    <s:Group left="1" right="1" top="1" bottom="1" minHeight="24" minWidth="0" >
        <s:layout>
            <s:VerticalLayout gap="0"/>
        </s:layout>

        <!-- title bar to display when not using 'systemChrome' -->
        <s:TitleBar id="titleBar" width="100%" height="24" alpha.inactiveGroup="0.5" />

        <!-- content -->
        <s:Group id="contentGroup" width="100%" height="100%" minHeight="0" minWidth="0"/>

        <!-- status bar -->
        <s:Group id="statusBar" width="100%" minHeight="24" >

            <!-- status bar fill -->
            <s:Rect left="0" right="0" top="0" bottom="0">
               <s:fill>
                    <s:LinearGradient rotation="90">
                        <s:GradientEntry color="0xE2E2E2" />
                        <s:GradientEntry color="0xD9D9D9" />
                    </s:LinearGradient>
               </s:fill>
            </s:Rect>

            <!-- status bar highlight -->
            <s:Rect left="1" right="1" top="1" bottom="0" >
               <s:stroke>
                    <s:LinearGradientStroke rotation="90" weight="1">
                        <s:GradientEntry color="0xEAEAEA" />
                        <s:GradientEntry color="0xBEBEBE" />
                    </s:LinearGradientStroke>
               </s:stroke>
            </s:Rect>

            <!-- status text -->
            <s:SimpleText id="statusText" top="2" bottom="2" left="10" right="10" verticalAlign="middle" 
                fontSize="10" color="0x585858" width="100%" truncation="1" />

        </s:Group>

    </s:Group>

    <!-- layer 3: gripper -->
    <s:Button id="gripper" right="3" bottom="3" skinClass="spark.skins.default.GripperSkin" />

    <!-- layer 4: border -->

    <!-- background of border for when it is alpha=0.5 -->
    <s:Group id="borderBgFill" left="0" right="0" top="0" bottom="0" >
        <s:Rect left="0" right="0" top="0" bottom="0">
            <s:stroke>
                <s:SolidColorStroke weight="1" color="0xFFFFFF" />
            </s:stroke>
        </s:Rect>
    </s:Group>

    <!-- the border -->
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:stroke>
            <s:SolidColorStroke alpha.inactiveGroup="0.5" weight="1" color="0xA6A6A6" />
        </s:stroke>
    </s:Rect>

</s:SparkSkin>

TitleBar Skin

The title bar is part of Flex Chrome. It contains a title, a title icon, and three buttons. The three buttons are minimize, maximize/restore, and close. The title bar changes its looks depending on which OS it is running on. On the MAC the title bar takes on the standard look for that OS, the buttons are on the left and the title text is centered.

On Windows and Linux the title bar has a Windows looks. The button on right and the title text is on the left.

The MAC and Windows/Linux each have their own title bar skin. The TitleBar class detects the what OS is present and chooses the appropriate skin. The skin is only automatically switched if the default skin has not been changed.

Windows/Linux TitleBar Skin

<!--

      ADOBE SYSTEMS INCORPORATED
      Copyright 2009 Adobe Systems Incorporated
      All Rights Reserved.

      NOTICE: Adobe permits you to use, modify, and distribute this file
      in accordance with the terms of the license agreement accompanying it.

-->

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:mx="library://ns.adobe.com/flex/halo" 
             minHeight="24" >

    <fx:Metadata>
      <a href="HostComponent%28%26quot%3Bmx.core.windowClasses.TitleBar%26quot%3B%29">HostComponent("mx.core.windowClasses.TitleBar")</a>
    </fx:Metadata>

      <fx:Script>
        /*  Define the skin elements that should not be colorized. 
         *  Exclude the titleBar and scroller because they are SparkSkins and we 
         *  don't want to colorize them twice.
         */
        static private const exclusions:Array = <a href="%26quot%3Bbackground%26quot%3B%2C%20%26quot%3BbgFill%26quot%3B%2C%20%26quot%3BtitleIconImage%26quot%3B%2C%20%26quot%3BtitleText%26quot%3B">"background", "bgFill", "titleIconImage", "titleText"</a>;
        override public function get colorizeExclusions():Array {return exclusions;}

    </fx:Script>

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="maximized" stateGroups="maximizedGroup" />
        <s:State name="disabledMaximized" stateGroups="maximizedGroup" />
    </s:states>

    <!-- fill -->
    <s:Rect id="background" left="0" right="0" top="0" bottom="0" radiusX="2" radiusY="2" >
        <s:fill>
            <s:LinearGradient id="bgFill" rotation="90">
                <s:GradientEntry color="0xFFFFFF" />
                <s:GradientEntry color="0xBABABA" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

    <s:Group minHeight="24" width="100%" height="100%" left="2" right="2" >

        <s:layout>
            <s:HorizontalLayout verticalAlign="middle" gap="5" />
        </s:layout>

        <!-- title bar icon -->
        <s:BitmapImage id="titleIconImage" minWidth="0" />

        <!-- title -->
        <s:SimpleText id="titleText" minWidth="0" fontSize="9" color="#585858" truncation="1" width="100%" />

        <!-- minimize button --> 
        <s:Button id="minimizeButton"
            skinClass="spark.skins.default.MinimizeButtonSkin"
            top="2" bottom="2" verticalCenter="0" 
            />

        <!-- maximize button -->
        <s:Button id="maximizeButton" 
            skinClass="spark.skins.default.MaximizeButtonSkin"
            skinClass.maximizedGroup="spark.skins.default.RestoreButtonSkin"
            verticalCenter="0" 
            />

        <!-- close button -->
        <s:Button id="closeButton" 
            skinClass="spark.skins.default.CloseButtonSkin"
            verticalCenter="0"  />

    </s:Group>

</s:SparkSkin>

MAC TitleBar Skin

<!--

      ADOBE SYSTEMS INCORPORATED
      Copyright 2009 Adobe Systems Incorporated
      All Rights Reserved.

      NOTICE: Adobe permits you to use, modify, and distribute this file
      in accordance with the terms of the license agreement accompanying it.

-->

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:mx="library://ns.adobe.com/flex/halo" 
             minHeight="24" >

    <fx:Metadata>
      <a href="HostComponent%28%26quot%3Bmx.core.windowClasses.TitleBar%26quot%3B%29">HostComponent("mx.core.windowClasses.TitleBar")</a>
    </fx:Metadata>

      <fx:Script>
        /*  Define the skin elements that should not be colorized. 
         *  Exclude the titleBar and scroller because they are SparkSkins and we 
         *  don't want to colorize them twice.
         */
        static private const exclusions:Array = <a href="%26quot%3Bbackground%26quot%3B%2C%20%26quot%3BbgFill%26quot%3B%2C%20%26quot%3BtitleIconImage%26quot%3B%2C%20%26quot%3BtitleText%26quot%3B">"background", "bgFill", "titleIconImage", "titleText"</a>;
        override public function get colorizeExclusions():Array {return exclusions;}

    </fx:Script>

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="maximized" stateGroups="maximizedGroup" />
        <s:State name="disabledMaximized" stateGroups="maximizedGroup" />
    </s:states>

    <!-- fill -->
    <s:Rect id="background" left="0" right="0" top="0" bottom="0" radiusX="2" radiusY="2" >
        <s:fill>
            <s:LinearGradient id="bgFill" rotation="90">
                <s:GradientEntry color="0xFFFFFF" />
                <s:GradientEntry color="0xBABABA" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

    <s:Group minHeight="24" width="100%" height="100%"
            left="2" right="2" >

        <s:layout>
            <s:HorizontalLayout verticalAlign="middle" gap="5" />
        </s:layout>

        <!-- mac minimize button --> 
        <s:Button id="minimizeButton"
            skinClass="spark.skins.default.MacMinimizeButtonSkin"
            top="2" bottom="2" verticalCenter="0" />

        <!-- maximize button -->
        <s:Button id="maximizeButton" 
            skinClass="spark.skins.default.MacMaximizeButtonSkin"
            verticalCenter="0" />

        <!-- close button -->
        <s:Button id="closeButton" 
            skinClass="spark.skins.default.MacCloseButtonSkin"
            verticalCenter="0" />

        <!-- Spacer. Create enough space move the titleIcon and titleText to the
             right so they are centered.
             "0 + titleText.width - titleText.width" is a trick so binding will call
             us when the titleText changes width. We can't use titleText.width in the 
             expression because its width is 100% percent, which is not the measured size of
             the text (the size includes layout space). We call getPreferredBoundsWidth()
             to get the actual size of the text.

             In the below formula:
             4 = 2 (left margin) + 2 (right margin)
             5 = gap between the titleIcon and the titleText
             58 = 2 (left margin) + 4 * 5 (four gaps of 5 pixels) + 3 * 12 (three images, each 12 pixels wide)
        -->
        <mx:Spacer minWidth="0" 
            width="{Math.max(0 + titleText.width - titleText.width, 
                   ((fxComponent.width - titleText.getPreferredBoundsWidth() - 
                   titleIconImage.width - 4 - 5) / 2) - 58)}" />

        <!-- title bar icon -->
        <s:BitmapImage id="titleIconImage" minWidth="0" />

        <!-- title -->
        <s:SimpleText id="titleText" minWidth="64" fontSize="9" color="#585858" truncation="1" width="100%" />
    </s:Group>

</s:SparkSkin>

Gripper Skin

The Gripper Skin is part of Flex Chrome. Typically a component with this skin is placed in the lower, right corner of an application.

<?xml version="1.0" encoding="utf-8"?>

<!--

    ADOBE SYSTEMS INCORPORATED
    Copyright 2009 Adobe Systems Incorporated
    All Rights Reserved.

    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.

-->

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" minWidth="7" minHeight="9" >

    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>

    <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:SolidColor color="#000000" alpha=".0001" />
        </s:fill>
    </s:Rect>

    <s:BitmapImage source="@Embed('../../../../assets/gripper_up.png')" right="0" bottom="0" verticalCenter="0" />

</s:Skin>

Title Bar Buttons for "normal" State

Normal Close Button

<?xml version="1.0" encoding="utf-8"?>

<!--

    ADOBE SYSTEMS INCORPORATED
    Copyright 2009 Adobe Systems Incorporated
    All Rights Reserved.

    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.

-->

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" minWidth="12" minHeight="13" >

    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>

    <s:BitmapImage source="@Embed('../../../../assets/win_close_up.png')" includeIn="up" left="0" verticalCenter="0" />

    <s:BitmapImage source="@Embed('../../../../assets/win_close_over.png')" includeIn="over" left="0" verticalCenter="0" />

    <s:BitmapImage source="@Embed('../../../../assets/win_close_down.png')" includeIn="down" left="0" verticalCenter="0" />

</s:Skin>

Normal Minimize Button

<?xml version="1.0" encoding="utf-8"?>

<!--

    ADOBE SYSTEMS INCORPORATED
    Copyright 2009 Adobe Systems Incorporated
    All Rights Reserved.

    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.

-->

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" minWidth="12" minHeight="13" >

    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>

    <s:BitmapImage source="@Embed('../../../../assets/win_min_up.png')" includeIn="up" left="0" verticalCenter="0" />

    <s:BitmapImage source="@Embed('../../../../assets/win_min_over.png')" includeIn="over" left="0" verticalCenter="0" />

    <s:BitmapImage source="@Embed('../../../../assets/win_min_down.png')" includeIn="down" left="0" verticalCenter="0" />

    <s:BitmapImage source="@Embed('../../../../assets/win_min_dis.png')" includeIn="disabled" left="0" verticalCenter="0" />

</s:Skin>

Normal Maximize Button

<?xml version="1.0" encoding="utf-8"?>

<!--

    ADOBE SYSTEMS INCORPORATED
    Copyright 2009 Adobe Systems Incorporated
    All Rights Reserved.

    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.

-->

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" minWidth="12" minHeight="13" >

    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>

    <s:BitmapImage source="@Embed('../../../../assets/win_max_up.png')" includeIn="up" left="0" verticalCenter="0" />

    <s:BitmapImage source="@Embed('../../../../assets/win_max_over.png')" includeIn="over" left="0" verticalCenter="0" />

    <s:BitmapImage source="@Embed('../../../../assets/win_max_down.png')" includeIn="down" left="0" verticalCenter="0" />

    <s:BitmapImage source="@Embed('../../../../assets/win_max_dis.png')" includeIn="disabled" left="0" verticalCenter="0" />

</s:Skin>

Normal Restore Button

<?xml version="1.0" encoding="utf-8"?>

<!--

    ADOBE SYSTEMS INCORPORATED
    Copyright 2009 Adobe Systems Incorporated
    All Rights Reserved.

    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.

-->

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" minWidth="12" minHeight="13" >

    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>

    <s:BitmapImage source="@Embed('../../../../assets/win_restore_up.png')" includeIn="up" left="0" verticalCenter="0" />

    <s:BitmapImage source="@Embed('../../../../assets/win_restore_over.png')" includeIn="over" left="0" verticalCenter="0" />

    <s:BitmapImage source="@Embed('../../../../assets/win_restore_down.png')" includeIn="down" left="0" verticalCenter="0" />

</s:Skin>

Title Bar Buttons for "mac" State

Note: this is no "restore" button for the "mac" state. The maximize button is just when the application is maximized.

Mac Close Button

<?xml version="1.0" encoding="utf-8"?>

<!--

    ADOBE SYSTEMS INCORPORATED
    Copyright 2009 Adobe Systems Incorporated
    All Rights Reserved.

    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.

-->

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" minWidth="12" minHeight="13" >

    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>

    <s:BitmapImage source="@Embed('../../../../assets/mac_close_up.png')" includeIn="up" left="0" verticalCenter="0" />

    <s:BitmapImage source="@Embed('../../../../assets/mac_close_over.png')" includeIn="over" left="0" verticalCenter="0" />

    <s:BitmapImage source="@Embed('../../../../assets/mac_close_down.png')" includeIn="down" left="0" verticalCenter="0" />

</s:Skin>

Mac Minimize Button

<?xml version="1.0" encoding="utf-8"?>

<!--

    ADOBE SYSTEMS INCORPORATED
    Copyright 2009 Adobe Systems Incorporated
    All Rights Reserved.

    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.

-->

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" minWidth="12" minHeight="13" >

    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>

    <s:BitmapImage source="@Embed('../../../../assets/mac_min_up.png')" includeIn="up" left="0" verticalCenter="0" />

    <s:BitmapImage source="@Embed('../../../../assets/mac_min_over.png')" includeIn="over" left="0" verticalCenter="0" />

    <s:BitmapImage source="@Embed('../../../../assets/mac_min_down.png')" includeIn="down" left="0" verticalCenter="0" />

    <s:BitmapImage source="@Embed('../../../../assets/mac_min_dis.png')" includeIn="disabled" left="0" verticalCenter="0" />

</s:Skin>

Mac Maximize Button

<?xml version="1.0" encoding="utf-8"?>

<!--

    ADOBE SYSTEMS INCORPORATED
    Copyright 2009 Adobe Systems Incorporated
    All Rights Reserved.

    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.

-->

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" minWidth="12" minHeight="13" >

    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>

    <s:BitmapImage source="@Embed('../../../../assets/mac_max_up.png')" includeIn="up" left="0" verticalCenter="0" />

    <s:BitmapImage source="@Embed('../../../../assets/mac_max_over.png')" includeIn="over" left="0" verticalCenter="0" />

    <s:BitmapImage source="@Embed('../../../../assets/mac_max_down.png')" includeIn="down" left="0" verticalCenter="0" />

    <s:BitmapImage source="@Embed('../../../../assets/mac_max_dis.png')" includeIn="disabled" left="0" verticalCenter="0" />

</s:Skin>

Examples and Usage

How to create a custom component that uses Flex Chrome

When an application is not using System Chrome, using Flex Chrome is an option. To use Flex Chrome just modify the skinClass style to reference the Flex Chrome skin:

<Style>

@namespace "library://ns.adobe.com/flex/spark";
WindowedApplication 
{
     skinClass: ClassReference("spark.skins.default.FlexChromeSkin");
}

</Style>

Now your WindowedApplication will look for the "spark.skins.default.FlexChromeSkin" to provide its skin instead of the default.

Related

Wiki: Flex 4

Want the latest updates on software, tech news, and AI?
Get latest updates about software, tech news, and AI from SourceForge directly in your inbox once a month.