sgcHTML 신규 폼 입력 컴포넌트 6종: MultiSelect, ColorPicker, Slider, TimePicker, SignaturePad, Transfer

sgcHTML의 신규 컴포넌트 25종을 다루는 이 시리즈의 세 번째 글입니다. 이번에는 폼 차례입니다: 태그 선택기, 색상 스와치, 범위 슬라이더, 시간 필드, 서명 캡처, 그리고 듀얼 리스트 역할 지정기까지, 직접 손으로 만들어야 했던 거의 모든 관리자 화면에 등장하는 여섯 가지 입력 요소입니다. 모두 평범한 Delphi/C++Builder/.NET 컴포넌트입니다: 속성을 설정하고 HTML을 읽으면, 다른 모든 폼 필드와 동일한 요청 주기를 통해 값이 다시 전송됩니다.

MultiSelect — 칩으로 표시되는 태그 선택기

TsgcHTMLComponent_MultiSelect는 방문자가 여러 값을 선택할 수 있는 검색 가능한 드롭다운으로, 선택한 값은 제거 가능한 칩으로 표시되며 선택적으로 MaxSelections로 최대 개수를 제한할 수 있습니다. 옵션을 하나씩 추가하거나 데이터셋을 직접 바인딩할 수 있습니다.

uses
  sgcHTML_Component_MultiSelect;

var
  oMulti: TsgcHTMLComponent_MultiSelect;
begin
  oMulti := TsgcHTMLComponent_MultiSelect.Create(nil);
  try
    oMulti.FieldName := 'tags';
    oMulti.Placeholder := 'Select tags';
    oMulti.MaxSelections := 3;
    oMulti.Size := mssLarge;

    oMulti.AddOption('js', 'JavaScript', True);
    oMulti.AddOption('py', 'Python');
    oMulti.AddOption('pas', 'Pascal');

    WebModule.Response := oMulti.HTML;   // dropdown + chips + hidden inputs
  finally
    oMulti.Free;
  end;
end;

// Or fill it straight from a dataset:
oMulti.LoadFromDataSet(qryTags, 'Code', 'Name', 'IsSelected');

ColorPicker — 네이티브 입력 + 원클릭 프리셋

TsgcHTMLComponent_ColorPicker는 네이티브 HTML5 색상 입력을 감싸며, 선택적으로 16진수 텍스트 필드와 원클릭 스와치 프리셋 한 줄을 함께 제공합니다 — 브랜드 색상 설정부터 캘린더 이벤트 태그 색상까지 다양하게 활용할 수 있습니다.

uses
  sgcHTML_Component_ColorPicker;

var
  oColor: TsgcHTMLComponent_ColorPicker;
begin
  oColor := TsgcHTMLComponent_ColorPicker.Create(nil);
  try
    oColor.FieldName := 'brand_color';
    oColor.LabelText := 'Brand color';
    oColor.Value := '#0d6efd';
    oColor.ShowValueInput := True;

    oColor.Swatches.Add('#0d6efd');
    oColor.Swatches.Add('#198754');
    oColor.Swatches.Add('#dc3545');

    WebModule.Response := oColor.HTML;   // color input + hex field + swatches
  finally
    oColor.Free;
  end;
end;

// Or the static one-liner (field name, value, label):
Result := TsgcHTMLComponent_ColorPicker.Build('brand_color', '#0d6efd', 'Brand color');

Slider — 실시간 값 배지가 있는 범위 입력

TsgcHTMLComponent_Slider는 최소/최대 레이블이 있는 Bootstrap 범위 슬라이더로, 드래그하는 동안 현재 값을 추적하는 배지가 함께 표시되며 테마에 맞춰 색상을 지정할 수 있습니다.

uses
  sgcHTML_Enums, sgcHTML_Component_Slider;

var
  oSlider: TsgcHTMLComponent_Slider;
begin
  oSlider := TsgcHTMLComponent_Slider.Create(nil);
  try
    oSlider.FieldName := 'volume';
    oSlider.LabelText := 'Volume';
    oSlider.Min := 0;
    oSlider.Max := 100;
    oSlider.Step := 5;
    oSlider.Value := 50;
    oSlider.ShowMinMax := True;
    oSlider.ColorStyle := hcSuccess;

    WebModule.Response := oSlider.HTML;   // form-range + live value badge
  finally
    oSlider.Free;
  end;
end;

TimePicker — 범위가 제한된 시간 입력

TsgcHTMLComponent_TimePicker는 MinTime/MaxTime 범위를 설정할 수 있는 네이티브 시간 입력입니다 — 예약 시간, 영업 시간, 근무 일정 등에 사용하는 필드입니다. 정적 Build 헬퍼도 제공됩니다.

uses
  sgcHTML_Component_TimePicker;

var
  oTime: TsgcHTMLComponent_TimePicker;
begin
  oTime := TsgcHTMLComponent_TimePicker.Create(nil);
  try
    oTime.FieldName := 'appointment_time';
    oTime.LabelText := 'Appointment time';
    oTime.MinTime := '08:00';
    oTime.MaxTime := '18:00';
    oTime.Required := True;

    WebModule.Response := oTime.HTML;   // <input type="time">
  finally
    oTime.Free;
  end;
end;

// Or the static one-liner (field name, label, value):
Result := TsgcHTMLComponent_TimePicker.Build('appointment_time', 'Appointment time');

SignaturePad — 캔버스 서명 캡처

TsgcHTMLComponent_SignaturePad는 Clear, Undo, Save 버튼이 있는 포인터 이벤트 기반 캔버스를 렌더링하며, 펜 색상과 굵기를 설정할 수 있고 캡처한 이미지를 전송할 UploadURL을 지정할 수 있습니다. 배송 승인, 계약 서명, 면책 동의서 등, 실제 서명이 화면 터치로 바뀐 모든 곳에 사용할 수 있습니다.

uses
  sgcHTML_Component_SignaturePad;

var
  oPad: TsgcHTMLComponent_SignaturePad;
begin
  oPad := TsgcHTMLComponent_SignaturePad.Create(nil);
  try
    oPad.FieldName := 'signature';
    oPad.Width := 500;
    oPad.Height := 220;
    oPad.PenColor := '#1a1a2e';
    oPad.PenWidth := 3;
    oPad.UploadURL := '/api/signatures/upload';

    WebModule.Response := oPad.HTML;   // <canvas> + Clear/Undo/Save buttons
  finally
    oPad.Free;
  end;
end;

Transfer — 듀얼 리스트 역할 지정기

TsgcHTMLComponent_Transfer는 "사용 가능" 항목과 "할당됨" 항목 사이에서 값을 이동시키는 전형적인 2패널 위젯입니다 — 권한, 역할, 그룹 소속 등에 사용됩니다. ShowFilter를 설정하면 각 패널에 검색 상자가 추가되고, FieldName을 설정하면 할당된 항목이 숨김 입력(hidden input)으로 다시 전송되므로 폼 제출이 그대로 동작합니다.

uses
  sgcHTML_Component_Transfer;

var
  oTransfer: TsgcHTMLComponent_Transfer;
begin
  oTransfer := TsgcHTMLComponent_Transfer.Create(nil);
  try
    oTransfer.TransferID := 'roles';
    oTransfer.FieldName := 'roles';
    oTransfer.TitleSource := 'Available roles';
    oTransfer.TitleTarget := 'Assigned roles';
    oTransfer.ShowFilter := True;
    oTransfer.Height := '260px';

    oTransfer.AddItem('admin', 'Administrator');
    oTransfer.AddItem('editor', 'Editor', True);
    oTransfer.AddItem('viewer', 'Viewer');

    WebModule.Response := oTransfer.HTML;   // dual panels + buttons + script
  finally
    oTransfer.Free;
  end;
end;

// Or bind it straight to a dataset:
oTransfer.LoadFromDataSet(qryRoles, 'RoleId', 'RoleName', 'IsAssigned');

직접 사용해보기

전체 문서, 주요 속성 레퍼런스, Delphi/C++Builder/.NET 코드 예제는 각 컴포넌트 페이지에서 확인할 수 있습니다: MultiSelect, ColorPicker, Slider, TimePicker, SignaturePad, Transfer. 다음 글에서는 배지, PDF 보기, 그리고 바쁜 화면을 반응성 있게 만들어주는 컴포넌트들을 다룹니다.

질문, 피드백, 마이그레이션 도움이 필요하신가요? 문의하기 — 실제로 코드를 작성한 사람들에게서 답변을 받으실 수 있습니다.