CM2 : Interfaces visuelles Info2b PLANufrsciencestech.u-bourgogne.fr/licence1/Info2B...CM2 :...

24
CM2 : Interfaces visuelles – Info2b PLAN Etude de composants Boutons : JButton, JRadioButton Case à cocher : JCheckedBox Listes : JComboBox, JList À travers le développement d’une application : Les couleurs Application à implémenter en travail personnel et dossier technique à rendre pour le vendredi 21 février par mail à l’enseignant de TP Sujet en ligne sur le site http://ufrsciencestech.u-bourgogne.fr/licence1/Info2B_InterfacesVisuelles/ 1

Transcript of CM2 : Interfaces visuelles Info2b PLANufrsciencestech.u-bourgogne.fr/licence1/Info2B...CM2 :...

Page 1: CM2 : Interfaces visuelles Info2b PLANufrsciencestech.u-bourgogne.fr/licence1/Info2B...CM2 : Interfaces visuelles –Info2b Application : Les couleurs Cahier des charges L’application

CM2 : Interfaces visuelles – Info2bPLAN

Etude de composants

Boutons : JButton, JRadioButton

Case à cocher : JCheckedBox

Listes : JComboBox, JList

À travers le développement d’une application :

Les couleurs

Application à implémenter en travail personnel et dossier technique à rendre pour le vendredi 21 février par mail à l’enseignant de TP

Sujet en ligne sur le site http://ufrsciencestech.u-bourgogne.fr/licence1/Info2B_InterfacesVisuelles/

1

Page 2: CM2 : Interfaces visuelles Info2b PLANufrsciencestech.u-bourgogne.fr/licence1/Info2B...CM2 : Interfaces visuelles –Info2b Application : Les couleurs Cahier des charges L’application

Info2B - Interfaces visuelles 2

CM2 : Interfaces visuelles – Info2bApplication : Les couleurs

Page 3: CM2 : Interfaces visuelles Info2b PLANufrsciencestech.u-bourgogne.fr/licence1/Info2B...CM2 : Interfaces visuelles –Info2b Application : Les couleurs Cahier des charges L’application

CM2 : Interfaces visuelles – Info2bApplication : Les couleurs

Les étapes de développement de l’application

Spécification du cahier des charges

Analyse des fonctionnalités de l’application

Informations à gérer – Organisation de ces informations

Analyse des fonctionnalités

Construction de l’interface (JFrame)

En utilisant les composants conteneurs JPanel, JScrollPane, et en gérant leurs dispositions (Layout)

Implémentation des actions

Codage des gestionnaires d’événements

3

Page 4: CM2 : Interfaces visuelles Info2b PLANufrsciencestech.u-bourgogne.fr/licence1/Info2B...CM2 : Interfaces visuelles –Info2b Application : Les couleurs Cahier des charges L’application

CM2 : Interfaces visuelles – Info2bApplication : Les couleursCahier des charges

L’application permet de :

Sélectionner des couleurs

En utilisant des boutons radio (Rouge, Vert, Jaune)

En utilisant une liste déroulante, et en cliquant sur le bouton « Ajouter »

Afficher la couleur composée du mélange des couleurs sélectionnées dans un panneau (en bas à gauche)

Afficher les noms des couleurs sélectionnées, dans une liste, en haut à droite

Afficher le détail des compositions des couleurs sélectionnées dans une zone d’édition en bas à droite

Uniquement si la case Informations est cochée

4

Page 5: CM2 : Interfaces visuelles Info2b PLANufrsciencestech.u-bourgogne.fr/licence1/Info2B...CM2 : Interfaces visuelles –Info2b Application : Les couleurs Cahier des charges L’application

CM2 : Interfaces visuelles – Info2bApplication : Les couleursModélisation

Informations à gérer

Les couleurs disponibles proposées dans la liste déroulante

Nom de la couleur, et la couleur elle-même en RGB

Les couleurs sélectionnées affichées

Noms des couleurs dans la liste (à droite)

Les couleurs elles-mêmes pour le détail

La couleur courante du panneau

Qui est le mélange de toutes les couleurs sélectionnées

5

Page 6: CM2 : Interfaces visuelles Info2b PLANufrsciencestech.u-bourgogne.fr/licence1/Info2B...CM2 : Interfaces visuelles –Info2b Application : Les couleurs Cahier des charges L’application

CM2 : Interfaces visuelles – Info2bApplication : Les couleursModélisation

Les structures de données choisies pour gérer ces informations

Des listes pour les noms des couleurs des couleurs disponibles, et les couleurs elles-mêmes

liste de couleurs de type Color

ArrayList<Color> lstCoulDispo;

liste des noms de type String

ArrayList<String> lstNomCoulDispo;

6

Page 7: CM2 : Interfaces visuelles Info2b PLANufrsciencestech.u-bourgogne.fr/licence1/Info2B...CM2 : Interfaces visuelles –Info2b Application : Les couleurs Cahier des charges L’application

CM2 : Interfaces visuelles – Info2bApplication : Les couleursModélisation

Les structures de données choisies pour gérer ces informations

Des tableaux pour gérer les noms des couleurs sélectionnées et les couleurs elles-mêmes

Tableau des noms des couleurs sélectionnées

String tabNomCoulSelect [ ];

Tableau des couleurs sélectionnées

Color tabCoulSelect [ ];

MAX (entier) : nombre maximum de couleurs sélectionnables

nb (entier) : nombre courant de couleurs sélectionnées

Une valeur de type Color pour la couleur courante du mélange

Color coulCourante

7

Page 8: CM2 : Interfaces visuelles Info2b PLANufrsciencestech.u-bourgogne.fr/licence1/Info2B...CM2 : Interfaces visuelles –Info2b Application : Les couleurs Cahier des charges L’application

CM2 : Interfaces visuelles – Info2bApplication : Les couleursAnalyse des fonctionnalités

Clic sur un des boutons radio pour le cocher ou pour le décocher

Si l’utilisateur coche un bouton radio

La couleur correspondante est ajoutée au tableau des couleurs sélectionnées

Le nom de la couleur est ajouté au tableau des noms

Le nom est aussi ajouté dans la liste de la fenêtre (en haut à droite)

Le détail des couleurs est ré-affiché si la case informations est cochée

La couleur de mélange est calculée comme nouvelle couleur courante

Le fond du panneau est colorié

Si l’utilisateur décoche un bouton, il ne se passe rien de spécifique, mais il pourra le cocher à nouveau, pour re-sélectionner la couleur.

8

Page 9: CM2 : Interfaces visuelles Info2b PLANufrsciencestech.u-bourgogne.fr/licence1/Info2B...CM2 : Interfaces visuelles –Info2b Application : Les couleurs Cahier des charges L’application

CM2 : Interfaces visuelles – Info2bApplication : Les couleursAnalyse des fonctionnalités

Clic sur la case à cocher Informations

Si l’utilisateur coche la case à cocher Informations

Le détail du mélange des couleurs est affiché dans la zone d’édition La valeur RGB de chaque couleur du mélange est affichée

La valeur de la couleur courante du mélange est également affichée

Ces informations seront mises à jour lors des sélections de nouvelles couleurs tant que cette case est cochée

Si l’utilisateur décoche la case à cocher Informations La zone d’édition est ré-initialisée à vide

9

Page 10: CM2 : Interfaces visuelles Info2b PLANufrsciencestech.u-bourgogne.fr/licence1/Info2B...CM2 : Interfaces visuelles –Info2b Application : Les couleurs Cahier des charges L’application

CM2 : Interfaces visuelles – Info2bApplication : Les couleursAnalyse des fonctionnalités

Sélection d’une couleur dans la liste déroulante

Un échantillon de la couleur sélectionnée apparaît en dessous de la liste

La sélection montre le nom de la couleur (ex: « Bleu Azur »)

Cette couleur est affectée comme couleur de fond

au panneau en dessous de la liste

Ex: la couleur vaut RGB(0,127,155)

La couleur n’est pas encore ajoutée à la liste des couleurs sélectionnées, pour que l’utilisateur puisse « choisir » sa couleur après l’avoir visualiser

L’ajout de la couleur se fait lors du clic sur le bouton « Ajouter »

10

Page 11: CM2 : Interfaces visuelles Info2b PLANufrsciencestech.u-bourgogne.fr/licence1/Info2B...CM2 : Interfaces visuelles –Info2b Application : Les couleurs Cahier des charges L’application

CM2 : Interfaces visuelles – Info2bApplication : Les couleursAnalyse des fonctionnalités

Clic sur le bouton « Ajouter »

L’indice de l’élément sélectionné dans la liste déroulante est récupéré

Le nom et la couleur elle-même sont récupérées dans les listes des noms et des couleurs disponibles

Le nom est ajouté dans le tableau des noms et la couleur dans le tableau des couleurs sélectionnées

La nouvelle couleur courante est calculée

L’interface est mise à jour

Ajout du nom dans la liste en haut à droite

Affichage des détails de la couleur si la case Informations est cochée

Coloriage de la couleur de fond du panneau avec la couleur courante

11

Page 12: CM2 : Interfaces visuelles Info2b PLANufrsciencestech.u-bourgogne.fr/licence1/Info2B...CM2 : Interfaces visuelles –Info2b Application : Les couleurs Cahier des charges L’application

CM2 : Interfaces visuelles – Info2bApplication : Les couleursAnalyse des fonctionnalités

Clic sur le bouton « Réinitialiser»

Les tableaux des noms et des couleurs sélectionnés sont réinitialisés Uniquement en fixant leur nombre d’éléments courant à 0

Les boutons radio et la case à cocher sont décochés

La couleur courante est réinitialisée à la couleur initiale

Sur l’interface

La zone d’édition des informations est « vidée »

La liste des noms des couleurs (en haut à droite) est également vidée

Le panneau est colorié avec sa couleur initiale

12

Page 13: CM2 : Interfaces visuelles Info2b PLANufrsciencestech.u-bourgogne.fr/licence1/Info2B...CM2 : Interfaces visuelles –Info2b Application : Les couleurs Cahier des charges L’application

CM2 : Interfaces visuelles – Info2bApplication : Les couleurs

Construction de l’interface

Arborescence de l’interface écrite au tableau

13

Page 14: CM2 : Interfaces visuelles Info2b PLANufrsciencestech.u-bourgogne.fr/licence1/Info2B...CM2 : Interfaces visuelles –Info2b Application : Les couleurs Cahier des charges L’application

CM2 : Interfaces visuelles – Info2bApplication : Les couleursLes composants

Comment travailler avec un bouton radio (JRadioButton) ou une case à cocher (JCheckBox) ?

Comment savoir si un bouton est coché ou non ?

Utilisation de la méthode « isSelected » qui retourne Vrai ou Faux

if (bouton.isSelected())

Comment cocher ou décocher un bouton ?

Bouton.setSelected(true) ; pour cocher

Bouton.setSelected(false) ; pour décocher

14

Page 15: CM2 : Interfaces visuelles Info2b PLANufrsciencestech.u-bourgogne.fr/licence1/Info2B...CM2 : Interfaces visuelles –Info2b Application : Les couleurs Cahier des charges L’application

CM2 : Interfaces visuelles – Info2bApplication : Les couleursLes composants

Comment travailler avec une zone d’édition de type JTextArea ?

JTextArea Edition = new JTextArea();

Comment écrire du texte dans la zone d’édition ?

Edition.setText ("Le texte a écrire");

Comment ajouter du texte ?

Edition.append ("Le texte a écrire");

Comment réinitialiser la zone de texte ?

Bouton.setText("") ;

15

Page 16: CM2 : Interfaces visuelles Info2b PLANufrsciencestech.u-bourgogne.fr/licence1/Info2B...CM2 : Interfaces visuelles –Info2b Application : Les couleurs Cahier des charges L’application

CM2 : Interfaces visuelles – Info2bApplication : Les couleursLes composants

Comment travailler sur une liste déroulante de type JComboBox ?

Création de la liste

JComboBox Liste = new JComboxBox();

Ajouter un élément dans la liste

Liste.addItem("Rouge");

String v="Vert"; Liste.addItem(v);

Par défaut, le 1er élément de la liste est sélectionné et son indice vaut 0

16

Page 17: CM2 : Interfaces visuelles Info2b PLANufrsciencestech.u-bourgogne.fr/licence1/Info2B...CM2 : Interfaces visuelles –Info2b Application : Les couleurs Cahier des charges L’application

CM2 : Interfaces visuelles – Info2bApplication : Les couleursLes composants

Comment travailler sur une liste déroulante de type JComboBox ?

Récupération de l’indice de l’élément sélectionné

int i= Liste.getSelectedIndex();

Récupération de la valeur de l’élément sélectionné

String s=Liste.getSelectedItem().toString();

Récupération du nombre d’éléments de la liste

int nb = Liste.getItemCount();

17

Page 18: CM2 : Interfaces visuelles Info2b PLANufrsciencestech.u-bourgogne.fr/licence1/Info2B...CM2 : Interfaces visuelles –Info2b Application : Les couleurs Cahier des charges L’application

CM2 : Interfaces visuelles – Info2bApplication : Les couleursLes composants

Comment travailler sur une liste de type JList ?

Une JList peut permettre de sélectionner

Un élément (clic sur l’élément)

Plusieurs éléments successifs en utilisant la touche « Majuscule »

Plusieurs éléments en utilisant la touche « Contrôle »

18

Page 19: CM2 : Interfaces visuelles Info2b PLANufrsciencestech.u-bourgogne.fr/licence1/Info2B...CM2 : Interfaces visuelles –Info2b Application : Les couleurs Cahier des charges L’application

CM2 : Interfaces visuelles – Info2bApplication : Les couleursLes composants

Comment travailler sur une liste de type JList ?

L'usage d'une liste de type JList est plus complexe car il est nécessaire

De travailler explicitement avec le modèle associé à la liste

Il existe un type de modèle de liste par défaut nommé

DefaultListModel

Pour créer un objet de type JList, il est donc nécessaire

Créer un modèle de liste

Fixer ce modèle pour la liste

Puis ajouter des éléments à la liste mais en utilisant le modèle

19

Page 20: CM2 : Interfaces visuelles Info2b PLANufrsciencestech.u-bourgogne.fr/licence1/Info2B...CM2 : Interfaces visuelles –Info2b Application : Les couleurs Cahier des charges L’application

CM2 : Interfaces visuelles – Info2bApplication : Les couleursLes composants

Comment travailler sur une liste de type JList ?

Création de la liste

JList Liste = new JList();

Création du modèle

DefaultListModel mod= new DefaultListModel();

Association du modèle à la liste

Liste.setModel(mod);

Ajout d’un élément à la liste avec le modèle

mod.addElement("Rouge");

Suppression de tous les éléments de la liste

mod.removeAllElements();20

Page 21: CM2 : Interfaces visuelles Info2b PLANufrsciencestech.u-bourgogne.fr/licence1/Info2B...CM2 : Interfaces visuelles –Info2b Application : Les couleurs Cahier des charges L’application

CM2 : Interfaces visuelles – Info2bApplication : Les couleursLes composants

Comment travailler sur une liste de type JList ?

Si la liste ne permet qu’une sélection simple

Récupération de l’indice de l’élément sélectionné

int indice = Liste.getSelectedIndex();

Si la liste permet une sélection multiple

int tab[ ]=Liste.getSelectedIndices();

// le tableau tab contient tous les indices des éléments sélectionnés dans la liste

21

Page 22: CM2 : Interfaces visuelles Info2b PLANufrsciencestech.u-bourgogne.fr/licence1/Info2B...CM2 : Interfaces visuelles –Info2b Application : Les couleurs Cahier des charges L’application

CM2 : Interfaces visuelles – Info2bApplication : Les couleursImplémentation

Le constructeur de la fenêtre principale doit :

Créer l’interface graphique

Initialiser les attributs de la classe

La liste des couleurs disponibles

La liste des nom des couleurs disponibles

Le tableau des noms des couleurs sélectionnées

Le tableau des couleurs sélectionnées

Avec un nombre d’élément à 0

La couleur courante

Affecter un modèle à la liste de type JList

Remplir la liste déroulante de type JCobombox avec les couleurs disponibles

Constructeur écrit au tableau22

Page 23: CM2 : Interfaces visuelles Info2b PLANufrsciencestech.u-bourgogne.fr/licence1/Info2B...CM2 : Interfaces visuelles –Info2b Application : Les couleurs Cahier des charges L’application

CM2 : Interfaces visuelles – Info2bApplication : Les couleursImplémentation

Les méthodes d’initialisation de la fenêtre principale (JFrame)

private void initLstCoulDispo()

Pour remplir la liste des couleurs disponibles et la liste des noms des couleurs

lstCoulDispo , lstNomCoulDispo

private void initListeCouleurs()

Pour remplir la liste de type JComboBox avec la les noms des couleurs disponibles

Code complet écrit au tableau

23

Page 24: CM2 : Interfaces visuelles Info2b PLANufrsciencestech.u-bourgogne.fr/licence1/Info2B...CM2 : Interfaces visuelles –Info2b Application : Les couleurs Cahier des charges L’application

CM2 : Interfaces visuelles – Info2bApplication : Les couleursImplémentation

Les gestionnaires d’événements

Pour le clic sur un bouton radio

private void BVertActionPerformed(ActionEvent evt)

private void BRougeActionPerformed(ActionEvent evt)

private void BBleuActionPerformed(ActionEvent evt)

Pour le clic sur la case à cocher

private void BInfosActionPerformed(ActionEvent evt)

Pour la sélection dans la liste déroulante

private void ListeCouleursActionPerformed(ActionEvent evt)

Pour le clic sur le bouton « Ajouter »

private void BAjouterActionPerformed(ActionEvent evt)

Pour le clic sur le bouton « Réinitialiser » private void BResetActionPerformed(ActionEvent evt)

Code complet écrit au tableau24