TP01 - Travaux Pratiques de Programmation

chuckleelephantbutteΛογισμικό & κατασκευή λογ/κού

9 Ιουν 2012 (πριν από 5 χρόνια και 7 μήνες)

352 εμφανίσεις




1


TP01
-
Travaux Pratiques de Programmation



Exercice 1: Création de répertoires


Allez dans votre espace disque (H:) et créez l'arborescence suivante:



H:
\
cours
\
prog
\




En cas de doute, n'hésitez pas à
poser des questions !



Exercice 2: Votre premier
Projet avec l'EDI NetBeans

Vous allez écrire votre premier programme en Java à l'aide de l'EDI NetBeans. Cette
application aura pour but de compter le nombre de fois qu'un bouton aura été cliqué
et devra se présenter comme suit:








2

Un EDI n'est rien d'a
utre qu'un outil qui vous permet de développer une application
dans un environnement intégré (tout en un), c
-
à
-
d. édition, compilation, test,
exécution, etc… NetBeans dispose en outre d'un outil de développement d'interface
graphique qui facilite grandemen
t la création des éléments visuels de votre
application, car le code
Java
nécessaire à ces éléments est généré
automatiquement.


Vous allez créer un programme qui compte le nombre de clique effectués sur un
bouton et affichera ce nombre accompagné d'une p
etite phrase.




Création d'un projet


Le développement Java dans l'EDI s'effectuant au sein de projets, nous devons
d'abord créer un projet
TP01
où stocker les sources et autres fichiers. Un projet EDI
est un groupe de fichiers source Java auquel s
ont associées des métadonnées.


Pour créer un projet d'application
TP01
:


1. Sélectionnez
File > New Project
. Vous pouvez aussi cliquer sur l'icône
New
Project
dans la barre d'outils de l'EDI.


2. Dans le volet
Categories
, sélectionnez
le nœud
General
, puis dans le volet
Projets, choisissez
Java Application
. Cliquez sur
Next
.


3. Tapez
TP01
dans le champ
Project Name
, puis indiquez l'emplacement du
projet
H:
\
cours
\
prog
\


4. Assurez
-
vous que la case à cocher
Set as Main Proj
ect
est sélectionnée et, le
cas échéant,
désactivez

Create Main Class
.


5. Cliquez sur
Finish
.


L'EDI crée le dossier
TP01
à l'emplacement désigné
H:
\
cours
\
prog
\
dans votre
système. Il contient tous les fichiers associés au projet.




Création d'un conteneur d'interface graphique


Pour poursuivre la création de l'interface, nous devons créer un conteneur Java où
nous placerons les autres composants d'interface requis (bouton, labels, etc…). Au
cours de cette étape, nous utiliserons le c
omposant JFrame pour créer un conteneur
que nous placerons dans un nouveau package.


Pour créer un conteneur JFrame :


1. Dans la fenêtre
Projects
(à gauche), cliquez avec le bouton droit de la souris
sur le nœud
TP01
et sélectionnez
New > JFram
e Form
.




3


2. Tapez le nom de classe
TP01ui
.


3. Tapez
my.tp01
pour le package.


4. Cliquez sur
Finish
.



Familiarisation avec le générateur d'interface


Nous avons terminé la création d'un projet pour notre application. Prenons quelques

instants pour nous familiariser avec l'interface du générateur d'interface. Cliquez sur
l'icône Afficher la démo pour découvrir l'interface du générateur de manière
interactive.



Lorsque nous avons ajouté le conteneur
JFrame
, l'EDI a ouvert le nouveau
f
ormulaire
TP01ui
dans un onglet Éditeur (au centre) muni d'une barre d'outils
présentant plusieurs boutons (voir figure ci
-
dessus). Le formulaire TP01 s'est ouvert
dans la vue Conception (
Design
) du générateur d'interface et trois fenêtres
supplémentaires
se sont automatiquement affichées sur les bords de l'EDI. Elles
vous permettent de parcourir, organiser et modifier le formulaires d'interface
utilisateur au fil de leur création.


Les différentes fenêtres du générateur d'interface sont décrites ci
-
dessous
.




4



* Zone de conception (au centre)
. Fenêtre principale de création et de modification
des formulaires de l'interface graphique Java. Les boutons de bascule Source et
Conception de la barre d'outils permettent d'afficher le code source d'une classe ou
la vue graphique de ses composants d'interface. Les boutons supplémentaires
permettent l'accès rapide aux commandes les plus fréquemment utilisées (activation
des modes Sélection ou Connexion, alignement des composants, définition du
comportement de redime
nsionnement automatique et aperçu des formulaires).


* Inspecteur (à gauche)
. Représentation arborescente, visuelle et non visuelle, de
tous les composants de votre application. L'Inspecteur indique également les
composants en cours de modification dans
le générateur d'interface et permet
d'organiser les composants dans les volets disponibles.


* Palette
(à droite). Liste personnalisable des composants disponibles, comportant
des onglets dédiés aux composants graphiques et aux gestionnaires de disposi
tion.
Vous pouvez également créer, supprimer et réorganiser les catégories affichées
dans la palette à l'aide du personnaliseur.


* Fenêtre des propriétés
(à droite). Affiche les propriétés du composant
sélectionné dans le générateur d'interface, ainsi
que dans les fenêtres Inspecteur,
Projets et Fichiers.


Lorsque vous cliquez sur le bouton
Source
, l'EDI affiche le code source Java de
l'application dans l'Éditeur. Les parties du code automatiquement générées par le
générateur d'interface s'affichent en
arrière
-
plan de couleur bleu. Ces blocs protégés
ne peuvent pas êtres modifiés dans la vue
Source
, où vous pouvez modifier
uniquement le code des zones blanches de l'Éditeur. Pour modifier le code d'un bloc
protégé, cliquez sur le bouton Conception afin d'
afficher de nouveau l'Éditeur de l'EDI
dans le générateur d'interface. Vous pourrez alors apporter les modifications
nécessaires au formulaire. Lorsque vous enregistrez vos changements, l'EDI met à
jour les sources du fichier.



Conception libre


G
râce au générateur d'interface de l'EDI, créez vos formulaires en positionnant
des composants à l'emplacement de votre choix, tout comme en mode de
positionnement absolu. Le générateur d'interface identifie les gestionnaires de
disposition requis, puis gén
ère le code automatiquement. Il se charge de tout.


Positionnement automatique des composants (alignement)


Lorsque vous ajoutez des composants à un formulaire (boutons, champs de texte,
labels, menus déroulants, etc…), vous pouvez utiliser les in
structions visuelles (en
pointillés) du générateur d'interface pour positionner les composants en fonction de
l'apparence du système d'exploitation.








5



Pour ajouter des composants
JLabel
au formulaire :


1. À partir de la fenêtre
Palette
, sél
ectionnez (cliquez une fois sur) le composant
JLabel
dans la catégorie
Swing
.


2. Déplacez le curseur sur le composant
JFrame
(fenêtre principale du projet).
Les lignes de grille s'affichent et indiquent la position du composant
JLabel
dans
l'angle
supérieur gauche du composant
JPanel
et une marge réduite aux bords
supérieur et gauche. Cliquez alors pour placer l'étiquette (
JLable
).


Le composant
JLabel
est ajouté au formulaire et le nœud correspondant
s'affiche dans la fenêtre Inspecteur.



3. Répétez les points 1 et 2 ci
-
dessus afin d'obtenir le résultat ci
-
dessous.
Utilisez les aides visuelles pour aligner vos éléments correctement.




Avant de poursuivre, nous devons modifier le texte d'affichage des composants
JLabel que nous venons d'
ajouter. Il est possible de réaliser cette opération à tout
instant, mais elle se révèle plus aisée au moment de l'ajout du texte.


Pour modifier le texte d'affichage d'un composant
JLabel
:


1. Double
-
cliquez sur le composant
JLabel
pour en sél
ectionner le texte
d'affichage.


2. Tapez le nouveau texte: et appuyez sur Entrée.


Le nouveau nom du composant
JLabel
s'affiche et la largeur du composant
s'en trouve modifiée.





6


Ainsi, le
JLabel1
devient "Le bouton a été cliqué", le
JLa
bel2
devient le chiffre
"0" et le
JLabel3
devient "fois",



Nous allons maintenant ajouter un composant
JButton
de la même manière que
les étiquettes au point précédent. Vous devez obtenir le résultat présenté en page 1.
Pensez à changer le texte affic
hé dans le bouton et à aligner les divers éléments de
manière esthétiquement plaisante.


Les Actions


Nous voulons maintenant attacher une
action
au bouton afin que chaque fois que le
bouton est cliqué, le nombre affiché au dessus augment de 1.


1.

Clique dro
it sur le bouton
JButton1
puis:
Events > Action > actionPerformed.
Remarquez que vous êtes passé en mode
Source
qui vous permet d'éditer le
code
Java
de votre application. Le code des éléments graphiques ne peut pas
être modifié en mode
Source,
seul le mod
e
Design
permet de le faire. Le
curseur
clignote au début de la portion de code (vide pour l'instant) qui sera
exécutée au moment où le bouton est cliqué.


2.

Ajoutez le code en gras ci
-
dessous à l'emplacement désigné:


private void jButton1ActionPerformed(

j
ava.awt.event.ActionEvent evt) {


compteur = compteur + 1;




jLabel2.setText(compteur+"");

}


3.

Plus haut dans le code, ajoutez encore la ligne (en gras) suivante entre la
déclaration de la classe et le constructeur comme suit:


public class TP01ui exte
nds javax.swing.JFrame {



private int compteur = 0;






/** Creates new form TP01ui */




public TP01ui() {




initComponents();




}


Votre code est prêt à être exécuté et testé.

Exécution de l'application


Pour tester votre applic
ation, vous devez exécuter le code de l'application comme
n'importe quel utilisateur pourrait le faire:


1.

Pressez la touche
<F6>
du clavier. Lors de la première exécution, vous devez
choisir la classe principale. Cliquez simplement sur
OK
.




7


2.

Votre applicatio
n s'exécute dans une fenêtre séparée si, et seulement si votre
code ne contient pas d'erreur de syntaxe. S'il ne s'exécute pas, contrôlez que
le code que vous avez écrit est rigoureusement identique à celui ci
-
dessus.



Exercice 3: voyons si vous êtes curi
eux…


Vous avez écrit les 3 lignes de code suivantes (les blocs
[…]
représentent du code
manquant):


[…]


private int compteur = 0;


_______________________________


[…]


compteur = compteur + 1;


_______________________________



jLabel2.setText(compteur+
"");

_______________________________


[…]


Mais avez
-
vous essayé de comprendre ce que font ces instructions ? Pour chacune
des lignes de code, donnez une brève explication de ce qu'elle fait. À la fin de ce
document, vous trouverez des liens vers des pages
de documentation au sujet de
Java en général et de NetBeans. Vous pouvez vous aider de ces pages si
nécessaire.


Exercice 4: voyons un peu si vous avez compris…


Ajoutez un nouveau bouton "
Reset
" qui permet de remettre le compteur à zéro.
Exécutez et test
ez votre code.


Documentation
:

Java (des démos et des "cours" pas
-
à
-
pas):

http://java.sun.com/j2se/1.4.2/docs/index.html
(principalement la section
Demos, Tutorials, Training, and Reference
)


Java API (tout sur les classes déjà à disposition dans le langua
ge):

http://java.sun.com/j2se/1.4.2/docs/api/index.html


NetBeans:

http://www.netbeans.org/kb/50/quickstart
-
gui_fr.html