フォーム

会員情報入力

登録日、氏名、メールアドレス、カード番号、パスワードなどの会員情報を入力し、グリッドに一覧表示するサンプルです。Inputの各種入力コントロールの機能や検証イベントを使用して、次の動作を実現しています。

• カレンダーからの日付選択
• プルダウンからのカードの種類選択
• パスワードの表示／非表示
• 入力文字の正当性検証
• 名前のフリガナの表示
• 編集用のマスク文字列の表示

入力したデータに問題がなければ、FlexGridに一覧表示します。また、Themesを用いてOffice2020風の外観を実現しています。

入力エディタ

Editorを使用して基本的なテキストエディターアプリケーションの実装方法を紹介するサンプルです。このコンポーネントには、リボンベースのツールバーと、実際のテキスト編集を行うHTMLエディタが用意されています。Ribbonの各種アイテムを使用して、エディタのテキストの色・フォント・サイズ、コピー＆ペースト、配置の設定など様々な編集を行うことができます。また、ツールバーのテーマ選択コンボボックスを使ってリボンの外観を簡単に変更できます。これはThemesを使用して実装しています。

高速グリッドの表示

FlexGridに大量のデータを読み込む際に通常の方法と仮想化を使用した方法の処理時間を比較できるサンプルプログラムです。通常モードでは、すべてのデータが一度にグリッドへロードされます。一方、仮想モードでは、データを一括でロードするのではなく、データソースから段階的に読み込みます。ユーザーがグリッドをスクロールすると、オンデマンドで一定サイズ単位のデータがロードされます。この仕組みにより、膨大な量のデータを扱う場合でも、短時間で効率的にデータをロードできるため非常に有効な機能となります。

注文データ照会・登録

注文データ照会

ヘッダ／明細形式のカスタムクラスで定義したデータを、FlexGridに表示する方法を紹介するサンプルです。ヘッダデータを画面に配置したFlexGridに設定し、明細データをFlexGridの行詳細機能を使って表示します。また、表示データの絞り込み機能については、ApplySearchメソッドを使用したデータの絞り込みとDataFilterコントロールを使った表示データの絞り込みの2種類を実装しています。カスタムクラスのリスト形式で取得したデータもFlexGridに設定できること、BindingSourceコントロールを使用することで、FlexGridへのデータバインドやデータ更新に関する実装がシンプルになることを確認してください。

注文データ登録

ヘッダ／明細形式のカスタムクラスで定義したデータの編集画面を、InputPanelコントロールを使用して実装する方法を紹介するサンプルです。フォーム内に、BindingSourceコントロールとInputPanelコントロールを配置します。BindingSourceのデータソースにカスタムクラスを設定し、InputPanelと紐づけることで、バリデーションロジックをカスタムクラス内で実装しています。各画面の基本となるフォームをRibbonFormクラスで実装しており、画面を閉じる処理、データの再読み込み処理、データ検索処理等の処理の共通化を行っています。

職員データ一括編集

カスタムクラスで定義したデータの登録・編集機能の実装を紹介するサンプルです。FlexGridで編集対象レコードを選択し、InputPanelで実際のデータ項目を編集します。フォームにBindingSourceコントロールを配置し、FlexGridとInputPanelの両方から参照することで、ユーザーが編集対象レコードを変更した場合のデータ同期処理をシンプルに実装しています。BindingSourceのデータソースにカスタムクラスのリストを設定することで、各レコードのバリデーションロジックをカスタムクラス内で実装し、責務を分離しています。

職員データ登録

画面のラベルコントロールにマウスホバーした際の ツールチップを表示するサンプルプログラムです。InputPanelコントロール内の、ToolTipTextプロパティでは、htmlタグを設定することが可能です。本サンプルでは、htmlタグを含む文字列を設定することで、改行・箇条書きなどを設定した高度なツールチップを設定しています。