[웹스퀘어] 정리

kxsxh·2024년 10월 21일

웹스퀘어

목록 보기

2/2

참고 영상

웹스퀘어 실행 후 WebContent라는 것을 보게 되면 웹 소스를 볼 수 있다

웹스퀘어는 UI 제품이기에 웹루트 이하에 만들어준다
HTML, JSP 관리하듯이 웹 루트 이하에서 형상관리가 된다

✔️ 프로젝트를 생성하면 안된다
➡️ 웹스퀘어 페이지 컴포넌트를 선택해야한다

웹스퀘어 화면을 만들 땐 파일 이름만 선언하고 FINISH ~
⚠️ 확장자를 붙이면 안된다 -> 자동으로 붙여짐

디자인 TAB

➡️ 웹스퀘어를 이용해서 화면을 구성하는 영역 ➡️ 화면을 그릴 때는 팔레트 뷰어 부분을 활용한다

스크립트 TAB

➡️ 디자인 탭에서 화면을 구성한다 ➡️ 구성된 화면에 대한 컴포넌트들의 기능을 정의하기 위해서 어떤 동적인 기능을 적용하기 위해 사용하는 부분

✔️ 여기서 자바스크립트 로직을 작성

DATAMAP

: 데이터 개체를 관리하는 부분
: 항목은 키로 설정
여러 항목을 담아줄 수 있다
데이터부분을 눌러서 DB 관리

데이터 값을 하나밖에 갖지 않는 경우 그 때 활용하는 게 바로 이 데이터 맵이다

DATALIST

항목을 칼럼으로 관리, 여러 항목을 담아줄 수 있는데 반면 데이터 맵과 다르게 데이터 리스트는 데이터를 여러개 가져갈 수 있다
EX) 그리드

✔️ 자바에서 리스트와 맵을 생각하기

Submission

: 통신을 담당하는 객체

해당하는 부분의 툴 상단을 보면 Add submission이 있는데 부분을 보면 생성할 수 있다

통신 객체를 주로 웹에서는 html 기반으로 하지만 웹스퀘어에는 자바스크립트나 이러한 코드를 쓰고 source 탭에서는 완성된 xml 형태로 보여진다
-> 코딩은 안하는 게 좋음.. 스크립트 작성할 때 스크립트 탭을 항상 활용

화면에 대한 부분들을 적용할 때는 이 디자인탭을 보면서 진행 w_pack에 js가 있음

xml을 만들게 되면 wpack에 대한 JS가 있어야 한다

✅ JS가 사라진 경우 ➡️ Project -> Rebuild Websquare Project

컴포넌트 사용하는 방법

1) 컴포넌트가 지니고 있는 속성
2) 이벤트
3) API를 이용

속성을 확인하려면 컴퍼넌트를 선택, 우측에 Property 뷰어가 보인다
속성이라는 탭을 이용
F1를 누르면 상세한 내용 확인 가능

속성에 해당하는 부분

컴포넌트를 사용할 때는 웹스퀘어의 컴포넌트는 항상 아이디 중심이다.
이 아이디를 꼭 입력해야만 우리들이 사용할 수 있다

DATATYPE ➡️ 텍스트인 숫자, 정수 형태일 때 넘버 실수는 플롯이 그리고 1짜리 이상 큰 숫자일 때는 빅대시 하는 등 날짜나 시간, 유료화에 대한 속성을 지정할 수 있다.
세자리마다 콤마를 찍어주는 포맷은 디스플레이 포맷 속성을 사용

applyFormat ➡️ 해당하는 부분을 올리라고 변경을 하고 저장

API 활용하는 방법

객체를 이용할 때 웹스퀘어의 컴퍼넌트에 아이디를 주면 아이디가 전역변수 그대로 올라가게 된다

EX)

 iph === iptobj;

➡️ 이렇게 안써도 된다

컴포넌트를 입력하고 점을 입력하게 되면 해당하는 컴퍼넌트가 사용할 수 있는 API 목록들이 나타나게 된다

✔️ 컴포넌트에 이용하는 것은 속성과 이벤트 API이기 때문에 속성과 이벤트는 프로퍼티탭에서 속성과 이벤트로 활용이 되어진다
➡️ 그 밖의 뷰어는 잘 사용하지 않는다

이스케이프 속성 ➡️ br 태그를 치환해주는 부분
false로 지정해야지 두 줄로 나타난다

MultiSelectbox는 활용도가 떨어져서 이 부분을 대체하는 것이 체크콤보박스이다

✔️ 팔레트에 버튼을 검색하면 안나온다 ➡️ trigger를 검색해야한다

앵커를 통해서 나타내서 css를 통해 이와 같이 버튼 형태를 나타낼 수 있다

제너레이터

: 내가 원하는 형태의 내용들을 이렇게 구성해놓고 해당하는 부분을 제너레이터로 감싸주면 이 부분들을 반복하거나 삭제하거나 이런 이유에 로직을 작성해서 관리할 수가 있다
여러 리스트를 나타낼 때 그리드만 활용하는 게 아니라 제너레이터를 이용할 수도 있다

WFrame

: 아이프레임에서 다른 형태..
공통된 자원을 다 활용하고 여러 웹브라우저를 띄우는 효과가 나지 앟아서 메모리를 훨씬 적게 가볍게 뜰 수 있는게 바로 W프레임이다
MDI라고 명칭 x
윈도우 컨테이너 MDI를 지원하는 컴퍼넌트에 해당하는 컴퍼넌트 역시 구성을 할 때 서브화면들이 아이프레임이 아닌 w프레임의 형태로 열리고 있다
outline-Head를 보면 내가 생성한 데이터 객체들을 볼 수 있다

trigger를 오른쪽 마우스로 클릭하여 그룹으로 감싸고 outline에 group을 선택하고 property에 들어가

overflow:hidden

을 하면 trigger 주위를 감싸게 된다

날짜를 나타낼 때 setValue라는 API를 제공한다
setValue -> 입력선 컴퍼넌트이기 때문

✅ 기왕이면 오늘날짜를 가져오는 함수를 이용하는 게 보편적인 방법 날짜 형태를 나타낼 때는 yyyy-mm-dd를 나타내지만 그러기엔 여러 형변환을 거쳐줘야 되기 때문에 직접적인 자바스크립트가 아닌 웹스퀘어에서 이용가능한 유틸 자원을 활용해본다
웹스퀘어에서는 각각의 페이지마다 유틸성 자원에 대해서 $라는 객체를 제공

현재 날짜나 시간을 가져올 때는 $p.getCurrentServerDate("yyyyMMddHHmmss") -> ⚠️ 대소문자 주의!! 옵션 같은 경우에 chooseoption을 써서 예를들면 "전체" 이런 식으로 작성해도 됨
만약에 빈칸을 쓰고 싶다면(공백으로 쓰고 싶다면) $blank를 입력

성별 API 활용하기

id에 이름 꼭 넣기(ex. UI_gender)
➡️ 스크립트탭에 API를 통해 항목을 추가하려면 UI_gender.addItem를 적는다
UI_gender.addItem(value,label,index)

value : ex) F,M
label : 여성, 남성
index: 인덱스는 0부터 시작되는데 인덱스 순서에 따라 배치 순서가 달라짐

✔️ 인덱스는 생략이 가능하여 생략하게 되면 순서대로 나타난다

Span Direction
➡️ 가로, 세로로 먼저 선택할 수 있다. 보통은 가로 방향으로 나두는 것이 맞다
css 통해서 가로 방향으로 조절하게끔 만들어놔서 굳이 적용은 안해도 상관없다

➡️ rows로 했을 때 span count가 아무것도 작용하지 않으면 1이 들어가는데 1이면 한 줄로 2이면 두줄로 3이면 세줄로 입력하지 않으면 1이 알아서 들어간다

역할에 들어가서 아래쪽에 있는 체크박스도 가로방향으로 적용하게 미리 바꿔놓기

실제 가지고 있는 데이터 리스트와 연결해서 사용하는 방법

➡️ 데이터 객체를 하나 만들어서 연결시키는 방법

데이터 콜렉션 탭에서 만들 수 있지만 이렇게 하면 화면을 못본다
▶️ 화면으로 디자인으로 놔두고 아웃라인에 헤드탭을 이용한다

Data collection 선택 후 마우스 클릭 후 해당 칼럼을 작성한 후 해당 박스를 클릭하고 나서 데이터 객체를 이용할 때는 반드시 바인드 아이템 셋을 체크해야한다

데이터를 볼 때는 실행된 화면에서 ctrl 키 + 마우스 우 클릭 => 웹스퀘어에서 제공 가능한 여러 디버그 메뉴들을 볼 수 있다
그 중에서 데이터를 관리할 때는 데이터 콜렉션 보기를 선택하면 된다

데이터를 만드는 방법

outline -> Head -> Datacollection -> ex) Datalist#dc_code를 여기서 행 삽입을 클릭하고 이걸 이용한다 뜻에서 usedata를 반드시 체크해야한다

스크립트를 통해 데이터를 넣으면 웹스퀘어의 컴포넌트들은 아이디를 주면 아이디가 전역변수로 올라간다

데이터 객체 ➡️ 데이터 리스트나 데이터맵이나 적용된 아이디를 기준으로 아이디를 입력하고 점을 찍으면 사용할 수 있는 API 목록이 나온다

컴포넌트와 동작이 같다
컴퍼넌트에 아이디를 주듯이 데이터 객체에 역시 아이디를 주게 되면 전역변수처럼 사용이 가능하다라고 보면 된다
데이터를 넣어볼 때 웹스퀘어의 데이터 리스트는 데이터를 넣어줄 때 1차원 어레이 형태로 넣을 때는 셋 데이터나 xml 형태로 넣을 때는 setxml이나 그리고 JSON 형태로 넣을 때는 setJSON 등을 사용할 수 있다

형태에 따라서 다 종류가 있다
dc_code.setJSON(jsonData,append);
=> var jsonData = [{"code":"01","name":"PM"}, ...

API를 통한 bind
chkRole.setNode(nodeset,label,value)

label : 라벨을 나타내는 항목아이디
value : 칼럼 아이디

setNodeSet이라는 API 이용을 할 수 있다

nodeSet ➡️ 내가 적용할 데이터리스트를 넣어준다

✔️ 반드시 앞에 데이터 땡땡을 붙여준다 ex) data:dc_code

chkRole.SetNodeSet("data:dc_code","name","code");
➡️ 동적으로 적용 가능해짐
(동적인 API 통한 방법도 많이 사용)
✔️ 목록을 세팅하는 방법이다
🔗 데이터를 가져와서 내가 가져온 데이터로 화면에 적용하는 방법
➡️ 즉 통신을 해야함 => 서브미션 이용하기

search_light ➡️(submission) 제일 중요한 부분이 레퍼런스와 타겟 URL Action이 중요하다

reference ➡️ 리퀘스트 정보
Target ➡️ 리퀘스트(입력하는 것이 아니라 실제로 내가 사용할 데이터 객체를 하나 만들어서 지정해준다)
URL action이 내가 직접 데이터를 얻어올 서블릿 구조

edu > data > .JSON 파일
정보를 읽어오게 하기

파일에 주소값을 주면 된다
JSON 파일 선택 후 마우스 클릭하여 Properties 확인
웹 루트는 /edu/data/userinfo.json 디폴트 루트를 복사해서 URL 액션에 직접 입력을 할 수 있다 이와 같이 입력한 후에 간단히 테스트 해볼 수 있다
-> Submission Test

Requeste Data 옆에 있는 send를 누른다

그 다음 Create DataCollection을 눌러 데이터맵을 만들겠습니까

라고 물어볼 때 OK를 눌르면 데이터콜렉션이 추가됐다는 메시질르 볼 수 있다
DC_UserInfo생성됨

데이터 타입은 항상 제이슨으로 되어있다 xml이나 array는 웬만하면 잘 이용하지 않는다

JSON을 요즘에는 웹에서 많이 이용.. 그 추세를 웹스퀘어가 따라가고 있다

서블릿 연결할 때는 이 부분도 같이 넣어서 이 같은 방법으로 데이터 객체를 지정해서 나타낸다 ➡️ reference

Process Message : 조회중
➡️ 이렇게 입력을 하면 해당하는 이 서브미션이 통신하는 동안 조회하고 있는동안 조회 중이라는 메시지 참이 보인다
화면 자체는 disable시킨다

즉, 조회하는 동안 다른 제어를 못하게 방지를 하는 거다

submit ▶️ 통신 <전처리>
submit - done ▶️ 콜백처리 ( 통신이 정상적으로 완료되었을 때 callback 처리) <후처리>
submit - error ▶️ 통신 구간이 정상이 아닐 때 200에서 300을 넘어서는 범위에 있을 때 <에러처리>

submit이나 submit error 같은 전처리나 에러 처리의 부분은 고통적으로 처리하는 부분이 따로 있다

이 부분은 공통 개발자가 거의 관리를 해주기 때문에 일반 단위 화면 개발자는 화면에서 직접적으로 할 일이 없다
통신 후 콜백처리 정도는 개별적으로 할 수 있다

Submimt, Submit error은 할 일이 없다

submission을 실행해볼때 컴퍼넌트나 아이디나 데이터 객체 아이디하고 점 찍으면 해당하는 사용할 수 있는 API 목록이 보인다

하지만 sbm_submit(서브미션 아이디)은 안된다
▶️ 전역으로 올라가지 않았기 때문
이럴 때 $P.executesubmission을 실행

API 서브미션의 ID와 같이 문자열의 형태로 넣어주게 되면 서브미션이 실행됨

표를 만들고 공간여백이 생기면 채우고자 할 때 공간을 채워주는 기능을 하는게 autopy라는 기능이다

리스트칼럼 ➡️ 빈공간을 마지막 칼럼으로 다 채우겠다는 뜻이다
allcolumn으로 적용하면 모든 칼럼이 영향을 받게 된다

autoFit은 지정하되 특정 사이즈 이하는 적용하지 않아야 한다
➡️autoFitMinwidth이다
디폴트가 480. 그래서 480 이하에서 적용하기 때문에 의미가 없다
900 픽셀을 기준으로 작아지면 autoFit이 더 이상 적용되지 않는다

필터 속성을 쓰고 싶으면 useFiter를 true라고 써야 한다

필터에 리스트로 필터링하고자 하면 useFilterList로 쓰기

row의 상태값을 변화된 부분이 있다면
➡️ rowStatusvisible
헤더에 문구를 주고 싶으면 상태라고 입력하면 된다

visibleRownum ➡️ 화면에 표현할 행 수

All로 지정 x -> 그리드뷰가 길어지게 된다

✔️ 콤보 형태로 데이터를 선택하게끔 바꿔야한다
➡️ inputType:select 로 바꾸면 된다

➡️ 더블클릭하고 BindItemSet을 연다

이렇게하면 화면에 표시가 잘 안나서 이럴 때 viewType : icon을쓰면 된다

입사일 tab의 일정표시는 inputType:calendar로 해도 된다

우편번호 같은 번호일 때 -를 사용하고자 한다면 display-Format:###-###을 입력한다

디스플레이 포맷을 주는 게 꽤 복잡하게 함수 형태를 관리해야한다고 하면 displayFormatter기능을 사용한다
scwin.dis라고 입력한다
-> 스크립트에 scwin dis = function(data) { return data.substring(0,3) + "-"+data.substring(3,6)

grid view가 지니고 있는 이벤트 및 API에 대한 설명

grid view에 API 부분을 이벤트 설명, 그리드뷰를 선택하고 이벤트를 선택해보면 그리드뷰가 사용할 수 있는 여러 이벤트들이 많이 나오게 된다

🔗 그리드뷰는 그리드뷰의 전체 이벤트만 있다 컬럼별로는 이벤트가 X
속성만이 그리드뷰의 속성 컬럼별 속성이 나눠져 있고 이벤트나 API 모두 그리드뷰의 것을 사용한다

그리드뷰가 컬럼별로 이벤트가 없으니까 컬럼별로는 어떻게 제어하는 지 기능을 통해서 알아볼 수 있게 함

➡️ 먼저 이벤트 중에서 가장 단순한 셀을 클릭했을 때 발생하는 이벤트
EX) 셀을 클릭하는 이벤트
=> 셀을 클릭, 더블 클릭하는 이벤트
=> 스크립트버튼을 눌러서 이벤트를 작성을 해준다

이벤트를 만들게 되면 해당하는 그리드뷰에 이름에 아이디에 해당하는 이벤트 셀 더블 클릭 셀을 더블 클릭했을 때 발생하는 이벤트를 작성할 수 있다.

oncelldbliclick을 쓰게 될 때 컬럼과 관계된 것은 칼럼 인덱스와 colId이다

➡️ 제어문을 쓸 때 컬럼에 아이디를 이용하는 것이 좋다

if (colId == "EMP_CD") {
	alert("사번");
}

-> 이렇게 적는 것이 좋다

컬럼 인덱스로 쓰지 않기 이벤트 뿐만 아니라 항상 아이디 기준으로 작업 권장

✔️ 행 추가 됐을 때 몇건 빠지고 몇 건 추가 됐는지 계산해서 총 권수를 나타내주면 좋다
💫 런 이벤트를 이용해야함

데이터리스트의 전체를 구할 때 getRowcount라는 API를 쓰면 된다

데이터를 추가하거나 삭제할 때 같은 내용으로 넣어도 된다
getRowCount API를 이용하게 되면 데이터의 건수를 쉽게 구할 수 있다

행 추가를 하기 위해 행 추가를 선택하고 마우스 클릭을 눌러 onClick 이벤트를 만들어주고 아이디를 우리가 넣어준다
데이터를 추가하고 싶을 때 인서트와 관련된 API 볼 수가 있다 데이터까지 같이 밀어 넣는 형태는 1차원 array 형태는 insertRow(0)
deleteRow를 쓰면 실제 데이터를 지우는 게 아니라 데이터 상태값을 변경해주는 것이다

데이터 콜렉션에 정보를 주면 status가 0으로 바뀐다

행 추가, 삭제 등 4건이 변경됐는데 이런 걸 한꺼번에 처리하려면 서브 미션 중 저장버튼 체크박스를 할 때 inputType을 checkbox로 두고 상태값을 확인하면 디폴트로 1이 된다

체크해제를 하면 원래 상태로 들어가는 게 아니라

상태값은 안건드리는 것이 좋음

값이 바귀든 말든 상태값을 안 건들렸으면 할 때는 신규로 생성한 아웃라인의 헤더에서 선택해야 한다

헤더의 데이터 리스트 중 신규로 만든 컬럼을 선택한다
property를 봐야 한다

그러면 데이터 객체는 API가 많고 이벤트나 속성은 별로 없다 몇 개 없는 속성중에 이 컬럼 속성에 보면 IgnoreStatus 칼럼 속성이 있다

이 부분을 true로 변경하게 되면 값이 바뀌거나 말거나 더 이상 상태에는 영향을 주지 않는다 그래서 체크용도로 사용하는 칼럼은 이와 같이 Ignorestatus를 설정해야 한다

체크를 눌러봐도 더 이상 상태값에 영향을 주지 않는다

▶️ 그렇다고 값이 안바뀌는 것은 아니다 값은 바뀌고 있다 그러나 상태값에
영향을 주지 않게끔 속성을 정의할 수 있다

체크된 컬럼만 다중 삭제를 해보면 된다 API를 쓸 때는 컬럼의 아이디로 쓰면된다
var chkIdx = Ui_memberList.getcheckedIndex("chk")

초기화하고자 할 때 메모리상으로 빈 배열로 만드는 것이 메모리 효율성이 좋다

dc_userInfoList.setData([]);

removeall ➡️ 이전 데이터를 사용해야 한다면 removeall도 너무 많은 데이터에 대해서 쓰는 것은 권장하지 않는다

메모리가 풀하게 되는 현상들이 발생할 수 있다

▶️ 몇 만건 몇 백만 건 되는 거 막 지우지 말아야 한다

몇백건은 괜찮다

엑셀 다운로드

Ui_memberList.advanceExcelDownload([]);

엑셀 업로드.. 그냥 막히게 되면 이상하게 된다.
헤어 부분이 포함됨

▶️ 엑셀 옵션은 주로 제이슨 형태로 작성을 한다

옵션 중에 헤더가 있으니 올리지 x

var options = {};
options.headerExist = "1";
options.type = "1";

help로 도움말 찾기
advanceExcelDownload(option,infoArr) 옵션이 내려받는 엑셀 다운로드에 대한 옵션이다 기본적으로 엑셀 다운로드를 할 때 쓰는 포이 자료를 이용
포이 쪽에서 제공되는 옵션들은 다 넣어 놨다고 보면 된다 스타일 관련한게 상당히 많다

그 밖에 다른 옵션들도 읽어보면 어떤 게 있었는지 확인할 수 있다

각각의 로우를 선택할 때마다 아래쪽에 이와 같이 마스터 디테일 구조가 나타나길 원하는 것이다
이것을 하기 위해선 그리드뷰에 보통은 이벤트를 활용한다고 생각할 수 있다
예를 들어 그리드뷰의 이벤트 중에 내려보게 되면은 로우 인덱스가 변경 될 때마다 발생하는 로우 인덱스 체인지라는 이벤트가 있다
이 이벤트를 사용해서 로우 데이터를 뽑아내서 각각의 항목에 맞게 setValue를 해주는 방법을 생각할 수 있다

▶️ 안되는 건 아니지만 복잡해질 수 있다

💫 아주 간단한 방법으로 그리드 뷰의 데이터 건을 나타내니 데이터 리스트하고 연계가 돼서 이렇게 화면에 나타나게 되어진다

반면에 이 테이블 안쪽에 있는 컴포넌트들은 한 건밖에 없다
그렇기 때문에 데이터리스트의 컬럼 하나가 기본이다
웹스퀘어에서는 안보이는 기능들 추가적으로 만들어 놨다 웹 스퀘어에서 그리드 뷰가 각각의 로우 인덱스를 클릭할 때마다 로우 인덱스에 해당하는 단 건 a 데이터 객체를 가상으로 만들어 놓는다
이름을 아이디로 검색해도 엔진 내부에서 그렇게 만들어준다

가상의 테이블과 테이블의 항목을 연결해주는 기능이 자체적으로 있다

데이터리스트의 컬럼들을 테이블에 있는 컬럼과 맵핑하면 된다

이름을 끌어다가 연결하기 (outline-> head)

kxsxh

이전 포스트