ユーザー コントロール オブジェクトに定義するプロパティは、 [ Screen Template ] エレメントで {{ }} で囲む必要があります。通常、GeneXus では、 [ Screen Template ] からすべてのプロパティの適切な定義が直接推論されますが、あいまいな場合もあるため、オブジェクトの [ Properties ] セクションでもプロパティを変更できるようになっています。
前に説明したように、最も基本的なタグタイプがプロパティです。基本テンプレートの {{name}} タグは、現在のコンテキストで name キーを検索しようとします。name キーが存在しない場合は、親コンテキストを再帰的に確認します。最上位のコンテキストに達しても name キーが見つからない場合は、何もレンダリングされません。
既定で、すべてのプロパティが HTML でエスケープ処理されます。HTML でエスケープ処理されない値を返すには、三重の中括弧を使用します。
プロパティ "miss" で空の文字列が返されます。
使用可能なプロパティのタイプは次のとおりです。
GeneXus では、既定では、次の表記規則に基づいて [ Screen Template ] セクションが解釈されます。
- {{Test}} --> [ Test ] プロパティを文字列として定義しています。
- {{Test:one|two|three}} --> [ Test ] プロパティを列挙値として定義し、その候補値を one、two、three として定義しています。
- {{#Test}} --> [ Test ] プロパティをカスタムとして定義しています。基本的には、あらゆる SDT が受け入れられます。
- --> Raw HTML コードを割り当てるために、 [ Test ] プロパティを文字列として定義しています。
プロパティを定義する際には、構文 {{ }} を使用します。たとえば、"Make" というプロパティを追加するには、次の構文を使用します。
{{Make}}
プロパティのタイプを明示的に宣言しなかった場合は、文字列タイプと見なされます。
前の例で取り上げた [ Make ] プロパティにさらにタイプを定義するには、次の構文を使用します。
{{Make:<data type>}}
<data type> には、使用可能なデータタイプのいずれかを指定する必要があります。
GeneXus データタイプとユーザーコントロールの <data type> とのマッピングは次のとおりです:
- Character --> string
- Numeric --> numeric
- Boolean --> boolean
- SDT --> sdt
さらに、 [ Make ] の列挙値を定義するには、次のように宣言します。
{{Make:Fiat|Volkswagen|Toyota|Peugeot|Renault}}
プロパティには初期値を割り当てることができます。そのためには、演算子 = (等号) を使用する必要があります。定義は次のようになります。
- {{Test="HELLO"}} --> [ Test ] プロパティの既定値は "HELLO" です。
- {{Test:one|two|three=one}} --> [ Test ] プロパティの既定値は宣言された列挙値の中の "one" です。
- {{IsActive=true}} --> [ IsActive ] プロパティの既定値は "true" です。
エレメントを反復ブロックで定義する場合は、プロパティをコレクションとして設定することが可能です。
たとえば、カテゴリ値のリストを定義するには、次のように宣言します。
<UL>
{{#Categories}}
<LI>{{Name}}</LI>
{{/Categories}}
</UL>
[ Categories ] プロパティの先頭に # (シャープ) 文字を付けることによって、それが反復エレメントであることを指定できます (また、この反復エレメント内では、{{Name}} プロパティを使用して、それぞれ対応する名前のアイテムを定義します)。
基本的なタイプのコレクション (Character、Numeric、Date など) を使用している場合は、次のように、{{.}} の構文を使用してシンプルコレクション内のエレメントを参照します:
{{#SimpleCollection}}
{{.}}
{{/SimpleCollection}}
三重中括弧の構文を使用してプロパティを定義し、Raw HTML をオブジェクトに含めることができます。
たとえば、タイトルが含まれている HTML ボタンを作成する場合、ユーザーコントロールの [ Screen Template ] 内にプロパティを定義できます。その後、HTML コードを使用してプロパティの値を GeneXus イベントに割り当てることができます。
myButton.customData = '<h2> The Button Element </ h2> <button type = "button"> I'm a button! </ button>'
実行結果は、タイトルの付いたヘッダーと、テキスト付きのボタンになります。
何らかの理由で特定のプロパティに値がない場合に一部の出力を省略した方がよければ、このように動作するようにプロパティに条件を適用する必要があります。この動作を実現するために、プロパティを条件付きで処理できます。条件付きであることを表すには、疑問符 (?) を使用します。
例:
{{AdditionalComments?}} text to include {{/AdditionalComments}}
この場合、 [ AdditionalComments ] プロパティは空になる可能性があるため、空の場合は表示しないように条件を設定しています。
次の Alert コントロールを実装します。
各バリエーションの違いはクラス (CSS スタイル) だけです。したがって、目的のアラートタイプ (warning、info、success、danger) を示す列挙型プロパティを持つ単一のコントロールの作成を検討するのが妥当です。これをモデル化するには、コントロールの [ Screen Template ] に次のように記述します。
<div {{OnClick}} class="Alert Alert--{{Type:info|warning|success|danger}}">
{{Text}}
</div>
この場合、画面上に配置したコントロールで、使用するアラートタイプを選択できます。
上の画像に注目すると、5 つのタイプのアラートが存在することが分かります。しかし、値は 4 つしか定義していません。この理由は、空の値も候補値として表示されているためです。この場合、Alert-- クラスを連結する必要はありません。
これを実現するには、 [ Type ] プロパティの値に条件を適用する必要があります。
<div {{OnClick}} class="Alert {{Type?}}Alert--{{Type:info|warning|success|danger}}{{/Type}}">
{{Text}}
</div>
このプロパティに条件を適用すると、Alert--{{Type}} クラスが無視され、Alert クラスのみがコントロールに残ります。
ユーザーコントロールで次の SDT に対して反復処理を行う必要があるとします:
図のとおり、SDT には部屋のコレクションがあり、各部屋にはスピーカーとトラックのコレクションがあります。
反復処理を行うには、次のプロパティ定義テンプレートを使う必要があります:
{{#SDTConferences}}
{{#Rooms}}
<!-- 部屋のプロパティ -->
{{#Speakers}}
<!-- スピーカーのプロパティ -->
{{/Speakers}}
{{#Tracks}}
<!-- トラックのプロパティ -->
{{/Tracks}}
{{/Rooms}}
{{/SDTConferences}}
|