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
|
---
title: Dialogs in XULRunner
slug: Archive/Mozilla/XULRunner/Dialogs_in_XULRunner
tags:
- XUL
- XULRunner
translation_of: Archive/Mozilla/XULRunner/Dialogs_in_XULRunner
---
<p></p><div class="prevnext" style="text-align: right;">
<p><a href="/ko/docs/Windows_and_menus_in_XULRunner" style="float: left;">« 이전</a><br></p>
</div><p></p>
<p><a href="ko/Windows_and_menus_in_XULRunner">이전 기사에서는</a> 창, 메뉴, 도구바를 만드는데 사용되는 간단한 XUL에 대해 알아봤습니다. 이번에는 사용자 정의 대화상자와 표준 운영체제(공통) 대화상자에 대해 알아보겠습니다. 대화상자는 데스크탑 응용 프로그램를 구성하는 기본 요소들입니다. 어떤 종류의 대화상자는 너무 자주 사용되므로 OS에서 기본적인 구현을 제공하기도 합니다. 파일 열기와 저장 대화상자가 대표적인 예입니다. 가능하면 응용 프로그램간의 사용자가 느끼는 일관된 체험(일관성)을 유지하기 위해 제공되는 "기본(native)" 대화상자를 재활용하는 것이 좋습니다.</p>
<h2 id=".EC.82.AC.EC.9A.A9.EC.9E.90_.EC.A0.95.EC.9D.98_.EB.8C.80.ED.99.94.EC.83.81.EC.9E.90" name=".EC.82.AC.EC.9A.A9.EC.9E.90_.EC.A0.95.EC.9D.98_.EB.8C.80.ED.99.94.EC.83.81.EC.9E.90">사용자 정의 대화상자</h2>
<p>XUL로 대화상자를 만드는 것은 윈도우를 만드는 것과 아주 유사합니다. 대화상자는 독립된 XUL 파일에 정의됩니다. XUL에서는 대화상자의 컨테이너로 동작하는 <code><a href="/ko/docs/Mozilla/Tech/XUL/dialog" title="dialog">dialog</a></code> 요소를 제공합니다. 대화상자 XUL 파일은 윈도우와 마찬가지로 DTD, CSS, JavaScript를 포함할 수 있습니다. 아래는 XUL 대화상자의 예제입니다.</p>
<pre><?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<dialog id="myDialog" title="My Dialog"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
onload="window.sizeToContent();"
buttons="accept,cancel"
buttonlabelaccept="Set Favorite"
buttonaccesskeyaccept="S"
ondialogaccept="return doSave();"
buttonlabelcancel="Cancel"
buttonaccesskeycancel="n"
ondialogcancel="return doCancel();">
<script>
function doSave(){
//doSomething()
return true;
}
function doCancel(){
return true;
}
</script>
<dialogheader title="My dialog" description="Example dialog"/>
<groupbox flex="1">
<caption label="Select favorite fruit"/>
<radiogroup>
<radio id="1" label="Oranges because they are fruity"/>
<radio id="2" selected="true" label="Strawberries because of color"/>
<radio id="3" label="Bananna because it pre packaged"/>
</radiogroup>
</groupbox>
</dialog>
</pre>
<p>XUL window 요소는 대화상자를 여는데(open) 사용되는 <code><a href="ko/DOM/window.openDialog">window.openDialog()</a></code>라는 특별한 메소드를 가지고 있습니다. 다음은 대화상자를 여는데 사용되는 코드입니다.</p>
<pre class="eval">function openDialog() {
window.openDialog("<a class="external" rel="freelink">chrome://basicapp/content/dialog.xul</a>", "newdlg", "modal");
}
</pre>
<p>Windows 200에서 위 코드로 열린 대화상자는 다음과 같으며, 다른 운영체제도 비슷한 모양세일 것입니다.</p>
<p><img alt="Image:XULDialogExample.png"></p>
<p><code><a href="/ko/docs/Mozilla/Tech/XUL/dialog" title="dialog">dialog</a></code> 요소에서 나의 눈을 사로잡은 첫번째는 버튼과 관련된 속성입니다. 개발자들이 좀 더 쉽게 접근하고 사용자들에게 일관성을 제공하기 위해 XUL은 핵심적인 대화상자 버튼("확인", "취소", "도움말" 등)들을 자동으로 만들고 배치해주는 메커니즘을 제공하고 있습니다.</p>
<p>개발자는 필요한 버튼들을 명시하고 각 버튼에 대한 제목과 단축키 그리고 버튼이 눌러졌을 때 호출될 JavaScript 함수를 지정하기만 하면 됩니다. XUL이 대화상자내에서 버튼에 대한 위치와 스타일을 알아서 처리해 줍니다. 이러한 방식은, 운영체제들마다 대화상자 내 버튼의 위치가 고유의 컨벤션을 가지고 있다는 점을 생각해 보면, 크로스 플랫폼(cross-platform) 응용 프로그램을 개발하는데 있어 아주 좋은 환경을 제공해 준다고 할 수 있습니다.</p>
<p>아래는 <code><a href="/ko/docs/Mozilla/Tech/XUL/dialog" title="dialog">dialog</a></code>에서 버튼과 관련된 속성들 중 일부 입니다. 도 참조해 보세요.</p>
<dl>
<dt>
<code><a href="ko/XUL/Attribute/buttons">buttons</a></code></dt>
<dd>
대화상자에 표시할 버튼들의 쉼표로 분리된 목록(<code>accept</code>, <code>cancel</code>, <code>help</code>, <code>extra1</code>, and <code>extra2</code>).</dd>
<dt>
<code><a href="ko/XUL/Attribute/buttonlabelaccept">buttonlabelaccept</a></code></dt>
<dd>
확인 버튼을 위한 라벨, 다른 버튼에도 비슷한 속성이 존재합니다.</dd>
<dt>
<code><a href="ko/XUL/Attribute/buttonaccesskeyaccept">buttonaccesskeyaccept</a></code></dt>
<dd>
확인 버튼에 사용되는 단축키, 다른 버튼에도 비슷한 속성이 존재합니다.</dd>
<dt>
<code><a href="ko/XUL/Attribute/ondialogaccept">ondialogaccept</a></code></dt>
<dd>
확인 버튼이 눌러졌을때 실행될 JavaScript, 다른 버튼에도 비슷한 속성이 존재합니다.</dd>
</dl>
<p>XUL에는 다양한 종류의 입력 컨트롤들이 존재하며, 대화상자에도 사용할 수 있습니다. 이 후 기사에서는 현재 사용되고 있는, 그리고 앞으로 계획된 XUL 입력 컨트롤에 대해 좀 더 자세히 알아보려고 합니다. 제가 <code><span class="nowiki"><dialogheader></span></code>를 사용하게 될지 확실하지 않지만, 이 하나의 요소만으로 간단하게 헤더를 만드는데 시간을 줄여줍니다.</p>
<h2 id=".EA.B3.B5.ED.86.B5_.EB.8C.80.ED.99.94.EC.83.81.EC.9E.90" name=".EA.B3.B5.ED.86.B5_.EB.8C.80.ED.99.94.EC.83.81.EC.9E.90">공통 대화상자</h2>
<p>가장 자주 사용되는 공통 대화상자는 파일 열기와 저장하기 입니다. 예를 들어 윈도우즈에서는 예전부터 내장된 파일 열기와 저장하기 대화상자를 제공하고 있고 Mac 또한 마찬가지 있습니다. 이러한 것들은 응용 프로그램 개발자들을 편하게 해 줄 뿐만 아니라 사용자들에게도 일관성 있는 인터페이스를 제공하여 사용하기 쉽게 해 줍니다. XUL에서도 filepicker(Mozilla에서는 파일 열기와 저장하기 대화상자를 이렇게 부릅니다)의 네이티브 구현을 지원하고 있습니다. 향후 릴리즈에서는 사용자가 원한다면 설정을 통해 XUL filepicker로 전환할 수 있는 기능을 제공할 것입니다. XUL filepicker는 <a href="ko/XPCOM">XPCOM</a> 컴포넌트로, 사용 전에 다음과 같이 초기화되어야 합니다.</p>
<pre>function doFileOpen() {
/* See: http://developer.mozilla.org/en/docs/XUL_Tutorial:Open_and_Save_Dialogs */
var nsIFilePicker = Components.interfaces.nsIFilePicker;
var fp = Components.classes["@mozilla.org/filepicker;1"].createInstance(nsIFilePicker);
fp.init(window, "Open File", nsIFilePicker.modeOpen);
fp.appendFilters(nsIFilePicker.filterText | nsIFilePicker.filterAll);
var res = fp.show();
if (res == nsIFilePicker.returnOK) {
var thefile = fp.file;
alert(thefile.leafName);
// --- do something with the file here ---
}
}
</pre>
<p>XUL에서 현재는 다른 공통 대화상자를 제공하고 있지는 못합니다. 향후 버전에서는 수정될 것입니다. Firefox와 Thunderbird는 모두 페이지 설정과 인쇄 공통 대화상자를 지원하고 있습니다. 또한 XUL에서는 마법사를 만드는 요소를 지원합니다.</p>
<p>본 시리즈의 향후 기사들에서는 입력 컨트롤, 인쇄, 클립보드, XPCOM에 대해서 알아볼 것입니다.</p>
<h2 id=".EC.B0.B8.EA.B3.A0_.EB.AC.B8.EC.84.9C" name=".EC.B0.B8.EA.B3.A0_.EB.AC.B8.EC.84.9C">참고 문서</h2>
<ul>
<li><a href="ko/XUL/dialog">XUL:dialog</a></li>
<li><a class="external" href="http://www.xulplanet.com/tutorials/xultu/dialogs.html">Creating dialogs</a></li>
<li><a href="ko/XUL_Tutorial/Creating_Dialogs">XUL Tutorial:Creating Dialogs</a></li>
<li><a href="ko/NsIFilePicker">nsIFilePicker</a></li>
<li><a href="ko/XUL_Tutorial/Open_and_Save_Dialogs">XUL Tutorial:Open and Save Dialogs</a></li>
</ul>
<p></p><div class="prevnext" style="text-align: right;">
<p><a href="/ko/docs/Windows_and_menus_in_XULRunner" style="float: left;">« 이전</a><br></p>
</div><p></p>
<div class="originaldocinfo">
<h2 id=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C" name=".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>
|
