固有部分と共有部分を区別して、抽象化を可能にするため、デザインプロパティへの値割り当てを
クラスにグループ分けすることができます。こうした
クラスは、該当するデザインのセマンティクスに適合し、同じコンセプトに対応する他のコントロールに再利用できます。この例では、コンセプトは暗い色の背景にメインタイトルを表示するというものです。
暗い色のヒーローイメージ上に配置するすべての
テキストブロックに対して H1_Negative というクラスを定義し、デザイナーが指定した次のプロパティを宣言するとします:
.H1_Negative {
color: rgb(255,255,255);
font-family: AbhayaLibre-Bold;
font-size: 95px;
font-weight: bold;
letter-spacing: -1.72px;
line-height: 75px;
text-align: center;
}
この場合、これを [ Class ] プロパティでコントロールと関連付けるだけです (次の画像に示す静的な方法と動的な方法の両方が可能):
その後、暗い色の背景にメインタイトルというコンセプトを満たすほかのコントロールも同様にします。
このように、キャプションなど特定のコントロールに固有の特性は、デザインに属するものから分離され、他のコントロールと共有できます。一部はコントロールに関連付けられ、その他はクラスで定義されているため分離されています (一元的に宣言されている場所を以下に示しますが、その場所は
Design System オブジェクトであることが予想できます)。
その後、デザイナーの気が変わり、ヒーローイメージに表示するテキストのフォントの色やサイズ、フォントファミリを変更するよう指示されても、クラスの 1 か所で変更するだけで済みます。この変更は、関連付けられているすべてのコントロールに適用されます。コントロールレベルで必要なのは、クラスを関連付けることだけです。これが抽象化です。また、クラスは各プロパティの固有の値も定義します。
これは、ページ内の HTML エレメントと、CSS で定義されているクラスの関係に似ていると考えることができます。
クラスをどこで宣言するのかについて、続けて説明します。
GeneXus 17 Upgrade 6 以降。