intro fenetres graphiques

Download Intro Fenetres Graphiques

Post on 01-Jan-2016

8 views

Category:

Documents

2 download

Embed Size (px)

DESCRIPTION

Java, fenetres graphiques, programmation.

TRANSCRIPT

  • Interfaces Java

    Les fentres graphiques

    (Introduction)

  • Les fentres graphiques (Introduction) Caroline Pedneault

    420-135-LI Page 2

    DFINITION DUNE INTERFACE GRAPHIQUE SIMPLE (GUI : Graphic User Interface)

    Dfinition:

    Un support graphique visible pouvant contenir des composantes comme des champs textes, des

    boutons, des images, des menus et bien dautres. Une application graphique comprend habituellement une premire fentre graphique et un ensemble de botes de dialogue pour interagir avec lutilisateur.

    Dans ce premier document sur les fentres graphiques nous tentons de vous prsenter laide dexemples et de code Java, comment manipuler sommairement une fentre et certaines de ses composantes. Bien entendu ce document est une explication de haut niveau et il doit tre accompagn

    dexplications supplmentaires lors dun cours thorique.

    Voici un exemple simple permettant de dfinir une interface graphique en JAVA. Ceci n'est pas une

    recette appliquer dans tous les cas. Ce n'est qu'un exemple simplifi d'une application graphique

    ayant pour but de vous montrer les instructions de base. Il sera enrichi au cours de la session.

    1. tapes de dfinition d'une fentre graphique.

    1.1 Voici la plus simple des fentres

    public class Fenetre extends JFrame

    {

    //attributs de la classe

    public Fenetre()

    {

    }

    public static void main(String arg[])

    {

    Fenetre app = new Fenetre();

    app.setSize(100, 75);

    app.setVisible(true);

    }

    Le rsultat est:

    Constructeur vide

    les mthodes setSize et setVisible sont hrites de

    JFrame grce : public class Fenetre extends JFrame

    Barre de titre

    Fond

    Bordure redimensionnable

    Tout cela est hrit de JFrame

  • Les fentres graphiques (Introduction) Caroline Pedneault

    420-135-LI Page 3

    Comment faire maintenant pour avoir ceci :

    1.2 On ajoute des paramtres la fentre (JFrame). Dans le constructeur, qui initialise l'objet

    Fenetre, on crit :

    this.setTitle("Exemple de fentre graphique simple");

    this.setSize(600,400);

    //Par dfaut 0,0 donc inutile ici

    this.setLocation(0,0);

    Que reprsente this ?

  • Les fentres graphiques (Introduction) Caroline Pedneault

    420-135-LI Page 4

    2. Par la suite, on dclare un objet conteneur panPrincipal (de type Container) qu'on initialise

    au conteneur par dfaut de la fentre. Ce conteneur (panPrincipal) servira accueillir les

    diffrents composants graphiques. Le conteneur par dfaut de la fentre est, par dfaut,

    structur en BorderLayout. Ce type d'organisation permet de diviser la fentre en 5 parties

    ou zones gographiques: NORTH, SOUTH, EAST, WEST et CENTER. Chaque zone ne

    pourra recevoir qu'un seul composant graphique. Dans notre exemple nous utiliserons

    seulement 3 zones: le haut (NORTH), le bas (SOUTH) et le centre (CENTER).

    public class Fenetre extends JFrame

    {

    //attributs de la classe

    public Fenetre()

    {

    this.setTitle("Exemple de fentre graphique simple");

    this.setSize(600,400);

    this.setLocation(0,0);

    Container panPrincipal = null;

    panPrincipal = this.getContentPane();

    . }

    2.1 Parce que la zone nord ne peut recevoir qu'un seul composant graphique, nous crons ensuite

    un panneau nord (panNord de type JPanel), qui lui pourra recevoir plus d'un composant. Un

    JPanel est structur par dfaut en FlowLayout. Ce type d'organisation permet de recevoir

    plus d'un composant et ceux-ci sont placs les uns la suite des autres. On instancie donc les

    diffrents objets graphiques et on les ajoute au panneau nord qui lui, est ajout au conteneur

    principal. Le panneau nord contient 2 objets (un JLabel et un JTextField).

    // Panneau Nord

    panNord = new JPanel();

    lblNom = new JLabel("NOM:");

    txtNom = new JTextField(25);

    //Rend la zone de texte non modifiable

    txtNom.setEditable(false);

    panNord.add(lblNom);

    panNord.add(txtNom);

    panPrincipal.add(panNord, BorderLayout.NORTH);

    Ou Container panPrincipal = getContentPane();

    (Donne la rfrence du conteneur par dfaut de

    l'objet courant (app) l'objet panPrincipal.)

  • Les fentres graphiques (Introduction) Caroline Pedneault

    420-135-LI Page 5

    2.2 Ensuite on cre le panneau sud et on fait la mme chose. Cette fois on a 3 objets de type

    JButton dans le panneau sud.

    // Panneau Sud

    panSud = new JPanel();

    btnEntrerNom = new JButton("Entrer nom");

    btnAfficher = new JButton("Afficher");

    btnQuitter = new JButton("Quitter");

    panSud.add(btnEntrerNom);

    panSud.add(btnAfficher);

    panSud.add(btnQuitter);

    panPrincipal.add(panSud, BorderLayout.SOUTH);

    2.3 Il ne reste qu' crer la partie centrale. Dans cette partie, je n'ai pas besoin d'un JPanel car

    la partie centrale ne contient qu'un seul objet; un JTextArea.

    // placer le textArea au centre

    tAff = new JTextArea();

    tAff.setFont(new Font("Courier New", Font.BOLD, 20));

    //Rend la zone non modifiable

    tAff.setEnabled(false);

    tAff.setText("");

    panPrincipal.add(tAff, BorderLayout.CENTER);

    //Finalement rendre la fentre visible

    setVisible(true);

    3. Il ne faut pas oublier de dclarer, au dbut de la classe Fenetre, ses attributs qui sont tous les

    objets ncessaires l'interface.

    private JLabel lblNom = null;

    private JTextField txtNom = null;

    private JButton btnEntrerNom = null,

    btnAfficher = null,

    btnQuitter = null;

    private JTextArea tAff = null;

    private JPanel panNord = null,

    panSud = null;

    Pour le moment, les boutons dans le panneau sud ne peuvent se faire entendre. C'est comme s'ils

    taient inactifs. En cliquant dessus, il ne se passe rien. Pour que ceux-ci soient entendus, on

    devra crer une classe qui permettra dajouter des couteurs nos objets qui peuvent recevoir des vnements.

    Voir la page suivante le code complet de la classe Fenetre comment et rorganis de faon ce

    qu'il soit plus facilement maintenable.

    Toute la partie centrale

    On aurait pu aussi mettre le JTextArea dans un

    JPanel, ce qui aurait donn le mme rsultat.

  • Les fentres graphiques (Introduction) Caroline Pedneault

    420-135-LI Page 6

    import javax.swing.*;

    import java.awt.*;

    import java.awt.event.*;

    /**

    * Cette classe montre un exemple simple d'interface graphique.

    *

    * @author Caroline Pedneault

    *

    */

    public class Fenetre extends JFrame

    {

    //attributs de la classe Fenetre

    private JLabel lblNom = null;

    private JTextField txtNom = null;

    private JButton btnEntrerNom = null,

    btnAfficher = null,

    btnQuitter = null;

    private JTextArea tAff = null;

    private JPanel panNord = null,

    panSud = null;

    /**

    * Construire une fentre simple

    */

    public Fenetre()

    {

    //Donner un titre, une dimension et une position la fentre

    this.setTitle("Exemple de fentre graphique simple");

    this.setSize(600, 400);

    //Initialiser le panneau principal de la fentre

    //au conteneur par dfaut

    Container panPrincipal = this.getContentPane();

    //Crer les composants graphiques du panneau nord

    //et les ajouter

    lblNom = new JLabel("NOM:");

    txtNom = new JTextField(25);

    txtNom.setEditable(false);

    panNord = new JPanel();

    panNord.add(lblNom);

    panNord.add(txtNom);

    //Crer les composants graphiques du panneau sud

    //et les ajouter

    btnEntrerNom = new JButton("Entrer nom");

    btnAfficher = new JButton("Afficher");

  • Les fentres graphiques (Introduction) Caroline Pedneault

    420-135-LI Page 7

    btnQuitter = new JButton("Quitter");

    panSud = new JPanel();

    panSud.add(btnEntrerNom);

    panSud.add(btnAfficher);

    panSud.add(btnQuitter);

    //Crer la zone de texte et la placer au centre

    //du conteneur principal

    tAff = new JTextArea();

    tAff.setFont(new Font("Courier New", Font.BOLD, 20));

    tAff.setEnabled(false);

    tAff.setText("");

    panPrincipal.add(tAff, BorderLayout.CENTER);

    //Ajouter les diffrents panneaux au panneau principal

    panPrincipal.add(panNord, BorderLayout.NORTH);

    panPrincipal.add(panSud, BorderLayout.SOUTH);

    setVisible(true);

    }

    public static void main(String arg[])

    {

    Fenetre app = new Fenetre();

    }

    }

  • Les fentres graphiques (Introduction) Caroline Pedneault

    420-135-LI Page 8

    Voici dautres exemples avec dautres types de composants graphiques.

    Exemple 2 : division par dfaut d'une fentre

    Ce deuxime exemple met en vidence comment la zone intrieure dune fentre est divise. Par dfaut la zone de travail dune fentre est divise en cinq sections qui sont identifiables par les points cardinaux et le centre