WebSquare.uiplugin.secret

Functions same as type=password input of HTML. A lighter version of the InputBox.
Made of HTML input tag.

Type

uiplugin

Property Summary

class: Same as the class property in HTML standard. One or more classes defined in the CSS file or in the style block can be applied (through the use of the space as the separator).
disabled: [default:false, true] Disabled status of the component.
displaymessage: [default:false, true] Displays the result message upon a validation failure by the validation API.
id: Component ID
invalidMessage: A message displayed upon failure of the validation API. The displaymessage property must be true.
invalidMessageFunc: Name of the function that dynamically displays messages upon a validation failure by the validation 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: Hint for the end users. Functions same as the placeholder of HTML5.
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: The value of the DataCollection. Required to bind the component with a DataCollection. Starts with a prefix of "data:".
refSync: [default:false, true] Immediately reflects the key input on the Secret when the Secret is bound with the ref property.
tabIndex: The focusing order by the Tab key.
title: Same as the class property in HTML.
toolTip: Tooltip provided by WebSquare5. Displays additional information of the component.
userData1: User-defined property
userData2: User-defined property
userData3: User-defined property
validator: Runs the specified function upon blurring of the component.

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( ): [default:text] Returns the current value of the dataType.
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 standard. One or more classes defined in the CSS file or in the style block can be applied (through the use of the space as the separator).
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: [default:false, true] Displays the result message upon a validation failure by the validation API.
Displays the result message upon a validation failure by the validation API. Define a customized message using the invalidMessageFunc property.
id: Component ID
The component ID is allocated as a global object. The script can access each object through the component ID.
invalidMessage: A message displayed upon failure of the validation API. The displaymessage property must be true.
Cannot be used with invalidMessageFunc at the same time.
invalidMessageFunc: Name of the function that dynamically displays messages upon a validation failure by the validation API.
The displaymessage property must be true. Cannot be used with invalidMessage at the same time.
The customized function (in the following example) gets the type of the value through this.getType() and the value through this.getValue(), and returns the dynamically created message through the use of the type and the value.
type) mandatory, minLength, maxLength, minByteLength, maxByteLength]
(Example) function fn_msg(){ var tmpType = this.getType(); var tmpValue = this.getValue(); if(tmpType == "mandatory"){ return "Required."; } }
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: Hint for the end users. Functions same as the placeholder of HTML5.
The operation method depends on the browser. (For examples, in case of IE, the hint will disappear upon being focused. However, on Chrome, the hint disappears upon Text input.)
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: The value of the DataCollection. Required to bind the component with a DataCollection. Starts with a prefix of "data:".
(Format: data: [DataCollection ID].[Key id or Column id]) (Example) data:dataMap1.pwd
When bound with a DataList, the row selected on the GridView will be bound.
Specify the XPath of the XML data to interface with the instance data. (Example) res/userInfo/pwd
refSync: [default:false, true] Immediately reflects the key input on the Secret when the Secret is bound with the ref property.
When the Secret is bound with the DataMap through the ref property, executing dataMap1.get("key1") in the onkeydown event will return the data input in the Secret.
Restriction) Real-time application is not supported. Instead, the end user must use the Enter or Tab key and commit() API must be called. (ex) secret1.commit() )
(Version: Added in 5.0_2.2777B.20170904.121217.)
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: Tooltip provided by WebSquare5. Displays additional information of the component. Displayed upon mouse-over.
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: Runs the specified function upon blurring of the component.
Validates the input.te upon blurring of the component. Triggered before the onblur event.
(Example) function fn_idValid(tmpVal){ // tmpVal contains the component value. Return the final value after the logic. return tmpVal;};

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.

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( )

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

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 Example) "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. True to disable, or false not to disable.

Parameter
name	type	required	description
disabled	Boolean	Y	True to disable, or false not to disable.

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 Properties : mandatory, minLength, maxLength, minByteLength, maxByteLength

Return
type	description
Boolean	Validation result

Sample

// Enable mandatory as shown below. <xf:secret id="secret1" style="position: relative;width: 144px;height: 21px;" mandatory="true"></xf:secret> var returnValue = secret1.validate(); // (Return - without input) false // (Return - with input) true If displaymessage is true, an alert will be displayed upon a validation failure. //// (Alert Example) This field is mandatory.