便利なクライアントからコンポーネントへの変換ガイド
2024年12月
このクライアントは、最初のラボで使用されていたものです。 Vantiq における生成 AI の紹介 クラス。ラボでは、学生はそれを Generative AI を使用して犬の行動に関する質問に答えるサービスに接続します。
ユーザーが質問を入力し、「送信」をクリックすると、回答を含む新しいフィールドが表示されます。ユーザーは質問を続けることができ、新しい回答が新しいフィールドに表示されます。
学生はクライアントをあまり変更する必要はありません。クライアントは、実験をより見やすく、面白くするためのものなので、このクライアントをコンポーネントに変換するのに最適なケースのように見えます。利点:
- 混乱を招くコードを可視化から排除
- 再利用可能でモジュール式
- カタログからインストールできるアセンブリに変換できます
- まともな使用例なので、ブログに書く面白い内容ができました
これまでクライアント全体を単一のコンポーネントに変換すると、新しいエンティティはカスタムウィジェットになり、次のように動作する必要があります。 部 全体の。これは変換の実行方法に大きく影響するため、覚えておいてください。
導入部分はこれで十分です。クライアントをコンポーネントに変換する手順は次のとおりです。
ステップ1: 二重袋に入れても問題ない
クライアントがすでにレイアウト ウィジェットに完全に囲まれているとします。それを選択して [コンポーネントの作成] ボタンをクリックしたくなるかもしれませんが、まずは選択したものを別のレイアウト ウィジェットで囲むことをお勧めします。そうしないと、最も外側のレイアウト ウィジェットが新しいコンポーネントの名前を引き継ぎます。
ステップ2： クライアント.データ.xxx になる .configuration.xxx
新しいコンポーネントが作成されると、クライアント データ オブジェクトは消えます。コンポーネント エディターで再度作成した場合でも、別のクライアントで使用されると再び消えます。
代わりに、データ オブジェクトをコンポーネント構成オブジェクトにします。次に、コード内で次のように参照する必要があります。
var cmp = client.getWidget(“コンポーネント名”);
cmp.configuration.CustomerID = 5;
ただし、問題があります。それは、コンポーネント内のコードからコンポーネント名を確実に知ることができないので、コンポーネント ウィジェットをどのように参照するのでしょうか。
- コンポーネントレベルまたはコンポーネント階層のどこかから： 例えば:
- コンポーネント内の別の場所から、子を選択し、その親を参照します。
- getWidget(“SubmitButton”).parent.configuration.CustomerID
混乱していますか？説明しましょう。私たちのユースケースでは、コンポーネント自体にonStartコードがあるので、次のように構成プロパティを参照できます。 この構成プロパティ。
また、送信ボタンのコードもあります。これはコンポーネント内のウィジェットであり、次のように構成プロパティを参照することもできます。 この構成プロパティ。 ここまでは順調ですね。
最後に、データ ストリームの onDataArrived のコードがあります。これはコンポーネント階層の一部ではありません。構成プロパティにアクセスするには、コンポーネント ウィジェットを参照するための「子供を探す」ハックを使用する必要があります。これはすぐにわかります。
[ この.configuration.root ドキュメントに記載されています。これは、コンポーネント内のウィジェット イベント ハンドラーには機能しますが、コンポーネント構成プロパティにアクセスするには機能しません。]
ステップ3： オンスター CPコード になる コンポーネント開始時 CPコード
クライアントまたはページの onStart コードは新しいコンポーネントには組み込まれないため、古いクライアントからコピーして、コンポーネントの onComponentStart イベント コードに貼り付ける必要があります。
ステップ4: データストリームの管理
コンポーネント内のデータストリームは興味深いものです。クライアントデータオブジェクトとは異なり、クライアントデータストリームは 意志 デフォルトでは、新しいコンポーネントの一部となり、その onDataArrived コードも同様になります。
消費されると、データ ストリームは見えなくなりますが、それでも存在し続け、それにバインドされているコンポーネントの部分はそれに応じて反応します。
コンポーネント構成プロパティには「データ ストリーム」タイプが用意されているため、コンシューマーは独自の表示可能なデータ ストリームを作成し、それを使用して非表示のデータをオーバーライドしながら、元のデータ ストリームに関連付けられたコードを保持することができます。
DataStreams 用に事前に作成されたコードには問題があります。まず、コードはコンポーネント自体にアクセスできないため、コンポーネントの構成プロパティにもアクセスできません。これを回避するには、コンシューマーがクライアント データ オブジェクトを作成し、コンポーネントの onStart コードでその予想される client.data を入力します。必要なプロパティ値を持つオブジェクト。
ステップ5： client.getWidget （時々） クライアント.getComponentWidget
安心してください。すべてのインスタンスを変更する必要はありません。 client.getWidget コンポーネントに関連するすべてのコードで クライアント.getComponentWidgetほとんどの場合、元のコードは問題なく動作します。しかし、 ドキュメントの説明によるとただし、状況によっては、特に非同期コード ブロックでは、コンポーネント内のウィジェットの実際の名前とコンテキストに合わせて変更された名前を追跡する内部の「マジック」が混乱する可能性があります。
すべての手順: ユースケースに合わせてまとめる
- 「Dog Psychology」クライアントをコンポーネントにする前にまずやるべきことは、最も外側の垂直レイアウト「dogLayout」を別の垂直レイアウトに配置することです。（ 犬のレイアウト (後でコードで説明します。) それは簡単で、これで最も外側のレイアウトに「DogAdvisorComponent」という名前が付けられました。
私たちの「Doc Psychology」クライアントでは、次の 3 か所にコードがありました。
- クライアントのonStart
- 送信ボタンのonClick
- DataStreamのonDataArrived
- 私たちが持っていたクライアントデータはCustomerIDで、onStartコードで設定され、表示された質問を追跡するために使用されます。（会話を管理するわけではなく、ユーザーが何を尋ねてAIが何を返したかの履歴であり、AIはコンテキストを追跡していません。）そこで、新しいConfiguration整数を作成します。 顧客ID コンポーネント -> プロパティの編集 -> 構成ウィンドウで。
- Client onStart を Component onStart にコピーする場合、最初に行う必要がある変更は次の変換だけです。
- data.CustomerID を this.configuration.CustomerID に変更して設定します。
- this.configuration.CustomerID = Math.floor(Math.random() * 10000000000);
- データストリーム onDataArrived コード。データストリーム onDataArrived のためだけに、このクライアントをコンポーネントではなくクライアント テンプレートに変更した方がよかったのではないかと思います。文句はもう十分です。次に進みましょう。ここでコードを動作させるには、次のようにします。
- クライアントデータオブジェクトが必要だったので、 data.dog_psych_DogAdvisorComponent (これを DAC と呼びます)
- そのオブジェクト内で、コンポーネントのonStartコードはCustomerID構成プロパティを …DAC.顧客ID
- 別のプロパティを作成しました: …犬のレイアウトonStart コードでも同様に:
- client.data.dog_psych_DogAdvisorComponent.AIResponse = this.configuration.AIResponse;
- client.data.dog_psych_DogAdvisorComponent.dogLayout = client.getWidget(“dogLayout”);
- これで、コードは CustomerID をストリームで送信されたものと比較し、必要に応じて新しい複数行の入力フィールドを作成して dogLayout に配置し、ストリームからの AI 応答を表示できるようになりました。
if (!client.getComponentWidget(cmp, “aiResponse”)) {
var ansPanel = 新しいMultilineInput();
ansPanel.name = “aiResponse”;
ansPanel.heightPolicy = Widget.SizePolicy_Explicit;
ansPanel.widthPolicy = Widget.SizePolicy_SizeToParent;
パネルのプロパティ
ansPanel.boundValue = data.indexResponse.answer;
ansPanel.label = “ドクターの応答”;
ansPanel.labelColor = “インディアンレッド”;
client.data.dog_psych_DogAdvisorComponent.dogLayout.addChild(ansPanel, 3);
場合} else {
client.getComponentWidget(cmp, “aiResponse”).boundValue = data.indexResponse.answer;
}
- 上記のコードでは、 コンポーネントウィジェットを取得する、これは次のように機能します ウィジェットを取得するですが、コンポーネントをコンテキストとして、 CMP. では、どうやって CMP を入手したのでしょうか? こんな感じです:
- var cmp = client.data.dog_psych_DogAdvisorComponent.dogLayout.parent;
以上です。消費者の協力を得て、 クライアント.data.dog_psych_DogAdvisorコンポーネント オブジェクトを作成し、データストリームのデータを目的のサービス イベント出力に送信しますが、それ以外は、ユーザーはそれがどのように機能するかを気にすることなく、それを使用するだけです。
テイクアウト：
クライアントをコンポーネントに変換すると、基本的にカスタム ウィジェットになります。これらは、ユーザーが知る必要のない、または改ざんする必要のない詳細やコードを隠して、何度も使用できます。
独自のクライアントをコンポーネントに変換するときに、このガイドが役立つことを願っています。
添付ファイル：
あなたがでなければなりません
ログイン 添付ファイルを表示します。
便利なクライアントからコンポーネントへの変換ガイド
2024年12月
このクライアントは、最初のラボで使用されていたものです。 Vantiq における生成 AI の紹介 クラス。ラボでは、学生はそれを Generative AI を使用して犬の行動に関する質問に答えるサービスに接続します。
ユーザーが質問を入力し、「送信」をクリックすると、回答を含む新しいフィールドが表示されます。ユーザーは質問を続けることができ、新しい回答が新しいフィールドに表示されます。
学生はクライアントをあまり変更する必要はありません。クライアントは、実験をより見やすく、面白くするためのものなので、このクライアントをコンポーネントに変換するのに最適なケースのように見えます。利点:
これまでクライアント全体を単一のコンポーネントに変換すると、新しいエンティティはカスタムウィジェットになり、次のように動作する必要があります。 部 全体の。これは変換の実行方法に大きく影響するため、覚えておいてください。
導入部分はこれで十分です。クライアントをコンポーネントに変換する手順は次のとおりです。
ステップ1: 二重袋に入れても問題ない
クライアントがすでにレイアウト ウィジェットに完全に囲まれているとします。それを選択して [コンポーネントの作成] ボタンをクリックしたくなるかもしれませんが、まずは選択したものを別のレイアウト ウィジェットで囲むことをお勧めします。そうしないと、最も外側のレイアウト ウィジェットが新しいコンポーネントの名前を引き継ぎます。
ステップ2： クライアント.データ.xxx になる .configuration.xxx
新しいコンポーネントが作成されると、クライアント データ オブジェクトは消えます。コンポーネント エディターで再度作成した場合でも、別のクライアントで使用されると再び消えます。
代わりに、データ オブジェクトをコンポーネント構成オブジェクトにします。次に、コード内で次のように参照する必要があります。
ただし、問題があります。それは、コンポーネント内のコードからコンポーネント名を確実に知ることができないので、コンポーネント ウィジェットをどのように参照するのでしょうか。
混乱していますか？説明しましょう。私たちのユースケースでは、コンポーネント自体にonStartコードがあるので、次のように構成プロパティを参照できます。 この構成プロパティ。
また、送信ボタンのコードもあります。これはコンポーネント内のウィジェットであり、次のように構成プロパティを参照することもできます。 この構成プロパティ。 ここまでは順調ですね。
最後に、データ ストリームの onDataArrived のコードがあります。これはコンポーネント階層の一部ではありません。構成プロパティにアクセスするには、コンポーネント ウィジェットを参照するための「子供を探す」ハックを使用する必要があります。これはすぐにわかります。
[ この.configuration.root ドキュメントに記載されています。これは、コンポーネント内のウィジェット イベント ハンドラーには機能しますが、コンポーネント構成プロパティにアクセスするには機能しません。]
ステップ3： オンスター CPコード になる コンポーネント開始時 CPコード
クライアントまたはページの onStart コードは新しいコンポーネントには組み込まれないため、古いクライアントからコピーして、コンポーネントの onComponentStart イベント コードに貼り付ける必要があります。
ステップ4: データストリームの管理
コンポーネント内のデータストリームは興味深いものです。クライアントデータオブジェクトとは異なり、クライアントデータストリームは 意志 デフォルトでは、新しいコンポーネントの一部となり、その onDataArrived コードも同様になります。
消費されると、データ ストリームは見えなくなりますが、それでも存在し続け、それにバインドされているコンポーネントの部分はそれに応じて反応します。
コンポーネント構成プロパティには「データ ストリーム」タイプが用意されているため、コンシューマーは独自の表示可能なデータ ストリームを作成し、それを使用して非表示のデータをオーバーライドしながら、元のデータ ストリームに関連付けられたコードを保持することができます。
DataStreams 用に事前に作成されたコードには問題があります。まず、コードはコンポーネント自体にアクセスできないため、コンポーネントの構成プロパティにもアクセスできません。これを回避するには、コンシューマーがクライアント データ オブジェクトを作成し、コンポーネントの onStart コードでその予想される client.data を入力します。必要なプロパティ値を持つオブジェクト。
ステップ5： client.getWidget （時々） クライアント.getComponentWidget
安心してください。すべてのインスタンスを変更する必要はありません。 client.getWidget コンポーネントに関連するすべてのコードで クライアント.getComponentWidgetほとんどの場合、元のコードは問題なく動作します。しかし、 ドキュメントの説明によるとただし、状況によっては、特に非同期コード ブロックでは、コンポーネント内のウィジェットの実際の名前とコンテキストに合わせて変更された名前を追跡する内部の「マジック」が混乱する可能性があります。
すべての手順: ユースケースに合わせてまとめる
私たちの「Doc Psychology」クライアントでは、次の 3 か所にコードがありました。
以上です。消費者の協力を得て、 クライアント.data.dog_psych_DogAdvisorコンポーネント オブジェクトを作成し、データストリームのデータを目的のサービス イベント出力に送信しますが、それ以外は、ユーザーはそれがどのように機能するかを気にすることなく、それを使用するだけです。
テイクアウト：
クライアントをコンポーネントに変換すると、基本的にカスタム ウィジェットになります。これらは、ユーザーが知る必要のない、または改ざんする必要のない詳細やコードを隠して、何度も使用できます。
独自のクライアントをコンポーネントに変換するときに、このガイドが役立つことを願っています。
添付ファイル：
あなたがでなければなりません ログイン 添付ファイルを表示します。