Snippet¶
Morpheus IDE에서는 M Framework 에서 제공하는 API와 UI Component를 빠르고 쉽게 적용하기 위한 Snippet 기능을 제공 합니다. M Framework 에서 제공하는 Snippet 기능을 이용하기에 앞서 M-SDK Manager를 이용하여 Snippet 관련 리소스를 설치합니다.
<그림 3-15-1 Snippet Resource 설치>¶
IDE 상단에 있는 M-SDK Manager 버튼 클릭하여 M-SDK Manager를 열고 Snippet 아이템을 모두 선택하신 후 리소스 설치 버튼을 클릭합니다.
Snippet 기능은 API와 Component로 나뉘어져 있습니다. API/Component View를 통해 각각의 기능을 이용할 수 있는데 해당 View는 IDE 에디터 영역 우측에 위치하지만 만약 View가 없는 경우 IDE 상단 Window -> Show View -> Other메뉴를 선택한 후 나오는 Show View 대화상자에서 Morpheus -> API/Component를 선택하면 View가 열리게 됩니다.
<그림 3-15-2 Show View 대화상자>¶
API 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 View가 활성화 됩니다.
Component View는 HTML(.html) 파일을 지원합니다. 평소에는 비활성화 되어 있지만 MUI Kit HTML Editor를 통해 HTML 파일이 열리는 경우 활성화 됩니다.
<그림 3-15-3. Snippet(API) View 대화상자>¶
API/Component View 상단에는 액션 버튼들이 위치해 있습니다. 각 액션 버튼들에 대한 기능은 다음과 같습니다.
트리를 모두 펼칩니다.¶
트리를 모두 닫습니다.¶
선택된 Snippet 아이템을 에디터에 삽입합니다.¶
새로운 그룹을 생성하는 설정 위저드를 호출 합니다.¶
선택된 Snippet 아이템을 수정합니다. 해당 아이템이 사용자 수정 권한이 있을 경우에만 이 액션이 활성화 됩니다.¶
선택된 Snippet 아이템을 삭제합니다. 해당 아이템이 사용자 수정 권한이 있을 경우에만 이 액션이 활성화 됩니다.¶
이미 작성되어 파일을 선택하여 Snippet Group을 추가 합니다. 이때 선택되는 파일의 확장자는 xml 이어야 하며 미리 정해져 있는 xml 구조에 맞게 작성되어 있어야 합니다, (이 기능을 통해 추가되는 그룹은 Custom 속성을 가지며, 수정이 가능한 Group 속성을 갖게 됩니다.)¶
M-SDK Manager를 통해서 설치된(Custom 속성이 아닌 그룹) Snippet Group을 선택된 경로로 내보냅니다.¶
Snippet View의 아이템 리스트를 갱신합니다. (만약 Snippet 리소스를 설치하였는데도 불구하고 API View에 아무런 아이템 추가되지 않을 경우 Refresh 버튼을 클릭하여 리스트를 갱신합니다.)¶
API/Component 삽입¶
API/Component View가 활성화 된 상태에서 API/Component를 코드에 삽입하기 위해 아래 3가지 방법을 제공하고 있습니다.
① Double Click
<그림 3-15-4 API 삽입(Double Click)> HTML Source에서 컴포넌트를 삽입할 위치에 커서를 위치시킨 후 API/Component View 에서 삽입할 API를 더블 클릭합니다.
② Popup Menu
<그림 3-15-5 API 삽입(Popup Menu)> HTML Source에서 컴포넌트를 삽입할 위치에 커서를 위치시킨 후 API/Component View 에서 마우스 우 클릭 후 Insert 메뉴를 선택합니다.
③ Drag&Drop
<그림 3-15-6 API 삽입(Drag&Drop)>
API/Component View에서 삽입할 API를 Drag 하여 HTML Source의 삽입할 위치에 Drop 합니다. 위 방법 중 하나의 방법으로 Insert 명령을 내리면 삽입되는 API/Component의 종류에 따라서 각기 다른 삽입 Wizard가 나타나게 됩니다.
API 삽입
<그림 3-15-7 Insert API Wizard>
API를 삽입할 경우 그림 3-15-7과 같이 Insert API Wizard가 나타납니다. Insert API Wizard 에서는 직접 API 수정할 수 있는 편집기능을 제공합니다. 코드 구성 완료 후 Finish 버튼을 누르면 MUI Kit HTML Editor의 커서가 위치하는 곳으로 API 코드가 삽입되고 이 API가 참조하고 있는 리소스와 JS파일이 프로젝트로 복사됩니다.
Component 삽입
<그림 3-15-8 Insert Component Wizard>
Component를 삽입할 경우 그림 3-15-8과 같이 Insert Component Wizard가 나타납니다. Insert Component 대화 상자 왼쪽에는 UI Component의 설명 또는 설정 컨트롤이 위치합니다. (만약 해당 Component 에 대한 설명이나 설정 컨트롤이 존재하지 않는 경우 왼쪽 화면은 나타나지 않게 됩니다.) 오른쪽 화면은 Preview, HTML, Script 탭으로 구성됩니다. Preview 화면은 해당 UI Component 가 화면에 삽입될 때 그려질 전체 화면을 보여줍니다. (삽입되는 UI Component는 기존화면과 구분하기 위해 빨간 선으로 표시 됩니다.)
HTML 탭에는 UI Component의 HTML 코드가 나타나고 Script 탭에는 UI Component의 Script 코드가 나타납니다. 모든 설정 완료 후 Finish Finish 버튼을 누르면 MUI Kit HTML Editor의 커서가 위치하는 곳으로 UI Component의 HTML, Script 코드가 삽입되고 이 API가 참조하고 있는 리소스와 JS파일이 프로젝트로 복사됩니다.
Group 관리¶
API Group 추가¶
<그림 3-15-10 New API Group Wizard>¶
New API Group Wizard 가 호출되고 나면 아래의 항목들을 설정합니다.
Name : 새로운 그룹의 이름을 입력합니다.(필수)
Description : 새로운 그룹의 설명을 입력합니다.
Location : 새로운 그룹의 정보가 저장될 파일을 지정합니다. 직접 위치를 입력하거나 Browser 버튼을 눌러 위치를 설정 합니다. 여기서 설정되는 파일은 .xml 확장자를 가져야 합니다. (필수)
Resource : 이 그룹의 API들이 공통적으로 가지고 있어야 하는 리소스 폴더를 설정합니다. 이 그룹에 소속된 API가 프로젝트에 추가될 때 여기에 설정된 리소스들은 프로젝트로 자동 복사됩니다. Resource 항목을 추가한 후 위로 아래로 버튼을 이용하여 우선순위를 설정할 수 있습니다.
Dependencies : 이 그룹의 API들이 공통적으로 가지고 있어야 하는 JS 파일들을 지정합니다. 이 그룹에 소속된 API가 프로젝트에 추가될 때 여기에 설정된 JS 파일은 프로젝트로 자동 복사되며 HTML 코드에는 이 JS 파일을 참조하는 코드가 자동 생성됩니다. Dependencies 항목을 추가한 후 위로 아래로 버튼을 이용하여 우선순위를 설정할 수 있습니다.
Component Group 추가¶
<그림 3-15-11 New Component Group Wizard>¶
New Component Group Wizard 가 호출되고 나면 아래의 항목들을 설정합니다. Component Group은 API 그룹에서 View 항목이 추가 되었습니다.
Name : 새로운 그룹의 이름을 입력합니다.(필수)
Description : 새로운 그룹의 설명을 입력합니다.
Location : 새로운 그룹의 정보가 저장될 파일을 지정합니다. 직접 위치를 입력하거나 Browser 버튼을 눌러 위치를 설정 합니다. 여기서 설정되는 파일은 .xml 확장자를 가져야 합니다. (필수)
Resource : 이 그룹의 API들이 공통적으로 가지고 있어야 하는 리소스 폴더를 설정합니다. 이 그룹에 소속된 API가 프로젝트에 추가될 때 여기에 설정된 리소스들은 프로젝트로 자동 복사됩니다. Resource 항목을 추가한 후 위로 아래로 버튼을 이용하여 우선순위를 설정할 수 있습니다.
Dependencies : 이 그룹의 API들이 공통적으로 가지고 있어야 하는 JS 파일들을 지정합니다. 이 그룹에 소속된 API가 프로젝트에 추가될 때 여기에 설정된 JS 파일은 프로젝트로 자동 복사되며 HTML 코드에는 이 JS 파일을 참조하는 코드가 자동 생성됩니다. Dependencies 항목을 추가한 후 위로 아래로 버튼을 이용하여 우선순위를 설정할 수 있습니다.
View : UI Component가 코드에 삽입될 때 Insert Component에서 Preview 를 위한 참조 파일을 지정합니다. (여기서 설정되는 정보는 실제 컴포넌트가 프로젝트에 삽입될 때 반영되지 않습니다.)
모든 설정을 마친 후 Finish 버튼을 누르면 새로운 그룹이 생성됩니다.
<그림 3-15-12 새롭게 추가된 Group>¶
새롭게 생성된 그룹은 사용자 수정권한을 가지게 되어 M-SDK Manager로 추가된 그룹들과 아이콘 모양이 다른 것을 확인 할 수 있습니다.
Group 수정¶
Group 삭제¶
Group 가져오기¶
Group 내보내기¶
Snippet Item 관리¶
Snippet Item 추가
API 추가
<그림 3-15-21 New API Menu>¶
API View에서 사용자 수정권한이 있는 그룹에 마우스 우 클릭 후 New -> New API 메뉴를 선택합니다. (사용자 수정 권한이 없는 그룹은 New API 메뉴가 비활성화 됩니다.)
<그림 3-15-22 New API Wizard(1)>¶
New API Wizard 첫 번째 페이지가 나타나면 아래의 항목들을 설정합니다.
Name : 새로운 API의 이름을 입력합니다.(필수)
Category : API의 Category를 입력합니다. Category는 그룹내의 소분류가 됩니다.
Description : 새로운 그룹의 설명을 입력합니다.
Resource : 새로운 API가 가지고 있어야 하는 리소스 폴더를 설정합니다. 해당 API가 프로젝트에 추가될 때 여기에 설정된 리소스들과 이 API가 소속되는 그룹에서 설정된 리소스들이 프로젝트로 자동 복사됩니다. Resource 항목을 추가한 후 위로 아래로 버튼을 이용하여 우선순위를 설정할 수 있습니다.
Dependencies : 새로운 API가 가지고 있어야 하는 JS 파일들을 지정합니다. 해당 API가 프로젝트에 추가될 때 여기에 설정된 JS 파일들과 이 API가 소속되는 그룹에서 설정된 Dependencies 항목들이 프로젝트로 자동 복사되며 HTML 코드에는 이 JS 파일을 참조하는 코드가 자동 생성됩니다. Dependencies 항목을 추가한 후 위로 아래로 버튼을 이용하여 우선순위를 설정할 수 있습니다.
첫 번째 페이지의 설정이 끝났으면 Next 버튼을 눌러 다음 페이지로 이동합니다.
<그림 3-15-23 New API Wizard(2)>¶
두 번째 페이지에서는 API의 스크립트 코드를 입력합니다. 모든 설정이 끝난 후 Finish 버튼을 누르면 설정된 정보가 적용된 API가 생성됩니다.
Component 추가
<그림 3-15-24 New Component Menu>¶
Component View에서 사용자 수정권한이 있는 그룹에 마우스 우 클릭 후 New -> New Component 메뉴를 선택합니다. (사용자 수정 권한이 없는 그룹은 New Component 메뉴가 비활성화 됩니다.)
<그림 3-15-25 New Component Wizard(1)>¶
New Component Wizard 첫 번째 페이지가 나타나면 아래의 항목들을 설정합니다.
Name : 새로운 UI Component 의 이름을 입력합니다.(필수)
Category : UI Component의 Category를 입력합니다. Category는 그룹내의 소분류가 됩니다.
Description : 새로운 그룹의 설명을 입력합니다. Description 타입으로 HTML과 Text를 선택할 수 있습니다. 설명이 간단히 되는 경우엔 Text를 선택하고 설명을 입력하고 설명이 복잡하거나 디자인이 들어가야 하는경우 HTML을 선택하고 HTML 태그를 입력합니다.
Resource : 새로운 UI Component가 가지고 있어야 하는 리소스 폴더를 설정합니다. 해당 API가 프로젝트에 추가될 때 여기에 설정된 리소스들과 이 UI Component가 소속되는 그룹에서 설정된 리소스들이 프로젝트로 자동 복사됩니다. Resource 항목을 추가한 후 위로 아래로 버튼을 이용하여 우선순위를 설정할 수 있습니다.
Dependencies : 새로운 UI Component가 가지고 있어야 하는 JS, Font 파일을 지정합니다. 해당 UI Component가 프로젝트에 추가될 때 여기에 설정된 JS, Font 파일들과 이 UI Component가 소속되는 그룹에서 설정된 Dependencies 항목들이 프로젝트로 자동 복사되며 HTML 코드에는 이 JS, Font 파일을 참조하는 코드가 자동 생성됩니다. Dependencies 항목을 추가한 후 위로 아래로 버튼을 이용하여 우선순위를 설정할 수 있습니다.
View : UI Component가 코드에 삽입될 때 Insert Component에서 Preview 를 위한 참조 파일을 지정합니다. (여기서 설정되는 정보는 실제 컴포넌트가 프로젝트에 삽입될 때 반영되지 않습니다.)
첫 번째 페이지의 설정이 끝났으면 Next 버튼을 눌러 다음 페이지로 이동합니다.
<그림 3-15-26 New Component Wizard(2)>¶
두 번째 페이지에서는 UI Component의 HTML 태그와 스크립트 코드를 입력합니다. 모든 설정이 끝난 후 Finish 버튼을 누르면 설정된 정보가 적용된 UI Component 가 생성됩니다.
