part 1.

help contents
상단탭
Help -> HelpContents에서
기능 검색 Scope에서 Exbuilder만 검색 되도록 지정 가능하다.

0. 기본 정보

초록색 부분: 바인딩 불가
파란색 부분: 바인딩 가능

앵커(레이아웃): 해당 방향 고정, 앵커 체크 해제 시 고정 해제

***데이터 바인딩의 경우 드래앤드랍으로 적용 할 수 있다.

ctr+shift+p = 미리보기 단축키

컴포넌트를 컨트롤이라고 명칭한다.

1. LayOut

체크박스 표시 시 해당 위치를 고정하는 기능
체크박스 해제 시 고정이 해제 되어 해당 방향으로 이동이 가능하다.
예제 이미지의 경우 오른쪽과 아래로는 위치 이동 가능.

2.Model

데이터들을 보여주는 탭

2-1 앱속성

assist -> 출판된 속성에서 등록

2-2 데이터 데이터셋 (단축키 컨트롤 엔터로 생성 가능)

복수의 열과 행 key : value로 이루어짐

expression을 사용하기 위해서는 dataType을 expression으로 지정해줘야지만 사용 가능하다.

Column Builder 사용법

해당 탭에서 DB연결 후 쿼리를 입력 후 이동(화살표) 버튼을 클릭하여
컬럼 생성 가능(컬럼만 생성 값 생성은 불가능)

데이터셋 편집

sortConection: 컬럼명+desc / asc로 해당 컬럼 기준으로 정렬
filterConection: 해당 컬럼에 특정 값 filter
예시의 경우 column2 컬럼에 colum21의 값 제외하고 출력

2-3 데이터 맵

데이터셋의 경우 다수의 컬럼에 다수의 행값을 가질 수 있으나
데이터 맵의 경우 1개의 컬럼에 1개의 값만 가질 수 있다.

2-4 서브미션

http requestful 통신을 통하여 값을 주고 받는다.
크게 요청데이터와 응답데이터로 나뉜다.
*요청 데이터
보내는 데이터로 payload에서 modified와 all을 선택 할 수 있다.
modified: 수정된 데이터만 보낸다.
all: 모든 데이터를 보낸다.

*응답 데이터
add 부분 true와 false로 나뉘어 있으며
true: 기존 데이터에서 받은 데이터를 덧 붙이겠다.(이어 붙이기)
flase: 기존 데이터를 지우고 받은 데이터를 덮어 씌우겠다.
란 의미이다.

3.컴포넌트 배치 놓기

ctl+space 클릭시 팔레트 키기 단축키
원하는 컴포넌트 클릭 후 shift키 누른 상태로 클릭 할 경우
해당 컴포넌트 계속 생성 가능(다시 팔레트에서 컴포넌트를 선택 할 필요가 없다.)

4. Group 컴포넌트(with 폼 레이아웃)

해당 컴포넌트 사용 후
폼 레이아웃을 사용하여 폼 레이아웃을 만들 수 있다.
구분선 및 음영관련 속성들을 자동 지정을 클릭해야 구분선과 음영이 생긴다.

자동 크기 사용 시 내용이 넘어가더라도 짤리지 않고 나온다.

폼레이아웃 핸들링 옵션
1. 폼레이아웃 -> userResizing true 설정 시
사용자가 레이아웃 사이즈 조정가능
2. 레이아웃 -> scrollable true 설정 시
사이즈 초과 시 스크롤 바 활성화
3. 폼 레이아웃 설정 시 여백, 간격은 해당 폼 안 컴포넌트 여백 간격을 의미한다.
여백 해당 레이아웃 간 공간(패딩과 비슷)
*여백의 경우 앵커 기준으로 적용되는 것으로 보임(최 상단 상단,좌측 적용
그 아래 좌측만 적용)
간격 컴포넌트 간 간격 (마진과 비슷)
여백: 5, 간격: 10이 무난한듯

5.버티컬 레이아웃(레이아웃 종류)

위에서 아래로 배치하는 레이아웃 형태

6. Grdi(컴포넌트)

데이터셋을 드래그하여 그리드에 올리는 것으로 헤드값과 데이터를 적용 할 수 있으며 레이아웃 탭에서 자동 탭을 체크 하는 것으로 사이즈를 데이터
크기에 맞게 변경 되도록 설정 할 수 있다.(체크하지 않을 경우 스크롤바 생성) - auto size: both

*관련 핸들링 함수
grid.getSelectedRowIndex(): 선택된 row Idx 추출

6. 플로우 레이아웃

컨트롤을 차례대로 배치 할 수 있는 레이아웃
레이아웃 -> lineWrap true일 경우 컴포넌트가 자동 개행
false일 경우 한줄로 나온다.
컴포넌트 선택 allowNewline을 false로 지정 시 해당 컴포넌트만
개행을 허용하지 않도록 설정 할 수 있다.(기본 값 true)

7. 공통 템플릿 등록

해당 컴포넌트 클릭 우클릭(보통 group하여 많이 지정한다.)
UI템플릿으로 등록 -> 프로젝트 공유 UI 템플릿으로 등록

이후 CTR+SPACE에서 공통 템플릿을 불러 올 수 있다.

8. 바인딩

대상 속성: 바인딩 할 속성 값 value, visible 등
바인딩 유형: 데이터 셋, 데이터 맵 등

바인딩 유형 -> 앱속성 바인딩의 경우
Assist -> 출판된 속성에서 정의 해 줄 수 있다.

익스프레션 바인딩

문자열 "", Number 숫자 입력

*문맥과 상대 컬럼 바인딩

상대 컬럼 바인딩을 사용하기 위해서는 바인딩 -> 문맥을 정의 해 줘야한다.

*문맥 선택행 컨텍스트

선택행 컨텍스트는 필드에 있는 grid와 같은 다중 행 컴포넌트와 연동 할 수 있다.

*컴포넌트 연계 바인딩 (group + 인풋박스) - 선택행 컨텍스트(문맥), 상대 컬럼 바인딩(바인딩)

group 안 inputbox 생성
group 컴포넌트에 문맥 -> 선택행 컨텍스트 정의,
inputbox 상대컬럼 바인딩 정의하여
선택한 행 값 출력 가능

9.컴포넌트(출력 계열)

9-1 Output

Output 컨트롤은 String,Number,Date 3가지의 dataType을 가지고 있다.

타입 지정시 데이터 포멧을 지정 해 줄 수 있다.
Number 타입의 경우

포멧을 지정 해 주면 3자리마다 ,가 찍힌다. (위 그림 참고)

Date 타입의 경우

2024-01-01 형식으로 지정된다. (위 그림 참고)

9-2 Input

9-2-1 InputBox

기본적인 InputBox
주요 핸들링 옵션: secre / true: 암호로 표기, false: 일반 표기 (기본값)

9-2-2 SearchInputBox

Search이벤트 생성 가능 돋보기 모양 클릭 시 이벤트 발생

주요 핸들링 옵션
1. 이벤트 Search: 돋보기 모양 클릭 시 이벤트 발생
컴포넌트 입력 값 받는 방법
e.control.value

9-2-3 NumberEditor

숫자 입력 박스

주요 핸들링 옵션
min(최소값), max(최대값)을 설정할 수 있다.
step 옵션을 통하여 증감 값 설정또한 가능하다.

9-2-4 DateInput

캘린더 에디터

주요 핸들링 옵션
mask: 보여지는 포맷
format: value 포맷


주요 이벤트: value-change 값이 변경 된 후 발생하는 이벤트
이벤트 값 받는 방법:
e.control.value

9-2-5 ComboBox

콤보박스: Assist -> 선행 데이터에서 콤보박스 데이터 정의
링크드 콤보 박스: 연관된 콤보박스 생성
Assist -> 선행 데이터에서 콤보박스 데이터 정이
콤보박스와는 다르게 parent값을 정의 할 수 있으며
해당 값을 기준으로 링크드 생성 가능.(parent 값이 없는 값만 최초 링크드콤보 박스에 표기 된다.)

10. Grid

핵심: 그리드 내 컴포넌트 적용이 가능하다.
예시: 그리드 내 inputbox, outputbox 등 컴포넌트 적용이 가능

익스프레션 총 합계 구하는 방법
getSum("Column") ---> ""안에 컬럼명 입력

10-1 Split(in Grid)

그리드에서 데이터가 영역을 초과 할 경우 스크롤 바가 활성화 된다.
이때 스크롤 바와 무관하게 위치를 고정하는 기능이다.
left, right의 경우 옵션에서 조정 가능하지만
top과 bottom의 경우에는 직접 스크립트로 작성해줘야 한다.
(이유: left,right의 경우 길이를 알 수 있지만 top, bottom의 경우 데이터에 따라 가변적이기 때문에)

*스크립트 참고

top, bottom height를 지정해줘야한다. (기본 값 0)

11. UDC

공통 모듈 UDC폴더 내 파일을 만들어 공통 모듈 컴포넌트(+스크립트)를 만든다
해당 컴포넌트는 팔레트 불러오기로 프로젝트 내 어디서든 불러 올 수 있다. (해당 프로젝트 내 모든 컴포넌트와 스크립트를 가지고 온다.)

UDC 컨트롤 추가 방법

컨트롤을 생성한다.

assist에 앱속성을 추가 해 준다. (형식: control)

스크립트를 작성 해 준다.
getAppProperty로 속성을 추가 해 주며
ctr+shift+/로 속성의 형식(Type)을 지정 해 줄 수 있다.

다른 파일에서 UDC를 불러온다.

불러온 UDC 컨트롤을 클릭하여
앱속성 값을 추하 해 준다.

*UDC 이벤트 전달 방법

이벤트 출판 후 이벤트 전달.

UDC 불러온 컨트롤 우클릭 -> 이벤트 탭에서
전달 받은 이벤트 클릭

스크립트 작성 (전달 받은 이벤트를 클릭하면 해당 이벤트 함수가 만들어진다.)

11. 공통 모듈

UDC와 비슷하게 출판 과정을 거쳐서 사용 할 수 있다.
총 4가지 출판 방법이 있다.
1. 글로벌 출판 방식
2. 모듈 출판 방식
3. 오브젝트 출판 방식
4. 비표준 출판 방식
생성 방법
소스경로 -> new -> 새 공통 모듈

*모듈 파일은 별도의 호출 없이 모든 파일에서 사용 가능하다.
예시) new edu.module.js()같은 스크립트 호출이 필요 없음.

1. 글로벌 출판 방식
   
   모듈파일에 globals.으로 생성, 호출 시 별도의 작업 없이 바로 호출이 가능하다.

2. 모듈 출판 방식
   
   함수 생성 후 exports하여 함수를 내보내기 해 준다.
   호출 시 cpr.core.Module.require("모듈 파일 이름");
   //모듈 파일 이름의 경우 뒤에 .module.js는 생략 가능하다
   ex) sample.module.js의 경우 경로/sample로 작성
   을 통하여 모듈 호출 후 함수 사용이 가능하다.
   *exports.내보낼 이름 정의 = 내보낼 함수 정의 (호출이 아니기 때문에() 사용 하지 않는다.)

3. 오브젝트 출판 방식
   
   함수 생성하여 prototype으로 함수 정의

globals를 통해 해당 함수를 생성하여 사용한다.

4. 비표준 출판 방식
   
   tomatosystem 객체 안에 함수를 정의하여 출판한다.
   여러 함수를 출판 할 때 편리하게 사용 할 수 있을 듯
   
   tomatosystem. 을 통하여 호출 가능하다.

12. 다이얼로그

팝업창

app.openDialog를 사용
Dialog/Dialog01은 다이얼로그 파일 경로 root/(생략)
ready는 팝업 창이 열리면 실행 되는 영역

then은 팝업창이 닫히면 실행되는 영역
app.close(true, or)과 같이 써줘야 한다.
true = 팝업 창 정상 종료(예시: 닫기 버튼 직접 클릭)
false = 사영자의 의도와 무관하게 닫힌 경우
*실제 기능의 차이는 없으며 그냥 명시적 목적을 위해 구분 사용

*다이얼로그 값 보내기

var appHost = app.getHost();
실제 다이얼로그로 실행되었는지 아니면 그냥 실행 되었는지 확인
var initValue = app.getHostProperty("initValue");
initValue 값은 객체로 전달

13. 임베디드

페이지 호출 tree 컨트롤과, 임베디드 앱 컨트롤을 연계한다


Assist에 값 바인딩

값 구조

label => 표기되는 값
value => value 값
appId => 경로

임베디드 앱 기능 스크립트