[WebSquare] 웹스퀘어 튜토리얼, 기본 사용법, 정리파일

 

 

 

WebSquare5 튜토리얼 요약

WebSquare5 기본 구조

 

 

 

WebSquare Page 구성

• 하단 탭: Design / Script / DataCollection / Submission / Source
• Palette: 컴포넌트 검색 및 활용 가능

 

 

 

 

Onpageload & Onpageunload

• Onpageload: 초기 설정 함수
• Onpageunload: 브라우저 종료 직전 실행, 로그 기록 및 변수 소멸
• 주의: 삭제 불가

 

 

 

 

DataCollection

구성 요소

• DataMap: 단일 데이터 관리
• DataList: 다중 데이터 관리
• LinkedDataList: 데이터 필터 및 정렬 방식
• AliasDataList / AliasDataMap: 자식-부모 간 데이터 변환

 

 

 

 

체크리스트

• Use data 반드시 체크

 

 

 

 

 

 

Submission

기능

• 데이터 전송 및 수신 처리
• 상세 설정: Detailed 버튼 활용
• 테스트 가능: Submission Test

사용 방법

• $p.executeSubmission("submissionId");

 

 

 

 

 

 

컴포넌트 활용

컴포넌트 접근 방식

• 속성(Attribute): 정적 제어 (e.g., Placeholder, initValue, DataType 등)
• 이벤트(Event): 동작 추가
• API: 동적 처리

스타일 및 디자인

• Style 탭: 인라인 스타일 적용
• Outline 탭: 내부 스타일 시트 추가 가능
• 외부 파일 import: 드래그앤드롭 방식

 

 

 

 

 

CRUD 실습

• Group, Input 등 기본 구성
• Overflow 및 Float 속성 활용

 

 

 

 

 

GridView와 DataList 연결

설정

• DataList와 GridView 드래그앤드롭으로 연결
• 컬럼 ID 및 속성 설정
• 정렬 및 필터 기능 활성화

추가 설정

• rowNumVisible: True
• 컬럼 이동 가능 설정: columnMove

마스터-디테일 구조

• 로우 클릭 시 하위 데이터 자동 연결

 

 

 

기타 팁 및 유틸 함수

단축키

• F1: Help 탭 활성화
• Ctrl + 마우스 우클릭: 디버깅

 

 

 

유틸 함수

• $p.getCurrentServerDate();