アプリケーションのコントロールにスタイルを適用するすべての
クラスを定義するために、GeneXus では Design System というオブジェクトが用意されています。
デザインに関するすべての定義が、この場所に一元化されます。これを
ナレッジベースのオブジェクトに関連付けるだけで、そのデザインを適用できます。すべてのオブジェクト、1 つのモジュールのオブジェクト、または一部のオブジェクトを対象にできます。
ここで、これまでの作業内容から
Design System オブジェクトを作成し、
Web パネル (およびその他すべて) に関連付けます:
最初は、クラスの定義が CSS のクラスセレクターの定義と変わらないように感じるかもしれません。実際、CSS からこのエディターに直接コピー アンド ペーストすることも可能です。すべてのプロパティとその有効な値がサポートされています。
ただし、一連の拡張プロパティもあります。GeneXus に固有のものもあるからです。これらは接頭語「gx-」が付いており、gx プロパティと呼ばれています。ここでは説明を省きます。
また、現時点では Web オブジェクトのみに注目します。ネイティブモバイルの場合、CSS への参照は適用されません。多くの場合、プロパティはほとんど同じものになりますが、固有のものもあります (ネイティブプラットフォーム自体の影響)。2 つの異なる Design System オブジェクトを用意する必要はなく、同じものを使用できます。
引き続き同じ例の場合を考えます。よく見ると、フォントファミリ AbhayaLibre-Bold がありません。標準のファミリではないからです。そこで、新しいフォントを含めることができるルールを追加します (同じ処理を行う CSS ルールと同じです):
そのフォントを含む File オブジェクトがナレッジベースに追加されている必要があります。また、そこで gx-file 関数を使用して、宣言するフォントのソースを指定します。
同様に、ナレッジベースの Image オブジェクトをプロパティに関連付ける gx-image 関数があります。たとえば、ナレッジベースに chatbot という Image オブジェクトがあり、それをクラスで背景画像として指定したい場合は、クラス内で次の割り当てを記述します:
background-image: gx-image(chatbot);
GeneXus 17 Upgrade 6 以降。