yumoqing/bricks

Fork 0

yumoqing 2d8e72a5d6 bugfix

2025-11-19 12:30:39 +08:00

16 KiB

Raw Permalink Blame History

bricksコントロールのイベント処理

bricksコントロールのイベント処理は、コントロール記述データのbindsプロパティにイベント処理データを追加することで実現されます。

bricksがサポートするイベント処理タイプ

urlwidget
method
script
registerfunction
event

さらに、以下の複合型もサポートしています。

actions

イベント処理の定義では、「actiontype」属性を使用してイベント処理のタイプを指定します。

イベント処理定義のデータ要素

すべてのイベント処理タイプに共通するデータ要素：

wid

イベント発生元のコントロールID。「self」はbinds属性を持つコントロール自身を指します。IDには「a.b.c」形式が使用可能で、現在位置からIDがaのコントロールを探し、次にaからIDがbのコントロールを探し、さらにbからIDがcのコントロールを探すという意味になります。

特殊な約束されたコントロールID

self -- binds属性を持つコントロール自身
root -- <body>直下の最初のコントロール
body/app -- bricks.app
-x -- 現在位置から上位（祖先）にIDがxのコントロールを探す

event

コントロールのHTMLネイティブイベント、またはコントロールクラス内で定義されたイベント、あるいはeventイベント処理タイプのdispatch_event属性で定義されたイベントをサポートします。

actiontype

イベント処理のタイプを指定します。「urlwidget」「method」「script」「registerfunction」「event」、または複合型の「actions」をサポートしています。

conform

オブジェクト型。イベントバインディングの実行前にユーザー確認を必要とする場合に、optionsを含むことで確認ダイアログを表示できます。

datawidget

イベントに動的パラメータを追加する場合、その動的パラメータを取得するコントロールのIDを指定します。datawidgetのルールについてはコントロールIDをご覧ください。

動的パラメータを使用しない場合は、datawidget、datamethod、datascript、dataparamsの各属性を設定しなくても構いません。

datamethod

動的パラメータを取得するためのメソッド

datascript

動的パラメータを取得するためのスクリプト

dataparams

動的パラメータ取得時に渡すパラメータ（オプション）。オブジェクト型で、キーと値のペアで指定します。

popup_options

targetが「Popup」または「PopupWindow」の場合、PopupやPopupWindowの表示パラメータを定義します。

dismiss_events

文字列の配列。各文字列はPopupまたはPopupWindow内の子コントロールのイベントを表し、これらのイベントが発生したときにPopupまたはPopupWindowを閉じます。

eventpos

PopupまたはPopupWindowをマウスの位置に移動させます。

動的パラメータの取得について

バインディングタスクがリアルタイムデータをパラメータとして取得するには、以下の属性を指定する必要があります：

datawidget：文字列またはコントロール型。リアルタイムデータを取得するコントロール。
datamethod：文字列型。コントロールのメソッド。paramsを引数として呼び出し、リアルタイムデータを取得する。
datascript：文字列型。JavaScriptスクリプト。returnを使ってデータを返す。
dataparams：パラメータ（オプション）

datamethodはdatascriptよりも優先され、datawidgetコントロールからdatamethodを通じてデータを取得します。

target

イベント処理の対象となるコントロール。以下の形式のtarget定義をサポートします：

対象コントロールのインスタンスオブジェクト
文字列で、「Popup」と等しい場合
文字列で、「PopupWindow」と等しい場合
その他（コントロールオブジェクトのID）

actiontypeが「urlwidget」の場合は、targetはコンテナコントロールである必要があります。生成されたコントロールはtargetで指定されたオブジェクトに挿入または置き換えられます。それ以外のactiontypeの場合は、このオブジェクト上でメソッド、スクリプト、関数、イベントを実行します。

conform

イベント処理をユーザーの確認後に実行したい場合、イベント処理にconform属性を指定できます。イベント発生時に確認ウィンドウが表示され、ユーザーが確認した場合のみ処理が行われ、キャンセルされた場合は処理されません。

異なるイベント処理方法には一部異なる属性があります。以下にそれぞれ説明します。

urlwidget メソッド

urlwidgetイベント処理は、バックエンドからコントロール記述ファイルを取得し、動的にbricksコントロールを生成して、イベントのtargetで指定されたコントロール内に（挿入・置換・追加）するものです。

urlwidgetバインディングにはoptions属性とmode属性が必要です。以下を含みます：

url：文字列型。記述データを取得するURL
method：文字列型。URL呼び出しのメソッド。省略時は「GET」
params：オブジェクト型。呼び出し時のパラメータ。datawidgetから取得したデータがこの属性に影響します。

生成されたコントロールはtargetコントロールに追加されます。

例

{
	"widgettype":"VBox",
	"options":{
		"width":"100%",
		"height":"100%"
	},
	"subwidgets":[
		{
			"widgettype":"HBox",
			"options":{
				"height":"40px"
			},
			"subwidgets":[
				{
					"id":"replace",
					"widgettype":"Button",
					"options":{
						"width":"80px",
						"i18n":true,
						"label":"replace mode"
					}  
				},
				{
					"id":"insert",
					"widgettype":"Button",
					"options":{
						"width":"80px",
						"i18n":true,
						"label":"insert mode"
					}
				},
				{
					"id":"append",
					"widgettype":"Button",
					"options":{
						"width":"80px",
						"i18n":true,
						"label":"append mode"
					}
				}
			]
		},
		{
			"id":"main",
			"widgettype":"Filler"
		}
	],
	"binds":[
		{
			"wid":"replace",
			"event":"click",
			"actiontype":"urlwidget",
			"target":"main",
			"options":{
				"url":"{{entire_url('replace_text.ui')}}",
				"params":{
					"text":"Insert before"
				}
			}
		},
		{
			"wid":"insert",
			"event":"click",
			"actiontype":"urlwidget",
			"target":"main",
			"options":{
				"url":"{{entire_url('insert_text.ui')}}",
				"params":{
					"text":"Insert before"
				}
			},
			"mode":"insert"
		},
		{
			"wid":"append",
			"event":"click",
			"actiontype":"urlwidget",
			"target":"main",
			"options":{
				"url":"{{entire_url('subtext.ui')}}",
				"params":{
					"text":"Append After"
				}
			},
			"mode":"append"
		}
	]
}

上記の例では、縦方向に配置するコンテナ（VBox）を作成し、その中に横方向のコンテナ（HBox）とフィラー（Filler）を配置しています。HBox内には「replace」「insert」「append」というIDを持つ3つのボタンを配置しています。メインコントロール（VBox）のbindsでは、3つのボタンのclickイベントに対応する3つのイベント処理を定義しており、targetコントロールへの子コントロール挿入モード（全置換、既存の前へ挿入、既存の後ろに追加）をそれぞれ示しています。

method メソッド

targetパラメータとmethodパラメータを指定する必要があります。

target：文字列またはコントロール型。文字列の場合はgetWidgetById関数でコントロールインスタンスを取得します。
method：文字列。targetインスタンスのメソッド名。
params：メソッドに渡すパラメータ。

このバインディングにより、イベントがtargetコントロールの特定メソッドにバインドされ、paramsでパラメータを渡します。

例

{
	"widgettype":"VBox",
	"options":{
		"width":"100%",
		"height":"100%"
	},
	"subwidgets":[
		{
			"widgettype":"HBox",
			"options":{
				"height":"40px"
			},
			"subwidgets":[
				{
					"id":"changetext",
					"widgettype":"Button",
					"options":{
						"dynsize":false,
						"width":"80px",
						"i18n":true,
						"label":"Change text"
					}  
				},
				{
					"id":"smaller",
					"widgettype":"Button",
					"options":{
						"dynsize":false,
						"width":"80px",
						"i18n":true,
						"label":"Small size"
					}  
				},
				{
					"id":"larger",
					"widgettype":"Button",
					"options":{
						"dynsize":false,
						"width":"80px",
						"i18n":true,
						"label":"larger size"
					}
				}
			]
		},
		{
			"widgettype":"Filler",
			"options":{},
			"subwidgets":[
				{
					"id":"text_1",
					"widgettype":"Text",
					"options":{
						"dynsize":true,
						"text":"original text"
					}
				}
			]
		}
	],
	"binds":[
		{
			"wid":"changetext",
			"event":"click",
			"actiontype":"method",
			"target":"text_1",
			"params":"new text",
			"method":"set_text"
		},
		{
			"wid":"smaller",
			"event":"click",
			"actiontype":"method",
			"target":"app",
			"method":"textsize_smaller"
		},
		{
			"wid":"larger",
			"event":"click",
			"actiontype":"method",
			"target":"app",
			"method":"textsize_bigger"
		}
	]
}

上記の例では、3つのボタンがそれぞれappのtextsize_smaller()とtextsize_bigger()を呼び出して、bricks内の文字サイズを変更し、text_1コントロールの表示サイズに影響を与えています。

script メソッド

スクリプトにイベントをバインドします。以下の属性をサポートします。

script：文字列。スクリプト本体。
params：オブジェクト型。スクリプトはparams変数を使ってパラメータを取得できます。

スクリプト内で使用可能な変数：

this：イベント処理におけるtargetに対応するコントロールインスタンス
params：パラメータオブジェクト。datawidgetで取得したデータはparamsに追加されます。

例

{
	"id":"insert",
	"widgettype":"Button",
	"options":{
		"width":"80px",
		"i18n":true,
		"label":"click me"
	},
	"binds":[
		{
			"wid":"self",
			"event":"click",
			"actiontype":"script",
			"target":"self",
			"script":"console.log(this, params, event);"
		}
	]
}

上記の例では、「script」イベント処理を使ってボタンのclickイベントを処理し、クリック後にコンソールにイベントパラメータを出力しています。

registerfunction メソッド

イベントを登録済み関数にバインドします。詳細はRegisterFunctionを参照してください。

以下の属性をサポートします：

rfname：文字列。登録済みの関数名。
params：オブジェクト型。登録関数呼び出し時に渡されるパラメータ。

<link rel="stylesheet" href="http://localhost:80/bricks/css/bricks.css">

<!-- IE8対応（Video.js v7以前） -->
<script src="http://localhost:80/bricks/3parties/videojs-ie8.min.js"></script>
</head>
  <body>
  <script src="http://localhost:80/bricks/3parties/marked.min.js"></script>
  <script src="http://localhost:80/bricks/3parties/xterm.js"></script>
  <script src="http://localhost:80/bricks/3parties/video.min.js"></script>
  <script src="http://localhost:80/bricks/3parties/recorder.wav.min.js"></script>
<!---  <script src="http://localhost:80/bricks/3parties/videojs-contrib-hls.min.js"></script> --->
  <script src="http://localhost:80/bricks/bricks.js"></script>
	<script>
		/*
		if (bricks.is_mobile()){
			alert('wh=' + window.innerWidth + ':' + window.innerHeight);
		}
		*/
		var myfunc = function(params){
			this.set_text(params.text);
		}
		bricks.RF.register('setText', myfunc);
		const opts = {
			"widget": {
	"widgettype":"VBox",
	"options":{
		"width":"100%",
		"height":"100%"
	},
	"subwidgets":[
		{
			"widgettype":"HBox",
			"options":{
				"height":"40px"
			},
			"subwidgets":[
				{
					"id":"changetext",
					"widgettype":"Button",
					"options":{
						"dynsize":false,
						"width":"80px",
						"i18n":true,
						"label":"Change text"
					}  
				},
				{
					"id":"smaller",
					"widgettype":"Button",
					"options":{
						"dynsize":false,
						"width":"80px",
						"i18n":true,
						"label":"Small size"
					}  
				},
				{
					"id":"larger",
					"widgettype":"Button",
					"options":{
						"dynsize":false,
						"width":"80px",
						"i18n":true,
						"label":"larger size"
					}
				}
			]
		},
		{
			"widgettype":"Filler",
			"options":{},
			"subwidgets":[
				{
					"id":"text_1",
					"widgettype":"Text",
					"options":{
						"dynsize":true,
						"text":"original text"
					}
				}
			]
		}
	],
	"binds":[
		{
			"wid":"changetext",
			"event":"click",
			"actiontype":"registerfunction",
			"target":"text_1",
			"params":{
				"text":"new text"
			},
			"rfname":"setText"
		},
		{
			"wid":"smaller",
			"event":"click",
			"actiontype":"method",
			"target":"app",
			"method":"textsize_smaller"
		},
		{
			"wid":"larger",
			"event":"click",
			"actiontype":"method",
			"target":"app",
			"method":"textsize_bigger"
		}
	]
};	};
		const app = new bricks.App(opts);
		app.run();
</script>
</body>
</html>

上記の例では、bricks.RFを使ってsetText関数を登録し、メインコントロールのbinds領域でchangetextボタンのクリック時に登録関数setTextを呼び出すように定義しています。

event メソッド

イベントをバインドし、targetオブジェクトのイベントをトリガーします。

以下の属性をサポートします：

dispatch_event：トリガーするイベント名
params：イベントに渡すパラメータ。イベントハンドラはevent.paramsでこの値を取得できます。

例

{
	"widgettype":"VBox",
	"options":{},
	"subwidgets":[
		{
			"id":"btn1",
			"widgettype":"Button",
			"options":{
				"label":"press me"
			}
		},
		{
			"id":"txt1",
			"widgettype":"Text",
			"options":{
				"otext":"I will dispatch a event when btn1 pressed",
				"i18n":true
			}
		}
	],
	"binds":[
		{
			"wid":"btn1",
			"event":"click",
			"actiontype":"event",
			"target":"txt1",
			"dispatch_event":"gpc"
		},
		{
			"wid":"txt1",
			"event":"gpc",
			"actiontype":"script",
			"target":"self",
			"script":"alert('yield');"
		}
	]
}

上記の例では、メインコントロールのbinds領域で、btn1のクリックイベントをeventタイプで処理し、txt1テキストコントロールのgpcイベントを発火させるように定義しています。また、txt1のgpcイベント発生時にscriptタイプでメッセージをアラート表示する処理も定義しています。

確認が必要なイベント処理の定義

場合によっては、ユーザーの確認を得てからイベントを処理したいことがあります。ユーザーがキャンセルした場合は処理を行わないようにします。たとえば、データ削除時などに確認を求めるケースです。

例

{
	"id":"insert",
	"widgettype":"Button",
	"options":{
		"width":"80px",
		"i18n":true,
		"label":"click me"
	},
	"binds":[
		{
			"wid":"self",
			"event":"click",
			"actiontype":"script",
			"conform":{
				"title":"conformtest",
				"message":"テストイベント処理前のユーザー確認機能、確認コード？"
			},
			"target":"self",
			"script":"alert('確認過眼神!')"
		}
	]
}

上記の例では、ボタンのclickイベントをscriptタイプで処理するように定義していますが、処理前に確認メッセージを表示し、ユーザーが承認した場合のみ処理を実行し、キャンセルした場合は何もしません。

16 KiB Raw Permalink Blame History Unescape Escape

bricksコントロールのイベント処理

bricksがサポートするイベント処理タイプ

イベント処理定義のデータ要素

wid

特殊な約束されたコントロールID

event

actiontype

conform

datawidget

datamethod

datascript

dataparams

popup_options

dismiss_events

eventpos

動的パラメータの取得について

target

conform

urlwidget メソッド

method メソッド

script メソッド

registerfunction メソッド

event メソッド

確認が必要なイベント処理の定義

16 KiB

Raw Permalink Blame History