Here is an introduction to the composite component example created in Nexacro Module Developer. This is an example code, and its suitability has not been verified.

Postal Code Search

Here is an example of using the Daum Postal Code Search API. Enter the searched results in the Edit component.

Execution in the NRE has not been implemented to simplify the sample implementation. This ensures that the necessary API scripts are handled when the constructor is called.

nexacro.DaumPostCode = function (id, left, top, width, height, right, bottom, minwidth, maxwidth, minheight, maxheight, parent)
{
	nexacro._CompositeComponent.call(this, id, left, top, width, height, right, bottom, minwidth, maxwidth, minheight, maxheight, parent);
	if(system.navigatorname != "nexacro" && system.navigatorname != "nexacro DesignMode")
	{
		nexacro.load_daumpostcode();
	}
	else
	{
		trace("DaumPostCode composite component supports only the web browsers");
	}
};

This approach dynamically inserts the script, and if multiple components are placed, the code should be inserted only once.

nexacro.daumpostcode_loaded = false;
nexacro.load_daumpostcode = function()
{
	if (nexacro.daumpostcode_loaded)
	{
		return;
	}
	nexacro.daumpostcode_loaded = true;
	var script = document.createElement("script");
	script.type = "text/javascript";
	script.src = "//dmaps.daum.net/map_js_init/postcode.v2.js?autoload=false";
	document.body.appendChild(script);
};

Modify the code generated with the postcode property as follows. Modify the other properties in the same way.

nexacro.DaumPostCode.prototype._p_postcode = "";
nexacro.DaumPostCode.prototype.set_postcode = function (v)
{
    if(this.form.editPostcode)
    {
        this.form.editPostcode.value = v;
    }
    this._p_postcode = v;
};
	
Object.defineProperty(nexacro.DaumPostCode.prototype, "postcode", {
		get: new Function("return this._p_postcode"),
		set: nexacro.DaumPostCode.prototype["set_postcode"],
		enumerable : true,
		configurable : true});	
	
nexacro.DaumPostCode.prototype._p_address = "";
nexacro.DaumPostCode.prototype.set_address = function (v)
{
    if(this.form.editAddress)
    {
        this.form.editAddress.value = v;
    }
    this._p_address = v;
};
	
Object.defineProperty(nexacro.DaumPostCode.prototype, "address", {
		get: new Function("return this._p_address"),
		set: nexacro.DaumPostCode.prototype["set_address"],
		enumerable : true,
		configurable : true});	
	
nexacro.DaumPostCode.prototype._p_detailAddress = "";
nexacro.DaumPostCode.prototype.set_detailAddress = function (v)
{
    if(this.form.editDetailAddress)
    {
        this.form.editDetailAddress.value = v;
    }
    this._p_detailAddress = v;
};
	
Object.defineProperty(nexacro.DaumPostCode.prototype, "detailAddress", {
		get: new Function("return this._p_detailAddress"),
		set: nexacro.DaumPostCode.prototype["set_detailAddress"],
		enumerable : true,
		configurable : true});

The actual returned data contains various properties, but in the example, only the postal code and road name address values are checked.

var that = this;
this.btnFindPostcode_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	if(daum)
	{
		daum.postcode.load(function(){
			new daum.Postcode({
				oncomplete: function(data) {
					that.parent.postcode = data.zonecode;
					that.parent.address = data.roadAddress;
				}
			}).open();
		});
	}
};

this.editDetailAddress_onchanged = function(obj:nexacro.Edit,e:nexacro.ChangeEventInfo)
{
	this.parent.detailAddress = e.postvalue;
};

Execution in the NRE is not supported, so testing cannot be done in the emulator. Instead, verify functionality in a web browser after deployment.

The component will be visible on the screen but will not function correctly. Messages are displayed in the Output window.

After searching for the postal code, verify whether the data has been processed in the corresponding properties.

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

Toggle Button

A toggle button is similar to a checkbox but is designed to represent the appearance of a physical switch. It is primarily used in mobile apps but is also commonly seen on the web.

To use the two property values, "rectangle" and "rounded," in Enum format, first add the EnumInfo items as shown below.

Set the edittype item to “Enum” and the enuminfo item to the previously created “ToggleType”. Set the defaultvalue item to “rectangle”.

Adjust the borderRadius property of the Static component based on the selected property value to change its appearance.

nexacro.ToggleButton.prototype._p_toggleType = "rectangle";
nexacro.ToggleButton.prototype.set_toggleType = function (v)
{
	this._p_toggleType = v;
	var togglebackground = this.form.staticToggleBox;
	var togglebutton = this.form.staticTogglebutton;
	if(togglebackground) {
		if(v=="rounded")
		{
			togglebackground.borderRadius = this.form.height+"px";
			togglebutton.borderRadius = "50%";
		}
		else
		{
			togglebackground.borderRadius = undefined;
			togglebutton.borderRadius = undefined;
		}
	}
};

nexacro.ToggleButton.prototype._p_toggleOnColor = "#2196F3";
nexacro.ToggleButton.prototype.set_toggleOnColor = function (v)
{
	this._p_toggleOnColor  = v;
	this._changecolor(this.value);
};	

nexacro.ToggleButton.prototype._p_toggleOffColor= "#CCCCCC";
nexacro.ToggleButton.prototype.set_toggleOffColor = function (v)
{
	this._p_toggleOffColor= v;
	this._changecolor(this.value);
};

nexacro.ToggleButton.prototype._p_value= false;
nexacro.ToggleButton.prototype.set_value = function (v)
{
	v = this._isChecked(v);
	if (this._p_value != v) {
		if (this.applyto_bindSource("value", v)) {
			this._setValue(v);
			this._changebutton(this.value);
		}
	}	
};

nexacro.ToggleButton.prototype._setValue = function (v) {
    this._p_value = v;
};

In the Project Explorer, select the ToggleButton.xcdl file, add the on_create_contents item in the properties window, and modify the code as follows. Initialize the Animation object to apply animation effects when toggling the on and off states of the button upon clicking the component.

The _changecolor function is responsible for changing colors based on the value property. Since the default value cannot be applied immediately when the component initializes in the app, add the code to reapply it in the on_create_contents function.

nexacro.ToggleButton.prototype.on_create_contents = function ()
{
	nexacro._CompositeComponent.prototype.on_create_contents.call(this);
	var aniObj = new nexacro.Animation("aniToggleBtn", this);
	aniObj.easing = "linear";
	aniObj.duration = 300;
	this.form.addChild("aniToggleBtn", aniObj);
	this.form.aniToggleBtn.addTarget("AniItem00", this.form.staticTogglebutton, "left:0");
	this._changecolor(this.value);
};

nexacro.ToggleButton.prototype._changecolor = function (value) {
	var backgroundvalue = this.toggleOffColor;
	var bordervalue = "4px solid "+this.toggleOffColor;
	var togglebackground = this.form.staticToggleBox;
	var togglebutton = this.form.staticTogglebutton;
		
	if(value) {
		backgroundvalue = this.toggleOnColor;
		bordervalue = "4px solid "+this.toggleOnColor;
	}
	if(togglebackground) {
		togglebackground.background = backgroundvalue;
		togglebutton.border = bordervalue; 	
	}
}

When the Static component within the composite component is clicked, the onclick event of the parent component is handled.

this.staticToggleBox_onclick = function(obj:nexacro.Static,e:nexacro.ClickEventInfo)
{
	this.parent.on_fire_onclick(obj, e.pretext, e.prevalue, e.posttext, e.postvalue);
};

this.staticTogglebutton_onclick = function(obj:nexacro.Static,e:nexacro.ClickEventInfo)
{
	this.parent.on_fire_onclick(obj, e.pretext, e.prevalue, e.posttext, e.postvalue);
};

nexacro.ToggleButton.prototype.readonly = false;

nexacro.ToggleButton.prototype._isChecked = function (value) {
	return nexacro._toBoolean(value);
};

nexacro.ToggleButton.prototype.on_fire_canchange = function (obj, prevalue, postvalue) {
	if (this.canchange && this.canchange._has_handlers)
	{
		var evt = new nexacro.CheckBoxChangedEventInfo(this, "canchange", prevalue, postvalue);
		return this.canchange._fireCheckEvent(this, evt);
	}
	return true;
};

_pToggleButton._changebutton = function (postvalue) {
	var leftvalue = 0;
	this._changecolor(postvalue);
	if(postvalue) {
		leftvalue = this.form.width/2;
	}
		
	if(this.form.aniToggleBtn)
	{
		this.form.aniToggleBtn.items[0].props = "left:"+leftvalue;
		this.form.aniToggleBtn.play();
	}
}

nexacro.ToggleButton.prototype.on_fire_onchanged = function (obj, prevalue, postvalue) {
	if (this.onchanged && this.onchanged._has_handlers)
	{
		var evt = new nexacro.CheckBoxChangedEventInfo(this, "onchanged", prevalue, postvalue);
		return this.onchanged.fireEvent(this, evt);
	}
};

nexacro.ToggleButton.prototype.on_fire_onclick = function (button, alt_key, ctrl_key, shift_key, screenX, screenY, canvasX, canvasY, clientX, clientY, from_comp, from_refer_comp, meta_key)	{
	var ret = nexacro._CompositeComponent.prototype.on_fire_onclick.call(this, button, alt_key, ctrl_key, shift_key, screenX, screenY, canvasX, canvasY, clientX, clientY, from_comp, from_refer_comp, meta_key);
	if (!this.enable || this.readonly) {
		return false;
	}
		
	var pre_val = this.value;
	var post_val;
	if (this._isChecked(pre_val)) {
		post_val = false;
	} else {
		post_val = true;
	}
		
	var ret = this.on_fire_canchange(this, pre_val, post_val);
	if (ret) {
		if (this.applyto_bindSource("value", post_val)) {
			this._setValue(post_val);
		}
			
		if (pre_val !== post_val) {
			this._changebutton(post_val);
			this.on_fire_onchanged(this, pre_val, post_val);
		}
	}
		
	return ret;
};

• Whether the toggle animation plays when the component is clicked.

• Whether the button toggles and changes color when the component is clicked.

• Whether the property value is applied when the property is set through a script.