Updated Branches: refs/heads/develop 5093c0fc5 -> 7c3d70818
FLEX-33984: Added support for labelPlacement on s:CheckBox. Project: http://git-wip-us.apache.org/repos/asf/flex-sdk/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-sdk/commit/7c3d7081 Tree: http://git-wip-us.apache.org/repos/asf/flex-sdk/tree/7c3d7081 Diff: http://git-wip-us.apache.org/repos/asf/flex-sdk/diff/7c3d7081 Branch: refs/heads/develop Commit: 7c3d7081815ecacaad19d5c38c71c2ae6b7ef9bf Parents: 5093c0f Author: Mark Kessler <[email protected]> Authored: Sun Dec 8 14:40:26 2013 -0500 Committer: Mark Kessler <[email protected]> Committed: Sun Dec 8 14:40:26 2013 -0500 ---------------------------------------------------------------------- frameworks/projects/spark/defaults.css | 2 + .../spark/src/spark/components/CheckBox.as | 291 ++++++++++++++++++- .../components/supportClasses/LabelPlacement.as | 95 ++++++ .../src/spark/skins/spark/CheckBoxSkin.mxml | 4 +- 4 files changed, 390 insertions(+), 2 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/7c3d7081/frameworks/projects/spark/defaults.css ---------------------------------------------------------------------- diff --git a/frameworks/projects/spark/defaults.css b/frameworks/projects/spark/defaults.css index cb7b46f..79eecc1 100644 --- a/frameworks/projects/spark/defaults.css +++ b/frameworks/projects/spark/defaults.css @@ -66,6 +66,8 @@ CalloutButton { CheckBox { + gap: 5; + labelPlacement: "right"; skinClass: ClassReference("spark.skins.spark.CheckBoxSkin"); } http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/7c3d7081/frameworks/projects/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 4ca1279..77dd23d 100644 --- a/frameworks/projects/spark/src/spark/components/CheckBox.as +++ b/frameworks/projects/spark/src/spark/components/CheckBox.as @@ -24,7 +24,9 @@ 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; @@ -34,6 +36,19 @@ use namespace mx_internal; //-------------------------------------- /** + * The space between layout elements, in pixels. + * + * @default 5 + * + * @langversion 3.0 + * @playerversion Flash 11.8 + * @playerversion AIR 3.8 + * @productversion Flex 4.12 + */ +[Style(name="gap", type="int", inherit="no")] + + +/** * Orientation of the icon in relation to the label. * Valid MXML values are <code>right</code>, <code>left</code>, * <code>bottom</code>, and <code>top</code>. @@ -54,6 +69,29 @@ use namespace mx_internal; */ [Style(name="iconPlacement", type="String", enumeration="top,bottom,right,left", inherit="no", theme="mobile")] + +/** + * Orientation of the Label in relation to the CheckBox. + * Valid MXML values are <code>"left"</code>, <code>"right"</code>, + * <code>"top"</code>, and <code>"bottom"</code>. + * + * <p>In ActionScript, you can use the following constants + * to set this property: + * <code>LabelPlacement.LEFT</code>, + * <code>LabelPlacement.RIGHT</code>, + * <code>LabelPlacement.TOP</code>, and + * <code>LabelPlacement.BOTTOM</code>.</p> + * + * @see spark.components.supportClasses.LabelPlacement + * + * @langversion 3.0 + * @playerversion Flash 10 + * @playerversion AIR 1.5 + * @productversion Flex 4 + */ +[Style(name="labelPlacement", type="String", enumeration="top,bottom,left,right", inherit="no", defaultValue="right")] + + /** * @copy spark.components.supportClasses.GroupBase#style:symbolColor * @@ -172,7 +210,94 @@ public class CheckBox extends ToggleButtonBase { super(); } - + + + //-------------------------------------------------------------------------- + // + // 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 + // + //-------------------------------------------------------------------------- + + //---------------------------------- + // gap + //---------------------------------- + + /** + * The space between layout elements, in pixels. This is mearly a wrapper for the + * <code>gap</code> style. + * + * @langversion 3.0 + * @playerversion Flash 11.8 + * @playerversion AIR 3.8 + * @productversion Flex 4.12 + */ + public function get gap():int + { + return int(getStyle("gap")); + } + + /** + * @private + */ + public function set gap(value:int):void + { + setStyle("gap", value); + } + + + //---------------------------------- + // labelPlacement + //---------------------------------- + + /** + * Affects the placement of the label in relation to the checkbox. This is mearly a wrapper for the + * <code>labelPlacement</code> style. + * + * @default LabelPlacement.RIGHT + * + * @langversion 3.0 + * @playerversion Flash 11.8 + * @playerversion AIR 3.8 + * @productversion Flex 4.12 + */ + public function get labelPlacement():String + { + return String(getStyle("labelPlacement")); + } + + /** + * @private + */ + public function set labelPlacement(value:String):void + { + setStyle("labelPlacement", value); + } + + //-------------------------------------------------------------------------- // // Overridden Properties @@ -195,6 +320,121 @@ public class CheckBox extends ToggleButtonBase return focusExclusions; } + + //-------------------------------------------------------------------------- + // + // 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 @@ -209,6 +449,55 @@ public class CheckBox extends ToggleButtonBase if (CheckBox.createAccessibilityImplementation != null) 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/7c3d7081/frameworks/projects/spark/src/spark/components/supportClasses/LabelPlacement.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/spark/src/spark/components/supportClasses/LabelPlacement.as b/frameworks/projects/spark/src/spark/components/supportClasses/LabelPlacement.as new file mode 100644 index 0000000..69def0c --- /dev/null +++ b/frameworks/projects/spark/src/spark/components/supportClasses/LabelPlacement.as @@ -0,0 +1,95 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// + +package spark.components.supportClasses +{ + /** + * The LabelPlacement class defines the valid constant values for the + * <code>labelPlacement</code> property of the Spark <code>CheckBox</code>. + * + * @see spark.components.CheckBox#labelPlacement + * + * @langversion 3.0 + * @playerversion Flash 11.8 + * @playerversion AIR 3.8 + * @productversion Flex 4.12 + */ + public final class LabelPlacement + { + /** + * Constructor. + * + * @langversion 3.0 + * @playerversion Flash 11.8 + * @playerversion AIR 3.8 + * @productversion Flex 4.12 + */ + public function LabelPlacement() + { + } + + + //-------------------------------------------------------------------------- + // + // Class constants + // + //-------------------------------------------------------------------------- + + /** + * Specifies that the <code>label</code> appears below the <code>CheckBox</code>. + * + * @langversion 3.0 + * @playerversion Flash 11.8 + * @playerversion AIR 3.8 + * @productversion Flex 4.12 + */ + public static const BOTTOM:String = "bottom"; + + /** + * Specifies that the <code>Label</code> appears to the left of the <code>CheckBox</code>. + * + * @langversion 3.0 + * @playerversion Flash 11.8 + * @playerversion AIR 3.8 + * @productversion Flex 4.12 + */ + public static const LEFT:String = "left"; + + /** + * Specifies that the <code>Label</code> appears to the right of the <code>CheckBox</code>. + * + * @langversion 3.0 + * @playerversion Flash 11.8 + * @playerversion AIR 3.8 + * @productversion Flex 4.12 + */ + public static const RIGHT:String = "right"; + + /** + * Specifies that the <code>Label</code> appears above the <code>CheckBox</code>. + * + * @langversion 3.0 + * @playerversion Flash 11.8 + * @playerversion AIR 3.8 + * @productversion Flex 4.12 + */ + public static const TOP:String = "top"; + } + +} http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/7c3d7081/frameworks/projects/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 f179701..aeec082 100644 --- a/frameworks/projects/spark/src/spark/skins/spark/CheckBoxSkin.mxml +++ b/frameworks/projects/spark/src/spark/skins/spark/CheckBoxSkin.mxml @@ -93,7 +93,9 @@ <s:State name="disabledAndSelected" stateGroups="disabledStates, selectedStates" /> </s:states> - <s:Group verticalCenter="0" width="13" height="13" layoutDirection="ltr"> + <!-- Checkbox container --> + <!--- @copy spark.components.CheckBox#checkDisplay --> + <s:Group id="checkDisplay" verticalCenter="0" width="13" height="13" layoutDirection="ltr"> <!-- drop shadow --> <s:Rect left="-1" top="-1" right="-1" bottom="-1"> <s:stroke>
