Menu
▾
▴
Spark WindowedApplication
There is a newer version of this page. You can find it here.
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 ](%200x000000%2C%200x000000%20)" 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.
*
*
[[ include ref='flexsdk_rightnav' ]]
The WindowedApplication serves two roles. It is a replacement for the <spark.components:Application> * 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.
* *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.
* *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).
* * @mxml * *The <spark.components:WindowedApplication> tag inherits all of the tag
* attributes of its superclass and adds the following tag attributes:
* <spark.components:WindowedApplication
* Properties
* alwaysInFront="false"
* autoExit="true"
* dockIconMenu="null"
* maxHeight="10000"
* maxWidth="10000"
* menu="null"
* minHeight="100"
* minWidth="100"
* showGripper="true"
* showStatusBar="true"
* showTitleBar="true"
* status=""
* systemTrayIconMenu="null"
* title=""
* titleIcon="null"
*
* Effects
* closeEffect="No default"
* minimizeEffect="No default"
* unminimizeEffect="No default"
*
* Events
* applicationActivate="No default"
* applicationDeactivate="No default"
* closing="No default"
* displayStateChange="No default"
* displayStateChanging="No default"
* invoke="No default"
* moving="No default"
* networkChange="No default"
* resizing="No default"
* windowComplete="No default"
* windowMove="No default"
* windowResize="No default"
* />
*
*
*
* @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
*/
SkinPart (required="false")
public var gripper:Button;
//----------------------------------
// statusBar
//----------------------------------
/**
* The SkinPart that displays the status bar.
*
* @langversion 3.0
* @playerversion AIR 1.5
* @productversion Flex 4
*/
SkinPart (required = "false")
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
*/
SkinPart (required="false")
public var statusText:TextGraphicElement;
//----------------------------------
// titleBar
//----------------------------------
/**
* The UIComponent that displays the title bar.
*
* @langversion 3.0
* @playerversion AIR 1.5
* @productversion Flex 4
*/
SkinPart (required="false")
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.
<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 = "backgroundRect", "bgFill", "contentGroup";
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:state></s:state></s:state></s:state></s:states>
<s:rect id="user-content-backgroundRect" left="1" right="1" top="1" bottom="1">
<s:fill>
<s:solidcolor id="user-content-bgFill" color="{fxComponent.backgroundColor as uint}">
</s:solidcolor></s:fill>
</s:rect>
<s:group id="user-content-contentGroup" width="100%" height="100%" minheight="0" minwidth="0">
</s:group></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.
<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:state></s:state></s:state></s:state></s:states>
<s:rect id="user-content-backgroundRect" left="1" right="1" top="1" bottom="1">
<s:fill>
<s:solidcolor id="user-content-bgFill" color="{fxComponent.backgroundColor as uint}">
</s:solidcolor></s:fill>
</s:rect>
<s:rect id="user-content-titleBarBackgroundRect" left="0" right="0" top="0" height="24">
<s:fill>
<s:solidcolor id="user-content-titleBarBgFill" color="0xFFFFFF">
</s:solidcolor></s:fill>
</s:rect>
<s:group left="1" right="1" top="1" bottom="1" minheight="24" minwidth="0">
<s:layout>
<s:verticallayout gap="0">
</s:verticallayout></s:layout>
<s:titlebar id="user-content-titleBar" width="100%" height="24" alpha.inactivegroup="0.5">
<s:group id="user-content-contentGroup" width="100%" height="100%" minheight="0" minwidth="0">
<s:group id="user-content-statusBar" width="100%" minheight="24">
<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:gradiententry></s:gradiententry></s:lineargradient>
</s:fill>
</s:rect>
<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:gradiententry></s:gradiententry></s:lineargradientstroke>
</s:stroke>
</s:rect>
<s:simpletext id="user-content-statusText" top="2" bottom="2" left="10" right="10" verticalalign="middle" fontsize="10" color="0x585858" width="100%" truncation="1">
</s:simpletext></s:group>
</s:group>
<s:button id="user-content-gripper" right="3" bottom="3" skinclass="spark.skins.default.GripperSkin">
<s:group id="user-content-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:solidcolorstroke></s:stroke>
</s:rect>
</s:group>
<s:rect left="0" right="0" top="0" bottom="0">
<s:stroke>
<s:solidcolorstroke alpha.inactivegroup="0.5" weight="1" color="0xA6A6A6">
</s:solidcolorstroke></s:stroke>
</s:rect>
</s:button></s:titlebar></s:group></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
<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>
HostComponent("mx.core.windowClasses.TitleBar")
</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 = "background", "bgFill", "titleIconImage", "titleText";
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:state></s:state></s:state></s:state></s:states>
<s:rect id="user-content-background" left="0" right="0" top="0" bottom="0" radiusx="2" radiusy="2">
<s:fill>
<s:lineargradient id="user-content-bgFill" rotation="90">
<s:gradiententry color="0xFFFFFF">
<s:gradiententry color="0xBABABA">
</s:gradiententry></s:gradiententry></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:horizontallayout></s:layout>
<s:bitmapimage id="user-content-titleIconImage" minwidth="0">
<s:simpletext id="user-content-titleText" minwidth="0" fontsize="9" color="#585858" truncation="1" width="100%">
<s:button id="user-content-minimizeButton" skinclass="spark.skins.default.MinimizeButtonSkin" top="2" bottom="2" verticalcenter="0">
<s:button id="user-content-maximizeButton" skinclass="spark.skins.default.MaximizeButtonSkin" skinclass.maximizedgroup="spark.skins.default.RestoreButtonSkin" verticalcenter="0">
<s:button id="user-content-closeButton" skinclass="spark.skins.default.CloseButtonSkin" verticalcenter="0">
</s:button></s:button></s:button></s:simpletext></s:bitmapimage></s:group>
</s:sparkskin>
## MAC TitleBar Skin
<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>
HostComponent("mx.core.windowClasses.TitleBar")
</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 = "background", "bgFill", "titleIconImage", "titleText";
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:state></s:state></s:state></s:state></s:states>
<s:rect id="user-content-background" left="0" right="0" top="0" bottom="0" radiusx="2" radiusy="2">
<s:fill>
<s:lineargradient id="user-content-bgFill" rotation="90">
<s:gradiententry color="0xFFFFFF">
<s:gradiententry color="0xBABABA">
</s:gradiententry></s:gradiententry></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:horizontallayout></s:layout>
<s:button id="user-content-minimizeButton" skinclass="spark.skins.default.MacMinimizeButtonSkin" top="2" bottom="2" verticalcenter="0">
<s:button id="user-content-maximizeButton" skinclass="spark.skins.default.MacMaximizeButtonSkin" verticalcenter="0">
<s:button id="user-content-closeButton" skinclass="spark.skins.default.MacCloseButtonSkin" verticalcenter="0">
<mx:spacer minwidth="0" width="{Math.max(0 + titleText.width - titleText.width,
((fxComponent.width - titleText.getPreferredBoundsWidth() -
titleIconImage.width - 4 - 5) / 2) - 58)}">
<s:bitmapimage id="user-content-titleIconImage" minwidth="0">
<s:simpletext id="user-content-titleText" minwidth="64" fontsize="9" color="#585858" truncation="1" width="100%">
</s:simpletext></s:bitmapimage></mx:spacer></s:button></s:button></s:button></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.
<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:state></s:state></s:state></s:state></s:states>
<s:rect id="user-content-backgroundRect" left="0" right="0" top="0" bottom="0">
<s:fill>
<s:solidcolor color="#000000" alpha=".0001">
</s:solidcolor></s:fill>
</s:rect>
<s:bitmapimage source="@Embed('../../../../assets/gripper_up.png')" right="0" bottom="0" verticalcenter="0">
</s:bitmapimage></s:skin>
### Title Bar Buttons for "normal" State
#### Normal Close Button
<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:state></s:state></s:state></s:state></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:bitmapimage></s:bitmapimage></s:bitmapimage></s:skin>
#### Normal Minimize Button
<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:state></s:state></s:state></s:state></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:bitmapimage></s:bitmapimage></s:bitmapimage></s:bitmapimage></s:skin>
#### Normal Maximize Button
<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:state></s:state></s:state></s:state></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:bitmapimage></s:bitmapimage></s:bitmapimage></s:bitmapimage></s:skin>
#### Normal Restore Button
<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:state></s:state></s:state></s:state></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:bitmapimage></s:bitmapimage></s:bitmapimage></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
<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:state></s:state></s:state></s:state></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:bitmapimage></s:bitmapimage></s:bitmapimage></s:skin>
#### Mac Minimize Button
<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:state></s:state></s:state></s:state></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:bitmapimage></s:bitmapimage></s:bitmapimage></s:bitmapimage></s:skin>
#### Mac Maximize Button
<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:state></s:state></s:state></s:state></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:bitmapimage></s:bitmapimage></s:bitmapimage></s:bitmapimage></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.
----
[[include site:open_commentlogin (not found)]]
