モバイルアプリケーションでは、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 loop BPブロックが使用され、ループの本体で、配列の各要素が 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 プロパティに渡されます。
