728x90
개발자 과정인 줄 알고 실수로 듣고 작성한 웹스퀘어5 퍼블리싱 과정 정리 !(...)
1. 프로젝트 생성
① WebSquare5 실행 후 package explorer 오른쪽 마우스 > New > WebSquare Project
② 프로젝트 이름 설정 후 Next > Context Root에서 한 번 더 Next
③ 공동업무 UDC 동의합니다 체크 후 Next > Preview에서 Finish
프로젝트 폴더가 만들어진 것을 확인할 수 있음!
2. WebSquare Page Component 생성
① WebContent 폴더에 오른쪽 마우스 > New > WebSquare Page Component
② File name 입력 후 Next
③ Use template 체크박스를 체크하여 템플릿을 선택한 후 Finish를 해도 되고 바로 Finish를 해도 됨
test.xml 파일이 만들어진 것을 확인할 수 있음
3. CSS 파일 생성
① WebContent\cm\css에 오른쪽 마우스 클릭 > New > CSS File
② File name 입력 후 Finish
CSS 파일이 생성된 것을 확인할 수 있음
4. Palette View
WebSquare5에서 제공하는 컴포넌트와 UDC, TTC, Snippet을 한 눈에 확인할 수 있다.
5. 컴포넌트
AutoComplete
- 기능 : 입력한 값에 따라 자동완성 기능을 제공하는 텍스트박스와 비슷한 컴포넌트
CheckBox
- 설정 순서 :
- itemTagname 속성을 li로 변경하면 목록 항목을 li 태그로 변경
- tagname 속성을 ul로 변경하면 목록을 마크업 구조 변경 가능
MultiSelect
- 기능 : 사용자가 다중으로 선택할 수 있음
SelectBox
- 기능 : 기본적으로 한 번에 하나의 항목만 선택할 수 있는 드롭다운 컴포넌트
- 라벨 이름 길이 :
- 기본적으로 SelectBox의 width는 고정되고, 목록의 width는 가장 긴 라벨 길이에 맞춰짐
- labelWidthAuto가 true이면 가장 긴 라벨에 맞춰 SelectBox와 목록의 width가 조정됨
- subMenuSize가 fixed이면 라벨 길이와 상관없이 SelectBox와 목록의 width가 고정됨
CheckCombobox
- 기능: 체크박스와 셀렉트박스의 결합형 컴포넌트
PageList
- 기능 : 대량의 데이터를 페이지 단위로 조회할 수 있는 링크 생성 컴포넌트
- 설정 순서 :
- id 속성에 'pg1' 입력 시 pg1이라는 id 부여
- script 탭의 onpageload 안에 pg1.setCount(100) 입력 시 100페이지 생성
- pageSize 속성으로 노출할 페이지 수 설정 가능
Trigger
- 기능 : HTML의 input 태그 타입이 버튼으로 설정됨
Anchor
- 기능 : HTML의 a 태그와 같은 하이퍼링크 기능을 제공하며, CSS를 적용해 버튼으로 사용 가능
- 설정 순서 :
- href에 주소 입력
- target에 _blank 입력 시 새창으로 띄움
- outerDiv를 true로 설정 시 div로 감싸짐
Upload
- 설정 :
- title 속성에 '파일업로드'라고 입력하고 브라우저의 업로드 버튼에 마우스를 올리면 '파일업로드'라는 툴팁 표시
MultiUpload
- 설정 순서 :
- mode를 transparend로 변경(기본은 flash로 되어있는데 flash는 지원이 잘 안되는 모드임)
- style 속성을 width: 100, height: 30, position: absolute, left: 0, top: 0으로 설정(position은 포토샵의 레이어를 추가하는 것과 비슷함)
- MultiUpload가 눌려진 상태에서 Trigger 컴포넌트를 추가하여 트리거 버튼을 클릭하면 파일 업로드 창이 뜸(Trigger 생성 시 기준 객체에 MultiUpload가 표시되었는지 확인)
Group
- 기능 : 기본적으로 div 태그로 파싱되며, 레이아웃 구성이나 인라인 요소들을 그룹화하는데 사용
- 설정 순서 :
- tagname을 ul로 변경
- 그룹 안에 텍스트박스 추가 후 tagname을 li로 변경
TableLayout
- 설정 순서 :
- Outline 탭의 Design에서 원하는 col(컬럼) 선택 후 style 탭에서 width 값 조정
- td 또는 th 선택 후 스페이스바 누르면 툴바 표시
- 테이블 전체 선택 상태에서 adaptive는 layout으로, adaptiveThreshold는 800으로 변경
- F12 개발자 도구를 열어 브라우저 사이즈 변경 시 800이 되는 시점에서 클래스가 변경되는 것을 확인 가능(반응형)
Generator
- 기능 : 특정 영역을 반복적으로 표현하거나 동일한 영역을 동적으로 추가/삭제할 때 사용되는 컴포넌트
WFrame
- 기능 : Websquare에서 제작된 외부 XML을 include시키기 위해 사용되는 컴포넌트
- 설정 순서 : src 속성에 경로 입력 또는 불러오기 (예: \cm\template\page\02_search_table\search_table.xml)
TabControl
- 기능 : 탭을 관리하는 컴포넌트
- 설정 순서 :
- TabControl 생성한 것에서 오른쪽 마우스 클릭하여 탭 추가 클릭
- adaptive와 adaptiveThreshold로 반응형 설정 가능
- closable을 true로 설정 시 탭에 닫기 버튼 활성화
- tabscroll을 true로 설정 시 여러 개의 탭이 열려 있을 때 좌우 이동 가능한 버튼이 생김
GridView
- 설정 순서 :
- DataCollection 탭에서 신규 DataList 추가
- column 탭에서 여러 컬럼 추가
- data 탭에서 use data 체크박스 선택 후 데이터 생성
- Outline의 Head 탭에서 생성한 DataList를 GridView로 드래그 후 신규 생성 체크박스 선택 후 OK
- autoFit 속성을 allColumn으로 설정하여 모든 컬럼의 width를 균등하게 설정
- 특정 컬럼 선택 후 height: 26px로 설정, inputType 속성을 변경
- rownumvisible을 true로 설정하여 행 번호 표시
- rowstatusVisible을 true로 설정하여 수정 상태 아이콘 표시(rownum과 rowstatus의 위치는 서로 변경 불가능함)
- fix 속성을 입력하고 fixedRow를 2로 설정하여 틀 고정
TreeView
- 기능 : 계층 구조를 가진 데이터를 트리 형태로 출력하는 컴포넌트
- 설정 순서 :
- Treeview 생성 후 더블클릭하여 Type을 innerXML로 변경
- Node Property의 Add Child와 Add Sibling을 누르며 node를 추가할 수 있음
- showCheckbox 속성을 true로 설정하면 노드 앞에 체크박스 추가됨
- checkAllChildNodes 속성을 true로 설정하면 하위 노드까지 모두 체크할 수 있음
- renderType 속성을 virtual로 설정하여 렌더링 속성을 div로 변경
728x90