UI
Database
cppBuilder
#migrated

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

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

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

関連: UI > 複数のプロファイルの切替 > GNOME Terminalの場合

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

  • 新規追加時
    • コンボボックスにテキスト入力
    • [Add]
      • 既存の場合は追加しない
  • 編集時
    • コンボボックスで選択
    • 項目更新後[Update]
  • 削除時
    • コンボボックスで選択
    • [Delete]

[Edit]ボタンを追加するかということも考えられる。

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

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

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

分かりにくい部分

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

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