Contents Editor

In case of the Grid and ListView components, the format of the content display can be set using the format of the Content Editor. This allows components or data to be displayed in various formats. nexacro Module Developer provides a feature to set the contents editor for the module development.

To set the metainfo Contents property, three types of contents editor are used that are provided by default. If you are generating a Content Editor project and want to set it up, you can set it with the object contenteditor property.

Setting with Metainfo Contents Property

By setting the Contents property, you can use three types of Content Editor provided by default when setting object properties.

Setting Contents Properties

Setting in Component Wizard

1

Change the setting value of the Contents item to true when generating an object.

2

Click the [Next] button and set Contents Format and Contents Type.

The set property value can be checked again in metainfo.

3

Check Class Definition of the generated object.

Related functions are automatically generated according to Contents Type as shown below.

Setting in Metainfo

1

Select an object under MetaInfo in Project Explorer.

2

Set the Contents property value to true in the property window.

3

Click the button of the Contents property item to run ContentsInfo Editor.

4

Set Contents Format, Contents Type.

5

Add the necessary code to the Class Definition of the generated object.

If the Contents property is changed in metainfo, the code is not automatically added. You must add the necessary code yourself.

Setting Contents Format & Contents Type Properties

You can set Contents Format and Contents Type properties by setting the Contents property value to true. The Contents Type property settings you can select depend on the Contents Format property.

Contents Format

Contents Type

xml

contents, formats

json

contents

objectitem

contents, formats

Contents Format

Set the format of the property value to be processed. The editor that can be used after module installation varies depending on the selected property value.

Contents Type

If you set the property value to "formats", you can set more than one data using formatid. In case of Component Wizard, formats and formatid properties and related functions are set as shown below.

A button to add Format is added at the top of the editor that can be used after module installation. The added Format can be deleted or renamed.

Setting Contents Item Properties

If you set the property value of Contents Format to "objectitem", you must set the Contents Item property.

Property Name

Description

TagName

It sets the Tag name used when generating Design Source.

TypeName

It sets the class to display the properties of the selected items in Basic Contents Editor.

For the top-level parent item, the current object class is selected, and for the child item, an appropriate class is selected.

Minimum Occurs

If a value of 1 or more is specified, items of more than that number must be set.

If no value is set, it is processed as 0 and there is no minimum number limit.

Maximum Occurs

If a value of 1 or more is specified, items of less than that number must be set.

If no value is set, it is processed as 0 and there is no maximum number limit.

The properties Minimum Occurs or Maximum Occurs can be set by specifying the id property value.

Property Value

Description

id property value

It can only set one item of the set-id property value.

ex) btnContent

id property value | id property value

It sets the property value using the "|" separator.

It can only set one item out of two or more id property values.

ex) btnContent|btnFotmat

id property value, id property value

It sets the property value using the "," separator.

The number of set items out of two or more id property values can be added.

Minimum Occurs property must add the set number as the corresponding id property value.

Maximum Occurs can add only as many as the set number by the corresponding id property value.

ex) btnContent,btnFotmat

When using "|" or "," separators, blanks must not be included.

If there is a blank character, a message indicating that the character is not allowed is displayed and it is not saved.

Creating Simple Sample

Let’s take a look at how to set the Contents property of the object to true, generate a module, and change the Contents property value of the corresponding object in Nexacro Studio.

Generating Module Project

1

Select the menu [File > New > Project] and run Project Wizard.

2

Enter the Project Name and click the [Next] button.

3

Enter Object ID and change the Contents item value to true.

4

Click the [Next] button and change Contents Information as shown below.

5

Click the [Finish] button to generate the project.

Configuring Screen

1

Place the Static and Button components in the design area and change the size of the Form appropriately.

2

Set the component id as follows.

Static: staComp
Button: btnComp

Setting Contents Item

1

Select the object name under the MetaInfo item in Project Explorer.

2

Check the Contents property in the property window and click the button.

When ContentsInfo Editor is run, add Contents Item.

3

Click the [+] button to add an item.

4

Click the [+] button in the added item row to add two child items.

5

Change the items such as TagName and TypeName as follows.

For the top-level parent item’s TypeName, select the object class you are working on. In the example, it is "nexacro.CompContentsSample".

When setting the Contents property in Nexacro Studio, each child item can be added one by one and the id value is set to "staComp" and "btnComp".

Writing Script

1

Select the xcdl file under the object name in Project Explorer.

2

Select the Class Definition tab.

When setting the Contents property value, the method of processing the set value must be implemented directly in the script. If the Contents property is set in Component Wizard, the script code is generated as follows.

nexacro.CompContentsSample.prototype.contents = "";
nexacro.CompContentsSample.prototype.set_contents = function (v)
{
	this.contents = v;
	this._setContents(this.contents);
};
	
nexacro.CompContentsSample.prototype._setContents = function (v)
{
	// This function is necessary to apply contents in the run environment.
	// TODO : enter your code here.
};

3

Double-click the on_attach_contents_handle, on_created_contents item in the property window to generate the corresponding function.

Since the object interface that occurs in NRE and WRE is different when running the app, we have registered both as follows. If the service target is only WRE, register only the on_attach_contents_handle function.

4

Modify the on_attach_contents_handle, on_created_contents function as follows.

on_created_contents is the function that operates in NRE. It is run when the corresponding component is loaded in Nexacro Studio, resulting in a duplicate function being run. Therefore, check system.navigatorname so that it is not run in Nexacro Studio.

nexacro.CompContentsSample.prototype.on_attach_contents_handle = function (win)
{
	nexacro._CompositeComponent.prototype.on_attach_contents_handle.call(this, win);
	this._setContents(this.contents);
};	

nexacro.CompContentsSample.prototype.on_created_contents = function (win)
{
	nexacro._CompositeComponent.prototype.on_created_contents.call(this, win);
	if(system.navigatorname != "nexacro DesignMode")
	{
		this._setContents(this.contents);
	}		
};

5

Modify the _setContents function as follows.

The _setContents function is called in the following situations -

The value set with the Contents property is passed as an XML string. It generates the DOMDocument object using DomParser within the function, checks the values set in each item, and reflects the set value.

nexacro.CompContentsSample.prototype._setContents = function (v)
{
	this.contents = v;
	var objDoc = new nexacro.DomParser();
	var xmlDoc = objDoc.parseFromString(this.contents);
	var obj = null;
	var n, children = null;
		
	var contentsNode = xmlDoc.firstChild;
	if(!contentsNode)
		return;
	
	var objectNode = contentsNode.firstChild;
	if(!objectNode || objectNode.tagName != "MyComp")
		return;
			
	var childNode = objectNode.firstChild;
	while(childNode)
	{
		var id = childNode.getAttribute("id");
		var obj = this.form[id];
		if(obj == undefined)
			break;
			
		var attributes = childNode.attributes;
		var nCount = attributes.length;
			
		for(var i=0; i<nCount; i++)
		{
			var attr = attributes[i];
			var attr_name = attr.name;
			var attr_value = attr.value;
				
			if(attr_name == "id")
				continue;
				
			var setter = obj["set_"+attr_name];
			if(setter)
				setter.call(obj, attr_value);
		}
		childNode = childNode.nextSibling;
	}
};

Checking Operation in Emulator

1

Select the menu [Generate > Emulate] and run the emulator.

2

If the property window is not visible, click [Show Object MetaInfo] item from the top icons.

3

Check the Contents property in the property window and click the button.

4

When Basic Contents Editor is run, click the [+] button to add an item.

5

Select the top-level parent item added and click the [+] button to add two items.

In the previous step, it was set to add only two items with the specified id when setting the Contents Item property, so only two items can be added.

6

Select the child item added and appropriately modify the property value of the component in the property window.

7

Click the [OK] button and check that the set property value is displayed on the emulator.

Installing Module & Checking Operation

Now, deploy the module and check it in Nexacro Studio.

1

Select the menu [Deploy > Module Package] and generate the module installation file.

Import the deployed module installation file from Nexacro Studio.

2

Generate a project or run an existing project in Nexacro Studio.

3

Select the menu [File > Install Module Wizard] and install the module file.

4

Place the CompContentsSample component on Form.

5

Check the Contents property in the property window and click the button.

Adding and setting items in the [Contents] tab is the same as in the emulator. In this step, we will look at how to set it in the [Design Source] tab.

6

In the [Design Source] tab, copy and paste the following code to set the property value.

<Contents>
  <MyComp id="MyComp00">
    <Static id="staComp" text="TEST" color="red" font="36px/normal &quot;Arial&quot;" textAlign="center"/>
    <Button id="btnComp" text="TEST BUTTON" background="cornflowerblue"/>
  </MyComp>
</Contents>

7

Click the [OK] button and check that the set property value is displayed in the design window.

8

Run Quick View to check if the component is displayed with the set properties in NRE or web browser.

9

Add the Button component to Form and write the onclick event function as follows.

When clicking the button, set the Contents property value of the object and change the text property value within the object.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.CompContentsSample00.set_contents("<Contents><MyComp id='MyComp00'><Static id='staComp' text='SAMPLE'/><Button id='btnComp' text='SAMPLE BUTTON'/></MyComp></Contents>");
};

10

Run Quick View and check if the text changes when clicking the button.

Setting with Object Contentseditor Property

Nexacro studio supports connecting and using the contents editor projects that are developed separately.

The feature of individually generating contents editor in nexacro Module Developer is not yet supported.

Generating and writing contents editor projects in Nexacro Studio is a feature that is not officially supported. It is the feature that is used by some partner companies that test-produce module components.

When selecting an object in Project Explorer, you can specify the Contents Editor related properties in the property window.

Item

Description

contentseditorformurl

It specifies the XFDL file that designed the contents editor screen.

Specify the contentseditorproject item value first and select from the Form list within the corresponding project.

contentseditorproject

It specifies the contents editor project path.

The contents editor project specified in the contentseditorproject item must be located in the module project child-path.

When editing ContentsInfo metainfo, the contentseditor item must be set to "external".

The registered contents editor project is exposed to Project Explorer and when selecting an item, it checks whether to run in Nexacro Studio.