Dodawanie innych elementów

Dodawanie elementów do przykładu: <tt>Znajdź pliki</tt>

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.

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

Powyżej zostały dodane dwa rozwijane pola do okienka dialogowego. Element spacer 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.

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.

<spacer style="height: 10px"/>
<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>

<spacer style="height: 10px" flex="1"/>

<hbox>

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 spacer dodaje dodatkową wolną przestrzeń pomiędzy etykietą tytułu a elementem 'Kryteria szukania'.

Ł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 border z pliku CSS lub drugim będzie zastosowanie gotowego elementu groupbox. 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.

Wykonajmy zmiany w groupbox:

<groupbox orient="horizontal">
  <caption label="Kryteria szukania"/>
  <menulist id="searchtype">
  .
  .
  .
  <spacer style="width: 10px;"/>
  <textbox id="find-text" flex="1" style="min-width: 15em;"/>
</groupbox>

Zostały już poprawione wszystkie kosmetyczne błędy. Możemy także ustawić element groupbox tak, aby rozszerzyć/zwężać pionowo okna do krawędzi dolnego pola. Możemy także modyfikować marginesy w celu lepszego ustawienia elementów.

Więcej przykładów modelu pudełkowego i jego własności zobaczymy podczas dalszej nauki dodawania elementów, opisanych w tym kursie.

Przykład: Znajdź pliki: Źródła Podgląd