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