이 페이지는 사용자 인터페이스를 만드는 모질라의 특별한 언어를 설명합니다.
모질라 브라우저에서 작동하는 간단한 예제를 만들어봅니다.
정보: 사용자 인터페이스
HTML가 사용자 인터페이스에 대한 지원를 하고 있으나, 하나의 독립적인 애플리케이션을 만드는데 필요한 모든 기능을 지원하고 있지는 못합니다.
모질라는 사용자 인터페이스를 만드는 특별한 언어를 제공함으로써 이런 제한사항을 극복하고 있습니다: 이 언어가 바로 XUL 입니다. (XML 사용자-인터페이스 언어(XML User-interface Language)로서 보통 " 줄(zool) "라고 읽습니다.)
XUL에는 많은 흔히사용되는 사용자 인터페이스가 내장되어 있습니다. 예를 들면, XUL은 대화창(dialogue), 위저드(wizard) 같은 특별한 윈도우들 뿐만아니라 상태 바(status bar), 메뉴, 툴 바(tool bar), 그리고 브라우저까지 제공합니다.
더 많은 특화된 기능들은 이 입문서에서 보아 온 다른 기술들(CSS 스타일, 자바스크립트 코드 그리고 XBL 바인딩)과 함께 XUL을 사용함으로써 만들어 낼 수 있습니다.
다른 XML-기반 언어들과 같이, XUL은 CSS 스타일 시트를 사용합니다.
| XUL 사용자 인터페이스에 관한 더 많은 정보를 원하시면, 이 위키의 XUL 페이지를 보세요. |
액션: XUL 예제
새로운 XUL 문서를 텍스트 파일 doc7.xul로 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="style7.css"?>
<!DOCTYPE window>
<window
xmlns="http&58;//www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
title="CSS Getting Started - XUL demonstration"
onload="init();">
<script type="application/x-javascript" src="script7.js"/>
<label class="head-1" value="XUL demonstration"/>
<vbox>
<groupbox class="demo-group">
<caption label="Day of week calculator"/>
<grid>
<columns>
<column/>
<column/>
</columns>
<rows>
<row>
<label class="text-prompt" value="Date:"
accesskey="D" control="date-text"/>
<textbox id="date-text" type="timed"
timeout="750" oncommand="refresh();"/>
</row>
<row>
<label value="Day:"/>
<hbox id="day-box">
<label class="day" value="Sunday" disabled="true"/>
<label class="day" value="Monday" disabled="true"/>
<label class="day" value="Tuesday" disabled="true"/>
<label class="day" value="Wednesday" disabled="true"/>
<label class="day" value="Thursday" disabled="true"/>
<label class="day" value="Friday" disabled="true"/>
<label class="day" value="Saturday" disabled="true"/>
</hbox>
</row>
</rows>
</grid>
<hbox class="buttons">
<button id="clear" label="Clear" accesskey="C"
oncommand="clearDate();"/>
<button id="today" label="Today" accesskey="T"
oncommand="setToday();"/>
</hbox>
</groupbox>
<statusbar>
<statusbarpanel id="status"/>
</statusbar>
</vbox>
</window>
새로운 CSS 파일 style7.css을 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:
/*** XUL demonstration ***/
window {
-moz-box-align: start;
background-color: -moz-dialog;
font: -moz-dialog;
padding: 2em;
}
.head-1 {
font-weight: bold;
font-size: 200%;
padding-left: 5px;
}
/* the group box */
.demo-group {
padding: 1em;
}
.demo-group grid {
margin-bottom: 1em;
}
.demo-group column {
margin-right: .5em;
}
.demo-group row {
margin-bottom: .5em;
}
.demo-group .buttons {
-moz-box-pack: end;
}
/* the day-of-week labels */
.day {
margin-left: 1em;
}
.day[disabled] {
color: #777;
}
.day:first-child {
margin-left: 4px;
}
/* the left column labels */
.text-prompt {
padding-top: .25em;
}
/* the date input box */
#date-text {
max-width: 8em;
}
/* the status bar */
statusbar {
width: 100%;
border: 1px inset -moz-dialog;
margin: 4px;
padding: 0px 4px;
}
#status {
padding: 4px;
}
#status[warning] {
color: red;
}
새로운 텍스트 파일 script7.js을 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:
// XUL demonstration
var dateBox, dayBox, currentDay, status; // elements
// called by window onLoad
function init() {
dateBox = document.getElementById("date-text")
dayBox = document.getElementById("day-box")
status = document.getElementById("status")
setToday();
}
// called by Clear button
function clearDate() {
dateBox.value = ""
refresh()
}
// called by Today button
function setToday() {
var d = new Date()
dateBox.value = (d.getMonth() + 1)
+ "/" + d.getDate()
+ "/" + d.getFullYear()
refresh()
}
// called by Date textbox
function refresh() {
var d = dateBox.value
var theDate = null
showStatus(null)
if (d != "") {
try {
var a = d.split("/")
var theDate = new Date(a[2], a[0] - 1, a[1])
showStatus(theDate)
}
catch (ex) {}
}
setDay(theDate)
}
// internal
function setDay(aDate) {
if (currentDay) currentDay.setAttribute("disabled", "true")
if (aDate == null) currentDay = null
else {
var d = aDate.getDay()
currentDay = dayBox.firstChild
while (d-- > 0) currentDay = currentDay.nextSibling
currentDay.removeAttribute("disabled")
}
dateBox.focus();
}
function showStatus(aDate) {
if (aDate == null) {
status.removeAttribute("warning")
status.setAttribute("label", "")
}
else if (aDate === false || isNaN(aDate.getTime())) {
status.setAttribute("warning", "true")
status.setAttribute("label", "Date is not valid")
}
else {
status.removeAttribute("warning")
status.setAttribute("label", aDate.toLocaleDateString())
}
}
정확히 의도하신대로 결과를 보고 싶으시면, 브라우저의 디폴트 씸(default theme)을 사용하세요. 다른 씸(theme)을 사용하고 계시면, 씸이 몇가지 사용자 인터페이스 스타일을 변경해서 예제가 좀 이상하게 보일 수 도 있습니다.
브라우저에서 문서를 열고 인터페이스를 사용하세요.
이 위키페이지는 XUL과 자바스크립트를 지원하지 않습니다. 따라서 예제가 어떻게 실행되는 지 보여드릴 수 없습니다.
다음과 같이 보입니다:
|
XUL demonstration Day of week calculator
June 27, 2005 |
이 예제에서 주의할 점:
- XUL문서는 이전처럼 스타일 시트에 링크되어 있으며, 스크립트에도 링크되어 있습니다.
- 스크립트는 이 예제에서 중요하지 않습니다.
- 보게되는 대부분의 스타일은 브라우저의 씸(theme)에의해서 정해집니다.
문서의 스타일 시트를 잘 검토해서 그안의 모든 규칙들을 확실히 이해하도록 하세요. 이해하지 못하는 규칙이 있으면, 코멘트 아웃(comment out)한 다음 브라우저를 리프레쉬해서 문서에 나타나는 효과를 보도록 하세요.
| DOM 조사 도구(DOM Inspector tool)을 사용해서 Date textbox를 검사하세요. Date textbox는 XBL 바인딩으로 만들어진 다른 엘리먼트들로 이루어져 있습니다.
이 지식을 이용해서, 스타일 시트에 규칙을 하나 더해서 Date box가 키보드 포거스를 가지게 될때 배경색이 희미한 푸른색으로 되게 하세요.(그러나 키보드 포커스가 다른 데 있을 경우 힌색이 되게 하세요.) |
그럼 다음은?
If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.
이 예제에서 대부분의 사용자 인터페이스에 공통적으로 사용되는 표준적인 사각형 도형들을 보았습니다. 모질라는 스타일을 지정하는 CSS스타일 시트를 이용하여 도형을 만들어내는 쓰는 특별한 그래픽 언어도 지원하고 있습니다. 다음 페이지에서는 이것을 실행해 봅니다: SVG graphics