Web Square5 개발자 교육 1

Web square5 sp4

• 인스웨이브에서 제공하는 웹 표준을 준수한 UI 프레임워크

기존 Html

• head : css, js, script(비즈니스 로직)
• body : html UI

웹스퀘어

• head : model, css, js, script
• body : html UI( 웹스퀘어 컴포넌트 )

Model :

• dataCollection
• workflowCollection
• submission

Dynamic Web Project 기존 방식대로
JavaResource/WebContent 하위로 소스 파일 작성 하면 된다.

파일 생성시 Websquare Page 방식을 선택, 파일명을 입력 후 생성하면 XML 형식의 파일이 생성 되며,
Design View 탭구성은 다음과 같다.

• Design : 컴포넌트를 그릴수 있고, UI를 직관적으로 확인 및 수정 할 수 있다.
• Script : 비즈니스 로직을 구현하는 탭
  (onpageload, onpageunload 는 임의로 지우지 말것)
• DataCollection
  • dataMap : 단건의 data
  • dataList : 다건의 data
  • aliasDataMap
  • linkedDataList : Filter, Sort기능이 추가됨
  • aliasDataList
• Submission : 데이터 입/출력 객체, form과 유사
• Source : 전체 소스
• Property : 속성, 이벤트, 스타일
• Outline : design, script, head를 한눈에 전체를 파악할 수 있고 제어 할 수 있음.
• Help : F1 단축키를 누르면 해당 이벤트, 컴포넌트 등 정보를 알 수 있다.
• Snippet : 구성한 UI를 저장하고 불러올 수 있음.

컴포넌트 데이터 세팅 예제

• 목록성 컴포넌트 표현 3가지 방법
  • 하드코딩
  • 스크립트에서 동적으로 만들기
  • 데이터컬렉션