Creating Event Function

When the user performs certain actions, such as clicking the component with the mouse or moving the focus, or when the state of the component changes, the event occurs. By specifying the event function, you can process the desired action when the corresponding event occurs.

Creating onclick Event Function of Button Component in Property Window

1

Place the Button component on the design screen. Select the placed Button component and select the event icon in the property window. The event list of the component is displayed in the property window.

2

Enter the function name to the right of the onclick event item. If you double-click the blank without entering the function name, then the function name is automatically created as ["Component id"+"_"+"Event Name"].

3

You can check the generated event function by moving from the design screen to the script screen. The code below is generated.

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

4

Add the alert method that displays the alert dialog box in the event function. When the event to click the Button component occurs, the Button00_onclick event function is called, and the alert method is executed within the event function.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.alert("TEST");	
};

5

Save the changed content and select the [QuickView] item in the toolbar. The Button component is displayed on the screen as the Nexacro browser is executed. Clicking the Button component displays the alert dialog box.

Checking Text Entered in Edit Component

1

Place the Edit component on the design screen. Select the placed Edit component and select the event icon in the property window. Select the onchanged event from the event items and create the event function.

2

You can check the generated event function by moving from the design screen to the script screen. Add the following code in the event function code. When you enter the value in the Edit component and press Enter or move the focus to another component, the entered text is displayed in the Output window.

this.Edit00_onchanged = function(obj:nexacro.Edit,e:nexacro.ChangeEventInfo)
{
	trace(e.posttext);
};

When the event function is executed, 2 parameters are transmitted. The first parameter is the component where the event occurred, and the second parameter is the EventInfo object that contains information related to the event. You can check what information is contained in the EventInfo object in the help section. If you go to the onchanged event item in the help section, then you will find a link to the ChangeEventInfo object.

You can check the property information that can be used in the ChangeEventInfo object.

3

Save the changed content and select the [QuickView] item in the toolbar. The Edit component is displayed on the screen as the Nexacro browser is executed. Enter text in the Edit component and press the Enter key. You can check the entered text in the Output window of Nexacro Studio.

Using 1 Event Function in Multiple Components

1

Place 2 Button components on the design screen. Select one of the placed Button components and select the event icon in the property window. Select the onclick event among the event items and create the event function. Do not automatically generate the event function name, but specify it as "Button_onclick".

2

You can check the generated event function by moving from the design screen to the script screen. Write the event function as follows.

this.Button_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.alert(e.fromobject.id);
};

When the Button component is clicked, the id value of the component is displayed in the alert dialog box.

3

Select the Button component that was not previously selected, select the onclick event among the event items in the property window, and create the event function. Do not automatically generate the event function name, but specify it as "Button_onclick" as created in the previous step.

4

Save the changed content and select the [QuickView] item in the toolbar. 2 Button components are displayed on the screen as the Nexacro browser is executed. When you click the Button component, the id value of each Button component is displayed in the alert dialog box.

In the example, a simple example of displaying the id value when the Button component is clicked is shown, but in the actual code, you can check the id value of the Button component that the user clicked and perform other tasks.