インフラジスティックス・ジャパン株式会社Blog

インフラジスティックス・ジャパン株式会社のチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。

カレンダー予約入力フォームを「カスタムコンポーネント」で実装する方法(よくあるご質問解説)

https://jp.infragistics.com/products/windows-forms

こんにちは!ソリューションコンサルタントの田上です。

今回の記事では、他社製のUIライブラリからインフラジスティックス製「Ultimate UI for Windows Forms」に移行をし、カレンダーのフォームを「カスタムコンポーネント」で実装して、予約管理システムを実現したいという開発者様からお寄せいただきました機能質問についてお答えします。

お客様のご質問はこのような点でした。

  • カレンダーの「予約入力フォーム」に「標準以外の項目を追加」したい。
  • 自社独自の項目を追加した「カスタムコンポーネント」を使って機能拡張したい。

Ultimate UI for Windows Forms」は、このような要件も気軽に実装いただくことができます。では、詳細をご説明させていただきます。

「予約入力フォーム」とは

Infragistics(インフラジスティックス)の「Ultimate UI for Windows Forms」は軽快でインタラクティブな操作性を持つデスクトップアプリケーションを開発する際に、活用できる強力なUIコンポーネントです。

今回の記事では、この画像の「カレンダー部品(WinMonthViewMulti)」から日付をダブルクリックした際に起動される「予約入力フォーム(Appointment)」のフォームを「独自のカスタムフォーム」へ変更するコーディングをご紹介します。

予約入力フォームの「ビフォー&アフター」のイメージ画像

はじめに、「Ultimate UI for Windows Forms」が標準で提供している「カレンダー予約入力フォーム(Appointment)」を見てみましょう。この標準フォームに対して「独自項目を追加」することが今回の目標になります。

ビフォー:標準の「カレンダー予約入力フォーム」

では次に、「カスタムコンポーネント」として新たに実装する「独自フォーム」を見てみましょう。

アフター:作成する「カスタムコンポーネント」

あくまでサンプルですので、標準機能には及びませんが、シンプルに「件名」「開始(日)」「終了(日)」のみを表示しているフォームになっています。新しいフォームとして作成し、そのフォーム上に「3つの項目」を設けることにより「カスタムコンポーネント」を表現しています。また、「保存ボタン」を押下することで、メインのカレンダー画面に戻る動作を想定しています。

このように、「カスタムコンポーネント」を新たに用意することで、フォームに独自項目を追加することが可能です。

新たに「予約入力フォーム」を作成する

では、早速ですが「カスタムコンポーネント」として新しく「予約入力フォーム」を作成しましょう。今回の記事はサンプルとして「VBで実装する手順」になっていますが、C#でも同様のことが可能です。

前提事項:Ultimate for Windows Forms の準備

手順 1:カスタムフォームを作成する

「Visal Studio 2022」を開いて「ソリューションを右クリック>追加>フォーム(Windows フォーム)」を選択します。

新しいフォームの追加

次に「新しい項目の追加」画面にて、「フォーム(Windows フォーム)」を選択して「追加ボタン」を押下してください。

新しい項目の追加

すると、新しいフォーム(カスタムコンポーネント)が作成されます。ここではフォーム名を「CustomForm1」とします。

新しいフォーム名「CustomForm1」

Visual Studio 2022 のソリューションエクスプローラで確認すると、このようになります。

ソリューションエクスプローラーで確認

では、この「NotesDataBinding.vb」にコードを追加していきましょう。

VBコード

  • NotesDataBinding/NotesDataBinding/NotesDataBinding.vb
#Region "Default constructor"                  
    Public Sub New()              
        InitializeComponent()         
        AddHandler Load, AddressOf Form1Load            
        AddHandler ultraGrid1.InitializeLayout, AddressOf ultraGrid1_InitializeLayout         
        AddHandler optOwners.ValueChanged, AddressOf optOwners_ValueChanged           
        AddHandler ultraCalendarInfo1.AfterSelectedNotesChange, AddressOf ultraCalendarInfo1_AfterSelectedNotesChange         
        AddHandler ultraGrid1.ClickCell, AddressOf ultraGrid1_ClickCell           
                    
       ' ダイアログを表示する前にイベントをキャンセルして、カスタム フォームを表示する           
        AddHandler ultraCalendarInfo1.BeforeDisplayAppointmentDialog,           
            Sub(ByVal sender As Object, ByVal e As Infragistics.Win.UltraWinSchedule.DisplayAppointmentDialogEventArgs)      
                e.Cancel = True    
                CustomForm1.ShowDialog()    
            End Sub     
                    
    End Sub             
#End Region                  

コードの解説

このコードは、ultraCalendarInfo1 の BeforeDisplayAppointmentDialog イベントに対するイベントハンドラーを追加しています。このイベントハンドラーは、予定のダイアログが表示される直前に呼び出されます。

e.Cancel = True」によって、イベントのデフォルトの動作がキャンセルされます。これにより、標準で提供されている予約ダイアログ(Appointment)が表示されるのをキャンセルしています。

次にカスタムフォームである「CustomForm1 を表示するために CustomForm1.ShowDialog()」を呼び出しています。このようにすることで、標準の予約ダイアログが表示される直前に、アプリケーションがカスタムのフォームを表示し、ユーザーがそのフォームに入力を行うことができるようになります。

ここで一度「ビルドー>実行」して、動作を確認します。空のフォームが起動されていればOKになります。

空のフォームが起動する

手順 2:カスタムフォームに「件名」「開始(日)」「終了(日)」「保存」を配置する

それでは最後に、カスタムフォームに独自項目に見立てて、新しく「件名」「開始(日)」「終了(日)」「保存ボタン」を配置しましょう。

Visual Studio 2022 のツールボックスから、下記のUI部品をドラッグ&ドロップして「カスタムフォーム(CustomForm1)に配置」していきます。

  • 件名・・・「テキストエディタ(UltraWinEditors.UltraTextEditor)
  • 開始・・・「カレンダーコンボボックス(UltraWinSchedule.UltraCalenderCombo)
  • 終了・・・「カレンダーコンボボックス(UltraWinSchedule.UltraCalenderCombo)
  • 保存・・・「ボタン(Misc.UltraButton)

カスタムフォームに「件名」「開始」「終了」「保存」を配置する

では、さらに「NotesDataBinding.vb」に対してコードを追加していきましょう。

VBコード

  • NotesDataBinding/NotesDataBinding/NotesDataBinding.vb
#Region "Default constructor"                          
    Public Sub New()                      
        InitializeComponent()                 
        AddHandler Load, AddressOf Form1Load                    
        AddHandler ultraGrid1.InitializeLayout, AddressOf ultraGrid1_InitializeLayout                 
        AddHandler optOwners.ValueChanged, AddressOf optOwners_ValueChanged                   
        AddHandler ultraCalendarInfo1.AfterSelectedNotesChange, AddressOf ultraCalendarInfo1_AfterSelectedNotesChange                 
        AddHandler ultraGrid1.ClickCell, AddressOf ultraGrid1_ClickCell                   
                            
       ' 予約ダイアログ(Appointment)を表示する前にイベントをキャンセルして、カスタム フォームを表示する                    
        AddHandler ultraCalendarInfo1.BeforeDisplayAppointmentDialog,                   
            Sub(ByVal sender As Object, ByVal e As Infragistics.Win.UltraWinSchedule.DisplayAppointmentDialogEventArgs)              
                e.Cancel = True            
                            
               ' カスタムフォームを表示して、入力値を取得          
                Dim customForm As New CustomForm1()         
                If customForm.ShowDialog() = DialogResult.OK Then           
                   ' 入力値を取得        
                    Dim subject As String = customForm.UltraTextEditor1.Text     
                    Dim startDate As DateTime = customForm.UltraCalendarCombo1.Value      
                    Dim endDate As DateTime = customForm.UltraCalendarCombo2.Value        
                   ' 予定を作成してメインのカレンダーコンポーネントに追加        
                    Dim newAppointment As New Appointment(startDate, endDate)       
                            
                   ' オーナーキーの確認       
                    For Each owner As Owner In ultraCalendarInfo1.Owners      
                        Console.WriteLine($"Owner Key: {owner.Key}")   
                    Next      
                            
                   ' カスタム フォームで入力された値を設定       
                    newAppointment.Subject = subject        
                    newAppointment.OwnerKey = "Davolio" ' Owner Key をセット(所有者のカレンダーへ反映する)        
                    newAppointment.Appearance.BackColor = Color.Red     
                    newAppointment.Visible = True      
                    ultraCalendarInfo1.Appointments.Add(newAppointment)     
                End If          
            End Sub             
                            
    End Sub                     
#End Region                          

コードの解説

「e.Cancel = True」によって、予定のダイアログが表示されるのをキャンセルして、新しく作成した「カスタムフォーム (CustomForm1) を表示」しています。

作成した「予約入力フォーム(カスタムコンポーネント)」でユーザーが「保存ボタン」をクリックした場合、入力された値を元に「新しい予約 (newAppointment) オブジェクト」を作成し、メインのカレンダーコンポーネントに追加しています。

カスタム フォームで入力された値を取得する際に、UltraTextEditor1 および UltraCalendarCombo1、UltraCalendarCombo2 コントロールを使用しています。 今回のケースでは、カレンダーの所有者のコーディングを追記しており、「所有者キー(Owner Key)」を設定することで、「新しい予約(newAppointment)オブジェクト」の所有者を設定しています。

最後に、「新しい予約(newAppointment)」をカレンダーコンポーネントに追加しています。

完成したカスタムコンポーネント(カスタムフォーム)

それでは、新たに作成した「カスタムコンポーネント」をビルド実行してみましょう。カスタムフォームがうまく表示されたと思います。

これにより、標準にない「機能拡張(デザイン変更、項目の追加/削除)」を自由に行うことができます。

完成した「カスタムコンポーネント(カスタムフォーム)」

「Ultimate UI for Windows Forms」を始めましょう!

今回の記事では、カレンダーのフォームを「カスタムコンポーネント」で実装して自由に機能拡張するための Tips でした。

ぜひ、「Ultimate UI for Windows Forms」でUIコンポーネントを活用して画面開発される場合の、問題解決の Tips になれば幸いです。

Ultimate UI for Windowsのすべての機能は無料でお試しいただけます。 Ultimate UI for Windows 無料トライアルにアクセスして、最新バージョンを入手してください。

  • 「こんなことは実現できるの?」
  • 「どうやって実装すれば良いの?」

といった開発上の疑問にソリューションコンサルタントが直接お答えします。

ぜひ japansalesgroup@infragistics.com まで、お気軽にお問合せください。ご意見ご要望を心よりお待ちしています。

https://jp.infragistics.com/products/windows-forms