Adding Properties, Methods & Events

In this chapter, we will look at how to add properties, methods and events to composite components.

Adding Properties

Adding String Property

Add properties that can directly access the selected value in the Calendar component. The names of the properties are fromValue and toValue.

1

Select [Edit > Add > Property] item from the menu and run Add Property Wizard.

You can also select an object in Project Explorer and select [Add > Property] item from the context menu.

2

Check if the object displayed in the Target Object item is the one selected and enter the property name to be added in the Property Name item.

Property related information can be set in the Property Information item. In the example, the property-related information remains at its default value.

Checking "Make setter function in a module scripts" item automatically generates the Setter Function skeleton code of the property. If any of the metainfo items, unused, readonly, or initonly, is set to true, the corresponding checkbox is disabled.

If the checkbox is disabled or unchecked, the corresponding code will not be added to the xcdl file in the next step.

3

Click the [Finish] button to add the specified property and add the property to the MetaInfo item.

4

You can check that in the xcdl file, the Class Definition tab is activated and the inserted code is available.

5

Modify the script as follows.

When the user sets the fromValue property value, the corresponding property value is delivered as the value of the Calendar component.

nexacro.TwoMonthCalendar.prototype.fromValue = undefined;
nexacro.TwoMonthCalendar.prototype.set_fromValue = function (v)
{
	if(this.form.calFrom)
	{
		this.form.calFrom.set_value(v);
	}
	this.fromValue = v;
};

6

Select the Calendar component in the design tab and generate the onchanged event function as below. The generated event function can be checked in the Script tab.

When the selected value in the Calendar component is changed, save the changed value in the fromValue property value.

this.calFrom_onchanged = function(obj:nexacro.Calendar,e:nexacro.ChangeEventInfo)
{
	this.parent.set_fromValue(e.postvalue);
};

In the Script, the keyword, this, refers to the Form object. Therefore, to access the properties of the composite component, you must access via this.parent.

7

Run the emulator, select the date in the first Calendar component, and check the property value in the console window.

8

Add the property corresponding to the second Calendar component and add code.

Adding Enum Property

Enum property refers to a property that can specify a value in the form of enumeration. For example, the type property value of the Calendar component can be selected from 3 values of "normal | monthonly | spin", which is used by adding a property value that can be specified in advance as the EnumInfo property.

Add a property that can change the style of the Calendar component. The name of the property is colorTheme. Before adding the property, EnumInfo must be added first.

Please refer to the link below for style-related codes. In the below description, it is assumed that the xcss code has been written in advance.

Specifying Individual Style of Components

1

In Project Explorer, double-click the object name under the MetaInfo item or select [Edit] item from the context menu to run the metainfo editor.

2

Click the [Edit Common Information] icon on the right side of the editor.

3

Click the [+] button, select [Add Info Item], and add an item called "ColorTheme" in the edit window.

4

Select the added Enum item, select the [Add] item from the context menu, and then add the "orange" and "purple" items in the [Add Enum Item] window.

5

Select [Edit > Add > Property] item from the menu and run Add Property Wizard.

6

Change the Edit Type item to "Enum" in the Property Information item, and then select the "ColorTheme" item created earlier for the Enuminfo item.

7

Modify the script as follows.

Change the cssclass property value to be used in the Calendar component according to the selected value.

nexacro.TwoMonthCalendar.prototype.colorTheme = "";
nexacro.TwoMonthCalendar.prototype.set_colorTheme = function (v)
{
	var _cssclass = "";
	if(v=="purple")
	{
		_cssclass = "simple_module, simple_module_purple";
	}
	else
	{
		_cssclass = "simple_module";
	}
	
	if(this.form.calFrom && this.form.calTo)
	{
		this.form.calFrom.set_cssclass(_cssclass);
		this.form.calTo.set_cssclass(_cssclass);
	}
	this.colorTheme = v;
};

8

Run the emulator and check if the style is applied appropriately when the colorTheme property value is changed.

Processing Property Value when Running Components

Add an interface function as shown below so that the value set as the property value is reflected for the operation.

nexacro.TwoMonthCalendar.prototype.on_create_contents = function ()
{
	nexacro._CompositeComponent.prototype.on_create_contents.call(this);
	this.set_fromValue(this.fromValue);
	this.set_toValue(this.toValue);
	this.set_colorTheme(this.colorTheme);
};

Adding Methods

Adding Parameterless Method (getDayCount)

Add a method that calculates and returns the difference between the selected value in the Calendar component. The name of the method is getDayCount.

1

Select [Edit > Add > Method] item from the menu and run Add Method Wizard.

You can also select an object in Project Explorer and select [Add > Method] item from the context menu.

2

Check if the object displayed in the Target Object item is the one selected and enter the method name to be added in the Method Name item.

You can set method related information in the Method Information item. In the example, we will generate a method that calculates and returns the difference between the selected dates of two Calendar components. Set the Type value to "Integer" in the Return Information item.

"Make setter function in a module scripts" item sets whether to automatically generate the Function skeleton code of the method. If the metainfo, unused item, is set to true, the corresponding checkbox is disabled.

If the checkbox is disabled or unchecked, the corresponding code will not be added to the xcdl file in the next step.

3

Click the [Finish] button to add the specified method and the Class Definition tab is activated.

If you click the [Next] button, you can specify the parameters used in the method. As in the example, we do not use any parameters, the corresponding step has been skipped.

4

Modify the script as follows.

Compare the values of 2 Calendar components and return the difference value.

nexacro.TwoMonthCalendar.prototype.getDayCount = function ()
{
	var fromDate = new Date();
	var toDate = new Date();
	var calDate;
	var day = 1000*60*60*24;
	var returnvalue = -1;
    
	if(this.form.calFrom.value && this.form.calTo.value)
	{
		fromDate.setFullYear(this.form.calFrom.getYear());
		fromDate.setMonth(this.form.calFrom.getMonth()-1);
		fromDate.setDate(this.form.calFrom.getDay());
		
		toDate.setFullYear(this.form.calTo.getYear());
		toDate.setMonth(this.form.calTo.getMonth()-1);
		toDate.setDate(this.form.calTo.getDay());
	
		calDate = fromDate.getTime() - toDate.getTime();
		trace("calDate: "+calDate);
		
		returnvalue = Math.abs(calDate/day);
	}
	trace("returnvalue: "+returnvalue);
	return returnvalue;
};

5

Run the emulator, select the dates from the first and second Calendar components, call the added method in the console window, and check the returned value.

When entering the method name in the console window, you can also see that the IntelliSense feature is running.

Adding Parameterized Method (addDay)

Add a method that adds the date passed as a parameter to the value selected in the first Calendar component and sets it as the value of the second Calendar component. The name of the method is addDay.

1

Select [Edit > Add > Method] item from the menu and run Add Method Wizard.

You can also select an object in Project Explorer and select [Add > Method] item from the context menu.

2

Check if the object displayed in the Target Object item is the one selected and enter the method name to be added in the Method Name item.

You can set method related information in the Method Information item. In the example, the number passed as the parameter is added to the first Calendar date to be set in the second Calendar component and the result value is returned. Set the Type value to "Boolean" in the Return Information item.

3

Click the [Next] button and the screen where you can specify the parameter is displayed.

Click the [+] button in the Arguments item to add the parameter and set the Type property to "Integer".

When adding parameters, the name is given in the format of arg00. You can change the name by selecting the item and selecting [Rename] item from the context menu. In the example, we changed the name to nDay.

If there are multiple parameters, the order can be changed by using the up and down arrows.

4

Click the [Finish] button to add the specified method and the Class Definition tab is activated.

5

Modify the script as follows.

After adding the value passed as the parameter to the value of the first Calendar component, specify it as the value of the second Calendar component.

nexacro.TwoMonthCalendar.prototype.addDay = function (nDay)
{
	var fromDate = new Date();
	var toDate = new Date();
		
	if(this.form.calFrom.value)
	{
		fromDate.setFullYear(this.form.calFrom.getYear());
		fromDate.setMonth(this.form.calFrom.getMonth()-1);
		fromDate.setDate(this.form.calFrom.getDay());
		toDate = new Date(fromDate.addDate(nDay));
			
		var year = toDate.getFullYear().toString().padLeft(4, "0");
		var month = (toDate.getMonth()+1).toString().padLeft(2, "0");
		var day = toDate.getDate().toString().padLeft(2, "0");			
			
		this.form.calTo.set_value(year+month+day);
		return true;
	}
	else
	{
		trace("calFrom value is null");
		return false;
	}
};

6

Run the emulator, select the date in the first Calendar component, call the added method in the console window, and check that the value is set in the second Calendar component.

Adding Events

In the Calendar component, add an event to check when the value has changed (onchanged). The name of the event is onchanged.

1

Select [Edit > Add > Event] item from the menu and run Add Event Wizard.

You can also select an object in Project Explorer and select [Add > Event] item from the context menu.

2

Check if the object displayed in the Target Object item is the one selected and enter the event name to be added in the Event Name item.

If there is a value to return according to the event, then set the Type of Return Information. In the example, as there is no value to return, we did not specify the corresponding item.

3

Click the [Next] button and specify the object where the event occurs and the EventInfo object. If the [Finish] button is clicked without specifying the corresponding item, nexacro.EventInfo object is applied as default.

In the example, the item is changed as nexacro.ChangeEventInfo.

4

If you click the [Finish] button, a basic script is added as shown below and the Class Definition tab is activated.

First, call a method called this.addEvent in the function that initializes the composite component. Inside the component, there is a variable that manages the event list. When the addEvent method is run, add the event to the corresponding list.

Then, add the following event function at the bottom of the code.

5

Modify the script as follows.

nexacro.TwoMonthCalendar.prototype.on_fire_onchanged = function (obj, pretext, prevalue, posttext, postvalue)
{
	if (this.onchanged && this.onchanged._has_handlers)
	{
		var evt = new nexacro.ChangeEventInfo(obj, "onchanged", pretext, prevalue, posttext, postvalue);
		return this.onchanged.fireEvent(this, evt);
	}
	return false;
};

6

Add the onchanged event function of the Calendar component and add the following code.

The onchanged event function was added through the example of "Adding Properties". If it has already been added, add only the changed code.

this.calFrom_onchanged = function(obj:nexacro.Calendar,e:nexacro.ChangeEventInfo)
{
	this.parent.set_fromValue(e.postvalue);
	this.parent.on_fire_onchanged(obj, e.pretext, e.prevalue, e.posttext, e.postvalue);
};

this.calTo_onchanged = function(obj:nexacro.Calendar,e:nexacro.ChangeEventInfo)
{
	this.parent.set_toValue(e.postvalue);
	this.parent.on_fire_onchanged(obj, e.pretext, e.prevalue, e.posttext, e.postvalue);
};

The added event cannot be tested in the emulator, but it can be checked in the app after module deployment.

Checking Added Properties, Methods & Events after Module Installation

Let’s take a look at how you can use added properties, methods, and events after installing the module in Nexacro Studio.

Displaying Added Properties & Methods in Property Window

The added properties and events are displayed in the property window. You can see the value change on the Design tab when you specify the value.

When you select the colorTheme property item, you can check whether the property value specified in the drop-down list is visible. Selecting the value applies to the changed style in the Nexacro Studio design window.

Displaying Added Properties, Methods, & Events when IntelliSense Is Activated

In the script tab, you can also see the added properties, methods, and events when IntelliSense is activated.

Checking Method Operation

You can also check that the value is returned normally when calling the method.

1

Generate the Form screen in Nexacro Studio.

2

Place the composite component on the screen.

3

Place the Button component on the screen and write the onclick event function as follows.

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

4

Run the app with QuickView(Ctrl + F6), select dates from the two calendars, and click Button.

The method operation result can be checked on the browser developer tool console screen.

Checking Event Operation

1

Generate the Form screen in Nexacro Studio.

2

Place the composite component on the screen.

3

Write the onchanged event function of the composite component as follows.

this.TwoMonthCalendar00_onchanged = function(obj:nexacro.TwoMonthCalendar, e:nexacro.ChangeEventInfo)
{
	trace("e.fromobject.id: "+e.fromobject.id);
	trace("e.prevalue: "+e.prevalue);	
	trace("e.postvalue: "+e.postvalue);
};

4

Run the app with QuickView(Ctrl + F6) and check if the event is generated when selecting dates from the two calendars.

The method operation result can be checked on the browser developer tool console screen.

Metainfo Editing (Properties, Methods, & Events)

Detailed items can be set in the wizard that adds properties, methods, and events. This is called the metainfo. You can edit the detailed items by selecting the Property, Method, or Event items of the object under the MetaInfo file in Project Explorer and double-clicking it.

You can select and display the displayed list according to the option.

Item

Description

All

Displays all items.

Inheritance

Displays only the inherited items.

Owned

Displays only the newly-added items.

Properties

Item

Description

Group

It specifies the category of the property.

If not specified, it is processed as Misc.

Please refer to the note below the table for detailed items that can be specified.

Subgroup

It is used when editing innerdataset properties in Nexacro Studio.

When the edit window is opened by clicking the button to the right of the Combo component innerdataset property item in the property window, the property specified in the subgroup item value in "bind(innerdataset)" format is exposed.

Edit Type

It specifies the type of property window editing.

For example, in the case of the left property, it is specified as positionBase, and you can specify the number, unit, and positionBase property in the property window.

Please refer to the note below the table for detailed items that can be specified.

Default Value

It specifies the default value of the property.

When adding properties, it specifies the default value when generating a script. If the defaultvalue item value is modified after the script generation, it has no effect.

Unused

It specifies whether to use the property in the child when inheriting.

ReadOnly

It specifies whether the property is read-only.

InitOnly

It specifies whether to use only the initial setup.

For example, the initvalueid property value is used only to set the initial value before being displayed on the screen.

Hidden

It specifies whether to display the property window.

It is not displayed in the property window but can be accessed via script.

For example, the form property of the composite component can be accessed from the script but it is not displayed in the property window.

Control

It specifies whether the property itself is an object (or control).

If the corresponding item value is true, the readonly item is set to true and the hidden item is set to false.

For example, the form property of the composite component is an object, so it is set to true.

Expression

It specifies whether to use expr.

When true, the [set expression] button is displayed in the property window and the expr value can be edited.

Bind

It specifies whether to use the Column binding feature of the bound Dataset object.

If it is bound to the Dataset object, you can select the Column item to be connected in the property window from the drop-down list.

Mandatory

When placing components in Nexacro Studio, it specifies whether to generate the corresponding property in the XML code.

Refresh Properties

It is specified when there are properties that are affected by a change in property value.

The affected property information is separately managed in the RefreshInfo.info file.

The actual property value change must be implemented in the set_[value] function.

Enuminfo

It specifies the EnumInfo information that can be selected when the edittype item is specified as "Enum".

In the property window, it is displayed as the drop-down list to select items.

Enuminfo2

If the edittype item is specified as "Enum2", then specify the EnumInfo information that can be selected.

In the property window 2 items can be selected from the drop-down list as shown below.

UnitInfo

It specifies the UnitInfo information that can be selected when the unit you specify in the property is fixed.

You can display the unit on the right side of the property window or specify the minimum and maximum values.

It can only be applied when the edittype setting value is "Number".

Delimiter

If the edittype item is set to "Number2", more than one value can be specified as the property value. It specifies each property value separator at this time.

Requirement

It specifies the supported operating environment with comma separators.

The supported operating environment is displayed in the format of tooltip text when the mouse cursor hovers over the property name in the property window or when the IntelliSense feature is run in the script tab.

Css Property Name

In the case of the style property, it specifies the CSS property name.

The CSS property names have a different naming convention from general property names, so for convenience of development, general property names and CSS property names are managed separately.

For example, the CSS property name of the border property is -nexa-border.

Normal Property Name

It is the name specified in the XFDL file in Nexacro Studio.

If omitted, the same value as the name item is used.

Description

It is a brief description of the property.

Text is displayed in the description area at the bottom when selecting the property item in the property window or it is displayed when the IntelliSense feature is activated in the script tab.

Values that can be specified as group items are as follows.

Accessibility, Action, Appearance, Binding, Collection, Communication, Control, EventInfo, Hidden, Information, Misc, Normal, Position, SandBox, Style

Values that can be specified as edittype items are as follows.

Accessibility, Boolean, ColumnID, Contents, ContentsParam, CssClass, DataObjectID, DataObjectPath, DatasetID, Enum, Enum2, FileName, FormatID, Hotkey, ID, IconID, ImageID, InitvalueFileID, InitvalueID, InnerColumnID, InnerDatasetID, Line, LiteDBConnectionID, LiteDBParameters, ModelServiceID, MultiEnum, MultilineString, Number, Number2, Number2Unit, NumberUnit, Position, PositionBase, ProgID, ScreenID, String, StringEnum, SvgPath, ThemeID, URL, UserFontID, Variant, ViewChildObjList, ViewObjList

Methods

Item

Description

Group

It specifies the category of the method.

Currently, it does not affect the module operation.

Unused

It specifies whether to use the method in the child when inheriting.

Async

It specifies whether to process synchronization.

Currently, it does not affect the module operation.

Requirement

It specifies the supported operating environment with comma separators.

The supported operating environment is displayed in the format of tooltip text when the IntelliSense feature is run in the script tab.

Description

It is a brief description of the method.

It is displayed when the IntelliSense feature is activated in the script tab.

Events

Item

Description

Group

It specifies the category of the event.

The default value is specified as "Event".

Unused

It specifies whether to use the event in the child when inheriting.

Requirement

It specifies the supported operating environment with comma separators.

The supported operating environment is displayed in the format of tooltip text when the mouse cursor hovers over the event name in the property window or when the IntelliSense feature is run in the script tab.

Description

It is a brief description of the event.

It is displayed when the IntelliSense feature is activated in the script

tab.