REST API 방식 서비스 호출을 위한 submission 공통 함수
Submission ref 에 정의된 DataMap 의 데이터를 QueryString 방식으로 URL 에 추가하여 전달하는 예제.
WebSquare AI를 사용하여 공통 함수·컴포넌트·외부 솔루션 연동까지, 실제 화면 구현에 바로 참고할 수 있는 레퍼런스 데모입니다.
UI 공통 함수 & 기능에 관련된 다양한 예제
Submission ref 에 정의된 DataMap 의 데이터를 QueryString 방식으로 URL 에 추가하여 전달하는 예제.
Generator 컴포넌트 및 dynamicCreate API 를 사용해 레이아웃 데이터를 이용하여 화면을 동적으로 생성하는 예제.
InputBox 에서 Clipboard 로 데이터를 복사할 때 특정 문자를 치환하여 저장하는 예제.
웹스퀘어 기반 애플리케이션 개발 시 브라우저 기본 단축키를 중지하고 사용자가 원하는 기능으로 재정의해야 할 경우, KeyDown 이벤트에서 preventDefault API 를 실행하여 브라우저 기능을 중지하는 예제.
디자인 에디터가 화면 head 에 기록한 용지 규격(w2:printFormInfo)과 각 컴포넌트의
인쇄 좌표(printLine·printColumn·printLineSpan·printColumnSpan)를 런타임에서 조회·설정하는 예제.
$p.getPrintFormInfo() 와 컴포넌트의 getPrintFormPosition() /
setPrintFormPosition() 을 사용하며, 단위는 dot 입니다.
웹스퀘어 컴포넌트의 기능을 보여주기 위한 예제
xf:input 의 editFormat 과 editDisplayChar 로 개인정보 항목을 화면에서 마스킹하고, getValue() 로는 원본 값을 그대로 조회하는 예제.
GridView Header Filtering 기능 예제.
ListView 기본 예제.
ListView 심화 예제 (기능 테스트 코드 및 스타일 추가).
CardView 기본 예제.
CardView 심화 예제 (기능 테스트 코드 및 스타일 추가).
다양한 차트 유형과 인터랙션을 한곳에서 확인할 수 있는 wAIChart 데모 모음입니다.
editor 의 editHTML API 기능 전반 테스트 화면.
KRX TMS DP 화면 Mockup(HTML) 기반 샘플 화면.
연계도를 network(graph) 차트로 시각화한 PoC. 유형별 연결선 중첩과 필터링을 확인할 수 있습니다.
가상 렌더링으로 화면에 일부만 그려진 GridView 를 별도 설치 없이 전량 인쇄하는 예제.
printDocument() 로 미리보기를 열고 getPrintDocumentModel() 로 문서 모델만
확인할 수 있습니다. 다단 헤더 재구성, expression 푸터, 필터·정렬·컬럼 숨김 반영, 행 수·그룹 기준
페이지 분할, 인쇄 전용 테마와 셀 강조를 지원합니다.
12,000 건의 매출 데이터를 지역·채널·상품·기간 축으로 교차 집계하는 예제. 행·열 트리 펼침, 필드 패널 드래그, 헤더 필터, 계산 필드와 조건부 서식, 드릴다운, CSV·Excel·PDF 내보내기, w2:chart 연동을 확인할 수 있습니다.
화면이 가진 dataList 로부터 관계도(ERD)와 순서도를 자동으로 만들고, 마인드맵·시퀀스 다이어그램을 그리는 예제. 도형 생성과 연결선 그리기, 글자 편집, 자동 배치, 되돌리기, 차트·표·다른 화면을 노드로 함께 배치하는 임베드, JSON 저장·복원과 이미지 내보내기를 확인할 수 있습니다.
외부 솔루션 및 오픈 소스 연동 예제
MediaDevices 인터페이스와 HTML5 audio 태그 스펙에 대한 간단한 소개와 함께, WebSquare AI 에서 MediaDevices 및 WebSquare audio 컴포넌트(HTML5 audio 태그 매핑)를 이용해 Recording 기능을 구현하는 예제.