LoginSignup
0
1

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-10-23
動作環境
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つあるため分かりにくい。

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1