~ / INFO4 / IHM / tps / 3-layout /
© 2010—2020 - Renaud Blanch
Le but de ce TD est de mettre en pratique vos connaissances sur les gestionnaires de géométrie. Vous allez réaliser une maquette de lecteur multi-média (i.e., vous ne réaliserez que l'interface utilisateur et non le noyau fonctionnel).
Les deux images ci-dessous vous fournissent des exemples de l'interface de commande d'un lecteur multimédia (celle de VLC sous Mac OS X) pour différentes tailles. Quand l'utilisateur essaie de la redimensionner, elle garde sa hauteur, mais sa largeur varie effectivement. Les différents interacteurs s'adaptent à cette nouvelle largeur.
Dans la mesure de ce que permet le jeu de composant interactifs de SWING (JButton, JToggleButton, JSlider, etc.), reproduisez cette interface sans vous soucier de l'aspect graphique en utilisant les gestionnaires de géométrie simples (BorderLayout, FlowLayout, et BoxLayout, pour ce dernier, voir How to Use BoxLayout) et la hiérarchie des conteneurs.
Pour la bordure autour des composants qui gèrent le temps, on pourra utiliser une Border et la fabrique associée : BorderFactory. Leur utilisation est expliquée dans le tutoriel How to Use Borders. Votre réalisation pourra ressembler à l'image ci-dessous (notez que l'aspect exact importe peu, ce qui compte c'est le comportement lors du redimensionnement de la fenêtre).
La première capture ci-dessus donne l'interface dans sa taille minimale. Quand l'utilisateur essaie de la redimensionner, elle garde sa hauteur (par exemple 120 pixels), mais sa largeur varie effectivement tout en conservant une largeur minimale (e.g. 700 pixels) comme le montre la seconde capture. Modifiez votre réalisation pour qu'elle se comporte de cette manière quand elle est redimensionnée. Il faut pour cela interférer avec le redimensionnement en forçant la taille à une hauteur constante dès qu'un changement de taille est signalé via un ComponentListener.
Lorsqu'on appuie sur le bouton situé en bas à droite de l'interface (qui devient alors bleu) ou si on redimensionne (ComponentListener) la fenêtre en dépassant un certain seuil pour sa hauteur, un panneau supplémentaire comportant la liste de lecture apparaît comme illustré ci-dessous. Réalisez ce comportement (Pour la liste de lecture, utilisez une simple JList).
mise à jour : 22 novembre 2021