Skip to main content

 

アプリケーションの開発

 

OutSystems

テーマ

テーマには、アプリケーションの詳細な視覚的表現が含まれています。テーマを変更すると、アプリケーションの外観が変わります。テーマは、アプリケーション全体またはUIフローに適用できます。

デフォルトのOutSystemsテーマは、OutSystemsモバイルUIフレームワークとOutSystems Web UIフレームワークの不可欠な要素です。フレームワークは、迅速な開発とベストプラクティスの実装を可能にします。いずれのフレームワークにも、Carousel、ChatMessag、AnimatedLabel、Wizard、Columns4などの数多くのパターンがあります。テーマはスキャフォールディングとうまく機能するため、CRUDインターフェイスをすばやく作成したり、UIフローにエンティティをドラッグして画面を挿入したり、他のアクセラレータを使用したりできます。UIフレームワークは、特にモバイル開発で重要なパフォーマンスのために最適化されています。

新しいアプリケーションは、基本テーマからCSSの一部を継承することができます。テーマを編集する最も簡単な方法は、Theme Customizerにアクセスし、新しいCSSを生成することです。

テーマのストラクチャ

Silkフレームワークのテーマは、プラットフォームの画面要件に基づいたストラクチャに従います。それぞれのテーマはブロックのリスト(ヘッダーブロックなど)を持っており、それぞれのブロックには1つ以上のプレースホルダ(ヘッダータイトル、ヘッダー検索など)が含まれます。

以下に示すのは、新しいテーマがどのようにして基本テーマからレイアウトを継承するのか、そしてプラットフォームがどのようにしてブロックとプレースホルダを使用してページを生成するのかを示す概略図です。メインレイアウトにはプレースホルダがあり、そのコンテンツはブロックです([Header]プレースホルダは、Headerブロックで生成されたコンテンツと置き替えられます)。CSSは基本テーマからも継承できますが、アプリケーションCSSによって上書きすることもできます。

ブロック

プラットフォームで正確に機能するには、異なるタイプの画面には異なるブロックが必要です。以下の表は、Webアプリケーションの画面に必要なブロックを示しています。

画面タイプ Web Block
Layout 吹き出し ポップアップエディタ Email ヘッダー メニュー フッター
ブランク画面 必須 必須 必須 必須
リスト画面 必須 必須 必須 必須
表示画面 必須 必須 必須 必須
編集画面 必須 必須 必須 必須
吹き出し 必須
ポップアップエディタ 必須
Email 必須

この表は、以下のように解釈できます。

  • 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 Actions Header Menu Footer
ブランク画面 必須 オプション オプション オプション
リスト画面 必須 必須 オプション オプション オプション オプション
編集画面 必須 必須 オプション オプション オプション オプション
吹き出し 必須
ポップアップエディタ 必須
メール オプション 必須

例:

  • テーマプロパティで、ブランク画面に割り当てられたWebブロックがWebアプリケーションにある場合は、このWebブロックに必要な唯一のプレースホルダはMainContentです。
  • テーマプロパティで、メールに割り当てられたWebブロックがWebアプリケーションにある場合は、このWebブロックに必要な唯一のプレースホルダはTitleで、MainContentはオプションです。

Webのメニューアイテムはドラッグ&ドロップで自動的に作成されます。テーマで同じ機能を維持する場合は、必要な入力パラメータとエンティティを使用してメニューWebブロックを作成します。入力パラメータとエンティティについては、既存のテーマを参照します。

以下は、Webテーマのブロックとそのプレースホルダの例です。

基本テーマからテーマを作成する

新しいアプリを作成する際、編集可能なCSSのコピーがすでに含まれています。新しい追加のテーマを手動で作成できます。

  1. Interface]タブで[Themes]を右クリックし、[Add Theme]を選択します。
  2. 新しいテーマの名前を入力します。
  3. オプションとして、Base Themeを変更できます。リストに含めたいテーマがない場合は、リファレンスを追加します。
  4. プロパティペインで選択したテーマの場合は、[Style Sheet]をクリックします。
  5. CCSエディタの最初のタブにスタイルを入力します。元のテーマは編集できませんが、同じクラス名で新しいスタイルを作成して、元のスタイルを上書きできます。