Upload
others
View
6
Download
0
Embed Size (px)
Citation preview
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
Info2B - Interfaces visuelles 2
CM2 : Interfaces visuelles – Info2bApplication : Les couleurs
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
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
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
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
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
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
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
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
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
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
CM2 : Interfaces visuelles – Info2bApplication : Les couleurs
Construction de l’interface
Arborescence de l’interface écrite au tableau
13
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
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
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
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
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
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
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
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
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
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
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