Web Panel オブジェクトまたは
Panel オブジェクトを実行するとき、オブジェクトの各コントロールは次のようにレンダリングされます:
1. 対応するスタイルオブジェクトが確認されます。手順は次のとおりです:
●
Web Panel: オブジェクトの [ Style ] プロパティの値が使用されます。ここに
デザインシステムまたは
Web テーマの名前があります。
●
Panel: アプリケーションを実行するプラットフォームに対応する
[ Style ] プロパティの値が使用されます。たとえば、Android のスマートフォンで実行する場合、Android Phone プラットフォームの [ Style ] プロパティの値になります。ここにデザインシステムまたはテーマの名前が入ります。
●
両方: Web Panel または Panel のスタイルオブジェクトが実行時に変わる場合 (
Web 用の SetTheme 関数または
SetTheme 関数)、静的なものではなく、動的なものが選択されます。
2. 各コントロールのレンダリング方法が確認されます。手順 1 で
Design System オブジェクト (DSO) が指定されている場合についてのみ説明します。
● 関連付けられた 1 つまたは複数のクラスが特定されます (静的と動的の関連付けがある場合は後者が優先されます)。
● 手順 1 で見つかったスタイルオブジェクトで、これらのクラスが検索されます。
● 現在の DSO に別の DSO が 1 つまたは複数インポートされている場合: [ Tokens ] と [ Styles ] のエレメント (または CSS ファイルが直接インポートされている場合は CSS) が、インポート順で現在の DSO の [ Tokens ] および [ Styles ] のエレメントにコピーされたかのように扱われます (常に現在の DSO の特定のトークンとスタイルの定義の前)。したがって、クラスが重複する場合があります。
● レンダリングするコントロールに指定されているクラスについて
○ DSO (拡張) に繰り返しがある場合、そのすべての定義が使用されます (結合)。ただし、プロパティが重複している場合は最後の定義が有効になります。
○ 同じクラスが、条件なしと条件付き (画面のサイズや向きの @media ルールなど) で定義されている場合、条件なしのほうが先に記述され、その後に条件付きが記述されているかのように処理されます。したがって、重複するプロパティがある場合、後の条件付きのほうが使用されます。ただし、条件付きクラスは、条件を満たす (画面サイズが一致するなど) コンテキストでアプリケーションが実行されている場合にのみ適用されます。
● コントロールにプロパティが定義されている場合 (高さや幅など)、常にそれらがクラスの設定よりも優先され、適用されます。
3. コントロールに [ Link ] プロパティがあるかどうか、コントロールが読み取り専用であるかどうかなど、その他の側面も、スタイルに関する動作の決定に影響します。たとえば、コントロールがテキストブロックであり、 [ Link ] プロパティが設定されている場合、Web プラットフォームでは、関連付けられているクラスの色のプロパティとは違ったとしても、ブラウザーのリンクに一般的な青色でレンダリングされます。ただし、関連付けられているクラスで、リンクのスタイルを制御するクラスが指定され、そこで色が指定されている場合は除きます。
GeneXus 17 Upgrade 6 以降。
デザインシステムでのクラスの構造