path: root/files/pl/web/css/na_początek/xul-owe_interfejsy_użytkownika/index.html

---
title: XUL-owe interfejsy użytkownika
slug: Web/CSS/Na_początek/XUL-owe_interfejsy_użytkownika
tags:
  - 'CSS:Na_początek'
translation_of: Archive/Beginner_tutorials/XUL_user_interfaces
---
<p>
</p><p>Ta strona opisuje specjalny język Mozilli do tworzenia interfejsów.
</p><p>Stworzysz przykładowy dokument demonstracyjny dla przeglądarek Gecko.
</p>
<h3 id="Informacja:_Interfejsy_u.C5.BCytkownika" name="Informacja:_Interfejsy_u.C5.BCytkownika"> Informacja: Interfejsy użytkownika </h3>
<p>Mimo, że HTML posiada pewne wsparcie dla interfejsów użytkownika, to jest ono niewystarczające do stworzenia samodzielnej aplikacji.
</p><p>Mozilla pozwala pokonać te ograniczenia poprzez użycie specjalnego języka do tworzenia interfejsów użytkownika: <i>XUL</i> (XML User-interface Language, XML-owy Język Interfejsu Użytkownika, zazwyczaj wymawiany jak "<i>zool</i>").
</p><p>W XUL-u, wiele często używanych funkcji interfejsu użytkownika jest wbudowanych. Na przykład, XUL dostarcza wyspecjalizowane typy okien jak okna dialogowe czy kreatory (wizards), oraz paski statusu, menu, paski narzędziowe, a nawet przeglądarki.
</p><p>Bardziej wyspecjalizowane funkcje, mogą zostać zbudowane z elementów przy użyciu XUL-a i innych technologii, które poznałeś(aś) w tym kursie: stylów CSS, kodu JavaScript, wiązań XBL.
</p><p>Jak inne języki XML-owe, XUL używa arkuszy stylów CSS.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;">
<caption>Więcej szczegółów
</caption><tbody><tr>
<td> Aby dowiedzieć się więcej o XUL-owych interfejsach użytkownika, zajrzyj na stroną o <a href="pl/XUL">XUL</a>-u na tym wiki.
</td></tr></tbody></table>
<h3 id="Zadanie:_Demonstracja_XUL-a" name="Zadanie:_Demonstracja_XUL-a"> Zadanie: Demonstracja XUL-a </h3>
<p>Stwórz nowy dokument XUL jako czysty plik tekstowy, <code>doc7.xul</code>.
Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały:
</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>Stwórz nowy plik CSS, <code>style7.css</code>.
Skopiuj i wklej do niego poniższy kod, upewniając się, że wkleiłeś(aś) cały:
</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>Stwórz nowy plik tekstowy, <code>script7.js</code>.
Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały:
</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 != "") {
    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>Aby zobaczyć właściwy wynik, użyj domyślnego motywu w swojej przeglądarce.
Jeżeli użyjesz innego, może on zmieniać trochę style interfejsu użytkownika i demonstracja może wyglądać dziwnie.
</p><p>Otwórz ten dokument w przeglądarce Mozilli i skorzystaj z interfejsu.
</p><p>To wiki nie obsługuje XUL-a ani JavaScript-u na stronach, nie jest więc możliwe pokazanie demonstracji tutaj.
Wygląda ona mniej więcej tak:
</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="background-color: threedface; margin: .5em; padding-right: .5em;">
<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;">Sunday <span style="color: #000;">Monday</span> Tuesday Wednesday Thurdsay Friday Saturday
</td></tr>
<tr>
<td>
</td><td><div style="float: right; margin-top: .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>Uwagi dotyczące demonstracji:
</p>
<ul><li>Dokument XUL posiada odnośniki do arkuszy stylów, a także do skryptów.
</li><li>Skrypt nie jest zbyt ważny w tej demonstracji.
</li><li>Większość stylu, który widzisz, jest określona przez motyw graficzny przeglądarki.
</li></ul>
<p>Sprawdź arkusz stylów dokumentu, aby upewnić się, że rozumiesz wszystkie reguły w nim zawarte.
Jeżeli jest jakaś reguła, której nie rozumiesz, wykomentuj ją i odśwież przeglądarkę, aby zobaczyć różnicę.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>Wyzwanie
</caption><tbody><tr>
<td> Korzystając z Inspektora DOM sprawdź kontrolkę bloku tekstowego Date. Jest ona złożona z elementów stworzonych przez jej wiązanie XBL.
<p>Znajdź <i>klasę</i> elementu <code>html:input</code>. To jest element, który przyjmuje dane od użytkownika.
</p><p>Korzystając z tej wiedzy, dodaj regułę do arkusza stylów, która sprawia, że tło pola Date będzie jasno niebieskie kiedy jest ono aktywne dla klawiatury (ale białe kiedy jest nieaktywne).
</p>
</td></tr></tbody></table>
<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4>
<p>Jeżeli masz problemy ze zrozumieniem tej strony, lub jeżeli masz jakieś komentarze na jej temat, pomóż nam dopisując się na stronie <a>Dyskusji</a>.
</p><p>W tej demonstracji, widzisz standardowe, prostokątne kształty, które są wspólne dla większości interfejsów użytkownika.
Mozilla wspiera także specjalny język graficzny do tworzenia kształtów, którego styl tworzy się w CSS-ie.
</p><p>Demonstruje to następna strona: <b><a href="pl/CSS/Na_pocz%c4%85tek/Grafika_SVG">Grafika SVG</a></b>
</p>{{ languages( { "en": "en/CSS/Getting_Started/XUL_user_interfaces", "fr": "fr/CSS/Premiers_pas/Interfaces_utilisateur_XUL", "pt": "pt/CSS/Como_come\u00e7ar/Interfaces_de_usu\u00e1rio_XUL" } ) }}