모두 vanilla JS·CSS 단일 파일로 배포되며, 서로 이벤트로 연계됩니다(그리드→차트 실시간 집계 등).
편집형 데이터 그리드 — 정렬·필터·페이징·인라인 편집
SVG 차트 8종 + 그리드 실시간 집계 연계
폼 빌더·렌더러 — 11종 문항, 서버 검증 계약 공유
캘린더·스케줄러 — 드래그·ICS·공휴일·그리드 연동
위지윅 에디터 — 새니타이즈·마크다운·이미지 업로드
이미지 에디터·업로더 — 자르기·필터·분할 업로드
리포트 디자이너 + 한글 PDF 출력
전자결재·승인선 — 부착형 라이브러리, 콜백 SPI
업무용 메신저 — jar 부착형
폐쇄망 부착형 AI 챗봇 — 스위트 연계
아래 컴포넌트는 실제 제니 라이브러리로 렌더링됩니다. 그리드 값을 바꾸면 차트가 즉시 갱신됩니다.
그리드의 ‘인원’ 값을 더블클릭해 수정하면 차트가 JennyChart.fromGrid로 실시간 집계·갱신됩니다.
제출하면 입력값이 여기에 표시됩니다(데모 — 서버 전송 없음).
이미지 업로드는 서버 연동 시 활성화됩니다(데모는 편집 기능만).
요소를 드래그해 배치하는 디자이너입니다. 한글 PDF 출력은 서버 연동(renderUrl) 시 동작합니다.
아래 제품은 데이터베이스·실시간 서버·AI 백엔드가 필요해 정적 페이지에서 라이브 데모 대신 부착 방식으로 제공합니다. 온프레미스 구축 시 완전 동작합니다.
전자결재·승인선 — 승인 이력 DB + 콜백 SPI 필요. 부착형 JAR + 7-DBMS DDL.
이미지 편집은 클라이언트, 저장·분할 업로드는 /api/images 엔드포인트 필요.
업무 메신저 — 실시간 서버(웹소켓) + 메시지 저장소 필요.
AI 챗봇 — LLM/RAG 백엔드 필요(폐쇄망 온프레미스 지원).
헤드리스 CMS — 어드민+프론트+콘텐츠 DB. cms-admin-boot 로 제공.
Spring Boot는 의존성 한 줄이면 자산이 자동 서빙됩니다. 비-Boot·정적 HTML도 지원합니다.
<dependency> <groupId>com.jennysoft</groupId> <artifactId>jenny-grid-core</artifactId> <version>0.2.0-SNAPSHOT</version> </dependency> <dependency> <groupId>com.jennysoft</groupId> <artifactId>jenny-chart-core</artifactId> <version>0.1.0-SNAPSHOT</version> </dependency>
자산은 jar 안 META-INF/resources/jenny-grid/* 에 담겨 있어 /jenny-grid/jenny-grid.js 로 자동 서빙됩니다. 리소스 핸들러 설정·정적 파일 복사 불필요.
<link rel="stylesheet" th:href="@{/jenny-grid/jenny-grid.css}"/>
<link rel="stylesheet" th:href="@{/jenny-chart/jenny-chart.css}"/>
...
<script th:src="@{/jenny-grid/jenny-grid.js}"></script>
<script th:src="@{/jenny-chart/jenny-chart.js}"></script><div id="grid"></div>
<div id="chart"></div>
<script>
var grid = new JennyGrid({
el: '#grid',
columns: [
{ name: 'dept', header: '부서', filterable: true },
{ name: 'count', header: '인원', editor: 'number', sortable: true }
],
data: [ { dept: '개발', count: 12 }, { dept: '영업', count: 8 } ]
});
// 그리드 값이 바뀌면 차트가 자동 갱신됩니다
var chart = JennyChart.fromGrid(grid, {
el: '#chart', type: 'column',
category: 'dept', values: 'count', aggregate: 'sum'
});
</script>원격 데이터 그리드는 core Java 헬퍼(GridQueryEngine, GridDataResponse, GridModifyRequest)로 서버 프로토콜을 구현합니다. 폐쇄망은 사내 Nexus 또는 mvn install:file 로 jar 반입.
Boot 가 아니어도 jar 안 META-INF/resources 규약을 쓰려면 자원 핸들러를 한 줄 매핑합니다.
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/jenny-grid/**")
.addResourceLocations("classpath:/META-INF/resources/jenny-grid/");
registry.addResourceHandler("/jenny-chart/**")
.addResourceLocations("classpath:/META-INF/resources/jenny-chart/");
}new JennyGrid(...)<link rel="stylesheet" href="<c:url value='/jenny-grid/jenny-grid.css'/>"/> <script src="<c:url value='/jenny-grid/jenny-grid.js'/>"></script>
jar xf jenny-grid-core.jar META-INF/resources/jenny-grid # → jenny-grid.js, jenny-grid.css 를 웹 서버 정적 경로에 복사
외부 CDN·빌드 도구가 필요 없는 vanilla 자산이라 PHP·Node·정적 HTML 어디에나 붙습니다.
<link rel="stylesheet" href="/assets/jenny-grid/jenny-grid.css">
<script src="/assets/jenny-grid/jenny-grid.js"></script>
<div id="grid"></div>
<script>new JennyGrid({ el: '#grid', columns: [...], data: [...] });</script>