MUI Kit HTML Editor¶
IDE에서는 MUI Kit 컴포넌트 삽입과 HTML 편집을 지원하기 위해 MUI Kit HTML Editor를 제공합니다. Project Explorer에서 HTML 파일을 더블 클릭하면 MUI Kit HTML Editor를 통해 파일이 열리게 됩니다. 만약 MUI Kit HTML Editor가 아닌 다른 Editor로 열린다면 Open with -> MUI Kit HTML Editor 메뉴를 이용해 Editor를 선택할 수 있습니다.
<그림 3-54 MUI Kit HTML Editor 열기>¶
최초 MUI Kit HTML Editor가 열리면 그림 3-55와 같이 오른쪽은 HTML이 브라우저를 통해 보이게 될 Visual 화면이 나타나고 오른쪽에는 Text 에디터를 통해 HTML Source를 직접 수정할 수 있습니다. Visual 화면과 Source화면 사이에 있는 공간을 드레그 하여 화면의 넓이를 조정할 수 있으며, < 버튼과 > 버튼을 누르면 Visual화면 또는 Source 화면을 가릴 수 있게 됩니다.
<그림 3-55 MUI Kit HTML Editor>¶
만약 Visual 화면이 필요하지 않다면 Editor 하단 Source 탭을 눌러 Source 전체 화면으로 전환 하실 수 있습니다. 에디터 오른쪽 상단에는 에디터를 설정하기 위한 액션 버튼들이 위치해 있습니다. 각 액션 버튼들에 대한 기능은 다음과 같습니다.
MUI Kit HTML Editor와 연동하여 UI Framework에서 제공하는 컴포넌트를 삽입/수정하기 위해서 Palette와 Properties를 이용하실 수 있습니다. 각 기능을 이용하기에 앞서서 M-SDK Manager에서 UI Framework 항목을 설치하셔야 합니다.
<그림 3-56. UI Framework 설치>¶
IDE 상단에 있는 M-SDK Manager 버튼 클릭하여 M-SDK Manager를 열고 UI Framework 아이템을 모두 선택하신 후 설치 버튼을 클릭합니다.
Palette¶
Palette는 MUI Kit에서 제공하는 컴포넌트를 설정하고 HTML안에 삽입하는 기능을 가지고 있습니다. Palette는 에디터 영역 오른쪽에 위치하고 있지만 없는 경우 IDE 상단 Window -> Show View -> Other메뉴를 선택한 후 나오는 Show View 대화상자에서 General -> Palette를 선택하면 Palette가 열리게 됩니다.
<그림 3-57 Show View 대화상자>¶
Palette는 평소에는 비활성화 되어 있지만 MUI Kit HTML Editor를 통해 HTML 파일이 열리면 활성화 그림 3-58과 같이 활성화 됩니다.
<그림 3-58 Palette>¶
Palette에는 4개의 카테고리를 제공하며 카테고리를 선택하면 해당 카테고리에서 제공하는 컴포넌트를 확인하실 수 있습니다.
<그림 3-59 컴포넌트 삽입>¶
Palette를 이용해 HTML에 컴포넌트를 삽입하기 위해서는 HTML Source에서 컴포넌트를 삽입할 위치에 커서를 위치시킨 후 Palette에서 삽입할 컴포넌트를 클릭합니다.
<그림 3-60 컴포넌트 설정 위저드>¶
Palette에서 컴포넌트를 클릭하면 그림 3-60과 같은 컴포넌트 설정 위저드가 실행 됩니다. 위저드 왼쪽에는 선택된 컴포넌트의 옵션을 설정할 수 있는 설정 항목들이 나타나고 위저드 오른쪽에는 설정된 정보를 바탕으로 생성된 HTML Source code와 Visual 화면이 나타납니다. 설정 항목들을 변경되는 경우 Source와 Visual 화면도 자동으로 갱신되어 변경 사항을 바로 확인 하실 수 있습니다. 왼쪽 설정항목 하단의 Add references to JS/CSS를 선택하시면 이 컴포넌트를 구성하기 위한 JS/CSS가 다음과 같이 프로젝트에 적용됩니다.
BootStrap, MUI Kit : 컴포넌트 구성 파일이 프로젝트 내부로 복사되며 Local 경로의 JS/CSS가 Source code에 추가됩니다.
JQuery Mobile, HTML5 : Web에 올라가있는 JS/CSS URL이 Source code에 추가 됩니다.
컴포넌트 설정 위저드 하단의 Next 버튼이 활성화 된 경우 컴포넌트에 Script를 적용할 수 있습니다.(만약 컴포넌트에 적용 가능한 Script가 없는 경우 Next 버튼이 활성화 되지 않습니다.) Next 버튼을 눌러 스크립트 삽입 페이지로 이동하면 아래와 같은 화면을 확인 하실 수 있습니다.
<그림 3-61 Script 설정 위저드>¶
왼쪽 Script 목록에서 추가하고자 하는 Script 항목을 채크하면 오른쪽 Source View 에서 추가될 스크립트 코드를 확인하실 수 있습니다. 모든 설정을 마친 후 Finish 버튼을 클릭하면 선택한 컴포넌트 코드와 Script 코드가 삽입됩니다.
Properties¶
MUI Kit HTML Editor에서 이미 삽입된 컴포넌트를 수정하기 위해 Properties 기능을 제공합니다. Properties는 IDE 하단에 위치하지만 만약 없는 경우 IDE 상단 Window -> Show View -> Other메뉴를 선택한 후 나오는 Show View 대화상자에서 General -> Properties를 선택하면 Properties가 열리게 됩니다.
<그림 3-62 Show View 대화상자>¶
Properties는 평소에는 비활성화 되어 있지만 MUI Kit HTML Editor에서 태그가 선택된 경우 해당 태그를 지원하는 카테고리가 탭으로 구성되며 그림 3-62와 같이 활성화 됩니다.
<그림 3-63 Properties 활성화>¶
각 카테고리 탭을 선택하면 해당 카테고리에서 지원하는 컴포넌트 설정 항목들이 나타나며 설정을 을 변경하는 경우 변경 내용이 MUI Kit HTML Editor에 즉각 반영됩니다.
<그림 3-64 Properties - Script >¶
컴포넌트 태그 외에 컴포넌트를 지원하는 Script를 삽입하기 위해서는 위 그림과 같이 Script 탭을 선택합니다. 왼쪽에는 MUI Kit HTML Editor에서 선택된 컴포넌트에 적용 가능한 Script 목록이 나타나고 오른쪽에는 Script 목록에서 선택된 Script 소스를 확인 할 수 있습니다. 추가하려는 Script를 선택한 후 Script 목록 하단에 있는 Add 버튼을 누르면 선택된 Script가 MUI Kit HTML Editor로 삽입 됩니다.