コンテナのイベントの挙動を確認する[Outsystems]

2022-09-03

今回検証するのはOutsystemsのこちら!

『Eventsに何を設定したら、どう動くのか』についてです!

というのも、意外とこれについて詳細を記載しているページがOutsystemsの公式サイトにもない!!ので!
「専門のページがない=簡単」かと思いきや、厄介なことにこちらのEventsたちは何も知らずに使うと普通にバグが出てきたりします。

では早速挙動を確認していきましょう。

そもそもEventsって何に使えるの?

こちらの機能を使うことで、コンテナの中に対して特定の操作を行う(ex.クリックする)とクライアントアクションを呼び出すことができます。
これによって、『クリックしたらポップアップを開く』とか『タッチ操作で他の画面に遷移する』とかユーザの操作に応じて画面情報を変えることが可能になります。

この『Events』の選択肢って全部見たことある?

ドロップダウンで表示されるのは以下の処理です。

  • onblur
  • onchange
  • onclick
  • ondoubleclick
  • onfocus
  • onkeydown
  • onkeypress
  • onkeyup
  • ontouchstart
  • ontouchmove
  • ontouchend

画面系やってる人には見たことがある名前……だと思っています。
こちらに設定できる値はJavaScriptのイベントになります。

ドロップダウンの中から選べばなければいけないのかと思いきや、実は他のイベントも設定できます。
例えば特定のキー操作でアクションを発生させたりなんてことも可能です。

JavaScriptのイベント一覧は下記のサイトで確認できます。

JavaScriptは、クリックなどのイベント発生時の処理(イベントハンドラ)を、HTMLの各要素に登録することができる。HTMLドキュメント上で登録することも…
alphasis.info

一つ一つ挙動を確認!

今回は適当なアクションを作って何をしたら呼び出されるのかを確認していきます。

onblur

起動条件:フォーカスを外した時

onchange

起動条件:変更時

onclick

起動条件:クリック時

つまり、1回目入力直後はアクションは走らず、次にクリックした時にアクションが走る。
変数の内容を上書きされる直前バックアップとかしたい場合であれば上手く使えそう。

ondoubleclick

起動条件:ダブルクリック時

onfocus

起動条件:フォーカスしている時

onkeydown

起動条件:キーを押した時

文字入力前に起動するイベントため、変数に入力値を設定する処理の場合は特に理由がなければ『onchange』を使った方がよい。
こちらのイベントから変数に設定すると、最後の1文字が消えます

onkeypress

起動条件:キーを押した時(非推奨)

ほとんどのブラウザが非対応となっているイベントです。
GoogleChromeで実行しましたが当然の如く動きませんでした。

onkeyup

起動条件:キーを離した時

その名の通り、キー入力以外には反応しない

例えば変換時に予測変換をクリックして選んだ場合やIMEパッドなどを使ってキーボード操作をせずに入力した場合は反応しないので、入力値を変数に入れる等の処理を組み込む場合は考慮が必要。
この場合も、特に理由がなければ『onchange』を使った方がよい。

ontouchstart

起動条件:画面をタッチした時

ontouchmove

起動条件:画面をタッチしている時

タッチだけでは起動しません。タッチ→動かすことで起動。

ontouchend

起動条件:画面タッチ終了した時

全体的に言えること

これらのイベントは主に『ユーザの操作によって発火する』イベントになります。
なので初期値設定などoutsystemsから明示的に変数を変更した場合はonchangeイベントであっても発火しません。

初期値設定などはイベントに頼らず、アクションとして明示的に行いましょう。