sgcUI sgcWizard を今すぐ利用できます

sgcWizard。一歩ずつ進める。進みながら検証。

セットアップ、オンボーディング、チェックアウトの流れをユーザーに案内できます。追加したページはそのままステッパーのステップになり、戻る、次へ、完了、キャンセルの各ボタンは標準で用意され、1 つのイベントでページが有効になるまで移動を止められます。Delphi、C++ Builder、.NET 向けのネイティブなウィザードとステッパーで、ソースコード付きです。

体験版をダウンロード sgcWizard を詳しく見る

VCL
FireMonkey
WinForms
WPF
Avalonia
Delphi 7～13

1つのイベントで、Next、Back、Finish、ステップのクリック、コードによる移動をすべて検証
5種類のステップ状態: 保留、現在、完了、エラー、スキップ
3種類のステッパー配置: 上、左、非表示
5UI フレームワーク: VCL、FireMonkey、WinForms、WPF、Avalonia

ウィザードに必要なものを、すべて。

長いフォームはユーザーを圧倒しますが、同じ項目でもわかりやすい数ステップに分ければ最後まで入力してもらえます。sgcWizard は、アプリケーションのルールと外観に合わせて、それを案内付きの流れに変えます。

ページがステップに
追加したページはステッパーに表示され、戻る、次へ、完了、キャンセルの各ボタンも標準で付いています。
拒否権付きの検証
OnBeforePageChange は、ユーザーがどのボタンを押しても、ページが有効になるまで移動を止めます。
わかりやすいステップ状態
保留、現在、完了、エラー、スキップ。どの状態も一目でわかります。
アプリケーションに合わせられる
ボタンのキャプション、ライトとダークのテーマ、アクセントカラー、そして IDE でデザインしたページに対応します。

動かして確かめる。

体験版に付属する Onboarding デモから取得しています。

Onboarding デモ: Welcome、Account、Options、Summary の 4 ページで構成されたウィザードと、Back、Next、Cancel のボタンバー

ページとステップ

ステッパー内蔵の複数ステップフォーム。

AddPage は、ページと、ステッパーバンド上のそのステップを同時に作成します。
Caption、Description、StepGlyph で各ステップに名前を付けるため、ユーザーは現在位置と残りの作業がわかります。
Next、Back、GoToPage は、ボタンとまったく同じように移動します。

Onboarding デモの Summary ページ。OnPageChanged で内容を設定し、Finish ボタンを備えています

スキップと完了

不要なステップはスキップし、完了する場所は自分で決められます。

ページに Skip を設定すると、Next と Back はそのページを飛ばします。ステッパーには破線の枠で表示されたままです。
OnFinish は、検証が完了を許可した後に実行されるため、保存処理を 1 か所にまとめられます。
OnCancel は、Cancel ボタン、Escape キー、 Cancelの呼び出しを処理します。ウィザードが自分で何かを閉じることはありません。

StepperPosition を wspLeft にしたウィザード: インストーラーのように、説明付きのステップが縦に並びます

ステッパーの配置

ステッパーは上、左、または非表示。

StepperPosition には wspTop、wspLeft、wspNone を指定でき、ページには手を加えません。
CircleSize、ConnectorThickness、ShowDescriptions は、ステップマーカーのサイズとラベルを設定します。
アラビア語やヘブライ語向けの右から左の表示では、ステッパー、ステップの順序、戻るボタンと次へボタンが反転します。

ウィンドウなしの出力

ドキュメントやテスト用のステッパー画像。

sgcWizardSaveToPNG、sgcWizardSaveToSVG は、ウィンドウも VCL や FireMonkey も使わずにステッパーを描画します。
コンソールプログラム、サービス、ユニットテスト、Web サーバーでも、Linux64 を含め、同じステッパーを画像として取得できます。
.NET では esegece.sgcWizard.Rendering パッケージが Windows、Linux、macOS で PNG を書き出します。

sgcWizard のその他の機能。

ステップ状態、単体のステッパー、ダークテーマ、独自のボタンキャプションを、デモからそのままご紹介します。

完了、スキップ、エラー、保留のステップが 1 つのステッパーに並んでいる様子 — 完了、スキップ、エラー、保留のステップです。 `AutoStates` をオンにすると、 `ActiveIndex` がそれらを自動で設定します。

チェックアウトの流れのための単体ステッパー — `TsgcVCLStepper` を単体でチェックアウトに使い、 `Clickable` のステップで前に戻れます。

ダークテーマの同じウィザード。テーマはページ上のラベル、エディット、チェックボックスにも反映されます。

Back、Next、Finish、Cancel のキャプションを独自に設定したウィザードのページ — `BackCaption`、`NextCaption`、`FinishCaption`、`CancelCaption` で、ボタンに独自の文言を設定できます。ここではスペイン語です。

数行で作るウィザード。

ページを追加し、1 つを任意ページにして、ユーザーが 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;