テーマの条件付きクラスのプロパティ

画面サイズ、解像度、およびオペレーティングシステムが異なる、複数のデバイスを対象とする場合は、デバイスの画面サイズに応じて異なるスタイルシートを使用することが一般的です。大きな画面サイズの場合、モバイルデバイス向けのスタイルシートとは異なるスタイルシートを使用することがあるため、レスポンシブ Web デザインと呼ばれる手法を使用して、ケースに応じて適切に調整する必要があります。
たとえば、ページのコンテンツを変えずに、フォント、境界線、表示の有無などを変えることが必要な場合があります。
GeneXus では、Web オブジェクトの外観を設定する際に、テーマを使用できます。レスポンシブ Web デザインをサポートするため、条件付きクラスのプロパティを使用すると、クラスのプロパティを適用する状況を指定できます。

例

デバイスの画面に合わせて異なるフォントサイズを設定する必要があるケースについて考えてみます。
デバイスが携帯電話の場合に、フォントサイズが 22pt の Attribute クラスの代わりに、フォントサイズを 18pt に設定する必要があるとします。
この場合の手順は次のようになります:

GeneXus テーマを開きます。
次に、新しいルールを定義します。ルールは、コンテキストメニューの [ ルールを追加 ] を使用するか、次の GeneXus メニューを使用して定義できます: [ 編集 ] -> [ ルールを追加 ] 。
ルールに名前を付けます。たとえば、"Iphone Like devices" という名前を付け、このルールを適用する条件を設定します。
条件は、 [ Max Width ] プロパティと [ Min Width ] プロパティを使用して表現します。
注: カスタムプロパティを使用して、より複雑な条件を追加することができます。
テーマの各クラスに、このルールのコンテキスト内で任意のクラスのプロパティを再定義することができます。つまり、ルールの条件が True の場合、そのクラス用の設定が適用されます。

エディターを使用して条件付きクラスを設定する方法

ルールは、テーマエディターの上部にリストとして表示されます。ルールのコンテキスト内でクラスのプロパティを設定するたびに、そのルールの列をクリックします。
注: 次の図は、ボタンクラスをクリックして、条件のないボタンクラスの [ Border ] プロパティが表示された状態です。

ルールに対して条件付きであるボタンクラスの [ Border ] プロパティは、そのルールに対応する列をクリックすると表示されます:

つまり、実行時に、条件付きルールに関係するクラスに設定されている値は、ルールの特定の条件を満たすデバイスに対してのみ適用されます。
実行時に適用されるクラスとプロパティは、条件のないクラスと、条件付きクラスの既定以外のプロパティです。

クラスのプロパティの継承

ルールのコンテキスト内で定義されたクラスのプロパティは、条件のないクラスから値を継承します。
上の例で、Attribute クラスの [ FontSize ] プロパティは、このプロパティの条件のない値を継承します。そのため、設計者がこのプロパティに [ 既定を使用 ] を設定した場合、条件のない Attribute クラスの [ FontSize ] プロパティに設定されている値を継承します。
注: このソリューションの実装では、CSS でメディアクエリを使用します。生成されたメディアクエリは、テーマエディターの CSS ビューで表示できます。