C++ Builder XE4, 10.2 Tokyo > UI検討 > 複数のプロファイルの切替え > TComboBox + Buttons (Add, Delete) + Button (Update)

```txt:動作環境
C++ Builder XE4
RAD Studio 10.2 Tokyo Update 2 (追記: 2018/01/05)
```

複数のプロファイルを「新規」「編集」「削除」するUIの検討。

関連: [UI > 複数のプロファイルの切替 > GNOME Terminalの場合](https://qiita.com/7of9/items/d647fb720b195b398a64)

### code

```Unit1.h
//---------------------------------------------------------------------------

#ifndef Unit1H
#define Unit1H
//---------------------------------------------------------------------------
#include <System.Classes.hpp>
#include <Vcl.Controls.hpp>
#include <Vcl.StdCtrls.hpp>
#include <Vcl.Forms.hpp>
//---------------------------------------------------------------------------
class TForm1 : public TForm
{
__published:	// IDE で管理されるコンポーネント
	TComboBox *CMB_items;
	TButton *B_add;
	TEdit *E_color;
	TLabel *Label1;
	TButton *B_update;
	TButton *B_delete;
	void __fastcall B_addClick(TObject *Sender);
	void __fastcall CMB_itemsSelect(TObject *Sender);
	void __fastcall B_updateClick(TObject *Sender);
	void __fastcall B_deleteClick(TObject *Sender);
private:	// ユーザー宣言
public:		// ユーザー宣言
	__fastcall TForm1(TComponent* Owner);
};
//---------------------------------------------------------------------------
extern PACKAGE TForm1 *Form1;
//---------------------------------------------------------------------------
#endif
```

```Unit1.dfm
object Form1: TForm1
  Left = 0
  Top = 0
  Caption = 'Form1'
  ClientHeight = 300
  ClientWidth = 635
  Color = clBtnFace
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -11
  Font.Name = 'Tahoma'
  Font.Style = []
  OldCreateOrder = False
  PixelsPerInch = 96
  TextHeight = 13
  object Label1: TLabel
    Left = 192
    Top = 99
    Width = 29
    Height = 13
    Caption = 'Color:'
  end
  object CMB_items: TComboBox
    Left = 32
    Top = 24
    Width = 145
    Height = 21
    TabOrder = 0
    OnSelect = CMB_itemsSelect
  end
  object B_add: TButton
    Left = 183
    Top = 22
    Width = 75
    Height = 25
    Caption = 'Add'
    TabOrder = 1
    OnClick = B_addClick
  end
  object E_color: TEdit
    Left = 240
    Top = 96
    Width = 121
    Height = 21
    TabOrder = 2
    Text = 'E_color'
  end
  object B_update: TButton
    Left = 456
    Top = 64
    Width = 75
    Height = 25
    Caption = 'Update'
    TabOrder = 3
    OnClick = B_updateClick
  end
  object B_delete: TButton
    Left = 264
    Top = 22
    Width = 75
    Height = 25
    Caption = 'Delete'
    TabOrder = 4
    OnClick = B_deleteClick
  end
end

```

```Unit1.cpp
//---------------------------------------------------------------------------

#include <vcl.h>
#pragma hdrstop

#include "Unit1.h"
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.dfm"
TForm1 *Form1;
//---------------------------------------------------------------------------
__fastcall TForm1::TForm1(TComponent* Owner)
	: TForm(Owner)
{
	E_color->Text = L"";
}
//---------------------------------------------------------------------------
void __fastcall TForm1::B_addClick(TObject *Sender)
{
	String itm = CMB_items->Text;

	if (itm.Length() == 0) {
		return; // error
	}
	if (CMB_items->Items->IndexOf(itm) != -1) {
		return; // already exists
	}

	CMB_items->Items->Add(itm);
	E_color->Text = L"";
}

void __fastcall TForm1::B_deleteClick(TObject *Sender)
{

	String itm = CMB_items->Text;

	if (itm.Length() == 0) {
		return; // error
	}
	int idx = CMB_items->Items->IndexOf(itm);
	if (idx == -1) {
		return; // non-exist
	}

	CMB_items->Items->Delete(idx);
	// TODO; 設定ファイルの削除
}

void __fastcall TForm1::CMB_itemsSelect(TObject *Sender)
{
	// TODO: 設定ファイルの読込み

	E_color->Text = L"Doqqu' ";
}
//---------------------------------------------------------------------------
void __fastcall TForm1::B_updateClick(TObject *Sender)
{
	// TODO: 設定ファイルの保存
}
```

### 動作

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/3deb4b48-67c1-57be-02d4-9c45bd4cf9e2.png)

- 新規追加時
    - コンボボックスにテキスト入力
    - [Add]
        - 既存の場合は追加しない
- 編集時
    - コンボボックスで選択
    - 項目更新後[Update]
- 削除時
    - コンボボックスで選択
    - [Delete]
    
[Edit]ボタンを追加するかということも考えられる。

- [Edit]
    - コンボボックスで選択
        - Read Onlyで詳細を表示
    - [Edit]
        - 編集可能にする
        - [Update]使用可能

上記で間に合うようにも思うが、さらに検討する場合は、Database登録のUIを参考にするとよいかもしれない。

実際のプロファイルの保存はJSONを使った実装とするだろう。

### 分かりにくい部分

上記の例ではコンボボックスの役割が２つあるため分かりにくい。

- 新規追加時のプロファイル名入力
- 編集時のプロファイル名選択