Sometimes, it is useful to give an empty text input field a textual background. It serves as a “hint” to end-users as to what input is expected from them, or it can also be used in-lieu of input field labels.

A “hint” text is different from a default text value. The “hint” text is displayed only if the text field is empty; it is not displayed while the field has focus or if the field is already populated with any value. The “hint” text is also not reported as the value of the text field.

uiTextInput “hint” property
Using the uiTextInput component from the Aspire UI library, implementing a “hint” text is easy – just specify the “hint” property:

var input:uiTextInput = new uiTextInput()
input.hint = "some hint";

Example
Here is an example SWF:

The text style used when a hint is displayed can be (and should be) different from that used by the uiTextInput instance normally. The hint text uses a “_hint” sub-style of the style used by the uiTextInput instance, and can be specified either via the “text.css” CSS file in the theme folder or via actionscripting using the uiTextStyles manager. In the above example, we used the uiTextStyles manager.

uiTextStyles.manager.setStyle("searchStyle",{color:"#000000",fontSize:11});
uiTextStyles.manager.setStyle("searchStyle_hint",{color:"#777777",fontStyle:"italic"});

The rest of the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

package
{
	import com.ghostwire.ui.containers.*;
	import com.ghostwire.ui.controls.*;
	import com.ghostwire.ui.data.*;
	import com.ghostwire.ui.events.*;
	import com.ghostwire.ui.enums.*;
	import com.ghostwire.ui.managers.*;
 
	import flash.display.Sprite;
	import flash.events.*;
	import flash.system.Capabilities;
 
	public class HintTextDemo extends Sprite
	{
		public function HintTextDemo()
		{
			// ** make sure stage is not null **
			addEventListener(Event.ADDED_TO_STAGE,init);
		}
 
		private function init(evt:Event):void
		{
			// ** let assets preload before starting application **
			uiSkins.manager.addEventListener(Event.INIT,main);
		}
 
		private function main(evt:Event):void
		{
			// ** main application code **
 
			uiTextStyles.manager.setStyle("searchStyle",{color:"#000000",fontSize:11});
			uiTextStyles.manager.setStyle("searchStyle_hint",{color:"#777777",fontStyle:"italic"});
 
			var searchEntry:uiTextInput = new uiTextInput();
			searchEntry.textStyle = "searchStyle";
			searchEntry.hint = "Search";
 
			var searchBtn:uiPushButton = new uiPushButton(null,"search.png");
 
			var searchBox:uiBox	= new uiBox();
			searchBox.spacing		= 5;
			searchBox.addChild(searchEntry);
			searchBox.addChild(searchBtn);
 
			var searchForm:uiForm = new uiForm();
			searchForm.defaultButton = searchBtn;
			searchForm.move(20,20);
			searchForm.addChild(searchBox);
 
			addChild(searchForm);
		}
	}
}

Note: The “hint” property is available to the uiTextInput class only in version 1.1.2+.

Aspire UI Components
Aspire UI is a library of Actionscript 3.0 (AS3) classes for building flexible and lightweight UI elements in Adobe Flash applications. Key features include easy skinning using PNG image files, automatic tab focus ordering, CSS text styles, and layout management. This is a pure AS3 library with no dependency on the Flex framework. You may experiment with the various features by downloading a trial version.

Other Posts You Might Enjoy:

• Aspire UI Preview: Text Styles
• Using uiTextStyles: Drawing Outline on Text Glyphs
• uiDialog: Displaying Custom Dialog Content
• Using uiTextStyles: Defining Faux Bold Weights (Embedded Fonts)
• Loading embedded fonts on-demand using the uiFonts manager

Trackback URI | Comments RSS