Changing RGB Color Code

When entering the color value, 6-digit alphabetic characters are sometimes entered, and 3 numbers are also specified. It is the same value, but it is just displayed differently depending on whether it is displayed in hexadecimal (HEX) or decimal numbers we normally use. In HTML, the HEX code is mainly used because it is convenient to input 6-digit alphabetic characters.

Example

Enter the hexadecimal code (HEX) and click the button to display the RGB value. Enter the RGB value and click the button to display the hexadecimal code. While displaying the value, change the Form background color to the color corresponding to the value.

sample_global_01.xfdl

Core features used in the example

parseInt: This is the method that returns the character string as the integer. You can specify the base as the second parameter. If specified in a way such as parstInt (hexadecimal, 16), then it returns the value converted to decimal.

How to implement an example

Configuring Form Screen

Place the Edit component where you can enter the value and the Button component that will process the conversion function.

In the example, the Edit component is not modified in the default state in which the id value is specified according to the order in which it is automatically created. However, in this case, it is difficult to clearly know which id value is which component when there are more components. Setting up and specifying naming conventions internally can help with the task.

Writing Button Component Event Function (fn_hexToDec)

The actual conversion is processed by the function called fn_hexToDec. It takes the input 6-digit alphabetic value, converts it to uppercase (toUpperCase), cuts it by 2 digits, and changes it to be expressed as the decimal number (parseInt). Specify the converted value as the value property value to be displayed in the Edit component.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.fn_hexToDec(this.Edit00.value);
};

this.fn_hexToDec = function(sHex)
{
	sHex = sHex.toUpperCase();
	var nRed   = parseInt(sHex.substring(0,2),16);
	var nGreen = parseInt(sHex.substring(2,4),16);
	var nBlue  = parseInt(sHex.substring(4),16);

	this.Edit01.set_value(nRed);
	this.Edit02.set_value(nGreen);
	this.Edit03.set_value(nBlue);

	this.set_background("#" + sHex);
}

Writing Button Component Event Function (fn_decToHex)

This time, display the value entered in decimal as the HEX value. Convert the inputted value to the number (toNumber) and convert it to hexadecimal (toString(16)). In this process, a single character may appear. If the string length is less than 2, then "0" is added in front of it.

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.fn_decToHex(this.Edit04.value, this.Edit05.value, this.Edit06.value); 
};

this.fn_decToHex = function(nRed, nGreen, nBlue)
{
	var sHexRed = nexacro.toNumber(nRed).toString(16);
	var sHexGreen = nexacro.toNumber(nGreen).toString(16);
	var sHexBlue = nexacro.toNumber(nBlue).toString(16);
	
	sHexRed = sHexRed.length<2?"0"+sHexRed:sHexRed;
	sHexGreen = sHexGreen.length<2?"0"+sHexGreen:sHexGreen;
	sHexBlue = sHexBlue.length<2?"0"+sHexBlue:sHexBlue;
	
	var sHex = sHexRed.toUpperCase() + sHexGreen.toUpperCase() + sHexBlue.toUpperCase();
    this.Edit07.set_value(sHex);
	this.set_background("#" + sHex);
}

Checking with QuickView

Run it with QuickView (Ctrl + F6) and check while entering values.

Since the range of values that can be entered is not limited, entering the value outside the range does not change the color of Form.

Converting URI

Sometimes, if you copy and paste a character string displayed in Korean, it will be converted to a strange character. For example, if you look for a Unicode item in Wikipedia, then you will see Unicode in Korean in the address bar, but if you copy the URL and paste it elsewhere, then it will look weird. These characters are called encoded URIs (Uniform Resource Identifiers).

Example

If you enter a string, it is converted to an encoded URI value, and if you enter an encoded URI value, it is converted to Korean.

sample_global_02.xfdl

Core features used in the example

encodeURI, decodeURI: Converts the character string to the encoded URI or the encoded URI to the character string.

How to implement an example

Configuring Form Screen

Place the Static component, Edit component, and Button component. The Static component is used to display text in front of the Edit component.

Writing onclick Event Function of Button Component

To convert the input string, call the encodeURI and decodeURI immediately and display the returned values in the Edit component.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Edit02.set_value(encodeURI(this.Edit00.value));
	try	{
		this.Edit03.set_value(decodeURI(this.Edit01.value));
	}	catch (e)	{
		this.Edit03.set_value(e.name+": "+e.message);
	}
};

If the value other than the encoded URI value is entered when executing the decodeURI method, it is processed as URIError.

Checking with QuickView

Run it with QuickView (Ctrl + F6) and click the button to check the converted text.

Converting Unicode

Converting to Unicode is used for operations or other conversions rather than for display to the user.

Example

When you enter the string, it is converted to Unicode and back to the string.

sample_global_03.xfdl

Core features used in the example

escape, decodeURI: Converts the character string to Unicode or the Unicode value to the character string.

How to implement an example

Configuring Form Screen

Place the Edit component and Button component. Convert the string entered in the first Edit component to Unicode in the second Edit component, and convert and display the converted Unicode value to the string in the third Edit component.

Writing onclick Event Function of Button Component

To convert the input string, call the encodeURI and decodeURI methods immediately and display the returned values in the Edit component.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Edit01.set_value(escape(this.Edit00.value));
	this.Edit02.set_value(unescape(this.Edit01.value));
};

Checking with QuickView

Run it with QuickView (Ctrl + F6) and click the button to check the converted text.

Finding & Executing Function

You can use the typeof method to see what format the child of the Form object is. In the example, we will take a look at finding the function and executing it.

Example

If you enter the function name, then it checks if there is the function with the corresponding name, and if so, then it executes the function.

sample_global_04.xfdl

Core features used in the example

typeof: Returns "number", "string", "boolean", "object", "function" values. If the value is not calculated, it returns "undefined".

How to implement an example

Configuring Form Screen

Place the Edit component and Button component.

Writing onclick Event Function of Button Component

Check whether the input string is a function, and if it is a function, then it is executed, otherwise, the type of the input string is returned.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var strfn = this.Edit00.value.toString();
	if(typeof(this[strfn])=='function')
	{
		this[strfn]();
	}
	else
	{
		this.Edit00.set_value(strfn+' is not Function. is '+typeof(this[strfn]));
	}
};

this.fn_test = function()
{
	this.Edit00.set_value(this.Edit00.value.toString()+' is Function');
}

When the Edit component is clicked, the output value is deleted.

this.Edit00_oneditclick = function(obj:nexacro.Edit,e:nexacro.EditClickEventInfo)
{
	this.Edit00.set_value();
};

Checking with QuickView

Run it with QuickView (Ctrl + F6), enter the function name, and click the button.