1
/
5
This page is intended for users in Hong Kong. Go to the page for users in United States.

【GeneXus】#ユーザーコントロール: ユーザーコントロールの作り方

こんにちは、中島です。

今回はGeneXusのユーザーコントロールについてご紹介します。


ユーザーコントロールとは、、、

業務アプリケーションや普段使っている入力項目をリッチにする機能です。


GeneXus MarketPlaceでダウンロードして使うことも可能ですし、自分で作ることもできます! 

GeneXus MarketPlaceはこちら

この記事では、ユーザーコントロールの作り方をご紹介します!

1.目標

上イメージのような「文字列を枠で囲って表示する」ユーザーコントロールを作ります。


・枠の幅、高さ、線種、色を任意で変えられる
・文字列も任意で変えられる
・文字のフォントはデフォルト(テーマ依存)とする
・文字の位置は中央固定とする

2.UserControlEditor

「UserControlEditor」を開きます。

インストールディレクトリ直下にあるUserControlEditor.exeを起動します。
Ev3だと C:\Program Files (x86)\Artech\GeneXus\GeneXusXEv3JP\UserControlEditor.exe です


3.新規ユーザーコントロールの作成

メニューの「New」よりユーザーコントロールを新規作成します。
あらかじめフォルダを作っておきます。 (例では、TestBoxという名前で作成しました)



「Control Definition」タブを押下します。
今回は特に変更する部分はないのでそのまま「Save」で保存しておきます。
※今後はよく触ると思われる設定箇所を赤枠でコメントしています


4.プロパティの設定

「Properties」タブから、ユーザーコントロールのプロパティを追加します。

今回必要なプロパティは…

・枠の幅
 ・枠の高さ
 ・枠の線種
 ・枠の色
 ・枠内のテキスト

Ⅰ.枠の幅と高さについては既にWidth、Heightがあるのでこれをそのまま利用します。
  本来はWebフォームエディタ上のUCのサイズのプロパティです

Ⅱ.枠の線種プロパティを追加します。線種はコンボボックスから選べるようにします。
  Name:BorderStyle
  Type:Combo
  Default:solid
  Values:Valuesについては専用の入力画面が開くのでそこで設定します。
     (入力欄に直接打ち込んでも良いです) 今回はひとまず下記の項目を設定します。
     ・solid
     ・double
     ・outset
     ・dashed
     ・dotted


Ⅲ.枠の色プロパティを追加します。
  Name:BorderColr
  Type:Color
  Default:black

【注意事項】
ユーザーコントロールに配備するプロパティのプロパティ名を
「BorderColor」とすると GeneXus上でプロパティを設定し、
ビルドした時にカラーコード表記がおかしくなり、正しく動作しません。
例:Testbox1_Bordercolor = (int)(0x0xFF0000);
   プロパティ名はBoxColorとするなど、
   上記の名称を避けるようにしてください。 ※今回は少々気持ち悪いですがBorderColrで進めます。


Ⅳ.テキストプロパティを追加します。
  Name:Text
  Type:Text

  「Save」で保存しておきます。


5.スクリプト

スクリプトを記述します…が、
UserControlEditorのエディタは使いにくいので、外部ツールを使ったほうがいいです。
その場合、UserControlEditorは閉じておきましょう。(スクリプトの記述が終わったらまた開きます)

上イメージを画面表示させるスクリプトを記述していきます。
今回、枠はdivタグを使うことにしました。


上記HTMLを出力するスクリプトを書いていきます。


スクリプト書き方

「TestBox」フォルダ内の「TestBoxRender.js」を外部エディタで開きます


this.show = function()内にスクリプトを書いていきます。
黒字が実際記述するスクリプトです。


this.setHtml()…GeneXusのWebフォーム上に置いたUCの場所にHTMLが出力されます


補足:Type:Colorのプロパティについて

扱いがやや特殊なため、少し解説します。

色の表現には「RGB」と「カラーコード」がありますが、
今回は「カラーコード」を使うことにします。
Type:Colorのプロパティからカラーコードを(文字列として)取得したい場合は
Htmlプロパティを使います。
例:this.Color.Html

RGB値を(数値として)取得したい場合は同様にR、G、Bプロパティを使います。
 例:this.Color.R
   this.Color.G
   this.Color.B


6.UC配置

出来たユーザーコントロールを「UserControls」フォルダに入れてインストールコマンドを実行します。


GeneXusを起動し、適当なWebパネルを作ってUCを配置します。
正常にインストールされていればツールボックス上に表示されます。


Webフォームに配置したUCのプロパティを変えてみましょう。


ビルドして実行しましょう。


7.実行結果

今回はこのようなイメージで出力されればOKです。


0.その他

もし、UCのアイコンを変えたい場合はxslファイルを編集します。


以上!閲覧いただきありがとうございました!

アプリケーションアシスト株式会社's job postings
11 Likes
11 Likes

Weekly ranking

Show other rankings