Skip to main content

 

アプリケーションの開発

 

 

OutSystems

画面ブロックを作成して再利用する

アプリ間でUIの一部を再利用するには、ブロックを使用します。ブロックを使用すると、UIの一部の実装を1箇所にまとめることができます。そして、ブロックへの変更は、そのブロックを使用するすべての画面で自動的に表示されます。

異なるアプリ間でブロックを再利用する場合、以下に注意する必要があります。

  • ブロックが公開されている必要があります。
  • リアクティブWebアプリとモバイルアプリでは、リアクティブWebブロックを再利用できます。
  • 従来のWebアプリでは、従来のWebブロックを再利用できます。

ブロックの使用

  1. UIフローで、ブロック(リアクティブWebおよびモバイルアプリの場合)またはWebブロック(従来のWebアプリの場合)を追加します。
  2. 新しいブロックにユーザーインターフェイスとロジックを実装します。
  3. アプリ間で再利用する場合は、ブロックを公開として設定します。
  4. ブロックを使用する画面にドラッグします。ブロックを別のアプリで使用する場合は、最初にブロックを参照する必要があります。

以下の例では、2つのサンプルアプリを使用して、リアクティブWebアプリのブロックをモバイルアプリで再利用する方法を示しています。

MyReactiveAppを作成して公開ブロックを作成する

  1. 新しいリアクティブWebアプリを作成し、デフォルトモジュールを追加します。
  2. モジュールで[Interface]タブのUI Flowsに移動し、MainFlowを右クリックして[Add Block]を選択します。ブロックに「MyBlock」という名前を付けます。
  3. ブロックのPublicプロパティを[Yes]に設定します。
  4. ブロックにコンテンツをいくつか追加します。この例では、Contentウィジェットをドラッグして、「Hello from My Reactive App!」というサンプルテキストを入力しています。

    公開ブロックを含むソースアプリ

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

MyPhoneAppでブロックを再利用する

  1. 新しいモバイルアプリを作成し、デフォルトモジュールを追加します。
  2. アプリに画面を追加します。
  3. Manage Dependencies]を開き(CTRL+Q)、アプリ「MyReactiveApp」のプロデューサを検索します。[App]を選択します。
  4. 左ペインでUI Flows > Main Flowに移動し、[MyBlock]を選択します。[Apply]をクリックして確定し、ダイアログを閉じます。

    Manage Dependenciesダイアログのブロック

  5. モバイルアプリで[Interface]タブのMyReactiveApp(サンプルアプリの名前)> MainFlow2 > MyBlockに移動します。

  6. MyBlockを画面にドラッグします。プレビューに「Hello from My Reactive App!」が表示されます。

    プレビューのソースブロック

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