Siatki

XUL posiada zbiór elementów do tworzenia siatki tabeli.

Tabelaryczny układ graficzny XUL

XUL posiada zbiór elementów do wykonania układu graficznego elementów w formie siatki przy zastosowaniu elementu grid. Posiada on kilka podobieństw w stosunku do znacznika table z języka HTML. Siatka nie wyświetla niczego sama; jest stosowana tylko do pozycjonowania elementów w formie tabeli z wierszami oraz kolumnami.

Siatka zawiera elementy, które są wyrównywane w wierszach podobnie jak tabele. Wewnątrz grid 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.

Deklaracja siatki

Aby zadeklarować ustawienie wierszy, stosujemy znacznik rows, który powinien być elementem potomnym grid. Wewnątrz powinniśmy dodać elementy row, które są stosowane dla każdego wiersza. Wewnątrz elementu wiersza powinniśmy umieścić zawartość, jaką chcemy mieć wewnątrz tego wiersza.

Podobnie kolumny są deklarowane poprzez element columns, który powinien być umieszczony jako element potomny grid, wewnątrz którego przechodzimy do pojedynczego elementu column, jednego dla każdej kolumny, jaką chcesz w siatce.

Stanie się to o wiele łatwiejsze do zrozumienia dzięki przykładowi:

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

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

Do siatki zostały dodane dwa wiersze i dwie kolumny. Każda kolumna jest zadeklarowana znacznikiem column. Każda kolumna posiada dodany atrybut flex. Każdy wiersz zawiera dwa elementy, oba są przyciskami. Pierwszy element w każdym elemencie row 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 td z języka HTML. Zamiast tego wstawiamy zawartość komórki bezpośrednio do elementu row.

Siatka z większą ilością elementów

Możemy zastosować dowolny element w miejsce elementu button. Jeśli chcemy część jednej komórki wypełnić wieloma elementami, to stosujemy poprzez zagnieżdżenie element hbox lub inny element pudełkowy. Element hbox jest pojedynczym elementem, ale możemy wstawić w nim wiele, jakie chcielibyśmy w nim umieścić. Na przykład:

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

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

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, textbox oraz button. Możemy dodatkowo dodać zagnieżdżone pudełka lub użyć kolejnej siatki wewnątrz pojedynczej komórki.

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 flex zostały dodane do pól tekstowych i drugiej kolumny. Pierwsza kolumna nie musi być elastyczna jako etykieta i nie potrzebuje zmiany swojego rozmiaru.

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 minwidth i maxwidth oraz powiązanych atrybutów dla dalszego zdefiniowania rozmiaru.

Przykład siatki z większą ilością kolumn

Możemy również umieścić elementy wewnątrz elementów column zamiast wierszy. Jeśli to zrobimy, wiersze będą zadeklarowane tylko do określenia, jak wiele wierszy tam jest.

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

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

Ta siatka posiada trzy wiersze i dwie kolumny. Elementy row są rozmieszczone do określenia, jak wiele ich tam jest. Możemy dodać atrybut flex do wiersza, aby uczynić go elastycznym. Zawartość jest umieszczona wewnątrz każdej kolumny. Pierwszy element wewnątrz każdego elementu column jest umieszczony w pierwszym wierszu, drugi element w drugim wierszu, a trzeci element jest umieszczony w trzecim wierszu.

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 stack.

Porządek elementów w grid określa, co jest wyświetlane na górze, a które są umieszczone poniżej. Jeśli element rows jest umieszczony po elemencie kolumny, zawartość wewnątrz wierszy jest wyświetlana na górze. Jeśli element columns jest umieszczony po elemencie rows, 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.

Elastyczność siatki

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 flex zarówno w wierszu, jak i kolumnie. Pokazuje nam to poniższy przykład:

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

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

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.

Atrybut flex może również być dodany do elementu grid, aby cała siatka była elastyczna, w przeciwnym razie będzie ona tylko rosła w jednym kierunku.

Łączenie kolumn

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 rows, który nie jest wewnątrz elementu row. 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:

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

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

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.

Następnie przyjrzymy się dodawaniu paneli zawartości.