blob: 81613a499d8c01af00c9b570e0e0dc1b6918de94 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
---
title: Windows and menus in XULRunner
slug: orphaned/Windows_and_menus_in_XULRunner
tags:
- XUL
- XULRunner
original_slug: Windows_and_menus_in_XULRunner
---
<p>
{{ PreviousNext("Getting started with XULRunner", "Dialogs in XULRunner") }}
</p><p><a href="ko/XULRunner">XULRunner</a>을 이용하여 간단한 데스크톱 애플리케이션을 만드는 방법을 알아보겠습니다. <a href="ko/Getting_started_with_XULRunner">앞 장</a>에서 우리는 XULRunner를 설치하고 기본적인 테스트 프로그램을 만들어 보았습니다. 이번에는 사용자 인터페이스를 갖는 프로그램을 만들어 보겠습니다.
</p>
<ul><li> 윈도우와 대화창
</li><li> 메뉴와 툴바
</li><li> 운영체제 기본 대화창
</li><li> 콘트롤 및 위젯
</li></ul>
<h2 id=".EC.9C.88.EB.8F.84.EC.9A.B0">윈도우</h2>
<p>각 윈도우나 대화창은 각 XUL 파일로 만듭니다. XUL 파일 상위에는 우리가 사용할 CSS와 DTD를 선언하게 됩니다. <code><span><window></span></code>는 기본 창을 만드는 요소 입니다. 콘트롤에 대한 제목과 캡션, 창의 가로 및 세로폭을 정하는 속성을 가지고 있습니다. 아마 대부분은 아시겠지만 XUL 파일 하나 당 하나의 <code><span><window></span></code> 요소를 가집니다. 예를 들어,
</p>
<pre><?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>
</pre>
<p>이제 CSS와 DTD에 대해 알아보겠습니다. CSS는 HTML에서 사용하는 방법과 같이 각 요소에 대한 디자인 및 형식을 지정해 줍니다. DTD는 XUL파일에서 언어별 지역화를 위해 바로 저장할 수 없는 제목이나 라벨 같은 문자열을 참조하는 방식으로 사용합니다. 메시지를 변경하거나 지역화 작업에 용이 합니다. 예제에서 창 title을 표시하는 방법을 참고하세요. 또한, <code><span><script></span></code> 요소를 이용하여 XUL 파일내의 동작을 제어해 줍니다. CSS, DTD, 자바스크립트를 XUL 파일에 기본적으로 삽입하는 것은 가장 기본적인 코드입니다.
</p><p>XUL 애플리케이션을 실행하려면 XULRunner가 윈도우 기본 아이콘을 제공 합니다만 원하는 아이콘으로 바꾸려면 <a href="ko/Window_icons">윈도우 아이콘</a>을 참고해서 바꿀 수 있습니다.
</p>
<h2 id=".EB.A9.94.EB.89.B4.EC.99.80_.ED.88.B4.EB.B0.94">메뉴와 툴바</h2>
<p>대부분 데스크톱 애플리케이션은 자체 폼 도구를 가지고 있어서 메뉴나 툴바 구조를 추가하고 변경하는 데 매우 어렵습니다. 하지만 XUL에서는 쉽게 요소만 추가하면 만들어 낼 수 있습니다.
</p><p>아래는 XUL 메뉴와 툴바를 만드는 아주 간단한 예제 코드입니다.
</p>
<pre><?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>
</pre>
<p>각 메뉴와 툴바의 라벨을 표시하기 위해 엔티티-참조를 사용했고, <code>oncommand</code> 이벤트는 HTML에서 <code>onclick</code>를 쓰는 것 처럼 자바 스크립트를 참조합니다. XUL에서는 <var>open</var>나 <var>save</var> 같은 메뉴와 툴바의 이벤트 핸들러와 명령 수행을 위한 방식을 가지고 있습니다.
</p>
<pre><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"/>
...
</pre>
<p>또한, CSS 파일로 툴바 버튼에 그림을 추가할 수 있습니다. XUL 파일내에 아이콘 파일이 있으면 CSS로 다음과 같이 표시할 수 있습니다.
</p><p><br>
</p>
<pre>/* 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;
}
</pre>
<p>물론 PNG 파일을 애플리케이션에 포함해서 배포해야 합니다.
</p><p>지금까지 아주 간단한 XUL 사용자 인터페이스를 살펴 보았습니다. 다음 장에서는 XUL Runner에서 UI를 생성하는 과정을 계속 살펴 보겠습니다.
</p>
<h2 id=".EC.B0.B8.EA.B3.A0_.EB.AC.B8.EC.84.9C">참고 문서</h2>
<ul><li> <a class="external" href="http://wiki.mozilla.org/XUL:Windows">XUL:Windows</a>
</li><li> <a href="ko/XUL_Tutorial/Creating_a_Window">XUL Tutorial:Creating a Window</a>
</li><li> <a href="ko/XUL/commandset">XUL:commandset</a>
</li><li> <a href="ko/XUL/command">XUL:command</a>
</li><li> <a href="ko/XUL_Tutorial/Commands">XUL Tutorial:Commands</a>
</li><li> <a href="ko/XUL_Tutorial/Simple_Menu_Bars">XUL Tutorial:Simple Menu Bars</a>
</li><li> <a href="ko/XUL_Tutorial/Toolbars">XUL Tutorial:Toolbars</a>
</li></ul>
<p>{{ PreviousNext("Getting started with XULRunner", "Dialogs in XULRunner") }}
</p>
<div class="originaldocinfo">
<h2 id=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C"> 원본 문서 </h2>
<ul><li> 저자: Mark Finkle
</li><li> 최종 수정일: October 2, 2006
</li></ul>
</div>
<div class="noinclude">
</div>
{{ languages( { "ja": "ja/Windows_and_menus_in_XULRunner" } ) }}
|
