重要な利点

• このオブジェクトを使用すると、ユーザーコントロールをナレッジベースに組み込む形で定義できます。
• 外観は、開発者や CSS フレームワークなどによって提供されるスタイルに基づいて設定できます。
• サーバー側の HTML コードが生成されます。クライアントよりサーバーのほうが拡張が容易であるため、これは大きなメリットです。

User Control オブジェクトのセクション

1. Screen Template: このセクションには、開発者や CSS フレームワークが提供する HTML (一部のライブラリでは XML) コードを含めます。
2. Properties: [ Screen Template ] セクションでは、静的データ (ハードコーディング) を {{ }} (二重の中括弧) で囲んで定義したプロパティ名で置き換えて、ユーザーコントロールを動的にすることができます。これらのプロパティ名は [ Properties ] セクションに表示されるため、それらのデータタイプや既定値などを示すことができます。また、 [ Screen Template ] セクションでは、{{{ }}} (三重の中括弧) で囲むことでプロパティ名を定義できます。それらのプロパティ名は [ Properties ] セクションにも文字列データタイプで定義して表示されます。これは、Raw HTML コードを割り当てることができるようにするためです。
3. Documentation: オブジェクトに関するローカルドキュメントを記述できます。

サンプル

<div class="ui card"> 
   <div class="image"> 
      <img src="/images/avatar2/large/kristy.png"> </div> 
      <div class="content">
         <a class="header">Kristy</a> 
         <div class="meta"> <span class="date">Joined in 2013</span> </div>
         <div class="description"> Kristy is an art director living in New York.</div> 
     </div> 
   <div class="extra content">
       <a> <i class="user icon"></i> 22 Friends </a> 
   </div> 
</div>

<div class="ui card"> 
   <div class="image"> 
      <img src="{{ImageUrl}}"> </div> 
      <div class="content">
         <a class="header">{{Title}}</a> 
         <div class="meta"> <span class="date">{{MetaInfo}}</span> </div>
         <div class="description"> {{Description}} </div> 
     </div> 
   <div class="extra content">
       <a> <i class="user icon"></i> {{ExtraContent}} </a> 
   </div> 
</div>

Event Start
    card1.Title = "Facundo"
    card1.MetaInfo = "Born 2011"
    card1.Description = "Minecraft fan"
    card1.ExtraContent = "Doesn't have a Facebook account"
    card1.ImageUrl = "https://genexususa.com/wp-content/uploads/2017/08/Gaston-Milano-GeneXus-CTO-cropped.jpg"
EndEvent

イベント管理

<div class="ui card" {{OnClick}} > 
   <div class="image"> 
      <img src="{{ImageUrl}}"> </div> 
      <div class="content">
         <a class="header">{{Title}}</a> 
         <div class="meta"> <span class="date">{{MetaInfo}}</span> </div>
         <div class="description"> {{Description}} </div> 
     </div> 
   <div class="extra content">
       <a> <i class="user icon"></i> {{ExtraContent}} </a> 
   </div> 
</div>

Event card1.OnClick
    msg("Hello User Control Object!")EndEvent

ユーザー コントロール コンテナ

<div class="ui card" {{Click}} > 
   <div class="image"> 
      <img src="{{ImageUrl}}"> </div> 
      <div class="content">
         <a class="header">{{Title}}</a> 
         <div class="meta"> <span class="date">{{MetaInfo}}</span> </div>
         <div class="description"> {{Description}} </div> 
     </div> 
   <div class="extra content">
       <a> <i class="user icon"></i> {{ExtraContent}} </a> 
       <slot name="myContent" />
   </div> 
</div>

コレクションタイプのプロパティを使用したユーザーコントロール

<div class="ui card" {{Click}} > 
   <div class="image"> 
      <img src="{{ImageUrl}}"> </div> 
      <div class="content">
         <a class="header">{{Title}}</a> 
         <div class="meta"> <span class="date">{{MetaInfo}}</span> </div>
         <div class="description"> {{Description}} </div> 
         <div>
            <UL>
            {{#Categories}}
               <LI>{{Name}}</LI>
             {{/Categories}}
             </UL>
         </div>
     </div> 
   <div class="extra content">
       <a> <i class="user icon"></i> {{ExtraContent}} </a> 
       <slot name="myContent" />
   </div> 
</div>

Event Start
   &Item = new()
   &Item.Name = "Facundo"
   &CategoriesItems.Add(&Item)
   &Item = new()
   &Item.Name = "Cecilia"
   &CategoriesItems.Add(&Item)
   &Item = new()
   &Item.Name = "Santiago"
   &CategoriesItems.Add(&Item)
EndEvent

反復エレメントのイベント

Event card1.Click
    &Name = &CategoriesItems.Item(card1.CategoriesCurrentIndex).Name
    msg(&Name)
EndEvent

使用可能バージョン

適用範囲

参考情報

動画