Introducing Button

Button is the component for performing the operation set in advance by the user clicking the button with the mouse. The user can intuitively know what will happen when the button is clicked. Operations are written with scripts and performed through the event function of the button.

Example

The following is the login screen of Twitter, one of the representative SNS (Social Network Service). There are a login button and a sign-up button at the bottom of the edit window for entering user account information.

If you click the login button, the user will be authenticated with the account entered in the edit window, and if you click the sign-up button, a menu where you can enter user information appears.

Creating Button

Select Button from the toolbar, and drag it to an appropriate size on Form to create it. If you just click on the form, then it will be created with the default size.

Run it with QuickView (Ctrl + F6) to check the result.

Button changes its state according to the mouse movement of the user. However, since the event handler is not written, it does not perform any operation.

Putting Icon on Button

You can insert an image into the button in the form of an icon to decorate the button.

Example

The following is an example of the button with an image inserted. The icon image is located and the button text area exists next to it. When the button is pressed, the button and the event information are displayed as a pop-up.

sample_button_02.xfdl

Core features used in the example

icon

This is the property that sets the path of the icon image to be displayed with the text on the button.

How to implement an example

Select Button from the toolbar and place it on Form as shown in the example screen.

Select the button and set the icon property in the Properties window.

Set the id of the OK button to btn_ok and add the onclick event handler.

• onclick Event Handler of OK Button

The event type and button name are displayed in the pop-up.

this.btn_ok_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{	
	var strMsg = "[" +e.eventid + " event] " + this.btn_ok.text + " button clicked.";
	
	alert(strMsg);
};

Run it with QuickView (Ctrl + F6) to check the result. The icon image is displayed on the OK button, and when the button is pressed, the event and button information is displayed in the pop-up.

Creating Image Button

To decorate the Button component, properties such as background color or border are used. If these style properties are not enough, then the image itself is used like a button. In Nexacro, you can implement the image button by specifying the desired image in ImageViewer, the click event, and necessary properties, or by specifying the background image of the Button component. In this example, we will take a look at how to implement the image button by specifying the background image.

Example

Place 3 buttons. The first and the third buttons are normal Button components, and the middle button has the background property applied. When the first and the third buttons are clicked, the image set in the middle image button is changed.

sample_button_03.xfdl

Core features used in the example

background

Specifies the background color or background image. When specifying the background color, the sub-properties differ depending on whether to apply the color gradient or a single color. In the example, the background image file was specified and the default values of other properties were applied. In Nexacro Studio, you can select the file you want in the explorer, but in the script, you need to specify the property value as follows.

this.btnImage.set_background('url("imagerc::like50.png")');

How to implement an example

Place the Button component as shown in the example screen. All buttons that look the same as the background property value have not been specified yet. For the button size, specify the width, height values to 50.

Select the middle button and set the background property value. Add the required image file with ImageResource.

For the background property, sub-properties can be specified. Click the "+" button in front of the background property name to open the sub-properties. Specify the imageurl property value among them. Open the file explorer and select the desired image file.

If you use the default theme, then the border property value is specified for the Button component. If you are specifying it as the image button, then specify the corresponding property value to "0px none" as the border should be invisible. Then, specify the text property value to an empty value as well.

Select the Button component and write the onclick event function. Specify the image file set to each button as the background property value.

this.btnLike_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.btnImage.set_background('url("imagerc::like50.png")');
};

this.btnAngry_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.btnImage.set_background('url("imagerc::angry50.png")');
};

Run it with QuickView (Ctrl + F6), click the button, and change the image to check it.

Changing Icon Location in Button

Adding the icon to the Button component makes the purpose of the button a bit clearer. In general, the icon is placed first, followed by the text, and you can adjust the location of the icon as needed. Let us take a look at how to change the location of the icon in this case.

Example

Place a square button and modify the iconposition, textpadding property values to see how it is applied. If you click the button after modifying the value, then the icon location will change.

sample_button_04.xfdl

Core features used in the example

iconPosition (-nexa-icon-position)

Specifies in which direction to place the set icon image. When there is no specified value, the default property value is applied. Since only one icon can be specified, if you want to place the icon on both sides, then you can use the background property to process it as an image.

textPadding (-nexa-text-padding)

Specifies the margin around the text element within the Button component. In the figure below, when the textpadding property values of the top, right, bottom directions are specified, the area marked in green is the specified margin area. The location of the text element changes as the area changes.

How to implement an example

Place the Button component and the Edit, Static components as shown in the example screen. Adjust the icon location of the Button component, and modify the width, height values in a square shape for the Button component to check it.

Specify an appropriate image file for the icon property value. Reuse the image used in the Putting Icon on Button example for this example.

The Edit component that inputs the textpadding property value should be able to input only numbers. In this case, you can use the Spin component, but in this example, we will use the Edit component. First, set the value property value of the Edit component to 0 and the inputtype property value to "number". In Nexacro Studio, you can select one or more items you want in the inputtype property value list.

By specifying the value of the inputtype property, you can restrict the input of values other than numbers, but clearing the value cannot be prevented. If the user clears the value, then add the onchanged event to assign a different value. Within the event function, the component that processes the event is not directly specified, but receives and processes the variable called obj transmitted as the event function parameter. For example, if the onchanged event occurs in the Edit component that specifies the textpadding top property value, the obj variable points to the corresponding Edit component.

Check whether the value property value of the Edit component is a number in the event function, and if it is not, then specify the value of 0.

this.editTextPadding_onchanged = function(obj:nexacro.Edit,e:nexacro.ChangeEventInfo)
{
	if(!nexacro.isNumeric(obj.value))
	{
		obj.set_value(0);
	}
};

In this example, instead of creating the button that executes the command, use the button to change the icon location as the execution button. When the button is clicked, the function below is executed and the input value is applied.

this.btnIcon_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	obj.set_iconPosition(this.editIconPosition.value);
	obj.set_textPadding(this.editTextPaddingTop.value+"px " 
		+this.editTextPaddingRight.value+"px "
		+this.editTextPaddingBottom.value+"px " 
		+this.editTextPaddingLeft.value+"px");
};

Run it with QuickView (Ctrl + F6), enter the value, and click the button to check the location of the icon and text.

Checking Properties, Methods, & Events of Component

If you want to check not only the Button component, but also the properties, methods, and event information belonging to other components or objects, you can use the for in iteration statement.

Example

When the button is clicked, information related to the Button component and the ClickEventInfo object is displayed in the TextArea component.

sample_button_05.xfdl

Core features used in the example

for in

Able to check all the properties of a specific object with the iteration statement. Since it may be slower than using the for statement as-is, it is recommended to use this only for specific purposes.

How to implement an example

Place the Button component and the TextArea component as shown in the example screen.

Check all properties belonging to the Button component (obj) and ClickEventInfo object (e) transmitted when the Button is clicked, and display it as the value property value of the TextArea component.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.TextArea00.set_value(this.checkList(obj));
	this.TextArea01.set_value(this.checkList(e));
};

The checkList function receives the object to process the for in iteration statement. Since the for in iteration statement displays all the properties that are not visible, the properties starting with "_" are excluded. Also, since the property value containing "function" exposes all the code of the corresponding function, display the string "function()" instead of the property value.

this.checkList = function(obj)
{
	var strReturn = "";
	for(var x in obj)
	{
		if(x.substring(0,1)!="_")
		{
			if(obj[x]!=null && obj[x].toString().indexOf("function")>-1)	{
				strReturn += x+": "+"function()"+"\n";
			}	else	{
				strReturn += x+": "+obj[x]+"\n";
			}
		}
	}
	return strReturn;
}

Run it with QuickView (Ctrl + F6), enter the value, and click the button to check the location of the icon and text.

Distinguishing onclick Event Occurring from Keyboard Input

If the Button component has focus, the onclick event occurs when the ENTER key or the SPACE key is entered. If you want to process the event only when the mouse is clicked, then you can check the button property value of the ClickEventInfo object.

Example

Display "SPACE OR ENTER KEY" when entering the ENTER, SPACE keys, and display "CLICK" when the mouse button is clicked.

sample_button_06.xfdl

Core features used in the example

button

Returns the "none" value if it is not the mouse button or touch action.

How to implement an example

If it is not the mouse button click, then the button property value of the ClickEventInfo object returns the "none" value.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Static00.set_text('SPACE OR ENTER KEY');
	if(e.button!='none')
	{
		this.Static00.set_text('CLICK');
	}
};

Processing onclick Event for Specific Key Input

On the Google website, if you press the ENTER key immediately without moving the focus to Button after entering the keyword in the search window, then the search is processed. Let us take a look at how to process the specific key input as if the button was clicked like this.

Example

When the ENTER, ESC, CTRL+H keys are pressed while the focus is on the Edit component, the onclick event is processed.

sample_button_07.xfdl

Core features used in the example

defaultbutton

If set to true, then the onclick event occurs when the ENTER key is pressed. When using the component that uses line breaks like the TextArea component, the onclick event of the Button component occurs before the line break action when the ENTER key is pressed.

escapebutton

If set to true, then the onclick event occurs when the ESC key is pressed.

hotkey

When the desired key combination is selected and the corresponding key is pressed, the onclick event occurs. You can use CTRL, ALT, SHIFT, and other keys in combination.

How to implement an example

When the onclick event occurs, fill in the character string in the Edit component.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Edit00.set_value('KEY PRESS CHECK');
};

Creating Simple Toggle Button

It can display the pressed state like a physical switch when the button is clicked.

Example

When the Button component is clicked, a different style is applied by changing the state value.

sample_button_08.xfdl

Core features used in the example

getSelectStatus, setSelectStatus

The getSelectStatus method can be used to check whether the Status of the Button component is Selected, and the setSelectStatus method can be used to set the Selected Status of the Button component.

toggleSelectStatus

When Status of the Button component is Selected, disable the status, and when it is not Selected, set it to Selected Status.

How to implement an example

Check the status with the getSelectStatus method, and transmit the value processed by NOT operation on the returned value to the setSelectStatus method.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	obj.setSelectStatus(!obj.getSelectStatus());
};

The toggleSelectStatus method is the method that processes the contents written in the onclick event function of the first Button component. Two scripts were written for comparison.

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	obj.toggleSelectStatus();
};

The default theme also expresses the button background color slightly differently. By adding it there, display the icon image differently when it is Selected Status and not Selected.

.Button.sample_button_08
{
	-nexa-icon : url('theme://images/chk_WF_Box_O.png');
	-nexa-text-padding : 3px;	
}


.Button.sample_button_08[userstatus=selected]
{
	-nexa-icon : url('theme://images/chk_WF_Box_F.png');	
	-nexa-text-padding : 3px;
}