Round cornered TextInput – Spark SDK

Just ran into this problem to create a rounded corner textbox for my flex application Flex 4 Spark SDK. I found there is no option for cornerRadius, i tried many ways to achieve that, finally i just created a custom skin based on the default TextInputSkin and applied that skin to the TextInput skinClass.

Here's the code snippet for RoundedTextInputSkin.

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
			 xmlns:s="library://ns.adobe.com/flex/spark"
			 alpha.disabled="0.5"
			 blendMode="normal">

	<fx:Metadata>
		<![CDATA[
		/**
		* @copy spark.skins.spark.ApplicationSkin#hostComponent
		*/
		[HostComponent("spark.components.TextInput")]
		]]>
	</fx:Metadata>

	<fx:Script>
		private var paddingChanged:Boolean;

		/* Define the skin elements that should not be colorized. */
		static private const exclusions:Array=["background", "textDisplay"];

		/**
		 * @copy spark.skins.SparkSkin#colorizeExclusions
		 */
		override public function get colorizeExclusions():Array
		{
			return exclusions;
		}

		/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
		static private const contentFill:Array=["bgFill"];

		/**
		 * @inheritDoc
		 */
		override public function get contentItems():Array
		{
			return contentFill
		}
		;

		/**
		 *  @private
		 */
		override protected function commitProperties():void
		{
			super.commitProperties();

			if (paddingChanged)
			{
				updatePadding();
				paddingChanged=false;
			}
		}

		/**
		 *  @private
		 */
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
			if (getStyle("borderVisible") == true)
			{
				border.visible=true;
				shadow.visible=true;
				background.left=background.top=background.right=background.bottom=2;
				textDisplay.left=textDisplay.top=textDisplay.right=textDisplay.bottom=2;
			}
			else
			{
				border.visible=false;
				shadow.visible=false;
				background.left=background.top=background.right=background.bottom=0;
				textDisplay.left=textDisplay.top=textDisplay.right=textDisplay.bottom=0;
			}

			super.updateDisplayList(unscaledWidth, unscaledHeight);
		}

		/**
		 *  @private
		 */
		private function updatePadding():void
		{
			if (!textDisplay)
				return;

			// Push padding styles into the textDisplay
			var padding:Number;

			padding=getStyle("paddingLeft");
			if (textDisplay.getStyle("paddingLeft") != padding)
				textDisplay.setStyle("paddingLeft", padding);

			padding=getStyle("paddingTop");
			if (textDisplay.getStyle("paddingTop") != padding)
				textDisplay.setStyle("paddingTop", padding);

			padding=getStyle("paddingRight");
			if (textDisplay.getStyle("paddingRight") != padding)
				textDisplay.setStyle("paddingRight", padding);

			padding=getStyle("paddingBottom");
			if (textDisplay.getStyle("paddingBottom") != padding)
				textDisplay.setStyle("paddingBottom", padding);
		}

		/**
		 *  @private
		 */
		override public function styleChanged(styleProp:String):void
		{
			super.styleChanged(styleProp);

			if (!styleProp || styleProp.indexOf("padding") == 0)
			{
				paddingChanged=true;
				invalidateProperties();
			}
		}

		/**
		 * @inheritDoc
		 */
		override public function get focusSkinExclusions():Array
		{
			return [textDisplay]
		}
		;
	</fx:Script>

	<s:states>
		<s:State name="normal"/>
		<s:State name="disabled"/>
	</s:states>

	<!-- border -->
	<s:Rect left="0"
			right="0"
			top="0"
			bottom="0"
			id="border"
			radiusX="10">
		<s:stroke>
			<s:SolidColorStroke color="{getStyle('borderColor')}"
								alpha="{getStyle('borderAlpha')}"
								weight="2"/>
		</s:stroke>
	</s:Rect>

	<!-- fill -->
	<!--- Defines the appearance of the TextInput component's background. -->
	<s:Rect id="background"
			left="1"
			right="1"
			top="1"
			bottom="1"
			radiusX="10">
		<s:fill>
			<!--- Defines the background fill color. -->
			<s:SolidColor id="bgFill"
						  color="0xFFFFFF"/>
		</s:fill>
	</s:Rect>

	<!-- text -->
	<s:RichEditableText id="textDisplay"
						lineBreak="explicit"
						verticalAlign="middle"
						widthInChars="10"
						left="1"
						right="1"
						top="1"
						bottom="1"/>

</s:SparkSkin>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
alpha.disabled="0.5"
blendMode="normal">

<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.TextInput")]
]]>
</fx:Metadata>

<fx:Script>
private var paddingChanged:Boolean;

/* Define the skin elements that should not be colorized. */
static private const exclusions:Array=["background", "textDisplay"];

/**
* @copy spark.skins.SparkSkin#colorizeExclusions
*/
override public function get colorizeExclusions():Array
{
return exclusions;
}

/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
static private const contentFill:Array=["bgFill"];

/**
* @inheritDoc
*/
override public function get contentItems():Array
{
return contentFill
}
;

/**
*  @private
*/
override protected function commitProperties():void
{
super.commitProperties();

if (paddingChanged)
{
updatePadding();
paddingChanged=false;
}
}

/**
*  @private
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
if (getStyle("borderVisible") == true)
{
border.visible=true;
shadow.visible=true;
background.left=background.top=background.right=background.bottom=2;
textDisplay.left=textDisplay.top=textDisplay.right=textDisplay.bottom=2;
}
else
{
border.visible=false;
shadow.visible=false;
background.left=background.top=background.right=background.bottom=0;
textDisplay.left=textDisplay.top=textDisplay.right=textDisplay.bottom=0;
}

super.updateDisplayList(unscaledWidth, unscaledHeight);
}

/**
*  @private
*/
private function updatePadding():void
{
if (!textDisplay)
return;

// Push padding styles into the textDisplay
var padding:Number;

padding=getStyle("paddingLeft");
if (textDisplay.getStyle("paddingLeft") != padding)
textDisplay.setStyle("paddingLeft", padding);

padding=getStyle("paddingTop");
if (textDisplay.getStyle("paddingTop") != padding)
textDisplay.setStyle("paddingTop", padding);

padding=getStyle("paddingRight");
if (textDisplay.getStyle("paddingRight") != padding)
textDisplay.setStyle("paddingRight", padding);

padding=getStyle("paddingBottom");
if (textDisplay.getStyle("paddingBottom") != padding)
textDisplay.setStyle("paddingBottom", padding);
}

/**
*  @private
*/
override public function styleChanged(styleProp:String):void
{
super.styleChanged(styleProp);

if (!styleProp || styleProp.indexOf("padding") == 0)
{
paddingChanged=true;
invalidateProperties();
}
}

/**
* @inheritDoc
*/
override public function get focusSkinExclusions():Array
{
return [textDisplay]
}
;
</fx:Script>

<s:states>
<s:State name="normal"/>
<s:State name="disabled"/>
</s:states>

<!-- border -->
<s:Rect left="0"
right="0"
top="0"
bottom="0"
id="border"
radiusX="10">
<s:stroke>
<s:SolidColorStroke color="{getStyle('borderColor')}"
alpha="{getStyle('borderAlpha')}"
weight="2"/>
</s:stroke>
</s:Rect>

<!-- fill -->
<!--- Defines the appearance of the TextInput component's background. -->
<s:Rect id="background"
left="1"
right="1"
top="1"
bottom="1"
radiusX="10">
<s:fill>
<!--- Defines the background fill color. -->
<s:SolidColor id="bgFill"
color="0xFFFFFF"/>
</s:fill>
</s:Rect>

<!-- shadow -->
<s:Rect left="1"
top="1"
right="1"
height="1"
id="shadow">
<s:fill>
<s:SolidColor color="0x000000"
alpha="0"/>
</s:fill>
</s:Rect>

<!-- text -->
<s:RichEditableText id="textDisplay"
lineBreak="explicit"
verticalAlign="middle"
widthInChars="10"
left="1"
right="1"
top="1"
bottom="1"/>

</s:SparkSkin>

Be Sociable, Share!

Leave a Reply


Copyright © 2008-2010 K BalaSubramanian | Credits