Skip to main content

 

UIを設計する

 

OutSystems

LightBoxImageパターン

LightBoxImageパターンは、サムネイル画像用の単独のプレースホルダを含むブロックです。ブロックのImageURLパラメータを使用して、ローカル画像または外部URLを使用できます。アイテムを開くには、Utilities\LightboxImageブロックを画面にドラッグする必要があります。このパターンは、高解像度で詳細な画像を強調して表示する場合に使用します。

LightBoxImageパターンの使用方法

対応するプレースホルダにサムネイル画像を追加し、[Sharing Options]の有効化と[Group]名を構成します。また、同じグループ内のアイテムをスワイプできます。

開いている画像にフィルタを追加する

結果:

LightBoxImageをクリックした後にバイナリ画像を読み込む(データベースからの画像)

画像を公開するには、最初にRESTサービスを作成し、そのRESTサービスを利用してURLを取得する必要があります。[Logic]タブ(Integrationsフォルダ)に移動して、RESTサービスを作成します。

REST APIを公開するには、以下の手順を実行します。

1.RESTサービスを右クリックし、[Expose REST API]を選択します(GetImagesの呼び出しなど)。

2.[Expose REST API]を右クリックし、REST APIメソッドを追加します(GetFullImageの呼び出しなど)。

3.入力パラメータを追加してURLを公開します。PictureIDを呼び出し、データ型をPictures Identifierに設定します。[Advanced]セクションの[Receive IN]ドロップダウンで、[URL]オプションを選択します。

4.出力パラメータを追加し(Imageの呼び出しなど)、データ型をBinary Dataに設定します。[Advanced]セクションの[Send IN]ドロップダウンで、[Body]オプションを選択します。

5.GetFullSizeImage REST APIメソッドで、PicturesデータベースをドラッグしてPictures.Id=PictureIdでフィルタリングします。

6.Assignウィジェットをドラッグし、Image(出力パラメータ)をGetPictureById.List.Current.Pictures.Imageに設定します。

REST APIを利用するには、以下の手順を実行します。

1.RESTサービスを右クリックし、[CONSUME REST API]を選択します(GetImagesの呼び出しなど)。

2.単一のメソッドを追加します。

3.メソッドのURLに、ドメインURL + URLパス([Expose REST API]で取得) + ?PictureId={PictureId}を貼り付けます。

これで、LightBoxImageパターンを使用してデータベースからのすべての画像を表示する画面を作成できます。

1.新しい画面を追加します。

2.画面を右クリックし、[Fetch data from other resources]を選択します(GetImagesIdsの呼び出しなど)。

3.Output parameterの名前をListに変更し、Pictures Identifier Listをデータ型として定義します。

4.PicturesデータベースをGetImagesIdsアクションとListAppendAllアクションにドラッグします。

5.ListAppendAllで、Aggregateをソースリストとして設定し(GetPictures.List)、画像からPictures Identifierにマッピングします。これを行うには、[Value]オプションをPictures.Idに設定します。

6.Listウィジェットを画面にドラッグします。

7.LightboxImageパターンをListウィジェットにドラッグします。

8.LightboxImageのImageURLパラメータを、「URL REST API + 取得したデータ」に設定します。
a. "/your-module/rest/GetImages/GetFullSizeImage?PictureId=" + GetImagesIds.List.Current

9.Lightboxのサムネイル画像で、TypeをExternal URLに設定し、URLを「REST API + 取得したデータ」に設定します。
a. "/your-module/rest/GetImages/GetFullSizeImage?PictureId=" + GetImagesIds.List.Current

10.アプリをパブリッシュします。

外部URL画像を使用するLightBoxImage

1.画面にデータベースをドラッグします。

2.LightBoxImageパターンをListウィジェットにドラッグします。

3.LightBoxImageのImageURLパラメータを設定し、サムネイル画像を外部URLに設定します。
例: GetPictures.List.Current.Pictures.ExternalURL。

4.アプリをパブリッシュします。

入力パラメータ

入力名 説明 デフォルト値
Title 表示される画像のタイトル。 なし
Group Gallery内に同じグループの画像が表示されます。 なし
ImageURL 「[Image]プレースホルダ」の画像に置き換わる画像のURL。 なし
ImageZoom ズーム値を使用して、サムネイルサイズに基づき、全画面で開く画像のサイズを定義します。
注記: 描画の問題を避けるため、同じ比率の画像を使用するようにしてください。
- 100x100のサムネイルでズームが2の場合、200x200で開きます。
- 500x500のサムネイルでズームが0.5の場合、250x250で開きます。
なし

レイアウトおよびクラス

他のパターンとの互換性

LightBoxImageパターンは画像でのみ使用できます。

サンプル

Product OverviewのサンプルでLightBoxImageパターンがどのように使用されているかについてご覧ください。

  • Was this article helpful?