HPasswordControl

Description

Just like HTextControl, but the typed characters are not shown.

Instance variables

type '[HPasswordControl]'
value The string that is currently held by this object.

Inherits from:

Implements:

Constructor Method

The constructor is invoked, when a new instance of HPasswordControl is created.

To create a new instance use HPasswordControl.nu( rect, parent, options ) or new HPasswordControl( rect, parent, options ).

constructor( rect, parent, options )

Inherited from: HControl

Description

The constructor of HControl implements the same model as HView, but accepts a third parameter: the options object, that contain optional properties, like the value and events.

Parameters

rect An instance of HRect, defines the position and size of views. It can be also defined with an array, see below.
parent The parent instance this instance will be contained within. A valid parent can be another HView compatible instance, an HApplication instance, a HControl or a similar extended HView instance. The origin of the rect is the same as the parent's offset. For HApplication instances, the web browser's window's left top corner is the origin.
options Optional, all other parameters as object attributes. Defaults to an instance of HControlDefaults, see controlDefaults

The rect dimensions as arrays

Instead of an instance of HRect, dimensions can also be supplied as arrays. The array length must be either 4 or 6. If the length is 4, the dimensions are specified as follows: [ x, y, width, height ]. Note that this is different from the construction parameters of HRect that takes the coordinates as two points, like: ( left, top, right, bottom ). Arrays with 6 items are a bit more complex (and powerful) as they can specify the flexible offsets too.

The array indexes for a rect configured as an 4-item array:

Always left/top aligned, all items must be specified.
Index Description
0 The X-coordinate (measured from the parent's left edge)
1 The Y-coordinate (measured from the parent's top edge)
2 The width.
3 The height.

The array indexes a rect configured as an 6-item array:

Can be any configuration of left/top/right/bottom alignment and supports flexible widths. At least 4 items must be specified.
Index Description
0 The left-aligned X-coordinate or null if the view is right-aligned and using a right-aligned X-coordinate at index 4 as well as the width specified at index 2.
1 The top-aligned Y-coordinate or null if the view is bottom-aligned and using a right-aligned X-coordinate at index 5 as well as the height specified at index 3.
2 The width, if only one X-coordinate specifies the position (at indexes 0 or 4). If both X-coordinates (at indexes 0 and 4) are specified, the width can be specified with a null for automatic (flexible) width. If the width is specified, it's used as the minimum width.
3 The height, if only one Y-coordinate specifies the position (at indexes 1 or 5). If both Y-coordinates (at indexes 1 and 5) are specified, the height can be specified with a null for automatic (flexible) height. if the height is specified, it's used as the minimum height.
4 The right-aligned X-coordinate or null if the view is left-aligned and using a left-aligned X-coordinate at index 0 as well as the width specified at index 2.
5 The bottom-aligned Y-coordinate or null if the view is top-aligned and using a top-aligned X-coordinate at index 1 as well as the height specified at index 3.

Usage examples of rect:

Specified as two instances of HPoint, x: 23, y: 75, width: 200, height: 100: 
HRect.nu( HPoint.nu( 23, 75 ), HPoint.nu( 223, 175 ) )
The same as above, but without HPoint instances: 
HRect.nu( 23, 75, 223, 175 )
The same as above, but with an array as the constructor parameter for HRect: 
HRect.nu( [ 23, 75, 223, 175 ] )
The same as above, but with an array instead of a HRect instance: 
[ 23, 75, 200, 100 ]
The same as above, but with a 6-item array: 
[ 23, 75, 200, 100, null, null ]
The same as above, but aligned to the right instead of left: 
[ null, 75, 200, 100, 23, null ]
The same as above, but aligned to the right/bottom edges: 
[ null, null, 200, 100, 23, 75 ]
The same as above, but aligned to the left/bottom edges: 
[ 23, null, 200, 100, null, 75 ]
Flexible width (based on the parent's dimensions): 
[ 23, 75, null, 100, 23, null ]
Flexible height (based on the parent's dimensions): 
[ 23, 75, 200, null, null, 75 ]
Flexible width and height (based on the parent's dimensions): 
[ 23, 75, null, null, 23, 75 ]
Flexible width and height, but limited to a minimum width of 200 and a minimum height of 100 (based on the parent's dimensions): 
[ 23, 75, 200, 100, 23, 75 ]

The options Object, all options are optional and default to what's

defined in controlDefaults.
Key Description
value The initial value of the component. It's type and meaning differs between components.
valueObj An HValue instance to bind immediately. The value of the HValue instance overrides the value option.
label The label of the component. It's usually a text (or html) String. Its meaning differs between components. See #setLabel and #refreshLabel
visible A Boolean value defining the initial visibility of the component. A true value means visible and false means hidden.
events An Object containing the events to listen to. See setEvents and EVENT
enabled A Boolean value defining the initial enabled -state of the component. Set to false to initially disable the component. See setEnabled
active A Boolean value defining the initial active (clicked or focused) state of the component.
minValue A Number for components utilizing value ranges. See setValueRange
maxValue A Number for components utilizing value ranges. See setValueRange

Class Methods

implement( interface )

Inherited from: HClass

Description

Copies the members of interface to a HClass or a class inherited from HClass.

Usage:

Defines an interface: 
// Create an interface class that calculates the area
var AreaInterface = HClass.extend({
  constructor: null,
  area: function() {
    return this.getWidth() * this.getHeight();
  }
});



// Create a class that contains the coordinates of a rectangle.
var Rectangle = HClass.extend({
  constructor: function( x, y, width, height ) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
  },
  getWidth: function() {
    return this.width;
  },
  getHeight: function() {
    return this.height;
  }
});


// Makes the Rectangle class implement the AreaInterface
Rectangle.implement( AreaInterface );

nu( )

Inherited from: HClass

Class members:

Description

nu is a protected class method.

It does the same thing as the new keyword, but it is a class method.

Parameters:

Any parameters are passed on to the constructor method.

Usage:

Creates a class MyClass, then creates two instances of it: myClassInstance1 and myClassInstance2. The end result is the same. 
var MyClass = HClass.extend({
  name: 'Foo',
  constructor: function( param1, param2 ){
    var logMsg = [ 'param1:', param1,
                   'param2:', param2,
                   'name:', this.name ];
    console.log( logMsg.join(' ') );
  }
});

// Construction using the new keyword:
var myClassInstance1 = new MyClass( 'one', 'two' );

// Construction using the nu method:
var myClassInstance2 = MyClass.nu( 'one', 'two' );
However, when extending in place, the benefits of the nu method become obvious.

// Extending in place with the new keyword:
var myExtendedClassInstance1 = new (
  MyClass.extend({
    name: 'Bar'
  })
)( 'one', 'two' );

// The same as above, but using the nu method:
var myExtendedClassInstance2 = MyClass.extend({
  name: 'Bar'
}).nu( 'one', 'two' );

extend( instance, static )

Inherited from: HClass

Description

The class method used to extend a class.

If the member name constructor is defined as null instead of a function block in the instance object block, the class is defined as a singleton (single instance class).

Parameters:

instance The object that defines the class instance members.
static The object that defines the static class members.

Returns:

Returns the extended class object.

Usage:

var Point = HClass.extend({
  constructor: function( x, y ) {
    this.x = x;
    this.y = y;
  }
});
var Rectangle = Point.extend({
  // Instance members:
  constructor: function( x, y, width, height ) {
    this.base( x, y );
    this.width = width;
    this.height = height;
  },
  getWidth: function() {
    return this.width;
  },
  getHeight: function() {
    return this.height;
  }
},


// Class Members
{ description: "this is a Rectangle",
  getClass: function() {
    return this;
  }
});

Instance Methods

endHover( obj )

Inherited from: HEventResponder

Description

Default endHover event responder method. Does nothing by default. Extend the endHover method, if you want to do something when this instance is no longer the target of another instance's drag event. Called when a dragged component instance is dragged away from the target instance.

Parameters

obj The dragged component object.

setEnabled( flag )

Inherited from: HEventResponder

Description

Enables the HControl instance, if the enabled flag is true, and disables it if enabled is false. A disabled HControl won't respond events. Component themes reflect the disabled state typically with a dimmer appearance.

Parameters

flag Boolean; true enables, false disables.

Returns

self (HPasswordControl#)

click( x, y, isLeftButton )

Inherited from: HEventResponder

Description

Default click event responder method. Does nothing by default.

Parameters

x The horizontal coordinate units (px) of the mouse cursor position.
y The vertical coordinate units (px) of the mouse cursor position.
isLeftButton Boolean flag; false if the right(context) mouse button is pressed.

gainedActiveStatus( lastActiveControl )

Inherited from: HEventResponder

Description

Default gainedActiveStatus event responder method. Does nothing by default. Called when the component gains active status; both focused and clicked.

Parameters

lastActiveControl A reference to the control that was active before this control became active. Can be null if there was no active control.

drag( x, y )

Inherited from: HEventResponder

Description

Default drag event responder method. Does nothing by default. This is the preferred method to extend while a drag method is ongoing. Called whenever the mouse cursor moves and a drag event has been started.

Parameters

x The horizontal coordinate units (px) of the mouse cursor position.
y The vertical coordinate units (px) of the mouse cursor position.

setDoubleClick( flag )

Inherited from: HEventResponder

Same as setDoubleClickable

setDraggable( flag )

Inherited from: HEventResponder

Description

Registers or releases event listening for startDrag, drag and endDrag -events depending on the value of the flag argument.

Parameters

flag Set the startDrag, drag and endDrag event listening on/off (true/false) for the component instance.

Returns

self (HPasswordControl#)

startDrag( x, y )

Inherited from: HEventResponder

Description

Default startDrag event responder method. Sets internal flags by default. This is the preferred method to extend if you want to do something when a drag event starts. If you extend, remember to call this.base();

Parameters

x The horizontal coordinate units (px) of the mouse cursor position.
y The vertical coordinate units (px) of the mouse cursor position.

mouseWheel( delta )

Inherited from: HEventResponder

Description

Default mouseWheel event responder method. Does nothing by default.

Parameters

delta Scrolling delta, the wheel angle change. If delta is positive, wheel was scrolled up. Otherwise, it was scrolled down.

setMouseDown( flag )

Inherited from: HEventResponder

Description

Registers or releases event listening for mouseDown events depending on the value of the flag argument.

Parameters

flag Set the mouseDown event listening on/off (true/false) for the component instance.

Returns

self (HPasswordControl#)

mouseUp( x, y, isLeftButton )

Inherited from: HEventResponder

Description

Default mouseDown event responder method. Does nothing by default.

Parameters

x The horizontal coordinate units (px) of the mouse cursor position.
y The vertical coordinate units (px) of the mouse cursor position.
isLeftButton Boolean flag; false if the right(context) mouse button is pressed.

setMouseWheel( flag )

Inherited from: HEventResponder

Description

Alternative flag setter for the mouseWheel event type. If set to true, starts listening to mouseWheel events when the component has focus.

Parameters

flag Set the mouseWheel event listening on/off (true/false) for the component instance.

Returns

self (HPasswordControl#)

endDrag( x, y )

Inherited from: HEventResponder

Description

Default endDrag event responder method. Sets internal flags by default. This is the preferred method to extend if you want to do something when a drag event ends. If you extend, remember to call this.base();

Parameters

x The horizontal coordinate units (px) of the mouse cursor position.
y The vertical coordinate units (px) of the mouse cursor position.

drop( obj )

Inherited from: HEventResponder

Description

Default drop event responder method. Does nothing by default. Extend the drop method, if you want to do something when this instance is the target of another instance's endDrag event. Called when a dragged component instance is dropped on the target instance.

Parameters

obj The dragged component object.

setDroppable( flag )

Inherited from: HEventResponder

Description

Registers or releases event listening for startHover, drop and endHover -events depending on the value of the flag argument.

Parameters

flag Set the startHover, drop and endHover event listening on/off (true/false) for the component instance.

Returns

self (HPasswordControl#)

setClick( flag )

Inherited from: HEventResponder

Same as setClickable

setClickable( flag )

Inherited from: HEventResponder

Description

Alternative flag setter for the click event type. If set to true, starts listening to click events when the component has focus.

Parameters

flag Set the click event listening on/off (true/false) for the component instance.

Returns

self (HPasswordControl#)

keyDown( keycode )

Inherited from: HEventResponder

Description

Default keyDown event responder method. Does nothing by default. Extend the keyDown method, if you want to do something when a key is pressed and the component is active.

Parameters

keycode The ascii key code of the key that was pressed.

textEnter( )

Inherited from: HEventResponder

Description

Default textEnter event responder method. Does nothing by default. Extend the textEnter method, if you want to do something when a key is released regardless if the component is active, has focus or not.

Parameters

keycode The ascii key code of the key that was released.

mouseMove( x, y )

Inherited from: HEventResponder

Description

Default mouseMove event responder method. Does nothing by default. Called whenever the mouse cursor is moved regardless if the component is active or has focus.

Parameters

x The horizontal coordinate units (px) of the mouse cursor position.
y The vertical coordinate units (px) of the mouse cursor position.

setDoubleClickable( flag )

Inherited from: HEventResponder

Description

Registers or releases event listening for doubleClick events depending on the value of the flag argument.

Parameters

flag Set the doubleClick event listening on/off (true/false) for the component instance.

Returns

self (HPasswordControl#)

mouseDown( x, y, isLeftButton )

Inherited from: HEventResponder

Description

Default mouseDown event responder method. Does nothing by default.

Parameters

x The horizontal coordinate units (px) of the mouse cursor position.
y The vertical coordinate units (px) of the mouse cursor position.
isLeftButton Boolean flag; false if the right(context) mouse button is pressed.

blur( )

Inherited from: HEventResponder

Description

Default blur event responder method. Does nothing by default. Called when the component loses focus.

doubleClick( x, y, isLeftButton )

Inherited from: HEventResponder

Description

Default click event responder method. Does nothing by default.

Parameters

x The horizontal coordinate units (px) of the mouse cursor position.
y The vertical coordinate units (px) of the mouse cursor position.
isLeftButton Boolean flag; false if the right(context) mouse button is pressed.

invalidatePositionCache( )

Inherited from: HEventResponder

Description

Forces retrieving this control's DOM element position directly rather than using the cached version when the position is needed by EVENT. Child controls are invalidated recursively by HView.

Returns

self (HPasswordControl#)

setMouseMove( flag )

Inherited from: HEventResponder

Description

Alternative flag setter for the mouseMove event type. If set to true, starts listening to mouseDown events when the component has focus.

Parameters

flag Set the mouseDown event listening on/off (true/false) for the component instance.

Returns

self (HPasswordControl#)

setMouseUp( flag )

Inherited from: HEventResponder

Description

Registers or releases event listening for mouseUp events depending on the value of the flag argument.

Parameters

flag Set the mouseUp event listening on/off (true/false) for the component instance.

Returns

self (HPasswordControl#)

focus( )

Inherited from: HEventResponder

Description

Default focus event responder method. Does nothing by default. Called when the component gets focus.

lostActiveStatus( newActiveControl )

Inherited from: HEventResponder

Description

Default lostActiveStatus event responder method. Does nothing by default. Called when the component loses active status; another component was focused and clicked.

Parameters

newActiveControl A reference to the control that became the currently active control. Can be null if there is no active control.

setTextEnter( flag )

Inherited from: HEventResponder

Description

Registers or releases event listening for textEnter events depending on the value of the flag argument.

Returns

self (HPasswordControl#)

startHover( obj )

Inherited from: HEventResponder

Description

Default startHover event responder method. Does nothing by default. Extend the startHover method, if you want to do something when this instance is the target of another instance's drag event. Called when a dragged component instance is dragged over the target instance.

Parameters

obj The dragged component object.

keyUp( keycode )

Inherited from: HEventResponder

Description

Default keyUp event responder method. Does nothing by default. Extend the keyUp method, if you want to do something when a key is released and the component is active.

Parameters

keycode The ascii key code of the key that was released.

setKeyUp( flag )

Inherited from: HEventResponder

Description

Registers or releases event listening for keyUp events depending on the value of the flag argument.

Parameters

flag Set the keyUp event listening on/off (true/false) for the component instance.

Returns

self (HPasswordControl#)

setEvents( events )

Inherited from: HEventResponder

Description

The event responder interface for HControl. Registers the events defined by boolean properties of the events object to the control instance. The event manager handles the event mapping and abstraction itself. NOTE startDrag vs mouseDown and endDrag vs mouseUp events conflict, if both are set simultaneously.

Parameters

events A { event: state } Object structure, sets events based on the keys and the flag. All states are Booleans (true or false). A true state means the event listening for the event is enabled and a false state means the event listening is disabled. See the Event Types below:

Event States

Event State Description
mouseMove The global mouseMove event state. The component receives this event regardless if it's focused or not. The event responder method for it is mouseMove and it receives the absolute x and y coordinates of the mouse pointer when the mouse cursor position changes. Can also be toggled separately by using the setMouseMove method.
textEnter The global textEnter event state. The component receives this event regardless if it's focused or not. The event responder method for it is textEnter and it receives a every time a key on the keyboard is pressed. Can also be toggled separately by using the setTextEnter method.
click The local click event state. The component receives this event only if it's focused. The event responder method for it is click and it receives the absolute x and y coordinates of the mouse pointer as well as which mouse button was used to trigger the event. Can also be toggled separately by using the setClickable method.
mouseDown The local mouseDown event state. The component receives this event only if it's focused. The event responder method for it is mouseDown and it receives the absolute x and y coordinates of the mouse pointer as well as which mouse button was used to trigger the event. Can also be toggled separately by using the setMouseDown method.
mouseUp The local mouseUp event state. The component receives this event only if it's focused. The event responder method for it is mouseUp and it receives the absolute x and y coordinates of the mouse pointer as well as which mouse button was used to trigger the event. Can also be toggled separately by using the setMouseUp method.
mouseWheel The local mouseWheel event state. The component receives this event only if it's focused. The event responder method for it is mouseWheel and it receives the delta of the amount of the mouse scroll wheel was rolled: a floating point number, larger or smaller than 0, depending on the direction the scroll wheel was rolled. Can also be toggled separately by using the setMouseWheel method.
draggable The local draggable event states. The component receives these events only if it's focused. The event responders methods are startDrag, drag and endDrag. The events receive the mouse cursor coordinates. Can also be toggled separately by using the setDraggable method.
droppable The local droppable event states. The component receives this event only if another component is dragged (hovered) or dropped with the area of this component as the target. The event responders method for it are hoverStart, drop and hoverEnd. Can also be toggled separately by using the setDroppable method.
keyDown The local keyDown event state. The component receives this event only if it's focused. The event responder method for it is keyDown and it receives the ascii key code whenever a keyboard key is pressed. Can also be toggled separately by using the setKeyDown method.
keyUp The local keyUp event state. The component receives this event only if it's focused. The event responder method for it is keyUp and it receives the ascii key code whenever a keyboard key is released. Can also be toggled separately by using the setKeyUp method.

Usage

HControl.new(
  [0,0,100,20],
  HApplication.nu()
).setEvents({
  mouseUp: true,
  mouseDown: true
});

Returns

self (HPasswordControl#)

setKeyDown( flag )

Inherited from: HEventResponder

Description

Registers or releases event listening for keyDown events depending on the value of the flag argument.

Parameters

flag Set the keyDown event listening on/off (true/false) for the component instance.

Returns

self (HPasswordControl#)

setValueObj( valueObj )

Inherited from: HValueResponder

Description

Binds an HValue compatible instance to the component's valueObj. Also calls setValue. It should not be called from user code, instead use the HValue instance method bind.

Parameter

aValueObj The HValue instance object to bind.

Returns

self (HPasswordControl#)

setValue( value )

Inherited from: HValueResponder

Description

Assigns the object a new value. Extend it, if your component needs to do validation of the new value. For HControl instances, extend HControl#refreshValue to do something when the value has been set.

Parameter

value The new value. Allowed values depend on the component type and other usage of the bound HValue instance HPasswordControl#valueObj.

Returns

self (HPasswordControl#)

valueDiffers( value )

Inherited from: HValueResponder

Description

Checks, if the value given as parameter differs from value.

Parameters

value The value to be tested.

Returns

A boolean true (different) or false (same).

stopAnimation( target )

Inherited from: HMorphAnimation

Description

Stops the current animation for this view. If the view is not being animated, this method has no effect. The onAnimationEnd event on the view gets called when the animation finishes (reaches the end position/size), but onAnimationCancel gets called when this method is called while the animation is still in action.

onAnimationStart( )

Inherited from: HMorphAnimation

Description

Extend the onAnimationStart method, if you want to do something special when this view starts animating.

Usage:

HView.extend({
   onAnimationStart: function() {
     this.setStyle('background-color','green')
   }, 
   onAnimationEnd: function() {
     this.setStyle('background-color','grey')}
   }).nu(
     [0,0,300,300],
     HApplication.nu()
   ).setStyle(
     'background-color','blue'
   ).animateTo(
     HRect.nu(
       300,300,700,700
     )
   );

onAnimationCancel( )

Inherited from: HMorphAnimation

Extend this method if functionality is desired upon cancellation of animation.

animateTo( obj, duration, fps )

Inherited from: HMorphAnimation

Description

Moves the view smoothly into another location and/or size. The onAnimationStart event on the view gets called when the animation starts.

Parameters:

obj An instance of <HPoint> or <HRect>, depending on the desired animation result. When a point is passed, the view is moved in that position. When a rect is passed, the view can also be resized with or without moving to different coordinates.

duration optional_ The duration of the animation in milliseconds. The default duration is 500 ms.

fps optional_ The frame rate for the animation. The default fps is 50.

Returns:

self (HPasswordControl#) 
HView.extend({
  onAnimationEnd: function(){
    this.die();
  }
}).nu(
  [ 0, 0, 300, 300 ],
  HApplication.nu()
).setStyle(
  'background-color', 'red'
).animateTo(
  HRect.nu( 300, 300, 500, 500 )
);

onAnimationEnd( )

Inherited from: HMorphAnimation

Extend the onAnimationEnd method, if you want to do something special when an animation on this view is finished.

evalMarkupVariable( strToEval, isAssignment )

Inherited from: HMarkupView

Description

Evaluates a string and throws an error into console.log if the string doesn't pass evaluation. If isAssignment flag is set to true returns empty string. if isAssignment is set to false will return string if it passes evaluation.

Parameters

strToEval A String to evaluate.

isAssignment Flag to indicate return the String upon passed evaluation(false) or return of an empty String(true).

Returns

String

toggleCSSClass( elementId, cssClass, setOn )

Inherited from: HMarkupView

Description

Sets or unsets the cssClass into a DOM element that goes by the ID elementId.

Parameters

elementId ID of the DOM element, or the element itself, to be modified.
cssClass Name of the CSS class to be added or removed.
setOn Boolean value that tells should the CSS class be added or removed.

Returns

self (HPasswordControl#)

bindMarkupVariables( )

Inherited from: HMarkupView

Description

Evaluates the pieces of code defined in the markup template marked with syntax #{}. Can't use } characters in the code though.

Places the resulting markup in the instance variable.

textFocus( )

Inherited from: HTextControl

Description

Special event for text entry components. Called when the input field gains focus.

setEnabled( flag )

Inherited from: HTextControl

textBlur( )

Inherited from: HTextControl

Description

Special event for text entry components. Called when the input field loses focus.

setTextFieldValue( value )

Inherited from: HTextControl

Description

Sets the value of the input element.

Parameters

value The value to set.

setSelectionRange( selectionStart, selectionEnd )

Inherited from: HTextControl

Description

Sets the selection (or text cursor position) of the input element.

Parameters

selectionStart The start of the selection (or an Array containing both start and end offset, see below).
selectionEnd The end offset of the selection.

Note

  • selectionStart can also be given as an Array like [ startOffset, endOffset ].
  • If the selectionEnd is omitted, no selection is made; the text cursor is positioned at the startOffset instead.

textEnter( )

Inherited from: HTextControl

Description

Receives the textEnter event to update the value based on what's (potentially) entered in the text input field.

setStyle( name, value, cacheOverride )

Inherited from: HTextControl

getTextFieldValue( )

Inherited from: HTextControl

Description

Returns the value of the input element.

getSelectionRange( )

Inherited from: HTextControl

Description

Returns the selection (or text cursor position) of the input element as an Array like [ startOffset, endOffset ].

refreshLabel( )

Inherited from: HTextControl

Description

The refreshLabel method sets the title property of the text field, essentially creating a tooltip using the label.

getInputElement( )

Inherited from: HTextControl

Description

Returns the input element or null, if no input element created (yet).

refreshValue( )

Inherited from: HTextControl

Description

refreshValue function

validateText( value )

Inherited from: HTextControl

Description

Placeholder method for validation of the value.

setValueRange( value, minValue, maxValue )

Inherited from: HControl

Description

Assigns the object a new value range. Used for sliders, steppers etc. Calls setValue with the value given.

Parameters

value The new value to be set to the component's HValue compatible instance.

minValue The new minimum value limit. See minValue.

maxValue The new maximum value limit. See maxValue.

Returns

self (HPasswordControl#)

refresh( )

Inherited from: HControl

Description

Called mostly internally whenever a property change requires usually visual action. It's called by methods like setLabel and setValue. Extends HView.refresh. The boolean properties refreshOnValueChange and refreshOnLabelChange control whether refreshValue or refreshLabel should be called. It's used as-is in most components. If you implement your class extension with properties similar to value or label, you are advised to extend the refresh method.

Returns

self (HPasswordControl#)

die( )

Inherited from: HControl

Description

The destructor of HControl instances. Releases events and values before passing through to the base HView.die. Extend it, you you allocate new instance members that need to be deallocated upon destruction.

refreshValue( )

Inherited from: HControl

Description

Called when the HPasswordControl#value has been changed. By default tries to update the value element defined in the theme of the component. Of course, the HControl itself doesn't define a theme, so without a theme doesn't do anything.

Returns

self (HPasswordControl#)

setStyleOfPart( partName, name, value, cacheOverride )

Inherited from: HView

Description

Sets a style for a specified markup element that has been bound to this view.

Parameters

partName The identifier of the markup element.
name The style name
value The style value

Returns

self (HPasswordControl#)

sendToBackOf( view )

Inherited from: HView

Description

Sends itself to the back of the given view by changing its Z-Index. Only works on sibling views.

Parameters

view The view to send to the back of.

Returns

self (HPasswordControl#)

bringToFront( )

Inherited from: HView

Description

Brings the view to the front by changing its Z-Index.

Returns

self (HPasswordControl#)

removeView( viewId )

Inherited from: HView

Description

Call this if you need to remove a child view from this view without destroying its element, making it in effect a view without parent. Useful, for example, for moving a view from one parent component to another.

Parameters

viewId The parent-specific view id. Actually an array index.

Returns

self (HPasswordControl#)

setText( text )

Inherited from: HView

Description

Wrapper for setHTML, sets escaped html, if tags and such are present.

Parameters

text The text to set. If it contains any html, it's escaped.

Returns

self (HPasswordControl#)

toggle( )

Inherited from: HView

Description

Toggles between hide and show.

Returns

self (HPasswordControl#)

setLabel( label )

Inherited from: HView

Description

Sets the label on a control component: the text that's displayed in HControl extensions. Visual functionality is implemented in component theme templates and refreshLabel method extensions.

Avoid extending directly, extend refreshLabel instead.

Parameters

label The text the component should display.

Returns

self (HPasswordControl#)

zIndex( )

Inherited from: HView

Description

Use this method to get the Z-Index of itself.

Returns

The current Z-Index value.

style( name )

Inherited from: HView

Description

Returns a style of the main DOM element of the component. Utilizes ELEM cache to perform the action.

Parameters

name The style name (css syntax, eg. 'background-color')

Returns

The style property value (css syntax, eg. 'rgb(255,0,0)')

moveBy( )

Inherited from: HView

Description

Alias method for offsetBy.

Returns

self (HPasswordControl#)

moveTo( )

Inherited from: HView

Description

Alias method for offsetTo.

Returns

self (HPasswordControl#)

setMinWidth( minWidth )

Inherited from: HView

maxRect( )

Inherited from: HView

Returns the maximum rect using the #parentSize.

optimizeWidth( )

Inherited from: HView

Description

An abstract method that derived classes may implement, if they are able to resize themselves so that their content fits nicely inside. Similar to pack, might be renamed when components are written to be savvy of this feature.

stringHeight( string, length, elemId, extraCss )

Inherited from: HView

Returns the string height.

setFlexBottom( flag, px )

Inherited from: HView

Description

When the flag is true, the view will be aligned to the bottom. The px offset defines how many pixels from the parent's bottom edge the bottom edge of this view will be. If both setFlexBottom and setFlexTop are set, the height is flexible. Use the constructor or setRect instead of calling this method directly.

Parameters

flag Boolean flag (true/false). Enables bottom-alignment when true.
px The amount of pixels to offset from the bottom edge of the parent's bottom edge.

Returns

self (HPasswordControl#)

firstDraw( )

Inherited from: HView

Description

Called once, before the layout of the view is initially drawn. Doesn't do anything by itself, but provides an extension point.

remove( )

Inherited from: HView

Description

Call this if you need to remove a component from its parent's views array without destroying the DOM element itself, making it in effect a view without parent. Useful, for example, for moving a view from one parent component to another.

Returns

self (HPasswordControl#)

setRelative( flag )

Inherited from: HView

Description

The flag enables or disables the relative positioning mode. (It's disabled by default). If relative positioning mode is on, the coordinate system has little or no effect.

Parameters

flag Boolean flag (true/false). Enables absolute relative when true. Enables absolute positioning when false.

Returns

self (HPasswordControl#)

setMarkupOfPart( partName, value )

Inherited from: HView

Description

Sets a style of a specified markup element that has been bound to this view.

Parameters

partName The identifier of the markup element.
value Value for markup element.

Returns

self (HPasswordControl#)

show( )

Inherited from: HView

Description

Restores the visibility of the component's main DOM element (and its children).

Return

self (HPasswordControl#)

buildParents( viewId )

Inherited from: HView

Used by addView to build a parents array of parent classes.

pageX( )

Inherited from: HView

Returns the X coordinate that has the scrolled position calculated.

bringForward( )

Inherited from: HView

Description

Brings itself one step forward by changing its Z-Index.

Returns

self (HPasswordControl#)

pageY( )

Inherited from: HView

Returns the Y coordinate that has the scrolled position calculated.

bringToFrontOf( view )

Inherited from: HView

Description

Brings itself to the front of the given view by changing its Z-Index. Only works on sibling views.

Parameters

view The view to bring to the front of.

Returns

self (HPasswordControl#)

offsetBy( horizontal, vertical )

Inherited from: HView

Description

This method re-positions the view without changing its size. It adds horizontal coordinate units to the x coordinate and vertical units to the y coordinate of the view. Since a View's frame rectangle must be aligned on screen pixels, only integral values should be passed to this method. Values with fractional components will be rounded to the nearest whole integer. If the View is attached to a window, this method causes its parent view to be updated, so the View is immediately displayed in its new size. If it doesn't have a parent or isn't attached to a window, this method merely alter its frame and bounds rectangle.

Parameters

horizonal Horizonal units to change the x coordinate (negative units subtract)
vertical Vertical units to add to change the y coordinate (negative units subtract)

Returns

self (HPasswordControl#)

onIdle( )

Inherited from: HView

Recursive idle poller. Should be extended if functionality is desired.

offsetTo( )

Inherited from: HView

Descripion

This method moves the view to a new coordinate. It adjusts the left and top components of the frame rectangle accordingly. Since a View's frame rectangle must be aligned on screen pixels, only integral values should be passed to this method. Values with fractional components will be rounded to the nearest whole integer. If the View is attached to a window, this method causes its parent view to be updated, so the View is immediately displayed in its new size. If it doesn't have a parent or isn't attached to a window, this method merely alter its frame and bounds rectangle.

Parameters

x The new x-coordinate of the view.
y The new y-coordinate of the view.

point The new coordinate point of the view.

Returns

self (HPasswordControl#)

styleOfPart( partName, name )

Inherited from: HView

Description

Returns a style of a specified markup element that has been bound to this view.

Parameters

partName The identifier of the markup element.
name The style name

Returns

The style of a specified markup element.

setStyles( styles )

Inherited from: HView

setFlexRight( flag, px )

Inherited from: HView

Description

When the flag is true, the view will be aligned to the right. The px offset defines how many pixels from the parent's right edge the right edge of this view will be. If both setFlexRight and setFlexLeft are set, the width is flexible. Use the constructor or setRect instead of calling this method directly.

Parameters

flag Boolean flag (true/false). Enables right-alignment when true.
px The amount of pixels to offset from the right edge of the parent's right edge.

Returns

self (HPasswordControl#)

setFlexTop( flag, px )

Inherited from: HView

Description

When the flag is true, the view will be aligned to the top (default). The px offset defines how many pixels from the parent's top edge the top edge of this view will be. If both setFlexTop and setFlexBottom are set, the height is flexible. Use the constructor or setRect instead of calling this method directly.

Parameters

flag Boolean flag (true/false). Enables top-alignment when true.
px The amount of pixels to offset from the top edge of the parent's top edge.

Returns

self (HPasswordControl#)

getThemeGfxPath( )

Inherited from: HView

Description

Used by html theme templates to get the theme-specific full image path.

Returns

The full path of the theme-specific gfx path as a string.

drawMarkup( )

Inherited from: HView

parentSize( )

Inherited from: HView

Gets the size of the parent. If the parent is the document body, uses the browser window size.

setFlexLeft( flag, px )

Inherited from: HView

Description

When the flag is true, the view will be aligned to the left (default). The px offset defines how many pixels from the parent's left edge the left edge of this view will be. If both setFlexLeft and setFlexRight are set, the width is flexible. Use the constructor or setRect instead of calling this method directly.

Parameters

flag Boolean flag (true/false). Enables left-alignment when true.
px The amount of pixels to offset from the left edge of the parent's left edge.

Returns

self (HPasswordControl#)

markupOfPart( partName )

Inherited from: HView

Description

Returns a style of a specified markup element that has been bound to this view.

Parameters

partName The identifier of the markup element.

Returns

The style of a specified markup element.

setStyle( name, value, cacheOverride )

Inherited from: HView

Description

Sets any arbitary style of the main DOM element of the component. Utilizes Element Manager's drawing queue/cache to perform the action.

Parameters

name The style name (css syntax, eg. 'background-color')
value The style value (css syntax, eg. 'rgb(255,0,0)')
cacheOverride Cache override flag.

Returns

self (HPasswordControl#)

sendToBack( )

Inherited from: HView

Description

Sends the view to the back by changing its Z-Index.

Returns

self (HPasswordControl#)

hide( )

Inherited from: HView

Description

Hides the component's main DOM element (and its children).

Returns

self (HPasswordControl#)

draw( )

Inherited from: HView

Description

The higher level draw wrapper for drawRect, drawMarkup and drawSubviews. Finally calls refresh.

Returns

self (HPasswordControl#)

setMinHeight( minHeight )

Inherited from: HView

invalidatePositionCache( )

Inherited from: HView

Description

Invalidates event manager's element position cache for this view and its subviews. Actual functionality is implemented in HControl.

Returns

self (HPasswordControl#)

refreshLabel( )

Inherited from: HView

Description

Called when the HPasswordControl#label has been changed. By default tries to update the label element defined in the theme of the component. Of course, the HControl itself doesn't define a theme, so without a theme doesn't do anything.

Returns

self (HPasswordControl#)

refresh( )

Inherited from: HView

Description

This method should be extended in order to redraw only specific parts. The base implementation calls optimizeWidth when optimizeWidthOnRefresh is set to true.

Returns

self (HPasswordControl#)

setAbsolute( flag )

Inherited from: HView

Description

The flag enables or disables the absolute positioning mode. (It's enabled by default). If absolute positioning mode is off, the coordinate system has little or no effect.

Parameters

flag Boolean flag (true/false). Enables absolute positioning when true. Enables relative positioning when false.

Returns

self (HPasswordControl#)

drawRect( )

Inherited from: HView

Description

The drawRect method refreshes the dimensions of the view. It needs to be called to affect changes in the rect. It enables the drawn flag.

Returns

self (HPasswordControl#)

destroyView( viewId )

Inherited from: HView

Description

Call this if you need to remove a child view from this view, destroying its child elements recursively and removing all DOM elements too.

Parameters

viewId The parent-specific view id. Actually an array index.

Returns

self (HPasswordControl#)

bounds( )

Inherited from: HView

Description

Returns bounds rectangle that defines the size and coordinate system of the component. This should be identical to the rectangle used in constructing the object, unless it has been changed after construction.

Returns

A new <HRect> instance with identical values to this component's rect.

escapeHTML( html )

Inherited from: HView

Description

Method to escape HTML from text.

Converts < to < and > to > and&to &

Parameters

html The html to escape.

Returns

A string with the html escaped.

bindDomElement( domElementId )

Inherited from: HView

Description

Binds a DOM element to the ELEM cache. This is a wrapper for the ELEM#elem_bind that keeps track of the bound elements and frees them from the element manager when the view is destroyed.

Parameters

domElementId The value of the DOM element's id attribute that is to be bound to the element cache.

Returns

The element index id of the bound element.

stringSize( string, length, elemId, wrap, extraCss )

Inherited from: HView

Description

Measures the characters encoded in length bytes of the string - or, if no length is specified, the entire string up to the null character, '0', which terminates it. The return value totals the width of all the characters in coordinate units; it's the length of the baseline required to draw the string.

Parameters

string The string to measure.
length Optional, How many characters to count.
elemId Optional, The element ID where the temporary string is created in.
wrap Optional boolean value, wrap whitespaces?
extraCss Optional, extra css to add.

Returns

The width in pixels required to draw a string in the font.

die( )

Inherited from: HView

Description

Deletes the component and all its children. Should normally be called from the parent.

setRect( rect )

Inherited from: HView

Description

Replaces the rect of the component with a new HRect instance and then refreshes the display.

Parameters

rect The new HRect instance to replace the old rect instance with.
rect Array format, see HView#constructor for further details.

Returns

self (HPasswordControl#)

addView( view )

Inherited from: HView

Description

Adds a sub-view/component to the view. Called from inside the HView#constructor and should be automatic for all components that accept the 'parent' parameter, usually the second argument, after the HRect. May also be used to attach a freely floating component (removed with remove) to another component.

Parameter

view Usually this inside HView derivate components.

Returns

The view id.

getThemeGfxFile( fileName )

Inherited from: HView

Description

Used by html theme templates to get the theme-specific full path of the fileName given.

Returns

The full path of the file.

stringWidth( string, length, elemId, extraCss )

Inherited from: HView

Returns the string width

sendBackward( )

Inherited from: HView

Description

Sends itself one step backward by changing its Z-Index.

Returns

self (HPasswordControl#)

resizeBy( horizontal, vertical )

Inherited from: HView

Description

This method resizes the view, without moving its left and top sides. It adds horizontal coordinate units to the width and vertical units to the height of the view. Since a View's frame rectangle must be aligned on screen pixels, only integral values should be passed to this method. Values with fractional components will be rounded to the nearest whole integer. If the View is attached to a window, this method causes its parent view to be updated, so the View is immediately displayed in its new size. If it doesn't have a parent or isn't attached to a window, this method merely alter its frame and bounds rectangle.

Parameters

horizonal Horizonal units to add to the width (negative units subtract)
vertical Vertical units to add to the height (negative units subtract)

Returns

self (HPasswordControl#)

setHTML( html )

Inherited from: HView

Description

Replaces the contents of the view's DOM element with custom html.

Parameters

html The HTML (string-formatted) to replace the content with.

Returns

self (HPasswordControl#)

resizeTo( width, height )

Inherited from: HView

Description

This method makes the view width units wide and height units high. This method adjust the right and bottom components of the frame rectangle accordingly. Since a View's frame rectangle must be aligned on screen pixels, only integral values should be passed to this method. Values with fractional components will be rounded to the nearest whole integer. If the View is attached to a window, this method causes its parent view to be updated, so the View is immediately displayed in its new size. If it doesn't have a parent or isn't attached to a window, this method merely alter its frame and bounds rectangle.

Parameters

width The new width of the view.
height The new height of the view.

Returns

self (HPasswordControl#)

unbindDomElement( elementId )

Inherited from: HView

Description

Removes a DOM element from the ELEM cache. This is a wrapper for the ELEM#elem_del. This is used for safely removing DOM nodes from the cache.

Parameters

elementId The id of the element in the element manager's cache that is to be removed from the cache.

drawSubviews( )

Inherited from: HView

Description

Called once, when the layout of the view is initially drawn. Doesn't do anything by itself, but provides an extension point for making subviews.

pageLocation( )

Inherited from: HView

Returns the HPoint that has the scrolled position calculated.

valueOf( )

Inherited from: HClass

Protected instance method, returns the value of an instance.

base( )

Inherited from: HClass

This method can be called from any other method to invoke that method's parent

toString( )

Inherited from: HClass

Protected instance method, returns the instance represented as a String.

Other Instance Members

componentName = 'passwordcontrol'

defaultEvents = { }

Inherited from: HEventResponder

Default event listeners.

controlDefaults = (HControlDefaults.extend({ refreshOnBlur: true, refreshOnInput: true }))

Inherited from: HTextControl

hasTextFocus = false

Inherited from: HTextControl

This flag is true, when the text input field has focus.

refreshOnValueChange = true

Inherited from: HControl

A flag: when true, calls the refreshValue method whenever HPasswordControl#value is changed.

minValue = null

Inherited from: HControl

The minimum numeric value allowed, when the component utilizes value ranges. See setValueRange

maxValue = null

Inherited from: HControl

The maximum allowed value, when the component utilizes value ranges. See setValueRange

events = null

Inherited from: HControl

The event object structure that specifies which events to listen to.

enabled = null

Inherited from: HControl

The enabled/disabled flag. See setEnabled.

value = null

Inherited from: HControl

The current value of a component. See setValue.

valueObj = null

Inherited from: HControl

The current HValue compatible object. Do not set directly. Holds reference to the bound HValue instance. Set with HValue.bind.

active = null

Inherited from: HControl

A boolean value that shows whether this control is currently active or not. Control gets active when the user clicks on it.

label = null

Inherited from: HView

The visual value of a component, usually a String. See #setLabel.

isHidden = false

Inherited from: HView

The isHidden flog reflects the visibility of the view.

isAbsolute = true

Inherited from: HView

True, if the component using absolute positioning. False, if the component is using relative positioning.

refreshOnLabelChange = true

Inherited from: HView

When true, calls the refreshLabel method whenever HPasswordControl#label is changed.

flexBottomOffset = 0

Inherited from: HView

The amount of pixels to offset from the bottom edge when flexBottom is true.Defined with 6-item arrays for the rect parameter of setRect or the constructor. Can be set directly using the setFlexBottom method.

drawn = false

Inherited from: HView

The drawn flag is false before the component is visually drawn, it's true after it's drawn.

parent = null

Inherited from: HView

The parent is the parent supplied to the constructor. This is a complete object reference to the parent's namespace.

app = null

Inherited from: HView

The app is the reference of the app process acting as the root controller of the view tree of which this view is a member. This is a complete object reference to the app's namespace.

viewDefaults = HViewDefaults

Inherited from: HView

The viewDefaults is a HViewDefaults object that is extended in the constructor with the options block given. The format of it is an Object. It's only used when not extended via HControl, see HControl#controlDefaults.

theme = null

Inherited from: HView

The theme the component is constructed with. By default, uses the HThemeManager.currentTheme specified at the time of construction.

parents = null

Inherited from: HView

The parents is an array containing parent instances up to the root controller level. The root controller is almost always an instance of HApplication.

viewId = null

Inherited from: HView

The viewId is the unique ID (serial number) of this view. This means the view can be looked up globally based on its id by using the HSystem.views array.

minHeight = 0

Inherited from: HView

flexLeft = true

Inherited from: HView

True, if the coordinates are left-aligned. False, if the coordinates are right-aligned. Uses the X-coordinate of rect, if true. Disabled using 6-item arrays with null x-coordinate for the rect parameter of setRect or the constructor. Can be set directly using the setFlexLeft method.

flexRightOffset = 0

Inherited from: HView

The amount of pixels to offset from the right edge when flexRight is true. Defined with 6-item arrays for the rect parameter of setRect or the constructor. Can be set directly using the setFlexRight method.

themePath = null

Inherited from: HView

Component specific theme path.

displayMode = 'block'

Inherited from: HView

The display mode to use. Defaults to 'block'. The other sane alternative is 'inline'.

views = null

Inherited from: HView

The views array contains a list of subviews of this view by id. To access the object reference, use the HSystem.views array with the id.

viewsZOrder = null

Inherited from: HView

The viewsZOrder array contains a list of subviews ordered by zIndex. To change the order, use the bringToFront, sendToBack, bringForwards, sendBackwards, bringToFrontOf and sentToBackOf methods.

flexRight = false

Inherited from: HView

True, if the coordinates are right-aligned. False, if the coordinates are left-aligned. Uses flexRightOffset if true. Defined with 6-item arrays for the rect parameter of setRect or the constructor. Can be set directly using the setFlexRight method.

preserveTheme = false

Inherited from: HView

The preserveTheme flag prevents the view from being redrawn if HThemeManager.currentTheme is changed after the view has been drawn. Is true, if theme has been set.

flexTop = true

Inherited from: HView

True, if the coordinates are top-aligned. False, if the coordinates are bottom-aligned. Uses the Y-coordinate of rect, if true. Disabled using 6-item arrays with null x-coordinate for the rect parameter of setRect or the constructor. Can be set directly using the setFlexTop method.

flexBottom = false

Inherited from: HView

True, if the coordinates are bottom-aligned. False, if the coordinates are top-aligned. Uses flexBottomOffset if true. Defined with 6-item arrays for the rect parameter of setRect or the constructor. Can be set directly using the setFlexRight method.

appId = null

Inherited from: HView

The appId is the unique ID (serial number) of the app process acting as the root controller of the view tree of which this view is a member. This means the app can be looked up globally based on this id by using the HSystem.apps array.

rect = null

Inherited from: HView

The HRect instance bound to self (HPasswordControl#) using the constructor or setRect.

minWidth = 0

Inherited from: HView

escapeLabelHTML = false

Inherited from: HView

Escapes HTML in the label when true.

optimizeWidthOnRefresh = true

Inherited from: HView

The optimizeWidthOnRefresh flag, when enabled, allows automatic width calculation for components that support that feature.

options = null

Inherited from: HView

An reference to the options block given as the constructor parameter options.

markupElemNames = ['bg', 'label', 'state', 'control', 'value', 'subview']

Inherited from: HView

Description

Replaces the contents of the view's DOM element with html from the theme specific html file.

Returns

self (HPasswordControl#)

prototype = { }

Inherited from: Object

Description

The prototype member of Object defines the instance members. These are copied to the instance object when the new keyword is called.

Other Class Members

CSS_DISABLED = "disabled"

Inherited from: HControl

The CSS class name to set when the component is disabled

CSS_ACTIVE = "active"

Inherited from: HControl

The CSS class name to set when the component is active (clicked/focused)

CSS_ENABLED = "enabled"

Inherited from: HControl

The CSS class name to set when the component is enabled