イベントとアクションを設定する

Slate のイベントパネルでは、アプリケーションの作成者が、特定のイベントが発生したときに実行される操作を設定できます。

アクションは、ダイアログやトーストの開閉、クエリの実行、変数の値の設定など、アプリケーションの動作を変更するものです。

イベントは、アクションを実行するトリガーです。アプリケーションでのユーザーのインタラクション（クリック、値の変更、ダイアログの開閉）や、データの読み込み状態（クエリの実行完了）などが該当します。

イベントパネルには、Slate アプリケーションで設定されているすべてのイベントとアクションのペアが表示されます。また、Handlebar 参照と JavaScript を使用してイベントのカスタムロジックを定義し、トリガーされたアクションに渡す値を制御することもできます。関数と同様に、イベントの JavaScript は DOM や Slate のスペースにアクセスできず、状態も保存されません。

イベントとアクションを使用すると、Handlebar 参照のみを使用する場合よりも、アプリケーションの動作をはるかに柔軟かつ確実に制御できます。

• 例
  • 例1：ボタンのクリック時に手動クエリをトリガーする
  • 例2：変数をドロップダウンの値の2倍に設定する
  • 例3：時間の経過とともに蓄積されるオブジェクトのリストを変数で管理する
  • 例4：ボタンのクリック時に条件付きで手動クエリをトリガーする

例

例1：ボタンのクリック時に手動クエリをトリガーする

このイベントは、ボタンがクリックされるとクエリを実行します。

イベントパネルを開き、新しいイベントを作成します。

トリガーとなるイベントに w_button.click、トリガーされるアクションに q_query.run を選択し、更新するを選択して変更を保存します。この組み合わせでは JavaScript は不要です。

これで、ボタンがクリックされるたびにクエリが再実行され、ほかの Slate の関数やウィジェットで使用するための新しいデータが取得されます。

例2：変数をドロップダウンの値の2倍に設定する

このイベントは、ドロップダウンで選択された数値の2倍に変数を設定します。注：この例は説明のみを目的としています。通常、このような処理には Slate の関数を使用してください。

ユーザーがさまざまな数値から選択できる w_selectionDropdown という名前のドロップダウンウィジェットと、選択された値の2倍の値を格納するための変数 v_doubleSelection があるとします。この動作を実現するには、イベントパネルを開き、新しいイベントを作成します。イベントに w_selectionDropdown.selectedValue.changed、アクションに v_doubleSelection.set を選択します。次に、イベントパネルに以下のコードを入力します。

Copied!
1
2
var dropdownSelectionValue = {{slEventValue}};
return 2 * dropdownSelectionValue;

最終的には次のようになります。

{{slEventValue}} は、イベントパネルで使用できる特別な handlebars 値です。トリガーとなるアクションに関連する値がある場合、{{slEventValue}} はその関連する値になります。.changed アクションの場合、{{slEventValue}} は関連するウィジェットプロパティの変更後の値です。

したがって、ドロップダウンが変更されるたびに、コードはドロップダウンの変更後の値を取得し、2倍にして返します。.set アクションはこの戻り値を使用し、変数を返された値に設定します。つまり、ドロップダウンが変更されるたびに、コードはドロップダウンの新しい値を取得し、2倍にして、その2倍の値を変数に設定します。

例3：時間の経過とともに蓄積されるオブジェクトのリストを変数で管理する

このイベントは、ユーザーがドロップダウンで選択したすべての値の履歴を保持し、その値のリストをアプリケーションのほかの場所で利用できるようにします。

ユーザーが選択できる選択肢を持つ w_selectionDropdown という名前のドロップダウンウィジェットと、選択履歴を格納するための変数 v_selectionHistory があるとします。この動作を実現するには、イベントパネルを開き、新しいイベントを作成します。イベントに w_selectionDropdown.selectedValue.changed、アクションに v_selectionHistory.set を選択します。次に、イベントパネルに以下のコードを入力します。

Copied!
1
2
3
4
var history = {{v_selectionHistory}};
var newValue = {{slEventValue}};
history.push(newValue);
return history;

最終的には次のようになります。

これで、ユーザーがドロップダウンから何かを選択するたびに、イベントがトリガーされます。コードは v_selectionHistory の現在の値を取得し、{{slEventValue}} で渡された新しく選択された値をリストの末尾に追加して、追加後の履歴を返します。アクションは v_selectionHistory.set なので、変数 v_selectionHistory はこの新しい配列に設定され、新しく選択された項目が蓄積された履歴に追加されます。

例4：ボタンのクリック時に条件付きで手動クエリをトリガーする

このイベントは、ボタンがクリックされるとクエリを実行します。ただし、必要な入力ウィジェット w_input1 と w_input2 にユーザーがデータを入力している場合に限ります。

w_input1 と w_input2 という名前の2個の入力ウィジェット（ユーザーが入力できるテキストフィールド）があるとします。また、w_buttonConditional という名前のボタンと、手動クエリ q_queryConditional があるとします。

さらに、クエリが入力ボックスにユーザーが入力した値、つまり w_input1.text と w_input2.text に依存しており、この2つに値がなければクエリを実行しても意味がないとします。そのため、これらが空の場合は、ボタンがクリックされてもクエリを実行しないようにします。これは次の方法で実装できます。新しいイベントを作成し、イベントに w_buttonConditional.click、アクションに q_queryConditional.run を選択します。次に、イベントパネルに以下のコードを入力します。

Copied!
1
2
3
4
5
var input1Text = {{w_input1.text}};
var input2Text = {{w_input2.text}};
if (input1Text === "" || input2Text === "") {
  return {{slDisableAction}};
}

最終的には次のようになります。

{{slDisableAction}} は、イベントパネルで使用できる特別な handlebars 値です。パネル内のコードからこの値を返すと、トリガーされたアクションが無効になります。つまり、w_input1 または w_input2 のいずれかが空の場合、この特別な値が返され、クエリ q_query は実行されません。一方、両方の入力に値がある場合は、何も返されず、アクションは通常どおり実行されます。