mozilla
Wyniki wyszukiwania

    XUL-owe interfejsy użytkownika

    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:

    • Dokument XUL posiada odnośniki do arkuszy stylów, a także do skryptów.
    • Skrypt nie jest zbyt ważny w tej demonstracji.
    • Większość stylu, który widzisz, jest określona przez motyw graficzny przeglądarki.

    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

    Autorzy i etykiety dokumentu

    Etykiety: 
    Contributors to this page: Takenbot, Verruckt, Ptak82, gandalf, teoli, Witia
    Ostatnia aktualizacja: teoli,