モバイルアプリケーションでは、Image コンポーネントのワークフローは、Web アプリケーションのワークフローとは少し異なっています。この記事では、モバイルアプリケーションでの Imageコンポーネントの使い方について詳しく説明します。繰り返しの要素、例えば Listや Gridコンポーネントのような繰り返し要素では、データモデルから Imageをデータモデルから読み込むことは一義的には不可能であり、BPを用いた読み込みのための一定の手順が必要となります。
Image 繰り返し要素におけるコンポーネントの使用 ( )List/Grid
例えば、flightsテーブルがあり、各フライトオブジェクトは、以下のフィールドで表される独自のカバーを持っています。 ImageFileフィールド [file].
フライトのリストが Listコンポーネントで表現されているとします。の各要素は Listコンポーネント - は Cardを含むコンポーネントです。 Imageと、関連するフライト情報を表示するための他のいくつかのコンポーネントを含むコンポーネントです。UIデザイナーでは、次のようになります。
まず最初に Data Sourceは、親コンポーネント (Listコンポーネント)に指定する必要があります。
データベースからコンポーネントにデータをアップロードするために Imageコンポーネントにデータをアップロードするために、そのコンポーネントに対して新しいビジネスプロセスを作成する必要があります。 Imageコンポーネントに新しいビジネスプロセスを作成する必要があります。
必要な BP は、アプリケーションの画像要素、すなわち onCreateトリガーです。まず最初に、与えられた画像に対応するデータモデルのオブジェクトを受け取る必要があります。そのためには、親要素がすでに受け取っているデータ(Listが受け取っているデータを利用します。）からデータを取得するには Listからデータを受け取るには List Get Dataブロックが使用されます。
今回構築するBPのロジックは、以下の通りです：もし、いずれかの Data配列要素(flightモデルオブジェクト) のひとつに識別子 (ID)と等しい場合 Record IDと等しい場合、必要なフライトテーブルの要素を見つけたことになります。そして、フライトモデルオブジェクトから画像ファイル IDがフライトモデルオブジェクトから取り出され、Image コンポーネントに読み込まれます。 Widget ID.
の全要素を反復処理するために Data配列のすべての要素に対して反復処理を行うために For each loopBPブロックが使用され、ループの本体で、配列の各要素が Dataを使用して配列の各要素を展開します． Expand Flightブロックを用いて展開します．もし Flight ID= Record IDの場合は ImageFileの場合，ファイル識別子が取られ，そのファイルオブジェクトがブロックを使ってロードされます。 Server request GET /_files/:id/download/ブロックを用いて読み込む。対応するBPの例を以下に示す。
次のステップでは，画像ファイルの展開が Expand fileブロックの入力としてバイト配列が渡されます． Image Update Propertiesブロックの Dataプロパティに渡す。また，シート内の特定の画像要素の Widget IDを指定し、BP の冒頭の onCreate ブロックの値を渡します。BPの最後の部分の結果は、以下の例のようになります。
最後に Break Loopブロックは、配列の残りの要素に対して無駄な反復処理を行わないようにするために使用されます。
ユーザーのスマートフォンのファイルシステムから画像を読み込む
ユーザープロファイルのアバターを読み込む例を考えてみましょう。Webインターフェースは、画像とBPを起動するボタンで構成され、以下のようなイメージです。
そして，該当するBPでは，ユーザがデバイスからファイルを選択するために Select Filesブロックを使ってファイルを選択させます。そして，ファイルの選択に成功すれば，その要素に index = 0が取得されます。対応するBPは次のようになります。
得られたファイル要素である Files配列の結果であるファイル要素は、さらに使用するためにウェブアプリケーションサーバにアップロードされなければなりません(Server request POST /_files/).リクエストに成功した場合、ブロックの出力にあるファイルオブジェクトは Server request POST /_files/ブロックの出力にあるファイルオブジェクトは Expand fileブロックの入力に渡され Bytes Arrayを取得し、それがブロックの入力に渡されます。 Image Update Propertiesブロックの Dataプロパティに渡されます。
