[ 넥사크로 ] 3. 넥사크로 화면 만들어보기

[ 이전 공부 내용 ]

---

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

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

---

1. TypeDefinition 메뉴

1.1 - Objects

- Objects 메뉴를 더블클릭하면, Modules와 Objects로 나뉘어져 있을 것이다.

넥사크로는 Javascript Framework 형태로 제공해주는 제품이라고 한다. 넥사크로에 대한 라이브러리, 엔진소스는 Modules에 다 정의가 되어 있다고 한다.

 

기본적으로 5개의 모듈로 정의가 되어 있다고 보면 된다. 또한 .json 옆에 버튼이 있는데, 그 버튼은 json을 보여주는 버튼이다. 클릭하면 모듈에 대한 정의가 json 형태로 출력이 된다.

 

Objects는, 프로젝트에서 사용할 수 있는 Components의 종류이다. 약 40여개의 컴포넌트를 제공은 하지만, 휴대폰에서 모든 기능을 사용하지 못하듯이, 자주 사용하는 컴포넌트만 추가가 되어 있고 나머지 필요한 기능을 하는 컴포넌트는 추가하면 된다.

 

Objects를 추가할 수 있는 방법은, Modules에 있는 .json 파일 옆에 + 버튼이 있는데 그걸 클릭하면 추가 할 수 있고

삭제는, Objects에서 삭제하면 된다. 체크박스는 현재 Objects에 저장되어 있는 컴포넌트들이 체크되어 있다.

---

1.2 - Services

- 서비스는 Resource Service와, User Service로 나뉘어져 있다.

 

Resource Service는, 디자이너의 영역이다. 개발자는 User Service만 제어하면 된다고 한다.

Service는, Directory를 저장하는 곳이다 라고 생각하면 된다. 

 

그럼 User Service의, Column에 대해 하나씩 살펴보자. 

 

  1.2.1 - PrefixID

    - PrefixID는, frame을 저장할 경로의 이름이다. Project Exploler를 보면, 밑에 Base와 Framebase가 있는 것을 볼 수 있다.

 

  1.2.2 - Type

    - Type에는 여러가지 종류가 있다. 그 중 form은, 화면에 대한 소스타입을 뜻하고

       js는 javascript만을 모아놓는 타입이라고 정의하는 곳이고 image는 file에 모아놓는 타입 정의

       jsp ~ model은, 클라이언트와 서버간의 데이터 통신을 할 때 통신 url을 지정해놓는 곳이라고 타입을 정의한다.

 

  1.2.3 - IncludeSub-directory

    - 하위 디렉토리를 설정하겠는가? 를 뜻한다. default값은 false이다.

 

---

1.3 - ProtocolAdaptors

- 넥사크로는 기본적으로 HTTP Protocol을 사용하고 있다. 별도로 정의를 하지 않으면, HTTP 프로토콜은 기본적으로 사용이 가능하다. 하지만 회사만의 특별한 프로토콜을 사용하는 경우가 생길 수도 있는데

 

넥사크로에서 제공해주는 sdk를 이용해서 wrapping 과정을 거쳐서 개발을 하게 되면, 개발된 최종 프로토콜을 ProtocolAdaptors에 등록을 해주면 넥사크로에서 사용할 수 있는 프로토콜로 인식을 하게 된다.

---

1.4 - DeviceAdaptors

- 기본적인, 마우스와 키보드로 기기를 동작하는 것은 기본적으로 사용이 가능하며, DeviceAdaptors에는, 음성인식과 제스처로 동작인식 하는 것을 제공해주고 있다고 한다.

 

하지만 음성인식과 제스처를 사용하기 위해서는 해당 사용자 pc에 동작인식에 관련된 설치모듈이 설치가 되어 있어야 한다고 한다. 그래서 웹 형태로는 사용이 불가능하다.

---

2. Application Infomation 메뉴

2.1 - Application Variables

- Application Variables 안에는, Datasets, Variables, DataObjects가 있다.

 

  2.1.1 - Variables

    - 해당 애플리케이션 전체에서 사용할 수 있는 전역변수를 정의하는 곳이라고 생각하면 된다.

   

    - Environment의 Variables랑, Application Variables의 Variables의 차이점이 무엇인가요?

        - Environment의 Variables는 개발자가 정의했으면, 반드시 지워줘야만 하고 저장되는 위치는 실행하는 브라우저의              LocalStorage에 저장이 된다.

          Application Variables의 Variables는 생명주기가 애플리케이션이 실행되어 있는 동안에만 해당 변수가 살아있고, 애           플리케이션 실행이 종료가 되면 자동으로 삭제가 된다.

 

  2.1.2 - Datasets

    - Variables는, 변수 하나에 하나의 데이터만 가질 수 있다. 배열이나 List와 같은 구조가 아닌 변수이기 때문에 당연한 이        야기이다. 하지만 Datasets은, 전역변수를 2차원 형태로 데이터를 관리할 수 있는 Object이다. 이 부분에 대해서는 다          음에 제대로 공부를 하게 된다.

---

2.2 - Applications

- Applications에는, 처음 환경설정을 할 때 설정했던 기기에 대한 데이터의 정보가 들어 있는 곳이다.

그 안에 Frame에 대한 데이터의 정보들이 들어있다.

TopLeft로 설정했기 때문에, mainframe 밑에 하위구조로, 프로젝트를 설정했던 frame구조에 대한 내용이 들어있다.

이 frame의 구조는, FrameBase에 보면, Left, Top, WorkFrame 화면으로 구성이 되어 있는 것을 볼 수 있다.

---

3. 화면 만들어보기

1 ) TypeDefinition -> Services -> User Service에서, + 버튼을 눌러서, form을 클릭하자.

 

2 ) 화면을 저장할 Directory를 생성한 것이다. 그 다음, PreifxID는 Work로 하고, IncludeSub-directory를 true로 해서 하위 폴더를 만들 수 있도록 하자.

 

3 ) Work라는 service를 만들었으면, 오른쪽 마우스를 클릭해서 folder를 생성하자.

 

4 ) Ctrl + N을 눌러서, Form Wizard로 가서 Form을 만들어보자. Location은, Work 폴더로 하고, name은 원하는대로 하자. 나는 HelloForm이라고 하겠다.

 

5 )  원하는 사이즈를 조절하고 next를 클릭하면, position을 지정해줘야 하는데 이 부분이 form을 만들 때 가장 중요하다.

이 부분이 중요한 이유는 모니터의 크기가 다양해진 만큼, resize가 이뤄저야 하기 때문이다. 하지만 form wizard 단계에서는 px로 해놓고, 나중에 resize가 이뤄져야 하는 부분에 대해서만 %로 변경을 하면 된다. 그리고 밑에 Save position units in options를 체크하고 finish를 눌러주자.

 

6 ) 이제 버튼을 만들어보자. 위에 여러 아이콘들중에 3번째 아이콘을 클릭해서, form에 클릭해주면 버튼이 생성된다. 아니면 더 크게 만들고 싶다면, 원하는 크기만큼 드래그를 하면 원하는 크기에 맞는 버튼이 만들어진다.

 

7 ) 버튼의 텍스트를 변경하고 싶다면, 더블클릭을 하면 안되고, 클릭 누르고 조금 뒤에 클릭을 하면, text 변경이 가능해진다. 원하는 text를 입력하자.

 

8 ) 아니면, 버튼을 클릭하고 오른쪽에 보이는 Properties를 보면 그 옆에 text 속성이 있다. 해당 text 속성에서 수정을 해주면 된다. 또 다른 방법은 버튼을 클릭하고 F2키를 누르면 쉽게 변경을 할 수 있다.

 

9 ) 이제 버튼을 누르면 alert 창을 띄우는 방법에 대해서 알아보도록 하자. 클릭 할 버튼을 더블클릭하거나, form 화면 밑에 Design, Source, Script 버튼이 있는데 그 중에서 Script 버튼을 클릭해보자. 

 

10 ) 그리고 직접 이벤트를 만들어보자. Properties 창에, 4번째 번개모양이 그려진 버튼이 있는데 그 버튼이 Event 버튼이다. 해당 버튼을 클릭해서, onclick 이벤트에 이벤트 명을 입력해보자. 난 helloClick이라고 입력을 했다. 그러면, 스크립트 창에 자동으로, 메서드가 생성된다.

 

11 ) 그리고 자바스크립트와 마찬가지로, alert(msg) 메서드를 입력하면 되는데, 넥사크로에서는 무조건 스코프를 지정해줘야한다고 한다. 그래서 this.alert("hello world") 를 입력해야만 한다. 뒤에 this.가 무조건 붙어야 한다고 한다.

 

12 ) 이제 form을 실행해보자. 위 아이콘 중에, 돋보기 모양에 번개가 그려진 아이콘이 보일 것이다. 아이콘중에서 제일 마지막 단축키는 Ctrl + F6이다. 그걸 클릭하고 run을 눌러보자. 그러면 넥사크로에서 만든 브라우저로 실행된 form의 결과가 나올 것이다. alert 메서지가 잘 뜬다면 성공이다.

 

13 ) 넥사크로에서 log를 찍고 싶을 땐 어떻게 해야할까? 넥사크로에서 제공하는 걸 사용해야 하는데

밑에처럼 버튼 클릭 이벤트 메서드안에 코드를 입력해보자.

nexacro.getApplication().trace("hello world");

이건 왜 this.이 아닌가? 왜냐하면 nexacro 애플리케이션에서 제공을 해주는 것이기 때문이다. javascript 기본 함수가 아니기 때문. 로그는 넥사크로 output 창에 띄워지게 된다. 그리고 인터넷 익스플로러나 크롬으로 브라우저를 선택하고 띄울 땐, 개발자 모드에서 콘솔을 볼 수 있다.

 

14 ) 이제 스크립트를 이용해서 버튼의 이름을 변경하는 방법을 알아보도록 하자.

this.버튼 이름.set_text(msg) 을 입력하면 된다. 클릭 이벤트 메서드에 코드를 작성하고 버튼을 클릭해보면, msg에 입력된 값으로 버튼 text가 변경이 된 것을 확인할 수 있다.

this. 으로 제공되는 것 중에, set은 뒤에 무조건 _를 붙여주게 된다. 넥사크로만의 규칙인듯 하다.

 

15 ) 만약에 회사 프로젝트마다 명명 규칙이 따로 있다면, Button을 만들 때의 button이 아닌 btn이라는 규칙이 있다면, 그걸 변경해줘야만 한다. 그럴 땐, Properties에서, 세 번째 아이콘을 클릭한 다음, btnXX으로 입력을 하면 된다. 이러고 잘 되는 지 실행을 해보자. set_text 메서드가 실행이 되지 않을거다 왜냐하면 id를 변경해줬는데, set_text는 기존 id의 set_text 메서드를 사용하고 있기 때문이다.

 

https://www.youtube.com/watch?v=sfbt1Z6fZMM&list=PLgoHUQa-ZzHA8TEIwVYspbaosEtItwNK9&index=2 

해당 영상을 참조해보면 편하다.