Académique Documents
Professionnel Documents
Culture Documents
Homme/Machine
Graphical User Interface
IHM/GUI
BOUSETTA Ibrahim
Interface avec l’utilisateur
La quasi-totalité des programmes
informatiques nécessitent
l’affichage de questions posées à
l’utilisateur
l’entrée de données par l’utilisateur
l’affichage des résultats obtenus par le
traitement informatique
Cet échange d’informations peut
s’effectuer avec une interface utilisateur
(UI en anglais) en mode texte (ou
console) ou en mode graphique
ibbousetta@gmail.com BOUSETTA Ibrahim
Interface graphique
Une interface graphique est formée d’une
ou plusieurs fenêtres qui contiennent
divers composants graphiques (widgets)
tels que
Boutons
listes déroulantes
Menus
champ texte
etc.
Les interfaces graphiques sont souvent
appelés GUI d’après l’anglais Interface
ibbousetta@gmail.com BOUSETTA Ibrahim
Programmation conduite par les événements
2 bibliothèques :
AWT (Abstract Window Toolkit, JDK 1.1)
Swing (JDK 1.2)
Swing et AWT font partie de JFC (Java
Foundation Classes) qui offre des facilités
pour construire des interfaces graphiques
Swing est construit au-dessus de AWT
même gestion des événements
les classes de Swing héritent des
classes de AWT
ibbousetta@gmail.com BOUSETTA Ibrahim
Swing ou AWT ?
import javax.swing.*;
public Fenetre() {
// Centrage de la fenêtre
Toolkit tk = Toolkit.getDefaultToolkit();
Dimension d = tk.getScreenSize();
int hauteurEcran = d.height;
int largeurEcran = d.width;
setSize(largeurEcran/2, hauteurEcran/2);
setLocation(largeurEcran/4, hauteurEcran/4);
// tant qu’on y est, ajoutons l’icône…
Image img = tk.getImage("icone.gif");
setIconImage(img); centre une fenêtre
sur l’écran
//. . . setLocationRelativeTo(null)
}
frame.add(label, BorderLayout.NORTH);
frame.add(b1, BorderLayout.SOUTH);
public Fenetre() {
...
Container cp = this.getContentPane();
JLabel label = new JLabel("Bonjour");
JButton b1 = new JButton("Cliquez moi !");
add(label, BorderLayout.NORTH);
add(b1, BorderLayout.SOUTH);
...
ibbousetta@gmail.com BOUSETTA Ibrahim
gestionnaire de contenu
(LayoutManager).
Code source :
JPanel panel = new JPanel(); // Le conteneur
panel.setLayout( new FlowLayout() );
Ou
FlowLayout lmanager = new FlowLayout();
getContenentPan().setLayout( lmanager );
setLayout(new BorderLayout());
JPanel jpn= new JPanel();
jpn.setLayout(new BorderLayout());
jpn.add(b1,BorderLayout.NORTH);
jpn.add(b12,BorderLayout.SOUTH);
getContentPane().add(jpn,BorderLayout.NORTH);
getContentPane().add(b2,BorderLayout.SOUTH);
getContentPane().add(b3,BorderLayout.EAST);
getContentPane().add(b4,BorderLayout.CENTER);
getContentPane().add(b5,BorderLayout.WEST);
}
….
}
ibbousetta@gmail.com BOUSETTA Ibrahim
Gestionnaire GridLayout
Ce gestionnaire organise les composants en lignes et
colonnes à l'instar d'un tableau.
Néanmoins, les cellules font toutes la même taille et si vous
souhaitez affecter des tailles différentes, mieux utiliser un
gestionnaire de type BoxLayout.
GridLayout()
Crée un gestionnaire GridLayout avec une colonne par
composant sur une seule ligne
GridLayout(int rows, int cols)
Crée un gestionnaire GridLayout avec cols colonnes et
rows lignes
GridLayout(int rows, int cols, int hgap, int vgap)
Crée un gestionnaire GridLayout avec cols colonnes et
rows lignes, un espacement vertical de vgap et un
espacement horizontal de hgap.
ibbousetta@gmail.com BOUSETTA Ibrahim
Container contentPane = getContentPane();
// Création d'un JPanel pour la région CENTER
centerPanel = new JPanel(new GridLayout(4,4) );
// Ajout du centerPanel au panneau principal
contentPane.add(centerPanel, BorderLayout.CENTER);
String cchaine = "789/456*123-0.=+";
for (int i=0;i<cchaine.length();i++)
{
btab[i] = new JButton( cchaine.substring(i,i+1) );
centerPanel.add(btab[i]);
}
JButton()
Crée un nouveau bouton sans texte ni icône
JButton(Action a)
Crée un bouton dont les propriétés sont issues de l’objet
Action fourni en paramètre. Les objets Action ou
ActionListener sont utiles pour la gestion des
évènements
JButton(Icon icon)
Crée un bouton avec l’icône spécifié
JButton(String text)
Crée un bouton avec le texte spécifié.
JButton(String text, Icon icon)
Crée un bouton avec le texte et l’icône spécifié
…..
b1.addActionListener(this);
...
}
public void actionPerformed(ActionEvent e) {
if (e.getActionCommand().equals("invalider")) {
b2.setEnabled(false);
b1.setEnabled(false);
b3.setEnabled(true);
}
else { . . . }
}
Composants « texte »
JLabel : texte non
modifiable par
l’utilisateur
JTextField : entrer une
seule ligne
JPasswordField : entrer
un mot de passe non
affiché sur l’écran
JTextArea : quelques
lignes de texte avec
une seule police de
caractères
Utilité
Représenter des données sous forme
tabulaire :
Les lignes et les colonnes sont identifiées par
un nombre entier (en commençant à 0)
...
else {
int minIndex = lsm.getMinSelectionIndex();
int maxIndex = lsm.getMaxSelectionIndex();
for (int i = minIndex; i <= maxIndex; i++) {
if (lsm.isSelectedIndex(i)) {
// Ligne i est sélectionnée
...
}
}
}
ibbousetta@gmail.com BOUSETTA Ibrahim
Problème de fermeture
addWindowListener(new WindowAdapter(){
});
….