6.0J」のGcComboFrameコントロールを使って、SQLサーバ上のデータをドロップダウンウィンドウに表示し、任意のレコードを選ぶだけでデータ入力できるアプリケーションを作成してみます。6.0J」のGcComboFrameコントロールは、独自のドロップダウンウィンドウを構築することで、少ない面積で柔軟性の高い入力を実現するコントロールです。コンテントパネルには好きなコントロールを配置し、ドロップダウンウィンドウに組み込んだコントロールと連動して動作させることで、必要な時だけウィンドウをドロップダウン表示し、入力補助機能として使用することができます。Serverのデータベースに連結したFlexGridコントロールをドロップダウンウィンドウに組み込み、グリッドデータをクリックするだけで必要なデータを入力することができるアプリケーションを作成してみました。2005/2008/2010を使ってプログラムを作ったことがある人。2005/2008/2010のいずれかでプログラムが作れる環境。2010を使用して作成し、動作確認を行っています。6.0J」を使用して作成しています。6.0J」のアセンブリファイルを添付する必要があります。RuntimeのDLLをアプリケーションと一緒に配布するのと同じです。本記事のサンプルアプリケーションを正常に動作させるためには、次のファイルをインストールする必要があります。製品フレームワークこのファイルを、プログラムを実行するフォルダに格納します。Frameworkがインストールされていることが必須条件です。6.0J」をインストールする必要があります。インストーラは、グレープシティのWebページからダウンロードできます。ダウンロードしたい製品にチェックを付け[申込フォーム]ボタンを押すと、「トライアル版申込フォーム」ページに移動しますので、「個人情報の収集および使用に同意する」にチェックを入れ「同意する」ボタンをクリックします。トライアル申込フォームが表示されますので、必要情報を登録すると添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきます。ここからダウンロードします。ダウンロードファイルは圧縮ファイルになっていますので、解凍してインストーラを起動します。制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。6.0J」をインストールしたら、プロジェクトにコントロール/コンポーネントを追加します。ツールボックスに専用のタブを作成し、使用するコンポーネント/コンポーネントを追加します。追加対象はアセンブリ名が「C1.Win.C1FlexGrid.4」の「C1FlexGrid」コントロールと、「GrapeCity.Win.PlusPak.v60」の「GcComboFrame」「GcBalloonTip」コンポーネントです。GrapeCity.Win.PlusPak.v60アセンブリ名が「C1.Win.C1FlexGrid.4」の「C1FlexGrid」コントロールアセンブリ名が「GrapeCity.Win.PlusPak.v60」の「GcComboFrame」「GcBalloonTip」コンポーネントGcComboFrameコントロールについてGcComboFrameコントロールの概要については、過去の記事『独自のドロップダウンウィンドウを持った.NETアプリケーションの作成』で紹介していますので、そちらを参照してください。この時の記事のサンプルアプリケーションは入力に電卓コントロールを使いましたが、今回はデータベースのデータをグリッドで表示し、必要なデータのあるセルをクリックするだけで入力できるアプリケーションを作成しています。そのため、GcComboFrameコントロールのコンテントパネルにLabelとNumericUpDownコントロールを配置し、ドロップダウンウィンドウにC1FlexGridコントロールを配置して使用します。GcBalloonTipコンポーネントについてGcBalloonTipコンポーネントは、過去の記事『カスタムバルーンチップを持った.NETアプリケーションを作る』で使用していますが、バージョンが1つ前のものであることと、GcBalloonTipコンポーネントについて詳しく触れていませんので、補足を含めて概要を紹介しておきます。GcBalloonTipコンポーネントの概要GcBalloonTipコンポーネントは、フォーム上に配置されたコントロールにバルーンチップを表示できるようにする拡張コンポーネントです。標準コンポーネントのToolTipコンポーネントに比べ豊富なデザイン機能を持ち、表示位置の指定や背景色のグラデーション設定、バルーン内へのコントロールの追加機能など、単なるTips表示にとどまらず多彩な用途に使用できるコンポーネントです。専用のデザイナを持ち、以下のプロパティを操作することで外観の装飾や動作を設定することができます。視覚スタイルを使用して背景を描画するかどうかGcBalloonTipコンポーネントをフォームに配置するとフォーム上の各コントロールのプロパティウィンドウに「GcBalloonTip1のBalloonTipInfo」プロパティが追加されます。右側に表示されるボタンをクリックすると、バルーンチップの設定を行うバルーンチップエディタが表示されます。このエディタを使用して、コントロールごとにToolTipを設定します。プロパティウィンドウに「GcBalloonTip1のBalloonTipInfo」プロパティが追加されるバルーンチップエディタ背景色の変更やグラデーションを設定する場合は、「UseVisualStyleBackColor」を「False」に設定してから行います。バルーンにはキャプションとメッセージの2つを設定します。バルーンを使えるようにするには、Showメソッドを実行します。どのタイミングでバルーンを表示するのかは、各コントロールのイベントで決めます。そのイベントハンドラでShowメソッドを実行します。Buttonコントロールにマウスポインタが重なった時にバルーンを表示したければ、MouseHoverイベントハンドラでShowメソッドを実行するコードを記述します。Showメソッドはオーバーロードされており、引数はメソッドごとに違いますが、一番簡単な書式のShowメソッドでは、引数にバルーンを表示させるコントロール名を指定します。次のコードは、Buttonコントロールにマウスポインタが重なった時に、Buttonコントロールの上にバルーンを表示させます。BalloonTipInformation)Showメソッドのパラメータの一つ「TipPosition」を使って、バルーンチップの表示位置を設定することができます。設定値はTipPosition列挙のメンバです。コントロールの左上端を示します。コントロールの中央上端を示します。コントロールの右上端を示します。コントロールの左下端を示します。コントロールの中央下端を示します。コントロールの右下端を示します。Showメソッドのパラメータ「control」と「rectangle」を使って、グリッドコントロール内の特定のセルにバルーンチップを表示することが可能です。グリッドの特定のセルにバルーンを表示できる(ヘルプより抜粋)バルーンチップのウィンドウの中にはコントロールを追加して独自のバルーンチップを作ることができます。その際のコントロールの配置は、バルーンチップ内のテキストの下側に配置することができます。バルーンチップの大きさは追加されたコントロールのサイズによって自動的にサイズが調整されます。バルーンチップが表示可能なサイズの上限はMaxWidthとMaxHeightプロパティで設定でき、デフォルトでは、幅(MaxWidth)は600ピクセルで、高さ(MaxHeight)には制限は設定されていません。貼り付けたコントロールのサイズが大きくバルーンチップ内に表示しきれない場合は、スクロールバーが表示されます。コントロールの配置位置と配置例(ヘルプより抜粋)GUIのデザインでは、さっそくプログラムを作成しましょう。R2)で作成したサンプルデータベース「仕入れ商品一覧_Data.mdf」から、テーブル「製品リスト」にあるデータをすべて取出し、C1FlexGridコントロールで表示します。このC1FlexGridコントロールをGcComboFrameコントロールに連結させ、ドロップダウンウィンドウで表示するようにします。GcComboFrameコントロールは、LabelコントロールとNumericUpDownコントロールをコンテントパネルに組み込み、C1FlexGridコントロールで選択された行データをLabelコントロールで表示します。データを表示するタイミングは、C1FlexGridコントロールの任意の行のセルがクリックされた時点で、処理はこのコントロールのClickイベントハンドラで行います。GcComboFrameコントロールは全部で5セット作成し、5つのデータを表示できるようにしますが、最初のGcComboFrameコントロールだけ有効にし、残りの4つは無効にしておきます。上から順番にグリッドでデータが選択され表示された時点で、次のGcComboFrameコントロールを有効にします。C1FlexGridコントロールはGcComboFrameコントロール1つにつき1つ用意する必要がありますので、C1FlexGridコントロールも5つ用意します。これらのコントロールは、1つ作成したらコピーアンドペーストで複製を作成して使用するようにします。サンプルデータベース「仕入れ商品一覧_Data.mdf」のデータフォームのデザインフォームには、C1FlexGridコントロール、GcComboFrameコントロール、GcBalloonTipコンポーネントとGroupBoxコントロールを使用します。GcComboFrameコントロールには、5つのLabelコントロールと1つのNumericUpDownコントロールを組み込みます。C1FlexGridコントロールは、今回はフォームデザイン時からデータベースを組み込み、すべてのフィールドデータを表示するように設定します。各コントロールの設定は、作成手順の中で説明します。最初に、C1FlexGridコントロールを作成します。いうのも、C1FlexGridコントロールをGcComboFrameコントロールに連結すると、C1FlexGridコントロールは非表示になってしまい、この後の編集操作が少しやりづらくなってしまうためです。Serverで作成したデータベース「仕入れ商品一覧_Data.mdf」を連結し、テーブル「製品リスト」にあるデータをすべて取出し表示します。グリッドでクリックされたデータを取り出す処理を作成するため、Clickイベントハンドラも作成します。作成したC1FlexGridコントロールをコピーし、全部で5つ作成します。(1)まずはGroupBoxコントロールを1つ配置し、GcComboFrameコントロールを配置する場所を確保しておきます。ここではフォームの背景色を「BlanchedAlmond」に変更しています。(2)ツールボックスからC1FlexGridコントロールをフォームにドラッグアンドドロップします。Sizeプロパティの値を「660,230」にしておきます。これは、あとでGcComboFrameコントロールのドロップダウンウィンドウを表示する時に、グリッドのすべてのフィールドデータが表示されるサイズにしています。(3)C1FlexGridコントロールのスマートタグから、「データソース-プロジェクトデータソースの追加」を選びます。「データソース-プロジェクトデータソースの追加」を選ぶ(4)データソース構成ウィザードが起動しますので、「データベース」を選び「次へ」ボタンをクリックします。(5)「データセット」を選び「次へ」ボタンをクリックします。Serverデータベースファイル」に変更します。「データベースファイル名」の「参照」ボタンをクリックし、データベース「仕入れ商品一覧_Data.mdf」を選択します。Serverデータベースファイル」に変更し「仕入れ商品一覧_Data.mdf」を選択(7)「サーバにログオンする」で「Windows認証を使用する」が選ばれていることを確認し、「テスト接続」ボタンをクリックして接続に成功することを確認します。テスト接続に成功することを確認(8)OKボタンをクリックし「次へ」ボタンをクリックします。プロジェクトにデータファイルをコピーするかどうかを聞いてきますので、そのまま「はい」ボタンをクリックします。「次へ」ボタンをクリックします。(9)「データベースオブジェクトの選択」ページに移りますので、「テーブル-製品リスト」をクリックし、「完了」ボタンをクリックします。「テーブル-製品リスト」をクリックし、「完了」ボタンをクリック(10)再度C1FlexGridコントロールのスマートタグを表示し「データのプレビュー」を選びます。「データのプレビュー」ウィンドウで「プレビュー」ボタンをクリックし、データベースのデータが表示されることを確認します。スマートタグを表示し「データのプレビュー」を選ぶデータベースのデータが表示されることを確認する(11)C1FlexGridコントロールのプロパティウィンドウで「AutoResize」プロパティを「True」にします。これで、グリッドの各列幅はセルの内容に自動的に調節されます。ここでプログラムを実行し、データベースファイルのデータがグリッドに表示されることを確認します。データベースファイルのデータがグリッドに表示されることを確認する(12)作成したC1FlexGridコントロールを4つコピーします。設定したデータベースの連結は、コピーしたC1FlexGridコントロールにもそのまま受け継がれます。(13)作成したすべてのC1FlexGridコントロールのClickイベントハンドラを作成します。続いて、GcComboFrameコントロールを作成します。(1)すでにGroupBoxコントロールを配置してあるので、その中にGcComboFrameコントロールを配置します。(2)Labelコントロールを6つ配置し、列見出しを作成します。GcComboFrameコントロールのコンテンツエリアに、Labelコントロールを5つ、NumericUpDownコントロールを1つ配置します。Labelコントロールは、Textプロパティの値を削除し、BorderStyleプロパティを「Fixed3D」に、BackColorプロパティを「White」にします。LabelコントロールとNumericUpDownコントロールを配置する(3)GcComboFrameコントロールのプロパティウィンドウで「DropDownSettings」プロパティを展開し、「AutoSize」プロパティを「True」にします。これで、ドロップダウンウィンドウのサイズがC1FlexGridコントロールのサイズに合わせられます。(4)作成したGcComboFrameコントロールを4つコピーし、GroupBoxコントロール内に均等に並べます。GcComboFrameコントロールをコピーすると、中に組み込んだLabelコントロールのオブジェクト名(Name)が右から連番で自動的に付与されていきます。これを左から連番になるように修正しておいてください(あとでコードでデータを転送する際に混乱しないようにするためです)。Label16(5)最初に作成したGcComboFrameコントロールのスマートタグを開き、「ドロップダウンコントロール」のリストから「C1FlexGrid1」を選びます。これで、C1FlexGridコントロールはGcComboFrameコントロールに連結し、ドロップダウンウィンドウで表示されるようになります。フォームにあった「C1FlexGrid1」コントロールは非表示になります。Studioのプロパティウィンドウの上部にあるコンボボックスを開いてC1FlexGrid1を選択します。「ドロップダウンコントロール」のリストから「C1FlexGrid1」を選ぶ(6)同様の手順で、順番にGcComboFrameコントロールの「ドロップダウンコントロール」にC1FlexGridコントロールを組み込んでいきます。組み込んだらプログラムを実行させ、GcComboFrameコントロールのドロップダウンボタンをクリックしてC1FlexGridコントロールが表示されるのを確認します。GcComboFrameコントロールのドロップダウンボタンをクリックしてC1FlexGridコントロールが表示されるのを確認する(7)最後のGcComboFrameコントロールだけ、ドロップダウンウィンドウをコントロールの右側に表示するようにします。GcComboFrameコントロール(GcComboFrame5)のスマートタグを開き、「ドロップダウンの方向」のリストから「Right」を選びます。これで、このコントロールだけドロップダウンウィンドウはコントロールの右横に表示されます。「ドロップダウンの方向」のリストから「Right」を選ぶドロップダウンウィンドウはコントロールの右横に表示される(8)バルーンチップ表示のために、すべてのGcComboFrameコントロールのMouseHoverイベントハンドラを作成します。(9)そして、最初のGcComboFrameコントロール以外は、Enabledプロパティを「False」に設定し無効にしておきます。バルーンチップの作成フォームにボタンを1つ作成し、GcComboFrameコントロールとButtonコントロールにバルーンチップを設定します。「MouseHover」「Click」の2つのイベントハンドラを作成します。(2)ツールボックスからGcBalloonTipコンポーネントをフォームにドラッグアンドドロップします。(3)今作成したButtonコントロールのプロパティウィンドウに、「GcBalloonTip1のBalloonTipInfo」プロパティが追加されています。ボタンのスマートタグを開くと、「GcBalloonTip1により追加するバルーンチップ」というメニューが追加されているのでこれをクリックします。「GcBalloonTip1により追加するバルーンチップ」メニューをクリック(4)「バルーンチップエディタ」が表示されますので、次のプロパティを設定しバルーンチップを作成します。Falseこれで、図のようなバルーンチップができ上がります。エディタの設定と作成したバルーンチップ(5)GcComboFrameコントロール「GcComboFrame1」を選択し、同じくスマートタグの「GcBalloonTip1により追加するバルーンチップ」メニューをクリックします。バルーンチップエディタで、次のプロパティを設定しバルーンチップを作成します。Falseエディタの設定と作成したバルーンチップ(6)同じ操作を残りのGcComboFrameコントロールに対して行います。グリッドのデータ転送とバルーンチップの表示処理グリッドのデータをクリックすると、GcComboFrameコントロールのLabelコントロールに転送する処理と、バルーンチップを表示する処理を作成します。フォームのLoadイベントハンドラは、C1FlexGrid1コントロールにデータベースを連結した時に自動的に作成されたコードが記述されています。グリッドのデータ転送処理この処理は、C1FlexGridコントロールのClickイベントハンドラに作成します。グリッドのセルがクリックされると、Rowプロパティにその行番号が格納されますので、そのまま行番号と列番号を指定して、セルの値をGcComboFrameコントロールに配置したLabelコントロールのTextプロパティに順番に代入していきます。C1FlexGrid1からC1FlexGrid4までは、最初のLabelコントロールに値が代入された時点で、次のGcComboFrameコントロールを有効にする処理を組み込みます。これで、グリッドのセルをどれか1つクリックすれば、その行のデータがすべてLabelコントロールに転送されます。6].ToString();}バルーンチップ表示の処理バルーンチップの表示は、ButtonコントロールとGcComboFrameコントロールに、それぞれトリガーとなるイベントハンドラを作成していますので、そこでShowメソッドを実行します。Showメソッドでは、表示するコントロールのオブジェクト名と、バルーンの表示位置を指定するTipPosition列挙体のメンバ「BottomRight」を指定します。これで、Buttonコントロールは上にマウスポインタが重なるとバルーンが表示され、GcComboFrameコントロールはドロップダウンボタンにマウスポインタが重なるとバルーンが表示されます。GcComboFrameコントロールが無効状態だとバルーンは表示されません。6.0J」の製品情報を表示する処理を記述します。gcComboFrame1.AboutBox();}まとめ入力支援用コントロールは、常に表示しておきたいコントロールと違い、使いたい時だけ表示されればよいので、グリッドコントロールなどのようにフォームの面積を広く使うコントロールを、ドロップダウンウィンドウに格納できるGcComboFrameコントロールは、フォームデザイン上とても高い効果を生み出します。ドロップダウンウィンドウに配置したコントロールは、他のコントロールと連動してデータ転送などが行えるわけですから、多くのデータを1つのフォーム内で処理したい、というアプリケーションにはおすすめのコントロールといえます。3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。圧縮・解凍UNIX基本講座@CodeZine『CodeZine(コードジン)』の公式アカウントです。【NEW】デブスト2019デブサミ2019福岡・関西デブサミ2019夏デブスト関西デブサミ2019×ログインEメールパスワード※旧SEメンバーシップ会員の方は、同じ登録情報(Eメール&パスワード)でログインいただけます。イラストの無断転載を禁じます。記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。