Form Builder

TsgcHTMLComponent_FormBuilder: 브라우저에서 실행되는 비주얼 폼 디자이너로, 애플리케이션 사용자가 직접 폼을 설계합니다. 게시되는 결과는 일반 TsgcHTMLComponent_Form이며, 유효성 검사 규칙, 입력 마스크, 조건부 필드, 실시간 유효성 검사를 Delphi, C++ Builder 및 .NET에서 사용할 수 있습니다.

TsgcHTMLComponent_FormBuilder

TsgcHTMLComponent_Form에 연결하고 렌더링합니다. 사용자는 도구 상자에서 12열 캔버스로 필드를 끌어다 놓고, 인스펙터에서 설정한 뒤 저장을(를) 누릅니다. OnSave는 저장할 정의를 JSON으로 전달하며, AutoApply를 사용하면 연결된 폼에 새 디자인이 즉시 표시됩니다.

컴포넌트 클래스

TsgcHTMLComponent_FormBuilder, 연결된 TsgcHTMLComponent_Form의 정의를 편집합니다

렌더링

도구 상자, 디자인 캔버스, 인스펙터, 미리 보기, JSON 보기. 외부 라이브러리 없이 순수 JavaScript와 CSS로 구성

패밀리

폼 & 입력

언어

Delphi, C++ Builder, .NET

폼을 연결하고, 디자인을 저장하고, 게시하기

빌더는 연결된 폼의 정의를 편집합니다. OnSave가 저장할 JSON을 받고, 공개 페이지는 LoadFromJSON으로 이를 자체 폼에 로드합니다. 제출 시 Validate가 전송된 값을 검사하고 GetValuesJSON이 이를 형식이 지정된 단일 JSON 객체로 반환합니다.

uses
  sgcHTML_Component_Form, sgcHTML_Component_FormBuilder;

// 폼에 TsgcHTMLComponent_Form (Form1)과
// TsgcHTMLComponent_FormBuilder (FormBuilder1)를 두고 Form = Form1로 설정합니다

procedure TMainModule.FormBuilder1Save(Sender: TObject; const aJSON: string;
  var aAccept: Boolean; var aErrorMessage: string);
begin
  // aJSON은 정규화된 정의이며 서버에서 이미 검사했습니다
  StoreDefinition('contact', aJSON);   // 자체 저장소: 파일, 테이블 등
end;

// 공개 페이지: 요청마다 폼 하나를 저장된 디자인에서 로드합니다
function TMainModule.ContactPage: string;
var
  oForm: TsgcHTMLComponent_Form;
begin
  oForm := TsgcHTMLComponent_Form.Create(nil);
  try
    oForm.Action := '/f/contact';
    oForm.LoadFromJSON(ReadDefinition('contact'));
    Result := oForm.HTML;
  finally
    oForm.Free;
  end;
end;

// 제출 시: 유효성을 검사한 다음 형식이 지정된 값을 보관합니다
function TMainModule.ContactPost(const aParams: TStrings): string;
var
  oForm: TsgcHTMLComponent_Form;
  oErrors: TStringList;
begin
  oForm := TsgcHTMLComponent_Form.Create(nil);
  oErrors := TStringList.Create;
  try
    oForm.LoadFromJSON(ReadDefinition('contact'));
    if oForm.Validate(aParams, oErrors) then
    begin
      StoreResponse('contact', oForm.GetValuesJSON(aParams));
      Result := ThankYouPage;
    end
    else
      Result := oForm.GetValidationResponse(oErrors);
  finally
    oErrors.Free;
    oForm.Free;
  end;
end;
@* Views/Forms/Builder.cshtml: 폼 하나의 디자이너 *@
@model FormsModel

<sgc-form-builder name="builder" form="@Model.Form"
                  max-fields="50" css-height="720px"
                  on-save="Model.SaveDefinition" />
using esegece.sgcWebSockets;

// 빌더의 OnSave: aJSON은 정규화된 정의입니다
public void SaveDefinition(object Sender, string aJSON, ref bool aAccept,
    ref string aErrorMessage)
{
    store.Save("contact", aJSON);
}

// 공개 폼, POST /f/contact
var form = new TsgcHTMLComponent_Form();
form.Action = "/f/contact";
form.LoadFromJSON(store.Load("contact"));

var fields = Request.Form.Select(f => f.Key + "=" + f.Value).ToList();
var errors = new List<string>();
if (form.Validate(fields, errors))
    responses.Add("contact", form.GetValuesJSON(fields));

string schema = form.GetJSONSchema();   // 데이터의 JSON Schema 2020-12

사용자가 얻는 것

개발자가 아닌 사람을 위한 디자이너와, 코드로 작성한 것과 똑같이 동작하는 폼.

도구 상자와 캔버스

도구 상자는 필드를 기본, 선택, 고급, 레이아웃(으)로 묶어 보여 줍니다. 필드를 캔버스로 끌어다 놓거나 Enter 키를 눌러 선택 항목 뒤에 추가합니다. 캔버스는 실제 컨트롤의 모습을 그대로 보여 주는 12열 그리드입니다. 너비는 3, 4, 6, 8, 9, 12열 중에서 정하고, 필드는 끌어서 또는 Alt+위쪽 화살표와 Alt+아래쪽 화살표로 옮기며, 복제하거나 삭제할 수도 있습니다. 실행 취소와(과) 다시 실행은(는) Ctrl+Z와 Ctrl+Y로 동작합니다.

인스펙터

필드 탭에서는 레이블, 레이블로 생성되어 고유하게 유지되는 이름, 자리 표시자, 도움말 텍스트, 기본값, 필수, 읽기 전용, 한 줄에 하나씩 입력하는 옵션, 최솟값과 최댓값, 행 수, 입력 마스크를 설정합니다. 양식 탭에서는 제목, 설명, 세로 또는 가로 레이아웃, 제출 버튼 텍스트, 초기화 버튼을 설정합니다.

유효성 검사 규칙

각 필드에는 규칙 목록을 지정할 수 있습니다. 길이, 범위, 패턴, 이메일, 사용자 지정이 있으며 각각 고유한 오류 메시지를 가집니다. 이 규칙은 TsgcHTMLComponent_Form의 규칙이므로, 게시된 폼은 브라우저에서 사용자가 입력하는 동안 LiveValidation으로, 서버에서는 Validate로 다시 한 번 검사합니다.

조건부 필드

앞에 있는 필드가 어떤 값과 같거나, 같지 않거나, 값을 포함하거나, 비어 있거나, 비어 있지 않거나, 어떤 숫자보다 크거나 작을 때만 필드를 표시합니다. 브라우저와 서버는 같은 규칙을 적용합니다. 숨겨진 필드는 전송되지 않고, 조건 때문에 숨겨진 필수 필드는 절대 실패하지 않으며, 숨겨진 필드에 의존하는 필드도 함께 숨겨집니다.

18가지 필드 유형

텍스트, 이메일, 비밀번호, 숫자, 텍스트 영역, 선택, 라디오, 체크박스, 스위치, 날짜, 시간, 색상, 범위, 파일, 숨김에 더해 폼 레이아웃을 구성하는 제목, 단락, 구분선이 있습니다. FieldTypes로 도구 상자에서 제공할 유형을 정합니다.

미리 보기 및 JSON

미리 보기은(는) 연결된 폼과 같은 모습의 실제 폼으로 디자인을 서버에서 렌더링하므로 유효성 검사, 마스크, 조건이 동작하며, 제출해도 실제로 전송되지 않습니다. JSON 보기에서는 정의를 확인하고, 복사하고, 편집하고, 적용할 수 있습니다. ShowPreview와 ShowJSON으로 각 보기를 켜거나 끕니다.

템플릿

템플릿에는 템플릿마다 Caption=JSON 한 줄을 기록하며, 도구 모음에서 새 폼을 시작할 때 고를 수 있습니다. 새 양식은(는) 저장하지 않은 변경 내용을 버리기 전에 확인하고, 저장하지 않은 변경 내용이 있는 채로 페이지를 떠날 때도 경고합니다.

접근성

모든 동작을 키보드로 수행할 수 있습니다. 도구 상자와 캔버스는 WAI-ARIA 리스트 박스이며, polite 라이브 리전이 필드의 추가, 삭제, 이동, 저장과 오류를 알려 줍니다. 빌더는 페이지 테마(data-bs-theme)를 따르고, dir="rtl"에서는 좌우가 반전되며, 동작 줄이기 설정을 존중합니다.

주요 속성, 메서드 및 이벤트

가장 자주 사용하는 멤버입니다.

Form 및 AutoApply

Form은 설계 대상인 TsgcHTMLComponent_Form입니다. AutoApply(기본적으로 켜짐)를 사용하면 저장할 때 Form.Lock 안에서 새 정의가 여기에 로드되므로, 같은 시간에 그 폼을 렌더링하는 페이지가 반쯤 완성된 디자인을 보는 일이 없습니다. ReadOnly는 디자인을 보여 주고 저장을(를) 거부합니다.

OnSave

OnSave(Sender, aJSON, aAccept, aErrorMessage)는 정규화된 정의를 받습니다. 전송된 JSON을 임시 폼에 로드했다가 다시 기록한 것입니다. 데이터를 보관하는 곳에 저장하십시오. aAccept를 False로 설정하면 거부할 수 있으며, aErrorMessage에 원하는 메시지를 지정할 수 있습니다.

사용자별 디자인

OnGetForm(Sender, aForm)은 요청을 보낸 사용자의 폼을 반환합니다. 렌더링 시점과 모든 요청에서 호출되며, 빌더는 반환된 폼을 해제하지 않습니다. 빌더는 요청 사이에 상태를 유지하지 않으므로 컴포넌트 하나로 모든 사용자를 처리합니다.

보안

브라우저는 전송 전에 이름과 한도를 검사하고, 서버는 전송된 모든 정의를 다시 검사합니다. 크기는 MaxSize(기본값 256 KB), 필드 수는 MaxFields(기본값 100)를 기준으로 하며, 필드 유형, 유효하고 고유한 이름, 열 너비, 규칙, 조건도 검사합니다. 통과하지 못한 정의는 OnSave가 실행되기 전에 사유와 함께 거부됩니다.

정의 JSON

폼의 SaveToJSON과 LoadFromJSON이 정의를 기록하고 읽습니다. 제목, 설명, 레이아웃, 버튼, 필드와 그 규칙 및 조건이 대상입니다. Delphi와 .NET은 바이트 단위로 동일하게 기록하므로, 한쪽에서 저장한 디자인을 다른 쪽에서 로드할 수 있습니다. LoadFromJSON은 LoadFieldsFromJSON의 필드 배열도 읽습니다.

JSON Schema 및 형식이 지정된 값

GetJSONSchema는 제출된 데이터의 JSON Schema 2020-12를 형식, 포맷, 옵션, 제한, 필수 필드와 함께 내보냅니다. GetValuesJSON(aParams)는 전송된 값을 필드 순서대로 하나의 JSON 객체로 반환합니다. 숫자는 숫자로, 체크박스와 스위치는 true 또는 false로 나타나며, 조건 때문에 숨겨진 필드는 제외됩니다.

서버 이벤트 없이

빌더는 HTMX 엔진의 컴포넌트 이벤트 엔드포인트 또는 ActionURL로 전송합니다. 둘 다 없어도 디자인은 가능하며, 저장은(는) 빌더에서 DOM 이벤트 sgc-form-builder-save를 발생시키고 detail에 JSON을 담습니다. URL이 있으면 저장에 성공한 뒤에도 이 이벤트가 이어집니다.

ASP.NET Core

Razor 뷰에서는 <sgc-form-builder> Tag Helper가 빌더를 렌더링하고, 저장 및 미리 보기 요청은 UseSgcHtml의 sgcHTML 미들웨어가 처리합니다. 이벤트는 C# 핸들러이며, 편집하는 폼도 동일한 TsgcHTMLComponent_Form 클래스입니다.

데모

Demos\60.HTML\01.RunTime\34.FormBuilder는 sgc Forms Studio로, 포트 8136에서 동작하는 서버입니다. 템플릿으로도 쓰이는 네 가지 폼, 즉 행사 등록, 고객 설문, 입사 지원, IT 지원 요청을 제공합니다. 각 폼에는 실시간 유효성 검사가 있는 공개 페이지와, 그리드, 차트, Excel 내보내기, JSON Schema가 있는 응답 페이지가 있습니다. 디자인 타임, Lazarus, .NET 버전도 같은 구성입니다.

계속 살펴보기

온라인으로 체험eSeGeCe 데모 서버에서 실시간으로 실행되는 폼 빌더 데모로 확인해 보세요.
온라인 도움말이 컴포넌트의 전체 API 레퍼런스와 사용 가이드입니다.
Form 컴포넌트빌더가 설계하는 폼입니다. 필드, 레이아웃, 규칙, 데이터셋 바인딩을 제공합니다.
모든 sgcHTML 컴포넌트80개 이상 컴포넌트의 전체 기능 매트릭스를 살펴보십시오.
무료 체험판 다운로드30일 체험판에는 60.HTML 데모 프로젝트가 포함되어 있습니다.
가격전체 소스 코드가 포함된 Single, Team 및 Site 라이선스.
최고의 가성비: All-Access모든 eSeGeCe 제품과 프리미엄 지원이 포함되어 연 €1,059부터 이용할 수 있어요.
All-Access 가격 보기

시작할 준비가 되셨습니까?

무료 체험판을 다운로드하고 Delphi, C++ Builder 및 .NET에서 웹 UI를 구축하기 시작하십시오.