Problem with prompt text in spark.skins.mobile.TextAreaSkin

[chris_d_k <ck...@christiankiefer.de>]

Hi,

I am using TextAreas and the spark.skins.mobile.TextAreaSkin.

I want to use padding to give make the TextAreas higher and still having the
text centered vertically.

When I just add the padding via css the height of the TextArea is as heigh
as before until I enter text. The prompt text inside the text are is cutted.

How can I fix this/ what am I doing wrong?



--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Problem-with-prompt-text-in-spark-skins-mobile-TextAreaSkin-tp11358.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.

RE: Problem with prompt text in spark.skins.mobile.TextAreaSkin

[Jason Taylor <ja...@dedoose.com>]

This worked for me:

/**
 * Created by JT on 8/31/2015.
 */
package UI.MobileSkins
{
	import flash.events.Event;
	import flash.events.SoftKeyboardEvent;

	import mx.core.EventPriority;

	import mx.core.mx_internal;
	import mx.events.FlexEvent;

	import spark.components.TextInput;

	import spark.components.supportClasses.StyleableTextField;
	import spark.skins.mobile.supportClasses.TextSkinBase;

	use namespace mx_internal;

	import mx.core.DPIClassification;
	import mx.utils.Platform;

	import spark.skins.mobile.TextInputSkin;
	import spark.skins.mobile120.assets.TextInput_border;
	import spark.skins.mobile160.assets.TextInput_border;
	import spark.skins.mobile240.assets.TextInput_border;
	import spark.skins.mobile320.assets.TextInput_border;
	import spark.skins.mobile480.assets.TextInput_border;
	import spark.skins.mobile640.assets.TextInput_border;

	public class UpdatedTextInputSkin extends TextSkinBase
	{
		private var _isIOS:Boolean;

		public function UpdatedTextInputSkin()
		{
			super();

			_isIOS = Platform.isIOS;


			switch (applicationDPI)
			{
				case DPIClassification.DPI_640:
				{
					borderClass = spark.skins.mobile640.assets.TextInput_border;
					layoutCornerEllipseSize = 48;
					measuredDefaultWidth = 1200;
					measuredDefaultHeight = 120;
					layoutBorderSize = 3;

					break;
				}
				case DPIClassification.DPI_480:
				{
					// Note provisional may need changes
					borderClass = spark.skins.mobile480.assets.TextInput_border;
					layoutCornerEllipseSize = 24;
					measuredDefaultWidth = 880;
					measuredDefaultHeight = 60;
					layoutBorderSize = 2;

					break;
				}
				case DPIClassification.DPI_320:
				{
					borderClass = spark.skins.mobile320.assets.TextInput_border;
					layoutCornerEllipseSize = 24;
					measuredDefaultWidth = 600;
					measuredDefaultHeight = 40;
					layoutBorderSize = 2;

					break;
				}
				case DPIClassification.DPI_240:
				{
					borderClass = spark.skins.mobile240.assets.TextInput_border;
					layoutCornerEllipseSize = 12;
					measuredDefaultWidth = 440;
					measuredDefaultHeight = 35;
					layoutBorderSize = 1;

					break;
				}
				case DPIClassification.DPI_120:
				{
					borderClass = spark.skins.mobile120.assets.TextInput_border;
					layoutCornerEllipseSize = 6;
					measuredDefaultWidth = 220;
					measuredDefaultHeight = 20;
					layoutBorderSize = 1;

					break;
				}
				default:
				{
					borderClass = spark.skins.mobile160.assets.TextInput_border;
					layoutCornerEllipseSize = 12;
					measuredDefaultWidth = 300;
					measuredDefaultHeight = 24;
					layoutBorderSize = 1;

					break;
				}
			}
		}

		public var hostComponent:TextInput;  // SkinnableComponent will populate

		/**
		 *  @private

		/**
		 *  @private
		 */
		private var _isEditing:Boolean;

		override protected function createChildren():void
		{
			super.createChildren();

			textDisplay.addEventListener("editableChanged", editableChangedHandler);
			textDisplay.addEventListener(FlexEvent.VALUE_COMMIT, valueCommitHandler);

			// remove hit area improvements on iOS when editing
			if (_isIOS)
			{
				textDisplay.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_ACTIVATING, textDisplay_softKeyboardActivatingHandler, false, EventPriority.DEFAULT_HANDLER);
				textDisplay.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_DEACTIVATE, textDisplay_softKeyboardDeactivateHandler);
			}
		}


		override protected function measure():void
		{
			super.measure();

			var paddingLeft:Number = getStyle("paddingLeft");
			var paddingRight:Number = getStyle("paddingRight");
			var paddingTop:Number = getStyle("paddingTop");
			var paddingBottom:Number = getStyle("paddingBottom");
			var textHeight:Number = getStyle("fontSize") as Number;

			if (textDisplay)
			{
				// temporarily change text for measurement
				var oldText:String = textDisplay.text;

				// commit styles so we can get a valid textHeight
				textDisplay.text = "Wj";
				textDisplay.commitStyles();

				textHeight = textDisplay.measuredTextSize.y;
				textDisplay.text = oldText;
			}

			// width is based on maxChars (if set)
			if (hostComponent && hostComponent.maxChars)
			{
				// Grab the fontSize and subtract 2 as the pixel value for each character.
				// This is just an approximation, but it appears to be a reasonable one
				// for most input and most font.
				var characterWidth:int = Math.max(1, (getStyle("fontSize") - 2));
				measuredWidth =  (characterWidth * hostComponent.maxChars) +
				paddingLeft + paddingRight + StyleableTextField.TEXT_WIDTH_PADDING;
			}

			measuredHeight = paddingTop + textHeight + paddingBottom;
		}

		override protected function layoutContents(unscaledWidth:Number,
												   unscaledHeight:Number):void
		{
			super.layoutContents(unscaledWidth, unscaledHeight);

			// position & size border
			if (border)
			{
				setElementSize(border, unscaledWidth, unscaledHeight);
				setElementPosition(border, 0, 0);
			}

			// position & size the text
			var paddingLeft:Number = getStyle("paddingLeft");
			var paddingRight:Number = getStyle("paddingRight");
			var paddingTop:Number = getStyle("paddingTop");
			var paddingBottom:Number = getStyle("paddingBottom");

			var unscaledTextWidth:Number = unscaledWidth - paddingLeft - paddingRight;
			var unscaledTextHeight:Number = unscaledHeight - paddingTop - paddingBottom;

			// default vertical positioning is centered
			var textHeight:Number = getElementPreferredHeight(textDisplay);
			var textY:Number = Math.round(0.5 * (unscaledTextHeight - textHeight)) + paddingTop;

			// On iOS the TextField top and bottom edges are bounded by the padding.
			// On all other platforms, the height of the textDisplay is
			// textHeight + paddingBottom to increase hitArea on bottom.
			// Note: We don't move the Y position upwards because TextField
			// has way to set vertical positioning.
			// Note: iOS is a special case due to the clear button provided by the
			// native text control used while editing.
			var adjustedTextHeight:Number = (_isIOS && _isEditing) ? textHeight : textHeight + paddingBottom;

			if (textDisplay)
			{
				// We're going to do a few tricks to try to increase the size of our hitArea to make it
				// easier for users to select text or put the caret in a certain spot.  To do that,
				// rather than set textDisplay.x=paddingLeft,  we are going to set
				// textDisplay.leftMargin = paddingLeft.  In addition, we're going to size the height
				// of the textDisplay larger than just the size of the text inside to increase the hitArea
				// on the bottom.  We'll also assign textDisplay.rightMargin = paddingRight to increase the
				// the hitArea on the right.  Unfortunately, there's no way to increase the hitArea on the top
				// just yet, but these three tricks definitely help out with regards to user experience.
				// See http://bugs.adobe.com/jira/browse/SDK-29406 and http://bugs.adobe.com/jira/browse/SDK-29405

				// set leftMargin, rightMargin to increase the hitArea.  Need to set it before calling commitStyles().
				var marginChanged:Boolean = ((textDisplay.leftMargin != paddingLeft) ||
				(textDisplay.rightMargin != paddingRight));

				textDisplay.leftMargin = paddingLeft;
				textDisplay.rightMargin = paddingRight;

				// need to force a styleChanged() after setting leftMargin, rightMargin if they
				// changed values.  Then we can validate the styles through commitStyles()
				if (marginChanged)
					textDisplay.styleChanged(null);
				textDisplay.commitStyles();

				setElementSize(textDisplay, unscaledWidth, adjustedTextHeight);

				// set x=0 since we're using textDisplay.leftMargin = paddingLeft
				setElementPosition(textDisplay, 0, textY);
			}

			if (promptDisplay)
			{
				promptDisplay.commitStyles();
				setElementSize(promptDisplay, unscaledTextWidth, adjustedTextHeight);
				setElementPosition(promptDisplay, paddingLeft, textY);
			}
		}

		/**
		 *  @private
		 */
		private function editableChangedHandler(event:Event):void
		{
			invalidateDisplayList();
		}

		/**
		 *  @private
		 *  The text changed in some way.
		 *
		 *  Dynamic fields (ie !editable) with no text measure with width=0 and height=0.
		 *  If the text changed, need to remeasure the text to get the correct height so it
		 *  will be laid out correctly.
		 */
		private function valueCommitHandler(event:Event):void
		{
			if (textDisplay && !textDisplay.editable)
				invalidateDisplayList();
		}

		/**
		 *  @private
		 */
		private function textDisplay_softKeyboardActivatingHandler(event:SoftKeyboardEvent):void
		{
			if (event.isDefaultPrevented())
				return;

			_isEditing = true;
			invalidateDisplayList();
		}

		/**
		 *  @private
		 */
		private function textDisplay_softKeyboardDeactivateHandler(event:SoftKeyboardEvent):void
		{
			_isEditing = false;
			invalidateDisplayList();
		}
	}
}

-----Original Message-----
From: Alex Harui [mailto:aharui@adobe.com] 
Sent: Wednesday, October 21, 2015 9:40 AM
To: users@flex.apache.org
Subject: Re: Problem with prompt text in spark.skins.mobile.TextAreaSkin

Can you post a 20-line (or less) test case?

Thanks,
-Alex

On 10/21/15, 12:57 AM, "chris_d_k" <ck...@christiankiefer.de> wrote:

>Hi,
>
>I am using TextAreas and the spark.skins.mobile.TextAreaSkin.
>
>I want to use padding to give make the TextAreas higher and still 
>having the text centered vertically.
>
>When I just add the padding via css the height of the TextArea is as 
>heigh as before until I enter text. The prompt text inside the text are 
>is cutted.
>
>How can I fix this/ what am I doing wrong?
>
>
>
>--
>View this message in context:
>http://apache-flex-users.2333346.n4.nabble.com/Problem-with-prompt-text
>-in -spark-skins-mobile-TextAreaSkin-tp11358.html
>Sent from the Apache Flex Users mailing list archive at Nabble.com.

Re: Problem with prompt text in spark.skins.mobile.TextAreaSkin

[Alex Harui <ah...@adobe.com>]

Can you post a 20-line (or less) test case?

Thanks,
-Alex

On 10/21/15, 12:57 AM, "chris_d_k" <ck...@christiankiefer.de> wrote:

>Hi,
>
>I am using TextAreas and the spark.skins.mobile.TextAreaSkin.
>
>I want to use padding to give make the TextAreas higher and still having
>the
>text centered vertically.
>
>When I just add the padding via css the height of the TextArea is as heigh
>as before until I enter text. The prompt text inside the text are is
>cutted.
>
>How can I fix this/ what am I doing wrong?
>
>
>
>--
>View this message in context:
>http://apache-flex-users.2333346.n4.nabble.com/Problem-with-prompt-text-in
>-spark-skins-mobile-TextAreaSkin-tp11358.html
>Sent from the Apache Flex Users mailing list archive at Nabble.com.