[ WebSquare란? ]
- WebSquare는 통상 MVC패턴 => 프론트엔드 단에서
'코딩' 으로 이루어지던 작업들을
'클릭' 으로 진행할 수 있게 만들어주는 개발을 도와주는 편리한 도구 라고 보아도 좋을 것 같습니다.
( 마치 CLI 로 진행되던 작업을 GUI 로 하게끔 도와주는 것이죠. )
HTML, CSS, JavaScript, 그리고 동기/비동기 통신할 때 쓰이던 스크립트들 까지
GUI 형식으로 만들어내도록 해줍니다.
직접 '코딩' 작업할 때 걸리는 시간을 단축할 수 있고,
오타에 의한 오류를 방지할 수 있고,
규모가 큰 프로젝의 경우,
웹스퀘어를 이용해 만들어진 코드들은 최소한의 안전성, 일관성을 갖게되는 등
많은 장점을 갖는 것 같습니다.
[ 구조 / 환경 ]
WebSquare5 기준
- java 8~11 버전
- tomcat 9 버전
- mariaDB 10 버전
- maven
- 서버, 자바단 => Java Resources
- 프론트, View단 => WebContent
- websquare.html : 자바스크립트 엔진 javascriptLoader.wq, app.js IMPORT => 요청 URL 받아서 실행해주는 파일
- WRM : WebSquare Reference Model ( websquare 샘플 기능들 제공 )
[ 기본 사용법 ]
: Palette로 그림을 그리고 ==> Property / Design 으로 속성, CSS, JS 등을 적용한다.
1. Design 탭
=> 원래는 '코딩' 하는 HTML 파일이 기본 에디터 화면이었다면,
웹스퀘어에서는 대략적인 실제 화면을 그려나가는 Design 탭을 기본 에디터 화면으로 사용합니다.
- perspective : websquare 적용
2. Palette
이 Design 탭에 Palette 를 이용해서 필요한 태그들, 컴포넌트들을 배치하면
웹스퀘어가 이를 코드로 만들어서 적용해주는 방식입니다.
3. Property
Palette로 대략적인 뼈대를 배치하고 나면,
하나하나의 태그, 컴포넌트들을 클릭해서 Property 탭에서 id와 같은 '속성값'을 부여할 수 있습니다.
'이벤트' 는 이벤트탭, 혹은 해당 컴포넌트 우클릭에서 바로 이벤트를 부여할 수 있습니다.
'style' 은 속성탭 하단의 style칸 / property 스타일탭 등에서도 적용할 수 있습니다.
이렇게 적용된 JS 이벤트, 스타일 등은 Script 탭, Source 탭 등에서 코드로 확인, 수정할 수 있습니다.
[ 통신 ]
위와 같은 방법으로 전체적인 틀, 기본적인 이벤트, CSS 등은 적용이 되었습니다.
하지만 HTML 파일에서 동기/비동기 등 통신할 때 쓰이던 코드들은 어디서 적용시킬지 애매합니다.
=> DataCollection / submission 을 이용합니다.
비동기 통신의 경우,
...
type: "POST",
url: "/egovproject/oneboard.do",
dataType: "json",
data: {
'boardId' : boardId
},
success: function(res){
let boardContents = res.responseEntity.body.contents;
...위와 같은 방식으로 요청할 때, data 를 보내고, response 응답을 받아와서 사용했습니다.
여기서 보낼 data,
받아오는 data 를 담아두는 곳이 DataCollection 이고,
이런 DataCollection 들을 가지고
위와같이 type, url, dataType에 대한 정보를 담아서 통신하는 역할을 Submission 이 해줍니다.
- 요청 응답을 Map에 담을지, List에 담을지 선택해서 DataCollection 을 만들고,
- id 변경을 이용해 data 이름을 맞춰줍니다.
이렇게 data를 보내고 받을 그릇을 만들어 두고
Submission 을 생성합니다 .
1. ID 는 JavaScript 에서
: GridView 와 DataList 는 짝을 이룬다.
- Grid 는 Column 별로 id, column1, column2 이렇게 주어져있음
=> data가 들어갈 column의 id 를 받아올 DataList 의 id 랑 맵핑
ex) EMP_NM ( 데이터 들어갈 column 에 id 입력 )
- Grid column 누르고 위에 조작바에서 행,열을 추가 삭제 수정하여 사용
- 혹은 grid 영역 더블클릭해서 조작
( 엑셀 셀 병합 하듯이 사용, 혹은 우클릭으로 열 삽입 행삽입 사용 )
- 다중선택할 때는 ctrl 키 누르고 사용
- GRID 에 DB 테이블 그대로 옮기기
=> HEAD - DataCollection - 가져올 DataList
=>드래그앤 드랍으로 Grid 창에 놓고 => Option : 신규생성 / header / body 체크 후 생성
=> 자동 맵핑해서 생성해줌
- GRID 에서 data 값 포맷, 수정하기
=> column 선택하고 property - inputType 을 정하고
=> 해당 input 쪽 더블클릭 - dataBind 시켜서 사용
- GRID 크기 맞추기
=> Grid 선택 => property 속성 - autoFit - allColumn/lastColumn 등
=> allColumn(동일간격) 주고 autoFitMinWidth 주속성까지 주면
화면 크기 줄었을때 가로 휠 만들어서 글자 짤림 방지
- 테이블에 순번달아주기
=> 속성 rowNumvisible : true
- [ Sort ] GRID 정렬
sortable : true 주고 테이블 헤더 더블클릭하면 해당 컬럼기준 정렬
=> Ctrl + 더블클릭으로 여러 헤더들 누르면 멀티sort 가능
- [ Filter ]
=> grid 전체 선택 => useFilterList : true
=> 원하는 컬럼 property useFilter : true
- columnMove : true ( 컬럼 사용자 입장에서 이동시켜서 사용 가능 )
=> 이거로 코드 따와서 이용할 수 있음
- GridVIEW 는 보여주는 역할만 처리
=> 데이터 crud 는 dataCollection 가지고 처리하는 것
[ rowStatus ]
websquare에서는 CRUD 에 대해서 => 데이터에 rowStatus 정보에 CRUD 정보만 넘겨줌
=> 이 정보를 가지고 서버단에서 실제로 적용하는 방식
[ 엑셀 다운 ]
ui_grd.advancedExcelDownload([]);
Model 탭의
- dataType : String / Number 등
여기서 expression 이라는 타입은, 직접 DB에서 가져오는 컬럼이 아니라,
DB 데이터를 가지고 조작해서 가져오는 타입일 때 expression 타입을 적용
- expression => 속성편집 => ctrl + space => 컬럼 하고 api 들 선택해서 만들기
=> Driver 에서 DB 드라이버 선택하고
=> 쿼리로 직접 데이터 가져와서 매칭 시킬 수 있고,
: 롤백 시킬꺼냐 말꺼냐
- alterColumnLayout
: 서버에서 가져오는 데이터 구조가 변할 때, 컬럼 구조를 어떤 기준으로 둘거냐
[ 바인딩 예시 ]
바인딩 유형 : data set 바인딩
데이터셋 : ds1
행 : 0
열 : name
=> ds1 데이터 셋에 담긴 0번째 index 행의 name 컬럼 value값을 가져오겠다.
바인딩 유형 : data map 바인딩
데이터맵 : dm1
열 : color
=> dm1 데이터 맵에 담긴 color 컬럼의 value 값을 가져오겠다.
[ 상대컬럼 바인딩 ]
1. property - 바인딩 - 문맥 추가
2. 바인딩추가- 상대컬럼바인딩 - 선택
=> "선택형 컨텍스트" 많이 사용
=> 클릭하면 input box에 해당 내용 들어가는 기능
- payload :
데이터 셋 :
1. modified => update 변환된 행만 가져올 거다
2. all => 모든 행 가져올거다
응답 시
- add :
1. false => 데이터 대체
2. true => 데이터 기본거랑 병합
=> 이벤트로 submission 적용
app.lookup("서브미션아이디").send();
function onBtn3Click(e){
var btn3 = e.control;
app.lookup("sms1").send();
}
[ css 등록 ]
Palette - 컨트롤 에 만들어져있는 .part.less 파일들 중에서 쓸 파일들을
cleopatra-theme.less 같은 less 파일에서 @import 해서 사용
=> less 파일에 담아서 컴파일 하는 것
env.json => 런타임 환경설정 파일
=> 프로젝트에 전역적으로 설정
=> less CSS 파일 등도 전역 적용
[ 새 파일 ]
- clx-src 소스경로에서 new - 새 exbuilder파일로 생성(.clx파일)
( 모든 작업은 소스경로에서 이루어진다. )
- 템플릿 / 화면크기 설정
=> 파일 생성 시, clx파일 / js 파일 두개가 생성됨
=> 이건 세트로 항상 붙어다녀야함 ( 수정/ 이동/ 삭제 등 )
=> clx 의 js 탭에서 작업 권장 ( js는 그냥 붙어만 다닌다고 생각 )
[ 레이아웃 ]
1. XY 레이아웃
- 새 파일 생성 시 디폴트가 XY레이아웃
=> 화면 배치를 자유롭게 하도록 해줌
properties - 레이아웃
- 앵커-체크박스 : 고정 / 비고정 ( 엥커를 잡는다 )
=> 배치 할 위치에 따라서 체크박스 적용
2. 반응형 XY Layout
디자인 우클릭 => 레이아웃 => 반응형 XY 레이아웃 선택
default / tablet / mobile / custom
각 크기의 경우에 따라 화면 구성, 디자인을 다르게 설정해 둘 수 있다.
3. 폼 Layout
디자인 우클릭 => 레이아웃 => 폼 레이아웃 선택
열 / 행 등을 적용해 form 형식의 테이블을 만들고,
열, 행별로 디자인을 수정, 관리할 수 있다.
4. 템플릿
: 커스텀해서 사용해는 컨트롤
레이아웃 우클릭 - UI 템플릿으로 등록
=> Template 탭 생성
=> 다른 컨트롤들 처럼 클릭해서 붙여넣기로 사용 가능
- 새 템플릿 생성은 템플릿 폴더 밑에 해야한다.
5. 버티컬 레이아웃
- 레이아웃
1. '자동' => 데이터 많으면 많은만큼 그리드가 늘어남 ( 모바일일 경우 많이 사용 )
2. 체크 해제 => 그리드 보다 늘어나면 휠 처리 ( pc )
6. 플로우 레이아웃
- 레이아웃
linewrap 설정
1. true => 디폴트 ( 그리드 넘어가면 그 부분에서만 휠 처리 )
2. false => 페이지 전체로 휠처리 ( 그리드 늘어남 )
[ Grid ]
1. 컨트롤에서 그리드 클릭
2. design 에 클릭해서 생성
3. dataList 등 바인딩할 데이터를 드래그해서 그리드 창에 끌어넣음
4. 옵션 선택
5. 컬럼 구성
- 생성 : 체크 시 생성 / 미체크시 해당 컬럼 생성 X
- 데이터컬럼 : 컬럼 나열
- 컬럼 텍스트 : 주석 내용 (comment 값)
- 소트 / 필터
- 컨트롤 삽입 => 체크 시 컨트롤 타입을 삽입함
- 컨트롤 타입 : 인풋박스 / 아웃풋박스 / 넘버
- 그리드 창은 더블클릭 시, 특수하게 그리용 탭 제공
- properties - dataSetId => 그리드에 들어가는 data
=> 해당 컬럼명의 value 값이 들어온다.
: 테이블에서 특정 컬럼(대표값) 만 노출
=> 선택 시 => 해당하는 전체 정보 가져와서 테이블에 바인딩
1. 대표값 보여줄 그리드 생성
2. 데이터 셋 => 만들어둔 그리드로 드래그 앤 드롭
=> 그리드 생성 팝업창 에서 대표값, 혹은 가져올 값만 체크
3. 선택 시 => 보여줄 테이블 '폼 XY 레이아웃' 으로 생성
=> 헤더 값 직접 넣어두기
4. 폼 레이아웃 전체에 => 바인딩 => 문맥 생성
=> 선택형 컨텍스트 => 대표값 용으로 만들어둔 그리드 선택( 그리드 속성 id )
5. 데이터 들어갈 input box 등의 칸에 각각 바인딩 시켜줌 ( 드래그 드랍도 되고, 각 우클릭도 되
코드로 만들던 기본적인 html, js, css, 통신의 역할등을 Websquare, exBuilder 등이 편리하게 대체해주고,
대신 어느정도 틀을 갖추도록 하는 프레임워크 같다는 느낌을 받았습니다.
결국에는 가장 기본인 코드에 대한 이해가 충분히 선행되어야 툴을 더욱 잘 활용할 수 있겠다는 생각이 듭니다.