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

Ta strona opisuje specjalny język Mozilli do tworzenia interfejsów.

Stworzysz przykładowy dokument demonstracyjny dla przeglądarek Gecko.

Informacja: Interfejsy użytkownika

Mimo, że HTML posiada pewne wsparcie dla interfejsów użytkownika, to jest ono niewystarczające do stworzenia samodzielnej aplikacji.

Mozilla pozwala pokonać te ograniczenia poprzez użycie specjalnego języka do tworzenia interfejsów użytkownika: XUL (XML User-interface Language, XML-owy Język Interfejsu Użytkownika, zazwyczaj wymawiany jak "zool").

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.

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.

Jak inne języki XML-owe, XUL używa arkuszy stylów CSS.

Więcej szczegółów
Aby dowiedzieć się więcej o XUL-owych interfejsach użytkownika, zajrzyj na stroną o XUL-u na tym wiki.

Zadanie: Demonstracja XUL-a

Stwórz nowy dokument XUL jako czysty plik tekstowy, doc7.xul. Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: 

<?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>

Stwórz nowy plik CSS, style7.css. Skopiuj i wklej do niego poniższy kod, upewniając się, że wkleiłeś(aś) cały: 

/*** 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;
  }

Stwórz nowy plik tekstowy, script7.js. Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: 

// 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())
    }
  }

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.

Otwórz ten dokument w przeglądarce Mozilli i skorzystaj z interfejsu.

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:

XUL demonstration

Day of week calculator

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

Clear Today

June 27, 2005

Uwagi dotyczące demonstracji:

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ę.

Wyzwanie
Korzystając z Inspektora DOM sprawdź kontrolkę bloku tekstowego Date. Jest ona złożona z elementów stworzonych przez jej wiązanie XBL.

Znajdź klasę elementu html:input. To jest element, który przyjmuje dane od użytkownika.

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).

Co dalej?

Jeżeli masz problemy ze zrozumieniem tej strony, lub jeżeli masz jakieś komentarze na jej temat, pomóż nam dopisując się na stronie Dyskusji.

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.

Demonstruje to następna strona: Grafika SVG

{{ 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" } ) }}