画面テンプレートの仕組み
OutSystemsの画面テンプレートには複数のメリットがあります。画面テンプレートを使用することにより、UIパターンを抽象化してルックアンドフィールの一貫性を確保し、アプリの画面を作成する開発者の作業を高速化することができます。
画面テンプレートを作成する場合、画面テンプレートの仕組みを理解することが重要です。柔軟性の高いIDEであるService Studioを使用して、開発者が安定したUX特性およびパフォーマンスの画面を作成できる画面テンプレートを開発するには、重要なコンセプトを知っておく必要があります。
画面テンプレートの構造
他のOutSystemsコンポーネントと同様、画面テンプレートにはソースモジュールがあります。画面テンプレートは、カスタム画面テンプレートモジュールから複製された特殊なモジュール内にあります。これらのモジュールは最後の画面で必要となるテーマとルートレイアウトブロックの情報源になります。
通常、画面テンプレートにはテーマで定義されたルートレイアウトブロックが含まれています。レイアウトブロックで特に重要なのは、プレースホルダの名前です。また、画面テンプレートにはロジック、コンテンツ、データも含まれ、これらはすべて参照したりローカルに配置したりすることができます。これには、使用およびパフォーマンスに関して重要な考慮事項があります。
コピーされる要素と参照される要素
画面要素がどのようにインスタンス化されるかは、画面テンプレート内の要素の場所によって異なります。
- 画面テンプレートのローカル画面要素は、カスタム画面テンプレートモジュールのローカルであり、画面のルートに属します。これらは、ターゲットモジュールにコピーされます。
- 画面テンプレートの参照された画面要素には、カスタム画面テンプレートモジュールの外にある他のプロデューサへの参照が含まれます。これらの参照は、ターゲットモジュールに追加されます。
- ローカルモジュール要素は画面の子ではなく、カスタム画面テンプレートモジュールのローカルです（サーバーアクション、ブロックなど）。これらは、ターゲットモジュールにコピーされます。これらの要素がコピーされないようにするには、これらを参照として追加してください。
テーマの互換性
画面テンプレートのテーマは、ターゲットモジュールのテーマの階層内で参照する必要があります。そのようにしていない場合、画面のUIパターンで必要なCSSクラスがターゲットモジュールのテーマに含まれているという保証がないため、テーマの互換性に関する警告が開発時に表示されます。
ターゲットモジュールのテーマは、アプリテンプレートで定義されたテーマによって決定されます。アプリテンプレートには、様々なUIフレームワークを実装することができます。これは、たとえばSilk UIアプリテンプレートをベースにした従来のWebアプリは、OutSystems UI用に作成された画面テンプレートと互換性がないことを意味します。
画面のインスタンス化
開発者が画面テンプレートをベースにした画面の作成を確認すると、Service Studioで以下が実行されます。
- 画面テンプレートとターゲットモジュールのレイアウトブロックが同じ場合、ルートレイアウトブロックを含む空の画面がターゲットモジュールに作成されます。それ以外の場合は、テーマのLayoutプロパティで設定されているレイアウトがルートレイアウトブロックとして選択されます。
- プレースホルダが比較されます。プレースホルダの名前が同じ場合、ターゲットプレースホルダのコンテンツがソースプレースホルダのコンテンツに置き換えられます。ターゲットレイアウトブロックに存在しないプレースホルダは無視されます。
- 画面テンプレートからの参照がターゲットモジュールに追加され、ローカルコンテンツがターゲットモジュールにコピーされます。
- ターゲットモジュールで画面が利用可能になります。開発者はデータの置換とさらなる調整を進めることができます。
以下は、画面テンプレートのインスタンス化の概要です。
- 開発者がアプリを開発していて、［About］ページを挿入することを決めます。
- 開発者は［New Screen］ダイアログを開き、［About Company］画面テンプレートを選択して、選択を確定します。バックグラウンドで、Service Studioによってアプリの構造に合うようにこの画面の構造が変更されます。
- 開発者がアプリで新しい［About］画面を使用できるようになります。
データ置換機能
画面テンプレートには、開発者がドラッグ&ドロップで画面のサンプルデータをビジネスデータに置き換えることができる機能が組み込まれています。以下のウィジェットはデフォルトでデータ置換をサポートしています。
- チャート
- フォーム
- テーブル
- List
他のUIコンテナでデータ置換をサポートするには、［Extended Properties］ペインでservicestudio-showRecordプロパティを追加して［True］に設定します。
データ置換アルゴリズムは画面テンプレートのデータソースに対して機能し、このデータはOutSystemsのサンプルデータモジュールや独自のデータモジュールから取得することができます。これによって、画面のデータを編集するために実装できるロジックのレベルが決まります。一般的に、ターゲットモジュールのデータモデルを理解することにより、高度な機能をサポートできるビジネスロジックを作成することができます。
サンプルデータ
ビルトインの画面テンプレートではサンプルデータを使用しており、開発中に管理することや再利用することができます。独自のデータを画面テンプレートで使用することもできますが、環境内で公開している必要があります。
環境内での画面テンプレートの利用
作成した画面テンプレートは、環境にログインしたすべての開発者が利用できます。画面テンプレートを追加したときにService Studioを開いているすべての開発者は、［Screen Templates］リストを更新してから画面テンプレートを利用できるようになります。更新するには、［New Screen］の更新メッセージをクリックします。
