Skip to content

Commit

Permalink
Changes to allow spark components to be skinned for the whole applica…
Browse files Browse the repository at this point in the history
…tion.

Created custom ButtonIcon and TextInputIcon for the Flat components.
  • Loading branch information
akamud committed May 20, 2014
1 parent cf0f6ae commit c137f3a
Show file tree
Hide file tree
Showing 19 changed files with 636 additions and 139 deletions.
4 changes: 1 addition & 3 deletions FlatSparkSkin/.flexLibProperties
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,10 @@
<classEntry path="flatSpark.enums.ButtonColorEnum"/>
<classEntry path="flatSpark.enums.BrandColorEnum"/>
<classEntry path="flatSpark.skins.TextInputSkin"/>
<classEntry path="flatSpark.components.TextInput"/>
<classEntry path="flatSpark.components.TextInputIcon"/>
<classEntry path="flatSpark.skins.ToggleSwitchSkin"/>
<classEntry path="flatSpark.components.ToggleSwitch"/>
<classEntry path="flatSpark.skins.CheckBoxSkin"/>
<classEntry path="flatSpark.components.CheckBox"/>
<classEntry path="flatSpark.components.RadioButton"/>
<classEntry path="flatSpark.skins.RadioButtonSkin"/>
<classEntry path="flatSpark.skins.TitleWindowSkin"/>
<classEntry path="flatSpark.skins.TitleWindowCloseButtonSkin"/>
Expand Down
Binary file modified FlatSparkSkin/bin/FlatSparkSkin.swc
Binary file not shown.
47 changes: 4 additions & 43 deletions FlatSparkSkin/src/defaults.css
Original file line number Diff line number Diff line change
Expand Up @@ -82,59 +82,20 @@ global
modal-transparency: 0.98;
modal-transparency-blur: 0;
modal-transparency-color: #2c3e50;

/* chromeColor: #294867;
color: #CEE7F4;
contentBackgroundColor: #39628C;
symbolColor: #000000;
rollOverColor: #355D89;
selectionColor: #294867;
focusColor: #333300;
accentColor: #6589AD;*/

}


s|Application {
fontFamily: Lato, Helvetica, Arial, sans-serif;
}

components|Button {
skinClass: ClassReference("flatSpark.skins.ButtonSkin");
components|ButtonIcon {
skinClass: ClassReference("flatSpark.skins.ButtonIconSkin");
}

components|TextInput {
skinClass: ClassReference("flatSpark.skins.TextInputSkin");
components|TextInputIcon {
skinClass: ClassReference("flatSpark.skins.TextInputIconSkin");
}

components|ToggleSwitch {
skinClass: ClassReference("flatSpark.skins.ToggleSwitchSkin");
}

components|CheckBox {
skinClass: ClassReference("flatSpark.skins.CheckBoxSkin");
}

components|RadioButton {
skinClass: ClassReference("flatSpark.skins.RadioButtonSkin");
}

s|TitleWindow {
skinClass: ClassReference("flatSpark.skins.TitleWindowSkin");
}

s|Panel {
skinClass: ClassReference("flatSpark.skins.PanelSkin");
}

s|ComboBox {
skinClass: ClassReference("flatSpark.skins.ComboBoxSkin");
}

s|DropDownList {
skinClass: ClassReference("flatSpark.skins.DropDownListSkin");
}

ns|ProgressBar {
skinClass: ClassReference("flatSpark.skins.ProgressBarSkin");
}
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ package flatSpark.components

import flatSpark.enums.BrandColorEnum;

public class Button extends spark.components.Button
public class ButtonIcon extends spark.components.Button
{

[Bindable]
Expand All @@ -15,7 +15,7 @@ package flatSpark.components
public var brand:int = BrandColorEnum.Default;


public function Button()
public function ButtonIcon()
{
super();
}
Expand Down
12 changes: 0 additions & 12 deletions FlatSparkSkin/src/flatSpark/components/CheckBox.as

This file was deleted.

12 changes: 0 additions & 12 deletions FlatSparkSkin/src/flatSpark/components/RadioButton.as

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ package flatSpark.components

import spark.components.TextInput;

public class TextInput extends spark.components.TextInput
public class TextInputIcon extends spark.components.TextInput
{
[Bindable]
public var iconFont:String;

public function TextInput()
public function TextInputIcon()
{
super();
}
Expand Down
4 changes: 4 additions & 0 deletions FlatSparkSkin/src/flatSpark/components/ToggleSwitch.as
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
/***
* ToggleSwitch based on the example by Yonas Kolb posted here: http://yonaskolb.com/blog/2012/1/18/flex-toggle-switch-spark-skin.html
***/

package flatSpark.components
{
import spark.components.CheckBox;
Expand Down
191 changes: 191 additions & 0 deletions FlatSparkSkin/src/flatSpark/skins/ButtonIconSkin.mxml
Original file line number Diff line number Diff line change
@@ -0,0 +1,191 @@
<?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.
-->


<!--- The default skin class for the Spark Button component.
@see spark.components.Button
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
minWidth="21" minHeight="21" height="{ButtonSizeEnum.Normal}"
alpha.disabled="0.5">
<fx:Metadata>[HostComponent("flatSpark.components.ButtonIcon")]</fx:Metadata>

<fx:Script fb:purpose="styling">
<![CDATA[
import flatSpark.enums.ButtonColorEnum;
import flatSpark.enums.ButtonSizeEnum;
import flatSpark.enums.TextInputSizeEnum;
import flatSpark.utils.ColorUtils;
/* Define the skin elements that should not be colorized.
For button, the graphics are colorized but the label is not. */
static private const exclusions:Array = ["iconDisplay", "labelDisplay"];
/**
* @private
*/
override public function get colorizeExclusions():Array {return exclusions;}
/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
hostComponent.useHandCursor=true;
hostComponent.buttonMode=true;
super.initializationComplete();
}
/**
* @private
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
{
var cr:Number = getStyle("cornerRadius");
if (cornerRadius != cr)
{
cornerRadius = cr;
fill_up.radiusX = cornerRadius;
fill_over.radiusX = cornerRadius;
fill_down.radiusX = cornerRadius;
fill_disabled.radiusX = cornerRadius;
}
/*var larguraIcone:int = 0;
if (iconFont.text != null && iconFont.text != "")
{
larguraIcone = 60;
}*/
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
private var cornerRadius:Number = 2;
private static function getFontSize(height:int):int
{
var altura:int = 15;
switch (height)
{
case ButtonSizeEnum.Large:
altura = 17;
break;
case ButtonSizeEnum.Normal:
altura = 14;
break;
case ButtonSizeEnum.Small:
altura = 13;
break;
case ButtonSizeEnum.ExtraSmall:
altura = 12;
break;
}
return altura;
}
private static function getIconSize(height:int):int
{
var altura:int = 17;
switch (height)
{
case ButtonSizeEnum.Large:
altura = 19;
break;
case ButtonSizeEnum.Normal:
altura = 17;
break;
case ButtonSizeEnum.Small:
altura = 15;
break;
case ButtonSizeEnum.ExtraSmall:
altura = 12;
break;
}
return altura;
}
]]>
</fx:Script>

<!-- states -->
<s:states>
<s:State name="up" id="stateUp"/>
<s:State name="over" id="stateOver"/>
<s:State name="down" id="stateDown"/>
<s:State name="disabled" id="stateDisabled"/>
</s:states>


<!-- layer 2: fill -->
<!--- @private -->
<s:Rect id="fill_up" left="1" right="1" top="1" bottom="1" radiusX="6" includeIn="up">
<s:fill>
<s:SolidColor color="{ColorUtils.ButtonColor(hostComponent.brand,stateUp)}"/>
</s:fill>
</s:Rect>

<s:Rect id="fill_over" left="1" right="1" top="1" bottom="1" radiusX="6" includeIn="over">
<s:fill>
<s:SolidColor color="{ColorUtils.ButtonColor(hostComponent.brand,stateOver)}"/>
</s:fill>
</s:Rect>

<s:Rect id="fill_down" left="1" right="1" top="1" bottom="1" radiusX="6" includeIn="down">
<s:fill>
<s:SolidColor color="{ColorUtils.ButtonColor(hostComponent.brand,stateDown)}"/>
</s:fill>
</s:Rect>

<s:Rect id="fill_disabled" left="1" right="1" top="1" bottom="1" radiusX="6" includeIn="disabled">
<s:fill>
<s:SolidColor color="{ColorUtils.ButtonColor(hostComponent.brand,stateDisabled)}"/>
</s:fill>
</s:Rect>


<!-- layer 8: text -->
<!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
<s:HGroup verticalAlign="middle" verticalCenter="0" horizontalAlign="center" horizontalCenter="0" left="10" right="10" top="2" bottom="2">
<s:Label id="iconFont" color="0xFFFFFF" color.disabled="0xE3E3E3" text="{hostComponent.iconFont}"
textAlign="left" fontSize="{getIconSize(hostComponent.height)}" fontFamily="FontAwesome"
maxDisplayedLines="1" includeInLayout="{hostComponent.iconFont != null}"
horizontalCenter="0" verticalCenter="0" verticalAlign="middle">
</s:Label>

<s:Label id="labelDisplay" color="0xFFFFFF" color.disabled="0xE3E3E3"
textAlign="center" fontSize="{getFontSize(hostComponent.height)}" fontFamily="Lato"
maxDisplayedLines="1"
horizontalCenter="0" verticalCenter="1" verticalAlign="middle">
</s:Label>
</s:HGroup>
</s:SparkSkin>
Loading

0 comments on commit c137f3a

Please sign in to comment.