FLEX NOTES: November 2011

This is the custom component:

package WaterMarkComponent
{
import flash.events.FocusEvent;
import flash.external.ExternalInterface;

import mx.controls.DateField;

public class Datefield extends DateField
{
public function Datefield()
{
}
private var _textIsEmpty: Boolean = true;
private var _label: String;

/**
* The label to display when the text field is empty.
*/
public function get label(): String {
return _label;
}

public function set label(value: String): void {
_label = value;
toolTip = value;
updateContents();
}

[Bindable]
override public function get text(): String {
if (_textIsEmpty) {
return "";
}
else {
return super.text;
}
}

override public function set text(value: String): void {
if (value == "") {
_textIsEmpty = true;
}
else {
_textIsEmpty = false;
super.text = value;
}
updateContents();
}

private function updateContents(): void {
if (_textIsEmpty) {
setStyle("color", 0xaaaaaa);
super.text = _label;
}
else {
setStyle("color", 0x000000);
}
}

private function handleTextChange(event: Event): void {
if (super.text == "") {
_textIsEmpty = true;
}
else {
_textIsEmpty = false;
}
}

private function handleFocusIn(event: FocusEvent): void {
if (_textIsEmpty) {
super.text = "";
setStyle("color", 0x000000);
}
}

private function handleFocusOut(event: FocusEvent): void {
updateContents();
}

override public function initialize(): void {
super.initialize();
addEventListener(Event.CHANGE, handleTextChange);
addEventListener(FocusEvent.FOCUS_IN, handleFocusIn);
addEventListener(FocusEvent.FOCUS_OUT, handleFocusOut);
updateContents();
}
}

}

Use this component in your MXML as

<WaterMarkComponent:Datefield label="select Date"/>

FLEX NOTES

Friday, 4 November 2011

WaterMark DateField