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

The set property value can be checked again in metainfo.

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

Setting in Metainfo

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

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.

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

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

Configuring Screen

Static: staComp
Button: btnComp

Setting Contents Item

When ContentsInfo Editor is run, add Contents Item.

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

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.
};

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.

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);
	}		
};

The _setContents function is called in the following situations -

• Form loading with object added in nexacro studio

• Change of object Contents property value in nexacro studio

• Calling the on_attach_contents_handle, on_created_contents function when loading the app

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

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.

Installing Module & Checking Operation

Now, deploy the module and check it in nexacro studio.

Import the deployed module installation file from nexacro studio.

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.

<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>

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>");
};

Setting with Object Contentseditor Property

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

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

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