expr 고급지게 사용하는 노하우

Intro.

expr이란 컴포넌트에 표시될 텍스트를 동적으로 생성하는 수식을 설정하는 속성입니다. 즉, 실제 값이 아닌 화면에 표시만 되는 속성으로 텍스트가 출력되는 컴포넌트를 지원합니다. (Edit, TextArea와 같은 텍스트 입력 컴포넌트 미지원)

예를 들어 값이 100보다 크면 “크다” , 작으면 “작다” 라는 수식을 설정할 경우 101인 값은 컴포넌트에 “크다”라는 값이 표현됩니다.

static 컴포넌트 expr 적용 및 수식 예시

 

What will help?

expr을 통해서 컴포넌트에 적용된 텍스트는 getDisplayText() 메소드를 통해 표시되는 값을 반환할 수 있습니다. 또한 접근 가능한 영역에 정의된 함수를 설정할 수 도 있는데요. comp.parent.함수명() 을 사용하면 현재 컴포넌트의 부모 즉, 폼의 함수를 대입하게 됩니다. “comp”란 수식 실행 시 현재의 컴포넌트를 지칭합니다.

Dataset 바인딩을 통한 Static과 Grid 컴포넌트 expr 함수 적용 예시

리스트 타입의 그리드와 리스트뷰 컴포넌트는 셀에서  “comp” 외 this, dataset과 같은 예약어가 추가로 지원됩니다.

this	수식이 정의된 cell
comp	cell을 갖는 현재 컴포넌트
dataset	바인딩 된 Dataset 컴포넌트
currow	수식이 계산하고 있는 행(Row)의 인덱스
[Column Id]	수식이 계산하고 있는 행(Row)의 Dataset Column 값 = getColumn()

위와 같은 예약어를 활용하면 수식에서 바인딩 된 데이터를 사용하거나 컴포넌트의 프로퍼티와 같은 값을 바로 사용 가능합니다.

 

how to expr

프로젝트에서 expr 기능은 그리드 컴포넌트에서 주로 사용됩니다. 예를들어 데이터에 A와 B값만 존재 할 경우 두 데이터의 계산 값을 표현하거나 각 행(Row) 별 상태값을 표현 할 수 있습니다. 예제를 통하여 활용방법을 살펴보겠습니다.

다음 예제는 expr에 수식을 설정하여 calculation 컬럼에 num1 값과 num2 값을 계산하여 나타냅니다.

expr으로 text에 결과값 나타내기 예시

expr 적용범위

#1. calculation의 행(Row)은 num1, num2 값이 계산됩니다.

• type값은 1 = 더하기, 2 = 빼기, 3 = 곱하기로 combo로 innerdataset이 바인딩 되었습니다.
• 각 type값에 따라 num1값과 num2값이 calculation에 계산되어 표현됩니다

 expr 수식 : type==1? num1 + num2 : type==2? num1-num2 : num1 * num2

 

#2. 행(Row)의 변경이 있을 경우 status 컬럼의 상태값이 “추가”,”삭제”,”수정”으로 변경됩니다.

status의 기본 값은 0, 추가 = 1, 삭제 = 3, 수정 = 2 값으로 setColumn 합니다.#2. 행(Row)의 변경이 있을 경우 status 컬럼의 상태값이 “추가”,”삭제”,”수정”으로 변경됩니다.

• type 형태와 같이 innerdataset을 생성하여 displaytype을 combocontrol 로 사용할 수 있지만 셀에 expr을 사용하여 각 값에 따라 text가 표현되도록 수식을 설정하였습니다.

 expr 수식 : status == 1? "추가" : status == 2? "수정" : status == 3? "삭제" : ""

 

#3. 행이 삭제되어 status값이 “삭제”가 될 경우 type을 변경할 수 없습니다.

• 현재 행의 status값이 3 삭제일 경우 combo의 edittype이 none으로 변경되어 해당 행의  type을 변경할 수 없습니다.
• edittype에서 set expression을 사용합니다.

 edittype 수식 : expr:status == 3? "none" : "combo"

 

#4. 추가된 행의 num1,num2 값은 입력이 가능하지만 다른 status의 행은 입력 및 수정이 불가합니다.

• status값이 추가의 상태 1일 경우에만 num1, num2의 행의 edit가 활성화되어 입력 하거나 수정 할 수 있습니다.
• num1과 num2의 edittype에서 set expression을 사용합니다.

 edittype 수식 : expr:status == 1? "normal" : "none"

 

#5. status와 calculation 행은 “추가”,”삭제”,”수정” 될 경우 각 글자의 색상이 변경됩니다.

• 먼저 cssclass사용을 위해서 3가지의 cell class 생성이 필요합니다.
• status와 calculation의 cssclass에서 set expression을 사용합니다.

 cssclass 수식 : expr:status==1? "expr1" : status==2? "expr2" : status==3? "expr3" : ""

 

expr 유의사항

expr은 직접 수식을 작성하여 표현되는 큰 장점이 있는 기능이지만 적용 시 화면이 매번 갱신되면서 해당 수식을 계산하게 됩니다. 이때 그리드 컴포넌트와 같은 많은 리스트가 표현 될 경우 화면 성능상의 문제가 발생할 수 있습니다. 그렇기에 저는 expr에 함수나 수식을 직접 대입하는 방법은 지양합니다.

이러한 문제를 사전에 방지하고자 아래와 같은 방법을 추천합니다.

• expr은 부득이한 경우 최소한으로 사용하기
• 가능한 데이터셋의 값을 계산하여 컬럼을 바인딩 하여 사용하기

사실 그리드 컴포넌트에서 expr (expression) 이 사용 가능한 속성은 모두 데이터셋의 컬럼을 바인딩하여 사용 할 수 있습니다.

화면이 최초 로딩할 때 각 데이터에 따른 cssclass, edittype, expr(text값)을 가공하여 각 계산식을 데이터셋에 담아 사용합니다. 변경된 데이터는 이벤트 발생 시 값을 재계산하여 데이터를 변경하도록 사용하면 화면의 성능적 이슈를 방지 할 수 있습니다.

 

플레이넥사크로 바로가기

https://www.playnexacro.com/

play nexacro