[ 넥사크로 ] 6. 넥사크로 기본화면 개발 실습

Dataset을 활용하는 방법에 대해서 알아보도록 하자.

 

[ 이전 내용 ]

---

2022.08.03 - [web & develop/웹 공부] - [ 넥사크로 ] 1. 넥사크로 설치하기

2022.08.03 - [web & develop/웹 공부] - [ 넥사크로 ] 2. 넥사크로 구조 살펴보기

2022.08.04 - [web & develop/웹 공부] - [ 넥사크로 ] 3. 넥사크로 화면 만들어보기

2022.08.04 - [web & develop/웹 공부] - [ 넥사크로 ] 4. 넥사크로 개발 툴 사용방법

2022.08.08 - [web & develop/웹 공부] - [ 넥사크로 ] 5. 넥사크로에서의 Components와 Dataset

---

1 ) Dataset 만들고, Dataset 연결하기

- Dataset을 만들고, 바인딩하는 것은 굉장히 쉽고 간편하다. UI 만드는 아이콘쪽에 Dataset이란 아이콘이 있는데 클릭 후 Invisible Object에 클릭하면 Dataset 만들기 끝.

 

그리고, 데이터베이스에서 받아 올 Column의 속성값들을 만들어줄 수도 있다.

Dataset을 더블클릭하면 Dataset Editor가 뜨는데, Column 부분에 Add Column to the dataset을 클릭해서, 하나씩 만들어준다.

이 때 주의할 점은 데이터베이스 테이블에서 받아올 Column의 이름과 속성값이 같아야 한다는 점이다. Size는 달라도 괜찮다고 한다.

 

만약 데이터베이스 테이블을 아직 만들 지 못한 상태라면, 걱정하지 마라! 테스트 데이터 또한 만들 수 있다. 밑에 Row가 있는데 거기에 테스트를 할 데이터를 만들어주자.

 

그리고 Dataset을, Grid에 드래그 앤 드롭해주면, 바인딩 완료!

그럼 Row에 만들어놓은 데이터들이 한 눈에 테이블 형태로 보여질 것이다.

그럼 각각의 Row를 클릭할 때 Edit이나 MaskEdit UI에 클릭한 Row의 각각의 속성값을 넣어주고 싶다면?

 

그것도 쉽다. Dataset을 Edit에 드래그 앤 드롭 해주고 ColumnID를 출력하고 싶은 데이터를 지정해주면 된다.

 

그리고 위에꺼 보다 복잡하지만, 또 하나의 방법이 있다.

 

Project Exploler -> Dataset을 만들었던 form -> Objects -> Dataset 이름을 보면, 여러 Column들이 보이게 되는데, 그걸 드래그 앤 드롭해도 된다.

---

2 ) Grid 테이블 셀을 UI로 변경하기

- Grid에 Dataset을 넣고, 더블클릭하면, Grid Contents Editor가 나오는데, 거기에 body 부분이 데이터를 출력하는 공간이다.

그 쪽에, combo나, edit으로 데이터를 출력하고 싶다면 Action에 displaytype과 edittype이 있는데 그걸 상황에 맞게 변경해주면 그냥 static text가 아닌, 상황에 맞는 UI로 출력이 가능하다.

---

3 ) 넥사크로 Expression

- Grid Contents Editor에서, body cell을 클릭하면, 오른쪽에 text 속성이 있는데, text 속성을 클릭하고, 오른쪽에 있는 버튼 중 Set Expression 버튼을 누르면, Expression을 설정할 수 있는데

 

한 예로, 스크립트 작성을 아래와 같이 작성을 해보자.

 

var var1 = "123";
this.var2 = "abc";

this.functionName = function(arg){
	return arg + ' hello';
}

이렇게 스크립트를 작성하고, grid contents editor로 이동해서, Column 3개를 만들어보자. 그리고 각각의 컬럼에 var1, var2, function 이라는, head cell을 만들어주고, head cell 밑에, body에 expression을 추가해주자.

var1 cell : comp.parent.var1
var2 cell : comp.parent.var2
function cell : comp.parent.functionName(currow + 1)

: 왼쪽에 있는 건 head cell을 뜻하기 때문에, expression 입력 시 같이 적으면, 안되고, : 오른쪽 comp로 시작되는 부분부터 작성해야 한다.

 

그리고, OK 누르고 저장 후 브라우저를 실행해보자. 그럼 var2와 function cell에서는 데이터가 잘 출력 될 것이다.

하지마 , var1 셀에서는 데이터가 빈 값이 나온다. 이유가 뭘까? 이유는 var 자료형은 그냥 comp로 참조 할 수가 없다.

 

this.로 시작한 것만 comp.parent에서 참조가 가능해진다는 점 잊지말자!

 

Grid Expr이 궁금하다면, 교안을 참고해보자. ( 넥사크로 홈페이지에서 제공해주는 교안이다. )

 

넥사크로N 교안.zip

5.43MB

---

4 ) 넥사크로 데이터 통신

- 넥사크로는, 라이센스를 구매한 회사로 개발자가 방문해서, WAS가 설치되어 있다는 가정하에, X-API를 WAS에 설치해줘야만, 넥사크로와 통신이 가능해진다고 한다. ( 에효.. 라이센스 없으면 사용해보지도 못하는구나 )

 

일단, 라이센스 구매 없이 기본적으로 교육용 서비스를 구현해놓은 것이 있다고 한다. 그 부분은 교안 파일을 다운받아서 확인해보면 된다.

 

그냥 영상으로 확인하자. 그게 빠를 것이다.

 

또한, %나 fit to width, height에 관련 된 내용들 또한 있기 때문에 영상을 참고하는 것이 좋다.

 

https://www.youtube.com/watch?v=13h0rMZqv6A&list=PLgoHUQa-ZzHA8TEIwVYspbaosEtItwNK9&index=6 

 

그리고 https://www.playnexacro.com/# 홈페이지도 참고하는 것도 좋은 방법이다.