You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by bi...@apache.org on 2014/11/24 22:13:17 UTC
[27/44] git commit: [flex-sdk] [refs/heads/develop] - iOS7+ specific
skins for ToggleSwitch
iOS7+ specific skins for ToggleSwitch
Project: http://git-wip-us.apache.org/repos/asf/flex-sdk/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-sdk/commit/807e901b
Tree: http://git-wip-us.apache.org/repos/asf/flex-sdk/tree/807e901b
Diff: http://git-wip-us.apache.org/repos/asf/flex-sdk/diff/807e901b
Branch: refs/heads/develop
Commit: 807e901b19f16a162489fad74082fed138be9a52
Parents: b224b4a
Author: OmPrakash Muppirala <bi...@gmail.com>
Authored: Sat Nov 1 01:41:58 2014 -0700
Committer: OmPrakash Muppirala <bi...@gmail.com>
Committed: Sat Nov 1 01:41:58 2014 -0700
----------------------------------------------------------------------
.../src/spark/skins/ios7/ToggleSwitchSkin.as | 197 +++++++------------
.../ios7/assets/ToggleSwitchBackground.fxg | 29 ---
.../ios7/assets/ToggleSwitchBackground_off.fxg | 34 ++++
.../ios7/assets/ToggleSwitchBackground_on.fxg | 29 +++
.../skins/ios7/assets/ToggleSwitchThumb_off.fxg | 23 +--
.../skins/ios7/assets/ToggleSwitchThumb_on.fxg | 18 +-
6 files changed, 148 insertions(+), 182 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/807e901b/frameworks/projects/mobiletheme/src/spark/skins/ios7/ToggleSwitchSkin.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/ToggleSwitchSkin.as b/frameworks/projects/mobiletheme/src/spark/skins/ios7/ToggleSwitchSkin.as
index 41144f9..4d543a7 100644
--- a/frameworks/projects/mobiletheme/src/spark/skins/ios7/ToggleSwitchSkin.as
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/ToggleSwitchSkin.as
@@ -30,13 +30,13 @@ package spark.skins.ios7
import spark.components.ToggleSwitch;
import spark.components.supportClasses.StyleableTextField;
import spark.core.SpriteVisualElement;
- import spark.skins.ios7.assets.ToggleSwitchBackground;
- import spark.skins.ios7.assets.ToggleSwitchThumb_off;
+ import spark.skins.ios7.assets.ToggleSwitchBackground_off;
+ import spark.skins.ios7.assets.ToggleSwitchBackground_on;
import spark.skins.mobile.supportClasses.MobileSkin;
/**
- * ActionScript-based Android 4.x specific skin for the ToggleSwitch control.
+ * ActionScript-based iOS7+ specific skin for the ToggleSwitch control.
* This class is responsible for most of the
* graphics drawing, with additional fxg assets.
*
@@ -77,6 +77,7 @@ package spark.skins.ios7
//----------------------------------
private var _hostComponent:ToggleSwitch;
+ //The label is called selectedLabelDisplay because the hostComponent expects it
public var selectedLabelDisplay:LabelDisplayComponent;
/**
@@ -96,59 +97,13 @@ package spark.skins.ios7
_hostComponent.addEventListener("thumbPositionChanged", thumbPositionChanged_handler);
}
- //----------------------------------
- // selectedLabel
- //----------------------------------
-
- private var _selectedLabel:String;
- /**
- * The text of the label showing when the component is selected.
- * Subclasses can set or override this property to customize the selected label.
- *
- * @langversion 3.0
- * @playerversion AIR 3
- * @productversion Flex 4.6
- */
- protected function get selectedLabel():String
- {
- return _selectedLabel;
- }
-
- protected function set selectedLabel(value:String):void
- {
- _selectedLabel = value;
- }
-
- //----------------------------------
- // unselectedLabel
- //----------------------------------
-
- private var _unselectedLabel:String;
- /**
- * The text of the label showing when the component is not selected.
- * Subclasses can set or override this property to customize the unselected label.
- *
- * @langversion 3.0
- * @playerversion AIR 3
- * @productversion Flex 4.6
- */
- protected function get unselectedLabel():String
- {
- return _unselectedLabel;
- }
-
- protected function set unselectedLabel(value:String):void
- {
- _unselectedLabel = value;
- }
-
-
/**
* The contents inside the skin, not including the outline
* stroke
*/
private var contents:UIComponent;
- private var switchTrack:Class;
+ private var switchTrackOn:Class;
+ private var switchTrackOff:Class;
private var switchOff:Class;
private var switchOn:Class;
protected var trackWidth:Number;
@@ -157,12 +112,15 @@ package spark.skins.ios7
protected var layoutThumbHeight:Number;
private var thumbOn:IVisualElement;
private var thumbOff:IVisualElement;
+ private var trackOn:IVisualElement;
+ private var trackOff:IVisualElement;
public function ToggleSwitchSkin()
{
super();
- switchTrack = spark.skins.ios7.assets.ToggleSwitchBackground;
+ switchTrackOn = spark.skins.ios7.assets.ToggleSwitchBackground_on;
+ switchTrackOff = spark.skins.ios7.assets.ToggleSwitchBackground_off;
switchOn = spark.skins.ios7.assets.ToggleSwitchThumb_on;
switchOff = spark.skins.ios7.assets.ToggleSwitchThumb_off;
@@ -170,108 +128,108 @@ package spark.skins.ios7
{
case DPIClassification.DPI_640:
{
- layoutThumbWidth = 188;
- layoutThumbHeight = 96;
- trackWidth = 388;
- trackHeight = 96;
+ layoutThumbWidth = 108;
+ layoutThumbHeight = 108;
+ trackWidth = 224;
+ trackHeight = 124;
break;
}
case DPIClassification.DPI_480:
{
- layoutThumbWidth = 140;
- layoutThumbHeight = 72;
- trackWidth = 291;
- trackHeight = 72;
+ layoutThumbWidth = 80;
+ layoutThumbHeight = 80;
+ trackWidth = 168;
+ trackHeight = 92;
break;
}
case DPIClassification.DPI_320:
{
- layoutThumbWidth = 94;
- layoutThumbHeight = 48;
- trackWidth = 194;
- trackHeight = 48;
+ layoutThumbWidth = 54;
+ layoutThumbHeight = 54;
+ trackWidth = 112;
+ trackHeight = 62;
break;
}
case DPIClassification.DPI_240:
{
- layoutThumbWidth = 70;
- layoutThumbHeight = 36;
- trackWidth = 146;
- trackHeight = 36;
+ layoutThumbWidth = 40;
+ layoutThumbHeight = 40;
+ trackWidth = 84;
+ trackHeight = 46;
break;
}
case DPIClassification.DPI_120:
{
- layoutThumbWidth = 35;
- layoutThumbHeight = 18;
- trackWidth = 73;
- trackHeight = 18;
+ layoutThumbWidth = 20;
+ layoutThumbHeight = 20;
+ trackWidth = 42;
+ trackHeight = 23;
break;
}
default:
{
- layoutThumbWidth = 47;
- layoutThumbHeight = 24;
- trackWidth = 97;
- trackHeight = 24;
+ layoutThumbWidth = 27;
+ layoutThumbHeight = 27;
+ trackWidth = 56;
+ trackHeight = 31;
break;
}
}
- selectedLabel = resourceManager.getString("components","toggleSwitchSelectedLabel");
- unselectedLabel = resourceManager.getString("components","toggleSwitchUnselectedLabel");
}
override protected function createChildren():void
{
super.createChildren();
contents = new UIComponent();
- contents.blendMode = BlendMode.LAYER;
addChild(contents);
- drawTrack();
+ drawTracks();
drawThumbs();
- drawLabel();
}
override protected function measure():void
{
// The skin must be at least as large as the thumb
- measuredMinWidth = layoutThumbWidth;
- measuredMinHeight = layoutThumbHeight;
+ measuredMinWidth = trackWidth;
+ measuredMinHeight = trackHeight;
- // The preferred size will display all label text
- var labelWidth:Number = getElementPreferredWidth(selectedLabelDisplay);
- measuredWidth = layoutThumbWidth + labelWidth;
- measuredHeight = layoutThumbHeight;
+ measuredWidth = trackWidth;
+ measuredHeight = trackHeight;
}
override protected function commitCurrentState():void
{
toggleSelectionState();
layoutThumbs();
- layoutLabel();
}
- //The label is called selectedLabelDisplay because the hostComponent expects it
- protected function drawLabel():void
+ //Draw both thumbs. Set skinpart track to be switchTrackOff because default
+ //state of the switch is OFF
+ protected function drawTracks():void
{
- selectedLabelDisplay = new LabelDisplayComponent();
- selectedLabelDisplay.id = "selectedLabelDisplay";
- selectedLabelDisplay.text = selectedLabel;
- setElementSize(selectedLabelDisplay,thumb.width,thumb.height);
- contents.addChild(selectedLabelDisplay);
+ drawTrackOff();
+ drawTrackOn();
+ if(track == null)
+ {
+ track = trackOff;
+ }
}
//Draw the track behind everything else
- protected function drawTrack():void
+ protected function drawTrackOn():void
{
- if(track == null)
- {
- track = new switchTrack();
- track.width = trackWidth;
- track.height = trackHeight;
- contents.addChildAt(SpriteVisualElement(track),0);
- }
+ trackOn = new switchTrackOn();
+ trackOn.width = trackWidth;
+ trackOn.height = trackHeight;
+ contents.addChildAt(SpriteVisualElement(trackOn),0);
+ }
+
+ protected function drawTrackOff():void
+ {
+ trackOff = new switchTrackOff();
+ trackOff.width = trackWidth;
+ trackOff.height = trackHeight;
+ contents.addChildAt(SpriteVisualElement(trackOff),0);
}
//Draw both thumbs. Set skinpart thumb to be thumbOff because default state of the switch is OFF
@@ -288,24 +246,8 @@ package spark.skins.ios7
//Thumb ON the right side; Thumb OFF is on the left side
protected function layoutThumbs():void
{
- setElementPosition(thumbOn,trackWidth/2,0);
- setElementPosition(thumbOff,0,0);
- }
-
- //Label display sould be at the same location as the thumb
- protected function layoutLabel():void
- {
- if(selectedLabelDisplay != null)
- {
- if(currentState.indexOf("AndSelected") != -1)
- {
- setElementPosition(selectedLabelDisplay,trackWidth/2,0);
- }
- else
- {
- setElementPosition(selectedLabelDisplay,0,0);
- }
- }
+ setElementPosition(thumbOn,trackWidth/2,trackHeight/2 - thumbOn.height/2);
+ setElementPosition(thumbOff,0,trackHeight/2 - thumbOff.height/2);
}
//Depending on current state, set skinpart thumb accordingly
@@ -316,14 +258,18 @@ package spark.skins.ios7
thumbOn.visible = true;
thumbOff.visible = false;
thumb = thumbOn;
- selectedLabelDisplay.text = selectedLabel;
+ trackOn.visible = true;
+ trackOff.visible = false;
+ track = trackOn;
}
else
{
thumbOff.visible = true;
thumbOn.visible = false;
thumb = thumbOff;
- selectedLabelDisplay.text = unselectedLabel;
+ trackOff.visible = true;
+ trackOn.visible = false;
+ track = trackOff;
}
}
@@ -332,7 +278,7 @@ package spark.skins.ios7
thumbOn = new switchOn();
thumbOn.width = layoutThumbWidth;
thumbOn.height = layoutThumbHeight;
- contents.addChildAt(SpriteVisualElement(thumbOn),1);
+ contents.addChildAt(SpriteVisualElement(thumbOn),2);
}
protected function drawThumbOff():void
@@ -340,7 +286,7 @@ package spark.skins.ios7
thumbOff = new switchOff();
thumbOff.width = layoutThumbWidth;
thumbOff.height = layoutThumbHeight;
- contents.addChildAt(SpriteVisualElement(thumbOff),1);
+ contents.addChildAt(SpriteVisualElement(thumbOff),2);
}
//Hostcomponent dispatches this event whenever the thumb position changes
@@ -358,7 +304,6 @@ package spark.skins.ios7
hostComponent.thumbPosition + track.getLayoutBoundsX();
var y:Number = thumb.getLayoutBoundsY();
setElementPosition(thumb, x, y);
- setElementPosition(selectedLabelDisplay, x, y);
}
}
}
http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/807e901b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchBackground.fxg
----------------------------------------------------------------------
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchBackground.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchBackground.fxg
deleted file mode 100644
index b264573..0000000
--- a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchBackground.fxg
+++ /dev/null
@@ -1,29 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-
- 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.
-
--->
-
-<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
- <Group scaleGridLeft="24.25" scaleGridRight="72.75" scaleGridTop="18" scaleGridBottom="6">
- <Path winding="nonZero" data="M97 24 0 24 0 0 97 0 97 24Z">
- <fill>
- <SolidColor color="#D2D3D3"/>
- </fill>
- </Path>
- </Group>
-</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/807e901b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchBackground_off.fxg
----------------------------------------------------------------------
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchBackground_off.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchBackground_off.fxg
new file mode 100644
index 0000000..43342d9
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchBackground_off.fxg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+ 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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+ <Group scaleGridLeft="25.5" scaleGridRight="76.5" scaleGridTop="46.5" scaleGridBottom="15.5">
+ <Path x="1.5" y="2" winding="nonZero" data="M29.5 59C13.2324 59 0 45.7666 0 29.5 0 13.2344 13.2324 0 29.5 0L69.5 0C85.7666 0 99 13.2344 99 29.5 99 45.7666 85.7666 59 69.5 59L29.5 59Z">
+ <fill>
+ <SolidColor color="#FFFFFF"/>
+ </fill>
+ </Path>
+ <Path winding="nonZero" data="M71 3C86.4385 3 99 15.5615 99 31 99 46.4395 86.4385 59 71 59L31 59C15.5615 59 3 46.4395 3 31 3 15.5615 15.5615 3 31 3L71 3ZM71 0 31 0C13.8799 0 0 13.8799 0 31L0 23.3916 0 31C0 48.1211 13.8799 62 31 62L71 62C88.1201 62 102 48.1211 102 31 102 13.8799
 88.1201 0 71 0Z">
+ <fill>
+ <SolidColor color="#E5E5E5"/>
+ </fill>
+ </Path>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/807e901b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchBackground_on.fxg
----------------------------------------------------------------------
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchBackground_on.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchBackground_on.fxg
new file mode 100644
index 0000000..de3761d
--- /dev/null
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchBackground_on.fxg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+ 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.
+
+-->
+
+<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
+ <Group scaleGridLeft="25.5" scaleGridRight="76.5" scaleGridTop="46.5" scaleGridBottom="15.5">
+ <Path winding="nonZero" data="M0 31C0 48.1211 13.8799 62 31 62L71 62C88.1201 62 102 48.1211 102 31 102 13.8799 88.1201 0 71 0L31 0C13.8799 0 0 13.8799 0 31 0 31 0 13.8799 0 31Z">
+ <fill>
+ <SolidColor color="#4CD964"/>
+ </fill>
+ </Path>
+ </Group>
+</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/807e901b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchThumb_off.fxg
----------------------------------------------------------------------
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchThumb_off.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchThumb_off.fxg
index 8f9d046..432d1e8 100644
--- a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchThumb_off.fxg
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchThumb_off.fxg
@@ -19,22 +19,17 @@
-->
<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
- <Group scaleGridLeft="11.75" scaleGridRight="35.25" scaleGridTop="16.5" scaleGridBottom="5.5">
- <Path winding="nonZero" data="M47 22 0 22 0 0 47 0 47 22Z">
+ <Group x="3" scaleGridLeft="14" scaleGridRight="42" scaleGridTop="42" scaleGridBottom="14">
+ <Path winding="nonZero" data="M56 28C56 43.4619 43.4609 56 28 56 12.5381 56 0 43.4619 0 28 0 12.5391 12.5381 0 28 0 43.4609 0 56 12.5391 56 28Z">
<fill>
- <SolidColor color="#B3B3B3"/>
+ <SolidColor color="#FFFFFF"/>
</fill>
+ <stroke>
+ <SolidColorStroke color="#E5E5E5" alpha="0.5" />
+ </stroke>
+ <filters>
+ <DropShadowFilter distance="5" alpha=".4" strength=".33" angle="90" blurX="5" blurY="5"/>
+ </filters>
</Path>
- <Path winding="nonZero" data="M46 0 46 21 0 21 0 22 47 22 47 0 46 0Z">
- <fill>
- <SolidColor color="#AFAFAF"/>
- </fill>
- </Path>
- <Path winding="nonZero" data="M47 1 0 1 0 0 47 0 47 1Z">
- <fill>
- <SolidColor color="#DEDEDD"/>
- </fill>
- </Path>
- <Path visible="false" winding="nonZero" data="M0 0 47 0 47 22 0 22 0 0Z"/>
</Group>
</Graphic>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/807e901b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchThumb_on.fxg
----------------------------------------------------------------------
diff --git a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchThumb_on.fxg b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchThumb_on.fxg
index d003f72..e4c75d1 100644
--- a/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchThumb_on.fxg
+++ b/frameworks/projects/mobiletheme/src/spark/skins/ios7/assets/ToggleSwitchThumb_on.fxg
@@ -19,22 +19,14 @@
-->
<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">
- <Group scaleGridLeft="11.75" scaleGridRight="35.25" scaleGridTop="16.5" scaleGridBottom="5.5">
- <Path winding="nonZero" data="M47 22 0 22 0 0 47 0 47 22Z">
- <fill>
- <SolidColor color="#33B5E5"/>
- </fill>
- </Path>
- <Path winding="nonZero" data="M46 0 46 21 0 21 0 22 47 22 47 0 46 0Z">
- <fill>
- <SolidColor color="#3399E5"/>
- </fill>
- </Path>
- <Path winding="nonZero" data="M47 1 0 1 0 0 47 0 47 1Z">
+ <Group scaleGridLeft="14" scaleGridRight="42" scaleGridTop="42" scaleGridBottom="14">
+ <Path winding="nonZero" data="M56 28C56 43.4619 43.4609 56 28 56 12.5381 56 0 43.4619 0 28 0 12.5391 12.5381 0 28 0 43.4609 0 56 12.5391 56 28Z">
<fill>
<SolidColor color="#FFFFFF"/>
</fill>
+ <filters>
+ <DropShadowFilter distance="5" alpha=".4" strength=".33" angle="90" blurX="5" blurY="5"/>
+ </filters>
</Path>
- <Path visible="false" winding="nonZero" data="M0 0 47 0 47 22 0 22 0 0Z"/>
</Group>
</Graphic>
\ No newline at end of file