Snippet

Morpheus IDE에서는 M Framework 에서 제공하는 API/Utils를 빠르고 쉽게 적용하기 위한 Snippet 기능을 제공 합니다. M Framework 에서 제공하는 Snippet 기능을 이용하기에 앞서 M-SDK Manager를 이용하여 Snippet 관련 리소스를 설치합니다.

../../../_images/3-15-1-new.png

<그림 3-15-1 Snippet 설치>

IDE 상단에 있는 M-SDK Manager 버튼 클릭하여 M-SDK Manager를 열고 Snippet 아이템을 모두 선택하신 후 리소스 설치 버튼을 클릭합니다.

Snippet 기능은 API와 Utils로 나뉘어져 있습니다. API/Utils View를 통해 각각의 기능을 이용할 수 있는데 해당 View는 IDE 에디터 영역 우측에 위치하지만 만약 View가 없는 경우 IDE 상단 Window -> Show View -> Other메뉴를 선택한 후 나오는 Show View 대화상자에서 Morpheus -> API/Utils를 선택하면 View가 열리게 됩니다.

../../../_images/3-15-2-new.png

<그림 3-15-2 Show View 대화상자>

API/Utils View는 JavaScript(.js) 파일과 HTML(.html) 파일을 지원합니다. 평소에는 비활성화 되어 있지만 MUI JavaScript Editor(.js) / MUI Kit HTML Editor(.html)를 통해 파일이 열리는 경우 그림 3-15-3과 같이 활성화 됩니다.

만약 JS 파일 또는 HTML 파일을 에디터로 열렸는데 API View가 활성화 되지 않는다면 .js/ .html 파일에 마우스 오른쪽 버튼을 클릭하고 Open With -> MUI JavaScript Editor / MUI Kit HTML Editor 를 선택해 해당 에디터가 열리면 API/Utils View가 활성화 됩니다.

../../../_images/3-15-3-new.png

<그림 3-15-3. API/Utils View 대화상자>

API/Utils View 상단에는 액션 버튼들이 위치해 있습니다. 각 액션 버튼들에 대한 기능은 다음과 같습니다.

../../../_images/i-3-15-21.gif

트리를 모두 닫습니다.

../../../_images/i-3-15-31.gif

선택된 Snippet 아이템을 에디터에 삽입합니다.

../../../_images/i-3-15-41.gif

새로운 그룹을 생성하는 설정 위저드를 호출 합니다.

../../../_images/i-3-15-51.png

선택된 Snippet 아이템을 수정합니다. 해당 아이템이 사용자 수정 권한이 있을 경우에만 이 액션이 활성화 됩니다.

../../../_images/i-3-15-61.gif

선택된 Snippet 아이템을 삭제합니다. 해당 아이템이 사용자 수정 권한이 있을 경우에만 이 액션이 활성화 됩니다.

../../../_images/i-3-15-71.gif

이미 작성되어 파일을 선택하여 Snippet Group을 추가 합니다. 이때 선택되는 파일의 확장자는 xml 이어야 하며 미리 정해져 있는 xml 구조에 맞게 작성되어 있어야 합니다, (이 기능을 통해 추가되는 그룹은 Custom 속성을 가지며, 수정이 가능한 Group 속성을 갖게 됩니다.)

../../../_images/i-3-15-81.gif

M-SDK Manager를 통해서 설치된(Custom 속성이 아닌 그룹) Snippet Group을 선택된 경로로 내보냅니다.

../../../_images/i-3-15-91.png

Snippet View의 아이템 리스트를 갱신합니다. (만약 Snippet 리소스를 설치하였는데도 불구하고 API View에 아무런 아이템 추가되지 않을 경우 Refresh 버튼을 클릭하여 리스트를 갱신합니다.)

API/Utils 삽입

API/Utils View가 활성화 된 상태에서 API/Utils를 코드에 삽입하기 위해 아래 3가지 방법을 제공하고 있습니다.

① Double Click

../../../_images/3-15-41.png

<그림 3-15-4 API/Utils 삽입(Double Click)> HTML Source에서 컴포넌트를 삽입할 위치에 커서를 위치시킨 후 API/Component View 에서 삽입할 API를 더블 클릭합니다.

② Popup Menu

../../../_images/3-15-51.png

<그림 3-15-5 API/Utils 삽입(Popup Menu)> HTML Source에서 컴포넌트를 삽입할 위치에 커서를 위치시킨 후 API/Component View 에서 마우스 우 클릭 후 Insert 메뉴를 선택합니다.

③ Drag&Drop

../../../_images/3-15-61.png

<그림 3-15-6 API/Utils 삽입(Drag&Drop)>

API/Utils View에서 삽입할 API를 Drag 하여 HTML Source의 삽입할 위치에 Drop 합니다. 위 방법 중 하나의 방법으로 Insert 명령을 내리면 삽입되는 API/Utils의 종류에 따라서 각기 다른 삽입 Wizard가 나타나게 됩니다.

  • API/Utils 삽입

../../../_images/3-15-71.png

<그림 3-15-7 Insert Utils Wizard>

../../../_images/3-15-8-new.png

<그림 3-15-8 Insert API Wizard>

API/Utils를 삽입할 경우 위 그림과 같이 Insert API/Utils Wizard가 나타납니다. Wizard 에서는 직접 API 수정할 수 있는 편집기능을 제공합니다. 코드 구성 완료 후 Finish 버튼을 누르면 MUI Kit HTML Editor의 커서가 위치하는 곳으로 코드가 삽입되고 이 API/Utils가 참조하고 있는 리소스와 JS파일이 프로젝트로 복사됩니다.

Group 관리

Group 생성

../../../_images/3-15-91.png

<그림 3-15-9 New Group Menu>

Group 추가

../../../_images/3-15-10-new.png

<그림 3-15-10 New API/Utils Group Wizard>

New API/Utils Group Wizard 가 호출되고 나면 아래의 항목들을 설정합니다.

  • Name : 새로운 그룹의 이름을 입력합니다.(필수)

  • Description : 새로운 그룹의 설명을 입력합니다.

모든 설정을 마친 후 Finish 버튼을 누르면 새로운 그룹이 생성됩니다.

../../../_images/3-15-121.png

<그림 3-15-12 새롭게 추가된 Group>

새롭게 생성된 그룹은 사용자 수정권한을 가지게 되어 M-SDK Manager로 추가된 그룹들과 아이콘 모양이 다른 것을 확인 할 수 있습니다.

Group 수정

../../../_images/3-15-131.png

<그림 3-15-13 Group 수정 메뉴>

사용자 수정권한이 있는 그룹에 마우스 우 클릭 후 Edit 메뉴를 선택합니다.(사용자 수정 권한이 없는 그룹은 Edit 메뉴가 비활성화 됩니다.)

../../../_images/3-15-141.png

<그림 3-15-14 Group 수정 대화상자>

선택된 Group의 설정 정보가 반영된 Group 설정 대화상자가 나타납니다. 그룹 수정을 마친 후 Finish 버튼을 누르면 수정내용이 적용됩니다.

Group 삭제

../../../_images/3-15-151.png

<그림 3-15-15 Group 삭제 메뉴>

사용자 수정권한이 있는 그룹에 마우스 우 클릭 후 Delete 메뉴를 선택합니다. (사용자 수정 권한이 없는 그룹은 Delete 메뉴가 비활성화 됩니다.)

../../../_images/3-15-161.png

<그림 3-15-16 Group 삭제 확인>

그룹 삭제 확인 대화상자가 나타나고 Yes를 누르면 해당 그룹이 삭제됩니다.

Group 가져오기

../../../_images/3-15-171.png

<그림 3-15-17 Import Menu>

API/Component View 에서 우 클릭 후 Import 메뉴를 선택합니다.

../../../_images/3-15-181.png

<그림 3-15-18 Snippet 가져오기 Wizard>

Snippet 가져오기 Wizard에서 미리 생성되어있는 Group 파일을(.xml) 선택한 후 Finish 버튼을 클릭하여 Group 가져오기를 마무리 합니다.

Group 내보내기

../../../_images/3-15-191.png

<그림 3-15-19 Export Menu>

API/Component View 에서 우 클릭 후 Export 메뉴를 선택합니다.

../../../_images/3-15-201.png

<그림 3-15-20 Snippet 내보내기 Wizard>

Snippet 내보내기 Wizard에서 Group 항목을 클릭하여 내보낼 그룹을 선택합니다. Location의 Browse버튼을 클릭하여 Group 파일이 저장될 위치를 선택한 후 Finish 버튼을 눌러 Group 내보내기를 마무리 합니다.

Snippet Item 관리

Snippet Item 추가

API 추가

../../../_images/3-15-211.png

<그림 3-15-21 New API Menu>

API View에서 사용자 수정권한이 있는 그룹에 마우스 우 클릭 후 New -> New API 메뉴를 선택합니다. (사용자 수정 권한이 없는 그룹은 New API 메뉴가 비활성화 됩니다.)

../../../_images/3-15-22-new.png

<그림 3-15-22 New API Wizard(1)>

New API Wizard 첫 번째 페이지가 나타나면 아래의 항목들을 설정합니다.

  • Name : 새로운 API의 이름을 입력합니다.(필수)

  • Category : API의 Category를 입력합니다. Category는 그룹내의 소분류가 됩니다.

  • Description : 새로운 그룹의 설명을 입력합니다.

첫 번째 페이지의 설정이 끝났으면 Next 버튼을 눌러 다음 페이지로 이동합니다.

../../../_images/3-15-23-new.png

<그림 3-15-23 New API Wizard(2)>

두 번째 페이지에서는 API의 함수 이름과 파라미터 정보를 입력합니다. 모든 설정이 끝난 후 Finish 버튼을 누르면 설정된 정보가 적용된 API가 생성됩니다.

Snippet Item 수정

../../../_images/3-15-271.png

<그림 3-15-27 Snippet Item 수정 메뉴>

사용자 수정권한이 있는 Snippet Item 에 마우스 우 클릭 후 Edit 메뉴를 선택합니다.(사용자 수정 권한이 없는 Snippet Item 은 Edit 메뉴가 비활성화 됩니다.) 선택된 Snippet Item 의 설정 정보가 반영된 API 또는 Component 설정 위저드가 나타납니다. 수정을 마친 후 Finish 버튼을 누르면 수정내용이 적용됩니다.

Snippet Item 삭제

../../../_images/3-15-281.png

<그림 3-15-28 Snippet Item 삭제 메뉴>

사용자 수정권한이 있는 그룹에 속한 Snippet Item에 마우스 우 클릭 후 Delete 메뉴를 선택합니다. (사용자 수정 권한이 없는 Snippet Item은 Delete 메뉴가 비활성화 됩니다.)

../../../_images/3-15-291.png

<그림 3-15-29 Snippet Item 삭제 확인>

Snippet Item 삭제 확인 대화상자가 나타나고 Yes를 누르면 Snippet Item 이 삭제됩니다.