sgcUI sgcWizard 출시

sgcWizard. 한 단계씩. 가면서 바로 검사.

설정, 온보딩, 결제 과정을 사용자에게 차근차근 안내하세요. 추가하는 모든 페이지가 스테퍼의 단계가 되고, 이전, 다음, 완료, 취소 버튼이 기본 제공되며, 이벤트 하나로 페이지가 올바를 때까지 이동을 막을 수 있어요. Delphi, C++ Builder, .NET용 네이티브 마법사와 스테퍼이고, 소스 코드가 포함돼요.

체험판 다운로드 sgcWizard 살펴보기

VCL
FireMonkey
WinForms
WPF
Avalonia
Delphi 7~13

1이벤트 하나로 모든 이동을 검사: 다음, 이전, 완료, 단계 클릭, 코드 호출
5단계 상태: 대기, 활성, 완료, 오류, 건너뜀
3스테퍼 레이아웃: 위, 왼쪽, 숨김
5UI 프레임워크: VCL, FireMonkey, WinForms, WPF, Avalonia

마법사에 필요한 모든 것.

긴 폼은 사용자를 압도하지만, 같은 필드를 몇 개의 명확한 단계로 나누면 끝까지 완료돼요. sgcWizard는 이를 안내형 흐름으로 바꿔 주고, 애플리케이션의 규칙과 모양을 따라요.

페이지가 곧 단계
추가하는 모든 페이지가 스테퍼에 나타나고, 이전, 다음, 완료, 취소가 기본 제공돼요.
거부권을 가진 유효성 검사
OnBeforePageChange는 사용자가 무엇을 눌렀든 페이지가 올바를 때까지 이동을 막아요.
명확한 단계 상태
대기, 활성, 완료, 오류, 건너뜀 상태를 한눈에 알아볼 수 있어요.
애플리케이션에 맞는 모양
내 버튼 캡션, 라이트와 다크 테마, 강조색, 그리고 IDE에서 디자인하는 페이지까지.

동작하는 모습을 보세요.

체험판에 포함된 Onboarding 데모에서 캡처했어요.

Onboarding 데모: Welcome, Account, Options, Summary 페이지와 이전, 다음, 취소 바를 갖춘 네 단계 마법사

페이지와 단계

스테퍼가 내장된 여러 단계 폼.

AddPage는 페이지를 만들면서 스테퍼 밴드에 그 단계도 함께 만들어요.
Caption, Description, StepGlyph는 각 단계의 라벨이 되어, 사용자가 현재 위치와 남은 단계를 알 수 있어요.
Next, Back, GoToPage는 버튼과 똑같이 이동해요.

OnPageChanged로 채워진 Onboarding 데모의 Summary 페이지와 완료 버튼

건너뛰기와 완료

해당하지 않는 단계는 건너뛰고, 완료는 내가 정한 대로.

페이지에 Skip을 설정하면 다음과 이전이 그 페이지를 건너뛰고, 스테퍼는 그 단계를 점선 윤곽으로 계속 보여 줘요.
OnFinish는 유효성 검사가 완료를 허용한 뒤에 실행돼서, 저장 코드를 한곳에 둘 수 있어요.
OnCancel는 취소 버튼, Escape 키, Cancel 호출을 처리해요. 마법사는 스스로 아무것도 닫지 않아요.

StepperPosition을 wspLeft로 설정한 마법사: 설치 프로그램처럼 설명이 있는 세로 단계 열

스테퍼 레이아웃

위, 왼쪽, 숨김 스테퍼.

StepperPosition은 wspTop, wspLeft, wspNone중 하나를 받아, 페이지를 건드리지 않고 밴드를 옮겨요.
CircleSize, ConnectorThickness, ShowDescriptions가 단계 표시의 크기와 라벨을 정해요.
아랍어와 히브리어를 위한 오른쪽에서 왼쪽 지원: 스테퍼, 단계 순서, 이전 및 다음 버튼이 미러링돼요.

창 없는 출력

문서와 테스트를 위한 스테퍼 이미지.

sgcWizardSaveToPNG, sgcWizardSaveToSVG는 창도 VCL도 FireMonkey도 없이 스테퍼를 그려요.
콘솔 프로그램, 서비스, 단위 테스트, 웹 서버에서도 같은 스테퍼를 이미지로 얻고, Linux64에서도 마찬가지예요.
.NET에서는 esegece.sgcWizard.Rendering 패키지가 Windows, Linux, macOS에서 PNG를 만들어요.

sgcWizard 더 보기.

단계 상태, 독립형 스테퍼, 다크 테마, 내 버튼 캡션을 데모에서 바로 보여 드려요.

한 스테퍼에 표시된 완료, 건너뜀, 오류, 대기 단계 — 완료, 건너뜀, 오류, 대기 단계예요. `AutoStates`를 켜면 `ActiveIndex`가 상태를 대신 설정해 줘요.

결제 흐름을 위한 독립형 스테퍼 — `TsgcVCLStepper`를 결제 과정에 단독으로 쓰고, `Clickable` 속성으로 단계를 클릭해 돌아갈 수 있게 해요.

다크 테마의 같은 마법사예요. 테마는 페이지 안의 레이블, 편집기, 체크 상자에도 적용돼요.

이전, 다음, 완료, 취소 캡션을 직접 정한 마법사 페이지 — `BackCaption`, `NextCaption`, `FinishCaption`, `CancelCaption`으로 버튼에 원하는 문구를 넣을 수 있고, 여기서는 스페인어예요.

몇 줄로 만드는 마법사.

페이지를 추가하고, 하나를 선택 사항으로 표시하고, 사용자가 Account 페이지를 떠나기 전에 검사해요. Delphi, C++ Builder, C#에서 같은 API예요.

dotnet add package esegece.sgcWizard.WinForms

C++ Builder와 C# 버전

procedure TMainForm.CreateWizard;
var
  oPage: TsgcVCLWizardPage;
begin
  // the wizard fills the form: stepper on the left, buttons at the bottom
  FWizard := TsgcVCLWizard.Create(Self);
  FWizard.Parent := Self;
  FWizard.Align := alClient;
  FWizard.StepperPosition := wspLeft;
  FWizard.Theme := utDark;
  FWizard.NextCaption := 'Continue';
  FWizard.FinishCaption := 'Create account';
  // every page is a step of the stepper
  oPage := FWizard.AddPage('Welcome');
  oPage.Description := 'Start here';
  oPage := FWizard.AddPage('Account');
  oPage.Description := 'Your details';
  FName := TEdit.Create(Self);
  FName.Parent := oPage;
  FName.SetBounds(24, 24, 240, 24);
  // an optional page the user can skip: Next and Back jump over it
  FOptions := FWizard.AddPage('Options');
  FOptions.Description := 'Optional';
  FOptions.Skip := True;
  oPage := FWizard.AddPage('Done');
  oPage.Description := 'Summary';
  FWizard.ActivePageIndex := 0;
  FWizard.OnBeforePageChange := WizardBeforePageChange;
  FWizard.OnFinish := WizardFinish;
end;

procedure TMainForm.WizardBeforePageChange(Sender: TObject;
  aFromIndex, aToIndex: Integer; var aAllow: Boolean);
begin
  // veto: leaving Account forwards needs a name
  if (aFromIndex = 1) and (aToIndex > aFromIndex) then
    aAllow := Trim(FName.Text) <> '';
end;

procedure TMainForm.WizardFinish(Sender: TObject);
begin
  ShowMessage('Welcome, ' + FName.Text);
end;