トグルボタン

トグルボタンはチェックボックスと似ていますが、物理的なスイッチ画像を表しています。モバイルアプリはもちろん、ウェブでも頻繁に使用されます。

「rectangle」、「rounded」の2つのプロパティ値をEnumの形で使用するために、下図のようにEnumInfo項目を先に追加します。

edittype項目は「Enum」に設定し、enuminfo項目は前の段階で生成した「ToggleType」に設定します。defaultvalue項目値は、「rectangle」に指定します。

選択したプロパティ値に応じてStaticコンポーネントのborderRadiusプロパティ値を調整して形を変更します。

_pToggleButton.toggleType = "rectangle";
_pToggleButton.set_toggleType = function (v)
{
	this.toggleType = v;
	var togglebackground = this.form.staticToggleBox;
	var togglebutton = this.form.staticTogglebutton;
	if(togglebackground) {
		if(v=="rounded")
		{
			togglebackground.set_borderRadius(this.form.height+"px");
			togglebutton.set_borderRadius("50%");
		}
		else
		{
			togglebackground.set_borderRadius(undefined);
			togglebutton.set_borderRadius(undefined);
		}
	}
};

_pToggleButton.toggleOnColor = "#2196F3";
_pToggleButton.toggleOffColor = "#CCCCCC";

_pToggleButton.set_toggleOnColor = function (v)
{
	this.toggleOnColor = v;
	this._changecolor(this.value);
};	

_pToggleButton.set_toggleOffColor = function (v)
{
	this.toggleOffColor = v;
	this._changecolor(this.value);
};

_pToggleButton.value = false;

_pToggleButton.set_value = function (v)
{
	v = this._isChecked(v);
	if (this.value != v) {
		if (this.applyto_bindSource("value", v)) {
			this._setValue(v);
			this._changebutton(this.value);
		}
	}	
};

_pToggleButton._setValue = function (v) {
    this.value = v;
};

Project ExplorerでToggleButton.xcdlファイルを選択して、プロパティウィンドウでon_create_contents項目を追加し、下記のようにコードを修正します。Animationオブジェクトは、コンポーネントをクリックする際にボタンのon、offの状態を変更すると、アニメーション効果を適用するため初期化します。

_changecolor関数は、valueによって色を変更するコードですが、アプリでコンポーネントが初期化されたときにすぐデフォルト値を適用できないため、on_create_contents関数でもう一度適用するコードを追加します。

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

_pToggleButton._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.set_background(backgroundvalue);
		togglebutton.set_border(bordervalue);		
	}
}

コンポジットコンポーネントに含まれているStaticコンポーネントをクリックすると、上位コンポーネントのonclickイベントを処理します。

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

_pToggleButton.value = false;
_pToggleButton.readonly = false;

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

_pToggleButton.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();
	}
}

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

_pToggleButton.on_fire_onclick = function (button, alt_key, ctrl_key, shift_key, screenX, screenY, canvasX, canvasY, clientX, clientY, from_comp, from_refer_comp) {
	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 nexacro.Component.prototype.on_fire_onclick.call(this, button, alt_key, ctrl_key, shift_key, screenX, screenY, canvasX, canvasY, clientX, clientY, from_comp, from_refer_comp);
};

• コンポーネントのクリック時、トグルアニメーションが再生されること

• コンポーネントのクリック時、ボタンがトグルしながら色が変わること

• スクリプトでプロパティを指定する際にプロパティ値が適用されること

_pToggleButton.on_init_bindSource = function (columnid, propid, ds)
{
	if (propid == "value") {
		this._setValue(this._isChecked(undefined));
		this._changebutton(this.value);
	}
};	
	
_pToggleButton.on_change_bindSource = function (propid, ds, row, col)
{
	if (propid == "value") {
		this._setValue(this._isChecked(ds.getColumn(row, col)));
		this._changebutton(this.value);
	}
};	
	
_pToggleButton.on_getBindableProperties = function ()
{
	return "value";
};