mozilla
Wyniki wyszukiwania

    Panele treści

    W tym artykule, zobaczymy jak dodawać panele potrafiące wyświetlić stronę HTML lub inne pliki XUL.

    Dodawanie paneli potomnych

    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.

    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.

    XUL posiada element wizard (kreator), który może być zastosowany do tworzenia kreatorów. Jest on opisany dalszej części kursu.

    Innym sposobem jest użycie elementu iframe, 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 src. 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 (iframe) bez wpływu na główne okno.

    W przeglądarce Mozilla, obszar w którym wyświetlana strona WWW jest stworzony właśnie jako iframe. Kiedy użytkownik klika na odnośnik w dokumencie lub wpisuje adres URL, źródło ramki jest zmieniane.

    Przykład iframe

    Przykład 1 : Źródła Podgląd

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

    Powyższy przykład stworzył bardzo prosty interfejs przeglądarki web. Okno zawiera 2 elementy: toolbox i iframe. Przyciski (button) <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 iframe. W tym przypadku domyślnie otworzy się witryna Mozilli.

    Ten przykład nie działa w pełni. Następnie możesz dodać skrypt, który zmienia atrybut src w odpowiednim momencie, np. kiedy użytkownik wciśnie klawisz <tt>Enter</tt>.

    Przeglądarki

    Oto drugi typ panelu treści, stosując tag browser. Możesz to użyć kiedy chcesz stworzyć ramkę wyświetlającą zawartość jak przeglądarka. Właściwie ramka iframe 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>. browser potrafi również załadować strony z flagą "referer" lub inną. Najważniejsze jest jednak to, że tag browser powinien być użyty, kiedy chcesz stworzyć interfejs podobny do przeglądarki, a iframe może stworzyć tylko prosty panel.

    Podobny element tabbrowser, posiada funkcjonalność browser, 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 tabbrowser jest w rzeczywistości zbudowany z elementu tabbox, na którym są umieszczone elementy przeglądarki. Te same typy przeglądarek oferują podobną kontrolę stron, jakie są w nich wyświetlane.

    Przykład browser

    Przykład 2 : Źródła Podgląd

    <browser src="http://www.mozilla.org" flex="1"/>
    

    Tak samo jak w iframe, możesz wyszczególnić URL w przeglądarce stosując atrybut src. Dla elementu tabbrowser, nie możesz ustawić URL tak jak tutaj, ponieważ to nie wyświetla jednego URL. Musisz użyć skryptu i wywołać funkcję loadURI.

    Są trzy klasy przeglądarki, właściwe do typu zawartości, jaki zamierzasz wyświetlić. Typ może być ustawiony za pomocą atrybutu type.

    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.

    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 type ustawionego na wartość content. Oto przykład:

    <browser src="http://www.mozilla.org" type="content" flex="1"/>
    
    Ważne: Musimy ustawić atrybut type poprawnie, jeśli chcemy wyświetlić strony internetowe wewnątrz elementu browser.

    Jest to ważne, żeby ustawić atrybut type poprawnie, jeśli chcesz wyświetlać strony wewnątrz elementu browser. Element tabbrowser ustawia wartość content automatycznie we wszystkich swoich wewnętrznych przeglądarkach. Tak więc nie musisz ustawiać go, jeśli używasz elementu tabbrowser.

    Trzeci typ jest używany by wskazywać główną zawartość do środka okna. tabbrowser ustawia to automatycznie dla tej przeglądarki, która jest aktualnie używana. Lecz możesz ustawić to zmieniając atrybut type 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 type na wartość content-primary. To działa jak wartość content, 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 tabbrowser, gdyż obiekt ją posiadający jest ciągle widoczny i jest możliwy do niego dostęp bez przerwy.

    Następnie, zobaczymy jak zrobić rozdzielacz.

    Autorzy i etykiety dokumentu

    Etykiety: 
    Contributors to this page: fscholz, teoli, Ptak82, Mgjbot, Anonymous
    Ostatnia aktualizacja: fscholz,