ワークフロー

そして、ここからがWebアプリケーションを作る上での重要なポイントになったのです。結局のところ、これまでやってきたことはすべて、ただ絵を作るだけだったのです。おそらく、かなりかわいいですが、かなり無駄です。今、私たちは主要なことを行う必要があります。それを復活させ、私たちのアクションにリアクションを追加します。

各コンポーネントには、このタスクのための Workflowタブがあります。その中で、ビジネスプロセスを作成し、その起動のための条件（トリガー）を定義することができます。Calculate ボタンに対して、このようなビジネスプロセスを作成してみましょう。

トリガー

ビジネスプロセスの作成は、モジュール4でバックエンドのビジネスプロセスを作成したときと非常によく似ています。共通のキャンバスがあり、そこにブロックが追加され、それらの間の接続が一連のアクションを決定します。重要な違いは、フロントエンドワークフローには、ビジネスプロセスを開始するための多くの異なるブロックがあることです。これらは、ビジネスプロセスを開始するためのトリガーとなる。トリガー自体は各コンポーネントで異なることがありますが（ボタンにはクリックがあり、テーブルにはデータの更新があり、リストには何らかのオプションの選択があります）、作業の一般的なロジックはどのような場合でも同じです。あるイベントが発生し、このイベントが対応するビジネスプロセスを開始する。

大まかな計画を決めておこう。ボタンがクリックされたら何をするか。

• XとYの値を調べる。対応する入力フィールドからそれらを取得する。
• 計算のためのエンドポイントを起動し、XとYのパラメータを渡す。
• 結果コンテナを表示する。
• 計算結果は、必要なフィールド（Label ）に入力してください。
  

ビジネスプロセスブロック

最初のステップでは InputFloat Get Propertiesブロックが必要です。これは、ユーザーが入力した値だけでなく、その他の設定（例えば、外観の設定や値の許容範囲など）も含めて、コンポーネントの現在の値を読み取ります。を取得する必要があります。 Valueこのブロックには、ユーザーが入力したデータが含まれています。その入力フィールドからの各値と、我々はこのための2つのブロックが必要です（X用とY用）。その中で、入力での値を選択する必要があります。 Component ID値を入力する必要があります。あなたが作成するときにそれらの名前を指定することを忘れていない場合、それは必要なコンポーネントを検索して選択することは困難ではないだろう。

次のステップは、エンドポイントを起動することです。ここでフロントエンドとバックエンドの接続が行われ、計算のためのコマンドがブラウザからサーバーに送信されます。私たちのアプリケーションの各エンドポイントは、別々のブロックとして表現されています。必要なものを選択して接続すればよいのです。このエンドポイントには GETメソッドとmodule4-basic URL が割り当てられました。ブロックのリストでは、この名前で表示されます。 Server request GET /module4-basic/

コンポーネントとは異なり、エンドポイントはEndpoint ID を設定する必要はありません（デフォルトで正しく設定されています）。前のステップで取得した入力XとYに適用するだけでよいのです。

次の作業は、結果コンテナを表示することです。これを行うには Container Update Propertiesブロックを使用します。ブロック自体の中で、目的のコンテナのID を選択し、次のように設定します。 Visible = true.

最後に残っているのは、配列から5つの結果要素をWebアプリケーションの対応するコンポーネントに分配することです。結果は常に厳密に定義された順序で来るはずなので、希望のインデックスの要素を順次ピックアップして、その値をLabel のコンポーネントに割り当てるだけです。そのためには Array Elementブロック（インデックスは0から4まで）を使用します。 toString(変換する Floatのデータを String)、および Label Update Propertiesを使って、Label のテキストを変更し、その結果を表示しています。

任意のコンポーネントのプロパティを更新するために、2つのブロックオプションがあることにお気づきでしょうか。 Update Propertiesと Set Properties.両者の違いは Patchと Putメソッドと同じです。最初のメソッドは明示的に指定されたプロパティのみを変更し、2番目のメソッドはそれらをすべて上書きします。

最終結果

これで、ビジネスプロセスの作成は完了です。最終結果を保存、公開、確認することができます。

すべてが正しく行われた場合、最終結果はこのようになります。