[넥사크로 컴포넌트 실습] 넥사크로에서 버튼 만들기(Nexacro Button 생성, Visible, Enable 설정, ID 명명 규칙)

안녕하세요. IT Window 킷도우입니다.

한 해가 정말 얼마 남지 않았는데요. 마무리들은 잘 하고 계신가요? 열심히 사는 것도 중요하지만 난 그냥 이 지구에 놀러온 여행자다. 회사 생활, 부업, 인간 관계를 지구에 놀러온 여행자로써 놀이쯤으로 생각하고 즐길 줄 아는 마음가짐도 참 중요한 것 같습니다. 물론 잘 안되지만요 ㅎㅎ

 

오늘도 놀이의 일환으로 여러분들에게 도움될만한 글을 가져왔는데요. 바로 넥사크로에서 버튼 컴포넌트를 만드는 방법입니다. 버튼은 웹 페이지 개발에 있어 기본 중에 기본인 컴포넌트입니다. 버튼을 클릭했을 때, 다양한 이벤트를 발생시켜 사용자가 원하는 기능 구현을 할 수 있는데요. 거두절미하고 바로 버튼을 생성해 보겠습니다.

 

1. 버튼 생성을 위해서는 아래 컴포넌트 라인 중 회색 네모난 아이콘을 클릭해서 만들 수 있습니다. 마우스 클릭 후 아래와 같이 버튼을 드래그하여 만들어 줍니다.

넥사크로 버튼 생성 - 1

▼

넥사크로 버튼 생성 - 버튼 생성할 영역 드래그

▼

넥사크로 버튼 생성 - 버튼 생성 완료된 이미지

2. 이제 버튼 텍스트를 수정해 봅시다. 오른쪽 Properties탭에서 text부분에 원하는 버튼 명 입력 후  enter를 치면 아래와 같이 버튼 텍스트가 바뀌는 것을 확인할 수 있습니다.

넥사크로 버튼 생성 - text 수정

3. 다음으로 버튼 ID를 입력해 줍니다.

 버튼뿐만 아니라 inputbox, radiobox와 같은 컴포넌트들은 전부 아이디를 그 목적에 맞게 입력해 줘야 합니다. 저는 주문을 등록하기 위한 버튼을 만들 것이기 때문에 Register Order의 약자를 따서 btn_regOrd라는 아이디를 부여해 줬는데요. 아이디를 부여할 때 명명 규칙을 잘 따라야 합니다. 이 명명 규칙은 투입되는 프로젝트마다 각양 각색입니다. 그러므로 참여한 프로젝트에서 어떤 식으로 명명 규칙을 쓰고 있는지를 파악해 아이디를 만들어주면 됩니다.

제 개인적으로 선호하는 명명 규칙은 아래와 같습니다.

1) 우선은 컴포넌트의 종류에 따라 아래와 같이 앞부분을 만듭니다.

예) 버튼 -> btn_ , 콤보 -> cbo_ , 체크박스 -> chk_ , 그리드 -> grd_

2) 그 다음으로는 만들려는 컴포넌트의 기능에 맞게 약어를 만들어 줍니다.

예) 주문등록 -> register order

예) 주문삭제 -> delete order

3) 단어를 간략하게 축약합니다.

예) register order -> reg ord

예) delete order -> del ord

4) 축약한 단어를 이어 붙이 돼, 첫 단어의 첫 문자는 소문자로하고 그 뒤 단어를 붙일 땐 첫 문자를 대문자로하여 단어와 단어를 구분합니다.

예) reg ord -> btn_regOrd

예) del ord -> btn_delOrd

이 id는 간략하면서 명시적이고 이해하기 쉽게 만들려고 최대한 노력해야 합니다. 아래와 같이 id란에 컴포넌트의 아이디를 입력해 줍니다.

넥사크로 버튼 생성 - id 수정

 

4. 아래 그림처럼 버튼 테두리의 점을 클릭하여 크기 조절도 가능합니다.

넥사크로 버튼 생성 - 버튼 크기 조절

반응형

5. QuickView 실행을 통해 버튼이 정상적으로 만들어졌는지 확인해 줍니다. 상단 QuickView 버튼을 눌러도 되고 crtl + f6 을 눌러도 QuickView 가 실행됩니다. 

넥사크로 버튼 생성 - 버튼이 정상적으로 만들어진 모습

다음으로는 버튼에서 굉장히 많이 쓰이는 속성 2가지를 설명하겠습니다. 사실 이 속성은 버튼뿐만 아니라 다른 다양한 컴포넌트에 모두 해당되는 내용이니 꼭 알아두도록 합니다.

1. enable속성

enable 속성은 말그대로 활성화할지 비활성화할지를 조절하는 속성입니다. 보통 사용자 권한과 많이 엮여서 사용됩니다. 권한이 있는 사람에게는 enable = true 속성을 줘서 버튼 클릭이 가능하게 하고 권한이 없는 사람에게는 enable = false 속성을 줘서 버튼 클릭을 불가능하게 합니다. 해당 속성은 아래와 같이 부여합니다

넥사크로 버튼 생성 - enable 속성 주기

Enable 속성에 우측 아래 화살표 방향 버튼을 누르면 true와 false를 선택할 수 있는데 false를 누르면 왼쪽 그림처럼 주문등록 버튼이 비활성화됩니다. true로 바꾸면 원래대로 돌아옵니다.

 

2. visible 속성

visible 속성은 사용자 눈에 보이게 할 것이냐 안 보이게 할 것이냐에 관한 속성입니다. visible = false를 할 경우 안보이고 visible = true를 할 경우 버튼이 보입니다. 아래와 같이 편집할 수 있습니다.

넥사크로 버튼 생성 - visible 속성 편집

false를 입력 후 저장한 다음 QuickView 실행시켜 확인해 줍니다. 아래와 같이 버튼이 안 보이는 것을 확인 할 수 있습니다.

넥사크로 버튼 생성 - visible 속성 확인

네 이상으로 넥사크로 N에서 버튼 컴포넌트를 만들고 Visible, Enable 속성을 주고 ID 명명 규칙에 대해서 알아 봤습니다.

여러분들에게 작은 도움이 됐길 바라며 다음 시간에도 더 좋은 글로 찾아 뵙겠습니다.

 

★킷도우 웹 개발 기초 강의가 오픈됐습니다!

궁금하신 분들은 아래 링크를 참고해 주세요~

https://kitdow.tistory.com/31

킷도우의 첫 강의! - 웹 개발 기초 (프론트엔드, 백엔드, DB까지 총 10시간에 걸쳐 주문 게시판 만

 

감사합니다!