{{ PreviousNext("Getting started with XULRunner", "Dialogs in XULRunner") }}
XULRunner을 이용하여 간단한 데스크톱 애플리케이션을 만드는 방법을 알아보겠습니다. 앞 장에서 우리는 XULRunner를 설치하고 기본적인 테스트 프로그램을 만들어 보았습니다. 이번에는 사용자 인터페이스를 갖는 프로그램을 만들어 보겠습니다.
각 윈도우나 대화창은 각 XUL 파일로 만듭니다. XUL 파일 상위에는 우리가 사용할 CSS와 DTD를 선언하게 됩니다. <window>는 기본 창을 만드는 요소 입니다. 콘트롤에 대한 제목과 캡션, 창의 가로 및 세로폭을 정하는 속성을 가지고 있습니다. 아마 대부분은 아시겠지만 XUL 파일 하나 당 하나의 <window> 요소를 가집니다. 예를 들어,
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://basicapp/skin/main.css" type="text/css"?>
<!DOCTYPE window SYSTEM "chrome://basicapp/locale/main.dtd">
<window id="main"
title="&title;"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script src="main.js"/>
...
</window>
이제 CSS와 DTD에 대해 알아보겠습니다. CSS는 HTML에서 사용하는 방법과 같이 각 요소에 대한 디자인 및 형식을 지정해 줍니다. DTD는 XUL파일에서 언어별 지역화를 위해 바로 저장할 수 없는 제목이나 라벨 같은 문자열을 참조하는 방식으로 사용합니다. 메시지를 변경하거나 지역화 작업에 용이 합니다. 예제에서 창 title을 표시하는 방법을 참고하세요. 또한, <script> 요소를 이용하여 XUL 파일내의 동작을 제어해 줍니다. CSS, DTD, 자바스크립트를 XUL 파일에 기본적으로 삽입하는 것은 가장 기본적인 코드입니다.
XUL 애플리케이션을 실행하려면 XULRunner가 윈도우 기본 아이콘을 제공 합니다만 원하는 아이콘으로 바꾸려면 윈도우 아이콘을 참고해서 바꿀 수 있습니다.
대부분 데스크톱 애플리케이션은 자체 폼 도구를 가지고 있어서 메뉴나 툴바 구조를 추가하고 변경하는 데 매우 어렵습니다. 하지만 XUL에서는 쉽게 요소만 추가하면 만들어 낼 수 있습니다.
아래는 XUL 메뉴와 툴바를 만드는 아주 간단한 예제 코드입니다.
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://basicapp/skin/main.css" type="text/css"?>
<!DOCTYPE window SYSTEM "chrome://basicapp/locale/main.dtd">
<window id="main"
title="&title;"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script src="main.js"/>
<toolbox>
<menubar id="menubar">
<menu id="file-menu" label="&file;">
<menupopup id="file-popup">
<menuitem label="&file.new'" oncommand="doFileNew();"/>
<menuitem label="&file.open;" oncommand="doFileOpen();"/>
<menuitem label="&file.save;" oncommand="doFileSave();"/>
<menuseparator/>
<menuitem label="&file.exit;" oncommand="doFileExit();"/>
</menupopup>
</menu>
<menu id="edit-menu" label="&edit;">
<menupopup id="edit-popup">
<menuitem label="&edit.undo;" oncommand="doEditUndo();"/>
<menuitem label="&edit.redo;" oncommand="doEditRedo();"/>
</menupopup>
</menu>
</menubar>
<toolbar id="main-toolbar">
<toolbarbutton id="open" label="&file.open;" oncommand="doFileOpen();"/>
<toolbarbutton id="save" label="&file.save;" oncommand="doFileSave();"/>
</toolbar>
</toolbox>
...
</window>
각 메뉴와 툴바의 라벨을 표시하기 위해 엔티티-참조를 사용했고, oncommand 이벤트는 HTML에서 onclick를 쓰는 것 처럼 자바 스크립트를 참조합니다. XUL에서는 <var>open</var>나 <var>save</var> 같은 메뉴와 툴바의 이벤트 핸들러와 명령 수행을 위한 방식을 가지고 있습니다.
<commandset> <command id="cmd_open" label="&file.open;" oncommand="doFileOpen();"/> <command id="cmd_save" label="&file.save;" oncommand="doFileSave();"/> </commandset> ... <menuitem command="cmd_open"/> <menuitem command="cmd_save"/> ... <toolbarbutton id="open" command="cmd_open"/> <toolbarbutton id="save" command="cmd_save"/> ...
또한, CSS 파일로 툴바 버튼에 그림을 추가할 수 있습니다. XUL 파일내에 아이콘 파일이 있으면 CSS로 다음과 같이 표시할 수 있습니다.
/* global skin --------------------------------------------------- */
@import url(chrome://global/skin/);
/* toolbar ------------------------------------------------------- */
#open {
list-style-image: url(chrome://basicapp/skin/open.png);
-moz-box-orient: vertical;
}
#save {
list-style-image: url(chrome://basicapp/skin/save.png);
-moz-box-orient: vertical;
}
물론 PNG 파일을 애플리케이션에 포함해서 배포해야 합니다.
지금까지 아주 간단한 XUL 사용자 인터페이스를 살펴 보았습니다. 다음 장에서는 XUL Runner에서 UI를 생성하는 과정을 계속 살펴 보겠습니다.
{{ PreviousNext("Getting started with XULRunner", "Dialogs in XULRunner") }}