#検証#機能紹介：【準備編】User Controlオブジェクト①

　

こんにちは、植田です。

今回はGeneXus16から実装されているUser Controlオブジェクトについて、Semantic-UIを活用した

カスタムコントロ―ルを作成してみたいと思います。

検証#機能紹介：【作成編】User Controlオブジェクト②

検証#機能紹介：【改修編】User Controlオブジェクト③

　

　

■User Controlオブジェクトとは　

　

GeneXusで画面を作成する際に、現在では沢山の画面の要素（コントロール）を利用可能です。

例：テキストブロック、コンボボックス、グリッド、メニュー　等

これ以外に、もう少し画面の見た目を凝ってみたいですとか、複数のコントロールを共通部品として一つにまとめて

配置したいといった要件があると思います。

GeneXusでは、こういった要件に沿う形で独自の画面要素を自作するためのオブジェクトとして

GeneXus16よりUser Controlオブジェクトと呼ばれる仕組みが実装されました。

【参考Wiki】ユーザー コントロール オブジェクト

以前のバージョンにもこのような仕組みは存在していましたが、今回実装されているものは

実際に作成してみると敷居がとても低くなったのではないかと個人的には思います。

　

■ Semantic-UIとは

　

GeneXusでは、レスポンシブWEBデザインを実現する際にBootstrapという、

デザインシステムの為のUIライブラリを利用しています。

Semantic-UIもBootstrap同様に、様々な見た目や操作性のUIライブラリを保持しています。

【参考】Semantic UI

　

■ Semantic-UIの適用方法

　

今回作成を予定しているユーザーコントロールはポップアップメニューとなりますが、

必要なコンポーネントはSemantic-UIのサイトよりダウンロード可能です。

【ダウンロードページ】Getting Started

　

C#環境の場合、ターゲット環境直下に解凍したzipファイルを配置します。

　

常にSemantic-UIを参照する場合はMasterPageにて参照設定を行います。

参照設定には以下の3つのファイルが必要です。（CDNから参照する事も可能です。）

・semantic.min.css

・semantic.min.js

・Jqueryの最新版ファイル（例：jquery-3.6.0.min.js）

今回はこれらのファイルに対して下記のように参照設定を行っています。

（RWDMasterPageのStartイベント内）

form.HeaderRawHTML += !'<link rel="stylesheet" type="text/css" href="Semantic-UI-CSS-master/semantic.min.css">'
form.HeaderRawHTML += !'<script src="UserControls/jquery-3.6.0.min.js"></script>'
form.HeaderRawHTML += !'<script src="Semantic-UI-CSS-master/semantic.min.js"></script>'

　

以上、準備編でした。

次回は実際にユーザーコントロールを作成し、動作させていきたいと思います。

　

最後までご覧頂きありがとうございました！