diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/pl/mozilla/tech/xul/kurs_xul | |
parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip |
initial commit
Diffstat (limited to 'files/pl/mozilla/tech/xul/kurs_xul')
78 files changed, 10711 insertions, 0 deletions
diff --git a/files/pl/mozilla/tech/xul/kurs_xul/aktualizacja_poleceń/index.html b/files/pl/mozilla/tech/xul/kurs_xul/aktualizacja_poleceń/index.html new file mode 100644 index 0000000000..36f474223b --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/aktualizacja_poleceń/index.html @@ -0,0 +1,133 @@ +--- +title: Aktualizacja poleceń +slug: Mozilla/Tech/XUL/Kurs_XUL/Aktualizacja_poleceń +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Updating_Commands +--- +<div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Polecenia" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Rozgłaszacze_oraz_obserwatory">Następny »</a></p> +</div> + +<p>W tym artykule zajmiemy się aktualizacją poleceń.</p> + +<h2 id="Wywo.C5.82ywanie_komend" name="Wywo.C5.82ywanie_komend">Wywoływanie komend</h2> + +<p>Jeśli element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/command" title="command">command</a></code></code> posiada atrybut <code><code id="a-oncommand"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/oncommand">oncommand</a></code></code>, możesz po prostu ją wywołać używając metody <code><code id="a-oncommand"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/oncommand">oncommand</a></code></code> na komendę albo element przypisany do niej. Dla innych komend będziesz musiał użyć kilka dodatkowych linii kodu, np. gdy wywołujesz komendę zaimplementowaną przez kontroler. Dodatkowo będziesz musiał tego użyć, gdy tworzysz własne menu komend, np. żeby zaimplementować menu edytowania komend w swojej aplikacji.</p> + +<p>Na szczęście dodatkowy kod jest w miarę prosty. Wszystko czego potrzebujesz to pobrać potrzebny kontroler i wywołać komendę. Oto prosty sposób aby to wykonać:</p> + +<p><span class="comment">If a <code><code><a href="/pl/docs/Mozilla/Tech/XUL/command" title="command">command</a></code></code> has an <code><code id="a-oncommand"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/oncommand">oncommand</a></code></code> attribute, you can just invoke it by using the <code><span id="m-doCommand"><code><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Metoda/doCommand">doCommand</a></code></span></code> method of the command or an element which is attached to it. For other commands, you will need to use a couple of additional lines of code. You will need to use these extra steps when invoking commands implemented by a controller. In addition, you will need to do this when creating your own menu commands, for instance to implement the edit menu commands in your own application. Fortunately, the extra code is fairly simple. All we need to do is get the needed controller and call the command. A simple way of doing this is the following:</span></p> + +<pre>var controller = document.commandDispatcher.getControllerForCommand("cmd_paste"); +if (controller && controller.isCommandEnabled("cmd_paste")){ + controller.doCommand(command); +} +</pre> + +<p>Powyższy kod najpierw odzyskuje kontrolera dla polecenia <tt>cmd_paste</tt> z rozdzielacza poleceń. Następnie, sprawdza czy polecenie jest włączone i wykonuje polecenie używając metody kontrolera <code>doCommand</code> . Zauważmy, że nie potrzebujemy zgadywać którego elementu albo którego kontrolera musimy użyć. Rozdzielacz komend zajmie się tym sam. Moglibyśmy również po prostu wywołać + + <i>doCommand</i> + bez sprawdzania czy komenda jest dostępna, choć prawdopodobnie nie powinniśmy tak robić.</p> + +<p>Powyższy kod jest wystarczająco ogólny, że może być funkcją wykonującą komendę, z komendą jako argumentem. Taka funkcja mogłaby być użyta wielokrotnie dla wielu komend. W rzeczywistości jest to bardzo częste, więc w Mozilli zawarta jest biblioteka, która właśnie to robi. Jeśli zawrzesz skrypt "<a class="external" rel="freelink">chrome://global/content/globalOverlay.js</a>" w pliku XUL, możesz wywoływać metodę + + <i>goDoCommand</i> + , która wykonuje komendę przekazaną w argumencie. Kod tej funkcji to tylko kilka linijek, więc możesz zawrzeć go bezpośrednio w swoim kodzie, jeśli z pewnych powodów nie chcesz importować biblioteki.</p> + +<p><span class="comment">The code above first retrieves the controller for the '<tt>cmd_paste</tt>' command from the command dispatcher. Then, it checks to see whether the command is enabled, and then executes the command using the <code>doCommand</code> method of the controller. Note that we don't need to figure out which element to use or which controller to use. The command dispatcher handles that part. Also, we could just call <code>doCommand</code> without checking if the command was enabled or not, although we probably shouldn't do that. The code above is generic enough that it can be a function that takes a command as an argument and executes that command. This function could then be reused for all commands. In fact, this is common enough that Mozilla includes a library which does just that. If you include the script '<tt><a class="external" rel="freelink">chrome://global/content/globalOverlay.js</a></tt>' in a XUL file, you can call the <code>goDoCommand</code> method which executes the command passed as the argument. The code for this function is only a few lines long so you could include it directly in your code if for some reason you didn't want to include the library.</span></p> + +<pre><script src="chrome://global/content/globalOverlay.js"/> + +<command id="cmd_paste" oncommand="goDoCommand('cmd_paste');"/> +<button label="Paste" command="cmd_paste"/> +</pre> + +<p>Przykład powyżej zaimplementuje przycisk "Wklej" ( + <i>Paste</i> + ). Jest on dołączony do komendy, która wywoła komendę z określonego kontrolera. Kod ten to wszystko czego potrzebujesz, aby zaimplementować funkcjonalną komendę wklejania do swojej aplikacji. Jedyna inna rzecz, której potrzebujesz to upewnić się, czy status dostępności komendy wklej, a także przycisku, jest update'owany w odpowiednim czasie, co jest opisane poniżej.</p> + +<p><span class="comment">The example above will implement a Paste button. It is attached to the command which will invoke the command on the necessary controller when called. The code above is all you need to implement the functionality of the paste command in your application. The only other thing you need to do is ensure that the enabled status of the paste command, and therefore the button, is updated at the right time, which is described below.</span></p> + +<h2 id="Command_Updaters" name="Command_Updaters">Command Updaters</h2> + +<p>Edytor komend to dodatkowa cecha elementu <commandset>, która pozwala edytować dostępne statusy jednej lub więcej komend, gdy zaszła pewna akcja. Musisz się zastanowić kiedy komenda jest ważna, a kiedy nie. Dodatkowo musisz rozważyć kiedy status może się zmienić i kiedy komenda powinna zostać edytowana.</p> + +<p>Na przykład komenda "wklej" jest ważna, gdy coś dzieje się w oknie tekstowym i schowek nie jest pusty. Komenda stanie się dostępna za każdym razem, gdy kursor będzie w polu tekstowym i gdy zmieni się zawartość schowka. Edytor komend będzie wyczekiwał na te sytuacje i kod włączający lub wyłączający dostępność komend będzie wykonany.</p> + +<p>Prosty edytor wygląda tak:</p> + +<p><span class="comment">A command updater is an extra feature of the <code><code><a href="/pl/docs/Mozilla/Tech/XUL/commandset" title="commandset">commandset</a></code></code> element which allows it to update the enabled status of one or more commands when certain events happen. You will need to think about when a command is valid and when it is not. In addition, you will need to consider when the state could change and when the commands should be updated. For example, the paste command is valid when a textbox has the focus and there is something on the clipboard to paste. The command will become enabled whenever a textbox is focused and when the clipboard contents change. A command updater will listen for these situations and code can be executed which enables and disables commands as necessary. A simple command updater looks like this:</span></p> + +<pre><commandset id="updatePasteItem" + commandupdater="true" + events="focus" + oncommandupdate="goUpdateCommand('cmd_paste');"/> +</pre> + +<p>Edytor jest oznaczony przez atrybut + <i>commandupdater</i> + , który powinien mieć wartość + + <i>true</i> + . Atrybut + + <i>events</i> + jest używany aby wypisać sytuacje, w które wsłuchuje się edytor. Możesz wyszczególnić wiele wydarzeń, przedzielając je przecinkiem. W powyższym przykładzie edytor czeka na wydarzenie, gdy kursor znajdzie się w odpowiednim polu ( + + <i>focus event</i> + ). Sprawi to, że komenda zostanie edytowana.</p> + +<p>Gdy pojawi się oczekiwane wydarzenie, zostanie wywołany kod w atrybucie + <i>oncommandupdate</i> + . W przykładzie wywołana jest metoda + + <i>goUpdateCommand</i> + , która jest funkcją dostarczaną przez skrypt globalOverlay.js opisany wcześniej. Wyedytuje on komendę i dostosuje dostępność odpowiednich przycisków i elementów menu. Stojący za tym kod jest w miarę łatwy. Po prostu bierze wymaganego kontrolera, wywołuje jego metodę + + <i>isCommandEnabled</i> + i dostosowuje dostępność komendy. Jeśli masz kilka komend do wyedytowania, wywołaj metodę + + <i>goUpdateCommand</i> + dla każdej z nich.</p> + +<p>Zauważmy, że edytor komendy otrzyma powiadomienia o wszystkich wydarzeniach z wszystkich elementów, nawet jeśli inny słuchacz wydarzeń na nie odpowiada. Tak więc edytor komend jest jak globalny słuchacz wydarzeń ( + <i>event handler</i> + ).</p> + +<p>Edytorzy mają kilka wydarzeń, na które odpowiadają, wymienione poniżej. Można też stworzyć własne wydarzenia.</p> + +<ul> + <li><b>focus</b>: pojawia się, gdy zmienia się miejsce kursora;</li> + <li><b>select</b>: pojawia się, gdy zmienia się zaznaczony tekst;</li> + <li><b>undo</b>: pojawia się, gdy buffer cofnięcia zmian się zmienia;</li> + <li><b>clipboard</b>: pojawia się, gdy zmienia się zawartość schowka.</li> +</ul> + +<p>Następujący przykład pokazuje edytorów komend używanych w Mozilli do edytowania komend menu edycji. Użyte tu funkcje możecie znaleźć w skrypcie "<a class="external" rel="freelink">chrome://communicator/content/utilityOverlay.js</a>".</p> + +<pre><commandset id="globalEditMenuItems" + commandupdater="true" + events="focus" + oncommandupdate="goUpdateGlobalEditMenuItems()"/> +<commandset id="selectEditMenuItems" + commandupdater="true" + events="select" + oncommandupdate="goUpdateSelectEditMenuItems()"/> +<commandset id="undoEditMenuItems" + commandupdater="true" + events="undo" + oncommandupdate="goUpdateUndoEditMenuItems()"/> +<commandset id="clipboardEditMenuItems" + commandupdater="true" + events="clipboard" + oncommandupdate="goUpdatePasteMenuItems()"/> +</pre> + +<p>Następnie dowiemy się <a href="pl/Kurs_XUL/Rozg%c5%82aszacze_oraz_obserwatory">jak używać obserwatorów</a>.</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Polecenia" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Rozgłaszacze_oraz_obserwatory">Następny »</a></p> +</div> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/dodatkowe_możliwości_drzewa/index.html b/files/pl/mozilla/tech/xul/kurs_xul/dodatkowe_możliwości_drzewa/index.html new file mode 100644 index 0000000000..756c6eec33 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/dodatkowe_możliwości_drzewa/index.html @@ -0,0 +1,117 @@ +--- +title: Dodatkowe możliwości drzewa +slug: Mozilla/Tech/XUL/Kurs_XUL/Dodatkowe_możliwości_drzewa +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/More_Tree_Features +--- +<p> +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Drzewa" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Zaznaczenie_drzewa">Następny »</a></p> +</div> +<p></p><p>W tym artykule poznamy więcej możliwości drzewa. +</p> +<h3 id="Hierarchia_drzew" name="Hierarchia_drzew"> Hierarchia drzew </h3> +<p>Elementy drzewa są także zastosowane do tworzenia list hierarchicznych, takich, jakie możemy znaleźć w menedżerach plików lub na liście ulubionych zakładek w przeglądarce. Widok drzewa posiada funkcję, która określa hierarchię poszczególnych pozycji w drzewie. Każda pozycja w drzewie posiada swoją pozycję, która zaczyna się od poziomu 0. Najwyżej wysunięte elementy w drzewie będą posiadały poziom 0, dziecko tej pozycji będzie posiadało poziom 1, dziecko poniżej będzie posiadało poziom 2 i tak dalej. Drzewo będzie pytało o poziom każdej pozycji według ustalonych zasad jak wyrysować wiersze. +</p><p>Drzewo wyrysuje ikony otwierania i zamykania pozycji rodzica, służące do rozwijania wierszy, jak również linie łączące wiersz rodzica z wierszami dzieci. Widok musi się upewniać, czy ścieżka wierszy jest taka, jak było wymagane. To może czasem się okazać zawodne, jednak, na szczęście, wbudowany widok treści drzewa wykona za nas najcięższą pracę. </p><p>W celu utworzenia zestawu zagnieżdżonych wierszy, dodajemy drugi element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></code> wewnątrz rodzica <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code>. Możemy wtedy dodać pozycję wewnątrz tamtego, żeby określić wiersze potomne kolejnych pozycji. Nie umieszczaj wewnętrznego elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></code> wewnątrz <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treerow" title="treerow">treerow</a></code></code>, ponieważ to nie będzie działało. +</p><p>Możemy powtarzać ten proces do utworzenia głęboko zagnieżdżonych drzew. Zasadniczo jednak element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code> może zawierać którykolwiek z pojedynczych wierszy, które są zadeklarowane z elementem <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treerow" title="treerow">treerow</a></code></code> lub całym kompletem wierszy, zadeklarowanych z elementem <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></code>. +</p><p>Są dwie inne rzeczy, które trzeba zrobić żeby upewnić się, że hierarchia zadziała poprawnie. Po pierwsze, trzeba zaznaczyć element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code>, który posiada 'dzieci' jako kontener. Robimy to poprzez dodanie atrybutu <code><code id="a-container"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/container">container</a></code></code> w następujący sposób: +</p> +<pre><treeitem container="true"/> +</pre> +<p>Pozwala to użytkownikowi na kliknięcie w wiersz przesłany do elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code> w celu rozwinięcia i zwinięcia wewnętrznych wierszy. Można mieć rozwinięte wiersze już na samym początku, dodając atrybut <code><code id="a-open"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/open">open</a></code></code>. Kiedy użytkownik rozwija i zwija główny wiersz, wywoływana jest funkcja toggleOpenState, która to właśnie przełącza te widoki. Dla widoku treści drzewa umieści atrybut <code><code id="a-open"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/open">open</a></code></code>, żeby ustawić aktualny stan. +</p><p>Drugą zmianą jest to, że musisz umieścić atrybut <code><code id="a-primary"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/primary">primary</a></code></code> w pierwszej kolumnie. To spowoduje ukazanie się małego symbolu trójkąta przed komórkami, który będzie wskazywał na to, że wiersz można rozwinąć. Dodatkowo wiersze potomne są wcięte (akapit). Zauważ, że użytkownik nie ma możliwości ukrycia pierwszej kolumny, używając przeciągania do prawych kolumn. +</p> +<h4 id="Przyk.C5.82ad_drzewa_hierarchicznego" name="Przyk.C5.82ad_drzewa_hierarchicznego"> Przykład drzewa hierarchicznego </h4> +<p>Następujący prosty przykład: +</p><p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advtrees_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advtrees_1.xul">Podgląd</a> +</p> +<div class="float-right"><img alt="grafika:advtrees1.png"></div> +<pre><tree rows="6"> + <treecols> + <treecol id="firstname" label="Imię" primary="true" flex="3"/> + <treecol id="lastname" label="Nazwisko" flex="7"/> + </treecols> + + <treechildren> + <treeitem container="true" open="true"> + <treerow> + <treecell label="Znajomi"/> + </treerow> + + <treechildren> + <treeitem> + <treerow> + <treecell label="Bob"/> + <treecell label="Carpenter"/> + </treerow> + </treeitem> + <treeitem> + <treerow> + <treecell label="Jerry"/> + <treecell label="Hodge"/> + </treerow> + </treeitem> + </treechildren> + </treeitem> + </treechildren> +</tree> +</pre> +<p>Utworzone zostało hierarchiczne drzewo. Jak widać na obrazku obok pierwszego wiersza ukazał się mały znak plusa lub minusa, wskazując, że wiersz zawiera wiersze potomne. Klikając na ten wiersz użytkownik może rozwinąć i zwinąć listę. Wiersz <tt>Znajomi</tt> potrzebuje jednej kolumny do umieszczenia jego pozycji dla elementów dzieci. +</p><p>Zewnętrzny <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code> zawiera pojedynczy element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treerow" title="treerow">treerow</a></code></code> i <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></code>. Ten pierwszy tworzy dane dla źródłowego wiersza, a ten drugi dla późniejszych pozycji potomnych. </p><p>Można również zagnieżdżać głębsze wiersze. Pamiętaj, że musimy użyć atrybutu <code><code id="a-container"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/container">container</a></code></code> na wierszach, które zawierają wiersze potomne. Zwykła obecność pochodnych wierszy nie jest wystarczająca do wskazania, czy masz kontener, który jest pusty, ale nadal będzie traktowany jako kontener. Na przykład pusty folder powinien być cały czas traktowany jako kontener, ale plik już nie. +</p> +<h3 id="Wi.C4.99cej_o_kolumnach_drzewa" name="Wi.C4.99cej_o_kolumnach_drzewa"> Więcej o kolumnach drzewa </h3> +<p>Jednym z dodatkowych atrybutów, które mogą być dodane do drzewa, jest <code><code id="a-enableColumnDrag"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/enableColumnDrag">enableColumnDrag</a></code></code>. Jeżeli ma wartość <code>true</code>, użytkownik może złapać za nagłówek i dowolnie przemieszczać kolumny wg uznania. +</p><p>Prawdopodobnie użytkownik będzie chciał też zmienić szerokość kolumn. Można to zrobić umieszczając rozdzielacz (<code><code><a href="/pl/docs/Mozilla/Tech/XUL/splitter" title="splitter">splitter</a></code></code>) pomiędzy każdym z elementów <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code></code>. Pojawi się małe nacięcie pomiędzy kolumnami, które użytkownik może złapać i przeciągać, zmieniając szerokość kolumn. Można zastosować klasę stylu <code>tree-splitter</code> w celu ukrycia przerwy, ale mimo to nadal będzie możliwa zmiana szerokości kolumn. +</p><p>Można narzucić maksymalną i minimalną szerokość kolumn przy pomocy atrybutów <code><code id="a-minwidth"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/minwidth">minwidth</a></code></code> i <code><code id="a-maxwidth"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/maxwidth">maxwidth</a></code></code>. +</p><p>Jest możliwość umieszczenia atrybutu <code><code id="a-hidden"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/hidden">hidden</a></code></code> w kolumnie, z wartością <code>true</code>, żeby domyślnie uzyskać ukrytą kolumnę. Użytkownik może wybierać, która kolumna ma być ukryta, wybierając ją z rozwijanej listy na końcu wiersza nagłówka. </p> +<h4 id="Zapami.C4.99tywanie_stanu_kolumn" name="Zapami.C4.99tywanie_stanu_kolumn"> Zapamiętywanie stanu kolumn </h4> +<div class="float-right"><img alt="Grafika:XUL_rememberingStatofColumnsPL.png"></div> +<p>Atrybut <code><code id="a-persist"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/persist">persist</a></code></code> może być używany do zachowywania stanu kolumn pomiędzy sesjami (więcej informacji znajduje się <a href="pl/Kurs_XUL/Trwa%c5%82e_dane">w jednym z kolejnych artykułów</a>). Tak, że w przypadku, gdy użytkownik zmieni układ wg własnego uznania, ustawienia zostaną zapamiętanie na następny raz. Będzie trzeba zachować pewna liczbę atrybutów jak w przykładzie: +</p><p><span id="Przyk%C5%82ad_2"><a id="Przyk%C5%82ad_2"></a><strong>Przykład 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advtrees_2.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advtrees_2.xul">Podgląd</a> +</p> +<pre><tree enableColumnDrag="true" flex="1"> + <treecols> + <treecol id="runner" label="Biegacz" flex="2" persist="width ordinal hidden"/> + <splitter class="tree-splitter"/> + <treecol id="city" label="Miasto rodzinne" flex="2" persist="width ordinal hidden"/> + <splitter class="tree-splitter"/> + <treecol id="starttime" label="Czas startu" flex="1" persist="width ordinal hidden"/> + <splitter class="tree-splitter"/> + <treecol id="endtime" label="Czas ukończenia" flex="1" persist="width ordinal hidden"/> + </treecols> + + <treechildren> + <treeitem> + <treerow> + <treecell label="Joshua Granville"/> + <treecell label="Vancouver"/> + <treecell label="7:06:00"/> + <treecell label="9:10:26"/> + </treerow> + </treeitem> + <treeitem> + <treerow> + <treecell label="Robert Valhalla"/> + <treecell label="Seattle"/> + <treecell label="7:08:00"/> + <treecell label="9:15:51"/> + </treerow> + </treeitem> + </treechildren> +</tree> +</pre> +<p>Trzy atrybuty kolumn są trwałe: +</p> +<ul><li> atrybut <code><code id="a-width"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/width">width</a></code></code>, aby zachować szerokość, +</li><li> atrybut <code><code id="a-ordinal"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/ordinal">ordinal</a></code></code>, który podtrzymuje pozycję kolumny, </li><li> atrybut <code><code id="a-hidden"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/hidden">hidden</a></code></code>, który zapamiętuje, gdzie kolumna jest widoczna, a gdzie ukryta. </li></ul> +<p>Następnie dowiemy się, jak pobrać i ustawić <a href="pl/Kurs_XUL/Zaznaczenie_drzewa">zaznaczenie drzew</a>. +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Drzewa" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Zaznaczenie_drzewa">Następny »</a></p> +</div> +<p></p><p><br> +</p> +<div class="noinclude"> +</div> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/dodatkowe_możliwości_instalacji/index.html b/files/pl/mozilla/tech/xul/kurs_xul/dodatkowe_możliwości_instalacji/index.html new file mode 100644 index 0000000000..c6ea120a63 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/dodatkowe_możliwości_instalacji/index.html @@ -0,0 +1,58 @@ +--- +title: Dodatkowe możliwości instalacji +slug: Mozilla/Tech/XUL/Kurs_XUL/Dodatkowe_możliwości_instalacji +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Additional_Install_Features +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Skrypty_instalacyjne" style="float: left;">« Poprzedni</a><br></p> +</div><p></p> + +<p>W tym artykule poznamy dodatkowe możliwości instalacji.</p> + +<h2 id="Dodatkowe_mo.C5.BCliwo.C5.9Bci_instalacji" name="Dodatkowe_mo.C5.BCliwo.C5.9Bci_instalacji">Dodatkowe możliwości instalacji</h2> + +<p><a href="pl/Kurs_XUL/Skrypty_instalacyjne">Poprzedni artykuł</a> podstawowego instalatora. Jednak możliwe, że zajdzie potrzeba bardziej zaawansowanego przetwarzania danych podczas instalacji. Na przykład, możesz zechcieć instalować paczkę tylko, gdy jakieś warunki zostaną spełnione, np., gdy dana biblioteka jest zainstalowana.</p> + +<p>Dodatkowo w obiekcie instalacyjnym, plik obiektu jest dostępny podczas instalacji. To dostarcza funkcji mogących zostać użytymi do badania i modyfikowania plików na dysku. Możesz ich użyć do przemieszczenia, skopiowania, lub usunięcia plików, przed lub po instalacji. Na przykład mógłbyś wcześniej stworzyć kopie bezpieczeństwa plików.</p> + +<p>Następujący kod wykona kopię pliku "/bin/grep/" i umieści go w katalogu "/main".</p> + +<pre>var binFolder=getFolder("file:///","bin"); +var grep=getFolder(binFolder,"grep"); + +var mainFolder=getFolder("file:///","main"); + +File.copy(grep,mainFolder); +</pre> + +<p>Pierwsza linia służy do pozyskania położenia katalogu "/bin. Tekst "file//" jest specjalnym ciągiem oznaczającym katalog główny systemu plików. Stamtąd uzyskujemy plik ‘grep’, który zawarty jest w katalogu ‘bin’. Jeżeli plik nie istnieje nastąpi błąd instalacji. Następnie, otrzymujemy katalog ‘main’, znowu z katalogu głównego systemu. W końcu wywołujemy funkcję File.copy, która kopiuje plik źródłowy do miejsca przeznaczenia.</p> + +<p><a class="external" href="http://www.xulplanet.com/references/elemref/ref_File.html">Funkcje</a> także przemieszczają, zmieniają nazwę i uruchamiają pliki. Tak można przemieścić plik gdyby kolidował z twoją paczka.</p> + +<h2 id="Obs.C5.82uga_b.C5.82.C4.99d.C3.B3w" name="Obs.C5.82uga_b.C5.82.C4.99d.C3.B3w">Obsługa błędów</h2> + +<p>Będziesz musiał sprawnie posługiwać się błędami. Zdarzy się ze plik lub katalog nie może zostać odnaleziony, lub brakuje miejsca na dysku, lub są jakiekolwiek inne problemy.</p> + +<p>Możesz stosować funkcję <code>getLastError()</code>, aby sprawdzić czy wystąpił błąd. Jeżeli zwróci SUCCESS, nie było błędów. W przeciwnym wypadku, pojawi się liczba z kodem błędu. Funkcji tej możesz użyć w dowolnym momencie, aby sprawdzić czy nie pojawia się błąd.</p> + +<p>Jeżeli nastąpi błąd, prawdopodobnie będziesz musiał przerwać instalację. Możesz także wyświetlić komunikat o błędzie. Na przykład mógłbyś umieścić następujący kod na końcu twojego skryptu instalacji.</p> + +<pre>if (getLastError() == SUCCESS){ + performInstall(); +} +else { + cancelInstall(); +} +</pre> + +<p>Kody błędu, który mogłyby zostać zwrócone przez <code>getLastError()</code> umieszczone są w pliku źródłowym Mozilla: <code><a class="external" href="http://lxr.mozilla.org/mozilla/source/xpinstall/src/nsInstall.h">nsInstall.h</a></code>. Podczas instalacji, jest tworzony plik dziennika, który zawiera spis wykonanych operacji. Tam zostaną umieszczone błędy, które nastąpiły. Plik dziennika znajduje się w pliku ‘install.log’ w katalogu instalacyjnym Mozilli. Każda instalacja pozostawi po sobie w nim fragment teksu dokumentujący przebieg instalacji.</p> + +<p>Funkcja <code>logComment()</code> jest używana do umieszczania komentarzy instalacji w dzienniku, pobiera ona jeden argument.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Skrypty_instalacyjne" style="float: left;">« Poprzedni</a><br></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/dodatkowe_możliwości_kreatorów/index.html b/files/pl/mozilla/tech/xul/kurs_xul/dodatkowe_możliwości_kreatorów/index.html new file mode 100644 index 0000000000..acfc8bca14 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/dodatkowe_możliwości_kreatorów/index.html @@ -0,0 +1,85 @@ +--- +title: Dodatkowe możliwości kreatorów +slug: Mozilla/Tech/XUL/Kurs_XUL/Dodatkowe_możliwości_kreatorów +tags: + - Kurs_XUL + - Projekt_MDC + - Przewodniki + - Strony_do_aktualizacji + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/More_Wizards +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Tworzenie_kreatora" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Nakładki">Następny »</a></p> +</div><p></p> + +<p>Artykuł opisuje dodatkowe możliwości kreatorów.</p> + +<h2 id="Bardziej_z.C5.82o.C5.BCona_nawigacja_w_kreatorze" name="Bardziej_z.C5.82o.C5.BCona_nawigacja_w_kreatorze">Bardziej złożona nawigacja w kreatorze</h2> + +<p>Normalnie, kreator wyświetla każdy <code><code><a href="/pl/docs/Mozilla/Tech/XUL/wizardpage" title="wizardpage">wizardpage</a></code></code> w takiej kolejności w jakiej umieściłeś je w pliku XUL. Jednak w pewnych przypadkach możesz chcieć mieć różne strony kreatorów pojawiające się w zależności od tego co użytkownik wybrał na wcześniejszych stronach.</p> + +<p>W tym przypadku umieść atrybut <code>pageid</code> na każdej z tych stron powinno być to ustawione jako identyfikator dla każdej strony. Potem, aby nawigować po stronie użyj jednej z dwóch metod:</p> + +<ol> + <li>Ustaw atrybut <code>next</code> na każdej stronie na ID kolejnej strony. Możesz zmienić te atrybuty jako potrzebne do nawigacji po różnych stronach.</li> + <li>Wywołaj metodę <code>goTo()</code>. Pobiera ona jeden argument, ID strony do której chcesz przejść. Możesz wywołać tą metodę w funkcji obsługi <code>onpageadvanced</code> lub <code>onwizardnext</code>. Pamiętaj o zwróceniu fałszu w tym przypadku, ponieważ już sam zmieniłeś stronę. Odnotuj metodę <code>goTo()</code>, ponieważ powoduje zmianę strony, ponownie uruchamiając zdarzenia, więc musisz się upewnić, że obsługujesz ten przypadek.</li> +</ol> + +<p>Na przykład tu mamy zbiór stron kreatora (wewnętrzna zawartość została pominięta):</p> + +<pre><wizardpage pageid="type" next="font"> +<wizardpage pageid="font" next="done"> +<wizardpage pageid="color" next="done"> +<wizardpage pageid="done"> +</pre> + +<p>Kreator zawsze zaczyna się od pierwszej strony, którą w tym przypadku ma ID strony <code>type</code>. Następna strona jest stroną z ID strony <code>font</code>, więc kreator będzie nawigował do kolejnej strony. Na stronie z ID strony <code>font</code>, widzimy, że kolejna strona to <code>done</code>, więc ta strona będzie wyświetlona później Strona z ID strony <code>done</code> nie ma atrybutu <code>next</code>, więc będzie to ostatnia strona. Skrypt będzie modyfikował atrybut <code>next</code>, jeśli to konieczne do pójścia do strony z ID strony <code>color</code> kiedy to potrzebne.</p> + +<h2 id="Funkcje_kreatora" name="Funkcje_kreatora">Funkcje kreatora</h2> + +<p>Kreator pracuje podobnie <a href="pl/Kurs_XUL/Pude%c5%82ko_kart">jak panel kart</a>, z wyjątkiem tego, że karty nie są wyświetlane, a użytkownik przechodzi pomiędzy stronami używając przycisków ułożonych na dole. Ponieważ wszystkie strony są częścią tego samego pliku, wszystkie wartości tych pól na wszystkich stronach będą zapamiętane. Zatem, nie musisz wczytywać i zapisywać informacji pomiędzy stronami.</p> + +<p>Jednakże, możesz chcieć wykonać sprawdzanie każde pole na każdej stronie. Do tego użyj funkcji obsługi opisanych w poprzednim rozdziale. Jeśli pole jest niepoprawne, możesz wyświetlić alarm. W pewnych przypadkach byłoby bardziej dogodne zablokować przycisk Next dopóki ie zostanie wprowadzona poprawna wartość.</p> + +<p>Kreator ma własność <code>canAdvance</code>, która może być ustawiona na prawdę do wskazania, że przycisk Next powinien być włączony. Jeśli ustawimy ją na fałsz, przycisk Next będzie zablokowany. Możesz zmienić tą własność kiedy niepoprawna lub poprawna dana zostanie wprowadzona.</p> + +<p>W poniższym przykładzie, użytkownik musi wprowadzić tajny kod do pola tekstowego na pierwszej stronie kreatora. Funkcja checkCode() jest wywoływana kiedy pierwsza strona jest pokazywana jako wskazywana przez atrybut <code>onpageshow</code>. Jest również wywoływane, kiedy jest naciśnięty klawisz w polu tekstowym, określającym czy przycisk Next powinien ponownie być włączony.</p> + +<h3 id="Przyk.C5.82ad_kreatora" name="Przyk.C5.82ad_kreatora">Przykład kreatora</h3> + +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_advwiz_1.xul.txt">Źródła</a></p> + +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> + +<wizard id="theWizard" title="Secret Code Wizard" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<script> +function checkCode(){ + document.getElementById('theWizard').canAdvance = (document.getElementById('secretCode').value == "cabbage"); +} +</script> + + <wizardpage onpageshow="checkCode(); return true;"> + <label value="Enter the secret code:"/> + <textbox id="secretCode" onkeyup="checkCode();"/> + </wizardpage> + + <wizardpage> + <label value="That is the correct secret code."/> + </wizardpage> + +</wizard> +</pre> + +<p>Jest również odpowiednia własność <code>canRewind</code>, której możesz użyć do włączenia lub wyłączenia przycisku Back. Obie własności są modyfikowane automatycznie kiedy przełączasz strony. Zatem, przycisk Back będzie wyłączony na pierwszej stronie, więc nie musisz ustawiać go sam.</p> + +<p>Inna użyteczną własnością kreatora jest <code>currentPage</code>, która przechowuje odniesienie do aktualnie wyświetlanego <code>wizardpage</code>. Możesz również modyfikować bieżąca stronę przez zmianę tej własności. Jeśli zmienisz ją, będzie uruchomione kilka zdarzeń zmian strony.</p> + +<p>W kolejnym artykule dowiemy się jak stosować <a href="pl/Kurs_XUL/Nak%c5%82adki">nakładki do obsługi wspólnej zawartości</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Tworzenie_kreatora" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Nakładki">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/dodatkowe_możliwości_menu/index.html b/files/pl/mozilla/tech/xul/kurs_xul/dodatkowe_możliwości_menu/index.html new file mode 100644 index 0000000000..7c64ec271e --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/dodatkowe_możliwości_menu/index.html @@ -0,0 +1,121 @@ +--- +title: Dodatkowe możliwości menu +slug: Mozilla/Tech/XUL/Kurs_XUL/Dodatkowe_możliwości_menu +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/More_Menu_Features +--- +<p> +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Proste_paski_menu" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Wyskakuj%C4%85ce_menu">Następny »</a></p> +</div> +<p></p><p>W tym artykule zobaczymy, jak utworzyć podmenu i zaznaczyć jego elementy. +</p> +<h3 id="Tworzenie_podmenu" name="Tworzenie_podmenu"> Tworzenie podmenu </h3> +<p>Możemy tworzyć podmenu wewnątrz innych menu (zagnieżdżając się w menu) stosując istniejące elementy. Pamiętaj, że możemy umieszczać elementy do wewnątrz elementu <code>menupopup</code>. Widzieliśmy już wcześniej, jak umieścić pozycje menu (<code>menuitem</code>) i separatory (<code>menuseparator</code>) w wyskakującym menu (<code>menupopup</code>). Jednakże możemy tworzyć podmenu poprzez proste umieszczenie elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code></code> wewnątrz elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code>. Będzie ono nam działało, ponieważ element menu można tworzyć nawet wtedy, gdy nie jest ono bezpośrednio umieszczone wewnątrz paska menu. Przykład poniżej tworzy proste podmenu wewnątrz menu <tt>Plik</tt>: +</p><p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_1.xul">Podgląd</a> +</p> +<div class="float-right"><img alt="grafika:menubar-ex3.png"></div> +<pre><toolbox flex="1"> + <menubar id="sample-menubar"> + <menu id="file-menu" label="Plik"> + <menupopup id="file-popup"> + <menu id="new-menu" label="Nowy"> + <menupopup id="new-popup"> + <menuitem label="Okno"/> + <menuitem label="Wiadomość"/> + </menupopup> + </menu> + <menuitem label="Otwórz"/> + <menuitem label="Zapisz"/> + <menuseparator/> + <menuitem label="Zakończ"/> + </menupopup> + </menu> + </menubar> +</toolbox> +</pre> +<div class="highlight"> +<h3 id="Dodawanie_menu_do_przyk.C5.82adu_Znajd.C5.BA_pliki" name="Dodawanie_menu_do_przyk.C5.82adu_Znajd.C5.BA_pliki"> Dodawanie menu do przykładu <code>Znajdź pliki</code> </h3> +<p>Dodajmy menu do okienka dialogowego <tt>Znajdź pliki</tt> poprzez wstawienie kilku prostych komend do menu <tt>Plik</tt> i <tt>Edycja</tt>. Podobnie jak w przykładzie powyżej. +</p> +<pre class="eval"><toolbox> + + <span class="highlightred"><menubar id="findfiles-menubar"> + <menu id="file-menu" label="Plik" accesskey="P"> + <menupopup id="file-popup"> + <menuitem label="Otwórz szukanie..." accesskey="O"/> + <menuitem label="Zapisz szukanie..." accesskey="s"/> + <menuseparator/> + <menuitem label="Zakończ" accesskey="k"/> + </menupopup> + </menu> + <menu id="edit-menu" label="Edycja" accesskey="E"> + <menupopup id="edit-popup"> + <menuitem label="Wytnij" accesskey="W"/> + <menuitem label="Kopiuj" accesskey="K"/> + <menuitem label="Wklej" accesskey="l" disabled="true"/> + </menupopup> + </menu> + </menubar></span> + +<toolbar id="findfiles-toolbar> +</pre> +<div class="float-right"><img alt="grafika:menubar1.png"></div> +<p>Dodaliśmy dwa menu z różnymi poleceniami. Jak można zauważyć, pasek menu został dodany do paska zadań. W naszym przykładzie po <tt>Otwórz szukanie...</tt> i <tt>Zapisz szukanie...</tt> znajdują się trzy kropki, co według ogólnie przyjętej konwencji wskazuje, że po kliknięciu tych poleceń, otworzy się kolejne okienko dialogowe. Do każdego menu oraz elementu menu został dodany skrót klawiszowy, co spowodowało podkreślenie danej litery skrótu klawiaturowego w etykiecie polecenia, litera ta wywołuje dane polecenie i jest równoważna z kliknięciem w pozycję menu za pomocą kursora. Polecenie <tt>Wklej</tt> zostało wyłączone (<i>disabled</i>), ponieważ zakładamy, że nie mamy jeszcze czego wklejać. +</p><p>Nasz przykład: Okno dialogowe <tt>Znajdź pliki</tt>: <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-advmenu.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-advmenu.xul">Podgląd</a> +</p> +</div> +<h3 id="Dodawanie_zaznaczania_w_menu" name="Dodawanie_zaznaczania_w_menu"> Dodawanie zaznaczania w menu </h3> +<p>Wiele aplikacji posiada pozycje menu, które są zaznaczone. Na przykład, właściwość, która jest włączona, posiada obok polecenia zaznaczenie, natomiast właściwość, która jest wyłączona nie posiada tego zaznaczenia. Kiedy użytkownik zaznaczy menu, pole zaznaczenia jest włączone. Możemy także utworzyć przyciski opcji i pozycje menu. </p><p>Zaznaczenia są tworzone w podobny sposób jak elementy <code><a href="/pl/docs/Mozilla/Tech/XUL/checkbox" title="checkbox">checkbox</a></code> i <code><a href="/pl/docs/Mozilla/Tech/XUL/radio" title="radio">radio</a></code>. Wymagają one zaangażowania do zastosowania dwóch atrybutów: <code><a href="pl/XUL/Atrybut/button.type">type</a></code>, aby zdefiniować typ zaznaczenia oraz <code><a href="pl/XUL/Atrybut/menuitem.name">name</a></code>, aby możliwe było pogrupowanie razem poleceń. +</p> +<h5 id="Przyk.C5.82adowe_menu_z_zaznaczonymi_pozycjami" name="Przyk.C5.82adowe_menu_z_zaznaczonymi_pozycjami"> Przykładowe menu z zaznaczonymi pozycjami </h5> +<p><span id="Przyk%C5%82ad_2"><a id="Przyk%C5%82ad_2"></a><strong>Przykład 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_2.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_2.xul">Podgląd</a> +</p> +<pre><toolbox> + <menubar id="options-menubar"> + <menu id="options_menu" label="Opcje"> + <menupopup> + <menuitem id="backups" label="Zrób kopię zapasową" type="checkbox"/> + <menuitem id="backups" label="E-mail administratora" type="checkbox" checked="true"/> + </menupopup> + </menu> + </menubar> +</toolbox> +</pre> +<p><br> +</p> +<div class="float-right"><img alt="grafika:menubar-ex00.png"></div> +<p>Dzięki dodaniu atrybutu <code><a href="pl/XUL/Atrybut/button.type">type</a></code> z wartością ustawioną na <code>checkbox</code> element menu może zostać zaznaczony lub odznaczony, po kliknięciu pozycji w menu przez użytkownika. </p><p>Oprócz zwyczajnego zaznaczenia możemy również ustawić wartość atrybutu <code><a href="pl/XUL/Atrybut/button.type">type</a></code> na <code>radio</code>. Stosuje się go po to, aby spośród kilku elementów była możliwość wybrania tylko jednej pozycji na raz. Przykładem może być menu z różnymi czcionkami, gdzie może być zastosowany tylko jeden krój czcionki. Jeśli zostanie wybrana inna czcionka, to poprzednia stanie się automatycznie nieaktywna. +</p><p>W celu pogrupowania elementów menu należy do każdej z pozycji menu dodać atrybut <code><a href="pl/XUL/Atrybut/menuitem.name">name</a></code>, o takiej samej wartości string. Poniżej przykład nam to zademonstruje: +</p> +<h5 id="Przyk.C5.82adowe_menu_z_opcjami" name="Przyk.C5.82adowe_menu_z_opcjami"> Przykładowe menu z opcjami </h5> +<p><span id="Przyk%C5%82ad_3"><a id="Przyk%C5%82ad_3"></a><strong>Przykład 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_3.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_3.xul">Podgląd</a> +</p> +<div class="float-right"><img alt="grafika:menubar-ex000.png"></div> +<pre><toolbox> + <menubar id="planets-menubar"> + <menu id="planet-menu" label="Planety"> + <menupopup> + <menuitem id="jupiter" label="Jowisz" type="radio" name="ringed"/> + <menuitem id="saturn" label="Saturn" type="radio" name="ringed" checked="true"/> + <menuitem id="uranus" label="Uran" type="radio" name="ringed"/> + <menuseparator/> + <menuitem id="earth" label="Ziemia" type="radio" name="inhabited" checked="true"/> + <menuitem id="moon" label="Księżyc" type="radio" name="inhabited"/> + </menupopup> + </menu> + </menubar> +</toolbox> +</pre> +<p>W powyższym przykładzie znajdują się trzy pierwsze pozycje menu, z których tylko jedna może być zaznaczona. Są one zgrupowane wszystkie razem, ponieważ mają tę samą nazwę. Ostatni element <tt>Ziemia</tt>, podobnie jak przycisk opcji, nie jest częścią tej grupy, ponieważ posiada inną nazwę niż elementy z wcześniejszej grupy. +</p><p>Oczywiście wszystkie elementy są zgrupowane w tym samym menu. Nie muszą one być umieszczone obok siebie, lecz, jeśli tak nie jest, to nie ma to większego sensu. </p><p>W następnym artykule zostanie pokazane, jak <a href="pl/Kurs_XUL/Wyskakuj%c4%85ce_menu">utworzyć menu wyskakujące</a>. +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Proste_paski_menu" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Wyskakuj%C4%85ce_menu">Następny »</a></p> +</div> +<p></p><p><br> +</p> +<div class="noinclude"> +</div> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/dodatkowe_możliwości_przycisku/index.html b/files/pl/mozilla/tech/xul/kurs_xul/dodatkowe_możliwości_przycisku/index.html new file mode 100644 index 0000000000..20bf9d2bb1 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/dodatkowe_możliwości_przycisku/index.html @@ -0,0 +1,84 @@ +--- +title: Dodatkowe możliwości przycisku +slug: Mozilla/Tech/XUL/Kurs_XUL/Dodatkowe_możliwości_przycisku +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/More_Button_Features +--- +<p> +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Zastosowanie_odstępów" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Model_pudełkowy">Następny »</a></p> +</div> +<p></p><p>W tym artykule poznamy kilka dodatkowych własności przycisków. +</p> +<h3 id="Dodawanie_obrazka" name="Dodawanie_obrazka"> Dodawanie obrazka </h3> +<p>Możemy dodać obrazek do przycisku poprzez określenie adresu URL w atrybucie <code><code id="a-image"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/image">image</a></code></code>. Obrazek jest wczytany z podanego URL, który może być względnym lub bezwzględnym adresem URL. Wczytany obrazek jest wyświetlony na przycisku. +</p> +<h4 id="Przycisk_z_obrazkiem" name="Przycisk_z_obrazkiem"> Przycisk z obrazkiem </h4> +<p>Przycisk poniżej posiada dwa atrybuty: <code><code id="a-label"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/label">label</a></code></code> i <code><code id="a-image"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/image">image</a></code></code> (obrazek 'happy.png'). Obrazek będzie znajdował się z lewej strony etykiety. Możemy zmienić pozycję za pomocą dwóch innych atrybutów. Zostanie to wyjaśnione za chwilę. </p><p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_1.xul">Podgląd</a> +</p> +<pre><button label="Pomoc" image="happy.png"/> +</pre> +<p>Innym sposobem do określenia obrazka jest zastosowanie własności stylu CSS <code><a href="/pl/docs/Web/CSS/list-style-image" title="{{ CSSRef() }}"><code>list-style-image</code></a></code> w przycisku. Zaprojektowane jest to w taki sposób, że pozwala zmienić 'skórkę' (w tym przypadku wygląd obrazka) bez zmiany pliku XUL. Przykład pokazany został poniżej. +</p> +<h4 id="Przycisk_z_obrazkiem_w_CSS" name="Przycisk_z_obrazkiem_w_CSS"> Przycisk z obrazkiem w CSS </h4> +<p><span id="Przyk%C5%82ad_2"><a id="Przyk%C5%82ad_2"></a><strong>Przykład 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_2.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_2.xul">Podgląd</a> +</p> +<div class="float-right"><img alt="Grafika:advbtns00-ex.png"></div> +<pre><button id="find-button" + label="Znajdź" style="list-style-image: url('happy.png')"/> +</pre> +<p>W tym przypadku obrazek 'happy.png' jest wyświetlony na przycisku. Atrybut <code><code id="a-style"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/style">style</a></code></code> funkcjonuje podobnie jak jego odpowiednik z języka HTML. Ogólnie możemy go zastosować do wszystkich elementów XUL. Zwróć uwagę na deklarację stylów, które powinno się w rzeczywistości umieszczać w osobnym pliku arkusza stylów. +</p> +<h3 id="Pozycjonowanie_obrazk.C3.B3w" name="Pozycjonowanie_obrazk.C3.B3w"> Pozycjonowanie obrazków </h3> +<p>Domyślnie obrazek na przycisku wyświetla się z lewej strony tekstu etykiety. Są dwa atrybuty, które mogą być zastosowane do ustawienia pozycji poszczególnych elementów. +</p><p>Atrybut <code><code id="a-dir"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/dir">dir</a></code></code> steruje kierunkiem obrazka i tekstu. Poprzez ustawienie tego atrybutu na wartość <code>reverse</code> obrazek zostanie umieszczony z prawej strony tekstu. Stosując wartość <code>normal</code> lub w ogóle nie stosując żadnego atrybutu, obrazek zostanie umieszczony z lewej strony tekstu. +</p><p>Atrybut <code><code id="a-orient"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/orient">orient</a></code></code> możemy zastosować do umieszczenia obrazka powyżej lub poniżej tekstu. Domyślną wartością jest <code>horizontal</code>, który stosujemy do umieszczenia obrazka z prawej lub lewej strony tekstu. Możemy także zastosować wartość <code>vertical</code>, aby umieścić obrazek powyżej lub poniżej tekstu. W tym przypadku atrybut <code>dir</code> steruje położeniem powyżej lub poniżej tekstu. Takie same wartości są stosowane tam, gdzie <code>normal</code> oznacza umieszczenie obrazka powyżej tekstu, a <code>reverse</code> oznacza umieszczenie obrazka poniżej tekstu. </p><p><span id="Przyk%C5%82ad_3"><a id="Przyk%C5%82ad_3"></a><strong>Przykład 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_3.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_3.xul">Podgląd</a> +</p> +<div class="float-right"><img alt="Grafika:advbtns1.png"></div> +<pre><button label="Z lewej" image="happy.png"/> +<button label="Z prawej" image="happy.png" dir="reverse"/> +<button label="Powyżej" image="happy.png" orient="vertical"/> +<button label="Poniżej" image="happy.png" orient="vertical" dir="reverse"/> +</pre> +<p>Użyty tutaj przykład pokazuje wszystkie cztery typy ustawienia przycisków. Zwracamy uwagę, że dwa atrybuty nie są określone, gdyż można w nich zastosować wartości domyślne. +</p> +<h3 id="Przyciski_z_dodatkow.C4.85_zawarto.C5.9Bci.C4.85" name="Przyciski_z_dodatkow.C4.85_zawarto.C5.9Bci.C4.85"> Przyciski z dodatkową zawartością </h3> +<p>Przyciski mogą zawierać dowolny zestaw znaków wewnątrz siebie i będą one interpretowane wewnątrz przycisku. Prawdopodobnie nie będziesz bardzo często ich stosował, ale będziesz mógł je zastosować w momencie tworzenia zwykłych elementów. +</p><p>Na przykład, utworzymy następujący przycisk, w którym dwa słowa będą koloru czerwonego: +</p><p><span id="Przyk%C5%82ad_4"><a id="Przyk%C5%82ad_4"></a><strong>Przykład 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_4.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_4.xul">Podgląd</a> +</p> +<div class="float-right"><img alt="grafika:advbtns0-ex.png"></div> +<pre><button> + <description value="To jest"/> + <description value="nieco inny" style="color: red;"/> + <description value="przycisk"/> +</button> +</pre> +<p>Dowolny element XUL możemy umieścić wewnątrz przycisku (<code><code><a href="/pl/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code>). Elementy HTML-a będą ignorowane, więc musimy je dołożyć do wewnątrz elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code>. Jeśli określimy na przycisku atrybut <code><code id="a-label"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/label">label</a></code></code>, nałoży się ona na jakąkolwiek zawartość umieszczoną wewnątrz przycisku. +</p><p>Możemy umieścić <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> wewnątrz przycisku powodując pojawianie się menu rozwijanego w momencie, gdy przycisk zostanie naciśnięty, podobnie jak <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code>. Jednakże w tym przypadku musimy ustawić atrybut <code><a href="pl/XUL/Atrybut/button.type">type</a></code> o wartości <code>menu</code>. +</p> +<h5 id="Przycisk_z_menupopup" name="Przycisk_z_menupopup"> Przycisk z <code>menupopup</code> </h5> +<p><span id="Przyk%C5%82ad_5"><a id="Przyk%C5%82ad_5"></a><strong>Przykład 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_5.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_5.xul">Podgląd</a> +</p> +<div class="float-right"><img alt="grafika:advbtns2.png"></div> +<pre><button type="menu" label="Urządzenia"> + <menupopup> + <menuitem label="Drukarka"/> + <menuitem label="Myszka"/> + <menuitem label="Klawiatura"/> + </menupopup> +</button> +</pre> +<p>W tym przykładzie użytkownik może kliknąć przycisk, po czym pojawi się menu rozwijane zawierające trzy pozycje. Zwróć uwagę, że zaznaczenie jednej z tych pozycji menu nie zmieni etykiety na przycisku, nie tak jak <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code>. Ten typ przycisku jest przeznaczony do zastosowania podobnego do menu, ze skryptami dołączonymi do każdej pozycji wykonującej zadane zadanie. Zobaczymy więcej później w menu. +</p><p>Możemy także ustawić atrybut <code><a href="pl/XUL/Atrybut/button.type">type</a></code> o wartości <code>menu-button</code>. Również utworzymy przycisk z menu, ale wygląd będzie miał inny. <span class="comment">Obrazek z prawej pokazuje te różnice.</span> Z lewej jest <code>menu</code>, a z drugiej strony jest <code>menu-button</code>. Posiada on strzałkę sygnalizującą obecność menu. Dla <code>menu</code> użytkownik może kliknąć gdziekolwiek na przycisku, aby pokazać menu. Dla <code>menu-button</code> użytkownik musi kliknąć strzałkę, aby pokazało się menu. +</p><p>W następnym artykule poznamy więcej szczegółów nt. <a href="pl/Kurs_XUL/Model_pude%c5%82kowy">pozycjonowania elementów XUL w oknie</a>. +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Zastosowanie_odstępów" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Model_pudełkowy">Następny »</a></p> +</div> +<p></p><p><br> +</p> +<div class="noinclude"> +</div> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/dodawanie_arkuszy_stylów/index.html b/files/pl/mozilla/tech/xul/kurs_xul/dodawanie_arkuszy_stylów/index.html new file mode 100644 index 0000000000..08b9168eb7 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/dodawanie_arkuszy_stylów/index.html @@ -0,0 +1,165 @@ +--- +title: Dodawanie arkuszy stylów +slug: Mozilla/Tech/XUL/Kurs_XUL/Dodawanie_arkuszy_stylów +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Style_Sheets +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Trwałe_dane" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Nadawanie_stylu_drzewa">Następny »</a></p> +</div><p></p> + +<p>Posiadamy zmodyfikowany widok elementów, stworzonych wcześniej. XUL używa CSS (Kaskadowe arkusze stylów) do dostosowania swoich elementów.</p> + +<h2 id="Arkusze_styl.C3.B3w" name="Arkusze_styl.C3.B3w">Arkusze stylów</h2> + +<p>Arkusz stylów jest plikiem zawierającym informację na temat stylu danego elementu. Jest to oryginalnie zaprojektowany element HTML lub potrafiący być dodanym tylko do elementów XUL, oraz posiada odwołanie do XML-a. Arkusz stylów zawiera informacje dotyczące; czcionki, kolorów, obramowania i rozmiarów elementów.</p> + +<p>Mozilla stosuje domyślne arkusze stylów, dla każdego okna XUL. W wielu przypadkach to będzie wystarczający powód wyłączenia tego ustawienia jako domyślnego. W przyszłości, użytkownik będzie miał możliwość dodania arkusz stylów. Generalnie, będziemy łączyć jeden plik arkusza stylów z każdym plikiem XUL.</p> + +<p>Możesz wstawiać arkusze stylów, gdziekolwiek sobie życzysz. Jeśli Wasz plik XUL jest przechowywany i posiadasz dojście do HTTP URL, możesz przechować działający arkusz stylów. Jeśli tworzysz paczkę XUL, to zostanie ona zainstalowana jako część systemu chrome, masz dwie możliwości. Pierwsza, możesz magazynować arkusz stylów w tym samym katalogu co plik XUL. Ta metoda jest wadliwa, ponieważ znaczy to, że twoja nie będzie zdolna być motywem. Druga metoda angażuje położenie twoich plików jako część tematu.</p> + +<div class="highlight"> +<p>Podsumujmy, co zbudowaliśmy i jakie zdolności zostały zawarte w oknie dialogowym "Znajdź pliki", ponieważ okno dialogowe Znajdź pliki kieruje do adresu URL <code><a class="external" rel="freelink">chrome://findfile/content/findfile.xul</a></code>, więc plik arkusza stylów będzie magazynowany w <code><a class="external" rel="freelink">chrome://findfile/skin/findfile.css</a></code>.</p> +</div> + +<p>Wszystkie przykłady umieszczono dalej, aktualnie zostały one użyte już jako arkusz stylów:</p> + +<pre><?xml-stylesheet href="chrome://global/skin/" type="text/css"?> +</pre> + +<p>Linia ta sygnalizuje użycie stylu pobranego z <a class="external" rel="freelink">chrome://global/skin/</a>. W Mozilli, może zostać przetłumaczone jako plik global.css, który stanowi domyślny styl informacji dla elementu XUL. Możesz tą linię usunąć i elementy wciąż będą pracowały, jednakże będą wyglądały raczej dobrze. Arkusz stylów nakłada rozmaite czcionki, kolory i obramowania do tworzenia elementów wyglądających bardziej odpowiednio.</p> + +<h2 id="Zmieniamy_style" name="Zmieniamy_style">Zmieniamy style</h2> + +<p>Jednakże, zdążają się sytuacje kiedy domyślny wygląd elementów nie da pożądanych przez nas efektów. W takiej sytuacji, będziemy musieli dodać własny arkusz stylów. Tak więc, dodamy style używając do tego atrybut <code><code id="a-style"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/style">style</a></code></code> elementu. Wykonanie tego, nie jest najlepszym sposobem na dodanie stylu. Lepszym sposobem, od poprzedniego będzie utworzenie osobnego pliku arkusza stylów. Powodem jest inny wygląd, lub skóra, może zostać wczytana w prosty sposób.</p> + +<p>W pewnych sytuacjach, gdzie klasa atrybutu <code><code id="a-style"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/style">style</a></code></code> jest dopuszczalna. Przykładem mógł być moment kiedy skrypt zmienia style lub gdzie różnice w layoucie mogą znaczyć zmienić zachowanie lub przeznaczenie elementu. Jednakże powinieneś unikać tego bardzo jako of the element.</p> + +<p>Dla zainstalowanych plików, utwórz lub zmodyfikuj listę plików i zainstaluj motyw.</p> + +<h3 id="Przyk.C5.82ad_okna_dialogowego:_Znajd.C5.BA_pliki" name="Przyk.C5.82ad_okna_dialogowego:_Znajd.C5.BA_pliki">Przykład okna dialogowego: <tt>Znajdź pliki</tt></h3> + +<div class="highlight"> +<p>Zmodyfikujmy okno dialogowe <tt>Znajdź pliki</tt>, tak więc style pochodzą z oddzielonego pliku stylów. Po pierwsze, zmodyfikowane linie w pliku findfile.xul:</p> + +<pre class="eval"><span class="highlightred"><?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?></span> +<?xml-stylesheet href="findfile.css" type="text/css"?> + ... +<span class="highlightred"><spacer class="titlespace"/></span> + <groupbox orient="horizontal"> + <span class="nowiki"><caption label="Search Criteria"/></span> + + <menulist id="searchtype"> + <menupopup> + <menuitem label="Name"/> + <menuitem label="Size"/> + <menuitem label="Date Modified"/> + </menupopup> + </menulist> + <span class="highlightred"><spacer class="springspace"/></span> + <menulist id="searchmode"> + <menupopup> + <menuitem label="Is"/> + <menuitem label="Is Not"/> + </menupopup> + </menulist> + + <span class="highlightred"><spacer class="springspace"/> + <menulist id="find-text" flex="1"</span> + editable="true" + datasources="<a class="external" rel="freelink">file:///mozilla/recents.rdf</a>" + ref="<span class="nowiki">http://www.xulplanet.com/rdf/recent/all</span>"/> + ... +<span class="highlightred"><spacer class="titlespace"/> +<hbox> + + <progressmeter id="progmeter" value="50%" style="display:none;"/></span> +</pre> + +<p>Nowa linia kodu <code>xml-stylesheet</code> jest użyta do importu arkusza stylów. Zawiera on style, które umieszczamy w pliku arkusza stylów, zamiast umieszczania ich w pliku XUL. Możemy użyć dowolną liczbę arkuszy stylów w podobny sposób jak przedstawione było wcześniej. Arkusz stylów umieszczamy w tym samym katalogu co plik findfile.xul.</p> + +<p>Niektóre style znajdujące sie w kodzie powyżej zostały usunięte. Jeden nie wyświetlił (<code>display</code>) własności przez <code>progressmeter</code>. Zostanie zmieniony skrypt znajdującego się po lewej stronie, dlatego że nie miałoby to większego sensu wyświetlanie paska początkowego postępu. Wciąż umieszczamy style w osobnym pliku arkuszy stylów, jeśli Ci jest to potrzebne. Klasę (<code>class</code>) dodajemy do zawartości tagów, przy których możemy zdefiniować style.</p> + +<p>Arkusz stylów także musi zostać utworzony. Stwórz plik findfile.css, w tym samym katalogu co plik XUL (to jest normalne, gdy położymy je do innych motywów). W pliku zadeklarujemy style, tak jak jest to pokazane poniżej.</p> + +<pre>#find-text { + min-width: 15em; +} + +#progmeter { + margin: 4px; +} + +.springspace { + width: 10px; +} + +.titlespace { + height: 10px; +} +</pre> + +<p>Zauważ, że znajdujące się tutaj pliki stylów są równoważne do plików jakie mieliśmy wcześniej. Jednakże, jest to bardzo proste dla każdej osoby zmieniającej widok okienka dialogowego <tt>Zajdź pliki</tt>, ponieważ one nie dodają oraz modyfikują deklarację stylów, wcześniej modyfikowany plik oraz zmiana motywów. Jeśli użytkownik nie zmienia pliku lub zmienionych motywów, a zmieni się on w pliku motywy. Jeśli zmienimy, interfejs zawierający motywy, pliki w innych katalogach zawierających motywy.</p> +</div> + +<h2 id="Importowanie_arkuszy_styl.C3.B3w" name="Importowanie_arkuszy_styl.C3.B3w">Importowanie arkuszy stylów</h2> + +<p>Tymczasem zobacz, jak importować arkusze stylów. Przykład poniżej przestawia:</p> + +<pre><?xml-stylesheet href="chrome://bookmarks/skin/" type="text/css"?> +</pre> + +<p>To mogłaby być pierwsza linia zakładki okna. To importuje zakładki arkuszy stylów, które są w bookmarks.css. System motywów Mozilli jest wystarczająco eleganckiej sylwetki, która jest użyta w arkuszu stylów, ponieważ specyficzna nazwa pliku nie jest tutaj zasygnalizowana. Mamy zrobione coś podobnego jak globalny plik arkusza stylów (<a class="external" rel="freelink">chrome://global/skin</a>).</p> + +<p>Arkusz stylów może importować style z innego arkusza używając dyrektywy import. Zazwyczaj importujemy jeden arkusz stylów z każdego pliku XUL. Arkusz stylu globalnego potrafi być importowany wraz z arkuszem stylów łączącym się z plikiem XUL. Wykonanie tego wymaga zrobienia kodu jak poniżej, uznającego Tobie usunięty kod, importowany z pliku XUL:</p> + +<pre class="eval"><b>Style import from XUL:</b> +<?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?> + +<b>Style import from CSS:</b> +@import url(<a class="external" rel="freelink">chrome://global/skin/</a>); +</pre> + +<p>Druga składnia jest preferowana, ponieważ redukuje to liczbę uzależnień samemu sobie wobec pliku XUL.</p> + +<div class="highlight"> +<p>Usuń z pliku findfile.xul import globalnego arkusza stylów i dodaj import findfile.css</p> +</div> + +<p>Wszystkie elementy mogą być formatowane stylami używając <a href="pl/CSS">CSS</a>. Możesz użyć selektorów do zaznaczenia elementów, które sobie życzysz formatować za pomocą stylów (selektory to część przed kędzierzawą klamrą w zasadach stylów). Idąc na przód w tabeli podsumowanie dostępnych selektorów:</p> + +<dl> + <dt>button </dt> + <dd>Dopasuje wszystkie znaczniki przycisku.</dd> + <dt>#special-button </dt> + <dd>Dopasuje elementy z identyfikatorem (<code>id</code>) <code>special-button</code>.</dd> + <dt>.bigbuttons </dt> + <dd>Dopasuje wszystkie elementy z klasą (<code>class</code>) <code>bigbuttons</code>.</dd> + <dt>button.bigbuttons </dt> + <dd>Dopasuje wszystkie elementy przycisku z klasą (<code>class</code>) <code>bigbuttons</code>.</dd> + <dt>toolbar > button </dt> + <dd>Dopasuje wszystkie przyciski, które są bezpośrednio wewnątrz elementów paska narzędzi.</dd> + <dt>toolbar > button.bigbuttons </dt> + <dd>Dopasuje wszystkie elementy przycisku z klasą (<code>class</code>) <code>bigbuttons</code>, które są bezpośrednio wewnątrz elementów paska narzędzi.</dd> + <dt>button.bigbuttons:hover </dt> + <dd>Dopasuje wszystkie elementy przycisku z klasą (<code>class</code>) <code>bigbuttons</code>, lecz tylko wtedy, gdy kursor myszki znajduje się nad nim.</dd> + <dt>button#special-button:active </dt> + <dd>Dopasuje wszystkie elementy przycisku z identyfikatorem (<code>id</code>) <code>special-button</code>, lecz tylko wtedy, gdy są one aktywne (zostały kliknięte).</dd> + <dt>box[orient="horizontal"] </dt> + <dd>Dopasuje wszystkie elementy pudełka, które posiadają atrybut <code>orient</code>, który jest ustawiony na wartość <code>horizontal</code>.</dd> +</dl> + +<p>Jak kombinujesz coś z zasadami arkusza stylów, w różnych przypadkach według naszego uznania. Zawsze dobry pomysł jest precyzyjny jako prawdopodobnie wtedy kiedy specyficzny gest jest formatowana stylami. Jest to więcej efektywne i także redukcja prawdopodobieństwa taka, że twój arkusz stylów będzie źle się wyświetlał.</p> + +<div class="highlight"> +<p><span id="Przyk%C5%82ad_&lt;tt&gt;Znajd%C5%BA_pliki&lt;/tt&gt;"><a id="Przyk%C5%82ad_&lt;tt&gt;Znajd%C5%BA_pliki&lt;/tt&gt;"></a><strong>Przykład <tt>Znajdź pliki</tt></strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-style.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-style.xul">Podgląd</a></p> +</div> + +<p>W następnym artykule, zobaczymy <a href="pl/Kurs_XUL/Nadawanie_stylu_drzewa">jak zastosować style do drzew</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Trwałe_dane" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Nadawanie_stylu_drzewa">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/dodawanie_elementów_html/index.html b/files/pl/mozilla/tech/xul/kurs_xul/dodawanie_elementów_html/index.html new file mode 100644 index 0000000000..cd6f58b899 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/dodawanie_elementów_html/index.html @@ -0,0 +1,124 @@ +--- +title: Dodawanie elementów HTML +slug: Mozilla/Tech/XUL/Kurs_XUL/Dodawanie_elementów_HTML +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_HTML_Elements +--- +<p> </p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Paski_postępu" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Zastosowanie_odstępów">Następny »</a></p> +</div><p></p> +<p>Wiemy już, jak się dodaje przyciski, więc pora na dodanie kilku innych elementów.</p> +<h3 id="Dodawanie_element.C3.B3w_j.C4.99zyka_HTML_do_okna" name="Dodawanie_element.C3.B3w_j.C4.99zyka_HTML_do_okna">Dodawanie elementów języka HTML do okna</h3> +<p>Dodatkowo do wszystkich elementów XUL, które są dostępne, możemy dodać elementy języka HTML, bezpośrednio do wewnątrz pliku XUL. Aktualnie możemy zastosować dowolny element języka HTML w pliku XUL, co oznacza, że aplety Javy lub tabele mogą zostać umieszczone w naszym oknie. Powinniśmy unikać stosowania elementów HTML w plikach XUL, jeśli jest to tylko możliwe. Jednakże w tym artykule został opisany sposób ich stosowania. Zapamiętaj, że XML uwzględnia wielkość liter, więc musimy wprowadzać znaczniki oraz atrybuty z małej litery.</p> +<h4 id="Przestrze.C5.84_nazw_XHTML" name="Przestrze.C5.84_nazw_XHTML">Przestrzeń nazw XHTML</h4> +<p>Chcąc zastosować elementy języka HTML w pliku XUL, musimy zadeklarować, że to robimy, więc do tego celu stosujemy przestrzeń nazw XHTML. W ten sposób przeglądarka Mozilli będzie mogła odróżnić znaczniki HTML od znaczników XUL. Poniższy atrybut powinien zostać dodany do elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> w pliku XUL lub do znajdującego się najdalej na zewnątrz elementu HTML.</p> +<pre class="eval"><span class="nowiki">xmlns:html="http://www.w3.org/1999/xhtml"</span> +</pre> +<p>Jest to deklaracja języka HTML i jest bardzo podobna do tej, jaką zastosujemy w deklaracji XUL. Musimy ją wpisać dokładnie tak, jak pokazano poniżej, bo inaczej nie będzie ona działała poprawnie. Zwróć uwagę, że przeglądarka Mozilli nie pobierze tego adresu URL, lecz uzna go jako początek języka HTML.</p> +<p>Tu mamy przykład jaki może być dodany do okna <code>Znajdź pliki</code>:</p> +<pre class="eval"><?xml version="1.0"?> +<?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?> +<window + id="findfile-window" + title="Znajdź pliki" + orient="horizontal" + <span class="highlightred"><span class="nowiki">xmlns:html="http://www.w3.org/1999/xhtml"</span></span> + xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"> +</pre> +<p>Następnie możemy stosować znaczniki HTML trzymając się następujących reguł:</p> +<ul> + <li>Musisz dodać prefiks <code>html:</code> na początku każdego znacznika, zakładając, że zadeklarowałeś przestrzeń nazw HTML, jak zostało to pokazane powyżej.</li> + <li>Znaczniki + <i> + muszą być wprowadzone z małej litery</i> + .</li> + <li>"Cudzysłowy" muszą być umieszczone wraz ze wszystkimi wartościami atrybutów.</li> + <li>XML wymaga zamykającego znaku slash (/) na końcu znaczników, które nie posiadają żadnej zawartości. Wytłumaczone jest to w poniższym przykładzie.</li> +</ul> +<h4 id="Zastosowanie_element.C3.B3w_HTML" name="Zastosowanie_element.C3.B3w_HTML">Zastosowanie elementów HTML</h4> +<p>Możemy stosować jakikolwiek znacznik HTML, lecz niektóre znaczniki, takie jak <code>head</code> i <code>body</code>, nie są w rzeczywistości potrzebne. Przykłady zastosowania elementów HTML są pokazane poniżej:</p> +<pre><html:img src="banner.jpg"/> + +<html:input type="checkbox" value="true"/> + +<html:table> + <html:tr> + <html:td> + Prosta tabela + </html:td> + </html:tr> +</html:table> +</pre> +<p>W tym przykładzie utworzony zostanie obrazek z pliku <code>banner.jpg</code>, pole wyboru oraz pojedyncza komórka tabeli. Powinniśmy zawsze stosować własności XUL-a, jeśli są one dostępne i najprawdopodobniej nie powinniśmy stosować tabelek do układu graficznego w XUL (ponieważ są elementy XUL do tworzenia układu graficznego). Zwróć uwagę, że prefiks <code>html:</code> został dodany z przodu każdego znacznika. Dzięki temu przeglądarka Mozilli wie, że są to znaczniki HTML-a, a nie XUL-a. Jeśli opuścimy część <code>html:</code>, przeglądarka pomyśli, że element był elementem XUL i nie będą wyświetlone, ponieważ elementy img, input, table nie są poprawnymi znacznikami XUL.</p> +<p>W XUL możesz dodać etykiety za pomocą elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code> lub <code><code><a href="/pl/docs/Mozilla/Tech/XUL/label" title="label">label</a></code></code>. Powinniśmy stosować te elementy jak najczęściej. Możemy również dodawać etykiety do kontrolek poprzez zastosowanie elementu HTML - <code>label</code> lub możemy po prostu wstawiać tekst do wewnątrz innego bloku elementów HTML (takich jak <code>p</code> lub <code>div</code>) w sposób pokazany poniżej:</p> +<p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_1.xul">Podgląd</a></p> +<pre><html:p> + Szukaj dla: + <html:input id="find-text"/> + <button id="okbutton" label="OK"/> +</html:p> +</pre> +<p>Ten kod spowoduje, że będzie wyświetlony tekst <code>Szukaj dla:</code>, następnie element <code>input</code> i przycisk <code>OK</code>. Zwróć uwagę, że przycisk XUL może się pojawić wewnątrz elementu HTML, jak jest to tu pokazane. Tekst będzie tylko wyświetlony, jeśli umieścimy go wewnątrz znacznika, który normalnie pozwala na wyświetlenie tekstu (takiego znacznika jak <code>p</code>). Tekst na zewnątrz nie będzie wyświetlony, chyba że element XUL-a, w którym się on znajduje, pozwala na to (na przykład element <code>description</code>). Przykład poniżej pomoże w zrozumieniu tego:</p> +<h3 id="Przyk.C5.82ady_element.C3.B3w_HTML" name="Przyk.C5.82ady_element.C3.B3w_HTML">Przykłady elementów HTML</h3> +<p>Tutaj mamy kilka przykładów dodawania elementów HTML do okien. W każdym przypadku okno i inne zwykłe informacje zostaną pominięte dla uproszczenia przykładu.</p> +<h4 id="Okno_dialogowe_z_polem_wyboru" name="Okno_dialogowe_z_polem_wyboru">Okno dialogowe z polem wyboru</h4> +<p><span id="Przyk%C5%82ad_2"><a id="Przyk%C5%82ad_2"></a><strong>Przykład 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_2.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_2.xul">Podgląd</a></p> +<div class="float-right"> + <img alt="Grafika:htmlelem-ex1.png"></div> +<pre><html:p> + Zaznacz poniższe pole, aby zapamiętać tą decyzje. + <html:p> + <html:input id="rtd" type="checkbox"/> + <html:label for="rtd">Zapamiętaj tą decyzję</html:label> + </html:p> +</html:p> +</pre> +<p>W tym przypadku znacznik <code>p</code> został zastosowany do umieszczenia tekstu, a inne zostały zastosowane do podzielenia tekstu na wiele linii.</p> +<h4 id="Tekst_poza_blokami_HTML" name="Tekst_poza_blokami_HTML">Tekst poza blokami HTML</h4> +<p><span id="Przyk%C5%82ad_3"><a id="Przyk%C5%82ad_3"></a><strong>Przykład 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_3.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_3.xul">Podgląd</a></p> +<div class="float-right"> + <img alt="grafika:htmlelem-ex2.png"></div> +<pre><html:div> + Chciałbyś zapisać następujące dokumenty? + <html:hr/> +</html:div> +Kosztorys 1 +Co robiłem ostatniego lata +<button id="yes" label="Tak"/> +<button id="no" label="Nie"/> +</pre> +<p>Jak widać na tym obrazku, tekst wewnątrz znacznika <code>div</code> został wyświetlony, ale pozostały tekst ( + <i> + Kosztorys 1</i> + i + <i> + Co robiłem ostatniego lata</i> + ) już nie. Jest tak, ponieważ nie ma otaczającego go elementu HTML-a lub elementu XUL zdolnego do wyświetlenia tekstu. Mając taki tekst, powinniśmy wstawić go wewnątrz znacznika <code>div</code> lub otoczyć tekst znacznikiem <code>description</code>.</p> +<h4 id="Niepoprawne_zastosowanie_element.C3.B3w_HTML" name="Niepoprawne_zastosowanie_element.C3.B3w_HTML">Niepoprawne zastosowanie elementów HTML</h4> +<pre><html:po>Przypadek 1</html:po> +<div>Przypadek 2</div> +<html:description value="Przypadek 3"/> +</pre> +<p>Wszystkie powyższe trzy przypadki nie zostaną wyświetlone, każdy z innego powodu:</p> +<dl> + <dt> + Przypadek 1 </dt> + <dd> + <code>po</code> nie jest poprawnym znacznikiem HTML-a, a przeglądarka Mozilli nie wie, jak odczytać ten znacznik.</dd> + <dt> + Przypadek 2 </dt> + <dd> + <code>div</code> jest poprawny, ale tylko w HTML-u. Aby działał i tu, musimy dodać kwalifikator <code>html:</code>.</dd> + <dt> + Przypadek 3 </dt> + <dd> + Element <code>description</code> jest poprawny tylko w XUL-u, a nie w HTML-u. Nie powinniśmy mieć kwalifikatora <code>html:</code> przed tym elementem.</dd> +</dl> +<p>W następnym artykule zobaczymy, <a href="pl/Kurs_XUL/Zastosowanie_odst%c4%99p%c3%b3w">jak dodać odstęp pomiędzy elementami</a>.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Paski_postępu" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Zastosowanie_odstępów">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/dodawanie_etykiet_i_obrazków/index.html b/files/pl/mozilla/tech/xul/kurs_xul/dodawanie_etykiet_i_obrazków/index.html new file mode 100644 index 0000000000..7f9c284131 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/dodawanie_etykiet_i_obrazków/index.html @@ -0,0 +1,70 @@ +--- +title: Dodawanie etykiet i obrazków +slug: Mozilla/Tech/XUL/Kurs_XUL/Dodawanie_etykiet_i_obrazków +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Labels_and_Images +--- +<p> +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Dodawanie_przycisków" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Kontrolki_wejścia">Następny »</a></p> +</div> +<p></p><p>Artykuł przedstawia sposoby dodawania etykiet i obrazków do okna. Dodatkowo zobaczymy, jak się łączy elementy w grupy. +</p> +<h3 id="Elementy_tekstowe" name="Elementy_tekstowe">Elementy tekstowe</h3> +<p>Nie można umieścić tekstu bezpośrednio w pliku XUL bez wcześniejszego otoczenia go znacznikami, gdyż nie zostanie on wyświetlony. +</p> +<h4 id="Element_label" name="Element_label"> Element <code>label</code> </h4> +<p>Najprostszym sposobem umieszczenia tekstu w oknie jest użycie elementu <code><a href="/pl/docs/Mozilla/Tech/XUL/label" title="label">label</a></code>, w sposób przedstawiony poniżej: </p><p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_1.xul">Podgląd</a> +</p> +<pre><label value="To jest jakiś tekst"/> +</pre> +<p>Atrybut <code><code id="a-value"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/value">value</a></code></code> służy do określania tekstu, który miałby zostać wyświetlony w oknie. Tekst ten nie jest zawijany, więc zostanie wyświetlony w tylko jednej linii. Przedstawiony element jest przydatny w przypadku krótkich fragmentów tekstu. +</p> +<h4 id="Element_description" name="Element_description"> Element <code>description</code> </h4> +<p>Dłuższy tekst można umieścić pomiędzy otwierającym a zamykającym znacznikiem <code><a href="/pl/docs/Mozilla/Tech/XUL/description" title="description">description</a></code>. W przeciwieństwie do tekstu zadeklarowanego za pomocą elementu <code><a href="/pl/docs/Mozilla/Tech/XUL/label" title="label">label</a></code> i atrybutu <code>value</code>, potomek tekstu będzie łamany na wiele linii w momencie, gdy zajdzie taka potrzeba. Zmień rozmiar okna, aby zobaczyć, jak tekst zostanie zawinięty. Podobnie jak w języku HTML, nowe linie i dodatkowe białe znaki są zamieniane w pojedynczy znak odstępu. W kolejnych artykułach zobaczymy, <a href="pl/Kurs_XUL/Pozycjonowanie_element%c3%b3w">w jaki sposób można ograniczyć długość elementu</a>, więc zawijanie wierszy stanie się lepiej widoczne. +</p><p><span id="Przyk%C5%82ad_2"><a id="Przyk%C5%82ad_2"></a><strong>Przykład 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_2.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_2.xul">Podgląd</a> +</p> +<pre class="eval"><description> + Dłuższa sekcja tekstu jest wyświetlona. +</description> +</pre> +<p>Wewnątrz oba elementy <code><code><a href="/pl/docs/Mozilla/Tech/XUL/label" title="label">label</a></code></code> oraz <code><code><a href="/pl/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code> są tym samym, co znaczy, że tekst w etykietach może być zawijany, jeśli umieścisz go wewnątrz znacznika tak, że w elemencie opisu możesz korzystać z atrybutu <code><code id="a-value"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/value">value</a></code></code>. Element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/label" title="label">label</a></code></code> jest przeznaczony dla etykiety kontrolek, takich jak pola tekstowe. Element <code>description</code> przeznaczony jest dla pozostałych tekstów opisujących, takich jak tekst informacyjny u góry okna dialogowego (<code><code><a href="/pl/docs/Mozilla/Tech/XUL/dialog" title="dialog">dialog</a></code></code>). W zasadzie powinniśmy się trzymać takiego przeznaczenia. +</p> +<h4 id="Atrybut_control" name="Atrybut_control"> Atrybut <code>control</code> </h4> +<p>Możemy stosować atrybut <code><code id="a-control"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/control">control</a></code></code> do ustawienia, z którą kontrolką jest powiązana etykieta. Kiedy użytkownik kliknie w etykietę, ta kontrolka zostanie wywołana. Ustaw wartość atrybutu <code>control</code> na wartość <code><code id="a-id"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/id">id</a></code></code> elementu przycisku, który ma być wywołany. </p><p><span id="Przyk%C5%82ad_3"><a id="Przyk%C5%82ad_3"></a><strong>Przykład 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_3.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_3.xul">Podgląd</a> +</p> +<pre><label value="Kliknij tu:" control="open-button"/> +<button id="open-button" label="Otwórz"/> +</pre> +<p>W powyższym przykładzie kliknięcie na etykietę spowoduje wywołanie przycisku. +</p> +<h3 id="Obrazki" name="Obrazki">Obrazki</h3> +<p>Podobnie jak HTML XUL posiada element do wyświetlania obrazków wewnątrz okna, który odpowiednio nazwano <code><a href="/pl/docs/Mozilla/Tech/XUL/image" title="image">image</a></code>. Zwróć uwagę, że nazwa znacznika jest inna niż w języku HTML (<i>image</i> zamiast <i>img</i>). Atrybut <code><code id="a-src"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/src">src</a></code></code> określa adresu URL do pliku z obrazkiem. Przykład poniżej ilustruje jego użycie: +</p> +<pre><image src="images/banner.jpg"/> +</pre> +<p>Mimo że możesz skorzystać z podanej składni, lepszym rozwiązaniem jest używanie arkuszy stylów do określania adresu URL obrazka. W dalszej części kursu znajdziesz, jak <a href="pl/Kurs_XUL/Dodawanie_arkuszy_styl%c3%b3w">stosować arkusze stylów</a> lub często będzie pokazany przykład dla pełności opisu. Do ustawienia adresu URL obrazka możemy zastosować własności CSS <code><a href="pl/CSS/list-style-image">list-style-image</a></code>. Przykłady: </p> +<pre class="eval"><b>XUL:</b> + <image id="image1"/> + <image id="search"/> +</pre> +<pre class="eval"><b>Arkusz stylu:</b> + #image1 { + list-style-image: url("<a class=" external" rel="freelink">chrome://findfile/skin/banner.jpg</a>"); + } + + #search { + list-style-image: url("<span class="nowiki">http://example.com/images/search.png</span>"); + } +</pre> +<p>Obrazki pochodzą z katalogu chrome i należą do motywu z pakietu findfile. Ponieważ obrazki różnią się w zależności od używanego motywu, dlatego powinieneś je umieszczać w katalogu używanego motywu. +</p><p>W następnym artykule nauczymy się, jak <a href="pl/Kurs_XUL/Kontrolki_wej%c5%9bcia">dodać kilka kontrolek wejścia do naszego okna</a>. +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Dodawanie_przycisków" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Kontrolki_wejścia">Następny »</a></p> +</div> +<p></p> +<div class="noinclude"> +</div> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/dodawanie_funkcji_obsługi_zdarzenia/index.html b/files/pl/mozilla/tech/xul/kurs_xul/dodawanie_funkcji_obsługi_zdarzenia/index.html new file mode 100644 index 0000000000..0bb0004af9 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/dodawanie_funkcji_obsługi_zdarzenia/index.html @@ -0,0 +1,152 @@ +--- +title: Dodawanie funkcji obsługi zdarzenia +slug: Mozilla/Tech/XUL/Kurs_XUL/Dodawanie_funkcji_obsługi_zdarzenia +tags: + - Kurs_XUL + - Przewodniki + - Strony_wymagające_dopracowania + - Wszystkie_kategorie + - XBL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Event_Handlers_to_XBL-defined_Elements +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Dodawanie_metod" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dziedziczenie_XBL">Następny »</a></p> +</div><p></p> + +<p>Następnie, dowiemy się jak dodać uchwyt zdarzenia do definiowanego elementu XBL.</p> + +<h3 id="Uchwyt_zdarzenia" name="Uchwyt_zdarzenia">Uchwyt zdarzenia</h3> + +<p>Jak możemy się spodziewać, kliknięcie myszką, naciśnięcie klawisza i inne zdarzenia są przypisane do każdego z elementów posiadających wewnątrz pewną wartość. Jednakże, are passed to each of the elements inside the content. However, you may wish to trap the events and handle them in a special way. You can add event handlers to the elements inside the content if needed. The last example in the previous section demonstrated this. In that example, <code><code id="a-oncommand"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/oncommand">oncommand</a></code></code> handlers were added to some buttons.</p> + +<h4 id="Handler_Element" name="Handler_Element">Handler Element</h4> + +<p>However, you may want to add an event handler to the entire contents, that is, all the elements defined in the <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#content">content</a></code></code> tag. This could be useful when trapping the focus and blur events. To define an event XBLElem|handler, use the <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#handler">handler</a></code></code> element. Each will describe the action taken for a single event handler. You can use more than one handler if necessary. If an event does not match any of the <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#handler">handler</a></code></code> events, it is simply passed to the inner content as usual.</p> + +<p>Generalna składnia uchwytu wygląda następująco:</p> + +<pre><binding id="binding-name"> + <handlers> + <handler event="event-name" action="script"/> + </handlers> +</binding> +</pre> + +<p>Połóż wszystkie moje uchwyty wewnątrz elementu <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#handlers">handlers</a></code></code>. Każdy element <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#handler">handler</a></code></code> definiuje akcję pobrania szczegółowego zdarzenia określonego atrybutem <code>event</code>. Prawidłowymi typami zdarzenia są utrzymywane poprzez XUL i JavaScript, także jako <code>click</code> i <code>focus</code>. Użyj nazwy zdarzenia bez początku 'on'.</p> + +<p>A common reason to set handlers is to modify the custom properties when an event occurs. For example, a custom checkbox might have a checked property which needs to be changed when the user clicks the checkbox:</p> + +<pre><handlers> + <handler event="mouseup" action="this.checked=!this.checked"/> +</handlers> +</pre> + +<p>When the user clicks and releases the mouse button over the check box, the <code>mouseup</code> event is sent to it, and the handler defined here is called, causing the state of the checked property to be reversed. Similarly, you may wish to change a property when the element is focused. You might have a need to change whether an element can have the focus or not. For this, you can use a special style property <code>-moz-user-focus</code>. This property controls whether an element can be focused. (see <a href="pl/Kurs_XUL/Kontrola_zaznaczenia_i_aktywacji_element%c3%b3w">Kontrola zaznaczenia i aktywacji elementów</a>)</p> + +<h4 id="Handling_Mouse_Events" name="Handling_Mouse_Events">Handling Mouse Events</h4> + +<p>For mouse events, you can use the <code>button</code> attribute to have the handler only trap events that occur from a certain button. Without this attribute, the handler traps all events regardless of the button that was pressed. The <code>button</code> attribute should be set to either <code>0</code> for the left mouse button, <code>1</code> for the middle mouse button or <code>2</code> for the right mouse button.</p> + +<pre><handlers> + <handler event="click" button="0" action="alert('Left button pressed');"/> + <handler event="mouseup" button="1" action="alert('Middle button pressed')"/> + <handler event="click" button="2" action="alert('Right button pressed');"/> +</handlers> +</pre> + +<h4 id="Handling_Key_Events" name="Handling_Key_Events">Handling Key Events</h4> + +<p>For key events, you can use a number of attributes similar to those for the <code><code><a href="/pl/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> element to match a specific key and match only when certain modifer keys are pressed. The previous example could be extended so that the checked property of the check box is changed when the space bar is pressed.</p> + +<pre><handlers> + <handler event="keypress" key=" " action="this.checked=!checked"/> +</handlers> +</pre> + +<p>You can also use the <code>keycode</code> attribute to check for non-printable keys. Artykuł o <a href="pl/Kurs_XUL/Skr%c3%b3ty_klawiaturowe">skrótach klawiaturowych</a> dostarczy dodatkowych informacji. The modifier keys can be checked by adding a <code>modifiers</code> attribute. This should be set to one of the values set below:</p> + +<dl> + <dt>alt</dt> + <dd>Użytkownik musi nacisnąć klawisz Alt.</dd> +</dl> + +<dl> + <dt>control</dt> + <dd>Użytkownik musi nacisnąć klawisz Control.</dd> +</dl> + +<dl> + <dt>meta</dt> + <dd>Użytkownik musi nacisnąć klawisz Meta.</dd> +</dl> + +<dl> + <dt>shift</dt> + <dd>Użytkownik musi nacisnąć klawisz Shift.</dd> +</dl> + +<dl> + <dt>accel</dt> + <dd>Użytkownik musi nacisnąć specjalny the special modifier key that is usually used for keyboard shortcuts on their platform.</dd> +</dl> + +<p>If set, the handler is only called when the modifier is pressed. You can require multiple modifier keys by separating them with spaces.</p> + +<p>The following alternate syntax can be used when the code in a handler is more complex:</p> + +<pre><binding id="binding-name"> + <handlers> + <handler event="event-name"> + -- handler code goes here -- + </handler> + </handlers> +</binding> +</pre> + +<h3 id="Przyk.C5.82ad_uchwytu" name="Przyk.C5.82ad_uchwytu">Przykład uchwytu</h3> + +<p>Następujący przykład dodaje uchwyty kluczy, tworząc bardzo prymitywny lokalny clipboard:</p> + +<p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_xblevents_1.xml.txt">Źródła</a></p> + +<pre><binding id="clipbox"> + <content> + <xul:textbox/> + </content> + <implementation> + <field name="clipboard"/> + </implementation> + <handlers> + <handler event="keypress" key="x" modifiers="control" + action="this.clipboard=document.getAnonymousNodes(this)[0].value; document.getAnonymousNodes(this)[0].value='';"/> + <handler event="keypress" key="c" modifiers="control" + action="this.clipboard=document.getAnonymousNodes(this)[0].value;"/> + <handler event="keypress" key="v" modifiers="control" + action="document.getAnonymousNodes(this)[0].value=this.clipboard ? this.clipboard : '';"/> + </handlers> +</binding> +</pre> + +<p>The content is a single textbox. A field <code>clipboard</code> has been added to it to store the clipboard contents. This does mean that the clipboard operations are limited to this single textbox. However, each one will have its own buffer.</p> + +<p>Three handlers have been added, one for cut, one for copy and the other for paste. Each has its own keystroke that invokes it. The first handler is the cut operation and is invoked when the Control key is pressed along with the x key. The script within the <code>action</code> attribute is used to cut the text from the textbox and put it into the clipboard field. For simplicity, the entire text is cut and not just the selected text. The code works as follows:</p> + +<ol> + <li> + <pre>this.clipboard=document.getAnonymousNodes(this)[0].value; +</pre> + The first element of the anonymous content array is retrieved which gives a reference to the textbox element, which happens to be the first (and only) element within the content element. The value property is retrieved which will provide the text within the textbox. This is then assigned to the clipboard field. The result is copying the text in the textbox into this special clipboard.</li> + <li> + <pre>document.getAnonymousNodes(this)[0].value='' +</pre> + The text of the textbox is then assigned a value of a null string. This effectively clears the text in the textbox.</li> +</ol> + +<p>A copy operation is similar but does not the clear the text afterwards. Pasting is the opposite where the value of the textbox is assigned from the value in the clipboard field. If we were creating a real implementation of these clipboard keyboard shortcuts, we would probably use the real clipboard interface and handle the current selection as well.</p> + +<p>W następnym temacie, zobaczymy jak są zdefiniowane okna rozszerzeń XBL.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Dodawanie_metod" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dziedziczenie_XBL">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/dodawanie_funkcji_obsługi_zdarzeń/index.html b/files/pl/mozilla/tech/xul/kurs_xul/dodawanie_funkcji_obsługi_zdarzeń/index.html new file mode 100644 index 0000000000..f06c8be41b --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/dodawanie_funkcji_obsługi_zdarzeń/index.html @@ -0,0 +1,133 @@ +--- +title: Dodawanie funkcji obsługi zdarzeń +slug: Mozilla/Tech/XUL/Kurs_XUL/Dodawanie_funkcji_obsługi_zdarzeń +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Event_Handlers +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Przewijane_menu" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Więcej_funkcji_obsługi_zdarzeń">Następny »</a></p> +</div><p></p> + +<p>Jak dotąd, okno dialogowe <code>Znajdź pliki</code> wygląda całkiem dobrze. Nie oczyściliśmy go za bardzo, ale za to łatwo stworzony został prosty interfejs użytkownika. Następnie, pokażemy jak dodawać skrypty do naszego okna.</p> + +<h2 id="Zastosowanie_skrypt.C3.B3w" name="Zastosowanie_skrypt.C3.B3w">Zastosowanie skryptów</h2> + +<p>Aby utworzone okno dialogowe <code>Znajdź pliki</code> było funkcjonalne, potrzebujemy dodać pewne skrypty, które będą wykonane w trakcie interakcji użytkownika z oknem dialogowym. Chcielibyśmy dodać skrypt funkcji, która będzie obsługiwała przycisk <code>Znajdź</code>, przycisk <code>Anuluj</code> oraz wszystkich funkcji obsługi zdarzeń - każdego polecenia w menu. Należy wspomnieć, że korzystanie z funkcji języka <a href="pl/JavaScript">JavaScript</a>, jest podobne do tego z jakim się możemy spotkać w <a href="pl/HTML">HTML</a>.</p> + +<p>Możemy wykorzystać element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/script" title="script">script</a></code></code>, aby dołączyć skrypty do plików XUL. Możemy zagnieżdżać kod skryptu bezpośrednio w pliku XUL poprzez umieszczenie go pomiędzy otartym i zamkniętym znacznikiem <code>script</code>, ale znacznie lepiej korzystać z plików zewnętrznych, które będą wczytywane znacznie szybciej. Atrybut <code><code id="a-src"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/src">src</a></code></code> jest stosowany do odniesienia się do zewnętrznego pliku ze skryptem.</p> + +<div class="highlight"> +<h3 id="Nasz_przyk.C5.82ad:_Okno_Znajd.C5.BA_pliki" name="Nasz_przyk.C5.82ad:_Okno_Znajd.C5.BA_pliki">Nasz przykład: Okno <code>Znajdź pliki</code></h3> + +<p>Dodajmy, skrypt do okna dialogowego <code>Znajdź pliki</code>. Chociaż, że nie ma znaczenia jaką nazwę mu nadamy, plik przechowujący skrypt to zazwyczaj jest o tej samej nazwie, co pliku XUL, z tą tylko różnicą, że z rozszerzeniem <code>.js</code>. W tym przypadku użyjemy <code>findfile.js</code>. Dodamy linię poniżej zaraz za otwierającym znacznikiem <code><code><a href="/pl/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> i PRZED jakimkolwiek innym elementem.</p> + +<pre class="eval"><span class="highlightred"><script src="findfile.js"/></span> +</pre> + +<p>Plik ze skryptem stworzymy później, kiedy będziemy już wiedzieli, co chcemy umieścić wewnątrz naszego skryptu. Zdefiniujemy kilka funkcji w pliku i będziemy mogli później wywołać za pomocą funkcji obsługi zdarzeń.</p> +</div> + +<p>Możemy dołączać wiele skryptów w pliku XUL, poprzez wielokrotne zastosowanie znacznika <code>script</code>, przy czym każdy wskazywałby na inny skrypt. Adresy URL możemy stosować względne lub bezwzględne. Na przykład możemy stosować adresy URL w następujących formach:</p> + +<pre class="eval"><script src="findfile.js"/> +<script src="<a class="external" rel="freelink">chrome://findfiles/content/help.js</a>"/> +<script src="<span class="nowiki">http://www.example.com/js/items.js</span>"/> +</pre> + +<p>Ten kurs nie jest jednak próbą nauki posługiwania się językiem JavaScript, ze względu na ogromny rozmiar tego tematu, jak i łatwą dostępność odpowiednich do tego materiałów.</p> + +<div class="note">Domyślnie konsola JavaScript pokazuje tylko błędy znajdujące się w treści strony, aby wyświetlić błędy chrome JavaScriptu. Do wprowadzenia tych ustawień jest konieczna zmiana ustawień <code>javascript.options.showInConsole</code> na wartość <code>true</code>. Możemy również zmienić ustawienie <code>javascript.options.strict</code> dla debugowania. Poprzez ustawienie wartości na true, <strong>non-standard, poorly written lub syntax prone to cause logic errors are logged to the JavaScript console</strong>.</div> + +<h2 id="Odpowiadanie_na_zdarzenia" name="Odpowiadanie_na_zdarzenia">Odpowiadanie na zdarzenia</h2> + +<p>Skrypt będzie zawierał kod odpowiadający na różne zdarzenia wywoływane przez użytkownika lub inne sytuacje. Istnieje około trzydziestu różnych zdarzeń, które mogą być obsługiwane kilkoma różnymi sposobami. Typowym zdarzeniem jest to, że użytkownik naciska klawisz myszy lub klawiatury. Każdy element języka XUL posiada zdolność do wywoływania pewnych zdarzeń w różnych sytuacjach. Pewne zdarzenia są wywoływane tylko poprzez niektóre elementy.</p> + +<p>Każde zdarzenie posiada nazwę, dla przykładu; 'mousemove' jest nazwą zdarzenia, które jest wywoływane, kiedy użytkownik przeniesie kursor myszy nad element UI. XUL stosuje ten sam mechanizm zdarzeń, który jest zdefiniowany przez <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/">zdarzenia DOM</a>. Kiedy pojawia się akcja powodująca zdarzenie, taka jak; użytkownik poruszający myszką, tworzony jest obiekt zdarzenia odnoszący się do typu tego zdarzenia. Wiele rozmaitych własności jest ustawionych na obiekt zdarzenia, takich jak pozycja myszki, klawisz, który został naciśnięty i inne.</p> + +<p>Zdarzenie jest wysyłane do XUL-a fazowo:</p> + +<ul> + <li>Pierwsza faza to faza przejęcia, w której zdarzenie jest po raz pierwszy wysyłane do okna, następnie do dokumentu, kierując się za każdym przodkiem elementu XUL, gdzie wystąpiło wcześniej zdarzenie, dopóki osiągnie ten element.</li> + <li>Zdarzenie jest wysyłane do tego elementu XUL.</li> + <li>W ostatecznej fazie zdarzenie zostaje wysłane do każdego elementu z powrotem w górę, dopóki nie osiągnie po raz kolejny okna.</li> +</ul> + +<p>Możemy zareagować na zdarzenia podczas obu wspomnianych wyżej faz. Kiedy zdarzenie zakończy swoją propagacje, następuje dowolna domyślna akcja, która jest wbudowana w zachowanie elementu.</p> + +<p>Na przykład, kiedy poruszymy myszą ponad przyciskiem znajdującym się w pudełku, generowane jest zdarzenie 'mousemove' i jest ono pierwszym, które zostaje wysłane do okna, następnie do dokumentu, i w końcu do pudełka. To zakańcza fazę przejęcia. Następnie, zdarzenie 'mousemove' zostaje wysłane do przycisku. Ostateczna faza powoduje, że zdarzenie zostaje wysłane do pudełka, dokumentu oraz okna. Ostatnia faza jest odwrotnością fazy przejęcia. Warto też zaznaczyć, że niektóre zdarzenia nie wykorzystują ostatniej fazy.</p> + +<p>Możemy również dołączyć nasłuch do każdego z elementów, aby każdy z nich był w stanie nasłuchiwać zdarzenia, w trakcie każdego etapu propagacji zdarzenia. Z względu na sposób, w jaki pojedyncze zdarzenie jest przekazywane do wszystkich przodków, można dodać nasłuch do określonego elementu lub do elementu, który znajduje się wyżej w hierarchii. Naturalnie, zdarzenie dodane do elementu wyższego otrzyma powiadomienie o wszystkich elementach wewnątrz jego, natomiast zdarzenie dodane do przycisku będzie w stanie tylko odbierać zdarzenia odnoszące się do tego przycisku. Jest to użyteczne, w przypadku istnienia kilku różnych elementów, które chcielibyśmy obsłużyć poprzez zastosowanie tego samego lub podobnego kodu. <span class="comment">ok</span> Kiedy już obsłużysz zdarzenie, bez względu na to gdzie następuje propagacja zdarzenia, prawdopodobnie zechcesz powstrzymać wydarzenie od wysłania go do kolejnych elementów, zatrzymując fazę przejęcia lub wrzenia. W zależności od tego jak dodasz nasłuch zdarzenia do elementu, istnieje kilka możliwości realizacji tego zagadnienia.</p> + +<p>Najczęściej używanym zdarzeniem jest zdarzenie 'command'. Zdarzenie command jest 'odpalane' w momencie aktywacji elementu przez użytkownika, na przykład poprzez naciśnięcie przycisku, zmianę pola wyboru lub zaznaczenie jednej pozycji z menu. Zdarzenie command jest użytecznym zdarzeniem ze względu na jego zdolność do automatycznej obsługi różnych sposobów aktywacji elementów. Na przykład: zdarzenie command wystąpi bez względu na to, czy użytkownik użyje przycisku myszy, bądź też naciśnie klawisz Enter.</p> + +<p>Istnieją dwa sposoby na dodanie nasłuchu do elementu. Pierwszy, następuje poprzez użycie atrybutu, którego wartość reprezentuje skrypt. Drugi, następuje natomiast dzięki odwołaniu się do metody addEventListener dotyczącej poszczególnego elementu. Pierwsza metoda, mimo prostoty swojej implementacji jest w stanie obsługiwać jedynie zdarzenia fazy wrzenia. Druga natomiast, jest w stanie obsługiwać zdarzenia będące w dowolnej fazie i może być także używana do dodawania wielu nasłuchów zdarzenia obsługującego dany element. Wykorzystywanie atrybutów jest najczęściej stosowaną metodą dla większości zdarzeń.</p> + +<h2 id="Nas.C5.82uch_atrybutu_zdarzenia" name="Nas.C5.82uch_atrybutu_zdarzenia">Nasłuch atrybutu zdarzenia</h2> + +<p>W celu wykorzystania atrybutów, należy umieścić atrybut w elemencie, do którego chcielibyśmy dodać nasłuch jego zdarzenia. Jego nazwa powinna być nazwą samego zdarzenia poprzedzoną przedrostkiem 'on'. Przykładowo, atrybut przesyłający zdarzenie 'command' to 'oncommand'. Wartość atrybutu powinna być skryptem, który zostanie wykonany w przypadku zajścia zdarzenia. W większości przypadków kod ten jest wyjątkowo prosty i odnosi się do funkcji zdefiniowanej w oddzielnym skrypcie. Poniżej przykład odpowiedzi na wciśnięcie przycisku:</p> + +<p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_1.xul">Podgląd</a></p> + +<pre class="eval"><button label="OK" oncommand="alert('Przycisk został naciśnięty!');"/> +</pre> + +<p>Ponieważ zdarzenie 'command' będzie w fazie wrzenia, jest także możliwe, aby umieścić nasłuch zdarzenia w otaczającym je elemencie. W poniższym przykładzie, nasłuch został umieszczony w pudełku i będzie otrzymywał zdarzenia dla obu tych elementów.</p> + +<p><span id="Przyk%C5%82ad_2"><a id="Przyk%C5%82ad_2"></a><strong>Przykład 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_2.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_2.xul">Podgląd</a></p> + +<pre class="eval"><vbox oncommand="alert(event.target.tagName);"> + <button label="OK"/> + <checkbox label="Pokaż obrazki"/> +</vbox> +</pre> + +<p>W tym przykładzie, zdarzenie 'command' będzie w fazie wrzenia, począwszy od przycisku lub checkbox, aż do <code>vbox</code>, który je obsłuży. W przypadku drugiego nasłuchu (atrybut <code>oncommand</code>), który został umieszczony w przycisku, jego kod będzie wywołany w pierwszej kolejności, a dopiero po nim wywołana będzie obsługa vbox. Obsługa zdarzeń jest przekazywana, dzięki obiektom zdarzeń, jako dołączony argument nazwany 'event'. Jest to używane w celu otrzymania specyficznych informacji na temat wydarzenia. Jedną z najczęściej używanych własności jest własność 'target', która zawiera element, odnośnie którego zaszło dane wydarzenie. W poniższym przykładzie wyświetlamy alert zawierający nazwy znaczników celu (target). Cel jest zazwyczaj użyteczny, w przypadku użycia zdarzeń w fazie wrzenia, tak aby otrzymać zestaw przycisków, które wszystkie będą obsługiwane przez pojedynczy skrypt.</p> + +<p>Można zauważyć, że składnia atrybutów jest podobna do tej użytej przy obsłudze zdarzeń w dokumentach HTML. W zasadzie, obydwa HTML i XUL dzielą ten sam mechanizm zdarzeń. Jedną z ważniejszych różnic jest użycie zdarzenia 'click' (lub atrybutu <code>onclick</code>), które to często używane w HTML-u w celu obsługi funkcji zdarzeń przycisków, w XUL-u jest zastąpione zdarzeniem 'command'. XUL również posiada zdarzenie "click", jednak odnosi się ono jedynie do obsługi przycisków myszy, nie klawiatury. Powinno się unikać zdarzenia "click" korzystając z XUL-a, chyba że istnieje przypadek, w którym dany element może być obsłużony tylko za pomocą myszy.</p> + +<div class="highlight"> +<h3 id="Nasz_przyk.C5.82ad:_Okno_Znajd.C5.BA_pliki_2" name="Nasz_przyk.C5.82ad:_Okno_Znajd.C5.BA_pliki_2">Nasz przykład: Okno <code>Znajdź pliki</code></h3> + +<p>Obsługa poleceń, może zostać dodana tak do przycisku <code>Znajdź</code> i <code>Anuluj</code> występujących w naszym oknie dialogowym. Wciśnięcie przycisku <code>Znajdź</code>, powinno uruchomić proces wyszukiwania. Ponieważ nie mamy zamiaru implementować jeszcze tej części, zostawimy to na razie. Jednakże, wciśnięcie przycisku <code>Anuluj</code>, powinno zamknąć okno. Poniższy kod obrazuje sposób wykonania tego zadania. Dodajmy także podobne zdarzenie do pozycji <code>Zamknij</code> znajdującej się w menu.</p> + +<pre class="eval"><menuitem label="Zamknij" accesskey="z" <span class="highlightred">oncommand="window.close();"</span>/> +... + +<button id="cancel-button" label="Anuluj" + <span class="highlightred">oncommand="window.close();</span>"/> +</pre> + +<p>Obsługa zdarzeń została dodana do obu elementów. Atrybut oncommand został dodany do pozycji <code>Zamknij</code> znajdującej się w menu. Poprzez użycie tej specyficznej obsługi zdarzeń, użytkownik będzie w stanie zamknąć okno poprzez kliknięcie na pozycji <code>Zamknij</code> myszką lub przez jej wybór za pomocą klawiatury. Obsługa zdarzenia oncommand została także dodana do przycisku <code>Anuluj</code>.</p> +</div> + +<h2 id="Nas.C5.82uchiwanie_zdarze.C5.84_DOM" name="Nas.C5.82uchiwanie_zdarze.C5.84_DOM">Nasłuchiwanie zdarzeń DOM</h2> + +<p>Drugim sposobem dodania obsługi zdarzeń jest wywoływanie metody <code>addEventListener</code> związanej z danym elementem. Pozwala nam to na dołączenie nasłuchu zdarzenia dynamicznie i słuchanie zdarzeń podczas fazy przejęcia. Składnia jest następująca:</p> + +<p><span id="Przyk%C5%82ad_3"><a id="Przyk%C5%82ad_3"></a><strong>Przykład 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_3.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_3.xul">Podgląd</a></p> + +<pre><button id="okbutton" label="OK"/> + +<script> +function buttonPressed(event) +{ + alert('Przycisk został wciśnięty!'); +} + +var button = document.getElementById("okbutton"); +button.addEventListener('command', buttonPressed, true); +</script> +</pre> + +<p>Funkcja <code><a href="pl/DOM/document.getElementById">getElementById()</a></code> zwraca element o danym id, w tym przypadku będzie to identyfikator przycisku. Funkcja <code><a href="pl/DOM/element.addEventListener">addEventListener()</a></code> jest wywoływana w celu dodania nowego nasłuchu zdarzenia znajdującego się w fazie przejęcia. Pierwszym argumentem jest nazwa zdarzenia, do której jest przypisany nasłuch. Drugi argument to funkcja nasłuchu zdarzenia, która będzie wywoływana, kiedy zajdzie zdarzenie. Wreszcie ostatni argument powinien mieć wartość <code>true</code> dla wszystkich nasłuchiwanych zdarzeń odnoszących się do fazy przejęcia. Można także obsługiwać zdarzenia w trakcie fazy wrzenia, poprzez ustawianie wartości ostatniego argumentu na <code>false</code>. Funkcja nasłuchu zdarzenia przekazywana jako drugi argument, sama powinna pobierać jeden argument, obiekt zdarzenia, tak jak jest pokazane to w powyższej deklaracji funkcji <code>buttonPressed</code>.</p> + +<div class="highlight"><span id="Przyk%C5%82ad:_Znajd%C5%BA_pliki"><a id="Przyk%C5%82ad:_Znajd%C5%BA_pliki"></a><strong>Przykład: Znajdź pliki</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-events.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-events.xul">Podgląd</a></div> + +<p>Następnie, dowiemy się trochę więcej szczegółów na temat <a href="pl/Kurs_XUL/Wi%c4%99cej_funkcji_obs%c5%82ugi_zdarze%c5%84">zdarzeń obiektów</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Przewijane_menu" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Więcej_funkcji_obsługi_zdarzeń">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/dodawanie_innych_elementów/index.html b/files/pl/mozilla/tech/xul/kurs_xul/dodawanie_innych_elementów/index.html new file mode 100644 index 0000000000..2ef702672e --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/dodawanie_innych_elementów/index.html @@ -0,0 +1,87 @@ +--- +title: Dodawanie innych elementów +slug: Mozilla/Tech/XUL/Kurs_XUL/Dodawanie_innych_elementów +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_More_Elements +--- +<p> </p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Pola_grup" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Stosy_i_pokłady">Następny »</a></p> +</div><p></p> +<p>Podsumowaniem dyskusji o pudełkach będzie dodanie kilku pudełek do okna dialogowego służącego do szukania plików.</p> +<div class="highlight"> + <h3 id="Dodawanie_element.C3.B3w_do_przyk.C5.82adu:_Znajd.C5.BA_pliki" name="Dodawanie_element.C3.B3w_do_przyk.C5.82adu:_Znajd.C5.BA_pliki">Dodawanie elementów do przykładu: <tt>Znajdź pliki</tt></h3> + <p>Dodamy więcej elementów do okna dialogowego szukania plików. Po pierwsze, dodamy możliwość szukania według innych kryteriów, takich jak rozmiar pliku lub według daty.</p> + <pre class="eval"><hbox> + <span class="highlightred"><menulist id="searchtype"> + <menupopup> + <menuitem label="Nazwa"/> + <menuitem label="Rozmiar"/> + <menuitem label="Data modyfikacji"/> + </menupopup> + </menulist> + <spacer style="width: 10px;"/> + <menulist id="searchmode"> + <menupopup> + <menuitem label="Jest"/> + <menuitem label="Nie ma"/> + </menupopup> + </menulist> + <spacer style="width: 10px;"/></span> + <textbox id="find-text" flex="1" style="min-width: 15em;"/> +</hbox> +</pre> + <div class="float-right"> + <img alt="grafika:boxfinal1.png"></div> + <p>Powyżej zostały dodane dwa rozwijane pola do okienka dialogowego. Element <code><a href="/pl/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code> zostanie dodany pomiędzy różne elementy, aby stworzyć przerwę między nimi. Każde z tych pól jest o szerokości 10 pikseli. Widoczne jest to, jeśli rozszerzysz okno, to następnie pole tekstowe także się rozszerzy, ale pozostałe komponenty już nie. Zwróć uwagę także, że etykieta została usunięta.</p> + <p>Jeżeli rozszerzymy okno w pionie, elementy nie zmienią rozmiaru. To dlatego, że są one wewnątrz poziomych pól. Jeżeli przyciski <tt>Znajdź</tt> i <tt>Anuluj</tt> będą znajdowały się z daleka od dolnej krawędzi okna, będą wtedy odpowiednio ustawione. W prosty sposób możemy dodać puste pola pomiędzy dwa poziome pola.</p> + <pre class="eval"><span class="highlightred"><spacer style="height: 10px"/></span> +<hbox> + <menulist id="searchtype"> + <menupopup> + <menuitem label="Nazwa"/> + <menuitem label="Rozmiar"/> + <menuitem label="Data modyfikacji"/> + </menupopup> + </menulist> + <spacer style="width: 10px;"/> + <menulist id="searchmode"> + <menupopup> + <menuitem label="Jest"/> + <menuitem label="Nie ma"/> + </menupopup> + </menulist> + <spacer style="width: 10px;"/> + <textbox id="find-text" flex="1" style="min-width: 15em;"/> +</hbox> + +<span class="highlightred"><spacer style="height: 10px" flex="1"/></span> + +<hbox> +</pre> + <p>Teraz, gdy okno jest rozszerzone, dwa przyciski będą przesunięte, lecz, tak jak zawsze, będą one wzdłuż dolnej krawędzi okna. Pierwszy element <code><a href="/pl/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code> dodaje dodatkową wolną przestrzeń pomiędzy etykietą tytułu a elementem 'Kryteria szukania'.</p> + <p>Ładnie by wyglądało, gdyby tekst 'Kryteria szukania' był otoczony ramką. Możemy ją wykonać dwoma sposobami. Pierwszym sposobem jest użycie własności <code>border</code> z pliku CSS lub drugim będzie zastosowanie gotowego elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/groupbox" title="groupbox">groupbox</a></code></code>. Pierwsza metoda wymagałaby od nas ustawienia stylu dla elementu. W kursie będziemy stosowali drugą metodę. Pola grup mają tę przewagę, że mają tą zaletę, że przyciągają pole po skosie, w odpowiedni sposób dla aktualnie zastosowanego motywu.</p> + <p>Wykonajmy zmiany w <code>groupbox</code>:</p> + <pre class="eval"><span class="highlightred"><groupbox orient="horizontal"></span> + <span class="highlightred"><span class="nowiki"><caption label="Kryteria szukania"/></span></span> + <menulist id="searchtype"> + . + . + . + <spacer style="width: 10px;"/> + <textbox id="find-text" flex="1" style="min-width: 15em;"/> +<span class="highlightred"></groupbox></span> +</pre> + <div class="float-right"> + <img alt="Grafika:boxfinal2.png"></div> + <p>Zostały już poprawione wszystkie kosmetyczne błędy. Możemy także ustawić element <code>groupbox</code> tak, aby rozszerzyć/zwężać pionowo okna do krawędzi dolnego pola. Możemy także modyfikować marginesy w celu lepszego ustawienia elementów.</p> + <p>Więcej przykładów modelu pudełkowego i jego własności zobaczymy podczas dalszej nauki dodawania elementów, opisanych w tym kursie.</p> + <p>Przykład: <code>Znajdź pliki</code>: <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxfinal.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxfinal.xul">Podgląd</a></p> +</div> +<p>Następnie dowiemy się <a href="pl/Kurs_XUL/Stosy_i_pok%c5%82ady">jak wygląda utworzenie stosu</a>.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Pola_grup" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Stosy_i_pokłady">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/dodawanie_metod/index.html b/files/pl/mozilla/tech/xul/kurs_xul/dodawanie_metod/index.html new file mode 100644 index 0000000000..3e7812bbff --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/dodawanie_metod/index.html @@ -0,0 +1,196 @@ +--- +title: Dodawanie metod +slug: Mozilla/Tech/XUL/Kurs_XUL/Dodawanie_metod +tags: + - Kurs_XUL + - Przewodniki + - Strony_wymagające_dopracowania + - Wszystkie_kategorie + - XBL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Methods_to_XBL-defined_Elements +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Dodawanie_własności" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dodawanie_funkcji_obsługi_zdarzenia">Następny »</a></p> +</div><p></p> + +<p>Następnie, znajdziemy w jaki sposób dodać metody użytkownika definiujące elementy <a href="pl/XBL">XBL</a>.</p> + +<h3 id="Metody" name="Metody">Metody</h3> + +<p>Dodatkowo dodając własności skryptu do definiowanego elementu XBL, możemy dodać metody. Te metody są nazywamy od skryptu. Metody są funkcjami obiektów, takie jak 'window.open()'. Możemy definiować zwyczajne metody dla elementów używając elementów <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#method">method</a></code></code>. Generalna składnia metod jest następująca:</p> + +<pre><implementation> + <method name="method-name"> + <parameter name="parameter-name1"/> + <parameter name="parameter-name2"/> + . + . + . + <body> + -- method script goes here -- + </body> + </method> +</implementation> +</pre> + +<p>Deklaracja metod odbywa się wewnątrz <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#implementation">implementation</a></code></code> elementu, jak the fields and properties do. Element <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#method">method</a></code></code> stanowią dwa typy elementów potomnych, <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#parameter">parameter</a></code></code> elementów które opisuje parametry metody oraz <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#body">body</a></code></code>, które są zawartością skryptu dla metod.</p> + +<p>Wartość atrybutu <code>name</code> staje się nazwą metody. Podobnie, atrybuty <code>name</code> w elementach <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#parameter">parameter</a></code></code> stają się nazwą każdego parametru. Każdy element <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#parameter">parameter</a></code></code> jest używany do deklaracji jednego parametru na metodę. Na przykład, jeśli metoda posiada trzy parametry, co będzie trzema elementami <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#parameter">parameter</a></code></code>. Nie musisz go posiadać, w którym wypadku metoda będzie bez parametrów.</p> + +<p>Element <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#body">body</a></code></code> stanowi skrypt, który jest wykonywany w momencie kiedy nazywana jest metoda. Nazwy parametrów są zdefiniowane jako zmienne w skrypcie, jeśli posiadają one przepustkę jako parametry. Na przykład, nadchodzące funkcje JavaScript będą zapisywane jako ulubione programy:</p> + +<pre class="eval">function getMaximum(num1,num2) +{ + if (num1<=num2) return num2; + else return num1; +} + +<strong>XBL:</strong> + +<method name="getMaximum"> + <parameter name="num1"/> + <parameter name="num2"/> + <body> + if (num1&lt;=num2) return num2; + else return num1; + </body> +</method> +</pre> + +<p>This function, getMaximum, returns the largest of the values, each passed as a parameter to the method. Note that the less-than symbol has to be escaped because otherwise it would look like the start of a tag. You can also use a CDATA section to escape the entire block of code. You can call the method by using code such as 'element.getMaximum(5,10)' where element is a reference to an element defined by the XBL containing the getMaximum method. (The bound element.)</p> + +<p>The <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#parameter">parameter</a></code></code> tag allows you to define parameters for a method. Because Mozilla uses JavaScript as its scripting language, and JavaScript is a non-typed language, you do not need to specify the types of the parameters. However, in the future, other languages may be used with XBL.</p> + +<h3 id="Dost.C4.99p_do_jakichkolwiek_warto.C5.9Bci" name="Dost.C4.99p_do_jakichkolwiek_warto.C5.9Bci">Dostęp do jakichkolwiek wartości</h3> + +<p>There may be times when you want to modify some aspect of the elements defined in the <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#content">content</a></code></code> element, either from a method body or elsewhere. These elements are created anonymously and are not accessible from the regular DOM functions. They are hidden so that developers do not need to know how the element is implemented to use it. However, there is a special way of getting this anonymous content.</p> + +<p>Elements with an XBL behavior attached to them have a special property which holds an array of the anonymous child elements inside it. Each element of the array stores each direct child element of the XBL-defined element. This special property cannot be accessed directly. Instead, you must call the document's <code><a class="new" href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Interfejsy_DOM#getAnonymousNodes" rel="nofollow">getAnonymousNodes()</a></code> method:</p> + +<pre>var value=document.getAnonymousNodes(element); +</pre> + +<p>Here, 'element' should be set to a reference to the element that you want to get the anonymous content of. The function returns an array of elements, which is the anonymous content. To get elements below that, you can use the regular DOM functions because they aren't hidden. Note that it is possible for an XBL-bound element to be placed inside another one, in which case you will have to use the <code><a class="new" href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Interfejsy_DOM#getAnonymousNodes" rel="nofollow">getAnonymousNodes()</a></code> function again.</p> + +<p>The following example creates a row of buttons:</p> + +<pre><binding id="buttonrow"> + <content> + <button label="Yes"/> + <button label="No"/> + <button label="Sort Of"/> + </content> +</binding> +</pre> + +<p>To refer to each button, you can use the <code><a class="new" href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Interfejsy_DOM#getAnonymousNodes" rel="nofollow">getAnonymousNodes()</a></code> function, passing it a reference to the element the binding is bound to as the parameter. In the returned array, the first button is stored in the first array element ('getAnonymousNodes(element)[0]'), the second button is stored in the second array element and the third button is stored in the third array element. For code inside a binding method, you can pass 'this' as the parameter to <code><a class="new" href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Interfejsy_DOM#getAnonymousNodes" rel="nofollow">getAnonymousNodes()</a></code>.</p> + +<p>The next example can be used to create text with a label. The method 'showTitle' can be used to show or hide the label. It works by getting a reference to the title element using the anonymous array and changing the visibility of it.</p> + +<pre class="eval"><strong>XUL:</strong> + +<box id="num" class="labeledbutton" title="Number of Things:" value="52"/> + +<button label="Show" oncommand="document.getElementById('num').showTitle(true)"/> +<button label="Hide" oncommand="document.getElementById('num').showTitle(false)"/> + +<strong>XBL:</strong> + +<binding id="labeledbutton"> + <content> + <xul:label xbl:inherits="value=title"/> + <xul:label xbl:inherits="value"/> + </content> + <implementation> + <method name="showTitle"> + <parameter name="state"/> + <body> + if (state) document.getAnonymousNodes(this)[0]. + setAttribute("style","visibility: visible"); + else document.getAnonymousNodes(this)[0]. + setAttribute("style","visibility: collapse"); + </body> + </method> + </implementation> +</binding> +</pre> + +<p>Two buttons added to the XUL have <code><code id="a-oncommand"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/oncommand">oncommand</a></code></code> handlers which are used to change the visibility of the label. Each calls the 'showTitle' method. This method checks to see whether the element is being hidden or shown from the 'state' parameter that is passed in. In either case, it grabs the first element of the anonymous array. This refers to the first child in the <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#content">content</a></code></code> element, which here is the first label widget. The visibility is changed by modifying the style on the element.</p> + +<h3 id="Accessing_from_Inside_the_Anonymous_Content" name="Accessing_from_Inside_the_Anonymous_Content">Accessing from Inside the Anonymous Content</h3> + +<p>To go the other way, and get the bound element from inside the anonymous content, use the DOM <a href="pl/DOM/element.parentNode">parentNode</a> property. This gets the parent element of an element. For example, we could move the Show and Hide buttons into the XBL file and do the following:</p> + +<p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_xblmethods_1.xml.txt">Źródła</a></p> + +<pre><binding id="labeledbutton"> + <content> + <xul:label xbl:inherits="value=title"/> + <xul:label xbl:inherits="value"/> + <xul:button label="Show" oncommand="parentNode.showTitle(true);"/> + <xul:button label="Hide" oncommand="parentNode.showTitle(false);"/> + </content> + <implementation> + <method name="showTitle"> + <parameter name="state"/> + <body> + if (state) document.getAnonymousNodes(this)[0].setAttribute("style","visibility: visible"); + else document.getAnonymousNodes(this)[0].setAttribute("style","visibility: collapse"); + </body> + </method> + </implementation> +</binding> +</pre> + +<p>The <code><code id="a-oncommand"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/oncommand">oncommand</a></code></code> handlers here first get a reference to their parent element. This is not the <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#content">content</a></code></code> element but the XUL element that the XBL is bound to. (In this example, it is the box with the <code>labeledbutton</code> class). Then, the 'showTitle' method is called, which functions as it did before.</p> + +<p>Custom properties and methods are added only to the outer XUL element the XBL is bound to. None of the elements declared inside the <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#content">content</a></code></code> tag have these properties or methods. This is why we have to get the parent first.</p> + +<p>The children of an element placed in the XUL file can be retrieved in the normal way and don't move even if you use the <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#children">children</a></code></code> tag. For example:</p> + +<pre class="eval"><strong>XUL:</strong> + +<box id="outer" class="container"> + <button label="One"/> + <button label="Two"/> + <button label="Three"/> + <button label="Four"/> +</box> + +<strong>XBL:</strong> + +<binding id="labeledbutton"> + <content> + <description value="A stack:"/> + <stack> + <children/> + </stack> + </content> +</binding> +</pre> + +<p>If you use the DOM functions such as <a href="pl/DOM/element.childNodes">childNodes</a> to get the children of an element, you'll find that the XUL box, the one with the <code>id</code> of <code>outer</code>, has 4 children. These correspond to its four buttons, even though those buttons are drawn inside the stack. The stack has only one child, the <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#children">children</a></code></code> element itself. The length of the anonymous array of the outer box is two, the first element the <code><code><a href="/pl/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code> element and the second the <code><code><a href="/pl/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code></code> element.</p> + +<h3 id="Konstruktory_i_destruktory" name="Konstruktory_i_destruktory">Konstruktory i destruktory</h3> + +<p>XBL supports two special methods created with separate tags, <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#constructor">constructor</a></code></code> and <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#destructor">destructor</a></code></code>. A constructor is called whenever the binding is attached to an element. It is used to initialize the content such as loading preferences or setting the default values of fields. The destructor is called when a binding is removed from an element. This might be used to save information.</p> + +<p>There are two points when a binding is attached to an element. The first occurs when a window is displayed. All elements that have XBL-bound content will have their constructors invoked. The order that they are called in should not be relied upon, as they are loaded from various files. The <code><a href="/pl/docs/Mozilla/Tech/XUL/window" title="window">window</a></code>'s <code><code id="a-onload"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/onload">onload</a></code></code> handler is not called until after all the bindings have been attached and their constructors finished. The second point a binding is attached is if you change the <a href="/pl/docs/Web/CSS/-moz-binding" title="-moz-binding jest używany przez aplikacje bazujące na Mozilli, by dołączyć wiązanie XBL do elementu DOM."><code>-moz-binding</code></a> style property of an element. The existing binding will be removed, after its destructor is called. Then, the new binding will be added in its place and its constructor invoked.</p> + +<p>The script for a constructor or destructor should be placed directly inside the appropriate tag. There should only be at most one of each per binding and they take no arguments. Here are some examples:</p> + +<pre><constructor> + if (this.childNodes[0].getAttribute("open") == "true"){ + this.loadChildren(); + } +</constructor> + +<destructor action="saveMyself(this);"/> +</pre> + +<p>Następny artykuł pokaże jak dodać funkcje obsługi zdarzenia do definiowanego elementu XBL.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Dodawanie_własności" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dodawanie_funkcji_obsługi_zdarzenia">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/dodawanie_przycisków/index.html b/files/pl/mozilla/tech/xul/kurs_xul/dodawanie_przycisków/index.html new file mode 100644 index 0000000000..9d6311c2ed --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/dodawanie_przycisków/index.html @@ -0,0 +1,82 @@ +--- +title: Dodawanie przycisków +slug: Mozilla/Tech/XUL/Kurs_XUL/Dodawanie_przycisków +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Buttons +--- +<p> +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Tworzenie_okna" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dodawanie_etykiet_i_obrazków">Następny »</a></p> +</div> +<p></p><p>W tym artykule zajmiemy się dodawaniem przycisków do okna. +</p> +<h3 id="Dodawanie_przycisk.C3.B3w_do_okna" name="Dodawanie_przycisk.C3.B3w_do_okna"> Dodawanie przycisków do okna </h3> +<p>Okno, które utworzyliśmy, jest puste, więc niezbyt ciekawe. W tym rozdziale dodamy dwa przyciski, Znajdź oraz Anuluj. Nauczymy się też w prosty sposób układać je w oknie. +</p><p>Podobnie jak HTML, XUL posiada wiele znaczników, które mogą zostać użyte do tworzenia elementów interfejsu użytkownika. Najprostszym z nich jest znacznik <code><code><a href="/pl/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code>, który jest używany do tworzenia prostych przycisków. +</p><p>Element <code>button</code> posiada dwie główne własności: <code>label</code> (etykietę) oraz <code>image</code> (obrazek). Możesz skorzystać z jednej lub z obu. Zatem przycisk może posiadać tylko etykietę, tylko obrazek lub obie własności jednocześnie. Przyciski najczęściej stosuje się do tworzenia przycisków <tt>OK</tt> i <tt>Anuluj</tt> wykorzystanych w oknach dialogowych. +</p> +<h4 id="Sk.C5.82adnia_przycisk.C3.B3w" name="Sk.C5.82adnia_przycisk.C3.B3w"> Składnia przycisków </h4> +<p>Znacznik <code><code><a href="/pl/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> ma następującą składnię: +</p> +<pre><button + id="identifier" + class="dialog" + label="OK" + image="images/image.jpg" + disabled="true" + accesskey="t"/> +</pre> +<p>Znaczenie poszczególnych atrybutów (wszystkie są opcjonalne): +</p> +<dl><dt> <code id="a-id"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/id">id</a></code> </dt><dd> Unikatowy identyfikator, za pomocą którego można odwoływać się do przycisku. Ten atrybut posiadają wszystkie elementy. Będziemy z niego korzystać za każdym razem, gdy będziemy chcieli się odwołać do przycisku w arkuszu stylów lub w skrypcie. Powinno się go używać we wszystkich elementach., ale w tym kursie czasami został on pominięty dla zwiększenia czytelności. +</dd><dt> <code id="a-class"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/class">class</a></code> </dt><dd> Klasa stylu przycisku. Działa na tej samej zasadzie jak w HTML-u. Atrybutu używa się do wskazania stylu, który będzie wyświetlony w przycisku. W tym przypadku nadano mu wartość <code>dialog</code>. W większości przypadków nie będziemy używali klasy dla przycisku. +</dd><dt> <code id="a-label"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/label">label</a></code> </dt><dd> Etykieta, która pojawi się na przycisku, np. <tt>OK</tt> lub <tt>Anuluj</tt>. Jeśli atrybut zostanie pominięty, na przycisku nie pojawi się żaden tekst. </dd><dt> <code id="a-image"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/image">image</a></code> </dt><dd> URL obrazka pojawiającego się na przycisku. Jeśli atrybut zostanie pomięty, przycisk pozostanie bez obrazka. Obrazek również można przypisać w arkuszu stylów używając do tego własności <code><a href="pl/CSS/list-style-image">list-style-image</a></code>. +</dd><dt> <code id="a-disabled"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/disabled">disabled</a></code> </dt><dd> Jeśli ten atrybut zostanie ustawiony na <code>true</code>, przycisk zostanie wyłączony. Objawia się to zwykle jego "wyszarzeniem". Jeśli jest wyłączony, nie może być wykonana powiązana z nim funkcja. Domyślnie przycisk jest włączony. Do zmiany stanu przycisku można użyć języka <a href="pl/JavaScript">JavaScript</a>. +</dd><dt> <code id="a-accesskey"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/accesskey">accesskey</a></code> </dt><dd> Wartością tego atrybutu powinna być litera używana w skrócie klawiaturowym. Litera ta powinna występować w etykiecie przycisku, wówczas zostanie wyróżniona - zwykle poprzez podkreślenie. Kiedy użytkownik naciśnie ALT (lub analogiczny klawisz, w zależności od używanej platformy systemowej) i klawisz skrótu, wybrany przycisk zostanie wywołany z jakiegokolwiek miejsca w oknie. +</dd></dl> +<p>Przycisk obsługuje więcej atrybutów poza tymi, które zostały wymienione powyżej. Zostaną one omówione w <a href="pl/Kurs_XUL/Dodatkowe_mo%c5%bcliwo%c5%9bci_przycisku">dalszej części kursu</a>. +</p> +<h4 id="Kilka_przyk.C5.82ad.C3.B3w_przycisk.C3.B3w" name="Kilka_przyk.C5.82ad.C3.B3w_przycisk.C3.B3w"> Kilka przykładów przycisków </h4> +<p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_buttons_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_buttons_1.xul">Podgląd</a> +</p> +<div class="float-right"><img alt="grafika:buttons1.png"></div> +<pre><button label="Normaly"/> +<button label="Wyłączony" disabled="true"/> +</pre> +<p>W przykładzie przedstawionym powyżej pierwszy przycisk jest normalnym przyciskiem. Drugi natomiast jest wyłączony, co jest widoczne poprzez jego "wyszarzenie". +</p><p><br> +Rozpoczynamy od utworzenia zwykłego przycisku <tt>Znajdź</tt>, który znajdzie się w oknie narzędzia do szukania plików. Poniżej znajduje się kod, który dodamy do przykładu <tt>findfile.xul</tt>. +</p> +<pre><button id="find-button" label="Znajdź"/> +</pre> +<div class="note">W Firefoksie 1.0 nie jest dozwolone otwieranie okien chrome z sieci WWW, więc odnośniki <tt>Podgląd</tt> w tym kursie będą otwierane w zwykłych oknach przeglądarki. Z tego też powodu przyciski zostaną rozciągnięte do pełnego rozmiaru okna przeglądarki. Aby zapobiec rozciągnięciu się naszego przykładu, dodaj ten fragment kodu <code>align="start"</code> do znacznika window.</div> +<div class="highlight"> +<h5 id="Przyk.C5.82ad_findfile.xul" name="Przyk.C5.82ad_findfile.xul"> Przykład <tt>findfile.xul</tt> </h5> +<p>Dodajmy kod do pliku <tt>findfile.xul</tt>, który utworzyliśmy w poprzednim artykule. Kod musi być wstawiony pomiędzy znacznikami <code><code><a href="/pl/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code>. Fragment kodu zaznaczony na czerwono dodajmy do naszego przykładu: </p> +<pre class="eval"><?xml version="1.0"?> +<?xml-stylesheet href="<a class=" external" rel="freelink">chrome://global/skin/</a>" type="text/css"?> +<window + id="findfile-window" + title="Znajdź pliki" + orient="horizontal" + xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"> + + <span class="highlightred"><button id="find-button" label="Znajdź"/></span> + <span class="highlightred"><button id="cancel-button" label="Anuluj"/></span> + +</window> +</pre> +<div class="float-right"><img alt="grafika:buttons2.png"></div> +Dodany został również przycisk <tt>Anuluj</tt>. Ponieważ w oknie została określona orientacja pozioma, oba przyciski umieszczone są obok siebie. Jeśli otworzymy plik z przykładowym kodem w przeglądarce Mozilla, powinniśmy otrzymać podobne okno do obrazka z boku.</div> +<div class="note">Nie powinno się umieszczać etykiety bezpośrednio w pliku XUL. Zamiast tego <a href="pl/Kurs_XUL/Lokalizacja">powinniśmy używać encji, aby tekst mógł być łatwo tłumaczony</a>.</div> +<p>W następnym temacie nauczymy się <a href="pl/Kurs_XUL/Dodawanie_etykiet_i_obrazk%c3%b3w">umieszczać w oknie etykiety i obrazki</a>. +</p><p><small>Zobacz także <a href="pl/Kurs_XUL/Dodatkowe_mo%c5%bcliwo%c5%9bci_przycisku">Dodatkowe możliwości przycisku</a></small> +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Tworzenie_okna" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dodawanie_etykiet_i_obrazków">Następny »</a></p> +</div> +<p></p> +<div class="noinclude"> +</div> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/dodawanie_własności/index.html b/files/pl/mozilla/tech/xul/kurs_xul/dodawanie_własności/index.html new file mode 100644 index 0000000000..d0ce531fb3 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/dodawanie_własności/index.html @@ -0,0 +1,165 @@ +--- +title: Dodawanie własności +slug: Mozilla/Tech/XUL/Kurs_XUL/Dodawanie_własności +tags: + - Kurs_XUL + - Przewodniki + - Strony_wymagające_dopracowania + - Wszystkie_kategorie + - XBL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Properties_to_XBL-defined_Elements +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Dziedziczenie_atrybutu_XBL" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dodawanie_metod">Następny »</a></p> +</div> W tym artykule dowiemy się jak dodać ustawienia właściwości użytkownika do elementów XBL.<p></p> + +<h3 id="Interfejs_XBL" name="Interfejs_XBL">Interfejs XBL</h3> + +<p><a href="pl/JavaScript">JavaScript</a> i <a href="pl/DOM">DOM</a> dają nam dostęp do pobrania i ustawienia własności elementów. Z XBL, możemy zdefiniować własne właściwości, dla elementów przez nas tworzonych. Mamy możliwość dodania własnych nazw meteod. To jest wszystko czego byś potrzebował aby dostać referencję do elementu, (używając <code><a href="pl/DOM/document.getElementById">getElementById</a></code> lub podobnych funkcji) i następnie pobranie lub ustawienie dodatkowych właściwości i nazwaniu jego metod.</p> + +<p>Tutaj są trzy typy pozycji, które dodaj.</p> + +<ul> + <li>Pola są użyte do podtrzymania prostych wartości.</li> + <li>Właściwości can also be used to hold a value but may have code execute when an attempt is made to retrieve or modify the value.</li> + <li>Methods are functions which may be executed.</li> +</ul> + +<p>Wszystkie trzy są zdefiniowane wewnątrz <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#implementation">implementation</a></code></code> elementu, który powinien być dzieckiem <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#binding">binding</a></code></code> elementem. Wewnątrz implementacji, definiujesz swoje własne <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#field">field</a></code></code>, <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#property">property</a></code></code> i <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#method">method</a></code></code> elementów, dla każdej jednej, którą wybierzesz. Składnia główna wygląda następująco:</p> + +<pre><binding id="element-name"> + <content> + -- content goes here -- + </content> + <implementation> + <field name="field-name-1"/> + <field name="field-name-2"/> + <field name="field-name-3"/> + + <property name="property-name-1"/> + <property name="property-name-2"/> + <property name="property-name-3"/> + . + . + . + <method name="method-name-1"> + -- method content goes here -- + </method> + . + . + . + </implementation> +</binding> +</pre> + +<h3 id="Pola" name="Pola">Pola</h3> + +<p>Każde pole jest definiowane używając elementów <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#field">field</a></code></code>. Często, pola będą odpowiadać atrybutom położonym wewnątrz elementu, są to <code>label</code> lub <code>disabled</code>, ale on do not have to.</p> + +<p>Atrybut <code>name</code> w <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#field">field</a></code></code> (polu) elementu jest użyty do wskazania nazwy pola. Możesz użyć nazwę ze skryptu aby pobrać i ustawić wartość. Przykład poniżej tworzy przycisk, który generuje i ukrywa losową liczbę. You can retrieve this same number multiple times by getting the <code>number</code> property from the button. Most of the work here is done in the <code>oncommand</code> handlers. Later, we'll find out how to move this to XBL.</p> + +<pre class="eval"><strong>XUL:</strong> + +<box id="random-box" class="randomizer"/> + +<button label="Generate" + oncommand="document.getElementById('random-box').number=Math.random();"/> +<button label="Show" + oncommand="alert(document.getElementById('random-box').number)"/> + +<strong>XBL:</strong> + +<binding id="randomizer"> + <implementation> + <field name="number"/> + </implementation> +</binding> +</pre> + +<p>Pola <code>number</code> zostały zdefiniowane w wiązaniach, które przechowują random number. Dwa dodatkowe przyciski ustawiamy i pobieramy wartości tych pól. Składnia jest bardzo podobna do pobieranej i wysyłanej do własności języka HTML. W tym przykładzie, no content has been placed inside either the XUL box or its definition in XBL, which is perfectly valid.</p> + +<p>Ten przykład nie jest do końca poprawny, ponieważ polu nie jest przypisana wartość domyślna. Aby to zrobić, dodaj domyślną wartość jako zawartość zakładki <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#field">field</a></code></code>. Na przykład:</p> + +<pre><field name="number"> + 25 +</field> +</pre> + +<p>To przypisze wartość 25 jako wartość domyślną pola liczbowego. W rzeczywistości zamiast tego możesz wpisać skrypt wewnątrz zakładki <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#field">field</a></code></code>, który oszacuje domyślną wartość. Może się to okazać konieczne, jeśli wartość musi być obliczona. Na przykład, następującemu polu przypisana jest wartość domyślna równa aktualnemu czasowi:</p> + +<pre><field name="currentTime"> + new Date().getTime(); +</field> +</pre> + +<h3 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h3> + +<p>Czasem będziesz chciał odświeżyć dane, dołączone do własności, albo chciałbyś, żeby wartość była obliczana dynamicznie, gdy o to poprosi użytkownik. Na przykład, jeśli masz własność, która przechowuje aktualny czas, będziesz pewnie chciał, żeby jej wartość była generowana w czasie rzeczywistym. W takim przypadku musisz użyć zakładki <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#property">property</a></code></code> zamiast zakładki <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#field">field</a></code></code>. Jego składnia jest podobna, ale ma inne dodatkowe cechy.</p> + +<h4 id="Onget_Attribute_and_Onset_Attribute" name="Onget_Attribute_and_Onset_Attribute">Onget Attribute and Onset Attribute</h4> + +<p>Możesz użyć atrybutu <code>onget</code> and <code>onset</code> aby wywołać kod, gdy własność jest odzyskiwana lub modyfikowana. Dodaj każdy atrybut do elementu <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#property">property</a></code></code> i ustaw jej wartość na skrypt, który albo pobiera albo ustawia wartość danej własności.</p> + +<p>Na przykład, możesz przypisać skrypt do wartości <code>onget</code> aby obliczyć aktualny czas. Gdy tylko skrypt będzie chciał uzyskać dostęp do wartości tej własności, wywołany zostanie skrypt <code>onget</code>, aby odzyskać wartość. Powinien on zwrócić wartość, która będzie uważana za wartość tej własności.</p> + +<p>Trener <code>onset</code> jest podobny, ale jest wywoływany wtedy, gdy skrypt próbuje przypisać nową wartość danej własności. Ten skrypt powinien przechowywać gdzieś wartość albo uaktualniać ją. Na przykład niektóre własności mogą przechowywać tylko liczby. Próba przypisania tekstu do takiej własności powinna być przerwana.</p> + +<pre><property name="size" + onget="return 77;" + onset="alert('Changed to:'+val); return val;"/> +</pre> + +<p>Ta własność będzie zawsze zwracała 77, przy próbie pobrania. Przy próbie ustawienia wartości, wyświetli się komunikat ostrzegawczy, który pokaże jaką wartość przypisano własności. Specjalna zmienna <code>val</code> przechowuje wartość, która powinna być przypisana własności. Użyj tego do uaktualnienia jej lub przechowywania. Kod <code>onset</code> powinien także zwrócić nową wartość.</p> + +<p>Następujący fragment opisuje typową sytuację:</p> + +<p>Są dwa elementy: jeden nazywa się "banana", a drugi "orange". Każdy ma odpowiednią własność nazwaną "size" (rozmiar). Napiszmy następujący skrypt:</p> + +<pre>banana.size = orange.size; +</pre> + +<ol> + <li>Skrypt <code>onget</code> jest wywoływany dla własności rozmiaru dla "orange". Skrypt oblicza wartość i ją zwraca.</li> + <li>Uchwyt <code>onset</code> własności "size" obiektu "banana" jest wywoływany. Skrypt użyje wartości znajdującej się w zmiennej <code>val</code> i przypisze ją własności "size" obiektu "banana".</li> +</ol> + +<p>Zauważmy, że w odróżnieniu od pola, własność nie przechowuje wartości. Próba ustawienia własności, która nie posiada trenera <code>onset</code> spowoduje wyświetlenie błędu. Często będziesz korzystał z oddzielnego pola, aby przechowywać wartość własności. Równie często sprawia się, że własność odpowiada atrybutowi elementu zdefiniowanego przez XBL. Następujący przykład mapuje własność na atrybut pewnego elementu:</p> + +<pre><property name="size" + onget="return this.getAttribute('size');" + onset="return this.setAttribute('size',val);" +/> +</pre> + +<p>Gdy tylko skrypt próbuje pobrać wartość własności, pobiera ją z atrybutu elementu o tej samej nazwie. Natomiast gdy próbuje ustawić jej wartość, jest ona przypisywana do atrybutu tego elementu. Jest to bardzo wygodne, ponieważ wtedy możesz modyfikować własność lub atrybut i obydwoje będą miały taką samą wartość.</p> + +<h4 id="Getter_Element_and_Setter_Element" name="Getter_Element_and_Setter_Element">Getter Element and Setter Element</h4> + +<p>Możesz użyć alternatywnej składni dla atrybutów <code>onget</code> i <code>onset</code>, która jest przydatna, jeśli skrypt jest dłuższy. Możesz wymienić atrybut <code>onget</code> na element potomny nazywany <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#getter">getter</a></code></code>. Podobnie, możesz wymienić atrybut <code>onset</code> na element <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#setter">setter</a></code></code>. Poniższy przykład ilustruje tą zamianę:</p> + +<pre><property name="number"> + <getter> + return this.getAttribute('number'); + </getter> + <setter> + var v = parseInt(val,10); + if (!isNaN(v)) return this.setAttribute('number',''+v); + else return this.getAttribute('number');" + </setter> +</property> +</pre> + +<p>Własność w tym przykładzie będzie mogła przechowywać wyłącznie liczby całkowite. Jeśli inne cyfry lub litery będą wpisane, zostaną usunięte. Jeśli nie będzie żadnych cyfr, wartość pozostanie niezmieniona. Jest to wykonywane przez część kodu wewnątrz elementu <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#setter">setter</a></code></code>. Prawdziwa wartość własności jest przechowywana w atrybucie <code>number</code>.</p> + +<p>Możesz używać obu składni do tworzenia uchwytów pobrania i ustawienia.</p> + +<h4 id="Atrybut_tylko_do_odczytu" name="Atrybut_tylko_do_odczytu">Atrybut tylko do odczytu</h4> + +<p>Utwórz pole z własnościami 'Tylko do odczytu', dodając atrybut <code>readonly</code> do znacznika pola (<code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#field">field</a></code></code>) lub własności znacznika (<code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#property">property</a></code></code>) i ustawienie go na <code>true</code>. Próbując ustawić wartość własności 'Tylko do odczytu' zakończone nie powodzeniem.</p> + +<p>W następnym artykule zobaczymy <a href="pl/Kurs_XUL/Dodawanie_metod">jak dodać metody do definicji elementu XBL</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Dziedziczenie_atrybutu_XBL" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dodawanie_metod">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/drzewa/index.html b/files/pl/mozilla/tech/xul/kurs_xul/drzewa/index.html new file mode 100644 index 0000000000..b416840314 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/drzewa/index.html @@ -0,0 +1,117 @@ +--- +title: Drzewa +slug: Mozilla/Tech/XUL/Kurs_XUL/Drzewa +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Trees +--- +<p> </p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Przykłady_XPCOM" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dodatkowe_możliwości_drzewa">Następny »</a></p> +</div><p></p> +<p>XUL umożliwia tworzenie tabelarycznych lub hierarchicznych list przy użyciu drzewa.</p> +<h3 id="Drzewo" name="Drzewo">Drzewo</h3> +<p><a href="/pl/XUL/tree" title="pl/XUL/tree">Drzewo</a> w XUL jest jednym z najbardziej złożonych elementów. Drzewo może być użyte w celu wyświetlenia wierszy tekstu w kolumnach, na liście lub hierarchicznie. Drzewo umożliwia zmiany wyglądu, rozmiaru czy ukrywanie poszczególnych kolumn. Przykładami drzew są między innymi te zawierające listę wiadomości w programie pocztowym lub w okno zakładek w Mozilli.</p> +<p>W wielu sytuacjach drzewo posiada wiele wspólnych cech z polami listy (<code><a href="/pl/XUL/listbox" title="pl/XUL/listbox">listbox</a></code>). Oba mogą być użyte do utworzenia tabel z danymi, zawierających wiele wierszy i kolumn oraz nagłówków. Jednak drzewa umożliwiają zagnieżdżanie wierszy, czego nie umożliwiają pola list. Przewagą pól list jest to, że można w nich zawrzeć dowolny typ zawartości, podczas gdy drzewa mogą zawierać tylko obrazy i tekst (stosując zaawansowane możliwości, możemy dodać do drzewa paski postępu lub pola wyboru).</p> +<p>Drzewo składa się z dwóch części, ciała drzewa i ustawienia kolumn:</p> +<ul> <li>Zestawu kolumn, który jest zdefiniowany przez pewną liczbę elementów <code><a href="/pl/XUL/treecol" title="pl/XUL/treecol">treecol</a></code>, po jednym na każdą kolumnę. Każda kolumna będzie widoczna w postaci nagłówka na szczycie drzewa.</li> <li>Druga cześć, ciało drzewa (tree body), które zawiera dane ukazujące się w drzewie i jest ono tworzone przy użyciu znacznika <code><a href="/pl/XUL/treechildren" title="pl/XUL/treechildren">treechildren</a></code>.</li> +</ul> +<p>Drzewo jest wyjątkowym elementem. Ciało drzewa składa się z pojedynczego widgetu, który wyświetla wszystkie dane w drzewie. To kontrastuje z polem listy, gdzie pojedynczy znacznik <code><a href="/pl/XUL/listitem" title="pl/XUL/listitem">listitem</a></code> i <code><a href="/pl/XUL/listcell" title="pl/XUL/listcell">listcell</a></code> jest stosowany by wyszczególnić wiersze w polu listy. W drzewie wszelkie dane do wyświetlenia są dostarczane przez oddzielny obiekt zwany widokiem drzewa. Gdy przyjdzie kolej na pokazanie komórki, widget drzewa określi, co jest do wyświetlenia i wyśle taką informację do widoku drzewa, co następnie będzie wyświetlone przez drzewo. Drzewo jest zdolne do tego, by wyciągać informacje z widoku, które wiersze mają być wyświetlone. To umożliwia optymalizację widoku w taki sposób, by pobierał informacje tylko o tym, co ma być wyświetlone. Dla przykładu, drzewo może mieć tysiące wierszy, dodatkowo większość z nich rozwiniętych poza granice widoku, tak że nie są widoczne. To znaczy, że drzewo jest skalowalne do dowolnych rozmiarów bez problemów z wydajnością.</p> +<p>Widok drzewa jest obiektem implementującym interfejs <a href="/pl/NsITreeView" title="pl/NsITreeView">nsITreeView</a>. Interfejs ten zawiera trzydzieści własności i funkcji, które można zaimplementować. Funkcje te będą wywoływane przez drzewo zawsze, kiedy będzie konieczne uzyskać dane o stanie drzewa. Na przykład funkcja <code>getCellText()</code> będzie wywoływana w celu pobrania etykiety dla konkretnej komórki drzewa.</p> +<p>Korzyścią z używania widoku jest w pewnym stopniu możliwość przechowywania w widoku danych w sposób dla nich odpowiedniejszy lub ładowania danych na żądanie (tak jak wiersze są wyświetlane). To umożliwia uzyskanie większej elastyczności podczas używania drzew.</p> +<p>Naturalnie, próba implementacji widoku drzewa z trzydziestoma lub więcej własnościami i metodami może być bardzo niewygodna, w szczególności dla prostych drzew. Na szczęście XUL dostarcza kilka wbudowanych rozwiązań, które wykonają najtrudniejsze zadania za Ciebie. Dla większości drzew (szczególnie, gdy zaczynasz prace z drzewami), możesz użyć jednego z gotowych, wbudowanych typów. Jednak nic nie stoi na przeszkodzie, aby utworzyć całkowicie nowy wygląd. Jeżeli chcesz możesz przechowywać dane w tablicy lub w strukturze danych JavaScript<span class="comment"><a href="/pl/A_re-introduction_to_JavaScript#Arrays">array</a></span>, bądź wczytywać dane z pliku XML.</p> +<p>Ponieważ całe ciało drzewa to pojedynczy widget, nie można zmienić stylu podanego wiersza lub komórki normalną drogą dlatego, że nie ma tam elementów, które wyświetlają pojedyncze komórki, jak to ma miejsce przy <code><a href="/pl/XUL/listbox" title="pl/XUL/listbox">listbox</a></code>. Zamiast tego całość jest rysowana przez ciało drzewa przy użyciu danych dostarczanych przez widok. To jest ważny punkt i wielu programistów XUL ma problem w zrozumieniu tego aspektu. By zmodyfikować wygląd pojawiającej się komórki, widok musi połączyć zestaw słów kluczowych dla wiersza i komórki. Używana jest specjalna składnia CSS. W pewien sposób to wygląda jak używanie klas CSS. Stylizacja drzew będzie omówiona bardziej szczegółowo <a href="/pl/Kurs_XUL/Nadawanie_stylu_drzewa" title="pl/Kurs_XUL/Nadawanie_stylu_drzewa">nieco później</a>.</p> +<h3 id="Elementy_drzewa" name="Elementy_drzewa">Elementy drzewa</h3> +<p>Drzewa mogą być tworzone przy użyciu elementów <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code></code>, które są opisane w następnych artykułach. Są też tam dwa elementy używane przy definiowaniu kolumn, które są wyświetlone w drzewie.</p> +<dl> <dt><code><a href="/pl/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code></dt> <dd>Zewnętrzny element drzewa.</dd> +</dl> +<dl> <dt><code><a href="/pl/docs/Mozilla/Tech/XUL/treecols" title="treecols">treecols</a></code></dt> <dd>Element wypełniający zestaw <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code></code>.</dd> +</dl> +<dl> <dt><code><a href="/pl/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code></dt> <dd>Jest używany do deklarowania pojedynczej kolumny drzewa. Używając tego elementu, można określić dodatkową informację o tym, jak dane w kolumnach maja być posortowane, a także czy użytkownik może zmieniać rozmiar kolumn. Zawsze powinno się umieszczać atrybut <code><a href="/pl/XUL/Atrybut/id" title="pl/XUL/Atrybut/id">id</a></code> na kolumnie. Mozilla stosuje <code><a href="/pl/XUL/Atrybut/id" title="pl/XUL/Atrybut/id">id</a></code> do identyfikacji kolumn przy ich ponownej aranżacji lub ich ukrywaniu. Od wersji 1.8 Mozilla już tego nie wymaga, jednak mimo wszystko dobrze jest używać atrybutu <code>id</code> do oznaczania kolumn.</dd> +</dl> +<dl> <dt><code><a href="/pl/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></dt> <dd>Zawiera główne ciało drzewa, w którym są wyświetlane pojedyncze wiersze danych.</dd> +</dl> +<h5 id="Przyk.C5.82ad_drzewa_z_dwoma_kolumnami" name="Przyk.C5.82ad_drzewa_z_dwoma_kolumnami">Przykład drzewa z dwoma kolumnami</h5> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_trees_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_trees_1.xul">Podgląd</a></p> +<pre><tree flex="1"> + + <treecols> + <treecol id="nameColumn" label="Nazwa" flex="1"/> + <treecol id="addressColumn" label="Adres" flex="2"/> + </treecols> + + <treechildren/> + +</tree> +</pre> +<p>Cała tabela otoczona elementem <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code></code>. To deklaruje element, który jest użyty jako tabela lub drzewo. Podobnie jak z tabelami HTML, dane w drzewie są zorganizowane w wierszach. Kolumny są określone przy pomocy znacznika <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treecols" title="treecols">treecols</a></code></code>.</p> +<p>W drzewie możesz umieścić tyle kolumn ile sobie życzysz. Tak jak w przypadku <a href="/pl/Kurs_XUL/Kontrolki_list" title="pl/Kurs_XUL/Kontrolki_list">listy pól</a>, wiersz nagłówka pojawia się wraz z etykietami kolumn na samej górze. Rozwijane menu ukazuje się w prawym górnym rogu drzewa. Użytkownik może go używać do ukrywania i wyświetlania wybranych kolumn. Każda kolumna jest utworzona przy pomocy elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code></code>. Możesz ustawić etykietę używając jej atrybutu <code>label</code>. Możesz stworzyć elastyczne kolumny, jeśli drzewo będzie elastyczne, to pozwoli ono zmieniać szerokości kolumn. W tym przykładzie druga kolumna jest dwa razy szersza do pierwszej. Wszystkie kolumny powinny być umieszczone wewnątrz elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treecols" title="treecols">treecols</a></code></code>.</p> +<p>W tym przypadku nie określiliśmy widoku w celu dostarczeniu danych drzewa, więc zobaczymy tylko nagłówki kolumn i puste ciało drzewa. Można zmieniać rozmiar okna dopóki nie ma tam żadnych danych do wyświetlenia. Dopóki drzewo było oznaczone jako elastyczne, ciało rozciągało się na całej dostępnej powierzchni. Czyniąc drzewo elastycznym, jak to się zwykle robi, pokazywane są tylko najbardziej istotne dane, więc drzewo jest tak rozciągane, żeby je dopasować. Jednak można wyszczególnić pewną liczbę wierszy (<code><code id="a-rows"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/rows">rows</a></code></code>) do pokazania w drzewie (<code><code><a href="/pl/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code></code>) przez umieszczenie rzędów w atrybucie elementu. Atrybut ten określa jak wiele wierszy jest wyświetlanych w interfejsie użytkownika, a nie ile wierszy tam się znajduje. Całkowita liczba <code><code id="a-rows"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/rows">rows</a></code></code> jest dostarczana przez widok drzewa. Jeżeli w drzewie znajduje się więcej wierszy, przejrzenie pozostałych umożliwia pasek przewijania. Jeżeli nie nadasz atrybutowi <code><code id="a-rows"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/rows">rows</a></code></code> wartości 0, znaczy to, że żaden z wierszy się nie pojawi. W tym przypadku można by zrobić drzewo elastyczne, jeżeli tak uczyniłeś to nie będzie potrzebny atrybut <code><code id="a-rows"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/rows">rows</a></code></code>, ponieważ urośnie on do maksymalnej dostępnej powierzchni.</p> +<h3 id="Tre.C5.9B.C4.87_widoku_drzewa" name="Tre.C5.9B.C4.87_widoku_drzewa">Treść widoku drzewa</h3> +<p>Mówiliśmy, że dane, by być pokazanymi w drzewie, pochodzą z widoku, a nie ze znaczników XUL, zdarza się, że wbudowany widok drzewa otrzymuje dane właśnie ze znaczników XUL. To może być nieco mylące, ale zasadniczo jeden z wbudowanych widoków drzewa używa zestawu znaczników, które mogą być zastosowane do określenia informacji na temat danych w drzewie. Następujące znaczniki są używane:</p> +<dl> <dt><code><a href="/pl/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></dt> <dd>Zawiera pojedynczy górny poziom wiersza i jego pochodne. Element ten służy także jako element, który może być wybrany przez użytkownika. Znacznik <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code> powinien być umieszczony dookoła wiersza, tak, że może być wybrany jako całość.</dd> +</dl> +<dl> <dt><code><a href="/pl/docs/Mozilla/Tech/XUL/treerow" title="treerow">treerow</a></code></dt> <dd>Pojedynczy rząd drzewa, który powinien być umieszczony wewnątrz znacznika <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code>.</dd> +</dl> +<dl> <dt><code><a href="/pl/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code></dt> <dd>Pojedyncza komórka drzewa. Winien być umieszczony wewnątrz elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treerow" title="treerow">treerow</a></code></code>.</dd> +</dl> +<p>Znaczniki te powinny być umieszczone bezpośrednio wewnątrz znacznika <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></code>, zagnieżdżone powyżej. Znaczniki definiują dane do umieszczenia w ciele drzewa. W tym przypadku drzewo używa wbudowanego widoku drzewa, zwanego treścią widoku drzewa, który używa etykiet i wartości określonych w tych elementach jako dane dla drzewa. Kiedy drzewo wymaga wyświetlenia wiersza, drzewo zażąda etykietę komórki, od okna widoku używając widoku funkcji getCellText, która otrzymuje dane od etykiety odpowiedniego elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code></code>.</p> +<p>Jednak są tam trzy wylistowane elementy, które nie są bezpośrednio pokazywane. Są używane jako źródło danych widoku. Są garścią atrybutów dodawanych do elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code> i powiązanych elementów. Na przykład, nie możesz zmienić wyglądu pojawiających się wierszy drzewa stosując atrybuty <code><code id="a-style"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/style">style</a></code></code>, albo z innymi własnościami CSS i odpowiednio powiązanymi cechami, takimi jak elastyczność i orientacja.</p> +<p>Faktycznie, oprócz kilku specyficznych atrybutów drzewa, tylko atrybuty, które będą przynosiły jakikolwiek efekt, będą atrybutem tekstu etykiety ustawianym przez <code><code id="a-label"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/label">label</a></code></code> dla komórki i <code><code id="a-src"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/src">src</a></code></code> w celu umieszczeniu i obrazu. Są jednak specjalne sposoby tytułowania drzewa i umieszczania innych cech, które zobaczymy w kolejnych artykułach.</p> +<p>Zdarzenia nie są wysyłane do elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code> i ich dzieci, zamiast tego są wysyłane do elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></code>.</p> +<p>Jako że pozycje drzewa są niepodobne do elementów XUL, są one źródłem wspólnych nieporozumień dla programistów XUL. Widok drzewa treści widoku jest widoczny tam, gdzie dane dla komórek są dostarczone do znaczników umieszczonych wewnątrz drzewa. Naturalnie, jeżeli używasz widoku innego rodzaju, dane będą dostarczone z innego źródła i nie będzie tam żadnych elementów <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code>.</p> +<p>Zobaczmy, jak utworzyć proste drzewo z wieloma kolumnami używając treści widoku drzewa. Można tego użyć do stworzenia listy wiadomości e-mail. Może się tam znaleźć wiele kolumn, takich jak nadawca i temat.</p> +<h4 id="Przyk.C5.82ad_drzewa_z_treechildren" name="Przyk.C5.82ad_drzewa_z_treechildren">Przykład drzewa z <code>treechildren</code></h4> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_trees_2.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_trees_2.xul">Podgląd</a></p> +<div class="float-right"><img alt="grafika:trees1.png" class=" internal" src="/@api/deki/files/2513/=Trees1.png"></div> +<pre><tree flex="1"> + + <treecols> + <treecol id="sender" label="Nadawca" flex="1"/> + <treecol id="subject" label="Temat" flex="2"/> + </treecols> + + <treechildren> + <treeitem> + <treerow> + <treecell label="joe@somewhere.com"/> + <treecell label="Ściśle tajne plany"/> + </treerow> + </treeitem> + <treeitem> + <treerow> + <treecell label="mel@whereever.com"/> + <treecell label="Zróbmy obiad"/> + </treerow> + </treeitem> + </treechildren> + +</tree> +</pre> +<p>Jak widać na obrazku, drzewo zostało utworzone z dwoma wierszami danych.</p> +<p>Drzewo to ma dwie kolumny, z których druga zajmie więcej miejsca niż ta pierwsza. Zazwyczaj będziemy tworzyć elastyczne kolumny. Możemy także dostarczyć informację o szerokościach za pomocą atrybutu <code><code id="a-width"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/width">width</a></code></code>. Powinno się zawrzeć taką samą liczbę elementów <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code></code>, ile jest kolumn w drzewie. W przeciwnym przypadku może to powodować powstawanie dziwnych, nieoczekiwanych sytuacji.</p> +<p>Wiersz nagłówka jest tworzony automatycznie. Przycisk w prawym górnym rogu może być użyty w celu ukrycia i pokazania kolumn. Można umieścić atrybut <code><code id="a-hidecolumnpicker"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/hidecolumnpicker">hidecolumnpicker</a></code></code> w drzewie i ustawić go jako <code>true</code> w celu ukrycia tego przycisku. Jeżeli przycisk zostanie tak ukryty, użytkownik nie będzie miał możliwości chowania kolumn.</p> +<p>Można być pewnym, że ustawiony atrybut <code><code id="a-id"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/id">id</a></code></code> przy każdej kolumnie, albo ukrywanie i pokazywanie kolumn nie będzie pracować z wszystkimi wersjami przeglądarki Mozilla.</p> +<p>Element <code>treechildren</code> otacza wszystkie wiersze. Wewnątrz ciała są wiersze, które mogą z kolei zawierać kolejne wiersze. Dla prostszego drzewa każdy wiersz jest tworzony przez <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code> i <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treerow" title="treerow">treerow</a></code></code>. Element <code>treerow</code> otacza wszystkie komórki w pojedynczym wierszu, podczas gdy element <code>treeitem</code> otaczałby wiersz i wszystkie jego dzieci. Drzewa z zagnieżdżonymi wierszami są opisane w następnym artykule.</p> +<p>Wewnątrz wierszy możemy umieścić pojedyncze komórki drzewa. Te są tworzone przy użyciu elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code></code>. Można umieścić tekst komórki używając atrybutu <code>label</code>. Pierwszy <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code></code> w wierszu określa zawartość, która ukaże się w pierwszej kolumnie, drugi <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code></code> określa zawartość drugiej kolumny itd.</p> +<p>Użytkownik może wybrać pozycje drzewa klikając na nie myszką lub podświetlając je przy życiu klawiatury. Można wybierać wiele pozycji na raz, przytrzymując klawisz SHIFT lub CTRL, a następnie klikając w kolejny wiersz, jaki chcemy zaznaczyć. W celu uniemożliwienia wielokrotnego zaznaczenia (wyboru), należy umieścić atrybut <code><code id="a-seltype"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/seltype">seltype</a></code></code> w drzewie i ustawić jego wartość na <code>single</code>. Dzięki temu użytkownik może dokonać zaznaczenia (wyboru) tylko jednej pozycji w danym momencie.</p> +<div class="highlight"> +<h4 id="Dodajemy_drzewo_do_przyk.C5.82adu_Znajd.C5.BA_pliki" name="Dodajemy_drzewo_do_przyk.C5.82adu_Znajd.C5.BA_pliki">Dodajemy drzewo do przykładu <code>Znajdź pliki</code></h4> +<p>Dodajemy drzewo do okna wyszukiwania plików, gdzie są wyświetlane wyniki. Drzewo użyje treści widoku drzewa. Następujący kod powinien zająć miejsce <a href="/pl/Kurs_XUL/Panele_treści#Przyk.C5.82ad_iframe" title="pl/Kurs_XUL/Panele_treści#Przyk.C5.82ad_iframe">iframe</a>.</p> +<pre class="eval"><span class="highlightred"><tree flex="1"> <treecols> <treecol id="name" label="Nazwa pliku" flex="1"/> <treecol id="location" label="Lokalizacja" flex="2"/> <treecol id="size" label="Rozmiar" flex="1"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="mozilla"/> <treecell label="/usr/local"/> <treecell label="2520 bajtów"/> </treerow> </treeitem> </treechildren> </tree></span> + +<splitter collapse="before" resizeafter="grow"/> +</pre> +<p>Dodaliśmy drzewo z trzema kolumnami dla nazwy pliku, lokalizacji i rozmiaru. Druga kolumna będzie dwa razy szersza z powodu większej elastyczności. Pojedynczy wiersz został dodany, by zobrazować, jak wygląda tabela z wierszem. W rzeczywistości, wiersze byłby dodane przez skrypt zależnie od wyników wyszukiwania lub byłby stworzony własny widok do przetrzymania danych.</p> +<p>Przykład <code>Znajdź pliki</code>: <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-trees.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-trees.xul">Podgląd</a></p> +</div> +<p>Następnie nauczymy się, jak stworzyć <a href="/pl/Kurs_XUL/Dodatkowe_możliwości_drzewa" title="pl/Kurs_XUL/Dodatkowe_możliwości_drzewa">bardziej zaawansowane drzewa</a>.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Przykłady_XPCOM" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dodatkowe_możliwości_drzewa">Następny »</a></p> +</div><p></p> +<p><span class="comment">Tłumaczenie: PHP.pl</span></p> +<p> </p> + +<p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/drzewa_i_szablony/index.html b/files/pl/mozilla/tech/xul/kurs_xul/drzewa_i_szablony/index.html new file mode 100644 index 0000000000..628cdad2da --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/drzewa_i_szablony/index.html @@ -0,0 +1,138 @@ +--- +title: Drzewa i szablony +slug: Mozilla/Tech/XUL/Kurs_XUL/Drzewa_i_szablony +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Trees_and_Templates +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Szablony" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Źródła_danych_RDF">Następny »</a></p> +</div> <p></p> + +<p>Zawartość artykułu opisuje jak używać szablonów wraz z drzewami.</p> + +<h2 id="Dodajemy_.C5.BAr.C3.B3d.C5.82o_danych_do_drzewa" name="Dodajemy_.C5.BAr.C3.B3d.C5.82o_danych_do_drzewa">Dodajemy źródło danych do drzewa</h2> + +<p>Kiedy używamy drzewa, często korzystamy z szablonu, aby zbudować jego zawartość, kierując dużą ilością hierarchicznych danych. Używając szablonu z drzewem stosujemy bardzo często podobną składnię z innymi elementami. Aby dodać <code><code id="a-datasources"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/datasources">datasources</a></code></code> i atrybut <code><code id="a-ref"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/ref">ref</a></code></code> do elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code></code>, który określa źródło danych i węzeł podstawy wyświetla.</p> + +<p>Następujący przykład odwołuje się do historii kodu źródłowego:</p> + +<pre><tree datasources="rdf:history" ref="NC:HistoryByDate" + flags="dont-build-content"> +</pre> + +<p>Jak opisano w poprzednim temacie, drzewa mogą używać programów do budowy drzew dla generatora szablonów zamiast normalnej zawartości programów do budowy. Oznacza to, że elementy te nie będą utworzone dla każdego wiersza w drzewie, robiąc go bardziej efektywnym. Atrybuty <code><code id="a-flags"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/flags">flags</a></code></code> ustawią wartość <code>dont-build-content</code>,jak w przykładzie powyżej, sygnalizując użycie generatora drzew. Jeśli opuszczasz ten atrybut, generator zawartości zostanie użyty. Możesz zobaczyć różnice używając Inspektora Mozilla DOM w drzewie z lub bez flagi.</p> + +<p>Jeśli używasz do budowy zamiast budowniczego zawartości, notatki że ta zawartość nie będzie generalnie pobierana do budowy aż do momentu kiedy nie będziesz tego potrzebował. W hierarchicznych drzewach, potomek-dziecko nie będzie brał generowanego tekstu aż węzeł rodzic nie zostanie otwarty przez użytkownika.</p> + +<p>W szablonie, jest po jednej <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code></code> dla każdej kolumny w drzewie. Komórki powinny mieć atrybut <code><code id="a-label"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/label">label</a></code></code> do ustawiania etykiety komórek. Jest to normalne ustawienie własności w RDF, tak więc etykieta jest pobierana z kodu źródłowego.</p> + +<h3 id="Template-built_Tree_Example" name="Template-built_Tree_Example">Template-built Tree Example</h3> + +<p>Następujący przykład demonstruje zbudowany szablon drzewa, w tym przypadku dla pliku systemowego:</p> + +<p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_treetempl_1.xul.txt">Źródła</a></p> + +<pre><tree id="my-tree" flex="1" + datasources="rdf:files" ref="file:///" flags="dont-build-content"> + <treecols> + <treecol id="Name" label="Name" primary="true" flex="1"/> + <splitter/> + <treecol id="Date" label="Date" flex="1"/> + </treecols> + + <template> + <rule> + <treechildren> + <treeitem uri="rdf:*"> + <treerow> + <treecell label="rdf:http://home.netscape.com/NC-rdf#Name"/> + <treecell label="rdf:http://home.netscape.com/WEB-rdf#LastModifiedDate"/> + </treerow> + </treeitem> + </treechildren> + </rule> + </template> +</tree> +</pre> + +<p>W ty miejscu, drzewo zostało utworzone z dwoma kolumnami, dla nazwy i daty pliku. Drzewo powinno zostać wyświetlone jako lista plików w katalogu głównym. Użyto tylko jednej zasady, ale ty możesz dodać inne, jeśli tego potrzebujesz. Tak samo z innymi szablonami, atrybut uri na elemencie wskazuje gdzie ma zacząć generować zawartość. Dwie komórki dostają nazwę i datę z kodu źródłowego i umieszcza ich wartość w etykiecie komórki.</p> + +<p>Przykład pokazuje dlaczego atrybut <code>uri</code> staje się użyteczny. Zauważ jak to było na pozycji drzewa w przykładzie, nawet chociaż to nie jest prosty potomek elementu reguły. Potrzebujemy położyć ten atrybut na tych elementach, na których potrzebujemy uzyskać powtórzony kod. Ponieważ nie chcemy wielokrotnego elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></code>, nie chcemy to tam położyć. Skutecznie, elementy zewnętrzne (lub powyższe) elementu z atrybutem <code>uri</code> nie są duplikowane podczas gdy elementy z atrybutem <code>uri</code> i elementy wewnątrz są duplikowane dla każdego źródła.</p> + +<p>Zaznaczony w obrazku element to potomek - dziecko, który jest umieszczony poniżej elementu z poziomu górnego, który został dodany automatycznie. XUL wie jak dodać element dziecka kiedy szablon lub zasady stanowią wartość elementu drzewa lub elementu menu. Generując elementy drzewa jako zagnieżdżone i konieczne oparte na dostępnych danych RDF.</p> + +<div class="float-right"><img alt="Image:rdfoutl1.jpg"></div> + +<p>Interesującą partię danych z kodem źródłowym RDF jest w wartości tych zasobów, i edytujesz tylko zasoby decydując kiedy dane są potrzebne. Wyznacza to wartość na jaką głębokość w zasobach hierarchii są nie możliwe do utworzenia aż do nawigacji zasobami poprzez węzeł w drzewie. Stało się to użytecznym dla pewnego kodu źródłowego gdzie dane są dynamicznie możliwie.</p> + +<h2 id="Sortowanie_kolumn" name="Sortowanie_kolumn">Sortowanie kolumn</h2> + +<p>Jeśli wypróbujesz poprzedzający przykład, moglibyśmy zaznaczyć to w co lista nie jest posortowana. Drzewa które generują dane z kodu źródłowego posiada nieobowiązkową zdolność posortować ich dane. Możemy posortować każdy podnoszący się i obniżający na jakiejkolwiek kolumnie. Użytkownik może zmienić posortowane kolumny i kierunek poprzez kliknięcie nagłówka kolumny. Właściwości sortowania nie są dostępne dla wartości drzew statycznych, chociaż możemy pisać skrypty zawierające dane.</p> + +<p>Sortując angażuje trzy atrybuty, które powinny być umieszczone w kolumnach. Pierwszy atrybut, <b>sort</b> powinien być ustawiony na własności klucza sortowania używanego w RDF. Często, może to być użyta taka sama nazwa etykiety w komórce kolumny. Jeśli ustawisz sortowanie na kolumnę, to wtedy będą sortowane w niej dane. Użytkownik może zmienić kierunek sortowania klikając w nagłówek kolumny. Jeśli nie ustawisz atrybutu <b>sort</b> w kolumnie, dane nie mogą być sortowane w tej kolumnie.</p> + +<p>Atrybut <code>sortDirection</code> jest używany do ustawienia kierunku w którym kolumny będą sortować domyślnie. Poszczególne możliwe cechy:</p> + +<ul> + <li>ascending: dane są wyświetlane rosnąco</li> + <li>descending: dane są wyświetlane malejąco</li> + <li>natural: dane są wyświetlone w rozkazie naturalnym , które znaczy polecenie danych jest przechowywane w kodzie źródłowym RDF.</li> +</ul> + +<p>Atrybut finalny, <code>sortActive</code> powinien być ustawiony na <code>true</code> dla jednej kolumny, jeden którego wybraliśmy będzie sortowany domyślnie.</p> + +<p>Chociaż sortowanie działa bez zarzutów i prawidłowo tylko z tamtymi narzędziami, możesz także użyć klasę stylu <code>sortDirectionIndicator</code> w kolumnie, w której będzie ona sortowana. Będzie powodować mały trójkąt pojawiający się nagłówek, który wskazuje kierunek sortowania. Jeśli nie chcesz tego robić, możesz dalej sobie sortować kolumny ale nie uzyska wskazówek dotyczących kierunku aktualnego sortowania.</p> + +<p>Poniższy przykład pokazuje zmiany kolumn we wcześniejszym przykładzie poprzez dołączenie extra własności:</p> + +<pre><treecols> + <treecol id="Name" label="Name" flex="1" primary="true" + class="sortDirectionIndicator" sortActive="true" + sortDirection="ascending" + sort="rdf:http://home.netscape.com/NC-rdf#Name"/> + <splitter/> + <treecol id="Date" label="Date" flex="1" class="sortDirectionIndicator" + sort="rdf:http://home.netscape.com/WEB-rdf#LastModifiedDate"/> +</treecols> +</pre> + +<h2 id="Sta.C5.82y_rozmiar_kolumn" name="Sta.C5.82y_rozmiar_kolumn">Stały rozmiar kolumn</h2> + +<p>Jedna dodatkowa rzeczą możesz chcieć zrobić wytrzymałe kolumny, które są aktualnie sortowane, więc to jest zapamiętywane pomiędzy sesjami. Aby zrobić to, użyjmy atrybutu <code><code id="a-persist"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/persist">persist</a></code></code> na każdym <code><a href="/pl/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code> elemencie. Znajduje się tam pięć atrybutów kolumn, które będą upierały się, aby zapisać <b>width (długość)</b> kolumn, kolumna rozkazu, czy kolumna jest jawna, która kolumna jest aktualnie posortowana i sortuje instrukcje. Poniższy przykład pokazuje przykładowe kolumny:</p> + +<pre><treecol id="Date" label="Date" flex="1" + class="sortDirectionIndicator" + persist="width ordinal hidden sortActive sortDirection" + sort="rdf:http://home.netscape.com/WEB-rdf#LastModifiedDate"/> +</pre> + +<p>More details about the <code><code id="a-persist"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/persist">persist</a></code></code> attribute will be described in <a href="pl/Kurs_XUL/Trwa%c5%82e_dane">the later section</a>.</p> + +<h2 id="Additional_Rule_Attributes" name="Additional_Rule_Attributes">Additional Rule Attributes</h2> + +<h3 id="Dodawanie_atrybut.C3.B3w_zasad" name="Dodawanie_atrybut.C3.B3w_zasad">Dodawanie atrybutów zasad</h3> + +<p>Tutaj mamy dwa dodatkowe atrybuty, które mogą zostać dodane jako elementy zasad, które pozwolą na określenie pewnych specjalnych okoliczności. Oba atrybuty są typu boolean.</p> + +<dl> + <dt>iscontainer</dt> + <dd>jeśli ten atrybut jest ustawiony na wartość <code>true</code>, następnie zasady dopasują kod źródłowy, który posiada potomka-dziecko. Na przykład, możemy używać zasad aby dopasować foldery zakładek. Jest to wygodny jako kod źródłowy RDF nie potrzebującego wszelkich specjalnych atrybutów wskazujących na to.</dd> +</dl> + +<dl> + <dt>isempty</dt> + <dd>jeśli ten atrybut jest ustawiony na wartość <code>true</code>, następnie zasady dopasują kod źródłowy tak aby nie posiadać potomka - dziecka.</dd> +</dl> + +<p>Dwa powyższe atrybuty są naprawdę swoimi przeciwieństwami. Zasoby mogą być w zbiornikach i będą puste jako dobre(?). Kiedykolwiek, różnice pochodzą z kodu, to nie będzie zbiornikiem. Na przykład, folder zakładek jest pojemnikiem ale to siła nie może mieć potomka. Kiedykolwiek, pojedyncza zakładka lub separator nie są żadnym pojemnikiem.</p> + +<p>Możesz połączyć te dwa elementy z innymi aplikacjami, atrybutami dla określonych zasad.</p> + +<p>Następnie, zobaczymy trochę kodu źródłowego dostarczonego przez Mozillę.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Szablony" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Źródła_danych_RDF">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/dziedziczenie_atrybutu_xbl/index.html b/files/pl/mozilla/tech/xul/kurs_xul/dziedziczenie_atrybutu_xbl/index.html new file mode 100644 index 0000000000..88a446e682 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/dziedziczenie_atrybutu_xbl/index.html @@ -0,0 +1,115 @@ +--- +title: Dziedziczenie atrybutu XBL +slug: Mozilla/Tech/XUL/Kurs_XUL/Dziedziczenie_atrybutu_XBL +tags: + - Kurs_XUL + - Przewodniki + - XBL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/XBL_Attribute_Inheritance +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Treść_anonimowa" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dodawanie_własności">Następny »</a></p> +</div><p></p> + +<p>W tym artykule zobaczymy jak atrybuty mogą być dziedziczone.</p> + +<h2 id="Dziedziczenie_atrybut.C3.B3w" name="Dziedziczenie_atrybut.C3.B3w">Dziedziczenie atrybutów</h2> + +<p><a href="pl/XBL">XBL</a> pozwala nam na zbudowanie połączonych widgetów podczas ukrywania ich rzeczywistej implementacji. Jednakże z właściwościami wzmiankowanymi dotychczas, anonimowa zawartość jest zawsze tworzona w ten sam sposób. Byłoby to użyteczne do dodawania atrybutów do elementów granicznych które modyfikują wewnętrzne elementy. Na przykład:</p> + +<pre class="eval"><b>XUL:</b> + +<searchbox/> + +<b>XBL:</b> + +<binding id="searchBinding"> + <content> + <xul:textbox/> + <xul:button label="Search"/> + </content> +</binding> +</pre> + +<p>W tym przykładzie, atrybut <code><code id="a-label"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/label">label</a></code></code> umieszczono bezpośrednio w elemencie <code><code><a href="/pl/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code>. Problem z tym jest taki, że etykieta powinna być taka sama za każdym razem, kiedy stosujemy dowiązanie. W tym przypadku byłoby to bardziej pożądane gdyby atrybut mógł być określony w polu wyszukiwania. XBL dostarcza atrybutu <code>inherits</code>, który może być użyty do dziedziczenia atrybutów z elementu granicznego. Powinien być umieszczony w elemencie, który powinien dziedziczyć atrybut z zewnętrznego elementu, w tym przypadku przycisku. Ta wartość powinna być ustawiona jako lista oddzielona przecinkami atrybutów nazwy, których są dziedziczone.</p> + +<pre><xul:textbox xbl:inherits="flex"/> +<xul:button xbl:inherits="label"/> +</pre> + +<p>Kiedy zawartość jest generowana, <code><code><a href="/pl/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></code> korzysta z atrybutu <code>flex</code> pola wyszukiwania a <code><code><a href="/pl/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> korzysta z atrybutu <code><code id="a-label"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/label">label</a></code></code> pola wyszukiwania. Pozwala to elastyczności pola tekstowego i etykiety przycisku być różnymi dla każdego zastosowania dowiązania. Dodatkowo, zmieniając wartość tego atrybutu w polu wyszukiwania skryptem zaktualizujemy również pole tekstowe i przycisk. Możesz dodać atrybut inherits do tylu elementów ile sobie życzysz, dziedzicząc kilka atrybutów.</p> + +<p>Zauważ, że atrybut <code>inherits</code> jest umieszczony w przestrzeni nazw XBL, poprzez poprzedzenie go 'xbl:'. Przestrzeń nazw powinna być zadeklarowana gdzieś wcześniej, zazwyczaj w elemencie <code><code><a href="/pl/docs/Mozilla/Tech/XUL/bindings" title="bindings">bindings</a></code></code>. Demonstruje to kolejny przykład:</p> + +<pre><bindings xmlns:xbl="http://www.mozilla.org/xbl" + xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<xbl:binding id="buttonBinding"> + <xbl:content> + <xul:button label="OK" xbl:inherits="label"/> + </xbl:content> +</xbl:binding> +</pre> + +<p>W tym przykładzie, przycisk dziedziczy atrybut <code><code id="a-label"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/label">label</a></code></code>, ale ten atrybut jest również podaną wartością bezpośrednio w XBL. Ta technika jest używana do ustawienia domyślnej wartości jeśli atrybuty nie jest obecny przycisk ten odziedziczy atrybut <code><code id="a-label"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/label">label</a></code></code> z elementu zewnętrznego jednak, jeśli nie ma <code><code id="a-label"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/label">label</a></code></code>, będzie podana domyślna wartość <code>OK</code>.</p> + +<p>Może być to stosowane tam gdzie dwa wygenerowane elementy muszą dziedziczyć z atrybutu który ma taką samą nazwę. Na przykład, tworząc etykietowane pole tekstowe (pole tekstowe z tekstem opisującym obok niego) z elementami <code><code><a href="/pl/docs/Mozilla/Tech/XUL/label" title="label">label</a></code></code> i <code><code><a href="/pl/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></code>, etykieta będzie musiała dziedziczyć tekst z atrybutu <code><code id="a-value"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/value">value</a></code></code> a pole tekstowe również będzie dziedziczyło domyślną wartość z atrybutu <code><code id="a-value"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/value">value</a></code></code>. Do rozwiązania tego będziemy musieli użyć innego atrybutu odwzorować go do tego samego. Poniżej to demonstruje:</p> + +<pre class="eval"><b>XUL:</b> + +<box class="labeledtextbox" title="Enter some text:" value="OK"/> + +<b>CSS:</b> + +box.labeledtextbox { + -moz-binding: url('<a class="external" rel="freelink">chrome://example/skin/example.xml#labeledtextbox'</a>); +} + +<b>XBL:</b> + +<binding id="labeledtextbox"> + <content> + <xul:label xbl:inherits="value=title"/> + <xul:textbox xbl:inherits="value"/> + </content> +</binding> +</pre> + +<p><code><code><a href="/pl/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></code> dziedziczy atrybut <code><code id="a-value"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/value">value</a></code></code> bezpośrednio. Aby ustawić atrybut <code><code id="a-value"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/value">value</a></code></code> w etykiecie, musimy użyć innej nazwy atrybutu i od wzorować go do tej wartości. Atrybut <code>inherits</code> w etykiecie wykorzystuje atrybut <code>title</code> z etykietowanego pola tekstowego i odwzorowuje go do atrybutu <code><code id="a-value"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/value">value</a></code></code> elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/label" title="label">label</a></code></code>. Składnia <code><inner attribute>=<outer attribute></code> jest używana do odwzorowania jednego atrybutu do innego. Tu mamy inny przykład:</p> + +<pre class="eval"><b>XUL:</b> + +<box class="okcancel" oktitle="OK" canceltitle="Cancel" image="happy.png"/> + +<b>CSS:</b> + +box.okcancel { + -moz-binding: url('<a class="external" rel="freelink">chrome://example/skin/example.xml#okcancel'</a>); +} + +<b>XBL:</b> + +<binding id="okcancel"> + <content> + <xul:button xbl:inherits="label=oktitle,image"/> + <xul:button xbl:inherits="label=canceltitle"/> + </content> +</binding> +</pre> + +<p>Wartość atrybutu <code>oktitle</code> jest odwzorowana do atrybutu <code><code id="a-label"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/label">label</a></code></code> pierwszego przycisku. Atrybut <code>canceltitle</code> jest odwzorowany do atrybutu <code><code id="a-label"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/label">label</a></code></code> drugiego przycisku. Pierwszy przycisk również dziedziczy atrybut <code><code id="a-image"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/image">image</a></code></code> a wynik jest następujący:</p> + +<pre><box class="okcancel" oktitle="OK" canceltitle="Cancel" image="happy.png"> + <button label="OK" image="happy.png"/> + <button label="Cancel"/> +</box> +</pre> + +<p>Zauważ, że atrybuty są powielone z wewnętrznej (anonimowej) zawartości. Zmieniając atrybuty w polu z klasy <code>okcancel</code> będzie automatycznie zmieniana wartość w przycisku. Możesz również do notować, że możemy wymyślić swoje własne nazwy atrybutów. Jest to poprawne w XUL.</p> + +<p>W następnym artykule, zobaczymy w jaki sposób <a href="pl/Kurs_XUL/Dodawanie_w%c5%82asno%c5%9bci">dodamy do wiązania własności, metody i zdarzenia</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Treść_anonimowa" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dodawanie_własności">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/dziedziczenie_xbl/index.html b/files/pl/mozilla/tech/xul/kurs_xul/dziedziczenie_xbl/index.html new file mode 100644 index 0000000000..4b6b2f55d1 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/dziedziczenie_xbl/index.html @@ -0,0 +1,56 @@ +--- +title: Dziedziczenie XBL +slug: Mozilla/Tech/XUL/Kurs_XUL/Dziedziczenie_XBL +tags: + - Kurs_XUL + - Przewodniki + - XBL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/XBL_Inheritance +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Dodawanie_funkcji_obsługi_zdarzenia" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Przykład_XBL">Następny »</a></p> +</div><p></p> + +<p>W tym artykule, zobaczymy jak rozszerzyć istniejące definicje języka <a href="pl/XBL">XBL</a>.</p> + +<h2 id="Dziedziczenie" name="Dziedziczenie">Dziedziczenie</h2> + +<p>Czasami możesz chcieć utworzyć widget XBL, który jest podobny do już istniejącego. Na przykład, powiedzmy, że chcemy utworzyć przycisk w wyskakującym okienku. Jednym sposobem jest utworzenie duplikatu już istniejącego kodu XBL dla naszego przycisku. Jednakże, byłoby lepiej rozszerzyć już istniejący kod przycisku.</p> + +<p>Jakiekolwiek wiązanie może być powiększone o następne. Wiązanie - dziecko może dodać właściwości, metody i zdarzenia uchwytów. Wiązanie - potomne będzie miało wszystkie cechy, jakie zdefiniowane są podczas dodawania cech do wiązania, które otrzymuje w wyniku dziedziczenia (i jakieś wiązanie dziedziczy z wyższych wartości drzewa).</p> + +<p>Do rozszerzenia istniejącego wiązania, dodaj atrybut rozszerzenia (<code>extends</code>) do tagu <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#binding">binding</a></code></code>. Na przykład, następnie rozszerzenie wiązania tworzy pole tekstowe, które dodaje tekst <span class="nowiki">http://www</span> do początku wpisanej wartości, dzieje się tak, kiedy naciśniemy klawisz F4.</p> + +<p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_xblinherit_1.xml.txt">Źródła</a></p> + +<pre><binding id="textboxwithhttp" + extends="chrome://global/content/bindings/textbox.xml#textbox"> + <handlers> + <handler event="keypress" keycode="VK_F4"> + this.value="http://www"+value; + </handler> + </handlers> +</binding> +</pre> + +<p>Tutaj XBL powiększa element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></code> z języka XUL. URL daje nam atrybut <code>extends</code> powyżej jest powiązany adresem URL z wiązaniem pola tekstowego. To znaczy, że dziedziczy wszystkie wartości i zachowania dostarczone przez wiązanie pola tekstowego. W dodatku, dodajemy uchwyt, który odpowiada na zdarzenie klawisza (keypress).</p> + +<h2 id="Automatyczne_uzupe.C5.82nianie_p.C3.B3l_tekstowych" name="Automatyczne_uzupe.C5.82nianie_p.C3.B3l_tekstowych">Automatyczne uzupełnianie pól tekstowych</h2> + +<p><span class="comment">poniżej treść już jest ok</span> Przykład powyżej jest podobny do sposobu jak cechy automatycznego uzupełnia pracują w Mozilli. Pola tekstowe, które obsługują automatyczne uzupełnianie jest tylko z jednym wiązaniem XBL, które rozszerza podstawowe pole tekstowych.</p> + +<p><a href="pl/XUL/textbox_(Mozilla_-_automatyczne_uzupe%c5%82nianie)">Automatyczne uzupełnianie pól tekstowych</a> dodaje dodatkowy uchwyt zdarzenia, tak, że kiedy adres URL jest wpisywany, to menu będzie się pokazywać prawdopodobnie automatycznie do końca. Możemy też użyć własnych aplikacji. Wystarczy, że utworzymy pole tekstowe wraz z dwoma dodatkowymi atrybutami.</p> + +<pre><textbox type="autocomplete" searchSessions="history"/> +</pre> + +<p>Ustaw <code>type</code> na <code>autocomplete</code>, aby dodać możliwość automatycznego uzupełniania do istniejącego pola tekstowego. Ustaw <code>searchSessions</code>, aby zasygnalizować jaki typ danych szukamy. W tym przypadku, została użyta wartość <code>history</code>, który szuka adresów URL w historii (możemy także użyć wartości <code>addrbook</code>, aby poszukać adresów w książce adresów).</p> + +<div class="note">Firefox używa innego mechanizmu automatycznego uzupełniania, niż Mozilla Suite, zobacz <a href="pl/XUL/textbox_(Firefox_-_automatyczne_uzupe%c5%82nianie)">XUL:textbox (Firefox - automatyczne uzupełnianie)</a></div> + +<p>W następnym artykule, zobaczymy <a href="pl/Kurs_XUL/Przyk%c5%82ad_XBL">przykład widgetu zdefiniowanego przy pomocy języka XBL</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Dodawanie_funkcji_obsługi_zdarzenia" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Przykład_XBL">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/index.html b/files/pl/mozilla/tech/xul/kurs_xul/index.html new file mode 100644 index 0000000000..1b540fb974 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/index.html @@ -0,0 +1,170 @@ +--- +title: Kurs XUL +slug: Mozilla/Tech/XUL/Kurs_XUL +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial +--- +<p>Niniejszy kurs opisuje <a href="/pl/XUL" title="pl/XUL">XUL</a>, <a href="/pl/XML" title="pl/XML">XML</a>-owy język opisu interfejsu użytkownika . Język ten został stworzony dla aplikacji Mozilli i jest stosowany do definiowania interfejsu użytkownika.</p> + +<div class="note">Niniejsze tłumaczenie nie jest skończone. Trzeba je w całości przejrzeć i poprawić. Jest ktoś chętny, aby je dopracować? Ogólnie panuje lekki ... no zastój - na razie zalecamy korzystanie z wersji angielskiej tego kursu, niebawem będzie on już w całości po polsku.</div> + +<h2 id="Wprowadzenie" name="Wprowadzenie">Wprowadzenie</h2> + +<ul> + <li><a href="/pl/Kurs_XUL/Wprowadzenie" title="pl/Kurs_XUL/Wprowadzenie">Wprowadzenie</a></li> + <li><a href="/pl/Kurs_XUL/Struktura_XUL" title="pl/Kurs_XUL/Struktura_XUL">Struktura języka XUL</a></li> + <li><a href="/pl/Kurs_XUL/URL_Chrome" title="pl/Kurs_XUL/URL_Chrome">Adresy URL typu Chrome</a></li> + <li><a href="/pl/Kurs_XUL/Pliki_manifestu" title="pl/Kurs_XUL/Pliki_manifestu">Pliki manifestu</a></li> +</ul> + +<h2 id="Podstawowe_elementy" name="Podstawowe_elementy">Podstawowe elementy</h2> + +<ul> + <li><a href="/pl/Kurs_XUL/Tworzenie_okna" title="pl/Kurs_XUL/Tworzenie_okna">Tworzenie okna</a></li> + <li><a href="/pl/Kurs_XUL/Dodawanie_przycisk%C3%B3w" title="pl/Kurs_XUL/Dodawanie_przycisków">Dodawanie przycisków</a></li> + <li><a href="/pl/Kurs_XUL/Dodawanie_etykiet_i_obrazk%C3%B3w" title="pl/Kurs_XUL/Dodawanie_etykiet_i_obrazków">Dodawanie etykiet i obrazków</a></li> + <li><a href="/pl/Kurs_XUL/Kontrolki_wej%C5%9Bcia" title="pl/Kurs_XUL/Kontrolki_wejścia">Kontrolki wejścia</a></li> + <li><a href="/pl/Kurs_XUL/Kontrolki_numeryczne" title="pl/Kurs_XUL/Kontrolki_numeryczne">Kontrolki numeryczne</a></li> + <li><a href="/pl/Kurs_XUL/Kontrolki_list" title="pl/Kurs_XUL/Kontrolki_list">Kontrolki list</a></li> + <li><a href="/pl/Kurs_XUL/Paski_post%C4%99pu" title="pl/Kurs_XUL/Paski_postępu">Paski postępu</a></li> + <li><a href="/pl/Kurs_XUL/Dodawanie_element%C3%B3w_HTML" title="pl/Kurs_XUL/Dodawanie_elementów_HTML">Dodawanie elementów HTML</a></li> + <li><a href="/pl/Kurs_XUL/Zastosowanie_odst%C4%99p%C3%B3w" title="pl/Kurs_XUL/Zastosowanie_odstępów">Zastosowanie odstępów</a></li> + <li><a href="/pl/Kurs_XUL/Dodatkowe_mo%C5%BCliwo%C5%9Bci_przycisku" title="pl/Kurs_XUL/Dodatkowe_możliwości_przycisku">Dodatkowe możliwości przycisków</a></li> +</ul> + +<h2 id="Model_pude.C5.82kowy" name="Model_pude.C5.82kowy">Model pudełkowy</h2> + +<ul> + <li><a href="/pl/Kurs_XUL/Model_pude%C5%82kowy" title="pl/Kurs_XUL/Model_pudełkowy">Model pudełkowy</a></li> + <li><a href="/pl/Kurs_XUL/Pozycjonowanie_element%C3%B3w" title="pl/Kurs_XUL/Pozycjonowanie_elementów">Pozycjonowanie elementów</a></li> + <li><a href="/pl/Kurs_XUL/Szczeg%C3%B3%C5%82y_modelu_pude%C5%82kowego" title="pl/Kurs_XUL/Szczegóły_modelu_pudełkowego">Szczegóły modelu pudełkowego</a></li> + <li><a href="/pl/Kurs_XUL/Pola_grup" title="pl/Kurs_XUL/Pola_grup">Pola grup</a></li> + <li><a href="/pl/Kurs_XUL/Dodawanie_innych_element%C3%B3w" title="pl/Kurs_XUL/Dodawanie_innych_elementów">Dodawanie innych elementów</a></li> +</ul> + +<h2 id="Dodatkowe_elementy_rozmieszczenia" name="Dodatkowe_elementy_rozmieszczenia">Dodatkowe elementy rozmieszczenia</h2> + +<ul> + <li><a href="/pl/Kurs_XUL/Stosy_i_pok%C5%82ady" title="pl/Kurs_XUL/Stosy_i_pokłady">Stosy i pokłady</a></li> + <li><a href="/pl/Kurs_XUL/Pozycjonowanie_stosu" title="pl/Kurs_XUL/Pozycjonowanie_stosu">Pozycjonowanie stosu</a></li> + <li><a href="/pl/Kurs_XUL/Pude%C5%82ko_kart" title="pl/Kurs_XUL/Pudełko_kart">Pudełko kart</a></li> + <li><a href="/pl/Kurs_XUL/Siatki" title="pl/Kurs_XUL/Siatki">Siatki</a></li> + <li><a href="/pl/Kurs_XUL/Panele_tre%C5%9Bci" title="pl/Kurs_XUL/Panele_treści">Panele treści</a></li> + <li><a href="/pl/Kurs_XUL/Rozdzielacze" title="pl/Kurs_XUL/Rozdzielacze">Rozdzielacze</a></li> + <li><a href="/pl/Kurs_XUL/Paski_przewijania" title="pl/Kurs_XUL/Paski_przewijania">Paski przewijania</a> </li> +</ul> + +<h2 id="Paski_narz.C4.99dzi_i_menu" name="Paski_narz.C4.99dzi_i_menu">Paski narzędzi i menu</h2> + +<ul> + <li><a href="/pl/Kurs_XUL/Paski_narz%C4%99dzi" title="pl/Kurs_XUL/Paski_narzędzi">Paski narzędzi</a></li> + <li><a href="/pl/Kurs_XUL/Proste_paski_menu" title="pl/Kurs_XUL/Proste_paski_menu">Proste paski menu</a></li> + <li><a href="/pl/Kurs_XUL/Dodatkowe_mo%C5%BCliwo%C5%9Bci_menu" title="pl/Kurs_XUL/Dodatkowe_możliwości_menu">Dodatkowe możliwości menu</a></li> + <li><a href="/pl/Kurs_XUL/Wyskakuj%C4%85ce_menu" title="pl/Kurs_XUL/Wyskakujące_menu">Wyskakujące menu</a></li> + <li><a href="/pl/Kurs_XUL/Przewijane_menu" title="pl/Kurs_XUL/Przewijane_menu">Przewijane menu</a></li> +</ul> + +<h2 id="Zdarzenia_i_skrypty" name="Zdarzenia_i_skrypty">Zdarzenia i skrypty</h2> + +<ul> + <li><a href="/pl/Kurs_XUL/Dodawanie_funkcji_obs%C5%82ugi_zdarze%C5%84" title="pl/Kurs_XUL/Dodawanie_funkcji_obsługi_zdarzeń">Dodawanie funkcji obsługi zdarzeń</a></li> + <li><a href="/pl/Kurs_XUL/Wi%C4%99cej_funkcji_obs%C5%82ugi_zdarze%C5%84" title="pl/Kurs_XUL/Więcej_funkcji_obsługi_zdarzeń">Więcej funkcji obsługi zdarzeń</a></li> + <li><a href="/pl/Kurs_XUL/Skr%C3%B3ty_klawiaturowe" title="pl/Kurs_XUL/Skróty_klawiaturowe">Skróty klawiaturowe</a></li> + <li><a href="/pl/Kurs_XUL/Kontrola_zaznaczenia_i_aktywacji_element%C3%B3w" title="pl/Kurs_XUL/Kontrola_zaznaczenia_i_aktywacji_elementów">Kontrola zaznaczenia i aktywacji elementów</a></li> + <li><a href="/pl/Kurs_XUL/Polecenia" title="pl/Kurs_XUL/Polecenia">Polecenia</a></li> + <li><a href="/pl/Kurs_XUL/Aktualizacja_polece%C5%84" title="pl/Kurs_XUL/Aktualizacja_poleceń">Aktualizacja poleceń</a></li> + <li><a href="/pl/Kurs_XUL/Rozg%C5%82aszacze_oraz_obserwatory" title="pl/Kurs_XUL/Rozgłaszacze_oraz_obserwatory">Rozgłaszacze oraz obserwatory</a></li> +</ul> + +<h2 id="Obiektowy_Model_Dokumentu_.28DOM.29" name="Obiektowy_Model_Dokumentu_.28DOM.29">Obiektowy Model Dokumentu (DOM)</h2> + +<ul> + <li><a href="/pl/Kurs_XUL/Obiektowy_model_dokumentu" title="pl/Kurs_XUL/Obiektowy_model_dokumentu">Obiektowy model dokumentu</a></li> + <li><a href="/pl/Kurs_XUL/Modyfikowanie_interfejsu_XUL" title="pl/Kurs_XUL/Modyfikowanie_interfejsu_XUL">Modyfikowanie interfejsu XUL</a></li> + <li><a href="/pl/Kurs_XUL/Manipulowanie_listami" title="pl/Kurs_XUL/Manipulowanie_listami">Manipulowanie listami</a></li> + <li><a href="/pl/Kurs_XUL/Obiekty_pude%C5%82ka" title="pl/Kurs_XUL/Obiekty_pudełka">Obiekty pudełka</a></li> + <li><a href="/pl/Kurs_XUL/Interfejsy_XPCOM" title="pl/Kurs_XUL/Interfejsy_XPCOM">Interfejsy XPCOM</a></li> + <li><a href="/pl/Kurs_XUL/Przyk%C5%82ady_XPCOM" title="pl/Kurs_XUL/Przykłady_XPCOM">Przykłady XPCOM</a></li> +</ul> + +<h2 id="Drzewa" name="Drzewa">Drzewa</h2> + +<ul> + <li><a href="/pl/Kurs_XUL/Drzewa" title="pl/Kurs_XUL/Drzewa">Drzewa</a></li> + <li><a href="/pl/Kurs_XUL/Dodatkowe_mo%C5%BCliwo%C5%9Bci_drzewa" title="pl/Kurs_XUL/Dodatkowe_możliwości_drzewa">Dodatkowe możliwości drzewa</a></li> + <li><a href="/pl/Kurs_XUL/Zaznaczenie_drzewa" title="pl/Kurs_XUL/Zaznaczenie_drzewa">Zaznaczenie drzewa</a></li> + <li><a href="/pl/Kurs_XUL/W%C5%82asne_widoki_drzewa" title="pl/Kurs_XUL/Własne_widoki_drzewa">Własne widoki drzewa</a></li> + <li><a href="/pl/Kurs_XUL/Szczeg%C3%B3%C5%82y_widoku_drzewa" title="pl/Kurs_XUL/Szczegóły_widoku_drzewa">Szczegóły widoku drzewa</a></li> + <li><a href="/pl/Kurs_XUL/Obiekty_pude%C5%82kowe_drzewa" title="pl/Kurs_XUL/Obiekty_pudełkowe_drzewa">Obiekty pudełkowe drzewa</a></li> +</ul> + +<h2 id="RDF_i_szablony" name="RDF_i_szablony">RDF i szablony</h2> + +<ul> + <li><a href="/pl/Kurs_XUL/Wprowadzenie_do_RDF" title="pl/Kurs_XUL/Wprowadzenie_do_RDF">Wprowadzenie do RDF</a></li> + <li><a href="/pl/Kurs_XUL/Szablony" title="pl/Kurs_XUL/Szablony">Szablony</a></li> + <li><a href="/pl/Kurs_XUL/Drzewa_i_szablony" title="pl/Kurs_XUL/Drzewa_i_szablony">Drzewa i szablony</a></li> + <li><a href="/pl/Kurs_XUL/%C5%B9r%C3%B3d%C5%82a_danych_RDF" title="pl/Kurs_XUL/Źródła_danych_RDF">Źródła danych RDF</a></li> + <li><a href="/pl/Kurs_XUL/Zaawansowane_regu%C5%82y" title="pl/Kurs_XUL/Zaawansowane_reguły">Zaawansowane reguły</a></li> + <li><a href="/pl/Kurs_XUL/Trwa%C5%82e_dane" title="pl/Kurs_XUL/Trwałe_dane">Trwałe dane</a></li> +</ul> + +<h2 id="Motywy_i_t.C5.82umaczenia" name="Motywy_i_t.C5.82umaczenia">Motywy i tłumaczenia</h2> + +<ul> + <li><a href="/pl/Kurs_XUL/Dodawanie_arkuszy_styl%C3%B3w" title="pl/Kurs_XUL/Dodawanie_arkuszy_stylów">Dodawanie arkuszy stylów</a></li> + <li><a href="/pl/Kurs_XUL/Nadawanie_stylu_drzewa" title="pl/Kurs_XUL/Nadawanie_stylu_drzewa">Nadawanie stylu drzewa</a></li> + <li><a href="/pl/Kurs_XUL/Modyfikacja_domy%C5%9Blnego_motywu" title="pl/Kurs_XUL/Modyfikacja_domyślnego_motywu">Modyfikacja domyślnego motywu</a></li> + <li><a href="/pl/Kurs_XUL/Tworzenie_motyw%C3%B3w" title="pl/Kurs_XUL/Tworzenie_motywów">Tworzenie motywów</a></li> + <li><a href="/pl/Kurs_XUL/Lokalizacja" title="pl/Kurs_XUL/Lokalizacja">Lokalizacja</a></li> + <li><a href="/pl/Kurs_XUL/Plik_w%C5%82asno%C5%9Bci" title="pl/Kurs_XUL/Plik_własności">Plik własności</a></li> +</ul> + +<h2 id="Wi.C4.85zania" name="Wi.C4.85zania">Wiązania</h2> + +<ul> + <li><a href="/pl/Kurs_XUL/Wprowadzenie_do_XBL" title="pl/Kurs_XUL/Wprowadzenie_do_XBL">Wprowadzenie do XBL</a></li> + <li><a href="/pl/Kurs_XUL/Tre%C5%9B%C4%87_anonimowa" title="pl/Kurs_XUL/Treść_anonimowa">Treść anonimowa</a></li> + <li><a href="/pl/Kurs_XUL/Dziedziczenie_atrybutu_XBL" title="pl/Kurs_XUL/Dziedziczenie_atrybutu_XBL">Dziedziczenie atrybutu XBL</a></li> + <li><a href="/pl/Kurs_XUL/Dodawanie_w%C5%82asno%C5%9Bci" title="pl/Kurs_XUL/Dodawanie_własności">Dodawanie własności</a></li> + <li><a href="/pl/Kurs_XUL/Dodawanie_metod" title="pl/Kurs_XUL/Dodawanie_metod">Dodawanie metod</a></li> + <li><a href="/pl/Kurs_XUL/Dodawanie_funkcji_obs%C5%82ugi_zdarzenia" title="pl/Kurs_XUL/Dodawanie_funkcji_obsługi_zdarzenia">Dodawanie funkcji obsługi zdarzenia</a></li> + <li><a href="/pl/Kurs_XUL/Dziedziczenie_XBL" title="pl/Kurs_XUL/Dziedziczenie_XBL">Dziedziczenie XBL</a></li> + <li><a href="/pl/Kurs_XUL/Przyk%C5%82ad_XBL" title="pl/Kurs_XUL/Przykład_XBL">Przykład XBL</a></li> +</ul> + +<h2 id="Specjalne_typy_okien" name="Specjalne_typy_okien">Specjalne typy okien</h2> + +<ul> + <li><a href="/pl/Kurs_XUL/Mo%C5%BCliwo%C5%9Bci_okna" title="pl/Kurs_XUL/Możliwości_okna">Możliwości okna</a></li> + <li><a href="/pl/Kurs_XUL/Tworzenie_okien_dialogowych" title="pl/Kurs_XUL/Tworzenie_okien_dialogowych">Tworzenie okien dialogowych</a></li> + <li><a href="/pl/Kurs_XUL/Okna_otwierania_i_zapisywania_plik%C3%B3w" title="pl/Kurs_XUL/Okna_otwierania_i_zapisywania_plików">Okna otwierania i zapisywania plików</a></li> + <li><a href="/pl/Kurs_XUL/Tworzenie_kreatora" title="pl/Kurs_XUL/Tworzenie_kreatora">Tworzenie kreatora</a></li> + <li><a href="/pl/Kurs_XUL/Dodatkowe_mo%C5%BCliwo%C5%9Bci_kreator%C3%B3w" title="pl/Kurs_XUL/Dodatkowe_możliwości_kreatorów">Dodatkowe możliwości kreatorów</a></li> + <li><a href="/pl/Kurs_XUL/Nak%C5%82adki" title="pl/Kurs_XUL/Nakładki">Nakładki</a></li> + <li><a href="/pl/Kurs_XUL/Nak%C5%82adki_dla_wielu_pakiet%C3%B3w" title="pl/Kurs_XUL/Nakładki_dla_wielu_pakietów">Nakładki dla wielu pakietów</a></li> +</ul> + +<h2 id="Instalatory" name="Instalatory">Instalatory</h2> + +<ul> + <li><a href="/pl/Kurs_XUL/Tworzenie_instalatora" title="pl/Kurs_XUL/Tworzenie_instalatora">Tworzenie instalatora</a></li> + <li><a href="/pl/Kurs_XUL/Skrypty_instalacyjne" title="pl/Kurs_XUL/Skrypty_instalacyjne">Skrypty instalacyjne</a></li> + <li><a href="/pl/Kurs_XUL/Dodatkowe_mo%C5%BCliwo%C5%9Bci_instalacji" title="pl/Kurs_XUL/Dodatkowe_możliwości_instalacji">Dodatkowe możliwości instalacji</a></li> +</ul> + +<div class="note"> +<p>Oryginalny (w j.ang.) Kurs XUL pierwotnie został napisany przez <a class="external" href="http://www.xulplanet.com/ndeakin/">Neila Deakina</a>. Pozwolił on nam używać swojego kursu jako części serwisu <a href="/Project:pl/O_MDC" title="Project:pl/O_MDC">MDC</a>.</p> +</div> + +<div class="originaldocinfo"> +<h5 id="Informacje_o_oryginale" name="Informacje_o_oryginale">Informacje o oryginale</h5> + +<ul> + <li>Autor: <a class="external" href="http://www.xulplanet.com/ndeakin/">Neil Deakin</a></li> + <li>Prawa autorskie: © 1999-2005 XULPlanet.com</li> +</ul> +</div> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/interfejsy_xpcom/index.html b/files/pl/mozilla/tech/xul/kurs_xul/interfejsy_xpcom/index.html new file mode 100644 index 0000000000..462e7936f4 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/interfejsy_xpcom/index.html @@ -0,0 +1,175 @@ +--- +title: Interfejsy XPCOM +slug: Mozilla/Tech/XUL/Kurs_XUL/Interfejsy_XPCOM +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/XPCOM_Interfaces +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Obiekty_pudełka" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Przykłady_XPCOM">Następny »</a></p> +</div><p></p> + +<p>W tym artykule krótko przyjrzymy się XPCOM (Wieloplatformowy Model Obiektów Składowych), który jest systemem Object, jakiego używa Mozilla.</p> + +<h2 id="Wywo.C5.82ywanie_obiekt.C3.B3w_wewn.C4.99trznych" name="Wywo.C5.82ywanie_obiekt.C3.B3w_wewn.C4.99trznych">Wywoływanie obiektów wewnętrznych</h2> + +<p>Przez zastosowanie XUL możemy zbudować złożony interfejs użytkownika. Możemy dołączyć skrypty, które modyfikują interfejs i wykonują zadania. Jednakże, jest kilka rzeczy, których nie można wykonać bezpośrednio w JavaScript. Na przykład, jeśli chcielibyśmy stworzyć aplikację pocztową musielibyśmy napisać skrypt, dzięki któremu połączymy się z serwerem pocztowym dla wyszukania i wysłania mail. JavaScript nie ma możliwości wykonania takich rzeczy.</p> + +<p>Jedynym sposób wykonania tego byłoby napisanie kodu wewnętrznego, który pobrałby pocztę. Musimy również posiadać sposób, aby w łatwy sposób nasze skrypty wywoływały kod wewnętrzny Mozilla dostarcza takiej metody wymagającej zastosowania <a href="pl/XPCOM">XPCOM</a>(Wieloplaformowego modelu obiektów składowych)</p> + +<h2 id="O_XPCOM" name="O_XPCOM">O XPCOM</h2> + +<p>Mozilla jest złożona ze zbioru komponentów, każdy wykonujący pewne zadanie. Na przykład jest komponent dla każdego menu, przycisku i elementu. Komponenty są złożone z kilku definicji nazywanych interfejsami Interfejs w Mozilli jest definicją zbioru funkcjonalności, które mogą być zaimplementowane przez komponenty.</p> + +<p>Komponenty są tym, co implementuje kod, w Mozilli dla wykonania różnych rzeczy. Każdy komponent implementuje funkcjonalność opisaną przez interfejsy. Pojedynczy komponent może zaimplementować wiele interfejsów. A wiele komponentów może zaimplementować ten sam interfejs.</p> + +<p>Weźmy za przykład komponent plik. Interfejs potrzebowałby opisu właściwości i funkcji, jakie mogą być wykonywane na plikach. Plik potrzebuje właściwości dla swojej nazwy, daty modyfikacji i swojego rozmiaru. Funkcje pliku mogą obejmować jego przenoszenie, kopiowanie i usuwanie.</p> + +<p>Interfejs Plik opisuje tylko cechy charakterystyczne pliku, nie implementuje go Implementację interfejsu Plik pozostawiono komponentowi. Komponent będzie miał kod, który może odnaleźć nazwę pliku, datę i rozmiar. Dodatkowo, będzie miał kod, który kopiuje i zmienia jego nazwę.</p> + +<p>Nie musimy się martwić jak komponent go implementuje tak długo jak implementuje interfejs poprawnie. Oczywiście, będziemy mieli różne implementacje, po jednej dla każdej platformy Wersje komponentu plik dla Windows i Macintosh byłyby znacząco różne. Jednak obie implementują ten sam interfejs. A zatem możemy użyć komponentu przez udostępnienie korzystania z funkcji, jakie znamy z interfejsu.</p> + +<p>W Mozilli interfejsy są poprzedzone, ‘nsI’ aby były łatwo rozpoznawalne jako interfejsy. Na przykład nsIAddressBook jest to interfejs dla interaktywności z książka adresową, nsISound jest używany do odgrywania plików a nsILocalFile jest używany do plików.</p> + +<p>Komponenty XPCOM są zazwyczaj zaimplementowane wewnętrznie, co oznacza, że generalnie wykonują rzeczy, których nie może zrobić sam JavaScript. Jednak sposób, w jaki można je wywołać zobaczymy wkrótce. Możemy wywołać dowolną funkcję dostarczoną przez komponent, opisaną przez interfejsy go implementujące. Na przykład jeśli mamy komponent, możemy sprawdzić czy jest zaimplementowany jako nsISOund,a jeśli tak, możemy odegrać przez niego dźwięk.</p> + +<p>Proces wywoływania XPCOM ze skryptów jest nazywany XPConnect, który jest warstwą tłumaczącą obiekty skryptowe na obiekty wewnętrzne.</p> + +<h2 id="Tworzenie_obiekt.C3.B3w_XPCOM" name="Tworzenie_obiekt.C3.B3w_XPCOM">Tworzenie obiektów XPCOM</h2> + +<p>Mamy trzy kroki dla wywołania komponentu XPCOM</p> + +<ol> + <li>Pobranie komponentu.</li> + <li>Pobranie części komponentu, która implementuje interfejs, jaki chcemy użyć.</li> + <li>Wywołanie potrzebnej nam funkcji.</li> +</ol> + +<p>Kiedy wykonasz pierwsze dwa kroki, możesz powtarzać ostatni krok tak często jak to konieczne. Powiedzmy, że chcesz zmienić nazwę pliku. Możemy użyć interfejsu nsILocalFile. Pierwszym krokiem jest pobranie komponentu plik. Drugim jest wykonanie zapytania do komponentu plik i pobranie jego części ,która implementuje interfejs nsILocalFile. W końcu wywołujemy funkcje dostarczone przez ten interfejs. Interfejs ten jest użyty do przedstawienia pojedynczego pliku.</p> + +<p>Widzieliśmy ,że interfejsy są zawsze nazywane zaczynając od 'nsI' Komponenty ,jednak, odwołują się do stosowania składni URI. Mozilla przechowuje listę wszystkich komponentów, które są dostępne w swoim własnym rejestrze. Poszczególni użytkownicy mogą instalować nowe komponenty jeśli ich potrzebują. Działają one jako plug-iny.</p> + +<p>Mozilla dostarcza komponentu plik, to znaczy komponent implementujący nsILocalFile. Do tego komponentu można odnieść się używając URI <a class="link-mailto" href="mailto:'@mozilla.org" rel="freelink">'@mozilla.org</a>/file/local;1' Komponent: Schemat URI jest używany do określenia komponentu, Do pozostałych komponentów odnosimy się w podobny sposób.</p> + +<p>URI komponentu może być użyte dla pobrania komponentu. Możesz pobrać komponent używając kodu JavaScript podobnego do poniższego:</p> + +<pre>var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance(); +</pre> + +<p>Komponent plik jest wyszukiwany i przechowywany w zmiennej aFile. <code>Components</code> w tym powyższym przykładzie odnosi się do obiektu ogólnego, który dostarcza pewnego komponentu pokrewnego funkcjom. Tutaj pobraliśmy klasę komponentu z właściwości <code>classes</code>. Własność <code>classes</code> jest to tablica wszystkich dostępnych komponentów. Aby uzyskać inny komponent, zastąp URI wewnątrz nawiasów kwadratowych na URI komponentu jakiego chcesz użyć. Na końcu jest egzemplarz funkcja <code>createInstance</code></p> + +<p>Powinieneś sprawdzić wartość zwracaną z <code>createInstance</code>aby upewnić się ,że nie jest to wartość zerowa, która wskazywała by, że komponent nie istnieje.</p> + +<p>Jednakże, w tym miejscu, mamy tylko referencję do samego komponentu plik. Żeby wywołać z niego funkcje potrzebujemy pobrać jeden z jego interfejsów, w tym przypadku nsILocalFile. Druga linia jaką potrzeba dodać jest następująca:</p> + +<pre>var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance(); +if (aFile) aFile.QueryInterface(Components.interfaces.nsILocalFile); +</pre> + +<p><br> + Funkcja <code>QueryInterface</code> jest funkcją dostarczaną przez wszystkie komponenty, które mogą użyte do pobrania określonego interfejsu tego komponentu. Funkcja ta pobiera jedne parametr, interfejs jaki chcesz uzyskać. Właściwość <code>interfaces</code> obiektu <code>Components</code> zawiera listę wszystkich tych interfejsów, które są dostępne. Tu używamy interfejsu nsiLocalFile i przekazujemy go jako parametr do <code>QueryInterface</code>. Wynik jest taki ,że aFile będzie się odnosił do tej części komponentu, który implementuje interfejs nsiLocalFile.</p> + +<p>Te dwie powyższe linie JavaScript mogą być użyte do pobrania dowolnego interfejsu dowolnego komponentu. Wystarczy zastąpić nazwę komponentu nazwą tego komponentu jakiego chcemy użyć i zmienić nazwę interfejsu. Możesz oczywiście również użyć dowolnej nazwy zmiennej. Na przykład aby pobrać interfejs sound, możesz zrobić coś takiego:</p> + +<pre>var sound = Components.classes["@mozilla.org/sound;1"].createInstance(); +if (sound) sound.QueryInterface(Components.interfaces.nsISound); +</pre> + +<p>Interfejsy XPCOM mogą dziedziczyć z innych interfejsów. Interfejsy które dziedziczą z innych mają swoje własne funkcje i funkcje wszystkich tych interfejsów z których dziedziczą. Wszystkie interfejsy dziedziczą z interfejsu najwyższego poziomu nazwanego nsISupport. Ma on jedną funkcję dostosowaną do JavaScript, QueryInterface, którą już widzieliśmy. Ponieważ interfejs nsISupport zaimplementowały wszystkie komponenty, funkcja QueryInterface jest dostępna w każdym komponencie.</p> + +<p>Kilka komponentów może zaimplementować ten sam interfejs. Zazwyczaj, mogą być podklasami oryginału ale nie koniecznie. Dowolny komponent może zaimplementować funkcjonalność nsILocalFile. Dodatkowo komponent może zaimplementować kilka interfejsów. Jest tak z powodu tego, że dwa kroki są wymagane w celu uzyskania interfejsu wywołującego funkcje.</p> + +<p>Jednakże jest skrót jakiego możemy użyć ponieważ często będziemy stosować te linie razem:</p> + +<pre>var aLocalFile = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile); +</pre> + +<p>Wykonuje to tą samą rzecz jak dwie linie ale w jednej linii kodu. Eliminuje to potrzebę tworzenia egzemplarza a potem zapytania go o interfejs w dwóch oddzielnych krokach.</p> + +<p>Jeśli wywołujesz QueryInterface w obiekcie a żądany interfejs nie jest obsługiwany przez ten obiekt, pojawi się wyjątek. Jeśli nie jesteś pewny czy interfejs jest obsługiwany przez komponent możesz użyć do sprawdzenia tego operatora instanceof:</p> + +<pre>var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance(); +if (aFile instanceof Components.interfaces.nsILocalFile){ + // do something +} +</pre> + +<p>Operator instanceof zwraca prawdę jeśli aFile implementuje interfejs nsILocalFile. Wywoływanie QueryInterface ma również efekt uboczny, w ten sposób aFile będzie potem ważnym nsiLocalFile.</p> + +<h2 id="Wywo.C5.82ywanie_funkcji_z_interfejsu" name="Wywo.C5.82ywanie_funkcji_z_interfejsu">Wywoływanie funkcji z interfejsu</h2> + +<p>Teraz kiedy mamy obiekt, który odnosi się do komponentu z interfejsem nsiLocalFile, możemy wywołać przez niego wywołać funkcje nsiLocalFile. Poniższa tabela pokazuje kilka z właściwości i metod interfejsu nsiLocalFile.</p> + +<dl> + <dt>initWithPath </dt> + <dd>Ta metoda jest używana do zainicjalizowania ścieżki dostępu i nazwy pliku dla nsiLocalFile. Pierwszy parametr powinien być ścieżką do pliku np: '/usr/local/mozilla'.</dd> + <dt>leafName </dt> + <dd>Nazwa pliku bez części z katalogiem.</dd> + <dt>fileSize </dt> + <dd>Nazwa pliku bez części z katalogiem.</dd> + <dt>isDirectory() </dt> + <dd>Zwraca prawdę jeśli nsiLocalFile przedstawia katalog.</dd> + <dt>remove(recursive) </dt> + <dd>Usuwa plik. Jeśli parametr recursive to prawda, katalog i wszystkie jego pliki i podkatalogi również będą usunięte.</dd> + <dt>copyTo(directory,newname) </dt> + <dd>Kopiuje plik do innego katalogu, opcjonalnie zmieniając nazwę pliku. Ten katalog powinien być nsILOcalFile mieszczącym katalog dla kopiowanego pliku.</dd> + <dt>moveTo(directory,newname) </dt> + <dd>Przenosi plik do innego katalogu, lub zmienia nazwę pliku. Katalog powinien być nsILocalFile mieszczącym katalog dla przenoszonego pliku.</dd> +</dl> + +<p>Aby usunąć plik najpierw musimy przypisać plik do nsiLOcalFile. Możemy wywołać metodę <code>initWithPath</code> wskazującą, jaki plik mamy na myśli. Potem przypisujemy ścieżkę pliku do tej właściwości. Następnie wywołujemy funkcję <code><b>remove</b></code>. Pobiera ona jeden parametr który wskazuje czy usuwanie jest rekurencyjne. Poniższy kod demonstruje te dwa kroki:</p> + +<pre>var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance(); +if (aFile instanceof Components.interfaces.nsILocalFile){ + aFile.initWithPath("/mozilla/testfile.txt"); + aFile.remove(false); +} +</pre> + +<p>Ten kod pobiera plik /mozilla/testfile.txt i usuwa go. Wypróbuj ten przykład przez dodanie tego kodu do programu obsługi zdarzeń. Powinieneś zmienić nazwę istniejącego pliku jaki chciał być usunąć.</p> + +<p>W powyższej tablicy funkcji, zobaczysz dwie funkcje <code>copyTo</code> i <code>moveTo</code>. Te dwie funkcje mogą być użyte, odpowiednio, do skopiowania plików i przeniesienia plików. Zauważ ,że nie pobierają one parametru ciągu dla katalogu do którego kopiujemy lub usuwamy, ale zamiast tego pobierają nsILocalFile. Oznacza to ,że musisz pobrać dwa komponenty plik. Poniższy przykład pokazuje jak skopiowac plik.</p> + +<pre>function copyFile(sourcefile,destdir) +{ + // get a component for the file to copy + var aFile = Components.classes["@mozilla.org/file/local;1"] + .createInstance(Components.interfaces.nsILocalFile); + if (!aFile) return false; + + // get a component for the directory to copy to + var aDir = Components.classes["@mozilla.org/file/local;1"] + .createInstance(Components.interfaces.nsILocalFile); + if (!aDir) return false; + + // next, assign URLs to the file components + aFile.initWithPath(sourcefile); + aDir.initWithPath(destdir); + + // finally, copy the file, without renaming it + aFile.copyTo(aDir,null); +} + +copyFile("/mozilla/testfile.txt","/etc"); +</pre> + +<h2 id="Us.C5.82ugi_XPCOM" name="Us.C5.82ugi_XPCOM">Usługi XPCOM</h2> + +<p>Niektóre komponenty XPCOM są specjalnymi komponentami nazwanymi usługami. Nie stworzysz ich egzemplarzy ponieważ istnieje tylko jeden. Usługi dostarczają funkcji ogólnych, które albo pobierają albo ustawiają dane globalne lub wykonują działania na innych obiektach. Zamiast wywołania <code>createInstance</code>, wywołujesz <code>getService</code> dla pobrania referencji do komponentu usługi. Usługi nie różnią się bardzo od innych komponentów.</p> + +<p>Jedną z takich dostarczonych usług z Mozillą jest usługa zakładek. Pozwala ona dodawać zakładki do bieżącej listy zakładek użytkownika. Przykład jest pokazany poniżej:</p> + +<pre>var bmarks = Components.classes["@mozilla.org/browser/bookmarks-service;1"].getService(); +bmarks.QueryInterface(Components.interfaces.nsIBookmarksService); +bmarks.addBookmarkImmediately("http://www.mozilla.org","Mozilla",0,null); +</pre> + +<p>Najpierw jest wyszukiwany komponent"@mozilla.org/browser/bookmarks-service;1" a jego usługa jest umieszczona w zmiennej <code>bmarks</code>. Użyjemy <code>QueryInterface</code> dla pobrania interfejsu nsIBookmarksService. Funkcja <code>addBookmarkImmediately</code> dostarczana przez ten interfejs może być używana dla dodawania zakładek .Pierwsze dwa parametry tej funkcji są URL'ami zakładek i ich tytułami. Trzeci parametr jest typem zakładki, którym zazwyczaj będzie 0,a ostatni parametr jest typem kodowania znaków dokumentu będącego dodawanym do zakładek, który może być zerem.</p> + +<p>Następnie zobaczymy niektóre z interfejsów dostarczanych z Mozillą, jakie możemy zastosować.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Obiekty_pudełka" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Przykłady_XPCOM">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/kontrola_zaznaczenia_i_aktywacji_elementów/index.html b/files/pl/mozilla/tech/xul/kurs_xul/kontrola_zaznaczenia_i_aktywacji_elementów/index.html new file mode 100644 index 0000000000..c53e06d0af --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/kontrola_zaznaczenia_i_aktywacji_elementów/index.html @@ -0,0 +1,166 @@ +--- +title: Kontrola zaznaczenia i aktywacji elementów +slug: Mozilla/Tech/XUL/Kurs_XUL/Kontrola_zaznaczenia_i_aktywacji_elementów +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Focus_and_Selection +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Skróty_klawiaturowe" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Polecenia">Następny »</a></p> +</div><p></p> + +<p>Ten artykuł opisuje, jak obsługiwać kontrolę zaznaczenia i aktywacji elementów.</p> + +<h2 id="Elementy_aktywne" name="Elementy_aktywne">Elementy aktywne</h2> + +<p>Elementy skupione odnoszą się do elementów, które aktualnie otrzymują zdarzenia wejścia (input events). Jeśli istnieją trzy textboxy w jednym oknie, skupionym nazywamy tego, w którym użytkownik jest aktualnie w stanie wpisać text. Tylko jeden element może być w tej samej chwili skupiony dla danego okna.</p> + +<p>Użytkownik może zmienić skupienie poprzez kliknięcie na elemencie przy pomocy myszy lub wciśnięcie klawisza tabulacji TAB. W chwili przyciśnięcia klawisza TAB kolejne elementy okna przejmują skupienie. W celu powrotu do poprzedniego elementu należy użyć kombinacji klawiszy Shifh i Tab.</p> + +<h3 id="Rearranging_the_tab_order" name="Rearranging_the_tab_order">Rearranging the tab order</h3> + +<p>Możemy także zmienić porządek w którym zmieniać się będzie skupienie elementów danego okna poprzez dodanie atrybutu tabindex dla konkretnego elementu. Ten atrybut powinien być ustawiony jako wartość liczbowa. W chwili przyciśnięcia klawisza TAB, skupienie zostanie przeniesione na element o następnym wyższym indeksie tabulacji. Zazwyczaj jednak nie ma potrzeby ustalania atrybutu tabindex. Jeśli tego nie zrobimy, wciśnięcie TAB ustawi skupienie na kolejnym wyświetlanym elemencie. Poniżej przykład:</p> + +<p><span id="Example_1"><a id="Example_1"></a><strong>Example 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_1.xul">Podgląd</a></p> + +<pre><button label="Button 1" tabindex="2"/> +<button label="Button 2" tabindex="1"/> +<button label="Button 3" tabindex="3"/> +</pre> + +<h3 id="The_focus_event" name="The_focus_event">The focus event</h3> + +<p>Zdarzenie skupienia jest wywoływane w odpowiedzi na ustawienie skupienia dla danego elementu. Zdarzenie rozmycia używane jest natomiast kiedy skupienie zostaje usunięte z danego elementu. Jesteśmy w stanie odpowiedzieć a zmianę skupienie poprzez wykorzystanie atrybutów onfocus i onblur dla konkretnego elementu. Działają one zupełnie jak ich HTML-owi krewni. Wykorzystuje się je najczęściej w celu podświetlania elementów lub wyświetlania tekstu pomocniczego w pasku statusu. Poniższy przykład obrazuje obsługę zdarzenia skupienia.</p> + +<p><span id="Example_2"><a id="Example_2"></a><strong>Example 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_2.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_2.xul">Podgląd</a></p> + +<pre><script> + +function displayFocus(){ + var elem=document.getElementById('sbar'); + elem.setAttribute('value','Enter your phone number.'); +} + +</script> + +<textbox id="tbox1"/> +<textbox id="tbox2" onfocus="displayFocus();"/> +<description id="sbar" value=""/> +</pre> + +<p>Kiedy pojawia się zdarzenie skupienia, zostaje wywołana funkcja displayFocus. Ta funkcja będzie zmieniać wartość pola tekstowego. Można również rozszerzyć ten przykład o usunięcie tekstu w chwili zajścia zdarzenia rozmycia. Typowo, będziemy ustalać zdarzenia skupienia i rozmycia, w celu uaktualniania części interfejsu, w chwili w której użytkownik wybiera elementy. Przykładowo, jesteśmy w stanie uaktualniać pewne pola, w chwili w której wypełniamy inne. Możemy także posłużyć się wspomnianymi zdarzeniami w celu walidacji pewnych wprowadzanych wartości. Nie wyświetlaj alertu w trakcie zdarzeń skupienia bądź rozmycia, ponieważ będzie to odwracało uwagę użytkownika oraz nie spełnia to podstawowych założeń projektowania interfejsu.</p> + +<p>Możemy także dynamicznie dodać obsługę zdarzenia, przy użyciu funkcji DOM, a mianowicie <code><a href="pl/DOM/element.addEventListener">addEventListener</a></code>. Możemy jej użyć dla dowolnego elementu i typu zdarzenia. Pobiera ona trzy parametry: typ zdarzenia, funkcję która będzie wykonywana w chwili zajścia zdarzenia oraz wartość boolean określającą czy przejąć zdarzenie czy nie.</p> + +<h3 id="Getting_the_currently_focused_element" name="Getting_the_currently_focused_element">Getting the currently focused element</h3> + +<p>Element, który aktualnie posiada skupienie jest przetrzymywany w obiekcie zwanym command dispatcher, który istnieje tylko jeden dla danego okna. Command dispatcher jest odpowiedzialny za utrzymywanie skupienia na elemencie, w chwili w której użytkownik korzysta z interfejsu. Command dispatcher posiada także inne zadania, które będą omawiane w poźniejszych sekcjach. Teraz poznamy natomiast cechy command dispatchera powiązane ze skupieniem.</p> + +<p>Możemy odzyskiwać command dispatchera z okna, przy użyciu własności dokumentu o nazwie <code>commandDispatcher</code>. Mamy również dostęp do elementu skupienia za pomocą własności dispatchera o nazwie focusedElement. Przykład poniżej.</p> + +<p><span id="Example_3"><a id="Example_3"></a><strong>Example 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_3.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_3.xul">Podgląd</a></p> + +<pre><window id="focus-example" title="Focus Example" + onload="init();" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<script> +function init(){ + addEventListener("focus",setFocusedElement,true); +} + +function setFocusedElement(){ + var focused = document.commandDispatcher.focusedElement; + document.getElementById("focused").value = focused.tagName; +} +</script> + +<hbox> + <label control="username" value="User Name:"/> + <textbox id="username"/> +</hbox> + +<button label="Hello"/> +<checkbox label="Remember This Decision"/> + +<label id="focused" value="-No focus-"/> + +</window> +</pre> + +<p>W tym przykładzie, obsługa zdarzenia skupienia dodana jest do okna. Chcemy użyć obsługi zdarzenia przejęcia, więc będzie nam potrzebna metoda addEventListener. Rejestruje ona obsługę zdarzenia przejęcia dla okna, która to wywoła metodę setFocusedElement. Ta metoda pobiera element skupienia z command dispatchera i ustala etykietę zgodną z nazwą jego znacznika. Kiedy element skupienia się zmienia, etykieta pokaże nazwę znacznika elementu. Warto wspomnieć tu o paru rzeczach. Po pierwsze, kiedy skupienie jest na polu tekstowym nazwa znacznika to "html:input", nie textbox jak można by się spodziewać. Dzieje się tak ponieważ textboxy w języku XUL są zaimplementowane przy pomoc widgetów wejścia HTML. Po drugie, kliknięcie na etykiecie textbox'u zmienia skupienie okna i ustala je na ten właśnie element. Wynika to z faktu, że etykieta posiada atrybut control wskazujący na id textboxu. W końcu, inne etykiety wyświetlające nazwę znacznika nie posiadają atrybutu control, więc klikanie na nie, nie spowoduje żadnego efektu.</p> + +<h3 id="Making_a_label_focusable" name="Making_a_label_focusable">Making a label focusable</h3> + +<p>Jeśli chcielibyśmy utworzyć szczególne elementy, możemy potrzebować możliwości zmian dotyczących skupienia danego elementu. W tym celu, możemy wykorzystać specjalną własność stylu -moz-user-focus. Ta własność kontroluje możliwość skupienia dla elementu. Przykładowo, można utworzyć etykietę posiadającą możliwość skupienia:</p> + +<p><span id="Example_4"><a id="Example_4"></a><strong>Example 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_4.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_4.xul">Podgląd</a></p> + +<pre><label id="focused" style="-moz-user-focus: normal;" + onkeypress="alert('Label Focused');" value="Focus Me"/> +</pre> + +<p>Własność stylu jest ustalona na wartość normal. Możemy także ustawić ją tak, aby ignorować skupienie lub wyłączyć możliwość skupienia dla danego elementu. Nie powinna być jednak używana dla dezaktywacji elementu. W tym celu używamy wspomnianych już atrybutu lub własności disabled, ponieważ te opcje projektowane były właśnie z myślą o możliwości dezaktywacji elementu. Wracając do przykładu, kiedy nasza etykieta otrzyma nareszcie skupienie, jest w stanie odpowiadać na wciskanie klawiszy. Naturalnie, nie daje ona oznak skupienia, ponieważ tego typu elementy rzadko są przewidziane do tej właśnie czynności.</p> + +<h3 id="Changing_the_focus" name="Changing_the_focus">Changing the focus</h3> + +<p>Istnieje kilka sposobów na zmianę skupienia dla danych elementów. Najprostszą jest wywołanie metody focus dla elementu XUL, na którym mamy ustawić wspomniane skupienie. Natomiast, metoda blur może być wykorzystana dla usunięcia skupienia dla danego elementu. Poniżej przykład:</p> + +<p><span id="Example_5"><a id="Example_5"></a><strong>Example 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_5.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_5.xul">Podgląd</a></p> + +<pre><textbox id="addr"/> + +<button label="Focus" oncommand="document.getElementById('addr').focus()"/> +</pre> + +<p>Możemy również użyć metody advanceFocus oraz rewindFocus na command dispatcherze. Metody te przesuwają skupienie na następny lub poprzedni element w pewnej sekwencji. Właśnie z tych metod korzystamy w chwili w której zostaje wciśnięty TAB lub Shift+Tab.</p> + +<p>Dla textboxów, natomiast, istnieje specjalny atrybut focused, który jest dodany zawsze kiedy element posiada skupienie. Można również sprawdzić czy w danej chwili wspomniany atrybut jest obecny. Możemy to zrobić dzięki skryptom, bądź arkuszom stylów. Atrybut ten będzie posiadał wartość true, jeśli textbox posiada skupienie, w przeciwnym przypadku atrybut będzie zwyczajnie nieobecny.</p> + +<p><b>Suppose you wanted to move the focus from where it currently is, to the next place the browser thinks it should be. A user typically does this by hitting the "Tab" key. You can do this anywhere you have a XUL browser document by simply:</b></p> + +<pre> document.commandDispatcher.advanceFocus(); +</pre> + +<p><b>In fact, the commandDispatcher simply implements the nsIDOMXULCommandDispatcher interface. There are other functions that may be of interested to you when dealing with focus.</b></p> + +<h2 id="Obs.C5.82uga_zmiany_tekstu" name="Obs.C5.82uga_zmiany_tekstu">Obsługa zmiany tekstu</h2> + +<p>Istnieją dwa zdarzenia, które mogą być użyte kiedy użytkownik zmienia wartość znajdującą się w polu tekstowym. Naturalnie, zdarzenia te będą wysyłane tylko do tego textboxa, który aktualnie posiada skupienie. Zdarzenia wejścia (input) są uruchamiane zawsze kiedy tekst jest modyfikowany. Nowe wartości będą różniły się od starych. Możemy także chcieć skorzystać z tych wydarzeń, zastępując nimi zdarzenia związane z klawiszami (key), ponieważ niektóre z klawiszy (np: Shift) nie zmieniają wartości. Także zdarzenie wejścia (input) nie zostanie uruchomione w przypadku, kiedy wciśnięty zostanie klawisz danego znaku oraz kiedy istnieje już maksymalna liczba znaków mieszczących się w polu tekstowym.</p> + +<p>Natomiast zdarzenie zmiany (change event) działa podobnie. I ono jest uruchamiane tylko wtedy kiedy zachodzą jakieś zmiany dla danego pola. Jednak rozpoczyna swoją pracę tylko raz kiedy pole tekstowe traci skupienie. Jedno uruchomienie dla zestawu zmian.</p> + +<h2 id="Zaznaczanie_tekstu" name="Zaznaczanie_tekstu">Zaznaczanie tekstu</h2> + +<p>Podczas pracy z textboxem, możemy chcieć odzyskać część zawartości pola, tą którą zaznaczył użytkownik. Możemy również chcieć zmienić obecne zaznaczenie.</p> + +<p>Textboxy XUL, wspierają sposób na odzyskiwanie i modyfikację zaznaczenia. Najprostszym jest zaznaczenie całości tekstu w polu tekstowym. Robimy to dzięki metodzie select wywoływanej dla textboxa.</p> + +<pre>tbox.select(); +</pre> + +<p>Jednak, możemy sobie zażyczyć wyboru tylko części tekstu. W tym celu korzystamy z funkcji setSelectionRange. Pobiera ona dwa parametry, pierwszy to znak rozpoczynający, a drugi to znak, który następuje po ostatnim znajdującym się w zaznaczeniu. Wartości porządkowe zaczynają się od zera, tak więc pierwszy znak ma wartość 0, drugi 1 itd.</p> + +<pre>tbox.setSelectionRange(4,8); +</pre> + +<p>Ten przykład zaznaczy piąty wyświetlany znak, oraz 6, 7 oraz 8. Jeśli było tylko 6 znaków wprowadzonych do pola, tylko 5 oraz 6 znak będą zaznaczone. Nie wystąpi natomiast żaden błąd.</p> + +<p>Jeśli ustalisz tą samą wartość dla obu parametrów, start i koniec zaznaczenia, zmieniają pozycję na tą samą zgodną z powyższą wartością. W rezultacie daje nam to zmiany pozycji kursora wewnątrz textboxu. Przykładowo, poniższa linijka kodu przenosi kursor na początek tekstu.</p> + +<pre>tbox.setSelectionRange(0,0); +</pre> + +<p>Jesteśmy w stanie odzyskać obecne zaznaczenie poprzez użycie własności <code>selectionStart</code> i <code>selectionEnd</code>. Te własności są ustawione na pozycje początkową i końcową zaznaczenie. W przypadku jeśli obie ustawione są na tą samą wartość, nie istnieje zaznaczenie, ale za to otrzymujemy informację na temat obecnej pozycji kursora. Kiedy mamy dostęp do pozycji startowej i końcowej, jesteśmy w stanie pobrać substring z całego tekstu.</p> + +<p>Zawartość pola tekstowego możemy odzyskiwać oraz modyfikować poprzez wykorzystanie własności <code>value</code>.</p> + +<p>Jedną z dodatkowych i przydatnych własności pola tekstowego jest <code>textLength</code>, która przetrzymuje całkowitą liczbę znaków znajdujących się w polu.</p> + +<p>Następnie, dowiemy się jak stosować <a href="pl/Kurs_XUL/Polecenia">polecenia</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Skróty_klawiaturowe" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Polecenia">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/kontrolki_list/index.html b/files/pl/mozilla/tech/xul/kurs_xul/kontrolki_list/index.html new file mode 100644 index 0000000000..7bea2c7538 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/kontrolki_list/index.html @@ -0,0 +1,140 @@ +--- +title: Kontrolki list +slug: Mozilla/Tech/XUL/Kurs_XUL/Kontrolki_list +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/List_Controls +--- +<p> +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Kontrolki_numeryczne" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Paski_postępu">Następny »</a></p> +</div> +<p></p><p>XUL posiada kilka typów elementów do tworzenia pól list. +</p> +<h3 id="Pola_listy" name="Pola_listy">Pola listy </h3> +<p>Pola listy stosuje się do wyświetlania kilku pozycji w liście. Użytkownik ma możliwość wybierania dowolnych pozycji z takiej listy. +</p><p>XUL udostępnia dwa typy elementów do tworzenia list, element <code><a href="pl/XUL/listbox">listbox</a></code> do tworzenia list wielowierszowych oraz element <code><a href="pl/XUL/menulist">menulist</a></code> do list rozwijanych. Działają w podobny sposób do elementu <code>select</code> znanego z HTML-a, który wykonuje obie funkcje, ale elementy XUL posiadają więcej dodatkowych cech. </p><p>Najprostsze pole listy stosuje element <code><a href="pl/XUL/listbox">listbox</a></code> dla określenia swojego pola oraz element <code><a href="pl/XUL/listitem">listitem</a></code> dla każdej pozycji. Na przykład: pole listy będzie zawierało cztery wiersze, jeden dla każdej pozycji. +</p><p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_1.xul">Podgląd</a> +</p> +<div class="float-right"><img alt="grafika:lists1.png"></div> +<pre><listbox> + <listitem label="Butter Pecan"/> + <listitem label="Chocolate Chip"/> + <listitem label="Raspberry Ripple"/> + <listitem label="Squash Swirl"/> +</listbox> +</pre> +<p>Podobnie jak w przypadku elementu <code>option</code> z HTML-a możliwe jest powiązanie wartości każdej pozycji poprzez użycie atrybutu <code>value</code>. Następnie możemy stosować wartości w skryptach. Pole listy domyślnie przyjmuje odpowiedni rozmiar, ale możemy go kontrolować atrybutem <code><code id="a-rows"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/rows">rows</a></code></code>. Ustaw go na odpowiednią liczbę wierszy (<code>rows</code>), aby wyświetlić je w polu listy. Pasek przewijania użytkownik zastosuje, jeśli będą do wyświetlenia dodatkowe wiersze. </p><p>Poniższy przykład prezentuje te dodatkowe cechy: </p><p><span id="Przyk%C5%82ad_2"><a id="Przyk%C5%82ad_2"></a><strong>Przykład 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_2.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_2.xul">Podgląd</a> +</p> +<div class="float-right"><img alt="grafika:lists2-ex.png"></div> +<pre><listbox rows="3"> + <listitem label="Butter Pecan" value="bpecan"/> + <listitem label="Chocolate Chip" value="chocchip"/> + <listitem label="Raspberry Ripple" value="raspripple"/> + <listitem label="Squash Swirl" value="squash"/> +</listbox> +</pre> +<p>Przykład został przystosowany do wyświetlania tylko trzech wierszy na raz. Do każdej pozycji listy zostały też dodane wartości. Pola list posiadają kilka dodatkowych cech, które opiszemy później. +</p> +<h3 id="Wielokolumnowe_pola_listy" name="Wielokolumnowe_pola_listy"> Wielokolumnowe pola listy </h3> +<p>Pole listy obsługuje również wiele kolumn. Każda komórka może posiadać dowolną zawartość, chociaż najczęściej jest stosowany tekst. Kiedy użytkownik wybiera pozycję na liście, zaznaczany zostaje cały wiersz. Nie ma możliwości wybrania pojedynczej komórki. +</p><p>Dwa znaczniki służą do określania kolumn w polu listy. Element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/listcols" title="listcols">listcols</a></code></code> przechowuje informację o kolumnach, z których każda określona jest przy pomocy elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/listcol" title="listcol">listcol</a></code></code>. Dla każdej kolumny należy stosować jeden element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/listcol" title="listcol">listcol</a></code></code>. +</p><p>Dla każdej komórki w wierszu możemy stosować element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/listcell" title="listcell">listcell</a></code></code>. Jeśli chcesz mieć trzy kolumny, będziesz musiał dodać trzy elementy <code>listcell</code> wewnątrz każdego <code><code><a href="/pl/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code></code>. Do określenia tekstu zawartego w komórce umieść atrybut <code>label</code> w <code>listcell</code>. W prostym przypadku, gdy jest tylko jedna kolumna, atrybut <code>label</code> możemy kierować bezpośrednio do elementu <code>listitem</code> i w ogóle nie korzystać z elementu <code>listcell</code>, jak to widzieliśmy we wcześniejszym przykładzie. +</p><p>Następujący przykład jest polem listy z dwoma kolumnami i trzema wierszami: +</p><p><span id="Example_3"><a id="Example_3"></a><strong>Example 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_3.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_3.xul">Podgląd</a> +</p> +<div class="float-right"><img alt="grafika:morelists0.png"></div> +<pre><listbox> + <listcols> + <listcol/> + <listcol/> + </listcols> + <listitem> + <listcell label="Grzegorz"/> + <listcell label="Malarz"/> + </listitem> + <listitem> + <listcell label="Maria"/> + <listcell label="Producent świeczek"/> + </listitem> + <listitem> + <listcell label="Robert"/> + <listcell label="Spawacz"/> + </listitem> +</listbox> +</pre> +<h3 id="Wiersz_nag.C5.82.C3.B3wka" name="Wiersz_nag.C5.82.C3.B3wka"> Wiersz nagłówka </h3> +<p>Pola listy pozwalają również na zastosowanie specjalnego wiersza nagłówka. Pod wieloma względami jest zwyczajnym wierszem z tym wyjątkiem, że wyświetla się go w odmienny sposób. Zastosujemy go do utworzenia nagłówka kolumn. Zastosujemy dwa nowe składniki. </p><p>Element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/listhead" title="listhead">listhead</a></code></code> stosuje się w wierszach nagłówka, tak samo jak element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code></code> w tradycyjnych wierszach. Jednakże nagłówek wiersza nie jest kiedykolwiek normalnym wierszem, więc stosujemy skrypt, aby pobrać pierwszy wiersz w polu listy, będzie pomijał wiersz nagłówka. </p><p>Element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/listheader" title="listheader">listheader</a></code></code> stosujemy dla każdej komórki wiersza nagłówka. Stosując atrybut <code><code id="a-label"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/label">label</a></code></code> do ustawienia etykiety dla wszystkich komórek nagłówka. +</p><p>Oto wcześniejszy przykład z wierszem nagłówka: +</p><p><span id="Przyk%C5%82ad_4"><a id="Przyk%C5%82ad_4"></a><strong>Przykład 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_4.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_4.xul">Podgląd</a> +</p> +<div class="float-right"><img alt="grafika:Morelists1.png"></div> +<pre><listbox> + + <listhead> + <listheader label="Imię"/> + <listheader label="Zawód"/> + </listhead> + + <listcols> + <listcol/> + <listcol flex="1"/> + </listcols> + + <listitem> + <listcell label="Grzegorz"/> + <listcell label="Malarz"/> + </listitem> + <listitem> + <listcell label="Maria"/> + <listcell label="Producent świeczek"/> + </listitem> + <listitem> + <listcell label="Robert"/> + <listcell label="Spawacz"/> + </listitem> + +</listbox> +</pre> +<p>W tym przykładzie atrybut <code><code id="a-flex"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/flex">flex</a></code></code> zastosowano do utworzenia elastycznej kolumny. Atrybut ten będzie opisany w dalszych artykułach, lecz w tym artykule pozwala kolumnie zająć całą dostępną wolną przestrzeń w poziomie. Możemy zmieniać rozmiar okna, aby zobaczyć, że obszary kolumny rozciągają się razem z oknem. Jeśli zmniejszymy okno w poziomie, etykieta znajdująca się w komórce zostanie automatycznie skrócona i zakończona wielokropkiem. Możemy także zastosować atrybut <code><code id="a-crop"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/crop">crop</a></code></code> do komórek lub pozycji ustawiając je na wartość <code>none</code>, aby wyłączyć użycie wielokropka. +</p> +<h3 id="Listy_rozwijane" name="Listy_rozwijane">Listy rozwijane </h3> +<p>W HTML-u listy rozwijane tworzymy za pomocą elementu <code>select</code>. Użytkownik widzi pojedyncze pole tekstowe wyboru i może kliknąć strzałkę lub podobny przycisk obok tego pola tekstowego, aby zaznaczyć inną pozycję. Pozostałe możliwości będą dostępne w wyskakującym oknie. XUL posiada element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code>, który ma tą własność. Utworzony jest on z pola tekstowego z przyciskiem obok. Taka nazwa została wybrana, ponieważ okienka wyskakują z menu listy rozwijanej, dającej możliwość wyboru. +</p><p>Do zdefiniowania listy rozwijanej potrzebne są trzy elementy. Pierwszym jest element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code>, który tworzy pole tekstowe z przyciskiem przy nim. Drugi element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> tworzy okienko pojawiające się po kliknięciu przycisku. Trzecim jest element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code> tworzący poszczególne pozycje. </p><p>Składna poniżej najlepiej przedstawia przykład listy rozwijanej: </p><p><span id="Przyk%C5%82ad_5"><a id="Przyk%C5%82ad_5"></a><strong>Przykład 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_5.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_5.xul">Podgląd</a> +</p> +<div class="float-right"><img alt="grafika:inputs2.png"></div> +<pre><menulist label="Autobus"> + <menupopup> + <menuitem label="Auto"/> + <menuitem label="Taxi"/> + <menuitem label="Autobus" selected="true"/> + <menuitem label="Pociąg"/> + </menupopup> +</menulist> +</pre> +<p>W tym przypadku lista rozwijana składa się z czterech pozycji do wyboru, jeden dla każdego elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code>. Aby wyświetlić pozycje listy, kliknij w przycisk strzałki na liście. Kiedy jedna pozycja jest zaznaczona, to pojawiająca się pozycja jest wybrana z listy. Atrybut <code>selected</code> stosuje się do wskazania wartości, która jest zaznaczona domyślnie. +</p> +<h4 id="Lista_menu_do_edycji" name="Lista_menu_do_edycji"> Lista menu do edycji </h4> +<p>Domyślnie możemy tylko zaznaczyć pozycję do wybrania z listy. Nie możemy wprowadzić własnego tekstu. Wariant pozwalający na edycję tekstu w polach listy rozwijanej. Na przykład, pole adresu URL w przeglądarce posiada rozwijaną listę do wybierania wcześniej wpisywanych adresów URL, ale pozwala także na wpisywanie własnych. +</p><p>Aby utworzyć edytowaną listę rozwijaną, dodaj atrybut <code><code id="a-editable"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/editable">editable</a></code></code> w sposób pokazany poniżej: +</p><p><span id="Przyk%C5%82ad_6"><a id="Przyk%C5%82ad_6"></a><strong>Przykład 6</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_6.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_6.xul">Podgląd</a> +</p> +<pre><menulist editable="true"> + <menupopup> + <menuitem label="www.mozilla.org"/> + <menuitem label="www.xulplanet.com"/> + <menuitem label="www.dmoz.org"/> + </menupopup> +</menulist> +</pre> +<p>Utworzone pole adresu URL w powyższym przykładzie posiada trzy predefiniowane pola wyboru, które użytkownik może zaznaczyć lub może wpisać w jedną pozycję własną zawartość pola. Tekst wpisywany przez użytkownika nie zostanie dodany jako nowe pole wyboru listy. Ponieważ atrybut <code>label</code> nie został zastosowany w przykładzie, jego domyślna wartość pozostanie pusta. +</p><p>W następnym artykule dowiemy się <a href="pl/Kurs_XUL/Paski_post%c4%99pu">jak tworzyć paski postępu</a>. +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Kontrolki_numeryczne" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Paski_postępu">Następny »</a></p> +</div> +<p></p><p><br> +</p> +<div class="noinclude"> +</div> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/kontrolki_numeryczne/index.html b/files/pl/mozilla/tech/xul/kurs_xul/kontrolki_numeryczne/index.html new file mode 100644 index 0000000000..4ddbb95b9c --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/kontrolki_numeryczne/index.html @@ -0,0 +1,92 @@ +--- +title: Kontrolki numeryczne +slug: Mozilla/Tech/XUL/Kurs_XUL/Kontrolki_numeryczne +tags: + - Firefox 3 + - Kurs_XUL + - Przewodniki + - Strony_wymagające_dopracowania + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Numeric_Controls +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Kontrolki_wejścia" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Kontrolki_list">Następny »</a></p> +</div> XUL posiada dwa elementy stosowane do wprowadzenia wartości lub zakresów numerycznych oraz jako dwa elementy dla wprowadzenia dat i czasu. Te elementy są dostępne tylko w Firefoksie 3 lub wersjach późniejszych.<p></p> + +<h3 id="Pola_numeryczne" name="Pola_numeryczne">Pola numeryczne</h3> + +<p>Pola tekstowe mogą być stosowane do wprowadzenia liczb poprzez ustawienie wartości atrybutu <code id="a-type"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/type">type</a></code> na wartość <code>number</code>. Ten typ pola tekstowego może być stosowany tylko do wprowadzenia liczb. Inne znaki nie są dozwolone i są ignorowane podczas ich wpisywania. Dodatkowo, przyciski strzałek pojawiają się obok pola tekstowego, co pozwala użytkownikowi przechodzić pomiędzy wartościami.</p> + +<div class="float-right"><img alt="Image:Controlguide-textbox-number.gif"></div> + +<p>Tak jak z innymi polami tekstowymi, domyślna wartość może być określona atrybutem <code id="a-value"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/value">value</a></code>. Naturalnie, wartość ta powinna być liczbą. Jednakże wartość minimalną i maksymalną można także określić przy zastosowaniu atrybutów <code id="a-min"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/min">min</a></code> i <code id="a-max"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/max">max</a></code>. Jeśli są one ustawione, można kontrolować zakres wartości, na które może być ustawione pole tekstowe. Jeśli użytkownik wprowadzi wartość mniejszą lub większą niż ta wartość, zostanie ona ponownie nastawiona na minimalną lub maksymalną wartości, o ile to konieczne. Dla przykładu, następujące numeryczne pole tekstowe posiada zakres pomiędzy 1 a 20.</p> + +<pre><textbox type="number" min="1" max="20"/> +</pre> + +<p>Jako że domyślna wartość nie jest określona, to domyślną wartością będzie minimalna wartość czyli 1. Atrybut <code id="a-min"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/min">min</a></code> jest ustawiony na <code>1</code>, aby wskazać minimalną możliwą wartość, jaką jest 1 i atrybut <code id="a-max"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/max">max</a></code> jest ustawiony na <code>20</code>, aby wskazać maksymalną możliwą wartość, jaką jest 20. Jeśli minimalna wartość nie jest określona, to domyślną wartością jest 0. Maksymalną domyślną wartością jest specjalna wartość <code>Infinity</code>, która oznacza brak limitu.</p> + +<h4 id="Inne_numeryczne_atrybuty_pola_tekstowego" name="Inne_numeryczne_atrybuty_pola_tekstowego">Inne numeryczne atrybuty pola tekstowego</h4> + +<p>Atrybut <code id="a-increment"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/increment">increment</a></code> może zostać użyty do określenia, o jaką wartość ma się zmienić wartość pola, kiedy strzałki obok pola zostaną naciśnięte. Domyślną wartością jest 1, lecz określenie innej wartości pozwala dokonać zmiany o większą liczbę. Dla przykładu następujący przykład wielokrotnie wzrasta o 10.</p> + +<pre><textbox type="number" increment="10" max="100"/> +</pre> + +<p>To pole tekstowe przechodzi poprzez wielokrotności liczby 10 od 0 do 100. Do czasu, kiedy to atrybut <code id="a-min"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/min">min</a></code> nie został określony, to domyślnie wynosi on 0. <strong>Note that the user can still enter other values if they are typed in.</strong> Atrybut <code id="a-increment"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/increment">increment</a></code> oddziałuje tylko na przyciski strzałek. Użytkownik może także zwiększyć lub zmniejszyć wartość stosując ten 'przyrost' poprzez użycie klawiszy kursora 'do góry' i 'w dół', podczas gdy pole tekstowe jest zaznaczone i aktywne.</p> + +<p>Atrybut <code id="a-decimalplaces"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/decimalplaces">decimalplaces</a></code> wskazuje, ile miejsc po przecinku wyświetlić. Domyślną wartością jest 0, które oznacza, że mają zostać wyświetlone tylko liczby całkowite. Jednakże różne wartości mogą być zastosowane do wyświetlenia wartości dziesiętnych.</p> + +<pre><textbox type="number" decimalplaces="2"/> +</pre> + +<p>W tym przykładzie liczba zostanie pokazana do dwóch cyfr po prawej stronie przecinka. Wartości z dodatkowymi liczbami ułamkowymi są zaokrąglane do dwóch miejsc po przecinku.</p> + +<h3 id="Skale" name="Skale">Skale</h3> + +<p>Element <code><a href="/pl/docs/Mozilla/Tech/XUL/scale" title="scale">scale</a></code> może być także stosowany do wyboru wartości z zakresu. Zamiast pola tekstowego stosujemy przesuwaną skalę. Użytkownik może przeciągnąć uchwyt na skali, aby dostosować jej wartość.</p> + +<div class="float-right"><img alt="Image:Controlguide-scale.gif"></div> + +<p>Wiele takich samych atrybutów może być używanych wraz ze skalą jako pole numeryczne: atrybuty <code id="a-value"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/value">value</a></code>, <code id="a-min"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/min">min</a></code>, <code id="a-max"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/max">max</a></code> i <code id="a-increment"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/increment">increment</a></code> mogą być stosowane w podobnym stylu. Aktualnie skala nie wyświetla wartości liczbowych, lecz może być stosowane w skrypcie. <strong>A scale will fire a <code>change</code> event whenever the scales's value is modified.</strong> <span class="comment">Skala uruchomi zdarzenie <code>change</code>, zawsze gdy jej wartość zostanie zmodyfikowana</span></p> + +<pre><scale value="40" min="1" max="50"/> +</pre> + +<p>Ta skala domyślnie ustawiona jest na wartość 40 i posiada swój zakres pomiędzy 1 a 50.</p> + +<p>Numeryczne pole tekstowe normalnie jest stosowane, kiedy dla użytkownika jest ważna wartość tego pola, na przykład; pole do wprowadzania numerów dni lub gdy podajemy maksymalny rozmiar pliku. Skala będzie używana wówczas, gdy bieżąca wartość nie jest ważna, lecz która przesuwa po skali zmniejszając lub zwiększając swój stan. Dla przykładu, suwak do regulacji dźwięku lub do zmiany poziomów powiększenia.</p> + +<p>Domyślne ułożenie skali jest poziome wraz z mniejszymi wartościami z lewej strony i większymi wartościami po prawej stronie. Jednakże istnieje możliwość zmiany orientacji za pomocą atrybutów <code id="a-orient"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/orient">orient</a></code> i <code id="a-dir"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/dir">dir</a></code>.</p> + +<pre><scale orient="vertical" dir="reverse"/> +</pre> + +<p>Ta skala będzie wyświetlona pionowo z mniejszymi wartościami u dołu i większymi wartościami u góry.</p> + +<h3 id="Pola_do_wprowadzania_daty_i_czasu" name="Pola_do_wprowadzania_daty_i_czasu">Pola do wprowadzania daty i czasu</h3> + +<p>Elementy <code><a href="/pl/docs/Mozilla/Tech/XUL/datepicker" title="datepicker">datepicker</a></code> i <code><a href="/pl/docs/Mozilla/Tech/XUL/timepicker" title="timepicker">timepicker</a></code> mogą być stosowane do wprowadzania dat i czasu przez użytkownika. Kiedy używamy ich, wyświetlone zostaną ustawione numeryczne pola tekstowe do wprowadzenia każdego ze składników daty i czasu.</p> + +<pre><datepicker value="2004/3/24"/> +<timepicker value="15:30:00"/> +</pre> + +<div class="float-right"><img alt="Grafika:Controlguide-timepicker.gif"></div> + +<p>Atrybut <code>value</code> jest stosowany do ustawienia domyślnej wartości; jeśli atrybut ten zostanie pominięty, pole początkowo będzie ustawione na bieżącą datę i czas. Format atrybutu jest dokładnie jak w przykładzie powyżej, dla daty przybiera formę YYYY/MM/DD i dla czasu formę HH:MM:SS (pomimo że sekundy i towarzyszący im dwukropek mogą być pominięte).</p> + +<p>These two elements ensure that the user enters a value date or time. This way, you do not have to check for valid dates, ensure that the day isn't greater than the number of days in the month, handle leap years, and so forth.</p> + +<p>While the <code><a href="/pl/docs/Mozilla/Tech/XUL/timepicker" title="timepicker">timepicker</a></code> only comes is one style, the <code><a href="/pl/docs/Mozilla/Tech/XUL/datepicker" title="datepicker">datepicker</a></code> has three different variations. The default style shows three fields for entering the year, month and date. The <code id="a-type"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/type">type</a></code> attribute may be used to select the other two. Using a value of <code>grid</code> uses a calendar grid, as shown in the image below.</p> + +<p><img alt="Grafika:Controlsguide-datepicker-grid.png"></p> + +<p>Można również wykorzystać wartość <code>popup</code>, która tworzy kombinację dwóch typów. Ten typ posiada trzy pola do wprowadzenia roku, miesiąca i daty, as well as a dropdown button for displaying a popup calendar grid for selecting a day.</p> + +<pre><datepicker type="popup"/> +</pre> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Kontrolki_wejścia" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Kontrolki_list">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/kontrolki_wejścia/index.html b/files/pl/mozilla/tech/xul/kurs_xul/kontrolki_wejścia/index.html new file mode 100644 index 0000000000..374df45d77 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/kontrolki_wejścia/index.html @@ -0,0 +1,131 @@ +--- +title: Kontrolki wejścia +slug: Mozilla/Tech/XUL/Kurs_XUL/Kontrolki_wejścia +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Input_Controls +--- +<p> </p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Dodawanie_etykiet_i_obrazków" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Kontrolki_numeryczne">Następny »</a></p> +</div><p></p> + +<p>XUL posiada elementy, które są podobne do kontrolek <a href="pl/DOM/form">formularza</a> HTML.</p> + +<h3 id="Pola_tekstowe" name="Pola_tekstowe">Pola tekstowe</h3> + +<p>HTML zawiera element <code>input</code>, który może zostać użyty do wprowadzania tekstu. XUL posiada podobny element, <code><code><a href="/pl/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></code>, używany do pól tekstowych. Bez żadnych argumentów textbox tworzy pole, w którym użytkownik może wprowadzać tekst. Pola tekstowe akceptują wiele parametrów takich samych, jakie w języku HTML posiadają kontrolki wejścia. Niektóre z nich:</p> + +<dl> + <dt><code id="a-id"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/id">id</a></code></dt> + <dd>Unikatowy identyfikator, przez który możesz się odwoływać do pola tekstowego.</dd> + <dt><code id="a-class"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/class">class</a></code> </dt> + <dd>Klasa stylu pola tekstowego.</dd> + <dt><code id="a-value"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/value">value</a></code> </dt> + <dd>Jeśli chcesz, aby pole tekstowe posiadało domyślny tekst, podaj go jako wartość tego atrybutu.</dd> + <dt><code id="a-disabled"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/disabled">disabled</a></code> </dt> + <dd>Ustaw na <code>true</code>, aby wyłączyć możliwość wprowadzania tekstu.</dd> + <dt><code id="a-type"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/type">type</a></code> </dt> + <dd>Możesz ustawić wartość tego atrybutu na specjalną wartość <code>password</code>, tak aby pole tekstowe nie pokazywało wpisywanego tekstu. Często używa się tej wartości w przypadku pól do podawania hasła.</dd> + <dt><code id="a-maxlength"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/maxlength">maxlength</a></code> </dt> + <dd>Maksymalna liczba znaków, jaka może zostać wprowadzona do pola.</dd> +</dl> + +<p>Podczas, gdy w HTML-u z elementu inpu mogą być tworzone różne rodzaje pól (nie tylko tekstowych), w XUL-u dla każdego typu są oddzielne elementy. Następujący przykład ilustruje użycie pól tekstowych:</p> + +<h4 id="Element_textbox" name="Element_textbox">Element <code>textbox</code></h4> + +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_1.xul">Podgląd</a></p> + +<pre><label control="some-text" value="Wpisz jakiś tekst"/> +<textbox id="some-text"/> +<label control="some-password" value="Wpisz hasło"/> +<textbox id="some-password" type="password" maxlength="8"/> +</pre> + +<p>W przykładzie <code><code><a href="/pl/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></code> tworzone są pola, do których można wprowadzić tylko jeden wiersz tekstu. HTML posiada również element <code>textarea</code>, który jest używany do tworzenia większych obszarów do wprowadzania tekstu. W XUL-u w tym celu możesz z powodzeniem użyć elementu textbox -- osobny element nie jest potrzebny. Jeśli ustawisz atrybut <code><code id="a-multiline"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/multiline">multiline</a></code></code> na <code>true</code>, wówczas pole tekstowe wyświetlone zostanie z wieloma wierszami. Dla przykładu:</p> + +<h5 id="Wieloliniowy_textbox" name="Wieloliniowy_textbox">Wieloliniowy <code>textbox</code></h5> + +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_2.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_2.xul">Podgląd</a></p> + +<pre><textbox multiline="true" + value="To jest tekst, który powinien zostać zawinięty do kilku linii."/> +</pre> + +<p>Tak jak w języku HTML dla <code>textarea</code>, możesz użyć atrybutów <code>rows</code> i <code>cols</code> do ustawienia rozmiaru pola. Powinna być ustawiona liczba wierszy i kolumn znaków potrzebnych do wyświetlenia.</p> + +<div class="highlight"> +<h4 id="Przyk.C5.82ad:_Znajd.C5.BA_pliki" name="Przyk.C5.82ad:_Znajd.C5.BA_pliki">Przykład: <code>Znajdź pliki</code></h4> + +<p>Dodajemy teraz pole szukania do okna dialogowego <code>Znajdź pliki</code>. W tym celu użyjemy elementu <code>textbox</code>.</p> + +<pre class="eval"><span class="highlightred"><label value="Szukaj dla:" control="find-text"/></span> +<span class="highlightred"><textbox id="find-text"/></span> + +<button id="find-button" label="Znajdź"/> +</pre> + +<div class="float-right"><img alt="grafika:inputs1.png"></div> + +<p>Wstaw powyższy kod przed miejscem, w którym utworzyliśmy przyciski w poprzednim rozdziale. Jeśli otworzysz to okno, powinieneś zobaczyć okno podobne do obrazka znajdującego się obok.</p> + +<p>Etykieta i pole wejściowe pojawiły się w oknie. Pole tekstowe jest w pełni funkcjonalne i możesz w nim pisać i zaznaczać tekst. Ponadto został użyty atrybut <code><code id="a-control"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/control">control</a></code></code>, więc po kliknięciu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/label" title="label">label</a></code></code> aktywne staje się pole tekstowe.</p> +</div> + +<h3 id="Pola_wyboru_i_przyciski_opcji" name="Pola_wyboru_i_przyciski_opcji">Pola wyboru i przyciski opcji</h3> + +<p>Dwa dodatkowe elementy stosowane są do tworzenia pól wyboru i przycisków opcji. Są one po prostu wariantami przycisków. Pola wyboru stosuje się do opcji, które mogą być włączone lub wyłączone. Przyciski opcji mogą być wykorzystane w podobnym celu, gdzie ze zbioru opcji może być zaznaczona tylko jedna pozycja.</p> + +<p>Więcej podobnych atrybutów przycisków możemy stosować razem z polami wyboru i przyciskami opcji. Przykład poniżej pokazuje proste pole wyboru oraz przyciski opcji.</p> + +<pre><checkbox id="case-sensitive" checked="true" label="Rozróżniaj wielkość liter"/> +<radio id="orange" label="Pomarańczowy"/> +<radio id="violet" selected="true" label="Fioletowy"/> +<radio id="yellow" label="Żółty"/> +</pre> + +<p>Pierwsza instrukcja tworzy proste pole wyboru (<code><code><a href="/pl/docs/Mozilla/Tech/XUL/checkbox" title="checkbox">checkbox</a></code></code>). Kiedy użytkownik kliknie w pole wyboru, to pole będzie przełączone pomiędzy polem zaznaczonym i niezaznaczonym. Atrybut <code><code id="a-checked"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/checked">checked</a></code></code> można zastosować do wskazania stanu domyślnego. Powinieneś ustawić wspomniany atrybut na <code>true</code> lub <code>false</code>. Do dołączenia etykiety obok pola wyboru zastosuj atrybut <code><code id="a-label"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/label">label</a></code></code>. W przypadku przycisków <code><code><a href="/pl/docs/Mozilla/Tech/XUL/radio" title="radio">radio</a></code></code> powinieneś stosować atrybut <code><code id="a-selected"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/selected">selected</a></code></code> zamiast atrybutu <code><code id="a-checked"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/checked">checked</a></code></code>. Ustaw jego wartość na <code>true</code>, tak aby przycisk opcji był domyślnie zaznaczony lub pozostaw go bez zmian dla pozostałych przycisków opcji.</p> + +<h4 id="Element_radiogroup" name="Element_radiogroup">Element radiogroup</h4> + +<p>Aby połączyć kilka przycisków opcji w grupę, będziesz potrzebował użyć elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code></code>. Tylko jedna opcja z grupy może być w danej chwili zaznaczona. Zaznaczenie jednej pozycji będzie wyłączało wszystkie pozostałe opcje w tej samej grupie. Poniższy przykład demonstruje poruszane zagadnienie.</p> + +<p><span id="Przyk%C5%82ad_3"><a id="Przyk%C5%82ad_3"></a><strong>Przykład 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_3.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_3.xul">Podgląd</a></p> + +<pre><radiogroup> + <radio id="orange" label="Pomarańczowy"/> + <radio id="violet" selected="true" label="Fioletowy"/> + <radio id="yellow" label="Żółty"/> +</radiogroup> +</pre> + +<h4 id="Atrybuty" name="Atrybuty">Atrybuty</h4> + +<p>Podobnie jak przyciski, pola wyboru i przyciski opcji są zrobione z etykiety i obrazka, gdzie obrazek przełącza się pomiędzy zaznaczonym i niezaznaczonym, w momencie jego naciśnięcia. Pola wyboru posiadają wiele atrybutów takich samych jak przyciski:</p> + +<dl> + <dt><code id="a-label"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/label">label</a></code></dt> + <dd>Etykieta pola wyboru lub przycisku opcji.</dd> + <dt><code id="a-disabled"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/disabled">disabled</a></code></dt> + <dd>Wyłącza lub włącza składnik, przy ustawieniu odpowiednio na <code>true</code> lub <code>false</code>.</dd> + <dt><code id="a-accesskey"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/accesskey">accesskey</a></code> </dt> + <dd>Klawisz skrótu, który może być stosowany do zaznaczenia elementu. Użyta litera w etykiecie jest zwykle wyświetlona z podkreśleniem.</dd> +</dl> + +<div class="highlight"> +<p>Przykład <code>Znajdź pliki</code>: <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-inputs.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-inputs.xul">Podgląd</a></p> +</div> + +<p>W następnym artykule poznamy elementy do <a href="pl/Kurs_XUL/Kontrolki_numeryczne">tworzenia kontrolek numerycznych</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Dodawanie_etykiet_i_obrazków" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Kontrolki_numeryczne">Następny »</a></p> +</div><p></p> + +<div class="noinclude"> </div> + +<p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/lokalizacja/index.html b/files/pl/mozilla/tech/xul/kurs_xul/lokalizacja/index.html new file mode 100644 index 0000000000..f94a45e141 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/lokalizacja/index.html @@ -0,0 +1,310 @@ +--- +title: Lokalizacja +slug: Mozilla/Tech/XUL/Kurs_XUL/Lokalizacja +tags: + - Kurs_XUL + - Lokalizacja + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Localization +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Tworzenie_motywów" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Plik_własności">Następny »</a></p> +</div><p></p> + +<p>XUL i XML dostarczają encje, które są wygodnym sposobem stosowanym w plikach lokalizacji.</p> + +<h2 id="Encje" name="Encje">Encje</h2> + +<p>Wiele aplikacji jest budowana w sposób określony i umożliwiający łatwe przetłumaczenie interfejsu aplikacji na inny język. Zazwyczaj, tabele wraz ze stringami są tworzone dla każdego języka. Zamiast trudnego tekstu kodu, w każdej części tekstu aplikacji, jest referencja do tabeli typu string. <a href="pl/XML">XML</a> dostarcza encje, które możemy zastosować dla wspomnianego celu.</p> + +<p>Powinieneś już dobrze znać encje, jeśli piszesz w <a href="pl/HTML">HTML</a>. Kody <code>&lt;</code> i <code>&gt;</code> są przykładami encji, które możemy użyć w miejsce znaku mniejszości (<) lub większości (>), zamiast jego formy w postaci tekstowej. Składnia języka XML, pozwala nam na deklaracje własnych encji. Możemy ich użyć, w taki sposób, że encja jest zamieniana z tą wartością, która jest prostym tekstem. Encje możemy używać zawsze, kiedy są tekstem, który zawiera wartość atrybutów. Przykład poniżej demonstruje użycie encji w przycisku.</p> + +<pre><button label="&findLabel;"/> +</pre> + +<p>Tekst, który pojawi się jako etykieta (<code>label</code>), będzie wyświetlała wartość, jaka jest zawarta w encji <code>&findLabel</code>. Plik jest tworzony z powstrzymanej encji zadeklarowanej dla każdego obsługiwanego języka. W języku angielskim zadeklarowanej encji <code>&findLabel</code> będzie przydzielony tekst <code>Znajdź</code>.</p> + +<h2 id="Pliki_DTD" name="Pliki_DTD">Pliki DTD</h2> + +<p>Encje są zadeklarowane w plikach DTD ( + <i>Document Type Declaration</i> + ). Zazwyczaj tego typu pliki są używane do deklaracji składni i semantyki poszczególnych plików XML, lecz także umożliwiają deklarację encji. W Mozilli w systemie chrome, możesz zmaleźć pliki DTD są umieszczone w podkatalogu <tt>locales</tt>. Normalnie będzie tam jeden plik DTD (z rozszerzeniem <tt>.dtd</tt>) na jeden plik XUL.</p> + +<p>Jeśli widzisz katalog chrome, powinieneś się przyjrzeć archiwum w Twoim języku (en-US.jar jest domyślnym językiem dla angielskiego). Mamy pliki lokalizacji w kilku językach (jak w przykładzie) m.in. w angielskim (en-US) i francuskim (fr). Wewnątrz tych archiwów, będą się znajdowały pliki, które trzymają zlokalizowany tekst dla każdego okna. Struktura archiwów jest bardzo podobna do struktury katalogów dla <a href="pl/Kurs_XUL/Tworzenie_motyw%c3%b3w">motywu</a>.</p> + +<p>Wewnątrz archiwów, połóż swój plik DTD, w którym zadeklarujesz encje. Zazwyczaj tworzymy jeden plik DTD dla każdego pliku XUL. Posiadają one taką samą nazwę pliku, jedynie rozszerzenie pliku jest inne (<code>.dtd</code>), czyli w naszym przykładowym oknie <code>Znajdź pliki</code>, będzie potrzebny plik o nazwie <code>findfile.dtd</code>.</p> + +<p>Dla plików nieinstalowanych w chrome, możemy tylko umieścić plik DTD do tego samego katalogu co plik XUL.</p> + +<p>Raz możesz utworzyć plik DTD dla twojego XUL, będziesz potrzebował dodać do plik XUL, który sygnalizuje, co chcesz do użycia pliku DTD. W przeciwnym razie błędy będą się zdarzać jako, że nie można znaleźć encji. Zrób to, dodaj linię pochodzącą z najbliższego miejsca pliku XUL:</p> + +<pre><!DOCTYPE window SYSTEM "chrome://findfile/locale/findfile.dtd"> +</pre> + +<p>Linia określa, co mamy zasygnalizować w użyciu DTD dla pliku. W tym przypadku, deklarujemy co chcemy użyć w pliku DTD <code>findfile.dtd</code>. Linię tą umieszczamy zawsze za elementem <code><code><a href="/pl/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code>.</p> + +<h2 id="Deklaracja_encji" name="Deklaracja_encji">Deklaracja encji</h2> + +<p>Encję możemy zadeklarować przy użyciu prostej składni, przykład znajduje się poniżej:</p> + +<pre><!ENTITY findLabel "Znajdź"> +</pre> + +<p>Przykład tworzy encję o nazwie <code>findLabel</code> i wartości <code>Znajdź</code>. Oznacza to, że gdziekolwiek zawarty zostanie tekst <code>&findLabel</code> w pliku XUL, to będzie on zastąpiony tekstem <code>Znajdź</code>. W pliku DTD dla innych wersji językowych, możemy określić wpis w naszym języku, co pozwoli na użycie go zamiast tu zdefiniowanego. Uwaga, jest to deklaracja encji, w której nie ma kończącego znaku slash.</p> + +<p>Na przykład, następny tekst:</p> + +<pre><description value="&findLabel;"/> +</pre> + +<p>Jest tłumaczony jako:</p> + +<pre><description value="Znajdź"/> +</pre> + +<p>Możesz zadeklarować encje dla każdej etykiety (<code>label</code>) lub łańcucha znakowego, które zostaną zadeklarowane w Twoim interfejsie. Powinieneś nie mieć bezpośrednio wyświetlonego tekstu w pliku XUL dla wszystkich.</p> + +<p>Nadając encji użycie tekstu etykiety, powinieneś użyć dla niej wartość, która byłaby inna w innym języku. Przykład <a href="pl/Kurs_XUL/Skr%c3%b3ty_klawiaturowe">kluczy dostępu i skrótów klawiaturowych</a>.</p> + +<pre class="eval"> <b>XUL</b> + <menuitem label="&undo.label;" accesskey="&undo.key;"/> + <b>DTD</b> + <!ENTITY undo.label "Undo"> + <!ENTITY undo.key "u"> +</pre> + +<p>W przykładzie powyżej użyto dwóch encji, jednej dla etykiety 'Undo' dla pozycji znajdującej się w menu i drugiej dla klucza dostępu.</p> + +<div class="highlight"> +<h2 id="Zmieniamy_przyk.C5.82ad_.22Znajd.C5.BA_pliki.22" name="Zmieniamy_przyk.C5.82ad_.22Znajd.C5.BA_pliki.22">Zmieniamy przykład "<code>Znajdź pliki</code>"</h2> + +<p>Zastanówmy się w jaki sposób możemy wszystko ułożyć w oknie dialogowym <code>Znajdź pliki</code>, tak aby został zastosowany plik DTD dla wszystkich łańcuchów znakowych. Encje w pliku XUL są pokazane poniżej w kolorze czerwonym.</p> + +<pre class="eval"><?xml version="1.0"?> + +<?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?> +<?xml-stylesheet href="findfile.css" type="text/css"?> + +<span class="highlightred"><!DOCTYPE window SYSTEM "<a class="external" rel="freelink">chrome://findfile/locale/findfile.dtd</a>"></span> + +<window + id="findfile-window" + title="<span class="highlightred">&findWindow.title;</span>" + persist="screenX screenY width height" + orient="horizontal" + onload="initSearchList()" + xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"> + +<script src="findfile.js"/> + +<popupset> + <menupopup id="editpopup"> + <menuitem label="<span class="highlightred">&cutCmd.label;</span>" accesskey="<span class="highlightred">&cutCmd.accesskey;</span>"/> + <menuitem label="<span class="highlightred">&copyCmd.label;</span>" accesskey="<span class="highlightred">&copyCmd.accesskey;</span>"/> + <menuitem label="<span class="highlightred">&pasteCmd.label;</span>" accesskey="<span class="highlightred">&pasteCmd.accesskey;</span>" disabled="true"/> + </menupopup> +</popupset> + +<keyset> + <key id="cut_cmd" modifiers="accel" key="<span class="highlightred">&cutCmd.commandkey;</span>"/> + <key id="copy_cmd" modifiers="accel" key="<span class="highlightred">&copyCmd.commandkey;</span>"/> + <key id="paste_cmd" modifiers="accel" key="<span class="highlightred">&pasteCmd.commandkey;</span>"/> + <key id="close_cmd" keycode="VK_ESCAPE" oncommand="window.close();"/> +</keyset> + +<vbox flex="1"> + + <toolbox> + + <menubar id="findfiles-menubar"> + <menu id="file-menu" label="<span class="highlightred">&fileMenu.label;</span>" + accesskey="<span class="highlightred">&fileMenu.accesskey;</span>"> + <menupopup id="file-popup"> + <menuitem label="<span class="highlightred">&openCmd.label;</span>" + accesskey="<span class="highlightred">&openCmd.accesskey;</span>"/> + <menuitem label="<span class="highlightred">&saveCmd.label;</span>" + accesskey="<span class="highlightred">&saveCmd.accesskey;</span>"/> + <menuseparator/> + <menuitem label="<span class="highlightred">&closeCmd.label;</span>" + accesskey="<span class="highlightred">&closeCmd.accesskey;" key="close_cmd" oncommand="window.close();</span>"/> + </menupopup> + </menu> + <menu id="edit-menu" label="<span class="highlightred">&editMenu.label;</span>" + accesskey="<span class="highlightred">&editMenu.accesskey;</span>"> + <menupopup id="edit-popup"> + <menuitem label="<span class="highlightred">&cutCmd.label;</span>" + accesskey="<span class="highlightred">&cutCmd.accesskey;</span>" key="cut_cmd"/> + <menuitem label="<span class="highlightred">&copyCmd.label;</span>" + accesskey="<span class="highlightred">&copyCmd.accesskey;</span>" key="copy_cmd"/> + <menuitem label="<span class="highlightred">&pasteCmd.label;</span>" + accesskey="<span class="highlightred">&pasteCmd.accesskey;</span>" key="paste_cmd" disabled="true"/> + </menupopup> + </menu> + </menubar> + + <toolbar id="findfiles-toolbar"> + <toolbarbutton id="opensearch" label="<span class="highlightred">&openCmdToolbar.label;</span>"/> + <toolbarbutton id="savesearch" label="<span class="highlightred">&saveCmdToolbar.label;</span>"/> + </toolbar> + </toolbox> + + <tabbox> + <tabs> + <tab label="<span class="highlightred">&searchTab;</span>" selected="true"/> + <tab label="<span class="highlightred">&optionsTab;</span>"/> + </tabs> + + <tabpanels> + + <tabpanel id="searchpanel" orient="vertical" context="editpopup"> + + <description> + <span class="highlightred">&findDescription;</span> + </description> + + <spacer class="titlespace"/> + + <groupbox orient="horizontal"> + <caption label="<span class="highlightred">&findCriteria;</span>"/> + + <menulist id="searchtype"> + <menupopup> + <menuitem label="<span class="highlightred">&type.name;</span>"/> + <menuitem label="<span class="highlightred">&type.size;</span>"/> + <menuitem label="<span class="highlightred">&type.date;</span>"/> + </menupopup> + </menulist> + <spacer class="springspace"/> + <menulist id="searchmode"> + <menupopup> + <menuitem label="<span class="highlightred">&mode.is;</span>"/> + <menuitem label="<span class="highlightred">&mode.isnot;</span>"/> + </menupopup> + </menulist> + <spacer class="springspace"/> + + <menulist id="find-text" flex="1" + editable="true" + datasources="<a class="external" rel="freelink">file:///mozilla/recents.rdf</a>" + ref="<span class="nowiki">http://www.xulplanet.com/rdf/recent/all</span>"> + <template> + <menupopup> + <menuitem label="<span class="nowiki">rdf:http://www.xulplanet.com/rdf/recent#Label</span>" uri="rdf:*"/> + </menupopup> + </template> + </menulist> + + </groupbox> + + </tabpanel> + + <tabpanel id="optionspanel" orient="vertical"> + <checkbox id="casecheck" label="<span class="highlightred">&casesensitive;</span>"/> + <checkbox id="wordscheck" label="<span class="highlightred">&matchfilename;</span>"/> + </tabpanel> + + </tabpanels> + </tabbox> + + <tree id="results" style="display: none;" flex="1"> + <treecols> + <treecol id="name" label="<span class="highlightred">&results.filename;</span>" flex="1"/> + <treecol id="location" label="<span class="highlightred">&results.location;</span>" flex="2"/> + <treecol id="size" label="<span class="highlightred">&results.size;</span>" flex="1"/> + </treecols> + + <treechildren> + <treeitem> + <treerow> + <treecell label="mozilla"/> + <treecell label="/usr/local"/> + <treecell label="<span class="highlightred">&bytes.before;</span>2520<span class="highlightred">&bytes.after;</span>"/> + </treerow> + </treeitem> + </treechildren> + </tree> + + <splitter id="splitbar" resizeafter="grow" style="display: none;"/> + + <spacer class="titlespace"/> + + <hbox> + <progressmeter id="progmeter" value="50%" style="display: none;"/> + <spacer flex="1"/> + <button id="find-button" label="<span class="highlightred">&button.find;</span>" + oncommand="doFind()"/> + <button id="cancel-button" label="<span class="highlightred">&button.cancel;</span>" + oncommand="window.close();"/> + </hbox> +</vbox> + +</window> +</pre> + +<p>Każdy łańcuch tekstowy został zastąpiony poprzez odwołanie się do odpowiedniej encji. Plik DTD został umieszczony zaraz na początku pliku XUL. Każdą encję, którą dodamy, powinniśmy zadeklarować w pliku DTD. Okno nie powinno zostać wyświetlone, jeśli encja będzie umieszczona w pliku XUL, a nie została zadeklarowana.</p> + +<p>Uwaga: nazwa encji nie jest ważna. W przykładzie powyżej, słowa w encjach zostały oddzielone kropką. Nie musimy tego robić. Nazwy encji tutaj, są podobne do przyjętej konwencji kodu jakiej używa Mozilla.</p> + +<p>Zwróć uwagę, że tekst o rozmiarze '2520 bajtów' zastąpiliśmy poprzez dwie encje. Dzieje się tak, ponieważ struktura wyrażenia może być inna w następnym miejscu. Na przykład, numer może potrzebować stać się równoważnym ilości bajtów, przed zamiast po. Oczywiście może to być bardziej skomplikowane do zrealizowania, aby wyświetlać rozmiar w KB lub potrzebne bardziej będą już Ci MB.</p> + +<p>Klucze dostępu, jak i skróty klawiaturowe także będziemy tłumaczyli jako encje, ponieważ będą one prawdopodobnie inne oraz w innych miejscach będą się znajdowały.</p> + +<p>Następnie, plik DTD (findfile.dtd):</p> + +<pre><!ENTITY findWindow.title "Find Files"> +<!ENTITY fileMenu.label "File"> +<!ENTITY editMenu.label "Edit"> +<!ENTITY fileMenu.accesskey "f"> +<!ENTITY editMenu.accesskey "e"> +<!ENTITY openCmd.label "Open Search..."> +<!ENTITY saveCmd.label "Save Search..."> +<!ENTITY closeCmd.label "Close"> +<!ENTITY openCmd.accesskey "o"> +<!ENTITY saveCmd.accesskey "s"> +<!ENTITY closeCmd.accesskey "c"> +<!ENTITY cutCmd.label "Cut"> +<!ENTITY copyCmd.label "Copy"> +<!ENTITY pasteCmd.label "Paste"> +<!ENTITY cutCmd.accesskey "t"> +<!ENTITY copyCmd.accesskey "c"> +<!ENTITY pasteCmd.accesskey "p"> +<!ENTITY cutCmd.commandkey "X"> +<!ENTITY copyCmd.commandkey "C"> +<!ENTITY pasteCmd.commandkey "V"> +<!ENTITY openCmdToolbar.label "Open"> +<!ENTITY saveCmdToolbar.label "Save"> +<!ENTITY searchTab "Search"> +<!ENTITY optionsTab "Options"> +<!ENTITY findDescription "Enter your search criteria below and select the Find button to begin the search."> +<!ENTITY findCriteria "Search Criteria"> +<!ENTITY type.name "Name"> +<!ENTITY type.size "Size"> +<!ENTITY type.date "Date Modified"> +<!ENTITY mode.is "Is"> +<!ENTITY mode.isnot "Is Not"> +<!ENTITY casesensitive "Case Sensitive Search"> +<!ENTITY matchfilename "Match Entire Filename"> +<!ENTITY results.filename "Filename"> +<!ENTITY results.location "Location"> +<!ENTITY results.size "Size"> +<!ENTITY bytes.before ""> +<!ENTITY bytes.after "bytes"> +<!ENTITY button.find "Find"> +<!ENTITY button.cancel "Cancel"> +</pre> + +<p>Wszystko czego potrzeba do zmiany wersji językowej, to utworzenie następnego pliku DTD. Używając systemu chrome dodaj plik DTD dla innych lokalizacji, ten sam plik możemy zastosować w każdym języku.</p> + +<p>Przykład <code>Znajdź pliki</code>: <a href="https://developer.mozilla.org/samples/xultu/examples//findfile/findfile-locale.xul.txt">Źródła</a></p> +</div> + +<p>W następnym artykule, zobaczymy jak wyglądają <a href="pl/Kurs_XUL/Plik_w%c5%82asno%c5%9bci">pliki własności</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Tworzenie_motywów" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Plik_własności">Następny »</a></p> +</div><p></p> + +<div class="noinclude"> </div> + +<p> </p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/manipulowanie_listami/index.html b/files/pl/mozilla/tech/xul/kurs_xul/manipulowanie_listami/index.html new file mode 100644 index 0000000000..65fbdf5b5d --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/manipulowanie_listami/index.html @@ -0,0 +1,146 @@ +--- +title: Manipulowanie listami +slug: Mozilla/Tech/XUL/Kurs_XUL/Manipulowanie_listami +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Manipulating_Lists +--- +<p> +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Modyfikowanie_interfejsu_XUL" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Obiekty_pudełka">Następny »</a></p> +</div> +<p></p><p>Pudełko listy XUL posiada kilka specjalnych metod. +</p> +<h3 id="Manipulowanie_listami" name="Manipulowanie_listami"> Manipulowanie listami </h3> +<p>Element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code></code> dostarcza licznych metod do wyszukiwania i manipulowania swoimi pozycjami. Chociaż <a href="pl/Kurs_XUL/Kontrolki_list">pudełka listy</a> mogą być manipulowane przy zastosowaniu standardowych funkcji <a href="pl/DOM">DOM</a>, zalecane jest, żeby stosować specjalne funkcje pudełka list, gdy to jest możliwe. Funkcje te są trochę prostsze i będą poprawnie wykonywały swoje zadanie. </p><p>Funkcja <code><span id="m-appendItem"><code><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Metoda/appendItem">appendItem()</a></code></span></code> jest stosowana do dołączania nowej pozycji na końcu listy. Podobna jest do funkcji <code><a href="pl/DOM/element.appendChild">DOM appendChild()</a></code> z wyjątkiem tego, że pobiera etykietę w postaci łańcucha znaków, a Ty nie musisz się martwić o to, gdzie ją dodać w strukturze listy. Poniżej mamy przykład: +</p><p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_1.xul">Podgląd</a> +</p> +<pre><script> +function addItem(){ + document.getElementById('thelist').appendItem("Czwartek", "czw"); +} +</script> + +<listbox id="thelist"/> + +<button label="Dodaj" oncommand="addItem();"/> +</pre> +<p>Metoda <code><span id="m-appendItem"><code><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Metoda/appendItem">appendItem()</a></code></span></code> pobiera dwa argumenty; argument <code>label</code>, w tym przypadku 'Czwartek' oraz argument <code>value</code> 'czw'. Te dwa argumenty są przesyłane do atrybutu <code><code id="a-label"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/label">label</a></code></code> i atrybutu <code><code id="a-value"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/value">value</a></code></code> dla elementu w <code><code><a href="/pl/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code></code>. Ta wartość jest używana tylko jako dodatkowa opcjonalna wartość powiązana z pozycją, którą można by było zastosować w skrypcie. </p><p>Podobnie jest również z funkcją <code><span id="m-insertItemAt"><code><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Metoda/insertItemAt">insertItemAt()</a></code></span></code> i <code><span id="m-removeItemAt"><code><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Metoda/removeItemAt">removeItemAt()</a></code></span></code>, które odpowiednio wstawiają nową pozycję i usuwają poszczególne istniejące pozycje. Składnia jest następująca: +</p> +<pre>list.insertItemAt(3, "Czwartek", "czw"); +list.removeItemAt(3); +</pre> +<p>Funkcja <code><span id="m-insertItemAt"><code><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Metoda/insertItemAt">insertItemAt()</a></code></span></code> pobiera dodatkowy argument, pozycję do wstawienia nowej pozycji. Nowa pozycja jest włożona do tego indeksu, więc w przykładzie nowa pozycja będzie dodana na pozycji 3, podczas gdy wcześniejsza pozycja z tego miejsca będzie teraz pod numerem 4. Pamiętaj, że pierwszą pozycją jest 0. Funkcja <code><span id="m-removeItemAt"><code><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Metoda/removeItemAt">removeItemAt()</a></code></span></code> będzie usuwała pozycję o określonym indeksie. +</p><p>Te trzy metody są również dostępne dla kilku innych elementów XUL i działają w ten sam sposób. Faktycznie, te metody są częścią interfejsu <a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIDOMXULSelectControlElement.html">nsIDOMXULSelectControlElement</a>, więc dowolny element XUL, który implementuje ten interfejs, posiada te metody. Obejmuje to elementy <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code>, <code><code><a href="/pl/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code></code> i <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code>. Na przykład, dodając nową pozycję do <a href="pl/Kurs_XUL/Proste_paski_menu">menulist</a>, możemy zastosować ta samą składnię jak dla <a href="pl/Kurs_XUL/Kontrolki_list">listbox</a>. Poprawny rodzaj elementu będzie mógł zostać dołączony w każdej sytuacji. +</p> +<h3 id="Zaznaczenie_listy" name="Zaznaczenie_listy"> Zaznaczenie listy </h3> +<p>Interfejs nsIDOMXULSelectControlElement posiada dwie dodatkowe własności: <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/selectedIndex">selectedIndex</a></span></code></code> i <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/selectedItem">selectedItem</a></span></code></code>. Pierwsza zwraca index zaznaczonej pozycji, podczas gdy druga zwraca zaznaczony element. Dla przykładu selectedItem listy menu będzie to pozycja <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code>, która jest zaznaczona. Jeśli nie zostanie zaznaczona żadna pozycja, własność <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/selectedIndex">selectedIndex</a></span></code></code> zwróci -1, podczas gdy własność <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/selectedItem">selectedItem</a></span></code></code> zwróci null. +</p> +<h4 id="Pobieranie_zaznaczonej_pozycji" name="Pobieranie_zaznaczonej_pozycji"> Pobieranie zaznaczonej pozycji </h4> +<p>Te dwie własności są powszechnie sprawdzane podczas zdarzenia wyboru, jak pokazano w poniższym przykładzie: +</p><p><span id="Przyk%C5%82ad_2"><a id="Przyk%C5%82ad_2"></a><strong>Przykład 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_2.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_2.xul">Podgląd</a> +</p> +<pre><listbox id="thelist" onselect="alert(this.selectedItem.label);"> + <listitem label="Niski"/> + <listitem label="Średni"/> + <listitem label="Wysoki"/> +</listbox> +</pre> +<p>Zdarzenie zaznaczenia jest odpalane dla elementu <code><a href="/pl/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code>, kiedy pozycja w liście jest zaznaczona. Obsługa wyboru wyświetla alarm zawierający etykietkę wybranej pozycji z listy. Jeśli wyzwolono zdarzenie wyboru, możemy założyć, że pozycja została wybrana. W innych przypadkach możesz życzyć sobie sprawdzenia, aby upewnić się przed kontynuowaniem, że selectedItem nie jest null. +</p><p>Zdarzenie zaznaczenia jest także odpalane, kiedy jest zaznaczony przycisk opcji w <code><code><a href="/pl/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code></code> i kiedy jest zaznaczona karta w elemencie <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code>. Jednak <code><a href="pl/XUL/menulist">menulists</a></code> nie odpala zdarzenia zaznaczenia, zamiast tego można nasłuchiwać zdarzenia polecenia do obsługi, kiedy pozycja jest zaznaczona. +</p><p>Dla elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code> często bardziej dogodnymi do użycia funkcjami elementu są funkcje elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></code>. Posiada on również funkcję <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/selectedIndex">selectedIndex</a></span></code></code>, która będzie zwracała index zaznaczonej karty. Jednakże do pobrania zaznaczonej pozycji użyj zamiast tego własności elementu tabbox <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/selectedTab">selectedTab</a></span></code></code> lub użyj własności <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/selectedPanel">selectedPanel</a></span></code></code> do pobrania zaznaczonego panelu, to znaczy, że zwraca zawartość powiązanego z nim elementu <code><a href="/pl/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code>. +</p> +<h4 id="Zmienianie_zaznaczenia" name="Zmienianie_zaznaczenia"> Zmienianie zaznaczenia </h4> +<p>Wszystkim podobnym własnościom zaznaczenia, które zostały opisane powyżej, mogą również być przydzielone nowe wartości do zmiany zaznaczenia. W następnym przykładzie właściwość <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/selectedIndex">selectedIndex</a></span></code></code> elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code></code> jest zmieniana w oparciu o wartość wprowadzoną w polu tekstowym. Kod ten nie jest niestety niezawodny; na przykład nie sprawdza się, jeśli wprowadzona wartość jest poza zakresem. Będziemy chcieli mieć pewność, że dodany zostanie właściwy sposób sprawdzenia tego błędu. +</p><p><span id="Przyk%C5%82ad_3"><a id="Przyk%C5%82ad_3"></a><strong>Przykład 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_3.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_3.xul">Podgląd</a> +</p> +<pre><script> +function doSelect(){ + var val = document.getElementById('number').value; + val = Number(val); + if (val != null) + document.getElementById('level').selectedIndex = val - 1; +} +</script> + +<hbox align="center"> + <label value="Wprowadź liczbę od 1 do 3:"/> + <textbox id="number"/> + <button label="Zaznacz" oncommand="doSelect();"/> +</hbox> + +<radiogroup id="level"> + <radio label="Wyśmienite"/> + <radio label="Dobre"/> + <radio label="Słabe"/> +</radiogroup> +</pre> +<p>Pudełko listy również obsługuje wielokrotne zaznaczenie oraz funkcje interfejsu <a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIDOMXULMultiSelectControlElement.html">nsIDOMXULMultiSelectControlElement</a>. Interfejs ten posiada kilka sprecyzowanych funkcji obsługujących wielokrotne zaznaczenie. Na przykład własność <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/selectedItems">selectedItems</a></span></code></code> przechowuje listę pozycji, które są zaznaczone, podczas gdy własność <code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/selectedCount">selectedCount</a></span></code> przechowuje liczbę zaznaczonych pozycji. Zazwyczaj te własności będą używane do iteracji przez tą listę i wykonywania jakiś operacji dla każdej pozycji. Bądźmy ostrożni, kiedy iterujemy przez zaznaczone pozycje; jeśli modyfikujemy pozycje w liście podczas trwania iteracji, lista będzie zmieniana i własność zaznaczenia może zwrócić różne wartości. Jest to jeden z powodów dla których jest to użyteczny sposób manipulowania listą poprzez pozycje raczej niż poprzez index. +</p> +<h4 id="Usuwanie_zaznaczonych_pozycji" name="Usuwanie_zaznaczonych_pozycji"> Usuwanie zaznaczonych pozycji </h4> +<p>Poniższy przykład pokazuje metodę właściwego usuwania zaznaczonej pozycji: +</p><p><span id="Przyk%C5%82ad_4"><a id="Przyk%C5%82ad_4"></a><strong>Przykład 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_4.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_4.xul">Podgląd</a> +</p> +<pre><script> +function deleteSelection(){ + var list = document.getElementById('thelist'); + var count = list.selectedCount; + while (count--){ + var item = list.selectedItems[0]; + list.removeItemAt(list.getIndexOfItem(item)); + } +} +</script> + +<button label="Delete" oncommand="deleteSelection();"/> + +<listbox id="thelist" seltype="multiple"> + <listitem label="Cheddar"/> + <listitem label="Cheshire"/> + <listitem label="Edam"/> + <listitem label="Gouda"/> + <listitem label="Havartie"/> +</listbox> +</pre> +<p>Wewnątrz pętli <code>while</code> możemy: +</p> +<ul><li> pobierać selecteItem o indeksie 0. Pierwsza zaznaczona pozycja jest zawsze otrzymywana jako rozmiar tablicy będącej zmniejszonej o usunięte pozycje, +</li><li> usuwać pozycję używając funkcji <code><span id="m-removeItemAt"><code><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Metoda/removeItemAt">removeItemAt()</a></code></span></code>. Od momentu, gdy ta funkcja żąda indeksu. </li><li> konwertować pomiędzy pozycją a indeksem stosując funkcję <code><span id="m-getIndexOfItem"><code><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Metoda/getIndexOfItem">getIndexOfItem()</a></code></span></code>. Jest to także przesyłanie funkcji <code><span id="m-getItemAtIndex"><code><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Metoda/getItemAtIndex">getItemAtIndex()</a></code></span></code> do swojej odwrotności. +</li></ul> +<p>Interfejs <a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIDOMXULMultiSelectControlElement.html">nsIDOMXULMultiSelectControlElement</a> posiada również metody do modyfikacji zaznaczonych pozycji. Dla przykładu funkcja <code><span id="m-addItemToSelection"><code><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Metoda/addItemToSelection">addItemToSelection()</a></code></span></code> dodaje nową pozycję do zbioru zaznaczonych pozycji, bez czyszczenia istniejącego zaznaczenia. Funkcja <code><span id="m-removeItemFromSelection"><code><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Metoda/removeItemFromSelection">removeItemFromSelection()</a></code></span></code> usuwa pojedynczą pozycję z zaznaczonych pozycji. +</p> +<h3 id="Przewijanie_listy" name="Przewijanie_listy"> Przewijanie listy </h3> +<p>Jeśli jest więcej wierszy w elemencie <code><code><a href="/pl/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code></code>, niż może być wyświetlonych, pojawi się pasek przewijania pozwalający użytkownikowi przewinąć listę. Pozycja przewijania może być modyfikowana przy użyciu paru metod pola listy. +</p><p>Metoda <code><span id="m-scrollToIndex"><code><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Metoda/scrollToIndex">scrollToIndex()</a></code></span></code> przewija do danego wiersza. To pole listy będzie przewijane tak, że wiersz, do którego chcemy przewinąć listę, będzie widocznym górnym wierszem, chyba że wiersz jest wierszem tuż przed końcem listy pozycji. Metoda <code><span id="m-ensureIndexIsVisible"><code><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Metoda/ensureIndexIsVisible">ensureIndexIsVisible()</a></code></span></code> jest podobna w tym, że również przewija pokazując wiersz, ale metoda ta nie przewija, jeśli ta pozycja jest aktualnie widoczna. Zatem pierwsza funkcja jest używana do przewijania do określonego wiersza podczas, gdy druga jest używana tylko do upewnienia się, że wiersz jest widoczny. Jest również metoda <code><span id="m-ensureIndexIsVisible"><code><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Metoda/ensureIndexIsVisible">ensureIndexIsVisible()</a></code></span></code>, która pobiera pozycje jako argument zamiast jako index. Rezultat porównania obu funkcji przy różnych pozycjach przewinięcia jest w tym przykładzie: +</p><p><span id="Przyk%C5%82ad_5"><a id="Przyk%C5%82ad_5"></a><strong>Przykład 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_5.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_5.xul">Podgląd</a> +</p> +<pre><button label="scrollToIndex" + oncommand="document.getElementById('thelist').scrollToIndex(4);"/> +<button label="ensureIndexIsVisible" + oncommand="document.getElementById('thelist').ensureIndexIsVisible(4);"/> + +<listbox id="thelist" rows="5"> + <listitem label="1"/> + <listitem label="2"/> + <listitem label="3"/> + <listitem label="4"/> + <listitem label="5"/> + <listitem label="6"/> + <listitem label="7"/> + <listitem label="8"/> + <listitem label="9"/> + <listitem label="10"/> + <listitem label="11"/> + <listitem label="12"/> +</listbox> +</pre> +<p>W następnym artykule przeczytamy o <a href="pl/Kurs_XUL/Obiekty_pude%c5%82ka">obiektach pudełka XUL</a>. +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Modyfikowanie_interfejsu_XUL" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Obiekty_pudełka">Następny »</a></p> +</div> +<p></p><p><br> +</p> +<div class="noinclude"> +</div> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/model_pudełkowy/index.html b/files/pl/mozilla/tech/xul/kurs_xul/model_pudełkowy/index.html new file mode 100644 index 0000000000..85ea419d2b --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/model_pudełkowy/index.html @@ -0,0 +1,126 @@ +--- +title: Model pudełkowy +slug: Mozilla/Tech/XUL/Kurs_XUL/Model_pudełkowy +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/The_Box_Model +--- +<p> +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Dodatkowe_możliwości_przycisku" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Pozycjonowanie_elementów">Następny »</a></p> +</div> +<p></p><p>W tym artykule zobaczymy, jak XUL radzi sobie z zarządzaniem układem strony. +</p> +<h3 id="Wprowadzenie" name="Wprowadzenie"> Wprowadzenie </h3> +<p>Główna forma do zarządzania układem strony w XUL jest nazywana 'Modelem pudełkowym'. Model ten pozwala podzielić okno na kilka pudełek. Elementy wewnątrz pudełka będą zorientowane (<code id="a-orient"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/orient">orient</a></code>) względem siebie poziomo lub pionowo. Łącząc szereg pudełek, pustych przestrzeni i elementów z atrybutami <code><code id="a-flex"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/flex">flex</a></code></code>, pozwala użytkownikowi zarządzać układem okna. +</p><p>Mimo że pudełko jest zasadniczą częścią elementu układu zarządzania w XUL, to kieruje się kilkoma bardzo prostymi regułami. Pudełko możemy ułożyć poza swoimi potomkami w jednej lub dwóch orientacjach, albo poziomej albo pionowej. Linie poziome pudełka ustawiają elementy horyzontalnie oraz pionowe pudełka ustawiają swoje elementy pionowo. Możemy myśleć o pudełku jako o jednym wierszu oraz jednej kolumnie z tabeli w HTML. Rozmaite atrybuty umieszczone jako elementy potomne w dodatku własności stylów CSS kontrolują pozycję i rozmiar elementu potomnego. +</p><p>Prosta składnia pudełka pokazana jest poniżej: +</p> +<pre><hbox> + <!-- elementy poziome --> +</hbox> + +<vbox> + <!-- Elementy pionowe --> +</vbox> +</pre> +<p>Element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></code> jest stosowany do tworzenia pudełka zorientowanego poziomo. Każdy element umieszczony w <code>hbox</code> będzie umieszczony poziomo w wierszu. Element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/vbox" title="vbox">vbox</a></code></code> jest stosowany do tworzenia pudełka zorientowanego pionowo. Dodane elementy będą umieszczone pod każdym innym w kolumnie. +</p><p>Jest także ogólny element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code>, który domyślnie posiada orientację poziomą, co oznacza, że jest on odpowiednikiem <code>hbox</code>. Jednak możemy zastosować atrybut <code><code id="a-orient"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/orient">orient</a></code></code>, aby zmienić orientację pudełka. Możemy ustawić ten atrybut na wartość <code>horizontal</code>, aby utworzyć poziome pudełko, a jeśli ustawimy wartość na <code>vertical</code>, to utworzymy pionowe pudełko. </p><p>Tak więc poniższe dwie linie oznaczają to samo: +</p> +<pre><vbox></vbox> + +<box orient="vertical"></box> +</pre> +<h4 id="Przyk.C5.82ad:_Umieszczenie_przycisk.C3.B3w_w_pionie" name="Przyk.C5.82ad:_Umieszczenie_przycisk.C3.B3w_w_pionie"> Przykład: Umieszczenie przycisków w pionie </h4> +<p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxes_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxes_1.xul">Podgląd</a> +</p> +<div class="float-right"><img alt="Grafika:boxes-ex1.png"></div> +<pre><vbox> + <button id="yes" label="Tak"/> + <button id="no" label="Nie"/> + <button id="maybe" label="Może"/> +</vbox> +</pre> +<p>Trzy przyciski są zorientowane pionowo, tak jak zasygnalizowaliśmy w pudełku. Chcąc zmienić przyciski tak, aby były zorientowane poziomo, będzie potrzebna zmiana elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/vbox" title="vbox">vbox</a></code></code> na element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></code>. +</p><p>Możemy dodać do pudełka tyle elementów, ile tylko będziemy chcieli, włączając w to inne pudełka. W przypadku pudełka poziomego każdy dodatkowy element będzie umieszczony po prawej stronie wcześniejszego elementu. Elementy nie będą zawijane do nowej linii, więc dodanie większej ilości elementów rozszerzy okno. Podobnie każdy element dodany do pionowego pudełka będzie umieszczony pod wcześniejszym elementem. Przykład poniżej pokazuje proste okno logowania: +</p> +<h4 id="Przyk.C5.82ad:_Okienko_logowania" name="Przyk.C5.82ad:_Okienko_logowania"> Przykład: Okienko logowania </h4> +<p><span id="Przyk%C5%82ad_2"><a id="Przyk%C5%82ad_2"></a><strong>Przykład 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxes_2.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxes_2.xul">Podgląd</a> +</p> +<div class="float-right"><img alt="Grafika:boxes-ex2.png"></div> +<pre><vbox> + <hbox> + <label control="login" value="Login:"/> + <textbox id="login"/> + </hbox> + <hbox> + <label control="pass" value="Hasło:"/> + <textbox id="pass"/> + </hbox> + <button id="ok" label="OK"/> + <button id="cancel" label="Anuluj"/> +</vbox> +</pre> +<p><br> +Tutaj cztery elementy są zorientowane pionowo - dwa wewnętrzne znaczniki <code><code><a href="/pl/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></code> i dwa elementy <code><code><a href="/pl/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> - <i>OK</i> i <i>Anuluj</i>. Zwróć uwagę, że tylko elementy potomne są skierowane do pudełka zorientowanego pionowo. Etykiety i pola tekstowe są wewnątrz elementów <code>hbox</code>, więc są zorientowane odpowiednio do tych pudełek, które są poziome. Możemy zobaczyć na obrazku, że każda etykieta i pole tekstowe jest zorientowane poziomo. +</p><p>Jeśli przyjrzysz się uważnie naszemu obrazkowi, zobaczysz, że dwa pola tekstowe nie są wyrównane poziomo, gdzie każdy jest w innym szeregu. Prawdopodobnie byłoby lepiej, jeśli byłyby. W zasadzie potrzebujemy dodać dodatkowe pudełka. +</p> +<h4 id="Przyk.C5.82ad:_Bardziej_zaawansowane_okienko_logowania" name="Przyk.C5.82ad:_Bardziej_zaawansowane_okienko_logowania"> Przykład: Bardziej zaawansowane okienko logowania </h4> +<p><span id="Przyk%C5%82ad_3"><a id="Przyk%C5%82ad_3"></a><strong>Przykład 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxes_3.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxes_3.xul">Podgląd</a> +</p> +<div class="float-right"><img alt="Grafika:boxes-ex3.png"></div> +<pre><vbox> + <hbox> + <vbox> + <label control="login" value="Login:"/> + <label control="pass" value="Hasło:"/> + </vbox> + <vbox> + <textbox id="login"/> + <textbox id="pass"/> + </vbox> + </hbox> + <button id="ok" label="OK"/> + <button id="cancel" label="Anuluj"/> +</vbox> +</pre> +<p>Zwróć uwagę, jak teraz jest wyrównane każde z pól tekstowych. Aby tak zrobić, potrzebujemy dodać pudełko do wewnątrz głównego pudełka. Dwie etykiety i dwa pola tekstowe są umieszczone wewnątrz poziomego pudełka. Następnie, etykiety są umieszczone wewnątrz kolejnego pudełka, tym razem pionowo, tak jak są pola tekstowe. To jest wewnętrzne pudełko, co tworzy elementy zorientowane pionowo. Poziome pudełko jest potrzebne, jeśli chcemy etykiety vbox i kontrolki vbox umieścić poziomo z każdą inną. Jeśli to pudełko zostałoby usunięte, oba pola tekstowe wyświetlane byłyby poniżej obiema etykietami. +</p><p>Problemem jest teraz etykieta 'Hasło', która jest za wysoko. Powinniśmy tutaj, tak naprawdę zastosować element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/grid" title="grid">grid</a></code></code>, aby naprawić ten problem, o którym przeczytasz w <a href="pl/Kurs_XUL/Siatki">następnych rozdziałach</a>. +</p> +<div class="highlight"> +<h5 id="Nasz_przyk.C5.82ad:_Okienko_dialogowe_Znajd.C5.BA_pliki" name="Nasz_przyk.C5.82ad:_Okienko_dialogowe_Znajd.C5.BA_pliki"> Nasz przykład: Okienko dialogowe <tt>Znajdź pliki</tt> </h5> +<p>Dodajmy pudełko do okna dialogowego <tt>Znajdź pliki</tt>. Pudełko pionowe będzie dodane wokół wszystkich elementów, a pudełko poziome będzie dodane wokół pola tekstowego i przycisków. Rezultat widoczny jest na poniższym obrazku. Przyciski wyświetlone zostaną poniżej pola tekstowego. </p> +<pre class="eval"><span class="highlightred"><vbox flex="1"> + + <description> + Wpisz poniżej swoje kryteria szukania i naciśnij przycisk Znajdź, aby rozpocząć + szukanie. + </description> + + <hbox></span> + <label value="Szukaj dla:" control="find-text"/> + <textbox id="find-text"/> + <span class="highlightred"></hbox> + + <hbox> + <spacer flex="1"/></span> + + <button id="find-button" label="Znajdź"/> + <button id="cancel-button" label="Anuluj"/> + <span class="highlightred"></hbox> +</vbox></span> +</pre> +<div class="float-right"><img alt="Grafika:boxes1.png"></div> +<p>Pionowe pudełko sprawi, że główny tekst, pudełko z polem tekstowym i pudełko z przyciskami są zorientowane pionowo. Wewnętrzne pudełka są zorientowane poziomo. Jak widać na obrazku obok, etykiety i kontrolki input są umieszczone jedna przy drugiej. Przestrzeń i dwa przyciski są umieszczone poziomo w swoim pudełku. Zwróć uwagę, jak <code><code><a href="/pl/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code></code> spowoduje, aby przyciski zostały wyświetlone po prawej stronie, ponieważ są elastyczne. +</p><p>Przykład: <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxes.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxes.xul">Podgląd</a> +</p> +</div> +<p>W następnym artykule zobaczymy <a href="pl/Kurs_XUL/Pozycjonowanie_element%c3%b3w">jak ustawiać stałe wymiary dla elementów</a> oraz jak te wymiary zablokować. +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Dodatkowe_możliwości_przycisku" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Pozycjonowanie_elementów">Następny »</a></p> +</div> +<p></p> +<div class="noinclude"> +</div> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/modyfikacja_domyślnego_motywu/index.html b/files/pl/mozilla/tech/xul/kurs_xul/modyfikacja_domyślnego_motywu/index.html new file mode 100644 index 0000000000..ecba9cabdf --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/modyfikacja_domyślnego_motywu/index.html @@ -0,0 +1,69 @@ +--- +title: Modyfikacja domyślnego motywu +slug: Mozilla/Tech/XUL/Kurs_XUL/Modyfikacja_domyślnego_motywu +tags: + - Kurs_XUL + - Projekt_MDC + - Przewodniki + - Strony_do_aktualizacji + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Modifying_the_Default_Skin +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Nadawanie_stylu_drzewa" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Tworzenie_motywów">Następny »</a></p> +</div><p></p> + +<p>Artykuł ten opisuje w jaki sposób zmodyfikować motyw okna.</p> + +<h2 id="Motyw_podstawowy" name="Motyw_podstawowy">Motyw podstawowy</h2> + +<p><a href="pl/Motywy">Motyw</a> jest ustawiona jako styl kaskadowy, obrazek i zachowanie, który jest stosowany w pliku XUL. Stosujemy różne motywy, jeśli chcemy zmienić widok okna bez zmiany funkcjonalności Mozilla dostarcza dwa podstawowe motywy, Klasyczny i Nowoczesny, inne motywy należy pobrać. XUL dla obu motywów jest taki sam, tak jak jednakże, używamy arkuszy stylów i obrazków to dla każdego z osobna.</p> + +<p>Dla prostej personalizacji okna wyglądu Mozilla, wykonaj prostą zmianę arkusza stylów łącząc je. Większa zmiana potrafi wykonać w całości nowy motyw. Okno właściwości Mozilli posiada panel do zmiany motywu.</p> + +<p>Motyw opisujemy używając <a href="pl/CSS">CSS</a>, pozwalając na definiowanie kolorów, obramowania i obrazków użytych do stworzenia elementów. Plik classic.jar i modern.jar stanowią i definiują motywy. Katalog globalny zawierający wewnątrz archiwa głównego stylu definiującego jak wyświetlić urozmaicony element XUL. Zmieniając te pliki, możesz zmienić wygląd aplikacji XUL.</p> + +<h2 id="Dostosujmy_userChrome.css" name="Dostosujmy_userChrome.css">Dostosujmy userChrome.css</h2> + +<p>Jeśli położysz plik nazywający się 'userChrome.css' w katalogu o nazwie 'chrome' będący wewnątrz katalogu profilu użytkownika, możesz nadużywać ustawień bez zmieniany własnych archiwum. Katalog powinien zostać utworzony w momencie tworzenia przez Ciebie profilu i umieszczeniu w nim przykładu. Plik 'userContent.css' został dostosowany do stron internetowych, podczas gdy 'userChrome.css' zostanie dostosowany do pliku chrome.</p> + +<p>Na przykład, dodawanie pozwolenia na końcu pliku, możesz zmienić wszystkie elementy <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code></code> posiadające czerwone tło.</p> + +<pre>menubar { + background-color: red; +} +</pre> + +<p>Jeśli otworzysz jakieś okno Mozilli po modyfikacji, to menu bars będzie czerwone. Ponieważ te zmiany zrobione zostały dla użytkownika arkusza stylów, to afekty dla wszystkich okien. Znaczy to tyle, że pasek narzędzi przeglądarki, pasek narzędzi zakładek i nawet pasek menu Znajdź pliki będzie czerwony.</p> + +<p>Mając zmienione afekty tylko jednego okna, zmień arkusz stylów łacząc z plikiem XUL. Na przykład, dodanie czerwonego obramowania box wokół komend oknie adresu, dodając następny plik addressbook.css do archiwów modern.jar lub classic.jar.</p> + +<pre>menuitem { + border: 1px solid red; +} +</pre> + +<p>Jeśli spojrzymy w jeden motyw w archiwum, zwróć uwagę, że każda posiada numer arkusza stylu i numer obrazka. Arkusze stylów odnoszą się do obrazków. Powinieneś unikać położenia odnośników do obrazków bezpośrednio w plikach XUL, jeśli chcesz aby twoja zawartość miała zdolności motywu. Jest tak, ponieważ szczególne projekty motywów mogą nie używać obrazków i będą potrzebowały więcej na kompleksowy projekt. Kierując do obrazków z pliku CSS, są one w prosty sposób usuwane. Także usuwane są uzależnienia ze specyficznych nazw plików obrazka.</p> + +<p><span class="comment">If you look in one of the skin archives, you will notice that each contain a number of style sheets and a number of images. The style sheets refer to the images. You should avoid putting references to images directly in XUL files if you want your content to be skinnable. This is because a particular skin's design might not use images and it may need some more complex design. By referring to the images with CSS, they are easy to remove. It also removes the reliance on specific image filenames.</span></p> + +<p>Możesz przydzielać obrazki do przycisków, pól wyboru i innych elementów używając własności <code>list-style-image</code> jak następujące:</p> + +<pre>checkbox { + list-style-image: url("chrome://findfile/skin/images/check-off.jpg"); +} + +checkbox[checked="true"] { + list-style-image: url("chrome://findfile/skin/images/check-on.jpg"); +} +</pre> + +<p>Kod ten zmienia obrazki łącząc je z polami wyboru. Pierwszy styl ustawia obrazki dla normalnych pól wyboru, a drugi arkusz stylów ustawia obrazek na zaznaczone pole wyboru. Modyfikator 'checked=true' tworzy styl mający zastosowanie tylko do elementów, które mają ustawiony swój atrybut checked na <code>true</code>.</p> + +<p><small><span id="Zobacz_tak%C5%BCe"><a id="Zobacz_tak%C5%BCe"></a><strong>Zobacz także</strong></span> : <a href="pl/Tworzenie_sk%c3%b3rek_dla_Firefoksa">Tworzenie skórek dla Firefoksa</a> i <a href="pl/CSS/Na_pocz%c4%85tek">CSS getting started</a> </small></p> + +<p>W następnym artykule, zobaczymy <a href="pl/Kurs_XUL/Tworzenie_motyw%c3%b3w">jak stworzyć nowy motywy</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Nadawanie_stylu_drzewa" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Tworzenie_motywów">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/modyfikowanie_interfejsu_xul/index.html b/files/pl/mozilla/tech/xul/kurs_xul/modyfikowanie_interfejsu_xul/index.html new file mode 100644 index 0000000000..de4b72ee27 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/modyfikowanie_interfejsu_xul/index.html @@ -0,0 +1,170 @@ +--- +title: Modyfikowanie interfejsu XUL +slug: Mozilla/Tech/XUL/Kurs_XUL/Modyfikowanie_interfejsu_XUL +tags: + - DOM + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Modifying_a_XUL_Interface +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL/Obiektowy_model_dokumentu" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL/Manipulowanie_listami">Następny »</a></p> +</div><p></p> + +<p>DOM dostarcza wielu funkcji umożliwiających modyfikowanie dokumentu.</p> + +<h2 id="Tworzenie_nowych_element.C3.B3w" name="Tworzenie_nowych_element.C3.B3w">Tworzenie nowych elementów</h2> + +<p>Nowy element można utworzyć funkcją dokumentu <code><a href="/pl/DOM/document.createElement" title="pl/DOM/document.createElement">createElement()</a></code>. Pobiera ona jeden argument - nazwę nowego znacznika. Następnie przy pomocy funkcji <code><a href="/pl/DOM/element.setAttribute" title="pl/DOM/element.setAttribute">setAttribute()</a></code> można ustawić atrybuty elementu, a funkcją <code><a href="/pl/DOM/element.appendChild" title="pl/DOM/element.appendChild">appendChild()</a></code> dołączyć go do dokumentu XUL. Poniższy kod doda przycisk do okna XUL:</p> + +<p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_1.xul">Podgląd</a></p> + +<pre><script> +function addButton(){ + var aBox = document.getElementById("aBox"); + var button = document.createElement("button"); + button.setAttribute("label","Nowy przycisk"); + aBox.appendChild(button); +} +</script> + +<box id="aBox" width="200"> + <button label="Dodaj" oncommand="addButton();"/> +</box> +</pre> + +<ul> + <li>Skrypt ten najpierw pobiera referencję do pola z <code><a href="/pl/DOM/document.getElementById" title="pl/DOM/document.getElementById">getElementById()</a></code>, które jest kontenerem na nowy przycisk.</li> + <li>Funkcja <code><a href="/pl/DOM/document.createElement" title="pl/DOM/document.createElement">createElement()</a></code> tworzy nowy przycisk.</li> + <li>Przydzielamy etykietę <code>Nowy przycisk</code> do przycisku stosując funkcję <code><a href="/pl/DOM/element.setAttribute" title="pl/DOM/element.setAttribute">setAttribute()</a></code>.</li> + <li>Funkcja <code><a href="/pl/DOM/element.appendChild" title="pl/DOM/element.appendChild">appendChild()</a></code> pudełka jest wywołana by dodać przycisk do siebie.</li> +</ul> + +<p>Funkcja <code><a href="/pl/DOM/document.createElement" title="pl/DOM/document.createElement">createElement()</a></code> tworzy domyślny typ elementu dla dokumentu. W przypadku dokumentów XUL znaczy to, że będą tworzone elementy języka XUL. Dla dokumentów HTML - tworzone będą elementy HTML, więc będą miały cechy i funkcje elementów HTML. Funkcja <code><a href="/pl/DOM/document.createElementNS" title="pl/DOM/document.createElementNS">createElementNS()</a></code> może zostać zastosowana by tworzyć elementy w innej przestrzeni nazw.</p> + +<p>Funkcja <code><a href="/pl/DOM/element.appendChild" title="pl/DOM/element.appendChild">appendChild()</a></code> jest stosowana by dodać element potomny kolejnego elementu. Trzema podobnymi funkcjami są funkcje <code><a href="/pl/DOM/element.insertBefore" title="pl/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="/pl/DOM/element.replaceChild" title="pl/DOM/element.replaceChild">replaceChild()</a></code> i <code><a href="/pl/DOM/element.removeChild" title="pl/DOM/element.removeChild">removeChild</a></code>. Składnia tych funkcji jest następująca:</p> + +<pre>parent.appendChild(child); +parent.insertBefore(child, referenceChild); +parent.replaceChild(newChild, oldChild); +parent.removeChild(child); +</pre> + +<p><span class="comment">Poniższe funkcje pozwalają na operacje na węzłach potomnych: * appendChild(child) - dodaje element ''child'' jako węzeł potomny do innego elementu. * insertBefore(child, referenceChild) - wstawia element ''child'' przed elementem ''referenceChild''. * replaceChild(newChild, oldChild) - na miejsce elementu ''oldChild'' wstawia element ''newChild''. * removeChild(child) - usuwa element ''child''.</span></p> + +<p>Powinno to być dość proste bo z nazw funkcji wiadomo co one robią.</p> + +<ul> + <li>Funkcja <code><a href="/pl/DOM/element.insertBefore" title="pl/DOM/element.insertBefore">insertBefore()</a></code> stawia nowy element potomny przed jeden z istniejących elementów. Jest to stosowane do wstawiania do środka ustawienia dziecka zamiast na końcu, jak to robi <code><a href="/pl/DOM/element.appendChild" title="pl/DOM/element.appendChild">appendChild()</a></code>.</li> + <li>Funkcja <code><a href="/pl/DOM/element.replaceChild" title="pl/DOM/element.replaceChild">replaceChild()</a></code> usuwa istniejącego potomka i dodaje nowego w jego miejsce i na tą samą pozycję.</li> + <li>Ostatecznie funkcja <code><a href="/pl/DOM/element.removeChild" title="pl/DOM/element.removeChild">removeChild()</a></code> usuwa węzeł.</li> +</ul> + +<p><span class="comment">* Funkcja <code><a href="/pl/DOM/element.insertBefore" title="pl/DOM/element.insertBefore">insertBefore()</a></code> wstawia nowy element potomny przed element ''referenceChild''; w celu dodania elementu pod koniec zestawu należy użyć funkcji <code><a href="/pl/DOM/element.appendChild" title="pl/DOM/element.appendChild">appendChild()</a></code>. * Funkcja <code><a href="/pl/DOM/element.replaceChild" title="pl/DOM/element.replaceChild">replaceChild()</a></code> usuwa istniejący element ''oldChild'', a następnie na jego miejsce wstawia nowy ''newChild''. * Funkcja <code><a href="/pl/DOM/element.removeChild" title="pl/DOM/element.removeChild">removeChild()</a></code> usuwa element. Dla powyższych funkcji element, do którego się odwołujemy powinien istnieć, w przeciwnym wypadku powstanie błąd.</span> Note that for all these functions, the reference child or child to remove must already exist or an error occurs.</p> + +<p>Częstym przypadkiem jest potrzeba usunięcia elementu, a następnie dodania go w innym miejscu. W tym przypadku wystarczy dodać element bez jego usuwania. Ponieważ węzeł może być tylko w jednym miejscu, użycie funkcji wstawiającej zawsze najpierw usunie węzeł z poprzedniej pozycji, dlatego jest to wygodny sposób na przemieszczanie węzłów w dokumencie.</p> + +<h3 id="Kopiowanie_w.C4.99z.C5.82.C3.B3w" name="Kopiowanie_w.C4.99z.C5.82.C3.B3w">Kopiowanie węzłów</h3> + +<p>Aby kopiować węzły, możemy wywołać funkcję <code><a href="/pl/DOM/element.cloneNode" title="pl/DOM/element.cloneNode">cloneNode()</a></code>. Funkcja ta zrobi kopię istniejącego węzła, tak więc można go dodać gdziekolwiek indziej. Oryginalny węzeł zostanie w miejscu gdzie się znajduje. Pobiera jeden argument logiczny, który sygnalizuje czy skopiowane mają być wszystkie dzieci węzła/węzłów czy nie. Jeśli argument jest fałszywy to tylko węzeł jest kopiowany, tak że kopia nie zawiera jakichkolwiek dzieci. Jeśli argument jest prawdziwy, to wszystkie dzieci zostaną skopiowane. Dzieje się to rekurencyjnie, więc dla struktury dużego drzewa upewnij się wcześniej, czy na pewno chcemy zaznaczyć atrybut <code>true</code> dla funkcji <code><a href="/pl/DOM/element.cloneNode" title="pl/DOM/element.cloneNode">cloneNode()</a></code>. Przykład znajduje się poniżej:</p> + +<p><span id="Przyk%C5%82ad_2"><a id="Przyk%C5%82ad_2"></a><strong>Przykład 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_2.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_2.xul">Podgląd</a></p> + +<pre><hbox height="400"> + <button label="Kopiuj" + oncommand="this.parentNode.appendChild(this.nextSibling.cloneNode(true));"/> + + <vbox> + <button label="Pierwszy"/> + <button label="Drugi"/> + </vbox> +</hbox> +</pre> + +<p><span class="comment">Po naciśnięciu przycisku <tt>Kopiuj</tt>, pobierany zostaje następny węzeł rodzeństwa (w naszym przykładzie jest to element ''vbox''). Funkcją cloneNode tworzona jest kopia tego elementu, która następnie dodana zostaje do rodzica.</span></p> + +<p>Kiedy przycisk <code>Kopiuj</code> jest naciśnięty...</p> + +<ul> + <li>odbierzemy <code><a href="/pl/DOM/element.nextSibling" title="pl/DOM/element.nextSibling">nextSibling</a></code> z <code><code><a href="/pl/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code>, które będzie elementem <code><code><a href="/pl/docs/Mozilla/Tech/XUL/vbox" title="vbox">vbox</a></code></code>.</li> + <li>kopia tego elementu jest robiona przy użyciu funkcji <code><a href="/pl/DOM/element.cloneNode" title="pl/DOM/element.cloneNode">cloneNode()</a></code></li> + <li>i kopia jest dołączona stosując <code><a href="/pl/DOM/element.appendChild" title="pl/DOM/element.appendChild">appendChild()</a></code>.</li> +</ul> + +<p>Zauważyć można, że niektóre elementy, takie jak <code><code><a href="/pl/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code></code> i <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code> posiadają specjalne funkcje modyfikujące, których powinno się użyć w miarę możliwości. Są one opisane w <a href="/pl/Kurs_XUL/Manipulowanie_listami" title="pl/Kurs_XUL/Manipulowanie_listami">następnym artykule</a>.</p> + +<h3 id="Manipulowanie_podstawowymi_elementami" name="Manipulowanie_podstawowymi_elementami">Manipulowanie podstawowymi elementami</h3> + +<p>Podstawowe elementy XUL, takie jak przyciski, pola wyboru czy przyciski opcji mogą być modyfikowane przy pomocy skryptowych własności. Ponieważ elementy posiadają różne własności, należy sprawdzić w <a href="/pl/Dokumentacja_XUL" title="pl/Dokumentacja_XUL">dokumentacji elementów</a> każdy z nich. Wspólne własności to <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/label">label</a></span></code></code>, <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/value">value</a></span></code></code>, <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/checked">checked</a></span></code></code> i <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/disabled">disabled</a></span></code></code>. Jeśli zachodzi taka potrzeba, ustawiają one lub czyszczą odpowiadające im atrybuty.</p> + +<p><span class="comment">Główne elementy XUL takie jak przyciski, pola wyboru i przyciski opcji mogą być modyfikowane przy pomocy skryptowych własności. be manipulated using a number of script properties. The properties available are listed in the <a href="/pl/Dokumentacja_XUL" title="pl/Dokumentacja_XUL">dokumentacji elementów</a> as those available are different for each element. Common properties that you will manipulate include the <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/label">label</a></span></code></code>, <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/value">value</a></span></code></code>, <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/checked">checked</a></span></code></code> and <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/disabled">disabled</a></span></code></code> properties. They set or clear the corresponding attribute as necessary.</span></p> + +<h4 id="Przyk.C5.82ady_w.C5.82asno.C5.9Bci_etykiety_i_warto.C5.9Bci" name="Przyk.C5.82ady_w.C5.82asno.C5.9Bci_etykiety_i_warto.C5.9Bci">Przykłady własności etykiety i wartości</h4> + +<p>Poniżej znajduje się prosty przykład zmieniający etykietę przycisku:</p> + +<p><span id="Przyk%C5%82ad_3"><a id="Przyk%C5%82ad_3"></a><strong>Przykład 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_3.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_3.xul">Podgląd</a></p> + +<pre><button label="Hello" oncommand="this.label = 'Goodbye';"/> +</pre> + +<p>Po naciśnięciu przycisku, element <code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/label">label</a></span></code> zostaje zmieniony. Ten sam efekt można uzyskać dla różnych elementów posiadających etykietę. Polu tekstowemu można zmienić <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/value">value</a></span></code></code>:</p> + +<p><span id="Przyk%C5%82ad_4"><a id="Przyk%C5%82ad_4"></a><strong>Przykład 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_4.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_4.xul">Podgląd</a></p> + +<pre><button label="Add" oncommand="this.nextSibling.value += '1';"/> +<textbox/> +</pre> + +<p>Ten przykład dodaje '1' do pola tekstowego za każdym razem, kiedy przycisk zostanie naciśnięty. Właściwość <code><a href="/pl/DOM/element.nextSibling" title="pl/DOM/element.nextSibling">nextSibling</a></code> przemieszcza się z aktualnego elementu (przycisku) na następny (pole tekstowe). Operator += dodaje znaki do zawartości pola tekstowego, w naszym wypadku jest to zawsze '1'. Oczywiście użytkownik może również edytować pole tekstowe. Istnieje również możliwość pobrania etykiety lub wartości elementu, jak w następującym przykładzie:</p> + +<p><span id="Przyk%C5%82ad_5"><a id="Przyk%C5%82ad_5"></a><strong>Przykład 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_5.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_5.xul">Podgląd</a></p> + +<pre><button label="Hello" oncommand="alert(this.label);"/> +</pre> + +<h4 id="Przerzutnik_przycisku_wyboru" name="Przerzutnik_przycisku_wyboru">Przerzutnik przycisku wyboru</h4> + +<p>Element typu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/checkbox" title="checkbox">checkbox</a></code></code> ma własność <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/checked">checked</a></span></code></code>, przy pomocy, której można zaznaczać lub odznaczać dany element. W poniższym przykładzie stan pola wyboru jest zmieniany po każdym użyciu przycisku. Zauważ, że własność <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/label">label</a></span></code></code> i <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/value">value</a></span></code></code>, są typu string (łańcuch znaków), podczas gdy własność <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/checked">checked</a></span></code></code> to typ booleanowski, który może być ustawiony jako <code>true</code> lub <code>false</code>:</p> + +<p><span id="Przyk%C5%82ad_6"><a id="Przyk%C5%82ad_6"></a><strong>Przykład 6</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_6.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_6.xul">Podgląd</a></p> + +<pre><button label="Zmień" oncommand="this.nextSibling.checked = !this.nextSibling.checked;"/> +<checkbox label="Check for messages"/> +</pre> + +<p><span class="comment">'''Radio buttons may be selected as well using properties, however since only one in a group may be selected at a time, the others must all be unchecked when one is checked. You don't have to do this manually of course. The radiogroup's <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/selectedIndex">selectedIndex</a></span></code></code> property may be used to do this. The <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/selectedIndex">selectedIndex</a></span></code></code> property may be used to retrieve the ''index'' of the selected radio button in the group and well as change it.'''</span></p> + +<p>Przyciski opcji mogą zostać zaznaczone przy pomocy własności, ale ponieważ nie może być zaznaczony więcej niż jeden z grupy, pozostałe w tym czasie muszą być odznaczone. Oczywiście nie trzeba tego robić ręcznie, można w tym celu użyć własności <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/selectedIndex">selectedIndex</a></span></code></code> elementu przycisku opcji. Ta sama własność może również pobrać numer aktualnie zaznaczonego elementu przycisku opcji.</p> + +<h4 id="Changing_a_element_disabled_or_enabled" name="Changing_a_element_disabled_or_enabled">Changing a element disabled or enabled</h4> + +<p>Często elementy, które nie powinny być dostępne dla użytkownika w danej chwili, są blokowane. Na przykład w oknie dialogowym użytkownik może mieć do wyboru kilka możliwości, a jedna z nich wprowadza dodatkowe opcje. Poniżej przykład:</p> + +<p><span id="Przyk%C5%82ad_7"><a id="Przyk%C5%82ad_7"></a><strong>Przykład 7</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_7.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_7.xul">Podgląd</a></p> + +<pre><script> +function updateState(){ + var name = document.getElementById("name"); + var sindex = document.getElementById("group").selectedIndex; + name.disabled = sindex == 0; +} +</script> + +<radiogroup id="group" onselect="updateState();"> + <radio label="Random name" selected="true"/> + <hbox> + <radio label="Specify a name:"/> + <textbox id="name" value="Jim" disabled="true"/> + </hbox> +</radiogroup> +</pre> + +<p>W tym przykładzie funkcja updateState() jest wywołana, kiedy zdarzenie select zostanie uruchomione w grupie elementów <code><code><a href="/pl/docs/Mozilla/Tech/XUL/radio" title="radio">radio</a></code></code>. Ma to miejsce kiedy przycisk opcji zostanie zaznaczony. Funkcja ta, przy pomocy własności <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/selectedIndex">selectedIndex</a></span></code></code>, pobiera indeks aktualnie zaznaczonego elementu. Zauważ, iż mimo że jeden z elementów <code><code><a href="/pl/docs/Mozilla/Tech/XUL/radio" title="radio">radio</a></code></code> jest wewnątrz pola <code><code><a href="/pl/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></code>, dalej stanowi część grupy <em>radiogroup</em>. Jeśli pierwszy element jest zaznaczony (indeks równy 0), pole tekstowe zostaje zablokowane. Jeśli drugi element - można edytować pole tekstowe.</p> + +<p>Następny artykuł dostarczy nam więcej szczegółowych informacji o <a href="/pl/Kurs_XUL/Manipulowanie_listami" title="pl/Kurs_XUL/Manipulowanie_listami">manipulacji grupami przycisków opcji tak samo jak manipulacji listami</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL/Obiektowy_model_dokumentu" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL/Manipulowanie_listami">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/możliwości_okna/index.html b/files/pl/mozilla/tech/xul/kurs_xul/możliwości_okna/index.html new file mode 100644 index 0000000000..19fff23e21 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/możliwości_okna/index.html @@ -0,0 +1,74 @@ +--- +title: Możliwości okna +slug: Mozilla/Tech/XUL/Kurs_XUL/Możliwości_okna +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Features_of_a_Window +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Przykład_XBL" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Tworzenie_okien_dialogowych">Następny »</a></p> +</div><p></p> + +<p>Do tej pory zobaczyliśmy niektóre możliwości okien. W tym artykule przyjrzymy się jeszcze innym.</p> + +<h2 id="Tworzenie_kolejnego_okna" name="Tworzenie_kolejnego_okna">Tworzenie kolejnego okna</h2> + +<p>Możesz stworzyć drugie okno swojej aplikacji w ten sam sposób, w jaki tworzyłeś pierwsze. Po prostu stwórz drugi plik XUL z kodem okna. Tak jak w języku HTML możesz użyć funkcji <code><a href="/pl/DOM/window.open" title="pl/DOM/window.open">window.open()</a></code> do otwarcia drugiego okna. Ta funkcja zwróci odnośnik do nowo otwartego okna. Możesz używać tego odnośnika, aby wywoływać funkcje w drugim oknie.</p> + +<p>Funkcja otwarcia wymaga trzech argumentów. Pierwszy to adres URL pliku, który chcesz otworzyć. Kolejny to wewnętrzna nazwa okna. Ostatni to lista wyświetlanych flag. Flaga "chrome" jest ważna, gdy chcemy otworzyć okno jako plik chrome. Jeśli nie dodasz flagi <a href="/pl/DOM/window.open#Toolbar_and_chrome_features" title="pl/DOM/window.open#Toolbar_and_chrome_features">chrome</a>, to plik otworzy się jako zawartość okna przeglądarki.</p> + +<p>Przykład:</p> + +<pre>var myWin = window.open("chrome://findfile/content/findfile.xul","findfile","chrome"); +</pre> + +<h2 id="Okre.C5.9Blenie_szeroko.C5.9Bci_i_wysoko.C5.9Bci" name="Okre.C5.9Blenie_szeroko.C5.9Bci_i_wysoko.C5.9Bci">Określenie szerokości i wysokości</h2> + +<p>Powinieneś zauważyć, że kiedy tylko elementy zostały dodane do okna, to jego szerokość zmienia się tak, żeby zmieścić wszystkie elementy. Okno to naprawdę pudełko o ruchomych ściankach i nastawione domyślnie na orientację pionową. Możesz także podać dokładne wymiary bezpośrednio w znaczniku <code><code><a href="/pl/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code>. To oczywiście sprawi, że okno zostanie wyświetlone w tym właśnie rozmiarze. Jeśli jednak nie zdefiniujesz rozmiarów, wielkość okna będzie zdeterminowana przez jego wewnętrzne elementy.</p> + +<pre><window + id="findfile-window" + title="Znajdź pliki" + width="400" + height="450" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> +</pre> + +<p>W tym przykładzie okno będzie miało 400 pikseli szerokości i 450 pikseli wysokości. Nawet, jeśli nie ma w nim wystarczająco dużo elementów, żeby wypełnić całą przestrzeń, okno nadal będzie miało takie wymiary i puste pole będzie widniało tam, gdzie brakuje elementów. Jeśli byłoby zbyt dużo elementów, okno będzie za małe, żeby pomieścić wszystkie elementy. Użytkownik będzie musiał zmienić rozmiar okna. Trzeba być uważnym, gdy definiuje się szerokość i wysokość, tak żeby okno nie było za małe albo za duże.</p> + +<p>Zauważ, że musisz podać zarówno szerokość i wysokość. Jeśli zdefiniujesz tylko jeden wymiar, drugi będzie automatycznie ustawiony na zerową wartość. Aby okno samo się dopasowywało do elementów, pozostaw obydwa wymiary niezdefiniowane.</p> + +<p>Wysokość i szerokość określają tylko początkową wielkość okna. Użytkownik może nadal zmieniać jego wymiary, jeśli oczywiście mu na to pozwolimy.</p> + +<h2 id="Inne_mo.C5.BCliwo.C5.9Bci_okna" name="Inne_mo.C5.BCliwo.C5.9Bci_okna">Inne możliwości okna</h2> + +<p>Poniższe flagi mogą być wpisywane w miejsce trzeciego argumentu funkcji window.open. Twój system operacyjny nie musi jednak wszystkich obsługiwać. Możesz także używać jakiejkolwiek z wcześniej zdefiniowanych flag, które można znaleźć w odnośnikach JavaScript. Możesz wyłączyć cechę przez przestawienie ją na "no", np. 'dialog=no'.</p> + +<dl> + <dt>alwaysLowered </dt> + <dd>Okno będzie zawsze pojawiało się za pozostałymi otwartymi oknami.</dd> + <dt>alwaysRaised </dt> + <dd>Okno będzie zawsze pojawiało się ponad pozostałymi otwartymi oknami.</dd> + <dt>centerscreen </dt> + <dd>Okno będzie zawsze pojawiało się w centrum ekranu.</dd> + <dt>dependent </dt> + <dd>Okno będzie zawsze połączone z oknem, z którego zostało otwarte. Jeśli ruszymy oknem pierwotnym, to nowo otwarte też się odpowiednio przesunie.</dd> + <dt>dialog </dt> + <dd>Okno dialogowe.</dd> + <dt>modal </dt> + <dd>Okno dialogowe jest modalne. Okno, z którego zostało otwarte okno modalne (dialogowe), nie może odpowiadać dopóki nie zostanie zamknięte pochodne okno dialogowe.</dd> + <dt>resizable </dt> + <dd>Użytkownik może zmieniać wymiary okna.</dd> +</dl> + +<p><small>Zobacz także dokumentację <a href="/pl/DOM/window.open" title="pl/DOM/window.open">DOM window.open()</a></small></p> + +<p><span class="comment">'''"Odrobaczanie" (debugging) okna''' Kolejną przydatną cechą jest umożliwienie trybu debug dla danego okna. Aby tego dokonać dodaj atrybut ''debug'' do okna i ustaw go na <code>true</code>. To sprawi, że okno będzie wyświetlało obramowania i puste pola, więc będziesz wiedział co się dzieje. Poniższy przykład ilustruje sposób użycia tej metody: <window id="findfile-window" title="Znajdź pliki" debug="true" xmlns:html="<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>" xmlns="<a class="external" href="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" rel="freelink">http://www.mozilla.org/keymaster/gat...re.is.only.xul</a>"> Poniższy rysunek przedstawia efekt takiej komendy na przykładzie prostego okna: Grafika: XUL_rys_1.jpg *Niebieskie ramki oznaczają poziome okienka. *Czerwone ramki oznaczają pionowe okienka. Można zobaczyć, że całe okno jest również pionowym oknem. *Zygzaki pokazują elementy dopasowujące się. W tym przypadku pole puste jest rozciągliwe, więc nad nim widoczny jest zygzak. *Linie pokazują miejsca, gdzie znajdują się elementy nierozciągliwe. Na tym przykładowym rysunku są to: tekst, pole do wypełniania i przyciski. *Białe kwadraty oznaczają krawędzie elementu. Na obrazku można zauważyć kilka dodatkowych pól. Dzieje się tak, ponieważ każdy element XUL sam składa się z kilku pól, zdefiniowanych przez XBL. Zwyczajowo można je pominąć. Można zdefiniować atrybut ''debug'' dla każdego pola, a nie tylko okna.</span></p> + +<p>W następnym artykule zajmiemy się <a href="/pl/Kurs_XUL/Tworzenie_okien_dialogowych" title="pl/Kurs_XUL/Tworzenie_okien_dialogowych">otwieraniem podrzędnych okien dialogowych</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Przykład_XBL" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Tworzenie_okien_dialogowych">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/nadawanie_stylu_drzewa/index.html b/files/pl/mozilla/tech/xul/kurs_xul/nadawanie_stylu_drzewa/index.html new file mode 100644 index 0000000000..81ce9a8d06 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/nadawanie_stylu_drzewa/index.html @@ -0,0 +1,156 @@ +--- +title: Nadawanie stylu drzewa +slug: Mozilla/Tech/XUL/Kurs_XUL/Nadawanie_stylu_drzewa +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Styling_a_Tree +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Dodawanie_arkuszy_stylów" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Modyfikacja_domyślnego_motywu">Następny »</a></p> +</div> Opis jak stosujemy style w drzewach.<p></p> + +<h2 id="Nadawanie_stylu_drzewa" name="Nadawanie_stylu_drzewa">Nadawanie stylu drzewa</h2> + +<p>Możesz nadać style obramowaniu drzewa i nagłówkom kolumn, robiąc to w identyczny sposób jako osobne elementy. Dodanie stylu do elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code></code> będzie zastosowany w encji drzewa. Dodanie stylu do elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code></code> nie spowoduje, że styl znajdzie zastosowanie do kolumny, a tylko do nagłówka.</p> + +<p>Ciało drzewa musi być stylowane trochę w inny sposób, jak inne elementy. Zewnętrzny <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></code> jest tylko prawdziwym elementem w ciele drzewa. Wewnętrzny elementy są tylko do rezerwacji miejsca.</p> + +<h3 id="Ustawianie_w.C5.82asno.C5.9Bci" name="Ustawianie_w.C5.82asno.C5.9Bci">Ustawianie własności</h3> + +<p>Zamiast tego, musisz użyć <code><code id="a-properties"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/properties">properties</a></code></code> atrybutu wierszy i komórek, aby ustawić jedną lub więcej nazw właściwości. Możemy tego używać z drzewami z wartościami statycznymi, RDF buduje zawartość w podany sposób wraz z widokiem. Powiedzmy, że chcemy uzyskać szczególny pasek(wiersz(?)) o niebieskim kolorze tła. Zostało to zaimplementowane we właściwościach etykiety Mozilla Mail's. Będziemy używać własności nazwanej 'makeItBlue'. Możesz jej użyć zawsze, gdy potrzebujesz nazwy. Możesz ustawić wielokrotne własności oddzielając je za pomocą spacji.</p> + +<p>Ustaw własność wiersza lub komórki tabeli, jak jest to pokazane w poniższym przykładzie:</p> + +<pre><treerow properties="makeItBlue"> +</pre> + +<h3 id="Selektory_CSS_dla_drzewa" name="Selektory_CSS_dla_drzewa">Selektory CSS dla drzewa</h3> + +<p>Arkusze stylów potrafią pobierać tą własność i używać do zmiany wyglądu wiersza dla nieczytelnej wiadomości e-mail lub etykiety. Wymyśl właściwości jako funkcjonujące bardziej, niż klasa stylu, chociaż odpowiada ona czemuś więcej, kompleksowa składnia do użycia w pliku arkusza stylów. Jest tak ponieważ możesz wyszczególnić style dla pewnych części lub indywidualnych komórek. Nie możesz używać stylów dla tekstu, jeśli są one komórkami, ale złożone z wcięciem. Następujący przykład jest składnia, która musi być użyta:</p> + +<pre>treechildren::-moz-tree-row(makeItBlue) +{ + background-color: blue; +} +</pre> + +<p>Ten dodatkowy pseudostyl jest użyty do stylowania kolorem tła dla wiersza, który ma własność 'makeItBlue'. Ta specjalna składnia jest potrzebna ponieważ komórki nie potrafią rozdzielić elementów. Cała zawartość wewnątrz ciała drzewa, jest interpretowane przez element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></code> (uwaga <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></code> się staje sformatowany stylami w zasadzie poniżej.) Pseudostyl ustawia zasady stylów dla określonych części, co ma zostać wyświetlone. Ta zasada stylów znaczy, że wewnątrz element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></code>, ustawia kolor tła na niebieski dla wszystkich wierszy drzewa mających własność 'makeItBlue'.</p> + +<p>Tekst '<code>::-moz-tree-row</code>' określa zawartość obszaru jaki jest potrzebny, który w tym przypadku jest wierszem. Możesz także użyć następujących wartości:</p> + +<ul> + <li><code>::-moz-tree-cell:</code> Komórka. Użyj do określenia obramowania i koloru tła.</li> + <li><code>::-moz-tree-cell-text:</code> Tekst w komórce. Użyj do ustawienia czcionki i koloru tekstu.</li> + <li><code>::-moz-tree-twisty:</code> Pojawienie się zwoju uzyskamy rozszerzenie lub upadek potomka wiersza.</li> + <li><code>::-moz-tree-image:</code> Obrazek w komórce. Możesz ustawić obrazek z własnościami <code><a href="pl/CSS/list-style-image">list-style-image</a></code>.</li> + <li><code>::-moz-tree-row:</code> Wiersz. Użyj go aby ustawić kolor tła wiersza.</li> + <li><code>::-moz-tree-indentation<b>:</b></code> Wcięcie do lewej strony wierszy są potomkami reszty wierszy.</li> + <li><code>::-moz-tree-column<b>:</b></code> Kolumna.</li> + <li><code>::-moz-tree-line:</code> Linie są rysowane z połączenie potomka-dziecka wiersza do wiersza potomka-rodzica.</li> + <li><code>::-moz-tree-separator:</code> Separator w drzewie.</li> + <li><code>::-moz-tree-progressmeter:</code> Wartość metra postępu komórek. Możesz utworzyć metr postępu poprzez ustawienia atrybutu <code>type</code> w kolumnie <code>progressmeter</code>.</li> + <li><code>::-moz-tree-drop-feedback:</code> Sprzężenie zwrotne 'chwyć i upuść'.</li> +</ul> + +<p>Sprawdź użycie kilku własności oddzielając je przecinkiem. Przykład poniżej ustawia kolor tła na szary dla wierszy, które posiadają określoną właściwość 'readonly' i 'unread'. Dla własności, które są 'readonly' (tylko do odczytu), zostanie dodana czerwona linia obramowania wokoło wiersza. Ważna jest, kolejność określania zasad i ich zapisanie jako jakiś wiersz, który posiada atrybut 'readonly' ustawiony bez względu na to czy są inne własności takie jak 'unread'.</p> + +<pre>treechildren::-moz-tree-row(readonly) +{ + border: 1px solid red; +} + +treechildren::-moz-tree-row(readonly, unread) +{ + background-color: rgb(80%, 80%, 80%); +} +</pre> + +<h3 id="Domy.C5.9Blne_w.C5.82asno.C5.9Bci" name="Domy.C5.9Blne_w.C5.82asno.C5.9Bci">Domyślne własności</h3> + +<p>Lista właściwości dla elementów stanowiących drzewo jest domyślnie bardzo mała dla domyślnych ustawień, które można także użyć jako arkusze stylów. Możemy używać tych dodatkowych właściwości do ustawienia appearance of containers or selected rows. The following properties are automatically set as needed:</p> + +<dl> + <dt>focus</dt> + <dd>ta własność jest ustawiona jeśli the tree currently has the focus.</dd> + <dt>selected</dt> + <dd>ta własność jest ustawiona dla wierszy i komórek, które są aktualnie zaznaczone.</dd> + <dt>current</dt> + <dd>ta własność jest ustawiona jeśli tkursor jest w wierszu. Tylko jeden wiersz będzie miał ustawioną własność na czas.</dd> + <dt>container</dt> + <dd>ta własność jest ustawiona dla wierszy i komórek posiadających, który element dziedziczył z wiersza tabeli.</dd> + <dt>leaf</dt> + <dd>ta własność jest ustawiona dla wierszy i komórek których nie ma potomek wiersza.</dd> + <dt>open</dt> + <dd>ta własność jest ustawiona dla wierszy i komórek które są expanded.</dd> + <dt>closed</dt> + <dd>ta własność jest ustawiona dla wierszy i komórek które są zawinięte.</dd> + <dt>primary</dt> + <dd>ta własność jest ustawiona dla komórek w primary column.</dd> + <dt>sorted</dt> + <dd>ta własność jest ustawiona dla komórek w the current sorted column.</dd> + <dt>even</dt> + <dd>ta własność jest ustawiona dla even numbered rows.</dd> + <dt>odd</dt> + <dd>ta własność jest ustawiona dla odd numbered rows. This property, along with the even property allow you to set, dla przykładu, alternating colors for each row.</dd> + <dt>dragSession</dt> + <dd>ta własność jest ustawiona jeśli coś something is currently being dragged.</dd> + <dt>dropOn</dt> + <dd>if a drag is occuring over the tree, ta własność jest ustawiona dla the row currently being dragged over, as long as the mouse pointer is hovering over the row.</dd> + <dt>dropBefore</dt> + <dd>ta własność jest ustawiona jeśli kursor myszki ...</dd> + <dt>dropAfter</dt> + <dd>ta własność jest ustawiona jeśli kursor myszki jest nad lub pod jest kursor myszki jest przed obecną męką.</dd> + <dt>progressNormal</dt> + <dd>ta własność jest ustawiona dla progress meter cells.</dd> + <dt>progressUndetermined</dt> + <dd>ta własność jest ustawiona dla undeterminate progress meter cells.</dd> + <dt>progressNone</dt> + <dd>ta własność jest ustawiona dla non-progress meter cells.</dd> +</dl> + +<p>The properties are set for rows or cells in rows with the necessary state. For columns and cells, one additional property, the id of the column or column the cell is in will be set.</p> + +<h3 id="Ustawienie_w.C5.82asno.C5.9Bci_dla_kompilacji_drzew_RDF" name="Ustawienie_w.C5.82asno.C5.9Bci_dla_kompilacji_drzew_RDF">Ustawienie własności dla kompilacji drzew RDF</h3> + +<p>Dla zbudowania drzewa RDF, możemy użyć tej samej składni. Jednakże, często będziesz musiał ustawiać właściwości opartych na wartościach znajdujących się w kodzie źródłowym.</p> + +<h3 id="Ustawienie_w.C5.82asno.C5.9Bci_dla_W.C5.82asnego_widoku_drzewa" name="Ustawienie_w.C5.82asno.C5.9Bci_dla_W.C5.82asnego_widoku_drzewa">Ustawienie własności dla Własnego widoku drzewa</h3> + +<p>For trees with a custom view script, you can set properties by supplying the functions 'getRowProperties', <code>getColumnProperties()</code> and <code>getCellProperties()</code> in the view. These return information about an individual row, column and cell. Arguments to these functions indicate which row and/or column. The last argument to each of these functions is a properties list which the view is expected to fill with a list of properties. The function <code>getColumnProperties()</code> also supplies the corresponding <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code></code> element for the column.</p> + +<pre>getRowProperties : function(row,prop){} +getColumnProperties : function(column,columnElement,prop){} +getCellProperties : function(row,column,prop){} +</pre> + +<p>Let's look at an example of changing a specific cell. Let's make every fourth row have blue text, using the example from a previous section. We'll need to add code to the <code>getCellProperties()</code> function, to add a property 'makeItBlue' for cells in every fourth row. (We don't use getRowProperties as the text color will not be inherited into each cell.)</p> + +<p>The properties object that is passed as the last argument to the getCellProperties is an <a href="pl/XPCOM">XPCOM</a> object that implements nsISupportsArray. It is really just an XPCOM version of an array. It contains a function AppendElement which can be used to add an element to the array. We can use the interface nsIAtomService to constuct string atoms for the properties.</p> + +<pre>getCellProperties: function(row,col,props){ + if ((row %4) == 0){ + var aserv=Components.classes["@mozilla.org/atom-service;1"]. + getService(Components.interfaces.nsIAtomService); + props.AppendElement(aserv.getAtom("makeItBlue")); + } +} +</pre> + +<p>This function would be defined as part of a view object. It first checks to see which row is being requested and sets a property for cells in every fourth row. The properties list requires an array of atom objects, which can be thought of as constant strings. We create them using the XPCOM interface nsIAtomService and add them to the array using the AppendElement function. Here, we create an atom 'makeItBlue'. You can call AppendElement again to add additional properties.</p> + +<h3 id="Przyk.C5.82ad_arkusza_styl.C3.B3w" name="Przyk.C5.82ad_arkusza_styl.C3.B3w">Przykład arkusza stylów</h3> + +<pre>treechildren::-moz-tree-row(selected) { background-color: #FFFFAA; } +treechildren::-moz-tree-row(odd) { background-color: #EEEEEE; } +treechildren::-moz-tree-row(odd, selected) { background-color: #FFFFAA; } +treechildren::-moz-tree-cell-text(selected) { color: #000000; } +treechildren::-moz-tree-cell-text(odd, selected) { color: #000000; } +</pre> + +<p>Na następnej stronie zobaczymy w jaki <a href="pl/Kurs_XUL/Modyfikacja_domy%c5%9blnego_motywu">sposób zmodyfikować domyślny motyw</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Dodawanie_arkuszy_stylów" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Modyfikacja_domyślnego_motywu">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/nakładki_dla_wielu_pakietów/index.html b/files/pl/mozilla/tech/xul/kurs_xul/nakładki_dla_wielu_pakietów/index.html new file mode 100644 index 0000000000..c006eef58e --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/nakładki_dla_wielu_pakietów/index.html @@ -0,0 +1,89 @@ +--- +title: Nakładki dla wielu pakietów +slug: Mozilla/Tech/XUL/Kurs_XUL/Nakładki_dla_wielu_pakietów +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Cross_Package_Overlays +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Nakładki" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Tworzenie_instalatora">Następny »</a></p> +</div> Ten artykuł opisuje, jak zastosować nakładki do plików, które ich nie importują.<p></p> + +<h2 id="Zastosowanie_nak.C5.82adek_do_innych_pakiet.C3.B3w" name="Zastosowanie_nak.C5.82adek_do_innych_pakiet.C3.B3w">Zastosowanie nakładek do innych pakietów</h2> + +<div class="note">Note: This section talks about contents.rdf which has been replaced in <a href="pl/Gecko">Gecko</a> 1.8 by <a href="pl/Kurs_XUL/Pliki_manifestu">pliki manifestu</a>.</div> + +<p>Nakładki mają inną użyteczna cechę. W przykładach z <a href="pl/Kurs_XUL/Nak%c5%82adki">poprzedniej sekcji</a>, nakładki były importowane przez okno. Możesz również podejść do tego z innej strony i posiadać wyszczególnione nakładki które stosują okna. Wyszczególnisz je przez zmodyfikowanie pliku content.rdf twojego pakietu. Jest to użyteczne ponieważ nakładka może modyfikować interfejs użytkownika lub inny pakiet bez zmiany innego pakietu. Na przykład możesz dodać pozycję <a href="pl/Kurs_XUL/Proste_paski_menu">menu</a> lub <a href="pl/Kurs_XUL/Paski_narz%c4%99dzi">pasek narzędziowy</a> do okna przeglądarki Mozilla.</p> + +<p>Użyjemy tej cechy do dodania paska zadań do okna przeglądarki Mozilli Aplikacja Mozilla Mail używa nakładek dla dodawania zawartości do okna przeglądarki. Na przykład, jeśli Mail nie jest zainstalowany, nie będzie polecenia Nowa Wiadomość. Jednak jeśli Mail jest zainstalowany, nakładka będzie zastosowana w menu dla dodania polecenia Nowa Wiadomość. Poniżej dodamy pasek narzędziowy znajdowania plików do przeglądarki. Ta cecha nie będzie prawdopodobnie zbyt użyteczna, ale zróbmy to.</p> + +<p>Mozilla pozwala ci dodać listę nakładek do pliku content.rdf, którego używasz do listy chromowych (pokazowe funkcje, które przyciągają uwagę użytkowników, ale niewiele wnoszą do możliwości systemu)pakietów, skórek i narodowości. Kiedyś tworząc nakładkę musiałeś dodać ją do pliku content.rdf. Potem dodać pozycję, jedną dla każdego okna w jakim chciałeś zastosować nakładkę.</p> + +<div class="highlight"> +<h3 id="Our_find_files_example" name="Our_find_files_example">Our find files example</h3> + +<p>Najpierw stwórzmy prostą nakładkę. Będzie ona miała kilka pól dla wprowadzenia nazwy pliku i katalogu dla wyszukania. Wywołaj plik foverlay.xul i dodać go katalogu findfile wraz z findfile.xul</p> + +<h3 id="Our_foverlay.xul_example" name="Our_foverlay.xul_example">Our foverlay.xul example</h3> + +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_crosspov_1.xul.txt">Źródła</a></p> + +<pre><?xml version="1.0"?> + +<overlay + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<toolbox id="navigator-toolbox"> + <toolbar id="findfile_toolbar"> + <label control="findfile_filename" value="Search for files named:"/> + <textbox id="findfile_filename"/> + <label control="findfile_dir" value="Directory:"/> + <textbox id="findfile_dir"/> + <button label="Browse..."/> + </toolbar> +</toolbox> + +</overlay> +</pre> + +<p>Możesz zobaczyć to przez zmianę nakładki na okno. Jedyną rzeczą, jaka jest tu specjalna jest zastosowanie <code>id</code> used on the <code><code><a href="/pl/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></code>. Wartość ta (<code>navigator-toolbox</code>) jest taka sama jak identyfikator okna narzędziowego w oknie przeglądarki (navigator.xul) Oznacza to ,że nakładka będzie zastosowana do okna narzędziowego w oknie przeglądarki a zawartość będzie dodana jako dodatkowy pasek narzędzi.</p> + +<p>Aby dodać tą nakładkę do pliku - wykazu, musisz dodać dwa zasoby. Najpierw dodajemy jedną dla każdego okna, w którym stosujemy nakładkę. Poniższy kod powinien być dodany do pliku content.rdf zanim zamkniemy znacznik RDF.</p> + +<pre><RDF:Seq about="urn:mozilla:overlays"> + <RDF:li resource="chrome://navigator/content/navigator.xul"/> +</RDF:Seq> +</pre> + +<p>Deklaruje on, że dodajemy nakładkę okna, potomka źródłowego węzła nakładki (urn:mozilla:overlays) Możesz dodać dodatkowe węzły dla dowolnego okna, w którym chcesz zastosować nakładki poprzez dodanie dodatkowych węzłów <code>li</code>.</p> + +<p>Następnie dodajemy węzeł dla każdej nakładki stosowanej w oknie. W tym przypadku, mamy tylko jedną, ale możemy zastosować również pozostałe. Dodaj te linie po poprzednich liniach</p> + +<pre><RDF:Seq about="chrome://navigator/content/navigator.xul"> + <RDF:li>chrome://findfile/content/foverlay.xul</RDF:li> +</RDF:Seq> +</pre> +</div> + +<div class="float-right"><img alt="Image:crosspov1.jpg"></div> + +<p>Mozilla odczytuje te informacje i buduje listę nakładek, które są stosowane z innymi oknami. Przechowuje tą informację w katalogu chrome/overlayinfo. Nie musisz ręcznie modyfikować tych plików w tym katalogu. Jest automatycznie generowany i modyfikowany, kiedy Mozilla jest pierwszy raz uruchamiana lub kiedy nowe pakiety są zainstalowane. Jednakże możesz wymusić daną będącą przebudowana przez usunięcie tego katalogu i pliku chrome.rdf.</p> + +<p>Możemy stosować podobne techniki do zastosowania dodatkowych arkuszy stylów. Pokazuje to poniższy przykład:</p> + +<pre><RDF:Seq about="urn:mozilla:stylesheets"> + <RDF:li resource="chrome://messenger/content/messenger.xul"/> +</RDF:Seq> + +<RDF:Seq about="chrome://messenger/content/messenger.xul"> + <RDF:li>chrome://blueswayedshoes/skin/myskinfile.css</RDF:li> +</RDF:Seq> +</pre> + +<p>Następnie zobaczymy <a href="pl/Kurs_XUL/Tworzenie_instalatora">jak stworzyć instalator</a> dla aplikacji XUL.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Nakładki" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Tworzenie_instalatora">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/obiektowy_model_dokumentu/index.html b/files/pl/mozilla/tech/xul/kurs_xul/obiektowy_model_dokumentu/index.html new file mode 100644 index 0000000000..afc317c45c --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/obiektowy_model_dokumentu/index.html @@ -0,0 +1,244 @@ +--- +title: Obiektowy model dokumentu +slug: Mozilla/Tech/XUL/Kurs_XUL/Obiektowy_model_dokumentu +tags: + - DOM + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Document_Object_Model +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Rozgłaszacze_oraz_obserwatory" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Modyfikowanie_interfejsu_XUL">Następny »</a></p> +</div><p></p> + +<p>Obiektowy model dokumentu (DOM - Document Object Model) może zostać użyty z elementami XUL, umożliwiając pobieranie o nich informacji oraz ich modyfikację.</p> + +<h2 id="Wprowadzenie_do_DOM" name="Wprowadzenie_do_DOM">Wprowadzenie do DOM</h2> + +<p><a href="pl/DOM">DOM</a> jest używany do przechowywania drzewa węzłów XUL. Podczas wczytywania pliku XUL znaczniki są parsowane i przekształcane w hierarchiczną strukturę węzłów dokumentu (jeden węzeł to znaczników lub blok tekstu). Strukturę DOM można odczytywać oraz modyfikować używając odpowiednich metod; również niektóre elementy XUL dostarczają dodatkowych funkcji.</p> + +<p>Każdy plik XUL po wczytaniu posiada własny dokument wyświetlony w oknie lub w ramce. Pomimo tego, że istnieje tylko jeden dokument powiązany z oknem, można dodawać dodatkowe dokumenty przy pomocy odpowiednich metod.</p> + +<p>W Mozilli, dostęp i modyfikacja <a href="pl/DOM">DOM</a> jest możliwa poprzez <a href="pl/JavaScript">JavaScript</a>. Różne obiekty DOM posiadają funkcje, do których dostęp jest możliwy z poziomu skryptu. Należy jednak zauważyć, że DOM to API (Application Programming Interface - interfejs programowania aplikacji), które może być użyte przez JavaScript, ponieważ Mozilla dostarcza odpowiednich obiektów.</p> + +<p>W <a href="pl/JavaScript">JavaScript</a> zawsze istnieje jeden globalny obiekt, który jest zawsze dostępny. Można odwoływać się do własności i metod tego obiektu bez jego bezpośredniego wskazywania. Na przykład, jeśli ten obiekt posiada własność 'name', można ją zmodyfikować poprzez napisanie <code>name = 7</code>, bez odwoływania się do samego obiektu. W przypadku przeglądarki takim globalnym obiektem jest obiekt + + <i>window</i> + (okno), podobnie jest w języku XUL. Oczywiście każde okno oraz ramka posiada swój własny, odrębny obiekt.</p> + +<p>Do okna można się odnieść poprzez własność <a href="pl/DOM/window.window"><code>window</code></a>, chociaż nie jest to konieczne. Czasami jest ten sposób użyty, aby zasięg metody, której używamy, był bardziej czytelny. Na przykład poniższe dwie linijki spowodują ten sam efekt (otwarcie nowego okna):</p> + +<pre>window.open("test.xul","_new"); +open("test.xul","_new"); +</pre> + +<p>Kiedy zadeklarujesz funkcję lub zmienną na zewnątrz innych funkcji, tak naprawdę deklarujesz własność globalnego obiektu. W języku XUL każda funkcja, którą zadeklarujesz będzie ustawiona jako własność obiektu 'window'. Na przykład, poniższy kod dwukrotnie wyświetli <code><a href="pl/DOM/window.alert">alert</a></code> - okienko wyskakujące z tekstem 'Wiadomość'.</p> + +<pre>function getText(){ + return "Wiadomość"; +} + +alert(getText()); +alert(window.getText()); +</pre> + +<p>Jeśli chcesz uzyskać dostęp do zmiennej lub wywołać funkcję zadeklarowaną w skrypcie używanym przez inne okno, wystarczy po prostu użyć obiektu <code><a href="pl/DOM/window">window</a></code> tego okna. Na przykład po połączeniu dwóch ostatnich przykładów w jeden plik, można wywołać funkcję <code>getText()</code> z wnętrza innego okna (np. okna test.xul) w ten sposób:</p> + +<pre>alert(window.opener.getText()); +</pre> + +<p>Każde okno posiada własność <code><a href="pl/DOM/window.opener">opener</a></code>, która przechowuje obiekt 'window' wskazujące na okno, które otwarło aktualne okno. W naszym przykładzie pobieramy okno otwierające i wywołujemy funkcję <code>getText()</code> w nim zadeklarowaną. Zauważ, że użyty został identyfikator 'window' tylko po to, aby kod był czytelniejszy.</p> + +<p>Metoda okna <code><a href="pl/DOM/window.open">open()</a></code> także zwraca referencję do nowego okna, więc możliwe jest wywoływanie funkcji nowego okna z okna z <code><a href="pl/DOM/window.opener">opener</a></code>. Warto jednak zauważyć, że metoda <code><a href="pl/DOM/window.open">open()</a></code> zwraca wartość zanim nowe okno jest w pełni wczytane, tak więc funkcje te nie są zazwyczaj od razu dostępne.</p> + +<p>Obiekt typu 'window' nie jest zdefiniowane w żadnej specyfikacji, ale w Mozilli czasami uznaje się to za część DOM Poziomu 0 (<a>DOM Level 0</a>). Jest to nazwa używana przez niektórych programistów w odniesieniu do funkcji własności dla DOM, które istniały przed dołączeniem ich do specyfikacji. Dokument, który jest wyświetlany w oknie może zostać pobrany poprzez własność okna <code><a href="pl/DOM/window.document">document</a></code>. Ponieważ <code><a href="pl/DOM/window.document">document</a></code> jest jedną z najczęściej używanych własności okna, to zazwyczaj jest ona wywoływana bez identyfikatora 'window.'.</p> + +<p>Mozilla dostarcza kilku różnych obiektów typu 'document', w zależności od rodzaju dokumentu używanego w tym czasie. Trzy podstawowe to <a class="external" href="http://www.xulplanet.com/references/objref/HTMLDocument.html">HTMLDocument</a>, <a class="external" href="http://www.xulplanet.com/references/objref/XMLDocument.html">XMLDocument</a> i <a class="external" href="http://www.xulplanet.com/references/objref/XULDocument.html">XULDocument</a>, odpowiednio dla języków <a href="pl/HTML">HTML</a>, <a href="pl/XML">XML</a> i <a href="pl/XUL">XUL</a>. Są one do siebie bardzo podobne, ponieważ na poziomie podstawowym są tak samo zrealizowane. Różnią się kilkoma funkcjami, które działają odpowiednio dla typu dokumentu.</p> + +<h2 id="Odzyskiwanie_element.C3.B3w" name="Odzyskiwanie_element.C3.B3w">Odzyskiwanie elementów</h2> + +<p>Najpopularniejszym sposobem pobrania elementu w dokumencie jest nadanie elementowi atrybutu <code><a href="pl/DOM/element.id">id</a></code>, a następnie użycie metody <code><a href="pl/DOM/document.getElementById">getElementById()</a></code>. W okienku dialogowym <tt>Znajdź pliki</tt> dodaliśmy atrybut <code>id</code> wielu elementom. Na przykład możemy pobrać stan pola wyboru stosując poniższy kod:</p> + +<pre>var state = document.getElementById('casecheck').checked; +</pre> + +<p>Wartość <code>casecheck</code> odpowiada identyfikatorowi <code>id</code> z elementu <a href="pl/Kurs_XUL/Kontrolki_wej%c5%9bcia#Pola_wyboru_i_przyciski_opcji">checkbox</a>, który określa, czy wyszukiwanie powinno uwzględnić wielkość liter. Wiedząc, czy jest on zaznaczony, czy nie, może zostać wykonane wyszukiwanie. Podobnie można postąpić z innym polami wyboru lub jakimkolwiek elementem posiadającym <code>id</code>.</p> + +<div class="highlight"> +<h4 id="Nasz_przyk.C5.82ad_Znajd.C5.BA_pliki" name="Nasz_przyk.C5.82ad_Znajd.C5.BA_pliki">Nasz przykład <tt>Znajdź pliki</tt></h4> + +<p>Nie ma sensu wyświetlać <a href="pl/Kurs_XUL/Paski_post%c4%99pu">paska postępu</a> oraz pustego <a href="pl/Kurs_XUL/Drzewa">drzewa danych</a> podczas pierwszego wyświetlania okna dialogowego <tt>Znajdź pliki</tt>. Zostały one dodane, aby były dla nas widoczne. Kod zostanie zmieniony tak, aby początkowo były one ukryte. Zostanie użyty atrybut <code><code id="a-hidden"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/hidden">hidden</a></code></code>, który określa, czy element jest widoczny, czy nie.</p> + +<p>Wskaźnik postępu będzie początkowo ukryty. Dodany zostanie również atrybut <code><code id="a-id"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/id">id</a></code></code>, aby móc się do niego odwoływać w skrypcie aby go ukryć lub wyświetlić. <a href="pl/Kurs_XUL/Rozdzielacze">Rozdzielacz</a> oraz drzewo z wynikami zostaną również początkowo ukryte, wyświetlone zostaną dopiero po wyszukiwaniu:</p> + +<pre class="eval"><tree <span class="highlightred">id="results" hidden="true"</span> flex="1"> + . + . + . +<splitter <span class="highlightred">id="splitbar"</span> resizeafter="grow" <span class="highlightred">hidden="true"</span>/> + +<hbox> + + <progressmeter <span class="highlightred">id="progmeter"</span> value="50%" + style="margin: 4px;" <span class="highlightred">hidden="true"</span>/> +</pre> + +<p>Dodano atrybut <code><code id="a-hidden"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/hidden">hidden</a></code></code> z wartością ustawioną na <code>true</code>. Spowoduje to ukrycie elementu w pierwszych wyświetleniach.</p> + +<p>Następnie dodana zostanie funkcja wywoływana po naciśnięciu przycisku <tt>Znajdź</tt>. Skrypt zostanie zapisany w osobnym pliku findfiles.js. W <a href="pl/Kurs_XUL/Dodawanie_funkcji_obs%c5%82ugi_zdarze%c5%84">ostatnim rozdziale</a> dodano element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/script" title="script">script</a></code></code> do pliku XUL. Jeśli jeszcze tego nie zrobiłeś, zrób to teraz w sposób pokazany poniżej. Uchwyt <code><code id="a-oncommand"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/oncommand">oncommand</a></code></code> zostanie również dodany do przycisku <tt>Znajdź</tt>.</p> + +<pre class="eval"><script src="findfile.js"/> + . + . + . +<button id="find-button" label="Znajdź" + <span class="highlightred">oncommand="doFind();"</span>/> +</pre> + +<p>Następnie, w tym samym katalogu co plik findfiles.xul, utwórz plik findfiles.js. Funkcja doFind() zostanie dodana do tego pliku. Znacznik script pozwala bezpośrednio w sobie zawierać kod, ale zazwyczaj (między innymi z powodu wydajności) skrypty umieszcza się w osobnym pliku. Wyjątkiem może być krótki fragment kodu umieszczony bezpośrednio w uchwycie zdarzenia.</p> + +<pre class="eval">function doFind(){ + var meter = document.getElementById('progmeter'); + meter.hidden = false; +} +</pre> + +<p>Powyższa funkcja najpierw pobiera referencję paska postępu, poprzez użycie jego id <code>progmeter</code>. Druga linia kodu funkcji zmienia status hidden, czyli element stanie się ponownie widoczny.</p> + +<p>Na koniec, dodajmy jeszcze wyskakujące okienko ostrzeżenia, które wyświetli informację czego szukamy. W ostatecznej wersji skryptu tego fragmentu nie będzie, ale na razie dzięki temu będziemy wiedzieli, że coś się dzieje.</p> + +<pre class="eval">function doFind(){ + var meter=document.getElementById('progmeter'); + meter.hidden = false; + <span class="highlightred">var searchtext=document.getElementById('find-text').value; + alert("Szukanie dla \"" + searchtext + "\"");</span> +} +</pre> + +<p>Teraz, wraz z pudełkiem ostrzeżenia będzie wiadomo, co się wydarzy po naciśnięciu przycisku <tt>Znajdź</tt>. Możemy również dodać dodatkowy kod pobierający zaznaczenie z rozwijanych pudełek.</p> +</div> + +<h2 id="Elementy_XUL_w_DOM" name="Elementy_XUL_w_DOM">Elementy XUL w DOM</h2> + +<p>Każdy element XUL posiada przypisane atrybuty, przypisane własności oraz przypisane dziecko elementu.</p> + +<ul> + <li>Atrybuty są deklarowane w kodzie, na przykład flex="1" oznacza, że atrybutowi <code><code id="a-flex"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/flex">flex</a></code></code> przypisana jest wartość <code>1</code>.</li> + <li>Własności są używane w JavaScript używając notacji z kropką. Na przykład element.hidden odpowiada własności hidden elementu.</li> + <li>Dzieci elementu to znaczniki potomne elementu i są one zagnieżdżone wewnątrz elementu w źródle.</li> +</ul> + +<p>Jest możliwe, aby manipulować atrybutami, własnościami oraz dziećmi elementu stosując dynamicznie metody DOM.</p> + +<p>Warto zauważyć, że atrybuty i własności to nie to samo. Istnienie atrybutu o danej nazwie nie znaczy, że istnieje odpowiadająca własność o takiej samej nazwie. Z drugiej strony, często tak się dzieje. Na przykład, aby pobrać atrybut <code>flex</code>, można użyć własności flex. W tym przypadku kod za to odpowiedzialny zwraca wartość atrybutu. Jednakże dla innych własności, XUL wykona bardziej złożone operacje.</p> + +<p>Można manipulować atrybutami elementu poprzez zastosowanie którejś z następujących metod:</p> + +<dl> + <dt><a href="pl/DOM/element.getAttribute">getAttribute</a> ( name )</dt> + <dd>Zwraca wartość atrybutu o nazwie 'name'.</dd> + <dt><a href="pl/DOM/element.hasAttribute">hasAttribute</a> ( name )</dt> + <dd>Zwraca + <i>true</i> + , jeśli atrybut o nazwie 'name' posiada wartość.</dd> + <dt><a href="pl/DOM/element.setAttribute">setAttribute</a> ( name , value )</dt> + <dd>Ustawia wartość atrybutu o nazwie 'name' na daną wartość 'value'.</dd> + <dt><a href="pl/DOM/element.removeAttribute">removeAttribute</a> ( name )</dt> + <dd>Usuwa atrybut o nazwie 'name'.</dd> +</dl> + +<p>Powyższe funkcje umożliwiają pobieranie i zmianę wartości atrybutu w dowolnym momencie. Na przykład, następujący kod pobiera wartość atrybutu flex oraz przypisuje mu inną wartość:</p> + +<pre> var box = document.getElementById('somebox'); + var flex = box.getAttribute("flex"); + + var box2 = document.getElementById('anotherbox'); + box2.setAttribute("flex", "2"); +</pre> + +<p>Atrybut <code><code id="a-flex"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/flex">flex</a></code></code> posiada <a href="pl/XUL/W%c5%82asno%c5%9b%c4%87/flex">odpowiednią własność w skrypcie</a>, która może zostać zamiennie użyta. Nie jest to bardziej wydajny sposób, za to wymaga trochę mniej pisania. Poniższy kod zadziała w ten sam sposób, jak w poprzednim przykładzie, lecz stosując własność flex.</p> + +<pre> var box = document.getElementById('somebox'); + var flex = box.flex; + + var box2 = document.getElementById('anotherbox'); + box2.flex = 2; +</pre> + +<p>Mając już jedną referencję do elementu, można wywołać własność tego elementu. Na przykład, można pobrać własność <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/hidden">hidden</a></span></code></code> elementu poprzez użycie składni <code> + <i>element</i> + .hidden</code>, gdzie; <code> + <i>element</i> + </code> to referencja do elementu. Zauważ, że większość własności wypisanych w dokumentacji ma swoje odpowiedniki wśród atrybutów elementów. Oczywiście istnieją różnice, na przykład <strong><font color="green">getAttribute("hidden") zwróci łańcuch znaków 'true'</font></strong> dla ukrytych elementów, podczas gdy <strong><font color="green">własność <code>hidden</code> zwróci typ boolean o wartości <code>true</code></font></strong>. W tym wypadku zachodzi konwersja typów, tak więc własność jest wygodniejsza w użyciu.</p> + +<p>Jak z każdym dokumentem, istnieje osobny obiekt typu elementu dla elementów XUL, tak jak odpowiednio istnieją elementy <a href="pl/HTML">HTML</a> i <a href="pl/XML">XML</a>. Każdy element XUL implementuje interfejs <a class="external" href="http://www.xulplanet.com/references/objref/XULElement.html">XULElement</a>]. Elementu XUL to każdy element zadeklarowany w przestrzeni nazw XUL. Tak więc elementy XUL posiadają ten interfejs nawet, jeśli są dodane do innych dokumentów XML. Z drugiej strony elementy inne niż elementy XUL nie posiadają tego interfejsu. Interfejs XULElement posiada wiele własności oraz metody określonych dla elementów XUL, wiele dziedziczy z ogólnego interfejsu DOM Element.</p> + +<p>Przestrzeń nazw to adres URI określający rodzaj elementu. Poniżej kilka przykładów:</p> + +<pre><button xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"/> +<button xmlns="http://www.w3.org/1999/xhtml"/> +<html:button xmlns:html="http://www.w3.org/1999/xhtml"/> +<html:button xmlns:html="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"/> +</pre> + +<p>Przestrzenie nazw są określane przy użyciu atrybutu <code>xmlns</code>.</p> + +<ul> + <li>Pierwszy przycisk jest elementem XUL, ponieważ został umieszczony w przestrzeni nazw XUL.</li> + <li>Drugi element to element XHTML, ponieważ przypisano go do przestrzeni nazw XHTML.</li> + <li>W trzecim przykładzie przedrostek + <i>html</i> + jest zmapowany do przestrzeni nazw <span class="nowiki">'http://www.w3.org/1999/xhtml'</span>. Można użyć składnię przedrostka z dwukropkiem, aby zastosować określoną przestrzeń nazw. Stosowane jest to w przypadku użycia kliku przestrzeni nazw w dokumencie i gdy potrzebujemy więcej zrobić niż na to pozwala przestrzeń nazw.</li> + <li>Czwarty przykład może wydawać się nieco niejasny, ale może udowodni, że to adres URI jest ważniejszy, a nie przedrostek. W przykładzie tym przycisk jest elementem XUL, a nie przyciskiem HTML, jak mógłby na to wskazywać przedrostek.</li> +</ul> + +<p>Tak naprawdę nazwa użyta w przedrostku nie ma znaczenia, jeśli chodzi o określenie, jakiego typu jest element.</p> + +<p>DOM dostarcza wiele funkcji pomocnych przy posługiwaniu się przestrzeniami nazw, które są podobne do tych niezwiązanych z nimi. Istnieje na przykład funkcja <code><a href="pl/DOM/element.getAttributeNS">getAttributeNS()</a></code> przypominająca funkcję <code><a href="pl/DOM/element.getAttribute">getAttribute()</a></code> poza dodatkowym argumentem, który może być stosowany do określenia atrybutu w konkretnej przestrzeni nazw.</p> + +<p>Wiele elementów XUL posiada swoje własne unikatowe własności. Aby poznać wszystkie atrybuty i własności dostępne dla elementu, zajrzyj do <a href="pl/Dokumentacja_XUL">dokumentacji</a>.</p> + +<h2 id="Poruszanie_si.C4.99_po_DOM" name="Poruszanie_si.C4.99_po_DOM">Poruszanie się po DOM</h2> + +<p>DOM jest strukturą drzewa z pojedynczym węzłem głównym ( + <i>ang. root node</i> + ) oraz jego węzłami potomnymi. Aby pobrać odniesienie do węzła głównego, należy użyć własności dokumentu <code><a href="pl/DOM/document.documentElement">documentElement</a></code>. Węzeł główny jest zawsze elementem, ale nie zawsze są nimi inne węzły drzewa. W drzewie dokumentu element odpowiada znacznikowi w źródle XUL, ale można również znaleźć węzły tekstowe, węzły komentarzy oraz kilka innymi typów. W przypadku XUL, elementem głównym będzie znacznik <code><code><a href="/pl/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> w dokumencie XUL. Każdy węzeł w drzewie może mieć dzieci, które mogą posiadać własne węzły potomne. Ponieważ DOM jest strukturą drzewa, można poruszać się poprzez drzewo stosując różnorodne własności. Niektóre własności są wypisane poniżej:</p> + +<dl> + <dt><a href="pl/DOM/element.firstChild">firstChild</a> </dt> + <dd>Odnosi się do pierwszego węzła potomnego elementu.</dd> + <dt><a href="pl/DOM/element.lastChild">lastChild</a> </dt> + <dd>Odnosi się do ostatniego węzła potomnego elementu.</dd> + <dt><a href="pl/DOM/element.childNodes">childNodes</a> </dt> + <dd>Podtrzymuje listę dzieci elementu.</dd> + <dt><a href="pl/DOM/element.parentNode">parentNode</a> </dt> + <dd>Odnosi się do rodzica węzła.</dd> + <dt><a href="pl/DOM/element.nextSibling">nextSibling</a> </dt> + <dd>Odnosi się do następnej sekwencji rodzeństwa.</dd> + <dt><a href="pl/DOM/element.previousSibling">previousSibling</a> </dt> + <dd>Odnosi się do wcześniejszej sekwencji rodzeństwa.</dd> +</dl> + +<p>Powyższe własności pozwalają na poruszanie się po dokumencie na różne sposoby. Na przykład, można pobrać pierwszego potomka elementu przy pomocy własności <code><a href="pl/DOM/element.firstChild">firstChild</a></code> i następnie poruszać się poprzez dzieci używając własności <code><a href="pl/DOM/element.nextSibling">nextSibling</a></code>. Ten sam efekt można uzyskać poprzez odwoływanie się do obiektów listy pobranej przez <code><a href="pl/DOM/element.childNodes">childNodes</a></code>. W Mozilli kolejna metoda jest bardziej wydajna.</p> + +<p>Następny przykład pokaże, jak przejść po potomkach węzła głównego:</p> + +<pre>var childNodes = document.documentElement.childNodes; +for (var i = 0; i < childNodes.length; i++) { + var child = childNodes[i]; + // zrób coś z potomkiem +} +</pre> + +<p>Zmienna <code><a href="pl/DOM/element.childNodes">childNodes</a></code> przechowuje dzieci głównego elementu dokumentu. Następnie, przy pomocy pętli <code>for</code>, uzyskujemy dostęp do każdego dziecka, tak jak w przypadku tablic.</p> + +<div class="highlight">Przykład <tt>Znajdź pliki</tt>: <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-dom.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-dom.xul">Podgląd</a></div> + +<p><small>Zobacz także: <a href="pl/JavaScript/Na_pocz%c4%85tek">JavaScript:Na początek</a> i <a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5">Dokumentacja języka JavaScript 1.5</a></small></p> + +<p>W następnym artykule nauczymy się <a href="pl/Kurs_XUL/Modyfikowanie_interfejsu_XUL">modyfikacji DOM.</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Rozgłaszacze_oraz_obserwatory" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Modyfikowanie_interfejsu_XUL">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/obiekty_pudełka/index.html b/files/pl/mozilla/tech/xul/kurs_xul/obiekty_pudełka/index.html new file mode 100644 index 0000000000..e929b9b138 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/obiekty_pudełka/index.html @@ -0,0 +1,164 @@ +--- +title: Obiekty pudełka +slug: Mozilla/Tech/XUL/Kurs_XUL/Obiekty_pudełka +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Box_Objects +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Manipulowanie_listami" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Interfejsy_XPCOM">Następny »</a></p> +</div><p></p> + +<p>Artykuł ten opisuje obiekty pola, które mieszczą w sobie powiązane informacje o wyświetlaniu i rozmieszczaniu pola XUL jak również pewne szczegóły o rozmieszczeniu XUL.</p> + +<h2 id="O_uk.C5.82adzie_graficznym_Mozilli" name="O_uk.C5.82adzie_graficznym_Mozilli">O układzie graficznym Mozilli</h2> + +<p>Mozilla dzieli rzeczy na dwa zbiory drzew, drzewo content (zawartości) i drzewo layout (rozmieszczenia). Drzewo content (zawartości) przechowuje węzły jakie znajdują się w kodzie źródłowym. Drzewo layout (rozmieszczenia) przechowuje inne drzewo content (węzłów) dla każdego pojedynczego komponentu jaki może być wyświetlony. Drzewo layout (rozmieszczenia) mieści w sobie strukturę taką jak nodes (węzły) oczekiwane przy wyświetlaniu. Nie jest konieczny związek jeden do jednego pomiędzy nodes (węzłami) content (zawartości) a layout (rozmieszczenia).Pewne nodes (węzły) content (zawartości) mogą mieć klika obiektów layout (rozmieszczenia), na przykład każda linia paragrafu ma oddzielny obiekt layout (rozmieszczenia). Odwrotnie, pewne nodes content (węzły zawartości) nie mają wcale obiektów layout (rozmieszczenia). Na przykład element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> nie ma żadnego obiektu layout (rozmieszczenia) ponieważ nie jest wyświetlany w żaden sposób. Podobnie, dowolny element, który był wykrywany również nie będzie miał obiektu layout (rozmieszczenia).</p> + +<p><span class="comment">Mozilla divides things into two sets of trees, the content tree and the layout tree. The content tree stores the nodes as they are found in the source code. The layout tree holds a different tree of nodes for each individual component that can be displayed. The layout tree holds the structure as the nodes are expected to be displayed There is not necessarily a one to one relationship between content and layout nodes. Some content nodes may have several layout objects, for example, each line of a paragraph has a separate layout object. Conversely, some content nodes have no layout objects at all. For instance, the <code><code><a href="/pl/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> element doesn't have any layout objects since it isn't displayed in any way. Similarly, any element that has been hidden will not have a layout object either.</span></p> + +<p>DOM jest generalnie używany tylko do pobrania i modyfikacji informacji odnoszącej się do zawartości lub struktury dokumentu. Jest względnie proste do określenia jaki rodzaj węzła drzewa zawartości będzie stworzony dla danego elementu. Element XUL, na przykład, będzie miał typ XUL Element węzła zawartości.</p> + +<p><span class="comment">The <a href="/pl/DOM">DOM</a> is generally used only to get and modify information pertaining to the content or structure of the document. It's relatively simple to determine what kind of content tree node will be created for a given element. A XUL element, for example, will have a XULElement type of content node.</span></p> + +<p>Obiekty layout (rozmieszczenia) które będą stworzone są określane w bardziej złożone. Są używane różne fragmenty informacji takie jak nazwa znacznika, atrybuty elementu, różne właściwości CSS, elementy obiektów LAYOUT (rozmieszczenia) i XBL powiązany z elementem (<a href="/pl/Kurs_XUL/Wprowadzenie_do_XBL" title="pl/Kurs_XUL/Wprowadzenie_do_XBL">XBL został opisany w dalszej części kursu</a>). O ile nie zmienisz stylu dla elementu, większość elementów XUL zazwyczaj będą jako obiekty pola layout (rozmieszczenia) lub jednego z jego podtypów. Przypomnij sobie, że elementy XUL są typu pola, to znaczy, pole jest podstawą dla wyświetlania wszystkich elementów XUL. Jednakże jest kilka podtypów, około 25 lub więcej, dla określonych elementów XUL.</p> + +<p><span class="comment">The layout objects that will be created are determined in a more complex manner. Various pieces of information are used such as the tag name, the attributes on an element, various <a href="/pl/CSS">CSS</a> properties, the elements and layout objects around the element, and the XBL associated with an element (<a href="/pl/XUL_Tutorial/Introduction_to_XBL">XBL is described in a later section</a>). Unless you change the style for an element, most XUL elements will usually use the box layout object or one of its subtypes. Recall that all XUL elements are types of boxes, that is the box is the base of all displayed XUL elements. However, there are a number of subtypes, about 25 or so, for specific XUL elements. Some of these subtypes, such as the <code><a href="/pl/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code> or <code><a href="/pl/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code> are needed for more complex layouts than the basic box, while others such as the button are used only to add extra mouse and key event handling.</span></p> + +<p>Niektóre z tych podtypów, takie jak <code><a href="/pl/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code> or <code><a href="/pl/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code> są bardziej potrzebne dla złożonych layouts niż podstawowe pole, podczas gdy pozostałe takie jak przycisk są używane tylko do dodania dodatkowego programu obsługi zdarzeń myszy i klawisza.</p> + +<p>Obiekt layout (rozmieszczenia) powiązany z elementem może zostać usunięty a całkowicie inny typ obiektu stworzony przez zmianę właściwości <code>display</code> CSS, pośród innych. Na przykład zmiana właściwości wyświetlania elementu przycisku na <code>block</code> spowoduje, że obiekt layout (rozmieszczenia) przycisku będzie usunięty a zamiast tego stworzony zostanie obiekt <code>block</code>. Naturalnie, zmieni to wygląd i funkcję elementu</p> + +<p>Nie jest koniecznym znać szczegóły tego jak obiekty layout (rozmieszczenia) są skonstruowane ale jest całkiem użytecznym posiadać przynajmniej trochę wiedzy na temat tego co jest napisane o XUL dla projektantów XUL bardziej zaawansowanych.</p> + +<p><span class="comment">The layout object associated with an element can be removed and a completely different type of object created just by changing the CSS <code>display</code> property, among others. For example changing the display property of a button element to <code>block</code> will cause the button layout object to be deleted and a block object to be created instead. Naturally, this will change the appearance and function of the element. It isn't necessary to know the details of how the layout objects are constructed but it is quite useful to at least have at least the knowledge of what is described above of XUL layout for more advanced XUL development.</span></p> + +<h2 id="Obiekty_pude.C5.82ka" name="Obiekty_pude.C5.82ka">Obiekty pudełka</h2> + +<p>Obiekty layout nie są dostępne do manipulowania przez projektantów. Są one wewnętrznymi komponentami layout XUL. Jednakże, XUL dostarcza pewnych pomocnych obiektów, nazywanych obiektami pola, które mogą dostarczać pewnych powiązanych informacji layout. jak implikuje nazwa, są one dostępne dla wszystkich elementów opartych o pola.</p> + +<p>Jest kilka podtypów obiektu pola, chociaż generalnie jest używanych tylko parę z nich. Pozostałe mają funkcje które są łatwiej dostępne poprzez metody odwzorowane bezpośrednio do elementu, ponieważ te typy są generalnie używane tylko z określonym elementem. Podstawowy obiekt pola, lub interfejs <a class="external" href="http://www.xulplanet.com/references/objref/BoxObject.html">BoxObject</a>, ma jednak kilka właściwości które są użyteczne dla projektantów XUL.</p> + +<p>Podstawowy obiekt pola ma dwie pożyteczne cechy. Po pierwsze możesz wyszukać pozycję i rozmiar elementu XUL jaki wyświetlasz a po drugie możesz określić porządek elementów w polu jakie wyświetlasz, zamiast porządku w jakim są przechowywane w DOM.</p> + +<h3 id="Retrieving_Position_and_Size" name="Retrieving_Position_and_Size">Retrieving Position and Size</h3> + +<p>Obiekt pola dostarcza czterech właściwości, x, y, width, height, dla określenia pozycji i rozmiaru elementu. Współrzędne x i y są związane z lewym górnym rogiem dokumentu w oknie (wyłączając brzeg okna i pasek tytułowy) i są mierzone w pikselach. Własność width i height również są mierzone w pikselach a zawracają one szerokość i wysokość elementu obejmując wypełnianie i brzeg.</p> + +<p>Te wartości są zawsze pozycją i rozmiarem aktualnego wyświetlania, więc te wartości będą się różniły jeśli element jest przesuwany lun zmieniany jest jego rozmiar. Na przykład, elastyczny element będzie zmieniał swój rozmiar, a obiekt pola będzie aktualizował odpowiednio swoje wymiary. Pokazuje to poniższy przykład</p> + +<p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxobject_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxobject_1.xul">Podgląd</a></p> + +<pre><button label="Click Me" + oncommand="alert('The width is ' + this.boxObject.width);"/> +</pre> + +<p>Możesz użyć atrybutów <code>width</code> i <code>height</code> do określenia, odpowiednio, szerokości i wysokości elementu. Normalnie, atrybuty te nie będą używane więc ten element określałby odpowiedni rozmiar do odpowiedniej jego zawartości. A zatem, atrybuty te zastępują domyślny rozmiar i stosują określony rozmiar. Odpowiednie własności <code>width</code> i <code>height</code>, mogą być używane do modyfikacji wymiarów elementu w dowolnym czasie, jeśli życzysz sobie wyświetlać element o określonym rozmiarze. Pobranie wartości tych właściwości zwróci rozmiar jeśli został wyraźnie określony. Zauważ że te właściwości będą zwracać pusty łańcuch jeśli atrybuty szerokości i wysokości lub właściwości nie zostały już ustawione. To znaczy, nie możesz pobrać aktualnego rozmiaru z tych właściwości; zamiast tego musisz użyć właściwości obiektu pola.</p> + +<p>Może to być trochę mylące, ale KEY pamięta, że własności <code>width</code> i <code>height</code> elementu zwracają rozmiar, jaki został ustawiony w XUL podczas gdy własności <code>width</code> i <code>height</code> obiektu pola zawracają bieżący rozmiar.</p> + +<h3 id="Hidden_or_Collapsed_Element" name="Hidden_or_Collapsed_Element">Hidden or Collapsed Element</h3> + +<p>Atrybut <code>hidden</code> ukryje element tak ,że nie będzie wyświetlany. Ponieważ nie jest wyświetlany, wszystkie cztery właściwości pozycji i rozmiaru obiektu pola będą miały wartość 0. Kiedy element jest ukryty, jest usuwany z ekranu a obiekty layout (rozmieszczania) są również z niego usuwane. A zatem, ponieważ nie jest nigdzie wyświetlany, nie będzie miał ani pozycji ani rozmiaru.</p> + +<p>Atrybut <code>collapsed</code> będzie miał taki sam wpływ na wizualizację elementu użytkownika, z wyjątkiem tego, że pozostawi element na ekranie i pozostawia obiekty layout (rozmieszczenia) nietknięte, ale zmienia rozmiar elementu na 0. Oznacza to ,że zarówno elementy hidden i collapsed mają zerową szerokość i wysokość, elementy ukryte mają pozycję x i y również 0, podczas gdy elementy zwinięte zachowają swoją pozycję w oknie.</p> + +<p>Dla wyszukania lub modyfikacji stanu ukrycia lub zwinięcia użyj odpowiednich własności jak w poniższym przykładzie.</p> + +<p><span id="Przyk%C5%82ad_2"><a id="Przyk%C5%82ad_2"></a><strong>Przykład 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxobject_2.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxobject_2.xul">Podgląd</a></p> + +<pre><script> +function showPositionAndSize() +{ + var labelbox = document.getElementById('thelabel').boxObject; + + alert("Position is (" + labelbox.x + "," + labelbox.y + + ") and size is (" + labelbox.width + "," + + labelbox.height + ")"); +} +</script> + +<button label="Hide" + oncommand="document.getElementById('thelabel').hidden = true;"/> +<button label="Show" + oncommand="document.getElementById('thelabel').hidden = false;"/> +<button label="Collapse" + oncommand="document.getElementById('thelabel').collapsed = true;"/> +<button label="Uncollapse" + oncommand="document.getElementById('thelabel').collapsed = false;"/> +<button label="Show Position/Size" + oncommand="showPositionAndSize();"/> +<label id="thelabel" value="I am a label"/> +</pre> + +<p>Zauważ, że jeśli ukryjesz lub zwiniesz etykietę, będzie ona traktowana jako ukryta. Będziesz musiał potem odkryć i rozwinąć etykietę aby mogła pojawić się ponownie.</p> + +<h2 id="Porz.C4.85dkowane_element.C3.B3w_XUL" name="Porz.C4.85dkowane_element.C3.B3w_XUL">Porządkowane elementów XUL</h2> + +<p>Obiekt pola może być również użyty dla określania wyświetlania porządku elementów, który może nie być taki sam jak w źródle. Przypomnij sobie ,że właściwości DOM takie, jak <code><a href="/pl/DOM/element.childNodes" title="pl/DOM/element.childNodes">childNodes</a></code>, <code><a href="/pl/DOM/element.firstChild" title="pl/DOM/element.firstChild">firstChild</a></code>, and <code><a href="/pl/DOM/element.nextSibling" title="pl/DOM/element.nextSibling">nextSibling</a></code> mogą być użyte do nawigowania po drzewie dokumentu. Obiekt pola pozwala również nawigować w podobny sposób ale wyszukuje elementy w kolejności wyświetlania.</p> + +<p>Obiekt pola dostarcza kilku własności <code>firstChild</code>, <code>lastChild</code>, <code>nextSibling</code>, <code>previousSibling</code> i <code>parentBox</code>. Funkcje te powinny być samo wyjaśniające przez swoje nazwy. Właściwości te zwracają elementy, na przykład, własność firstChild zwraca pierwszy wyświetlany element potomny. Nie ma odpowiedniej właściwości childNodes dla pola nawigacyjnego; zamiast tego musisz nawigować przez siostrzane właściwości <code>nextSibling</code> lub <code>previousSibling</code>.</p> + +<p>W odróżnieniu od nawigowania przez drzewo DOM, elementy ukryte nie są obejmowane kiedy nawigujemy przez obiekty pola. Oznacza to, że dla pola z sześcioma elementami potomnymi gdzie pierwsze dwa są ukryte, właściwość <code>firstChild</code> zwróci trzeci element. Jednak elementy zwinięte są objęte ponieważ są jeszcze wyświetlane ale nie maja rozmiaru. Na przykład kolejnym siostrzanym polem przycisku 1, w kolejnym przykładzie, będzie przycisk 3 ponieważ przycisk 2 jest ukryty. Ale kolejnym siostrzanym polem dla przycisku 3 będzie przycisk 4 ponieważ jest on tylko zwinięty.</p> + +<p><span id="Przyk%C5%82ad_3"><a id="Przyk%C5%82ad_3"></a><strong>Przykład 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxobject_3.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxobject_3.xul">Podgląd</a></p> + +<pre><hbox> + <button label="Button 1" + oncommand="alert('Next is: ' + this.boxObject.nextSibling.label);"/> + <button label="Button 2" hidden="true"/> + <button label="Button 3" + oncommand="alert('Next is: ' + this.boxObject.nextSibling.label);"/> + <button label="Button 4" collapsed="true"/> +</hbox> +</pre> + +<h3 id="Box_Ordering_Attributes" name="Box_Ordering_Attributes">Box Ordering Attributes</h3> + +<p>Kiedy pole XUL jest wystawione w oknie, elementy są uporządkowane według kilku własności, na przykład orientacji, ich grupy porządkowej i ich kierunku.</p> + +<h5 id="Atrybut_orient" name="Atrybut_orient">Atrybut <code>orient</code></h5> + +<p>Orientacja jest zwykle modyfikowana przez atrybuty <code>orient</code>. jest również odpowiednia właściwość CSS <code><a href="/pl/CSS/-moz-box-orient" title="pl/CSS/-moz-box-orient">-moz-box-orient</a></code>, która może być używa w zastępstwie, w zależności od sytuacji. Atrybut ten był wyjaśniany wcześniej w tym rozdziale o polach.</p> + +<h5 id="Atrybut_ordinal" name="Atrybut_ordinal">Atrybut <code>ordinal</code></h5> + +<p>Atrybut <code>ordinal</code> elementu może być zastosowany do określenia grupy porządkowej tego elementu, lub możesz użyć właściwości CSS <code><a href="/pl/CSS/-moz-box-ordinal-group" title="pl/CSS/-moz-box-ordinal-group">-moz-box-ordinal-group</a></code>.</p> + +<p>Elementy z niższymi wartościami porządkowymi są umieszczone w polu przed elementami z wyższymi wartościami porządkowymi. Na przykład jeśli jedne element ma liczbę porządkową 2, będzie umieszczony przed elementem z liczbą porządkową 3 lub wyższą ale po elemencie z liczbą porządkową 1. Wartością domyślną, jeśli nie został określony porządek, jest 1. Oznacza to ze jeśli chcesz zmienić porządek wyświetlania elementów, często będziesz potrzebował modyfikacji liczb porządkowych kilku elementów.</p> + +<p>Modyfikacja liczby porządkowej nie jest wykonywana powszechnie ponieważ zazwyczaj elementy są umieszczone w różnym porządku w źródle. Może być użyta do przestawienia później pozycji bez modyfikowania DOM. Demonstruje to poniższy przykład.</p> + +<p><span id="Przyk%C5%82ad_4"><a id="Przyk%C5%82ad_4"></a><strong>Przykład 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxobject_4.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxobject_4.xul">Podgląd</a></p> + +<pre><hbox> + <button label="One" oncommand="this.ordinal++;"/> + <button label="Two" oncommand="this.ordinal++;"/> + <button label="Three" oncommand="this.ordinal++;"/> +</hbox> +</pre> + +<p>Jeśli naciśniesz pierwszy przycisk, jego liczb porządkowa zwiększy się o jeden, z 1 do 2. Pojawi się na końcu wiersza ponieważ inne przyciski maja liczbę porządkową 1. Jeśli naciśniesz drugi przycisk, jego liczba porządkowa zwiększy się o jeden i będzie przeniesiony na koniec wiersza. Pozycje z tą samą wartością porządkową pojawią się w tym samym porządku jak w źródle. Jeśli potem naciśniesz ponowie przycisk oznaczony One, jego liczba porządkową zwiększy się do 3 i zostanie przeniesiony na koniec. W końcu, naciśnięcie przycisku oznaczonego Three zwiększy jego liczbę porządkową na 2 i pojawi się pomiędzy pozostałymi dwoma przyciskami.</p> + +<h5 id="Atrybut_dir" name="Atrybut_dir">Atrybut <code>dir</code></h5> + +<p>Końcowym atrybutem porządkowym pola jest atrybut <code>dir</code>, lub właściwość <code><a href="/pl/CSS/-moz-box-direction" title="pl/CSS/-moz-box-direction">-moz-box-direction</a></code> CSS. Jeśli jest ustawiony na <code>reverse</code>, wszystkie elementy potomne w polu lub wyświetlane, są w odwróconym porządku. W polu poziomym, elementy będą wyświetlane od prawej do lewej a w polu pionowym, elementy będą wyświetlane od dołu do góry. Tu mamy przykład:</p> + +<p><span id="Przyk%C5%82ad_5"><a id="Przyk%C5%82ad_5"></a><strong>Przykład 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxobject_5.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxobject_5.xul">Podgląd</a></p> + +<pre><hbox dir="reverse"> + <button label="Left"/> + <button label="Center"/> + <button label="Right"/> +</hbox> +</pre> + +<p>Nawigowanie przez nodes (węzły) używając porządkowania obiektu pola zwróci elementy w kolejności w jakiej są wyświetlane stanowiąc o porządku tworzenia regulacji. Zatem, jeśli zmienisz liczbę porządkową elementu, będzie on miał inną pozycję w porządku pola. Odwrócenie kierunku jednak nie zmienia porządku pola.</p> + +<p>Następnie dowiemy się <a href="/pl/Kurs_XUL/Interfejsy_XPCOM" title="pl/Kurs_XUL/Interfejsy_XPCOM">jak stosujemy obiekty XPCOM</a> z XUL i skryptami.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Manipulowanie_listami" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Interfejsy_XPCOM">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/obiekty_pudełkowe_drzewa/index.html b/files/pl/mozilla/tech/xul/kurs_xul/obiekty_pudełkowe_drzewa/index.html new file mode 100644 index 0000000000..38c5f9ebdf --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/obiekty_pudełkowe_drzewa/index.html @@ -0,0 +1,189 @@ +--- +title: Obiekty pudełkowe drzewa +slug: Mozilla/Tech/XUL/Kurs_XUL/Obiekty_pudełkowe_drzewa +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Tree_Box_Objects +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Szczegóły_widoku_drzewa" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Wprowadzenie_do_RDF">Następny »</a></p> +</div><p></p> + +<p>W tym artykule opisane będą elementy okna drzewa, odpowiedzialne za to jak drzewo wygląda.</p> + +<h2 id="O_obiektach" name="O_obiektach">O obiektach</h2> + +<p>Obiekty okna były opisane we <a href="pl/Kurs_XUL/Szczeg%c3%b3%c5%82y_widoku_drzewa">wcześniejszym artykule</a>. Obiekty okna drzewa, specjalnym rodzajem przeznaczony dla drzew. Okno drzewa wdrąża interfejs <a class="external" href="http://www.xulplanet.com/references/objref/TreeBoxObject.html">TreeBoxObject</a>.</p> + +<h3 id="Przerysowywanie_drzewa" name="Przerysowywanie_drzewa">Przerysowywanie drzewa</h3> + +<p>Poznaliśmy już <code>rowCountChanged()</code>, funkcję okna drzewa. Jest używana, żeby wykazać, że jeden lub więcej wierszy było dodanych lub usuniętych. Drzewo przerysuje dany obszar. Nie musisz wywoływać tej funkcji, gdy wiersz został nieznacznie zmieniony, tzn. zmieniona została etykieta komórki. A takim przypadku lepiej wywołać prostszą funkcję <code>invalidateRow()</code> w celu przerysowania pojedynczego wiersza. Drzewo wywoła widok, by dodać uaktualnienie a następnie zaktualizuje zawartość ekranu.</p> + +<p>Inne przerysowujące funkcje to:</p> + +<ul> + <li><code>invalidateCell()</code> do przerysowywania pojedynczych komórek,</li> + <li><code>invalidateColumn()</code> przerysowuje kolumny,</li> + <li><code>invalidateRange()</code> przerysowuje obszar wierszy,</li> + <li><code>invalidate()</code> przerysowuje the entire tree.</li> +</ul> + +<p>Zauważ, że przerysowanie nie nastąpi do momentu, aż Mozilla nie przerysuje tego w tle.</p> + +<h3 id="Przewijanie_drzewa" name="Przewijanie_drzewa">Przewijanie drzewa</h3> + +<p>Możesz przewijać drzewo używając różnych metod, podobnych do tych z pól listy. Funkcja scrollToRow może być użyta do przewinięcia konkretnego rzędu. Oto prosty przykład:</p> + +<p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_treeboxobject_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_treeboxobject_1.xul">Podgląd</a></p> + +<pre><script> +function doScroll(){ + var value = document.getElementById("tbox").value; + var tree = document.getElementById("thetree"); + + var boxobject = tree.boxObject; + boxobject.QueryInterface(Components.interfaces.nsITreeBoxObject); + boxobject.scrollToRow(value); +} +</script> + +<tree id="thetree" rows="4"> + <treecols> + <treecol id="row" label="Row" primary="true" flex="1"/> + </treecols> + <treechildren> + <treeitem label="Row 0"/> + <treeitem label="Row 1"/> + <treeitem label="Row 2"/> + <treeitem label="Row 3"/> + <treeitem label="Row 4"/> + <treeitem label="Row 5"/> + <treeitem label="Row 6"/> + <treeitem label="Row 7"/> + <treeitem label="Row 8"/> + <treeitem label="Row 9"/> + </treechildren> +</tree> + +<hbox align="center"> + <label value="Scroll to row:"/> + <textbox id="tbox"/> + <button label="Scroll" oncommand="doScroll();"/> +</hbox> +</pre> + +<p>Zauważ, że używamy atrybutów wierszy <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code></code> żeby wyszczególnić, że tylko cztery wiersze są pokazane jednocześnie. To czyni przykład prostszym, w dostrzeżeniu jak pracuje. Zauważ też, że pierwszym wierszem jest 0.</p> + +<p>Funkcja <code>doScroll()</code> pobiera obiekt okna i wywołuje funkcję <code>scrollToRow()</code> z argumentem ustawionym na wartość textbox. Zauważ, że obiekt okna drzewa może być odzyskany tą samą drogą jak obiekty okna używające własności <a class="external" href="http://www.xulplanet.com/references/objref/BoxObject.html">boxObject</a>, jednak musimy wywołać <code>QueryInterface()</code>, by przenieść obiekt okna do bardziej wyspecjalizowanego obiektu okna drzewa. Ogólne funkcje obiektów okien są także dostępne dla drzew.</p> + +<p>Dodatkowe metody przewijania dają funkcje <code>scrollByLines()</code>, <code>scrollByPages()</code> i <code>ensureRowIsVisible()</code>. <code>scrollByLines()</code> przewija w dół lub w górę o pewna liczbę wierszy. Użyj dodatnich liczb by przewinąć w dół, a ujemnych w górę. Funkcja <code>scrollByPages()</code> przewija o pewna liczbę stron i jest automatycznie wywoływana, gdy użytkownik wciska klawisze PAGE UP i PAGE DOWN, gdy drzewo jest wybrane. Strona jest równoważna liczbie widzianych wierszy. Liczbę wierszy nie jest trudno obliczyć, funkcja <code>getPageLength()</code> zwraca liczbę wierszy na stronie. W przykładzie zwróciła być cztery.</p> + +<div class="note"> +<p>Zauważ, ze w Firefox 1.0 i Mozilla 1.7 i wcześniejszych, funkcja <code>getPageLength()</code> jest wywoływana zamiast <code>getPageCount()</code>. Nazwa została zmieniona, ponieważ była mylnie interpretowana, że zwraca liczbę stron, a nie rozmiar. Można określić także liczbę stron, dzieląc liczbę wierszy, przez liczbę wierszy na stronę.</p> +</div> + +<p>Funkcja <code>ensureRowIsVisible()</code> przewinie do rzędu tak, jak <code>scrollToRow()</code>, ale nie w przypadku, gdy wiersz jest już widoczny.</p> + +<h2 id="Wsp.C3.B3.C5.82rz.C4.99dne_kom.C3.B3rki" name="Wsp.C3.B3.C5.82rz.C4.99dne_kom.C3.B3rki">Współrzędne komórki</h2> + +<p>Kilka z najbardziej interesujących funkcji obiektów okna drzewa, mogą być użyte w celu otrzymania niektórych elementów drzewa.</p> + +<ul> + <li>Funkcja <code>getCellAt()</code>może być użyta do otrzymania komórki przy określonej lokalizacji piksela, podczas gdy getRowAt służy do uzyskania wiersz przy danej lokalizacji.</li> + <li>Funkcja <code>getRowAt()</code> może służyć do pobierania wiersza w określonej lokalizacji. Funkcja <code>getRowAt()</code> pobiera dwa argumenty, współrzędną x i y.</li> +</ul> + +<pre>tree.boxObject.getRowAt( 50, 100 ); +</pre> + +<p>Ten przykład zwróci indeks wiersza, z poziomą pozycją 50, a pionową 100. Jedną ważna rzeczą jest to, że współrzędne mierzone jest od górnego, lewego rogu dokumentu, a nie krawędzi drzewa.</p> + +<div class="note">One important thing to note is that the coordinates are measured from the upper left corner of the containing document, not the edge of the tree itself.</div> + +<p>To czyni łatwiejszym przekazanie współrzędnych do funkcji, jak jest przedstawione na przykładzie funkcji <code>getCellAt()</code>.</p> + +<p><span id="Przyk%C5%82ad_2"><a id="Przyk%C5%82ad_2"></a><strong>Przykład 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_treeboxobject_2.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_treeboxobject_2.xul">Podgląd</a></p> + +<pre><script> +function updateFields(event){ + var row = {}, column = {}, part = {}; + var tree = document.getElementById("thetree"); + + var boxobject = tree.boxObject; + boxobject.QueryInterface(Components.interfaces.nsITreeBoxObject); + boxobject.getCellAt(event.clientX, event.clientY, row, column, part); + + if (column.value && typeof column.value != "string") + column.value = column.value.id; + + document.getElementById("row").value = row.value; + document.getElementById("column").value = column.value; + document.getElementById("part").value = part.value; +} +</script> + +<tree id="thetree" flex="1" onmousemove="updateFields(event);"> + <treecols> + <treecol id="utensil" label="Utensil" primary="true" flex="1"/> + <treecol id="count" label="Count" flex="1"/> + </treecols> + <treechildren> + <treeitem> + <treerow> + <treecell label="Fork"/> + <treecell label="5"/> + </treerow> + </treeitem> + <treeitem> + <treerow> + <treecell label="Knife"/> + <treecell label="2"/> + </treerow> + </treeitem> + <treeitem> + <treerow> + <treecell label="Spoon"/> + <treecell label="8"/> + </treerow> + </treeitem> + </treechildren> +</tree> + +<label value="Row:"/> +<label id="row"/> +<label value="Column:"/> +<label id="column"/> +<label value="Child Type:"/> +<label id="part"/> +</pre> + +<p>Funkcja <code>getCellAt()</code> pobiera pięć argumentów, współrzędne i trzy inne argumenty. Pozostałe parametry są użyte dla funkcji żeby zwrócić więcej niż jedna wartość. Zobaczysz pewną liczbę interfejsów, które używają pozostałych parametrów w odniesieniu do <a class="external" href="http://www.xulplanet.com/references/objref/">obiektu XUL-a</a>. Są one wskazane przez słowo ‘out’ przed argumentem. Dla nich, będziesz potrzebować dostarczyć pusty obiekt i funkcja zapełni własność ‘value’ konieczną wartością.</p> + +<p>Trzy parametry będą zapełnione wierszem, kolumną i typem pochodnej pozycji. Wiersz jest indeksem wiersza pod kursorem myszy, ponieważ nazywamy ją współrzędnymi znaczenia <code>mousemove</code>. Jeżeli współrzędna nie jest ponad wierszem, wartość wiersza będzie ustawiona na -1. Kolumna jest obiektem kolumny Mozilla 1.8 i późniejszej. We wcześniejszych wersjach kolumny są identyfikowane przez id kolumny. W późniejszych wersjach istnieje oddzielny obiekt kolumny, który może być zapytany o dane kolumny.</p> + +<p>Następująca linia jest użyta tak, że przykład zadziała na wszystkich wersjach.</p> + +<pre>if (column.value && typeof column.value != "string") + column.value = column.value.id; +</pre> + +<p>Jeżeli kolumna jest ciągiem znaków, używamy Mozilla 1.7 lub wcześniejszej, ale dla wersji późniejszych uzyskujemy id kolumny z obiektu kolumny. Jeżeli tworzysz kod dla wielorakich wersji, powinieneś sprawdzić ten powyżej.</p> + +<p>Ostatni argument dla <code>getCellAt()</code> pochodna pozycji wypisze, które pole jest zapełnione ciągiem znaków zależnym od tego, przy której części komórki jest współrzędna. Jeżeli poruszasz myszą dookoła powyższego przykładu, możesz zauważyć, że etykieta zmienia się pomiędzy ‘text’ i ‘cell’. Wartość ‘text’ wskazuje miejsce gdzie tekst mógłby być umieszczony, a cell wskazuje obszar dookoła tekstu. Ostateczną wartością może być ‘image’, jeżeli obraz znajduje się w komórce drzewa, a współrzędna jest odpowiednia dla miejsca gdzie znajduje się obraz.</p> + +<p>W celu odwrócenia tego, czyli uzyskania komórki dla danej współrzędnej, użyj funkcji <code>getCoordsForCellItem()</code>. Pobiera ona siedem argumentów jak opisane poniżej.</p> + +<pre>var x = {}, y = {}, width = {}, height = {}; +if (typeof tree.columns != "undefined") column = tree.columns[column]; +tree.boxObject.getCoordsForCellItem( row, column, part, x, y, width, height ); +</pre> + +<p>Wiersz, kolumna, I cześć argumentów, podobnych do tych zwróconych z funkcji <code>getCellAt()</code>. Znowu kolumna powinna być ciągiem znaków lub obiektem kolumny, zależnie od tego, której wersji używasz. Typ części komórki może być użyty do otrzymania współrzędnych tekstu, całej komórki, krętki lub obrazu w komórce. Te same wartości jak używa funkcja <code>getCellAt()</code>. Funkcja <code>getCoordsForCellItem()</code> zwraca współrzędne x i y, jako parametry wyjściowe.</p> + +<p>Następnie, zobaczymy RDF, który może zostać użyty do automatycznego rozmieszczenia drzew i innych elementów.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Szczegóły_widoku_drzewa" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Wprowadzenie_do_RDF">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/okna_otwierania_i_zapisywania_plików/index.html b/files/pl/mozilla/tech/xul/kurs_xul/okna_otwierania_i_zapisywania_plików/index.html new file mode 100644 index 0000000000..4135880c83 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/okna_otwierania_i_zapisywania_plików/index.html @@ -0,0 +1,95 @@ +--- +title: Okna otwierania i zapisywania plików +slug: Mozilla/Tech/XUL/Kurs_XUL/Okna_otwierania_i_zapisywania_plików +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Open_and_Save_Dialogs +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Tworzenie_okien_dialogowych" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Tworzenie_kreatora">Następny »</a></p> +</div><p></p> + +<p>Często spotykanym typem okien są takie, z których użytkownik ma możliwość otwierania lub zapisywana plików.</p> + +<h2 id="Wyb.C3.B3r_pliku" name="Wyb.C3.B3r_pliku">Wybór pliku</h2> + +<p>Okno wyboru pliku jest najczęściej używane przy komendach z menu 'Otwórz' i 'Zapisz', ale można też go użyć w innym miejscu, kiedykolwiek użytkownik potrzebuje wybrać plik. Interfejs <a href="pl/XPCOM">XPCOM</a> <a href="pl/NslFilePicker">nslFilePicker</a> jest używany w celu zaimplementowania okna wyboru pliku.</p> + +<div class="note">Note that the file picker only works from chrome URLs.</div> + +<p>Można użyć tego okna w trzech trybach:</p> + +<ul> + <li><strong>Otwórz</strong> - użytkownik jest proszony o wybór pliku do otwarcia</li> + <li><strong>Pobierz folder</strong> - użytkownik jest proszony o wybór katalogu (folderu)</li> + <li><strong>Zapisz</strong> - użytkownik jest proszony o wybór nazwy w celu zachowania pliku</li> +</ul> + +<p>Wygląd okna jest inny dla każdego z powyższych typów i dodatkowo różni się w zależności od platformy. Kiedy użytkownik wybierze plik lub folder, wtedy można z niego czytać lub do niego zapisywać.</p> + +<p>Interfejs okna wyboru pliku <a href="pl/NslFilePicker">nslFilePicker</a> jest odpowiedzialny za wyświetlanie okna w jednym z trzech modów. Można ustawić kilka cech tego okna za pomocą wspomnianego interfejsu. Kiedy okno zostanie zamknięte, można użyć funkcji interfejsu, aby pobrać wybrany plik.</p> + +<h3 id="Tworzenie_okna_do_wyboru_pliku" name="Tworzenie_okna_do_wyboru_pliku">Tworzenie okna do wyboru pliku</h3> + +<p>Na początek należy stworzyć komponent okna do wyboru pliku i zainicjować go.</p> + +<pre>var nsIFilePicker = Components.interfaces.nsIFilePicker; +var fp = Components.classes["@mozilla.org/filepicker;1"].createInstance(nsIFilePicker); +fp.init(window, "Select a File", nsIFilePicker.modeOpen); +</pre> + +<p>Najpierw, tworzymy nowy obiekt "wybieracza pliku", który jest przechowywany w zmiennej "fp". Funkcja "init" jest używana w celu inicjalizacji "wybieracza". Funkcja ta ma 3 argumenty: okno macierzyste, które otwiera okno wyboru, tytuł okna wyboru i jego mod. W przykładzie powyżej mod to "modeOpen", którego używamy dla okna wyboru otwieranego pliku. Można też użyć modu <code>modeGetFolder</code> i <code>modeSave</code>. Te tryby to stałe interfejsu <code>nsIFilePicker</code>.</p> + +<h3 id="Default_directory_and_filters" name="Default_directory_and_filters">Default directory and filters</h3> + +<p>Istnieją dwie cechy okna wyboru, które można ustawić przed jego wyświetleniem.</p> + +<ul> + <li>Pierwsza to domyślny folder, który otwiera się w momencie otwarcia okna wyboru.</li> + <li>Druga to filtr, który określa listę typów plików wyświetlanych w oknie. Można użyć tego np. żeby ukryć wszystkie pliki poza .html.</li> +</ul> + +<p>Domyślny folder można zmienić przez ustawianie własności <code>displayDirectory</code> obiektu na wybrany folder. Folder ten powinien być obiektem <code><a href="pl/NsILocalFile">nsILocalFile</a></code>. Jeśli nie ustalisz domyślnego katalogu, będzie on wybrany automatycznie. Aby dodać filtry, wywołaj funkcję <code>appendFilters()</code>, aby ustalić typy plików do wyświetlania.</p> + +<pre>fp.appendFilters(nsIFilePicker.filterHTML | nsIFilePicker.filterImages); +fp.appendFilters(nsIFilePicker.filterText | nsIFilePicker.filterAll); +</pre> + +<ul> + <li>Pierwsza linijka z przykładu dodaje filtry dla plików HTML i obrazów, więc użytkownik będzie mógł wybrać tylko takie typy plików. Sposób, w jaki jest to robione zależy od platformy. Na niektórych każdy filtr trzeba oddzielić od pozostałych.</li> + <li>Druga linijka w przykładzie dodaje filtry dla plików tekstowych oraz dla wszystkich rodzajów. Tak więc użytkownik będzie miał możliwość wyświetlenia albo tylko plików tekstowych albo wszystkich typów.</li> +</ul> + +<p>Można również użyć <code>filterXML</code> lub <code>filterXUL</code>, odpowiednio dla plików XML i XUL. Jeśli chcesz filtrować inne typy plików, możesz użyć funkcji <code>appendFilter()</code>:</p> + +<pre>fp.appendFilter("Audio Files","*.wav; *.mp3"); +</pre> + +<p>W przykładzie powyżej dodano filtr dla plików wave i mp3. Pierwszy argument to tytuł typu pliku, a drugi do lista masek plików rozdzielona średnikami. Można dodać tyle masek ile się chce. Można wywoływać <code>appendFilter()</code> tak często, jak tylko jest potrzebne dodawanie filtrów. Kolejność, w jakiej je podajesz, determinuje ich ważność. Typowo pierwszy w kolejności typ wybierany jest jako domyślny.</p> + +<h3 id="Wybranie_i_pobranie_pliku" name="Wybranie_i_pobranie_pliku">Wybranie i pobranie pliku</h3> + +<p>Wreszcie można otworzyć okno wywołując funkcję <code>show()</code>. Nie potrzebuje ona argumentów, ale zwraca kod statusu, który oznacza co wybrał użytkownik. Zauważmy, że funkcja nie zwróci nic dopóki użytkownik nie wybierze pliku. Zwraca ona jedną z następujących trzech stałych:</p> + +<ul> + <li><strong>returnOK</strong> - użytkownik wybrał plik i nacisnął 'OK'. Plik wybrany przez użytkownika będzie przechowywany we własności <code>file</code> w oknie wyboru.</li> + <li><strong>returnCancel</strong> - użytkownik nacisnął 'Anuluj'.</li> + <li><strong>returnReplace</strong> - w trybie zapisu, ta wartość identyfikuje plik, który użytkownik wybrał do zastąpienia (returnOK zostanie zwrócone, kiedy użytkownik wpisze nazwę nowego pliku).</li> +</ul> + +<p>Powinieneś sprawdzić zwracaną wartość i następnie pobrać obiekt pliku z okna wyboru pliku stosując własność <code>file</code>.</p> + +<pre>var res = fp.show(); +if (res == nsIFilePicker.returnOK){ + var thefile = fp.file; + // --- do something with the file here --- +} +</pre> + +<p>Następnie, zobaczymy <a href="pl/Kurs_XUL/Tworzenie_kreatora">jak utworzyć kreator</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Tworzenie_okien_dialogowych" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Tworzenie_kreatora">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/panele_treści/index.html b/files/pl/mozilla/tech/xul/kurs_xul/panele_treści/index.html new file mode 100644 index 0000000000..dcf3f20fdf --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/panele_treści/index.html @@ -0,0 +1,83 @@ +--- +title: Panele treści +slug: Mozilla/Tech/XUL/Kurs_XUL/Panele_treści +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Content_Panels +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Siatki" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Rozdzielacze">Następny »</a></p> +</div><p></p> + +<p>W tym artykule, zobaczymy jak dodawać panele potrafiące wyświetlić stronę HTML lub inne pliki XUL.</p> + +<h2 id="Dodawanie_paneli_potomnych" name="Dodawanie_paneli_potomnych">Dodawanie paneli potomnych</h2> + +<p>Może kiedyś będziesz potrzebować załadować część dokumentu z innego źródła lub zmienić część okna. Dobrym przykładem jest kreator krok-po-kroku, który będzie zawierał pewną liczbę ekranów, z różnymi układami pytań. Kiedy użytkownik kliknie przycisk Dalej, wyświetlany będzie następny ekran.</p> + +<p>Możesz utworzyć interfejs kreatora otwierając nowe okno dla każdego ekranu. Są jednak trzy problemy z tym związane. Po pierwsze, kolejne okna mogą otwierać się w różnych miejscach (to jeszcze da się pominąć). Po drugie, elementy takie jak przyciski Dalej i Wstecz są takie same w całym kreatorze. Lepiej po prostu zmieniać zawartość kreatora. Po trzecie, koordynowanie skryptów uruchamianych w oddzielnych oknach jest trudne.</p> + +<p>XUL posiada element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/wizard" title="wizard">wizard</a></code></code> (kreator), który może być zastosowany do tworzenia kreatorów. Jest on opisany <a href="pl/Kurs_XUL/Tworzenie_kreatora">dalszej części kursu</a>.</p> + +<p>Innym sposobem jest użycie elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code></code>, który działa tak samo jak jego HTML-owy odpowiednik. Otwiera on inny dokument w tym samym oknie (ramce). Jego dużym plusem jest to, że może być umieszczony gdziekolwiek w oknie i może ładować swą zawartość z oddzielnego pliku. URL pliku, który ma być wyświetlony w ramce ustawia się za pomocą atrybutu <code><code id="a-src"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/src">src</a></code></code>. Ten adres URL może wskazywać na jakikolwiek plik, najczęściej wskazuje on na plik HTML lub XUL. Możesz użyć skryptu aby zmienić zawartość ramki (<code><code><a href="/pl/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code></code>) bez wpływu na główne okno.</p> + +<p>W przeglądarce Mozilla, obszar w którym wyświetlana strona WWW jest stworzony właśnie jako <code>iframe</code>. Kiedy użytkownik klika na odnośnik w dokumencie lub wpisuje adres URL, źródło ramki jest zmieniane.</p> + +<h5 id="Przyk.C5.82ad_iframe" name="Przyk.C5.82ad_iframe">Przykład <code>iframe</code></h5> + +<p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_cpanels_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_cpanels_1.xul">Podgląd</a></p> + +<pre><toolbox> + <toolbar id="nav-toolbar"> + <toolbarbutton label="Wstecz"/> + <toolbarbutton label="Dalej"/> + <textbox id="urlfield"/> + </toolbar> +</toolbox> + +<iframe id="content-body" src="http://www.mozilla.org/index.html" flex="1"/> +</pre> + +<p>Powyższy przykład stworzył bardzo prosty interfejs przeglądarki web. Okno zawiera 2 elementy: <code><code><a href="/pl/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></code> i <code><code><a href="/pl/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code></code>. Przyciski (<code><a href="/pl/docs/Mozilla/Tech/XUL/button" title="button">button</a></code>) <tt>Dalej</tt> i <tt>Wstecz</tt> oraz pole do wpisywania adresu URL zostały po prostu dodane do paska narzędzi. Strony otwierają się wewnątrz <code>iframe</code>. W tym przypadku domyślnie otworzy się witryna Mozilli.</p> + +<p>Ten przykład nie działa w pełni. Następnie możesz dodać skrypt, który zmienia atrybut <code><code id="a-src"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/src">src</a></code></code> w odpowiednim momencie, np. kiedy użytkownik wciśnie klawisz <tt>Enter</tt>.</p> + +<h2 id="Przegl.C4.85darki" name="Przegl.C4.85darki">Przeglądarki</h2> + +<p>Oto drugi typ panelu treści, stosując tag <code><code><a href="/pl/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code></code>. Możesz to użyć kiedy chcesz stworzyć ramkę wyświetlającą zawartość jak przeglądarka. Właściwie ramka <code><code><a href="/pl/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code></code> też to potrafi zrobić, ale przeglądarka posiada więcej rozmaitych cech. Na przykład przeglądarka zapamiętuje historię odwiedzanych stron dla użytku z przyciskami <tt>wstecz</tt> i <tt>Dalej</tt>. <code><code><a href="/pl/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code></code> potrafi również załadować strony z flagą "referer" lub inną. Najważniejsze jest jednak to, że tag <code>browser</code> powinien być użyty, kiedy chcesz stworzyć interfejs podobny do przeglądarki, a <code><code><a href="/pl/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code></code> może stworzyć tylko prosty panel.</p> + +<p>Podobny element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tabbrowser" title="tabbrowser">tabbrowser</a></code></code>, posiada funkcjonalność <code>browser</code>, lecz posiada również pasek z zakładkami do otwierania wielu stron naraz. Jest to używane w Mozilli dla jej "zakładkowego" interfejsu. Element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tabbrowser" title="tabbrowser">tabbrowser</a></code></code> jest w rzeczywistości zbudowany z elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></code>, na którym są umieszczone elementy przeglądarki. Te same typy przeglądarek oferują podobną kontrolę stron, jakie są w nich wyświetlane.</p> + +<h5 id="Przyk.C5.82ad_browser" name="Przyk.C5.82ad_browser">Przykład <code>browser</code></h5> + +<p><span id="Przyk%C5%82ad_2"><a id="Przyk%C5%82ad_2"></a><strong>Przykład 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_cpanels_2.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_cpanels_2.xul">Podgląd</a></p> + +<pre><browser src="http://www.mozilla.org" flex="1"/> +</pre> + +<p>Tak samo jak w <code><code><a href="/pl/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code></code>, możesz wyszczególnić URL w przeglądarce stosując atrybut <code><code id="a-src"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/src">src</a></code></code>. Dla elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tabbrowser" title="tabbrowser">tabbrowser</a></code></code>, nie możesz ustawić URL tak jak tutaj, ponieważ to nie wyświetla jednego URL. Musisz użyć skryptu i wywołać funkcję <code>loadURI</code>.</p> + +<p>Są trzy klasy przeglądarki, właściwe do typu zawartości, jaki zamierzasz wyświetlić. Typ może być ustawiony za pomocą atrybutu <code><a href="pl/XUL/Atrybut/browser.type">type</a></code>.</p> + +<p>Pierwszy typ, domyślny (default) jest używany kiedy nie wybierzesz typu. W tym wypadku zawartość załadowana do przeglądarki jest traktowana jakby była częścią tej samej aplikacji i ma dostęp do zewnętrznego okna. To znaczy, że jeśli skrypt załadowany do takiej przeglądarki chce dostać całe okno, zostanie otwarty w nowym oknie.</p> + +<p>To może być odpowiednie dla panelu-dziecka który jest częścią twojej aplikacji, lecz niezbyt, gdy chcesz przeglądarkę wczytującą stronę web. Natomiast chcesz pozwolić stronie na dostęp tylko do jej samej. Powinieneś zauważyć, że paski narzędzi, pasek statusu i parę innych rzeczy okna Mozilli jest stworzone z elementu tabbrowser kształtującego obszar główny. Ten wewnętrzny obszar wyświetla stronę web i strona ta nie może uzyskać dostępu do reszty okna. Dzieje się tak dzięki drugiemu typowi przeglądarki, użytym dzięki atrybutowi <code><a href="pl/XUL/Atrybut/browser.type">type</a></code> ustawionego na wartość content. Oto przykład:</p> + +<div class="sample"> +<pre><browser src="http://www.mozilla.org" type="content" flex="1"/> +</pre> +</div> + +<div class="note"><b>Ważne</b>: Musimy ustawić atrybut <code><a href="pl/XUL/Atrybut/browser.type">type</a></code> poprawnie, jeśli chcemy wyświetlić strony internetowe wewnątrz elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code></code>.</div> + +<p>Jest to ważne, żeby ustawić atrybut <code>type</code> poprawnie, jeśli chcesz wyświetlać strony wewnątrz elementu browser. Element <code>tabbrowser</code> ustawia wartość <code>content</code> automatycznie we wszystkich swoich wewnętrznych przeglądarkach. Tak więc nie musisz ustawiać go, jeśli używasz elementu <code>tabbrowser</code>.</p> + +<p>Trzeci typ jest używany by wskazywać główną zawartość do środka okna. <code>tabbrowser</code> ustawia to automatycznie dla tej przeglądarki, która jest aktualnie używana. Lecz możesz ustawić to zmieniając atrybut <code><a href="pl/XUL/Atrybut/browser.type">type</a></code> elementu browser, jeśli masz ich (przeglądarek) więcej w jednym oknie, np. jeśli masz sidebara wyświetlającego jakąś zawartość cały czas. Ustaw atrybut <code>type</code> na wartość <code>content-primary</code>. To działa jak wartość <code>content</code>, lecz daje to możliwość odwołania się do tego obiektu bez miany fokusu. To ułatwia napisanie skryptu mającego dostęp do głównej przeglądarki. Ta własność jest stworzona specjalnie dla elementu <code>tabbrowser</code>, gdyż obiekt ją posiadający jest ciągle widoczny i jest możliwy do niego dostęp bez przerwy.</p> + +<p>Następnie, zobaczymy jak zrobić <a href="pl/Kurs_XUL/Rozdzielacze">rozdzielacz</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Siatki" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Rozdzielacze">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/paski_narzędzi/index.html b/files/pl/mozilla/tech/xul/kurs_xul/paski_narzędzi/index.html new file mode 100644 index 0000000000..952b09f3b6 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/paski_narzędzi/index.html @@ -0,0 +1,85 @@ +--- +title: Paski narzędzi +slug: Mozilla/Tech/XUL/Kurs_XUL/Paski_narzędzi +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Toolbars +--- +<p> </p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Paski_przewijania" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Proste_paski_menu">Następny »</a></p> +</div><p></p> +<p>Pasek narzędzi zazwyczaj jest umieszczony wzdłuż góry okna i zawiera parę przycisków, które pełnią przypisane im funkcje. XUL posiada metodę do tworzenia przycisków.</p> +<h3 id="Dodawanie_paska_narz.C4.99dzi" name="Dodawanie_paska_narz.C4.99dzi">Dodawanie paska narzędzi</h3> +<p>Tak jak wiele elementów w <a href="pl/XUL">XUL</a>, paski narzędzi są typem pudełka. Zazwyczaj w pasku narzędzi umieszczone są <a href="pl/Kurs_XUL/Dodawanie_przycisk%c3%b3w">przyciski</a>, ale może się w nim znajdować dowolny element. Na przykład okno przeglądarki Mozilla posiada w pasku narzędzi <a href="pl/Kurs_XUL/Kontrolki_wej%c5%9bcia">pole tekstowe</a>, które wyświetla adres URL.</p> +<p>Paski narzędzi mogą być umieszczone na jakimkolwiek boku okna, albo poziomo albo pionowo. Oczywiście zwykle nie położyłbyś pola tekstowego w pionowym pasku narzędzi. W rzeczywistości, ponieważ paski narzędzi są tylko pudełkami, mogą zostać umieszczone gdziekolwiek chcemy, również pośrodku okna. Zwykle jednakże ustawiamy pasek narzędzi tak, aby pojawił się wzdłuż góry okna. Kiedy więcej niż jeden pasek narzędzi jest położony obok drugiego, to zwykle są one pogrupowane w 'toolbox'.</p> +<p>Po lewej stronie paska narzędzi znajduje się wcięcie, które, jeśli klikniesz, to zwinie pasek narzędzi i będzie tylko widoczne owe wcięcie. Wcięcie to nazywamy + <i> + grippy</i> + . Kiedy kilka pasków narzędzi umieścimy w tym samym pudełku, uchwyty zostaną zwinięte do pojedynczego rzędu, dzięki czemu mniej miejsca zostanie zajęte. Pionowe paski narzędzi mają uchwyty nad sobą. Zazwyczaj są one zwijane, jeśli użytkownik potrzebuje w oknie więcej przestrzeni dla głównego okna.</p> +<h5 id="Prosty_toolbar_wewn.C4.85trz_toolbox" name="Prosty_toolbar_wewn.C4.85trz_toolbox">Prosty <code>toolbar</code> wewnątrz <code>toolbox</code></h5> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_toolbar_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_toolbar_1.xul">Podgląd</a></p> +<div class="float-right"> + <img alt="grafika:toolbar1.png"></div> +<pre><toolbox> + <toolbar id="nav-toolbar"> + <toolbarbutton label="Wstecz"/> + <toolbarbutton label="Dalej"/> + </toolbar> +</toolbox> +</pre> +<p>Został utworzony pasek narzędzi zawierający dwa przyciski; przycisk <code>Wstecz</code> oraz przycisk <code>Dalej</code>. Pasek został umieszczony wewnątrz elementu <code>toolbox</code>. Zastosowane zostały cztery nowe znaczniki, które są omówione poniżej:</p> +<dl> + <dt> + <code><a href="/pl/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code> </dt> + <dd> + Pudełko zawierające paski narzędzi.</dd> + <dt> + <code><a href="/pl/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code> </dt> + <dd> + Pojedynczy pasek narzędzi zawierający elementy, takie jak przyciski. Pasek narzędzi może być zwinięty przy pomocy chwytaka, pojawiającego się po lewej stronie lub powyżej paska.</dd> + <dt> + <code><a href="/pl/docs/Mozilla/Tech/XUL/toolbarbutton" title="toolbarbutton">toolbarbutton</a></code> </dt> + <dd> + Przycisk na pasku narzędzi, który posiada takie same właściwości jak zwykły przycisk, od którego różni się zazwyczaj sposobem wyświetlania.</dd> + <dt> + <code><a href="/pl/docs/Mozilla/Tech/XUL/toolbargrippy" title="toolbargrippy">toolbargrippy</a></code> </dt> + <dd> + Element tworzący chwytak, stosowany do zwijania oraz rozwijania paska narzędzi. Nie musimy go dodawać, jako że zostanie dodany automatycznie.</dd> +</dl> +<p><code><code><a href="/pl/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code></code> jest głównym elementem, który utworzy rzeczywisty pasek narzędzi. Wewnątrz niego są umieszczone oddzielne pozycje paska narzędzi, są to zazwyczaj przyciski, ale mogą to być również elementy innego typu. Pasek narzędzi powinien posiadać atrybut <code><code id="a-id"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/id">id</a></code></code>, w przeciwnym wypadku grippy nie będzie mógł zwinąć lub rozwinąć paska narzędzi w prawidłowy sposób.</p> +<p>W przykładzie powyżej został stworzony tylko jeden pasek narzędzi. Wiele pasków może zostać utworzonych poprzez dodanie elementów <code><code><a href="/pl/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code></code> po pierwszym elemencie.</p> +<p>Element typu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></code> jest kontenerem dla pasków narzędzi. W niektórych programach znajduje się kilka pasków wzdłuż góry okna. Wszystkie one mogą zostać umieszczone wewnątrz elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></code>.</p> +<p>Nie musisz umieszczać elementów <code>toolbar</code> wewnątrz <code>toolbox</code>.</p> +<p>Grippy jest tworzony poprzez element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/toolbargrippy" title="toolbargrippy">toolbargrippy</a></code></code>. Zastosowanie tego elementu poza paskiem narzędzi mija się z celem, ponieważ nie będzie miał czego zwinąć. Można jednak zmienić jego wygląd. Żeby schować grippy, należy do elementu <code>toolbar</code> dodać atrybut <code><code id="a-grippyhidden"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/grippyhidden">grippyhidden</a></code></code> ustawiony na wartość <code>true</code>.</p> +<div class="float-right"> + Te same paski, dwa z nich zwinięte<br> + <p><img alt="grafika:toolbar3.jpg"></p> +</div> +<p>Poniżej przykład elementu <code>toolbox</code> zawierający wewnątrz trzy paski narzędzi<br> + <img alt="grafika:toolbar2.jpg"></p> +<div class="highlight"> + <h4 id="Nasz_przyk.C5.82ad:_Znajd.C5.BA_pliki" name="Nasz_przyk.C5.82ad:_Znajd.C5.BA_pliki">Nasz przykład: <code>Znajdź pliki</code></h4> + <p>W celach demonstracyjnych dodajmy pasek narzędzi do okna dialogowego <code>Znajdź pliki</code>. Będzie on zawierał dwa przyciski, <code>Otwórz</code> oraz <code>Zapisz</code>, które pozwolą na zapisanie wyników wyszukiwania oraz ich późniejsze otwarcie.</p> + <p> </p> + <pre class="eval"><vbox flex="1"> + <span class="highlightblue"><toolbox> + <toolbar id="findfiles-toolbar"> + <toolbarbutton id="opensearch" label="Otwórz"/> + <toolbarbutton id="savesearch" label="Zapisz"/> + </toolbar> + </toolbox></span> + <tabbox> +</pre> + <p> </p> + <div class="float-right"> + <img alt="grafika:toolbar5.png"></div> + <p>Został dodany pasek narzędzi z dwoma przyciskami. Na obrazku można zobaczyć, że zostały umieszczone poziomo na górze okna. Grippy także został wyświetlony po lewej stronie paska narzędzi. Zauważ, że pasek narzędzi został umieszczony wewnątrz pionowego pola powyżej pudełka kart. Jest to spowodowane koniecznością pionowego ułożenia, tak aby pasek narzędzi mógł się pojawić ponad pozostałymi elementami.</p> + <p>Nasz przykład: <code>Znajdź pliki</code>: <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-toolbar.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-toolbar.xul">Podgląd</a></p> +</div> +<p>W następnym artykule dowiemy się <a href="pl/Kurs_XUL/Proste_paski_menu">jak dodać do okna pasek menu</a>.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Paski_przewijania" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Proste_paski_menu">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/paski_postępu/index.html b/files/pl/mozilla/tech/xul/kurs_xul/paski_postępu/index.html new file mode 100644 index 0000000000..5be89be3bd --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/paski_postępu/index.html @@ -0,0 +1,59 @@ +--- +title: Paski postępu +slug: Mozilla/Tech/XUL/Kurs_XUL/Paski_postępu +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Progress_Meters +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Kontrolki_list" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dodawanie_elementów_HTML">Następny »</a></p> +</div> +<p></p><p>W tym artykule przyjrzymy się bliżej sposobom tworzenia pasków postępu. +</p> +<h3 id="Dodanie_paska_post.C4.99pu" name="Dodanie_paska_post.C4.99pu"> Dodanie paska postępu </h3> +<p>Pasek postępu jest paskiem, który wyświetla, jaka cześć zadania jest już wykonana. Najczęściej spotykamy się z paskiem postępu podczas pobierania plików lub podczas trwania długotrwałych operacji. XUL posiada zdefiniowany element <code><a href="/pl/docs/Mozilla/Tech/XUL/progressmeter" title="progressmeter">progressmeter</a></code>, który stosuje się do tworzenia nowego paska. Rozróżniamy dwa typy pasków postępu: <i>określony</i> i <i>nieokreślony</i>. +</p><p>Określone paski postępu są stosowane, gdy znamy długość czasu, jaki będzie potrzebny do wykonania danej operacji. Pasek postępu będzie się wypełniał, gdy będzie już pełny, operacja powinna zostać zakończona. Najczęściej wykorzystywanymi okienkami, które stosują ten typ paska, to okienka dialogowe pobierania pliku, oczywiście, jeśli znany jest rozmiar pliku. +</p><p>Nieokreślone paski postępu stosujemy, gdy nie znamy długości czasu, jaki będzie potrzebny do wykonania danej operacji. Pasek postępu będzie posiadał animację wypełniających się słupków lub wypełniającego się paska, zależy to od wykorzystywanej platformy systemowej oraz ustawionego motywu przeglądarki. +</p><p>Określony pasek postępu: +<img alt="Grafika:prog-det.png"> +</p><p>Nieokreślony pasek postępu: +<img alt="Grafika:prog-udet.png"> +</p><p>Pasek postępu posiada następującą składnię: </p> +<pre><progressmeter + id="identifier" + mode="determined" + value="50%"/> +</pre> +<p>Atrybutami są: </p> +<dl><dt> <code id="a-id"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/id">id</a></code> </dt><dd> Unikalny identyfikator paska postępu, +</dd><dt> <a href="pl/XUL/Atrybut/progressmeter.mode">mode</a> </dt><dd> Typ paska postępu. Jeśli jest ustawiony na wartość <code>determined</code>, pasek postępu jest określonym paskiem postępu, wypełniającym się do momentu ukończenia wykonywanego zadania. Jeśli jest ustawiony na wartość <code>undetermined</code>, pasek postępu jest nieokreślony, przy którym nieznany jest czas trwania operacji. Jeśli typ paska nie zostanie ustawiony, to przyjęta zostanie wartość domyślna - <code>determined</code>. +</dd><dt> <code id="a-value"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/value">value</a></code> </dt><dd> Bieżąca wartość paska postępu. Stosujemy dla określonych pasków postępu. Wartość wyrażona w procentach powinna zawierać się w przedziale od 0% do 100%. Wartość byłaby zmieniana przez skrypt, kiedy zadanie zakończy się. +</dd></dl> +<div class="highlight"> +<h5 id="Przyk.C5.82ad_okna:_Znajd.C5.BA_pliki" name="Przyk.C5.82ad_okna:_Znajd.C5.BA_pliki"> Przykład okna: <code>Znajdź pliki</code> </h5> +<p>Dodajmy pasek postępu do naszego okna dialogowego <code>Znajdź pliki</code>. Normalnie powinno się stosować nieokreślony pasek postępu, ponieważ nie wiemy jak wiele plików będziemy szukać lub jak długo będzie trwało szukanie. Jednakże, możemy dodać jeden normalny pasek jako animowany pasek postępu, który może być nieokreślony podczas programowania. Pasek postępu będzie wyświetlany normalnie tylko podczas szukania. W kolejnych artykułach dodamy skrypty do uruchomienia paska postępu. +</p> +<pre class="eval"><hbox> + + <span class="highlightred"><progressmeter value="50%" style="margin: 4px;"/></span> + + <spacer flex="1"/> +</hbox> +</pre> +<p><br> +Wartość ustawiona jest na 50%, aby widoczny był pasek postępu w oknie. Margines został ustawiony na 4 piksele tak, aby pasek był o tyle oddalony od brzegu okna. Jak wcześniej wspomniano, chcemy, aby pasek postępu był wyświetlany jedynie podczas szukania plików. Skrypt będzie go wyświetlał oraz ukrywał, zależnie od konieczności. +</p><p><br> +Przykład: <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-progress.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-progress.xul">Podgląd</a> +</p><p><img alt="Grafika:progress1.png"> +</p> +</div> +<p>W kolejnym artykule dowiemy się, w jaki sposób <a href="pl/Kurs_XUL/Dodawanie_element%c3%b3w_HTML">dodać elementy do okna, stosując język HTML</a>. +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Kontrolki_list" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dodawanie_elementów_HTML">Następny »</a></p> +</div> +<p></p> +<div class="noinclude"> +</div> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/paski_przewijania/index.html b/files/pl/mozilla/tech/xul/kurs_xul/paski_przewijania/index.html new file mode 100644 index 0000000000..19cbb05912 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/paski_przewijania/index.html @@ -0,0 +1,57 @@ +--- +title: Paski przewijania +slug: Mozilla/Tech/XUL/Kurs_XUL/Paski_przewijania +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Scroll_Bars +--- +<p> +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Rozdzielacze" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Paski_narzędzi">Następny »</a></p> +</div> +<p></p><p>W tym artykule dowiemy się, jak dodać paski przewijania do okna. +</p> +<h3 id="Dodawanie_pask.C3.B3w_przewijania_do_okna" name="Dodawanie_pask.C3.B3w_przewijania_do_okna"> Dodawanie pasków przewijania do okna </h3> +<p>Pasek przewijania jest zazwyczaj stosowany do poruszania się po większych dokumentach. Możemy go także stosować, aby wskazywać wartości, które zmieniają się w określonym zakresie. Paski przewijania można tworzyć na wiele sposobów. W języku XUL można go uzyskać za pomocą znacznika <code><code><a href="/pl/docs/Mozilla/Tech/XUL/scrollbar" title="scrollbar">scrollbar</a></code></code>. Niektóre elementy jak pola tekstowe, również będą zawierać paski przewijania, kiedy ich zawartość wewnątrz pudełka będzie za duża. +</p><p>W tym artykule omówimy stworzenie pojedynczego paska przewijania. Użytkownik będzie mógł ustawić wartości paska przewijania, aby go dostosować. Prawdopodobnie nie będziesz musiał stosować tego zbyt często. Pasek przewijania jest stworzony z kilku części: suwaka, który jest jego główną częścią wraz z dopasowanym pudełkiem jego ruchu, i dwóch przycisków wraz ze strzałkami na jego końcach. Pasek przewijania tworzy wszystkie te elementy automatycznie. +</p><p><img alt="grafika:scroll1.png"> +</p><p>Składnia polecenia tworzącego pasek przewijania jest następująca: </p> +<pre><scrollbar + id="identyfikator" + orient="horizontal" + curpos="20" + maxpos="100" + increment="1" + pageincrement="10"/> +</pre> +<p>Atrybuty są następujące: </p> +<dl><dt> <code id="a-id"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/id">id</a></code> +</dt><dd> Unikalny identyfikator paska przewijania. +</dd></dl> +<dl><dt> <code id="a-orient"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/orient">orient</a></code> +</dt><dd> Określa kierunek paska przewijania. Domyślna wartością jest <code>horizontal</code>, która tworzy pasek przewijania, który możemy przesuwać od lewej do prawej. Możemy także określić <code>vertical</code>, który tworzy pasek przewijania, który przesuwamy od góry do dołu. </dd></dl> +<dl><dt> <code id="a-curpos"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/curpos">curpos</a></code> +</dt><dd> Sygnalizuje aktualną pozycję bieżącą paska przewijania. Przyjmuje wartości z zakresu od 0 do wartości <code>maxpos</code>. Nie potrzebuje wartości jednostek. Domyślnie jest ustawiony na 0. +</dd></dl> +<dl><dt> <code id="a-maxpos"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/maxpos">maxpos</a></code> +</dt><dd> Sygnalizuje maksymalną pozycje paska przewijania. Przyjmuje tylko wartości liczbowe i nie posiada jednostek. Domyślną wartością jest 100. +</dd></dl> +<dl><dt> <code id="a-increment"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/increment">increment</a></code> +</dt><dd> Wynosi tyle, co wartość atrybutu <code>curpos</code> zmienionego, gdy strzałka na pasku przewijania jest naciśnięta. Domyślnie posiada wartość równą 1. +</dd></dl> +<dl><dt> <code id="a-pageincrement"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/pageincrement">pageincrement</a></code> +</dt><dd> Wynosi tyle, co wartość atrybutu <code>curpos</code> zmienionego, gdy powierzchnia paska przewijania jest kliknięta. Powierzchnia jest obszarem, w którym przytrzymany kursorem pasek przewijania jest przesuwany. Domyślną wartością jest 10. +</dd></dl> +<p>Przykład kodu przedstawiony powyżej stworzy nam pasek przewijania, który może przesuwać się w zakresie od 0 do 100. Wartość 100 może być liczbą linii listy, ale może być także czymkolwiek sobie życzymy. W przykładzie wartość początkowa wynosi 20. Kiedy klikniemy w strzałkę na pasku przewijania, wartość będzie się zmieniała o 1 w dół lub w górę. Poprzez stronicowanie pasek przewijania będzie zmieniał wartość o 10. +</p><p>Kiedy użytkownik kliknie na strzałki, suwak przesunie się równoważnie do określonej wartości <code>increment</code>. Zwiększająca się wartość tego atrybutu będzie przypadkiem paska przewijania przesuwanego dalej wraz z każdym kliknięciem. Znajdujący się bliżej lewej lub górnej pozycji pasek przewijania posiada wartość 0, a mający pozycję znajdującą się bliżej prawej lub dolnej pozycji paska przewijania określi nam atrybut <code>maxpos</code>. +</p><p>Możesz dopasować wszystkie wartości, tak żeby suwak znajdował się i przesuwał, jak tylko chcesz. +</p><p>Następnie dowiemy się, jak utworzyć <a href="pl/Kurs_XUL/Paski_narz%c4%99dzi">paski narzędzi</a>. +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Rozdzielacze" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Paski_narzędzi">Następny »</a></p> +</div> +<p></p><p><br> +</p> +<div class="noinclude"> +</div> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/plik_własności/index.html b/files/pl/mozilla/tech/xul/kurs_xul/plik_własności/index.html new file mode 100644 index 0000000000..ebae58ec36 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/plik_własności/index.html @@ -0,0 +1,85 @@ +--- +title: Plik własności +slug: Mozilla/Tech/XUL/Kurs_XUL/Plik_własności +tags: + - Kurs_XUL + - Lokalizacja + - Przewodniki + - Strony_wymagające_dopracowania + - Wszystkie_kategorie + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Property_Files +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Lokalizacja" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Wprowadzenie_do_XBL">Następny »</a></p> +</div> W skryptach nie można używać encji. Zamiast nich stosuje się pliki własności.<p></p> + +<h3 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h3> + +<p>Z plików DTD korzysta się przy tekstach wyświetlanych z pliku XUL. Skrypty nie są jednak parsowane pod względem encji. Dodatkowo, może zajść potrzeba wyświetlenia wiadomości wygenerowanej ze skryptu, jeśli np. nie znamy dokładnego tekstu, jaki ma zostać wyświetlony. W tym celu stosuje się właśnie pliki własności.</p> + +<p>Plik własności zawiera zestaw ciągów znaków. Pliki własności znajdują się obok plików DTD, mają rozszerzenie .properties. Własności w plikach deklaruje się za pomocą składni <strong>nazwa=wartość</strong>. Przykład przedstawiono poniżej.</p> + +<pre>notFoundAlert=Nie znaleziono plików wg wskazanych kryteriów. +deleteAlert=Kliknij OK, aby usunąć wszystkie pliki. +resultMessage=%2$S plików znaleziono w katalogu %1$S. +</pre> + +<p>Powyższy przykładowy plik zawiera dwie własności. Skrypt może je odczytać i wyświetlić użytkownikowi.</p> + +<h3 id="Paczki_.C5.82a.C5.84cuch.C3.B3w_znak.C3.B3w" name="Paczki_.C5.82a.C5.84cuch.C3.B3w_znak.C3.B3w">Paczki łańcuchów znaków</h3> + +<p>Kod do odczytania własności można napisać samodzielnie albo skorzystać z dostarczonego przez XUL elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/stringbundle" title="stringbundle">stringbundle</a></code></code>. Element ten zawiera szereg funkcji, które można wykorzystać do wydobycia ciągów znaków z pliku własności oraz do pobrania innych informacji lokalizacyjnych. Element ten czyta zawartość pliku własności i tworzy listę własności. Dostęp do tych własności możliwy jest po ich nazwie.</p> + +<pre><stringbundleset id="strbundles"> +<stringbundle id="strings" src="strings.properties"/> +</stringbundleset> +</pre> + +<p>Dołączenie tego elementu spowoduje odczytanie własności z pliku 'strings.properties' znajdującego się w tym samym katalogu, co plik XUL. Do odczytu plików zlokalizowanych należy korzystać z adresów URL<em>chrome</em>.</p> + +<h4 id="Pobieranie_.C5.82a.C5.84cucha_znak.C3.B3w_z_paczki" name="Pobieranie_.C5.82a.C5.84cucha_znak.C3.B3w_z_paczki">Pobieranie łańcucha znaków z paczki</h4> + +<p>Element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/stringbundle" title="stringbundle">stringbundle</a></code></code> posiada szereg metod. Jedną z nich jest <code>getString</code>, której można użyć do odczytania z poziomu skryptu ciągu znaków z zestawu.</p> + +<pre>var strbundle=document.getElementById("strings"); +var nofilesfound=strbundle.getString("notFoundAlert"); + +alert(nofilesfound); +</pre> + +<ul> + <li>W powyższym przykładzie pobieramy najpierw referencję do zestawu ciągów za pomocą jego <code>id</code>.</li> + <li>Następnie odszukujemy w pliku własności ciąg 'notFoundAlert'. Funkcja <code>getString()</code> zwraca wartość ciągu lub null, jeśli ciąg nie istnieje.</li> + <li>Na końcu wyświetlamy odszukany ciąg w oknie powiadomienia.</li> +</ul> + +<h4 id="Formatowanie_tekstu" name="Formatowanie_tekstu">Formatowanie tekstu</h4> + +<p>Kolejną metodą jest <code>getFormattedString()</code>. Ta metoda także pobiera łańcuch znaków nazwy danego klucza z paczki. Dodatkowo każde wystąpienie formatowania code (np. <code>%S</code>) jest zastępowane przez następny element z paczki.</p> + +<pre>var dir = "/usr/local/document"; +var count = 10; + +var strbundle = document.getElementById("strings"); +var result = strbundle.getFormattedString("resultMessage", [ dir, count ]); + +alert(result); +</pre> + +<p>Ten przykład wyświetli następującą wiadomość w okienku ostrzeżenia.</p> + +<pre>10 files found in the /usr/local/document directory. +</pre> + +<p>You will notice the formatting codes <code>%1$S</code> and <code>%2$S</code> is used, and replaced different order in the array. Formatting code %<em>n</em>$S is specify the position of corresponding parameter directly. Although the word order is not the same in all the languages, by using <code>getFormattedString()</code> the specification of the order can be put out the property files.</p> + +<h3 id="Znaki_ucieczki_non-ASCII" name="Znaki_ucieczki_non-ASCII">Znaki ucieczki non-ASCII</h3> + +<p>Although many languages need non-ASCII characters, property files should be written using only ASCII characters. However, property files support other characters using escape sequences of the form: <code>\uXXXX</code> where XXXX is a character code. Therefore, if your property files contain non-ASCII characters, you should convert these to 'escaped-unicode' format. To do this, you can use native2ascii command line utility bundled with Sun's Java Development Kit (JDK).</p> + +<p>W następnym artykule <a href="pl/Kurs_XUL/Wprowadzenie_do_XBL">przyjrzymy się językowi XBL</a>, którego możemy użyć do zdefiniowania zachowania elementu.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Lokalizacja" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Wprowadzenie_do_XBL">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/pliki_manifestu/index.html b/files/pl/mozilla/tech/xul/kurs_xul/pliki_manifestu/index.html new file mode 100644 index 0000000000..c10c475b8e --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/pliki_manifestu/index.html @@ -0,0 +1,176 @@ +--- +title: Pliki manifestu +slug: Mozilla/Tech/XUL/Kurs_XUL/Pliki_manifestu +tags: + - Kurs_XUL + - Przewodniki + - Strony_wymagające_dopracowania + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Manifest_Files +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:URL_Chrome" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Tworzenie_okna">Następny »</a></p> +</div><p></p> + +<p>W tym artykule zobaczymy jak umieścić chrome i pliki XUL w paczce oraz stworzyć dla niej pliki manifestu.</p> + +<h3 id="Paczki" name="Paczki">Paczki</h3> + +<p>Paczka to zbiór plików XUL oraz skryptów, które definiują funkcjonalność interfejsu użytkownika. Paczki mogą być zainstalowane w przeglądarce Mozilla i odnosić się poprzez adres URL chrome. Paczka zawiera różnego rodzaju pliki i może być podzielona na podkatalogi dla różnych części paczki. Paczka jest przechowywana jako katalog lub jako archiwum JAR.</p> + +<h3 id="Pliki_manifestu" name="Pliki_manifestu">Pliki manifestu</h3> + +<p>Plik manifestu opisuje paczkę i mapę lokalizacji na dysku do adresu URL chrome. Pliki manifestu w katalogu chrome będą wykonywane, kiedy aplikacja Mozilli zostanie uruchomiona, aby zobaczyć jakie paczki zostały zainstalowane. To znaczy, że wszystko potrzebne do wykonania instalacji nowej paczki jest dodany nowy plik manifestu albo do katalogu aplikacji chrome albo użytkownik wskaże określony katalog chrome. Z dwóch katalogów chrome jest normalnie używany jeden od katalogu aplikacji mogącego nie mieć dostatecznych uprawnień do zapisanego w nim.</p> + +<p>Jeśli tylko chcesz wypróbować uprzywilejowany kod XUL w przeglądarce Firefox, możesz to zrobić w prosty sposób poprzez użycie manifestu z zawartą w sobie jedną linią:</p> + +<ol> + <li>Gdziekolwiek utwórz nowy katalog. Na przykład, używając Windows możesz skorzystać C:\testfiles</li> + <li>Utwórz nowy plik <strong>ASCII</strong><sup>1</sup> i nazwij go test.manifest w katalogu chrome. W tym momencie nie jest w ogóle ważne jak się on nazywa, ważne żeby miał rozszerzenie .manifest. <sub>( 1. nie działa z UTF-8 z BOM) </sub></li> + <li>Dodaj następującą linie do niego:</li> +</ol> + +<pre class="eval"> content tests <a class="external" rel="freelink">file:///C:/testfiles/</a> +</pre> + +<p>Ścieżka pliku w tej linii powinna wskazywać na katalog utworzony powyżej. Jeśli nie jesteś pewien(a), co jest ścieżką pliku, otwórz ten katalog i skopiuj adres URL z paska adresu.</p> + +<p>To jest to! Teraz, wszystko co jeszcze musisz zrobić to jest dodanie jakiegoś pliku XUL do tego nowego folderu i będziesz mógł go wczytać wpisując adres URL w formie <a class="external" rel="freelink">chrome://tests/content/</a><filename>. Oczywiście musisz uruchomić ponownie przeglądarkę, żeby zmiany dały efekt. Jeśli plik się nie wczytał, sprawdź czy wpisałeś poprawną ścieżkę.</p> + +<p>Prosta składnia linii kodu w pliku manifestu dla zawartości paczki jest:</p> + +<p>'content <packagename> <filepath>'</p> + +<p>Pierwsze pole 'content' sygnalizuje zawartość paczki. Dla motywów, 'skin' is used while 'locale' is used for locales. The packagename is the example above is 'tests', which means that the first field in the chrome URL is 'tests' as in <a class="external" rel="freelink">chrome://tests/content/sample.xul</a>. If the package name was 'browser', the chrome URL would be <a class="external" rel="freelink">chrome://browser/content/</a>. The final field is the path where the files are located. This can be either a local file path using a file URL or a JAR archive using a jar URL, which will be described in a moment. You can specify multiple packages by including another line in the manifest file.</p> + +<p>Plik browser.manifest użyty przez Firefoksa wygląda tak jak ten:</p> + +<pre>content branding jar:browser.jar!/content/branding/ xpcnativewrappers=yes +content browser jar:browser.jar!/content/browser/ xpcnativewrappers=yes +overlay chrome://global/content/viewSource.xul chrome://browser/content/viewSourceOverlay.xul +overlay chrome://global/content/viewPartialSource.xul chrome://browser/content/viewSourceOverlay.xul +overlay chrome://browser/content/pageInfo.xul chrome://pippki/content/PageInfoOverlay.xul +</pre> + +<p>Two packages are listed here, 'branding' and 'browser'. Three overlays are also specified, which allow content from different packages to combine together. Extensions will make the most use of overlays, since they merge their UI with the browser UI.</p> + +<p>The file paths for the branding and browser packages use jar URLs as the content is packaged up into an archive. A JAR archive can be created with a ZIP utility. For a JAR file located in the chrome directory, the syntax is fairly simple:</p> + +<p>jar:<filename.jar>!/<path_in_archive></p> + +<p>For the browser package, the archive is browser.jar, located alongside the manifest file in the chrome directory. The path 'content/browser' specifies the path inside the archive where the XUL files are located. You won't need to specify a path if you don't have any directories in the archive. In this case, there is, since the files for the branding package are stored in a different path in the same archive.</p> + +<p>For the 'tests' package created above, the files are not packaged into an archive, so a direct file path is used instead. This is good for development since you don't have to package up all the files every time you change them. However, when distributing an application or extension, you will want to package them into an archive to avoid having to install lots of smaller files.</p> + +<p>The xpcnativewrappers=yes part at the end of the manifest line is a flag that may optionally be used. In JavaScript, it is possible for a web page to override built-in functions with their own code. If the xpcnativewrappers flag is specified, it indicates that scripts running in a privileged context don't call these overriden versions, but the original built-in versions instead. Otherwise, if an extension attempted to call the modified versions, it would likely not work properly, or worse, create a security hole. This flag was added to prevent this problem and should always be used for newer extensions, but is left out for older extensions that might not be compatible with the change.</p> + +<h3 id="Motywy_i_pliki_lokalizacji" name="Motywy_i_pliki_lokalizacji">Motywy i pliki lokalizacji</h3> + +<p>The themes and locales, the syntax is similar as for content packages, but you also need to specify the content package you are providing a theme or locale for. For example:</p> + +<pre>skin browser classic/1.0 jar:classic.jar!/skin/classic/browser/ +locale browser en-US jar:en-US.jar!/locale/browser/ +</pre> + +<p>For these, the extra field has been added to indicate that the skin and locale applies to the browser. The skin name is 'classic/1.0'. In this case, a version number is being used as part of the theme name, but that is optional if you are making your own theme. Mozilla doesn't handle the version number in a special way; the version number is just part of the theme name. The locale is 'en-US'. The chrome URLs that these would map to would be <a class="external" rel="freelink">chrome://browser/skin</a> and <a class="external" rel="freelink">chrome://browser/locale</a>. If you were creating your own theme or locale for the browser, all you need to do is create a manifest file with one of these two lines in it, modified to suit your theme or locale.</p> + +<p>Aby dowiedzieć się więcej nt. motywów, zobacz <a href="/pl/Motywy" title="pl/Motywy">Motywy</a>. Aby dowiedzieć się więcej nt. lokalizacji, zobacz <a href="/pl/Lokalizacja" title="pl/Lokalizacja">Lokalizacja</a>.</p> + +<div class="highlight"> +<h3 id="Przyk.C5.82ad_okienka_dialogowego_Znajd.C5.BA_pliki" name="Przyk.C5.82ad_okienka_dialogowego_Znajd.C5.BA_pliki">Przykład okienka dialogowego <code>Znajdź pliki</code></h3> + +<p>Utwórzmy plik manifestu dla okienka dialogowego <code>Znajdź pliki</code>. You can combine all of the three types into a single file if you wish. This may be done when creating an extension such that all of the parts are in one file. We will do this for the find files dialog. Create a file findfile.manifest in the chrome directory. Add the following to the file:</p> + +<pre>content findfile file:///findfile/content/ +skin findfile classic/1.0 file:///findfile/skin/ +locale findfile en-US file:///findfile/locale/ +</pre> + +<p>Create the new directories listed above. It doesn't matter where the directories are created, but the file paths in the manifest file should point to the directories. Naturally, you will want to use directory paths suitable for your system. If we were distributing the package, we would want to package them up into a JAR file, and modify the paths. In this case, we are just creating to demonstrate a manifest file and to prepare directories for examples which will see in the later sections.</p> + +<p>Note how the second field of the skin and locale lines specifies 'findfile'. This means that the skin and locale modify the findfile package, which was specified on the first line.The three paths above specify subdirectories for each part. You will want to create these subdirectories to keep each part's files separate.</p> + +<p> </p> +</div> + +<p><span class="comment">== Pliki <code>Contents.rdf</code> == Plik contents.rdf opisuje zawartość paczki. Może być także użyty do opisania skina lub locale-u. Pliki te mogą być naprawdę prosto tworzone jeśli raz dowiesz się jak. Poniższy schemat może być wykorzystany jako punkt startu. <pre> <?xml version="1.0"?> <RDF:RDF xmlns:RDF="<a class="external" href="http://www.w3.org/1999/02/22-rdf-syntax-ns#" rel="freelink">http://www.w3.org/1999/02/22-rdf-syntax-ns#</a>" xmlns:chrome="<a class="external" href="http://www.mozilla.org/rdf/chrome#" rel="freelink">http://www.mozilla.org/rdf/chrome#</a>"> <RDF:Seq about="urn:mozilla:package:root"> <RDF:li resource="urn:mozilla:package:myapplication"/> </RDF:Seq> <RDF:Description about="urn:mozilla:package:myapplication" chrome:displayName="My Application" chrome:author="name" chrome:name="myapplication"> </RDF:Description> </RDF:RDF> </pre> Możesz użyć tego szablonu oraz wprowadzić kilka drobnych zmian do twojej paczki. Podzielmy go na części aby zrozumieć za co dana część jest odpowiedzialna. <pre> <?xml version="1.0"?> <RDF:RDF xmlns:RDF="<a class="external" href="http://www.w3.org/1999/02/22-rdf-syntax-ns#" rel="freelink">http://www.w3.org/1999/02/22-rdf-syntax-ns#</a>" xmlns:chrome="<a class="external" href="http://www.mozilla.org/rdf/chrome#" rel="freelink">http://www.mozilla.org/rdf/chrome#</a>"> </pre> Te trzy linie powinny być umieszczone na samej górze pliku contents.rdf. Ponieważ RDF jest formatem XML-a, standardowo zawiera linię którą pliki XML zazwyczaj mają. Następnie deklarujemy przestrzenie nazw (namespaces) które będą użyte, jeden dla RDF-a i drugi dla systemu chrome. Jeśli nie rozumiesz co to znaczy, nie przejmuj się. Po prostu dodaj te trzy linijki na początku pliku. <pre> <RDF:Seq about="urn:mozilla:package:root"> <RDF:li resource="urn:mozilla:package:myapplication"/> </RDF:Seq> </pre> Te linijki są używane aby zadeklarować jakie paczki, skóry oraz locale są opisane w pliku. W tym przypadku opisywana jest zawartość paczki (jako wskazanej przez słowo 'package' w tekście). Jeśli tworzysz skórkę, powinieneś użyć słowa 'skin' zamiast 'package', natomiast jeśli tworzysz locale-a, użyjesz 'locale'. Nazwą paczki będzie 'myapplication' ('mojaaplikacja'). Oczywiście możesz ją zamienić na nazwę paczki którą tworzysz. Na przykład, aplikacja mailowa Mozilli ma nazwę 'messenger'. Nazwa powinna być krótka i wyrazista. Będzie ona używana w URLu chrome dla tej paczki. Tag <font color="#FF0000">RDF:li</font> wykorzystany powyżej jest raczej jak tag <font color="#FF0000">li</font> w HTML, czyli deklaruje element listy. A zatem możesz zadeklarować wieloskładnikowe paczki używając tagów <font color="#FF0000">RDF:li</font>. Dla motywów, zamień oba występujące w kodzie słowa 'package' na 'skin'; dla plików językowych (locale), zamień słowa 'package' na 'locale'. Poniższy przykład definiuje motyw: <pre> <RDF:Seq about="urn:mozilla:skin:root"> <RDF:li resource="urn:mozilla:skin:blueswayedshoes"/> </RDF:Seq> </pre> Następnie część opisowa, która określa nazwę oraz autora aplikacji: <pre> <RDF:Description about="urn:mozilla:package:myapplication" chrome:displayName="My Application" chrome:author="name" chrome:name="myapplication"> </RDF:Description> </pre> Ten blok jest używany, aby wprowadzić więcej detali opisujących paczkę, motyw czy plik językowy (locale). Będziesz potrzebował opisu dla każdego <font color="#FF0000">li</font>, którego masz. Wartość atrybutu <font color="#00FF00">about</font> powinna być taka sama jak atrybutu <font color="#00FF00">resource</font> w tagu <font color="#ff0000">li</font>. Trzy dodatkowe atrybuty przedstawiają dodatkowe informacje o paczce: * <code>displayName</code><br>Tytuł paczki jaki będzie wyświetlany użytkownikowi. Na przykład 'Messenger'. * <code>author</code><br>Imię autora paczki. * <code>name</code><br>Nazwa paczki, skina lub locale-a. Powinna być taka sama jak ta na końcu 'urn:mozilla:package:' które zostało określone wcześniej. Ta nazwa jest wykorzystywana jaki pierwsza część URLa chrome. Równie dobrze możesz używać wielu innych wartości. Gdy Mozilla zarejestruje twoją paczkę, te wartości będą dodane do rejestru chrome. <div class="highlight"> Stwórzmy plik contents.rdf dla opcji wyszukiwania plików, którą stworzymy. Trzeba będzie opisać paczkę. Ponieważ wewnątrz nie będzie żadnych dodatkowych paczek, skór ani locali, opis będzie bardzo podobny do przykładu powyżej. <pre> <?xml version="1.0"?> <RDF:RDF xmlns:RDF="<a class="external" href="http://www.w3.org/1999/02/22-rdf-syntax-ns#" rel="freelink">http://www.w3.org/1999/02/22-rdf-syntax-ns#</a>" xmlns:chrome="<a class="external" href="http://www.mozilla.org/rdf/chrome#" rel="freelink">http://www.mozilla.org/rdf/chrome#</a>"> <RDF:Seq about="urn:mozilla:package:root"> <RDF:li resource="urn:mozilla:package:findfile"/> </RDF:Seq> <RDF:Description about="urn:mozilla:package:findfile" chrome:displayName="Find Files" chrome:author="Whoever" chrome:name="findfile"> </RDF:Description> </RDF:RDF> </pre> Tutaj nazwą komponentu jest 'findfile', która oznacza, że będziemy mogli się odwołać do tego komponentu korzystając z następującego URLa chrome: <pre> <a class="external" rel="freelink">chrome://findfile/content/findfile.xul</a> </pre> </div></span></p> + +<h3 id="Instalowanie_paczki" name="Instalowanie_paczki">Instalowanie paczki</h3> + +<p>For an application to be installed, you will need to create an installer for it, or include it as part of another application. The method used depends on what kind of application you are creating. For extensions, you will need to create an install file install.rdf which describes what will be installed, the author of the extension and which versions of the browser or other applications it is compatible with. <a href="/pl/Paczki" title="pl/Paczki">A specific directory structure</a> is needed as well since extensions are limited in where the files may be installed to. An extension is packaged up into an <a href="/pl/XPI" title="pl/XPI">XPI</a> file. XPI is short for <a href="/pl/XPInstall" title="pl/XPInstall">XPInstall</a> and is used by Mozilla to install components. Like a JAR file, an XPI file is just a ZIP file with a different extension, so you can create and view XPI files with a ZIP utility.</p> + +<p>Firefox's extension manager handles installing extensions packaged into XPI files automatically. It is recommended to upload extensions to the <a class="link-https" href="https://addons.mozilla.org/">Mozilla Add-ons site</a>, where users can locate them for installation. While they may be installed from any site, other sites are not configured to allow installations by default.</p> + +<p>It is also possible to use a install script written in JavaScript to install files. This allows you to copy files to any location and perform other file management tasks. However, applications installed with a script will not be listed in the extension manager and there is no automated method to uninstall them. For this reason, the install scripts are not used often.</p> + +<p>For standalone applications, they can be packaged up using XULRunner. This allows a separate executable file, and the application may be distributed independently of a browser.</p> + +<p>For more information about creating extensions, see <a href="/pl/Rozszerzenia" title="pl/Rozszerzenia">rozszerzenia</a>. For more information about XULRunner, see <a href="/pl/XULRunner" title="pl/XULRunner">XULRunner</a>.</p> + +<p><span class="comment">Lista zainstalowanych paczek przechowywana jest w katalogu chrome, w pliku chrome.rdf. Nie powiniejeś edytować go bezpośrednio. Plik ten zostanie automatycznie zmieniony, gdy zainstalujesz nową paczkę. Plik ten, tak samo jak contents.rdf jest formatu RDF. Na pierwszy rzut oka wygląda całkiem inaczej niż pliki <code>contents.rdf</code>, ale jeśli jesteś zaznajomiony z <a href="/pl/RDF">RDF</a>-em, powinieneś szybko zauważyć podobieństwa. Gdy Mozilla uruchamia się, sprawdza najpierw katalog chrome i szuka pliku nazwanego 'installed-chrome.txt'. Plik ten zawiera listę, w bardzo prostym formacie, na której są wszystkie zainstalowane paczki, skórki i locale. Gdy plik ten jest modyfikowany, Mozilla skanuje wszystkie wpisy z listy i rejestruje lub aktualizuje te, które trzeba, by mogły być używane. Aby zarejestrować nową paczkę, wszystko co musisz zrobić, to dodać wpis do 'installed-chrome.txt' i zrestartować Mozillę. Nowa paczka zostanie zarejestrowana, a plik chrome.rdf zostanie zmodyfikowany jeśli trzeba, aby zawierał informacje o nowo zainstalowanych paczkach. Mozilla posiada także system instalacyjny nazwany XPInstall, który pozwala instalować skrypty za pomocą JavaScript, bez modyfikowania pliku ręcznie. XPInstall zostanie opisany na końcu tego tutoriala. Niemniej jednak podczas tworzenia aplikacji możemy modyfikować installed-chrome.txt bezpośrednio. Plik 'installed-chrome.txt' jest w katalogu chrome. Plik ten zawiera listę wpisów do instalacji, jeden element w jednej linijce. Na przykład: <pre> content,install,url,resource:/chrome/findfile/content/ skin,install,url,resource:/chrome/findfile/skin/ </pre> Powyższe wpisy będą wykorzystane aby zainstalować paczkę findfiles oraz skórkę dla niej. Format każdej linijki jest niezwykle prosty. Zawiera cztery wartości oddzielone przecinkami: ; Type (typ) : Ustawiony na 'content' dla zawartości paczki, 'skin' dla skórek oraz 'locale' dla locale-ów. ; Install (instalacja) : Wpisz tekst 'install' aby zainstalowac element. Dla skórki i locale-ów możesz także ustawić go jako 'profile' aby zainstalować te elementy w katalogu z profilem użytkownika. Oznacza to że element będzie zainstalowany tylko dla pojedynczego użytkownika. ; URL Type (typ adresu URL) : Wpisz tekst 'url' aby określić adres URL, gdzie nowe paczki, skórki lub locale mają być przechowywane. Jeśli wpiszesz 'path', możesz jako miejsce podać katalog (który powinien być zgodny z zapisem katalogów w twoim systemie operacyjnym). ;URL (adres URL) :Ustaw adres URL lub katalog paczki. Powinno być to miejsce w którym znajduje się bezpośrednio plik contents.rdf lub ścieżka i nazwa pliku JAR. Ponieważ wpis ten odnosi się do katalogu, upewnij się, że kończy się on slashem. W innym wypadku paczka nie zostanie odnaleziona. Zauważmy, że użyte URLe są w typie "resource:/". Możesz użyć również typu pliku. Resource URL jest podobny do file URL z wyjątkiem tego, że zaczyna się od "resource:" a nie "file:" oraz jego głównym katalogiem jest katalog, gdzie zainstalowana jest Mozilla, a nie główny katalog systemu. Oznacza to, że można tego używać, aby odnosić się do plików w katalogu Mozilli albo jej podkatalogów, niezależnie od tego gdzie została ona zainstalowana. Resource URL powinien mieć jeden slash po dwukropku, ponieważ jest to zawsze ścieżka względna. Dodana linia powinna wskazywać na katalog, zawierający contents.rdf. Jeśli posiadasz wiele pakietów, dodaj po jednej linii dla każdego. Pomimo, że Mozilla przestrzega reguł nazywania katalogów, możesz umieścić pliki, gdzie tylko chcesz. Na przykład następujące linijki zainstalują nowy pakiet, który jest usytuowany w katalogu <code>/main/calculator/</code>. <pre> <a class="external" href="content,install,url,file:///main/calculator/" rel="freelink">content,install,url,file:///main/calculator/</a> </pre> Powinieneś zauważyć, że istniejące linie w installed-chrome.txt mają jeszcze jeden typ URL, typ "jar:". Jeśli pakujesz swoje pliki do pliku JAR, możesz użyć JAR URL do odniesienia się do niego. Ma on dwie części oddzielone wykrzyknikiem (!). Część przed wykrzyknikiem to URL pliku JAR, a część po wykrzykniku to katalog albo plik wewnątrz archiwum. Poniższy przykład może odnosić się do znajdywania plików dialogu: <pre> jar:resource:/chrome/findfile.jar!/content/findfile/ </pre> Jednak przeważnie nie musisz się martwić JAR URL-ami, gdy tworzysz swoje własne archiwa. Zamiast tego powinieneś trzymać pakiety rozpakowane i odnosić się do nich używając typu URL file albo resource.</span></p> + +<h3 id="Starsze_aplikacje" name="Starsze_aplikacje">Starsze aplikacje</h3> + +<p>If you are creating applications for older versions of Mozilla software, that is, before Firefox 1.5 or Mozilla 1.8, the process is a bit more involved. The following describes how to set up a package for earlier versions. This section may be skipped if you are writing new extensions or XUL applications.</p> + +<div class="note"><strong>Note</strong>: This older process does also apply to the new SeaMonkey 1.0 though. The codebase there has not yet adopted the <em>"Manifest"</em> format.</div> + +<pre class="eval"><?xml version="1.0"?> + +<RDF:RDF xmlns:RDF="<span class="nowiki">http://www.w3.org/1999/02/22-rdf-syntax-ns#</span>" + xmlns:chrome="<span class="nowiki">http://www.mozilla.org/rdf/chrome#</span>"> + + <RDF:Seq about="urn:mozilla:package:root"> + <RDF:li resource="urn:mozilla:package:<span class="highlightred">myapplication</span>"/> + </RDF:Seq> + + <RDF:Description about="urn:mozilla:package:<span class="highlightred">myapplication</span>" + chrome:displayName="<span class="highlightblue">Application Title</span>" + chrome:author="<span class="highlightblue">Author Name</span>" + chrome:name="<span class="highlightred">myapplication</span>" + chrome:extension="true"/> + +</RDF:RDF> +</pre> + +<pre class="eval">content,install,url,<span class="highlightred"><a class="external" rel="freelink">file:///main/app/</a></span> +</pre> + +<ol> + <li>Create a directory somewhere on your disk. Many people put this as a subdirectory inside Mozilla's chrome directory, but this isn't necessary. The directory could be anywhere and on any disk. Put your XUL files in this directory.</li> + <li>Create a file called contents.rdf and place it in this directory. Copy the text in the box below into the new contents.rdf file. This file is used to identify the application id, its name, author, version and so on.</li> + <li>Change the highlighted parts of the file above to your own information. The red text 'myapplication' should be the ID of your application. You make this up, but typically, the ID is similar to your application's name. Replace the blue highlighted text above with your application's title and author.</li> + <li>If the 'chrome:extension' field is true, the application is a Mozilla Firefox Extension and it will show up in the Extensions window of the browser. If false, it will not appear.</li> + <li>Save the contents.rdf and make sure it is in the directory you created in step 1.</li> + <li>Open the file <mozilla-directory>/chrome/installed-chrome.txt, where <mozilla-directory> is the directory where Mozilla is installed. Exit Mozilla before you do this.</li> + <li>Next, you are going to register the new application with Mozilla so it will know where to find it. Add a line at the end of installed-chrome.txt pointing to the new directory you created in step 1. Change the highlighted text to the file URL below of the directory. Make sure that it URL ends with a slash and that you press enter at the end of the line. If you aren't sure what the URL is, open the directory created in step 1 into a Mozilla browser and copy the URL from the location field. Note that the reference should always be a directory, not a file.</li> + <li>Delete the file <mozilla-directory>/chrome/chrome.rdf.</li> + <li>Start Mozilla. You should be able to view any XUL files you put into the directory using a URL of the form: <strong>chrome://<span class="highlightred">applicationid</span>/content/file.xul</strong> where file.xul is the filename. Your main XUL file should be applicationid.xul which you can load using the shortcut URL <strong>chrome://<span class="highlightred">applicationid</span>/content/</strong>.</li> +</ol> + +<p>If you are creating skin and/or locale portions, repeat the steps above, except that the format of the contents.rdf file is slightly different. Look at the contents.rdf files in other applications for details.</p> + +<p><span class="comment">== Na skróty == Powyższa informacja może być trochę myląca. Oto szybki przewodnik tworzenia prostych pakietów. Możesz po prostu robić krok po kroku to co jest tu napisane i spróbować zrozumieć detale przebiegu instalacji pakietów, gdy już będziesz bardziej rozumiał XUL. <ol> <li>Stwórz katalog gdzieś na swoim dysku. Wielu ludzi umieszcza go jako podkatalog w katalogu Mozilla chrome, ale nie jest to konieczne. Katalog może być gdziekolwiek na jakimkolwiek dysku. Umieść tam pliki XUL.</li> <li>Stwórz plik o nazwie contents.rdf i umieść go w tym katalogu. Skopiuj tekst z poniższej ramki do nowo utworzonego pliku. Będzie on używany do zidentyfikowania aplikacji, jej nazwy, autora, wersji itp.</li> <?xml version="1.0"?> <RDF:RDF xmlns:RDF="<nowiki><a class="external" href="http://www.w3.org/1999/02/22-rdf-syntax-ns#" rel="freelink">http://www.w3.org/1999/02/22-rdf-syntax-ns#</a></nowiki>" xmlns:chrome="<nowiki><a class="external" href="http://www.mozilla.org/rdf/chrome#" rel="freelink">http://www.mozilla.org/rdf/chrome#</a></nowiki>"> <RDF:Seq about="urn:mozilla:package:root"> <RDF:li resource="urn:mozilla:package:<span class="highlightred">myapplication</span>"/> </RDF:Seq> <RDF:Description about="urn:mozilla:package:<span class="highlightred">myapplication</span>" chrome:displayName="<span class="highlightblue">Application Title</span>" chrome:author="<span class="highlightblue">Author Name</span>" chrome:name="<span class="highlightred">myapplication</span>" chrome:extension="true"/> </RDF:RDF> <li>Zmień podświetlone fragmenty pliku na swoje własne informacje. Czerwony tekst "myapplication" powinien zawierać ID aplikacji. Możesz go zmyślić, ale typowo ID jest bardzo podobne do nazwy aplikacji. Zamień tekst podświetlony na niebiesko z tytułem i autorem aplikacji.</li> <li>Jeśli pole "chrome:extension" zawiera "true", aplikacja to jedna z Rozszrzeń Mozilli Firefox (''Mozilla Firefox Extension'') i będzie wyświetlana w oknie Rozszerzeń (''Extension'') przeglądarki. Jeśli pole to zawiera "false", aplikacja nie pojawi się w tym oknie.</li> <li>Zachowaj plik contents.rdf i upewnij się, że jest on w katalogu, który stworzyłeś w kroku pierwszym.</li> <li>Otwórz plik <mozilla-directory>/chrome/installed-chrome.txt, gdzie <mozilla-directory> to katalog zainstalowania Mozilli. Przedtem zamknij Mozillę.</li> <li>Następnie będziesz rejestrował nową aplikację w Mozilli, żeby program ten wiedział gdzie go może znaleźć. Dodaj linię na końcu pliku installed-chrome.txt, wskazując na nowy katalog, stworzony w kroku 1. Zmień poniższy podświetlony tekst na file URL (link do pliku). Upewnij się, że URL kończy się slash'em i że nacisnąłeś enter na końcu tej linii. Jeśli nie wiesz jaki jest URL, otwórz katalog, stworzony w kroku 1 w przeglądarce Mozilli i skopiuj URL z paska adresu. Zauważ, że odnośnik powinien być zawsze katalogiem, nie plikiem.</li> content,install,url,<span class="highlightred"><a class="external" rel="freelink">file:///main/app/</a></span> <li>Skasuj plik <mozilla-directory>/chrome/chrome.rdf.</li> <li>Odpal Mozillę. Powinieneś być w stanie wyświetlić każdy z plików XUL, umieszczonych w katalogu przy użyciu URLa w formie: '''chrome://<span class="highlightred">applicationid</span>/content/file.xul''', gdzie file.xul to nazwa pliku. Głównym plikiem XUL powinien być applicationid.xul, możesz go załadować używając skrótu URL '''chrome://<span class="highlightred">applicationid</span>/content/'''.</li> </ol> Jeśli tworzysz skórki i/lub różnych użytkowników, powtórz wszystkie kroki, z tym że format pliku contents.rdf będzie trochę inny. Spójrz na pliki contents.rdf w innych aplikacjach, aby zobaczyć szczegóły.</span></p> + +<h3 id="Usuwanie_nieprawid.C5.82owo.C5.9Bci" name="Usuwanie_nieprawid.C5.82owo.C5.9Bci">Usuwanie nieprawidłowości</h3> + +<p>Tworzenie pakietu chrome może być często skomplikowane i jest trudne do zdiagnozowania w przypadku jakichkolwiek problemów. Znajduje się tu kilka porad w przypadku, gdybyśmy nie mogli sobie poradzić.</p> + +<ul> + <li>Otwórz plik <mozilla-directory>/chrome/chrome.rdf. Powinniśmy tam znaleźć odniesienie do ID swojej aplikacji. Jeśli nie, coś poszło źle podczas rejestracji. Jeśli jednak tam są, to jest prawdopodobne, że używasz złego adresu URL chrome, kiedy wczytujesz plik.</li> + <li>Spróbuj usunąć plik <mozilla-directory>/chrome/chrome.rdf. Zostanie on odnowiony. Usuń także cały katalog <mozilla-directory>/chrome/overlayinfo/, jeśli stosujemy nakładki.</li> + <li>Upewnij się, że adres URL w linii dodanej do installed-chrome.txt kończy się znakiem slash i sam plik kończy się pustą linią.</li> + <li>W Windows adresy URL pliku są często w formie <a class="external" rel="freelink">file:///C</a>|/files/app/, gdzie C to litera partycji dysku.</li> + <li>Upewnij się, że plik contents.rdf jest w odpowiednim katalogu i jest w odpowiednim typie. Otwórz ten plik w Mozilli, żeby zobaczyć czy jest rozpoznawany jako typ XML. Jeśli nie, ujrzysz błąd na żółtym tle.</li> + <li>Jeśli używasz debugera Mozilli, niektóre informacje będą wpisane do terminala podczas startowania, pokazując które aplikacje chrome są sprawdzane. Sprawdź czy twoja aplikacja jest na liście.</li> +</ul> + +<p><span class="comment">* Make sure the contents.rdf file is in the right directory and is well-formed. Open the contents.rdf file in Mozilla to see if it parses as well-formed XML. If not, you will see an error on a yellow background. * If you are using a debug build of Mozilla, some info will be printed to the terminal when starting up indicating what chrome applications are being checked. Check if your application is listed.</span></p> + +<p>Aby dowiedzieć się więcej, przeczytaj artykuł o <a href="/pl/Rejestracja_Chrome" title="pl/Rejestracja_Chrome">rejestracji Chrome</a>.</p> + +<p>W następnym artykule rozpoczniemy już <a href="/pl/Kurs_XUL/Tworzenie_okna" title="pl/Kurs_XUL/Tworzenie_okna">naukę języka XUL</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:URL_Chrome" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Tworzenie_okna">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/pola_grup/index.html b/files/pl/mozilla/tech/xul/kurs_xul/pola_grup/index.html new file mode 100644 index 0000000000..b843d20be4 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/pola_grup/index.html @@ -0,0 +1,78 @@ +--- +title: Pola grup +slug: Mozilla/Tech/XUL/Kurs_XUL/Pola_grup +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Groupboxes +--- +<p> +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Szczegóły_modelu_pudełkowego" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dodawanie_innych_elementów">Następny »</a></p> +</div> +<p></p><p>Artykuł ten opisuje sposób zawierania elementów w grupach. +</p> +<h3 id="Pola_grup" name="Pola_grup"> Pola grup </h3> +<p>Język HTML dostarcza elementu <code>fieldset</code>, który może być zastosowany do grupowania elementów razem. Granicą jest zazwyczaj obrys wokół elementów, aby pokazać, że są one powiązane. Przykład będzie pole grupowe zawierające pola wyboru. XUL dostarcza odpowiedni element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/groupbox" title="groupbox">groupbox</a></code></code>, który może być zastosowany w podobnym celu. </p><p>Jak wskazuje nazwa, <code><code><a href="/pl/docs/Mozilla/Tech/XUL/groupbox" title="groupbox">groupbox</a></code></code> jest typem pola, oznacza to, że elementy wewnątrz niego ustawione są według reguł pól. Istnieją dwie różnice pomiędzy polami grup a polami regularnymi: +</p> +<ul><li> Domyślnie pole grupy jest otoczone elementem bevel. Możesz zmienić to zachowanie przez zmianę stylu CSS, +</li><li> Pole grupy obsługuje element caption, który jest umieszczony w górnej części obramowania. +</li></ul> +<p>Ponieważ pola grup są typami grup, możesz użyć takich samych atrybutów jak <code><code id="a-orient"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/orient">orient</a></code></code> i <code><code id="a-flex"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/flex">flex</a></code></code>. Możesz wstawić jakiekolwiek elementy, jakie chcesz wewnątrz pola, chociaż zazwyczaj będą one powiązane w ten sam sposób. </p><p>Etykieta u góry pola grupy może zostać utworzona przy zastosowaniu elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/caption" title="caption">caption</a></code></code>. Działa on podobnie jak element <code>legend</code> z języka HTML. Pojedynczy element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/caption" title="caption">caption</a></code></code> umieszczony jako pierwsze dziecko będzie wystarczające. +</p> +<h4 id="Przyk.C5.82ad:_Proste_pole_grupy" name="Przyk.C5.82ad:_Proste_pole_grupy"> Przykład: Proste pole grupy </h4> +<p>Poniższy przykład pokazuje proste pole grupy: +</p><p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_titledbox_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_titledbox_1.xul">Podgląd</a> +</p> +<div class="float-right"><img alt="grafika:titledbox1.png"></div> +<pre><groupbox> + <caption label="Odpowiedź"/> + <description value="Banany"/> + <description value="Tangerine"/> + <description value="Budka telefoniczna"/> + <description value="Kiwi"/> +</groupbox> +</pre> +<p>Spowoduje to, że będą wyświetlone cztery fragmenty tekstu otoczone przez pole z etykietą <code>Odpowiedź</code>. Zwróć uwagę, że pole grupy posiada domyślnie orientacje pionową, która jest konieczna, aby mieć stos elementów tekstu w pojedynczej kolumnie. +</p> +<h4 id="Bardziej_z.C5.82o.C5.BCony_element_caption" name="Bardziej_z.C5.82o.C5.BCony_element_caption"> Bardziej złożony element <code>caption</code> </h4> +<p>Możesz również dodać elementy potomne wewnątrz elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/caption" title="caption">caption</a></code></code>, aby stworzyć bardziej złożony <code><code><a href="/pl/docs/Mozilla/Tech/XUL/caption" title="caption">caption</a></code></code>. Na przykład; panel preferencji Mozilla Font używa menu rozwijanego jako podpisu. Chociaż może być użyta dowolna zawartość, zazwyczaj będziemy używać pola wyboru lub menu rozwijanego. +</p><p><span id="Przyk%C5%82ad_2"><a id="Przyk%C5%82ad_2"></a><strong>Przykład 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_titledbox_2.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_titledbox_2.xul">Podgląd</a> +</p> +<div class="float-right"><img alt="grafika:groupbox2.png"></div> +<pre><groupbox flex="1"> + <caption> + <checkbox label="Włącz kopie zapasową"/> + </caption> + <hbox> + <label control="dir" value="Folder:"/> + <textbox id="dir" flex="1"/> + </hbox> + <checkbox label="Kompresuj archiwalne pliki"/> +</groupbox> +</pre> +<p>W tym przykładzie, <a href="pl/Kurs_XUL/Kontrolki_wej%c5%9bcia#Pola_wyboru_i_przyciski_opcji">pole wyboru</a> zostały zastosowane jako podpis (caption). Możemy użyć skryptu do włączenia lub wyłączenia zawartości pola grup, kiedy <code><a href="/pl/docs/Mozilla/Tech/XUL/checkbox" title="checkbox">checkbox</a></code> jest zaznaczony lub odznaczony. Pole grupy zawiera poziome pudełko (<code><a href="/pl/docs/Mozilla/Tech/XUL/box" title="box">box</a></code>) z etykietą (<code><a href="/pl/docs/Mozilla/Tech/XUL/label" title="label">label</a></code>) i polem tekstowym (<code><a href="/pl/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code>). Zarówno pole tekstowe jak i pole grupy mogą być elementami elastycznymi, więc pole tekstowe rozszerza się, kiedy rozszerzamy okno. Poniżej pola tekstowego pojawia się dodatkowe pole wyboru, z powodu pionowej orientacji pola grupy. W kolejnym podpunkcie dodamy pole grupy do okna dialogowego <code>Znajdź pliki</code>. +</p> +<h3 id="Grupa_radio" name="Grupa_radio"> Grupa <code>radio</code> </h3> +<p>Możemy stosować element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code></code> do zgrupowania razem przycisków opcji. Element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code></code> jest typem pola. Możemy wstawić dowolny element, do wewnątrz niego, z wyjątkiem specjalnej obsługi przycisku <code><code><a href="/pl/docs/Mozilla/Tech/XUL/radio" title="radio">radio</a></code></code>, które działa podobnie jak inne pudełka. +</p><p>Dowolny przycisk opcji umieszczony wewnątrz grupy przycisków opcji, aby zgrupować je wszystkie razem, nawet, jeśli są one wewnątrz zagnieżdżonych pudełek. Może to być stosowane do dodania dodatkowych elementów wewnątrz struktury, tak jak w tym przykładzie: +</p><p><span id="Przyk%C5%82ad_3"><a id="Przyk%C5%82ad_3"></a><strong>Przykład 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_titledbox_3.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_titledbox_3.xul">Podgląd</a> +</p> +<pre><radiogroup> + <radio id="no" value="no" label="No Number"/> + <radio id="random" value="random" label="Random Number"/> + <hbox> + <radio id="specify" value="specify" label="Specify Number:"/> + <textbox id="specificnumber"/> + </hbox> +</radiogroup> +</pre> +<p>Zauważ, że element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code></code> nie jest otoczony żadnym obramowaniem wokół siebie. Powinniśmy umieścić element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/groupbox" title="groupbox">groupbox</a></code></code> wokół niego, jeśli obramowanie i podpis (caption) są wymagane. +</p><p>Następnie będziemy stosować to, czego nauczyliśmy się dotychczas i <a href="pl/Kurs_XUL/Dodawanie_innych_element%c3%b3w">dodamy dodatkowe elementy do okna dialogowego <code>Znajdź pliki</code></a>. +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Szczegóły_modelu_pudełkowego" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dodawanie_innych_elementów">Następny »</a></p> +</div> +<p></p> +<div class="noinclude"> +</div> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/polecenia/index.html b/files/pl/mozilla/tech/xul/kurs_xul/polecenia/index.html new file mode 100644 index 0000000000..34d9e2c057 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/polecenia/index.html @@ -0,0 +1,170 @@ +--- +title: Polecenia +slug: Mozilla/Tech/XUL/Kurs_XUL/Polecenia +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Commands +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Kontrola_zaznaczenia_i_aktywacji_elementów" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Aktualizacja_poleceń">Następny »</a></p> +</div><p></p> + +<p>Polecenia to rodzaj operacji, która może być przywoływana.</p> + +<h2 id="Elementy_polecenia" name="Elementy_polecenia">Elementy polecenia</h2> + +<p>Element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/command" title="command">command</a></code></code> jest stosowany w celu stworzenia poleceń, które będą służyły przeprowadzaniu operacji. Nie potrzebujemy używać poleceń, od kiedy można je zastąpić wywołaniem skryptu obsługującego pewne zdarzenia. Jednak, polecenia posiadają pewną przewagę. Mowa tu o ich zdolności do automatycznej dezaktywacji, kiedy zajdzie taka potrzeba oraz mogą być wywoływane zewnętrznie bez znajomości szczegółów implementacji samego polecenia. Zapewniają one możliwość stworzenia pewnego abstraktu oddzielającego operacje od samego kodu. Polecenia są przydatne szczególnie w większych aplikacjach. Przykładem jest implementacja poleceń menu związanych ze schowkiem, takich jak; <tt>wytnij</tt>, <tt>kopiuj</tt>, <tt>wklej</tt>. Jeśli nie korzystaliśmy z poleceń, będziemy potrzebowali określić, które pola posiadają skupienie, a następnie upewnić się, że operacja jest odpowiednia dla danego elementu. Dodatkowo, polecenia menu, potrzebują opcji aktywacji oraz dezaktywacji w zależności od tego czy element posiadający skupienie, zawiera zaznaczony teksy, czy też nie. Również do operacji wklejenia, w zależności, czy w schowku znajduje się odpowiednia do wklejenia zawartość. Jak można zauważyć, zaczyna się to komplikować. Wykorzystanie poleceń oszczędza w tym przypadku wiele pracy.</p> + +<p>Można używać poleceń dla każdej operacji. Mozilla wykorzystuje je do niemal każdego polecenia menu. Dodatkowo, pola tekstowe oraz inne elementy posiadają pewną liczbę wspierających je i gotowych do wywołania poleceń. Powinno się je używać w przypadku operacji zależnych od tego, na którym elemencie występuje skupienie.</p> + +<p>Polecenie jest identyfikowane poprzez jej atrybut <code><code id="a-id"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/id">id</a></code></code>. Mozilla używa konwencji, w której jej id rozpoczyna się przedrostkiem '<tt>cmd_</tt>'. W celu zapobiegnięcia konfliktom w nazwach poleceń, można umieszczać nazwę aplikacji w wewnątrz id polecenia. Przykład poniżej:</p> + +<h3 id="Przyk.C5.82ad:_Proste_polecenie_command" name="Przyk.C5.82ad:_Proste_polecenie_command">Przykład: Proste polecenie <code>command</code></h3> + +<p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_commands_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_commands_1.xul">Podgląd</a></p> + +<pre><command id="cmd_openhelp" oncommand="alert('Pomoc!');"/> +<button label="Pomoc" command="cmd_openhelp"/> +</pre> + +<p>W tym przykładzie, zamiast umieszczania atrybutu <code><code id="a-oncommand"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/oncommand">oncommand</a></code></code> w elemencie <code><code><a href="/pl/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code>, wstawiamy element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/command" title="command">command</a></code></code>. Są one połączone za pomocą atrybutu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/command" title="command">command</a></code></code>, który posiada wartość id polecenia. W rezultacie w chwili wciśnięcia przycisku, polecenie zostaje wywoływane.</p> + +<p>Istnieją dwie zalety używania tego podejścia:</p> + +<ul> + <li>Pierwsza, to przesunięcie wszystkich naszych operacji do poleceń, które mogą być pogrupowane razem w sekcje w plikach XUL. Znaczy to, że ów kod, jest skupiony w jednym miejscu, nie natomiast rozproszony po kodzie całego interfejsu użytkownika,</li> + <li>Inną zaletą jest fakt, że kilka przycisków i innych elementów UI (interfejs użytkownika), może być "podpiętych" do tego samego polecenia. Przykładowo, możemy posiadać pewną <a href="pl/Kurs_XUL/Proste_paski_menu">pozycję menu</a>, <a href="pl/Kurs_XUL/Paski_narz%c4%99dzi">przycisk paska narzędzi</a> i <a href="pl/Kurs_XUL/Skr%c3%b3ty_klawiaturowe">skrót klawiaturowy</a> podłączony do tego samego polecenia. Dużo wygodniejszym rozwiązaniem, niż powtarzanie tego samego kodu dla każdego z tych trzech elementów, jest wspomniane "podpięcie" ich pod to samo polecenie. Zazwyczaj, podłączane są tylko elementy, które wysyłają zdarzenie polecenia.</li> +</ul> + +<p>Dodatkowo:</p> + +<ul> + <li>Jeśli ustalimy także atrybut <code><code id="a-disabled"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/disabled">disabled</a></code></code> dla polecenia, będzie ono dezaktywowane i nie będzie możliwości jego wywołania,</li> + <li>Każdy przycisk oraz pozycja menu "podpięte" do niego, będą również automatycznie dezaktywowane,</li> + <li>Jeśli ponownie aktywujesz polecenie to przyciski i inne elementy ponownie staną się aktywne.</li> +</ul> + +<h3 id="Przyk.C5.82ad:_Prze.C5.82.C4.85czenie_wy.C5.82.C4.85czenia_command" name="Przyk.C5.82ad:_Prze.C5.82.C4.85czenie_wy.C5.82.C4.85czenia_command">Przykład: Przełączenie wyłączenia <code>command</code></h3> + +<p><span id="Przyk%C5%82ad_2"><a id="Przyk%C5%82ad_2"></a><strong>Przykład 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_commands_2.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_commands_2.xul">Podgląd</a></p> + +<pre><command id="cmd_openhelp" oncommand="alert('Pomoc');"/> +<button label="Pomoc" command="cmd_openhelp"/> +<button label="Więcej pomocy" command="cmd_openhelp"/> + +<button label="Wyłącz" + oncommand="document.getElementById('cmd_openhelp').setAttribute('disabled','true');"/> +<button label="Włącz" + oncommand="document.getElementById('cmd_openhelp').removeAttribute('disabled');"/> +</pre> + +<p>W tym przykładzie oba przyciski używają tego samego polecenia. Kiedy przycisk "Wyłącz" zostanie naciśnięty, polecenie zostaje dezaktywowane poprzez ustalenie jego atrybutu <code><code id="a-disabled"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/disabled">disabled</a></code></code>. W tym przypadku oba przyciski zostaną dezaktywowane.</p> + +<p>Szeroko stosowanym zabiegiem jest grupowanie poleceń w elementy o nazwie <code><code><a href="/pl/docs/Mozilla/Tech/XUL/commandset" title="commandset">commandset</a></code></code>. Znajdują się one zazwyczaj na początku pliku XUL. Przykład poniżej:</p> + +<pre><commandset> + <command id="cmd_open" oncommand="alert('Otwórz!');"/> + <command id="cmd_help" oncommand="alert('Pomoc!');"/> +</commandset> +</pre> + +<p>Polecenie jest wywoływane, kiedy użytkownik aktywuje (włączy) przycisk lub inny element połączony z tą metodą. Możemy, także wywoływać polecenia poprzez zastosowanie metody <code><span id="m-doCommand"><code><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Metoda/doCommand">doCommand</a></code></span></code> dla samego elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/command" title="command">command</a></code></code> lub dla elementu, który jest bezpośrednio połączony z tym poleceniem, takiego jak np. przycisk.</p> + +<h2 id="Dyspozytor_polece.C5.84" name="Dyspozytor_polece.C5.84">Dyspozytor poleceń</h2> + +<p>Możemy także używać poleceń bez korzystania z elementów <code><code><a href="/pl/docs/Mozilla/Tech/XUL/command" title="command">command</a></code></code> lub przynajmniej, bez dodawania atrybutu <code><code id="a-oncommand"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/oncommand">oncommand</a></code></code> dla danego polecenia. W tym przypadku, polecenie nie będzie wywoływało bezpośrednio skryptu, ale w zamian, będzie wyszukiwało element lub funkcję, która obsłuży polecenie. Funkcja ta może być oddzielona od języka XUL oraz może być obsługiwane wewnętrznie. W celu znalezienia czegoś do obsługi poleceń, XUL używa obiektu o nazwie dyspozytor poleceń ( + + <i>ang. command dispatcher</i> + ). Obiekt ten lokalizuje obsługę dla poleceń. Polecenie obsługiwane jest przez tzw. kontroler ( + + <i>ang. controller</i> + ). Tak więc, kiedy wywoływane jest polecenie, dyspozytor poleceń lokalizuje kontroler, który obsłuży dane polecenie. Możemy wyobrazić sobie element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/command" title="command">command</a></code></code>, jako pewien typ kontrolera dla polecenia.</p> + +<p>Dyspozytor poleceń lokalizuje kontroler, przeszukując element posiadający aktualnie skupienie, pod kątem wspomnianego kontrolera, który jest w stanie obsłużyć zadane polecenie. Elementy XUL posiadają własność <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/controllers">controllers</a></span></code></code>, która służy do ich sprawdzania. Możemy wykorzystać własność <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/controllers">controllers</a></span></code></code> w celu dodania własnych kontrolerów. Przykładowo, możemy wykorzystać to w celu obsługi odpowiedzi pola list na polecenia <tt>wytnij</tt>, <tt>kopiuj</tt> i <tt>wklej</tt>. W dalszej części artykułu będziemy analizować przykład obrazujący powyższą czynność. Domyślnie, tylko pola tekstowe posiadają robiący to wszystko kontroler. Obsługuje on operacje schowka, selekcji, cofania, przywracania oraz pewne operacje edycji. Warto zauważyć, że element może także posiadać wiele kontrolerów, które będą sprawdzane.</p> + +<p>Jeśli element posiadający aktualnie skupienie nie posiada odpowiedniego kontrolera, okno jest sprawdzane w następnej kolejności. Okno także posiada własność <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/controllers">controllers</a></span></code></code>, którą możemy modyfikować wedle uznania. Jeśli skupienie znajduje się wewnątrz ramki, każda z nich prowadzi do okna znajdującego się na wyższym poziomie, które także jest sprawdzane. Oznacza to, że polecenia będą działać nawet, jeśli skupienie znajduje się wewnątrz ramki. Powyższa teza jest również prawdziwa dla przeglądarki, ze względu na mówiący o tym, że polecenia edycji wywoływane z głównego menu, będą działać wewnątrz obszaru z zawartością. Warto zaznaczyć, że HTML także posiada system poleceń i kontrolerów, chociaż nie można go wykorzystywać na nieuprzywilejowanych stronach, ale można użyć dla np. rozszerzeń przeglądarki. Jeśli okno nie zapewnia kontrolera zdolnego do obsługi poleceń, nic się nie stanie.</p> + +<p>Możemy także sprawić, aby dyspozytor poleceń, używał własności dokumentu o nazwie <code>commandDispatcher</code>. Jesteśmy również w stanie go odzyskiwać z listy kontrolerów dla elementu lub okna. Dyspozytor poleceń zawiera metody służące pobieraniu kontrolerów dla poleceń oraz służące pobieraniu oraz modyfikacji skupienia.</p> + +<h3 id="Dodawanie_kontroler.C3.B3w" name="Dodawanie_kontroler.C3.B3w">Dodawanie kontrolerów</h3> + +<p>Możemy również zaimplementować własne kontrolery odpowiadające na polecenia. Możemy nawet zmienić domyślną obsługę polecenia, poprzez umiejętne umieszczenie kontrolera. Kontroler powinien implementować cztery metody, przedstawione poniżej:</p> + +<dl> + <dt>supportsCommand (command) </dt> + <dd>Ta metoda powinna zwracać wartość <code>true</code>, jeśli kontroler wspiera polecenie. Jeśli natomiast zwraca <code>false</code>, znaczy to, że polecenie nie jest obsługiwane i dyspozytor poleceń będzie szukał innego kontrolera. Pojedynczy kontroler może wspierać wiele poleceń.</dd> + <dt>isCommandEnabled (command) </dt> + <dd>Ta metoda powinna zwracać wartość <code>true</code>, kiedy polecenie jest aktywne lub <code>false</code> w przeciwnym przypadku. Korespondujące przyciski będą dezaktywowane automatycznie.</dd> + <dt>doCommand (command) </dt> + <dd>Uruchamia polecenia. W tym miejscu umieszczamy kod obsługujący polecenie.</dd> + <dt>onEvent (event) </dt> + <dd>Ta metoda obsługuje zdarzenia.</dd> +</dl> + +<h4 id="Przyk.C5.82ad:_Implementacja_kontrolera" name="Przyk.C5.82ad:_Implementacja_kontrolera">Przykład: Implementacja kontrolera</h4> + +<p>Przyjmijmy, że chcemy zaimplementować pole listy, które będzie obsługiwało polecenie <tt>usuń</tt>. Kiedy użytkownik wybierze <tt>usuń</tt> z menu, pole listy skasuje zaznaczony wiersz. W tym przypadku, wystarczy tylko dołączyć kontroler do pola wyboru, który wykona metoda <code>doCommand</code>.</p> + +<p>Spróbujmy otworzyć poniższy przykład (<a href="https://developer.mozilla.org/samples/xultu/examples/commands.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/commands.xul">Podgląd</a>) w oknie przeglądarki i wybrać pewne elementy z listy. Zauważmy, że polecenie <code>Usuń</code> w menu Edycja przeglądarki jest aktywne i jej wybór usunie wiersz.</p> + +<pre><window id="controller-example" title="Przykład kontrolera" onload="init();" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<script> +function init() +{ + var list = document.getElementById("theList"); + + var listController = { + supportsCommand : function(cmd){ return (cmd == "cmd_delete"); }, + isCommandEnabled : function(cmd){ + if (cmd == "cmd_delete") return (list.selectedItem != null); + return false; + }, + doCommand : function(cmd){ + list.removeItemAt(list.selectedIndex); + }, + onEvent : function(evt){ } + }; + + list.controllers.appendController(listController); +} +</script> + +<listbox id="theList"> + <listitem label="Ocean"/> + <listitem label="Desert"/> + <listitem label="Jungle"/> + <listitem label="Swamp"/> +</listbox> + +</window> +</pre> + +<p>Kontroler (listControler) implementuje cztery metody opisane wyżej. Metoda <code>supportsCommand</code> zwraca <code>true</code> dla polecenia <code>cmd_delete</code>, które jest zastosowane w chwili wyboru opcji <tt>Usuń</tt> z menu. Dla innych poleceń, zwracany jest <code>false</code>. Dzieje się tak dlatego, że kontrolery nie obsługują żadnego innego polecenia.</p> + +<p>Metoda <code>isCommandEnabled</code> zwraca wartość <code>true</code>, kiedy polecenie powinno być aktywne. W tym przypadku sprawdzamy czy w polu listy istnieje zaznaczony element i jeśli istnieje zwraca wartość <code>true</code>. W przeciwnym przypadku zwraca <code>false</code>. Jeśli usuniemy wszystkie wiersze, opcja <tt>Usuń</tt> stanie się nieaktywna. W naszym prostym przykładzie może zajść możliwość kliknięcia na polu listy w celu jego uaktualnienia. Metoda <code>doCommand</code> będzie wywoływana, w chwili wyboru opcji <tt>Usuń</tt> z menu. Spowoduje to, że zaznaczony wiersz pola listy zostanie usunięty. Natomiast metoda <code>onEvent</code> nie musi powodować żadnych efektów, więc nie dodajemy do niej żadnego kodu.</p> + +<h3 id="Przes.C5.82anianie_domy.C5.9Blnego_kontrolera" name="Przes.C5.82anianie_domy.C5.9Blnego_kontrolera">Przesłanianie domyślnego kontrolera</h3> + +<p>Dodajmy ten kontroler do pola listy, poprzez wywołanie metody <code>appendController</code> dla <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/controllers">controllers</a></span></code></code> pola listy. <a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIControllers.html">Obiekt kontrolera</a> posiada pewną liczbę metod, które mogą być używane do manipulowania kontrolerami. Przykładowo, istnieje także metoda <code>insertControllerAt</code>, która "wkłada" kontroler do elementu przed inne kontrolery. Może to być użyteczne w celu utworzenia komendy nadrzędnej. Poniższy przykład wyłącza opcję wklejenia dla danego pola tekstowego.</p> + +<pre>var tboxController = { + supportsCommand : function(cmd){ return (cmd == "cmd_paste"); }, + isCommandEnabled : function(cmd){ return false; }, + doCommand : function(cmd){ }, + onEvent : function(evt){ } +}; + +document.getElementById("tbox").controllers.insertControllerAt(0,tboxController); +</pre> + +<p>W tym przykładzie, wkładamy kontroler ma pozycję o numerze 0, co oznacza, że będzie on się znajdował przed wszystkimi innymi. Nowy kontroler wspiera polecenie 'cmd_paste' i zawsze wskazuje, że polecenie jest wyłączone, dezaktywowane. Domyślny kontroler pola tekstowego, nigdy nie zostanie wywołany ponieważ, dyspozytor poleceń znajdzie w pierwszej kolejności inny kontroler do obsługi, znajdujący się wyżej.</p> + +<p>Następnie, dowiemy się <a href="pl/Kurs_XUL/Aktualizacja_polece%c5%84">jak aktualizować polecenia</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Kontrola_zaznaczenia_i_aktywacji_elementów" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Aktualizacja_poleceń">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/pozycjonowanie_elementów/index.html b/files/pl/mozilla/tech/xul/kurs_xul/pozycjonowanie_elementów/index.html new file mode 100644 index 0000000000..30a474661c --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/pozycjonowanie_elementów/index.html @@ -0,0 +1,266 @@ +--- +title: Pozycjonowanie elementów +slug: Mozilla/Tech/XUL/Kurs_XUL/Pozycjonowanie_elementów +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Element_Positioning +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Pomocnik_XUL:Model_pola" style="float: left;">« Poprzedni</a><a href="/pl/docs/Pomocnik_XUL:Szczegóły_modelu_pola">Następny »</a></p> +</div><p></p> + +<p>W tym artykule dowiemy się jak sterować pozycją i rozmiarem elementu.</p> + +<h2 id="Pozycjonowanie_elementu_pola" name="Pozycjonowanie_elementu_pola">Pozycjonowanie elementu pola</h2> + +<p>Dowiedzieliśmy się już jak pozycjonować elementy - albo poziomo, albo pionowo - wewnątrz pola. Często jednak będziemy musieli sterować pozycją i rozmiarem elementu wewnątrz pola. Dlatego najpierw musimy przyjrzeć się, jak działa pole.</p> + +<p>Pozycja elementu jest określona przez styl rozmieszczenia jego kontenera. Na przykład, przycisk w polu poziomym będzie umieszczony na prawo od poprzedniego przycisku. Rozmiar elementu jest określony przez dwa czynniki: zawartość elementu i rozmiar, jaki określisz. Rozmiar, jaki posiada element jest określony przez to, co dany element zawiera. Na przykład, szerokość przycisku jest określona przez ilość tekstu wewnątrz przycisku.</p> + +<p>Generalnie element będzie tak duży, jak to konieczne do przechowania jego zawartości i nie większy. Pewne elementy, takie jak pola tekstowe mają rozmiar domyślny, jakiego będziemy używać. Pole będzie wystarczająco duże dla przechowania elementów wewnątrz pola. Pole poziome zawierające trzy przyciski będzie tak szerokie, jak trzy przyciski plus niewielka ilość wypełnienia.</p> + +<div class="float-right"><img alt="grafika:boxstyle1n.png"></div> + +<p>Na poniższym rysunku pierwsze dwa przyciski mają zadany odpowiedni rozmiar dla przechowania swojego tekstu. Trzeci przycisk jest większy, ponieważ ma więcej zawartości. Szerokość pola zawierającego przyciski jest to całkowita szerokość przycisków plus wypełnienie między nimi. Wysokość przycisków ma odpowiedni rozmiar do przechowywanego tekstu.</p> + +<h3 id="Atrybuty_width_i_height" name="Atrybuty_width_i_height">Atrybuty <code>width</code> i <code>height</code></h3> + +<p>Niekiedy konieczna jest większa kontrola nad rozmiarem elementu w oknie. Jest kilka cech, które pozwolą ci sterować rozmiarem elementu. Szybkim sposobem na to jest po prostu nadanie elementowi atrybutów <code>width</code> i <code>height</code>, podobnych do tych, jakie można dodać do znacznika <code>img</code> w HTML-u. Poniżej mamy pokazany przykład:</p> + +<p><br> + <span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_1.xul">Podgląd</a></p> + +<pre><button label="OK" width="100" height="40"/> +</pre> + +<p>Jednakże takie rozwiązanie nie jest zalecane. Nie jest to zbyt przenośne i może nie mieścić się w pewnych motywach. Lepszym sposobem jest zastosowanie właściwości stylu, który działa podobnie do arkuszy stylu w HTML. Można zastosować poniższe własności CSS.</p> + +<dl> + <dt><a href="/pl/docs/Web/CSS/width" title="Właściwość widthCSS ustawia szerokość elementu. Domyślnie ustawia szerokość obszaru zawartości , ale jeśli box-sizing jest ustawione na border-box, ustawia szerokość obszaru border ."><code>width</code></a> </dt> + <dd>Określa szerokość elementu.</dd> + <dt><a href="/pl/docs/Web/CSS/height" title="Własność height definiuje w elemencie wysokość obszaru zawartości. Obszar zawartości znajduje sięwewnątrz dopełnienia, obramowania i marginesów elementu."><code>height</code></a> </dt> + <dd>Określa wysokość elementu.</dd> +</dl> + +<p>Poprzez ustawienie jednej z tych dwóch własności, element będzie stworzony z taką szerokością lub wysokością. Jeśli określisz tylko jedną właściwość rozmiaru, druga jest wyliczana, jeśli to jest konieczne. Rozmiar tych właściwości stylu powinien być określony jak liczba następująca po module.</p> + +<h3 id="Elastyczne_elementy" name="Elastyczne_elementy">Elastyczne elementy</h3> + +<p>Rozmiary są dosyć łatwe do obliczenia dla elementów nieelastycznych. Korzystają one po prostu ze swoich określonych szerokości i wysokości, a jeśli rozmiar nie został określony, domyślny rozmiar elementu jest wystarczająco duży, aby dopasować zawartość. Dla elementów elastycznych obliczenie jest odrobinę oszukańcze.</p> + +<p>Elementy elastyczne są tymi które mają atrybut <code><code id="a-flex"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/flex">flex</a></code></code> ustawioną na wartość większą niż 0. Przypomnij sobie, że elementy elastyczne rosną i kurczą się wypełniając dostępną przestrzeń. Ich domyślny rozmiar jest jeszcze obliczany tak samo jak elementów nieelastycznych. Demonstruje to poniższy przykład:</p> + +<p><span id="Przyk%C5%82ad_2"><a id="Przyk%C5%82ad_2"></a><strong>Przykład 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_2.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_2.xul">Podgląd</a></p> + +<pre><window orient="horizontal" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<hbox> + <button label="Tak" flex="1"/> + <button label="Nie"/> + <button label="Nie znam jednego rozwiązania lub jakiegokolwiek innego"/> +</hbox> + +</window> +</pre> + +<p>Początkowo okno pojawi się takie jak to na wcześniejszym obrazku. Pierwsze dwa przyciski będą ułatwione na odpowiedni domyślny rozmiar szerokości a przycisk trzeci będzie większy ponieważ ma dłuższą etykietę. Pierwszy przycisk jest elastyczny a wszystkie trzy elementy umieszczono wewnątrz pola. Szerokość pola będzie ustawiona na początkową całkowitą szerokość wszystkich trzech przycisków (około 430 pikseli na rysunku).</p> + +<p>Jeśli zwiększysz szerokość okna, elementy są sprawdzane pod kątem elastyczności aby wypełnić pustą przestrzeń jaka się pojawi. Przycisk jest jedynym elastycznym elementem, ale nie urośnie szerszy. jest tak ponieważ pole wewnątrz którego mieści się przycisk nie jest elastyczne. Element nieelastyczny nigdy nie zmienia rozmiaru nawet jeśli jest dostępna przestrzeń, więc również i przycisk nie może się zwiększyć. A zatem przycisk się nie poszerzy.</p> + +<p>Rozwiązaniem jest uczynienie również pola elastycznym. Zatem kiedy poszerzasz okno, będzie dostępna dodatkowa przestrzeń, więc pole będzie wzrastało wypełniając tą dodatkową przestrzeń. Ponieważ pole jest duże, będzie stworzone wewnątrz niego więcej dodatkowej przestrzeni, a elastyczny przycisk wewnątrz niego wzrośnie wypełniając dostępną przestrzeń. Ten proces powtarza się, jeśli to konieczne, dla wielu zagnieżdżonych pól.</p> + +<h2 id="Ustawienie_minimalnego_i_maksymalnego_rozmiaru" name="Ustawienie_minimalnego_i_maksymalnego_rozmiaru">Ustawienie minimalnego i maksymalnego rozmiaru</h2> + +<p>Możemy pozwolić elementowi, aby był elastyczny ale ograniczyć rozmiar, aby nie mógł być większy niż pewien rozmiar lub możemy ustawić minimalny rozmiar. Możemy to zrobić poprzez zastosowanie czterech atrybutów:</p> + +<dl> + <dt><code id="a-minwidth"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/minwidth">minwidth</a></code> </dt> + <dd>Określa minimalną długość jaką może posiadać element.</dd> + <dt><code id="a-minheight"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/minheight">minheight</a></code> </dt> + <dd>Określa minimalną wysokość jaką może posiadać element.</dd> + <dt><code id="a-maxwidth"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/maxwidth">maxwidth</a></code> </dt> + <dd>Określa maksymalną długość jaką może posiadać element.</dd> + <dt><code id="a-maxheight"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/maxheight">maxheight</a></code> </dt> + <dd>Określa maksymalną wysokość jaką może posiadać element.</dd> +</dl> + +<p><br> + Wartości te są zawsze mierzone w pikselach. Możemy również zastosować odpowiednią własność CSS, <code>min-width</code>, <code>min-height</code>, <code>max-width</code> i <code>max-height</code>.</p> + +<p>Własności te są tylko użyteczne w przypadku elementów elastycznych. Poprzez ustawienie maksymalnej wysokości, na przykład: obszar przycisku będzie rósł tylko do pewnej maksymalnej wysokości. Będziemy mogli jeszcze zmienić rozmiar okna poza ten punkt, ale przycisk przestanie zwiększać swój rozmiar. Pudełko, w którego wnętrzu jest przycisk, również będzie rosło, chyba, że ustawimy mu również wysokość pudełka.</p> + +<p>Jeśli dwa przyciski są również elastyczne, normalnie oba będą dzieliły ilość dodatkowej przestrzeni. Jeśli jeden przycisk ma maksymalną szerokość, drugi będzie jeszcze kontynuował wzrost i zabierał całą pozostałą przestrzeń.</p> + +<p>Jeśli pudełko ma maksymalną szerokość lub wysokość, dzieci nie będą mogły wzrastać bardziej, niż do maksymalnego rozmiaru. Tu mamy kilka przykładów ustawienia szerokości i wysokości:</p> + +<h3 id="Przyk.C5.82ady_ustawienia_szeroko.C5.9Bci_i_wysoko.C5.9Bci" name="Przyk.C5.82ady_ustawienia_szeroko.C5.9Bci_i_wysoko.C5.9Bci">Przykłady ustawienia szerokości i wysokości</h3> + +<pre><button label="1" style="width: 100px;"/> +<button label="2" style="width: 100em; height: 10px;"/> +<button label="3" flex="1" style="min-width: 50px;"/> +<button label="4" flex="1" style="min-height: 2ex; max-width: 100px"/> +<textbox flex="1" style="max-width: 10em;"/> +<description style="max-width: 50px">To jest nudny, lecz w prosty sposób +zawinięty do nowej linii tekst.</description> +</pre> + +<dl> + <dt>Przykład 1 </dt> + <dd>Pierwszy przycisk będzie wyświetlony z szerokością 100 pikseli (px oznacza piksele). Musisz dodać moduł lub szerokość będzie ignorowana.</dd> + <dt>Przykład 2 </dt> + <dd>Drugi przycisk będzie wyświetlony z wysokością 10 pikseli i szerokości 100em (em jest to rozmiar znaku bieżącej czcionki).</dd> + <dt>Przykład 3 </dt> + <dd>Trzeci przycisk jest elastyczny więc będzie rósł w oparciu o rozmiar pola w którym jest przycisk. Jednakże, przycisk nigdy nie będzie dzielony na mniej niż 50 pikseli. Często elastyczne komponenty takie jak ochraniacz zaabsorbują pozostałą przestrzeń, przełamując współczynnik flex.</dd> + <dt>Przykład 4 </dt> + <dd>Czwarty przycisk jest elastyczny i nigdy nie będzie miał wysokości mniejszej niż 2ex (x jest zazwyczaj wysokością litery x w bieżącej czcionce) lub nie będzie szerszy niż 100 pikseli.</dd> + <dt>Przykład 5 </dt> + <dd>Tekst wejściowy jest elastyczny, ale nigdy nie wzrośnie aby być większym niż 100em. Często będziesz chciał stosować em kiedy określasz rozmiary tekstu. Ten moduł jest użyteczny dla pól tekstowych, aby byłyby one zawsze odpowiedniego rozmiaru, nawet jeśli czcionka jest bardzo duża.</dd> + <dt>Przykład 6 </dt> + <dd>Element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code> jest wymuszony po to aby mieć maksymalną szerokość 50 pikseli. Tekst wewnątrz będzie zawijany do kolejnej linii po pięćdziesiątym pikselu.</dd> +</dl> + +<div class="highlight"> +<h4 id="Nasz_przyk.C5.82ad:_Znajd.C5.BA_pliki" name="Nasz_przyk.C5.82ad:_Znajd.C5.BA_pliki">Nasz przykład: <tt>Znajdź pliki</tt></h4> + +<p>Dodajmy, więc niektóre style do naszego okienka dialogowego <tt>Znajdź pliki</tt>. Tworzymy pole tekstowe o zmiennych wymiarach, tak, aby pasowało do całego okna.</p> + +<pre><textbox id="find-text" flex="1" style="min-width: 15em;"/> +</pre> + +<div class="float-right"><img alt="Grafika:boxstyle1.png"></div> + +<p>W tym przykładzie tekst wejściowy jest elastyczny. W ten sposób, będzie się zwiększał, jeśli użytkownik zmieni rozmiar okienka dialogowego. Jest to użyteczne, jeśli użytkownik chce wpisać długi ciąg znaków tekst. Także, minimalna szerokość, jaką możemy ustawić to 15 em, więc pole tekstowe będzie musiała zawsze posiadać, co najmniej 15 znaków. Jeśli użytkownik zmieni rozmiar okna dialogowego do bardzo małego, to wprowadzany tekst nie będzie się kurczył poza obszar 15 em. Zostanie narysowany wtedy, gdy rozszerzymy nasz obszar poza brzeg okna. Zwróć uwagę, że na obrazku z boku, wprowadzony tekst zwiększył swój rozmiar, gdy rozszerzymy okno do pełnego rozmiaru.</p> +</div> + +<h2 id="Pola_upakowane" name="Pola_upakowane">Pola upakowane</h2> + +<p>Powiedzmy, że mamy pole z dwoma elementami potomnymi, żaden nie jest elastyczny, ale pole jest elastyczne. Na przykład:</p> + +<p><span id="Przyk%C5%82ad_3"><a id="Przyk%C5%82ad_3"></a><strong>Przykład 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_3.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_3.xul">Podgląd</a></p> + +<pre><box flex="1"> + <button label="Happy"/> + <button label="Sad"/> +</box> +</pre> + +<p>Jeśli zmienisz rozmiar okna, pole wystarczy do dopasowania rozmiaru okna. Przyciski nie są elastyczne więc nie będą zmieniać swojej szerokości. Wynikiem jest dodatkowa przestrzeń, która pojawi się po prawej stronie okna, wewnątrz pola. Możesz sobie jednak życzyć aby dodatkowa przestrzeń pojawiła się po lewej stronie, aby przyciski pozostały poprawnie ustawione w oknie.</p> + +<p>Możesz dokonać tego przez umieszczenie separatora wewnątrz pola, ale może wyglądać to niechlujnie, kiedy musisz to robić wiele razy. Lepszym sposobem jest zastawanie dodatkowego atrybutu <code><code id="a-pack"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/pack">pack</a></code></code> w polu. Atrybut ten wskazuje jak <code><code id="a-pack"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/pack">pack</a></code></code> (spakować... ale zobacz czcionkę) elementy potomne wewnątrz pola. Dla orientacji poziomej pól steruje poziomym pozycjonowaniem potomków, zaś dla orientacji pionowej pól steruje pionowym pozycjonowaniem potomków. Możesz zastosować następujące wartości:</p> + +<p><b>You could accomplish this by placing a <code><code><a href="/pl/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code></code> inside the box, but that gets messy when you have to do it numerous times. A better way is to use an additional attribute <code><code id="a-pack"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/pack">pack</a></code></code> on the <code><code><a href="/pl/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code>. This attribute indicates how to <code><code id="a-pack"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/pack">pack</a></code></code> the child elements inside the box. For horizontally oriented boxes, it controls the horizonal positioning of the children. For vertically oriented boxes, it controls the vertical positioning of the children. You can use the following values:</b></p> + +<dl> + <dt>start </dt> + <dd>Pozycjonuje elementy od lewego brzegu dla pól poziomych i od górnego brzegu dla pól pionowych. Jest to wartość domyślna.</dd> + <dt>center </dt> + <dd>Centruje elementy potomne w polu.</dd> + <dt>end </dt> + <dd>Pozycjonuje elementy od prawego brzegu dla pól poziomych i od dolnego brzegu dla pól pionowych.</dd> +</dl> + +<p>Atrybut <code><code id="a-pack"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/pack">pack</a></code></code> jest stosowany dla pola zawierającego elementy będące pakowanymi, a nie same elementy.</p> + +<p>Możemy zmienić wcześniejszy przykład do centrowania elementów jak pokazano:</p> + +<p><span id="Przyk%C5%82ad_4"><a id="Przyk%C5%82ad_4"></a><strong>Przykład 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_4.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_4.xul">Podgląd</a></p> + +<pre><box flex="1" pack="center"> + <button label="Happy"/> + <button label="Sad"/> +</box> +</pre> + +<p>Teraz, kiedy okno zmieniło rozmiar, przyciski są umieszczone centralnie. Porównaj to zachowanie z tym z poprzedniego przykładu.</p> + +<h2 id="Pole_regulowane" name="Pole_regulowane">Pole regulowane</h2> + +<p>Jeśli zmienisz rozmiar okna poziomo w powyższym przykładzie Happy-Sad, pole zwiększy szerokość. Jeśli zmienisz rozmiar okna pionowo, zauważysz, że przyciski zwiększyły wysokość. Jest tak ponieważ elastyczność jest zakładana domyślnie w tym drugim kierunku.</p> + +<p>Możesz sterować tym zachowaniem atrybutem <code><code id="a-align"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/align">align</a></code></code>. Dla pól poziomych steruje pozycjonowaniem potomków pionowo. Dla pól pionowych steruje pozycjonowaniem poziomym potomków. Możliwie wartości są podobne do tych dla <code><code id="a-pack"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/pack">pack</a></code></code>.</p> + +<dl> + <dt>start </dt> + <dd>Ustawia elementy wzdłuż górnego brzegu dla pól poziomych i wzdłuż lewego brzegu dla pól pionowych.</dd> + <dt>center </dt> + <dd>Centruje elementy potomne w polu.</dd> + <dt>end </dt> + <dd>Ustawia elementy wzdłuż dolnego brzegu dla pól poziomych i wzdłuż prawego brzegu pól pionowych.</dd> + <dt>baseline </dt> + <dd>Ustawia elementy tak, aby tekst był ustawiony w rzędzie. Jest to użyteczne dla pól poziomych.</dd> + <dt>stretch </dt> + <dd>Ta wartość, domyślna, powoduje, że elementy rosną do odpowiedniego rozmiaru pola, podobnie do elementów elastycznych, ale w przeciwnym kierunku.</dd> +</dl> + +<p>Jak przy atrybucie <code><code id="a-pack"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/pack">pack</a></code></code>, atrybut <code><code id="a-align"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/align">align</a></code></code> stosuje się dla zawartości pola dla elementów będących ustawianymi, a nie dla samych elementów.</p> + +<p>Na przykład, pierwsze pole poniżej, będzie miało swój obszar potomny, ponieważ jest domyślny. Drugie pole ma atrybut <code><code id="a-align"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/align">align</a></code></code>, więc jego potomkowie będą umieszczeni centralnie.</p> + +<p><span id="Przyk%C5%82ad_5"><a id="Przyk%C5%82ad_5"></a><strong>Przykład 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_5.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_5.xul">Podgląd</a></p> + +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> + +<window id="yesno" title="Pytanie" orient="horizontal" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + + <hbox> + <button label="Tak"/> + <button label="Nie"/> + </hbox> + <hbox align="center"> + <button label="Może"/> + <button label="Być może"/> + </hbox> + +</window> +</pre> + +<div class="float-right"><img alt="grafika:boxstyle2-b.png"></div> + +<p>Możemy także użyć własności stylów <code><a href="pl/CSS/-moz-box-pack">-moz-box-pack</a></code> i <code><a href="pl/CSS/-moz-box-align">-moz-box-align</a></code> zamiast określonych atrybutów.</p> + +<div class="note">Możesz odkryć, że Przykład Pola Regulowanego jest użyteczny dla wypróbowania różnicy właściwości pola.</div> + +<div class="note"><b>You may find the <a class="external" href="http://developer.mozilla.org/samples/xultu/examples/aligner.xul">Box Alignment Example</a> useful for trying out the various box properties.</b></div> + +<h2 id="Przycinanie.2FSkracanie_tekstu_i_przycisk.C3.B3w" name="Przycinanie.2FSkracanie_tekstu_i_przycisk.C3.B3w">Przycinanie/Skracanie tekstu i przycisków</h2> + +<p>Możemy potencjalnie stworzyć element przycisku, który zawiera etykietę, która jest większa niż maksymalna szerokość przycisku. Oczywiście, rozwiązaniem byłoby zwiększenie rozmiaru przycisku. Jednak, przyciski (i inne elementy z etykietami) mają specjalny atrybut nazwany <code>crop</code>, który pozwala ci określić jak tekst może być przycięty jeśli jest zbyt długi</p> + +<p>Jeśli tekst jest przycięty pojawi się wielokropek (...) na przycisku, gdzie tekst został skrócony. Poprawne są cztery możliwie wartości:</p> + +<dl> + <dt>left </dt> + <dd>Tekst przycięty z lewej strony.</dd> + <dt>right </dt> + <dd>Tekst przycięty z prawej strony.</dd> + <dt>center </dt> + <dd>Tekst jest przycięty w środku.</dd> + <dt>none </dt> + <dd>Tekst nie został przycięty. Jest to wartość domyślna.</dd> +</dl> + +<p>Ten atrybut jest rzeczywiście użyteczny tylko kiedy okienko dialogowe zostało stworzone aby być użytecznym w danym rozmiarze. Atrybut <code>crop</code> może również być użyty z innymi elementami, które stosują atrybut <code>label</code> dla etykiet. Poniżej pokazano ten atrybut w działaniu.</p> + +<p><span id="Przyk%C5%82ad_6"><a id="Przyk%C5%82ad_6"></a><strong>Przykład 6</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_6.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_6.xul">Podgląd</a></p> + +<div class="float-right"><img alt="grafika:boxstyle2.png"></div> + +<pre><button label="Proszę, Naciśnij mnie!" crop="right" flex="1"/> +</pre> + +<p>Odnotuj jak tekst na przycisku został przycięty z prawej strony po uczynieniu okienka mniejszym.</p> + +<div class="highlight"> +<p>Przykład <code>Znajdź pliki</code>: <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxstyle.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxstyle.xul">Podgląd</a></p> +</div> + +<p>W następnym artykule podsumujemy i <a href="pl/Kurs_XUL/Szczeg%c3%b3%c5%82y_modelu_pude%c5%82kowego">opiszemy szczegóły modelu pudełkowego</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Model_pudełkowy" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Szczegóły_modelu_pudełkowego">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/pozycjonowanie_stosu/index.html b/files/pl/mozilla/tech/xul/kurs_xul/pozycjonowanie_stosu/index.html new file mode 100644 index 0000000000..bddb7c90f4 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/pozycjonowanie_stosu/index.html @@ -0,0 +1,36 @@ +--- +title: Pozycjonowanie stosu +slug: Mozilla/Tech/XUL/Kurs_XUL/Pozycjonowanie_stosu +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Stack_Positioning +--- +<p> +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Stosy_i_pokłady" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Pudełko_kart">Następny »</a></p> +</div> +<p></p><p>Artykuł ten opisuje, w jaki sposób pozycjonować elementy w stosie. +</p> +<h3 id="Umieszczenie_potomka_stosu" name="Umieszczenie_potomka_stosu"> Umieszczenie potomka stosu </h3> +<p>Normalnie elementy potomne stosu rozciągają i dopasowują się rozmiarem do <code><code><a href="/pl/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code></code> (stosu). Jednakże mamy także możliwość umieszczenia dziecka na określonych współrzędnych. Na przykład, jeśli stos posiada dwa przyciski jako dzieci, jeden może być umieszczony 20 pikseli od lewego brzegu i 50 pikseli od górnego brzegu. Drugi przycisk może zostać umieszczony 100 pikseli od lewego brzegu i 5 pikseli od górnego brzegu. +</p><p>Pozycja elementu potomnego może być określona poprzez dodanie dwóch atrybutów do tego elementu. Dla pozycjonowania poziomego zastosuj atrybut <code>left</code>, a dla pozycjonowania pionowego zastosuj atrybut <code>top</code>. Jeśli nie dodasz tych atrybutów do elementów będących dziećmi elementu <code>stack</code>, to potomek dopasuje się sam do rozmiaru stosu. +</p><p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_bulletins_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_bulletins_1.xul">Podgląd</a> +</p> +<div class="float-right"><img alt="grafika:bulletins1.png"></div> +<pre><stack> + <button label="Gobeliny" left="5" top="5"/> + <button label="Trole" left="60" top="20"/> + <button label="Wampiry" left="10" top="60"/> +</stack> +</pre> +<p>Stos (<code>stack</code>) zawiera trzy elementy, każdy z nich jest pozycjonowany, dzięki rozmieszczeniu atrybutów <code>left</code> oraz <code>top</code>. Tutaj wszystkie dzieci stosu są przyciskami, lecz elementy nie są tego samego typu. Może to być dowolny element zawierający pudełko i inne stosy. </p><p>Rozmiar <code>stack</code> jest określony na podstawie pozycji elementów potomnych. Zawsze jest o takich rozmiarach, aby elementy potomne były widoczne. Więc jaki ustawisz atrybut <code>left</code> na 400, stos będzie miał długość 400 pikseli wokół siebie plus długość elementu. Możemy przesłonić ten rozmiar różnymi własnościami stylu, takimi jak <code>width</code> czy <code>max-width</code>. +</p><p>Możemy zastosować skrypt do uporządkowania wartości atrybutów <code>left</code> i <code>top</code> i w ten sposób elementy będą poruszały się wokoło. Zaletą stosów jest to, że w momencie, gdy jeden absolutnie pozycjonowany element zmienia swoją pozycję, pozycja innych elementów nie jest zmieniana. Jeśli próbujemy przenieść elementy w prawidłowym pudełku, inne elementy mogą zmieniać swoje pozycje. </p><p>Jest także możliwe umieszczenie elementów potomnych, więc są one nakładkami. Kiedy rysujemy elementy potomne, elementy są pokazywane w kolejności, w której pojawiły się w stosie (<code>stack</code>). To jest tak, że pierwszy element potomny jest wyświetlony w <code>stack</code> jako tło (na samym spodzie), następny element potomny wyświetlony zostanie zaraz nad nim i tak dalej. Ostatni element potomny zostanie wyświetlony na samej górze. Możemy zastosować funkcje DOM do przesunięcia kolejności elementów wokoło. +</p><p>Odpowiadający jako pierwszy zdarzeniom myszy, będzie to pierwszy element z góry. Znaczenie ma to przy dwóch przyciskach nałożonych na siebie, gdyż przycisk znajdujący się na górze zostanie przydzielony kliknięciu myszy i oddzielony od innych. +</p><p>Następny artykuł <a href="pl/Kurs_XUL/Pude%c5%82ko_kart">opisuje element tabbox</a>, który będzie jak pokład, ale dostarcza własną nawigację. </p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Stosy_i_pokłady" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Pudełko_kart">Następny »</a></p> +</div> +<p></p> +<div class="noinclude"> +</div> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/proste_paski_menu/index.html b/files/pl/mozilla/tech/xul/kurs_xul/proste_paski_menu/index.html new file mode 100644 index 0000000000..198b5110d8 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/proste_paski_menu/index.html @@ -0,0 +1,163 @@ +--- +title: Proste paski menu +slug: Mozilla/Tech/XUL/Kurs_XUL/Proste_paski_menu +tags: + - Kurs_XUL + - Przewodniki + - XUL +--- +<p> </p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Paski_narzędzi" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dodatkowe_możliwości_menu">Następny »</a></p> +</div><p></p> + +<p>W tym artykule zobaczymy, jak utworzyć prosty pasek menu.</p> + +<h3 id="Tworzenie_menu" name="Tworzenie_menu">Tworzenie menu</h3> + +<p>W XUL menu można stworzyć na różne sposoby. Najprostszym z nich jest dodanie paska menu wraz z wierszem menu na pasku, w taki sam sposób, jak mają inne programy. Możemy także utworzyć menu wyskakujące. Możliwości wykorzystania menu są zależne od liczby różnych elementów, pozwalających Ci utworzyć prosty pasek menu lub menu wyskakujące. Pozycje w menu możemy dostosować bardzo prosto. Widzieliśmy je w części kursu, pokazującego, <a href="pl/Kurs_XUL/Kontrolki_list#Listy_rozwijane">jak dodać listy rozwijane</a> stosując element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code>. W artykule tym opierać będziemy się na zdobytej do tej pory wiedzy.</p> + +<p>Paski menu są często tworzone podobnie jak <code><code><a href="/pl/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code></code>. Pasek menu może być umieszczony wewnątrz <code><code><a href="/pl/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code></code> i po jego lewej stronie pojawi się strzałka, która pozwoli na jego rozwinięcie lub zwinięcie. Takie menu będzie działało, tak jak każdy inny pasek narzędzi. XUL posiada kilka specjalnych elementów menu, które dostarczają typowej funkcjonalności menu.</p> + +<p>Poniżej znajduje się pięć elementów połączonych z paskiem menu i jego menu, które są wykorzystane poniżej, a w dalszej kursu części omówione są ich szczegóły:</p> + +<dl> + <dt><code><a href="/pl/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code> </dt> + <dd>Pojemnik na wiersze menu.</dd> +</dl> + +<dl> + <dt><code><a href="/pl/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> </dt> + <dd>Wbrew nazwie jest to tylko tytuł menu na pasku menu. Ten element możemy umieścić na pasku menu lub możemy go umieścić osobno.</dd> +</dl> + +<dl> + <dt><code><a href="/pl/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> </dt> + <dd>Wyskakujące menu, które pojawia się po naciśnięciu elementu<em>menu</em>. Zawiera w sobie listę z poleceniami menu.</dd> +</dl> + +<dl> + <dt><code><a href="/pl/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code> </dt> + <dd>Pojedyncze polecenie menu. Powinno być umieszczone w <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code>.</dd> +</dl> + +<dl> + <dt><code><a href="/pl/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code> </dt> + <dd>Pozioma linia oddzielająca elementy paska menu. Powinna być umieszczona w <code>menupopup</code>.</dd> +</dl> + +<div class="note"> +<p>Menu można dostosować do swoich potrzeb, umieszczając w nich dowolne elementy. Odnosi się to do wszystkich platform, oprócz Macintosh, który posiada swoje własne specjalne menu na górze ekranu kontrolowane przez system. Podczas tworzenia własnego menu miej na uwadze, że specjalne reguły stylów lub elementów niebędących elementami menu, które są umieszczone w menu, mogą nie zostać zaimplementowane.</p> +</div> + +<h5 id="Przyk.C5.82ad_prostego_paska_menu" name="Przyk.C5.82ad_prostego_paska_menu">Przykład prostego paska menu</h5> + +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_menubar_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_menubar_1.xul">Podgląd</a></p> + +<div class="float-right"><img alt="grafika:menubar-ex1.png"></div> + +<pre><toolbox flex="1"> + <menubar id="sample-menubar"> + <menu id="file-menu" label="Plik"> + <menupopup id="file-popup"> + <menuitem label="Nowy"/> + <menuitem label="Otwórz"/> + <menuitem label="Zapisz"/> + <menuseparator/> + <menuitem label="Zakończ"/> + </menupopup> + </menu> + <menu id="edit-menu" label="Edycja"> + <menupopup id="edit-popup"> + <menuitem label="Cofnij"/> + <menuitem label="Przywróć"/> + </menupopup> + </menu> + </menubar> +</toolbox> +</pre> + +<p><br> + Jak widzimy, został tu stworzony prosty pasek menu z elementem <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code></code>. Znajdują się w nim dwa elementy <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code></code> (<code>Plik</code> i <code>Edycja</code>), ułożone poziomo. Tworzą one dwa tytuły, po naciśnięciu, których pojawi się odpowiednie menu wyskakujące <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code>. Ich rozmiary dostosowują się tak, aby zmieściły się zawarte w nich polecenia. Polecenia te są z kolei tworzone poprzez <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code>.</p> + +<p>W celu oddzielenia grup kilku pozycji w menu stosujemy element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code></code>, będący separatorem.</p> + +<h4 id="Element_menubar" name="Element_menubar">Element <code>menubar</code></h4> + +<p><code><code><a href="/pl/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code></code> jest polem zawierającym menu. Zwróć uwagę, że został on umieszczony wewnątrz <code><code><a href="/pl/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></code>. Pasek menu nie posiada specjalnych atrybutów, ale jest on typu pudełkowego. Znaczy to, że powinniśmy utworzyć pionowy pasek menu ustawiając atrybut <code><code id="a-orient"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/orient">orient</a></code></code> na wartość <code>vertical</code>.</p> + +<div class="float-right"><img alt="grafika:menubar-ex2.png"></div> + +<p>Element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code></code> zazwyczaj jest umieszczany w pasku menu, ale niekoniecznie musi tak być. Jednak jego wygląd będzie się wtedy jeszcze różnił. Obrazek ukazujący aktualny przykład sprawia wrażenie, jakby nie był w pełni paskiem menu (jest jeszcze wczesne stadium projektowania tegoż paska).</p> + +<h4 id="Element_menu" name="Element_menu">Element <code>menu</code></h4> + +<p>Elementy <code>menu</code> zachowują się podobnie, jak elementy przycisków <code><code><a href="/pl/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code>. Część atrybutów jest taka sama, a oprócz tego istnieje kilka dodatkowych:</p> + +<dl> + <dt><code id="a-id"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/id">id</a></code> </dt> + <dd>Unikatowy identyfikator.</dd> +</dl> + +<dl> + <dt><code id="a-label"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/label">label</a></code> </dt> + <dd>Etykieta, która powinna pojawić się jako napis na menu, np. <code>Plik</code> lub <code>Edytuj</code>.</dd> +</dl> + +<dl> + <dt><code id="a-disabled"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/disabled">disabled</a></code> </dt> + <dd>Atrybut typu logicznego (boolean), określający element menu jako wyłączony, gdy posiada przypisany <code>true</code>. Może przyjmować wartości typu boolean - <code>true</code> i domyślnie ustawioną <code>false</code>.</dd> +</dl> + +<dl> + <dt><code id="a-accesskey"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/accesskey">accesskey</a></code> </dt> + <dd>Jest to klawisz, który użytkownik może nacisnąć, aby aktywować pozycję menu. Litera, która zazwyczaj pokazuje znak podkreślenia w tytule menu. Menu w Mozilli wygląda jak atrybut <code><code id="a-label"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/label">label</a></code></code> i następnie dodajemy podkreślenie znaku do używanego w etykiecie znaku. Z tego powodu powinno się używać określanego i istniejącego znaku w jakiejś treści.</dd> +</dl> + +<h4 id="Element_menupopup" name="Element_menupopup">Element <code>menupopup</code></h4> + +<p>Element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> tworzy wyskakujące menu zawierające komendy. Jest ono typu pudełkowego, domyślnie ustawione pionowo. Można zmienić je na poziome, wtedy <code>menuitem</code> będą wyświetlone w rzędzie. Zazwyczaj <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> zawiera elementy typu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code> i <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code></code>, ale możesz także wstawić elementy jakiegoś typu (nie będą one jednak wtedy wyświetlane pod Macintoshem).</p> + +<h4 id="Element_menuitem" name="Element_menuitem">Element <code>menuitem</code></h4> + +<p>Element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code> jest podobny do elementu <code>menu</code> i część jego atrybutów jest identyczna:</p> + +<dl> + <dt><code id="a-id"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/id">id</a></code> </dt> + <dd>Unikatowy identyfikator.</dd> +</dl> + +<dl> + <dt><code id="a-label"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/label">label</a></code> </dt> + <dd>Etykieta, która powinna pojawić się na menu jako napis, np. <code>Otwórz</code> lub <code>Zapisz</code>.</dd> +</dl> + +<dl> + <dt><code id="a-disabled"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/disabled">disabled</a></code> </dt> + <dd>Atrybut typu logicznego (boolean), określający element menu jako wyłączony, gdy posiada przypisany <code>true</code>. Może przyjmować wartości typu boolean - <code>true</code> i domyślną <code>false</code>.</dd> +</dl> + +<dl> + <dt><code id="a-accesskey"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/accesskey">accesskey</a></code> </dt> + <dd>Jest to klawisz, który użytkownik może nacisnąć, aby aktywować pozycję menu. Litera, która zazwyczaj pokazuje znak podkreślenia w tytule menu. Menu w Mozilli wygląda jak atrybut <code><code id="a-label"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/label">label</a></code></code> i następnie dodajemy podkreślenie znaku do używanego w etykiecie znaku. Z tego powodu powinno się używać określanego i istniejącego znaku w jakiejś treści.</dd> +</dl> + +<dl> + <dt><code id="a-acceltext"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/acceltext">acceltext</a></code> </dt> + <dd>Określa klawisz skrótu, który widoczny jest obok tekstu komendy menu. Nic nie łączy tych skrótów ze skrótami w <code><a href="/pl/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>. Zobacz artykuł <a href="pl/Kurs_XUL/Skr%c3%b3ty_klawiaturowe">o skrótach klawiaturowych</a>.</dd> +</dl> + +<h4 id="Element_menuseparator" name="Element_menuseparator">Element <code>menuseparator</code></h4> + +<p>Element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code></code> nie posiada specjalnych atrybutów. Tworzy po prostu poziomą linię pomiędzy poprzednim, a następnym elementem.</p> + +<p>W następnym artykule poznamy <a href="pl/Kurs_XUL/Dodatkowe_mo%c5%bcliwo%c5%9bci_menu">dodatkowe możliwości menu</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Paski_narzędzi" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dodatkowe_możliwości_menu">Następny »</a></p> +</div><p></p> + +<div class="noinclude"> </div> + +<p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/przewijane_menu/index.html b/files/pl/mozilla/tech/xul/kurs_xul/przewijane_menu/index.html new file mode 100644 index 0000000000..b0eca5280a --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/przewijane_menu/index.html @@ -0,0 +1,50 @@ +--- +title: Przewijane menu +slug: Mozilla/Tech/XUL/Kurs_XUL/Przewijane_menu +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Scrolling_Menus +--- +<p> +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Wyskakujące_menu" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dodawanie_funkcji_obsługi_zdarzeń">Następny »</a></p> +</div> +<p></p><p>Artykuł ten opisuje przewijane menu oraz jak stosować mechanizm przewijania wraz z innymi elementami. +</p> +<h3 id="Tworzenie_du.C5.BCego_menu" name="Tworzenie_du.C5.BCego_menu"> Tworzenie dużego menu </h3> +<p>Zastanawialiście się, co by się stało, jeśli utworzylibyśmy menu wraz ze zbyt dużą ilością pozycji, które nie chcą się pomieścić w oknie? Mozilla dostarczyła mechanizm przewijania, który pozwala na przewijanie poprzez swoje pozycje w oknie. +</p> +<div class="float-right"><img alt="grafika:menuscroll1.png"></div> +<p>Jeśli w menu zabraknie dostępnej wolnej przestrzeni w oknie menu, to automatycznie pojawią się na obu jego końcach strzałeczki. Jeśli najedziesz kursorem myszki na którąkolwiek strzałkę, to menu zostanie przewinięte w dół albo w górę. Jeśli natomiast jest więcej dostępnego miejsca, a menu się mieści w oknie, to strzałki nie zostaną wyświetlone. Zwróć uwagę, że pojawienie się strzałek zależy od aktualnie zastosowanego motywu. </p><p>Powyższe zachowanie jest wywoływane automatycznie. Nie musimy nic więcej robić, aby pojawił się on w przewijanym menu. Znajdzie on zastosowanie do menu w pasku narzędzi, w wyskakujących okienkach lub listach menu. Zaimplementowany zostanie poprzez element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/arrowscrollbox" title="arrowscrollbox">arrowscrollbox</a></code></code>. Ten element może być zastosowany do utworzenia przewijanego pudełka, posiadającego strzałki. +</p><p>Element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/arrowscrollbox" title="arrowscrollbox">arrowscrollbox</a></code></code> możemy zastosować gdziekolwiek w regularnym pudełku. Nie musisz go stosować do menu. Jest on zawsze pionowym pudełkiem i może być wewnątrz niego umieszczony dowolny element. Możemy go zastosować do implementacji listy, kiedy nie chcemy tworzyć listy za pomocą listy rozwijanej. +</p><p>Poniższy przykład pokazuje, jak stworzyć przewijaną listę przycisków (aby zobaczyć strzałki przewijania, należy zminimalizować okno z poniższym przykładem): +</p> +<h4 id="Przyk.C5.82ad_-_przewijana_lista_przycisk.C3.B3w" name="Przyk.C5.82ad_-_przewijana_lista_przycisk.C3.B3w"> Przykład - przewijana lista przycisków </h4> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_menuscroll_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_menuscroll_1.xul">Podgląd</a> +</p> +<pre><arrowscrollbox orient="vertical" flex="1"> + <button label="Czerwony"/> + <button label="Niebieski"/> + <button label="Zielony"/> + <button label="Żółty"/> + <button label="Pomarańczowy"/> + <button label="Srebrny"/> + <button label="Lawendowy"/> + <button label="Złoty"/> + <button label="Turkusowy"/> + <button label="Brzoskwiniowy"/> + <button label="Bordowy"/> + <button label="Czarny"/> +</arrowscrollbox> +</pre> +<p>Chcąc zobaczyć działanie przykładu, najpierw otwórz zmaksymalizowanie okno wraz z powyższym przykładem. Następnie zmniejsz rozmiar okna, co spowoduje pojawienie się strzałek umożliwiających przewijanie listy przycisków. Ponowne zmaksymalizowanie tego samego okna spowoduje, iż strzałki znikną. </p><p>Możemy ustawić własność CSS <code>max-height</code> dla elementu <code>arrowscrollbox</code>, aby ograniczyć rozmiar pola przewijania, co spowoduje wyświetlenie się strzałek, które będą dostępne przez cały czas. </p><p>Element <code>arrowscrollbox</code> jest użyteczny głównie w menu i czasem w okienkach wyskakujących. +</p><p>W następnym artykule pokażemy, <a href="pl/Kurs_XUL/Dodawanie_funkcji_obs%c5%82ugi_zdarze%c5%84">jak dodać obsługę zdarzeń do elementów XUL</a>. +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Wyskakujące_menu" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dodawanie_funkcji_obsługi_zdarzeń">Następny »</a></p> +</div> +<p></p><p><br> +</p> +<div class="noinclude"> +</div> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/przykłady_xpcom/index.html b/files/pl/mozilla/tech/xul/kurs_xul/przykłady_xpcom/index.html new file mode 100644 index 0000000000..97d9816418 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/przykłady_xpcom/index.html @@ -0,0 +1,155 @@ +--- +title: Przykłady XPCOM +slug: Mozilla/Tech/XUL/Kurs_XUL/Przykłady_XPCOM +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/XPCOM_Examples +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Interfejsy_XPCOM" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Drzewa">Następny »</a></p> +</div><p></p> + +<p>Ten artykuł dostarczy kilku przykładów użycia XPCOM wraz z dodatkowymi interfejsami.</p> + +<h2 id="Zarz.C4.85dzanie_oknem" name="Zarz.C4.85dzanie_oknem">Zarządzanie oknem</h2> + +<div class="note"> +<p>This example contains RDF datasource that will be seen in the <a href="pl/Kurs_XUL/Szablony">later section</a>. You might skip this example for the time being, except when you have already had that knowledge.</p> +</div> + +<h4 id="Tworzenie_menu_okna" name="Tworzenie_menu_okna">Tworzenie menu okna</h4> + +<p>Lista aktualnie otwartych okien w przeglądarce Mozilli, może być użyta jako <a href="pl/Kurs_XUL/%c5%b9r%c3%b3d%c5%82a_danych_RDF">źródło danych RDF</a>. Pozwala ci to stworzyć menu okna razem z listą aktualnie otwartych okien w aplikacji. Źródłem danych do tego jest <code>rdf:window-mediator</code>. Możemy użyć tego jak w poniższym przykładzie:</p> + +<p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_xpcomex_1.xul.txt">Źródła</a></p> + +<pre><toolbox> + <menubar id="windowlist-menubar"> + <menu label="Window"> + <menupopup id="window-menu" datasources="rdf:window-mediator" ref="NC:WindowMediatorRoot"> + <template> + <rule> + <menuitem uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/> + </rule> + </template> + </menupopup> + </menu> + </menubar> +</toolbox> +</pre> + +<p>W oknie menu zostanie stworzone z listy wszystkich otwartych okien. Wypróbuj ten przykład przez otwarcie kilku okien przeglądarki a zobaczysz, że są one jako lista w menu.</p> + +<h3 id="Komponent_Window_mediator" name="Komponent_Window_mediator">Komponent Window mediator</h3> + +<p>Jest to dobre dla wyświetlania listy otwartych okien, ale chcielibyśmy poprawić to, aby klikając na pozycję w menu przełączyć się do tego okna. Jest to osiągnięte przez zastosowanie komponentu, window mediator. Implementuje on interfejs nsiWindowDataSource. Poniższy kod pokazuje jak stworzyć komponent, który go implementuje:</p> + +<pre>var wmdata = Components.classes["@mozilla.org/rdf/datasource;1?name=window-mediator"].getService(); +wmdata.QueryInterface(Components.interfaces.nsIWindowDataSource); +</pre> + +<p>Kod ten wyszukuje komponent źródła danych window mediator. Komponent używany tu jest taki sam jak ten obsługujący źródło danych bazy RDF window-mediator. Możesz również uzyskać ten komponent przez serwis RDF, który jest kolejnym serwisem, który zarządza źródłami danych RDF.</p> + +<p>Interfejs <a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIWindowDataSource.html">nsIWindowDataSource</a> ma funkcję <code>getWindowForResource</code>, która może być użyta do pobrania zasobu danego okna. We wcześniejszym przykładzie wygenerowaliśmy listę okien i dodaliśmy ją do menu przez szablon. Szablon generuje atrybut <code>id</code> każdego elementu z pozycji <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code>. Wartość tego atrybutu może być użyta jako zasób. Oznacza to,że aby przełączyć się do aktywnego okna musimy wykonać następujące czynności:</p> + +<ol> + <li>Określić element, jaki kliknie użytkownik.</li> + <li>Uzyskać wartość atrybutu <code><code id="a-id"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/id">id</a></code></code> z tego elementu.</li> + <li>Przekazać tą wartość do <code>getWindowForResource()</code> uzyskanego obiektu okna.</li> + <li>Przełączyć się na aktywność tego okna.</li> +</ol> + +<p>Przykład poniżej pokazuje jak możemy to zrobić:</p> + +<pre><toolbox> + <menubar id="windowlist-menubar"> + <menu label="Window" oncommand="switchFocus(event.target);"> + <menupopup id="window-menu" datasources="rdf:window-mediator" ref="NC:WindowMediatorRoot"> + <template> + <rule> + <menuitem uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/> + </rule> + </template> + </menupopup> + </menu> + </menubar> +</toolbox> + +<script> +function switchFocus(elem) +{ + var mediator = Components.classes["@mozilla.org/rdf/datasource;1?name=window-mediator"].getService(); + mediator.QueryInterface(Components.interfaces.nsIWindowDataSource); + + var resource = elem.getAttribute('id'); + switchwindow = mediator.getWindowForResource(resource); + + if (switchwindow){ + switchwindow.focus(); + } +} +</script> +</pre> + +<p>Do elementu menu zostało dodane polecenie obsługi programu, które wywołuje funkcję switchFocus() z parametrem elementu, jaki został wybrany z menu. Funkcja <code>switchFocus()</code>:</p> + +<ul> + <li>Najpierw pobiera referencję do komponentu implementującego interfejs window mediator.</li> + <li>Następnie pobieramy atrybut <code><code id="a-id"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/id">id</a></code></code> dla elementu. Możemy użyć tej wartości atrybutu <code><code id="a-id"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/id">id</a></code></code> jako zasobu.</li> + <li>Funkcja <code>getWindowForResource()</code> pobiera zasób i zwraca okno dopasowane do niego.</li> + <li>Okno to, przechowywane w zmiennej <code>switchwindow</code> jest takie samo jak obiekt okna, JavaScript.</li> + <li>Oznacza to,że możesz wywołać dowolną z funkcji dostarczoną przez nie, z których jedną jest funkcja <code><span id="m-focus"><code><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Metoda/focus">focus()</a></code></span></code>.</li> +</ul> + +<h2 id="Ciasteczka" name="Ciasteczka">Ciasteczka</h2> + +<p>Następnie pobierzemy listę ciasteczek, zapisanych w przeglądarce. Usługa cookies może być użyta do tego celu. Implementuje interfejs <code><a class="external" href="http://xulplanet.com/references/xpcomref/ifaces/nsICookieManager.html">nsICookieManager</a></code>, który może być używany do wyliczania wszystkich ciasteczek. Tutaj mamy przykład, który zapełnia listę menu nazwami wszystkich ciasteczek zebranych z MozillaZine.</p> + +<pre><script> + +function getCookies() +{ + var menu = document.getElementById("cookieMenu"); + menu.removeAllItems(); + + var cookieManager = Components.classes["@mozilla.org/cookiemanager;1"] + .getService(Components.interfaces.nsICookieManager); + + var iter = cookieManager.enumerator; + while (iter.hasMoreElements()){ + var cookie = iter.getNext(); + if (cookie instanceof Components.interfaces.nsICookie){ + if (cookie.host == "www.mozillazine.org") + menu.appendItem(cookie.name,cookie.value); + } + } +} +</script> + +<hbox> + <menulist id="cookieMenu" onpopupshowing="getCookies();"/> +</hbox> +</pre> + +<p>Funkcja getCookies() będzie wywoływana, gdy tylko otwarto menu jak wskazuje atrybut <code><code id="a-onpopupshowing"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/onpopupshowing">onpopupshowing</a></code></code> w <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code>. Pierwsze dwie linie getCookies() pobierają menulist (listę menu) i usuwają wszystkie istniejące pozycje w menu. Jest to wykonywane, ponieważ getCookies() jest wywoływana za każdym razem, kiedy otwarto menu a nie chcemy pozostawić tam starych pozycji za każdym razem.</p> + +<p>Następnie jest wyszukiwany menadżer ciasteczek. Menadżer cookie ma metodę, <code>enumerator</code>, która zwraca obiekt implementujący <code><a href="pl/NsISimpleEnumerator">nsISimpleEnumerator</a></code>. Może być to używane do przechodzenia przez wszystkie cookies. Numerator ma metodę <code>hasMoreElements()</code> zwracającą prawdę dopóki nie pobierzemy ostatniego cookie. Metoda getNext() pobiera cookie i przesuwa indeks numeratora na następne cookie. Ponieważ numerator właściwie zwraca obiekt ogólny, musimy go <code>QueryInterface()</code> do <code><a class="external" href="http://xulplanet.com/references/xpcomref/ifaces/nsICookie.html">nsICookie</a></code> zanim możemy go zastosujemy. W tym przypadku użyjemy operatora <code>instanceof</code> aby to osiągnąć.</p> + +<p>W końcu, dla ciastek, dodajemy pozycję w menu. Do tego używamy właściwości ciastek – nazwy hosta i wartości. Menu mają funkcję <code><span id="m-appendItem"><code><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Metoda/appendItem">appendItem()</a></code></span></code>, której możemy używać do dodawania pozycji w menu, daną etykietkę i wartość.</p> + +<h2 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h2> + +<p>Więcej przykładów jest dostępnych:</p> + +<ul> + <li><a href="pl/Fragmenty_kodu">Fragmenty kodu</a></li> + <li><a class="external" href="http://kb.mozillazine.org/Category:XPCOM_example_code" rel="freelink">http://kb.mozillazine.org/Category:XPCOM_example_code</a></li> +</ul> + +<p>Następnie, zobaczymy <a href="pl/Kurs_XUL/Drzewa">jak utworzyć drzewa</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Interfejsy_XPCOM" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Drzewa">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/pudełko_kart/index.html b/files/pl/mozilla/tech/xul/kurs_xul/pudełko_kart/index.html new file mode 100644 index 0000000000..5ca8a50616 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/pudełko_kart/index.html @@ -0,0 +1,179 @@ +--- +title: Pudełko kart +slug: Mozilla/Tech/XUL/Kurs_XUL/Pudełko_kart +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Tabboxes +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Pozycjonowanie_stosu" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Siatki">Następny »</a></p> +</div><p></p> + +<p>W oknie właściwości często występują strony z kartami. W tym artykule dowiemy się, jak je zrobić.</p> + +<h2 id="Pude.C5.82ko_kart" name="Pude.C5.82ko_kart">Pudełko kart</h2> + +<p>Pudełka kart zazwyczaj stosujemy w aplikacjach i w oknach właściwości. Seria kart dostępna jest u góry okna i umieszczona wzdłuż niego. Użytkownik może kliknąć każdą z tych kart i zobaczyć ustawienia różnych opcji. Jest to bardzo użyteczne rozwiązanie w przypadku, gdy mamy więcej opcji niż miejsca w jednym oknie.</p> + +<p>XUL dostarcza metod do utworzenia takiego okna dialogowego. Można przy tym użyć pięć nowych elementów, z których każdy jest omówiony pokrótce poniżej:</p> + +<dl> + <dt><code><a href="/pl/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></dt> + <dd>Pudełko zewnętrzne, które zawiera karty przez całą swoją górę i osobne strony kart.</dd> +</dl> + +<dl> + <dt><code><a href="/pl/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></dt> + <dd>Pudełko wewnętrzne, które stanowi pojedynczą kartę. Innymi słowami, jest to wiersz kart.</dd> +</dl> + +<dl> + <dt><code><a href="/pl/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code></dt> + <dd>Określona karta. Kliknij w kartę, aby pojawiła się ona jako pierwsza strona.</dd> +</dl> + +<dl> + <dt><code><a href="/pl/docs/Mozilla/Tech/XUL/tabpanels" title="tabpanels">tabpanels</a></code></dt> + <dd>Kontener dla strony.</dd> +</dl> + +<dl> + <dt><code><a href="/pl/docs/Mozilla/Tech/XUL/tabpanel" title="tabpanel">tabpanel</a></code></dt> + <dd>Ciało pierwszej strony. Za pomocą tego elementu możemy umieścić zawartość dla strony karty. Pierwszy tabpanel zostanie przypisany do pierwszej karty, drugi do drugiej i tak dalej z pozostałymi przypisaniami.</dd> +</dl> + +<p><code><code><a href="/pl/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></code> jest zewnętrznym elementem. Składa się z dwóch potomków, elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code>, który określa wiersz kart oraz elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tabpanels" title="tabpanels">tabpanels</a></code></code>, który składa się ze stron karty.</p> + +<p>Poniżej pokazana została ogólna składnia pudełka kart:</p> + +<pre><tabbox id="tablist"> + <tabs> + <!-- elementy tab będą tu --> + </tabs> + <tabpanels> + <!-- elementy tabpanel będą tu --> + </tabpanels> +</tabbox> +</pre> + +<p>Elementy <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code></code> są umieszczone wewnątrz elementów <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code>, które są bardziej jak regularne pudełka. Element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code> sam został umieszczony w elemencie <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></code>. Element <code>tabbox</code> także składa się z elementu <code>tabpanels</code>, który będzie dostępny poniżej karty stosowanej do orientacji poziomej wokół pudełka kart.</p> + +<p><span class="comment">element which will appear below the tabs due to the vertical orientation on the whole tabbox. [hmm troche to dziwne, musze spr. to (ptaszor)]</span></p> + +<p>Naprawdę to tu nic specjalnego nie ma o elementach karty, które by tworzyły inne elementy poza pudełkami kart. Tak jak pudełka, karty także składają się z jakiś elementów. Różnica jest taka, że karty renderują nieco inaczej swoją treść i tylko jeden panel treści karty/kart jest widoczny w danym momencie, coś jak <code><code><a href="/pl/docs/Mozilla/Tech/XUL/deck" title="deck">deck</a></code></code>.</p> + +<p>Treść pojedynczej strony karty powinna być wewnątrz każdego elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tabpanel" title="tabpanel">tabpanel</a></code></code>. Nie powinna zostać umieszczona w elemencie <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code></code>, gdyż znajdowałby się tam, gdzie treść karty jest wyświetlana wzdłuż góry.</p> + +<p>Każdy element <code>tabpanels</code> staje się stroną wyświetloną na pudełku karty. Pierwszy panel powiązany jest z pierwszą kartą, drugi z drugą kartą i tak dalej. Jest to związek jeden-na-jeden pomiędzy elementem <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code></code> i elementem <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tabpanel" title="tabpanel">tabpanel</a></code></code>.</p> + +<p>Kiedy decydujemy o rozmiarze <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></code>, to zastosowany zostanie największy możliwy rozmiar. Znaczy to tyle, że, jeśli będzie dziesięć pól tekstowych na jednej karcie i tylko jedno na kolejnej, strona będzie dopasowana rozmiarem do jednej z dziesięciu na niej występujących. Obszar wzięty przez obszar nowej karty nie zmieni się, kiedy użytkownik stworzy nową stronę karty.</p> + +<p>Spójrz na poniższy przykład:</p> + +<h3 id="Przyk.C5.82ad_tabbox" name="Przyk.C5.82ad_tabbox">Przykład <code>tabbox</code></h3> + +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_tabpanel_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_tabpanel_1.xul">Podgląd</a></p> + +<div class="float-right"><img alt="grafika:tabpanel1.png"></div> + +<pre><tabbox> + <tabs> + <tab label="Poczta"/> + <tab label="Nowości"/> + </tabs> + <tabpanels> + <tabpanel id="mailtab"> + <checkbox label="Automatycznie sprawdź pocztę"/> + </tabpanel> + <tabpanel id="newstab"> + <button label="Wyczyść bufor nowości"/> + </tabpanel> + </tabpanels> +</tabbox> +</pre> + +<p><br> + Tutaj zostały dodane dwie karty, pierwsza z etykietą <tt>Poczta</tt> oraz druga z etykietą <tt>Nowości</tt>. Kiedy użytkownik kliknie kartę 'Poczta', to zostanie wyświetlona zawartość pierwszej karty. W tym przypadku strona będzie dostępna z etykietą pola wyboru <tt>Automatycznie sprawdź pocztę</tt>. Kiedy klikniemy w drugą kartę, strona będzie zawierała przycisk z etykietą <tt>Wyczyść bufor nowości</tt>.</p> + +<p>Obecnie zaznaczony element <code>tab</code> posiada dodatkowy atrybut <code>selected</code>, który jest ustawiony na wartość <code>true</code>. Ta przeróbka wyglądu aktualnie zaznaczonej karty tworzy ją jakby była zaznaczona. W jednym momencie tylko jedna karta może posiadać wartość <code>true</code> tego atrybutu.</p> + +<h3 id="Rozmieszczenie_kart" name="Rozmieszczenie_kart">Rozmieszczenie kart</h3> + +<p>Kończąc, możemy zmienić pozycję kart, więc będzie dostępne na jakiejkolwiek stronie karty. Nie ma jakiejś specjalnej składni do zrobienia tego. Możemy w prosty sposób ustawić atrybuty <code>orient</code> oraz <code>dir</code> jako atrybuty wymagane. Pamiętaj, że elementy kart są bardzo regularnymi polami w obszarze graficznym strony. Oprócz tego element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></code> jest bardzo podobny do regularnych kontenerów pola z domyślną pionową orientacją, gdzie element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code> jest bardzo podobny do kontenerów pola z domyślną orientacją w poziomie.</p> + +<p>Na przykład, umieść karty wzdłuż lewej strony, zmień orientację elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code> na pionową, aby utworzyć karty dostępne na poziomym stosie. Następnie uporządkuj <code>tabbox</code>, więc niech posiada orientację poziomą. Utworzona zostanie karta dostępna z lewej strony karty (nie powyżej). Zwróć uwagę, że ta zmiana orientacji elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tabpanels" title="tabpanels">tabpanels</a></code></code> nie będzie miała żadnego efektu do momentu, aż strony kart są ułożone jedna na drugiej.</p> + +<p>Możemy wstawić karty po prawej lub u dołu strony poprzez przeniesienie elementu <code>tabs</code> za element <code>tabpanels</code> w twoim kodzie. Po kolei możemy ustawiać atrybut <code>dir</code> na atrybut <code>reverse</code> w <code>tabbox</code>. Jednakże powinieneś prawdopodobnie zostawić kartę na górze, w innym przypadku może nie wyglądać za dobrze w określonym motywie.</p> + +<div class="highlight"> +<h2 id="Dodawanie_karty_do_okna_Znajd.C5.BA_pliki" name="Dodawanie_karty_do_okna_Znajd.C5.BA_pliki">Dodawanie karty do okna <tt>Znajdź pliki</tt></h2> + +<p>Dodajmy drugą kartę do okna dialogowego <tt>Znajdź pliki</tt>. Utworzymy kartę <tt>Opcje</tt> (oraz zaznaczymy ją jako domyślną do wyświetlenia), która będzie składać się z kilku opcji służących do szukania. Może to nie jest najlepszy interfejs, aby to wykonać, ale użyjemy go, aby zademonstrować karty. Etykieta na górze karty i pudełko kryteriów szukania będzie nam potrzebne do zrobienia pierwszej karty. Dodajmy także kilka opcji do kolejnej karty. Pasek postępu i przyciski zostały w oknie głównym, na zewnątrz kart.</p> + +<pre class="eval"><vbox flex="1"> + +<span class="highlightred"><tabbox selectedIndex="1"> + <tabs> + <tab label="Szukaj"/> + <tab label="Opcje"/> + </tabs> + + <tabpanels> + <tabpanel id="searchpanel" orient="vertical"></span> + + <description> + Wpisz poniżej swoje kryteria szukania i naciśnij przycisk Znajdź, + aby rozpocząć szukanie. + </description> + + <spacer style="height: 10px"/> + + <groupbox orient="horizontal"> + <span class="nowiki"><caption label="Kryteria szukania"/></span> + + <menulist id="searchtype"> + <menupopup> + <menuitem label="Nazwa"/> + <menuitem label="Rozmiar"/> + <menuitem label="Data modyfikacji"/> + </menupopup> + </menulist> + <spacer style="width: 10px;"/> + <menulist id="searchmode"> + <menupopup> + <menuitem label="Jest"/> + <menuitem label="Nie jest"/> + </menupopup> + </menulist> + + <spacer style="height: 10px"/> + <textbox id="find-text" flex="1" style="min-width: 15em;"/> + + </groupbox> + <span class="highlightred"></tabpanel> + + <tabpanel id="optionspanel" orient="vertical"> + <checkbox id="casecheck" label="Wyszukuj szczegółowo"/> + <checkbox id="wordscheck" label="Dopasuj całą nazwę"/> + </tabpanel> + + </tabpanels> +</tabbox></span> +</pre> + +<div class="float-right"><img alt="grafika:tabpanel2.png"></div> + +<p>Elementy karty są umieszczone wokół głównej treści okna. Możemy zobaczyć dwie karty <tt>Szukaj</tt> oraz <tt>Opcje</tt>. Kliknięcie na którejś wywoła pokazanie się jednej ze stron wspomnianych kart. Pierwsza karta wygląda lepiej niż wyglądała wcześniej, poza kartami wzdłuż góry.</p> + +<h3 id="Przyk.C5.82ad:_Znajd.C5.BA_pliki" name="Przyk.C5.82ad:_Znajd.C5.BA_pliki">Przykład: <tt>Znajdź pliki</tt></h3> + +<p><a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-tabpanel.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-tabpanel.xul">Podgląd</a></p> +</div> + +<p>Następnie, zobaczymy jak się <a href="pl/Kurs_XUL/Siatki">tworzy zawartość siatki</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Pozycjonowanie_stosu" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Siatki">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/rozdzielacze/index.html b/files/pl/mozilla/tech/xul/kurs_xul/rozdzielacze/index.html new file mode 100644 index 0000000000..14f9c6f763 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/rozdzielacze/index.html @@ -0,0 +1,95 @@ +--- +title: Rozdzielacze +slug: Mozilla/Tech/XUL/Kurs_XUL/Rozdzielacze +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Splitters +--- +<p> +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Panele_treści" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Paski_przewijania">Następny »</a></p> +</div> +<p></p><p>W tym artykule dowiemy się, jak dodać rozdzielacze do okna. +</p> +<h3 id="Rozdzielanie_pude.C5.82ka" name="Rozdzielanie_pude.C5.82ka"> Rozdzielanie pudełka </h3> +<p>Może wystąpić sytuacja, że będziemy chcieli wyświetlić okno podzielone na dwie sekcje, w którym użytkownik będzie mógł zmienić rozmiar. Przykładem jest okno przeglądarki Mozilli, gdzie możemy zmienić rozmiar paska strony, poprzez przeciągnięcie lub zawinięcie wspomnianego paska, który rozdziela dwie ramki. Możemy także ukryć pasek strony klikając go w miejscu "wcięcia". </p><p>Rozdzielacz tworzymy poprzez użycie elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/splitter" title="splitter">splitter</a></code></code>. Ten element tworzy wąski pasek pomiędzy sekcjami, który pozwala na zmianę rozmiarów tych sekcji. Możemy umieścić rozdzielacz gdziekolwiek tylko będzie nam on pasował, a będzie on nam pozwalał nadal na zmianę rozmiaru elementów, które będą <b>przed</b> oraz <b>za</b> w tym samym pudełku. +</p><p>Kiedy umieścimy rozdzielacz wewnątrz poziomego pudełka, rozdzielacz będzie pozwalał na zmianę rozmiaru w poziomie. Natomiast, kiedy rozdzielacz będzie umieszczony w pionowym pudełku, to będzie pozwalał na zmianę rozmiaru w pionie. +</p><p>Składnia rozdzielacza jest następująca: </p> +<pre><splitter + id="identifier" + state="open" + collapse="before" + resizebefore="closest" + resizeafter="closest"> +</pre> +<p>Atrybuty są następujące: </p> +<dl><dt> <code id="a-id"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/id">id</a></code> +</dt><dd> Unikalny identyfikator rozdzielacza. +</dd></dl> +<dl><dt> <code id="a-state"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/state">state</a></code> +</dt><dd> Sygnalizuje stan rozdzielacza. Domyślnie ustawiony jest na <code>open</code>, panel jest wtedy widoczny od początku. Może też przyjąć wartość <code>collapsed</code>, panel będzie wtedy schowany, a druga część pola będzie zajmować całą powierzchnię. +</dd></dl> +<dl><dt> <code id="a-collapse"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/collapse">collapse</a></code> +</dt><dd> Sygnalizuje, która strona panelu powinna się zwinąć, kiedy rozdzielacz (grippy) zostanie kliknięty lub jego stan jest ustawiony na stan 'collapsed'. Ustaw <code>before</code> dla elementów przed rozdzielaczem lub <code>after</code> dla elementów po rozdzielaczu. Jeśli ustawisz <code>none</code>, które jest także domyślnie ustawiane, grippy rozdzielacza nie zwinie się, gdy je naciśniemy. +</dd></dl> +<dl><dt> <code id="a-resizebefore"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/resizebefore">resizebefore</a></code> +</dt><dd> Kiedy przesuwamy rozdzielaczem, to zmieniają swój rozmiar elementy po lewej lub powyżej. Ten atrybut sygnalizuje, który element powinien zmienić swój rozmiar. Ustaw go na <code>closest</code>, aby element zmienił swój rozmiar natychmiast do lewej strony przed rozdzielaczem. Ustaw go na <code>farthest</code>, aby posiadać element, który jest najdalej położony od rozdzielacza po lewej stronie (jest to pierwszy element w pudełku). Domyślną wartością jest <code>closest</code>. +</dd></dl> +<dl><dt> <code id="a-resizeafter"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/resizeafter">resizeafter</a></code> +</dt><dd> Kiedy przesuwamy rozdzielaczem, to zmieniają swój rozmiar elementy po prawej lub poniżej. Ten atrybut sygnalizuje, który element powinien zmienić swój rozmiar. Ustaw go na <code>closest</code>, aby element zmienił swój rozmiar natychmiast do prawej strony za rozdzielaczem. Ustaw go na <code>farthest</code>, aby posiadać element, który jest najdalej położony od rozdzielacza po prawej stronie (jest to ostatni element w pudełku). Ten atrybut także może być ustawiony na <code>grow</code>, w którym elementy po prawej stronie rozdzielacza nie zmieniają rozmiaru, kiedy jest przesuwany, lecz zamiast tego zmieni się rozmiar całego pudełka. Domyślną wartością jest <code>closest</code>. +</dd></dl> +<p>Jeśli ustawimy atrybut <code><code id="a-collapse"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/collapse">collapse</a></code></code>, to powinniśmy także dodać element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/grippy" title="grippy">grippy</a></code></code> do wewnątrz <code>splitter</code>, dzięki któremu będzie możliwe zastosowanie zawijania elementu. +</p><p>Przykład będzie w tym momencie niezwykle pomocny: +</p> +<h4 id="Przyk.C5.82ad_splitter" name="Przyk.C5.82ad_splitter"> Przykład <code>splitter</code> </h4> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_splitter_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_splitter_1.xul">Podgląd</a> +</p> +<pre><vbox flex="1"> + <iframe id="content-1" width="60" height="20" src="w1.html"/> + <splitter collapse="before" resizeafter="farthest"> + <grippy/> + </splitter> + <iframe id="content-2" width="60" height="20" src="w2.html"/> + <iframe id="content-3" width="60" height="20" src="w3.html"/> + <iframe id="content-4" width="60" height="20" src="w4.html"/> +</vbox> +</pre> +<div class="float-right"><img alt="grafika:splitter-ex1.jpg"></div> +<p>W przykładzie stworzyliśmy cztery ramki i rozdzielacz, który został umieszczony pomiędzy pierwszą oraz druga ramką. Atrybut <code><code id="a-collapse"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/collapse">collapse</a></code></code> został ustawiony na wartość <code>before</code>, co oznacza, że jeśli ustawimy grippy rozdzielaczowi i klikniemy go, to pierwsza ramka nie będzie wyświetlona i rozdzielacz zostanie przeniesiony na lewo. Grippy rozdzielacza jest rysowany na środku wewnątrz rozdzielacza. +</p><p>Rozdzielacz posiada atrybut <code><code id="a-resizeafter"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/resizeafter">resizeafter</a></code></code> o wartości <code>farthest</code>. To znaczy, że kiedy rozdzielacz jest przesuwany, najdalszy element poza rozdzielaczem będzie miał zmieniony rozmiar. W tym przypadku ramka 4 będzie miała zmieniony rozmiar. </p><p>Wartości nie określono dla <code><code id="a-resizebefore"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/resizebefore">resizebefore</a></code></code>, więc przyjmie on wartość domyślną <code>closest</code>. W tym przypadku jest tylko jedna ramka przed rozdzielaczem, więc ramka 1 będzie miała zmieniony rozmiar. </p><p>Ramka 2 i 3 będą tylko zmieniały rozmiar, jeśli przesuniesz rozdzielacz tak daleko w prawo, że ramka 4 nie będzie się już mogła zmniejszyć. +</p><p>Poniżej są cztery panele wraz z rozdzielaczem w stanie, gdy jest on zawinięty: +</p><p><img alt="grafika:splitter-ex2.jpg"> +</p><p>Na obrazku poniżej widać 4 panele i rozdzielacz przesunięty w prawo. Dwa środkowe panele 2 i 3 nie zmieniły rozmiaru natomiast 1 i 4 zmieniły. Na obrazku widać już tylko część czwartego, gdy przesuniemy rozdzielacz jeszcze dalej w prawo, środkowe panele też zaczną się zmniejszać. +</p><p><img alt="grafika:splitter-ex3.jpg"> +</p><p>Możemy stosować własności stylów takie jak <code>min-width</code>, <code>max-height</code> w ramkach do określenia minimalnej lub maksymalnej szerokości lub wysokości w pudełku. Stosując to, rozdzielacz wykryje rozmiary i nie pozwoli użytkownikowi na przesunięcie rozdzielacza poza minimalne lub maksymalne rozmiary pudełka. +</p><p>Przykładowo, jeśli określimy minimalną szerokość panelu 4 na 30 pikseli, nie zmniejszy się on poniżej tej wartości, ale zrobi to reszta paneli. Dwa pozostałe panele będą się zmniejszyć. Jeśli ustawisz minimalną szerokość panelu 1 na 50 px, będzie można przesunąć rozdzielacz tylko o 10 px w lewo (szerokość początkowa wynosi 60 pikseli). Mimo to można będzie je zawinąć. </p><p>Możesz umieścić więcej niż jeden rozdzielacz w pudełku, jeśli tylko będziesz chciał, to można zawijać różne jego części. Podobnie do zawijania nie trzeba stosować do ramek, gdyż każdy element może być zawinięty. +</p> +<h3 id="Nasz_przyk.C5.82ad:_Znajd.C5.BA_pliki" name="Nasz_przyk.C5.82ad:_Znajd.C5.BA_pliki"> Nasz przykład: <code>Znajdź pliki</code> </h3> +<div class="highlight"> +<p>Zobaczmy, jak wygląda okienko dialogowe znajdywania plików z rozdzielaczem wewnątrz. Jedną z możliwości jest dodanie wyniku szukania w okienku dialogowym. Dodamy obszar pomiędzy kryteriami wyszukiwania, a przyciskami wzdłuż dołu. Rozdzielacz pozwoli na rozwinięcie lub zwinięcie okna wyników szukania. </p> +<pre class="eval"></tabbox> + + <span class="highlightred"><iframe src="results.html"/> + <splitter resizeafter="grow"/></span> + + <hbox> +</pre> +<p>Powyżej dodaliśmy rozdzielacz i ramkę do okienka dialogowego. Nie potrzebujemy już <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_spacer.html">separatora</a></code> za <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_tabbox.html">tabbox</a></code>, dlatego go usuwamy. Zawartość ramki jest zawarta w pliku o nazwie 'results.html'. Utwórz taki plik i umieść w nim, co chcesz. Ramka zostanie później zastąpiona przez listę rezultatów, kiedy będziesz już wiedział, jak ją stworzyć. Na razie posłuży do zademonstrowania rozdzielacza. +</p><p>Rozdzielacz został ustawiony na <code>collapse</code> o wartości <code>before</code>, znaczy to, że element tylko przed rozdzielaczem zostanie zawinięty. Tutaj jest to ramka. Jak pokazuje obrazek poniżej, dzieje się to w momencie kliknięcia grippy, a ramka zostanie zawinięta i przyciski zostaną przesunięte wyżej. </p><p>Atrybut <code>resizeafter</code> ustawiony na wartość <code>grow</code>, dlatego elementy za rozdzielaczem przesuwają się w dół po tym, jak rozdzielacz jest przeciągnięty w dół. To rzutuje na zawartość ramki, która rośnie do jakiegoś rozmiaru. Zaznaczmy, że okno nie zmienia rozmiaru automatycznie sama. Nasz rozdzielacz jest rozdzielaczem poziomym, ponieważ jest umieszczony w pionowym pudełku. +</p><p>Stan normalny: +</p><p><img alt="grafika:splitter1.png"> +</p><p>Stan schowany: +</p><p><img alt="grafika:splitter2.png"> +</p><p>Przykład <code>Znajdź pliki</code>: <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-splitter.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-splitter.xul">Podgląd</a> +</p> +</div> +<p>Następnie zobaczymy, jak utworzyć <a href="pl/Kurs_XUL/Paski_przewijania">pasek przewijania</a>. +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Panele_treści" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Paski_przewijania">Następny »</a></p> +</div> +<p></p><p><br> +</p> +<div class="noinclude"> +</div> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/rozgłaszacze_oraz_obserwatory/index.html b/files/pl/mozilla/tech/xul/kurs_xul/rozgłaszacze_oraz_obserwatory/index.html new file mode 100644 index 0000000000..526ea7850c --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/rozgłaszacze_oraz_obserwatory/index.html @@ -0,0 +1,127 @@ +--- +title: Rozgłaszacze oraz obserwatory +slug: Mozilla/Tech/XUL/Kurs_XUL/Rozgłaszacze_oraz_obserwatory +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Broadcasters_and_Observers +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Aktualizacja_poleceń" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Obiektowy_model_dokumentu">Następny »</a></p> +</div><p></p> + +<p>Czasem będziesz chciał, żeby kilka elementów odpowiadało na wydarzenia albo zmiany statusu i robiło to z łatwością. Aby tego dokonać można użyć rozgłaszaczy.</p> + +<h2 id="Przekazywanie_atrybutu_polecenia" name="Przekazywanie_atrybutu_polecenia">Przekazywanie atrybutu polecenia</h2> + +<p>Widzieliśmy już, że elementy takie jak przyciski mogą być podczepione do komend. Dodatkowo, jeśli umieścisz atrybut <code><code id="a-disabled"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/disabled">disabled</a></code></code> w elemencie <code><code><a href="/pl/docs/Mozilla/Tech/XUL/command" title="command">command</a></code></code>, jakikolwiek element podczepiony do niej również stanie się nieaktywny. Jest to użyteczny sposób aby jak najbardziej skrócić pisany przez Ciebie kod. Technika ta działa również na inne atrybuty. Na przykład jeśli umieścisz atrybut <code><code id="a-label"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/label">label</a></code></code> w elemencie <code><code><a href="/pl/docs/Mozilla/Tech/XUL/command" title="command">command</a></code></code>, każdy przycisk podczepiony do niej będzie miał taką samą etykietę.</p> + +<p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_broadob_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_broadob_1.xul">Podgląd</a></p> + +<pre><command id="my_command" label="Otwórz"/> + +<button command="my_command"/> +<checkbox label="Open in a new window" command="my_command"/> +</pre> + +<p>W tym przykładzie przycisk nie ma atrybutu <code><code id="a-label"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/label">label</a></code></code>, ale jest podczepiony do komendy, która go ma. Przycisk będzie dzielił nalepkę/podpis z komendą. Pole wyboru ma już etykietę, jednak będzie ona nadpisana przez nalepkę komendy. Rezultat będzie taki, że zarówno przycisk jak i pole wyboru będą miały taką samą etykietę 'Otwórz'.</p> + +<p>Jeśli chciałbyś zmodyfikować atrybut <code><code id="a-label"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/label">label</a></code></code> polecenia, etykieta przycisku i pola wyboru zostaną odpowiednio dostosowane. Widzieliśmy już coś takiego w poprzedniej sekcji, gdzie atrybut <code><code id="a-disabled"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/disabled">disabled</a></code></code> był dostosowywany raz i status ten propagował się na inne elementy.</p> + +<p>To przekazywanie atrybutu jest bardzo użyteczne w kilku przypadkach. Na przykład powiedzmy, że chcemy zdezaktywować akcję Wstecz w przeglądarce. Powinniśmy zdezaktywować komendę Wstecz w menu, przycisk Wstecz na pasku zadań, skrót klawiaturowy (np. Alt+Lewo) i wszelkie inne komendy Wstecz na menu popup. Chociaż moglibyśmy napisać skrypt, który by to robił, to jest to trochę uciążliwe. Posiada ponadto tę wadę, że musielibyśmy znać wszystkie miejsca gdzie Wstecz mogłoby się znajdować. Jeśli ktoś dodałby nowy przycisk Wstecz używając linku, nie byłby on obsłużony. Dlatego wygodniej jest po prostu zdezaktywować akcję Wstecz i sprawić, że wszystkie podczepione elementy same się zdezaktywują. Możemy użyć przekazywania atrybutu komend, aby uzyskać taki efekt.</p> + +<h2 id="Rozg.C5.82aszacze" name="Rozg.C5.82aszacze">Rozgłaszacze</h2> + +<p>Podobnym elementem jest <code><code><a href="/pl/docs/Mozilla/Tech/XUL/broadcaster" title="broadcaster">broadcaster</a></code></code>. Rozgłaszacze wspierają przekazywanie atrybutów w taki sam sposób jak komendy. Różnicą jest to, że komend używa się do akcji, a rozgłaszaczy do przekazywania informacji o statusie. Na przykład <code><code><a href="/pl/docs/Mozilla/Tech/XUL/command" title="command">command</a></code></code>będzie użyta do akcji takiej jak Wstecz, Wytnij albo Usuń. <code><code><a href="/pl/docs/Mozilla/Tech/XUL/broadcaster" title="broadcaster">broadcaster</a></code></code> byłby użyty np. do przekazania flagi oznaczającej czy użytkownik jest online czy nie. W pierwszym przypadku elementy menu i przyciski paska zadań musiałyby być zdezaktywowane, gdy nie istniała żadna strona, do której można by wrócić, albo nie było tekstu do wycięcia czy usunięcia. W drugim przypadku wiele elementów UI musi być zaktualizowanych, gdy użytkownik przechodzi z modu offline do online.</p> + +<p>Najprostszy rozgłaszacz jest pokazany poniżej. Powinieneś zawsze używać atrybutu <code><code id="a-id"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/id">id</a></code></code>, żeby inne elementy mogły się do niego odnosić.</p> + +<pre><broadcasterset> + <broadcaster id="isOffline" label="Offline"/> +</broadcasterset> +</pre> + +<p>Każdy element obserwujący rozgłaszacza będzie automatycznie zmodyfikowany, gdy tylko rozgłaszacz zmieni swój atrybut <code><code id="a-label"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/label">label</a></code></code>. Rezultatem będzie posiadanie przez te elementy nowej nalepki. Podobnie jak inne nie wyświetlane elementy, element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/broadcasterset" title="broadcasterset">broadcasterset</a></code></code> służy jako przechowalnia dla rozgłaszaczy. Powinieneś zdeklarować wszystkich rozgłaszaczy w elemencie <code><code><a href="/pl/docs/Mozilla/Tech/XUL/broadcasterset" title="broadcasterset">broadcasterset</a></code></code>, żeby mogły być przetrzymywane razem.</p> + +<h2 id="Making_elements_observers" name="Making_elements_observers">Making elements observers</h2> + +<p>Elementy, które obserwują rozgłaszacza nazywane są obserwatorami. Aby zrobić z elementu obserwatora, dodaj do niego atrybut <code><code id="a-observes"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/observes">observes</a></code></code>. Jest to analogiczne do używania atrybutu <code><code id="a-command"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/command">command</a></code></code>, podczas dołączania elementu do <code><code><a href="/pl/docs/Mozilla/Tech/XUL/command" title="command">command</a></code></code>. Na przykład w celu uczynienia przycisku obserwatorem rozgłaszacza z poprzedniego przykładu:</p> + +<pre><button id="offline_button" observes="isOffline"/> +</pre> + +<p>Atrybut <code><code id="a-observes"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/observes">observes</a></code></code> został nałożony na przycisk i jego wartość została ustawiona na wartość <code><code id="a-id"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/id">id</a></code></code> rozgłaszacza. Tutaj przycisk będzie obserwował rozgłaszacza, który ma id <code>isOffline</code>. Jeśli wartość atrybutu <code><code id="a-label"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/label">label</a></code></code> rozgłaszacza zmieni się, obserwatorzy będą zaktualizowani i ich atrybuty <code><code id="a-label"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/label">label</a></code></code> też się zmienią.</p> + +<p>Moglibyśmy kontynuować z dodatkowymi elementami, ponieważ jeden rozgłaszacz może być obserwowany przez tyle elementów, ile tylko chcesz. Możesz także mieć tylko jednego obserwatora, ale mało na tym zyskasz, ponieważ głównym celem rozgłaszacza jest powiadamianie wielu elementów na raz. Powinieneś używać rozgłaszaczy tylko wtedy, gdy chcesz, aby wiele elementów obserwowało jeden atrybut. Poniżej zdefiniowano kilka dodatkowych obserwatorów:</p> + +<pre><broadcaster id="offline_command" label="Offline" accesskey="f"/> + +<keyset> + <key id="goonline_key" observes="offline_command" modifiers="accel" key="O"/> +</keyset> +<menuitem id="offline_menuitem" observes="offline_command"/> +<toolbarbutton id="offline_toolbarbutton" observes="offline_command"/> +</pre> + +<p>W tym przykładzie zarówno <code><code id="a-label"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/label">label</a></code></code> jak i <code><code id="a-accesskey"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/accesskey">accesskey</a></code></code> będą przekazane od rozgłaszacza do klucza, elementu menu i przycisku. Klucz nie zrobi użytku z żadnego otrzymanego atrybutu, ale będzie on zdezaktywowany w tej samej chwili co rozgłaszacz.</p> + +<p>Możesz użyć rozgłaszacza do obserwacji jakiegokolwiek atrybutu chcesz. Obserwatorzy wyłapią wszystkie wartości każdego atrybutu rozgłaszacza, jeśli tylko się zmienią. Gdy tylko wartość jakiegokolwiek atrybutu rozgłaszacza się zmieni, obserwatorzy zostaną powiadomieni i sami odpowiednio dostosuję swoje atrybuty. Jednak, jeśli obserwatorzy posiadają atrybuty, których nie ma rozgłaszacz, to nie będą one zmienione. Wyjątek stanowią atrybuty <code><code id="a-id"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/id">id</a></code></code> i <code><code id="a-persist"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/persist">persist</a></code></code>; one nigdy nie są zmieniane. Możesz też używać swoich własnych atrybutów, jeśli chcesz.</p> + +<p>Rozgłaszacze nie są tak często używani jak komendy, ponieważ te ostatnie mogą dokonać więcej. Jedna rzecz godna odnotowania to fakt, że w rzeczywistości nie ma różnic pomiędzy elementem <code><code><a href="/pl/docs/Mozilla/Tech/XUL/command" title="command">command</a></code></code> a elementem <code><code><a href="/pl/docs/Mozilla/Tech/XUL/broadcaster" title="broadcaster">broadcaster</a></code></code>. Obydwa wykonują tę samą funkcję. Różnica jest bardziej znaczeniowa. Używaj komend do akcji, a rozgłaszaczy do statusów. W rzeczywistości każdy element może być rozgłaszaczem, póki tylko go obserwujesz za pomocą atrybutu <code><code id="a-observes"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/observes">observes</a></code></code>.</p> + +<h2 id="Element_observes" name="Element_observes">Element <code>observes</code></h2> + +<p>Jest również sposób na to, aby dokładniej określić który atrybut rozgłaszacza ma dany element obserwować. Wymaga to elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/observes" title="observes">observes</a></code></code>. Tak jak jego odpowiednik atrybutu, pozwala Ci na zdefiniowanie elementu-obserwatora. Element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/observes" title="observes">observes</a></code></code> powinien być umieszczony jako potomny elementowi, którego chcemy uczynić obserwatorem. Przykład jest podany poniżej:</p> + +<p><span id="Przyk%C5%82ad_2"><a id="Przyk%C5%82ad_2"></a><strong>Przykład 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_broadob_2.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_broadob_2.xul">Podgląd</a></p> + +<pre><broadcasterset> + <broadcaster id="isOffline" label="Offline" accesskey="f"/> +</broadcasterset> + +<button id="offline_button"> + <observes element="isOffline" attribute="label"/> +</button> +</pre> + +<p>Do elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/observes" title="observes">observes</a></code></code> dodano dwa atrybuty. Pierwszy - <code><code id="a-element"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/element">element</a></code></code> - wyszczególnia id rozgłaszacza do obserwowania. Drugi - <code><code id="a-attribute"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/attribute">attribute</a></code></code> - wyszczególnia atrybut do obserwacji. Rezultatem jest to, że przycisk otrzyma swoją nalepkę od rozgłaszacza, a gdy ona się zmieni, nalepka przycisku też odpowiednio się zmieni. Element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/observes" title="observes">observes</a></code></code> nie zmienia się, ale element, którego jest on częścią się zmienia, jest to w tym przypadku przycisk. Zauważmy, że <code><code id="a-accesskey"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/accesskey">accesskey</a></code></code> nie został przekazany przyciskowi, ponieważ to nie on jest obserwowany. Jeśli chcesz, żeby był, musisz dodać kolejny element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/observes" title="observes">observes</a></code></code>. Jeśli nie chcesz używać żadnych elementów <code><code><a href="/pl/docs/Mozilla/Tech/XUL/observes" title="observes">observes</a></code></code>, a zamiast tego użyć atrybutu <code><code id="a-observes"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/observes">observes</a></code></code> bezpośrednio dla przycisku, to obserwowane będą wszystkie atrybuty.</p> + +<h3 id="Zdarzenia_rozg.C5.82aszacza" name="Zdarzenia_rozg.C5.82aszacza">Zdarzenia rozgłaszacza</h3> + +<p>Jest jeszcze dodatkowy manipulator wydarzeń, którego możemy umieścić w elemencie <code><code><a href="/pl/docs/Mozilla/Tech/XUL/observes" title="observes">observes</a></code></code> ustawionym na <code>onbroadcast</code>. Wydarzenie jest wywoływane gdy tylko obserwator zauważy zmianę atrybutu rozgłaszacza, któremu się przygląda. Poniżej podany jest przykład:</p> + +<p><span id="Przyk%C5%82ad_3"><a id="Przyk%C5%82ad_3"></a><strong>Przykład 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_broadob_3.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_broadob_3.xul">Podgląd</a></p> + +<pre><broadcasterset> + <broadcaster id="colorChanger" style="color: black"/> +</broadcasterset> + +<button label="Test"> + <observes element="colorChanger" attribute="style" onbroadcast="alert('Color changed');"/> +</button> + +<button label="Observer" + oncommand="document.getElementById('colorChanger').setAttribute('style','color: red');" +/> +</pre> + +<p>Zostały stworzone dwa przyciski, jeden oznaczony "Test", a drugi - "Obserwator". Jeśli klikniesz na przycisk "Test", nic specjalnego się nie stanie. Jednakże, jeśli klikniesz na przycisk "Obserwator", wydarzą się dwie rzeczy. Najpierw przycisk zmieni się i pojawi się na nim czerwony tekst, a potem ukaże się okno komunikatu z informacją "Zmienił się kolor" ( + <i>"Color changed"</i> + ).</p> + +<p>To co się dzieje, to wywołanie manipulatora <code><code id="a-oncommand"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/oncommand">oncommand</a></code></code>, gdy użytkownik naciska przycisk. Skrypt dostaje odnośnik do rozgłaszacza i zmienia jego styl, tak aby <code>color</code> był czerwony ( + + <i>red</i> + ). Sam rozgłaszacz nie reaguje na tą zmianę, ponieważ nie jest wyświetlany na ekranie, ale pierwszy przycisk jest obserwatorem i zauważa zmianę stylu. <code><code id="a-element"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/element">element</a></code></code> i <code><code id="a-attribute"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/attribute">attribute</a></code></code> w <code><code><a href="/pl/docs/Mozilla/Tech/XUL/observes" title="observes">observes</a></code></code> wykrywają tą zmianę. Styl zostaje zaaplikowany na przycisk natychmiastowo.</p> + +<p>Następnie, ponieważ pojawiła się informacja do rozgłoszenia, zostaje wywołany manipulator wydarzeń <code>onbroadcast</code>. Rezultatem tego jest pojawiające się okno komunikatu. Zauważmy, że informacja do rozgłoszenia pojawia się tylko wtedy, gdy atrybuty w elemencie <code><code><a href="/pl/docs/Mozilla/Tech/XUL/broadcaster" title="broadcaster">broadcaster</a></code></code> się zmieniają. Bezpośrednia zmiana stylu przycisków nie spowoduje jej pojawienia się, a więc nie ukaże się też okno komunikatu.</p> + +<p>Jeśli spróbujesz skopiować kod pierwszego <code><code><a href="/pl/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> kilka razy, skończy się to tym, że pojawi się seria komunikatów, po jednym dla każdego przycisku. Dzieje się tak, ponieważ każdy z nich jest obserwatorem i będzie powiadamiany, gdy zmieni się styl.</p> + +<p><br> + Następnie zajmiemy się używaniem <a href="pl/Kurs_XUL/Obiektowy_model_dokumentu">Obiektowego Modelu Dokumentu (Document Object Model, DOM) z elementami XUL</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Aktualizacja_poleceń" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Obiektowy_model_dokumentu">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/siatki/index.html b/files/pl/mozilla/tech/xul/kurs_xul/siatki/index.html new file mode 100644 index 0000000000..950a7da3de --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/siatki/index.html @@ -0,0 +1,169 @@ +--- +title: Siatki +slug: Mozilla/Tech/XUL/Kurs_XUL/Siatki +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Grids +--- +<p> +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Pudełko_kart" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Panele_treści">Następny »</a></p> +</div> +<p></p><p>XUL posiada zbiór elementów do tworzenia siatki tabeli. +</p> +<h3 id="Tabelaryczny_uk.C5.82ad_graficzny_XUL" name="Tabelaryczny_uk.C5.82ad_graficzny_XUL"> Tabelaryczny układ graficzny XUL </h3> +<p>XUL posiada zbiór elementów do wykonania układu graficznego elementów w formie siatki przy zastosowaniu elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/grid" title="grid">grid</a></code></code>. Posiada on kilka podobieństw w stosunku do znacznika <code>table</code> z języka HTML. Siatka nie wyświetla niczego sama; jest stosowana tylko do pozycjonowania elementów w formie tabeli z wierszami oraz kolumnami. +</p><p>Siatka zawiera elementy, które są wyrównywane w wierszach podobnie jak tabele. Wewnątrz <code><code><a href="/pl/docs/Mozilla/Tech/XUL/grid" title="grid">grid</a></code></code> deklarujemy dwie rzeczy; kolumny i wiersze, które są zastosowane. Podobnie jak tabele HTML, wstawiamy zawartość do wnętrza wiersza, taką jak etykiety i przyciski. Jednakże siatka, czy to oparta o wiersze czy kolumny, pozwala na zawarcie treści w wiersze i kolumny. Najpowszechniej stosuje się wiersze, tak jak z tabelami. Jednakże nadal możemy użyć kolumn do określenia rozmiaru i wyglądu kolumn w siatce. Alternatywnie możemy umieścić zawartość wewnątrz kolumn i zastosować wiersze do określenia wyglądu. Zobaczymy przypadek organizacji elementów za pomocą wiersza. +</p> +<h4 id="Deklaracja_siatki" name="Deklaracja_siatki"> Deklaracja siatki </h4> +<p>Aby zadeklarować ustawienie wierszy, stosujemy znacznik <code><code><a href="/pl/docs/Mozilla/Tech/XUL/rows" title="rows">rows</a></code></code>, który powinien być elementem potomnym <code><code><a href="/pl/docs/Mozilla/Tech/XUL/grid" title="grid">grid</a></code></code>. Wewnątrz powinniśmy dodać elementy <code><code><a href="/pl/docs/Mozilla/Tech/XUL/row" title="row">row</a></code></code>, które są stosowane dla każdego wiersza. Wewnątrz elementu wiersza powinniśmy umieścić zawartość, jaką chcemy mieć wewnątrz tego wiersza. +</p><p>Podobnie kolumny są deklarowane poprzez element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/columns" title="columns">columns</a></code></code>, który powinien być umieszczony jako element potomny <code><code><a href="/pl/docs/Mozilla/Tech/XUL/grid" title="grid">grid</a></code></code>, wewnątrz którego przechodzimy do pojedynczego elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/column" title="column">column</a></code></code>, jednego dla każdej kolumny, jaką chcesz w siatce. +</p><p>Stanie się to o wiele łatwiejsze do zrozumienia dzięki przykładowi: +</p><p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_1.xul">Podgląd</a> +</p> +<div class="float-right"><img alt="grafika:grids1.png"></div> +<pre><grid flex="1"> + + <columns> + <column flex="2"/> + <column flex="1"/> + </columns> + + <rows> + <row> + <button label="Królik"/> + <button label="Słoń"/> + </row> + <row> + <button label="Koala"/> + <button label="Goryl"/> + </row> + </rows> + +</grid> +</pre> +<p><br> +Do siatki zostały dodane dwa wiersze i dwie kolumny. Każda kolumna jest zadeklarowana znacznikiem <code><code><a href="/pl/docs/Mozilla/Tech/XUL/column" title="column">column</a></code></code>. Każda kolumna posiada dodany atrybut <code><code id="a-flex"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/flex">flex</a></code></code>. Każdy wiersz zawiera dwa elementy, oba są przyciskami. Pierwszy element w każdym elemencie <code><code><a href="/pl/docs/Mozilla/Tech/XUL/row" title="row">row</a></code></code> jest umieszczony w pierwszej kolumnie siatki, a drugi element każdego wiersza jest umieszczony w drugiej kolumnie. Zauważ, że nie potrzebujemy żadnego elementu do deklaracji komórki -- nie ma odpowiednika elementu <code>td</code> z języka HTML. Zamiast tego wstawiamy zawartość komórki bezpośrednio do elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/row" title="row">row</a></code></code>. +</p> +<h4 id="Siatka_z_wi.C4.99ksz.C4.85_ilo.C5.9Bci.C4.85_element.C3.B3w" name="Siatka_z_wi.C4.99ksz.C4.85_ilo.C5.9Bci.C4.85_element.C3.B3w"> Siatka z większą ilością elementów </h4> +<p>Możemy zastosować dowolny element w miejsce elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code>. Jeśli chcemy część jednej komórki wypełnić wieloma elementami, to stosujemy poprzez zagnieżdżenie element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></code> lub inny element pudełkowy. Element <code>hbox</code> jest pojedynczym elementem, ale możemy wstawić w nim wiele, jakie chcielibyśmy w nim umieścić. Na przykład: +</p><p><span id="Przyk%C5%82ad_2"><a id="Przyk%C5%82ad_2"></a><strong>Przykład 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_2.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_2.xul">Podgląd</a> +</p> +<div class="float-right"><img alt="grafika:grids2.png"></div> +<pre><grid flex="1"> + + <columns> + <column/> + <column flex="1"/> + </columns> + + <rows> + <row> + <label control="doctitle" value="Tytuł dokumentu:"/> + <textbox id="doctitle" flex="1"/> + </row> + <row> + <label control="docpath" value="Ścieżka:"/> + <hbox flex="1"> + <textbox id="docpath" flex="1"/> + <button label="Przeglądaj..."/> + </hbox> + </row> + </rows> +</grid> +</pre> +<p>Zauważ, tak jak na obrazku, w jaki sposób pierwsza kolumna elementów zawiera tylko etykietę posiadając pojedynczy element w każdym wierszu. Druga kolumna zawiera pudełko w drugim wierszu, w którym zawartość dwóch elementów, <code><code><a href="/pl/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></code> oraz <code><code><a href="/pl/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code>. Możemy dodatkowo dodać +zagnieżdżone pudełka lub użyć kolejnej siatki wewnątrz pojedynczej komórki. </p><p>Jeśli zmieniliśmy rozmiar okna z ostatniego przykładu zobaczymy, że zmienił się rozmiar pól tekstowych, ale nie innych elementów. Jest tak, ponieważ atrybuty <code><code id="a-flex"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/flex">flex</a></code></code> zostały dodane do pól tekstowych i drugiej kolumny. Pierwsza kolumna nie musi być elastyczna jako etykieta i nie potrzebuje zmiany swojego rozmiaru. +</p><p>Początkowa szerokość kolumny jest określana przez największy element w kolumnie. Podobnie wysokość wiersza jest określana przez rozmiar elementów w wierszu. Możesz użyć atrybutów <code><code id="a-minwidth"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/minwidth">minwidth</a></code></code> i <code><code id="a-maxwidth"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/maxwidth">maxwidth</a></code></code> oraz powiązanych atrybutów dla dalszego zdefiniowania rozmiaru. +</p> +<h4 id="Przyk.C5.82ad_siatki_z_wi.C4.99ksz.C4.85_ilo.C5.9Bci.C4.85_kolumn" name="Przyk.C5.82ad_siatki_z_wi.C4.99ksz.C4.85_ilo.C5.9Bci.C4.85_kolumn"> Przykład siatki z większą ilością kolumn </h4> +<p>Możemy również umieścić elementy wewnątrz elementów <code><code><a href="/pl/docs/Mozilla/Tech/XUL/column" title="column">column</a></code></code> zamiast wierszy. Jeśli to zrobimy, wiersze będą zadeklarowane tylko do określenia, jak wiele wierszy tam jest. +</p><p><span id="Przyk%C5%82ad_3"><a id="Przyk%C5%82ad_3"></a><strong>Przykład 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_3.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_3.xul">Podgląd</a> +</p> +<pre><grid> + <rows> + <row/> + <row/> + <row/> + </rows> + + <columns> + <column> + <label control="first" value="Pierwsze imię:"/> + <label control="middle" value="Drugie imię:"/> + <label control="last" value="Nazwisko:"/> + </column> + <column> + <textbox id="first"/> + <textbox id="middle"/> + <textbox id="last"/> + </column> + </columns> + +</grid> +</pre> +<p>Ta siatka posiada trzy wiersze i dwie kolumny. Elementy <code><code><a href="/pl/docs/Mozilla/Tech/XUL/row" title="row">row</a></code></code> są rozmieszczone do określenia, jak wiele ich tam jest. Możemy dodać atrybut <code><code id="a-flex"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/flex">flex</a></code></code> do wiersza, aby uczynić go elastycznym. Zawartość jest umieszczona wewnątrz każdej kolumny. Pierwszy element wewnątrz każdego elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/column" title="column">column</a></code></code> jest umieszczony w pierwszym wierszu, drugi element w drugim wierszu, a trzeci element jest umieszczony w trzecim wierszu. +</p><p>Jeśli wstawisz zawartość w obu kolumnach i wierszach, zawartość będzie nachodziła każda inaczej, poprzez wyrównanie ich we własnościach siatki. Tworzy to efekt podobny do siatki elementów <code><code><a href="/pl/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code></code>. +</p><p>Porządek elementów w <code><code><a href="/pl/docs/Mozilla/Tech/XUL/grid" title="grid">grid</a></code></code> określa, co jest wyświetlane na górze, a które są umieszczone poniżej. Jeśli element <code>rows</code> jest umieszczony po elemencie kolumny, zawartość wewnątrz wierszy jest wyświetlana na górze. Jeśli element <code>columns</code> jest umieszczony po elemencie <code>rows</code>, zawartość wewnątrz kolumn jest wyświetlona na górze. Podobnie zdarzenia, takie jak przyciski myszy i naciskanie klawiszy, są wysyłane tylko do zbioru u góry. Jest tak dlatego, że kolumny zadeklarowano po wierszach w powyższym przykładzie. Jeśli kolumny umieszczono jako pierwsze, wiersze wychwycą zdarzenia i nie będziemy mogli nic dopisać do tych pól. +</p> +<h4 id="Elastyczno.C5.9B.C4.87_siatki" name="Elastyczno.C5.9B.C4.87_siatki"> Elastyczność siatki </h4> +<p>Jedną z zalet, które posiadają siatki nad zagnieżdżonymi pudełkami, jest to, że możemy tworzyć komórki, które są elastyczne zarówno w poziomie, jak w pionie. Możemy to zrobić poprzez wstawienie atrybutu <code><code id="a-flex"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/flex">flex</a></code></code> zarówno w wierszu, jak i kolumnie. Pokazuje nam to poniższy przykład: +</p><p><br> +<span id="Przyk%C5%82ad_4"><a id="Przyk%C5%82ad_4"></a><strong>Przykład 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_4.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_4.xul">Podgląd</a> +</p> +<pre><grid flex="1"> + <columns> + <column flex="5"/> + <column/> + <column/> + </columns> + <rows> + <row flex="10"> + <button label="Wiśnia"/> + <button label="Cytryna"/> + <button label="Grejfrut"/> + </row> + <row flex="1"> + <button label="Truskawka"/> + <button label="Malina"/> + <button label="Brzoskwinia"/> + </row> + </rows> +</grid> +</pre> +<p>Pierwsza kolumna i oba wiersze zrobiono elastycznymi. W wyniku tego każda komórka w pierwszej kolumnie będzie elastyczna poziomo. Dodatkowo, każda komórka będzie elastyczna pionowo, ponieważ oba wiersze są elastyczne, chociaż pierwszy wiersz jest bardziej elastyczny. Komórka w pierwszej kolumnie i pierwszym wierszu (przycisk Wiśnia) będą elastyczne o współczynniku 5 poziomo i elastyczne o współczynniku 10 pionowo. Kolejna komórka (Cytryna) będzie tylko elastyczna pionowo. +</p><p>Atrybut <code><code id="a-flex"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/flex">flex</a></code></code> może również być dodany do elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/grid" title="grid">grid</a></code></code>, aby cała siatka była elastyczna, w przeciwnym razie będzie ona tylko rosła w jednym kierunku. +</p> +<h3 id=".C5.81.C4.85czenie_kolumn" name=".C5.81.C4.85czenie_kolumn"> Łączenie kolumn </h3> +<p>Nie ma sposobu na połączenie komórki, szczególnie wielu kolumn lub wierszy. Jednak możliwe jest stworzenie wiersza lub kolumny, które obejmują całą szerokość lub wysokość siatki. Robi się to poprzez dodanie elementu do wewnątrz elementu <code>rows</code>, który nie jest wewnątrz elementu <code>row</code>. Możemy zastosować typ pudełka i wstawić inne elementy wewnątrz niego, jeśli chcemy użyć kilku elementów. Tu mamy prosty przykład: +</p><p><span id="Przyk%C5%82ad_5"><a id="Przyk%C5%82ad_5"></a><strong>Przykład 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_5.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_5.xul">Podgląd</a> +</p> +<pre><grid> + <columns> + <column flex="1"/> + <column flex="1"/> + </columns> + + <rows> + <row> + <label value="północno-zachodni"/> + <label value="północno-wschodni"/> + </row> + <button label="równik"/> + <row> + <label value="południowo-zachodni"/> + <label value="południowo-wschodni"/> + </row> + </rows> +</grid> +</pre> +<p>Przycisk będzie wystarczający, aby wypełnić całą szerokość siatki, ponieważ nie jest wewnątrz wiersza siatki. Możesz używać podobnej metody, aby dodać element pomiędzy dwoma kolumnami. Będzie to wystarczające, aby wypełnić wysokość siatki. Możemy również zrobić te dwie rzeczy razem, jeśli jest to pożądane. +</p><p>Następnie przyjrzymy się dodawaniu <a href="pl/Kurs_XUL/Panele_tre%c5%9bci">paneli zawartości</a>. +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Pudełko_kart" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Panele_treści">Następny »</a></p> +</div> +<p></p> +<div class="noinclude"> +</div> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/skrypty_instalacyjne/index.html b/files/pl/mozilla/tech/xul/kurs_xul/skrypty_instalacyjne/index.html new file mode 100644 index 0000000000..cb7014183e --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/skrypty_instalacyjne/index.html @@ -0,0 +1,135 @@ +--- +title: Skrypty instalacyjne +slug: Mozilla/Tech/XUL/Kurs_XUL/Skrypty_instalacyjne +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Install_Scripts +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Tworzenie_instalatora" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dodatkowe_możliwości_instalacji">Następny »</a></p> +</div> W tym artykule zostaną opisane skrypty instalacyjne.<p></p> + +<h2 id="Tworzenie_skryptu_instalacji" name="Tworzenie_skryptu_instalacji">Tworzenie skryptu instalacji</h2> + +<div class="note"><b>UWAGA</b>: For Firefox Extensions, <tt>install.js</tt> are no longer used. You should create a <tt><a href="pl/Manifesty_Instalacji">install.rdf</a></tt> instead.</div> + +<p>Zwykle będziesz chciał mieć kontrole nad procesem instalacji. Na przykład, będziesz chciał sprawdzić wersje plików, a następne instalować tylko nowsze. Skrypt instalacyjny jest wystarczająco elastyczny by umożliwić deinstalację plików. Z tego powodu, instalator zawierają skrypty instalacyjne do sterowania procesem instalacji.</p> + +<p>Skrypt instalatora musi być nazwany install.js i umieszczony na głównym poziomie archiwum instalatora. Skrypt zawiera kod JavaScript, który wywoła odpowiednią liczbę instrukcji.</p> + +<p>W dokumencie HTML lub XUL, obiekt okna jest głównym obiektem. To znaczy, możesz wywołać metody obiektu okna z kwalifikatorem z przodu, co znaczy <code>window.open()</code> może być prosto napisane <code>open()</code>. W skrypcie instalacyjnym nie ma żadnego przyporządkowanego okna, jednak obiekt globalny zostanie obiektem instalacyjnym, który zawiera pewną liczbę funkcji to przystosowywania procesu instalacji. Kilka funkcji obiektu instalacyjnego jest opisanych poniżej.</p> + +<p>Skrypt instalacyjny powinien podjąć następujące kroki:</p> + +<ol> + <li>Inicjacja instalacji z wyszczególnieniem, które paczki i wersje są instalowane.</li> + <li>Użycie funkcji instalacyjnej do określenia pliki i katalogi są konieczne do instalacji. Możesz także wybrać pliki do przeniesienia lub usunięcia.</li> + <li>Rozpoczęcie procesu instalowania koniecznych plików.</li> +</ol> + +<p>Ważne jest to, że podczas drugiego kroku, wskazujesz, które pliki powinny być zainstalowane i jakie inne działania powinny być podjęte. Żaden plik nie będzie skopiowany aż do trzeciego kroku. Dzięki temu możemy wyszczególnić pliki, które mają zostać zainstalowane, rozpoznać różne błędy, czy przerwać proces bez modyfikacji systemu użytkownika.</p> + +<h2 id="Rejestr_sk.C5.82adnik.C3.B3w" name="Rejestr_sk.C5.82adnik.C3.B3w">Rejestr składników</h2> + +<p>Mozilla utrzymuje plik, który jest rejestrem wszystkich komponentów, które są aktualnie zainstalowane. Komponenty zawierają nowe paczki chrome, skóry i wtyczki. Gdy nowy składnik jest instalowany, rejestr jest aktualizowany. Przechowywane są tam także informacje o wersjach zainstalowanych plików. W ten sposób łatwiej jest sprawdzić, którą wersję masz zainstalowaną, a co za tym idzie, które pliki aktualizować.</p> + +<p>Rejestr składników pracuje podobnie do rejestru Windows. Składa się z układu kluczy i ich wartości. Jednak nie musisz tego umieć by tworzyć aplikacje XUL, jeżeli nie tworzysz własnych komponentów XPCOM.</p> + +<p>To, co potrzebujesz wiedzieć dla instalacji, to, że rejestr magazynuje zestaw informacji o twojej aplikacji, jak lista plików i wersji. Wszystko jest przechowywane w kluczu, który dostarczasz w skrypcie instalacyjnym.</p> + +<p>Klucz jest skonstruowany w następujący sposób:</p> + +<pre>/Author/Package Name +</pre> + +<p>Zamień słowo Author swoim imieniem I Package Name nazwą paczki, którą instalujesz. Na przykład:</p> + +<pre>/Xulplanet/Find Files + +/Netscape/Personal Security Manager +</pre> + +<p>Pierwsze, co użyjemy to domyślny katalog, którego użyjemy w dialogu wyszukiwania plików. Drugą rzeczą jest klucz użyty, dla Personal Security Manager.</p> + +<h2 id="Inicjacja_instalacji" name="Inicjacja_instalacji">Inicjacja instalacji</h2> + +<p>Obiekt instalacyjny masz funkcję initInstall, która może zostać użyta do rozpoczęcia instalacji. To powinno być wywołane na początku skryptu instalacyjnego. Składnia tej funkcji wygląda następująco:</p> + +<pre class="eval">initInstall(<i>packageName</i> , +<i>regPackage</i> , +<i>version</i> ); + +<b>Example:</b> + +initInstall("Find Files","/Xulplanet/Find Files","0.5.0.0"); +</pre> + +<p>Pierwszym argumentem jest nazwa paczki w formie czytelnej dla użytkownika. Drugi argument jest kluczem rejestru do przechowywania informacji o paczce, jak opisano wcześniej. Trzeci argument jest wersją instalowanej paczki. Następnie, musimy ustalić katalog, w którym pliki mają zostać zainstalowane. Są na to dwa sposoby. Prostą metodą jest wyznaczenie katalogu, w którym wszystkie pliki zostaną umieszczone, Drugim sposobem możemy ustalić położenie w wcześniej umieszczonym pliku. Pierwsza metoda opisana jest poniżej.</p> + +<p>Funkcja setPackageFolder przyporządkowuje katalog dla instalacji. W dialogu wyszukiwania pliku, będziemy instalować pliki w katalogu chrome. Dla maksymalnej mobilności, nie możesz ustalić nazwy katalogu. Zamiast tego, wyszczególnisz identyfikator znanego katalogu i otrzymujesz jego podkatalogi. Tak, że jeżeli twoja aplikacja musi zainstalować kilka bibliotek systemowych, nie musisz znać nazw tych katalogów.</p> + +<p>Identyfikatory katalogów, są wypisane w <a class="external" href="http://www.xulplanet.com/references/elemref/ref_Install.html#prop_getFolder">dokumentacji XULPlanet</a>. Dla katalogu chrome, identyfikatorem jest ‘Chrome’. Funkcja getFolder może zostać użyta do uzyskania któregoś z tych specjalnych katalogów. Funkcja ta pobiera dwa argumenty, pierwszy jest identyfikatorem, a drugi podkatalogiem. Na przykład:</p> + +<pre>findDir = getFolder("Chrome","findfile"); +setPackageFolder(findDir); +</pre> + +<p>Otrzymujemy folder findfile w folderze Chrome i przenosimy go bezpośrednio do funkcji setPackageFolder. Drugi argument jest podkatalogiem, w którym mamy instalować, nie musi on istnieć. Możesz opuścić en argument, jeżeli nie potrzebujesz go.</p> + +<h2 id="Ustawianie_plik.C3.B3w_instalacyjnych" name="Ustawianie_plik.C3.B3w_instalacyjnych">Ustawianie plików instalacyjnych</h2> + +<p>Następnie musisz wyszczególnić to, które pliki powinny zostać zainstalowane. To wymusza użycie dwóch funkcji <code>addDirectory()</code> i <code>addFile()</code>. Funkcja <code>addDirectory()</code>mówi instalatorowi, który katalog z archiwum XPI powinien być zainstalowany, w jakiejś szczególnej lokalizacji. Druga funkcja działa tak samo, tyle, że dotyczy pliku.</p> + +<p>Obie funkcje <code>addDirectory()</code> and <code>addFile()</code> mogą przyjmować różne formy. W najprostszej, pobiera tylko jeden argument, katalog od instalatora by zainstalować w wyznaczonym katalogu.</p> + +<pre class="eval">addDirectory (<i>dir</i> ); +addFile ( +<i>dir</i> ); + +<b>Przykład:</b> + +addDirectory("findfile"); +</pre> + +<p>Powyższy przykład wyszczególnia to, że katalog findfile powinien być zainstalowany. Możemy wywoływać te funkcje wiele razy do instalacji innych plików.</p> + +<p>Następnie będziemy chcieli zarejestrować pliki findfiles w systemie chrome, tak, że mogą być stosowane przez adres URL chrome. To może być wykonane przy pomocy funkcji <code>registerChrome()</code>. Potrzebuje dwóch argumentów, pierwszy to typ rejestru chrome. Drugi, katalog zawierający plik contents.rdf. Ponieważ zawarte są trzy pliki, dodatkowo plik skóry i lokalizacji, funkcja będzie wywołana trzy razy.</p> + +<pre>registerChrome(Install.CONTENT | Install.DELAYED_CHROME, getFolder(findDir, "content")); +registerChrome(Install.SKIN | Install.DELAYED_CHROME, getFolder(findDir, "skin")); +registerChrome(Install.LOCALE | Install.DELAYED_CHROME, getFolder(findDir, "locale")); +</pre> + +<p>Flaga DELAYED_CHROME jest stosowana do sygnalizacji, że chrome powinien być zainstalowany następnym razem po uruchomieniu Mozilli.</p> + +<h2 id="Kompletowanie_instalacji" name="Kompletowanie_instalacji">Kompletowanie instalacji</h2> + +<p>Funkcje <code>addDirectory()</code> i <code>addFile()</code> nie kopiują żadnych plików. One tylko podają, które pliki powinny zostać zainstalowane. Podobnie <code>registerChrome()</code>. Aby zakończyć proces instalacji i zacząć kopiowanie plików wywołaj funkcję <code>performInstall()</code>. To nie potrzebuje żadnych argumentów.</p> + +<p>Końcowy skrypt do instalacji komponentów <code>Znajdź pliki</code> są pokazane poniżej:</p> + +<div class="highlight"> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_xpiscript_1.js.txt">Źródła</a></p> + +<pre>initInstall("Find Files","/Xulplanet/Find Files","0.5.0.0"); + +findDir = getFolder("Chrome","findfile"); +setPackageFolder(findDir); + +addDirectory("findfile"); + +registerChrome(Install.CONTENT | Install.DELAYED_CHROME, getFolder(findDir, "content")); +registerChrome(Install.SKIN | Install.DELAYED_CHROME, getFolder(findDir, "skin")); +registerChrome(Install.LOCALE | Install.DELAYED_CHROME, getFolder(findDir, "locale")); + +performInstall(); +</pre> +</div> + +<p>Następnie, zobaczymy <a href="pl/Kurs_XUL/Dodatkowe_mo%c5%bcliwo%c5%9bci_instalacji">dodatkowe funkcje instalacji</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Tworzenie_instalatora" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dodatkowe_możliwości_instalacji">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/skróty_klawiaturowe/index.html b/files/pl/mozilla/tech/xul/kurs_xul/skróty_klawiaturowe/index.html new file mode 100644 index 0000000000..62a2f5e206 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/skróty_klawiaturowe/index.html @@ -0,0 +1,378 @@ +--- +title: Skróty klawiaturowe +slug: Mozilla/Tech/XUL/Kurs_XUL/Skróty_klawiaturowe +tags: + - Kurs_XUL + - Przewodniki + - Strony_wymagające_dopracowania + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Keyboard_Shortcuts +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Więcej_funkcji_obsługi_zdarzeń" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Kontrola_zaznaczenia_i_aktywacji_elementów">Następny »</a></p> +</div><p></p> + +<p>XUL umożliwia także użycie obsługi zdarzeń związanych z klawiaturą. Jednak byłoby to nudne w odniesieniu do każdego przycisku oraz każdej pozycji znajdującej się w menu.</p> + +<h3 id="Tworzenie_skr.C3.B3tu_klawiaturowego" name="Tworzenie_skr.C3.B3tu_klawiaturowego">Tworzenie skrótu klawiaturowego</h3> + +<p>XUL dostarcza metod, za pomocą których jesteśmy w stanie zdefiniować skróty klawiaturowe. Widzieliśmy już <a href="pl/Kurs_XUL/Proste_paski_menu">w artykule o menu</a>, że jesteśmy w stanie zdefiniować atrybut zwany <code>accesskey</code>, który określa klawisz po wciśnięciu którego aktywowane będzie menu lub też któraś z jego pozycji. W poniższym przykładzie, menu Plik może zostać wybrane poprzez wciśnięcie Alt i F (lub innej kombinacji dla danej platformy). Kiedy otworzy się menu Plik, jesteśmy w stanie wybrać pozycję Zakończ za pomocą wciśnięcia klawisza Z.</p> + +<p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_keyshort_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_keyshort_1.xul">Podgląd</a></p> + +<pre><menubar id="sample-menubar"> + <menu id="file-menu" label="Plik" accesskey="p"> + <menupopup id="file-popup"> + <menuitem id="close-command" label="Zakończ" accesskey="z"/> + </menupopup> + </menu> +</menubar> +</pre> + +<p>Można także zastosować atrybut <code><code id="a-accesskey"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/accesskey">accesskey</a></code></code> dla przycisków. W tym przypadku kiedy klawisz zostanie wciśnięty, przycisk zostanie wybrany.</p> + +<p>Możesz jednak zechcieć ustawić więcej skrótów klawiaturowych. Przykładowo, wciśnięcie Control+C, które spowoduje skopiowanie tekstu do schowka. Chociaż skróty takie jak ten mogą nie zawsze być poprawne, to zazwyczaj działają w dowolnej chwili, w której okno jest otwarte. Skrót klawiaturowy będzie dostępny przez większość czasu, w ciągu którego możemy sprawdzić czy w jakimś sensie wykorzystuje skrypt. Przykładowo, kopiowanie tekstu do schowka powinno działać tylko w chwili, w której tekst jest zaznaczony.</p> + +<h3 id="Element_key" name="Element_key">Element <code>key</code></h3> + +<p>XUL dostarcza element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code>, który pozwala nam na zdefiniowanie skrótów klawiaturowych dla okna. Posiada atrybuty określające klawisz, który powinien zostać wciśnięty, wraz z którym klawiszem modyfikującym (takie jak - Shifth lub Control). Przykład poniżej:</p> + +<pre><keyset> + <key id="sample-key" modifiers="shift" key="R"/> +</keyset> +</pre> + +<p>Ten przykład definiuje skrót klawiaturowy, który jest aktywowany w chwili, w której użytkownik wciśnie klawisze Shift i R. Atrybut <code><code id="a-key"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/key">key</a></code></code> (warto zaznaczyć, że posiada taką samą nazwę jak sam element) może być użyty w celu wykrycia, który klawisz powinien zostać wciśnięty. W tym przypadku jest to R. Możemy także dla tego atrybutu dodać dowolny znak, który ma być wciśnięty. Klawisze modyfikujące, które należy wcisnąć określa natomiast atrybut <code><code id="a-modifiers"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/modifiers">modifiers</a></code></code> (możesz podać kilka rozdzielając spacją). Poniżej lista klawiszy modyfikujących.</p> + +<dl> + <dt>alt </dt> + <dd>The user must press the Alt key. On the Macintosh, this is the Option key.</dd> + <dt>control </dt> + <dd>The user must press the Control key.</dd> + <dt>meta </dt> + <dd>The user must press the Meta key. This is the Command key on the Macintosh.</dd> + <dt>shift </dt> + <dd>The user must press the Shift key.</dd> + <dt>accel </dt> + <dd>The user must press the special accelerator key. The key used for keyboard shortcuts on the user's platform. Usually, this would be the value you would use.</dd> +</dl> + +<p>Twoja klawiatura niekoniecznie musi posiadać wszystkie klawisze. W tym przypadku będą one dostosowane do klawiszy modyfikujących, które posiadamy.</p> + +<p>Element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> musi zostać umieszczony wewnątrz elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/keyset" title="keyset">keyset</a></code></code>. Ten element został zaprojektowany z myślą o przechowywaniu zestawu elementów <code>key</code> i służy do do grupowania wszystkich definicji klawiszy w jednym miejscu (jednym pliku). Jakiekolwiek elementy <code>key</code> poza elementem <code>keyset</code> nie będą funkcjonować.</p> + +<p>Każda platforma używa innych klawiszy dla skrótów klawiaturowych. Przykładowo Windows używa klawisza Control, natomiast Macintosh używa klawisza Command. Byłoby zapewne niewygodne definiować oddzielnie elementy <code>key</code> da każdej platformy. Na szczęście, istnieje rozwiązanie. Modyfikator <code>accel</code>, odnosi się do specjalnego i specyficznego dla danej platformy klawisza używanego dla skrótów. Działa jak każdy inny modyfikator, ale nie dla każdej platformy tak samo.</p> + +<p>Poniżej kilka dodatkowych przykładów:</p> + +<pre><keyset> + <key id="copy-key" modifiers="control" key="C"/> + <key id="explore-key" modifiers="control alt" key="E"/> + <key id="paste-key" modifiers="accel" key="V"/> +</keyset> +</pre> + +<p>Atrybut <code><code id="a-key"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/key">key</a></code></code> jest używany w celu określenia klawisza, który powinien zostać wciśnięty. Jednak, istnieją przypadki w których chcemy się odwołać do klawiszy które nie mogą zostać określone za pomocą znaków (np: klawisze funkcyjne lub klawisz Enter). Atrybut <code>key</code> może zostać używa dla znaków dających się wyświetlić. Natomiast dla nie możliwych do wyświetlenia znaków służy nam atrybut <code><code id="a-keycode"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/keycode">keycode</a></code></code>.</p> + +<p>Atrybut <code><code id="a-keycode"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/keycode">keycode</a></code></code> powinien być ustawiony zgodnie ze specjalnym kodem, który reprezentuje klawisz jaki chcesz wykorzystać. Poniżej przedstawiamy tablicę klawiszy. Nie wszystkie z wymienionych klawiszy są dostępne dla każdej klawiatury.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td>VK_CANCEL</td> + <td>VK_BACK</td> + <td>VK_TAB</td> + <td>VK_CLEAR</td> + </tr> + <tr> + <td>VK_RETURN</td> + <td>VK_ENTER</td> + <td>VK_SHIFT</td> + <td>VK_CONTROL</td> + </tr> + <tr> + <td>VK_ALT</td> + <td>VK_PAUSE</td> + <td>VK_CAPS_LOCK</td> + <td>VK_ESCAPE</td> + </tr> + <tr> + <td>VK_SPACE</td> + <td>VK_PAGE_UP</td> + <td>VK_PAGE_DOWN</td> + <td>VK_END</td> + </tr> + <tr> + <td>VK_HOME</td> + <td>VK_LEFT</td> + <td>VK_UP</td> + <td>VK_RIGHT</td> + </tr> + <tr> + <td>VK_DOWN</td> + <td>VK_PRINTSCREEN</td> + <td>VK_INSERT</td> + <td>VK_DELETE</td> + </tr> + <tr> + <td>VK_0</td> + <td>VK_1</td> + <td>VK_2</td> + <td>VK_3</td> + </tr> + <tr> + <td>VK_4</td> + <td>VK_5</td> + <td>VK_6</td> + <td>VK_7</td> + </tr> + <tr> + <td>VK_8</td> + <td>VK_9</td> + <td>VK_SEMICOLON</td> + <td>VK_EQUALS</td> + </tr> + <tr> + <td>VK_A</td> + <td>VK_B</td> + <td>VK_C</td> + <td>VK_D</td> + </tr> + <tr> + <td>VK_E</td> + <td>VK_F</td> + <td>VK_G</td> + <td>VK_H</td> + </tr> + <tr> + <td>VK_I</td> + <td>VK_J</td> + <td>VK_K</td> + <td>VK_L</td> + </tr> + <tr> + <td>VK_M</td> + <td>VK_N</td> + <td>VK_O</td> + <td>VK_P</td> + </tr> + <tr> + <td>VK_Q</td> + <td>VK_R</td> + <td>VK_S</td> + <td>VK_T</td> + </tr> + <tr> + <td>VK_U</td> + <td>VK_V</td> + <td>VK_W</td> + <td>VK_X</td> + </tr> + <tr> + <td>VK_Y</td> + <td>VK_Z</td> + <td>VK_NUMPAD0</td> + <td>VK_NUMPAD1</td> + </tr> + <tr> + <td>VK_NUMPAD2</td> + <td>VK_NUMPAD3</td> + <td>VK_NUMPAD4</td> + <td>VK_NUMPAD5</td> + </tr> + <tr> + <td>VK_NUMPAD6</td> + <td>VK_NUMPAD7</td> + <td>VK_NUMPAD8</td> + <td>VK_NUMPAD9</td> + </tr> + <tr> + <td>VK_MULTIPLY</td> + <td>VK_ADD</td> + <td>VK_SEPARATOR</td> + <td>VK_SUBTRACT</td> + </tr> + <tr> + <td>VK_DECIMAL</td> + <td>VK_DIVIDE</td> + <td>VK_F1</td> + <td>VK_F2</td> + </tr> + <tr> + <td>VK_F3</td> + <td>VK_F4</td> + <td>VK_F5</td> + <td>VK_F6</td> + </tr> + <tr> + <td>VK_F7</td> + <td>VK_F8</td> + <td>VK_F9</td> + <td>VK_F10</td> + </tr> + <tr> + <td>VK_F11</td> + <td>VK_F12</td> + <td>VK_F13</td> + <td>VK_F14</td> + </tr> + <tr> + <td>VK_F15</td> + <td>VK_F16</td> + <td>VK_F17</td> + <td>VK_F18</td> + </tr> + <tr> + <td>VK_F19</td> + <td>VK_F20</td> + <td>VK_F21</td> + <td>VK_F22</td> + </tr> + <tr> + <td>VK_F23</td> + <td>VK_F24</td> + <td>VK_NUM_LOCK</td> + <td>VK_SCROLL_LOCK</td> + </tr> + <tr> + <td>VK_COMMA</td> + <td>VK_PERIOD</td> + <td>VK_SLASH</td> + <td>VK_BACK_QUOTE</td> + </tr> + <tr> + <td>VK_OPEN_BRACKET</td> + <td>VK_BACK_SLASH</td> + <td>VK_CLOSE_BRACKET</td> + <td>VK_QUOTE</td> + </tr> + <tr> + <td>VK_HELP</td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> + +<p>Na przykład, aby stworzyć skrót, który jest aktywowany w chwili, w której użytkownik naciśnie Alt i F5, należy użyć poniższego kodu:</p> + +<pre><keyset> + <key id="test-key" modifiers="alt" keycode="VK_F5"/> +</keyset> +</pre> + +<p>Poniższy przykład demonstruje więcej skrótów klawiaturowych:</p> + +<pre><keyset> + <key id="copy-key" modifiers="accel" key="C"/> + <key id="find-key" keycode="VK_F3"/> + <key id="switch-key" modifiers="control alt" key="1"/> +</keyset> +</pre> + +<p>Pierwszy klawisz został wywołany w chwili, w której użytkownik wcisnął określony dla swojej platformy klawisz skrótu i C. Drugi został wywołany poprzez wciśnięcie F3. Trzeci jest wywołany poprzez wciśnięcie klawisza Control, klawisza Alt i 1. Jeśli chcesz oddzielić klawiszze głównej części klawiatury i klawisze numeryczne, zastosuj klawisze VK_NUMPAD (takie jak VK_NUMPAD1).</p> + +<div class="note"> +<p>Po więcej informacji na temat skrótów klawiaturowych zajrzyj do <a class="external" href="http://www.mozilla.org/access/keyboard/">Mozilla Keyboard Planning FAQ and Cross Reference</a>.</p> +</div> + +<h3 id="Zastosowanie_skr.C3.B3t.C3.B3w_klawiaturowych" name="Zastosowanie_skr.C3.B3t.C3.B3w_klawiaturowych">Zastosowanie skrótów klawiaturowych</h3> + +<p>Kiedy już wiemy jak zdefiniować skróty klawiaturowe, nauczymy się jak ich używać. Istanieją dwa sposoby. Pierwszy, najprostrzy, wymaga skorzystania z obsługi zdarzenia keypress dla elementu key. Kiedy użytkownik wciśnie klawisz, skrypt zostanie wywołany. Przykład poniżej:</p> + +<pre><keyset> + <key id="copy-key" modifiers="accel" key="C" oncommand="DoCopy();"/> +</keyset> +</pre> + +<p>Funkcja <code>DoCopy</code> będzie wywołana w chwili w której użytkownik wciśnie klawisz wyspecyfikowany przez element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code>. W tym przypadku są to klawisze przewidziane do operacji kopiowania do schowka (takie jak Control i C). Będzie to działać jeśli tylko okno jest otwarte. Funkcja <code>DoCopy</code> powinna sprawdzać czy text jest zaznaczony, a następnie kopiować go do schowka. Zauważmy, że pola tekstowe posiadają wbudowane skróty klawiaturowe, więc nie musimy ich sami implementować.</p> + +<h4 id="Przypisanie_skr.C3.B3tu_w_menu" name="Przypisanie_skr.C3.B3tu_w_menu">Przypisanie skrótu w menu</h4> + +<p>Jeśli przypisujemy skróty klawiaturowe, które wykonują komendy, które także znajdują się w menu, jesteśmy w stanie powiązać element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> bezpośrednio z menu command. Aby to zrobić, dodajemy atrybut <code><code id="a-key"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/key">key</a></code></code> dla pozycji w <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code>. Przypiszmy jej wartość <code><code id="a-id"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/id">id</a></code></code> klawisza, którego chcemy użyć. Poniżej przykład:</p> + +<p><span id="Przyk%C5%82ad_2"><a id="Przyk%C5%82ad_2"></a><strong>Przykład 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_keyshort_2.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_keyshort_2.xul">Podgląd</a></p> + +<div class="float-right"><img alt="grafika:keyshort1.png"></div> + +<pre><keyset> + <key id="paste-key" modifiers="accel" key="V" + oncommand="alert('Paste invoked')"/> +</keyset> + +<menubar id="sample-menubar"> + <menu id="edit-menu" label="Edit" accesskey="e"> + <menupopup id="edit-popup"> + <menuitem id="paste-command" + accesskey="p" key="paste-key" + label="Paste" oncommand="alert('Paste invoked')"/> + </menupopup> + </menu> +</menubar> +</pre> + +<p>Atrybut <code><code id="a-key"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/key">key</a></code></code> przypisany do pozycji w menu, który w tym przypadku jest klawiszem odpowiadającym z opcję wklejenia, jest równy id zdefiniowanego klawisza. Możemy go użyć dla dodatkowych klawiszy, jak i dla zdefiniowania skrótów klawiaturowych dowolnej liczby pozycji znajdujących się w menu.</p> + +<p>Warto także zauważyć na obrazku, że tekst został umieszczony zaraz przy polecanie Paste (znajdującym się w menu), w celu wykrycia czy klawisze Control i V zostały wciśnięte, aby wywołać polecenie menu. Skróty klawiaturowe dodane do menu będą działać nawet jeśli menu nie jest otwarte.</p> + +<p>Kolejną dodaktową cechą definicji klawiszy jest prosta możliwość ich dezaktywacji. Aby to zrobić wystarczy dodać atrybut <code><code id="a-disabled"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/disabled">disabled</a></code></code> do elementu <code>key</code> i ustawić jego wartość na <code>true</code>. Wyłącza to skrót klawiaturowy, pozbawiając go możliwości wywołania. Wygodnie jest zmieniać wartość atrybutu <code>disabled</code> poprzez użycie skryptów.</p> + +<div class="highlight"> +<h5 id="Nasz_przyk.C5.82ad:_Znajd.C5.BA_pliki" name="Nasz_przyk.C5.82ad:_Znajd.C5.BA_pliki">Nasz przykład: Znajdź pliki</h5> + +<p>Dodajmy skróty klawiaturowe do naszego przykładu okna dialogowego Znajdź pliki. Dodamy ich cztery, po jednym dla poleceń Wytnij, Kopiuj, Wklej i Zamknij (kiedy użytkownik wciśnie Escape).</p> + +<pre class="eval"><span class="highlightred"><keyset> + <key id="cut_cmd" modifiers="accel" key="X"/> + <key id="copy_cmd" modifiers="accel" key="C"/> + <key id="paste_cmd" modifiers="accel" key="V"/> + <key id="close_cmd" keycode="VK_ESCAPE" oncommand="window.close();"/> +</keyset></span> + +<vbox flex="1"> + <toolbox> + <menubar id="findfiles-menubar"> + <menu id="file-menu" label="Plik" accesskey="f"> + <menupopup id="file-popup"> + <menuitem label="Otwórz szukanie..." accesskey="o"/> + <menuitem label="Zapisz szukanie..." accesskey="s"/> + <menuseparator/> + <menuitem label="Zakończ" accesskey="c" <span class="highlightred">key="close_cmd"</span> + oncommand="window.close();"/> + </menupopup> + </menu> + <menu id="edit-menu" label="Edycja" accesskey="e"> + <menupopup id="edit-popup"> + <menuitem label="Wytnij" accesskey="t" <span class="highlightred">key="cut_cmd"</span>/> + <menuitem label="Kopiuj" accesskey="c" <span class="highlightred">key="copy_cmd"</span>/> + <menuitem label="Wklej" accesskey="p" <span class="highlightred">key="paste_cmd"</span> disabled="true"/> + </menupopup> + </menu> +</pre> + +<p>Teraz możemy użyć tych skrótów klawiaturowych w celu aktywacji komend. Oczywiście, komendy schowka, nie robią na razie nic, ponieważ nie napisaliśmy na razie żadnych skryptów.</p> +</div> + +<h3 id="Zdarzenia_klawiszy" name="Zdarzenia_klawiszy">Zdarzenia klawiszy</h3> + +<p>Istnieją trzy zdarzenia związane z klawiaturą, które mogą zostać użyte w przypadku, w którym cechy klawiszy opisane wyżej nie są odpowiednie. Tymi zdarzeniami są:</p> + +<dl> + <dt>keypress </dt> + <dd>Wywoływany gdy klawisz został wciśnięty i puszczony na aktywnym elemencie. Można wykorzystać do weryfikacji dozwolonych znaków w polu.</dd> + <dt>keydown </dt> + <dd>Wywoływany gdy klawisz został wciśnięty na aktywnym elemencie. Zwróć uwagę, że zostanie wywołany jak tylko przycisk zostanie wciśnięty, nawet jeśli nie został puszczony.</dd> + <dt>keyup </dt> + <dd>Wywoływany gdy klawisz został puszczony na aktywnym elemencie.</dd> +</dl> + +<p>Zdarzenia klawiszy będą wysyłane tylko do tych elementów na których skupiona jest uwaga (focus). Typowo, będą to textboxy, przyciski, checkboy itp. Jeśli uwaga nie jest skupiona na żadnym z elementów to zdarzenie klawisza, będzie się odnosiło w stosunku do dokumentu XUL. W tym przypadku, można dodać nasłuch zdarzenia do znacznika <code><code><a href="/pl/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> . Jeśli jednak chcesz odpowiadać na działanie klawiszy globalnie, będziesz zmuszony do wykorzystania skrótów klawiaturowych, zgodnie z powyższymi wskazówkami.</p> + +<p>Obiekt zdarzenia klawisza posiada dwie własności, które przechowują klawisz, który został wciśnięty. Własność keyCode przetrzymuje kod klawisza i może posłużyć do porównania z jedną ze stałych wymienionych w tabelce powyżej. Natomiast charCode, jest używana dla możliwych do wyświetlenia znaków i przechowuje kod znaku wciśniętego klawisza.</p> + +<p>Następnie dowiemy się <a href="pl/Kurs_XUL/Kontrola_zaznaczenia_i_aktywacji_element%c3%b3w">jak podtrzymać zaznaczenie i aktywację elementu</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Więcej_funkcji_obsługi_zdarzeń" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Kontrola_zaznaczenia_i_aktywacji_elementów">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/stosy_i_pokłady/index.html b/files/pl/mozilla/tech/xul/kurs_xul/stosy_i_pokłady/index.html new file mode 100644 index 0000000000..477088d803 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/stosy_i_pokłady/index.html @@ -0,0 +1,77 @@ +--- +title: Stosy i pokłady +slug: Mozilla/Tech/XUL/Kurs_XUL/Stosy_i_pokłady +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Stacks_and_Decks +--- +<p> +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Dodawanie_innych_elementów" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Pozycjonowanie_stosu">Następny »</a></p> +</div> +<p></p><p>Może wystąpić potrzeba wyświetlenia elementów jako zbioru nakładających się kart. Do tego celu mogą być zastosowane elementy stosu i pokładu. +</p> +<h3 id="Kontenery" name="Kontenery"> Kontenery </h3> +<p>Każde pudełko XUL jest kontenerem mogącym zawierać jakiś inny element. Jest kilka elementów, które są wyspecjalizowanym typem pudełek, takich jak <a href="pl/Kurs_XUL/Paski_narz%c4%99dzi">paski narzędzi</a> oraz <a href="pl/Kurs_XUL/Pude%c5%82ko_kart">panele kart</a>. Znacznik <code><code><a href="/pl/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code> tworzy najprostsze pudełko bez określonych własności. Jednakże wyspecjalizowane typy pudełek pracują jak regularne pudełka w sposób zorientowany (<code id="a-orient"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/orient">orient</a></code>) na elementy znajdujące się wewnątrz nich, ale posiadają także dodatkowe cechy. +</p><p>Faktycznie wiele komponentów może zawierać inne elementy. Widzieliśmy już, że przyciski mogą zawierać inne rzeczy poza domyślnymi. Pasek przewijania jest właśnie specjalnym typem pudełka, które tworzy swoje własne elementy, jeśli ich nie dostarczymy. Może być przesuwany także za pomocą uchwytu, poprzez złapanie i przesunięcie paska. +</p><p>W kolejnych kilku rozdziałach wprowadzimy pewne elementy, które zostały zaprojektowane do przechowywania innych elementów. Są to wszystkie specjalne typy pudełek i pozwalają zastosować wszystkie atrybuty pudełka w sobie. +</p> +<h3 id="Stosy" name="Stosy"> Stosy </h3> +<p>Element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code></code> jest prostym pudełkiem. Działa jak inne pudełka, ale posiada specjalną własność, która jest dzieckiem położonym na górze pozostałych elementów. Pierwsze dziecko stosu jest ustawiane na spodzie, drugie dziecko na nim, następnie w taki sam sposób trzecie i tak dalej kolejne. Na stosie może być ułożonych wiele elementów. +</p><p>Własność <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/orient">orient</a></span></code></code> ma mniejsze znaczenie na stosie jako potomek, niż jakby były ułożone jeden obok drugiego. Rozmiar stosu jest określony przez +największego potomka, ale możemy zastosować własności CSS <code>width</code>, <code>height</code>, <code>min-width</code> i inne podobne własności zarówno ze stosem, jak i jego potomkami. +</p><p>Element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code></code> może być zastosowany dla przypadku, gdzie status wskazuje konieczność dodania ponad istniejący element. Na przykład, pasek postępu może zostać stworzony przy użyciu paska i etykiety umieszczonej na jego górze. +</p><p>Jednym dogodnym zastosowaniem elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code></code> jednak jest to, że możemy zastosować na nim pewną liczbę własności CSS. Na przykład, możemy stworzyć podobny efekt do własności cieniowania tekstu w bardzo prosty sposób: </p> +<h4 id="Przyk.C5.82ad_stosu" name="Przyk.C5.82ad_stosu"> Przykład stosu </h4> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_stacks_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_stacks_1.xul">Podgląd</a> +</p> +<pre><stack> + <description value="Cieniowany" style="padding-left: 1px; padding-top: 1px; font-size: 15pt"/> + <description value="Cieniowany" style="color: red; font-size: 15pt;"/> +</stack> +</pre> +<div class="float-right"><img alt="grafika:stacks1.png"></div> +<p>Oba elementy <code><code><a href="/pl/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code> tworzą tekst o rozmiarze 15 punktów. Pierwszy jednak jest przesunięty w prawo oraz w dół o jeden piksel przez dodanie odstępu z lewej strony i góry. Wynikiem będzie uzyskanie tego samego wyrazu 'Cieniowanie' po raz drugi, lecz już lekko przesuniętego względem poprzedniego elementu. Drugi element <code>description</code> został napisany na czerwono, aby zobaczyć efekt w sposób bardzo wyraźny. +</p><p>Metoda ta ma przewagę nad zastosowaniem <code>text-shadow</code>, ponieważ możesz całkowicie dodać styl cienia z wyjątkiem tekstu głównego. Możesz mieć swoje własne czcionki, podkreślenia lub rozmiar (możesz nawet stworzyć cień migający). Jest również użyteczny, ponieważ Mozilla nie może aktualnie obsługiwać cieniowania tekstu CSS. Wadą jest to, że obszar objęty cieniem stwarza większy rozmiar stosu. Cieniowanie jest bardzo użyteczne dla tworzenia nieaktywnego pojawienia się przycisków. +</p> +<h4 id="Cieniowanie_z_przyk.C5.82adem_pok.C5.82adu" name="Cieniowanie_z_przyk.C5.82adem_pok.C5.82adu"> Cieniowanie z przykładem pokładu </h4> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_stacks_2.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_stacks_2.xul">Podgląd</a> +</p> +<pre><stack style="background-color: #C0C0C0"> + <description value="Wyłączony" style="color: white; padding-left: 1px; padding-top: 1px;"/> + <description value="Wyłączony" style="color: grey;"/> +</stack> +</pre> +<div class="float-right"><img alt="grafika:stacks10.png"></div> +<p>Ten układ tekstu i kolory cienia tworzą nieaktywność na dowolnej platformie. +</p><p>Zauważ, że zdarzenia, takie jak kliknięcie myszką i naciskanie klawiszy, są przekazywane do elementu na szczycie stosu, to znaczy, do ostatniego elementu na stosie. Oznacza to, że przyciski będą działały poprawnie tylko jako ostatni element stosu. +</p> +<h3 id="Pok.C5.82ady" name="Pok.C5.82ady"> Pokłady </h3> +<p>Element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/deck" title="deck">deck</a></code></code> również wystawia swoich potomków jeden nad drugim podobnie jak element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code></code>, jednak pokład wyświetla tylko jeden ze swoich potomków w jednym czasie. Byłoby to użyteczne dla interfejsu kreatora, gdzie szereg podobnych paneli jest wyświetlanych w kolejności. Zamiast tworzenia oddzielnych okien i dodania przycisków nawigacyjnych do każdego z nich, stworzysz jedno okno i użyjesz podkładu, gdzie zawrzesz zmiany. +</p><p>Podobnie jak stosy, bezpośredni potomek elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/deck" title="deck">deck</a></code></code> formuje strony pokładu. Jeśli jest trzech potomków elementu <code>deck</code>, pokład będzie miał trzech potomków. Wyświetlana strona pokładu może być zmieniona przez ustawienie atrybutu <code><code id="a-selectedIndex"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/selectedIndex">selectedIndex</a></code></code> elementu <code>deck</code>. Indeks jest to liczba, która identyfikuje, jaka strona jest wyświetlana. Strony są ponumerowane poczynając od zera. Więc pierwszy potomek pokładu to strona o indeksie 0, druga jest to strona o indeksie 1 i tak dalej. +</p><p>Poniżej mamy przykład pokładu: +</p> +<h4 id="Przyk.C5.82ad_pok.C5.82adu" name="Przyk.C5.82ad_pok.C5.82adu"> Przykład pokładu </h4> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_stacks_3.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_stacks_3.xul">Podgląd</a> +</p> +<pre><deck selectedIndex="2"> + <description value="To jest pierwsza strona"/> + <button label="To jest druga strona"/> + <box> + <description value="To jest trzecia strona"/> + <button label="To jest także trzecia strona"/> + </box> +</deck> +</pre> +<p>Tu mamy trzy strony (pokłady), domyślnie będąc trzecią. Trzecia strona jest pudełkiem z dwoma elementami wewnątrz. Zarówno pudełko, jak i jego elementy wewnątrz stanowią stronę. +Pokład będzie tak duży jak największy potomek, którym tu będzie strona trzecia. +</p><p>Możesz przełączać strony stosując skrypt do modyfikacji atrybutu <code><code id="a-selectedIndex"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/selectedIndex">selectedIndex</a></code></code>. Więcej o tym dowiesz się w rozdziale o zdarzeniach i DOM. +</p><p>Następny artykuł opisuje, jak stos może być zastosowany do <a href="pl/Kurs_XUL/Pozycjonowanie_stosu">pozycjonowania elementów dziecka</a>. +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Dodawanie_innych_elementów" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Pozycjonowanie_stosu">Następny »</a></p> +</div> +<p></p> +<div class="noinclude"> +</div> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/struktura_xul/index.html b/files/pl/mozilla/tech/xul/kurs_xul/struktura_xul/index.html new file mode 100644 index 0000000000..34826b291e --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/struktura_xul/index.html @@ -0,0 +1,194 @@ +--- +title: Struktura XUL +slug: Mozilla/Tech/XUL/Kurs_XUL/Struktura_XUL +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/XUL_Structure +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Wprowadzenie" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:URL_Chrome">Następny »</a></p> +</div><p></p> + +<p>Rozpoczynamy naukę w jaki sposób XUL jest obsługiwany przez Mozillę.</p> + +<h2 id="Jak_jest_obs.C5.82ugiwany_XUL" name="Jak_jest_obs.C5.82ugiwany_XUL">Jak jest obsługiwany XUL</h2> + +<p>XUL w Mozilli jest obsługiwany na takiej samej zasadzie, jak język HTML lub jakikolwiek inny zawarty w niej język. Kiedy wpisujesz adres URL strony HTML w polu adresu przeglądarki, przeglądarka odnajduje witrynę i pobiera jej zawartość. Silnik interpretacji (renderingu) Mozilli pobiera zawartość strony w formie źródła HTML i przekształca to w drzewo dokumentu <em>à la</em> <a href="/pl/DOM" title="pl/DOM">DOM</a>. Drzewo to jest później przekształcane w zestaw obiektów, które mogą zostać wyświetlone na ekranie. <a href="/pl/CSS" title="pl/CSS">CSS</a>, pliki graficzne i inne technologie są używane, by kontrolować tę prezentację. Funkcje XUL są obsługiwane na takiej samej zasadzie.</p> + +<p>Tak naprawdę, to w Mozilli wszystkie typy dokumentów, czy są to HTML lub XUL, czy nawet <a href="/pl/SVG" title="pl/SVG">SVG</a>, są obsługiwane przez ten sam podstawowy kod programu. Oznacza to, że tymi samymi własnościami CSS można manipulować zarówno w HTML, jak i w XUL. Również dużo innych cech może być podzielone między oba te języki. Jednakże, są pewne cechy, które właściwe są tylko dla HTML, jak formularze i takie, które dotyczą tylko XUL, jak <a href="/pl/Kurs_XUL/Nakładki" title="pl/Kurs_XUL/Nakładki">nakładki</a>.</p> + +<p><span class="comment">However, there are some features that are specific to HTML such as forms, and others which are specific to XUL such as <a href="/pl/XUL_Tutorial/Overlays">overlays</a>. Since XUL and HTML are handled in the same way, you can load both from either your local file system, from a web page, or from an extension or standalone <a href="/pl/XULRunner">XULRunner</a> application.</span></p> + +<p>Tak więc XUL i HTML są obsługiwane w ten sam sposób, możesz również oba załadować zarówno z lokalnych zasobów swojego komputera, jak i ze stron w sieci. Mozilla posiada specjalny sposób instalowania i rejestrowania plików (XUL, JS ...) jako części jej systemu chrome. Obejmuje to również tworzenie archiwum plików - paczek, które użytkownik może pobrać i zainstalować. Te zainstalowane paczki maja podwyższone przywileje działania, takie jak: możliwość czytania plików, analizowania ustawień użytkownika i zakładek oraz uzyskiwanie dostępu do innych właściwości systemu. Oczywiście, strony z sieci nie posiadają takich przywilejów, chyba że są podpisane cyfrowym certyfikatem i użytkownik przyzna im na to pozwolenie.</p> + +<p><span class="comment">Content from remote sources <code><nowiki>eg <a class="external" href="http://localhost/~username/" rel="freelink">http://localhost/~username/</a></nowiki></code>, regardless or whether they are HTML or XUL or another document type, are limited in the type of operations they can perform, for security reasons. For this reason, Mozilla provides a method of installing content locally and registering the installed files as part of its '''<a href="/pl/chrome">chrome</a>''' system. This allows a special URL form to be used called a <code>chrome://</code> URL. By accessing a file using a chrome URL, the files receive elevated privileges to access local files, access preferences and bookmarks and perform other privileged operations. Obviously, web pages do not get these privileges, unless they are signed with a digital certificate and the user has granted permission to perform these operations.</span></p> + +<p>Rejestracja paczki jest sposobem, w jaki rozszerzenia Firefoksa mogą dodawać funkcje do przeglądarki. Rozszerzenia są małymi paczkami plików XUL, JavaScript, stylów CSS i obrazów spakowanych razem do pojedynczego pliku. Paczka może zostać utworzona przy pomocy programu do kompresji ZIP. Kiedy użytkownik pobierze rozszerzenie, zostanie ono zainstalowane na jego komputerze. Rozszerzenie to zagnieździ się w przeglądarce używając specjalnych właściwości XUL nazywanych nakładaniem (overlay), które pozwala kodowi XUL z rozszerzenia i z przeglądarki połączyć się razem w całość. Użytkownikowi może się wydawać, że rozszerzenie zmodyfikowało przeglądarkę, ale w rzeczywistości, kod jest oddzielony i rozszerzenie może zostać łatwo odinstalowane.</p> + +<p>Rejestracja paczki nie jest wymagana, żeby używać nakładek, jednak, jeśli nie jest zarejestrowana, nie będziesz mógł dostać się do niej za pomocą głównego interfejsu przeglądarki. Dostęp do tej paczki jest możliwy poprzez specjalny rodzaj adresu URL, stworzonego specjalnie, by uzyskać dostęp do zainstalowanych paczek. Ten rodzaj URL nazywamy chrome i zaczyna się zawsze od 'chrome://'. Tak jak 'http://' zawsze prowadzi do stron internetowych, a 'file://' do folderów lokalnych, tak 'chrome://' odnosi się do zainstalowanych paczek i rozszerzeń. W składnię URL chrome zagłębimy się w dalszych rozdziałach.</p> + +<p>Należy zaznaczyć, że, gdy wczytujemy zawartość za pomocą URL chrome, uzyskujemy zwiększone przywileje opisane powyżej, których inne rodzaje adresów nie uzyskują. Dla przykładu, adres HTTP nie posiada żadnych specjalnych przywilejów, a kiedy spróbuje takowe uzyskać, spowoduje błąd (np. przy próbie uzyskania dostępu do plików lokalnych), zaś URL chrome będzie mógł czytać pliki bez ograniczeń.</p> + +<p>Ta różnica jest bardzo ważna. Oznacza, że są pewne rzeczy, których zawartość stron www nie może zrobić, takie jak czytanie zakładek użytkownika. Ta różnica nie opiera się na rodzaju wyświetlanej zawartości, tylko na typie użytego adresu. Zarówno HTML, jak i XUL umieszczone na witrynie nie mają żadnych dodatkowych przywilejów. Natomiast HTML i XUL załadowany przez chrome URL posiadają rozszerzone przywileje.</p> + +<p>To, że przeglądarka Mozilla sama w sobie jest tylko zbiorem paczek plików XUL, JavaScript i stylów CSS, jest nic nie warte. Te pliki są dostępne poprzez URL chrome, posiadają podwyższone przywileje i działają tak jak inne paczki. Oczywiście, przeglądarka jest znacznie większa i bardziej zaawansowana niż większość rozszerzeń. Klient poczty Mozilla, kompozytor stron, Firefox i Thunderbird, jak również wiele innych komponentów, są napisane w XUL i są one dostępne poprzez URL chrome.</p> + +<p>Jeśli zamierzasz używać XUL na stronach WWW, wystarczy, że umieścisz plik XUL na stronie tak jak byś umieszczał plik HTML, a następnie wejdziesz na tą stronę za pomocą przeglądarki. Upewnij się, że twój serwer WWW jest skonfigurowany żeby wysłać pliki XUL z typem zawartości <strong><code>application/vnd.mozilla.xul+xml</code></strong>. Za pomocą typu zawartości Mozilla rozróżnia HTML i XUL. Mozilla nie sugeruje się rozszerzeniem plików, chyba, że odczytuje pliki z lokalnego systemu plików, w każdym razie powinieneś używać rozszerzenia <code>.xul</code> dla wszystkich plików w języku XUL. Możesz otwierać pliki XUL ze swojego komputera otwierając je w przeglądarce lub klikając podwójnie w menadżerze plików.</p> + +<div class="note">Pamiętaj, że pliki XUL spoza twojego komputera mają poważne restrykcje odnośnie tego, co mogą zrobić.</div> + +<h3 id="Typy_dokument.C3.B3w:_HTML_XML_XUL_CSS" name="Typy_dokument.C3.B3w:_HTML_XML_XUL_CSS">Typy dokumentów: HTML XML XUL CSS</h3> + +<p>Trwają prace nad umożliwieniem aplikacjom XUL, żeby funkcjonowały jako samodzielne programy z własnymi instalatorami i plikami wykonywalnymi (XulRunner). Będą one dzielić biblioteki z Mozillą i nie będzie potrzeby mieć zainstalowanej przeglądarki, żeby móc używać XUL. Aktualnie jest to też możliwe, jednak proces ten jest skomplikowany i rzadko używany. Celem jest właśnie usprawnienie tego procesu.</p> + +<p>W Mozilli wiele funkcji jest dzielone pomiędzy HTML i XUL, używa ona jednak różnego rodzaju obiektów dokumentu dla każdego. Są trzy główne typy dokumentu w Mozilli: HTML, XML i XUL. Naturalnie, dokumenty HTML są używane do dokumentów HTML, dokumenty XUL są używane do dokumentów XUL i dokumenty XML, które są używane dla innych typów dokumentów XML. Odkąd XUL jest również XML-em, jest podtypem bardziej ogólnego dokumentu XML. Są subtelne różnice w funkcjonalności tych dokumentów. Na przykład, kontrola formularzy na stronie HTML jest dostępna przez właściwość <code>document.forms</code>, ta właściwość nie jest dostępna dla dokumentów XUL, gdyż XUL nie ma formularzy w takim samym sensie, jak HTML. Z drugiej strony określone cechy XUL, takie jak overlays i szablony, są dostępne tylko w dokumentach XUL.</p> + +<p>Te różnice pomiędzy dokumentami są bardzo ważne. Istnieje możliwość używania wielu cech <a href="/pl/XUL" title="pl/XUL">XUL</a> w <a href="/pl/HTML" title="pl/HTML">HTML</a> albo w dokumentach XML, kiedy nie ma specyfikacji typu dokumentu, jednakże inne cechy wymagają właściwego rodzaju dokumentu. Na przykład, możesz używać typów układu (layout) XUL w innych dokumentach, gdyż, by działać, nie potrzebują one typu XUL dokumentu.</p> + +<p>Podsumujmy wiadomości zdobyte powyżej:</p> + +<ul> + <li>Mozilla interpretuje (renderuje) <a href="/pl/HTML" title="pl/HTML">HTML</a> i <a href="/pl/XUL" title="pl/XUL">XUL</a> używając tego samego podstawowego silnika i używa CSS do określania ich prezentacji.</li> + <li>XUL może zostać załadowany ze zdalnego miejsca (strony WWW), lokalnego systemu pliku albo jako zainstalowana paczka, która dostępna jest poprzez URL chrome. To właśnie robią rozszerzenia przeglądarki.</li> + <li>URL chrome można użyć, by uzyskać dostęp do zainstalowanych paczek i otworzyć je z podwyższonymi przywilejami.</li> + <li>HTML, XML i XUL posiadają różny typ dokumentów. Pewne cechy mogą zostać użyte w każdym typie dokumentu, podczas gdy inne są przydzielone tylko do jednego rodzaju dokumentu.</li> +</ul> + +<p>Następne kilka artykułów opisuje podstawy struktury paczek chrome, które mogą zostać zainstalowane w Mozilli. Jeśli już chcesz zacząć tworzyć proste aplikacje XUL, możesz przejść od razu do drugiej sekcji i zostawić sobie tą sekcję na później.</p> + +<h2 id="Organizacja_paczki" name="Organizacja_paczki">Organizacja paczki</h2> + +<p>Mozilla jest zorganizowana w taki sposób, że możesz zainstalować tyle komponentów ile tylko chcesz. Typowa instalacja zawiera komponenty: nawigator, kuriera poczty i kompozytora stron. Posiada też po jednym komponencie dla każdej zainstalowanej skórki i lokalizacji. Każdy z tych komponentów albo paczek, jest złożony z kompletu plików, które opisują interfejs użytkownika dla nich. Na przykład, komponent kuriera poczty będzie miał opis okna z listą wiadomości, okna kompozycji e-maila i książki adresowej.</p> + +<p>Paczki, które są dostarczone z Mozillą znajdują się w katalogu chrome, który znajduje się w katalogu instalacyjnym Mozilli. W katalogu chrome znajdziesz wszystkie pliki, które opisują interfejs użytkownika użyty przez przeglądarkę Mozilla, kuriera poczty i inne aplikacje. Może być mylące, że katalog nazywa się "chrome" a jest tylko nieznacznie powiązany z URL chrome. Samo kopiowanie pliku do katalogu "chrome" nie daje plikowi żadnych dodatkowych przywilejów, ani nie umożliwia dostępu poprzez URL chrome. Jedyną droga by stworzyć zawartość, która może być dostępna poprzez URL chrome, jest stworzenie paczki jak opisano w następnych kilku sekcjach. Katalog ten został nazywany "chrome" ponieważ ta nazwa wydawała się odpowiednia dla katalogu, gdzie znajdują się paczki chrome, zawarte w Mozilli.</p> + +<p>Istnieją jeszcze dwa inne miejsca, gdzie słowo chrome może się pojawić. Pierwszym jest argument wiersza poleceń '-chrome' a drugim modyfikator chrome w funkcji <code><a href="/pl/DOM/window.open" title="pl/DOM/window.open">window.open()</a></code>. Żadna z tych funkcji nie przyznaje dodatkowych przywilejów; zamiast tego otwierają nowe okno, na wierzchu, bez elementów interfejsu użytkownik (UI) przeglądarki takie jak menu i pasek narzędzi. W bardziej złożonych aplikacjach XUL, będziesz powszechnie używał tych cech, gdy nie będziesz chciał by te elementy UI znajdowały się w twoich okienkach dialogowych.</p> + +<p>Pliki w paczce zwykle są połączone w jeden plik JAR. Plik JAR można utworzyć i przeglądać za pomocą programu do kompresji ZIP. Otwórz teraz kilka plików JAR w katalogu chrome, Mozilli i zobacz jak wygląda struktura takiej paczki. Pomimo, że normą jest łączenie plików w jeden plik JAR, dostęp do paczek można uzyskać w rozwiniętej formie, jako zestaw katalogów. Normalnie nie rozprowadza się paczek w ten sposób, ale jest to wygodne podczas tworzenia rozszerzenia, ponieważ możesz edytować katalog z plikami i po prostu przeładować pliki XUL bez przepakowania i ponownej instalacji.</p> + +<pre class="eval">pref("nglayout.debug.disable_xul_cache", true); +</pre> + +<p>Zazwyczaj w paczce chrome są trzy różne części, mimo, że wszystkie są opcjonalne. Każda część jest przetrzymywana w innych katalogach. Te trzy zestawy to content (zawartość), skin (skóry) i locale (lokalizacja), opisano je poniżej. Niektóre paczki mogą zawierać jedną albo więcej skór i lokalizacji, użytkownik może też zastąpić je własnymi. W dodatku paczka może zawierać kilka różnych aplikacji, każdą dostępną przez różne URL chrome. System pakowania jest wystarczająco elastyczny, żebyś mógł umieścić w paczce jakąkolwiek część, którą potrzebujesz i pozwolić innym, takim jak tekst dla różnych języków, żeby zostały pobrane oddzielnie.</p> + +<p>Katalogi:</p> + +<ul> + <li><strong>Content</strong> (zawartość) - okna i skrypty.</li> +</ul> + +<p>Zawarte są w nim deklaracje okien i elementów interfejsu użytkownika. Są one zapisane w plikach XUL, które mają rozszerzenie xul. Paczka może posiadać wiele plików XUL, ale główne okno powinno mieć taką samą nazwę jak nazwa paczki. Na przykład, paczka edytora (kompozera) będzie miała plik o nazwie editor.xul. Skrypty znajdują się w osobnych plikach o rozszerzeniu js, obok plików XUL.</p> + +<ul> + <li><strong>Skin</strong> (skóra) - style CSS, obrazy i inne pliki motywów wyglądu.</li> +</ul> + +<p>Style CSS opisują szczegóły wyglądu okna. Są one oddzielone od plików XUL, by ułatwić modyfikowanie skóry aplikacji. Znajdują się tu też użyte obrazki.</p> + +<ul> + <li><strong>Locale</strong> (lokalizacja) - lokalizacja określonych plików.</li> +</ul> + +<p>Wszystkie teksty, które są wyświetlane w oknie są zgromadzone oddzielnie. Dzięki czemu użytkownik może mieć własny zestaw tekstów we własnym języku.</p> + +<p>Spójrz na katalog chrome w Mozilli, powinieneś widzieć kilka plików JAR, po jednym dla każdej zainstalowanej paczki. Na przykład messenger.jar opisuje interfejs użytkownika dla komponentu kuriera poczty. Plik modern.jar opisuje skórę Modern.</p> + +<h2 id="Zawarto.C5.9B.C4.87_paczek" name="Zawarto.C5.9B.C4.87_paczek">Zawartość paczek</h2> + +<p>Nazwa pliku JAR może opisywać co zawiera ten plik, ale nie możesz być tego pewny dopóki sam nie sprawdzisz. Użyjemy paczki kuriera poczty jako przykładu. Jeśli rozpakujesz plik <code>browser.jar</code> zobaczysz, że struktura jego plików wygląda następująco:</p> + +<pre>content + browser + browser.xul + browser.js + -- other browser XUL and JS files goes here -- + bookmarks + -- bookmarks files go here -- + preferences + -- preferences files go here -- +. +. +. +</pre> + +<p>Łatwo zgadnąć, że paczka zawartości (ang. content) znajduje się w folderze 'content', skóry w 'skin' a lokalizacje w 'locale'. Ten schemat nazywania nie jest wymagany, ale jest powszechnie uznawany, gdyż dzięki niemu paczka jest bardziej uporządkowana. Niektóre paczki zawierają wszystkie 3 części: content, skin i locale. Dla przykładu, Chatzilla ma taką strukturę.</p> + +<p>Katalogi content i messenger zawiera pliki o rozszerzeniem xul i js. Jak łatwo się domyślić pliki XUL mają rozszerzenie xul a skrypty JavaScript, js. w tym przypadku skrypty obsługują funkcje okna kuriera. Wiele plików XUL posiada powiązany ze sobą skrypt a niektóre nawet więcej niż jeden.</p> + +<p>W strukturze przedstawionej powyżej, znajdują się dwa pliki. Oczywiście jest ich więcej ale dla ułatwienia pokazane są tylko dwa. Plik messenger.xul opisuje główne okno kuriera które wyświetla listę wiadomości. Okno to jest dość złożone dlatego składa się z kilku plików powiązanych ze sobą za pomocą overlays. Główne okno powinno mieć taką samą nazwę jak paczka i rozszerzenie xul. W tym przypadku paczka nazywa się 'messenger' dlatego powinniśmy szukać pliku 'messenger.xul'. Niektóre z reszty plików opisują oddzielne okna. Przykładowo plik 'subscribe.xul' opisuje dialog subskrybowania grup newsowych.</p> + +<p>Plik contents.rdf znajduje się w każdej paczce. Jest to bardzo ważny plik ponieważ określa nazwę paczki, jej autora i wersje. Mozilla używa tych informacji do rejestracji paczki i przydzielenia jej adresu URL chrome, żeby plik był dostępny przez ten adres bo bez tego pliku nie można go przydzielić. Plik ten zostanie dokładniej opisany w dalszych częściach.</p> + +<p>Dwa podkatalogi - addressbook i messengercompose, opisują dodatkowe sekcje komponentu obsługi poczty. Są umieszczone w oddzielnych katalogach, żeby je odseparować. Nie potrzebują pliku 'contents.rdf' ponieważ są dostępne przez ten sam adres chrome.</p> + +<h2 id="Motywy_i_sk.C3.B3rki" name="Motywy_i_sk.C3.B3rki">Motywy i skórki</h2> + +<p>Podstawowy kod Mozilli nazywa je motywami a interfejs użytkownika motywami (themes), jednak oba określenia odnoszą się do tej samej rzeczy. Pliki modern.jar i classic.jar znajdują się w katalogu chrome Mozilli i opisują motywy wyglądu Mozilli. Ich struktura jest podobna do paczki content. Przykład z pliku modern.jar:</p> + +<pre class="eval">skin + modern + navigator + contents.rdf + -- pliki skór nawigatora -- + messenger + contents.rdf + -- pliki kuriera -- + editor + contents.rdf + -- pliki kompozytora stron -- + communicator + contents.rdf + -- pliki komunikatora -- + global + contents.rdf + -- pliki skór globalnych -- +. +. +. +</pre> + +<p>Struktura jest tu bardziej skomplikowana, chodź jest podobna do części content. Zamiast słowa 'content' w folderze na najwyższym poziomie użyto słowa 'skin'. Zapamiętaj, że ta struktura jest czysto umowna, równie dobrze możesz umieści wszystkie pliki w jednym głównym katalogu i nie używać podkatalogów. Jednakże w większych aplikacjach, jak w samej Mozilli, podkatalogi oddzielają różne komponenty. W przykładzie powyżej znajduje się 5 katalogów, po jednym dla każdej paczki dla której przeznaczono skórę. Katalog global zawiera skóry ogólne dla wszystkich paczek. Pliki te odnoszą się do wszystkich komponentów, zazwyczaj będziesz sam ich używał. Katalog global definiuje wygląd wszystkich elementów UI w XUL, podczas gdy inne katalogi definiują wygląd aplikacji którym odpowiadają. Przykładowo katalog editor opisuje skórę dla komponentu kompozytora stron i zwiera między innymi pliki graficzne z ikonami dla przycisków paska narzędzi.</p> + +<p>Zauważyłeś zapewne, że jest 5 plików contents.rdf. Właśnie dzięki nim skóry są stosowane oddzielnie dla każdego komponentu. Teoretycznie możesz mieć skórę inną dla nawigatora, niż dla kuriera, jednak większość wyglądu jest determinowana przez część global, tak więc nie zobaczysz dużej różnicy pomiędzy aplikacjami. Poza tym Mozilla nie umożliwia wyboru oddzielnego motywu dla każdej aplikacji. Skóry również są oddzielnymi plikami, łatwo więc można dodać nowe komponenty a istniejące usunąć. Na przykład możesz stworzyć nową skórę dla kuriera a użytkownicy mogą ściągnąć ją oddzielnie. Dzięki pakowaniu plików oddzielne, użytkownik może wybrać których części chce używać.</p> + +<p>Skóra składa się z plików CSS i plików graficznych, które razem tworzą interfejs. Plik messenger.css jest używany przez messenger.xul i zawiera style które definiują wiele części interfejsu poczty. Zauważ, że znowu plik messenger.css ma taką samą nazwę jak cała paczka. Zmieniając zawartość plików CSS możesz zmieniać wygląd okna, nie zmieniając jego funkcji. Właśnie tak możesz stworzyć swój własny motyw bo skóry zmieniają się niezależnie od części XUL.</p> + +<h2 id="Lokalizacje" name="Lokalizacje">Lokalizacje</h2> + +<p>Plik en-US.jar opisuje informacje o języku, w tym przypadku angielskim, dla każdego komponentu. Tak jak skóry, każdy język zawiera pliki które określają tekst używany przez konkretną paczkę. Tak jak poprzednio, w paczce znajdują się pliki contents.rdf które opisują dla których paczek przeznaczono teksty. Podkatalogi zawierają tekst dla każdej paczki. Struktura tej paczki jest bardzo podobna do skin:</p> + +<pre class="eval">locale + navigator + contents.rdf + -- pliki tekstów w nawigatorze -- + global + contents.rdf + -- pliki tekstów globalnych -- +. +. +. +</pre> + +<p>Teksty lokalizacji znajdują się w dwóch typach plików: DTD i plików właściwości (properties). Pliki DTD mają rozszerzenie dtd i zawierają opis pojedynczych ciągów tekstu po jednym dla każdego tekstu użytego w oknie. Dla przykładu, plik messenger.dtd zawiera takie opisy dla każdej komendy menu. Dodatkowo, zdefiniowane są skróty klawiaturowe dla każdej komendy, gdyż mogą się różnić w innych językach. Pliki DTD są używane przez pliki XUL, na ogół będzie to po jednym dla każdego pliku XUL. Jak już wspomniałem, znajdują się tu również pliki właściwości, które są podobne ale używają ich skrypty. Plik messenger.properties zawiera kilka ciągów tekstów.</p> + +<p>Taka struktura umożliwia przetłumaczenie Mozilli albo tylko wybranego komponentu na inny język, wystarczy dodać tylko nowy plik locale dla tego języka. Nie ma potrzeby zmieniania części XUL. Dodatkowo, inna osoba może stworzyć oddzielną paczkę która będzie zawierać skórę lub lokalizacje dla stworzonej przez ciebie zawartości (content), nie ma potrzeby zmieniać oryginalnej paczki.</p> + +<h2 id="Inne_paczki" name="Inne_paczki">Inne paczki</h2> + +<p>Wiele paczek w Mozilli jest podpaczkami, paczki komunikatora. Dla przykładu okna zakładek, historii i opcji znajdują się poza paczką komunikatora. Znajdują się oddzielnie ponieważ dotyczą większej ilości paczek.</p> + +<p>Istnieje specjalny rodzaj paczki zwany toolkit lub global. Wcześniej widzieliśmy katalog global w paczce skór i lokalizacji. Plik toolkit.jar zawiera odpowiadającą im część content. Zawiera niektóre globalne dialogi i definicje. Określa również domyślny wygląd i funkcje dla elementów interfejsu, jak pola tekstowe i przyciski. Pliki znajdujące się w katalogu global paczki skór, zawierają definicje wyglądu wszystkich elementów XUL interfejsu użytkownika. Większość zmian motywów wyglądu, powoduje użycie różnych wariantów tych plików.</p> + +<h2 id="Dodawanie_paczki" name="Dodawanie_paczki">Dodawanie paczki</h2> + +<p>Mozilla umieszcza paczki zawarte w instalacji w katalogu chrome, mimo, że nie ma wymogu żeby znajdowały się one właśnie tam. Paczki mogą być zainstalowane w dowolnym miejscu na dysku. Plik chrome.rdf zawiera listę zainstalowanych paczek, motywów i lokalizacji wraz z ich położeniem. Powszechnie instaluje się nowe paczki w katalogu chrome, ponieważ jest to wygodne ale będą one równie dobrze działać z innego katalogu albo nawet z sieci lokalnej. Nie możesz przetrzymywać ich w zdalnych katalogach, chyba, że są one zamontowane w lokalnym systemie plików.</p> + +<p>Użytkownik może mieć zainstalowane wiele skór i lokalizacji które dotyczą tej samej paczki. Jednocześnie może być aktywna tylko jedna skóra i lokalizacja dla paczki. Plik chrome/chrome.rdf określa które z nich są aktywne, również określa paczkę content. Plik w chrome.rdf w katalogu profilu działa podobnie do tego z głównego katalogu Mozilli ale zawiera informacje dotyczące tylko danego użytkownika podczas gdy jego odpowiednik w katalogu instalacyjnym dotyczy wszystkich użytkowników.</p> + +<p>W następnym artykule skupimy się na tym, jak odwołać się do paczki chrome za pomocą <a href="/pl/Kurs_XUL/URL_Chrome" title="pl/Kurs_XUL/URL_Chrome">URL chrome</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Wprowadzenie" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:URL_Chrome">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/szablony/index.html b/files/pl/mozilla/tech/xul/kurs_xul/szablony/index.html new file mode 100644 index 0000000000..a2ed5d6c2c --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/szablony/index.html @@ -0,0 +1,201 @@ +--- +title: Szablony +slug: Mozilla/Tech/XUL/Kurs_XUL/Szablony +tags: + - Kurs_XUL + - Przewodniki + - Strony_wymagające_dopracowania + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Templates +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Wprowadzenie_do_RDF" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Drzewa_i_szablony">Następny »</a></p> +</div> W tym artykule, przekonamy się jak wypełnić elementy kodem źródłowym.<p></p> + +<h3 id="Wype.C5.82nianie_elementami" name="Wype.C5.82nianie_elementami">Wypełnianie elementami</h3> + +<p>XUL dostarcza metody, w których możemy tworzyć elementy za pomocą kodu RDF, albo pochodzące z pliku RDF lub pochodzące z własnych źródeł. Liczne źródła danych są dostarczane z Mozilli także jako podręczniki, historia i wiadomości e-mail. Więcej informacji znajduje się w <a href="/pl/Kurs_XUL/Drzewa_i_szablony" title="pl/Kurs_XUL/Drzewa_i_szablony">następnym artykule</a>.</p> + +<p>Często, elementy takie jak elementy drzewa i elementy menu będą wypełnione danymi. Jednakże, będziesz chciał używać jej zdefiniowanej dla specjalnych warunków. Niemniej jednak, rozpoczniemy z tymi innymi elementami, ponieważ drzewa i menu potrzebują więcej kodu.</p> + +<p>Pozwolenie na tworzenie elementów opartych na kodzie źródłowym, potrzebujesz przygotować prosty szablon, który będzie tworzony jako duplikat na każdym elemencie. Istotnie, tworzymy pierwszy element, który pozostanie jako konstrukcja na pozostałych elementach.</p> + +<p>Szablon jest tworzony używając elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/template" title="template">template</a></code></code>. Wewnątrz, możesz położyć te elementy, które chcesz użyć do skonstruowania elementu. Elementy <code>template</code> powinny być umieszczone wewnątrz zbioru, który stanowi stworzone elementy. Na przykład jeśli używasz drzewa, powinieneś położyć element <code>template</code> do wewnątrz elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code></code>.</p> + +<h4 id="Simple_Template_Example" name="Simple_Template_Example">Przykład prostego szablonu</h4> + +<p>Lepiej będzie to wytłumaczyć na przykładzie. Weźmy prosty przykład gdzie chcemy utworzyć przycisk dla każdej górnego-poziomu zakładki. Mozilla dostarcza kod źródłowy zakładek tak więc mogą być one użyte do pobrania danych. Ten przykład będzie potrafił tylko pobrać zakładek górnego-poziomu (lub folderów zakładek) jakie będziemy chcieli używać jako przyciski. Dla potomnych zakładek, będziemy potrzebować do użycia elementu do wyświetlenia hierarchii takiej jak drzewo lub menu.</p> + +<div class="note">Ten przykład i jakikolwiek inny, który powołuje się na wewnętrzny kod RDF, będzie działał poprawnie jeśli wgrasz go z adresu URL chrome. Z przyczyn bezpieczeństwa. Mozilla nie pozwala na dostęp z innych źródeł.</div> + +<p>Aby obejrzeć ten przykład, utwórz pakiet chrome i wczytaj z niego pliki. Możesz teraz potwierdzić adres URL chrom wpisując go do przeglądarki URL.</p> + +<p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_templates_1.xul.txt">Źródła</a></p> + +<pre><vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1"> + <template> + <button uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/> + </template> +</vbox> +</pre> + +<div class="float-right"><img alt="Image:templates1.jpg" class="internal" src="/@api/deki/files/2505/=Templates1.jpg"></div> + +<p>Powyżej zostało stworzone pionowe pole okna, które stanowi kolumnę przycisków, każda jedna zakładka jest wyrównywana do górnego poziomu. Możesz zobaczyć jak <code>template</code> stanowi pojedynczy <code><code><a href="/pl/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code>. Używany jest w liczbie mnogiej dla wszystkich potrzebnych przycisków do tworzenia. Możesz obejrzeć grafikę gdyż ustawienia przycisków zostały utworzone, jeden dla każdej zakładki.</p> + +<p>Spróbuj dodać zakładkę do przeglądarki podczas gdy masz otwarte okno przykładu. Zostaniemy natychmiast powiadomieni, że przyciski z przykładu zostały zaktualizowane (możesz skupić się na tej zmianie).</p> + +<h4 id="Container_and_Datasources" name="Container_and_Datasources">Kontener i źródła danych</h4> + +<p>Szablon samoczynnie umieści się w pionowym polu. Pole posiada dwa specjalne atrybuty używane w szablonach, które są użyte tam skąd pochodzą dane. Pierwszy atrybut pola jest to atrybut <code>datasources</code>. Jest on użyty do deklaracji w co kod źródłowy RDF będzie zaopatrywał tworzony element. W tej sytuacji, są użyte <code>rdf:bookmarks</code>. Możemy prawdopodobnie przypuszczać jakie znaczenie ma użyty kod źródłowy, który został dostarczony przez Mozillę. Aby użyć własnego kodu źródłowego, używamy określonego adresu URL dla pliku RDF zawierającego atrybut <code>datasources</code>, jak pokazuje poniższy przykład:</p> + +<pre><box datasources="chrome://zoo/content/animals.rdf" + ref="http://www.some-fictitious-zoo.com/all-animals"> +</pre> + +<p>Możesz podać wiele źródeł danych poprzez oddzielnie ich za pomocą spacji w wartości atrybutu. Używa się tego do wyświetlenia danych z wielu źródeł.</p> + +<p>Atrybut <code>ref</code> oznacza, z którego źródła chcesz pobierać dane. W przypadku zakładek wartość <code>NC:BookmarksRoot</code> jest użyta do wskazania podstawy hierarchii zakładek. Inne wartości do użycia zależą od źródła danych. Jeśli używasz jako źródło własnego pliku RDF wartość ta odpowiadała będzie zwykle wartości atrybutu <code>about</code> w RDF-ie <code>Bag</code>, <code>Seq</code> lub elementowi <code>Alt</code>.</p> + +<h4 id="Inside_the_Template" name="Inside_the_Template">Wewnątrz szablonu</h4> + +<p>By adding these two attributes to the box above, it allows the generation of elements using the template. However, the elements inside the template need to be declared differently. You may notice in the example above that the <code>button</code> has a <code>uri</code> attribute and an unusual value for the <code>label</code> attribute.</p> + +<p>An attribute value inside the template that begins with 'rdf:' indicates that the value should be taken from the datasource. In the example earlier, this is the case for the <code>label</code> attribute. The remainder of the value refers to the name property in the datasource. It is constructed by taking the namespace URL used by the datasource and appending the property name. If you don't understand this, try re-reading the last part of <a href="/pl/Kurs_XUL/Wprowadzenie_do_RDF" title="pl/Kurs_XUL/Wprowadzenie_do_RDF">the previous section</a>. It explains how resources in RDF can be referred to. Here, we only use the name of the bookmark but numerous other fields are available.</p> + +<p>The <code>label</code> of the buttons is set to this special URI because we want the labels on the buttons to be set to the names of the bookmarks. We could have put a URI in any of the attributes of the <code>button</code>, or any other element. The values of these attributes are replaced with data supplied by the datasource which, in this case, is the bookmarks. So we end up with the labels on the buttons set to the names of the bookmarks.</p> + +<p>The example below shows how we might set other attributes of a button using a datasource. Of course, this assumes that the datasource supplies the appropriate resources. If a particular one is not found, the value of the attribute will be set to an empty string.</p> + +<pre><button class="rdf:http://www.example.com/rdf#class" + uri="rdf:*" + label="rdf:http://www.example.com/rdf#name" + crop="rdf:http://www.example.com/rdf#crop"/> +</pre> + +<p>As you can see, you can dynamically generate lists of elements with the attributes provided by a separate datasource.</p> + +<p>The uri attribute is used to specify the element where content generation will begin. Content earlier will only be generated once whereas content inside will be generated for each resource. We'll see more about this when we get to <a href="/pl/Kurs_XUL/Drzewa_i_szablony" title="pl/Kurs_XUL/Drzewa_i_szablony">creating templates for trees</a>.</p> + +<p><span class="comment">Atrybut '''uri''' jest użyty w stosunku do specyficznych elementów gdzie zawartość wygenerowana będzie na początku. Zawartość</span></p> + +<h4 id="Wi.C4.99cej_przyk.C5.82ad.C3.B3w" name="Wi.C4.99cej_przyk.C5.82ad.C3.B3w">Więcej przykładów</h4> + +<p>Poprzez dodawanie tych funkcjonalności do kontenera będącego w szablonie (który w tym przypadku jest prostokątem) i do elementów szablonu, możemy wygenerować różnorodne spisy treści zewnętrznej. Oczywiście, możemy umieścić więcej niż jeden element wewnątrz szablonu i dodać specjalnie referencje RDF do atrybutów elementów. Poniższy przykład demonstruje to.</p> + +<p><span id="Przyk%C5%82ad_2"><a id="Przyk%C5%82ad_2"></a><strong>Przykład 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_templates_2.xul.txt">Źródła</a></p> + +<pre><vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1"> + <template> + <vbox uri="rdf:*"> + <button label="rdf:http://home.netscape.com/NC-rdf#Name"/> + <label value="rdf:http://home.netscape.com/NC-rdf#URL"/> + </vbox> + </template> +</vbox> +</pre> + +<p>Przykład ten utworzy pionowy box z przyciskiem i etykietą dla każdej zakładki. Przycisk posiada nazwę zakładki, a etykieta to jest URL.</p> + +<p>Nowe elementy są utworzone jako funkcjonalne, jedyne, nie inne potrafią wpisać się bezpośrednio w plik XUL. Atrybut <code>id</code> jest dodawany do każdego elementu utworzonego poprzez szablon, który jest ustawiony na wartość, która identyfikuje zasoby kodu. Możesz używać tego do identyfikacji swoich zasobów.</p> + +<p>Możesz także wyszczególnić wielokrotną wartość źródła w tym samym atrybucie poprzez odseparowanie go spacją, jak w przykładzie poniżej. <a class="external" href="http://www.xulplanet.com/tutorials/xultu/templateex.html">Więcej o składni źródła</a> (XULPlanet).</p> + +<p><span id="Przyk%C5%82ad_3"><a id="Przyk%C5%82ad_3"></a><strong>Przykład 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_templates_3.xul.txt">Źródła</a></p> + +<pre><vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" + flex="1"> + <template> + <label uri="rdf:*" value="rdf:http://home.netscape.com/NC-rdf#Name rdf:http://home.netscape.com/NC-rdf#URL"/> + </template> +</vbox> +</pre> + +<h3 id="Jak_s.C4.85_budowane_szablony" name="Jak_s.C4.85_budowane_szablony">Jak są budowane szablony</h3> + +<p>Kiedy element posiada atrybut <code>datasources</code>, to sygnalizuje, że ten element oczekuje na budowę poprzez formularz szablonu. Note that it isn't the <code>template</code> tag that determines whether content is built, it is the <code>datasources</code> attribute. When this attribute is present, an object called a Builder is added to the element. It is this object that is responsible for building the content from the template. In JavaScript you can access the builder object with the <code>builder</code> property, although usually you would only need to do this to have the builder regenerate the content in situations where it is not done automatically.</p> + +<p>Istnieją dwa rodzaje kreatorów. Pierwszym, najczęściej używanym, jest kreator treści, natomiast drugi to kreator drzewek stosowany jedynie do drzewek.</p> + +<h4 id="Content_Builder" name="Content_Builder">Kreator treści</h4> + +<p>The content builder takes the content inside the <code>template</code> element and duplicates it for each row. For instance, if the user had ten bookmarks in the example above, ten <code><code><a href="/pl/docs/Mozilla/Tech/XUL/label" title="label">label</a></code></code> elements would be created and added as children of the <code><code><a href="/pl/docs/Mozilla/Tech/XUL/vbox" title="vbox">vbox</a></code></code> element. If you were to use DOM functions to traverse the tree, you will find these elements there and can query their properties. These elements get displayed, but the <code>template</code> itself is not displayed, although it still exists the the document tree. In addition, the <code>id</code> of each of the labels will be set to the RDF resource for that row.</p> + +<p>Kreator treści zawsze rozpoczyna pracę od miejsca gdzie wyspecyfikowany jest uri="rdf:*". Jeśli atrybut <code>uri</code> jest umieszczony na niższym elemencie w drzewku, zewnętrze elementy są stworzone tylko raz. W poniższym przykładzie, jeden <code><code><a href="/pl/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></code> będzie stworzony i wypełniony napisem dla każdej pozycji.</p> + +<pre><template> + <hbox> + <label uri="rdf:*" value="rdf:http://home.netscape.com/NC-rdf#Name"/> + </hbox> +</template> +</pre> + +<p>Jeśli treść znajduje się wewnątrz elementu z atrybutem <code>datasources</code> i na zewnątrz szablonu, treść także się ukaże. Idąc tą drogą, możesz mieszać stałą i dynamiczną treść szablonu.</p> + +<h4 id="Tree_Builder" name="Tree_Builder">Kreator drzewek</h4> + +<p>The tree builder, on the other hand, doesn't generate the DOM elements for the rows. Instead, it gets the data directly from the RDF datasource whenever it needs it. Since trees are often expected to display thousands of rows of data, this is much more efficient. Creating an element for every cell would be too costly. However, the tradeoff is that trees may only display text, and, since no elements are created, you can't use CSS properties to style tree cells in the same way.</p> + +<p>Kreator drzewek jest używany wyłącznie do drzewek. Inne elementy są tworzone poprzez kreator treści. To nie powinno być problemem, choć inne elementy - jak na przykład menu - nie powinny wyświetlać zbyt dużo składników. Możliwe jest także użycie kreatora drzewek, stosując element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code> i inne, odnoszące się do tego elementy będą stworzone w każdym rzędzie.</p> + +<h3 id="Zasady" name="Zasady">Zasady</h3> + +<p>In the image of the earlier example, you may have noticed that the third button is simply a button with hyphens on it. This is a separator in the bookmark list. In the way that we have been using it, the RDF bookmarks datasource supplies the separators as if they were just regular bookmarks. What we would really like to do is add a small amount of spacing instead of a button for separator resources. That means that we want to have two different types of content be created, one type for regular bookmarks and a second type for separators.</p> + +<p>Możemy zrobić to dzięki użyciu elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/rule" title="rule">rule</a></code></code>. Definiujemy reguły dla każdego odchylenia elementów, które chcielibyśmy stworzyć. W naszym przypadku, potrzebujemy regułę dla zakładek i regułę dla separatorów. Atrybuty umiejscowiono na elemencie <code>rule</code> określają które reguły należy zaakceptować przy zasobach RDF.</p> + +<p>When scanning for which rule applies to the data, each <code>rule</code> element is checked in sequence for a match. That means that the order in which you define rules is important. Earlier rules will override later rules.</p> + +<h4 id="Rule_Example" name="Rule_Example">Przykład użycia zasady</h4> + +<p>Przedstawiony przykład demonstruje wcześniejszy przykład z dwiema zasadami:</p> + +<p><span id="Przyk%C5%82ad_4"><a id="Przyk%C5%82ad_4"></a><strong>Przykład 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_templates_4.xul.txt">Źródła</a></p> + +<pre><window + id="example-window" + title="Bookmarks List" + xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + + <vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1"> + <template> + + <rule rdf:type="http://home.netscape.com/NC-rdf#BookmarkSeparator"> + <spacer uri="rdf:*" height="16"/> + </rule> + + <rule> + <button uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/> + </rule> + + </template> + </vbox> + +</window> +</pre> + +<div class="float-right"><img alt="Image:templates2.jpg" class="internal" src="/@api/deki/files/2506/=Templates2.jpg"></div> + +<p>By using two rules, we have allowed the contents of the template to be selectively generated. In the first <code>rule</code>, bookmark separators are selected, as can be seen by the <code>rdf:type</code> attribute. The second <code>rule</code> does not have any attributes so all data matches it.</p> + +<p>All of the attributes placed on the <code>rule</code> tag are used as match criteria. In this case, the bookmarks datasource supplies a <code>rdf:type</code> property to distinguish separators. This attribute is set to a special value for separators in the RDF bookmarks datasource. This is how we can distinguish them from non-separators. You can use a similar technique for any attribute that might be on an RDF <code>Description</code> element.</p> + +<p>The special URL value given in the example above for the first rule is used for separators. That means that separators will follow rule one and generate a <code><code><a href="/pl/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code></code> element, which will display a 16 pixel gap. Elements that are not separators will not match rule one and will fall through to rule two. Rule two does not have any attributes on it. This means that it will match all data. This is, of course, what we want to have happen to the rest of the data.</p> + +<p>You should also have noticed that because we wanted to get an attribute from the RDF namespace (<code>rdf:type</code>), we needed to add the namespace declaration to the <code><code><a href="/pl/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> tag. If we didn't do this, the attribute would be looked for in the XUL namespace. Because it does not exist there, the rule will not match. If you use attributes in your own custom namespace, you need to add the namespace declaration in order to match them.</p> + +<p>You should be able to guess what would happen if the second rule was removed. The result would be a single spacer displayed but no bookmarks because they don't match any of the rules.</p> + +<p>Put simply, a rule matches if all of the attributes placed on the <code>rule</code> element match the corresponding attributes on the RDF resource. In the case of an RDF file, the resources would be the <code>Description</code> elements.</p> + +<p>There are some small exceptions however. You cannot match based on the attributes id, <code>rdf:property</code> or <code>rdf:instanceOf</code>. Because you can just use your own attributes with your own namespace, it probably doesn't really matter anyway.</p> + +<p>Note that a template with no rules in it, as in the first example, is really equivalent functionally to a template with a single rule with no attributes.</p> + +<p>Następny artykuł pokazuje nam jak <a href="/pl/Kurs_XUL/Drzewa_i_szablony" title="pl/Kurs_XUL/Drzewa_i_szablony">stosować szablony z drzewami</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Wprowadzenie_do_RDF" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Drzewa_i_szablony">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/szczegóły_modelu_pudełkowego/index.html b/files/pl/mozilla/tech/xul/kurs_xul/szczegóły_modelu_pudełkowego/index.html new file mode 100644 index 0000000000..2aa2418742 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/szczegóły_modelu_pudełkowego/index.html @@ -0,0 +1,105 @@ +--- +title: Szczegóły modelu pudełkowego +slug: Mozilla/Tech/XUL/Kurs_XUL/Szczegóły_modelu_pudełkowego +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Box_Model_Details +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Pozycjonowanie_elementów" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Pola_grup">Następny »</a></p> +</div> +<p></p><p>Widzieliśmy już dużo własności modelu pudełkowego. Tutaj znajdziemy trochę szczegółów z przykładami. </p> +<h3 id="Wi.C4.99cej_szczeg.C3.B3.C5.82.C3.B3w_uk.C5.82adu_graficznego" name="Wi.C4.99cej_szczeg.C3.B3.C5.82.C3.B3w_uk.C5.82adu_graficznego"> Więcej szczegółów układu graficznego </h3> +<p>Własności stylu, takie jak <code>min-width</code> i <code>max-height</code>, mogą być dodawane do każdego elementu. Wstawialiśmy je już do przycisków i pól tekstowych, ale możemy je również dodać do pól odstępu czy pudełek. Dodatkowo do każdego elementu może być dodany atrybut <code>flex</code>. +</p><p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_1.xul">Podgląd</a> +</p> +<pre><hbox flex="1"> + <button label="Lewo" style="min-width: 100px;" flex="1"/> + <spacer flex="1"/> + <button label="Prawo" style="min-width: 100px;" flex="1"/> +</hbox> +</pre> +<p>W powyższym przykładzie wszystkie trzy elementy zmieniają swój rozmiar, ponieważ mają ustawiony atrybut <code>flex</code>. Obydwa przyciski maja ustawioną minimalną szerokość 100 pikseli i nigdy się nie zmniejszą poniżej tej wartości, ale mogą się powiększać. Okno powinno być niewiele szersze niż 200 pikseli. Jest to szerokość wystarczająca, aby wyświetlić oba przyciski, dlatego wstępnie elastyczność nie zmieni ich rozmiaru. +</p> +<div class="float-right"><img alt="grafika:boxdet1.png"></div> +<p>Jak widać na obrazku obok, znajdują się tam dwa przyciski, które są rozciągnięte w pionie, aby wypełnić pudełko, które w tym przypadku jest typu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></code>. Można zapobiec nadmiernemu rozciąganiu się pudełka poprzez ustawianie maksymalnej wysokości elementów w jego wnętrzu lub lepiej, samego pudełka. Jeśli ta wartość zostanie ustawiona, wszystkie elementy pudełka będą nim ograniczane. W tym wypadku pojawia się problem, gdyż musimy wiedzieć z góry, ile miejsca potrzebujemy, aby pomieścić wszystkie elementy w pudełku. +Atrybut <code><code id="a-align"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/align">align</a></code></code> kontroluje zachowanie się poziomego pudełka. Poniższy przykład demonstruje jego działanie. +</p><p><span id="Przyk%C5%82ad_2"><a id="Przyk%C5%82ad_2"></a><strong>Przykład 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_2.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_2.xul">Podgląd</a> +</p> +<pre><hbox flex="1" align="top"> + <button label="Lewo" style="min-width: 100px;" flex="1"/> + <spacer flex="1"/> + <button label="Prawo" style="min-width: 100px;" flex="1"/> +</hbox> +</pre> +<h4 id="Podsumowanie_modelu_pude.C5.82kowego" name="Podsumowanie_modelu_pude.C5.82kowego"> Podsumowanie modelu pudełkowego </h4> +<p>Realizując skomplikowane układy graficzne, trzeba zazwyczaj zagnieżdżać wiele pudełek, określać minimalne i maksymalne wymiary elementów oraz tworzyć pewne elementy jako elastyczne. Najlepszym układem jest taki, który można wyświetlić bezproblemowo w oknie o różnej wielkości. Model pudełkowy może być trudny do zrozumienia bez samodzielnego wypróbowania różnych kombinacji i możliwości. </p><p>Poniżej są wypisane najważniejsze cechy dostępnych pudełek: </p><p><b>Pudełka poziome</b> +</p> +<ol><li> Elementy potomne układane są obok siebie w poziomie (w rzędzie). +</li><li> Elementy elastyczne są rozciągane w poziomie. +</li><li> Pakowanie (<code>pack</code>) kontroluje ułożenie elementów potomnych w poziomie. +</li><li> Wyrównanie (<code>align</code>) kontroluje, w jaki sposób rząd elementów jest wyrównywany w pionie. +</li></ol> +<p><b>Pudełka pionowe</b> +</p> +<ol><li> Elementy potomne układane są jeden pod drugim (w kolumnie). +</li><li> Elementy elastyczne są rozciągane w pionie. +</li><li> Pakowanie (<code>pack</code>) kontroluje pionowe ułożenie elementów potomnych. +</li><li> Wyrównanie (<code>align</code>) kontroluje, w jaki sposób kolumna elementów jest wyrównywana w poziomie. +</li></ol> +<p>Pudełka mogą być wstawiane w dowolnym miejscu pliku XUL, w tym także wewnątrz elementów HTML (np. jako tabele). Jednakże ich układ graficzny będzie wtedy częściowo kontrolowany przez element HTML, do którego zostały wstawione. Oznacza to, że atrybut <code><code id="a-flex"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/flex">flex</a></code></code> może nie działać w sposób, jaki byśmy sobie tego życzyli. Należy pamiętać, że elastyczność dotyczy tylko tych elementów, które są bezpośrednio zastosowane wewnątrz pudełka lub elemencie dziedziczącym z pudełka. +</p> +<h3 id="Przyk.C5.82ady_uk.C5.82adu_graficznego" name="Przyk.C5.82ady_uk.C5.82adu_graficznego"> Przykłady układu graficznego </h3> +<h5 id="Zastosowanie_odst.C4.99p.C3.B3w" name="Zastosowanie_odst.C4.99p.C3.B3w"> Zastosowanie odstępów </h5> +<p><span id="Przyk%C5%82ad_3"><a id="Przyk%C5%82ad_3"></a><strong>Przykład 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_3.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_3.xul">Podgląd</a> +</p> +<pre><hbox> + <button label="Jeden"/> + <spacer style="width: 5px"/> + <button label="Dwa"/> +</hbox> +</pre> +<p>Tutaj <code><code><a href="/pl/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code></code> (odstęp) został użyty jako separator pomiędzy dwoma przyciskami, odstęp jest stały i wynosi 5 pikseli. To samo mogliśmy osiągnąć ustawiając marginesy używając własności CSS <code>margin</code>. +</p> +<h4 id="Wy.C5.9Brodkowanie_przycisk.C3.B3w" name="Wy.C5.9Brodkowanie_przycisk.C3.B3w"> Wyśrodkowanie przycisków </h4> +<p><span id="Przyk%C5%82ad_4"><a id="Przyk%C5%82ad_4"></a><strong>Przykład 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_4.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_4.xul">Podgląd</a> +</p> +<pre><hbox pack="center" align="center" flex="1"> + <button label="Look at Me!"/> + <button label="Push Me!"/> +</hbox> +</pre> +<p>W tym przykładzie mamy elastyczne pudełko z dwoma przyciskami wewnątrz. Pudełko posiada atrybut <code><code id="a-pack"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/pack">pack</a></code></code>, dzięki któremu możemy wyśrodkować przyciski w poziomie. Atrybut <code><code id="a-align"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/align">align</a></code></code> wyrównuje przyciski w pionie. W efekcie przyciski będą wyśrodkowane w obu kierunkach. Jeśli zamiast pudełka typu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></code> użyte zostało by pudełko <code><code><a href="/pl/docs/Mozilla/Tech/XUL/vbox" title="vbox">vbox</a></code></code>, efekt byłby ten sam z tą różnicą, że przyciski były by ustawione jeden pod drugim a nie obok siebie. +</p> +<h4 id="Okno_dialogowe_Znajd.C5.BA_tekst" name="Okno_dialogowe_Znajd.C5.BA_tekst"> Okno dialogowe <tt>Znajdź tekst</tt> </h4> +<p><span id="Przyk%C5%82ad_5"><a id="Przyk%C5%82ad_5"></a><strong>Przykład 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_5.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_5.xul">Podgląd</a> +</p> +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> + +<window id="findtext" title="Znajdź tekst" orient="horizontal" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + + <vbox flex="3"> + <label control="t1" value="Szukaj tekstu:"/> + <textbox id="t1" style="min-width: 100px;" flex="1"/> + </vbox> + + <vbox style="min-width: 150px;" flex="1" align="start"> + <checkbox id="c1" label="Uwzględnij wielkość liter"/> + <spacer flex="1" style="max-height: 30px;"/> + <button label="Znajdź"/> + </vbox> + +</window> +</pre> +<div class="float-right"><img alt="grafika:boxdet-ex3.png"></div> +<p>Okno składa się z dwóch pudełek, jedno dla pola tekstowego, drugie dla pola wyboru oraz przycisku. Oba pudełka są elastyczne, lecz elastyczność lewego pudełko jest trzykrotnie większa od prawego, co sprawia, że podczas zmiany rozmiaru okna otrzymuje trzy razy więcej dodatkowego miejsca. Minimalna wielkość prawego pudełka jest wyznaczona i wynosi 150 pikseli. </p><p>Pole tekstowe jest elastyczne, więc zmienia swoją wielkość podczas zmiany rozmiaru okna. Pole to również ma wyznaczoną minimalna szerokość, która wynosi 100 pikseli. Pole wyboru pojawi się w prawym pudełku wraz ze swoją etykietą. Poniżej pola wyboru wstawiamy pustą przestrzeń, która będzie zmieniała swój rozmiar podczas zmiany wielkości okna, jednak nie będzie ona większa niż 30 pikseli. W rezultacie pole wyboru i przycisk <tt>Znajdź</tt> będą rozdzielone od siebie pustą przestrzenią nie większą niż 30 pikseli. </p><p>Drugie pudełko zostało utworzone z atrybutem <code>start</code>. Powoduje to wyrównanie elementów potomnych do lewej krawędzi. Jeśli nie zdefiniujemy wartości tego atrybutu, to domyślnym ustawieniem jest <code>stretch</code>, powodujące rozciąganie elementów potomnych w poziomie. Ponieważ nie chcemy, aby przycisk <tt>Znajdź</tt> zmieniał rozmiar, musimy ustawić wyrównanie. </p><p>Następnie dowiemy się więcej o specjalnych typach pudełka - <a href="pl/Kurs_XUL/Pola_grup">polach grupy</a>. </p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Pozycjonowanie_elementów" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Pola_grup">Następny »</a></p> +</div> +<p></p> +<div class="noinclude"> +</div> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/szczegóły_widoku_drzewa/index.html b/files/pl/mozilla/tech/xul/kurs_xul/szczegóły_widoku_drzewa/index.html new file mode 100644 index 0000000000..af0fa0c905 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/szczegóły_widoku_drzewa/index.html @@ -0,0 +1,346 @@ +--- +title: Szczegóły widoku drzewa +slug: Mozilla/Tech/XUL/Kurs_XUL/Szczegóły_widoku_drzewa +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Tree_View_Details +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Własne_widoki_drzewa" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Obiekty_pudełkowe_drzewa">Następny »</a></p> +</div><p></p> + +<p>W tej części będzie opisane więcej cech wyglądu drzewa.</p> + +<h2 id="Tworzenie_w.C5.82asnego_hierarchicznego_widoku" name="Tworzenie_w.C5.82asnego_hierarchicznego_widoku">Tworzenie własnego hierarchicznego widoku</h2> + +<p>W ostatnim artykule tworzyliśmy prosty widok drzewa, który implementował tylko minimum funkcjonalności. Teraz przyjrzyjmy się innym, dodatkowym funkcjom, których możemy zaimplementować. Sprawdzimy tutaj, jak stworzyć hierarchicznie ustawione pozycje, używające widoku. Jest to dość podstępny proces pociągający za sobą utrzymywanie ścieżek pozycji potomnych i także, które wiersze są otwarte, a które zostały zamknięte.</p> + +<h3 id="Zagnie.C5.BCd.C5.BCanie_poziomu" name="Zagnie.C5.BCd.C5.BCanie_poziomu">Zagnieżdżanie poziomu</h3> + +<p>Każdy wiersz w drzewie ma zagnieżdżony poziom. Najwyższy wiersz jest na poziomie 0, dzieci tego wiersza są na poziomie 1, a z kolei kolejne dzieci mamy na poziomie 2 itd. Drzewo wypyta widok o każdy wiersz, wywołując metodę <code>getLevel</code> w celu znalezienia poziomu danego wiersza. Widok zwróci 0 dla najwyższych, zewnętrznych wierszy, wyższe wartości dla wierszy wewnętrznych. Drzewo użyje tych informacji w celu ustalenia hierarchicznej struktury wierszy.</p> + +<p>Dodatkowo do metody <code>getLevel</code>, jest jeszcze funkcja <code>hasNextSibling</code>, która daje wiersz zwracająca wartość <code>true</code>, jeżeli znajduje się kolejny wiersz na tym samym poziomie. Funkcja ta jest używana w szczególności podczas rysowania zagnieżdżonych linii w głąb drzewa.</p> + +<p>Metoda <code>getParentIndex</code> jest zwraca źródłowy wiersz dla rzędu, jeżeli znajduje się kolejny rząd na tym samym poziomie. Wszystkie z tych metod muszą być zastosowane przez widok dla dzieci do podtrzymania własności.</p> + +<h3 id="Kontenery" name="Kontenery">Kontenery</h3> + +<p>Są tam też trzy funkcje <code>isContainer</code>, <code>isContainerEmpty</code> i <code>isContainerOpen</code> do posługiwania się źródłowymi pozycjami drzewa.</p> + +<ul> + <li>Naturalnie, <code>isContainer</code> powinna zwrócić wartość true, jeżeli wiersz jest pojemnikiem i może zawierać kolejne wiersze.</li> + <li>Metoda <code>isContainerEmpty</code> powinna zwrócić wartość true, jeżeli wiersz jest pustym pojemnikiem, jak np. pusty folder.</li> + <li>Metoda <code>isContainerOpen</code> służy do ustalenia, które z pozycji są otwarte, a które zamknięte.</li> +</ul> + +<p>Zwróć uwagę ze metody te nie zostaną użyte, jeżeli isContainer nie wskaże tego, że dany element jest pojemnikiem.</p> + +<p>Pojemnik może zostać przedstawiony inaczej, jako nie kontener. Na przykład może mieć ikonę folderu obok siebie. Schemat może zostać użyty do stylizacji elementów opierając się na różnych własnościach, takich jak to czy wiersz jest otwarty czy nie. Opisane jest to w <a href="pl/Kurs_XUL/Nadawanie_stylu_drzewa">dalszej części</a>. Niepusty pojemnik będzie wyświetlony obok, tak, że użytkownik będzie mógł go otwierać i zamykać by zobaczyć zawartość wiersza.</p> + +<p>Kiedy użytkownik kliknie by otworzyć wiersz drzewo wywoła funkcję toggleOpenState. Następnie widok powinien wykonać wszelkie konieczne operacje, by uzyskać zawartość wiersza i wypełnić drzewo nowymi wierszami.</p> + +<h3 id="Przegl.C4.85d_metod" name="Przegl.C4.85d_metod">Przegląd metod</h3> + +<p>Przegląd metod potrzebnych do użycia hierarchicznego widoku:</p> + +<pre>getLevel(row) +hasNextSibling(row, afterIndex) +getParentIndex(row) +isContainer(row) +isContainerEmpty(row) +isContainerOpen(row) +toggleOpenClose(row) +</pre> + +<p>Argument <code>afterIndex</code> wykona funkcję <code>hasNextSibling</code> w celu optymalizacji, żeby znaleźć następny element. Na przykład, klient mógłby już wiedzieć gdzie dany element prawdopodobnie mógłby się znajdować. Wyobraź sobie sytuację gdzie wiersz ma pod wiersze, a te pod wiersze maja pochodne wiersze i niektóre z nich są otwarte.</p> + +<h2 id="Przyk.C5.82ad_w.C5.82asnego_hierarchicznego_widoku" name="Przyk.C5.82ad_w.C5.82asnego_hierarchicznego_widoku">Przykład własnego hierarchicznego widoku</h2> + +<p>Zobaczmy na prostym przykładzie, z pobranej tablicy budowane jest drzewo. Przeanalizujmy to kawałek, po kawałku.</p> + +<pre><window onload="init();" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<tree id="elementList" flex="1"> + <treecols> + <treecol id="element" label="Element" primary="true" flex="1"/> + </treecols> + <treechildren/> +</tree> + +</window> +</pre> + +<p>Używamy prostego drzewa bez danych w <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></code>. Funkcja 'init' jest wywoływana, gdy okno jest ładowane w celu uruchomienia drzewa. To w prosty sposób umieszcza własny widok odzyskując drzewo i umieszczeniu własności widoku.</p> + +<pre>function init() { + document.getElementById("elementList").view = treeView; +} +</pre> + +<p>Własny widok drzewa będzie musiał wprowadzić pewna liczbę metod, z których najważniejsze będą sprawdzane indywidualnie. Drzewo to wesprze tylko pojedynczy główny poziom z wewnętrznym pochodnym poziomem, ale może to być dodatkowo rozszerzone bez większych problemów. Najpierw zdefiniujemy dwie struktury do przetrzymywania danych dla drzewa, pierwsza będzie przetrzymywała mapę zawartą między głównym, a pochodną pozycją, a druga tablicę widocznych elementów. Pamiętaj, że własny widok musi posiadać informacje o tym, które są widoczne.</p> + +<pre>var treeView = { + childData : { + Solids: ["Silver", "Gold", "Lead"], + Liquids: ["Mercury"], + Gases: ["Helium", "Nitrogen"] + }, + + visibleData : [ + ["Solids", true, false], + ["Liquids", true, false], + ["Gases", true, false] + ], +</pre> + +<p>Struktura childData zawiera tablicę pochodnych pozycji trzech głównych węzłów. Tablica visibleData zaczyna się tylko trzema widocznymi pozycjami, trzy szczytowe poziomy. Elementy będą dodawane i usuwane z tej tablicy, gdy pozycje będą otwierane i zamykane. Zasadniczo, gdy główny wiersz będzie otwarty, pochodne pozycje zostaną pobrane z childData i wstawione do tablicy <code>visibleData</code>. Na przykład, jeżeli wiersz płynów będzie otwarty, korespondująca tablica chilldData, która zawiera tylko pojedynczy pochodny element <tt>Merkury</tt>, będzie umieszczony w tablicy <code>visibleData</code> za płynami, ale przed gazami. To zwiększy rozmiar tablicy o jeden. Dwie wartości boolean w każdym wierszu w strukturze <code>visibleData</code> wskazują na to czy wiersz jest pojemnikiem i czy jest otwarty. Oczywiście nowo wstawione pochodne pozycje będą miały obie wartości ustawione na false.</p> + +<h3 id="Implementowanie_interfejsu_widoku_drzewa" name="Implementowanie_interfejsu_widoku_drzewa">Implementowanie interfejsu widoku drzewa</h3> + +<p>Następnie potrzeba wprowadzić interfejs widoku drzewa. Najpierw proste funkcje:</p> + +<pre> treeBox: null, + selection: null, + + get rowCount() { return this.visibleData.length; }, + setTree: function(treeBox) { this.treeBox = treeBox; }, + getCellText: function(idx, column) { return this.visibleData[idx][0]; }, + isContainer: function(idx) { return this.visibleData[idx][1]; }, + isContainerOpen: function(idx) { return this.visibleData[idx][2]; }, + isContainerEmpty: function(idx) { return false; }, + isSeparator: function(idx) { return false; }, + isSorted: function() { return false; }, + isEditable: function(idx, column) { return false; }, +</pre> + +<p>Funkcja rowCount zwróci długość tablicy <code>visibleData</code>. Zauważ to, że powinno zwrócić liczbę aktualnie widocznych wierszy, a nie ich całkowitą ilość. Więc na początku trzy pozycje są widoczne i w rowCount powinny być trzy, nawet, jeżeli sześć rzędów jest ukrytych.</p> + +<p>Funkcje <code>getCellText</code>, <code>isContainer</code> i <code>isContainerOpen</code>, zawracają tylko odpowiedni element z tablicy <code>visibleData</code>. W końcu pozostałe funkcje mogą zwrócić wartość <code>false</code> ponieważ nie potrzeba tych cech. Gdybyśmy mieli wiersz, który by nie miał żadnych pochodnych pozycji, chcielibyśmy wprowadzić funkcję <code>isContainerEmpty</code> to zwróciłaby ona wartość <code>true</code> dla tych elementów.</p> + +<pre> getParentIndex: function(idx) { + if (this.isContainer(idx)) return -1; + for (var t = idx - 1; t >= 0 ; t--) { + if (this.isContainer(t)) return t; + } + }, +</pre> + +<p>Funkcją <code>getParentIndex</code> będzie musiała odnaleźć główny przedmiot zadanego indeksu. W naszym prostym przykładzie, mamy tylko dwa poziomy, więc wiemy, że pojemniki nie posiadają głównych elementów, więc otrzymujemy -1. W takim wypadku cofamy się wstecz szukając wiersz będącego pojemnikiem. Następna funkcja jest <code>getLevel</code>:</p> + +<pre> getLevel: function(idx) { + if (this.isContainer(idx)) return 0; + return 1; + }, +</pre> + +<p>Funkcja getLevel jest prosta. Zwraca wartość 0 dla pojemnika, 1 dla nie-pojemnika. Gdybyśmy chcieli dołożyć dodatkowy poziom elementów pochodnych, wiersz te miałyby poziom 2.</p> + +<pre> hasNextSibling: function(idx, after) { + var thisLevel = this.getLevel(idx); + for (var t = idx + 1; t < this.visibleData.length; t++) { + var nextLevel = this.getLevel(t) + if (nextLevel == thisLevel) return true; + else if (nextLevel < thisLevel) return false; + } + }, +</pre> + +<p>Funkcja theNextSibling zwraca true, jeżeli wiersz jest tego samego poziomu, co podany wiersz. Powyższy kod używa metody "brute force", która po prostu powtarzana jest, poszukując jednego wiersza, zwraca wartość true jeżeli wiersz jest tego samego poziomu, false jeżeli niższego poziomu. W tym prostym przykładzie ta metoda działa świetnie, lecz bardziej rozbudowane drzewo lepiej użyć innego, bardziej efektywnego sposobu.</p> + +<h3 id="Otwieranie_i_zamykanie_wiersza" name="Otwieranie_i_zamykanie_wiersza">Otwieranie i zamykanie wiersza</h3> + +<p>Ostatnia funkcja to <code>toggleOpenState</code>, jest najbardziej złożona. Wymaga to modyfikacji tablicy, <code>visibleData</code>, gdy wiersz jest otwarty lub zamknięty.</p> + +<pre> toggleOpenState: function(idx) { + var item = this.visibleData[idx]; + if (!item[1]) return; + + if (item[2]) { + item[2] = false; + + var thisLevel = this.getLevel(idx); + var deletecount = 0; + for (var t = idx + 1; t < this.visibleData.length; t++) { + if (this.getLevel(t) > thisLevel) deletecount++; + else break; + } + if (deletecount) { + this.visibleData.splice(idx + 1, deletecount); + this.treeBox.rowCountChanged(idx + 1, -deletecount); + } + } + else { + item[2] = true; + + var label = this.visibleData[idx][0]; + var toinsert = this.childData[label]; + for (var i = 0; i < toinsert.length; i++) { + this.visibleData.splice(idx + i + 1, 0, [toinsert[i], false]); + } + this.treeBox.rowCountChanged(idx + 1, toinsert.length); + } + }, +</pre> + +<p>Najpierw musimy sprawdzić czy wiersz jest pojemnikiem. Jeżeli nie, funkcja po prostu powróci, ponieważ nie pojemniki nie mogą być otwarte ani zamknięte. Od trzeciej pozycji tablicy (indeks 2) przetrzymywane są informacje czy wiersz jest otwarty czy nie, używamy dwóch ścieżek kodu, pierwszej do zamykania wiersza, a druga do otwierania wiersza. Zbadajmy każdy blok kodu, lecz zerknijmy najpierw na drugi blok służący do otwierania wiersza.</p> + +<pre> item[2] = true; + + var label = this.visibleData[idx][0]; + var toinsert = this.childData[label]; + for (var i = 0; i < toinsert.length; i++) { + this.visibleData.splice(idx + i + 1, 0, [toinsert[i], false]); + } + this.treeBox.rowCountChanged(idx + 1, toinsert.length); +</pre> + +<p>Pierwsza linia czyni w tablicy, wiersz otwartym, więc z stąd funkcja <code>toggleOpenState</code> będzie wiedziała, który wiersz ma być zamknięty. Następnie szukamy danych w <code>childData</code> dla danego wiersza. Wynikiem jest to, że 'toinsert' będzie wypełnione jednym z elementów tablicy, na przykład ["Silver", "Gold", "Lead"], jeżeli wiersz zostanie otwarty. Następnie używamy funkcji, splice tablicy, by wstawić nowy rząd do każdej pozycji. Dla stałych elementów, zostaną wstawione trzy pozycje.</p> + +<p>Używamy funkcji rowCountChanged do poinformowania drzew, że dodaliśmy kilka wierszy do podstawowych danych. Drzewo zostanie przerysowane według potrzeby, a w wyniku pochodne wiersze ukażą się wewnątrz pojemnika. Inne implementowane funkcje powyżej, jak getLevel i isContainer są używane przez drzewo do określenia tego jak wyrysować drzewo.</p> + +<p>Funkcja <code>rowCountChanged</code> pobiera dwa argumenty, indeks gdzie pierwszy wiersz był wstawiony i numer wierszy do wstawienia. W powyższym kodzie, zauważ, że początkowy wiersz określony jest jako ‘idx’ plus jeden, którym będzie pierwsza pochodna pozycja pod główną. Drzewo użyje tej informacji i doda przestrzeń dla odpowiedniej liczy wierszy i umieści je w niej. Upewnij się czy liczba jest prawidłowa, w przeciwnym wypadku drzewo zostanie narysowane niepoprawnie lub spróbuje narysować więcej wierszy niż jest to konieczne.</p> + +<p>Poniższy kod jest używany do usuwania wierszy, gdy wiersz jest zamknięty.</p> + +<pre> item[2] = false; + + var thisLevel = this.getLevel(idx); + var deletecount = 0; + for (var t = idx + 1; t < this.visibleData.length; t++) { + if (this.getLevel(t) > thisLevel) deletecount++; + else break; + } + if (deletecount) { + this.visibleData.splice(idx + 1, deletecount); + this.treeBox.rowCountChanged(idx + 1, -deletecount); + } +</pre> + +<p>Najpierw, element jest zamknięty w tablicy. Następnie będziemy przeszukiwać wiersze, aż natkniemy się na któryś tego samego poziomu. Wszystkie o wyższym poziomie będą musiały być usunięte, lecz wiersz na tym samym poziomie, będzie kolejnym pojemnikiem, który nie powinien być usuniety.</p> + +<p>W końcu używamy funkcji splotu (splice) w celu usunięcia wierszy z tablicy visibleData a wywołania funkcji rowCountChanged żeby przerysować drzewo ponownie. Podczas usuwania wierszy, będziesz musiał dostarczyć odwrotny licznik wierszy do usunięcia.</p> + +<h3 id="Pe.C5.82en_przyk.C5.82ad" name="Pe.C5.82en_przyk.C5.82ad">Pełen przykład</h3> + +<p>Jest tam kilka innych funkcji widoku, które możemy implementować, jednak nie będą one miały nić do wykonania w tym przykładzie. Będą one dodane pod koniec następującego przykładu:</p> + +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> + +<window onload="init();" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<tree id="elementList" flex="1"> + <treecols> + <treecol id="element" label="Element" primary="true" flex="1"/> + </treecols> + <treechildren/> +</tree> + +<script> +<![CDATA[ + +var treeView = { + childData : { + Solids: ["Silver", "Gold", "Lead"], + Liquids: ["Mercury"], + Gases: ["Helium", "Nitrogen"] + }, + + visibleData : [ + ["Solids", true, false], + ["Liquids", true, false], + ["Gases", true, false] + ], + + treeBox: null, + selection: null, + + get rowCount() { return this.visibleData.length; }, + setTree: function(treeBox) { this.treeBox = treeBox; }, + getCellText: function(idx, column) { return this.visibleData[idx][0]; }, + isContainer: function(idx) { return this.visibleData[idx][1]; }, + isContainerOpen: function(idx) { return this.visibleData[idx][2]; }, + isContainerEmpty: function(idx) { return false; }, + isSeparator: function(idx) { return false; }, + isSorted: function() { return false; }, + isEditable: function(idx, column) { return false; }, + + getParentIndex: function(idx) { + if (this.isContainer(idx)) return -1; + for (var t = idx - 1; t >= 0 ; t--) { + if (this.isContainer(t)) return t; + } + }, + getLevel: function(idx) { + if (this.isContainer(idx)) return 0; + return 1; + }, + hasNextSibling: function(idx, after) { + var thisLevel = this.getLevel(idx); + for (var t = idx + 1; t < this.visibleData.length; t++) { + var nextLevel = this.getLevel(t) + if (nextLevel == thisLevel) return true; + else if (nextLevel < thisLevel) return false; + } + }, + toggleOpenState: function(idx) { + var item = this.visibleData[idx]; + if (!item[1]) return; + + if (item[2]) { + item[2] = false; + + var thisLevel = this.getLevel(idx); + var deletecount = 0; + for (var t = idx + 1; t < this.visibleData.length; t++) { + if (this.getLevel(t) > thisLevel) deletecount++; + else break; + } + if (deletecount) { + this.visibleData.splice(idx + 1, deletecount); + this.treeBox.rowCountChanged(idx + 1, -deletecount); + } + } + else { + item[2] = true; + + var label = this.visibleData[idx][0]; + var toinsert = this.childData[label]; + for (var i = 0; i < toinsert.length; i++) { + this.visibleData.splice(idx + i + 1, 0, [toinsert[i], false]); + } + this.treeBox.rowCountChanged(idx + 1, toinsert.length); + } + }, + + getImageSrc: function(idx, column) {}, + getProgressMode : function(idx,column) {}, + getCellValue: function(idx, column) {}, + cycleHeader: function(col, elem) {}, + selectionChanged: function() {}, + cycleCell: function(idx, column) {}, + performAction: function(action) {}, + performActionOnCell: function(action, index, column) {}, + getRowProperties: function(idx, column, prop) {}, + getCellProperties: function(idx, column, prop) {}, + getColumnProperties: function(column, element, prop) {}, +}; + +function init() { + document.getElementById("elementList").view = treeView; +} + +]]></script> + +</window> +</pre> + +<p>Następnie, zobaczymy <a href="pl/Kurs_XUL/Obiekty_pude%c5%82kowe_drzewa">więcej szczegółów o obiekcie pola drzewa</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Własne_widoki_drzewa" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Obiekty_pudełkowe_drzewa">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/trwałe_dane/index.html b/files/pl/mozilla/tech/xul/kurs_xul/trwałe_dane/index.html new file mode 100644 index 0000000000..8c7ba56ce2 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/trwałe_dane/index.html @@ -0,0 +1,54 @@ +--- +title: Trwałe dane +slug: Mozilla/Tech/XUL/Kurs_XUL/Trwałe_dane +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Persistent_Data +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Zaawansowane_reguły" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dodawanie_arkuszy_stylów">Następny »</a></p> +</div> +<p></p><p>Artykuł ten opisuje w jaki sposób zapisać stan okna XUL. +</p> +<h3 id="Stan_pami.C4.99ci" name="Stan_pami.C4.99ci"> Stan pamięci </h3> +<p>Podczas budowy dużej aplikacji, będziemy chcieli posiadać możliwość zapisu niektórych stanów okna poprzez sesje. Na przykład: Okno mogłoby pamiętać, który paski narzędzi są rozwinięte nawet po tym jak użytkownik zamknął okno. </p><p>Jedyną możliwością byłoby wpisanie skryptu do gromadzenia informacji o tym, co chcielibyśmy zapisać i następnie zapisać to w pliku. Jednakże, mogłoby to szkodliwe dla każdej aplikacji. XUL dostarcza dogodnego mechanizmu do zapisu stanu okna. </p><p>Informacje są gromadzone i magazynowane w pliku RDF (localstore.rdf) w tym samym katalogu jak inne ustawienia użytkownika. Będą przetrzymywać informacje o stanie każdego okna. Ta metoda posiada zalety, które współpracują z profilami użytkownika w Mozilli, dzięki czemu każdy użytkownik posiada inne ustawienia. </p><p>XUL pozwala na zapisanie stanu jakiegokolwiek elementu. Zazwyczaj będziemy chcieli zapisać stan pasków narzędzi, pozycję okna i gdzie są lub nie są wyświetlone pewne panele, ale możemy zapisać prawie wszystko. </p> +<h4 id="Atrybut_persist" name="Atrybut_persist"> Atrybut <code>persist</code> </h4> +<p>Aby pozwolić na zapisywanie stanu, w prostu dodajemy atrybut <code>persist</code> do elementu, który podtrzymuje wartości, które chcemy zapisać. Atrybut <code><code id="a-persist"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/persist">persist</a></code></code> powinien być ustawiony jako lista atrybutów elementu (które chcemy, aby zostały zapisane) rozdzielonych spacją. Element musi posiadać także atrybut <code><code id="a-id"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/id">id</a></code></code> w poleceniu do identyfikacji. +</p><p>Na przykład, aby zapisać rozmiar okna, powinniśmy postępować następująco: +</p> +<pre><window + id="someWindow" + width="200" + height="300" + persist="width height" + . + . + . +</pre> +<p>Dwa atrybuty elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code>, czyli <code><code id="a-width"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/width">width</a></code></code> i <code><code id="a-height"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/height">height</a></code></code> zostaną zapisane. Możemy dodać dodatkowe atrybuty poprzez dodanie spacji i nazwy następnego atrybutu do atrybutu <code><code id="a-persist"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/persist">persist</a></code></code>. Atrybut <code><code id="a-persist"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/persist">persist</a></code></code> możemy dodać do jakiegokolwiek elementu oraz magazynować w nim jakiekolwiek atrybuty. Możemy stosować niezwykłych wartości, jeśli porządkujemy atrybuty stosując skrypt. +</p> +<h4 id="Nasz_przyk.C5.82ad:_Znajd.C5.BA_pliki" name="Nasz_przyk.C5.82ad:_Znajd.C5.BA_pliki"> Nasz przykład: <tt>Znajdź pliki</tt> </h4> +<div class="highlight"> +<p>Dodajmy atrybut persist do niektórych elementów w okienku dialogowego <tt>Znajdź pliki</tt>, aby zapisać pozycje okna. Aby to zrobić, potrzebujemy zmodyfikować okno. +</p> +<pre class="eval"><window + id="findfile-window" + title="Find Files" + <span class="highlightred">persist="screenX screenY width height"</span> + orient="horizontal" + xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"> +</pre> +<p>Będzie to powodowało, że pozycja x i y okna oraz długość i szerokość okna zostaną zapisane. Możemy to rozszerzać dalej, aby zapisać rozwinięty stan rozdzielacza. Zapisanie bieżącego stanu karty, tak naprawdę nie ma jednak sensu. +</p><p><span id="Przyk%C5%82ad"><a id="Przyk%C5%82ad"></a><strong>Przykład</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-persist.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-persist.xul">Podgląd</a> +</p> +</div> +<p>Następnie, zobaczymy jak stosuje się <a href="pl/Kurs_XUL/Dodawanie_arkuszy_styl%c3%b3w">arkusze stylów z plikami XUL</a>. +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Zaawansowane_reguły" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dodawanie_arkuszy_stylów">Następny »</a></p> +</div> +<p></p> +<div class="noinclude"> +</div> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/tworzenie_instalatora/index.html b/files/pl/mozilla/tech/xul/kurs_xul/tworzenie_instalatora/index.html new file mode 100644 index 0000000000..c602a24e61 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/tworzenie_instalatora/index.html @@ -0,0 +1,80 @@ +--- +title: Tworzenie instalatora +slug: Mozilla/Tech/XUL/Kurs_XUL/Tworzenie_instalatora +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Creating_an_Installer +--- +<p> </p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Nakładki_dla_wielu_pakietów" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Skrypty_instalacyjne">Następny »</a></p> +</div><p></p> +<p>W tym artykule opisane jest, jak umieścić aplikację XUL w instalatorze.</p> +<h3 id="Paczki_XPInstall" name="Paczki_XPInstall">Paczki XPInstall</h3> +<p>Mozilla dostarcza mechanizm, który może zostać użyty do umieszczenia okien XUL, skryptów, skórek i innych plików w pojedynczych plikach instalatora. Możesz umieścić gdziekolwiek plik instalatora, aby użytkownik mógł go pobrać. Wystarczy prosty skrypt do tego, by paczka została pobrana i zainstalowana. Ten mechanizm nazywa się <a href="pl/XPInstall">XPInstall</a> (Cross Platform Install).</p> +<p>Instalator XPInstall jest spakowany w pliku JAR. Do pliku JAR można dodawać pliki, które mają być zainstalowane. W dodatku instalator powinien być zawarty w skryptach instalacyjnych (plik install.js), używanych w procesie instalacji. Skrypt ma dostęp do różnych funkcji instalacji, które mogą posłużyć do instalacji plików i komponentów.</p> +<p>Pliki instalatora JAR zwykle mają rozszerzenie .xpi (wymawiamy zippy), by odróżnić je od innych archiwów. Zwykle instalatory będą używane do instalacji komponentów Mozilli, takich jak motywy, wtyczki i inne paczki.</p> +<p>Jest kilka następujących po sobie kroków wymaganych do instalacji. Opisane poniżej (krok po kroku):</p> +<ol> + <li>Stwórz stronę WWW, z której użytkownik może pobrać oprogramowanie do instalacji. Strona będzie zawierała wyzwalacz, który jest częścią skryptu, który zainicjuje proces instalacji.</li> + <li>Użytkownik otrzyma okno dialogowe z informacją o tym, jaka paczka będzie instalowana. Może być to użyte do uruchomienia wielu instalatorów. W tym przypadku będą one przedstawione na liście. Użytkownik będzie mógł wybrać między kontynuacją lub anulowaniem instalacji.</li> + <li>Jeżeli użytkownik zdecyduje się na kontynuację, plik XPI jest pobierany. Pasek postępu jest wyświetlany podczas całego procesu.</li> + <li>Plik install.js jest wypakowywany z archiwum skryptu i uruchamiany. Skrypt ten wywoła funkcje instalacyjne, które wskażą, które pliki z archiwum powinny zostać zainstalowane</li> + <li>Gdy skrypt się zakończy, instalacja nowej paczki jest gotowa. W przypadku rozbudowanych paczek skrypty będą uruchamiane kolejno po sobie.</li> +</ol> +<h3 id="Wyzwalacze_instalatora" name="Wyzwalacze_instalatora">Wyzwalacze instalatora</h3> +<p>Jak widać na powyższym przykładzie, proces instalacji jest inicjowany przez umieszczony na stornie wyzwalacz instalatora. To pociąga za sobą użycie specjalnego, globalnego obiektu InstallTrigger. Zawiera pewną liczbę metod, które mogą zostać użyte, by zacząć proces instalacji. Możesz użyć obiektu o lokalnej lub zdalnej zawartości, to znaczy pobieranej z jakiegoś miejsca w sieci.</p> +<p>Stwórzmy przykładowy wyzwalacz instalatora. Pociąga to za sobą użycie funkcji <code>InstallTrigger.install()</code>, która pobiera dwa argumenty, pierwszy to lista paczek do instalacji, a druga jest funkcją wywołania zwrotnego, która będzie wywołana, gdy instalacja dobiegnie końca. Na przykład:</p> +<pre>function doneFn ( name , result ){ + alert("The package " + name + " was installed with a result of " + result); +} + +var xpi = new Object(); +xpi["Calendar"] = "calendar.xpi"; +InstallTrigger.install(xpi,doneFn); +</pre> +<p>Najpierw definiujemy funkcję zwrotną doneFn(), która będzie wywołana, gdy instalacja będzie kompletna. Możesz oczywiście nazwać funkcję, jak ci się podoba. Funkcja ma dwa argumenty. Pierwszy jest nazwą paczki aktualnie zainstalowanej. Jest to istotne, gdy instalujesz wiele składników. Drugi jest kodem wynikowym. Jeżeli ma wartość 0, to znaczy, że instalacja przebiegła pomyślnie. Jeżeli wartość jest inna niż 0, wartość jest kodem błędu. Funkcja doneFn() pokazuje właśnie okienko z alertem.</p> +<p>Następnie tworzymy tablice xpi, która będzie przetrzymywać nazwę (Calendar) i adres URL (calendar.xpi) dla instalatora. Robisz tak samo dla każdej paczki, którą chcesz zainstalować. W końcu wywołujemy funkcję instalacyjną.</p> +<p>Kiedy ta część skryptu zostanie wykonana, calendar.xpi będzie zainstalowane.</p> +<div class="highlight"> + <h4 id="Nasz_przyk.C5.82ad:_Okienko_dialogowe_Znajd.C5.BA_pliki" name="Nasz_przyk.C5.82ad:_Okienko_dialogowe_Znajd.C5.BA_pliki">Nasz przykład: Okienko dialogowe <tt>Znajdź pliki</tt></h4> + <p>Wypróbujmy to z wyszukiwaniem plików:</p> + <pre>function doneFn ( name , result ){ + if (result) alert("An error occured: " + result); +} + +var xpi = new Object(); +xpi["Find Files"] = "findfile.xpi"; +InstallTrigger.install(xpi,doneFn); +</pre> +</div> +<h3 id="Archiwum_XPI" name="Archiwum_XPI">Archiwum XPI</h3> +<div class="note"> + <b>Uwaga</b>: Jeśli chcesz stworzyć nową <a href="pl/XULRunner">aplikację XULRunner</a>, <a href="pl/Rozszerzenia">rozszerzenie</a> lub <a href="pl/Motywy">motyw</a>, zobacz <a href="pl/Paczki">Paczki</a>.</div> +<p>Plik instalatora XPI jest konieczny, by zawrzeć plik zwany install.js, który jest plikiem <a href="pl/JavaScript">JavaScript</a>, wykonywanym podczas instalacji. Pozostałe pliki są plikami do instalacji. Zwykle te pliki umieszczone są w katalogu, wewnątrz archiwum, ale niekoniecznie. Dla plików chrome może mieć strukturę podobną do katalog chrome.</p> +<p>Często tylko pliki umieszczone w archiwum XPI zostaną zainstalowane, a będą to skrypty instalacji (install.js) i pliki JAR. JAR przechowuje pliki używane przez twoja aplikację. Komponenty dostarczone wraz z Mozillą są przechowywane w ten sam sposób.</p> +<p>Ponieważ plik XPI jest specjalnym plikiem ZIP, możemy tworzyć i dodawać pliki do niego używając do tego programów archiwizujących.</p> +<div class="highlight"> + <h4 id="Nasz_przyk.C5.82ad:_Okienko_dialogowe_Znajd.C5.BA_pliki_2" name="Nasz_przyk.C5.82ad:_Okienko_dialogowe_Znajd.C5.BA_pliki_2">Nasz przykład: Okienko dialogowe <tt>Znajdź pliki</tt></h4> + <p>Dla okienka dialogowego <tt>Znajdź pliki</tt> stworzymy strukturę w archiwum następująco:</p> + <pre>install.js +findfile + content + contents.rdf + findfile.xul + findfile.js + skin + contents.rdf + findfile.css + locale + contents.rdf + findfile.dtd +</pre> +</div> +<p>Katalog został dodany dla każdego części paczki, z zawartością, motywów i lokalizacji. Plik contents.rdf posiada także ten dodatek, ponieważ będzie potrzebny do rejestracji plików chrome.</p> +<p>Następne spojrzenie w przyszłość z <a href="pl/Kurs_XUL/Skrypty_instalacyjne">zainstalowanymi skryptami</a>.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Nakładki_dla_wielu_pakietów" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Skrypty_instalacyjne">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/tworzenie_kreatora/index.html b/files/pl/mozilla/tech/xul/kurs_xul/tworzenie_kreatora/index.html new file mode 100644 index 0000000000..1fef2adb08 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/tworzenie_kreatora/index.html @@ -0,0 +1,143 @@ +--- +title: Tworzenie kreatora +slug: Mozilla/Tech/XUL/Kurs_XUL/Tworzenie_kreatora +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Creating_a_Wizard +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Okna_otwierania_i_zapisywania_plików" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dodatkowe_możliwości_kreatorów">Następny »</a></p> +</div><p></p> + +<p>Wiele aplikacji używa kreatorów aby pomóc użytkownikowi przejść złożone zadania. XUL dostarcza łatwego sposobu na tworzenie kreatorów</p> + +<h2 id="Kreator" name="Kreator">Kreator</h2> + +<p>Kreator jest specjalnym typem okna dialogowego, które zawiera kilka stron. Na dole tego okna dialogowego pojawiają się przyciski nawigacyjne do przełączania między stronami. Kreatory są zazwyczaj używane do pomocy użytkownikom przy wykonywaniu złożonych zadań. Każda strona zawiera pojedyncze pytanie lub zbiór powiązanych pytań. Po ostatniej stronie jest wykonywane działanie XUL dostarcza elementu wizard który może być użyty do stworzenia kreatora.</p> + +<p>Zawartość wewnątrz elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/wizard" title="wizard">wizard</a></code></code> obejmuje całą zawartość każdej strony kreatora. Atrybutu umieszczone w <code><code><a href="/pl/docs/Mozilla/Tech/XUL/wizard" title="wizard">wizard</a></code></code> są używane do sterowania nawigacją kreatora. Kiedy tworzymy kreator, użyjemy znacznika <code><code><a href="/pl/docs/Mozilla/Tech/XUL/wizard" title="wizard">wizard</a></code></code> zamiast znacznika <code><code><a href="/pl/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code>.</p> + +<p><em>Zauważ, że kreatory obecnie pracują poprawnie z chrom URL.</em></p> + +<div class="note">Note that wizards currently only work properly from chrome URLs.</div> + +<p>Kreator składa się składa się z kilku sekcji, chociaż dokładny rozkład będzie różny dla każdej platformy. Kreator będzie generalnie wyświetlany jak te na platformie użytkownika. Typowy rozkład będzie obejmował tytuł na górze, zbiór przycisków nawigacyjnych na dole i zawartość strony po środku.</p> + +<p>Tytuł u góry jest stworzony przy zastosowaniu atrybutu <code><code id="a-title"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/title">title</a></code></code>, podobnie jak robi się to w zwykłym oknie. Przyciski nawigacyjne są tworzone automatycznie. Strony kreatora są tworzone przy użyciu elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/wizardpage" title="wizardpage">wizardpage</a></code></code>. Możesz umieścić jakąkolwiek zawartość jaką chcesz wewnątrz każdego <code><code><a href="/pl/docs/Mozilla/Tech/XUL/wizardpage" title="wizardpage">wizardpage</a></code></code>.</p> + +<h3 id="Przyk.C5.82ad_kreatora" name="Przyk.C5.82ad_kreatora">Przykład kreatora</h3> + +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_wizard_1.xul.txt">Źródła</a></p> + +<pre><?xml version="1.0"?> + +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> + +<wizard id="example-window" title="Select a Dog Wizard" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + + <wizardpage> + <description> + This wizard will help you select the type of dog that is best for you." + </description> + <label value="Why do you want a dog?"/> + <menulist> + <menupopup> + <menuitem label="To scare people away"/> + <menuitem label="To get rid of a cat"/> + <menuitem label="I need a best friend"/> + </menupopup> + </menulist> + </wizardpage> + + <wizardpage description="Dog Details"> + <label value="Provide additional details about the dog you would like:"/> + <radiogroup> + <caption label="Size"/> + <radio value="small" label="Small"/> + <radio value="large" label="Large"/> + </radiogroup> + <radiogroup> + <caption label="Gender"/> + <radio value="male" label="Male"/> + <radio value="female" label="Female"/> + </radiogroup> + </wizardpage> + +</wizard> +</pre> + +<div class="float-right"><img alt="grafika:wizard1.jpg"></div> + +<p>Ten kreator ma dwie strony, jedną z menu rozwijanym i drugą ze zbiorem przycisków opcji. Kreator będzie sformatowany automatycznie, z tytułem na górze i zbiorem przycisków na dole. Użytkownik może nawigować pomiędzy stronami kreatora przyciskami Wstecz oraz Dalej. Przyciski te włączają się i wyłączają same w odpowiedniej chwili. Dodatkowo na ostatniej stronie pojawia się przycisk Zakończ. Wszystko to jest automatyczne, więc nie musisz robić niczego aby manipulować stronami.</p> + +<p>Atrybut <code><code id="a-description"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/description">description</a></code></code> może opcjonalnie umieścić element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/wizardpage" title="wizardpage">wizardpage</a></code></code> dostarczający podnagłówków dla tej strony. W powyższym przykładzie będzie umieszczony na drugiej stronie, ale nie na pierwszej.</p> + +<h2 id="Obs.C5.82uga_zmian_strony" name="Obs.C5.82uga_zmian_strony">Obsługa zmian strony</h2> + +<p>Generalnie chcesz zrobić coś po tym jak naciśniesz przycisk Zakończ. Możesz ustawić atrybut <code>onwizardfinish</code> w elemencie <code><code><a href="/pl/docs/Mozilla/Tech/XUL/wizard" title="wizard">wizard</a></code></code> aby to wykonać. Ustaw go w skrypcie który wykonuje jakieś zadanie jakie chcesz a potem zwraca prawdę. Ten skrypt może być używany do zapisania informacji, jaką użytkownik wprowadził podczas pracy z kreatorem.</p> + +<pre><wizard id="example-window" title="Select a Dog Wizard" + onwizardfinish="return saveDogInfo();" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> +</pre> + +<p>Kiedy użytkownik nacisnął przycisk Zakończ, będzie wywołana funkcja <code>saveDogInfo()</code>, będąca zdefiniowaną w pliku skryptu zapisującym informację jaka została wprowadzona. Jeśli funkcja zwraca <code>true</code>, kreator zostanie zamknięty. Jeśli zwróci <code>false</code>, wtedy kreator się nie zamknie, co może wystąpić, jeśli funkcja <code>saveDogInfo()</code> napotka niepoprawną daną wejściową, na przykład.</p> + +<p>Są również powiązane atrybuty <code><code id="a-onwizardback"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/onwizardback">onwizardback</a></code></code>, <code><code id="a-onwizardnext"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/onwizardnext">onwizardnext</a></code></code> i <code><code id="a-onwizardcancel"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/onwizardcancel">onwizardcancel</a></code></code>, które są wywoływane, kiedy są naciśnięte przyciski Wstecz, Dalej i Anuluj. Te funkcje są wywoływane bez względu na to jaka strona jest aktualnie wyświetlana.</p> + +<p>Aby mieć różny kod wywoływany w zależności od strony na jakiej jesteś, użyj atrybutów <code><code id="a-onpagerewound"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/onpagerewound">onpagerewound</a></code></code> lub <code><code id="a-onpageadvanced"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/onpageadvanced">onpageadvanced</a></code></code> w elemencie <code><code><a href="/pl/docs/Mozilla/Tech/XUL/wizardpage" title="wizardpage">wizardpage</a></code></code>. Pracują one podobnie do innych funkcji z wyjątkiem tego, że możesz użyć różnego kodu dla każdej strony. Pozwala Ci to sprawdzenie poprawności wprowadzonych danych wejściowych zanim użytkownik będzie kontynuował.</p> + +<p>Trzecią metodą jest zastosowanie atrybutów <code><code id="a-onpagehide"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/onpagehide">onpagehide</a></code></code> i <code><code id="a-onpageshow"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/onpageshow">onpageshow</a></code></code> w elemencie <code><code><a href="/pl/docs/Mozilla/Tech/XUL/wizardpage" title="wizardpage">wizardpage</a></code></code>. Będą one wywoływane kiedy strona jest ukrywana lub pokazywana bez względu na to jaki przycisk naciśnięto (z wyjątkiem, kiedy naciśnięto przycisk Anuluj -- musisz użyć <code><code id="a-onwizardcancel"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/onwizardcancel">onwizardcancel</a></code></code>, aby to sprawdzić).</p> + +<p>Te trzy metody powinny dostarczyć dosyć elastyczności dla obsługi nawigacji jakiej potrzebujemy. Poniżej mamy podsumowanie funkcji atrybutów, które są wywoływane, kiedy użytkownik naciśnie Dalej, w porządku, w jakim będą sprawdzane. Jeśli tylko jedna zwróci <code>false</code>, nawigacja zostaje przerwana.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Atrybuty</th> + <th>Miejsce na znacznik</th> + <th>Moment wywoływana</th> + </tr> + <tr> + <td>pagehide</td> + <td>wizardpage</td> + <td>Wywoływana na stronie, którą użytkownik opuszcza.</td> + </tr> + <tr> + <td>pageadvanced</td> + <td>wizardpage</td> + <td>Wywoływana na stronie opuszczonej przez użytkownika.</td> + </tr> + <tr> + <td>wizardnext</td> + <td>wizard</td> + <td>Wywoływana w kreatorze.</td> + </tr> + <tr> + <td>pageshow</td> + <td>wizardpage</td> + <td>Wywoływana na stronie, którą użytkownik wpisał.</td> + </tr> + </tbody> +</table> + +<p>Podobny proces wystąpi dla przycisku Wstecz.</p> + +<div class="note">Próbując kiedykolwiek użyć w funkcji zdarzenia, takiej jak pageadvanced, powinniśmy zastosować: +<p><code>return funcName()</code> zamiast samego wywołania <code>funcName()</code><br> + Nie będzie to działało jak oczekiwano np.</p> + +<pre class="eval"> <wizardpage pageadvanced='return funcName()'></wizardpage></code> +</pre> +</div> + +<p>W kolejnym artykule, zobaczymy kilka <a href="pl/Kurs_XUL/Dodatkowe_mo%c5%bcliwo%c5%9bci_kreator%c3%b3w">dodatkowych możliwości kreatorów</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Okna_otwierania_i_zapisywania_plików" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dodatkowe_możliwości_kreatorów">Następny »</a></p> +</div><p></p> + +<p> </p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/tworzenie_motywów/index.html b/files/pl/mozilla/tech/xul/kurs_xul/tworzenie_motywów/index.html new file mode 100644 index 0000000000..437aeb8f98 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/tworzenie_motywów/index.html @@ -0,0 +1,171 @@ +--- +title: Tworzenie motywów +slug: Mozilla/Tech/XUL/Kurs_XUL/Tworzenie_motywów +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Creating_a_Skin +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Modyfikacja_domyślnego_motywu" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Lokalizacja">Następny »</a></p> +</div><p></p> + +<p>Artykuł opisuje jak utworzyć prosty motyw. Dla prostoty, tylko zastosujemy to do okna dialogowego <code>Znajdź pliki</code>.</p> + +<h2 id="Proste_motywy" name="Proste_motywy">Proste motywy</h2> + +<div class="float-right"><img alt="Grafika:cskin1.jpg"></div> + +<p>Obrazek poniżej ukazuje aktualne okno dialogowe Znajdź pliki. Utworzymy motyw, który będziemy mogli dodać do niego. Normalnie, motyw znalazłaby zastosowanie do całej aplikacji, ale my się tylko skupimy na oknie dialogowym Znajdź pliki, aby nasza praca stała się łatwiejsza. Z tego powodu, zmienimy tylko plik findfile.css</code> a nie cały plik <tt>global.css. Rozdział ten zaczynamy posiadając klasyczny motyw. Powinieneś wykonać kopię zapasową plików użytych w oknie dialogowym Znajdź pliki, zanim zaczniesz je edytować.</p> + +<p>Będziesz potrzebować do utworzenia motywu pliku findfile.css z ustawionymi danymi motywu podstawowego. Możesz tymczasowo umieścić te wartości w katalogu i zdefiniować go używając dyrektywy w pliku stylów kaskadowych. Możesz modyfikować istniejący plik findfile.css i natychmiast zobaczyć jak wygląda on zmieniony, lub możesz utworzyć zwykły motyw i podać ścieżkę do niego. Aby utworzyć motyw, musisz wykonać:</p> + +<ol> + <li>Utworzyć katalog, gdzie kolwiek będziesz chciał umieścić pliki motywu.</li> + <li>Skopiuj listę plików (condents.rdf) z klasycznej lub nowoczesnego motywu do nowego katalogu.</li> + <li>Zmodyfikuj wzmianki w pliku listy, ze zwykłego motywu do twojego motywu. Na przykład, zmień wzmiankę 'classic/1.0' na 'blueswayedshoes/1.0'.</li> + <li>Dodaj linię do pliku 'chrom/installed-chrom.txt z następującymi zmianami:<br> + <code><a class="external" href="skin,install,url,file:///stuff/blueswayedshoes/" rel="freelink">skin,install,url,file:///stuff/blueswayedshoes/</a></code><br> + gdzie ostatnia para wskazuje do twojego nowo utworzonego katalogu. Upewnij się czy dodałeś slash na końcu ścieżki.</li> +</ol> + +<p>Skopiuj oryginalny plik findfile.css do nowego katalogu. Użyjemy go jako bazy dla nowego motywu. Potem możemy kierować do niego używając URL <code>'<a class="external" rel="freelink">chrome://findfile/skin/findfile.css</a>'</code>. Po pierwsze, zdecydujmy, jaki rodzaj zmian chcemy wprowadzić. My zrobimy prostą zmianę kolorów, zmodyfikujemy style przycisków, i zmodyfikujemy trochę rozmieszczenie. Zacznijmy od menu, paska narzędzi i powłoki tabulacji.</p> + +<p>Następne reguły stylu dodawane do pliku findfile.css będą powodować zmiany w wyświetlaniu załączonego obrazu.</p> + +<pre>window > box { + background-color: #0088CC; +} + +menubar,menupopup,toolbar,tabpanels { + background-color: lightblue; + border-top: 1px solid white; + border-bottom: 1px solid #666666; + border-left: 1px solid white; + border-right: 1px solid #666666; +} + +caption { + background-color: lightblue; +} +</pre> + +<div class="float-right"><img alt="Grafika:Cskin2.jpg"></div> + +<p>Wewnętrzne okno pudełka, (który aktualnie otacza całą zawartość okna) zostało zmienione na kolor średnio-niebieski. Możesz zobaczyć ten niebieski, pomiędzy pasem kart i u samego dołu okna. Cztery elementy <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code></code>, <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code>, <code><code><a href="/pl/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code></code> i <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tabpanels" title="tabpanels">tabpanels</a></code></code> są koloru jasno niebieskiego. Obramowanie wokół tych czterech elementów zostało zmienione na cięższy widok 3D. Możesz zobaczyć, jeśli przyjrzysz się bliżej. Tło <code><code><a href="/pl/docs/Mozilla/Tech/XUL/caption" title="caption">caption</a></code></code> po zmianie jest bardziej ciemne.</p> + +<p>Pierwsza reguła powyżej (dla 'window > box') określa, że potomek-dziecko box, okna posiada inny kolor. Prawdopodobnie nie jest to dobre rozwiązanie w tym przypadku. Powinniśmy naprawdę zmienić użyte tutaj klasy stylu. Zróbmy to. Idąc tą drogą, możemy zmodyfikować XUL bez potrzeby trzymania pudełka jako pierwszego potomka okna.</p> + +<pre class="eval">.findfilesbox { + background-color: #0088CC; +} + +<strong>XUL:</strong> + +<vbox <span class="highlightred">class="findfilesbox"</span> orient="vertical" flex="100%"> +<toolbox> +</pre> + +<p>Następnie, zmodyfikujmy karty. Zrobimy zaznaczone kartę, pogrubimy i zmienimy zaokrąglenia na nich.</p> + +<pre>tab:first-child { + -moz-border-radius: 4px 0px 0px 0px; +} + +tab:last-child { + -moz-border-radius: 0px 4px 0px 0px; +} + +tab[selected="true"] { + color: #000066; + font-weight: bold; + text-decoration: underline; +} +</pre> + +<div class="float-right"><img alt="Grafika:Cskin3.jpg"></div> + +<p>Druga reguła zmienia wygląd normalnej karty, pierwsze ustawienia zaokrąglenia pierwszej karty i ustawienia drugiej zaokrągla, gdyż jest to ostatnia karta. Użyte tutaj są specjalne reguły stylów Mozilli, <code><a href="pl/CSS/-moz-border-radius">-moz-border-radius</a></code>, które tworzą zaokrąglone obramowanie rogów. Górne lewe obramowanie pierwszej karty i górne prawe obramowanie drugiej karty, są zaokrąglone czterema pikselami i pozostałe rogi mają również wartość równą zero pikseli, które są równoważne nie zaokrąglaniu. Powiększenie wartości tutaj powodują większe zaokrąglenie i zmniejszają widok ich jako prostokątnych.</p> + +<p>Ostatnia reguła nakłada tylko kartę, że posiadają atrybut <code><code id="a-selected"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/selected">selected</a></code></code> ustawiony na <code>true</code>. To stwarza tekst w zaznaczonej karcie jako pogrubiony, podkreślony i koloru ciemno niebieskiego. Uwaga, w obrazku w tym przykładzie styl ten został zastosowany tylko do pierwszej karty, ponieważ jest zaznaczony jako jedyny.</p> + +<p>Przyciski paska narzędzi z menu commands poniekąd są trudne do wyróżnienia. Dodamy kilka ikon do przycisków robiąc je bardziej przejrzystymi. Mozilla Compresor dostarcza ikony przycisków Otwórz i Zapisz, które będą użyte tutaj do zapisania czasu. Potrafimy ustawić obrazek dla przycisku poprzez właściwość CSS <code><a href="pl/CSS/list-style-image">list-style-image</a></code>.</p> + +<pre>#opensearch { + list-style-image: url("chrome://editor/skin/icons/btn1.gif"); + -moz-image-region: rect(48px 16px 64px 0); + -moz-box-orient: vertical; +} + +#savesearch { + list-style-image: url("chrome://editor/skin/icons/btn1.gif"); + -moz-image-region: rect(80px 16px 96px 0); + -moz-box-orient: vertical; +} +</pre> + +<div class="float-right"><img alt="Grafika:Cskin4.jpg"></div> + +<p>Mozilla dostarcza własności zwykłych stylów <code><a href="pl/CSS/-moz-image-region">-moz-image-region</a></code>, które potrafi zostać użyte do zrobienia części elementu obrazka. Możesz myśleć o tym , jako, że jest to spięty region obrazka. Ustawiasz właściwości pozycji i rozmiaru obrazka i przycisk będzie wyświetli tylko ten kawałek obrazka. Uznane to zostaje jako ten sam obrazek dla wielokrotnego przycisków i ustawia inne regiony dla każdego. Kiedy masz kilka przycisków, ze statusem najechany, aktywny i wyłączony, to zachowuje miejsce, które normalnie jest okupowane przez wielokrotne obrazki. W kodzie powyżej, używamy tego samego obrazka dla każdego przycisku, ale ustawiamy inne regiony dla każdego jednego. Jeśli widzisz ten obrazek (btn1.gif), powinieneś spostrzec, że stanowi to kratkę z małymi obrazkami, każdy jeden o wymiarach 16 na 16 pikseli.</p> + +<p><br> + Własność <code><a href="pl/CSS/-moz-box-orient">-moz-box-orient</a></code> jest użyta do orientacji pionowej przycisku, więc obrazek ten stanowi powyższą etykietę. Ta cecha ma te same znaczenie jako atrybut <code><code id="a-orient"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/orient">orient</a></code></code> . To jest wygodne, ponieważ motyw nie zmieni XUL-a. Wiele atrybutów box ma właściwość korespondencji.</p> + +<p>Następnie, zrobimy kilka zmian dotyczących przycisków znajdujących się wzdłuż dołu, ponownie użyjemy kilku ikon z Mozilli do zapisania w czasie. Jeśli tworzysz swój własny motyw, będziesz potrzebować nowych ikon lub skopiuj ikony nowych plików. Jeśli pójdziemy za przykładem w tym rozdziale, to tylko kopia plików do Twojej nowego motywu i odpowiednia zmiana URL-a.</p> + +<pre>#find-button { + list-style-image: url("chrome://global/skin/checkbox/images/cbox-check.jpg"); + font-weight: bold; +} + +#cancel-button { + list-style-image: url("chrome://global/skin/icons/images/close-button.jpg"); +} + +button:hover { + color: #000066; +} +</pre> + +<p> </p> + +<div class="float-right"><img alt="Grafika:Cskin5.jpg"></div> + +<p>Dodamy obrazki do przycisków i zrobimy przycisk <strong>Znajdź</strong>, który będzie posiadał pogrubiony tekst wskazujący, że jest to przycisk domyślny. Ostatnia zasada nakłada na przycisk zasadę, że jeśli kursor myszy ma się zmieniać nad przyciskiem. Ustawiamy kolor tekstu na ciemny niebieski w tym przypadku. Na koniec, kilka mniejszych zmian w rozmieszczeniu w oknie znajdujących się tam rzeczy, poprzez ustawienie marginesów:</p> + +<div class="float-right"><img alt="Grafika:cskin-fin.jpg"></div> + +<pre>tabbox { + margin: 4px; +} + +toolbarbutton { + margin-left: 3px; + margin-right: 3px; +} +</pre> + +<p>Po tych zmianach, okno dialogowe Znajdź pliki będzie wyglądało w następujący sposób.</p> + +<p>Jak możesz zauważyć, proste zmiany w regułach stylu dały rezultat całkiem innego wyglądu okna dialogowego Znajdź pliki. Możemy kontynuować poprzez zmianę menu, chwytając pasek narzędzi i położenie elementu pola wyboru.</p> + +<h2 id="Tworzenie_globalnego_motywu" name="Tworzenie_globalnego_motywu">Tworzenie globalnego motywu</h2> + +<p>Stworzony motyw powyżej, jest prosty i tylko zastosowanie do okna dialogowego Znajdź pliki. Niektóre zmiany zrobione dla motywu, powinny być umieszczone w pliku globalnych arkuszach stylów (w globalnym katalogu skórek) dla zastosowania we wszystkich aplikacjach. Na przykład, posiadanie innych obrazków dla sprawdzenia pudełka w oknie dialogowym Znajdź pliki, jako inny wygląd okna to trochę dziwaczne. Ta zmiana powinna naprawdę zostać przeniesiona do arkusza stylów globalnych.</p> + +<p>Spróbuj przenieść style CSS z pliku findfile.css do pliku global.css i następnie spójrz na niektóre okna dialogowe w Mozilli (Widok cookie jest dobrym przykładem). Zostaniesz powiadomiony, że posiada adoptowane reguły te, co dodałeś. Niektóre reguły popadają w konflikt miedzy sobą w plikach stylów. Na przykład, reguły już zdefiniowane dla przycisków, kart i inne zdefiniowane dodatkowe reguły dla nich. Kiedy zmieniasz skórę global, możesz potrzebować scalenia zmian do istniejących reguł.</p> + +<p>Do najlepszych zdolności skórki, to jest deklaracja wyglądu bliskich zasad stylów w katalogu globalnym, raczej niż w indywidualnym pliku stylów. Zawiera on kolory, czcionki i rozmiary wyglądu. Jeśli zmienisz kolor lub coś w lokalnym pliku skóry (takim jak findfile.css), okno dialogowe może wyglądać dziwacznie jeśli użytkownik zmieni swoją skórę globalną. Nie wyklucza to użytkownikowi używania jednej domyślnej.</p> + +<div class="highlight"> +<p>Przykład Znajdź pliki wraz z motywem <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-cskin.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-cskin.xul">View</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-cskin.css">Stylesheet</a></p> +</div> + +<p><small>Zobacz także: <a href="pl/Dokumentacja_CSS/Rozszerzenia_Mozilli">Rozszerzenia CSS Mozilli</a> i <a href="pl/Dokumentacja_CSS">Dokumentacja CSS</a></small></p> + +<p>W następnym temacie przedstawiamy dyskusje, <a href="pl/Kurs_XUL/Lokalizacja">jak zrobić lokalizację aplikacji XUL</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Modyfikacja_domyślnego_motywu" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Lokalizacja">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/tworzenie_okien_dialogowych/index.html b/files/pl/mozilla/tech/xul/kurs_xul/tworzenie_okien_dialogowych/index.html new file mode 100644 index 0000000000..7cea315024 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/tworzenie_okien_dialogowych/index.html @@ -0,0 +1,151 @@ +--- +title: Tworzenie okien dialogowych +slug: Mozilla/Tech/XUL/Kurs_XUL/Tworzenie_okien_dialogowych +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Creating_Dialogs +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Możliwości_okna" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Okna_otwierania_i_zapisywania_plików">Następny »</a></p> +</div><p></p> + +<p>Aplikacja XUL często wymaga wyświetlania okien dialogowych. Ten artykuł opisuje jak takie okna skonstruować.</p> + +<h2 id="Tworzenie_okien_dialogowych" name="Tworzenie_okien_dialogowych">Tworzenie okien dialogowych</h2> + +<p>Funkcja <code><a href="pl/DOM/window.openDialog">openDialog()</a></code> stosowana jest do otwarcia okna dialogowego. Podobną funkcją jest <code><a href="pl/DOM/window.open">open()</a></code>. Różni się jednak pod kilkoma względami. Wyświetli okno, a nie okno dialogowe, z czego wynika, że oczekujemy jakiejś akcji użytkownika. Okno to może mieć subtelne różnice w sposobie pracy i w postrzeganiu je przez użytkownika. Te różnice wynikają z platformy, na której pracujemy.</p> + +<p>W dodatku funkcja <code>openDialog()</code> może wymagać dodatkowych argumentów, poza trzema opisanymi wcześniej. Te argumenty są przesyłane do okienka dialogowego i umieszczane w obszarze przechowywanym we właściwościach argumentów nowego okna. Można przesłać tyle argumentów, ile jest potrzebne. Jest to bardzo wygodny sposób dostarczania wartości domyślnych do pól w oknie dialogowym.</p> + +<pre>var somefile=document.getElementById('enterfile').value; + +window.openDialog("chrome://findfile/content/showdetails.xul","showmore", + "chrome",somefile); +</pre> + +<p>W tym przykładzie zostanie wyświetlone okno dialogowe showdetails.xul. Przesłany mu będzie jeden argument <code>somefile</code> wzięty z wartości elementu o id <code>enterfile</code>. W skrypcie używanym przez to okienko dialogowe, możemy się odwołać do tego argumentu używając własności <code>arguments</code> okna. Na przykład:</p> + +<pre>var fl = window.arguments[0]; + +document.getElementById('thefile').value = fl; +</pre> + +<p>Jest to bardzo efektywny sposób przekazywania wartości nowemu oknu. Można przesłać wartości z otwartego okna do oryginalnego na dwa sposoby. Po pierwsze można użyć własności <code><a href="pl/DOM/window.opener">window.opener</a></code>, która pozostawia okno, z którego otwarto dialog. Po drugie można przesłać funkcję lub obiekt jako jeden z argumentów, a potem odwołać się do tej funkcji lub zmodyfikować obiekt w otwartym dialogu.</p> + +<div class="note"> +<p><strong>Uwaga</strong>: <code>openDialog()</code> żąda przywileju UniversalBrowserWrite. To znaczy, że to nie będzie działało na zdalnej stronie; dlatego stosuj w zamian <code>window.open()</code>.</p> +</div> + +<h2 id="Element_okna_dialogowego" name="Element_okna_dialogowego">Element okna dialogowego</h2> + +<p>Element okna dialogowego powinien być używany zamiast elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code>, podczas tworzenia <code><code><a href="/pl/docs/Mozilla/Tech/XUL/dialog" title="dialog">dialog</a></code></code>. Zapewnia to użyteczną możliwość stworzenia nawet do czterech przycisków w dole okienka dialogowego na polecenia takie jak 'OK', 'Anuluj' itd. Nie musisz zamieszczać XUL-a dla każdego <code><a href="/pl/docs/Mozilla/Tech/XUL/button" title="button">button</a></code>, ale musisz pamiętać o kodzie, który wygeneruje odpowiednią akcję, gdy użytkownik naciśnie dany przycisk. Ta procedura jest niezbędna, ponieważ różne platformy mają odpowiednią dla siebie kolejność, w której pojawiają się te przyciski.</p> + +<h3 id="Przyk.C5.82ad_okienka_dialogowego" name="Przyk.C5.82ad_okienka_dialogowego">Przykład okienka dialogowego</h3> + +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_dialogs_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dialogs_1.xul">Podgląd</a></p> + +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> + +<dialog id="donothing" title="Przykład okienka dialogowego" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + buttons="accept,cancel" + ondialogaccept="return doOK();" + ondialogcancel="return doCancel();"> + +<script> +function doOK(){ + alert("Nacisnąłeś OK!"); + return true; +} + +function doCancel(){ + alert("Nacisnąłeś Cancel!"); + return true; +} +</script> + +<description value="Zaznacz przycisk"/> + +</dialog> +</pre> + +<p>W oknie dialogowym możesz umieszczać elementy jakie tylko chcesz. Element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/dialog" title="dialog">dialog</a></code></code> ma kilka dodatkowych możliwości, których nie posiadają elementy okien. Atrybut <code><code id="a-buttons"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/buttons">buttons</a></code></code> jest używany w celu zdefiniowania, które przyciski mają się pojawić w oknie dialogowym. Następujące wartości mogą być użyte, gdy zostaną oddzielone przecinkami:</p> + +<ul> + <li><code>accept</code> - przycisk OK</li> + <li><code>cancel</code> - przycisk Anuluj</li> + <li><code>help</code> - przycisk Pomoc</li> + <li><code>disclosure</code> - przycisk szczegółów, służący do wyświetlania dodatkowych informacji</li> +</ul> + +<p>Możemy ustawić kod do wykonania po naciśnięciu jakiegoś przycisku, za pomocą atrybutów <code><code id="a-ondialogaccept"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/ondialogaccept">ondialogaccept</a></code></code>, <code><code id="a-ondialogcancel"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/ondialogcancel">ondialogcancel</a></code></code>, <code><code id="a-ondialoghelp"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/ondialoghelp">ondialoghelp</a></code></code> i <code><code id="a-ondialogdisclosure"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/ondialogdisclosure">ondialogdisclosure</a></code></code>. Jeśli wypróbujesz powyższy przykład, odkryjesz, że funkcja do <code>doOK()</code> jest wywoływana, gdy przycisk 'OK' został wciśnięty, a funkcja <code>doCancel()</code>, gdy wciśnięty został przycisk 'Anuluj'.</p> + +<p>Te dwie funkcje <code>doOK()</code> i <code>doCancel()</code> - zwracają <code>true</code>, co oznacza, że okno dialogowe musi zostać zamknięte. Jeśli zwrócone byłoby <code>false</code>, to okno dialogowe pozostałoby otwarte. Jest to używane w przypadku wpisania błędnej wartości w pole w oknie dialogowym.</p> + +<p>Użytecznymi atrybutami między innymi są:</p> + +<ul> + <li><code><code id="a-buttonlabelaccept"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/buttonlabelaccept">buttonlabelaccept</a></code></code> - etykieta pokazująca się na przycisku akceptacji np.<em>Zapisz</em></li> + <li><code><code id="a-buttonaccesskeyaccept"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/buttonaccesskeyaccept">buttonaccesskeyaccept</a></code></code> - skrót klawiaturowy do zastosowania dla przycisku akceptującego np.<em>Z</em></li> + <li><code><code id="a-defaultButton"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/defaultButton">defaultButton</a></code></code> - przycisk jest aktywny, kiedy naciśnięty zostanie klawisz Enter</li> +</ul> + +<div class="note"> +<p><strong>Uwaga:</strong> Atrybuty etykiety są żądane przez zdalne strony i prawdopodobnie zapomniano o tym w powyższych przykładach due to <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=224996" title="<dialog> buttons have no label in remote XUL">błąd 224996</a>.</p> +</div> + +<h3 id="Przyk.C5.82adowe_okno_dialogowe_wraz_z_dodatkowymi_mo.C5.BCliwo.C5.9Bciami" name="Przyk.C5.82adowe_okno_dialogowe_wraz_z_dodatkowymi_mo.C5.BCliwo.C5.9Bciami">Przykładowe okno dialogowe wraz z dodatkowymi możliwościami</h3> + +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> + +<dialog id="myDialog" title="Moje okienko" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + onload="window.sizeToContent();" + buttons="accept,cancel" + buttonlabelaccept="Ustaw ulubione" + buttonaccesskeyaccept="U" + ondialogaccept="return doSave();" + buttonlabelcancel="Anuluj" + buttonaccesskeycancel="n" + ondialogcancel="return doCancel();"> + +<script> +function doSave(){ + //doSomething() + return true; +} +function doCancel(){ + return true; +} +</script> + +<dialogheader title="Moje okienko dialogowe" description="Przykładowe okno"/> +<groupbox flex="1"> + <caption label="Wybierz ulubiony owoc"/> + <radio id="orange" label="Oranges because they are fruity"/> + <radio id="violet" selected="true" label="Strawberries because of colour"/> + <radio id="yellow" label="Bananna because it pre packaged"/> +</groupbox> + +</dialog> +</pre> + +<p>Elementy przycisków mogą być dostępne z następującym kodem JavaScript</p> + +<pre>// przycisk accept +var acceptButt = document.documentElement.getButton("accept") +</pre> + +<h3 id="Wi.C4.99cej_przyk.C5.82ad.C3.B3w" name="Wi.C4.99cej_przyk.C5.82ad.C3.B3w">Więcej przykładów</h3> + +<p>Więcej przykładów znajdziemy w <a href="pl/Fragmenty_kodu/Okienka_dialogowe">Dialogs and prompts</a> (fragment kodu).</p> + +<p>Następnie, zobaczymy jak otworzyć <a href="pl/Kurs_XUL/Okna_otwierania_i_zapisywania_plik%c3%b3w">okienko dialogowe pliku</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Możliwości_okna" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Okna_otwierania_i_zapisywania_plików">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/tworzenie_okna/index.html b/files/pl/mozilla/tech/xul/kurs_xul/tworzenie_okna/index.html new file mode 100644 index 0000000000..1b94462992 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/tworzenie_okna/index.html @@ -0,0 +1,103 @@ +--- +title: Tworzenie okna +slug: Mozilla/Tech/XUL/Kurs_XUL/Tworzenie_okna +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Creating_a_Window +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Pliki_manifestu" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dodawanie_przycisków">Następny »</a></p> +</div><p></p> + +<p>Przez cały kurs będziemy tworzyć proste narzędzie do wyszukiwania plików. Najpierw jednak powinniśmy zapoznać się z podstawową składnią pliku XUL.</p> + +<h3 id="Tworzenie_pliku_XUL" name="Tworzenie_pliku_XUL">Tworzenie pliku XUL</h3> + +<p>Plik XUL może posiadać dowolną nazwę, ale powinien mieć rozszerzenie <code>.xul</code>. Prosty plik XUL ma następującą postać:</p> + +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> + +<window + id="findfile-window" + title="Znajdź pliki" + orient="horizontal" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + ... +</window> +</pre> + +<p>To okno pozostanie puste dopóty, dopóki nie będzie zawierało jakichkolwiek elementów interfejsu użytkownika. Elementy te dodamy w kolejnych artykułach. Poniżej znajduje się analiza powyższego przykładu kodu, linijka po linijce:</p> + +<h3 id="Otwieranie_okna" name="Otwieranie_okna">Otwieranie okna</h3> + +<p>Istnieje kilka metod, których możemy użyć do otwarcia okna XUL. Jeśli znajdujesz się w okresie programowania, wystarczy tylko wpisać URL (czy to<em>chrome:</em>,<em>file:</em> czy inny typ URL) do paska adresu w oknie przeglądarki Mozilla. Powinieneś być także zdolnym do podwójnego kliknięcia w plik w swoim menedżerze plików, który przypisze pliki XUL do połączenia z Mozillą. Okno XUL wyświetli się w oknie przeglądarki jako nowe okno, lecz jest też często dostatecznie, podczas stawiania pierwszych kroków w programowaniu.</p> + +<p>Poprawnym sposobem do otworzenia okna jest zastosowanie JavaScript. Nie potrzebna jest żadna nowa składnia, jako, że możemy zastosować funkcję <a href="pl/DOM/window.open">window.open()</a> jako jeden dokument <a href="pl/HTML">HTML</a>. Jednakże, jedna dodatkowa flaga, nazywająca się 'chrome' jest potrzebna do wskazania przeglądarce dokument <a href="pl/DOM/window.open#Window_functionality_features">chrome</a> do otwarcia. Otworzymy okno bez paska narzędzi i menu, reszta okna będzie wyświetlana jak w normalnym oknie przeglądarki. Składnia została opisana poniżej:</p> + +<pre>window.open(url,windowname,flags); + +gdzie: flags stanowi flagę "chrome", tak jak w tym przykładzie: + +window.open("chrome://navigator/content/navigator.xul", "bmarks", "chrome,width=600,height=300"); +</pre> + +<div class="highlight"> +<h5 id="Przyk.C5.82ad_findfile.xul" name="Przyk.C5.82ad_findfile.xul">Przykład <code>findfile.xul</code></h5> + +<p>Zacznijmy tworzenie prostego pliku okna dialogowego <code>Znajdź pliki</code>. Po pierwsze nazywamy ten plik <code>findfile.xul</code> i umieszczamy jego zawartość w określonym pliku w <code>findfile.manifest</code>, (który został utworzony w poprzednim artykule). Dodaj szablon XUL do pliku, który pokazaliśmy na górze tej strony, a następnie wszystko zapisz.</p> +</div> + +<p>Możemy użyć parametru linii poleceń '-chrome' do określenia pliku XUL, który zostanie otwarty w momencie uruchomienia Mozilli. Jeśli nie zostało to określone, zostanie otwarte okno domyślne (zazwyczaj jest to okno przeglądarki). Na przykład, możemy otworzyć okno dialogowe <code>Znajdź pliki</code> na dwa następujące sposoby:</p> + +<pre>mozilla -chrome chrome://findfile/content/findfile.xul + +mozilla -chrome resource:/chrome/findfile/content/findfile.xul +</pre> + +<p>Jeśli uruchomisz tą komendę z linii poleceń (w zależności od tego, jakiej platformy używasz), okienko dialogowe <code>Znajdź pliki</code> zostanie otwarte domyślnie zamiast okna przeglądarki Mozilla. Oczywiście, ponieważ nie mamy dodanych jakichkolwiek elementów UI do okna, zobaczysz tylko okno. W kolejnych tematach dodamy różne dodatkowe elementy.</p> + +<p>Zobacz, chociaż efekt następującego otwarcia okna zakładek:</p> + +<pre class="eval">mozilla -chrome <a class="external" rel="freelink">chrome://communicator/content/bookma...rksManager.xul</a> + +<span class="highlightred">Jeśli używasz Firefoksa, sprawdź:</span> +firefox -chrome <a class="external" rel="freelink">chrome://browser/content/bookmarks/b...rksManager.xul</a> +</pre> + +<p>Argument '-chrome' nie nadaje plikowi jakichkolwiek dodatkowych uprawnień. Zamiast, to powód określający plik do otwarcia jako okno bez jakiegokolwiek przeglądarkowego chrome, takich jak pole adresowe lub menu. Tylko URL chrome posiada dodatkowe przywileje.</p> + +<div class="note"><a class="external" href="http://ted.mielczarek.org/code/mozilla/extensiondev/">Rozszerzenie programisty</a> będące edytorem XUL, który pozwala na pisanie w języku XUL oraz pozwala na przeglądanie wyników w czasie rzeczywistym za pomocą Mozilli!</div> + +<p>W następnym artykule <a href="pl/Kurs_XUL/Dodawanie_przycisk%c3%b3w">dodamy przyciski do okna</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Pliki_manifestu" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dodawanie_przycisków">Następny »</a></p> +</div><p></p> + +<div class="noinclude"> </div> + +<ol> + <li><strong><?xml version="1.0"?></strong><br> + Deklaracja pliku XML. Dodajemy tą linijkę na początku każdego pliku XUL, tak jak znacznik HTML wstawiamy na początku pliku HTML.</li> + <li><strong><?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?></strong><br> + Linijka ustalająca arkusz stylów używany dla pliku. Jest to składnia, którą plik XML używa do importowania arkuszy stylów. W tym przypadku importuje style znajdujące się w <code><a class="external" rel="freelink">chrome://global/skin</a></code>. Nie odwołując się do konkretnego pliku przeglądarka Mozilla, w tym przypadku, wybierze plik <strong>all-important</strong> <code>global.css</code>. Plik ten zawiera wszystkie domyślne deklaracje wszystkich elementów XUL. Ponieważ XML nie posiada żadnej dokumentacji dotyczącej sposobu, w jaki sposób powinny być jego elementy wyświetlane. Ogólnie, umieszczamy tą linię na samej górze każdego pliku XUL. Możemy także importować inne arkusze stylów stosując prostą składnię. Zauważ, że normalnie zaimportowany zostanie globalny arkusz stylów, z wewnątrz Twojego własnego pliku arkusza stylu.</li> + <li><strong><window</strong><br> + Deklarujemy, że będziemy opisywać okno <code><code><a href="/pl/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code>. Znacznik ten ma analogiczne znaczenie do BODY z języka HTML, który otacza całą zawartość strony. W znaczniku <code><code><a href="/pl/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> można umieścić wiele atrybutów (w przykładzie zawarte są cztery). Każdy z nich umieszczony został w oddzielnej linii, głównie po to, aby kod był przejrzysty.</li> + <li>'<strong>id="findfile-window"'</strong><br> + Atrybut <code>id</code> jest używany jako identyfikator, dzięki któremu skrypty mogą odwoływać się do okna. Przeważnie <code>id</code> dodaje się do każdego elementu. Nazwa identyfikatora może być dowolna.</li> + <li><strong>title="Znajdź pliki"</strong><br> + Atrybut <code>title</code> określa tekst, który jest umieszczony na pasku tytułowym okna. W tym przypadku zostanie wyświetlone: <code>Znajdź pliki</code>.</li> + <li><strong>orient="horizontal"</strong><br> + Atrybut <code>orient</code> określa położenie elementów w oknie. Wartość <code>horizontal</code> ustala poziome położenie elementów w oknie. Wartością domyślną <code>orient</code> jest <code>vertical</code>, które to określa położenie elementów w kolumnie.</li> + <li><strong>xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"></strong><br> + Deklaracja przestrzeni nazw (<em>namespace</em>) w języku XUL, którą powinieneś umieścić w elemencie <code>window</code>, aby wskazać, że wszyscy jego potomkowie należą do XUL-a. W rzeczywistości URL ten nie jest nigdy wczytany. Stanowi informację dla przeglądarki Mozilla, że ma do czynienia ze standardową składnią języka XUL.</li> + <li><strong>...</strong><br> + W tym miejscu deklarowane będą elementy takie jak: przyciski, menu lub inne komponenty interfejsu użytkownika.</li> + <li><strong></window></strong><br> + Na końcu pliku zamykamy znacznik <code><code><a href="/pl/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code>.</li> +</ol> + +<p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/url_chrome/index.html b/files/pl/mozilla/tech/xul/kurs_xul/url_chrome/index.html new file mode 100644 index 0000000000..dae67852d4 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/url_chrome/index.html @@ -0,0 +1,74 @@ +--- +title: URL Chrome +slug: Mozilla/Tech/XUL/Kurs_XUL/URL_Chrome +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/The_Chrome_URL +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Struktura_XUL" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Pliki_manifestu">Następny »</a></p> +</div><p></p> + +<p>Następujący artykuł opisuje jak odnosić się do dokumentów XUL i innych plików chrome.</p> + +<h3 id="URL_Chrome" name="URL_Chrome">URL Chrome</h3> + +<p>Pliki XUL mogą być połączone z normalnymi adresami URL HTTP (lub innymi typami adresów URL) tak jak pliki HTML. Jednakże paczki, które są zainstalowanej wewnątrz systemu chrome Mozilli mogą się łączyć ze sobą za pomocą specjalnych adresów URL. Paczki zawarte z przeglądarką Mozilli są już zainstalowane, ale możemy zarejestrować swoje własne.</p> + +<p>Paczki zainstalowane nie mają żadnych ograniczeń ochronnych, co jest wymagane przez wiele aplikacji. Inną zaletą nad innymi typami URL jest automatyczne radzenie sobie z tematami i lokalizacjami. Dla przykładu, chrome URL pozwala dostać się do pliku grafiki w temacie wyglądu bez potrzeby znania tematu używanego przez użytkownika. Jest to możliwe dzięki temu, że każdy temat posiada takie same nazwy plików. Mozilla sama określi gdzie znajduję się plik i zwróci właściwe dane. Nie ma też znaczenia dla tego żeby się do niej dostać, gdzie paczka jest zainstalowana. Chrome URL są nie zależne od fizycznego miejsca plików. To czyni pisanie aplikacji odnoszącej się do wielu plików znacznie łatwiejsza gdyż nie musisz się martwić gdzie one dokładnie się znajdują.</p> + +<p>Prosta składnia URL chrome jest następująca:</p> + +<pre class="eval"><a class="external" rel="freelink">chrome://</a><em><nazwa paczki></em>/<em><część></em>/<em><plik.xul></em> +</pre> + +<p><span class="comment">Another advantage over other URL types is that they automatically handle multiple themes and locales. For example, a chrome URL lets you refer to a file in the theme such as an image without needing to know which theme the user is using. As long as the filenames are the same in each theme, you can refer to the file using a chrome URL. Mozilla will take care of determining where the file is located and return the right data. This also means that it doesn't matter where the package is installed to be able to access it. The chrome URLs are independent of where the files might physically be located. This makes it much easier to write applications that have lots of files since you don't have to worry about the details of locating files.</span> <nazwa paczki> - to nazwa paczki jak np. edytor czy komunikator. <część> - to np. 'content', 'skin' lub 'locale' zależnie do czego się odnosisz. <plik.xul> - to nazwa pliku.</p> + +<p><strong>Przykład:</strong> <a class="external" rel="freelink">chrome://messenger/content/messenger.xul</a></p> + +<p>Przykład odnosi się do okna Kuriera (messenger'a). Możesz dostać się do pliku tematu zmieniając 'content' na 'skin' i zmieniając nazwę pliku. Tak samo możesz dostać się do katalogu 'locale'.</p> + +<p>Kiedy otwierasz chrome URL, Mozilla sprawdza swoją listę zainstalowanych paczek i próbuje zlokalizować plik JAR który odpowiada nazwie paczki i jej części. Po odnalezieniu zagląda do tego pliku w poszukiwaniu pliku.xul. Mozilla zawsze zacznie poszukiwania w tym samym katalogu w pliku JAR gdzie znajduję się powiązany plik contents.rdf, który opisano w poprzedniej sekcji. To oznacza, że jeżeli kilka paczek lub części znajduje się w tym samym pliku JAR, pliki znajda się we właściwym miejscu. Dla przykładu plik contents.rdf dla przykładu powyższego adresu chrome URL znajduje się w pliku messenger.jar we wnętrzu tego archiwum, katalog 'content/messenger'. To oznacza, że 'messenger.xul' zostanie wczytany z tej lokacji a jeśli otworzysz messenger.jar znajdziesz ten plik właśnie w tym katalogu. Jeżeli używasz rozszerzonej formy plików zamiast JAR, stanie się to samo z wyjątkiem tego, że Mozilla może przejść bezpośrednio do katalogu bez szukania go w pliku JAR.</p> + +<p>Jeżeli przeniesiesz plik messenger.jar gdzieś indziej i uaktualnisz miejsce w liście Mozilla zarejestrowanych paczek chrome, Poczta nadal będzie działać, ponieważ nie polega na określonym miejscu instalacji. Używając chrome URL możemy zostawić szczegóły takie jak te w Mozilli. Podobnie, jeżeli użytkownik zmieni temat, część 'skin' chrome URL przetłumaczy do innego zestawu plików, jeszcze XUL i skrypty nie potrzebują nic zmieniać.</p> + +<p>Mozilla jest w stanie zrozumieć, która skóra i język są aktualnie używane i sporządza mapę odpowiednich katalogów dla chrome URL. Pliki chrome.rdf w chrome i katalogu profilu i contents.rdf są tam, by powiedzieć Mozilla jak to zrobić. Użytkownik może użyć każdej skóry albo języka, ale URL-e, które prowadzą do plików chrome nie muszą być zmienione. Na przykład, domyślny navigator.css jest dostępny:</p> + +<pre>chrome://navigator/skin/navigator.css +</pre> + +<p>Jeżeli zmieniasz skórę przeglądarki, chrome URL nie zmieni się, nawet jeśli zmieni się prawdziwe miejsce plików użytych przez skórę.</p> + +<p>System chrome bierze sekcje nawigatora zawartości, aktualnej skóry i aktualnej lokalizacji i grupuje je razem, by utworzyć interfejs użytkownika. Teraz więcej przykładów, ten raz dla kuriera. Zauważ, że żaden z URL-i nie wskazuje, który temat albo lokalizacja jest użyta i żaden nie wskazuje określonego katalogu.</p> + +<pre>chrome://messenger/content/messenger.xul +chrome://messenger/content/attach.js +chrome://messenger/skin/icons/folder-inbox.gif +chrome://messenger/locale/messenger.dtd +</pre> + +<p>Dla pod paczek, można użyć tej samej struktury. Następne adresy odniosą się do okna zakładek, sporządzone zarówno dla Mozilli i Firefoksa, odkąd nazwy paczki są różne w obu:</p> + +<pre>chrome://communicator/content/bookmarks/bookmarksManager.xul (Mozilla) chrome://browser/content/bookmarks/bookmarksManager.xul (Firefox) +</pre> + +<p>Możesz wejść poprzez chrome URL wszędzie tam, gdzie może zostać użyty normalny URL. Możesz nawet używać ich bezpośrednio w pasku adresu w oknie Mozilli. Jeżeli wejdziesz na któryś z adresów wymienionych powyżej, powinieneś zobaczyć, okno jak strona sieci i przeważnie działałaby jak gdyby to było oddzielne okno. Niektóre okienka dialogowe mogą nie działać dobrze, mogą wymagać argumentów dostarczonych od okna, które je otworzyło.</p> + +<p>Zobaczysz też chrome URL bez wyszczególnionych nazw, takie jak:</p> + +<pre>chrome://navigator/content/ +</pre> + +<p>W tym przypadku, tylko nazwa paczki i część są określone. Ten typ odniesięnia automatycznie wybierze odpowiedni plik z właściwego katalogu. Dla content, plik z tą samą nazwą paczki i rozszerzeniem xul są wybrane. W powyższym przykładzie w pliku navigator.xul jest wybrane. Dla kuriera, messenger.xul byłby wybrany. Kiedy tworzysz swoje własne aplikacje, będziesz chciał utworzyć plik dla twojego głównego okna z tą samą nazwą jak paczka, więc to może zostać odnalezione do używają tej krótszej formy. To jest wygodne odkąd wszystkim co musi wiedzieć użytkownik jest nazwa paczki, by móc otwierać aplikacje. Oczywiście, dla rozszerzeń, które modyfikują interfejs przeglądarki, użytkownik nie będzie potrzebował znać URL, ponieważ rozszerzenie przedstawi siebie w interfejsie użytkownika.</p> + +<p>Dla tematów, jest wybrany plik <nazwa paczki>.css. Dla lokalizacji jest wybrany plik <nazwa paczki>.dtd.</p> + +<p>Zapamiętaj, że chrome URL nie jest powiązany z tym gdzie na dysku się znajduje. Pierwsze dwa kawałki są nazwą paczki i częścią (content, skin albo locale). Zazwyczaj pliki content umieszczane są w katalogu zwanym 'content', jest to czysto umowne więc te pliki mogą zostać umieszczone w całkowicie innej strukturze. Jedyną regułą jest, że część nazwy chrome URL odnosi się do plików umieszczonych w tym samym katalogu, gdzie znajduje się powiązany plik 'contents.rdf'.</p> + +<p>W następnym artykule dowiemy się jak tworzyć pliki contents.rdf i paczki.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Struktura_XUL" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Pliki_manifestu">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/więcej_funkcji_obsługi_zdarzeń/index.html b/files/pl/mozilla/tech/xul/kurs_xul/więcej_funkcji_obsługi_zdarzeń/index.html new file mode 100644 index 0000000000..cddafecfd3 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/więcej_funkcji_obsługi_zdarzeń/index.html @@ -0,0 +1,174 @@ +--- +title: Więcej funkcji obsługi zdarzeń +slug: Mozilla/Tech/XUL/Kurs_XUL/Więcej_funkcji_obsługi_zdarzeń +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/More_Event_Handlers +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL/Dodawanie_funkcji_obsługi_zdarzeń" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL/Skróty_klawiaturowe">Następny »</a></p> +</div><p></p> + +<p>W tym artykule, badana jest postać obiektu zdarzenia oraz opisane są dodatkowe zdarzenia.</p> + +<h2 id="Obiekt_zdarzenia" name="Obiekt_zdarzenia">Obiekt zdarzenia</h2> + +<p>Każda obsługa zdarzeń posiada pojedynczy argument, który przetrzymuje obiekt <a href="/pl/DOM/event" title="pl/DOM/event">zdarzenia</a>. W postaci atrybutu nasłuchu, zdarzenie jest argumentem kodu skryptu, do którego można się odnosić poprzez używanie nazwy 'event'. Natomiast w funkcji <code><a href="/pl/DOM/element.addEventListener" title="pl/DOM/element.addEventListener">addEventListener</a></code>, pierwszy argument będzie obiektem zdarzenia. Ten obiekt zdarzenia, posiada pewną liczbę własności, które mogą być badane w trakcie trwania zdarzenia. Pełną listę własności można znaleźć w dokumentacji obiektu na <a class="external" href="http://xulplanet.com/references/objref/Event.html">XULPlanet</a>].</p> + +<p>Mieliśmy już okazję oglądać własność <code><a href="/pl/DOM/event.target" title="pl/DOM/event.target">target</a></code> zdarzenia w poprzedniej sekcji. Zawiera ona odnośnik do elementu, w którym pojawiło się zdarzenie. Podobną własnością jest <code><a href="/pl/DOM/event.currentTarget" title="pl/DOM/event.currentTarget">currentTarget</a></code>, która zawiera element, którego nasłuch jest aktualnie obsługiwany. W poniższym przykładzie, <code><a href="/pl/DOM/event.currentTarget" title="pl/DOM/event.currentTarget">currentTarget</a></code> zawsze wskazuje na vbox, natomiast własność <code><a href="/pl/DOM/event.target" title="pl/DOM/event.target">target</a></code> będzie przechowywała specyficzny element: przycisk lub pole wyboru, które zostały aktywowane.</p> + +<p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_1.xul">Podgląd</a></p> + +<pre><vbox oncommand="alert(event.currentTarget.tagName);"> + <button label="OK"/> + <checkbox label="Pokaż obrazki"/> +</vbox> +</pre> + +<h3 id="Zatrzymanie_propagowania_zdarzenia" name="Zatrzymanie_propagowania_zdarzenia">Zatrzymanie propagowania zdarzenia</h3> + +<p>Przypomnijmy, że faza przejęcia ma miejsce przed fazą wrzenia, więc jakikolwiek "listener" należący do tej pierwszej będzie wyzwalany przed nasłuchem drugiej. Jeśli zdarzenie odnoszące się do fazy przejęcia, zatrzyma swoją propagację, żaden z późniejszych "listenerów", tak tych należących do fazy przejęcia, jak i wrzenia nie otrzyma powiadomienia o zdarzeniu. W celu zatrzymania propagacji zdarzenia, wystarczy wywołać metodę <code><a href="/pl/DOM/event.stopPropagation" title="pl/DOM/event.stopPropagation">stopPropagation</a></code> należącą do obiektu zdarzenia. Przykład tego wywołania poniżej:</p> + +<p><span id="Przyk%C5%82ad_2"><a id="Przyk%C5%82ad_2"></a><strong>Przykład 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_2.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_2.xul">Podgląd</a></p> + +<pre><hbox id="outerbox"> + <button id="okbutton" label="OK"/> +</hbox> + +<script> +function buttonPressed(event){ + alert('Przycisk został naciśnięty!'); +} + +function boxPressed(event){ + alert('Pudełko zostało naciśnięte!'); + event.stopPropagation(); +} + +var button = document.getElementById("okbutton"); +button.addEventListener('command',buttonPressed,true); + +var outerbox = document.getElementById("outerbox"); +outerbox.addEventListener('command',boxPressed,true); +</script> +</pre> + +<p>W tym przypadku, nasłuch zdarzenia został dodany do przycisku, a inny nasłuch został dodany do ramki. Metoda <code><a href="/pl/DOM/event.stopPropagation" title="pl/DOM/event.stopPropagation">stopPropagation</a></code> została wywołana w "listenerze" ramki, więc "listener" przycisku nigdy nie zostanie wywołany. Jeśli to wywołanie zostało usunięte, oba "listenery" będą wywoływane, co spowoduje pojawienie się obu alertów.</p> + +<h3 id="Zapobieganie_domy.C5.9Blnym_akcj.C4.85" name="Zapobieganie_domy.C5.9Blnym_akcj.C4.85">Zapobieganie domyślnym akcją</h3> + +<p>Jeśli żadna obsługa wydarzenia nie została zarejestrowani dla wydarzenia, to po zakończeniu fazy przejęcia i wrzenia, element obsłuży zdarzenie w sposób domyślny. Co się stanie zależy od zdarzenia i typu samego elementu. Przykładowo, zdarzenie "popupshowing" jest wysyłane do "popupa" chwilę przed jego wyświetleniem. Domyślną akcją jest wyświetlenie "popupa". Jeśli coś zapobiegnie akcji domyślnej, "popup" nie zostanie wyświetlony. Domyślnej akcji możemy zapobiec dzięki znajdującej się w obiekcie zdarzenia metodzie <code><a href="/pl/DOM/event.preventDefault" title="pl/DOM/event.preventDefault">preventDefault</a></code>. Przykład jej zastosowania poniżej.</p> + +<p><span id="Przyk%C5%82ad_3"><a id="Przyk%C5%82ad_3"></a><strong>Przykład 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_3.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_3.xul">Podgląd</a></p> + +<pre><button label="Types" type="menu"> + <menupopup onpopupshowing="event.preventDefault();"> + <menuitem label="Glass"/> + <menuitem label="Plastic"/> + </menupopup> +</button> +</pre> + +<p>Zauważmy, że zapobieganie domyślnym akcjom, to nie to samo co zatrzymywanie propagacji zdarzenia przy użyciu metody <code><a href="/pl/DOM/event.stopPropagation" title="pl/DOM/event.stopPropagation">stopPropagation</a></code>. Nawet w przypadku kiedy zapobiegnięto domyślnej akcji, zdarzenie będzie nadal kontynuowało swoją propagację. Podobnie, wywoływanie metody <code><a href="/pl/DOM/event.stopPropagation" title="pl/DOM/event.stopPropagation">stopPropagation</a></code>, nie zapobiegnie domyślnej akcji. W celu zatrzymania przed zajściem obu tych akcji, należy wywołać obie powyższe metody.</p> + +<p>Warto zaznaczyć, że kiedy zapobiegniemy propagacji lub akcji domyślnej, żadna z nich nie będzie w już stanie być uruchomiona ponownie dla danego wydarzenia.</p> + +<p>The following sections list some of the events that may be used. A full list is provided in the <a class="external" href="http://www.xulplanet.com/references/elemref/ref_EventHandlers.html">XULPlanet event reference</a>.</p> + +<h2 id="Zdarzenia_myszy" name="Zdarzenia_myszy">Zdarzenia myszy</h2> + +<p>Jest tu kilka zdarzeń, które mogą być użyte do obsługi myszki i jej określonych akcji, które są opisane pokrótce poniżej:</p> + +<dl> + <dt>click </dt> + <dd>Wywoływany, kiedy przycisk myszy zostanie naciśnięty i zwolniony nad elementem.</dd> +</dl> + +<dl> + <dt>dblclick </dt> + <dd>Wywoływana, kiedy przycisk myszy zostanie naciśnięty dwukrotnie.</dd> +</dl> + +<dl> + <dt>mousedown </dt> + <dd>Wywoływana, kiedy przycisk myszy jest naciśnięty nad elementem. Obsługa zdarzenia będzie wywoływana jak tylko przycisk zostanie naciśniety, nawet jeśli nie został jeszcze zwolniony.</dd> +</dl> + +<dl> + <dt>mouseup </dt> + <dd>Wywoływana, kiedy przycisk myszy zostanie zwolniony na elemencie.</dd> +</dl> + +<dl> + <dt>mouseover </dt> + <dd>Wywoływana kiedy wskaźnik myszy zostanie przeniesiony nad element. Można ją wykorzystywać w celu podświetlania elementu, jednakże CSS umożliwia to automatycznie, więc lepiej nie wykonywać tego z pomocą zdarzeń. Można jednak, wykorzystywać to do wyświetlania tekstu pomocy w pasku statusu.</dd> +</dl> + +<dl> + <dt>mousemove </dt> + <dd>Wywoływana, kiedy wskaźnik myszy zostanie poruszony nad elementem. Zdarzenie to może być wywoływane wiele razy, w chwili w której użytkownik porusza myszą, więc należy</dd> +</dl> + +<p>unikać obsługi nią długotrwałych zadań.</p> + +<dl> + <dt>mouseout </dt> + <dd>Wywoływana, kiedy wskaźnik myszy rozstanie przesunięty poza element. Można to wykorzystać do usunięcia podświetlenia elementu lub usunięcia tekstu pomocy paska statusu.</dd> +</dl> + +<p><span class="comment">There are also a set of drag related events, which occur when the user holds down a mouse button and drags the mouse around. Those events are described in <a href="/pl/Przeciągnij_i_upuść" title="pl/Przeciągnij_i_upuść">Przeciągnij i upuść</a>.</span></p> + +<p>Istnieje także zestaw zdarzeń związanych z funkcja drag, które mają miejsce w chwili kiedy, użytkownik przytrzymując wciśnięty przycisk myszy ciągnie (drag) mysz. Zostaną one opisane w późniejszej sekcji związanej z funkcjami <a href="/pl/Przeciągnij_i_upuść" title="pl/Przeciągnij_i_upuść">drag i drop</a>.</p> + +<h3 id="W.C5.82asno.C5.9Bci_zdarzenia_przycisku_myszy" name="W.C5.82asno.C5.9Bci_zdarzenia_przycisku_myszy">Własności zdarzenia przycisku myszy</h3> + +<p>Kiedy zachodzą zdarzenia związane z przyciskiem myszy, mamy dostęp do różnego typu dodatkowych własności, które są w stanie określić który przycisk myszy został wciśnięty lub dokładną lokalizację miejsca w którym znajduje się wskaźnik myszy. Własności zdarzenia związanego z <code><a href="/pl/DOM/event.button" title="pl/DOM/event.button">przyciskiem</a></code>, mogą zostać użyte w celu określenia, który przycisk został wciśnięty, gdzie dostępne wartości to 0 dla lewego przycisku, 1 dla prawego i 2 dla środkowego. Jeśli mysz jest skonfigurowana inaczej, wartości mogą się zmienić.</p> + +<p>Szczegółowe własności (<code><a href="/pl/DOM/event.detail" title="pl/DOM/event.detail">detail</a></code>) przechowują wartość mówiącą, ile razy przycisk został szybko wciśnięty w pewnej sekwencji. Pozwala to sprawdzić czy przycisk został raz, dwa lub trzy razy wciśnięty. Oczywiście, jeśli chcesz tylko sprawdzić podwójne kliknięcia można użyć w zastępstwie zdarzenia dblclick. Zdarzenie wciśnięcia będzie uruchamiane w chwili pierwszego wciśnięcia przycisku, jak również drugiego oraz trzeciego. Zdarzenie dblclick natomiast, będzie uruchamiane jednorazowo dla podwójnego wciśnięcia przycisku myszy.</p> + +<p>Własności <code><a href="/pl/DOM/event.button" title="pl/DOM/event.button">przycisku</a></code> oraz własności <code><a href="/pl/DOM/event.detail" title="pl/DOM/event.detail">detail</a></code> stosują się tylko do obsługi zdarzeń powiązanych z przyciskami myszy, a nie jej ruchem. Dla zdarzeń związanych z ruchem myszy, obie własności będą miały wartość 0.</p> + +<h3 id="W.C5.82asno.C5.9Bci_zdarzenia_pozycji_myszy" name="W.C5.82asno.C5.9Bci_zdarzenia_pozycji_myszy">Własności zdarzenia pozycji myszy</h3> + +<p>Jednak, wszystkie zdarzenia związane z obsługą myszy, będą posiadały dołączone własności przetrzymujące położenie myszy, w chwili zajścia zdarzenia. Istnieją dwa zestawy kordynatów położenia. Pierwszy to własności <code><a href="/pl/DOM/event.screenX" title="pl/DOM/event.screenX">screenX</a></code> i <code><a href="/pl/DOM/event.screenY" title="pl/DOM/event.screenY">screenY</a></code> i są w odniesieniu do lewego, górnego rogu ekranu. Drugi zestaw, <code><a href="/pl/DOM/event.clientX" title="pl/DOM/event.clientX">clientX</a></code> i <code><a href="/pl/DOM/event.clientY" title="pl/DOM/event.clientY">clientY</a></code>, istnieją w odniesieniu do lewego, górnego rogu dokumentu. Poniżej pokazany jest przykład wyświetlający aktualne położenie myszy:</p> + +<p><span id="Przyk%C5%82ad_4"><a id="Przyk%C5%82ad_4"></a><strong>Przykład 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_4.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_4.xul">Podgląd</a></p> + +<pre><script> + +function updateMouseCoordinates(event){ + var text = "X:" + event.clientX + " Y:" + event.clientY; + document.getElementById("xy").value = text; +} +</script> + +<label id="xy"/> +<hbox width="400" height="400" onmousemove="updateMouseCoordinates(event);"/> +</pre> + +<p>W tym przykładzie, rozmiar ramki został wyspecyfikowany, w celu podkreślenia efektu. Obsługa zdarzenia pobiera własności <code><a href="/pl/DOM/event.clientX" title="pl/DOM/event.clientX">clientX</a></code> i <code><a href="/pl/DOM/event.clientY" title="pl/DOM/event.clientY">clientY</a></code>, a następnie tworzy dla nich string. Ten string jest przypisany do własności value danej etykiety. Warto zaznaczyć, że argument zdarzenia musi być przekazany do funkcji <code>updateMouseCoordinates</code>. Jeśli poruszysz szybko myszą, nad granicą ramki możesz zauważyć, że wartości położenia nie zatrzymują się idealnie na wartości 400. Jest to spowodowane zdarzeniem <code>mousemove</code>, które pojawia się w pewnym odstępie czasu po przekroczeniu granicy. Im szybciej poruszała się mysz tym większa będzie różnica między teoretycznie poprawną wartością, a tym co zwrócą nam wartości <code>clientX</code> i <code>clientY</code>.</p> + +<h3 id="Element_Relative_Coordinates" name="Element_Relative_Coordinates">Element Relative Coordinates</h3> + +<p>W większości przypadków będziemy woleli pobrać koordynaty zdarzenia w odniesieniu do elementu, nie zaś całego okna. Wartości te można otrzymać poprzez, odjęcie pozycji elementu od pozycji zdarzenia. Przykład poniżej.</p> + +<pre>var element = event.target; +var elementX = event.clientX - element.boxObject.x; +var elementY = event.clientY - element.boxObject.y; +</pre> + +<p>Elementy XUL posiadają obiekty ramek, które mogą być odzyskiwane za pomocą własności boxObject. Więcej informacji na ten temat znajdziemy w kolejnej sekcji, jednak co warto powiedzieć już teraz to, że wspomniana własność przechowuje informacje określającą jak wyświetlany jest element, włączając jego koordynaty x i y. W poniższym przykładzie, wspomniane koordynaty zostaję odjęte od koordynatów zdarzenia. Operacja ta daje nam pozycję zdarzenia w odniesieniu do elementu.</p> + +<h2 id="Zdarzenia_wczytywania" name="Zdarzenia_wczytywania">Zdarzenia wczytywania</h2> + +<p>Zdarzenie wczytywania jest wysyłane do dokumentu (znacznika <code><code><a href="/pl/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code>), kiedy tylko plik XUL zakończy wczytywanie i zaraz przed wyświetleniem zawartości. To zdarzenie jest bardzo często używane do inicjacji pól i wykonywania innych zadań które wymagają być zrobione przed tym jak użytkownik będzie używał okna. Należy używać zdarzenia wczytywania, aby wykonywać tego typu rzeczy dodając skrypt na górnym poziomie na zewnątrz funkcji. Wymagane to jest ze względu na to że elementy XUL mogą być jeszcze niewczytane lub nie w pełni zainicjowane, ze względu na co niektóre rzeczy mogą nie działać tak jak powinny. W celu użycia zdarzenia wczytywania, umieść atrybut <code><code id="a-onload"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/onload">onload</a></code></code> w znaczniku <code><code><a href="/pl/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code>. Wywołaj kod wewnątrz obsługi zdarzenia wczytywania, który zainicjuje potrzebny interfejs.</p> + +<p>Istnieją także zdarzenia przeciwne do wczytywania (unload), które są wywoływane w trakcie zamykania okna lub w kontekście przeglądarki, kiedy strona jest przełączana na kolejny adres URL. Możemy wykorzystywać to zdarzenie do zapisania jakichkolwiek informacji.</p> + +<p>W następnym artykule dowiemy się <a href="/pl/Kurs_XUL/Skróty_klawiaturowe" title="pl/Kurs_XUL/Skróty_klawiaturowe">jak dodać dodawać skróty klawiaturowe</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL/Dodawanie_funkcji_obsługi_zdarzeń" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL/Skróty_klawiaturowe">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/wprowadzenie/index.html b/files/pl/mozilla/tech/xul/kurs_xul/wprowadzenie/index.html new file mode 100644 index 0000000000..2a7783d02e --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/wprowadzenie/index.html @@ -0,0 +1,73 @@ +--- +title: Wprowadzenie +slug: Mozilla/Tech/XUL/Kurs_XUL/Wprowadzenie +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Introduction +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Struktura_XUL">Następny »</a></p> +</div><p></p> + +<p>Ten kurs pomoże Ci nauczyć się XUL (XML User Interface Language) (język opisu interfejsu użytkownika XML), wieloplatformowego języka opisującego interfejs użytkownika.</p> + +<p>Kurs pokazuje, jak stworzyć prosty interfejs w postaci okna <code>Znajdź pliki</code>, wyglądającego podobnie jak okno w programie Sherlock na Macintoshu lub okienko dialogowe w Windows. Utworzony zostanie tylko interfejs użytkownika o nieco ograniczonej funkcjonalności. Faktyczne wyszukiwanie plików nie zostanie w nim zaimplementowane. Czytając po kolei poszczególne artykuły kursu, dowiemy się, jak utworzyć okienko dialogowe <code>Znajdź pliki</code>.</p> + +<h3 id="Czym_jest_XUL_i_po_co_zosta.C5.82_stworzony" name="Czym_jest_XUL_i_po_co_zosta.C5.82_stworzony">Czym jest XUL i po co został stworzony</h3> + +<p>XUL (wym. "zool" i rymuje się z "cool") stworzony został w celu uproszczenia i przyspieszenia rozwoju przeglądarki Mozilla. Jest językiem opartym na języku XML (Extensible Markup Language), w związku z czym wszystkie dostępne własności języka XML są także dostępne w języku XUL.</p> + +<p>Większość aplikacji musi być rozwijana na bazie własności konkretnych platform, co niesie za sobą duże nakłady czasu i kosztów. Mimo że dla części użytkowników nie jest to istotne, inni mogą chcieć używać aplikacji na innych urządzeniach, takich jak urządzenia przenośne lub urządzenia typu set-top box.</p> + +<p>W przeszłości stworzono wiele rozwiązań wieloplatformowych. Java, na przykład, szczyci się swoją możliwością przenoszenia pomiędzy różnymi systemami. XUL jest jednym z takich języków, zaprojektowanych do tworzenia przenośnych interfejsów użytkownika.</p> + +<p>Budowa aplikacji zajmuje dużo czasu, nawet dla jednej tylko platformy. Wiele czasu wymaga też kompilacja i debugowanie. Dzięki XUL interfejs można implementować i modyfikować szybko i w prosty sposób.</p> + +<p>XUL posiada wszystkie zalety języka XML, więc XHTML lub inny język oparty na XML, jak MathML (Math Markup Language) czy SVG ("Scalable Vector Graphics), może być do niego bezpośrednio włączony. Ponieważ tekst wyświetlany z XUL jest wpisany wprost, oznacza to, że łatwo i przy małym nakładzie pracy może zostać przetłumaczony na inny język.</p> + +<p>Do modyfikacji wyglądu interfejsu użytkownika można wykorzystać arkusze stylów CSS (w podobny sposób, jak w odtwarzaczu WinAmp, na menedżery okien nakłada się<em>skórki</em>).</p> + +<h3 id="Jakie_rodzaje_interfejsu_u.C5.BCytkownika_mog.C4.85_by.C4.87_stworzone_w_XUL" name="Jakie_rodzaje_interfejsu_u.C5.BCytkownika_mog.C4.85_by.C4.87_stworzone_w_XUL">Jakie rodzaje interfejsu użytkownika mogą być stworzone w XUL</h3> + +<p>XUL pozwala na tworzenia większości elementów znanych ze współczesnych interfejsów graficznych. Jest wystarczająco ogólny, aby mógł być dostosowany do specjalnych potrzeb na niektórych urządzeniach, a jednocześnie wystarczająco potężny, by programiści mogli dzięki niemu tworzyć rozbudowane interfejsy.</p> + +<p>W XUL można utworzyć m.in.:</p> + +<ul> + <li>Kontrolki wejścia w formie pól tekstowych i pól wyboru</li> + <li>Paski narzędzi z przyciskami lub innymi elementami</li> + <li>Menu na pasku menu lub menu podręczne</li> + <li>Karty z oknami dialogowymi</li> + <li>Hierarchiczne drzewa lub tabele</li> + <li>Skróty klawiaturowe</li> +</ul> + +<p><span class="comment">przy liście, jeżeli stosujemy dużą literę na początku musimy dać na koniec kropkę, ew. nie stawiać nic. przecinki i kropke na końcu listy można stosować, jeśli kolejne wypunktowania zaczynamy małą literą</span></p> + +<p>Wyświetlaną zawartość można utworzyć z treści pliku XUL lub z danych z tzw. źródła danych. W Mozilli takimi źródłami danych mogą być: skrzynka pocztowa użytkownika, jego zakładki i wyniki wyszukiwania. Zawartość menu, drzew i innych elementów może być wypełniana tymi danymi lub danymi dostarczonymi w pliku RDF (Resource Description Framework).</p> + +<p>Zawartość XUL jest zwykle ładowana z pakietu zainstalowanego w Mozilli. Pakiet taki pozwala aplikacji na dodatkowe uprawnienia, takie jak odczyt plików lokalnych i modyfikację preferencji użytkownika. Pliki XUL i powiązane z nimi skrypty oraz obrazki danej aplikacji są pakowane do jednego pliku, który użytkownik może pobrać i zainstalować. Mozilla dostarcza środki do instalowania i rejestrowania takich pakietów bez potrzeby pisania dużej ilości złożonego kodu. Ponadto pakiety te mogą się nakładać na przeglądarkę lub inną aplikację, rozszerzając ich możliwości. W ten sposób działają rozszerzenia Firefoksa.</p> + +<p>Możliwe jest także otwarcie plików XUL bezpośrednio z systemu plików lub ze zdalnej witryny internetowej. Wówczas jednak niektóre ich możliwości zostaną ograniczone, przez co niektóre elementy XUL nie będą działać. Jeśli mimo to będziesz chciał załadować zawartość XUL ze zdalnej strony internetowej, serwer WWW musi być odpowiednio skonfigurowany, tj. wysyłać pliki XUL z typem MIME <code>application/vnd.mozilla.xul+xml</code>. XUL jest zwykle przechowywany w plikach z rozszerzeniem <code>.xul</code>. Możesz otworzyć plik XUL w Mozilli tak samo, jak każdy inny plik, używając menu <code>Plik</code> i wybierając polecenie <code>Otwórz plik...</code> lub wpisując adres URL do paska adresu.</p> + +<h3 id="Co_powiniene.C5.9B_wiedzie.C4.87.2C_by_pos.C5.82ugiwa.C4.87_si.C4.99_tym_kursem" name="Co_powiniene.C5.9B_wiedzie.C4.87.2C_by_pos.C5.82ugiwa.C4.87_si.C4.99_tym_kursem">Co powinieneś wiedzieć, by posługiwać się tym kursem</h3> + +<p>Powinieneś dobrze znać język HTML (HyperText Markup Language) i orientować się w podstawach języków XML oraz CSS (Cascading Style Sheets). Oto kilka wskazówek, które należy wziąć pod uwagę:</p> + +<ul> + <li>Wszystkie elementy języka XUL i ich atrybuty muszą być zapisane małymi literami, ponieważ XML rozróżnia wielkość liter (w przeciwieństwie do języka HTML).</li> + <li>Wartości atrybutów w języku XUL muszą być podawane w cudzysłowach, nawet jeśli są liczbami.</li> + <li>Pliki XUL składają się zwykle z czterech plików: jednego definiującego wygląd i poszczególne elementy, drugiego dla deklaracji stylów, trzeciego dla deklaracji jednostek (przydatnego przy lokalizacjach) i czwartego dla skryptów.</li> +</ul> + +<p>Można także dołączać dodatkowe pliki, jak np. obrazki lub dane wykorzystywane w zależności od platformy systemowej.</p> + +<p>XUL jest obsługiwany przez Mozillę i inne przeglądarki oparte na silniku Gecko, np. przez Netscape 6 (i nowsze) oraz Mozillę Firefox. Z powodu ciągłych zmian w składni języka XUL, niezbędna będzie jego najnowsza wersja, by przykłady z tego przewodnika działały poprawnie. Większość z podanych tutaj przykładów powinna działać w Mozilli 1.0 i nowszych. W Firefoksie i innych przeglądarkach XUL jest prawie identyczny, choć istnieje kilka dość specyficznych różnic, takich jak obsługa dostosowywanych pasków narzędzi.</p> + +<p>W kursie tym próbujemy zaprezentować większość możliwości języka XUL, nie wszystkie jednak mogły zostać w tym miejscu omówione. Gdy już zaznajomisz się z językiem XUL, zapraszamy do skorzystania z <a href="pl/Dokumentacja_XUL">dokumentacji XUL</a>, aby poznać pozostałe własności poszczególnych elementów.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Struktura_XUL">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/wprowadzenie_do_rdf/index.html b/files/pl/mozilla/tech/xul/kurs_xul/wprowadzenie_do_rdf/index.html new file mode 100644 index 0000000000..d3fe523f6d --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/wprowadzenie_do_rdf/index.html @@ -0,0 +1,138 @@ +--- +title: Wprowadzenie do RDF +slug: Mozilla/Tech/XUL/Kurs_XUL/Wprowadzenie_do_RDF +tags: + - Kurs_XUL + - Przewodniki + - RDF + - Strony_wymagające_dopracowania + - Wszystkie_kategorie + - XUL +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Obiekty_pudełkowe_drzewa" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Szablony">Następny »</a></p> +</div> W artykule tym, poznamy RDF (Resource Description Framework).<p></p> + +<h3 id="Resource_Description_Framework" name="Resource_Description_Framework">Resource Description Framework</h3> + +<p>Możemy użyć trzech elementów do wyświetlenia ustawień danych, także zakładek i wiadomości e-mail. Jednakże, był by to niewygodny sposób na wprowadzenie danych do pliku <a href="pl/XUL">XUL</a>. To było by trudne, aby zmodyfikować zakładki jeśli one by były bezpośrednio w pliku XUL. Rozwiązaniem jest użycie kodu źródłowego RDF.</p> + +<p><a href="pl/RDF">RDF</a> (Resource Description Framework) jest formatem, który potrafi być stosowany jako źródło do takich rzeczy jak wiadomość e-mail lub zakładki. Alternatywne dane w innych formatach możemy użyć i zapisać do pliku do odczytu, aby utworzyć dane RDF. Tak się dzieje podczas czytania danych przez pracującą Mozillę, służącą do odczytywania takich list ulubionych czy historii lub wiadomości e-mail. Mozilla dostarcza kod źródłowy dla tymczasowych danych więc będzie można prosto z nich korzystać.</p> + +<p>Możesz używać dostarczonego źródła RDF do promocji drzew z danymi lub wskazywać RDF na plik magazynowania w XML-u, który stanowi dane. Robiąc ...</p> + +<p>Możesz użyć jakiś dostarczony kod źródłowy do zwiększenia ilości drzew z danymi lub wskaż plik RDF będący magazynem w XML-u, który powstrzyma dane. Zrobi się to wtedy bardzo wygodne do przeglądania drzew z niemałą liczbą wierszy w niej. RDF potrafi także zapełniać inne elementy XUL równie dobrze tak jak listboxy i menu. Zobaczymy to w następnej sekcji.</p> + +<p>Jest tu dostarczony bardzo krótki ogólny przegląd plików RDF. Dla większych szczegółów jest przewodnik po RDF, przeczytaj <a class="external" href="http://www.xulplanet.com/tutorials/mozsdk/rdfstart.php">Instrukcja modelu RDF</a>, na XULPlanet. Jest to zalecane do czytania, jeśli dopiero zaczynasz z RDF. Zobacz niektóre przykłady plików RDF/XML, popatrz na te dostarczone przez Mozillę. Mają one rozszerzenie rdf.</p> + +<h4 id="RDF.2FXML" name="RDF.2FXML">RDF/XML</h4> + +<p>RDF stanowi model lub bazę danych, która jest reprezentowana w formie grafu. RDF/XML jest językiem XML-a, który może być użyty do reprezentacji danych RDF. Stanowi to dość proste ustawienie elementów. Przykład poniżej pokazuje szablon RDF.</p> + +<pre><?xml version="1.0"?> +<RDF:RDF + xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> + ... +</RDF:RDF> +</pre> + +<p>Mają one podobieństwa do nagłówków XUL. Wewnątrz elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code>, jest użyty element <code>RDF</code>. Widzimy przestrzeń nazw dla RDF, które było deklarowane więc tak elementy RDF organizują własności. Wewnątrz elementu RDF, wprowadź dane.</p> + +<h4 id="Baza_danych_RDF" name="Baza_danych_RDF">Baza danych RDF</h4> + +<p>Krótki opis RDF, zostanie tutaj dodany. Dla większości informacji o RDF, zobacz <a class="external" href="http://www.w3.org/RDF/">specyfikację RDF</a>. Uzyskajmy przykład generowania listy zakładek z RDF. Lista zakładek stanowi ustawienie rekordów, każdy z ustawieniem łączenia danych, takie jak URL-e, tytuł zakładki i data wizyty.</p> + +<p>Pomyśl o zakładkach jako o bazie danych, które są magazynowane jako duże tabele z ponumerowanymi plikami. W tym przypadku RDF, jednakże lista może być hierarchiczna jako dobar. To jest aktówka więc tak jak mamy w posiadaniu foldery kategorii pełne zakładek. Każdy z plików w bazie danych RDF jest źródłem, każdy z nazwą łączy się z nim. Nazwa jest opowiadane poprzez URI.</p> + +<p>Na przykład zaznaczamy pole zakładki Mozilli i lista URI jest opisana poniżej</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td>Name</td> + <td><span class="nowiki">http://home.netscape.com/NC-rdf#Name</span></td> + <td>Nazwa zakładki</td> + </tr> + <tr> + <td>URL</td> + <td><span class="nowiki">http://home.netscape.com/NC-rdf#URL</span></td> + <td>URL do zlinkowania</td> + </tr> + <tr> + <td>Description</td> + <td><span class="nowiki">http://home.netscape.com/NC-rdf#Description</span></td> + <td>Opis zakładki</td> + </tr> + <tr> + <td>Last Visited</td> + <td><span class="nowiki">http://home.netscape.com/WEB-rdf#LastVisitDate</span></td> + <td>Data ostatniej wizyty</td> + </tr> + </tbody> +</table> + +<p>Te są generowane pobierając nazwę miejsca położenia i dołączenie nazwy pola. W następnym rozdziałem, zobaczymy w jaki sposób możemy automatycznie wykonać wypełnienie pola. Nota jest ostatnimi modyfikowanymi danymi posiadającymi nieznacznie inne pole nazwy, niż cała reszta.</p> + +<h4 id="RDF.2FXML_file_example" name="RDF.2FXML_file_example">RDF/XML file example</h4> + +<p>Poniżej znajduje się przykład pliku RDF/XML, ustawiono tablicę z trzema dowodami i trzema polami.</p> + +<pre><RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:ANIMALS="http://www.some-fictitious-zoo.com/rdf#"> + + <RDF:Seq about="http://www.some-fictitious-zoo.com/all-animals"> + <RDF:li> + <RDF:Description about="http://www.some-fictitious-zoo.com/mammals/lion"> + <ANIMALS:name>Lion</ANIMALS:name> + <ANIMALS:species>Panthera leo</ANIMALS:species> + <ANIMALS:class>Mammal</ANIMALS:class> + </RDF:Description> + </RDF:li> + <RDF:li> + <RDF:Description about="http://www.some-fictitious-zoo.com/arachnids/tarantula"> + <ANIMALS:name>Tarantula</ANIMALS:name> + <ANIMALS:species>Avicularia avicularia</ANIMALS:species> + <ANIMALS:class>Arachnid</ANIMALS:class> + </RDF:Description> + </RDF:li> + <RDF:li> + <RDF:Description about="http://www.some-fictitious-zoo.com/mammals/hippopotamus"> + <ANIMALS:name>Hippopotamus</ANIMALS:name> + <ANIMALS:species>Hippopotamus amphibius</ANIMALS:species> + <ANIMALS:class>Mammal</ANIMALS:class> + </RDF:Description> + </RDF:li> + </RDF:Seq> +</RDF:RDF> +</pre> + +<p>Tutaj, trzy rekordy zostały opisane, jeden dla każdego zwierzęcia. Każdy tag <code>RDF:Description</code> opisuje pojedynczy rekord. Wewnątrz każdego rekordu, trzy pola są opisane, <code>name</code>, <code>species</code> i <code>class</code>. To nie jest konieczne dla wszystkich rekordów posiadających te same pola.</p> + +<p>Każde z trzech pól posiada przyporządkowaną nazwę <code>ANIMALS</code> URL, który jest zadeklarowany w tagu <code>RDF</code>. Nazwy zostały po selekcjonowane, ponieważ ma to znaczenie w tym przypadku, lecz my możemy poseleekcjonować coś innego. Cechą nazwy feature is useful because the <code>class</code> field might conflict with that used for styles.</p> + +<p>Elementy <code>Seq</code> i <code>li</code> są używane do specyficznych rekordów ,które są na liście. This is much like how HTML lists are declared. <code>Seq</code> element is used to indicate that the elements are ordered, or in sequence. Instead of the <code>Seq</code> element, you can also use <code><strong>Bag</strong></code> to indicate unordered data, i <code>Alt</code> to indicate data where each record specifies alternative values (such as mirror URLs).</p> + +<p>The resources can be referred to in a XUL file by combining the namespace URL followed by the field name. In the example above, the following URIs are generated which can be used to refer to the specific fields:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td>Name</td> + <td><span class="nowiki">http://www.some-fictitious-zoo.com/rdf#name</span></td> + </tr> + <tr> + <td>Species</td> + <td><span class="nowiki">http://www.some-fictitious-zoo.com/rdf#species</span></td> + </tr> + <tr> + <td>Class</td> + <td><span class="nowiki">http://www.some-fictitious-zoo.com/rdf#class</span></td> + </tr> + </tbody> +</table> + +<p>Następnie zobaczymy jak stosować RDF do promocji elementów XUL.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Obiekty_pudełkowe_drzewa" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Szablony">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/wprowadzenie_do_xbl/index.html b/files/pl/mozilla/tech/xul/kurs_xul/wprowadzenie_do_xbl/index.html new file mode 100644 index 0000000000..c0690c246d --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/wprowadzenie_do_xbl/index.html @@ -0,0 +1,100 @@ +--- +title: Wprowadzenie do XBL +slug: Mozilla/Tech/XUL/Kurs_XUL/Wprowadzenie_do_XBL +tags: + - Kurs_XUL + - Przewodniki + - Strony_wymagające_dopracowania + - Wszystkie_kategorie + - XBL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Introduction_to_XBL +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Plik_własności" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Treść_anonimowa">Następny »</a></p> +</div><p></p> + +<p>Język <a href="pl/XUL">XUL</a> posiada siostrzany język, <a href="pl/XBL">XBL</a> (eXtensible Bindings Language). Ten język jest stosowany do określania zachowań kontrolek XUL.</p> + +<h3 id="Wi.C4.85zania" name="Wi.C4.85zania">Wiązania</h3> + +<p>Języka XUL można używać do definiowania układu (wyglądu) interfejsu przeznaczonego dla użytkownika. Oprawę graficzną elementów można zmieniać za <a href="pl/Kurs_XUL/Dodawanie_arkuszy_styl%c3%b3w">pomocą stylów</a>. Możesz również <a href="pl/Kurs_XUL/Tworzenie_motyw%c3%b3w">tworzyć nowe motywy</a> poprzez zmianę stylów. Podstawowy wygląd wszystkich elementów, jak na przykład <a href="pl/Kurs_XUL/Paski_przewijania">pasek przewijania</a> i <a href="pl/Kurs_XUL/Kontrolki_wej%c5%9bcia#_Pola_wyboru_i_przyciski_opcji">pole wyboru</a> może być modyfikowane przez styl lub przez ustawienie atrybutów elementu.</p> + +<p>Niemniej jednak, XUL nie dostarcza możliwości, dzięki której mógłbyś zmienić sposób pracy wszystkich elementów. Na przykład, chcesz koniecznie zmienić działanie poszczególnych części funkcji scroll bar (paska przewijania). Do tego potrzebujesz języka <a href="pl/XBL">XBL</a>.</p> + +<p>XUL, XBL jest podobny do języka XML, więc ma podobną składnię. Następujący przykład pokazuje podstawowy szkielet pliku XBL:</p> + +<pre><?xml version="1.0"?> +<bindings xmlns="http://www.mozilla.org/xbl"> + <binding id="binding1"> + <!-- Zawartość, właściwość, metoda i zdarzenia opisujące są tutaj --> + </binding> + <binding id="binding2"> + <!-- Zawartość, właściwość, metoda i zdarzenia opisujące są tutaj --> + </binding> +</bindings> +</pre> + +<p>The <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#bindings">bindings</a></code></code> element is the root element of an XBL file and contains one or more <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#binding">binding</a></code></code> elements. Each <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#binding">binding</a></code></code> element declares a single binding. The <code>id</code> attribute can be used to identify the binding, as in the example above. The template has two bindings, one called <code>binding1</code> and the other called <code>binding2</code>. One might be attached to a scroll bar and the other to a menu. A binding can be attached to any XUL element. If you use CSS classes, you can use as many different bindings as you need. Note the namespace on the <code><code><a href="/pl/docs/XBL/Dokumentacja_XBL_1.0/Elementy#bindings">bindings</a></code></code> element in the template above. This declares that we are using XBL syntax.</p> + +<p>You assign a binding to an element by setting the CSS property <code><a href="pl/CSS/-moz-binding">-moz-binding</a></code> to the URL of the bindings file. For example:</p> + +<pre>scrollbar { + -moz-binding: url('chrome://findfile/content/findfile.xml#binding1'); +} +</pre> + +<p>The URL points to the binding with the id 'binding1' in the file '<a class="external" rel="freelink">chrome://findfile/content/findfile.xml</a>'. The '#binding1' syntax is used to point to a specific binding, much like how you would point to an anchor in an HTML file. You will usually put all of your bindings in a single file. The result in this example, is that all scrollbar elements will have their behavior described by the binding 'binding1'.</p> + +<p>Wiązanie posiada pięć typów, które możemy zadeklarować:</p> + +<ol> + <li>Content: child elements that are added to the element that the binding is bound to.</li> + <li>Properties: properties added to the element. They can be accessed through a script.</li> + <li>Methods: methods added to the element. They can be called from a script.</li> + <li>Events: events, such as mouse clicks and keypresses that the element will respond to. The binding can add scripts to provide default handling. In addition new events can be defined.</li> + <li>Style: custom style properties that the XBL defined element has.</li> +</ol> + +<h3 id="Przyk.C5.82ad_wi.C4.85zania" name="Przyk.C5.82ad_wi.C4.85zania">Przykład wiązania</h3> + +<p>Element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code> jest generowany wystarczająco tak jak możesz użyć do utworzenia elementu graficznego (poprzez to możesz użyć jakikolwiek element, nawet jeden zrobiony dla siebie). Przydzielając do <code>class</code> tagu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code>, możesz łączyć oprawy tylko do tych do których należą te klasy. Następujący przykład demonstruje to.</p> + +<pre class="eval"><strong>XUL (example.xul):</strong> + +<?xml version="1.0"?> +<?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?> +<?xml-stylesheet href="<a class="external" rel="freelink">chrome://example/skin/example.css</a>" type="text/css"?> + +<window + xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"> + <box class="okcancelbuttons"/> +</window> + +<strong>CSS (example.css):</strong> + +box.okcancelbuttons { + -moz-binding: url('<a class="external" rel="freelink">chrome://example/skin/example.xml#okcancel'</a>); +} + +<strong>XBL (example.xml):</strong> + +<?xml version="1.0"?> +<bindings xmlns="<span class="nowiki">http://www.mozilla.org/xbl</span>" + xmlns:xul="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"> + <binding id="okcancel"> + <content> + <xul:button label="OK"/> + <xul:button label="Cancel"/> + </content> + </binding> +</bindings> +</pre> + +<p>Ten przykład tworzy okno z pojedynczym pudełkiem. Pudełko zostało zadeklarowane dla <code>class</code> z <code>okcancelbuttons</code>. Arkusz stylów łączy nazwę pliku, którego pola z klasą <code>okcancelbuttons</code> ma specjalne łączenie, definiując w pliku XBL. Możesz użyć inne elementy w dodatku <code><code><a href="/pl/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code>, będący Twoim własnym znacznikiem:</p> + +<p>We'll look more at the details of the XBL part in the next section. However, to summarize, it causes two buttons to be added automatically inside the box, one an OK button and the other a Cancel button. W następnym artykule, zobaczymy jak utworzyć <a href="pl/Kurs_XUL/Tre%c5%9b%c4%87_anonimowa">treść korzystając się z XBL</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Plik_własności" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Treść_anonimowa">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/wyskakujące_menu/index.html b/files/pl/mozilla/tech/xul/kurs_xul/wyskakujące_menu/index.html new file mode 100644 index 0000000000..e5ccc54615 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/wyskakujące_menu/index.html @@ -0,0 +1,196 @@ +--- +title: Wyskakujące menu +slug: Mozilla/Tech/XUL/Kurs_XUL/Wyskakujące_menu +tags: + - Kurs_XUL + - Przewodniki + - Strony_wymagające_dopracowania + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Popup_Menus +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Dodatkowe_możliwości_menu" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Przewijane_menu">Następny »</a></p> +</div><p></p> + +<p>W poprzednim artykule zobaczyliśmy jak utworzyć menu na pasku menu. Język <a href="pl/XUL">XUL</a> także posiada możliwości utworzenia wyskakujących menu (<em>popup menus</em> ), które są zazwyczaj wyświetlane w momencie kiedy użytkownik naciśnie prawy przycisk myszy.</p> + +<h3 id="Tworzenie_wyskakuj.C4.85cego_menu" name="Tworzenie_wyskakuj.C4.85cego_menu">Tworzenie wyskakującego menu</h3> + +<p><a href="pl/XUL">XUL</a> posiada trzy różne rodzaje wyskakujących okienek (popups), które zostały opisane poniżej. Główną różnicą pomiędzy nimi jest sposób ich wyświetlania:</p> + +<dl> + <dt>Zwykły popup (<em>plain popup</em> ) </dt> + <dd>Wyskakujące menu pojawiające się po naciśnięciu lewego przycisku myszy na elemencie. Jest podobne do menu na pasku menu, tyle tylko że może zostać umieszczone w dowolnym miejscu oraz zawierać dowolne elementy. Przykładem jest menu pojawiające po naciśnięciu przycisku Wstecz w przeglądarce.</dd> +</dl> + +<dl> + <dt>Menu kontekstowe (<em>context popup</em> ) </dt> + <dd>Pojawia się po naciśnięciu kontekstowego przycisku myszy. Najczęściej jest to prawy przycisk, czasami inny lub z kombinacją innych klawiszy. Na przykład na Macintoshu należy użyć klawisza Ctrl oraz przycisku myszy lub przytrzymać przycisk przez chwilę. Możliwe jest także otworzenie menu kontekstowego bez użycia myszy, na przykład poprzez naciśnięcie klawisza menu na klawiaturze.</dd> +</dl> + +<dl> + <dt>Podpowiedzi (<em>tooltips</em> ) </dt> + <dd>Wyskakujące okienko pojawiające się kiedy użytkownik najedzie myszką na element. Stosuje się je zazwyczaj w celu dostarczenia dodatkowych informacji o danym elemencie.</dd> +</dl> + +<p>Wszystkie one różnią się sposobem wywołania. Mimo że mogą zawierać dowolną zawartość, dwa pierwsze zazwyczaj mają w sobie menu, a trzeci to najczęściej po prostu tekst. Rodzaj popupa określa się poprzez element go wywołujący.</p> + +<h4 id="Deklarowanie_zawarto.C5.9Bci_wyskakuj.C4.85cego_okienka" name="Deklarowanie_zawarto.C5.9Bci_wyskakuj.C4.85cego_okienka">Deklarowanie zawartości wyskakującego okienka</h4> + +<p>Wyskakujące okienko opisuje zastosowanie elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code>. Nie posiada określonych atrybutów i jest typem pudełka. Podczas wywołania wyświetli okienko zawierające to co umieścimy we wnętrzu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code>. Jednakże, powinniśmy zawsze umieszczać atrybut <code><code id="a-id"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/id">id</a></code></code> w menupopup jako powiązanie z elementem wyskakującego okienka (popup). Zobaczmy, co to oznacza wkrótce. Najpierw, przykład:</p> + +<pre><popupset> + <menupopup id="clipmenu"> + <menuitem label="Wytnij"/> + <menuitem label="Kopiuj"/> + <menuitem label="Wklej"/> + </menupopup> +</popupset> +</pre> + +<p>Jak widać, zostało stworzone proste menu wyskakujące z trzema komendami. Element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> otacza trzy pozycje menu. Należy zwrócić uwagę, że <code><code id="a-id"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/id">id</a></code></code> został ustawiony na element <code>menupopup</code>.</p> + +<p>Deklaracja menu wyskakującego okienka została cała otoczona przez element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/popupset" title="popupset">popupset</a></code></code>. Jest to opcjonalnym kontenerem na wyskakujących okienek. Nie jest on rysowany na ekranie, lecz jest używany jako miejsce deklaracji wszystkich wyskakujących okienek. Może on zawierać wiele menu wyskakujących, jeden pod drugim. Zazwyczaj w pliku <code><code><a href="/pl/docs/Mozilla/Tech/XUL/popupset" title="popupset">popupset</a></code></code> jest zadeklarowany tylko raz, chociaż nic nie stoi na przeszkodzie aby zrobić to wiele razy.</p> + +<p><span class="comment">As the name <code><code><a href="/pl/docs/Mozilla/Tech/XUL/popupset" title="popupset">popupset</a></code></code> implies, you can put multiple popup declarations inside it. Just add additional ones after the first <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> element. You can have more than one <code><code><a href="/pl/docs/Mozilla/Tech/XUL/popupset" title="popupset">popupset</a></code></code> in a file, but usually you will have only one.</span></p> + +<h4 id="Powi.C4.85zanie_wyskakuj.C4.85cego_okienka_z_elementem" name="Powi.C4.85zanie_wyskakuj.C4.85cego_okienka_z_elementem">Powiązanie wyskakującego okienka z elementem</h4> + +<p>Teraz po utworzeniu wyskakującego okna należałoby je pokazać. W tym celu musimy powiązać wyskakujące okno z elementem, gdzie powinno się ukazać. Dokonujemy tego w celu pokazania okna tylko wtedy, gdy użytkownik kliknie w danym obszarze okna. Przeważnie będzie to dany przycisk lub pudełko.</p> + +<p>Popup po utworzeniu może zostać wyświetlony. Aby pojawił się w określonym położeniu, należy go połączyć z odpowiednim elementem (najczęściej z przyciskiem lub pudełkiem elementu ). W tym celu należy do danego elementu dodać jeden z trzech atrybutów, każdy odpowiadający odpowiedniemu rodzajowi popupa. Są to: <code><code id="a-popup"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/popup">popup</a></code></code> - zwykły popup <code><code id="a-context"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/context">context</a></code></code> - kontekstowy <code><code id="a-tooltip"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/tooltip">tooltip</a></code></code> - podpowiedź</p> + +<p>Wartość atrybutu musi być ustawiona na <code><code id="a-id"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/id">id</a></code></code> <code>menupopup</code>, które chcemy, aby się pojawiło. Dlatego właśnie każde z wyskakujących okienek musi posiadać <code>id</code>. W ten bardzo prosty sposób, możemy mieć wiele wyskakujących menu w jednym pliku.</p> + +<p>W powyższym przykładzie zostaje utworzone menu kontekstowe. Następnie jest ono dołączone do pudełka elementu.</p> + +<p><span class="comment">In the example above, we want to make the popup a context menu. That means that we need to use the <code><code id="a-context"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/context">context</a></code></code> attribute and add it to the element which we want to have the popup associated with. The sample below shows how we might do this:</span></p> + +<p><br> + <span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_1.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_1.xul">Podgląd</a></p> + +<div class="float-right"><img alt="grafika:popups-ex1.png"></div> + +<pre><popupset> + <popup id="clipmenu"> + <menuitem label="Wytnij"/> + <menuitem label="Kopiuj"/> + <menuitem label="Wklej"/> + </popup> +</popupset> + +<box context="clipmenu"> + <description value="Kliknięcie kontekstowe dla menu"/> +</box> +</pre> + +<p>Jak widać, menu kontekstowe zostało powiązane z pudełkiem. Jeśli zostanie on kliknięty kontekstowym przyciskiem myszy (najczęściej prawym), pojawi się popup. Stanie się tak również po kliknięciu w jego dziecko (element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code> w naszym przykładzie). Dzięki temu, że menu dołącza się za pomocą atrybutu <code><code id="a-context"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/context">context</a></code></code> do danego elementu poprzez jego<em>id</em> , może być on użyty z wieloma obiektami. W tym wypadku pojawi się popup <code>clipmenu</code>.</p> + +<p><span class="comment">Here, the popup has been associated with a box. Whenever you context-click (right-click) anywhere inside the box, the popup menu will appear. The popup will also appear even if you click on the children of the box, so it will work if you click on the <code><code><a href="/pl/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code> element also. The <code><code id="a-context"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/context">context</a></code></code> attribute has been used to associate the box with a popup with the same id. In this case, the popup <code>clipmenu</code> will appear. This way, you can have a number of popups and associate them with different elements. You could associate multiple popups with the same element by putting more attributes of different types on an element. You could also associate the same popup with multiple elements, which is one advantage of using the popup syntax. Popups can only be associated with XUL elements; they cannot be associated with HTML elements.</span></p> + +<h3 id="Podpowiedzi" name="Podpowiedzi">Podpowiedzi</h3> + +<p>Dowiemy się w jaki sposób prosto stworzyć podpowiedź. Są dwa sposoby na utworzenie podpowiedzi. Prostsza i zarazem pierwsza możliwość to dodanie atrybutu <code><code id="a-tooltiptext"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/tooltiptext">tooltiptext</a></code></code> do elementu, do którego chcemy załączyć podpowiedź.</p> + +<p>Druga możliwość to użycie elementu typu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tooltip" title="tooltip">tooltip</a></code></code> zawierającego treść podpowiedzi. Wymaga to oddzielnego bloku kodu dla każdej podpowiedzi lub skryptu generującego zawartość podpowiedzi. Zaletą takiego rozwiązania jest to, że można zawrzeć w niej dowolną treść.</p> + +<p><span class="comment">The second method is to use a <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tooltip" title="tooltip">tooltip</a></code></code> element containing the content of a tooltip. This requires you to have a separate block of content for each tooltip or to have a script which sets the content. However, it does allow you to use any content besides text in a tooltip.</span></p> + +<p><span id="Przyk%C5%82ad_2"><a id="Przyk%C5%82ad_2"></a><strong>Przykład 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_2.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_2.xul">Podgląd</a></p> + +<pre><button label="Zapisz" tooltiptext="Kliknij tutaj, aby zapisać swoją zawartość"/> + +<popupset> + <tooltip id="moretip" orient="vertical" style="background-color: #33DD00;"> + <description value="Kliknij tutaj, aby dowiedzieć się więcej"/> + <description value="Naprawdę!" style="color: red;"/> + </tooltip> +</popupset> + +<button label="Więcej" tooltip="moretip"/> +</pre> + +<p>Każdy z tych dwóch przycisków posiada podpowiedź. Pierwszy stosuje domyślny styl podpowiedzi, natomiast drugi posiada styl nadany przez użytkownika, mający inny kolor tła oraz styl czcionki. Podpowiedź przyporządkowana została wraz przyciskiem <code>Więcej</code> za pomocą atrybutu <code>tooltip</code>, który jest ustawiony do przesłania na wartość <code><code id="a-id"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/id">id</a></code></code> elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/tooltip" title="tooltip">tooltip</a></code></code>. Zauważ, że element <code>tooltip</code> jest wciąż umieszczony wewnątrz elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/popupset" title="popupset">popupset</a></code></code>, podobnie jak inne typy wyskakujących okienek (popup).</p> + +<p><span class="comment">powyżej fragment - zrobiony</span></p> + +<h3 id="Wyr.C3.B3wnywanie_okienek" name="Wyr.C3.B3wnywanie_okienek">Wyrównywanie okienek</h3> + +<p>Domyślnie okienko wyskakujące (<em>popup</em> ) oraz kontekstowe (<em>context window</em> ) zostaną wyświetlone tam gdzie znajduje się wzkaźnik myszy. Podpowiedź (<em>tooltip</em> ) pojawi się trochę poniżej elementu aby nie był zasłonięty przez wzkaźnik myszy. Czasami jednak zdarza się potrzeba większej kontroli nad miejscem wyświetlania okienka wyskakującego, na przykład menu które pojawia się po naciśnięciu przycisku Wstecz powinno pojawić się pod nim, a nie w miejscu gdzie znajduje się wzkaźnik myszy.</p> + +<p>W tym celu można użyć dodatkowego atrybutu elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/popup" title="popup">popup</a></code></code> - <code><code id="a-position"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/position">position</a></code></code>. Można go również dodać do elementu typu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code>. Jest on używany w celu ustawienia miejsca wyświetlania okienka względem elementu go wywołującego. Posiada kilka zdefiniowanych wartości, krótko opisanych poniżej:</p> + +<dl> + <dt>after_start </dt> + <dd>popup pojawi się poniżej elementu, wyrównanie wzdłuż lewych krawędzi. Popup zostanie rozszerzony po prawej stronie jeśli jest większy niż element. W ten sposób wyświetlane jest menu, które pojawia się po naciśnięciu przycisku Wstecz w przeglądarce.</dd> + <dt>after_end </dt> + <dd>popup pojawi się poniżej elementu, wyrównanie wzdłuż prawych krawędzi.</dd> + <dt>before_start </dt> + <dd>popup pojawi się powyżej elementu, wyrównanie wzdłuż lewych krawędzi.</dd> + <dt>before_end </dt> + <dd>popup pojawi się powyżej elementu, wyrównanie wzdłuż prawych krawędzi.</dd> + <dt>end_after </dt> + <dd>popup pojawi się po prawej stronie elementu, wyrównanie wzdłuż dolnych krawędzi.</dd> + <dt>end_before </dt> + <dd>popup pojawi się po prawej stronie elementu, wyrównanie wzdłuż górnych krawędzi.</dd> + <dt>start_after </dt> + <dd>popup pojawi się po lewej stronie elementu, wyrównanie wzdłuż dolnych krawędzi.</dd> + <dt>start_before </dt> + <dd>popup pojawi się po lewej stronie elementu, wyrównanie wzdłuż górnych krawędzi.</dd> + <dt>overlap </dt> + <dd>popup pojawi się na elemencie.</dd> + <dt>at_pointer </dt> + <dd>popup pojawi się w tym samym miejscu, co wzkaźnik myszy.</dd> + <dt>after_pointer </dt> + <dd>popup pojawi się na takim samym poziomie co wzkaźnik myszy, ale poniżej elementu. W ten sposób zostaje wyświetlona podpowiedź.</dd> +</dl> + +<p>Dodając do elementu jeden lub dwa takie atrybuty, można dokładnie określić, gdzie popup powinien się pojawić (nie można określić położenia w pikselach). Atrybutu<em>position</em> można użyć z wszystkimi typami okienek wyskakujących, ale zazwyczaj nie zmienia się jego wartości dla podpowiedzi.</p> + +<p>Poniższy przykład pokazuje sposób tworzenia przycisku Wstecz wraz z menu wyskakującym:</p> + +<h4 id="Przycisk_z_menu_wyskakuj.C4.85cym" name="Przycisk_z_menu_wyskakuj.C4.85cym">Przycisk z menu wyskakującym</h4> + +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_3.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_3.xul">Podgląd</a></p> + +<pre><popupset> + <popup id="backpopup" position="after_start"> + <menuitem label="Page 1"/> + <menuitem label="Page 2"/> + </popup> +</popupset> + +<button label="Pop Me Up" popup="backpopup"/> +</pre> + +<div class="highlight"> +<h3 id="Nasz_przyk.C5.82ad:_Znajd.C5.BA_pliki" name="Nasz_przyk.C5.82ad:_Znajd.C5.BA_pliki">Nasz przykład: <code>Znajdź pliki</code></h3> + +<p>Dodajmy proste menu wyskakujące do okienka dialogowego <code>Znajdź pliki</code>. Dla przejrzystości zawartość będzie taka sama jak w menu <code>Edycja</code><code>Znajdź pliki</code>. Popup pojawi się po kliknięciu pierwszej zakładki:</p> + +<pre class="eval"><span class="highlightred"><popupset> + <popup id="editpopup"> + <menuitem label="Wytnij" accesskey="t"/> + <menuitem label="Kopiuj" accesskey="k"/> + <menuitem label="Wklej" accesskey="w" disabled="true"/> + </popup> +</popupset></span> + +<vbox flex="1"> +. +. +. + +<span class="highlightred"><tabpanel id="searchpanel" orient="vertical" context="editpopup"></span> +</pre> + +<p>Proste menu zostało dodane do pierwszej zakładki. Pojawi się ono po naciśnięciu prawego przycisku myszy (lub z klawiszem Ctrl na Macintoshu) gdziekolwiek na pierwszym panelu, natomiast kliknięcie w innym miejscu nie spowoduje żadnego efektu. Warto zauważyć że 'textbox' posiada swoje własne wbudowane menu, które zastąpi nasze.</p> + +<p>Nasz przykład, okienko dialogowe <code>Znajdź pliki</code>: <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-popups.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-popups.xul">Podgląd</a></p> +</div> + +<p>W następnym artykule zostaną <a href="pl/Kurs_XUL/Przewijane_menu">omówione menu przewijane</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Dodatkowe_możliwości_menu" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Przewijane_menu">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/własne_widoki_drzewa/index.html b/files/pl/mozilla/tech/xul/kurs_xul/własne_widoki_drzewa/index.html new file mode 100644 index 0000000000..d1ac85888d --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/własne_widoki_drzewa/index.html @@ -0,0 +1,149 @@ +--- +title: Własne widoki drzewa +slug: Mozilla/Tech/XUL/Kurs_XUL/Własne_widoki_drzewa +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Custom_Tree_Views +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Zaznaczenie_drzewa" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Szczegóły_widoku_drzewa">Następny »</a></p> +</div><p></p> + +<p>Widok drzewa przetrzymuje dane, które mają być wyświetlone w drzewie.</p> + +<h2 id="Tworzenie_w.C5.82asnych_widok.C3.B3w" name="Tworzenie_w.C5.82asnych_widok.C3.B3w">Tworzenie własnych widoków</h2> + +<p>Dotychczas używaliśmy wbudowanych wyglądów drzewa. W tej sekcji przyjrzymy się tworzeniu własnego wyglądu. Jest to konieczne w sytuacji, gdy ilość danych jest bardzo duża, lub są one kompleksowo zaaranżowane. Na przykład, wydajność była by niezbyt duża w sytuacji gdybyśmy mieli użyć treeitems kilka tysięcy razy. Możesz też tworzyć własny widok w sytuacji, gdy chcesz wykonać obliczenia na danych, które maja być wyświetlone. Ponieważ widok może magazynować i odzyskiwać dane w sposób najbardziej odpowiedni dla użytych danych, drzewo może być użyte nawet setki tysięcy razy.</p> + +<div class="note">Uwaga: The tree-related interfaces changed in <a href="/pl/Gecko" title="pl/Gecko">Gecko</a> 1.8. Zobacz <a href="/pl/Tree_Widget_Changes" title="pl/Tree_Widget_Changes">Tree Widget Changes</a>, aby uzyskać więcej informacji.</div> + +<p>Żeby implementować własny wygląd, będziesz musiał stworzyć obiekt wprowadzający interfejs <a class="external" href="http://xulplanet.com/references/xpcomref/ifaces/nsITreeView.html">nsITreeView</a>. Możesz tworzyć te obiekty w <a href="/pl/JavaScript" title="pl/JavaScript">JavaScript</a>, ale będziesz potrzebować oddzielnego obiektu dla każdego drzewa. Naturalnie, ponieważ własny widok będzie używany, wbudowany widok nie będzie już używany, więc <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code>, <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treerow" title="treerow">treerow</a></code></code> i <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code></code> będą bezużyteczne, ponieważ własny widok będzie otrzymywać dane z innego źródła. Tak więc <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></code> może zostać pusty. Przykład:</p> + +<pre><tree id="my-tree" flex="1"> + <treecols> + <treecol id="namecol" label="Name" flex="1"/> + <treecol id="datecol" label="Date" flex="1"/> + </treecols> + <treechildren/> +</tree> +</pre> + +<p>By wyznaczyć dane do pokazania w drzewie, musi być stworzony obiekt widoku, który jest użyty dla każdej komórki, całkowita liczba wierszy plus inne opcjonalne informacje. Drzewo wywoła metody widoku w celu otrzymania informacji potrzebnych do wyświetlenia.</p> + +<p>Generalnie, chociaż widok drzewa ma około trzydziestu funkcji mogących zostać zaimplementowanymi, musimy je uruchomić tylko jednokrotnie, gdy drzewo ją wywołuje.</p> + +<dl> + <dt>rowCount</dt> + <dd>Własność powinna być ustawiona, do ustalenia dla całkowitej liczby wierszy w drzewie.</dd> +</dl> + +<dl> + <dt>getCellText( row , column )</dt> + <dd>Metoda ta, zwraca tekst zawarty w podanej kolumnie i wierszu. Będzie używana do wyświetlania danych dla każdej komórki. Wiersze podaje się numerycznie, zaczynając od 0. Kolumny, to atrybut id przypisany kolumnom. W Mozilla 1.8 i późniejszych, zamiast tego będzie używany obiekt treeColumn.</dd> +</dl> + +<dl> + <dt>setTree( tree )</dt> + <dd>Metoda ta, jest wywoływana jednokrotnie, w celu umieszczenia elementu drzewa w widoku.</dd> +</dl> + +<p>Tutaj jest przykład definicji takiego obiektu, który może być wywołany, kiedy tylko chcesz:</p> + +<pre>//Moz 1.8 +var treeView = { + rowCount : 10000, + getCellText : function(row,column){ + if (column.id == "namecol") return "Wiersz "+row; + else return "18 luty"; + }, + setTree: function(treebox){ this.treebox = treebox; }, + isContainer: function(row){ return false; }, + isSeparator: function(row){ return false; }, + isSorted: function(){ return false; }, + getLevel: function(row){ return 0; }, + getImageSrc: function(row,col){ return null; }, + getRowProperties: function(row,props){}, + getCellProperties: function(row,col,props){}, + getColumnProperties: function(colid,col,props){} +}; +</pre> + +<p>Funkcje nieopisane powyżej nie pełnią żadnego zadania, lecz muszą być użyte, gdy drzewo będzie je wywoływać w celu zebrania dodatkowych informacji.</p> + +<p>Ten przykład może zostać użyty dla drzewa z 10000 wierszy. Zawartość komórek pierwszej kolumny będzie wypełniona tekstem <code>Row X</code>, gdzie X jest numerem wiersza. Zawartość komórek drugiej kolumny będzie ustawiona na ‘18 luty’. Warunek <code>if</code> funkcji <code>getCellText()</code> porównuje kolumnę z tekstem ‘namecol’. Tekst ‘namecol’ odpowiada <code>id</code> pierwszego <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code></code> w powyższym przykładzie. Przykład jest oczywiście bardzo prosty, w rzeczywistości miał być bardziej skomplikowane dane w każdej komórce.</p> + +<p>Ostatnim krokiem będzie skojarzenie obiektu widoku z drzewem. Drzewo ma własność <code>view</code>, która może być przyporządkowana do obiektu widoku deklarowanego powyżej. Możemy wyznaczyć wartość tej własności, by w dowolnym czasie, ustawić lub zmienić widok.</p> + +<p><span class="comment"><div class="note">Note: The tree-related interfaces changed in <a href="/pl/Gecko">Gecko</a> 1.8. See <a href="/pl/Tree_Widget_Changes">Tree Widget Changes</a> for details.</div> To implement a custom view, you will need to create an object which implements the <a class="external" href="http://xulplanet.com/references/xpcomref/ifaces/nsITreeView.html">nsITreeView</a> interface. You can create these objects in <a href="/pl/JavaScript">'JavaScript</a>, but you will need a separate object for each tree. Naturally, since a custom tree view is being used, the content tree view will not be used, so the <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code>, <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treerow" title="treerow">treerow</a></code></code>, and <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code></code> elements will have no purpose since the custom view will get its data from elsewhere. Thus, you can just leave the <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></code> element empty. The following example shows this:</span></p> + +<pre>function setView() +{ + document.getElementById('my-tree').view = treeView; +} +</pre> + +<p>W celu uproszczenia przykładu, użyto wbudowanego skryptu. Normalnie byłby on umieszczony w zewnętrznym pliku.</p> + +<h3 id="Przyk.C5.82ad_drzewa_u.C5.BCytkownika" name="Przyk.C5.82ad_drzewa_u.C5.BCytkownika">Przykład drzewa użytkownika</h3> + +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_treeview_1.xul.txt">Źródła</a></p> + +<div class="float-right"><img alt="grafika:treeview1.png" class="internal" src="/@api/deki/files/2515/=Treeview1.png"></div> + +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> + +<window title="Przykład okna" id="tree-window" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + onload="setView();"> + +<script> +//Moz 1.8 +var treeView = { + rowCount : 10000, + getCellText : function(row,column){ + if (column.id == "namecol") return "Row "+row; + else return "February 18"; + }, + setTree: function(treebox){ this.treebox = treebox; }, + isContainer: function(row){ return false; }, + isSeparator: function(row){ return false; }, + isSorted: function(){ return false; }, + getLevel: function(row){ return 0; }, + getImageSrc: function(row,col){ return null; }, + getRowProperties: function(row,props){}, + getCellProperties: function(row,col,props){}, + getColumnProperties: function(colid,col,props){} +}; + +function setView(){ + document.getElementById('my-tree').view = treeView; +} +</script> + +<tree id="my-tree" flex="1"> + <treecols> + <treecol id="namecol" label="Nazwa" flex="1"/> + <treecol id="datecol" label="Data" flex="1"/> + </treecols> + <treechildren/> +</tree> + +</window> +</pre> + +<p>Na obrazku widoczne są 2 kolumny każda z danymi, pobranymi z funkcji <code>getCellText()</code>. Funkcja <code>setView()</code> była wywołana w operatorze okna <code>onload()</code>, jednak mógłbyś ustawić widok jeżeli tak sobie zażyczysz. Widok możesz zmieniać w dowolnym momencie.</p> + +<p>Rzeczą, którą należy zapamiętać to, to że funkcja <code>getCellText()</code> jest wywoływana tylko kiedy jest potrzeba pokazania zawartości. Z pośród 10000 wierszy powyżej, <code>getCellText()</code> jest uruchamiana tylko dla aktualnie widocznych komórek. Na obrazku jest pokazanych tylko 7 wierszy, ostatni tylko częściowo, więc <code>getCellText</code> będzie wywołana tylko 14 razy, po razie dla każdego wiersza i kolumny. Dla innych wierszy jest uruchamiana w momencie przewijania przez użytkownika. Dzięki temu drzewo działa bardziej efektywnie.</p> + +<p>Zauważ to, że obiekt widoku jest dostępny też dla drzew używających wbudowanego wyglądu. Możesz używać tego by zdobyć etykiety i inne informacje nt. komórki.</p> + +<p><a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsITreeView.html">Interfejs nsITreeView</a> listuje wszystkie metody i własności, które możemy zastosować dla widoku drzewa.</p> + +<p>Następnie, zobaczymy więcej <a href="/pl/Kurs_XUL/Szczegóły_widoku_drzewa" title="pl/Kurs_XUL/Szczegóły_widoku_drzewa">szczegółów widoku drzewa</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Zaznaczenie_drzewa" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Szczegóły_widoku_drzewa">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/zaawansowane_reguły/index.html b/files/pl/mozilla/tech/xul/kurs_xul/zaawansowane_reguły/index.html new file mode 100644 index 0000000000..1f895144ec --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/zaawansowane_reguły/index.html @@ -0,0 +1,219 @@ +--- +title: Zaawansowane reguły +slug: Mozilla/Tech/XUL/Kurs_XUL/Zaawansowane_reguły +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Advanced_Rules +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Źródła_danych_RDF" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Trwałe_dane">Następny »</a></p> +</div><p></p> + +<p>Artykuł ten, opisuje więcej zaawansowanych zasad składni.</p> + +<h2 id="Pe.C5.82ne_zasady_sk.C5.82adni" name="Pe.C5.82ne_zasady_sk.C5.82adni">Pełne zasady składni</h2> + +<p>Reguły składni opisującej dotychczas używane były w pewnych ilościach w kodzie źródłowym ale czasami będą potrzebne do wyświetlenia dane w sposób bardziej skomplikowany. Prosta reguła składni jest naprawdę tylko skrótem dla pełnej zasady składni, która jest opisana poniżej. Jak prosta zasada składni, tak i pełna zasada jest umieszczana w obrębie tagu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/rule" title="rule">rule</a></code></code>.</p> + +<p>Pełne reguły zawierają trzy tagi będące potomnymi, <code><code><a href="/pl/docs/Mozilla/Tech/XUL/conditions" title="conditions">conditions</a></code></code> stanami tagu, <code><code><a href="/pl/docs/Mozilla/Tech/XUL/bindings" title="bindings">bindings</a></code></code> opraw tagu i <code><code><a href="/pl/docs/Mozilla/Tech/XUL/action" title="action">action</a></code></code> akcji tagu, poprzez <code><code><a href="/pl/docs/Mozilla/Tech/XUL/bindings" title="bindings">bindings</a></code></code> tag jest nie zawsze potrzebny.</p> + +<p>Element <code>conditions</code> jest użyty jako specyficzne kryterium odpowiadające dawanych źródeł. Możesz określić liczbę stanów odpowiadającą, wszystkim które muszą odpowiedzieć. W prostej regule składni, stany te są umiejscowione bezpośrednio w <code>rule</code> własnej elementu.</p> + +<p>Jeżeli warunki spotkania odpowiadają zawartości źródła, zawartość ta umieszczona wewnątrz tagu <code>actions</code> jest wygenerowana. W prostej składni, zawartość jest umieszczona bezpośrednio wewnątrz <code>rule</code>.</p> + +<h2 id="Zasady" name="Zasady">Zasady</h2> + +<p>Kiedy drzewo, menu lub inny element z kodem źródłowym wygenerują zawartość, budowniczy szablonu pierwszy znajdzie źródło kierując się atrybutem <code>ref</code>. To potem powtarzamy nad całym tym źródłem będącego potomkiem zawartości. Stosuje się to w każdym stanie źródła. Jeśli warunki odpowiadają zawartości źródła, to zawartość w elemencie <code>actions</code> jest generowana dla tego źródła. Jeśli warunki są nie spełnione, zawartość nie jest generowana.</p> + +<h3 id="Element_content" name="Element_content">Element <code>content</code></h3> + +<p>Element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/conditions" title="conditions">conditions</a></code></code> może zawierać trzy elementy. Pierwszy do zawartość elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/content" title="content">content</a></code></code>, który powinien zawsze występować tylko raz. Służy on za miejsce przechowywania podczas przeglądania zasobów przez budowniczego szablonu. Wyszczególnia on nazwę zmiennej, w której przechowywany jest odnośnik do głównego zasobu ( + + <i>root resource</i> + ), podczas gdy warunki są analizowane w celu dopasowania. Główny zasób jest określony przez atrybut <code><code id="a-ref"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/ref">ref</a></code></code> w elemencie zawierającym szablon.</p> + +<p>Składnia elementu content zawiera następujący kod:</p> + +<pre><content uri="?var"/> +</pre> + +<p>Znak zapytania oznacza, że następujący potem tekst jest zmienną. Możesz więc użyć zmiennej 'var' wewnątrz pozostałych warunków. Oczywiście możesz nazywać zmienną jak tylko chcesz.</p> + +<h3 id="Element_member" name="Element_member">Element <code>member</code></h3> + +<p>Następujący element jest elementem <code><code><a href="/pl/docs/Mozilla/Tech/XUL/member" title="member">member</a></code></code>, który jest używany do przeglądania zestawu potomnych zasobów. W terminach RDF oznacza to zasobnik taki jak Seq, Bag albo Alt. Powiedzmy, że masz listę miast opisanych w następującym fragmencie RDF/XML:</p> + +<pre><RDF:Seq about="http://www.xulplanet.com/rdf/weather/cities"> + <RDF:li resource="http://www.xulplanet.com/rdf/weather/city/Paris"/> + <RDF:li resource="http://www.xulplanet.com/rdf/weather/city/Manchester"/> + <RDF:li resource="http://www.xulplanet.com/rdf/weather/city/Melbourne"/> + <RDF:li resource="http://www.xulplanet.com/rdf/weather/city/Kiev"/> +</RDF:Seq> + +<RDF:Description about="http://www.xulplanet.com/rdf/weather/city/Paris"> + <cityset:name>Paris</cityset:name> +</RDF:Description> + +. +. +. +</pre> + +<p>Możesz chcieć wyświetlić element wiersza w drzewie dla każdego opisu. Do zrobienia tego, użyj elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/member" title="member">member</a></code></code> jak poniżej:</p> + +<pre><tree id="citiesTree" datasources="weather.rdf" + ref="http://www.xulplanet.com/rdf/weather/cities"> + <template> + <rule> + <conditions> + <content uri="?list"/> + <member container="?list" child="?city"/> + </conditions> + <rule> + <template> +</tree> +</pre> + +<p><br> + Budowniczy szablonu rozpoczyna od przechwycenia wartości atrybutu <code><code id="a-ref"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/ref">ref</a></code></code>, którą w tym przypadku jest <code><a class="external" href="http://www.xulplanet.com/rdf/weather/cities" rel="freelink">http://www.xulplanet.com/rdf/weather/cities</a></code>. Ten zasób będzie umieszczone w zmiennej 'list', jak zostało ustalone w znaczniku <code><code><a href="/pl/docs/Mozilla/Tech/XUL/content" title="content">content</a></code></code>. Możemy następnie pobrać pokrewne zasoby używając zmiennej 'list'.</p> + +<p>Potem budowniczy szablonu widzi element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/member" title="member">member</a></code></code>. Sprawia on, że budowniczy wędruje przez elementy potomne danego elementu. Element rodzic jest wyszczególniony przez atrybut <code><code id="a-container"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/container">container</a></code></code>, a elementy dzieci - przez atrybut <code>child</code>. W przykładzie powyżej wartość atrybutu <code><code id="a-container"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/container">container</a></code></code> to zmienna 'list'. Z tego wynika, że rodzic będzie wartością zmiennej list, która została ustawiona na główny zasób '<a class="external" href="http://www.xulplanet.com/rdf/weather/cities" rel="freelink">http://www.xulplanet.com/rdf/weather/cities</a>'. Efektem tego będzie przejście przez listę dzieci tego zasobu.</p> + +<p>Jeśli spojrzymy na powyższy RDF zobaczymy, że zasób "<a class="external" href="http://www.xulplanet.com/rdf/weather/cities" rel="freelink">http://www.xulplanet.com/rdf/weather/cities</a>" ma czworo dzieci, każdego dla innego miasta. Budowniczy szablonu wędruje przez każdego z nich, dopasowując go do wartości atrybutu dziecka ("child attribute"). W tym przypadku jest to po prostu wartość "city". Tak więc budowniczy wstawi zmienną "city" w miejsce wartości każdego zasobu potomnego.</p> + +<p>Ponieważ nie ma więcej warunków, warunek pasuje do każdego z tych czterech zasobów i budowniczy wygeneruje zawartość dla każdego z tej czwórki. Oczywiście powyższy przykład nie ma żadnej zawartości. Dodamy ją później.</p> + +<h3 id="triple_element" name="triple_element"><code>triple</code> element</h3> + +<p>Następnym elementem jest element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/triple" title="triple">triple</a></code></code>. Jest używany w celu sprawdzenia istnienia danego powiązania (potwierdzenie: prawda/fałsz) w danych źródłowych RDFu. + + <i>Triple</i> + jest jak własność zasobu. Na przykład triple istnieje pomiędzy zakładką a jej adresem URL. Można to przedstawić następująco:</p> + +<pre>A Bookmark to mozilla.org -> URL -> www.mozilla.org +</pre> + +<p>Znaczy to, że jest powiązanie ( + <i>triple</i> + ) pomiędzy zakładką 'A Bookmark to mozilla.org', a 'www.mozilla.org' poprzez własność URL. Pierwsza część tego wyrażenia jest nazwana podmiotem, druga - orzeczeniem, a trzecia to obiekt. Jako element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/triple" title="triple">triple</a></code></code> wyrażałby się następująco:</p> + +<pre><triple subject="A Bookmark to mozilla.org" + predicate="URL" + object="www.mozilla.org"/> +</pre> + +<p>Zostało to nieco uproszczone w porównaniu z realnym kodem. Orzeczenie normalnie zawierałoby miejsce na nazwę, a podmiot byłby identyfikatorem id zasobu zakładki, a nie jej tytułem, jak powyżej. W rzeczywistości, tytuł zakładki byłby kolejnym powiązaniem w źródle danych, używanym z orzeczeniem Name.</p> + +<p>Możesz wymienić podmiot i obiekt w elemencie <code>triple</code> na odnośniki zmiennych, a wtedy w miejsce zmiennych wstawione zostaną wartości. Jeśli żadna wartość nie zostanie zdefiniowana dla danej zmiennej, budowniczy szablonu poszuka zmiennej w źródle danych i przypisze ją danej zmiennej.</p> + +<p>Powiedzmy, że chcemy dodać przewidywanie pogody do danych źródłowych miast. Można użyć następujących warunków:</p> + +<pre><conditions> + <content uri="?list"/> + <member container="?list" child="?city"/> + <triple subject="?city" + predicate="http://www.xulplanet.com/rdf/weather#prediction" + object="?pred"/> +</conditions> +</pre> + +<p>Budowniczy szablonu będzie wędrował przez każde miasto jak wcześniej. Gdy dojdzie do triple, poszuka potwierdzenia w danych źródłowych RDFu czy istnieją przewidywania pogodowe dla danego miasta. Zmiennej 'pred' zostaną przypisane odpowiednie dane. Budowniczy powtórzy to dla każdego z czterech miast. Pojawi się dopasowanie, a budowniczy wygeneruje zawartość każdego miasta, które posiada prognozę. Jeśli miasto nie ma zasobu prognozowego, warunek nie pasuje do niego i nie zostanie wygenerowana zawartość dla takiego miasta. Zauważmy, że nie trzeba wstawiać 'rdf:' na początku orzeczenia, jako że tą część zakładamy wcześniej.</p> + +<p>Moglibyśmy zastępować także <code>object</code> wartością wewnątrz linii. Na przykład:</p> + +<pre><conditions> + <content uri="?city"/> + <triple subject="?city" + predicate="http://www.xulplanet.com/rdf/weather#prediction" + object="Cloudy"/> +</conditions> +</pre> + +<p>Ten przykład jest podobny, ale wyszczególniliśmy fakt, że chcemy znaleźć dopasowanie do 'Cloudy'. Rezultat jest taki, że warunki będą pasować tylko dla miast, dla których prognoza zawiera 'Cloudy'.</p> + +<p>Możemy dodać więcej powiązań, gdybyśmy wymagali więcej dopasowań. Na przykład we fragmencie powyżej, moglibyśmy chcieć sprawdzić temperaturę i prędkość wiatru. Aby to zrobić należy po prostu dodać następne powiązanie, które sprawdza dodatkowe zasoby. Warunek będzie spełniony, jeśli wszystkie powiązania dostarczą odpowiednich wartości.</p> + +<p>Poniższy przykład sprawdzi dodatkowe powiązanie, warunek na nazwę miasta. Będzie to przypisane do zmiennej 'name'. Warunek będzie spełniony, wtedy i tylko wtedy gdy miasto ma zarówno nazwę jak i prognozę.</p> + +<pre><conditions> + <content uri="?list"/> + <member container="?list" child="?city"/> + <triple subject="?city" + predicate="http://www.xulplanet.com/rdf/weather#name" + object="?name"/> + <triple subject="?city" + predicate="http://www.xulplanet.com/rdf/weather#prediction" + object="?pred"/> +</conditions> +</pre> + +<h2 id="Generowanie_zawarto.C5.9Bci" name="Generowanie_zawarto.C5.9Bci">Generowanie zawartości</h2> + +<p>Zawartość, którą generuje reguła, jest wyszczególniona wewnątrz elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/action" title="action">action</a></code></code>. Powinna to być zawartość pod poziomów drzewa, elementów menu albo jakakolwiek, jaką chcesz wygenerować. Z tego wynika, że dla przykładu z pogodą powyżej, możesz użyć zmiennych 'name' albo 'pred' do wyświetlania miasta albo prognozy. Możesz użyć także zmiennych 'list' albo 'city', ale one przechowują zasoby, a nie tekst, więc nie będą mieć raczej znaczącej wartości dla użytkowników.</p> + +<p>W prostej składni reguły używamy składni <code>uri='rdf:*'</code>, aby zaznaczyć, gdzie powinna być wygenerowana zawartość. W pełnej składni ustawia się wartość atrybutu <code><code id="a-uri"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/uri">uri</a></code></code> na zmienną, którą używasz w warunkach. Zwyczajowo będzie to zmienna przypisana do atrybutu <code>child</code> elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/member" title="member">member</a></code></code>.</p> + +<h3 id="Complete_Tree_Example" name="Complete_Tree_Example">Complete Tree Example</h3> + +<p>Następny przykład pokazuje kompletne drzewo w czasie działania. Możesz zobaczyć plik RDF osobno <a href="https://developer.mozilla.org/samples/xultu/examples/weather.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/weather.rdf">RDF</a></p> + +<p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advrules_1.xul.txt">Źródła</a></p> + +<pre><tree id="weatherTree" flex="1" datasources="weather.rdf" + ref="http://www.xulplanet.com/rdf/weather/cities"> + <treecols> + <treecol id="city" label="City" primary="true" flex="1"/> + <treecol id="pred" label="Prediction" flex="1"/> + </treecols> + + <template> + <rule> + <conditions> + <content uri="?list"/> + <member container="?list" child="?city"/> + <triple subject="?city" + predicate="http://www.xulplanet.com/rdf/weather#name" + object="?name"/> + <triple subject="?city" + predicate="http://www.xulplanet.com/rdf/weather#prediction" + object="?pred"/> + </conditions> + <action> + <treechildren> + <treeitem uri="?city"> + <treerow> + <treecell label="?name"/> + <treecell label="?pred"/> + </treerow> + </treeitem> + </treechildren> + </action> + </rule> + </template> +</tree> +</pre> + +<p>Dwie kolumny pokazują nam się w tym drzewie, jedna wyświetla cechy nazwy każdego pod poziomów, a reszta wyświetla przewidywane cechy.</p> + +<div class="note">Jeśli użyjemy flagi <code>dont-build-content</code> zmniejszymy drzewo, zamieniając element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/content" title="content">content</a></code></code> z elementem <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code>.</div> + +<h2 id="Dodawanie_dodatkowych_wi.C4.85za.C5.84" name="Dodawanie_dodatkowych_wi.C4.85za.C5.84">Dodawanie dodatkowych wiązań</h2> + +<p>Końcowy element możesz dodać wewnątrz reguły elementu <code><code><a href="/pl/docs/Mozilla/Tech/XUL/bindings" title="bindings">bindings</a></code></code>. Wewnątrz jego, możesz położyć jeden lub więcej elementów <code><code><a href="/pl/docs/Mozilla/Tech/XUL/binding" title="binding">binding</a></code></code>. Oprawiając w zasady mamy taką samą składnię jako potrójny i spełnia prawie tą samą funkcję. Na przykład w przykładzie poniżej możemy dodać następujące oprawy:</p> + +<pre><bindings> + <binding subject="?city" + predicate="http://www.xulplanet.com/rdf/weather#temperature" + object="?temp"/> +</bindings> +</pre> + +<p>Taka oprawa przechwyci zasoby temperaturowe każdego drzewa i przypisze je do zmiennej 'temp'. Jest to bardzo podobne do tego, co robi powiązanie. Różnica jest taka, że oprawa nie jest sprawdzana, gdy próbuje sprawdzić warunki. Oznacza to, że miasto musi mieć nazwę i prognozę do wyświetlenia, chociaż nie ma znaczenia czy ma temperaturę. Jednak, jeśli ma, będzie ona umieszczona w zmiennej 'temp', żeby mogła być użyta w akcji. Jeśli miasto nie ma temperatury, zmienna "temp" będzie miała pusty string.</p> + +<p>Następnie, poszukamy jak zapisać stanowisko elementów XUL.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Źródła_danych_RDF" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Trwałe_dane">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/zastosowanie_odstępów/index.html b/files/pl/mozilla/tech/xul/kurs_xul/zastosowanie_odstępów/index.html new file mode 100644 index 0000000000..8883f13c69 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/zastosowanie_odstępów/index.html @@ -0,0 +1,141 @@ +--- +title: Zastosowanie odstępów +slug: Mozilla/Tech/XUL/Kurs_XUL/Zastosowanie_odstępów +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Using_Spacers +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Dodawanie_elementów_HTML" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dodatkowe_możliwości_przycisku">Następny »</a></p> +</div><p></p> + +<p>Artykuł pokazuje jak dodać odstępy pomiędzy elementami jakie stworzyliśmy.</p> + +<h2 id="Dodawanie_odst.C4.99p.C3.B3w" name="Dodawanie_odst.C4.99p.C3.B3w">Dodawanie odstępów</h2> + +<p>Jednym z problemów przy programowaniu interfejsów użytkownika jest to, że każdy użytkownik posiada inny monitor. Niektórzy użytkownicy posiadają monitory o dużej rozdzielczości, natomiast inni mają monitory o małej rozdzielczości. W dodatku, różne platformy mają określone wymagania, jeśli dodamy obsługę wielu języków, tekst w jednym języku może wymagać więcej miejsca, niż inny język.</p> + +<p><br> + Aplikacje, które potrzebują obsługę wielu platform i języków zazwyczaj posiadają własne okna z dużą przestrzenią pozwalającą na to. Niektóre platformy i zestawy narzędziowe interfejsu użytkownika dostarczają komponentów, które są wystarczająco eleganckie na zmianę rozmiaru i możliwość zmiany swojej pozycji, tak, aby dopasować się do potrzeb użytkownika (dla przykładu Java używa menedżera układu rozmieszczenia).</p> + +<p>XUL dostarcza możliwości do automatycznego pozycjonowania i zmiany rozmiaru elementów. Jak widzieliśmy, okno znajdowania plików pojawia się w takim rozmiarze, że dopasowuje elementy w swoim wnętrzu. Za każdym razem, gdy dodajemy kolejny element, okno staje się większe.</p> + +<p>XUL używa systemu rozkładu elementów nazwanego 'Model pudełkowy'. Pomówimy o tym w <a href="pl/Kurs_XUL/Model_pude%c5%82kowy">kolejnym rozdziale</a>, ale zasadniczo pozwala podzielić okno na szereg pól przechowujących elementy. Pola będą pozycjonowane, a ich rozmiar zmieniany w oparciu o specyfikację jaką możesz zdefiniować. Teraz wiesz, że element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> jest typem pola.</p> + +<p>Zanim przejdziemy do szczegółów pól, wprowadzimy inny element XUL użyteczny dla rozkładu, <code><code><a href="/pl/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code></code>. Odstęp jest bardzo prosty i wymaga tylko jednego atrybutu, jaki wyjaśnimy za chwilę. Najprostszy odstęp wygląda następująco:</p> + +<pre class="eval"><spacer flex="1"/> +</pre> + +<p><code><code><a href="/pl/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code></code> jest stosowany do umieszczenia pustej przestrzeni w oknie. Najbardziej użyteczną możliwością jest to, że może rosnąć lub się kurczyć, jeśli użytkownik zmienia rozmiar okna. Byłoby to jak gdyby umieszczenie przycisków z prawej strony lub u dołu okna i przymocowanie ich do prawego lub dolnego brzegu bez względu na to, jaki jest rozmiar okna. Jak zobaczymy, można użyć szeregu odstępów do stworzenia kliku efektów rozkładu elementów.</p> + +<p>W powyższej składni odstęp ma jeden atrybut nazwany <code><code id="a-flex"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/flex">flex</a></code></code>. Jest on używany do definiowania elastyczności odstępu. W powyższym przypadku odstęp ma flex równy 1, czyni to element odstępu rozciągniętym. Jeśli umieścisz odstęp bezpośrednio wewnątrz okna, jego rozmiar będzie rósł, gdy będzie zmieniał się rozmiar okna.</p> + +<p>Wkrótce dodamy odstęp do naszego okna dialogowego <code>Znajdź pliki</code>. Najpierw, spójrzmy na to, co stanie się, kiedy bieżące okno dialogowe zmieni swój rozmiar.</p> + +<p><img alt="Grafika:springs1.png"></p> + +<p>Jeśli zmienisz rozmiar okna znajdowania plików, zobaczysz, że elementy pozostały tam, gdzie były na początku. Żaden z nich nie został przesunięty lub nie zmienił się jego rozmiar, mimo że okno ma więcej miejsca. Zobaczmy, co się zdarzy, kiedy dodamy odstęp pomiędzy polem tekstowym a przyciskiem <code>Znajdź</code>.</p> + +<p><img alt="Grafika:springs2.png"></p> + +<p>Po dodaniu odstępu i zmianie rozmiaru okna widać, że odstęp wypełnił przestrzeń. Przyciski zostały przesunięte.</p> + +<div class="highlight"> +<h5 id="Przyk.C5.82ad_okna:_Znajd.C5.BA_pliki" name="Przyk.C5.82ad_okna:_Znajd.C5.BA_pliki">Przykład okna: <code>Znajdź pliki</code></h5> + +<p>Kod dodający odstęp został podany poniżej. Wstaw go przed przyciskiem <code>Znajdź</code>.</p> + +<pre class="eval"><span class="highlightred"><spacer flex="1"/></span> + +<button id="find-button" label="Znajdź"/> +</pre> +</div> + +<h2 id="Wi.C4.99cej_o_elastyczno.C5.9Bci" name="Wi.C4.99cej_o_elastyczno.C5.9Bci">Więcej o elastyczności</h2> + +<p>XUL rozkłada elementy w oknie poprzez obliczenie odpowiedniej szerokości i wysokości dla elementów, a potem dodaje przestrzeń, gdzie są elastyczne. O ile nie określisz informacji o szerokości i wysokości elementu, domyślny rozmiar elementu jest określony przez jego zawartość. Zauważ, że przycisk <code>Anuluj</code> w okienkach dialogowych jest zawsze ustawiony na taką szerokość aby zmieścił się wewnątrz niego cały tekst. Jeśli tworzysz przycisk z bardzo długą etykietą, domyślny rozmiar przycisku będzie dosyć duży aby przechować całą etykietę. Pozostałe elementy takie jak pole tekstowe mają wybrany odpowiedni domyślny rozmiar.</p> + +<p>Atrybut <code>flex</code> jest używany do określenia, czy element może zmienić rozmiar odpowiedniego pola (w tym przypadku, okna). Już widzieliśmy, że atrybut flex stosuje się do odstępów, ale może być zastosowany do dowolnego elementu. Na przykład możesz chcieć zmienić rozmiar przycisku <code>Znajdź</code>.</p> + +<p><img alt="Grafika:springs3.png"></p> + +<p>Jak widzisz na obrazku, przez umieszczenie atrybutu <code>flex</code> w przycisku <code>Znajdź</code>, zmienia on rozmiar, kiedy zmieniany jest rozmiar okna. Odstęp nie jest w rzeczywistości niczym specjalnym. Właściwie może być rozpatrywany jako ukryte okno. Działa w ten sam sposób, co przycisk z wyjątkiem tego, że nie jest odrysowywany na ekranie.</p> + +<p>Na powyższym rysunku można zauważyć jeszcze jedną rzecz. Nie tylko przycisk <code>Znajdź</code> zmienia rozmiar, ale także przestrzeń pojawiająca się pomiędzy etykietą główną a przyciskiem. Oczywiście jest to odstęp, jaki wstawiliśmy wcześniej. Również on zmienia rozmiar sam. Jeśli spojrzysz dokładnie, powinieneś zauważyć, że zmiana w rozmiarze dokonała się równo pomiędzy odstępem a przyciskiem. Odstęp odebrał połowę wolnej przestrzeni a przycisk druga połowę.</p> + +<p>Przyczyna takiego efektu jest to, że zarówno odstęp jak i przycisk <code>Znajdź</code> mają atrybut <code>flex</code>. Ponieważ oba są elastyczne. Zarówno przycisk jak i odstęp równo zmieniają rozmiar.</p> + +<p>A co jeśli chcesz ustawić jeden element rosnący dwukrotnie w stosunku do innego? Możesz zastosować większą liczbę jako wartość atrybutu <code>flex</code>. Wartości elementu flex są współczynnikami. jeśli jeden element ma flex równy 1 a kolejny ma flex równy 2 drugi element wzrasta dwukrotnie w stosunku do pierwszego. W efekcie, flex równy 2 mówi, że ten element ma flex który jest dwa razy większy niż elementy mające flex równy 1.</p> + +<p>Atrybut <code>flex</code> jest używany do określenia aktualnego rozmiaru. Zamiast tego określa, jak pusta przestrzeń dzieli się miedzy potomkami pola kontenera. Przyjrzymy się polom w kolejnym rozdziale. Jeśli domyślny rozmiar potomków został określony, wartości elastyczności są używane do dzielenia pozostałej pustej przestrzeni pola. Na przykład jeśli pole ma 200 pikseli szerokości i zawiera dwa elastyczne przyciski, pierwszy na 50 pikseli a drugi na 90 pikseli będzie 60 pikseli przestrzeni między nimi, jeśli oba przyciski mają wartość flex równą 1, przestrzeń będzie dzielona równo z 30 dodatkowymi pikselami szerokości dla każdego przycisku. Jeśli elastyczność drugiego przycisku wzrosła do 2, pierwszy przycisk odbierze 20 pikseli dodatkowej przestrzeni a drugi przycisk odbierze 40 pikseli dodatkowej przestrzeni.</p> + +<p>Atrybuty <code>flex</code> może być umieszczony w dowolnym elemencie, jednak ma znaczenie tylko wtedy, gdy umieścimy go w elemencie bezpośrednio wewnątrz pola XUL. Oznacza to, że chociaż możesz umieścić flex w elemencie HTML-a, nie uzyskasz takiego efektu, jeśli ten element jest wewnątrz elementu, nie - pola.</p> + +<p>Spójrz na te przykłady:</p> + +<h5 id="Przyk.C5.82ady_flex" name="Przyk.C5.82ady_flex">Przykłady <code>flex</code></h5> + +<pre class="eval">Przykład 1: + <button label="Znajdź" flex="1"/> + <button label="Anuluj" flex="1"/> + +Przykład 2: + <button label="Znajdź" flex="1"/> + <button label="Anuluj" flex="10"/> + +Przykład 3: + <button label="Znajdź" flex="2"/> + <button label="Zastąp"/> + <button label="Anuluj" flex="4"/> + +Przykład 4: + <button label="Znajdź" flex="2"/> + <button label="Zastąp" flex="2"/> + <button label="Anuluj" flex="3"/> + +Przykład 5: + <html:div> + <button label="Znajdź" flex="2"/> + <button label="Zastąp" flex="2"/> + </html:div> + +Przykład 6: + <button label="Znajdź" flex="145"/> + <button label="Zastąp" flex="145"/> +</pre> + +<dl> + <dt>Przykład 1 </dt> + <dd>W tym przypadku elastyczność jest dzielona równo pomiędzy oba przyciski. Oba przyciski zmienią rozmiar równo</dd> + <dt>Przykład 2 </dt> + <dd>Tu oba przyciski będą rosły, ale przycisk <code>Anuluj</code> będzie rósł 10 razy bardziej, niż przycisk <code>Znajdź</code> ponieważ ma wartość flex, która jest 10 razy większa od wartości flex przycisku <code>Znajdź</code>. Dostępna przestrzeń będzie dzielona na jedną część dla przycisku <code>Znajdź</code> i 10 części dla przycisku <code>Anuluj</code>.</dd> + <dt>Przykład 3 </dt> + <dd>Tylko dwa z tych przycisków są tu oznaczone jako elastyczne. Przycisk replace nigdy nie zmieni rozmiaru ale pozostałe dwa tak. Przycisk <code>Anuluj</code> zawsze będzie zmieniał rozmiar dwukrotnie w stosunku do przycisku <code>Znajdź</code> ponieważ jego wartość flex jest dwukrotnie większa.</dd> + <dt>Przykład 4 </dt> + <dd>W tym przypadku, wszystkie trzy przyciski są elastyczne. Przyciski Find i Replace będą tego samego rozmiaru ale przycisk <code>Anuluj</code> będzie nieco większy (dokładnie 50% większy)</dd> + <dt>Przykład 5 </dt> + <dd>Tu, dwa przyciski, są umieszczone wewnątrz elementu <code>div</code>. Elastyczność jest tu bez znaczenia ponieważ przyciski nie są bezpośrednio w polu. Efekt będzie taki sam, jeśli zostanie pominięty atrybut <code>flex</code>.</dd> + <dt>Przykład 6 </dt> + <dd>Ponieważ wartości flex są takie same w obu przyciskach, będą równo rozwijane. Działałoby to również z wartościami flex równymi jeden zamiast 145. Nie ma różnic w tym przypadku. Zalecane jest używanie mniejszych liczb dla zwiększenia czytelności.</dd> +</dl> + +<p>Zauważ, że pozostałe czynniki, takie jak etykiety przycisków i minimalne rozmiary przycisków będą wpływały na aktualny rozmiar przycisków. Na przykład przycisk nie zostanie zmniejszony mniej niż do przestrzeni potrzebnej do przechowania jego etykiety.</p> + +<p>Określenie wartości flex na 0 ma taki sam efekt, jak całkowite pominięcie atrybutu flex. Oznacza to, że elementy nie są wcale elastyczne. Czasami możesz zobaczyć wartość flex określoną w procentach. Nie ma to specjalnego znaczenia i jest traktowane tak, jak gdyby nie było tam znaku procenta.</p> + +<p>Możesz zauważyć, że kiedy zmieniasz rozmiar okna dialogowego pionowo, przyciski zmieniają rozmiar same dopasowując się do wysokości okna. Jest tak ponieważ wszystkie przyciski mają wbudowany pionowy flex dodany im przez okno. W kolejnym rozdziale nauczymy się jak to zmienić.</p> + +<div class="highlight"> +<h5 id="Przyk.C5.82ad:_Znajd.C5.BA_pliki" name="Przyk.C5.82ad:_Znajd.C5.BA_pliki">Przykład: <code>Znajdź pliki</code></h5> + +<p><a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-springs.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-springs.xul">Podgląd</a></p> +</div> + +<p>W następnym artykule dowiemy się kilku <a href="pl/Kurs_XUL/Dodatkowe_mo%c5%bcliwo%c5%9bci_przycisku">dodatkowych możliwościach przycisku</a>.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Dodawanie_elementów_HTML" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Dodatkowe_możliwości_przycisku">Następny »</a></p> +</div><p></p> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/zaznaczenie_drzewa/index.html b/files/pl/mozilla/tech/xul/kurs_xul/zaznaczenie_drzewa/index.html new file mode 100644 index 0000000000..4bd2e007b6 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/zaznaczenie_drzewa/index.html @@ -0,0 +1,73 @@ +--- +title: Zaznaczenie drzewa +slug: Mozilla/Tech/XUL/Kurs_XUL/Zaznaczenie_drzewa +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Tree_Selection +--- +<p> +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Dodatkowe_możliwości_drzewa" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Własne_widoki_drzewa">Następny »</a></p> +</div> +<p></p><p>Artykuł opisuje, jak pobrać i ustawić zaznaczone pozycje w drzewie. +</p> +<h3 id="Pobieranie_zaznaczonych_element.C3.B3w_drzewa" name="Pobieranie_zaznaczonych_element.C3.B3w_drzewa"> Pobieranie zaznaczonych elementów drzewa </h3> +<p>Każdy element <code><code><a href="/pl/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code> w drzewie może być zaznaczony indywidualnie. Dodając atrybut <code><code id="a-seltype"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/seltype">seltype</a></code></code> do drzewa, ustawiamy wartość <code>single</code>, to zezwoli na zaznaczenia tylko jednego wiersza na raz. W przeciwnym wypadku użytkownik mógłby zaznaczać wiele wierszy na raz i to niekoniecznie sąsiednich. Drzewo zawiera kilka funkcji służących do określania, czy pozycja została zaznaczona. +</p> +<h4 id="Podtrzymanie_zdarzenia_zaznaczenia" name="Podtrzymanie_zdarzenia_zaznaczenia"> Podtrzymanie zdarzenia zaznaczenia </h4> +<p>Najpierw zobaczmy, jak możemy decydować o tym, czy element jest zaznaczony. Uchwyt zdarzenia <code><a href="pl/XUL/Atrybut/tree.onselect">onselect()</a></code> może być dodany do drzewa. Kiedy użytkownik zaznaczy jakiś element drzewa (<code><code><a href="/pl/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code></code>), uchwyt ten jest wywoływany. Użytkownik ma także możliwość zmiany zaznaczenia poprzez używanie klawiszy strzałek na klawiaturze. Jeśli użytkownik przytrzyma naciśnięty klawisz kursora do szybkiego przewinięcia pozycji, to uchwyt zdarzenia nie zostanie wywołany do momentu, aż użytkownik się zatrzyma. Wynikiem będzie wykonanie postępu. Znaczy to także, że podświetlenie będzie się pojawiać na kilku pozycjach nawet przez zaznaczone zdarzenia nie będące nigdy aktywne dla tych pozycji. </p><p>Składnia uchwytu zdarzenia <code>onselect()</code> przedstawiona jest poniżej: +</p> +<pre><tree id="treeset" onselect="alert('Zaznaczyłeś cokolwiek!');"> +</pre> +<h4 id="Zaznaczenie_drzewa" name="Zaznaczenie_drzewa"> Zaznaczenie drzewa </h4> +<p>Drzewo ma własność <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/currentIndex">currentIndex</a></span></code></code>, która może być użyta, by uzyskać aktualnie zaznaczenie pozycji, gdzie pierwszym wierszem jest 0. +</p><p>Pozycje pochodnych wiersza są zawarte w sumie zaraz po głównych. To znaczy, że jeżeli są tam 3 pozycje najwyższego poziomu i każda ma po dwie pochodne, będzie to w sumie 9 pozycji. Pierwsza pozycja (przy indeksie 0) będzie pierwszą pozycją najwyższego poziomu. Następna pozycja przy indeksie 0 będzie od niego pierwszą pochodną. Druga pochodna pozycja będzie się znajdowała pod indeksem 2, a druga główna pozycja będzie miała indeks 3 itd. +</p> +<div class="float-right"><img alt="grafika:seltree1.png"></div> +<p>Na obrazku z prawej strony pokazanych jest osiem wierszy, z których to dwa są zaznaczone. Pierwszy zaznaczony wiersz jest o indeksie 4, a drugi ma indeks 7. Rzędy, które są ukryte, nie zaliczają się do sumy indeksu. +</p> +<h4 id="Wielokrotne_zaznaczenie" name="Wielokrotne_zaznaczenie"> Wielokrotne zaznaczenie </h4> +<p>Dla drzew umożliwiających wielokrotne zaznaczenie, otrzymanie listy zaznaczonych wierszy jest bardziej skomplikowane. Widok drzewa ma własność zaznaczenia, która przetrzymuje informacje o zaznaczonych wierszach. Bieżące zaznaczenie będzie obiektem <a class="external" href="http://xulplanet.com/references/objref/TreeSelection.html">TreeSelection</a>. Widok nie musi wdrażać tego obiektu samodzielnie, drzewo określi obiekt zaznaczenia dla własności widoku zaznaczenia, kiedy widok będzie dołączony do drzewa. Informacje o zaznaczeniu możemy uzyskać od drzewa, używając własności widoku drzewa (<code>view</code>). Możemy użyć metod obiektu zaznaczenia (<code>selection</code>) w celu uzyskania informacji o zaznaczonych pozycjach lub w celu modyfikacji zaznaczenia. +</p><p>Ponieważ zaznaczone pozycje w drzewie wielokrotnego zaznaczenia niekoniecznie mogą być kolejnymi, możemy uzyskać każdy blok przylegający używając funkcji <code>getRangeCount()</code> i <code>getRangeAt()</code>. Pierwsza funkcja zwraca liczbę znajdujących się tam obszarów. W przypadku, gdy zaznaczona jest tylko jedna, wartość będzie wynosiła 1. Wtedy możesz napisać pętlę dla obszarów, wywołując <code>getRangeAt()</code>, żeby pobrać aktualne indeksy początku i końca obszaru. +</p><p>Funkcja <code>getRangeAt()</code> pobiera trzy argumenty: </p> +<ul><li> Pierwszym jest indeks obszaru. </li><li> Drugim będzie obiekt wypełniony przez funkcję z indeksem pierwszego zaznaczonego elementu. </li><li> Trzecim argumentem jest obiektem wypełnionym indeksem ostatnio zaznaczonej pozycji. +</li></ul> +<h5 id="Przyk.C5.82ad_getRangeAt" name="Przyk.C5.82ad_getRangeAt"> Przykład <code>getRangeAt</code> </h5> +<pre>var start = new Object(); +var end = new Object(); +var numRanges = tree.view.selection.getRangeCount(); + +for (var t = 0; t < numRanges; t++){ + tree.view.selection.getRangeAt(t,start,end); + for (var v = start.value; v <= end.value; v++){ + alert("Pozycja " + v + " jest zaznaczona."); + } +} +</pre> +<p>Tworzymy dwa obiekty, nazwane 'start' i 'end'. Następnie powtarzamy w obszarach liczbę, która jest zwrócona przez funkcję <code>getRangeCount()</code>. Funkcja <code>getRangeAt()</code> jest wywołana przyjmując obszar indeksu obiektu na początku i na końcu. Funkcja przyporządkuje 'start' i 'end' dodając do własności 'value'. Jeżeli więc pierwszy obszar jest od trzeciej do siódmej pozycji, 'start.value' będzie 2 (pamiętaj, że indeksy zaczynają się od 0, więc odejmujemy jeden), a 'end.value' będzie równe 6. Ostrzeżenie jest pokazywane dla każdego indeksu. +</p><p>Jeżeli chcesz wiedzieć, który wiersz jest zaznaczony, możesz użyć funkcji <code>isSelected()</code>. Pobiera indeks wiersza jako argument i zwraca <code>true</code>, jeżeli wiersz jest zaznaczony. +</p> +<pre>alert(tree.view.selection.isSelected(3)); +</pre> +<h3 id="Modyfikowanie_zaznaczenia_drzewa" name="Modyfikowanie_zaznaczenia_drzewa"> Modyfikowanie zaznaczenia drzewa </h3> +<p>Przedmiot zaznaczenia ma pewną liczbę funkcji, które mogą zostać użyte w celu zmiany zaznaczenia. Najprostszą funkcją jest funkcja <code><a href="pl/XUL/Metoda/select">select()</a></code>, która znosi zaznaczenie dowolnego, aktualnie zaznaczonego wiersza i zaznacza dowolny inny. Na przykład następujący kod zaznaczy wiersz o indeksie 5: +</p> +<pre>tree.view.selection.select(5); +</pre> +<p>Zauważ, że nie powinniśmy zmienić tylko wartości <code><code><span><a href="https://developer.mozilla.org/pl/docs/XUL/Własność/currentIndex">currentIndex</a></span></code></code> w celu zmiany zaznaczenia. Zamiast tego powinniśmy użyć funkcji zaznaczenia jak w powyższym przykładzie. Możliwe jest zaznaczenie wszystkich wierszy za pomocą funkcji <code><a href="pl/XUL/Metoda/selectAll">selectAll()</a></code>. Zauważ, że wiersze zagnieżdżały się wewnątrz kontenerów, te które nie są otwarte, nie zostaną zaznaczone. Oczywiście to będzie miało efekt tylko w przypadku drzew z wielokrotnym zaznaczeniem. Jest też funkcja <code><a href="pl/XUL/Metoda/clearSelection">clearSelection()</a></code> do wyczyszczenia zaznaczenia oraz funkcja <code><a href="pl/XUL/Metoda/invertSelection">invertSelection</a></code> do odwracania zaznaczenia, która odznacza zaznaczenie, a zaznacza te, które nie były zaznaczone. +</p><p>W celu zaznaczenia określonych wierszy zastosuj funkcję <code>rangedSelect()</code>, która zaznaczy wiersze z obszaru pomiędzy dwoma indeksami. Jak w przykładzie pomiędzy indeksem 2 a 7. Zwróć uwagę na to, że indeksy 2 i 7 też zostaną zaznaczone: +</p> +<pre>tree.view.selection.rangedSelect(2,7,true); +</pre> +<p>Ostatni argument określa to, czy dodać te indeksy, czy nie. Jeżeli ma wartość <code>true</code>, indeksy te zostaną zaliczone do zaznaczonego obszaru. Jeżeli <code>false</code>, zaznaczone wcześniej wiersze będą najpierw odznaczone. W końcu funkcja <code>clearRange()</code> może zostać użyta do odznaczania obszaru wierszy, pozostawiając resztę niezaznaczonego obszaru nietkniętą. </p> +<pre>tree.view.selection.clearRange(2,7); +</pre> +<p>Następnie dowiemy się, jak utworzyć <a href="pl/Kurs_XUL/W%c5%82asne_widoki_drzewa">własny widok dla drzewa</a>. </p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Dodatkowe_możliwości_drzewa" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Własne_widoki_drzewa">Następny »</a></p> +</div> +<p></p><p><br> +</p> +<div class="noinclude"> +</div> diff --git a/files/pl/mozilla/tech/xul/kurs_xul/źródła_danych_rdf/index.html b/files/pl/mozilla/tech/xul/kurs_xul/źródła_danych_rdf/index.html new file mode 100644 index 0000000000..d8db68cfe0 --- /dev/null +++ b/files/pl/mozilla/tech/xul/kurs_xul/źródła_danych_rdf/index.html @@ -0,0 +1,299 @@ +--- +title: Źródła danych RDF +slug: Mozilla/Tech/XUL/Kurs_XUL/Źródła_danych_RDF +tags: + - Kurs_XUL + - Przewodniki + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/RDF_Datasources +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Drzewa_i_szablony" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Zaawansowane_reguły">Następny »</a></p> +</div><p></p> + +<p>W tym artykule znajdziemy dodatkowe źródła danych i dowiemy się jak ich użyć w naszym pliku RDF jako źródła.</p> + +<h2 id="Inne_kody_.C5.BAr.C3.B3d.C5.82owe_Mozilli" name="Inne_kody_.C5.BAr.C3.B3d.C5.82owe_Mozilli">Inne kody źródłowe Mozilli</h2> + +<p>Mozilla dostarcza kilka różnych kodów źródłowych służących do budowy. Niektóre z nich są tutaj wymienione wraz z kilkoma przykładami. Pracują one bardzo podobnie jako zakładki, mimo że platformy bywają różne.</p> + +<h2 id="Lista_historii" name="Lista_historii">Lista historii</h2> + +<p>Dane źródła historii są dostarczone poprzez dostęp to listy historii użytkowników, których linki z listy adresów URL użytkownika zostały ostatnio odwiedzone. Zasoby mają być kierowane do użycia <code>rdf:history</code> jako źródło danych. Tabela poniżej ukazuje zasoby (lub pola), które możesz uzyskać źródła danych jakim jest historia. Połóż własności adresu URL poniżej gdzie chcesz użyć właściwości źródła danych.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td>Date</td> + <td><span class="nowiki">rdf:http://home.netscape.com/NC-rdf#Date</span></td> + <td>Data ostatniej wizyty</td> + </tr> + <tr> + <td>Name</td> + <td><span class="nowiki">rdf:http://home.netscape.com/NC-rdf#Name</span></td> + <td>Tytuł strony</td> + </tr> + <tr> + <td>Page</td> + <td><span class="nowiki">rdf:http://home.netscape.com/NC-rdf#Page</span></td> + <td>Nazwa strony</td> + </tr> + <tr> + <td>Referrer</td> + <td><span class="nowiki">rdf:http://home.netscape.com/NC-rdf#Referrer</span></td> + <td>Strona przekierowująca</td> + </tr> + <tr> + <td>URL</td> + <td><span class="nowiki">rdf:http://home.netscape.com/NC-rdf#URL</span></td> + <td>Strona URL</td> + </tr> + <tr> + <td>Visit Count</td> + <td><span class="nowiki">rdf:http://home.netscape.com/NC-rdf#VisitCount</span></td> + <td>Liczba odwiedzonych stron</td> + </tr> + </tbody> +</table> + +<p>Typowa lista historii jest wyświetlona na drzewie z wyborem tych plików. Aby go użyć, wystarczy tylko położyć właściwości URL powyżej w atrybucie przycisków lub szablonu <code>label</code>. Możesz użyć właściwości <code>NC:HistoryRoot</code> atrybutu <code>ref</code>. Możesz także użyć <code>NC:HistoryByDate</code>, aby pobrać historię z kilku ostatnich dni.</p> + +<h3 id="Using_The_History_List_Example" name="Using_The_History_List_Example">Using The History List Example</h3> + +<p>Zobaczysz szablony wyświetlające się jako lista historii. Wyświetlimy historię drzewa z trzema kolumnami, <b>Name</b>, <b>Page</b> oraz <b>Date</b>.</p> + +<p><span id="Przyk%C5%82ad_1"><a id="Przyk%C5%82ad_1"></a><strong>Przykład 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_datasrc_1.xul.txt">Źródła</a></p> + +<pre><tree flex="1" datasources="rdf:history" ref="NC:HistoryRoot"> + + <treecols> + <treecol id="name" label="Name" flex="1"/> + <treecol id="url" label="URL" flex="1"/> + <treecol id="date" label="Date" flex="1"/> + </treecols> + + <template> + + <rule> + <treechildren> + <treeitem uri="rdf:*"> + <treerow> + <treecell label="rdf:http://home.netscape.com/NC-rdf#Name"/> + <treecell label="rdf:http://home.netscape.com/NC-rdf#URL"/> + <treecell label="rdf:http://home.netscape.com/NC-rdf#Date"/> + </treerow> + </treeitem> + </treechildren> + </rule> + + </template> +</tree> +</pre> + +<h2 id="Inne_.C5.BAr.C3.B3d.C5.82a_danych" name="Inne_.C5.BAr.C3.B3d.C5.82a_danych">Inne źródła danych</h2> + +<p>Tablice z listy poniżej są innymi źródłami osiągalnych z Mozilla. Chcesz możesz użyć któregokolwiek z zasobów.</p> + +<dl> + <dt>Zakładki (<span class="nowiki">rdf:bookmarks</span>)</dt> + <dd>Zakładki są generowane na podstawie listy z zawartością .</dd> +</dl> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th colspan="3">Źródła</th> + </tr> + <tr> + <td>Added Date</td> + <td><span class="nowiki">rdf:http://home.netscape.com/NC-rdf#BookmarkAddDate</span></td> + <td>Data dodania zakładki</td> + </tr> + <tr> + <td>Description</td> + <td><span class="nowiki">rdf:http://home.netscape.com/NC-rdf#Description</span></td> + <td>Opis zakładki</td> + </tr> + <tr> + <td>Last Modified</td> + <td><span class="nowiki">rdf:http://home.netscape.com/WEB-rdf#LastModifiedDate</span></td> + <td>Data ostatniej modyfikacji</td> + </tr> + <tr> + <td>Last Visited</td> + <td><span class="nowiki">rdf:http://home.netscape.com/WEB-rdf#LastVisitDate</span></td> + <td>Data ostatniej wizyty</td> + </tr> + <tr> + <td>Name</td> + <td><span class="nowiki">rdf:http://home.netscape.com/NC-rdf#Name</span></td> + <td>Nazwa zakładki</td> + </tr> + <tr> + <td>Shortcut URL</td> + <td><span class="nowiki">rdf:http://home.netscape.com/NC-rdf#ShortcutURL</span></td> + <td>Skróty klawiszowe</td> + </tr> + <tr> + <td>URL</td> + <td><span class="nowiki">rdf:http://home.netscape.com/NC-rdf#URL</span></td> + <td>Link URL do</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th colspan="2">Prawdopodobne źródła zakładek</th> + </tr> + <tr> + <td>NC:BookmarksRoot</td> + <td>Najwyższy poziom w hierarchi zakładek</td> + </tr> + <tr> + <td>NC:IEFavoritesRoot</td> + <td>Folder zakładek odpowiadający folderowi Ulubione z IE.</td> + </tr> + <tr> + <td>NC:PersonalToolbarFolder</td> + <td>Folder zakładek odpowiadający własnemu paskowi narzędzi.</td> + </tr> + </tbody> +</table> + +<dl> + <dt>Pliki (<span class="nowiki">rdf:files</span>)</dt> + <dd>Podgląd plików użytkownika.</dd> +</dl> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th colspan="3">Źródła</th> + </tr> + <tr> + <td>Name</td> + <td><span class="nowiki">rdf:http://home.netscape.com/NC-rdf#Name</span></td> + <td>Nazwa pliku</td> + </tr> + <tr> + <td>URL</td> + <td><span class="nowiki">rdf:http://home.netscape.com/NC-rdf#URL</span></td> + <td>URL do pliku</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th colspan="2">Prawdopodobne źródła plików</th> + </tr> + <tr> + <td>NC:FilesRoot</td> + <td>Najwyższy poziom systemu plików (często lista napędów)</td> + </tr> + <tr> + <td>A file URL</td> + <td>Używając URL pliku dla atrybutu <b>ref</b>, możesz zaznaczyć specyficzny folder bedący przekierowaniem. Na przykład, możesz użyć <a class="external" rel="freelink">file:///windows</a> or <a class="external" rel="freelink">file:///usr/local</a>.</td> + </tr> + </tbody> +</table> + +<p>Przykład kodu źródłowego w pliku kodu ze źródłem, określa swoją konieczną zawartość. Nie chcemy każdego pliku z plików systemowych decydowały o wyświetleniu danych. Natomiast, tylko pliki i foldery elementów drzewa (lub innych elementów) były potrzebne do wyświetlenia w momencie kiedy tak zadecydujemy.</p> + +<h2 id="Composite_Datasources" name="Composite_Datasources">Composite Datasources</h2> + +<p>Specjalny wielokrotny kod źródła w atrybutach źródła danych jest oddzielnie poprzez białe pola, przykład poniżej. Jest to efekt czytania źródła danych wspomniany we wszystkich źródłach.</p> + +<pre><tree datasources="rdf:bookmarks rdf:history animals.rdf" ref="NC:BookmarksRoot"> +</pre> + +<p>Przykład ten czyta zawartość źródła z zakładek, historię i plik animals.rdf. Są one połączone z jednym składem kodu źródłowego i potrafią wtedy być użyte jako pojedyncze pliki.</p> + +<p>Specjalny kod źródłowy <code>rdf:null</code> odzwierciedla pustkę, nicość. Możesz używać tego kodu źródłowego jeśli chcesz umieścić dynamiczny kod źródłowy w skrypcie, nie potrzebujesz jego na początku i nie poznasz swojego dokładnego URL-a.</p> + +<h2 id="Kod_.C5.BAr.C3.B3d.C5.82owy_RDF_u.C5.BCytkownika" name="Kod_.C5.BAr.C3.B3d.C5.82owy_RDF_u.C5.BCytkownika">Kod źródłowy RDF użytkownika</h2> + +<p>Możemy używać jakiegokolwiek wewnętrznego kodu źródłowego, jeśli będziemy mieli taką potrzebę. Jest tu kilka innych kodów dla poczty, książki adresowej i służących do przeszukiwania ich. Kiedykolwiek, będziesz chciał możesz użyć twojego własnego kodu źródłowego RDF przechowanego w pliku RDF. Plik może być dwojaki, lokalny lub zdalny. Wystarczy umieścić URL pliku RDF w atrybucie <code><code id="a-datasources"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/datasources">datasources</a></code></code>.</p> + +<p>Używanie kodu źródłowego RDF prowadzi do większej funkcjonalności kodu wewnętrznego. Możesz używać reguł odpowiadającym specjalnym typom zawartości. Atrybuty w elemencie <code><code><a href="/pl/docs/Mozilla/Tech/XUL/rule" title="rule">rule</a></code></code> odpowiadają, jeżeli one odpowiadają atrybutom RDF <code>Description</code> elementu. Także możesz tworzyć pliki RDF, które są hierarchiczne.</p> + +<h3 id="Using_RDF_file_Example" name="Using_RDF_file_Example">Using RDF file Example</h3> + +<p>Następny przykład, to jak plik RDF potrafi być użyty w bazie danych. Plik RDF jest czarodziejski i potrafi wyświetlić osobno: <a href="https://developer.mozilla.org/samples/xultu/examples/animals.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/animals.rdf">RDF</a></p> + +<p><span id="Przyk%C5%82ad_2"><a id="Przyk%C5%82ad_2"></a><strong>Przykład 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_datasrc_2.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_datasrc_2.xul">Podgląd</a></p> + +<pre><tree flex="1" width="200" height="200" + datasources="animals.rdf" ref="http://www.some-fictitious-zoo.com/all-animals"> + + <treecols> + <treecol id="name" label="Name" primary="true" flex="1"/> + <treecol id="species" label="Species" flex="1"/> + </treecols> + + <template> + <rule> + <treechildren> + <treeitem uri="rdf:*"> + <treerow> + <treecell label="rdf:http://www.some-fictitious-zoo.com/rdf#name"/> + <treecell label="rdf:http://www.some-fictitious-zoo.com/rdf#species"/> + </treerow> + </treeitem> + </treechildren> + </rule> + + </template> +</tree> +</pre> + +<p><img alt="grafika:datasrc1.jpg"></p> + +<p>Tutaj, dane zostały wygenerowane z pliku. Atrybut <code><code id="a-ref"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/ref">ref</a></code></code> został zarejestrowany jako element korzenia w pliku RDF, który jest najwyższym poziomem <code>Seq</code>. Otrzymamy kompletną listę + + <i>animals</i> + . Jeżeli potrzebowalibyśmy,to moglibyśmy umieszczać atrybut <code><code id="a-ref"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/ref">ref</a></code></code> do wszelkiej innej zawartości <code>about</code> cechach atrybutu ograniczającego ustawienia danych, które są zwracane. Na przykład, do wyświetlania tylko reptails, użyj wartości <code><span class="nowiki">http://www.some-fictitious-zoo.com/reptiles</span></code>.</p> + +<h3 id="Setting_the_ref_Attribute_Example" name="Setting_the_ref_Attribute_Example">Setting the <code>ref</code> Attribute Example</h3> + +<p>Przykład poniżej pokazuje jak wyświetlić szczególną część kodu źródłowego RDF ustawiając atrybut <code><code id="a-ref"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/ref">ref</a></code></code>.</p> + +<p><span id="Przyk%C5%82ad_3"><a id="Przyk%C5%82ad_3"></a><strong>Przykład 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_datasrc_3.xul.txt">Źródła</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_datasrc_3.xul">Podgląd</a></p> + +<pre><window + id="example-window" + title="History List" + xmlns:ANIMALS="http://www.some-fictitious-zoo.com/rdf#" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<button label="Click here to see the mammals the zoo has" type="menu" + datasources="animals.rdf" ref="http://www.some-fictitious-zoo.com/mammals"> + <template> + <rule ANIMALS:specimens="0"></rule> + <rule> + <menupopup> + <menuitem uri="rdf:*" label="rdf:http://www.some-fictitious-zoo.com/rdf#name"/> + </menupopup> + </rule> + </template> +</button> + +</window> +</pre> + +<p>W tym przypadku tylko mammals są żądane, więc zaznaczamy mammals URI na liście. Zauważymy tą wartość atrybutu <code><code id="a-ref"><a href="https://developer.mozilla.org/pl/docs/Mozilla/Tech/XUL/Atrybut/ref">ref</a></code></code> w przykładzie <code><span class="nowiki">http://www.some-fictitious-zoo.com/mammals</span></code>, który odzwierciedla jeden element <code>Seq</code> w <a class="external" href="http://xulplanet.com/tutorials/xultu/animals.txt">pliku RDF</a>. To zdarzenie tylko powraca w liście w przypadku potomków.</p> + +<p>Zostały użyte tutaj dwie zasady. Pierwsza reguła trzyma całą zawartość jaką posiada <code>ANIMALS:specimens</code>, atrybut ustawiony jest na <code>0</code>. Możesz zobaczyć te cechy w każdym <code>Description</code> elementu w pliku RDF. Niektóre z nich mają wartość równą 0. Więc w tym wypadku, użyjemy zasady pierwszej. Ponieważ, zasada pierwsza nie ma wartości, nic nie będzie ci wyświetlane. Jest to efektowna droga do ukrycia daty, której nie chcemy wyświetlić.</p> + +<p>Druga zasada stosuje się do całej reszty kodu i tworzy wiersze wyskakującego menu. Końcowy efekt jest taki, że dostaniemy wyskakujące menu zawierające wszystkie + <i>mammals</i> + które nie mają podanej wartości równej 0.</p> + +<p>Następnie, zobaczymy pełne zasady składni.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/pl/docs/Kurs_XUL:Drzewa_i_szablony" style="float: left;">« Poprzedni</a><a href="/pl/docs/Kurs_XUL:Zaawansowane_reguły">Następny »</a></p> +</div><p></p> |