블로깅 목적
📖 Nexacro 플랫폼 사용 시 자주 이용 할 수 있는 편의기능에 대하여 정리해보자.
편의기능 목록
📖 모든 편의기능을 다루기에는 내용이 방대하기 때문에 처음 넥사크로를 사용하는 입장에서 반드시 알아야 할 부분들만 추출하여 작성해보겠다.
⚡️ 서비스 설정
이전 게시글에서 알아본 서비스는 소스를 저장하는 디렉토리 공간이며, Resource Service(디자이너)와 User Service(개발자)로 구분된다고 배웠다. 그렇다면 서비스를 어떻게 설정 할 수 있는지 알아보자.
🖥️ 생성
위의 서비스 메뉴를 더블 클릭하면 아래와 같은 화면이 출력된다.
사진에서 보는 것처럼 Resource Service와 User Service가 분류되어 있으며 해당 창에서는 User Service만을 추가, 변경, 삭제가 가능하다.
여기서 서비스를 주로 생성하는 이유는 PrefixID를 통해 URL 경로를 매핑하여 스크립트내에서 사용하거나 별도의 폴더를 생성 할 경우 사용한다.
사진의 가장 하단부에 보이는 Test라는 서비스는 사용자가 정의하여 생성한 서비스이며 추가를 할 경우 아래와 같이 디렉토리 구조가 형성된다.
생성된 서비스를 우측 클릭하면 다음과 같이 메뉴들을 볼 수 있으며 사용자가 원하는 폴더를 추가 할 수 있다.
기존에 있는 Base와 FrameBase는 폴더 추가가 불가능하기 때문에 용도별 컴포넌트를 분리하고 싶거나 애플리케이션에서 사용할 .js 파일들을 모아두고 싶은 경우 사용하면된다.
⚡️ 컴포넌트 배치
🖥️ 컴포넌트 생성
넥사크로의 가장 큰 장점이라고 할 수 있는 컴포넌트 생성은 해당 컴포넌트 UI를 클릭하고, Form 영역에 드래그 또는 클릭하면 생성이 가능하다.
버튼 UI를 클릭한 상태로 아래와 같이 드래그 또는 클릭을 하면 컴포넌트가 생성된다.
🖥️ 컴포넌트 정렬
그렇다면 동일한 형태 또는 복수형태의 컴포넌트를 배치해야하는 경우 정렬에 대해서 알아보자.
먼저 기본적으로 컴포넌트를 정렬할 때 기준이 되는 컴포넌트가 있어야한다. 아래 사진에서 컴포넌트들 중 테두리 점의 음영이 진한 것이 기준 컴포넌트가 되는 것이다.
여기서 기준 컴포넌트를 바꾸고 싶다면 ctrl을 누르고 선택을 해제했다가 재선택을 해주면 된다. 이렇게 기준 컴포넌트를 지정하였으면 정렬을 할 수 있는데 이때 방법은 2가지로 나뉜다.
Design > Align을 사용
Align UI 사용
사진에 있는 UI들을 사용할 때 주의할 점은 기준이 되는 컴포넌트를 잘 생각하고 사용하여야한다는 점이다. 여기서 추가로 특정 컴포넌트가 또 다른 특정 컴포넌트를 기준 컴포넌트로 설정할 수 있는 방법은 다음과 같다.
-컴포넌트를 선택하고, 중앙 지점에 십자가 모양을 클릭하여 드래그한다.
-기준으로 지정할 컴포넌트와 연결해주고 값을 설정한다.
-설정된 값을 properties에서 확인 및 수정한다.
⚡️ 컴포넌트 속성 변경
컴포넌트를 생성하고 스타일 및 기타 속성들에 대한 값을 지정 및 추가, 수정 할 경우 플랫폼의 우측에 보이는 properties에서 가능하다.
자주 사용하는 부분만 알아보자.
-cssclass : xcss 파일로 지정한 CSS 클래스를 적용
-id : 스크립트에서 호출할 컴포넌트의 ID를 지정
-taborder : Tab키를 사용하여 컴포넌트 간 포커스 변경 순서
-text : 내부 텍스트 설정
-visible : 컴포넌트를 시각적으로 표시 또는 미표시
-position : 말 그대로 컴포넌트의 위치를 설정 및 조정
⚡️ 이벤트 설정
컴포넌트의 이벤트를 설정하는 방법은 2가지가 있다.
🖥️ 더블클릭
버튼 컴포넌트를 더블클릭하면 디폴트로 지정된 onClick 함수가 자동으로 스크립트 영역에 생성되며 코드는 다음과 같다.
this.Button00_00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
//실행코드 작성
};
🖥️ 사용자 지정 이벤트 생성
원하는 이벤트에 사용하고자하는 함수명을 작성하여주면 동일하게 스크립트에 함수가 생성되어진다.
this.fn_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
//실행코드 작성
};다양한 이벤트를 사용할 수 있으니 확인 후 원하는 이름을 지정하여 사용하자. 해당 form에서 생성된 이벤트는 해당 스크립트 영역에서만 사용이 가능하다는 것을 인지하자.
⚡️ 컴포넌트 복사
컴포넌트를 복사하는 것은 간단하다. ctrl + C / V를 하면 되지만 주의해야 할 부분은 그냥 ctrl + V를 사용하여 붙여넣을 경우 id만 변경될 뿐 기타 설정 및 이벤트는 연결되어 있는 상태로 복사가 된다. 이러한 경우를 막기 위해서는 ctrl + shift + V를 사용해주면 id만 변경된 빈 컴포넌트를 생성할 수 있다.
여기서 필요한 부분만 체크하여 복사를 진행하면 된다.
⚡️ 컴포넌트 숨기기
컴포넌트를 숨기는 것은 visible을 이용하여 가능하지만 이렇게 되면 컴포넌트가 보유하고 있는 기능을 사용하지 못한다. 혹시 컴포넌트가 시각적으로 숨겨지더라도 기능을 사용하고 싶은 경우에는 아래와 같은 방법으로 진행하면 된다.
영역선택에서 이동을 할 수 있도록 손바닥 모양의 UI를 선택한다.
form의 가장 좌측 상단의 점을 클릭하여 드래그하여 빈 공간을 만들어주면 -px값이 등장하게 된다.
원하는 컴포넌트를 -px 영역으로 이동시켜주면 시각적으로 보이지는 않지만 보유한 기능 및 상태는 사용 할 수 있다. 주의할 점은 컴포넌트를 -px 영역으로 빼놓고나서 다시 form을 원위치 시키면 정상적으로 작동하지 않으니 사진처럼 -px 영역이 보이는 상태에서 작업을 진행하자.
⚡️ 컨테이너 컴포넌트
컴포넌트를 포함 할 수 있는 컴포넌트를 컨테이너 컴포넌트라 부른다.
사진에서 보는 것처럼 크게 Div, Tab, PopupDiv가 있다. 컨테이너 컴포넌트를 생성하는 것은 다른 컴포넌트들과 동일하다. 다만, 컨테이너 내부에 단일 컴포넌트를 생성할 경우에는 반드시 컨테이너 컴포넌트를 클릭하고 생성 해주어야한다.
얼핏 보기에는 버튼이 Div내에 잘 위치한 것 같지만 아래 사진을 보면 표시되지 않은 것을 알 수 있다.
이러한 이유는 생성 순서 때문이다. 버튼을 Form 영역에 먼저 생성한 상태에서 Div를 생성하면 Div는 버튼의 존재를 알지 못한다. 또한, Div를 선택하여 버튼 즉, 컴포넌트를 생성할 대상을 인식시켜주는 것이라 생각하는 것이 편하다.
이렇게 컨테이너 컴포넌트를 선택한 상태에서 단일 컴포넌트를 생성해주면 아래와 같이 위치하는 것을 확인 할 수 있다.
만약 컨테이너 컴포넌트 외부에 있는 컴포넌트를 가져오고 싶다면 해당 컴포넌트를 복사한 뒤 컨테이너 컴포넌트를 선택하고 붙여넣기를 해주면 된다.
⚡️ 코드 스니펫
코드 스니펫이란 쉽게 설명하여 사용 빈도가 높거나 공통적으로 사용되는 코드를 단축어로 등록하여 사용하는 기능이라고 보면 편하다.
스크립트 영역에서 마우스 우클릭을 하면 위와 같이 코드 스니펫 기능을 사용 할 수 있다.
Add Code Snippet을 클릭하면 우측에 빈 양식이 생성된다. 여기서 스니펫 이름을 지정하고 단축어를 설정하며 아래 큰 빈칸에는 스크립트를 작성하는 영역이 되는 것이다.
기존에 만들어진 스니펫을 보면 이름이 File header이다. 스크립트 영역에 File header라고 작성하면 해당 스니펫을 선택 할 수 있도록 아래와 같이 출력된다.
선택한 스니펫을 작성하고 싶다면 엔터를 누르면 아래와 같이 자동으로 저장된 스니펫 코드가 작성되어진다.
코드 스니펫 기능은 대규모 애플리케이션을 개발하거나 팀 단위로 프로젝트를 공유할 때 사용한다면 모듈을 간단한 단축어를 이용하여 사용 할 수 있다는 장점이 있으니 사용을 고려해보면 좋을 듯 하다.
마무리
이렇게해서 이번 게시글에서는 넥사크로 프로젝트를 작성하기 전에 플랫폼에서 지원하는 대표적인 편의기능들에 대하여 살펴보았다. 혹시 여기서 추가적으로 내용이 필요하다면 아래 링크를 참조하여 자세히 살펴보도록 하자.
그럼 이만.👊🏽
