THIS IS A TEST INSTANCE. ALL YOUR CHANGES WILL BE LOST!!!!
...
| Code Block |
|---|
COMPILE::SWF {
IEventDispatcher(value).addEventListener("viewChangedbeadsAdded",viewChangeHandlerbeadsAddedHandler);
}
COMPILE::JS {
var host:UIBase = value as UIBase;
var e:HTMLInputElement = host.element as HTMLInputElement;
e.type = 'password';
} |
The compile directives will have the input element set up for password input with just a few lines when they are cross-compiled into JavaScript. For ActionScript, an event listener is set up to listen for changes to the view (the text input field itself)when the standard beads (model, view, controller) have been added to the strand; this code is not needed in JavaScript and so it is isolated to ActionScript using the COMPILE::SWF directive.
...
For ActionScript, create the function to handle the “viewChanged” “beadsAddedEvent” event (note that the COMPILE::SWF directive is placed above the function definition so all of the function is included only in the ActionScript build).
| Code Block |
|---|
COMPILE::SWF private function viewChangedHandlerbeadsAddedHandler(event:Event):void { var textView:ITextFieldView = _strand.getBeadByType(ITextFieldView) as ITextFieldView; if (textView) { var textField:CSSTextField = textView.textField; textField.displayAsPassword = true; } } |
...
The PasswordInputBead is fairly simple: it just changes the type of input control using the built-in input control's property (displayAsPassword for ActionScript and type = 'password' for JavaScript). If you want the bead to do more, you can have the bead listen to events and take its own actions. Here is the valueChangedHandler beadsAddedHandler for a bead that restricts input to be numeric and makes sure the text being entered is valid.
| Code Block |
|---|
private var _decimalSeparator:String = ".";
public function get decimalSeparator():String
{
return _decimalSeparator;
}
public function set decimalSeparator(value:String):void
{
if (_decimalSeparator != value) {
_decimalSeparator = value;
}
}
private function viewChangeHandlerbeadsAddedHandler(event:Event):void
{
// get the ITextFieldView bead, which is required for this bead to work
var textView:ITextFieldView = _strand.getBeadByType(ITextFieldView) as ITextFieldView;
if (textView) {
COMPILE::SWF {
var textField:CSSTextField = textView.textField;
textField.restrict = "0-9" + decimalSeparator;
// listen for changes to this textField and prevent non-numeric values, such
// as 34.09.94
textField.addEventListener(TextEvent.TEXT_INPUT, handleTextInput);
}
COMPILE::JS {
var host:UIBase = _strand as UIBase;
var e:HTMLInputElement = host.element as HTMLInputElement;
e.addEventListener('keypress', validateInput);
}
}
}
|
...