W5 컨설팅팀에서 UI 공통 개발을 위해서 만든 예제들입니다. 본 페이지 제공하는 코드들은 UI 공통 기능 구현 시에만 제한으로 사용해야 하는 WebSquare 비공개 API나 Property, 코드 작성 방식들이 포함되어 있을 수 있으니, 업무 화면 웹스퀘어 페이지에서의 적용이 필요한 경우, UI 공통 개발자와 상의하셔서 코드에 적용하시기 바랍니다. 비공개 APi를 사용할 경우 향후 WebSquare 엔진 업그레이드 시 API 스펙이 변경될 수 있어 엔진 패치 과정에서 주의하셔야 합니다.
UI 공통 함수 & 기능에 관련된 다양한 예제
| Example Name | Download | Label | Description |
|---|---|---|---|
| download | Submission | Submission ref 정의된 DataMap의 데이터를 QueryString 방식으로 URL에 추가해서 전달하는 예제 | |
| download | dynamicCreate | Generator 컴포넌트 및 dynamicCreate API를 사용해서 레이아웃 데이터를 이용해서 화면을 동적으로 생성하는 예제 | |
| download | InputBox, Clipboard | InputBox에서 Clipboard에 데이터 복사 시 특정 문자를 치환해서 저장하는 예제 | |
| download | Theme | WebSquare Theme 동적 변경하기 가이드 | |
| download | shortKey, shortCut | 웹스퀘어를 이용한 웹 어플리케이션 개발 시 웹 브라우저에서 사용하는 단축키 기능을 중지 시키고, 사용자가 원하는 기능으로 재정의 해야할 경우 KeyDown 이벤트에서 preventDefault API 실행을 통해서 웹 브라우저의 기능을 중지 예제 | |
|
Triger, GridView Click, Double Click 이벤트 제어 WFrame 1개 샘플 |
download | Click Control, DblClick Control | GridView, Trigger의 Click, Double Click 이벤트 동작을 WebSquare 기본 동작과 다르게 설정하기 위한 함수 |
웹스퀘어5 컴포넌트이 기능을 보여주기 위한 예제
| Example Name | Link | Label | Description |
|---|---|---|---|
| Window Tab Custom Button | download | WindowContainer | WindowContainer 내 Window Tab에 사용자 정의 버튼을 추가하는 예제 |
| download | GridView | GridView의 Scroll 이동을 버튼을 클릭해서 이동하도록 구현한 예제 | |
| download | DataList, DataMap | DataList의 컬럼 추가 및 삭제, DataMap의 컬럼 추가 가이드 | |
| GridView Header Filtering 기능 예제 | GridView | GridView Header Filtering 기능 예제 | |
| RealtimeView 예제 | RealtimeView | RealtimeView 예제 | |
| 대용량 데이터 조회 | GridViewAsync, DataListAsync | 대용량 데이터 예제 |
외부 솔루션 및 오픈 소스 연동 예제
| Example Name | Link | Label | Description |
|---|---|---|---|
| download | HTML5 Audio | MediaDevices 인터페이스와 HTML5 audio 태그 스펙에 대한 간단한 소개와 WebSquare5에서 MediaDevices와 WebSquare audio 컴포넌트(HTML5 audio 태그 매핑 컴포넌트)를 이용한 Recoding 기능을 구현하는 예제 | |
| download | HTML5 Canvas | Canvas 태그를 이용해서 웹스퀘어 페이지에서 Drawing 기능을 구현하는 예제 | |