本章では、コンポジット・コンポーネントにプロパティ、メソッド、イベントを追加する方法を説明します。

プロパティ追加

文字列プロパティ追加

Calendarコンポーネントで選択した値(value)にすぐにアクセスできるプロパティを追加します。プロパティ名はfromValue、toValueです。

Project Explorerでオブジェクトを選択し、コンテキストメニューで［Add > Property］項目を選択することもできます。

Property Information項目では、プロパティに関する情報を設定することができます。例題では、プロパティ関連情報はデフォルト値を保持します。

「Make setter function in a module scripts」項目では、プロパティのSetter Function スケルトンコードを自動生成するかどうかを設定します。MetaInfo項目のunused、readonly、initonlyの中で一つでもtrueに設定した場合、該当チェックボックスは無効化されます。

使用者がfromValueプロパティ値を設定する場合、該当プロパティ値をCalendarコンポーネントのvalue値で渡します。

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

Calendar コンポーネントで選択した値が変更された場合、値をfrom Valueプロパティ値に保存します。

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

Enumプロパティ追加

Enumプロパティは、値を列挙型（enumeration）で指定できるプロパティを意味します。たとえば、Calendarコンポーネントのtypeプロパティ値は「normal | monthonly | spin」の3つの値の中から選択できますが、あらかじめ指定できるプロパティ値をEnumInfoプロパティとして追加して使います。

Calendarコンポーネントのスタイルを変更できるプロパティを追加します。 プロパティ名はcolorThemeです。プロパティを追加する前にEnumInfoから追加する必要があります。

選択した値に応じてCalendarコンポーネントで使用するcssclassプロパティ値を変更します。

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

コンポーネントを実行する際にプロパティ値を処理

下記のようにインターフェイス関数を追加して実行する際にプロパティ値として設定した値が反映されるようにします。

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

メソッド追加

パラメータなしのメソッド（getDayCount）を追加

Calendarコンポーネントで選択した値（value）の差を計算して返すメソッドを追加します。メソッド名は、getDayCountです。

Project Explorerからオブジェクトを選択し、コンテキストメニューから「Add > Method」を選択することもできます。

Method Informationでは、メソッド関連情報を設定できます。例題では、2つのCalendarコンポーネントから選択した日付の間の差を計算して返すメソッドを作成します。Return Information項目でTypeの値を「Integer」に設定します。

「Make setter function in a module scripts」では、メソッドのFunctionスケルトンコードを自動生成するかどうかを設定します。メタインフォunusedを「true」に設定した場合、該当チェックボックスは無効になります。

「Next」ボタンをクリックすると、メソッドで使用するパラメータを指定できます。例題ではパラメータを使用せず、該当ステップをスキップしました。

2つのCalendarコンポーネントの値を比較し、差分を返します。

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

コンソールウィンドウでメソッド名を入力する際に、IntelliSense機能が動作することも確認できます。

パラメーター付きメソッド（addDay）の追加

最初のCalendarコンポーネントで選択した値(value)にパラメータで送信された日付だけを加えて2番目のCalendarコンポーネント値に設定するメソッドを追加します。メソッド名はaddDayです。

Project Explorerでオブジェクトを選択し、コンテキストメニューから「Add > Method」項目を選択することもできます。

Method Information項目ではメソッド関連情報を設定できます。例題では、最初のCalendarの日付にパラメータとして渡された数字を加えて2番目のCalendarコンポーネントに設定し、結果値を返します。Return Information項目でTypeの値を「Boolean」に設定します。

Arguments項目で、「+」ボタンをクリックしてパラメータを追加し、Type項目を「Integer」に設定します。

パラメータを追加する際にはarg00形式で名前が付けられますが、項目を選択して、コンテキストメニューから「Rename」項目を選択すると、名前を変更することができます。例題では、名前をnDayに変更しました。

パラメータが複数である場合は、上下矢印を利用して順序を変更することができます。

最初のCalendarコンポーネント値にパラメータに渡された値を加え、2番目のCalendarコンポーネント値として指定します。

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

イベント追加

Calendarコンポーネントで値が変更された場合（onchanged）、それを確認できるイベントを追加します。イベント名は、onchangedです。

Project Explorerでオブジェクトを選択し、コンテキストメニューから「Add > Event」項目を選択することもできます。

イベントによって戻り値がある場合には、Return InformationのTypeを設定してください。例題では戻り値がないため、該当の項目の設定は不要です。

例題では、項目をnexacro.ChangeEventInfoに変更しました。

まず、コンポジットコンポーネントを初期化する関数に、this.addEventというメソッドを呼び出します。コンポーネント内部にイベントリストを管理する変数がありますが、addEventメソッドが実行されて該当リストにイベントを追加します。

そして、コードの下に下記のイベント関数を追加します。

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

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

追加したイベントはエミュレータでテストできず、モジュール配布後にアプリで確認できます。

モジュールインストール後に追加したプロパティ、メソッド、イベントを確認

nexacro studioでモジュールをインストールした後に追加したプロパティ、メソッド、イベントをどのように使用するか説明します。

プロパティウィンドウに追加したプロパティ、メソッドの表示

プロパティウィンドウに追加したプロパティとイベントが表示されます。 値を指定すると、デザインタブで値が変更されることが確認できます。

colorThemeプロパティ項目を選択すると、ドロップダウンリストで指定されたプロパティ値が表示されるか確認できます。値を選択すると、nexacro studioのデザインウィンドウで変更されたスタイルが適用されます。

IntelliSense動作時に追加したプロパティ、メソッド、イベント表示

スクリプトタブでIntelliSense動作時に追加したプロパティやメソッド、イベントが表示されることも確認できます。

メソッド動作を確認

メソッドの呼び出し時に正常に値を返すことも確認できます。

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

メソッドの実行結果は、ブラウザの開発者ツールコンソール画面で確認できます。

イベント動作を確認

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

メソッドの実行結果は、ブラウザの開発者ツールコンソール画面で確認できます。

MetaInfo編集（プロパティ、メソッド、イベント）

プロパティ、メソッド、イベントを追加するウィザードで詳細項目を設定できることをMetaInfoと言います。Project ExplorerでMetaInfoファイルの下にあるオブジェクトのProperty、Method、Event項目を選択してダブルクリックすると、詳細項目が編集できます。

オプションに基づいて表示されるリストを選択して表示することができます。

プロパティ

メソッド

イベント