WarLocG

#! modo de compet

Les interfaces graphiques

Réalisation d'interfaces graphiques, en allant du plus basique au plus compliqué. Je change un peu ma façon de faire pour les tutos sinon je suis parti pour ne pas le terminer, ca sera du gradué

Ma première interface graphique:

import javax.swing.*; //les objets en J??? (JFrame, JButton, JLabel, ...)
import java.awt.*;    //certains objets graphiques

/*
 * Simple Tutoriel de creation de GUI
 */
 
class GUI extends JFrame{
	
	public GUI(){
		/* options/pré-requis indispensables au GUI */
		this.setVisible(true);            //rend la fenetre visible (masquee par défaut)
		this.setBounds(0,0,320,200); //donne la position et les dimensions: 
		                                        //  -> ici on démarre de 0,0 jusqu'a 320,200
		this.setDefaultCloseOperation(EXIT_ON_CLOSE); //permet la fermeture du programe lorsqu on ferme la fenetre.
					                // par défaut, on garde le processus en background lorsqu'on tue la fenètre (default: HIDE_ON_CLOSE).
                                                        // l'inconvénient si on ne met pas cette ligne est de devoir tuer le process via Ctrl-C ou depuis un kill/killall.
	}
}

class main{
	public static void main(String[] args){
		new GUI();
	}
}

résultat en image:

A présent, nous allons voir les menus, histoire de fermer la fenêtre proprement depuis une option de fermeture.

Les menus:

Voici la partie public GUI() modifiée:

public GUI(){
		/* le menu */
		
		/* Options
		 *     |-- Quitter
		 */
		 
		JMenuBar menubar = new JMenuBar(); // le JMenuBar est la barre contenant les menus
		
		JMenu menuOptions = new JMenu("Options"); // Le menu Options
		
		JMenuItem itemQuitter = new JMenuItem("Quitter"); //Le "bouton" Quitter
		
		menuOptions.add(itemQuitter); // on insere Quitter dans Options
		
		menubar.add(menuOptions); // on insere Options dans la barre des menus
		
		this.setJMenuBar(menubar); // on applique notre barre de menu comme etant celle par defaut
		
		/* options/pré-requis indispensables au GUI */
		this.setVisible(true);       //rend la fenetre visible (masquee par défaut)
		this.setBounds(0,0,320,200); //donne la position et les dimensions: 
		                             //  -> ici on démarre de 0,0 jusqu'a 320,200
		this.setDefaultCloseOperation(EXIT_ON_CLOSE); //permet la fermeture du programe lorsqu on ferme la fenetre.
						        // par défaut, on garde le processus en background lorsqu'on tue la fenètre (default: HIDE_ON_CLOSE).
                                                        // l'inconvénient si on ne met pas cette ligne est de devoir tuer le process via Ctrl-C ou depuis un kill/killall.
	}

En image:

(image obtenue depuis scrot, d'où les décorations de fenêtres n'apparaissant pas)

Attention, vous noterez que le clic sur le bouton ne fait encore rien du tout. Pour ce faire nous ajouterons un évenement dit "ecouteur" (Listener) sur notre "bouton", afin qu'il réagisse à une action de l'utilisateur.

Une première action de base (ActionListener / ActionEvent):

Afin que le bouton Quitter puisse fermer la fenetre, j ai introduis un évenement sur ce bouton, voici l'entièreté de la source modifiée:

import javax.swing.*; //les objets en J??? (JFrame, JButton, JLabel, ...)
import java.awt.*;    //certains objets graphiques
import java.awt.event.*; //les evenements lorsqu une action est donnée (action, evenement souris, clavier, ...) (1)

/*
 * Simple Tutoriel de creation de GUI
 */

// implementation de l'interface ActionListener (2) 
class GUI extends JFrame implements ActionListener{
	
	public GUI(){
		/* le menu */
		
		/* Options
		 *     |-- Quitter
		 */
		 
		JMenuBar menubar = new JMenuBar(); // le JMenuBar est la barre contenant les menus		
		JMenu menuOptions = new JMenu("Options"); // Le menu Options		
		JMenuItem itemQuitter = new JMenuItem("Quitter"); //Le "bouton" Quitter		
		menuOptions.add(itemQuitter); // on insere Quitter dans Options		
		menubar.add(menuOptions); // on insere Options dans la barre des menus		
		this.setJMenuBar(menubar); // on applique notre barre de menu comme etant celle par defaut
		
		/* les actions */
		itemQuitter.addActionListener(this); // <-- ici on rajoute notre "ecouteur" sur le bouton Quitter (3)
		
		/* options/pré-requis indispensables au GUI */
		this.setVisible(true);       //rend la fenetre visible (masquee par défaut)
		this.setBounds(0,0,320,200); //donne la position et les dimensions: 
		                             //  -> ici on démarre de 0,0 jusqu'a 320,200
		this.setDefaultCloseOperation(EXIT_ON_CLOSE); //permet la fermeture du programe lorsqu on ferme la fenetre.
				     // par défaut, on garde le processus en background lorsqu'on tue la fenètre (default: HIDE_ON_CLOSE).
                                     // l'inconvénient si on ne met pas cette ligne est de devoir tuer le process via Ctrl-C ou depuis un kill/killall.
	}
	
	// Ici l'action qui sera accomplie lorsqu on cliquera sur notre bouton. (4)
	public void actionPerformed(ActionEvent ev) { System.exit(0); }  //System.exit() permet de quitter le programme. (5)
	
}

class main{
	public static void main(String[] args){
		new GUI();
	}
}

Veuillez suivre les parties numérotées de 1 à 5 afin de voir ce qui est modifié. A partir de cet instant, la fenetre devrait se fermer correctement. Veuillez noter que j'ai écrit jusque là du code le plus simple possible et que j'ai choisi l'ActionListener car il ne contient que 1 méthode. A partir d'ici, nous allons pouvoir étoffer un peu et surtout construire l'intérieur de la fenêtre.

Oui, mais heu.. si je veux rajouter de nouveaux boutons ?

On va à présent rentrer dans une problématique que vous aurez probablement deviné à la lecture de ce code : que se passerait-il si on rajoutais un nouveau "bouton" et qu'on lui attachait un ecouteur également ?

Vous vous rappelez ? Notre actionPerformed ne contient que l'instruction suivante: System.exit(0);

En d'autres termes, ca signifierait que les deux boutons fermerait le programme. La problématique est donc que nous allons devoir déterminer sur quel bouton nous avons cliqué et affecter les bonnes opérations en fonction du bouton.

Je vais, pour les besoins du tuto mettre System.exit(0); en commentaire et rajouter un System.out.println(ev.toString()) afin de voir exactement qu'est-ce qui passé a notre actionPerformed.

partie de code modifié:

// Ici l'action qui sera accomplie lorsqu on cliquera sur notre bouton. (4)
	public void actionPerformed(ActionEvent ev) { 
             //System.exit(0);  //System.exit() permet de quitter le programme. (5)
             System.out.println(ev.toString());
        }

Ce que contient ev.toString():

java.awt.event.ActionEvent[ACTION_PERFORMED,cmd=Quitter,when=1414586921384,modifiers=Button1] on javax.swing.JMenuItem[,1,3,71x19,invalid,alignmentX=0.0,alignmentY=0.0,border=javax.swing.plaf.metal.MetalBorders$MenuItemBorder@1b2acb7,flags=264,maximumSize=,minimumSize=,preferredSize=,defaultIcon=,disabledIcon=,disabledSelectedIcon=,margin=javax.swing.plaf.InsetsUIResource[top=2,left=2,bottom=2,right=2],paintBorder=true,paintFocus=false,pressedIcon=,rolloverEnabled=false,rolloverIcon=,rolloverSelectedIcon=,selectedIcon=,text=Quitter]

A priori, beaucoup d'informations. En filtrant la dedans on pourrait dire que nos informations les plus pertinentes se trouveraient entre "cmd=" et ",when=" ou entre ",text=" et le dernier "]" (en jaune). On a également une information intérressante entre "[ACTION_PERFORMED,cmd=Quitter,when=1414586921384,modifiers=Button1] on " et "[,1,3,71x19,invalid,alignmentX=0.0, ... ", qui nous informe quel objet a recu l'action de l'utilisateur, ici il s'agit bien d'un JMenuItem (en rose).

Fort heureusement, il existe des méthodes pour filtrer la dedans sans quoi il faudrait faire de la manipulation de chaine via substring, bon c'est tout aussi efficace mais puisqu'il nous est possible de gagner quelques lignes de code via ces méthodes ainsi que d'avoir un code moins "taillé à la hache", utilisons-les.

On pourra donc récupérer la partie en jaune grâce à la méthode getActionCommand.
Pour la partie en rose, c'est un peu plus alembiqué => ev.getSource() renvoit un Object, .getClass() renvoit la classe de cet Object, soit un objet Class, enfin .getName() renvoit une String contenant le nom complet de cette classe, pour au final se retrouver avec javax.swing.JMenuItem. Et ca passera à tout les coups sans s'ennuyer à rechercher des bouts de caracteres nous donnant les indices de début et de fin de la chaîne.

// Ici l'action qui sera accomplie lorsqu on cliquera sur notre bouton. (4)
	public void actionPerformed(ActionEvent ev) { 
             //System.exit(0);  //System.exit() permet de quitter le programme. (5)
             //System.out.println(ev.toString());
             System.out.println("cmd="+ev.getActionCommand()); //Quitter
             System.out.println("class="+ev.getSource().getClass().getName()); // javax.swing.JMenuItem
        }

Ce qui renverra sur la console:

cmd=Quitter
class=javax.swing.JMenuItem

Super, nous avons les moyens de déterminer les objets sur lesquels on a cliqué dorénavant. Nous allons pouvoir travailler dessus et passer aux étapes suivantes.

Les containers, ca se mange ?

Nous allons à présent nous attaquer aux containers, que l'on pourrait imaginer un peu comme un bento.

Miam.. itadakimasu

Plus sérieusement, dans un container on peut foutre tout un tas de trucs (des JLabel, JButton, JTextBox, ...) dont d'autres containers également. De plus, nos containers viennent avec des dispositions (layout), vous comprenez pourquoi j'ai choisi d'aborder d'abord les menus ?

Je vais à présent ajouter un container contenant une étiquette (JLabel) et un bouton (JButton) afin de montrer comment on va s'y prendre. Je permettrai également à ce bouton d'avoir une action, comme pour le JMenuItem "Quitter".

public GUI() modifié:

	public GUI(){
		/* le menu */
		
		/* Options
		 *     |-- Quitter
		 */
		 
		JMenuBar menubar = new JMenuBar(); // le JMenuBar est la barre contenant les menus		
		JMenu menuOptions = new JMenu("Options"); // Le menu Options		
		JMenuItem itemQuitter = new JMenuItem("Quitter"); //Le "bouton" Quitter		
		menuOptions.add(itemQuitter); // on insere Quitter dans Options		
		menubar.add(menuOptions); // on insere Options dans la barre des menus		
		this.setJMenuBar(menubar); // on defini notre barre de menu comme etant celle par defaut
		
		/* le corps */
		Container containerPrincipal = new Container(); // Le container qui va contenir nos objets
		
		JLabel lblTexte = new JLabel("Veuillez cliquer "); // Une étiquette avec un message
		
		JButton btnClick = new JButton("ici"); // Un bouton
		
		containerPrincipal.add(lblTexte); // on insere l etiquette avec le message
		containerPrincipal.add(btnClick); // on fait de meme avec le bouton
		
		containerPrincipal.setLayout(new FlowLayout()); // on applique une disposition sinon le container ne sera pas affiché
		
		this.setContentPane(containerPrincipal); // on defini notre container comme la base par défaut
		
		/* les actions */
		itemQuitter.addActionListener(this); // <-- ici on rajoute notre "ecouteur" sur le bouton Quitter (3)
		btnClick.addActionListener(this); // on permet également au bouton d avoir un evenement
		
		/* options/pré-requis indispensables au GUI */
		this.setVisible(true);       //rend la fenetre visible (masquee par défaut)
		this.setBounds(0,0,320,200); //donne la position et les dimensions: 
		                             //  -> ici on démarre de 0,0 jusqu'a 320,200
		this.setDefaultCloseOperation(EXIT_ON_CLOSE); //permet la fermeture du programe lorsqu on ferme la fenetre.
									 // par défaut, on garde le processus en background lorsqu'on tue la fenètre (default: HIDE_ON_CLOSE).
                                     // l'inconvénient si on ne met pas cette ligne est de devoir tuer le process via Ctrl-C ou depuis un kill/killall.
	}

Résultat en image:

Avec la sortie sur console après avoir cliqué sur le bouton:

cmd=ici
class=javax.swing.JButton

Vous pourrez constater qu'il s'agit bien du bouton "ici" et non du "bouton" "Quitter".

---

Avant de poser vos questions, jeter un oeil ici
Mon CodeVault et Wiki : ici
Les messages privés envers le staff sont uniquement pour les cas d'urgence ou affaires privées (personnelles). Les demandes se feront exclusivement sur le forum. Merci de respecter cette clause sous peine de sanctions.

IceF0x

#! Gourou Linux

Re : Les interfaces graphiques

Sympa le tuto, merci.

---

Utiliser des logiciels propriétaires, c'est comme les plats préparés, on est incapable de dire les conservateurs qu'ils contiennent, on dira toujours que c'est bon, mais ça ne remplacera jamais le repas fait maison par sa maman.
]:D #! Crunchbang & Archlinux GNU/Linux User ]:D

WarLocG

#! modo de compet

Re : Les interfaces graphiques

Merci, j'espère qu'il intéressera du monde, les fans de java n'étant pas légion ^^

---

Avant de poser vos questions, jeter un oeil ici
Mon CodeVault et Wiki : ici
Les messages privés envers le staff sont uniquement pour les cas d'urgence ou affaires privées (personnelles). Les demandes se feront exclusivement sur le forum. Merci de respecter cette clause sous peine de sanctions.

Yzeew

Membre d'or

Re : Les interfaces graphiques

c'est sympa tout ça !
Mais bon, le java ce n'est pas pour moi 

---

>> Good things come to those who, Wait.. <<

>> sip:yzeew@ekiga.net << and >> #Pouni3 <<