Introducing Form

Form is the most basic unit that configures the screen in Nexacro. It can independently configure the screen, or it can be used as the content of other components such as Div, PopupDiv, Tab components. To place the screen in Nexacro Studio, you must first create Form and place the component on it.

Example

It is difficult to explain with an example because Form is not a part that is directly visible on the screen, but is used to place components and process-related events. It is as if the air is invisible.

Creating Form

It can be created dynamically from the scrip, but in general, Form is created from the Nexacro Studio menu.

Specify the Form name and service. If the project size is large, then the service is classified according to the task, so select the appropriate service. The service can be changed after creating Form.

After creating Form, open the created Form in Nexacro Studio. The opened Form provides 3 edit modes.

In the [Design] mode, you can place or select the component and specify the property value. The modified property value is immediately reflected and can be checked on the [Design] mode screen.

In the [Source] mode, the created code value is displayed in the XML file format. You can check the screen layout order, component properties, and registered events. The code can be modified directly, but there is no need to do so as the value modified in the [Design] mode or property window is automatically reflected.

In the [Script] mode, the user can create functions or edit event functions.

Changing Layout According to Screen Size

When mobile devices first came out, they displayed the screens viewed on desktops as-is. There weren't many users and it was thought that there was no problem in using it to zoom in on the desired part, even on small screens. However, with the increasing number of mobile device users, users started to want screens that are optimized for small screens. In response to such demands, the term "mobile first" came out as well.

In Nexacro, screen information can be processed according to devices, and layout information can be used according to screen sizes. In this example, we will look at how the layout can be changed according to the screen size.

Example

Use the open method when the button is clicked to open the same Form in a new window. You can see that the placement of the buttons changes when the screen size is reduced by holding and moving the corner of the window with the mouse. If you resize the screen again, then the layout of the buttons changes.

sample_form_01.xfdl

Core features used in the example

Layout

This is the object that is saved under the Form object. It can be specified in Nexacro Studio and cannot be created or changed with the script. When Form is created, the default layout is automatically created. The name property of the default layout cannot be changed.

onlayoutchanged

This is the event that occurs when the layout changes due to changes in screen size, etc. You can check the previous layout information and the changed layout information.

How to implement an example

Place the Button component as shown in the example screen. When creating Form, for convenience of resizing the screen, set the width, height property values to 600, 600. Place the Static component on the Button component to display related information when the layout changes.

Layout can be specified when creating Form and can be added after creating Form. In this example, we will add it after creating Form. In the [Design] mode screen, right-click in the area below the window title and select the [Add Layout] item from the context menu.

When you click the [Add Layout] item, the [New Layout] window is displayed where you can enter layout information. In the example, enter only the width, height values.

When you enter the item, the layout is added, and the added layout tab is created at the top of the [Design] mode screen.

Select the added layout and modify the placement of the button component as follows. When you select the layout, the size of Form displayed in the [Design] mode changes according to the width, height setting values of the layout.

You can adjust the size of the running web browser, but for convenience, open the window with the same Form using the open method. Check the layout change function by adjusting the size of the open window.

this.btnOpen_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	nexacro.open("TEST", "Sample::sample_form_01.xfdl", this.getOwnerFrame());
};

When the layout is changed, related information is displayed on the Static component.

this.Form_onlayoutchanged = function(obj:nexacro.Form,e:nexacro.LayoutChangeEventInfo)
{
	this.staticLayoutInfo.set_text(e.oldlayout + "->" + e.newlayout + " (" + this.width + "x" + this.height + ")");
};

Run it with QuickView (Ctrl + F6) and click the [OPEN] button to open a new window. Check if the placement of buttons changes by changing the size of the new window.

Dividing Screen into Steps

If it is the screen with a simple layout, then a problem related to the screen size can be solved by placing the horizontally placed components vertically, but if it is a complex input screen, then it may not be sufficient enough. In this case, you can divide the screen into steps. The items that the user enters are the same, but they are configured so that they can be entered step by step while turning the screen.

In Nexacro Studio, if the stepcount property value of the Form object is set to 2 or more, the Form width is increased by the specified value. For example, if the width property value of the Form object is set to 200 and the stepcount property value is set to 3, then the width as much as 600 is displayed. Also, every 200 pixels is marked with a blue dotted line. Although the actual screen width is 200, it can show 600 contents because it turns the screen by step unit.

Example

Select stepselector at the bottom of the screen to move to the selected screen. Click the [Go STEP3] button on the first screen to move to the third screen.

sample_form_02.xfdl

Core features used in the example

stepcount

The screen is divided and displayed as much as the value specified in the property value. In the Nexacro Studio property window, the Form object is selected and modified, but when accessing the script, the stepselector object is used.

positionstep

This is the property that sets which screen the component will be displayed on when the screen is divided by specifying the stepcount property value in the Form object. In the Nexacro Studio [Design] mode, the property value is modified with the index value of the area where the component is placed. The index value starts from 0.

setStepIndex

This is the method that is used to move to the screen of a specific index. Since the index value starts from 0, set the value to 2 if you want to go to the third screen.

How to implement an example

Create Form and set the width, height property values to 200, 300. Then, set the stepcount property value to 3. As the screen is divided into 3, the area as large as the size of the first Form is created as many as the number specified in the stepcount property value.

Place the Button component. The positionstep property value varies depending on the area where the component is placed. If the component is not clearly placed in a specific area but overlies, then the area where the front part overlies is specified as the positionstep property value.

After execution, you can use stepselector to move the screen, but write the event function that moves the method to the specified index screen when the [Go STEP3] button is clicked. For example, if you are filling out a membership registration form and skipping additional entries, then you can go directly to the submit page.

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

Run it with QuickView (Ctrl + F6) and use stepselector or click the [Go STEP3] button.

Moving Screen

To move the screen (moving Form), you can change the formurl property of the ChildFrame object or change the url property value of the container component. However, if you do not know what the parent object of Form will be, then you can use the go method of the Form object. In this example, we will use the go method to move the screen.

Example

If you click the button on the screen, then it moves to another Form screen. When the go method is used, the visible screen is moved, but the formurl property of the ChildFrame object is not changed. Click the [Check formurl] button on the moved screen to check the formurl property value (or the url property value of the container component).

sample_form_03.xfdl

Core features used in the example

go

This is the method that displays the specified Form on the screen.

hasOwnProperty

This is the method that checks if the object has a specific property. In the example, it checks whether it has the formurl property value to check whether the object corresponding to the parent property value is ChildFrame or the container component such as Div. The formurl property value is the property that only the ChildFrame object has.

How to implement an example

Place one button on the first Form and place 2 buttons and 2 Edit components on the second Form.

When the Button component is clicked, it moves to the specified screen.

this.btnGo_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.go("Sample::sample_form_03_sub.xfdl");
};

In the second Form, 2 Button components are placed. When the [Go TEST (SUB)] Button component is clicked, it moves to the specified screen, and when the [Check formurl] Button component is clicked, it shows the formurl property value (or the url property value of the container component) of the ChildFrame object.

this.btnCheck_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	if(this.parent.hasOwnProperty("formurl"))
	{
		this.Edit00.set_value(this.parent.formurl);
	} else {
		this.Edit00.set_value(this.parent.url);
	}
};

Run it with QuickView (Ctrl + F6) and click the button to check if the screen moves.

Accessing Object

Components or objects created in the Form object can be accessed by specifying the id. However, you may need to specify properties for the entire element, rather than a specific component.

Example

The [Count] button checks the length values of the components, objects, all properties of the screen with two Button components and two Dataset components. When the [Add Button] button is clicked, an additional Button object is created. Although it is not visible on the screen, if you click the [Count] button, then you can check that the Button object has been added. Lastly, when you click the [Hide Button] button, all buttons except for the corresponding button disappear from the screen.

sample_form_04.xfdl

Core features used in the example

components, objects, all

Provides a list of components and objects in the Collection format. As shown in the figure below, you can check the actual format provided in the debugging state. For the all property, it is displayed in the order of objects, components.

For example, if the btnAddbutton component has the highest priority among Button components, then the component can be used as follows.

this.btnAddbutton;
this.all[2];

How to implement an example

Place the Button component as shown in the example screen. Add two Dataset objects as well. Because it is used to check how to process the Dataset object, a separate column value is not specified. Place the TextArea component to display information at the bottom of the Button component.

When the [Count] button is clicked, the components, objects, all property information is displayed.

this.btnCount_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.TextArea00.set_value("components.length: "+this.components.length+"\n"
		+"objects.length: "+this.objects.length+"\n"
		+"all.length: "+this.all.length);
};

When the [Add Button] button is clicked, Button is created in the script and added to the Form object. Create an arbitrary variable so that you can add it multiple times and keep changing the id value you specify in the addChild method.

var i=0;
this.btnAddbutton_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var btnobj = new Button();
	this.addChild("btn"+i, btnobj);
	i++;
};

When the [Hide Button] button is clicked, the other buttons except for the corresponding button are not displayed on the screen. Click the button again and it will be displayed on the screen.

this.btnHide_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var tempobj;
	for(var j=0;j<this.components.length;j++)
	{
		tempobj = this.components[j];
		if(tempobj.visible == true && tempobj != obj)	{
			tempobj.set_visible(false);
		} else {
			tempobj.set_visible(true);
		}
	}

	if(obj.text == "Hide Button")
	{
		obj.set_text("Show Button");
	} else {
		obj.set_text("Hide Button");
	}
};

Run it with QuickView (Ctrl + F6) and click the button to check the property of the object.

Moving Component with Enter Key

When moving the component in the web browser the Tab key is used. However, in some cases, you can use the Enter key. You can check the event of each component and specify the operation when the enter key is pressed, but you can also process the event in the Form object. Events occurring in each component are transmitted to the parent component. This is an example of utilizing this.

Example

Two Edit components move the focus to the next component when the tab key or enter key is pressed after entering the character string. When the [SUBMIT] button is clicked, all text of the Edit component is deleted.

The first Edit component can enter only numbers by specifying autoskip, maxlength, and inputtype property values, and if you enter 5 digits, then the focus moves to the next component.

sample_form_05.xfdl

Core features used in the example

onkeydown

This is the event that occurs when the key is pressed while the component or object has focus. If the corresponding event function returns the true value, then the event is not transmitted to the parent component. In this example, the Button component returns the true value within the onkeydown event function of the Button component to prevent executing the event specified in the Form object when the enter key is pressed.

getFocus

Returns the component that currently has focus within the Form object. In the example, referencing the value of the fromreferenceobject property of the KeyEventInfo object returns the same component.

getNextComponent

Returns the component to which the focus will be moved when the tab key is pressed. The component returned depends on the taborder property value. It is just for returning the target component and does not actually change the focus.

setFocus

Moves the focus to the corresponding component.

maxlength, autoskip

Specifies the maximum value of the input string. If the character string is entered as much as the specified maximum value, then it is not entered anymore. If the autoskip property value is set to true, the component with the next focus is automatically moved when the input string reaches the maximum value.

inputtype

The first Edit component set the inputtype property value to 'number'. You can only enter numbers.

How to implement an example

Place the Edit, Button components as shown in the example screen. Set the autoskip, inputtype, maxlength property values of the first Edit component to true, number, 5.

Select Form in Nexacro Studio and double-click the onkeydown property item in the property window. Whether the enter key is pressed is compared with the keycode property value of the KeyEventInfo object. If you press enter key, then it compares with the value of 13.

this.Form_onkeydown = function(obj:nexacro.Form,e:nexacro.KeyEventInfo)
{
	if(e.keycode == 13)
	{
		var objFocus = this.getFocus();
		var objComp = obj.getNextComponent(objFocus, true);
		objComp.setFocus();
	}
};

In the onkeydown function, the event of the component occurs first, and the event of the parent Form object occurs. At this time, if true is returned, then the event is not transmitted to the parent Form object. When the Button component has focus, pressing the enter key causes the click event, and to process this, the event should not be transmitted to the parent Form object.

this.btnSubmit_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.edit01.set_value('');
	this.edit02.set_value('');
};

this.btnSubmit_onkeydown = function(obj:nexacro.Button,e:nexacro.KeyEventInfo)
{
	return true;
};

Run it with QuickView (Ctrl + F6) and click the button to check the property of the object.

Displaying Time with Timer

The timer function is useful to show the user how something is changing. In addition to the clock to be shown in this example, it is also used to animate graphs or to visually show how data is changing.

You can implement a simple timer using the setInterval method in JavaScript, but you can only use one at a time. The big difference with Nexacro is that you can implement multiple timers by specifying separate ids.

Example

The black Static component and two Button components are a pair. When the [Time Start] button is clicked, the time is displayed, and when the [Time Stop] button is clicked, the update of the displayed time is stopped. The pair of red Static components is also of the same format, except that the timer event operates separately.

sample_form_06.xfdl

Core features used in the example

setTimer

Run the timer by specifying the key value and the time interval to process the timer event. The time interval can be specified in milliseconds. For example, if you specify 1000, then the timer runs at 1-second intervals.

ontimer

The event function is executed according to the time interval specified by setTimer. You can also check the key value specified as the timerid property value of the TimerEventInfo object in the event function.

killTimer

Stops the timer that has been executed. When executing the setTimer method, the set key value must be specified.

How to implement an example

Place the Static, Button components as shown in the example screen. Specify the text property value of the Static component to "READY", and separately specify the background property value and the color property value.

Add the key value to be transmitted when clicking the [Time Start] button as User Properties of the Button component. Select the Button component and click the right mouse button on the property window to display the context menu. Select the [Add User Property] item here.

Then, enter the Name, Value items in the input window. In the example, the Name item is "timekey", and the Value item is 1 for the first button and 2 for the second button. The entered value is shown as the [User Properties] item in the property window and can be used like any other property value.

Write the function that creates the timer when the [Time Start] button is clicked. For the key value, specify the timekey property added as the user property of the clicked Button component. This way, each button specifies different key value to the value specified in the user property.

this.btnStart_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.setTimer(obj.timekey, 1000);
};

The event occurs at every time interval specified in the timer. Write the function to process at this time. Select the ontimer event of the Form object and create the event function.

this.Form_ontimer = function(obj:nexacro.Form,e:nexacro.TimerEventInfo)
{
	if(e.timerid == 1)
	{
		this.staticTime.set_text(this.Clock());
	} else if(e.timerid == 2) {
		this.staticTime01.set_text(this.Clock());
	}
};

The text property value of the Static component is specified according to the timerid property value, and the function called Clock is used at this time. The Clock function returns the current time according to the locale property value. The time format displayed on the screen may vary depending on the locale property value.

this.Clock = function()
{
	var objDate = new Date();
	return objDate.toLocaleTimeString();
}

Write the function that stops the timer when the [Time Stop] button is clicked. As it does not stop and run the timer again, it is more accurate to say that it deletes the timer.

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

Run it with QuickView (Ctrl + F6) and click each button to check if the timer runs normally and if the time is displayed in the Static component.

Changing Grid Format according to Screen Size

This example is similar to Changing Layout According to Screen Size. However, this time, instead of changing the layout of the component, the Grid format property is changed to display only the necessary columns.

Example

Use the open method when the button is clicked to open the same Form in a new window. You can see that the column displayed in the Grid component changes when the screen size is reduced by holding and moving the corner of the window with the mouse.

sample_form_07.xfdl

Core features used in the example

onlayoutchanged

This is the event that occurs when the layout changes due to changes in screen size, etc. When the layout changes, the property of the Grid component is changed. By modifying the visible property value of a specific component, you can also adjust the viewing point on the screen.

How to implement an example

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

Layout can be specified when creating Form and can be added after creating Form. In this example, we will add it after creating Form. In the [Design] mode screen, right-click in the area below the window title and select the [Add Layout] item from the context menu.

When you click the [Add Layout] item, the [New Layout] window is displayed where you can enter layout information. In the example, enter only the width, height values.

When you enter the item, the layout is added, and the added layout tab is created at the top of the [Design] mode screen.

Select the added layout and adjust the size of the Grid component appropriately.

Double-click the Grid component to run the Grid Content Editor. Since we are not creating a new format but are changing the existing format slightly, click the right mouse button on the default format item without clicking the [+] button at the top of the editor, and select the [Copy & Add Format] item from the context menu displayed.

Delete only the odd columns from the added format. Select and delete Column1, Column3, Column5, then only 3 columns are left.

You can adjust the size of the running web browser, but for convenience, open the window with the same Form using the open method. Check the layout change function by adjusting the size of the open window.

this.btnOpen_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	nexacro.open("TEST", "Sample::sample_form_07.xfdl", this.getOwnerFrame());
};

Change the formatid property value of the Grid component when the layout is changed.

this.Form_onlayoutchanged = function(obj:nexacro.Form,e:nexacro.LayoutChangeEventInfo)
{
	if(e.newlayout == 'default') {
		this.Grid00.set_formatid("default");
	} else if(e.newlayout == 'Layout0') {
		this.Grid00.set_formatid("default_00");
	}
};

Run it with QuickView (Ctrl + F6) and click the [OPEN] button to open a new window. Check if the columns displayed in the Grid component change by changing the size of the new window.

When running the screen for the first time, it is a little inconvenient to see the Grid component that is not being used. To remove the [OPEN] button in the new window, adjust the visible property of the required component within the onload event function of the Form object.

this.sample_form_07_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	if(this.parent.name == "TEST") {
		this.Grid00.set_visible(true);
		this.btnOpen.set_visible(false);
	} else {
		this.Grid00.set_visible(false);
		this.btnOpen.set_visible(true);
	}
};

In the previous step, the name "TEST" was given as the first value when the open method was executed. This means that when opening a new window, the name of the ChildFrame object that becomes the parent is "TEST". In the onload event function, the name is used to determine the status of the current Form object.

Creating Slideshow with Step Function

Dividing the steps by using the stepcount property is mainly used for the user to turn screens, but when the timer is set, the screen automatically changes to create the slideshow effect.

Example

The first screen is loaded and the screen changes every 2 seconds.

sample_form_08.xfdl

Core features used in the example

setStepIndex, getStepIndex

Checks the current index value and moves to the index value you set.

How to implement an example

Create Form and set the width, height property values to 200, 300. Then, set the stepcount property value to 3. As the screen is divided into 3, the area as large as the size of the first Form is created as many as the number specified in the stepcount property value.

Place the Static component. Place the component of the same size and specify the text property value differently. Select the text property value in the property window and click the button on the right to open the window for the wide input. You can change lines with the Ctrl+ENTER key.

The input component is as shown in the figure below. The background color of the Form object is set to black, and the color property value of the Static component is set to white.

Execute the setTimer method in the onload function of the Form object.

this.sample_form_08_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	this.setTimer(1, 2000);
};

The ontimer event occurs every 2 seconds and the stepindex property value is changed. When the stepindex property value is changed, it moves to the next step screen.

this.sample_form_08_ontimer = function(obj:nexacro.Form,e:nexacro.TimerEventInfo)
{
	if(e.timerid == 1){
		var bSucc = this.setStepIndex(this.getStepIndex()+1);
		if(!bSucc)
			this.setStepIndex(0);
	}
};

Run it with QuickView (Ctrl + F6) and check if the slides change every 2 seconds.

Displaying Component List

This function displays the list of components. There may not be many uses on its own, but if you need to change a specific property value of all components in Form, you should import the entire list and process it using the iteration statement. By using the code in the example, you can implement the desired function.

Example

When you click the [check list] button, the list of components displayed on the screen is displayed in Grid. [check all list] displays the list including components (such as the Dataset object) or binding items that are not visible on the screen.

sample_form_09.xfdl

Core features used in the example

components

This is the property that has the list of child components included in Form. You can access the desired component by index or id.

all

This is the property that has the list including Invisible Object, Bind information that cannot be accessed by the components property.

How to implement an example

Create Form and place each component. In the example, the component is placed inside the Div component and the Tab component. Other than the Grid component that displays the top function button and the bottom list, you can test it by placing it freely.

Directly assign the data contained in the Dataset object to the component list information. The Dataset object has 3 columns, which are Column0, Column1, Column2, and they do not enter the Row information. Bind it to the TextArea component in the Grid component and Div00. If you drag the Dataset object icon and drop it on the TextArea component, then you can specify the properties and columns to bind.

Add the No column to display the sequence number to the Grid component. Double-click the Grid component to run Grid Contents Editor, add a column to the front, and specify the head text to "No" and the cell expr property value to "expr:rowidx+1". rowidx returns the index value starting from 0, and if you add 1, then you can display the sequence number from 1.

Process the function of displaying the list of components or objects on the screen when the Button component is clicked. The actual data processing is processed by the get_com_info function.

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

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Dataset00.clearData();
    this.get_com_info(this, true);
};

The get_com_info function takes 3 values and processes them. The first value is the object. If there is a component in the Div component, Form only checks the existence of the Div component, and the list of components within the Div component cannot be checked. Therefore, in the case of the Div, Tab components, it goes through the process of checking if they have the component inside. This is the code that calls the get_com_info function again depending on the conditions. This method is called Recursive.

this.get_com_info = function(obj, bAll, bRecursive)
{
	var i;
	var components = bAll?obj.all:obj.components;
	this.Dataset00.set_enableevent(false);
	
	for( i = 0 ; i < components.length ; i++ )
	{
	    var nRow = this.Dataset00.addRow();
	    this.Dataset00.setColumn(nRow,0,components[i].id);	
	    this.Dataset00.setColumn(nRow,1,bRecursive?obj.parent.valueOf():this.valueOf());
	    this.Dataset00.setColumn(nRow,2,this.get_url(components[i],""));
	    var strType = components[i].valueOf(); 
	    
		if(strType == "[object Div]" || strType == "[object Tab]"){			
			if (strType == "[object Tab]") {
				for(var j = 0 ; j < components[i].tabpages.length ; j++ )
				{
					var nRow = this.Dataset00.addRow();
					this.Dataset00.setColumn(nRow,0,components[i].tabpages[j].id);	
					this.Dataset00.setColumn(nRow,1,components[i].valueOf());
					this.Dataset00.setColumn(nRow,2,this.get_url(components[i].tabpages[j],""));				
					
					this.get_com_info(components[i].tabpages[j].form, bAll, true);				
				}				
			} else {
				this.get_com_info(components[i].form, bAll, true);
			}
		}		 
	}
	this.Dataset00.set_enableevent(true);
};

The get_url function displays the path of the item displayed in the list.

this.get_url = function(obj, str)
{
	if(obj == "[object Form]")
	{
		var s = "form";
		if(obj.name == "sample_form_09")
		{
			return str;
		}
	}	else	{
		var s = obj.name;
	}
	if(str != "")
	{
		s += "."+str;
	}
	return this.get_url(obj.parent, s);
};

Run it with QuickView (Ctrl + F6) and click the Button component to check if the output matches the actual list.

Processing transaction with Server

The transaction method mainly uses the method of the Form object. However, when you need to use it in connection with AppVariables, use the transaction method of the application object.

Example

Clicking the button executes the transaction method to start communication with the data in the server. Enter the imported data into the specified Dataset. The communication process will differ depending on the selected synchronization condition.

The order in which 3 alert dialog boxes, which are "Before Transaction", "Transaction rowcount:", "After Transaction", are displayed differs depending on the selected synchronization condition.

sample_form_10.xfdl

Core features used in the example

transaction

Although the transaction method is used for sending and receiving data, it is used only for receiving data in this example. It reads the XML file, receives and processes the corresponding value from the specified Dataset. Depending on the bAsync option setting, it determines whether to proceed with the transaction processing synchronously (whether to complete the transaction processing and perform the next processing) or asynchronously (to proceed with the next processing regardless of whether the transaction is processed or not). The default value is asynchronous (true).

How to implement an example

Place the Button component and Radio, TextArea components as shown in the example screen. The innerdataset property value of the Radio component is as follows.

Add the Dataset object and add 2 columns with the column id of id, name.

Write the event function to be processed when the button is clicked. The function that adds the message to the TextArea component before and after the transaction method execution and when the callback function is processed is executed. The order of message processing is different depending on the bAsync option setting.

var bAsync = true;
this.btnTransaction_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.TextArea00.set_value("");
	this.fn_addlog("Before Transaction");
	this.transaction("TEST","FileSample::sample_form_10_file.xml", null, "Dataset00=TEST", null, "fn_test", bAsync);
	this.fn_addlog("After Transaction");
};

this.fn_addlog = function(strMessage)
{
	this.TextArea00.set_value(this.TextArea00.text + strMessage + '\n');
}

Executing the transaction method accesses the specified URL and receives data. When data reception is normally processed, the function specified as the callback function is executed. In the example, the callback function name "fn_test" is specified.

The name of the callback function used in Nexacro can be different, but the format is as follows.

[function name] = function(strSvcID, nErrorCode, strErrorMag) {}

this.fn_test = function(strSvcID, nErrorCode, strErrorMag)
{
	this.fn_addlog("Transaction rowcount: "+this.Dataset00.rowcount);
}

When selecting the item of the Radio component, the value is assigned to the bAsync variable. This variable is specified as the option value when calling the transaction method.

this.radioTransaction_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
	bAsync = obj.value;
};

Run it with QuickView (Ctrl + F6), select the bAsync option, and click the button to check the order in which the alert dialog boxes appear.

If ASync is selected, then it does not stop other processes while executing the transaction method. So, the order in which the alert dialog boxes appear is as follows.

[Before Transaction] -> [After Transaction] -> [Transaction rowcount: xxx]

If Sync is selected, then it processes the transaction method and then proceeds with other processes. So, the order in which the alert dialog boxes appear is as follows.

[Before Transaction] -> [Transaction rowcount: xxx] -> [After Transaction]

Checking Bind Item List

If you select the Dataset object in the Nexacro Studio Invisible Object area, then the items are displayed in the Binding Components List area. Let us take a look at how to check the same in the script.

Example

Clicking the [binds check] button displays the Bind item list in the TextArea component in the Form object. Components that set binding directly to the binddataset property like the Grid component are not displayed.

sample_form_11.xfdl

Core features used in the example

binds

This is the property that has the binding information within the Form object. Each binding information is contained in the BindItem object.

How to implement an example

Add two columns to the Dataset00 object and set the first column data to a, b, c, and the second column data to 1, 2, 3. For the Dataset01 object, add two columns as well, and set the first column data to 1, 2, 3 and the second column data to a, b, c.

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	for(var i = 0; i < this.binds.length; i++)
	{
		this.TextArea00.set_value(this.TextArea00.value+this.binds[i].compid+", "+ this.binds[i].propid+", "+ this.binds[i].datasetid + ", " + this.binds[i].columnid+"\n");
	}
};

Modifying All Component Properties

This is an example of modifying the properties of components in Form to the same value.

Example

If you click the [Check] button, then the background colors of the Edit, Combo, and Button components are modified.

sample_form_12.xfdl

Core features used in the example

instanceof

You can check which object the corresponding component is. In the case of the Edit component, both Edit and nexacro.Edit return the true value.

How to implement an example

Exclude the [Check] button when changing properties.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	for(var i = 0; i < this.components.length; i++)
	{
		if(this.components[i] instanceof nexacro.Edit)
		{
			this.components[i].set_background("lavenderblush");
		}
		else if(this.components[i] instanceof nexacro.Combo)
		{
			this.components[i].set_background("beige");
		}
		else if(this.components[i] instanceof nexacro.Button)
		{
			if(this.components[i].id != obj.id)
				this.components[i].set_background("lightgreen");
		}
	}
};