- addClass(
className
)
-
Adds a class to the component.
Parameter
| className | String | Y | Name of the class to add |
Sample
<![CDATA[// Add oddClass to component input1.
input1.addClass("oddClass");]]>
- bind(
eventType
,
function
)
-
Dynamically allocates events to the component.
Parameter
| eventType | String | Y | Name of the event to allocate. |
| function | Function | Y | Handler function of the event to allocate. |
Sample
<![CDATA[// Define the event handler function for the onclick event in the input component, and bind the function.
input1.bind("onclick", function(e){ alert(input1.getValue();}));
// Bind commObj.ev_click function for the onclick event with component input1.
var commObj = {};
commObj.ev_click = function(e){
alert("click :: "+this.id);
};
input1.bind("onclick", commObj.ev_click );]]>
- changeClass(
oldClassName
,
newClassName
)
-
Renames the class from oldClassName to newClassName.
In the default setting, only the classes added by addClass will be applied. In order to directly remove the class defined in the "class" property of the component, add the following setting in config.xml file.
<style><removeDefaultClass value="true" /></style>
Parameter
| oldClassName | String | Y | Name of the class to remove |
| newClassName | String | Y | Name of the class to add |
Sample
<![CDATA[// Define a class for the Input component.
<xf:input id="input1" style="position: relative;width: 144px;height: 21px;" class="tmpInputClass"></xf:input>
// Add the following to config.xml.
<style>
<removeDefaultClass value="true" />
</style>
// Change tmpInputClass class to tmpInputWarninClass.
input1.changeClass("tmpInputClass","tmpInputWarninClass");]]>
- focus(
)
-
Moves the focus to the component.
- getDisabled(
)
-
Gets the current value of the disabled property.
Return
| Boolean | The value of the disabled property. |
Sample
<![CDATA[var returnValue = componentId.getDisabled();
(Return example) false]]>
- getGenerator(
)
-
Called by a component under the Generator component. When called, gets the parent Generator object.
Return
| Object | Parent Generator object |
Sample
<![CDATA[ <w2:generator id="generator1"> <w2:trigger id="trigger1" ev:onclick="scwin.trigger1_onclick"></w2:trigger></w2:generator>
scwin.trigger1.onclick = function(){ console.log(this.getGenerator());}
// Click trigger1 to display the generator1 object on the console.
// See https://inswave.com/jira/browse/WPF-1425.]]>
- getID(
)
-
Gets the ID of the component.
Return
| String | ID of the WebSquare5 component |
Sample
<![CDATA[// The WebSquare5 component dynamically received as a parameter can be used as shown in the following.
function fn_validCheck(tmpObj){
// tmpObj has an ID of "input1".
var compID = tmpObj.getID();
// (Return Example) "input1"
}]]>
- getMaxValue(
)
-
Returns the maximum value of the gauge component.
Return
| Number | Maximum value of the guage |
- getMinValue(
)
-
Returns the minimum value of the gauge component.
Return
| Number | Minimum value of the gauge |
- getOpacity(
)
-
Gets the opacity of the component defined in CSS.
Sample
<![CDATA[// Apply opacity CSS to the Input component.
<xf:input id="input1" style="position: relative;width: 144px;height: 21px;opacity:0.2;"></xf:input>
var returnValue = input1.getOpacity(); // "returnValue" is a real number between 0 and 1.
// (Return Value) "0.2"]]>
- getPluginName(
)
-
Gets the pluginName (or the name) of the component.
Return
| String | pluginName of the WebSquare5 component |
Sample
<![CDATA[// For a WebSquare5 object dynamically received by a common function, conditional statements can be used as shown below.
var commObj = {};
commObj.fn_makeReqData = function(tmpObj){
var tmpID = tmpObj.getID(); // Component ID
var tmpCompType = tmpObj.getPluginName(); // Component Type
if(tmpCompType == "input"){
//..Logic..
}else if(tmpCompType == "gridView"){
//..Logic ..
}else{
//..Logic..
}
};]]>
- getPosition(
positionName
)
-
Gets the left or top position of the component. If set by %, the corresponding pixel value will be returned.
Parameter
| positionName | String | Y | [left,top] Type of the position |
Return
| Number | Position of the component |
Sample
<![CDATA[// Apply margin CSS to the Input component.
<xf:input id="input1" style="position: relative;width: 144px;height: 21px;margin:10px;"></xf:input>
var returnValue = input1.getPosition("top"); // The returnValue will be a position in pixels.
// (Return Example) 10]]>
- getReadOnly(
)
-
Gets the current setting of the readOnly property.
Return
| Boolean | The current setting of the readOnly property |
Sample
<![CDATA[var returnValue = componentId.getReadOnly();
// (Return Example) false]]>
- getSize(
sizeName
)
-
Gets the size of the component. If set by "%", the corresponding pixel value will be returned.
Parameter
| sizeName | String | Y | [height, innerHeight, outerHeight, outerMarginHeight, width, innerWidth, outerWidth, outerMarginWidth] Type of the size. For the calculation of each size type, see below.
<![CDATA[height : element.clientHeight
innerHeight : element.clientHeight + padding
outerHeight : element.clientHeight + padding + border
outerMarginHeight : element.clientHeight + padding + border + margin
width : element.clientWidth
innerWidth : element.clientWidth + padding
outerWidth : element.clientWidth + padding + border
outerMarginWidth : element.clientWidth + padding + border + margin]]> |
Return
| Number | Size of the component |
Sample
<![CDATA[var returnValue = componentId.getSize("width"); // "returnValue" will be a size in pixels. If set by "%", the corresponding pixel value will be returned.
// (Return Example) 100]]>
- getStyle(
propertyName
)
-
Gets the current value of the propertyName of the component defined in CSS.
Parameter
| propertyName | String | Y | Name of the property in the style |
Sample
<![CDATA[// Define an Input component.
<xf:input id="input1" style="position: relative;width: 144px;height: 21px;"></xf:input>
var returnValue = input1.getStyle("width");
// (Return Example) "144px"]]>
- getStyleValue(
style
)
-
[deprecated] Use getStyle instead.
Gets the current value of the propertyName of the component defined in CSS.
Parameter
| style | String | Y | Name of the property defined in the style |
Return
| String | Value defined in the style property. (In case of a color, the hexcode of the color will be returned.) |
- getTitle(
)
-
Gets the title value.
Sample
<![CDATA[// Define the "title" for the Input component.
<xf:input id="input1" style="position: relative;width: 144px;height: 21px;" title="이름 입력"></xf:input>
var tmpTitle = input1.getTitle();
// (Return Example ) "Input Name"]]>
- getUserData(
key
)
-
Returns the user-defined property value set by setUserData as the user data or source (page XML).
Parameter
| key | String | Y | Random data key |
Return
| String | Data of the corresponding key |
Sample
<![CDATA[// Apply the customized property (eduTest) to the Input component.
<xf:input id="input1" style="position: relative;width: 144px;height: 21px;" eduTest="Hello"></xf:input>
input1.getUserData("eduTest");
// (Return Example) "Hello"
// Use setUserData.
input1.setUserData("eduTest","WebSquare");
input1.getUserData("WebSquare");
// (Return Example) "Hello"]]>
- getValue(
)
-
Returns the current value of the gauge component.
Return
| Number | Current value |
- hasClass(
className
)
-
Checks whether the component has className received as a parameter or not.
Parameter
| className | String | Y | className to check |
Return
| Boolean | Whether the component has the class or not |
Sample
<![CDATA[// Define a class for the Input component.
<xf:input id="input1" style="position: relative;width: 144px;height: 21px;" class="tmpInputClass"></xf:input>
var returnValue = input1.hasClass("tmpInputClass");
// (Return Example) true]]>
- hide(
)
-
Hides the component.
he CSS setting will be "display:none;" and "visibility:hidden;".
Sample
<![CDATA[
componentId.hide();]]>
- removeClass(
className
)
-
Removes className from the component.
In the default setting, only the classes added by addClass will be applied. In order to directly remove the class defined in the "class" property of the component, add the following setting in config.xml file.
<style><removeDefaultClass value="true" /></style>
Parameter
| className | String | Y | Name of the class to remove |
Sample
<![CDATA[// Define a class for the Input component.
<xf:input id="input1" style="position: relative;width: 144px;height: 21px;" class="tmpInputClass"></xf:input>
// Add the following to config.xml.
<style>
<removeDefaultClass value="true" />
</style>
// Remove tmpInputClass class.
input1.removeClass("tmpInputClass");]]>
- setDisabled(
disabled
)
-
Sets the disabled property. True to disable, or false not to disable.
Parameter
| disabled | Boolean | Y | True to disable, or false not to disable. |
Sample
<![CDATA[// Disable the component.
componentId.setDisabled(true);]]>
- setEventPause(
evList
,
flag
)
-
Disables or enables the component event.
Parameter
| evList | String | N | List of the events. If not specified, all user events of the component will be listed. (Enter null data.) |
| flag | Boolean | Y | true is to pause, or false is to cancel pausing. |
Sample
<![CDATA[input1.setEventPause("onclick", true); // Dynamically pauses the onclick event.
input1.setEventPause("onfocus,onblur", false); // Restarts the onfocus and the onblur events.
input1.setEventPause(null, true); // Pauses all user events registered for the Input component.]]>
- setOpacity(
value
)
-
Sets the opacity of the component.
Parameter
| value | Number | Y | Opacity value (A real number between 0 and 1) |
Sample
<![CDATA[
componentId.setOpacity(0.45);]]>
- setPosition(
left
,
top
,
mode
)
-
Sets the position (left, top) of the component.
Parameter
| left | Number | Y | Left position or null. |
| top | Number | Y | Top position or null. |
| mode | String | N | [defulat:absolute, delta] absolute sets the current positions as x and y, and delta adds x and y to the current positions. |
Sample
<![CDATA[// Set the top position of the component as 100 pixels.
componentId.setPosition(null, 100);]]>
- setReadOnly(
readOnly
)
-
Controls the "readOnly" property. True to enable, or false to disable.
Parameter
| readOnly | Boolean | Y | True to enable, or false to disable. |
Sample
<![CDATA[// Enable the read-only.
componentId.setReadOnly(true);]]>
- setRef(
ref
)
-
Dynamically sets the ref binding.
Parameter
| ref | String | Y | XPath of the new ref |
- setSize(
width
,
heigth
)
-
Sets the size (width, height) of the component.
Parameter
| width | Number | Y | Component width or null |
| heigth | Number | Y | Component height or null |
Sample
<![CDATA[// Set the component height as 100 pixels.
componentId.setSize(null,100);]]>
- setStyle(
propertyName
,
value
)
-
Sets the style of the specified property.
Parameter
| propertyName | String | Y | Name of the style |
| value | String | Y | Value of the style |
Sample
<![CDATA[// Set the component width as 200px.
componentId.setStyle("width", "200px");
// Change the background color to olive.
componentId.setStyle("background-color","olive");]]>
- setUserData(
key
,
value
)
-
Sets the user data in the component. If the key cannot be set for the component, corresponding logs will be displayed.
Parameter
| key | String | Y | Random data key |
| value | String | Y | Random data key |
Sample
<![CDATA[// Setting a (key, value) pair of ("data", "WebSquare5") in the component.
componentId.setUserData("data", "WebSquare");
// Some keys cannot be set for the component.
componentId.setUserData("title", "WebSquare");
// (Log Example) !!!WARNING - [title] can't define as UserData]]>
- setValue(
value
)
-
Sets the received value in the gauge.
Parameter
| value | Number | Y | Value to set in the gauge |
- show(
displayType
)
-
Displays the component.
The related CSS properties are display and visibility:show;.
Parameter
| displayType | String | N | [default:block ,inline ,none ,""] Value of the Display property. |
Sample
<![CDATA[// Block the "display" property.
componentId.show();
// Enable the "display" property in the class.
componentId.show("");]]>
- toggleClass(
className
)
-
Removes a class named className, or if there is no such a class, adds a class named className.
In the default setting, only the classes added by addClass can be removed. To remove other classes, add the following setting in config.xml.
<style><removeDefaultClass value="true" /></style>
Parameter
| className | String | Y | className to set |
Sample
<![CDATA[// Define a class for the Input component.
<xf:input id="input1" style="position: relative;width: 144px;height: 21px;" class="tmpInputClass"></xf:input>
// Add the following to config.xml.
<style>
<removeDefaultClass value="true" />
</style>
// Remove tmpInputClass class.
input1.toggleClass("tmpInputClass");
// Add tmpInputClass class again.
input1.toggleClass("tmpInputClass");]]>
- trigger(
type
,
array
)
-
Triggers a certain event registered for the component.
Parameter
| type | String | Y | Name of the event to trigger |
| array | Array | N | Array of parameters to send to the event handler |
Sample
<![CDATA[// Trigger the onclick event in the input1 component.
input1.trigger("onclick");
// Trigger the onviewchange event in the input component and call the event handler function by sending arguments of (1, 2).
input1.trigger("onviewchange", [1,2]);]]>
- unbind(
type
,
function
)
-
Removes an event registered for the component.
Parameter
| type | String | N | Name of the event to remove. If not specified, all events of the components will be removed. |
| function | Function | N | Handler function of the event to remove. If not specified, all handler functions of the event will be removed. |
Sample
<![CDATA[// Remove all events registered in the input component.
input1.unbind();
// Remove all handler functions of onviewchange event registered in the input component.
input1.unbind("onviewchange");
// Remove the func1 event handler of onviewchange event registered for component input1.
input1.unbind("onviewchange", func1);]]>
- unbindRef(
)
-
Releases the ref binding.
- visible(
flag
)
-
[deprecated] Shows/Hides the component, or sets the visible property using setStyle.
Sets the visibility of the component style. In case of true, set visible. In case of false, set hidden.
Parameter
| flag | Boolean | Y | Visibility (In case of true, set visible. In case of false, set hidden.) |