diff options
Diffstat (limited to 'files/pl/mozilla/tech/xul/kurs_xul/panele_treści/index.html')
| -rw-r--r-- | files/pl/mozilla/tech/xul/kurs_xul/panele_treści/index.html | 83 |
1 files changed, 83 insertions, 0 deletions
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> |