sgcHTML 새로운 기능: 스프레드시트, 폼 빌더, 리포트 등

· 컴포넌트
sgcHTML 새로운 기능: 스프레드시트, 폼 빌더, 리포트 등 | eSeGeCe 블로그
✦  sgcHTML · 새로운 기능

11개의 새로운 컴포넌트.
Delphi와 .NET을 위한 하나의 웹 툴킷.

sgcHTML에 스프레드시트, 폼 빌더, 리포트 디자이너와 뷰어, 파일 관리자, 이미지 크로퍼, 코드 편집기, 쿼리 빌더, 가이드 투어가 추가되었고, 스케줄러, 그리드, 폼, 접근성도 크게 발전했습니다. 모든 것이 서버에서 렌더링되며 CDN 없이 동작합니다.

  • Delphi
  • C++ Builder
  • Lazarus
  • .NET
  • ASP.NET Core
같은 sgcHTML 스프레드시트를 공유하는 두 브라우저, 합계와 차트가 있는 팀 예산
11새 컴포넌트
13새 라이브 데모
17내장 UI 언어
0CDN 의존성

Delphi로 만든 웹 애플리케이션에서는 늘 같은 요구가 나옵니다. 사용자가 계산할 수 있는 시트, 새 빌드 없이 업무 담당자가 바꿀 수 있는 폼, 인쇄되는 리포트, 문서를 보관할 곳, 잘라 낼 이미지입니다. 지금까지는 그때마다 JavaScript 라이브러리와 CDN, 그리고 약간의 연결 코드가 필요했습니다.

이번 sgcHTML 기능 업데이트로 이 모든 것이 컴포넌트가 됩니다. 폼에 올려놓거나 코드로 생성하고, 속성을 설정하고, 서버 이벤트를 Pascal 또는 C#으로 처리하면, 페이지는 Bootstrap과 htmx로 서버에서 렌더링됩니다. .NET에도 같은 컴포넌트가 있으며 ASP.NET Core Tag Helper를 지원하고 동일한 마크업을 생성합니다.

1분으로 보는 모든 기능

새로운 sgcHTML 컴포넌트가 브라우저에서 실시간으로 동작하는 모습입니다. YouTube에서도 볼 수 있습니다.

두 브라우저에서 열린 같은 예산 시트, 실시간으로 업데이트됨
새 컴포넌트

스프레드시트

페이지 안에서 바로 쓰는 수식 그리드입니다. 사용자는 SUM과 VLOOKUP부터 SUMIF, 날짜 함수, PMT까지 54개의 함수로 값과 수식을 입력하고, 서버는 변경할 때마다 계산해 바뀐 셀만 돌려보냅니다.

  • Excel처럼 동작하는 키보드와 클립보드, 복사와 붙여넣기 포함
  • 행과 열을 삽입하거나 삭제해도 모든 참조가 함께 갱신
  • 수식과 스타일을 유지하는 XLSX 가져오기와 내보내기
  • 실시간 동기화: 열려 있는 모든 브라우저에 변경 사항 표시
Spreadsheet1.Sheet.SetCellByName('A14', 'Total');
Spreadsheet1.Sheet.SetCellByName('B14', '=SUM(B2:B13)');
Spreadsheet1.LiveSync := True;     // every browser sees the change
Spreadsheet1.SaveToXLSX(oStream);  // formulas, styles and widths included
도구 상자, 폼 캔버스, 필드 인스펙터가 있는 폼 빌더
새 컴포넌트

폼 빌더

사용자가 직접 폼을 설계할 수 있습니다. 필드를 12열 캔버스로 끌어다 놓고, 레이블, 옵션, 유효성 검사 규칙, 입력 마스크를 지정하고, 다른 답변과 일치할 때만 표시되는 필드를 추가하며, 저장하기 전에 실제 폼을 미리 볼 수 있습니다.

디자인 결과는 일반 Form의 JSON 정의이므로 게시된 폼에서도 유효성 검사, 마스크, 실시간 검사가 그대로 유지되며, GetJSONSchema로 수집되는 데이터를 기술할 수 있습니다.

FormBuilder1.Form := Form1;        // the form your users design

procedure TPages.FormBuilder1Save(Sender: TObject; const aJSON: string;
  var aAccept: Boolean; var aErrorMessage: string);
begin
  SaveDesign(aJSON);               // store the definition where you like
end;

// on the public page
Form1.LoadFromJSON(LoadDesign);
밴드, 데이터 필드, 속성 인스펙터가 있는 리포트 디자이너
새 컴포넌트

리포트 엔진, 뷰어, 디자이너

외부 리포트 도구 없이 PDF로 바로 출력되는 밴드형 리포트입니다. 그룹과 소계, 차트, 바코드와 QR 코드, 매개변수와 서브리포트를 지원하며, 중국어, 일본어, 한국어, 아랍어, 히브리어를 위한 유니코드 글꼴도 사용할 수 있습니다.

뷰어에서는 미리 보기, 인쇄, Excel 내보내기를 할 수 있습니다. 디자이너에서는 개발자와 최종 사용자가 브라우저에서 리포트를 편집할 수 있고, Delphi IDE(10.4 이상)에서는 더블 클릭만으로 같은 디자이너가 열립니다.

Report1.LoadFromGrid(Grid1, 'Customers');   // print a grid in one call
Report1.SaveToStream(oStream);              // the PDF
폴더 트리, 파일 목록, 사진 미리 보기가 있는 파일 관리자
새 컴포넌트

파일 관리자

컴포넌트 하나로 문서 포털이 완성됩니다. 폴더 트리, 자세히 보기와 미리 보기 이미지, 이미지, PDF, 텍스트 미리 보기, 진행률이 표시되는 끌어서 놓기 업로드, 이름 바꾸기, 이동, 복사, 검색까지 마우스와 키보드로 모두 사용할 수 있습니다.

기본적으로 안전합니다. 사용자별 권한, 서버에서 모든 경로 검사, 만료되는 서명된 링크를 통한 파일 제공을 지원합니다.

문서 모드에서 촬영한 영수증을 바로잡는 이미지 크로퍼
새 컴포넌트

이미지 크로퍼

라이브러리 없이 프로필 사진과 스캔 문서를 처리합니다. 사진 모드에서는 자르기, 확대, 회전, 기울기 보정을 지원하며 아바타용 원형도 제공합니다. 문서 모드에서는 네 모서리를 끌어 영수증이나 페이지의 원근을 보정합니다.

이미지는 파일, 클립보드, 카메라에서 가져올 수 있으며, 서버가 받아들이기 전에 모든 이미지를 검사합니다.

관리자 콘솔에서 SQL 쿼리를 실행하는 코드 편집기
새 컴포넌트

코드 편집기

CodeMirror 6가 라이브러리에 내장되어 있습니다. SQL에서는 테이블과 컬럼을 자동 완성하고, JSON은 브라우저와 서버 양쪽에서 검증하며, JavaScript, HTML, CSS, XML, Markdown, Python, Pascal도 지원합니다. 코드 접기, 검색, 페이지를 따라가는 테마도 제공합니다.

AND 및 OR 규칙 그룹이 있는 쿼리 빌더
새 컴포넌트

쿼리 빌더

그리드의 컬럼에 대한 필터 규칙을 AND와 OR 그룹으로 만듭니다. 사용자는 자연어로 질문할 수도 있으며, 눈으로 확인하고 편집할 수 있는 규칙으로 결과를 받습니다. 코드가 받는 것은 매개변수화된 WHERE 절이며, 사용자나 AI가 작성한 텍스트는 절대 전달되지 않습니다.

vWhere := QueryBuilder1.GetSQLWhere(oParams);   // ':qb1' style parameters only
대시보드의 검색 상자에 스포트라이트를 비춘 가이드 투어 단계
새 컴포넌트

툴팁과 제품 투어

툴팁은 어떤 요소에도 붙일 수 있습니다. 가이드 투어는 첫 사용 경험의 각 단계에 스포트라이트를 비추고, 이전, 다음, 건너뛰기 버튼과 키보드를 지원하며, 사용자가 투어를 마치거나 건너뛸 때 서버 이벤트를 발생시킵니다.

그 밖의 기능도 모두 좋아졌습니다

스케줄러와 캘린더리소스, 반복 일정, 타임라인 보기, 끌어서 이동 및 크기 조정, 사용자 간 실시간 동기화.
Grid범위 선택, Excel과의 복사 및 붙여넣기, 행 메뉴, CSV, TSV, XLSX 가져오기.
FileUpload진행률이 표시되는 분할 및 이어 올리기 업로드, 크기 제한, 미리 보기 이미지.
RichEditor툴바 프리셋, 이미지, 멘션, 서버 측 HTML 새니타이저.
다이어그램과 지도자동 레이아웃과 조직도 모드를 갖춘 편집 가능한 다이어그램, 지도 클러스터링, GeoJSON.
폼 유효성 검사와 마스크브라우저와 서버 양쪽에서 검사하는 규칙, 실시간 검사, 입력 마스크.
DatePicker프리셋, 비활성 날짜, 주 번호를 지원하는 팝업 달력.
서버 이벤트Tabs, Select, Rating, TreeView, Calendar, Scheduler, Stepper, Modal, Toast가 코드에서 이벤트를 발생시킵니다.
접근성모든 컴포넌트에서 ARIA와 키보드 탐색을 지원하며, WCAG 2.2 A 및 AA에 대한 접근성 준수 보고서를 제공합니다.

온라인으로 체험하기

모든 기능에는 지금 바로 열어 볼 수 있는 라이브 데모가 있으며, 다운로드는 필요 없습니다.

Delphi와 .NET, 동일한 결과

모든 컴포넌트는 Delphi, C++ Builder, Lazarus에서 사용할 수 있고, .NET에서는 <sgc-spreadsheet>, <sgc-form-builder>, <sgc-report-viewer> 같은 ASP.NET Core Tag Helper로 사용할 수 있습니다. 둘 다 같은 마크업을 생성하고, 컴포넌트는 오른쪽에서 왼쪽으로 쓰는 언어를 포함해 17개 언어를 지원하며, 모든 스크립트와 스타일시트가 라이브러리에 내장되어 있어 페이지가 CDN에 의존하지 않습니다.

sgcHTML로 다음 웹 앱을 만드세요

Delphi와 .NET을 위한 서버 렌더링 컴포넌트 툴킷으로, 사용자가 기대하는 컴포넌트를 모두 갖추었습니다.