You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by Alex Harui <ah...@adobe.com> on 2013/12/09 06:19:07 UTC
Re: git commit: [flex-sdk] [refs/heads/develop] - FLEX-33984: Moved
the placement logic from the hostComponent to the skin. Removed some code no
longer needed.
FWIW, at one point in time, Spark skins were supposed to have as few
styles as possible since tools like Catalyst were supposed to make easier
to "just draw" a different skin and not have to implement as much code in
the skin. Custom skins were supposed to simply place the icon wherever it
should be in relation to the label. Existing custom skins/themes
certainly will not respond to this new option.
That said, I'm not saying you should revert. I'm just pointing this out
to see if anyone else cares. I think some Spark skins respond to custom
non-font styles already.
One other thing: should the case statement handle the default case as
LEFT? If someone has a custom CSS file but use the default skin, they
won't pick up this new style then will the skin still work as it used to?
On 12/8/13 1:01 PM, "mkessler@apache.org" <mk...@apache.org> wrote:
>Updated Branches:
> refs/heads/develop 7c3d70818 -> cdcb49242
>
>
>FLEX-33984: Moved the placement logic from the hostComponent to the skin.
>Removed some code no longer needed.
>
>
>Project: http://git-wip-us.apache.org/repos/asf/flex-sdk/repo
>Commit: http://git-wip-us.apache.org/repos/asf/flex-sdk/commit/cdcb4924
>Tree: http://git-wip-us.apache.org/repos/asf/flex-sdk/tree/cdcb4924
>Diff: http://git-wip-us.apache.org/repos/asf/flex-sdk/diff/cdcb4924
>
>Branch: refs/heads/develop
>Commit: cdcb49242ae0d06645d3ebaf4f7e3c102b8f6506
>Parents: 7c3d708
>Author: Mark Kessler <Ke...@gmail.com>
>Authored: Sun Dec 8 15:59:25 2013 -0500
>Committer: Mark Kessler <Ke...@gmail.com>
>Committed: Sun Dec 8 15:59:25 2013 -0500
>
>----------------------------------------------------------------------
> .../spark/src/spark/components/CheckBox.as | 188 -------------------
> .../src/spark/skins/spark/CheckBoxSkin.mxml | 138 ++++++++++++++
> 2 files changed, 138 insertions(+), 188 deletions(-)
>----------------------------------------------------------------------
>
>
>http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/cdcb4924/frameworks/p
>rojects/spark/src/spark/components/CheckBox.as
>----------------------------------------------------------------------
>diff --git a/frameworks/projects/spark/src/spark/components/CheckBox.as
>b/frameworks/projects/spark/src/spark/components/CheckBox.as
>index 77dd23d..c72f6c8 100644
>--- a/frameworks/projects/spark/src/spark/components/CheckBox.as
>+++ b/frameworks/projects/spark/src/spark/components/CheckBox.as
>@@ -24,9 +24,7 @@ import flash.events.Event;
> import flash.events.MouseEvent;
>
> import mx.core.mx_internal;
>-import mx.core.UIComponent;
>
>-import spark.components.supportClasses.LabelPlacement;
> import spark.components.supportClasses.ToggleButtonBase;
>
> use namespace mx_internal;
>@@ -214,30 +212,6 @@ public class CheckBox extends ToggleButtonBase
>
>
>//------------------------------------------------------------------------
>--
> //
>- // Variables
>- //
>-
>//------------------------------------------------------------------------
>--
>-
>- //----------------------------------
>- // checkDisplay
>- //----------------------------------
>-
>- /**
>- * The skin part that defines the CheckBox grouping.
>- *
>- * @see spark.skins.spark.CheckBoxSkin#checkDisplay
>- *
>- * @langversion 3.0
>- * @playerversion Flash 11.8
>- * @playerversion AIR 3.8
>- * @productversion Flex 4.12
>- */
>- [SkinPart(required="false")]
>- public var checkDisplay:UIComponent;
>-
>-
>-
>//------------------------------------------------------------------------
>--
>- //
> // Properties
> //
>
>//------------------------------------------------------------------------
>--
>@@ -323,120 +297,6 @@ public class CheckBox extends ToggleButtonBase
>
>
>//------------------------------------------------------------------------
>--
> //
>- // Methods
>- //
>-
>//------------------------------------------------------------------------
>--
>-
>- /**
>- * Sets the label placement in relation to the checkbox.
>- * Requires the SkinParts <code>checkDisplay</code> and
><code>labelDisplay</code>.
>- *
>- * @langversion 3.0
>- * @playerversion Flash 11.8
>- * @playerversion AIR 3.8
>- * @productversion Flex 4.12
>- */
>- public function updateLabelPlacement():void
>- {
>- var labelDisplayAsUIComponent:UIComponent;
>-
>-
>- if (!checkDisplay || !labelDisplay)
>- {
>- return;
>- }
>-
>- labelDisplayAsUIComponent = labelDisplay as UIComponent;
>-
>-
>- switch (String(getStyle("labelPlacement")).toLowerCase())
>- {
>- case LabelPlacement.BOTTOM:
>- {
>- //Adjust the labels position to the bottom.
>- labelDisplayAsUIComponent.horizontalCenter = 0;
>- labelDisplayAsUIComponent.verticalCenter = undefined;
>- labelDisplayAsUIComponent.top = checkDisplay.height +
>int(getStyle("gap"));
>- labelDisplayAsUIComponent.bottom = undefined;
>- labelDisplayAsUIComponent.left = undefined;
>- labelDisplayAsUIComponent.right = undefined;
>-
>- //Adjust the checkboxes position to the top.
>- checkDisplay.horizontalCenter = 0;
>- checkDisplay.verticalCenter = undefined;
>- checkDisplay.top = 0;
>- checkDisplay.bottom = undefined;
>-
>- break;
>- }
>-
>- case LabelPlacement.LEFT:
>- {
>- //Adjust the labels position to left side.
>- labelDisplayAsUIComponent.horizontalCenter = undefined;
>- labelDisplayAsUIComponent.verticalCenter = 2;
>- labelDisplayAsUIComponent.top = undefined;
>- labelDisplayAsUIComponent.bottom = undefined;
>- labelDisplayAsUIComponent.left = undefined;
>- labelDisplayAsUIComponent.right = checkDisplay.width +
>int(getStyle("gap"));
>-
>- //Adjust the checkboxes position to right side.
>- checkDisplay.horizontalCenter = undefined;
>- checkDisplay.verticalCenter = 0;
>- checkDisplay.left = undefined;
>- checkDisplay.right = 0;
>-
>- break;
>- }
>-
>- case LabelPlacement.RIGHT:
>- {
>- //Adjust the labels position to right side.
>- labelDisplayAsUIComponent.horizontalCenter = undefined;
>- labelDisplayAsUIComponent.verticalCenter = 2;
>- labelDisplayAsUIComponent.top = undefined;
>- labelDisplayAsUIComponent.bottom = undefined;
>- labelDisplayAsUIComponent.left = checkDisplay.width +
>int(getStyle("gap"));
>- labelDisplayAsUIComponent.right = undefined;
>-
>- //Adjust the checkboxes position to left side.
>- checkDisplay.horizontalCenter = undefined;
>- checkDisplay.verticalCenter = 0;
>- checkDisplay.left = 0;
>- checkDisplay.right = undefined;
>-
>- break;
>- }
>-
>- case LabelPlacement.TOP:
>- {
>- //Adjust the labels position to the top.
>- labelDisplayAsUIComponent.horizontalCenter = 0;
>- labelDisplayAsUIComponent.verticalCenter = undefined;
>- labelDisplayAsUIComponent.top = undefined;
>- labelDisplayAsUIComponent.bottom = checkDisplay.height +
>int(getStyle("gap"));
>- labelDisplayAsUIComponent.left = undefined;
>- labelDisplayAsUIComponent.right = undefined;
>-
>- //Adjust the checkboxes position to the bottom.
>- checkDisplay.horizontalCenter = 0;
>- checkDisplay.verticalCenter = undefined;
>- checkDisplay.top = undefined;
>- checkDisplay.bottom = 0;
>-
>- break;
>- }
>-
>- default:
>- {
>- break;
>- }
>- }
>- }
>-
>-
>-
>//------------------------------------------------------------------------
>--
>- //
> // Overridden methods
> //
>
>//------------------------------------------------------------------------
>--
>@@ -450,54 +310,6 @@ public class CheckBox extends ToggleButtonBase
> CheckBox.createAccessibilityImplementation(this);
> }
>
>-
>- /**
>- * @copy
>spark.components.supportClasses.SkinnableComponent#partAdded
>- *
>- * @langversion 3.0
>- * @playerversion Flash 11.8
>- * @playerversion AIR 3.8
>- * @productversion Flex 4.12
>- */
>- override protected function partAdded(partName:String,
>instance:Object):void
>- {
>- super.partAdded(partName, instance);
>-
>- if (instance == checkDisplay)
>- {
>- updateLabelPlacement();
>-
>- return;
>- }
>-
>- if (instance == labelDisplay)
>- {
>- updateLabelPlacement();
>-
>- return;
>- }
>- }
>-
>-
>- /**
>- * @copy mx.core.UIComponent#styleChanged
>- *
>- * @langversion 3.0
>- * @playerversion Flash 11.8
>- * @playerversion AIR 3.8
>- * @productversion Flex 4.12
>- */
>- override public function styleChanged(styleProp:String):void
>- {
>- super.styleChanged(styleProp);
>-
>- //Check if the style is null for mass style changes or if the
>labelPlacement/gap styles were changed.
>- if (styleProp == "labelPlacement" || styleProp == "gap" ||
>styleProp === null)
>- {
>- updateLabelPlacement();
>- }
>- }
>-
> }
>
> }
>
>http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/cdcb4924/frameworks/p
>rojects/spark/src/spark/skins/spark/CheckBoxSkin.mxml
>----------------------------------------------------------------------
>diff --git
>a/frameworks/projects/spark/src/spark/skins/spark/CheckBoxSkin.mxml
>b/frameworks/projects/spark/src/spark/skins/spark/CheckBoxSkin.mxml
>index aeec082..e6bf5b3 100644
>--- a/frameworks/projects/spark/src/spark/skins/spark/CheckBoxSkin.mxml
>+++ b/frameworks/projects/spark/src/spark/skins/spark/CheckBoxSkin.mxml
>@@ -70,6 +70,9 @@
>
> <fx:Script>
> <![CDATA[
>+ import spark.components.supportClasses.LabelPlacement;
>+
>+
> /**
> * @private
> */
>@@ -79,6 +82,141 @@
> * @private
> */
> override public function get focusSkinExclusions():Array {
>return focusExclusions;};
>+
>+
>+
>//------------------------------------------------------------------------
>--
>+ //
>+ // Overridden methods
>+ //
>+
>//------------------------------------------------------------------------
>--
>+
>+ /**
>+ * @copy mx.core.UIComponent#styleChanged
>+ *
>+ * @langversion 3.0
>+ * @playerversion Flash 11.8
>+ * @playerversion AIR 3.8
>+ * @productversion Flex 4.12
>+ */
>+ override public function styleChanged(styleProp:String):void
>+ {
>+ super.styleChanged(styleProp);
>+
>+ //Check if the style is null for mass style changes or
>if the labelPlacement/gap styles were changed.
>+ if (styleProp == "labelPlacement" || styleProp == "gap"
>|| styleProp === null)
>+ {
>+ updateLabelPlacement();
>+ }
>+ }
>+
>+
>+
>//------------------------------------------------------------------------
>--
>+ //
>+ // Methods
>+ //
>+
>//------------------------------------------------------------------------
>--
>+
>+ /**
>+ * Sets the label placement in relation to the checkbox.
>+ * Requires the SkinParts <code>checkDisplay</code> and
><code>labelDisplay</code>.
>+ *
>+ * @langversion 3.0
>+ * @playerversion Flash 11.8
>+ * @playerversion AIR 3.8
>+ * @productversion Flex 4.12
>+ */
>+ public function updateLabelPlacement():void
>+ {
>+ if (!checkDisplay || !labelDisplay)
>+ {
>+ return;
>+ }
>+
>+ switch (String(getStyle("labelPlacement")).toLowerCase())
>+ {
>+ case LabelPlacement.BOTTOM:
>+ {
>+ //Adjust the labels position to the bottom.
>+ labelDisplay.horizontalCenter = 0;
>+ labelDisplay.verticalCenter = undefined;
>+ labelDisplay.top = checkDisplay.height +
>int(getStyle("gap"));
>+ labelDisplay.bottom = undefined;
>+ labelDisplay.left = undefined;
>+ labelDisplay.right = undefined;
>+
>+ //Adjust the checkboxes position to the top.
>+ checkDisplay.horizontalCenter = 0;
>+ checkDisplay.verticalCenter = undefined;
>+ checkDisplay.top = 0;
>+ checkDisplay.bottom = undefined;
>+
>+ break;
>+ }
>+
>+ case LabelPlacement.LEFT:
>+ {
>+ //Adjust the labels position to left side.
>+ labelDisplay.horizontalCenter = undefined;
>+ labelDisplay.verticalCenter = 2;
>+ labelDisplay.top = undefined;
>+ labelDisplay.bottom = undefined;
>+ labelDisplay.left = undefined;
>+ labelDisplay.right = checkDisplay.width +
>int(getStyle("gap"));
>+
>+ //Adjust the checkboxes position to right side.
>+ checkDisplay.horizontalCenter = undefined;
>+ checkDisplay.verticalCenter = 0;
>+ checkDisplay.left = undefined;
>+ checkDisplay.right = 0;
>+
>+ break;
>+ }
>+
>+ case LabelPlacement.RIGHT:
>+ {
>+ //Adjust the labels position to right side.
>+ labelDisplay.horizontalCenter = undefined;
>+ labelDisplay.verticalCenter = 2;
>+ labelDisplay.top = undefined;
>+ labelDisplay.bottom = undefined;
>+ labelDisplay.left = checkDisplay.width +
>int(getStyle("gap"));
>+ labelDisplay.right = undefined;
>+
>+ //Adjust the checkboxes position to left side.
>+ checkDisplay.horizontalCenter = undefined;
>+ checkDisplay.verticalCenter = 0;
>+ checkDisplay.left = 0;
>+ checkDisplay.right = undefined;
>+
>+ break;
>+ }
>+
>+ case LabelPlacement.TOP:
>+ {
>+ //Adjust the labels position to the top.
>+ labelDisplay.horizontalCenter = 0;
>+ labelDisplay.verticalCenter = undefined;
>+ labelDisplay.top = undefined;
>+ labelDisplay.bottom = checkDisplay.height +
>int(getStyle("gap"));
>+ labelDisplay.left = undefined;
>+ labelDisplay.right = undefined;
>+
>+ //Adjust the checkboxes position to the bottom.
>+ checkDisplay.horizontalCenter = 0;
>+ checkDisplay.verticalCenter = undefined;
>+ checkDisplay.top = undefined;
>+ checkDisplay.bottom = 0;
>+
>+ break;
>+ }
>+
>+ default:
>+ {
>+ break;
>+ }
>+ }
>+ }
>+
> ]]>
> </fx:Script>
>
>
RE: git commit: [flex-sdk] [refs/heads/develop] - FLEX-33984: Moved the placement logic from the hostComponent to the skin. Removed some code no longer needed.
Posted by Kessler CTR Mark J <ma...@usmc.mil>.
Ahh that makes sense, I will add the default to automatically set right when I get home.
-Mark
-----Original Message-----
From: Alex Harui [mailto:aharui@adobe.com]
Sent: Monday, December 09, 2013 12:38 PM
To: dev@flex.apache.org
Subject: Re: git commit: [flex-sdk] [refs/heads/develop] - FLEX-33984: Moved the placement logic from the hostComponent to the skin. Removed some code no longer needed.
Sorry, I mixed up left vs. right, but my point is that not everyone uses
the defaults.css in the framework but may use the default skin so the skin
should do what it used to do if that style is not in the css.
Re: git commit: [flex-sdk] [refs/heads/develop] - FLEX-33984: Moved
the placement logic from the hostComponent to the skin. Removed some code no
longer needed.
Posted by Alex Harui <ah...@adobe.com>.
On 12/9/13 4:01 AM, "Kessler CTR Mark J" <ma...@usmc.mil> wrote:
>
> It's an interesting concept, but since we do not have a solid
>open-source skin drawing application, we need a different solution.
>Styles make sense in that the skin has the same components but can be
>adjusted with styles/CSS. Which should also work with the new FlexJS.
>It's probably better it doesn't affect custom skins... if they customized
>them, they had a specific design in mind and probably wouldn't want it
>changing by itself.
FlexJS skinning is different from Spark/MX skinning. But that's for a
different discussion.
>
>
> I added the default placement (in defaults.css) to be to the right
>which is what the current skin sets up. If we want we can also add the
>case statement to default any non-matching string values to the right as
>well.
>
> <s:Label id="labelDisplay"
> textAlign="start"
> verticalAlign="middle"
> maxDisplayedLines="1"
> left="18" right="0" top="3" bottom="3" verticalCenter="2" />
>
Sorry, I mixed up left vs. right, but my point is that not everyone uses
the defaults.css in the framework but may use the default skin so the skin
should do what it used to do if that style is not in the css.
RE: git commit: [flex-sdk] [refs/heads/develop] - FLEX-33984: Moved the placement logic from the hostComponent to the skin. Removed some code no longer needed.
Posted by Kessler CTR Mark J <ma...@usmc.mil>.
It's an interesting concept, but since we do not have a solid open-source skin drawing application, we need a different solution. Styles make sense in that the skin has the same components but can be adjusted with styles/CSS. Which should also work with the new FlexJS. It's probably better it doesn't affect custom skins... if they customized them, they had a specific design in mind and probably wouldn't want it changing by itself.
I added the default placement (in defaults.css) to be to the right which is what the current skin sets up. If we want we can also add the case statement to default any non-matching string values to the right as well.
<s:Label id="labelDisplay"
textAlign="start"
verticalAlign="middle"
maxDisplayedLines="1"
left="18" right="0" top="3" bottom="3" verticalCenter="2" />
-Mark
-----Original Message-----
From: Alex Harui [mailto:aharui@adobe.com]
Sent: Monday, December 09, 2013 12:19 AM
To: dev@flex.apache.org; commits@flex.apache.org
Subject: Re: git commit: [flex-sdk] [refs/heads/develop] - FLEX-33984: Moved the placement logic from the hostComponent to the skin. Removed some code no longer needed.
FWIW, at one point in time, Spark skins were supposed to have as few
styles as possible since tools like Catalyst were supposed to make easier
to "just draw" a different skin and not have to implement as much code in
the skin. Custom skins were supposed to simply place the icon wherever it
should be in relation to the label. Existing custom skins/themes
certainly will not respond to this new option.
That said, I'm not saying you should revert. I'm just pointing this out
to see if anyone else cares. I think some Spark skins respond to custom
non-font styles already.
One other thing: should the case statement handle the default case as
LEFT? If someone has a custom CSS file but use the default skin, they
won't pick up this new style then will the skin still work as it used to?
On 12/8/13 1:01 PM, "mkessler@apache.org" <mk...@apache.org> wrote:
>Updated Branches:
> refs/heads/develop 7c3d70818 -> cdcb49242
>
>
>FLEX-33984: Moved the placement logic from the hostComponent to the skin.
>Removed some code no longer needed.
>
>
>Project: http://git-wip-us.apache.org/repos/asf/flex-sdk/repo
>Commit: http://git-wip-us.apache.org/repos/asf/flex-sdk/commit/cdcb4924
>Tree: http://git-wip-us.apache.org/repos/asf/flex-sdk/tree/cdcb4924
>Diff: http://git-wip-us.apache.org/repos/asf/flex-sdk/diff/cdcb4924
>
>Branch: refs/heads/develop
>Commit: cdcb49242ae0d06645d3ebaf4f7e3c102b8f6506
>Parents: 7c3d708
>Author: Mark Kessler <Ke...@gmail.com>
>Authored: Sun Dec 8 15:59:25 2013 -0500
>Committer: Mark Kessler <Ke...@gmail.com>
>Committed: Sun Dec 8 15:59:25 2013 -0500
>
>----------------------------------------------------------------------
> .../spark/src/spark/components/CheckBox.as | 188 -------------------
> .../src/spark/skins/spark/CheckBoxSkin.mxml | 138 ++++++++++++++
> 2 files changed, 138 insertions(+), 188 deletions(-)
>----------------------------------------------------------------------
>
>
>http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/cdcb4924/frameworks/p
>rojects/spark/src/spark/components/CheckBox.as
>----------------------------------------------------------------------
>diff --git a/frameworks/projects/spark/src/spark/components/CheckBox.as
>b/frameworks/projects/spark/src/spark/components/CheckBox.as
>index 77dd23d..c72f6c8 100644
>--- a/frameworks/projects/spark/src/spark/components/CheckBox.as
>+++ b/frameworks/projects/spark/src/spark/components/CheckBox.as
>@@ -24,9 +24,7 @@ import flash.events.Event;
> import flash.events.MouseEvent;
>
> import mx.core.mx_internal;
>-import mx.core.UIComponent;
>
>-import spark.components.supportClasses.LabelPlacement;
> import spark.components.supportClasses.ToggleButtonBase;
>
> use namespace mx_internal;
>@@ -214,30 +212,6 @@ public class CheckBox extends ToggleButtonBase
>
>
>//------------------------------------------------------------------------
>--
> //
>- // Variables
>- //
>-
>//------------------------------------------------------------------------
>--
>-
>- //----------------------------------
>- // checkDisplay
>- //----------------------------------
>-
>- /**
>- * The skin part that defines the CheckBox grouping.
>- *
>- * @see spark.skins.spark.CheckBoxSkin#checkDisplay
>- *
>- * @langversion 3.0
>- * @playerversion Flash 11.8
>- * @playerversion AIR 3.8
>- * @productversion Flex 4.12
>- */
>- [SkinPart(required="false")]
>- public var checkDisplay:UIComponent;
>-
>-
>-
>//------------------------------------------------------------------------
>--
>- //
> // Properties
> //
>
>//------------------------------------------------------------------------
>--
>@@ -323,120 +297,6 @@ public class CheckBox extends ToggleButtonBase
>
>
>//------------------------------------------------------------------------
>--
> //
>- // Methods
>- //
>-
>//------------------------------------------------------------------------
>--
>-
>- /**
>- * Sets the label placement in relation to the checkbox.
>- * Requires the SkinParts <code>checkDisplay</code> and
><code>labelDisplay</code>.
>- *
>- * @langversion 3.0
>- * @playerversion Flash 11.8
>- * @playerversion AIR 3.8
>- * @productversion Flex 4.12
>- */
>- public function updateLabelPlacement():void
>- {
>- var labelDisplayAsUIComponent:UIComponent;
>-
>-
>- if (!checkDisplay || !labelDisplay)
>- {
>- return;
>- }
>-
>- labelDisplayAsUIComponent = labelDisplay as UIComponent;
>-
>-
>- switch (String(getStyle("labelPlacement")).toLowerCase())
>- {
>- case LabelPlacement.BOTTOM:
>- {
>- //Adjust the labels position to the bottom.
>- labelDisplayAsUIComponent.horizontalCenter = 0;
>- labelDisplayAsUIComponent.verticalCenter = undefined;
>- labelDisplayAsUIComponent.top = checkDisplay.height +
>int(getStyle("gap"));
>- labelDisplayAsUIComponent.bottom = undefined;
>- labelDisplayAsUIComponent.left = undefined;
>- labelDisplayAsUIComponent.right = undefined;
>-
>- //Adjust the checkboxes position to the top.
>- checkDisplay.horizontalCenter = 0;
>- checkDisplay.verticalCenter = undefined;
>- checkDisplay.top = 0;
>- checkDisplay.bottom = undefined;
>-
>- break;
>- }
>-
>- case LabelPlacement.LEFT:
>- {
>- //Adjust the labels position to left side.
>- labelDisplayAsUIComponent.horizontalCenter = undefined;
>- labelDisplayAsUIComponent.verticalCenter = 2;
>- labelDisplayAsUIComponent.top = undefined;
>- labelDisplayAsUIComponent.bottom = undefined;
>- labelDisplayAsUIComponent.left = undefined;
>- labelDisplayAsUIComponent.right = checkDisplay.width +
>int(getStyle("gap"));
>-
>- //Adjust the checkboxes position to right side.
>- checkDisplay.horizontalCenter = undefined;
>- checkDisplay.verticalCenter = 0;
>- checkDisplay.left = undefined;
>- checkDisplay.right = 0;
>-
>- break;
>- }
>-
>- case LabelPlacement.RIGHT:
>- {
>- //Adjust the labels position to right side.
>- labelDisplayAsUIComponent.horizontalCenter = undefined;
>- labelDisplayAsUIComponent.verticalCenter = 2;
>- labelDisplayAsUIComponent.top = undefined;
>- labelDisplayAsUIComponent.bottom = undefined;
>- labelDisplayAsUIComponent.left = checkDisplay.width +
>int(getStyle("gap"));
>- labelDisplayAsUIComponent.right = undefined;
>-
>- //Adjust the checkboxes position to left side.
>- checkDisplay.horizontalCenter = undefined;
>- checkDisplay.verticalCenter = 0;
>- checkDisplay.left = 0;
>- checkDisplay.right = undefined;
>-
>- break;
>- }
>-
>- case LabelPlacement.TOP:
>- {
>- //Adjust the labels position to the top.
>- labelDisplayAsUIComponent.horizontalCenter = 0;
>- labelDisplayAsUIComponent.verticalCenter = undefined;
>- labelDisplayAsUIComponent.top = undefined;
>- labelDisplayAsUIComponent.bottom = checkDisplay.height +
>int(getStyle("gap"));
>- labelDisplayAsUIComponent.left = undefined;
>- labelDisplayAsUIComponent.right = undefined;
>-
>- //Adjust the checkboxes position to the bottom.
>- checkDisplay.horizontalCenter = 0;
>- checkDisplay.verticalCenter = undefined;
>- checkDisplay.top = undefined;
>- checkDisplay.bottom = 0;
>-
>- break;
>- }
>-
>- default:
>- {
>- break;
>- }
>- }
>- }
>-
>-
>-
>//------------------------------------------------------------------------
>--
>- //
> // Overridden methods
> //
>
>//------------------------------------------------------------------------
>--
>@@ -450,54 +310,6 @@ public class CheckBox extends ToggleButtonBase
> CheckBox.createAccessibilityImplementation(this);
> }
>
>-
>- /**
>- * @copy
>spark.components.supportClasses.SkinnableComponent#partAdded
>- *
>- * @langversion 3.0
>- * @playerversion Flash 11.8
>- * @playerversion AIR 3.8
>- * @productversion Flex 4.12
>- */
>- override protected function partAdded(partName:String,
>instance:Object):void
>- {
>- super.partAdded(partName, instance);
>-
>- if (instance == checkDisplay)
>- {
>- updateLabelPlacement();
>-
>- return;
>- }
>-
>- if (instance == labelDisplay)
>- {
>- updateLabelPlacement();
>-
>- return;
>- }
>- }
>-
>-
>- /**
>- * @copy mx.core.UIComponent#styleChanged
>- *
>- * @langversion 3.0
>- * @playerversion Flash 11.8
>- * @playerversion AIR 3.8
>- * @productversion Flex 4.12
>- */
>- override public function styleChanged(styleProp:String):void
>- {
>- super.styleChanged(styleProp);
>-
>- //Check if the style is null for mass style changes or if the
>labelPlacement/gap styles were changed.
>- if (styleProp == "labelPlacement" || styleProp == "gap" ||
>styleProp === null)
>- {
>- updateLabelPlacement();
>- }
>- }
>-
> }
>
> }
>
>http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/cdcb4924/frameworks/p
>rojects/spark/src/spark/skins/spark/CheckBoxSkin.mxml
>----------------------------------------------------------------------
>diff --git
>a/frameworks/projects/spark/src/spark/skins/spark/CheckBoxSkin.mxml
>b/frameworks/projects/spark/src/spark/skins/spark/CheckBoxSkin.mxml
>index aeec082..e6bf5b3 100644
>--- a/frameworks/projects/spark/src/spark/skins/spark/CheckBoxSkin.mxml
>+++ b/frameworks/projects/spark/src/spark/skins/spark/CheckBoxSkin.mxml
>@@ -70,6 +70,9 @@
>
> <fx:Script>
> <![CDATA[
>+ import spark.components.supportClasses.LabelPlacement;
>+
>+
> /**
> * @private
> */
>@@ -79,6 +82,141 @@
> * @private
> */
> override public function get focusSkinExclusions():Array {
>return focusExclusions;};
>+
>+
>+
>//------------------------------------------------------------------------
>--
>+ //
>+ // Overridden methods
>+ //
>+
>//------------------------------------------------------------------------
>--
>+
>+ /**
>+ * @copy mx.core.UIComponent#styleChanged
>+ *
>+ * @langversion 3.0
>+ * @playerversion Flash 11.8
>+ * @playerversion AIR 3.8
>+ * @productversion Flex 4.12
>+ */
>+ override public function styleChanged(styleProp:String):void
>+ {
>+ super.styleChanged(styleProp);
>+
>+ //Check if the style is null for mass style changes or
>if the labelPlacement/gap styles were changed.
>+ if (styleProp == "labelPlacement" || styleProp == "gap"
>|| styleProp === null)
>+ {
>+ updateLabelPlacement();
>+ }
>+ }
>+
>+
>+
>//------------------------------------------------------------------------
>--
>+ //
>+ // Methods
>+ //
>+
>//------------------------------------------------------------------------
>--
>+
>+ /**
>+ * Sets the label placement in relation to the checkbox.
>+ * Requires the SkinParts <code>checkDisplay</code> and
><code>labelDisplay</code>.
>+ *
>+ * @langversion 3.0
>+ * @playerversion Flash 11.8
>+ * @playerversion AIR 3.8
>+ * @productversion Flex 4.12
>+ */
>+ public function updateLabelPlacement():void
>+ {
>+ if (!checkDisplay || !labelDisplay)
>+ {
>+ return;
>+ }
>+
>+ switch (String(getStyle("labelPlacement")).toLowerCase())
>+ {
>+ case LabelPlacement.BOTTOM:
>+ {
>+ //Adjust the labels position to the bottom.
>+ labelDisplay.horizontalCenter = 0;
>+ labelDisplay.verticalCenter = undefined;
>+ labelDisplay.top = checkDisplay.height +
>int(getStyle("gap"));
>+ labelDisplay.bottom = undefined;
>+ labelDisplay.left = undefined;
>+ labelDisplay.right = undefined;
>+
>+ //Adjust the checkboxes position to the top.
>+ checkDisplay.horizontalCenter = 0;
>+ checkDisplay.verticalCenter = undefined;
>+ checkDisplay.top = 0;
>+ checkDisplay.bottom = undefined;
>+
>+ break;
>+ }
>+
>+ case LabelPlacement.LEFT:
>+ {
>+ //Adjust the labels position to left side.
>+ labelDisplay.horizontalCenter = undefined;
>+ labelDisplay.verticalCenter = 2;
>+ labelDisplay.top = undefined;
>+ labelDisplay.bottom = undefined;
>+ labelDisplay.left = undefined;
>+ labelDisplay.right = checkDisplay.width +
>int(getStyle("gap"));
>+
>+ //Adjust the checkboxes position to right side.
>+ checkDisplay.horizontalCenter = undefined;
>+ checkDisplay.verticalCenter = 0;
>+ checkDisplay.left = undefined;
>+ checkDisplay.right = 0;
>+
>+ break;
>+ }
>+
>+ case LabelPlacement.RIGHT:
>+ {
>+ //Adjust the labels position to right side.
>+ labelDisplay.horizontalCenter = undefined;
>+ labelDisplay.verticalCenter = 2;
>+ labelDisplay.top = undefined;
>+ labelDisplay.bottom = undefined;
>+ labelDisplay.left = checkDisplay.width +
>int(getStyle("gap"));
>+ labelDisplay.right = undefined;
>+
>+ //Adjust the checkboxes position to left side.
>+ checkDisplay.horizontalCenter = undefined;
>+ checkDisplay.verticalCenter = 0;
>+ checkDisplay.left = 0;
>+ checkDisplay.right = undefined;
>+
>+ break;
>+ }
>+
>+ case LabelPlacement.TOP:
>+ {
>+ //Adjust the labels position to the top.
>+ labelDisplay.horizontalCenter = 0;
>+ labelDisplay.verticalCenter = undefined;
>+ labelDisplay.top = undefined;
>+ labelDisplay.bottom = checkDisplay.height +
>int(getStyle("gap"));
>+ labelDisplay.left = undefined;
>+ labelDisplay.right = undefined;
>+
>+ //Adjust the checkboxes position to the bottom.
>+ checkDisplay.horizontalCenter = 0;
>+ checkDisplay.verticalCenter = undefined;
>+ checkDisplay.top = undefined;
>+ checkDisplay.bottom = 0;
>+
>+ break;
>+ }
>+
>+ default:
>+ {
>+ break;
>+ }
>+ }
>+ }
>+
> ]]>
> </fx:Script>
>
>