SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

組み合わせの達人

組み合わせの達人-データ処理機能とUIの強化

第6回 ComponentOne Studioを利用して簡単な売上管理アプリケーションを作成する

  • X ポスト
  • このエントリーをはてなブックマークに追加

ダウンロード サンプルソース (4.8 MB)

見やすいツールチップでデータ内容を表示する

 次は、FlexGrid上のマウスフォーカス位置にあるデータの説明を表示する機能を追加してみましょう。データを表示するにはツールチップを用いるのですが、標準のToolTipコンポーネントでは、単一のプレーンテキストしか表示することができません。

 そこで、C1SuperTooltipコンポーネントを利用してみます。C1SuperTooltipコンポーネントでは、プレーンテキストだけでなくHTMLテキストも表示することが可能です(※前項のC1SizerLightコンポーネントと同様に、ツールボックスにアイテムを追加する必要があります)。

 基本的な使い方は標準のToolTipコンポーネントと同じです。まず、C1SuperTooltipコンポーネントをForm上にドラッグ&ドロップします。次に、SetToolTipメソッドを使用してツールチップを関連付けるコントロールと、ツールチップテキストを設定します。

this.c1SuperTooltip1.SetToolTip( "関連付けるコントロール", "ツールチップテキスト");

 実際にFlexGridのツールチップを設定してみましょう。まず、FlexGridのMouseMoveイベントを追加します。その中で、マウスの位置に従って表示したいツールチップテキストを設定します。

string toolTip = string.Empty;

// 見出しを設定します。
toolTip = string.Format("<b>{0}<b><parm><hr noshade size=1 style='margin:2' color=Darker></parm>", this.c1FlexGrid1[0, col]);

// データ部分を設定します。
toolTip += string.Format("<table><tr><td align = right>{0:C}</td></tr></table>", this.c1FlexGrid1[row, col]);


this.c1SuperTooltip1.SetToolTip( this.c1FlexGrid1, toolTip);

 見出しとして、列の見出しを設定します。その後、データ部分として実際のデータを設定します。

ツールチップの表示
ツールチップの表示

 太字表記や複数行表記などが簡単に行えます。また、IsBalloonプロパティをtrueに設定することで、バルーン形式での表示も可能です。

ツールチップの表示(バルーン形式)
ツールチップの表示(バルーン形式)

 あとは、マウス位置に合わせて通常行と集計行で表示の内容を変更してみましょう。

// 集計行の場合
if (this.c1FlexGrid1.Rows[row].Style != null)
{
    // 小計行の場合
    if (this.c1FlexGrid1.Rows[row].Style.Name
        == this.c1FlexGrid1.Styles[CellStyleEnum.Subtotal0].Name)
    {
        toolTip = string.Format("<b>{0}<b><parm><hr noshade size=1 style='margin:2' color=Darker></parm>", this.c1FlexGrid1[row, 1]);
        toolTip += string.Format("<table><tr><td>売上計</td><td align = right>{0:C}</td></tr>", this.c1FlexGrid1[row, 2]);
        toolTip += string.Format("<tr><td>仕入計</td><td align = right>{0:C}</td></tr>", this.c1FlexGrid1[row, 3]);
        toolTip += string.Format("<tr><td>粗利計</td><td align = right>{0:C}</td></tr></table>", this.c1FlexGrid1[row, 4]);
    }

    ・・・・
    ・・・・
    ・・・・

}

 通常行か集計行かの判定はセルのスタイルを用いて行っています。このソースコードでは、集計行のときは各項目の集計値を表示するようにしています。

 このように、簡単に見やすくツールチップを表示できます。応用としては、選択セルに合わせて一覧に表示されていない項目などを表示してみても良いかもしれません。なお、C1SuperTooltipコンポーネントにはグラフィカルにツールチップを設定できるエディタも用意されています。ツールチップの内容を動的に変更する必要がない場合は、エディタを使用するほうが便利です。

まとめ

 今回までに、C1Studioに収録されているさまざまなコントロールやコンポーネントを組み合わせ、標準のコントロールには準備されていない機能や、便利な機能などを利用しながら売上管理アプリケーションを作成してきました。いかがでしたでしょうか。

 残念ながら紹介できなかったコントロールや機能があったのですが、ここから先は皆さんで試してみてください。長くに渡りお付き合い頂きましてありがとうございました。ここで紹介させて頂いたことが何かしらのヒントになれば幸いです。

製品情報

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
組み合わせの達人連載記事一覧

もっと読む

この記事の著者

高山 昌悟(タカヤマ ショウゴ)

今までは主に、Windowsアプリケーションの開発を行ってきました。最近はWebアプリケーションの開発を行っています。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/3830 2009/04/21 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング