Ajouter plus d'éléments

 

Nous allons conclure ce chapitre en ajoutant des boîtes sur notre fenêtre de recherche de fichiers.

Ajout d'éléments à notre exemple de recherche de fichiers

Nous allons ajouter maintenant des éléments à notre boîte de dialogue de recherche de fichiers. Premièrement, nous allons ajouter la possiblité de faire une recherche sur d'autres informations, comme la taille et la date du fichier.

<hbox>
  <menulist id="searchtype">     <menupopup>       <menuitem label="Nom"/>       <menuitem label="Taille"/>       <menuitem label="Date de modification"/>     </menupopup>   </menulist>   <spacer style="width: 10px;"/>   <menulist id="searchmode">     <menupopup>       <menuitem label="Est"/>       <menuitem label="N'est pas"/>     </menupopup>   </menulist>   <spacer style="width: 10px;"/>
  <textbox id="find-text" flex="1" style="min-width: 15em;"/>
</hbox>
Image:xultu_boxfinal1.png

Deux listes déroulantes ont été ajoutées à la boîte de dialogue. Un espacement (spacer) a été inséré entre chaque élément pour les séparer. Ces espacements ont une taille explicite de 10 pixels chacun. Vous noterez que si la fenêtre est redimensionnée, le champ de saisie s'agrandit mais pas les autres composants. Vous noterez également que le libellé a été enlevé.

Si vous redimensionnez la fenêtre verticalement, les éléments ne changeront pas de taille. C'est parce qu'ils sont à l'intérieur de boîtes horizontales. Ce serait mieux si les boutons « Rechercher » et « Annuler » restaient toujours en bas de la fenêtre. Il est facile de le faire en ajoutant un spacer entre les deux boîtes horizontales.

<spacer style="height: 10px"/>
<hbox>
  <menulist id="searchtype">
    <menupopup>
      <menuitem label="Nom"/>
      <menuitem label="Taille"/>
      <menuitem label="Date de modification"/>
    </menupopup>
  </menulist>
  <spacer style="width: 10px;"/>
  <menulist id="searchmode">
    <menupopup>
      <menuitem label="Est"/>
      <menuitem label="N'est pas"/>
    </menupopup>
  </menulist>
  <spacer style="width: 10px;"/>
  <textbox id="find-text" flex="1" style="min-width: 15em;"/>
</hbox>

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

<hbox>

Maintenant, quand la boîte de dialogue est redimensionnée, les deux boutons resteront en place tout en bas de la boîte de dialogue. Le premier spacer ajoute un espacement entre le titre du libellé et les éléments des critères de recherche.

Il serait plus joli d'avoir une bordure autour des critères de recherche. Il y a deux moyens pour le faire. Vous pouvez utiliser la propriété CSS border ou vous pouvez utiliser l'élément groupbox. La première méthode nécessite que nous appliquions le style sur la boîte elle-même. Nous utiliserons plutôt l'autre méthode. Un élément groupbox a l'avantage de dessiner une boîte avec un joli effet d'incrustation, en adéquation avec le thème courant.

Changeons maintenant la boîte box en groupbox :

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

Source Voir

Image:xultu_boxfinal2.png

Il reste d'autres problèmes cosmétiques. Nous pourrions avoir un groupbox qui s'étend verticalement vers le bas de la boîte. Mais aussi, nous pourrions modifier quelques marges afin de mieux positionner les éléments.


Nous verrons dans la suite comment créer des piles.

Interwiki

Pièces jointes

Fichier Taille Date Joint par
xultu_boxfinal1.png
12144 octets 2007-08-14 07:56:14 Fredchat
xultu_boxfinal2.png
13775 octets 2007-08-14 07:57:35 Fredchat
DevNews-Developer-kit-at-sxsw.jpg
26364 octets 2007-03-23 07:00:26 Shimono
DOM_Ref_Introduction_to_the_DOM.gif
11751 octets 2007-03-18 15:23:34 Kaorine

Étiquettes et contributeurs liés au document

Étiquettes :
Contributeurs ayant participé à cette page : E.cg, tregagnon, Chbok
Dernière mise à jour par : tregagnon,