Skip to main content

 

アプリケーションの開発

 

OutSystems

画像を表示する

OutSystemsでは、静止画像、URLから取得した外部画像、データベースに保存された画像など、異なる種類の画像をアプリケーションで表示できます。

データベースの画像をモバイルアプリで表示するには、以下の手順を実行します。

  1. データベースから画像を取得して表示する画面に渡すAggregateを追加します。
  2. Imageウィジェットをツールボックスから画面にドラッグします。
  3. Typeプロパティを[Binary Data]に設定します。
  4. Image Contentプロパティを、画像を保存するエンティティアトリビュートとして設定します。

データベースの画像をWebアプリで表示するには、以下の手順を実行します。

  1. データベースから画像を取得して表示する画面のPreparationアクションに渡すAggregateを追加します。
  2. Imageウィジェットをツールボックスから画面にドラッグします。
  3. デフォルト画像として既存の画像リソースを選択するか、新しい画像をインポートします。この画像は、設計時はプレースホルダとして、実行中はデフォルト画像として使用されます。
  4. 画像を選択してTypeプロパティをDatabaseに変更します。
  5. Attributeプロパティを、データベースに画像を保存するBinary Data型のエンティティアトリビュートに設定します。
  6. Filenameプロパティに、エンドユーザーが画像を保存する際のファイル名を設定します。
  7. Entity Identifierプロパティに、表示する画像を含むエンティティレコードの識別子を設定します。

モバイルアプリの例

場所の検索やレビューができるモバイルアプリケーションGoOutで、エンドユーザーの詳細の横に写真を表示します。

エンドユーザーのプロフィール写真を表示するには、以下の手順を実行します。

  1. [Profile]画面を開き、Imageウィジェットを、ツールボックスからエンドユーザーの詳細が表示されるフォームの上部にドラッグします。
  2. Typeプロパティを[Binary Data]に設定します。
  3. Image Contentプロパティを[GetProfile.Profile.Profile.Photo]に設定します。これは、エンドユーザーのプロフィールを取得するGetProfile AggregateのPhotoアトリビュートです。
  4. Default Imageプロパティに、エンドユーザーがプロフィール画像を設定していない場合にデフォルトで表示される汎用アバター画像を設定します。
  5. パブリッシュしてテストします。

Webアプリの例

場所の検索やレビューができるWebアプリケーションであるGoOutWebアプリケーションで、[Profile]画面にある個人の詳細情報の横に、エンドユーザーの写真を表示します。

データベースの画像を表示するには、以下の手順を実行します。

  1. [Profile]画面を開き、Imageウィジェットを、ツールボックスからエンドユーザーの詳細を編集するフォームの上部にドラッグします。
  2. [Select Image]ダイアログで、モジュールにインポート済みの画像を選択するか、新規画像をインポートし、デフォルトで使用する画像を設定します。この画像は、設計時はプレースホルダとして、実行中は代替画像として使用されます。
  3. Typeプロパティを[Database]に設定します。
  4. Attributeプロパティを[Profile.Photo]に設定します。これはProfileエンティティでエンドユーザーの画像を保存するアトリビュートです。
  5. Filenameプロパティを「GetProfileById.List.Current.User.Name + “.png”」に設定し、編集しているエンドユーザー名として画像ファイル名を定義します。
  6. Entity Identifierプロパティに、現在のエンドユーザーのProfileレコードを識別するProfileId入力パラメータを設定します。
  7. パブリッシュしてテストします。