라이브러리의 모든 컴포넌트를 10개 패밀리로 그룹화했습니다. 각 컴포넌트는 Bootstrap 5 마크업으로 렌더링되며 Delphi, C++ Builder 및 .NET에서 동일하게 작동합니다. 대부분은 데이터 연동형으로, LoadFromDataSet / DataSource(또는 이에 상응하는 .NET 소스)를 통해 TDataSet에 바로 바인딩됩니다. 컴포넌트를 클릭하면 사용법과 예제가 포함된 자체 페이지로 이동합니다. 모든 컴포넌트는 자동 HTML, 속성, JavaScript 및 URL 출력 인코딩과 URL 정리를 적용하므로, 동적 콘텐츠는 기본적으로 이스케이프되어 XSS 및 주입으로부터 보호됩니다.
8개 컴포넌트, 8개 기능
14개 컴포넌트
11개 컴포넌트
10개 컴포넌트
24개 컴포넌트
10개 컴포넌트
14개 컴포넌트
4개 컴포넌트
7개 컴포넌트
16개 컴포넌트, MQTT 바인딩
8개 클래스
데이터셋을 직접 렌더링하는 그리드, 캘린더 및 보드.
| 컴포넌트 | 클래스 | 설명 | 도움말 |
|---|---|---|---|
| Grid | TsgcHTMLComponent_Grid | 기능이 풍부한 표: 정렬, 필터, CSV/PDF 내보내기, 인라인 편집, 그룹화, 가상 스크롤 및 AI 쿼리. | Docs |
| DataTable | TsgcHTMLComponent_DataTable | 툴바, 검색 및 행 수와 함께 Grid + Pagination을 감싸는 상위 수준 데이터 테이블. | Docs |
| Calendar | TsgcHTMLComponent_Calendar | 이벤트 점과 이전/다음 내비게이션을 갖춘 월별 그리드 캘린더. | Docs |
| Scheduler | TsgcHTMLComponent_Scheduler | 날짜별로 이벤트를 렌더링하는 캘린더 스케줄러(월 / 주 보기). | Docs |
| Timeline | TsgcHTMLComponent_Timeline | 데이터셋에서 로드할 수 있는, 날짜가 지정된 이벤트의 세로형 타임라인. | Docs |
| KanbanBoard | TsgcHTMLComponent_KanbanBoard | 열과 드래그 가능한 카드로 구성된 칸반 보드. | Docs |
| Gantt | TsgcHTMLComponent_Gantt | 작업 진행률 막대를 갖춘 간트 프로젝트 타임라인 차트. | Docs |
| TreeGrid | TsgcHTMLComponent_TreeGrid | Id/ParentId 노드 쌍으로 구성된, 접을 수 있는 계층적 행을 갖춘 Bootstrap 표. | Docs |
| PivotTable | TsgcHTMLComponent_PivotTable | 행과 열을 그룹화하고 측정값을 집계하며 행, 열 및 총합계를 제공하는 Bootstrap 피벗 테이블. | Docs |
| ActivityFeed | TsgcHTMLComponent_ActivityFeed | 상대 타임스탬프와 대역 외(out-of-band) WebSocket 푸시를 갖춘, 최신순으로 표시되는 실시간 활동 피드. | Docs |
| AuditTrail | TsgcHTMLComponent_AuditTrail | 행위자, 작업, 대상 및 타임스탬프와 함께 사용자 및 시스템 작업을 시간순으로 기록하는 감사 로그 피드. | Docs |
사용자 자신의 수치로 만든 데이터 기반 시각 자료.
| 컴포넌트 | 클래스 | 설명 | 도움말 |
|---|---|---|---|
| Chart | TsgcHTMLComponent_Chart | Chart.js 차트: 선형, 막대, 원형, 도넛, 레이더, 극좌표, 버블 및 산점도. | Docs |
| Gauge | TsgcHTMLComponent_Gauge | 낮음 / 중간 / 높음 색상 임계값을 갖춘 반원형 SVG 게이지이거나, 눈금, 색상 범위, 바늘을 갖춘 90도, 180도 또는 270도 스케일입니다. | Docs |
| Diagram | TsgcHTMLComponent_Diagram | 인라인 SVG로 렌더링되는 노드-화살표 흐름도. | Docs |
| Map | TsgcHTMLComponent_Map | 마커가 있는 Leaflet.js 인터랙티브 지도(OpenStreetMap / CartoDB 타일). | Docs |
| Heatmap | TsgcHTMLComponent_Heatmap | 셀 값 또는 바인딩된 데이터셋을 기반으로 한 색상 스케일 SVG 히트맵 그리드로, 범례와 행/열 레이블을 갖췄습니다. | Docs |
| Sparkline | TsgcHTMLComponent_Sparkline | 값 시리즈 또는 바인딩된 데이터셋으로 만드는 컴팩트한 인라인 SVG 라인, 막대 또는 영역 스파크라인. | Docs |
| CandlestickChart | TsgcHTMLComponent_CandlestickChart | 심지, 상승/하락 색상 및 선택적 거래량 막대를 갖춘 SVG OHLC 캔들스틱 차트. | Docs |
| QRCode | TsgcHTMLComponent_QRCode | 선택 가능한 오류 정정 수준을 갖춘, 모든 텍스트나 URL로 만드는 순수 Pascal ISO/IEC 18004 SVG QR 코드. | Docs |
| Barcode | TsgcHTMLComponent_Barcode | 선택적 사람이 읽을 수 있는 캡션을 갖춘, 모든 ASCII 텍스트로 만드는 순수 Pascal Code 128 SVG 바코드. | Docs |
| TreeMap | TsgcHTMLComponent_TreeMap | 차팅 라이브러리가 필요 없는, 독립적으로 서버에서 생성되는 인라인 SVG로 렌더링되는 스퀘어파이드 트리맵. | Docs |
유효성 검사와 데이터셋 바인딩을 갖춘, 데이터 수집에 필요한 모든 것.
| 컴포넌트 | 클래스 | 설명 | 도움말 |
|---|---|---|---|
| Form | TsgcHTMLComponent_Form | 유효성 검사, 레이아웃 및 AI 폼 생성을 갖춘 데이터 기반 폼 빌더. | Docs |
| Edit | TsgcHTMLComponent_Edit | 레이블, 도움말 텍스트 및 데이터셋 바인딩을 갖춘 한 줄 텍스트 입력. | Docs |
| Memo | TsgcHTMLComponent_Memo | 레이블과 도움말 텍스트를 갖춘 여러 줄 텍스트 영역 입력. | Docs |
| CheckBox | TsgcHTMLComponent_CheckBox | 레이블과 체크 상태를 갖춘 체크박스 입력. | Docs |
| RadioGroup | TsgcHTMLComponent_RadioGroup | 상호 배타적인 라디오 옵션 그룹. | Docs |
| Select | TsgcHTMLComponent_Select | 옵션 그룹, 다중 선택 및 데이터셋 바인딩을 갖춘 선택 드롭다운. | Docs |
| InputGroup | TsgcHTMLComponent_InputGroup | 앞/뒤 추가 텍스트 애드온을 갖춘 입력. | Docs |
| AutoComplete | TsgcHTMLComponent_AutoComplete | 제안 목록의 HTML5 datalist로 뒷받침되는 텍스트 입력. | Docs |
| DatePicker | TsgcHTMLComponent_DatePicker | 네이티브 날짜 / 시간 / 날짜시간 입력 필드. | Docs |
| FileUpload | TsgcHTMLComponent_FileUpload | 멀티파트 폼 전송을 갖춘 드래그 앤 드롭 파일 업로드 영역. | Docs |
| RichEditor | TsgcHTMLComponent_RichEditor | 숨김 폼 필드를 갖춘 Quill 기반 WYSIWYG 리치 텍스트 편집기. | Docs |
| Rating | TsgcHTMLComponent_Rating | 별점(기호) 평가 표시 또는 입력. | Docs |
| MultiSelect | TsgcHTMLComponent_MultiSelect | 칩, 그룹화된 옵션 및 데이터셋 바인딩을 갖춘 검색 가능한 Bootstrap 다중 선택 드롭다운. | Docs |
| ColorPicker | TsgcHTMLComponent_ColorPicker | 선택적 16진수 텍스트 필드와 색상 견본 프리셋을 갖춘 네이티브 HTML5 색상 입력. | Docs |
| Slider | TsgcHTMLComponent_Slider | 실시간 값 배지, 최소/최대 레이블 및 색상 스타일링을 갖춘 Bootstrap 범위 슬라이더. | Docs |
| TimePicker | TsgcHTMLComponent_TimePicker | 최소/최대 범위와 초 단위 정밀도를 갖춘 네이티브 HTML5 시간 입력. | Docs |
| SignaturePad | TsgcHTMLComponent_SignaturePad | 지우기, 실행 취소 및 저장 작업을 갖춘 포인터 이벤트 기반 캔버스 서명 패드. | Docs |
| Transfer | TsgcHTMLComponent_Transfer | 필터링 및 데이터셋 바인딩을 갖춘, 사용 가능 패널과 할당됨 패널 사이에서 항목을 이동하는 이중 목록 상자 위젯. | Docs |
| DateTimePicker | TsgcHTMLComponent_DateTimePicker | 캘린더와 시계를 단일 필드에 결합한 네이티브 HTML5 날짜 및 시간 선택기. | Docs |
| DateRangePicker | TsgcHTMLComponent_DateRangePicker | 최소/최대 범위와 함께 날짜 범위를 선택하기 위한 시작 및 종료 날짜 입력 쌍. | Docs |
| RangeSlider | TsgcHTMLComponent_RangeSlider | 실시간 값 배지와 함께 낮음/높음 값 쌍을 선택하는 이중 핸들 슬라이더. | Docs |
| CameraScanner | TsgcHTMLComponent_CameraScanner | 브라우저의 네이티브 BarcodeDetector로 바코드와 QR 코드를 스캔하는 실시간 카메라 패널로, 서드파티 라이브러리가 필요 없습니다. | Docs |
| Geolocation | TsgcHTMLComponent_Geolocation | 브라우저 Geolocation API로 기기의 위치를 한 번 또는 지속적으로 읽고, 위도, 경도 및 정확도를 숨김 필드, POST, 리디렉션 또는 WebSocket 메시지로 서버에 전달합니다. | Docs |
| NumPad | TsgcHTMLComponent_NumPad | 신속 결제 금액 버튼과 로캘 독립적인 서식을 갖춘, POS 입력을 위한 터치 숫자 및 통화 키패드. | Docs |
페이지를 구성하기 위한 카드, 미디어 및 KPI 타일.
| 컴포넌트 | 클래스 | 설명 | 도움말 |
|---|---|---|---|
| Panel | TsgcHTMLComponent_Panel | 헤더 / 본문 / 푸터를 갖춘, 접을 수 있고 스크롤 가능한 Bootstrap 카드 패널. | Docs |
| StatCard | TsgcHTMLComponent_StatCard | 아이콘, 추세 화살표 및 선택적 그라데이션을 갖춘 대시보드 KPI / 통계 카드. | Docs |
| Accordion | TsgcHTMLComponent_Accordion | 쌓인 확장형 패널로 구성된 세로로 접히는 아코디언. | Docs |
| Carousel | TsgcHTMLComponent_Carousel | 표시기, 컨트롤 및 자동 재생을 갖춘 이미지 슬라이드쇼 / 캐러셀. | Docs |
| Image | TsgcHTMLComponent_Image | 모양, 반응형 / 지연 로드, 라이트박스 링크 및 캡션을 갖춘 이미지. | Docs |
| Avatar | TsgcHTMLComponent_Avatar | 크기, 모양 및 접속 상태 점을 갖춘 사용자 아바타(이미지 또는 이니셜). | Docs |
| Video | TsgcHTMLComponent_Video | HTML5 비디오 / 오디오 플레이어와 YouTube 임베드 헬퍼. | Docs |
| Badge | TsgcHTMLComponent_Badge | 색상, 알약형 모양, 인라인 아이콘 및 위치 지정 가능한 알림 점 모드를 갖춘 단일 Bootstrap 배지. | Docs |
| PDFViewer | TsgcHTMLComponent_PDFViewer | 페이지 탐색, 확대/축소, 검색, 다운로드 및 인쇄를 갖춘, pdf.js 기반의 페이지 내 PDF 뷰어. | Docs |
| Chip | TsgcHTMLComponent_Chip | 선택적 아이콘, 색상 및 제거 가능한 닫기 버튼을 갖춘 컴팩트한 칩 / 태그. | Docs |
대화 상자, 상태 표시 영역 및 로딩 상태.
| 컴포넌트 | 클래스 | 설명 | 도움말 |
|---|---|---|---|
| Modal | TsgcHTMLComponent_Modal | 제목 / 본문 / 푸터, 크기, 가운데 정렬 및 정적 배경을 갖춘 모달 대화 상자. | Docs |
| Offcanvas | TsgcHTMLComponent_Offcanvas | 왼쪽, 오른쪽, 위 또는 아래에서 슬라이드되는 오프캔버스 패널. | Docs |
| Popover | TsgcHTMLComponent_Popover | 트리거 요소에 표시되는 팝오버 말풍선(클릭 / 호버 / 포커스). | Docs |
| Toast | TsgcHTMLComponent_Toast | 헤더, 본문, 타임스탬프 및 자동 숨김을 갖춘 토스트 알림. | Docs |
| Snackbar | TsgcHTMLComponent_Snackbar | 선택적 작업을 갖춘 머티리얼 스타일의 일시적 스낵바. | Docs |
| Notification | TsgcHTMLComponent_Notification | 읽지 않음 배지를 갖춘 종 아이콘 드롭다운 알림 센터. | Docs |
| Spinner | TsgcHTMLComponent_Spinner | 크기와 색상이 지정된 로딩 스피너(테두리 / 확대). | Docs |
| Placeholder | TsgcHTMLComponent_Placeholder | 애니메이션 반짝임을 갖춘 스켈레톤 / 플레이스홀더 로딩 카드. | Docs |
| ContextMenu | TsgcHTMLComponent_ContextMenu | CSS 선택자 범위로 지정된 우클릭 드롭다운 메뉴로, 아이콘, 구분선, 헤더 및 서버 라우팅 작업을 갖췄습니다. | Docs |
| JobProgress | TsgcHTMLComponent_JobProgress | 상태 배지, 취소 버튼 및 대역 외(out-of-band) 조각 업데이트를 갖춘, 백그라운드 작업 진행률 표시줄의 실시간 목록. | Docs |
| LogViewer | TsgcHTMLComponent_LogViewer | 레벨 필터, 검색 및 자동 스크롤을 갖춘 스트리밍 로그 / 터미널 뷰어. | Docs |
| ProgressBar | TsgcHTMLComponent_ProgressBar | 줄무늬와 애니메이션을 갖춘 Bootstrap 진행률 표시줄로, 단일 또는 다중 세그먼트 누적 형태입니다. | Docs |
| CommandPalette | TsgcHTMLComponent_CommandPalette | 부분 문자열 우선 퍼지 필터링, 카테고리 및 서버 라우팅 액션을 갖춘 Ctrl+K / Cmd+K 빠른 작업 실행기. | Docs |
| EmptyState | TsgcHTMLComponent_EmptyState | 그리드, 목록 또는 검색 결과에 표시할 행이 없을 때 보여주는 패널로, 아이콘, 제목, 설명 및 최대 두 개의 버튼을 갖췄습니다. | Docs |
단순한 말풍선부터 스트리밍 AI 어시스턴트까지, 대화형 UI.
| 컴포넌트 | 클래스 | 설명 | 도움말 |
|---|---|---|---|
| ChatBox | TsgcHTMLComponent_ChatBox | 입력 바와 입력 중 표시기를 갖춘 카드 스타일의 채팅 말풍선 박스. | Docs |
| Chat | TsgcHTMLComponent_Chat | 텍스트 / 이미지 / 파일 / 오디오 / 비디오 메시지, 읽음 확인 및 답장을 갖춘 WhatsApp 스타일 채팅. | Docs |
| AIChat | TsgcHTMLComponent_AIChat | 제공자 / 모델 선택기, 토큰 스트리밍 및 RAG 출처 인용을 갖춘 AI 어시스턴트 채팅. | Docs |
| Presence | TsgcHTMLComponent_Presence | 아바타 스택 또는 목록 형태의 “접속자” 명단으로, 실시간 상태 업데이트를 제공합니다. | Docs |
비밀번호부터 패스키까지, 즉시 사용 가능한 로그인 흐름.
| 컴포넌트 | 클래스 | 설명 | 도움말 |
|---|---|---|---|
| Login | TsgcHTMLComponent_Login | 로그인 유지와 알림을 갖춘 즉시 사용 가능한 로그인 폼 / 페이지(카드, 가운데 정렬 또는 전체 페이지). | Docs |
| SocialLogin | TsgcHTMLComponent_SocialLogin | OAuth 소셜 로그인 버튼 패널(Google, Facebook, Apple, GitHub, Microsoft 등). | Docs |
| OAuthCallback | TsgcHTMLComponent_OAuthCallback | 자동 리디렉션과 함께 성공, 오류 또는 로딩 상태의 OAuth 콜백 / 랜딩 페이지. | Docs |
| WebAuthnLogin | TsgcHTMLComponent_WebAuthnLogin | 비밀번호 없는 패스키 / WebAuthn 로그인 및 등록 위젯. | Docs |
| RolesPermissions | TsgcHTMLComponent_RolesPermissions | 셀마다 체크박스가 있는 역할 / 권한 매트릭스로, 실시간 WebSocket 권한 부여 업데이트를 제공합니다. | Docs |
| UserManagement | TsgcHTMLComponent_UserManagement | 역할, 상태, 검색 및 행별 작업 드롭다운을 갖춘 사용자 관리 테이블. | Docs |
| ImpersonateBanner | TsgcHTMLComponent_ImpersonateBanner | 다른 사용자로 활동하는 동안 표시되며 한 번의 클릭으로 종료할 수 있는 관리자 가장(impersonation) 배너. | Docs |
게이지, 표시등, 디스플레이, 운전자 조작 컨트롤, 실시간 추세 그래프, 프로세스 다이어그램을 서버가 브라우저에서 실시간으로 유지합니다. 순수 HTML과 인라인 SVG로 동작하며 JavaScript 라이브러리가 필요 없습니다.
| 컴포넌트 | 클래스 | 설명 | 도움말 |
|---|---|---|---|
| LinearGauge | TsgcHTMLComponent_LinearGauge | 눈금 스케일, 색상 범위, 값 표시를 갖춘 막대, 온도계 또는 탱크 형태로 그려지는 직선형 SVG 게이지입니다. | Docs |
| LED | TsgcHTMLComponent_LED | 선택적 발광 효과, 점멸, 캡션을 갖춘 원형 또는 사각형 온/오프 표시등입니다. | Docs |
| LEDBar | TsgcHTMLComponent_LEDBar | 개별 램프로 구성된 전형적인 레벨 미터인, 세그먼트로 나뉜 LED 바 그래프입니다. | Docs |
| SegmentDisplay | TsgcHTMLComponent_SegmentDisplay | 고스트 세그먼트와 선택적 이탤릭 기울임을 갖춘 7세그먼트 또는 14세그먼트 LED 디스플레이로 표시되는 텍스트입니다. | Docs |
| Odometer | TsgcHTMLComponent_Odometer | 숫자 휠이 새 값으로 굴러가는 기계식 카운터입니다. | Docs |
| AnalogClock | TsgcHTMLComponent_AnalogClock | 시침, 분침, 초침을 갖춘 아날로그 시계 문자판으로, 정지 상태이거나 브라우저에서 실제로 째깍거립니다. | Docs |
| Compass | TsgcHTMLComponent_Compass | 회전하는 카드 또는 회전하는 바늘과 선택적 목표 표시자를 갖춘 나침반 또는 방위 지시계입니다. | Docs |
| VUMeter | TsgcHTMLComponent_VUMeter | 선택적 피크 홀드를 갖춘 클래식 바늘 미터 또는 바 형태의 데시벨 단위 오디오 VU 미터입니다. | Docs |
| Knob | TsgcHTMLComponent_Knob | 포인터, 키보드 또는 마우스 휠로 돌리며 선택된 값을 전송하는 회전 노브입니다. | Docs |
| ToggleSwitch | TsgcHTMLComponent_ToggleSwitch | 전환 시 1 또는 0을 전송하는, 슬라이딩 토글 또는 산업용 로커 형태의 온/오프 스위치입니다. | Docs |
| PushButton | TsgcHTMLComponent_PushButton | 상태 램프가 있는 명령 버튼으로, 클릭형 또는 모멘터리(누르고 있는 동안 실행)형이며 선택적 페이지 내 확인을 지원합니다. | Docs |
| NumericStepper | TsgcHTMLComponent_NumericStepper | 누르고 있으면 반복 입력되는 증가 / 감소 버튼을 갖춘, 범위 내로 제한되는 숫자 입력 상자입니다. | Docs |
| StripChart | TsgcHTMLComponent_StripChart | 서버에서 실시간으로 푸시되는 샘플을 받아 기록계처럼 동작하는, 캔버스 위의 스크롤형 다중 펜 스트립 차트입니다. | Docs |
| Oscilloscope | TsgcHTMLComponent_Oscilloscope | 분할 격자, 채널별 스케일, 엣지 트리거, 선택적 잔광 효과를 갖춘 오실로스코프 화면입니다. | Docs |
| Annunciator | TsgcHTMLComponent_Annunciator | 상태에 따라 켜지고 운전자가 확인 처리할 수 있는 캡션 타일 격자로 구성된 알람 경보 패널입니다. | Docs |
| SCADAPanel | TsgcHTMLComponent_SCADAPanel | 탱크, 밸브, 펌프, 모터, 팬, 열교환기, 센서, 배관으로 구성된 프로세스 미믹 다이어그램을 SVG로 표현하며, 실시간 상태, 흐름 애니메이션, 클릭 가능한 심볼을 제공합니다. | Docs |
| MQTT 바인딩 | TsgcHTMLInstrumentsMQTTBinder | 코드 없이 MQTT 토픽을 계측기에 매핑합니다. 바인딩된 토픽에 메시지가 올 때마다 계측기를 갱신하고 실시간 조각을 브라우저에 브로드캐스트합니다. | Docs |
| Instruments binder | TsgcHTMLInstrumentsBinder | 전송 계층 없이 동일한 바인딩을 제공합니다. 어떤 소스(AMQP, Kafka, 사용자 지정 클라이언트)에서든 ProcessMessage로 메시지를 전달할 수 있습니다. | Docs |
이번에 Gauge도 확장되었습니다. 반원형 게이지뿐 아니라, 눈금, 색상 범위, 바늘을 갖춘 90도, 180도 또는 270도 스케일도 그리며, 다른 계측기와 똑같이 실시간으로 갱신됩니다. 계측기와 SCADA / IoT 온라인 데모에서 실제로 동작하는 모습을 확인하세요.
페이지를 제공하고 실시간으로 유지하는 비주얼이 아닌 구성 요소.
| 컴포넌트 | 클래스 | 설명 | 도움말 |
|---|---|---|---|
| EngineServer | TsgcHTMLEngine_Server | 렌더링된 페이지와 내장 자산을 제공하는, TsgcHTTPServer에 바인딩된 HTML 엔진. sgcWebSockets Professional, Enterprise 또는 All-Access에서는 대신 TsgcWebSocketHTTPServer에 바인딩됩니다. | Docs |
| HTMXEngine | TsgcHTMX_Engine_Server | 동일한 서버에 연결된 htmx 엔진입니다. HTTP 핸들러(서버가 TsgcWebSocketHTTPServer인 경우 WebSocket 핸들러도)에 후킹하고, 인바운드 요청과 메시지를 디스패치하며, 연결된 브라우저에 HTML 조각을 실시간으로 푸시하거나 브로드캐스트합니다(DispatchRequest, DispatchMessage, PushFragment, BroadcastFragment). | Docs |
| PageBuilder | TsgcHTMLPageBuilder | 등록된 컴포넌트를 완전한 반응형 페이지로 조립합니다(디자인 타임 비주얼 편집기 포함). | Docs |
| TemplateBootstrap | TsgcHTMLTemplate_Bootstrap | 본문 콘텐츠를 테마, 언어 및 방향이 있는 완전한 Bootstrap 5 HTML 문서로 감쌉니다. | Docs |
| ThemeController | TsgcHTMLThemeController | Theme 속성(ptDefault, ptDark, ptDarkPro)이 선택된 테마와 공유 스타일시트를 페이지에 적용하는 런타임 테마 전환기. | Docs |
| ThemeBuilder | TsgcHTMLThemeBuilder | Mode(tmLight, tmDark, tmSystem)에 따라 속성 값에서 Bootstrap CSS 변수를 작성하는 CSS 생성기로, tmSystem의 경우 선택적 OS 기본 설정 동기화 스크립트를 제공합니다. | Docs |
| HTMXFragment | TsgcHTMX_Fragment | 서버에서 브라우저로 부분 페이지 업데이트를 푸시하기 위한 대역 외(out-of-band) htmx 조각. | Docs |
| HTMXRouter | TsgcHTMX_Router | 수신 요청 경로를 일치시키고 이를(HandleRequest를 통해) 해당 경로의 OnRoute 핸들러로 디스패치하는 Routes 라우팅 테이블. | Docs |
위에 나열된 110개 컴포넌트에 더해지는 컴포넌트로, 패밀리별 개수에는 포함되지 않습니다.
| 컴포넌트 | 클래스 | 설명 | 도움말 |
|---|---|---|---|
| CRUD | TsgcHTMLComponent_CRUD | 한 테이블의 검색 및 페이징이 있는 목록, 생성 및 편집 폼, 삭제 확인, 쓰기 경로를 제공하며, 데이터셋 또는 여섯 개의 메서드로 이루어진 어댑터를 통한 사용자 자신의 SQL을 대상으로 합니다. | Docs |
| NotificationInbox | TsgcHTMLComponent_NotificationInbox | 읽지 않음 배지가 있는 종 아이콘과 한 사용자의 알림입니다. 애플리케이션은 하나의 이벤트에 보관 중인 행으로 응답하고, 사용자가 읽은 항목을 전달받습니다. | Docs |
| NotificationPreferences | TsgcHTMLComponent_NotificationPreferences | 카테고리마다 행이 하나, 채널(앱 내, 푸시, 이메일)마다 체크박스가 하나씩 있는 테이블입니다. 값은 애플리케이션이 불러오고 저장합니다. | Docs |
| WebPush | TsgcHTMLWebPush | VAPID를 사용하는 Web Push입니다. 브라우저가 게시한 구독을 검증하고, 이를 애플리케이션에 전달하며, 실행 중이 아닌 브라우저에 암호화된 알림을 보냅니다. Enterprise 및 All-Access 에디션 전용입니다. | Docs |
| Auth | TsgcHTMLAuth | 쿠키 세션, 로그인 유지, CSRF 토큰, 로그인 제한, 로그인 및 역할별 라우트 보호를 메모리 또는 파일 세션 저장소 위에서 제공합니다. | Docs |
| MCPApp | TsgcHTMLComponent_MCPApp | 페이지로 응답하는 MCP 도구로, 이미 사용 중인 컴포넌트가 ChatGPT, Claude, VS Code 안에서 렌더링됩니다. | Docs |
| AIAssistant | TsgcHTMLAIAssistant | 일상 언어로 된 질문을 그리드, 데이터 테이블, 피벗 또는 폼을 위한 검증된 필터, 정렬, 그룹화, 강조 표시 집합으로 변환합니다. 구성된 제공자가 없으면 내장 파서가 응답합니다. | Docs |
| InlineAIPrompt | TsgcHTMLComponent_InlineAIPrompt | 메모, 리치 편집기 또는 그리드 열 옆에 나타나 어시스턴트에게 묻고, 사용자가 수락할 때에만 답변을 전달하는 팝오버입니다. | Docs |
| FormBuilder | TsgcHTMLComponent_FormBuilder | 브라우저의 폼 디자이너: 최종 사용자가 직접 폼을 설계하며, 유효성 검사 규칙, 입력 마스크, 조건부 필드를 갖춘 일반 Form으로 게시됩니다. | Docs |
| QueryBuilder | TsgcHTMLComponent_QueryBuilder | 비주얼 쿼리 및 필터 빌더입니다. 사용자는 조건을 AND 및 OR 그룹으로 조합하며, 직접 구성하거나 일반 언어 질문으로 만들 수 있고, 서버는 그 결과를 매개변수화된 SQL 조건, 행 일치 검사 또는 Grid 필터로 바꿉니다. | Docs |
| FileManager | TsgcHTMLComponent_FileManager | 웹 포털을 위한 서버 렌더링 파일 관리자입니다. 사용자는 파일을 탐색하고 미리 보고, 업로드, 다운로드하며 정리하고, 서버는 모든 요청을 권한, 파일 규칙, 사용자 고유의 역할 검사에 대해 확인합니다. | Docs |
| Tooltip | TsgcHTMLComponent_Tooltip | 페이지의 모든 요소에 CSS 선택자 또는 컴포넌트로 붙는 Bootstrap 툴팁입니다. 마우스 오버와 키보드 포커스에서 열리고, Esc 키로 닫히며, htmx가 교체해 넣은 콘텐츠에서도 동작합니다. | Docs |
| Tour | TsgcHTMLComponent_Tour | 온보딩을 위한 안내형 제품 둘러보기입니다. 각 단계에 스포트라이트와 카드가 있고, 첫 방문 시, 버튼에서 또는 서버에서 시작되며, 서버 이벤트가 각 사용자의 진행 상황을 기록합니다. | Docs |
| CodeEditor | TsgcHTMLComponent_CodeEditor | textarea처럼 폼과 함께 전송되는 CodeMirror 6 코드 편집기입니다. SQL, JSON, JavaScript, HTML, CSS, XML, Markdown, Python, Pascal 구문 강조, 접기, 찾아 바꾸기, 스키마 기반 SQL 자동 완성, JSON 구문 검사를 제공합니다. | Docs |
| ReportViewer | TsgcHTMLComponent_ReportViewer | 브라우저에서 TsgcHTMLReport를 매개변수 패널, PDF 미리 보기, PDF 다운로드, 인쇄, Excel로 내보내기와 함께 표시합니다. 보고서 엔진은 그룹, 합계, 차트, 바코드, 하위 보고서가 있는 밴드형 보고서를 PDF로 출력합니다. | Docs |
| ReportDesigner | TsgcHTMLComponent_ReportDesigner | 개발자와 최종 사용자를 위한 브라우저의 보고서 디자이너입니다. TsgcHTMLReport의 밴드, 항목, 매개변수, 글꼴, 페이지 설정을 편집하며, 보고서 엔진이 그리는 PDF 미리 보기를 제공합니다. | Docs |
| ImageCropper | TsgcHTMLComponent_ImageCropper | 브라우저에서 프로필 사진을 자르고 스캔한 문서를 반듯하게 편 다음, 결과를 서버로 전송하며 서버는 코드나 디스크가 보기 전에 이를 검사합니다. | Docs |
| Spreadsheet | TsgcHTMLComponent_Spreadsheet | 브라우저에서 수식을 지원하는 그리드: 54개 함수, 숫자 서식, Excel 키보드와 클립보드, XLSX 가져오기와 내보내기를 지원하며 서버에서 계산하고 사용자 간에 실시간으로 공유합니다. | Docs |
엔진, 페이지 템플릿, 디자이너가 새로 얻은 것입니다. 모든 옵션은 기본적으로 꺼져 있으므로, 이를 사용하지 않는 페이지는 영향을 받지 않습니다.
| 기능 | 추가되는 내용 | 도움말 |
|---|---|---|
| 라우팅 | {name} 세그먼트가 있는 템플릿 경로, 라우트별 Methods 필터, RequireLogin과 RequireRoles, 그리고 전송 방식에 중립적인 디스패치를 제공하므로, 라우트는 HTTP, WebSocket, 테스트에서 동일하게 실행됩니다. | Docs |
| 내비게이션과 실시간 업데이트 | 서버에서 렌더링하는 사이트를 자체 JavaScript 없이 단일 페이지 애플리케이션으로 바꾸는 여덟 가지 페이지 템플릿 옵션입니다. 부스트된 링크와 폼, 히스토리, 모프 스왑, 뷰 전환, 로딩 바, 스크롤 복원, 제출 잠금, 오류 토스트가 있으며, 모두 기본적으로 꺼져 있습니다. | Docs |
| WebSocket 또는 SSE | WebSocket 대신 서버 전송 이벤트를 통한 실시간 업데이트, 또는 WebSocket을 열 수 없을 때 이벤트 스트림으로 폴백하는 자동 선택을 제공합니다. 마크업, 라우트, 프래그먼트는 그대로입니다. 단독 sgcHTML은 서버 전송 이벤트로 푸시합니다. WebSocket 전송에는 sgcWebSockets Professional, Enterprise 또는 All-Access의 WebSocket 서버가 필요합니다. | Docs |
| AI Data Pack | 그리드, 데이터 테이블, 피벗 또는 폼에 일상 언어로 질문하고, 검증기를 통과한 것만 적용합니다. 모델은 열 이름, 타입, 세 개의 샘플 값을 받으며, 행은 AllowRowDataToProvider를 켰을 때만 받습니다. 제공자에는 Enterprise 또는 All-Access 에디션 또는 sgcAI 팩의 AI 유닛이 필요하며, 내장 파서는 제공자 없이 응답합니다. | Docs |
| AI 페이지 생성기 | 디자이너에서 페이지를 설명하거나 스크린샷을 건네면, 등록된 컴포넌트 외에는 아무것도 지정할 수 없는 스키마를 통해 등록된 컴포넌트로 페이지를 구성합니다. 수락하기 전까지는 아무것도 적용되지 않습니다. 제공자에는 같은 AI 유닛이 필요합니다. | Docs |
| ASP.NET Core Razor (.NET) | Telerik과 DevExpress 스타일의 Tag Helper인 <sgc-grid>, <sgc-form>, <sgc-autocomplete>, <sgc-dialog>, <sgc-chart>와 Html.Sgc() 아래의 대응하는 fluent API를 제공합니다. 그리드는 this.SgcGrid(request, query)로 IQueryable에서 페이징, 정렬, 필터, 검색, 내보내기를 처리하고, 입력은 asp-for로 바인딩되며, 실시간 차트는 hub.BroadcastChartAsync로 sgcHTML WebSocket을 통해 푸시되고 SignalR은 필요 없습니다. esegece.sgcHTML.AspNetCore NuGet 패키지에 포함되며 Community 에디션에서도 사용할 수 있습니다. | 개요 |
| 우측에서 좌측 레이아웃 | 아랍어, 히브리어, 페르시아어, 우르두어 및 기타 우측에서 좌측으로 쓰는 언어가 dir="rtl"과 Bootstrap의 RTL 스타일시트로 렌더링되며, 컴포넌트도 함께 반전됩니다: 사이트 사이드바와 아이콘 레일, 스테퍼, 타임라인, 채팅, 프레즌스, 트리 뷰, 슬라이더, 스플리터, 그리드 열 크기 조정과 고정 열, 알림, 아바타, 칸반 보드. 차트, 게이지, 계측기, Gantt 시간 축은 기존 구조를 유지합니다. 방향은 언어에 따라 자동으로 정해지며, Dir과 HtmlDir로 재정의할 수 있고, 좌측에서 우측 페이지는 영향을 받지 않습니다. | Docs |
| Testing | 결정적 요소 ID, CSS 선택자를 지원하는 작은 DOM, HTML 어서션, 스냅샷 파일, 서버 없는 요청 테스트를 제공하며, 테스트 프레임워크가 필요하지 않습니다. | Docs |
이 페이지에 나열된 모든 기능은 이 애플리케이션들 중 하나에서 실제로 사용되고 있습니다.
온라인 데모: AI 데이터 팩, 쇼핑 어시스턴트, MCP 앱, 계측기, SCADA / IoT 및 우측에서 좌측(RTL).