UserControlとはなに？
はじめに
陶
最近GeneXusで作業していたら、User Controlっていうオブジェクトに触れる機会があったんだけど、これがなかなか便利でね。
大塚
User Controlって、あんまり聞かないですね。どんなときに使うんですか？
陶
簡単に言うと、再利用可能でカスタマイズできるコントロールを作れるオブジェクトなんだよ。たとえば、確認ダイアログなんかを自分仕様で作れるんだ。
大塚
え、でも確認ダイアログならWorkWithPlusのメッセージボックスで十分じゃないですか？
陶
例えば、ボタンの文字やダイアログのタイトルを簡単に変えたり、確認後に実行する処理を自由に設定できたりするんだ。それに、カスタマイズ次第では独自のデザインや機能を追加することもできる。
大塚
へぇ、それは便利そうですね。どうやって作るんですか？
環境：GeneXus18、WorkWithPlus（WWP）、Tomcat 10.1使用
実際に作ってみた
UserControlオブジェクトを実際に作成
陶
じゃあ、Confirmダイアログを例にして説明するね。
１．PatternsからUserControlオブジェクトを選び、追加する
２．プロパティよりUserControlを「DVelop.GXBootstrap.ConfirmPanel」を選択
３．プロパティよりUser Control Propetiesを選択し詳細を決める
※Yes Button Positionプロパティは初期設定で「Right」になっているため「Left」推奨（OKに該当するボタンが右側になってしまうため）
４．イベントにダイヤログ呼び出しコードを記述する
Event 'DoUserAction1'
/*UserControllの実装*/
//登録
//プロパティで設定したダイヤログを呼び出す
UCInsert.Confirm()
EndEvent※この設定で、ボタンを押したときに確認ダイアログが表示される
陶
これらの操作により、ダイヤログの表示ができました
大塚
その後の制御も教えてください！！
５．作成したユーザ―コントロール.（ドット）OnYesイベントを追加
６．実行したいソースコードを記述する
Event UCInsert.onYes
/*「Yes」を押された場合のみ登録が実行される */
//商品登録プロシージャ呼び出し
InsertProduct.Call(&ProductId,&ProductName,&ProductPrice,&ProductQuantity)
//エラーがなければコミット
If &IsError = False
Commit
Else
Rollback
EndIf
Return
EndEvent商品を登録してみた
陶
実際に「にんじん」に対して登録操作を行ってみた
1．商品リストに商品を追加ボタン押下で商品を追加します
2．商品情報を入力し、追加ボタンを押下
3．確認ダイヤログが表示されることを確認し、「はい」を押下
4．にんじんが追加されました
大塚
自分で設定したダイヤログを経由して登録することができました！
・プロパティを使用するメリット
・プロパティを使用する方法では初期設定が簡単
・GUIで設定できるため直感的に変更内容を把握できる
陶
実はもう一つの方法でダイヤログの文言を宣言できます。もう一つ削除のパターンを作りましょう
大塚
ぜひ教えてください！
商品を削除してみた
今回はプログラムにダイヤログのメッセージを宣言する
1．登録の手順1～2を行い、削除用のソースコードを記述
登録の3であげたUser Control Propetiesの詳細（TitleやConfirmationなど一部項目）はイベント内でも設定できる
Event 'DoDeletePrd'
//削除
//プログラムでダイヤログメッセージの設定
UCDelete.ConfirmationText = '商品を削除しますか？'
//ダイヤログ呼び出し
UCDelete.Confirm()
EndEvent
Event UCDelete.onYes
/*「Yes」を押された場合のみ登録が実行される*/
//「はい」を押下した時の処理
//商品削除プロシージャ呼び出し
DeleteProduct.Call(ProductId)
//エラーがなければコミット
If &IsError = False
Commit
Else
Rollback
EndIf
Return
EndEvent 大塚
できました！
陶
うまくできてるよ！画面で確認しよう
2．商品リストから「もも」商品を削除します
3．商品削除画面から「もも」商品であることを確認し、削除ボタンを押下します
4．確認ダイヤログが表示されることを確認し、「はい」を押下
5．商品リストから「もも」商品が削除されました
大塚
意外とすぐできますね！！
陶
設定を覚えるだけで簡単に確認ダイアログが作れるね。
おまけに
- 今度は条件分岐をやってみた
- さらに拡張してみた
Event 'Variation'
/*Caseによってダイヤログの文言を変える*/
Do Case
// Case名を「AAA」にする
Case 'AAA'
// Case AAAのダイヤログメッセージの設定
UCVariation.ConfirmationText = 'AAA商品を変更しますか？'
// Case名を「BBB」にする
Case 'BBB'
// Case BBBのダイヤログメッセージの設定
UCVariation.ConfirmationText = 'BBB商品を変更しますか？'
EndCase
// UCVariationというコントロール名のダイヤログ呼び出し
UCVariation.Confirm()
EndEvent・プログラムを使用するメリット
- 動的な変更が可能：実行時にプロパティを変更できるため、柔軟なUIやロジックを実現できる。
- 条件付き処理が簡単に記述可能：特定の状況に応じて挙動を変えたい場合に適している。
- 再利用性の高いコード作成が可能：共通のロジックやプロパティ設定を関数化して効率化できる。
おわりに
今回は、Confirmダイアログを例にしたUserControlについてご紹介しました
今回の内容が、皆さんの開発に役立つ一助となれば幸いです。
最後までお読みいただき、ありがとうございました！
概要
- UserControlは標準のGeneXusコントロールに加え、独自の機能やデザインを持つコントロールを作成できるオブジェクトです。
- 今回例に挙げたConfirmダイヤログは確認を求めることで、ユーザーに「自分の選択を確認する機会」を与え、操作に対する安心感を提供するメリットがあります。
- さらにJavaScriptとユーザーコントロール（User Control）を組み合わせることで、GeneXusの標準機能を超えた高度なカスタマイズやインタラクティブな機能を実現できます。