mozilla

Revision 639327 of XUL user interfaces

  • Revision slug: Web/CSS/Getting_Started/XUL_user_interfaces
  • Revision title: XUL user interfaces
  • Revision id: 639327
  • Created:
  • Creator: teoli
  • Is current revision? Yes
  • Comment

Revision Content

이 페이지는 사용자 인터페이스를 만드는 모질라의 특별한 언어를 설명합니다.

모질라 브라우저에서 작동하는 간단한 예제를 만들어봅니다.

정보: 사용자 인터페이스

HTML가 사용자 인터페이스에 대한 지원를 하고 있으나, 하나의 독립적인 애플리케이션을 만드는데 필요한 모든 기능을 지원하고 있지는 못합니다.

모질라는 사용자 인터페이스를 만드는 특별한 언어를 제공함으로써 이런 제한사항을 극복하고 있습니다: 이 언어가 바로 XUL 입니다. (XML 사용자-인터페이스 언어(XML User-interface Language)로서 보통 " 줄(zool) "라고 읽습니다.)

XUL에는 많은 흔히사용되는 사용자 인터페이스가 내장되어 있습니다. 예를 들면, XUL은 대화창(dialogue), 위저드(wizard) 같은 특별한 윈도우들 뿐만아니라 상태 바(status bar), 메뉴, 툴 바(tool bar), 그리고 브라우저까지 제공합니다.

더 많은 특화된 기능들은 이 입문서에서 보아 온 다른 기술들(CSS 스타일, 자바스크립트 코드 그리고 XBL 바인딩)과 함께 XUL을 사용함으로써 만들어 낼 수 있습니다.

다른 XML-기반 언어들과 같이, XUL은 CSS 스타일 시트를 사용합니다.

More details
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

Date: 6/27/2005
Day: Sunday Monday Tuesday Wednesday Thurdsay Friday Saturday
 

Clear Today

June 27, 2005

이 예제에서 주의할 점:

  • XUL문서는 이전처럼 스타일 시트에 링크되어 있으며, 스크립트에도 링크되어 있습니다.
  • 스크립트는 이 예제에서 중요하지 않습니다.
  • 보게되는 대부분의 스타일은 브라우저의 씸(theme)에의해서 정해집니다.

문서의 스타일 시트를 잘 검토해서 그안의 모든 규칙들을 확실히 이해하도록 하세요. 이해하지 못하는 규칙이 있으면, 코멘트 아웃(comment out)한 다음 브라우저를 리프레쉬해서 문서에 나타나는 효과를 보도록 하세요.

Challenge
DOM 조사 도구(DOM Inspector tool)을 사용해서 Date textbox를 검사하세요. Date textbox는 XBL 바인딩으로 만들어진 다른 엘리먼트들로 이루어져 있습니다.

html:input 엘리먼트의 클래스 를 찾아내세요. 이 엘리먼트가 실질적으로 샤용자 입력을 받고 있습니다.

이 지식을 이용해서, 스타일 시트에 규칙을 하나 더해서 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

{{ languages( { "fr": "fr/CSS/Premiers_pas/Interfaces_utilisateur_XUL", "pl": "pl/CSS/Na_pocz\u0105tek/XUL-owe_interfejsy_u\u017cytkownika" } ) }}

Revision Source

<p>이 페이지는 사용자 인터페이스를 만드는 모질라의 특별한 언어를 설명합니다.</p>
<p>모질라 브라우저에서 작동하는 간단한 예제를 만들어봅니다.</p>
<h3 id=".EC.A0.95.EB.B3.B4:_.EC.82.AC.EC.9A.A9.EC.9E.90_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4" name=".EC.A0.95.EB.B3.B4:_.EC.82.AC.EC.9A.A9.EC.9E.90_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4">정보: 사용자 인터페이스</h3>
<p>HTML가 사용자 인터페이스에 대한 지원를 하고 있으나, 하나의 독립적인 애플리케이션을 만드는데 필요한 모든 기능을 지원하고 있지는 못합니다.</p>
<p>모질라는 사용자 인터페이스를 만드는 특별한 언어를 제공함으로써 이런 제한사항을 극복하고 있습니다: 이 언어가 바로
 <i>
  XUL</i>
 입니다. (XML 사용자-인터페이스 언어(XML User-interface Language)로서 보통 "
 <i>
  줄(zool)</i>
 "라고 읽습니다.)</p>
<p>XUL에는 많은 흔히사용되는 사용자 인터페이스가 내장되어 있습니다. 예를 들면, XUL은 대화창(dialogue), 위저드(wizard) 같은 특별한 윈도우들 뿐만아니라 상태 바(status bar), 메뉴, 툴 바(tool bar), 그리고 브라우저까지 제공합니다.</p>
<p>더 많은 특화된 기능들은 이 입문서에서 보아 온 다른 기술들(CSS 스타일, 자바스크립트 코드 그리고 XBL 바인딩)과 함께 XUL을 사용함으로써 만들어 낼 수 있습니다.</p>
<p>다른 XML-기반 언어들과 같이, XUL은 CSS 스타일 시트를 사용합니다.</p>
<table style="border:1px solid #36b; padding:1em; background-color:#f4f4f4; margin-bottom:1em;width:100%;">
 <caption style="font-weight:bold; text-align:left; margin-top:1em;">
  More details</caption>
 <tbody>
  <tr>
   <td>XUL 사용자 인터페이스에 관한 더 많은 정보를 원하시면, 이 위키의 <a href="ko/XUL">XUL</a> 페이지를 보세요.</td>
  </tr>
 </tbody>
</table>
<h3 id=".EC.95.A1.EC.85.98:_XUL_.EC.98.88.EC.A0.9C" name=".EC.95.A1.EC.85.98:_XUL_.EC.98.88.EC.A0.9C">액션: XUL 예제</h3>
<p>새로운 XUL 문서를 텍스트 파일 <code>doc7.xul</code>로 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:</p>
<div style="width:48em; height:12em; overflow:auto;">
 <pre>
&lt;?xml version="1.0"?&gt;
&lt;?xml-stylesheet type="text/css" href="style7.css"?&gt;
&lt;!DOCTYPE window&gt;

&lt;window
  xmlns="http&amp;58;//www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  title="CSS Getting Started - XUL demonstration"
  onload="init();"&gt;

&lt;script type="application/x-javascript" src="script7.js"/&gt;

&lt;label class="head-1" value="XUL demonstration"/&gt;

&lt;vbox&gt;

  &lt;groupbox class="demo-group"&gt;
    &lt;caption label="Day of week calculator"/&gt;
    &lt;grid&gt;
      &lt;columns&gt;
        &lt;column/&gt;
        &lt;column/&gt;
        &lt;/columns&gt;
      &lt;rows&gt;
        &lt;row&gt;
          &lt;label class="text-prompt" value="Date:" 
            accesskey="D" control="date-text"/&gt;
          &lt;textbox id="date-text" type="timed" 
            timeout="750" oncommand="refresh();"/&gt;
          &lt;/row&gt;
        &lt;row&gt;
          &lt;label value="Day:"/&gt;
          &lt;hbox id="day-box"&gt;
            &lt;label class="day" value="Sunday" disabled="true"/&gt;
            &lt;label class="day" value="Monday" disabled="true"/&gt;
            &lt;label class="day" value="Tuesday" disabled="true"/&gt;
            &lt;label class="day" value="Wednesday" disabled="true"/&gt;
            &lt;label class="day" value="Thursday" disabled="true"/&gt;
            &lt;label class="day" value="Friday" disabled="true"/&gt;
            &lt;label class="day" value="Saturday" disabled="true"/&gt;
            &lt;/hbox&gt;
          &lt;/row&gt;
        &lt;/rows&gt;
      &lt;/grid&gt;
    &lt;hbox class="buttons"&gt;
      &lt;button id="clear" label="Clear" accesskey="C" 
        oncommand="clearDate();"/&gt;
      &lt;button id="today" label="Today" accesskey="T"
        oncommand="setToday();"/&gt;
      &lt;/hbox&gt;
    &lt;/groupbox&gt;

  &lt;statusbar&gt;
    &lt;statusbarpanel id="status"/&gt;
    &lt;/statusbar&gt;

&lt;/vbox&gt;

&lt;/window&gt;
</pre>
</div>
<p>새로운 CSS 파일 <code>style7.css</code>을 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:</p>
<div style="width:48em; height:12em; overflow:auto;">
 <pre>
/*** 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;
  }
</pre>
</div>
<p>새로운 텍스트 파일 <code>script7.js</code>을 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:</p>
<div style="width:48em; height:12em; overflow:auto;">
 <pre>
// 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&nbsp;!= "") {
    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-- &gt; 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())
    }
  }
</pre>
</div>
<p>정확히 의도하신대로 결과를 보고 싶으시면, 브라우저의 디폴트 씸(default theme)을 사용하세요. 다른 씸(theme)을 사용하고 계시면, 씸이 몇가지 사용자 인터페이스 스타일을 변경해서 예제가 좀 이상하게 보일 수 도 있습니다.</p>
<p>브라우저에서 문서를 열고 인터페이스를 사용하세요.</p>
<p>이 위키페이지는 XUL과 자바스크립트를 지원하지 않습니다. 따라서 예제가 어떻게 실행되는 지 보여드릴 수 없습니다.</p>
<p>다음과 같이 보입니다:</p>
<table style="border:2px outset #36b; background-color:threedface; padding:1em;cursor:default; white-space:nowrap; margin:.5em 0;">
 <tbody>
  <tr>
   <td>
    <p style="font-size:150%;font-weight:bold;margin:0;padding:0;">XUL demonstration</p>
    <div style="position:relative;border:2px groove threedhighlight;margin-top:1em;">
     <p style="float:left;margin:-1em 0 0 .5em;padding:0;background-color:threedface;">Day of week calculator</p>
     <table style="clear:left;background-color:threedface;margin:.5em;padding-right:.5em;border-spacing:.25em;">
      <tbody>
       <tr>
        <td style="padding-right:.5em;"><u>D</u>ate:</td>
        <td style="background-color:white;border:1px solid #000;width:8em;float:left;cursor:text;padding:.15em .25em;">6/27/2005</td>
       </tr>
       <tr>
        <td>Day:</td>
        <td style="color:graytext;word-spacing:.5em;">Sunday <span style="color:#000;">Monday</span> Tuesday Wednesday Thurdsay Friday Saturday</td>
       </tr>
       <tr>
        <td>&nbsp;</td>
        <td>
         <div style="float:right;margin-top:.5em;word-spacing:.5em;">
          <p><span style="border:2px outset threedface;padding:.25em 1em;"><u>C</u>lear</span> <span style="border:2px outset threedface;padding:.25em 1em;"><u>T</u>oday</span></p>
         </div>
        </td>
       </tr>
      </tbody>
     </table>
    </div>
    <div style="border:1px inset threedface;margin-top:1em;">
     <p style="margin:0;padding:.25em .5em;">June 27, 2005</p>
    </div>
   </td>
  </tr>
 </tbody>
</table>
<p>이 예제에서 주의할 점:</p>
<ul>
 <li>XUL문서는 이전처럼 스타일 시트에 링크되어 있으며, 스크립트에도 링크되어 있습니다.</li>
 <li>스크립트는 이 예제에서 중요하지 않습니다.</li>
 <li>보게되는 대부분의 스타일은 브라우저의 씸(theme)에의해서 정해집니다.</li>
</ul>
<p>문서의 스타일 시트를 잘 검토해서 그안의 모든 규칙들을 확실히 이해하도록 하세요. 이해하지 못하는 규칙이 있으면, 코멘트 아웃(comment out)한 다음 브라우저를 리프레쉬해서 문서에 나타나는 효과를 보도록 하세요.</p>
<table style="border:1px solid #36b; padding:1em; background-color:#fffff4; margin-bottom:1em;">
 <caption style="font-weight:bold; text-align:left;">
  Challenge</caption>
 <tbody>
  <tr>
   <td>DOM 조사 도구(DOM Inspector tool)을 사용해서 Date textbox를 검사하세요. Date textbox는 XBL 바인딩으로 만들어진 다른 엘리먼트들로 이루어져 있습니다.
    <p><code>html:input</code> 엘리먼트의
     <i>
      클래스</i>
     를 찾아내세요. 이 엘리먼트가 실질적으로 샤용자 입력을 받고 있습니다.</p>
    <p>이 지식을 이용해서, 스타일 시트에 규칙을 하나 더해서 Date box가 키보드 포거스를 가지게 될때 배경색이 희미한 푸른색으로 되게 하세요.(그러나 키보드 포커스가 다른 데 있을 경우 힌색이 되게 하세요.)</p>
   </td>
  </tr>
 </tbody>
</table>
<h4 id=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80.3F" name=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80.3F">그럼 다음은?</h4>
<p>If you had difficulty understanding this page, or if you have other comments about it, please contribute to its <a href="Talk:ko/CSS/Getting_Started/XUL_user_interfaces">Discussion</a> page.</p>
<p>이 예제에서 대부분의 사용자 인터페이스에 공통적으로 사용되는 표준적인 사각형 도형들을 보았습니다. 모질라는 스타일을 지정하는 CSS스타일 시트를 이용하여 도형을 만들어내는 쓰는 특별한 그래픽 언어도 지원하고 있습니다. 다음 페이지에서는 이것을 실행해 봅니다: <b><a href="ko/CSS/Getting_Started/SVG_graphics">SVG graphics</a></b></p>
<p>{{ languages( { "fr": "fr/CSS/Premiers_pas/Interfaces_utilisateur_XUL", "pl": "pl/CSS/Na_pocz\u0105tek/XUL-owe_interfejsy_u\u017cytkownika" } ) }}</p>
Revert to this revision