mozilla
Wyniki wyszukiwania

    Model pudełkowy

    W tym artykule zobaczymy, jak XUL radzi sobie z zarządzaniem układem strony.

    Wprowadzenie

    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 (orient) względem siebie poziomo lub pionowo. Łącząc szereg pudełek, pustych przestrzeni i elementów z atrybutami flex, pozwala użytkownikowi zarządzać układem okna.

    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.

    Prosta składnia pudełka pokazana jest poniżej:

    <hbox>
      <!-- elementy poziome -->
    </hbox>
    
    <vbox>
      <!-- Elementy pionowe -->
    </vbox>
    

    Element hbox jest stosowany do tworzenia pudełka zorientowanego poziomo. Każdy element umieszczony w hbox będzie umieszczony poziomo w wierszu. Element vbox jest stosowany do tworzenia pudełka zorientowanego pionowo. Dodane elementy będą umieszczone pod każdym innym w kolumnie.

    Jest także ogólny element box, który domyślnie posiada orientację poziomą, co oznacza, że jest on odpowiednikiem hbox. Jednak możemy zastosować atrybut orient, aby zmienić orientację pudełka. Możemy ustawić ten atrybut na wartość horizontal, aby utworzyć poziome pudełko, a jeśli ustawimy wartość na vertical, to utworzymy pionowe pudełko.

    Tak więc poniższe dwie linie oznaczają to samo:

    <vbox></vbox>
    
    <box orient="vertical"></box>
    

    Przykład: Umieszczenie przycisków w pionie

    var el = env.locale; Przykład 1 : Źródła Podgląd

    Grafika:boxes-ex1.png
    <vbox>
      <button id="yes" label="Tak"/>
      <button id="no" label="Nie"/>
      <button id="maybe" label="Może"/>
    </vbox>
    

    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 vbox na element hbox.

    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:

    Przykład: Okienko logowania

    var el = env.locale; Przykład 2 : Źródła Podgląd

    Grafika:boxes-ex2.png
    <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>
    


    Tutaj cztery elementy są zorientowane pionowo - dwa wewnętrzne znaczniki hbox i dwa elementy button - OK i Anuluj. Zwróć uwagę, że tylko elementy potomne są skierowane do pudełka zorientowanego pionowo. Etykiety i pola tekstowe są wewnątrz elementów hbox, 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.

    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.

    Przykład: Bardziej zaawansowane okienko logowania

    var el = env.locale; Przykład 3 : Źródła Podgląd

    Grafika:boxes-ex3.png
    <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>
    

    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.

    Problemem jest teraz etykieta 'Hasło', która jest za wysoko. Powinniśmy tutaj, tak naprawdę zastosować element grid, aby naprawić ten problem, o którym przeczytasz w następnych rozdziałach.

    Nasz przykład: Okienko dialogowe <tt>Znajdź pliki</tt>

    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.

    <vbox flex="1">
    
      <description>
        Wpisz poniżej swoje kryteria szukania i naciśnij przycisk Znajdź, aby rozpocząć
        szukanie.
      </description>
      
      <hbox>
        <label value="Szukaj dla:" control="find-text"/>
        <textbox id="find-text"/>
      </hbox>
    
      <hbox>
        <spacer flex="1"/>
    
        <button id="find-button" label="Znajdź"/>
        <button id="cancel-button" label="Anuluj"/>
      </hbox>
    </vbox>
    
    Grafika:boxes1.png

    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 spacer spowoduje, aby przyciski zostały wyświetlone po prawej stronie, ponieważ są elastyczne.

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

    W następnym artykule zobaczymy jak ustawiać stałe wymiary dla elementów oraz jak te wymiary zablokować.

    Autorzy i etykiety dokumentu

    Contributors to this page: Anonymous, Takenbot, teoli, Nickolay, Witia, gandalf, Cnr roxx, Mgjbot, Ptak82
    Ostatnia aktualizacja: teoli,