最近のアクセス:
ユーザー コントロール オブジェクト

User Control オブジェクトは GeneXus 16 以降で提供されるオブジェクトタイプで、ユーザーコントロールの開発を簡略化し、GeneXus コミュニティでのコードの再利用を容易にします。

重要な利点

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

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

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

サンプル

SemanticUI コントロールを統合して、この Card の設計を実現したいとします:
イメージ:39386.png
SemanticUI は、このウィジェットに対応する HTML を提供します:
<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>
必要な手順は次のとおりです:
1.User Control オブジェクトを作成します。
イメージ:39388.png
2.この HTML コードをそのまま User Control オブジェクトの [ Screen Template ] セクションに貼り付けます。
イメージ:39389.png
3.固定データを {{ }} で囲んだプロパティ名で置き換えます。これにより、User Control オブジェクトが動的になります。
例: {{ImageUrl}}、{{Title}}、{{MetaInfo}}、{{Description}}、および {{ExtraContent}} は、名前で呼び出されるプロパティです:
<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>
これらのプロパティはユーザーコントロールの [ Properties ] エレメントで作成されます。そこでデータタイプや既定値などを定義できます。
オブジェクトを保存すると、Web Panel オブジェクトで使用できるようになります。
4.Web パネルを作成するときに、ツールボックス内にこの Card ユーザーコントロールが表示され (コントロールの KBUserControls コントロールグループの下)、フォームにドラッグできます。
ドラッグした後で、ユーザーコントロールのプロパティを任意の GeneXus イベントで設定できます。たとえば、Start イベントで次のように定義できます:
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
プロパティは設計時と実行時の両方で設定できます。
実行結果は次のようになります:
イメージ:39391.png

イベント管理

イベントを HTML コードエレメントで定義することが可能です。使用可能なイベントは DOM (ドキュメント オブジェクト モデル) イベントです。
前述の概念を適用し、Click イベントを使用する例では、次のようなコードになります:
<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>
User Control イベントセクションでは、OnClick イベントを使用できます。
Web パネルで次のようにプログラミングされているとします:
Event card1.OnClick
    msg("Hello User Control Object!")EndEvent
最後に、Run を実行すると、コントロールにインタラクティブ性と接続性が生成されていることが分かります。
イメージ:39392.png
イベント管理の詳細については、「ユーザー コントロール オブジェクト - イベントの処理」を参照してください。

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

前の例では、Card に含まれているエレメントに特定のコントロールがあります。追加コンテンツセクションに固定データを入力する代わりに、そのスロットに含めるものを自由に設定できるようにするには、どのようにしたらよいでしょうか。
GeneXus では、:スロットと呼ばれる HTML 5 の標準エレメントを使用できます。スロットを追加コンテンツセクションに追加して (User Control 内の 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> 
   <div class="extra content">
       <a> <i class="user icon"></i> {{ExtraContent}} </a> 
       <slot name=」myContent" />
   </div> 
</div>
Web パネルを開くと、ユーザーコントロール内に myContent という名前のテーブルがあり、そこにツールボックスから任意のエレメントをドラッグできます。
新しいキャプションを定義するために TextBlock が追加されたとします:
イメージ:39393.png
変更後に実行すると、フッターが変わっており、追加した TextBlock で定義されているテキストが表示されます:
イメージ:39394.png

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

シンプルなデータではなくリストを表示する場合はどうすればよいでしょうか。
これにはコレクションタイプのプロパティを使用します。
Card 用のデータに加えて、追加コンテンツに HTML リスト (UL) として表示するカテゴリリストを受け取るとします。次のようなコードを生成する必要があります:

<UL>
<LI>Facundo</LI>
<LI>Cecilia</LI>
<LI>Santiago</LI>
</UL>
この状況をモデリングするには、名前の接頭語として # を追加して、コレクションタイプのプロパティを指定します。
Card コントロールに適用すると、コードは次のようになります:
<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>
このコントロールを保存すると、GeneXus は、SDT コレクションタイプの新しいプロパティがあり、そのコレクションの各メンバーに [ Name ] プロパティが必要であることを認識します。
必要なのは、作成された SDT に基づいてコレクションタイプの変数を定義し、それをコントロールの [ Categories ] プロパティに割り当て、Start イベントでロードすることだけです。
SDT:
イメージ:39443.png
SDT とコントロールを関連付けます (バインディング):
イメージ:39444.png
ロードを実行するコードは次のとおりです:
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
結果は次のようになります:
イメージ:39445.png

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

Click イベントを、HTML 内の最も高い階層のエレメント (最も外側) ではなく、前の反復処理のすべてのエレメントでトリガーするには、どのようにすればよいでしょうか。
GeneXus では、反復エレメントであることが自動的に推論され、イベントのトリガー時に、選択したエレメントのインデックスをプロパティで使用できます。
そのためには、Click イベントを次のようにプログラミングします:
Event card1.Click
    &Name = &CategoriesItems.Item(card1.CategoriesCurrentIndex).Name
    msg(&Name)
EndEvent
それぞれの名前をクリックすると表示されます。

使用可能バージョン

この機能は、GeneXus 16 以降で利用できます。

適用範囲

プラットフォーム Web (.NET、Java)

参考情報

SemanticUI デザインシステム

動画

イメージ:20668.png #GX28 での User Control オブジェクトについてのプレゼンテーション (スペイン語)


サブページ
Created: 19/03/25 17:59 by Admin Last update: 20/04/27 03:58 by Admin
カテゴリ
Powered by GXwiki 3.0