WebSquare.uiplugin.secret

Secret. Displays the end user’s input with "*". A kind of InputBox that hides end user’s input using "*". Provides interfaces similar to <input type="password" > of the HTML. Provides less functions than the InputBox.

Type

uiplugin

Property Summary

class: Same as the class property in HTML. The class defined in the CSS file or style block can be applied. Multiple classes can be defined with being divided by blank space.
disabled: [default:false, true] Disabled status of the component.
displaymessage: Displays the result message upon a validation failure by validate(); API. [default: false, true]
id: Component ID
invalidMessage: Message to display upon a failure by validate(); API. Valid only when displaymessage="true" is set.
invalidMessageFunc: Name of the user-defined function that will generate a message upon a validation failure by validate(); API.
mandatory: [default:false, true] Mandatory field. The validation function checks mandatory input fields. (Options) "false" (Default) Not make it mandatory. "true" Make it mandatory. </xmp></xmp>
maxByteLength: Maximum input length in bytes. The exceeding characters will be automatically cut.
maxlength: Maximum input length. Exceeding characters will be automatically cut.
minByteLength: Checks the minimum byte length upon calling of the validation API.
minlength: Checks the minimum length upon calling of the validation API.
nextTabID: The ID of the component to be selected upon the end user’s pressing the Tab key.
onFocusClass: Name of the class to apply upon onFocus.
placeholder
readOnly: [default:false, true] Setting of the readOnly property. Functions same as the readOnly of the HTML.
readOnlyClass: Name of the class to apply for readOnly mode.
ref: Value path of the DataCollection. Used with a purpose to bind a DataCollection with a WebSquare component.
refSync: Refreshes the ref as soon as the key of the ref bound with the Secret is entered. [default:false, true]
tabIndex: The focusing order by the Tab key.
title: Same as the class property in HTML.
tooltip: Text to be displayed upon the end user’s hovering the mouse over the component.
tooltipLocaleRef: Text key for the tooltip in case the tooltip text is provided in multiple languages.
userData1: User-defined property
userData2: User-defined property
userData3: User-defined property
validator: Name of the validation function

Event Summary

onblur: Triggered upon being unfocused.
onchange: Triggered upon a change in an inputted or selected value. Occurs at the point of focusing-out.
onclick: Triggered upon clicking of the component.
ondblclick: Triggered upon double-clicking of the component.
onfocus: Triggered upon being focused.
onkeydown: Triggered upon the end user's pressing a key on the keyboard.
onkeypress: Triggered upon the end user's pressing a key (and maintaining the key being pressed) on the keyboard.
onkeyup: Triggered upon the end user's releasing a key on the keyboard after pressing the key.
onmousedown: Triggered upon the end user's clicking the mouse.
onmousemove: Triggered upon moving of the mouse pointer.
onmouseout: Triggered upon the mouse focus moving out of a specified area or link.
onmouseover: Triggered upon the mouse moving into a specified area or link.
onmouseup: Triggered upon the end user's unclicking the mouse (after clicking).
onviewchange: Triggered when the value on the list is changed through keyboard input or mouse clicking.

Method Summary

commit( ): When the Secret is bound with the ref, reflects the displayed value to the ref.
getDataType( ): Returns the dataType of the component.
getValue( ): Returns the current value of the component.
setDisabled( disabled ): Sets the disabled property.
setStyle( propertyName , value ): Sets the style of the specified property.
setValue( value ): Sets the value of the component.
show( displayType ): Displays the component.
trigger( type , array ): Triggers a certain event registered for the component.
validate( ): Validates the component according to the specified properties.

Property Detail

class: Same as the class property in HTML. The class defined in the CSS file or style block can be applied. Multiple classes can be defined with being divided by blank space.
WebSquare5 Engine applies different classes to different components. By defining a common class, the common class can be applied to multiple components.
disabled: [default:false, true] Disable the component.
displaymessage: Displays the result message upon a validation failure by validate(); API. [default: false, true]
Displays an internally defined message. In case the invalidMessage is defined, the defined text will be displayed.
id: Component ID
The component ID is allocated as a global object. The script can access each object through the component ID.
invalidMessage: Message to display upon a failure by validate(); API. Valid only when displaymessage="true" is set.
Cannot be used with the invalidMessageFunc property at the same time.
invalidMessageFunc: Name of the user-defined function that will generate a message upon a validation failure by validate(); API.
Cannot be used with the invalidMessage property.
mandatory: [default:false, true] Mandatory field. The validation function checks mandatory input fields.
maxByteLength: Maximum input length in bytes. The exceeding characters will be automatically cut.
The value of the maxLength or the value of this property whichever is smaller will be applied.
If the byteCheckEncoding is euc-kr in config.xml, one Korean character will be counted as two bytes. In case of utf-8, it will be counted as three bytes.
maxlength: Maximum input length. Exceeding characters will be automatically cut.
The value of the maxByteLength or the value of this property whichever is smaller will be applied.
minByteLength: Checks the minimum byte length upon calling of the validation API.
If the byteCheckEncoding is euc-kr in config.xml, one Korean character will be counted as two bytes. In case of utf-8, it will be counted as three bytes.
minlength: Checks the minimum length upon calling of the validation API.
nextTabID: The ID of the component to be selected upon the end user’s pressing the Tab key.
onFocusClass: Name of the class to apply upon onFocus
placeholder
readOnly: [default:false, true] Setting of the readOnly property. Functions same as the readOnly of the HTML.
readOnlyClass: Name of the class to apply for readOnly mode.
ref: Value path of the DataCollection. Used with a purpose to bind a DataCollection with a WebSquare component.
(Format: data: [DataCollection ID].[Key id or Column id])
When bound with a DataList, the value of the selected row in the GridView will be bound.

Specify the XPath of the XML data to interface with the instance data.
refSync: Refreshes the ref as soon as the key of the ref bound with the Secret is entered. [default:false, true]
When the Secret is bound with a DataMap through the ref property, executing dataMap1.get("key1") in the onkeydown event will return the inputted value.
tabIndex: The focusing order by the Tab key.
Same as the tabindex property in HTML.
title: Same as the title property in HTML. The title is displayed upon the end user’s moving the mouse over the component. Generally used to support web accessibility.
tooltip: Text to be displayed upon the end user’s hovering the mouse over the component. Provided by WebSquare, and specifies additional information of the component.
tooltipLocaleRef: Text key for the tooltip in case the tooltip text is provided in multiple languages.
When there is no text for the key, "global_undefined" will be displayed on the screen.
userData1: User-defined property. Use getUserData("userData3") to get the data.
userData2: User-defined property. Use getUserData("userData2") to get the data.
userData3: User-defined property. Use getUserData("userData3") to get the data.
validator: Name of the validation function
Runs the specified function upon blurring of the component.
The specified function is executed before the onblur event, and validates upon occurrence of blurring. The developer can change the value through the return.

Event Detail

onblur

Triggered when the focus is lost.

Parameter
name	type	description
e	Object	Event object

onchange

Triggered upon a change in an inputted or selected value. Occurs at the point of focusing-out.
A change made by the script will also trigger a change. Use the onviewchage event to compare old and new values.

onclick

Triggered upon clicking of the component.

Parameter
name	type	description
e	Object	Event object

ondblclick

Triggered upon double-clicking of the component.

Parameter
name	type	description
e	Object	Event object

onfocus

Triggered upon the component being focused.

Parameter
name	type	description
e	Object	Event object

onkeydown

Triggered upon the end user's pressing a key on the keyboard.

Parameter
name	type	description
e	Object	Event object

onkeypress

Triggered upon the end user's pressing a key (and maintaining the key being pressed) on the keyboard.

Parameter
name	type	description
e	Object	Event object

onkeyup

Triggered upon the end user's releasing a key on the keyboard after pressing the key.

Parameter
name	type	description
e	Object	Event object

onmousedown

Triggered upon the end user's clicking the mouse.

Parameter
name	type	description
e	Object	Event object

onmousemove

Triggered upon moving of the mouse pointer.

Parameter
name	type	description
e	Object	Event object

onmouseout

Triggered upon the mouse focus moving out of a specified area or link.

Parameter
name	type	description
e	Object	Event object

onmouseover

Triggered upon the mouse moving into a specified area or link.

Parameter
name	type	description
e	Object	Event object

onmouseup

Triggered upon the end user's unclicking the mouse (after clicking).

Parameter
name	type	description
e	Object	Event object

onviewchange

Triggered when the value on the list is changed through keyboard input or mouse clicking.
In case the change was made by a script, the event will not be triggered. (Similar to the native onchange event.)

Parameter
name	type	description
info	JSON	Returns JSON data containing oldValue and newValue.

Sample

// The event is within the component tag. <script ev:event="onviewchange( info )"><![CDATA[ var oldValue = info.oldValue; var newValue = info.newValue; ]]></script>

Method Detail

commit( )

When the Secret is bound with the ref, reflects the displayed value to the ref.
Real-time return is not supported. Instead, the end user must use Enter or Tab.

Sample

scwin.secret1_onkeydown = function(e) { if((e.charCode || e.keyCode) === 13) { secret1.commit(); // Applies the current input in the Secret to dataMap1.key1. If omitted, the previous value before the input in the Secret will be returned as the value of key1. dataMap1.get("key1"); } }

getDataType( )

Returns the current value of the dataType. [default: text]

Return
type	description
String	dataType of the Secret

Sample

// Define a Secret component as shown below. <xf:secret id="secret1" style="position: relative;width: 144px;height: 21px;"></xf:secret> var returnValue = secret1.getDataType(); // (Return) "text"

getValue( )

Returns the current value of the component.

Return
type	description
String	Value of the component

Sample

// The user inputs WebSquare. var tmpRs = secret1.getValue(); // (Return) "WebSquare"

setDisabled( disabled )

Sets the disabled property.

Parameter
name	type	required	description
disabled	Boolean	Y	Disabled status

Sample

// Disable the component. componentId.setDisabled(true);

setStyle( propertyName , value )

Sets the style of the specified property.

Parameter
name	type	required	description
propertyName	String	Y	Name of the style
value	String	Y	Value of the style

Sample

// Set the component width as 200px. componentId.setStyle("width", "200px"); // Change the background color to olive. componentId.setStyle("background-color","olive");

setValue( value )

Sets the value of the component.

Parameter
name	type	required	description
value	String	Y	Value of the Secret

Sample

secret1.setValue("WebSquare");

show( displayType )

Displays the component.
The related CSS properties are display and visibility:show;.

Parameter
name	type	required	description
displayType	String	N	[default:block ,inline ,none ,""] Value of the Display property.

Sample

// Block the "display" property. componentId.show(); // Enable the "display" property in the class. componentId.show("");

trigger( type , array )

Triggers a certain event registered for the component.

Parameter
name	type	required	description
type	String	Y	Name of the event to trigger
array	Array	N	Array of parameters to send to the event handler

Sample

// Trigger onclick event in the Secret component. secret.trigger("onclick"); // Generate an onviewchange event, and send (1,2) to the handler function. secret.trigger("onviewchange", [1,2]);

validate( )

Validates the component according to the specified properties. (Related Property) displaymessage="true" (Validation-related Properties) mandatory minlength maxlength minByteLength maxByteLength

Return
type	description
Boolean	Validation result

Sample

// Set mandatory as “true”. <xf:secret id="secret1" mandatory="true"></xf:secret> var returnValue = secret1.validate(); // (Return - When there is no input.) "false" will be returned. // (Return - When there is input.) "true" will be returned. // In case displaymessage="true" is set and the validation fails, // internally defined message “Mandatory” will be displayed.