アプリケーションのデザインの抽象化レベルを高め、再利用とアセンブリーを容易にする目的で画面コントロールのスタイルを定義します。
アプリケーション (あるいはその一部) の
デザインシステムの大部分の設定を行うもので、
Theme オブジェクトに取って代わります。
次のものを定義できます:
● 色、フォント、サイズなどに関連する定数
● UI のレイアウトのコントロールに適用するクラス。プロパティを使用してスタイルを指定
作成後は、UI を持つ任意の実行可能な GeneXus オブジェクト (
Transaction、
Web Panel、
Panel など) に関連付け、デザインを指定できます。画面上の各コントロールに 1 つまたは複数のクラスが割り当てられ、そのデザインのプロパティが Design System オブジェクト (DSO) に一元化されます。
割り当ては、Web オブジェクト (Angular 以外) の場合はオブジェクトごとに行うことができ、実行時の割り当ても可能です (Web とモバイルのいずれも)。既定の設定は、Web オブジェクト (Angular 以外) はナレッジベース バージョン レベルで、ネイティブモバイルまたは Angular のオブジェクトはプラットフォームレベルで定義します。
Design System オブジェクトを画面に関連付ける方法を参照してください。
以下に示す Web パネルのテキスト ブロック コントロールに H1_Negative 名前クラスを割り当てるとします (静的と実行時の両方):
この場合、DSO (上記) を Web パネルに関連付けると、実行時のテキストブロックのコンテンツは、フォントサイズ 95 ピクセル、白色 (#FFFFFF) で表示されます。なぜなら、H1_Negative クラスが DSO に含まれ、色とフォントサイズのプロパティにその値が設定されているからです。
DSO 内でクラスのプロパティが後で変更されると、実行時のコントロールのスタイルは変わります (このテキストブロックと、同じクラスが割り当てられたその他のコントロールが対象)。
DSO に H1_Negative クラスが含まれない場合、テキストブロックは、クラスが割り当てられていない場合と同じようにコントロールの既定値で表示されます。
クラスは事前に定義されていません。DSO では、実装するアプリケーションのデザインシステムに適したクラスを自由に作成できます。
Design System オブジェクトとは何か、どう使用するのか、簡単な例を含む入門ガイドについては、「
デザインシステムを新規にモデル化する方法」を参照してください。
Theme オブジェクトと比較した場合のこのオブジェクトの利点については、「
Theme オブジェクトと Design System オブジェクトの比較」を参照してください。
オブジェクトのパーツ
オブジェクトの作成時には、 [ Documentation ] エレメントのほかに 2 つのエレメントがあり、それぞれにエディターがあります:
● [
Tokens ] : デザイン定数に名前を付けて定義し、色、フォント、間隔などに関連するオプションをモデリングします。これらは、 [ Styles ] エレメントで使われます。
● [
Styles ] : アプリケーションのコントロール用のクラスのデザインを定義します。定義には、クラスごとに、一連のプロパティとそれぞれの値が含まれます。値にはリテラルまたはトークンを使用できます。
オブジェクトのプロパティには
[ Base CSS ] プロパティが含まれているため、Web アプリケーションで DSO を使用するとき、既にベース CSS があることになります。このため、一部のコントロールは、スタイルを DSO で指定しなくても、このベース CSS で指定されているスタイルでレンダリングされます。
DSO を新規に作成するとき、 [ Tokens ] エレメントと [ Styles ] エレメントは空です。
[ Tokens ] エレメントには、トークンの入力と処理のためのエディターが 2 つあります。左側のテキストエディターと右側のグラフィックエディターで、これらのエディターは同期されます。
[ Styles ] エレメントには、テキストエディターだけがあります。使用言語は CSS に似ています。CSS の定義をそのままコピーすることもできます。
いくつかのトークンが作成された DSO を以下に示します:
トークンはタイプごとに分類されています。この DSO では、色、フォントファミリー、フォントサイズの各タイプにトークンが定義されています。半径、間隔、境界線、影など、タイプはほかにもあります。これらのタイプは固定であり、開発者が作成するものではありません。
[ Styles ] エレメントには、この時点で 3 つのクラスが定義されています。また、標準以外のフォントを含めるためのルールがあります。フォントのファイルは、KB に事前に含まれている必要があります:
「.H1」セレクターで H1 クラスの機能を定義できます。このクラスは、テキストブロックや項目属性/変数など、テキストを含むコントロールに使用できます。このクラスが適用されたコントロールは、行の高さが 75 ピクセルになり、フォントサイズは、fontSizes タイプの
トークン、H1 の定義に従い 95 ピクセルになります ( [ Tokens ] エレメントを参照)。
H1_Negative
クラスの機能は、H1 クラスと同じになります (@include ルールが指定されているため)。それに加えて、White という colors トークンの色が割り当てられています。色は H1 で指定されていましたが、それが上書きされます。したがって、H1 クラスが割り当てられたコントロールと、H1_Negative クラスが割り当てられたコントロールの唯一の違いはテキストの色です。
クラスは静的または動的にコントロールに割り当てますが、いずれの場合も [ Class ] プロパティを使用します。クラスは自由に作成でき、事前に定義されたクラスはありません。
Image オブジェクトも DSO で変えることができます。この場合、画像に対応するファイルの [ Style ] プロパティを使用します:
割り当ては、Web オブジェクト (Angular 以外) の場合はオブジェクトごとに行うことができます。その際には、 [ Style ] プロパティに、値として DSO またはテーマを指定します。
モバイルと Web Angular のオブジェクトについては、個別の静的な割り当てはできません。
KB バージョンのレベルで、 [ Style ] プロパティにより、作成しているすべての Web オブジェクト (Angular 以外) の既定値が決まります。現在、既定値は Carmine テーマですが、DSO に置き換えることができます。
ネイティブモバイルと Web Angular のプラットフォームレベルでは、 [ Style ] プロパティの定義が、これらのプラットフォーム用に作成するすべてのオブジェクトの既定値となります。こちらの既定値は CarmineSD テーマですが、DSO に置き換えることができます。
モバイルと Angular のプラットフォームでは、 [ Additional Styles ] プロパティで、実行時に割り当て可能にするスタイルを指定できます。この設定により、これらのスタイルを設計段階で使用していなくても生成する必要があることを GeneXus に伝えます。
DSO をモジュール内に定義して、モジュールとともにパッケージ化できます。同じ名前の Design System オブジェクトを異なるモジュールに含めることができます。同じ名前のテーマと DSO を併存させることはできません。
DSO は別の DSO、またはその一部から継承し、それを拡張することが可能です。たとえば、特定のアプリケーションのクラス構造を定義するためだけの DSO を用意し、それを別の DSO として拡張し、カラーパレットを変えたり、クラスやトークンを追加したりできます。
こうした継承は、DSO の [ Styles ] エレメントで @import 節を使用して定義します。
最終的には DSO が完全に Theme オブジェクトに取って代わる予定です。現時点では 2 つが併存し、テーマを適用できるすべての箇所で DSO を使用できます。
いずれ DSO がテーマの機能を完全に網羅すると、機能が拡充され、Theme オブジェクトの不便な点に煩わされることがなくなります。
たとえば、Web テーマをネイティブ モバイル プラットフォームに使用することや、その逆はできません。一方、DSO はマルチプラットフォーム対応であるため、これが可能です。
Theme オブジェクトは、 [ デザインシステムを生成 ] オプションでいつでも Design System オブジェクトに変換できます。
また、使用しているテーマをすべて DSO に変更しても機能は変わりません。
Design System オブジェクトを画面に関連付ける方法
Theme オブジェクトと Design System オブジェクトの比較
この機能は
GeneXus 17 Upgrade 6 以降で利用できます。