Capsules IHM

Ces videos sont là pour vous aider à démarrer dans la programmation d’une interface homme machine en Java. Dans chaque video, j’aborde un élément de l’IHM: fenêtre principale, contenu de la fenêtre, barre de menu, menu, bouton, action du bouton et des menus… J’ai choisi Swing comme bibliothèque Java pour plusieurs raisons. Il y a une bibliothèque JavaFX plus récente et que je connais moins. JavaFX est beaucoup plus compliquée, ce qui n’est pas bon pour une découverte de l’IHM. Dans le dernier JDK, JavaFX n’est plus incluse, donc il semble que JavaFX ne soit plus promu par Oracle. Et en fait, la syntaxe diffère mais le principe est le même: mêmes objets, même façon d’interagir. Ce que vous allez apprendre avec Swing sera donc valable aussi pour comprendre les IHMs en JavaFX.

Les screencasts sont là

IHM1

Premiere chose pour un programme graphique: il n’y a plus de console texte et il y a au moins une fenêtre graphique. Commençons par créer un programme qui ouvre une fenêtre.

Le screencast est là

IHM2

Reprenons le code précédent, et ajoutons lui une barre de menu.

Le screencast est là

IHM3

Reprenons le code précédent

Par défaut, quand j’ajoute des composants, ils sont mis en ligne. Pour les positionner autrement, il faut que j’utilise un Layout. Par défaut, le layout est un FlowLayout qui met tout en ligne, tant qu’il y a de la place.

Les layouts classiques sont en plus de FlowLayout:

• BorderLayout, avec les positions NORTH, SOUTH, EAST, WEST et CENTER
• GridLayout, un tableau dont toutes les cellules sont de la même taille
• GridBagLayout, un truc compliqué gérable par les outils de développement

Je peux mettre un Layout sur chaque JPanel, et je peux mettre un JPanel dans un JPanel, et donc je m’en sors presque toujours avec des BorderLayout et des GridLayout. Utilisons là un BorderLayout.

Est-ce que la mise en page est celle que vous attendiez ? Changez dynamiquement la taille de la fenetre pour voir comment la mise en page s’adapte.

Le screencast est là

IHM4

Reprenons le code précédent et ajoutons des actions sur les boutons et éléments de menu.

Le screencast est là

IHM5

Reprenons le code précédent et ajoutons un JPanel spécial, qui s’affiche comme je veux.

Le screencast est là

IHM6

Reprenons le code précédent et ajoutons une action souris sur le JCPanel. Pour cela, ajoutons un MouseListener.

Le screencast est là

IHM7

Reprenons le code précédent et ajoutons des dialogues.

Le screencast est là

AUTRES

Si vous avez une idée d’un élément fondamental des IHMs qui n’est pas décrit ici, merci de venir me voir en 5D30 ou de m’envoyer un email avec une description de la chose et si c’est pertinent, je rajouterai une video.