diff options
Diffstat (limited to 'files/pl/web/css/na_początek/xul-owe_interfejsy_użytkownika/index.html')
| -rw-r--r-- | files/pl/web/css/na_początek/xul-owe_interfejsy_użytkownika/index.html | 299 |
1 files changed, 299 insertions, 0 deletions
diff --git a/files/pl/web/css/na_początek/xul-owe_interfejsy_użytkownika/index.html b/files/pl/web/css/na_początek/xul-owe_interfejsy_użytkownika/index.html new file mode 100644 index 0000000000..c185657258 --- /dev/null +++ b/files/pl/web/css/na_początek/xul-owe_interfejsy_użytkownika/index.html @@ -0,0 +1,299 @@ +--- +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><?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> +</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-- > 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" } ) }} |