We'll add some more elements to the find files dialog now. First, we'll add the capability to search for other information such as the file size and date, much like the Macintosh Sherlock utility.

<box orient="horizontal">
  <menulist id="searchtype">
    <menupopup>
      <menuitem value="Name"/>
      <menuitem value="Size"/>
      <menuitem value="Date Modified"/>
    </menupopup>
  </menulist>
  <spring style="width: 10px;"/>
  <menulist id="searchmode">
    <menupopup>
      <menuitem value="Is"/>
      <menuitem value="Is Not"/>
    </menupopup>
  </menulist>
  <spring style="width: 10px;"/>
  <textfield id="find-text" flex="1" style="min-width: 15em;"/>
</box>

Two drop down boxes have been added to the dialog. A spring has been added in-between in each element to separate them. These springs have been given an explicit width of 10 pixels each. You'll notice that if the window is resized, the text field grows but the other components do not. You'll also notice that the label was removed.

If you resize the window vertically, the elements do not change size. This is because they are in horizontal boxes. In might be more appropriate if the Find and Cancel buttons always stayed along the bottom of the window. This is easy to do by adding a spring in-between the two horizontal boxes.

<spring style="height: 10px"/>
<box orient="horizontal">
  <menulist id="searchtype">
    <menupopup>
      <menuitem value="Name"/>
      <menuitem value="Size"/>
      <menuitem value="Date Modified"/>
    </menupopup>
  </menulist>
  <spring style="width: 10px;"/>
  <menulist id="searchmode">
    <menupopup>
      <menuitem value="Is"/>
      <menuitem value="Is Not"/>
    </menupopup>
  </menulist>
  <spring style="width: 10px;"/>
  <textfield id="find-text" flex="1" style="min-width: 15em;"/>
</box>

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

<box orient="horizontal">

Now when the dialog is resized, the two buttons will move so that they are always along the bottom of the dialog. The first spring adds extra spacing in-between the title label and the search criteria elements.

There are numerous other embelishments we could add to the dialog. One possibility would be to add Fewer and More buttons so that the user could specify additional search criteria. They would need to appear in the lower right corner below the text field. We could add this after the box containing the search criteria and before the spring. Maybe we'll add this later.

It might look nicer if there was a border around the search criteria. There are two ways to do this. We could use the CSS border property or we could use the titledbox element. This first method would require that we set the style on the box itself. We'll use the latter method, however. A titledbox has the advantage that it draws a box with a nice beveled look.

Let's change the box into a titledbox:

<titledbox orient="horizontal">
  <title><text value="Search Criteria"/></title>
  <html:menulist id="searchtype">
  .
  .
  .
  <spring style="width: 10px;"/>
  <textfield id="find-text" flex="1" style="min-width: 15em;"/>
</titledbox>

There are other cosmetic problems as well. We could also have the titledbox grow so that it extends vertically to the bottom of the box. Also, we could modify some of the margins so that the elements are positioned better. We won't do these things until we're nearer to the end of development.

We'll see more examples of the box model and some of its features as we continue to add elements throughout the tutorial.

(Next) In the next section, we'll learn about some other XUL elements, starting with progress meters.