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를 설정할 수 있는 Preference를 엽니다.

Visual 화면의 위치를 변경합니다.(위 -> 오른쪽 -> 아래 -> 왼쪽)

선택된 태그의 경로를 나타내는 Tag bar를 보일지 말지 설정합니다.

Visual 화면을 갱신합니다.

Editor로 열려있는 HTML 파일을 웹 브라우저를 통해 엽니다.

HTML 수정 시 자동 갱신 여부를 설정합니다.

HTML 수정 시 자동 저장 여부를 설정합니다.

MUI Kit HTML Editor와 연동하여 UI Framework와 UI Template에서 제공하는 컴포넌트를 삽입하기 위해서 Palette를 이용하실 수 있습니다. 각 기능을 이용하기에 앞서서 M-SDK Manager에서 UI Framework와 UI Template 항목을 설치하셔야 합니다.

<그림 3-56. UI Framework, UI Template 설치>

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

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 컴포넌트 삽입>