テーマ
テーマには、アプリケーションの詳細な視覚的表現が含まれています。テーマを変更すると、アプリケーションの外観が変わります。テーマは、アプリケーション全体またはUIフローに適用できます。
デフォルトのOutSystemsのテーマは、OutSystems UIフレームワークの一部です。OutSystemsUIのテーマはスキャフォールディングとうまく機能するため、CRUDインターフェイスをすばやく作成したり、UIフローにエンティティをドラッグして画面を挿入したり、他のアクセラレータを使用したりできます。OutSystems UIフレームワークは、特にモバイル開発で重要なパフォーマンスのために最適化されています。
OutSystems UIテーマのストラクチャ
OutSystemsUIのテーマは、OutSystemsアプリの画面要件に基づいたストラクチャに従います。各テーマには複数のブロック（例: Headerブロック）が含まれ、各ブロックは1つまたは複数のプレースホルダ（例: Header TitleやHeader Search）で構成されます。
以下の図は、新しいテーマがどのようにして基本テーマからレイアウトを継承するのか、そしてプラットフォームがどのようにしてブロックとプレースホルダを使用してページを生成するのかを示しています。メインレイアウトにはプレースホルダがあり、そのコンテンツはブロックです（［Header］プレースホルダは、Headerブロックで生成されたコンテンツと置き替えられます）。CSSは基本テーマからも継承できますが、アプリケーションCSSによって上書きすることもできます。
ブロック
必要なブロックは、画面タイプによって異なります。以下の表は、Webアプリケーションの各画面タイプに必要なブロックを示しています。
| 画面タイプ | Webブロック | ||||||
|---|---|---|---|---|---|---|---|
| レイアウト | 吹き出し | ポップアップエディタ | メールアドレス | ヘッダー | メニュー | フッター | |
| ブランク画面 | 必須 | 必須 | 必須 | 必須 | |||
| リスト画面 | 必須 | 必須 | 必須 | 必須 | |||
| 表示画面 | 必須 | 必須 | 必須 | 必須 | |||
| 編集画面 | 必須 | 必須 | 必須 | 必須 | |||
| 吹き出し | 必須 | ||||||
| ポップアップエディタ | 必須 | ||||||
| メールアドレス | 必須 | ||||||
この表は、以下のように解釈できます。
- Webアプリケーションでブランク画面を作成または編集する際に必要なWebブロックは、レイアウト、ヘッダー、メニューおよびフッターです。
- メールWebアプリケーションを作成または編集する際に必要なブロックは、1つのみです。
画面のメインコンテンツはLayoutという名前のブロックに配置されます。テーマが開発されているプラットフォームによっては、レイアウトには異なるプレースホルダを含むことができます。たとえば、Webアプリケーションのレイアウトではコンテンツ（MainContent）を表示するプレースホルダは必須ですが、階層リンクプレースホルダはオプションです。
以下は、WebテーマのLayoutプレースホルダの予約名のリストです。
- タイトル
- MainContent
- Breadcrumbs
- Actions
- Header
- Menu
- Footer
モバイルテーマでは、レイアウトブロックにこれらのプレースホルダを含めることができます。
- HeaderLeft
- タイトル
- HeaderRight
- HeaderContent
- Content
- Bottom
モバイルテーマにはブロック固有のイベントとアクションがあり、これらは後でJavaScript/Reactイベントリスナーと関数にコンパイルされます。画面の目的に関わるデフォルトのイベントとアクションを削除してはいけません。
プレースホルダ
画面のタイプによって使用するプレースホルダは異なります。以下は、Web アプリケーションの概要です。
| 画面のタイプ/プレースホルダ | Title | MainContent | アクション | ヘッダー | メニュー | フッター |
|---|---|---|---|---|---|---|
| ブランク画面 | 必須 | 任意 | 任意 | 任意 | ||
| リスト画面 | 必須 | 必須 | 任意 | 任意 | 任意 | 任意 |
| 編集画面 | 必須 | 必須 | 任意 | 任意 | 任意 | 任意 |
| 吹き出し | 必須 | |||||
| ポップアップエディタ | 必須 | |||||
| メールアドレス | 任意 | 必須 |
例:
- テーマプロパティで、ブランク画面に割り当てられたWebブロックがWebアプリケーションにある場合は、このWebブロックに必要な唯一のプレースホルダはMainContentです。
- テーマプロパティで、メールに割り当てられたWebブロックがWebアプリケーションにある場合は、このWebブロックに必要な唯一のプレースホルダはMainContentで、MainContentはオプションです。
Webのメニューアイテムはドラッグ&ドロップで自動的に作成されます。テーマで同じ機能を維持する場合は、必要な入力パラメータとエンティティを使用してメニューWebブロックを作成します。入力パラメータとエンティティについては、既存のテーマを参照します。
以下は、Webテーマのブロックとそのプレースホルダの例です。
基本テーマからテーマを作成する
新しいアプリを作成する際、編集可能なCSSのコピーがすでに含まれています。新しい追加のテーマを手動で作成できます。
- ［Interface］タブで［Themes］を右クリックし、［Add Theme］を選択します。
- 新しいテーマの名前を入力します。
- オプションとして、Base Themeを変更できます。リストに含めたいテーマがない場合は、リファレンスを追加します。
- プロパティペインで選択したテーマの場合は、［Style Sheet］をクリックします。
- ［CCS］エディタの最初のタブにスタイルを入力します。元のテーマは編集できませんが、同じクラス名で新しいスタイルを作成して、元のスタイルを上書きできます。