これまでGeneXusに付属のソフトウェアで作成する必要があったユーザーコントロールが、GeneXus 16の新機能としてGeneXusのIDE上でオブジェクトとして作成できるようになりました。
また、Wikiを見ると作成方法も容易になった印象を受けますが、読解力が足りないせいか分かりづらい点が多かったので、調査した内容を整理します。
GeneXus Wiki – ユーザーコントロールオブジェクト
http://wiki.genexus.jp/hwiki.aspx?ユーザー+コントロール+オブジェクト
前提
GeneXus 16 Upgrade 2時点の調査内容です。
※ 今後仕様の追加や変更になる可能性があります。
本記事はユーザーコントロールオブジェクトの特徴と作り方の流れをざっくり説明しているだけですので、実際に開発する場合には公式wikiの熟読が必要になります。
概要
ユーザーコントロールオブジェクトは他のオブジェクトと同様に、GeneXusのIDE上で作成します。
WikiにはSemantic UIの話が冒頭に出てきますが、ユーザーコントロールオブジェクト自体はSemantic UIやその他のCSSのフレームワークとは、直接的な関係性はありません。
Semantic UIと連携するユーザーコントロールをサンプルとして作ります、という話のようです。
（Semantic UIと連携する部分は省略されているので、サンプル通りに進めても連携できません。。。）
作成方法
ユーザーコントロールオブジェクトは次のエレメントから構成されています。
- Screen Template
- Properties
- Documentation
Documentationは他のオブジェクトと同様なので割愛しますが、Screen TemplateとPropertiesは他のオブジェクトにないエレメントです。
Screen Template
レイアウトの作成
Screen Templateの名称から想像できるように、画面のレイアウトが定義できます。
レイアウトはHTMLで記述します。
ユーザーコントロール部分のみを記述するので、<html>や<body>などのHTMLタグは不要です。
プロパティ化
これまでもユーザーコントロールのプロパティに値を設定するという使い方がありましたが、本オブジェクトでも実現可能です。
ユーザーコントロールにプロパティを定義するには、次のようにプロパティ名を二重波括弧で括ります。
|
1 |
{{UserName}} |
動的出力
コレクションのエレメント数だけ動的にHTMLを出力したい、という場合があるかと思います。
ForやWhileのようなコマンドのかわりに、次のように記述します。
|
1 2 3 4 5 6 7 |
<ul> {{#SDT名}} <li> {{SDTのエレメント名}} </li> {{/SDT名}} </ul> |
上記のユーザーコントロールを実際に利用すると、<li>エレメントのデータ</li>がSDTのコレクションのエレメントの数だけ出力されます。
イベントとの連携
ユーザーコントロール上のクリック操作などをイベントとして定義することができます。
イベント名の定義についても二重波括弧で定義します。
|
1 |
<button type="button" {{onClick}}>生成</button> |
Properties
基本的な使い方
PropertiesはScreen Templateで定義した二重波括弧のパラメータの型やイベントの内容を定義します。
Screen Templateの入力後にオブジェクトを保存すると、Screen Templateの定義に応じて、次のようにGeneXusが適切なPropertiesを出力します。
例1）
|
1 2 3 |
<Definition auto="true"> <Property Name="UserName" Type="string" Default="" /> </Definition> |
例2）
|
1 2 3 4 |
<Definition auto="true"> <Property Name="SDT_Test" Type="sdt" Default="" /> <Property Name="SDT_TestCurrentIndex" Type="numeric" Default="" /> </Definition> |
例3）
|
1 2 3 |
<Definition auto="true"> <Event Name="onClick" /> </Definition> |
これはユーザーコントロールオブジェクトのデフォルトが、Definition auto = “true”となっているためです。
応用的な使い方
Definition auto = “false”にすることで、Propertiesが手動で編集できるようになります。
使い方の例として、ユーザーコントロールを配置したオブジェクトから実行するJavaScriptの関数（Function）を、記述することができます。
|
1 2 3 |
<script Name="hello"> alert("Hello, World!"); </script> |
JavaScriptのプログラミング経験がある方なら、上記のコードは以下のコードを記述しているとイメージするとわかりやすいでしょうか。
|
1 2 3 |
function hello(){ alert("Hello, World!"); } |
このように独自の関数を実行する場合やJavaScriptのライブラリやフレームワークと連携する場合も使用します。
記事が長くなってしまいましたので、続きは次回に投稿します。
いつも有益な情報ありがとうございます。
ほぼ同じですが私も同じユーザーコントロールの記事を書いてました。
https://www.oqiita.com/?p=2013
これからもblog更新楽しみにしてます!!
お世話になります。
ブログ拝見させていただきました。
実際にユーザーコントロールを作成できる記事を書かれているので、
比較するとお恥ずかしい限りです。
GeneXusのブログは少ないので、ちょくちょく拝見させていただきたいと思います。