Interfaces graphiques - Explications

afternoonhandsomelySoftware and s/w Development

Nov 17, 2012 (5 years ago)

396 views

Ifhi
I
nter
f
aces grap
hi
ques
Explications
28mai2009
28
 
mai
?
2009
Program
Program
Elih

E
ng
li
s
h
•TP1: Layout
(
)
•TP2: MVC 
(
withUML
)
We
are
here
!
•TP3: 
j
dbc(withUML)
•TP4: GUI Builder(Netbeans)
We
are
 
here
!
•Java ReferenceManual
•Questions
Controller
Controller
View
Model
TP1
TP
 
1
•Corrections
SWING : création
Elle se fait principalementen 5 étapes:
1. Création d’une fenêtre (par héritage)
2. Récupération du container
JFrame
3. Modification du Layout
4. Insertion des widgetsdans le
conteneur
Container
Layout
conteneur
5. Arranger les composantes
Widget
import java.awt.*;
import javax.swing.*;
blil
Lt
td
JF
{
Layout.java
pu
bli
c c
l
ass
L
ayou
t
e
x
t
en
d
s
JF
rame
{
public Layout(String nom)
{
super(nom);
Container pan =
t
his.getContentPane
(
);
pan.setLayout(new BorderLayout());
JButtonbouton1 = new JButton("Bouton1");
this.add(bouton1,
B
orderLa
y
out.CENTER);
y
...
JButtonbouton3 = new JButton("Bouton3");
this.add(bouton3, BorderLayout.NORTH);
JButtonbouton4 = new JButton("Bouton4");
this.add(bouton4, BorderLayout.SOUTH);
Container sousPanel= new Container();
sousPanelsetLayout
(new
FlowLayout
());
sousPanel
.
setLayout
(new

FlowLayout
());
JButtonbouton5 = new JButton("Bouton5");
JButtonbouton6 = new JButton("Bouton6");
Pldd(bt5)
sous
P
ane
l
.a
dd(b
ou
t
on
5)
;
sousPanel.add(bouton6);
this.add(sousPanel, BorderLayout.EAST);
this.pack
(
);
...
TP2
TP
 
2
•Corrections
Convertisseur pied‐mètres en MVC
public class ConvertisseurController
{
privateConvertisseurView convertisseurView;
private ConvertisseurModel convertisseurModel;
publicConvertisseurController()
{
{
convertisseurView = new ConvertisseurView(this);
convertisseurModel = new ConvertisseurModel();
}
public void boutonConvertirPiedsMetres()
{
floatpieds = convertisseurView.getPieds();
floatmetres = convertisseurModel.convertirPiedsMetres(pieds);
convertisseurView.afficherMetres(metres);
}
}
public void boutonConvertirMetresPieds()
{
floatmetres = convertisseurView.getMetres();
float
pieds=convertisseurModelconvertirMetresPieds(metres);
float
pieds

=

convertisseurModel
.
convertirMetresPieds(metres);
convertisseurView.afficherPieds(pieds);
}
}
Diagramme UML: Convertisseur pied‐mètres en MVC
VIEWCONTROLLERMODEL
ConvertisseurView
JFrame
ConvertisseurModel
ConvertisseurView
‐metresTextField:JTextField
‐piedsTextField:JTextField
+ convertirMetresPieds(float
m) : float
+ convertirPiedsMetres(floatp) : float
+Co>nvertisseurView(ConvertisseurController
convertisseurController)
+ getPieds() : float
+ getMetres() : float
+
afficherPieds
(
float
pieds):
void
ConvertisseurController
‐convertisseurView:ConvertisseurView

convertisseurModel
:
ConvertisseurModel
+
?
afficherPieds
(
float
pieds)
?
:
?
void
+ afficherMetres(floatmetres) : void
+ afficher(booleanouiounon) : void
convertisseurModel
:
ConvertisseurModel
+ ConvertisseurController()
+ start() : void
+ boutonConvertirMetresPieds() : void
bCiPidM
()
id
ConvertisseurEvent
ActionListener

b
outon
C
onvert
i
r
Pi
e
d
s
M
etres
()
 : vo
id
ConvertisseurEvent
‐convertisseurController:ConvertisseurController
ConvertisseurRun
+ static main(String [] args) : void 
+ConvertisseurEvent(ConvertisseurController
convertisseurController)
+ actionPerformed(ActionEvente) : void
Nota: Le langage JAVA a été utilisé pour 
spécifier les types de données
TP
3
TP
 
3
•Netbeans

PartieModelavecJDBC
Partie
 
Model
?
avec
?
JDBC
TP
3
TP
 
3
•Netbeans

PartieModelavecJDBC
Partie
 
Model
?
avec
?
JDBC
Netbeans
Netbeans
•IDE (Integrateddevelopmentenvironment)
Netbeans
Netbeans
•No creationof main class

No
separate
event
class
No
 
separate
event
class
Netbeans
Netbeans
•Createa new project
Netbeans
Netbeans
•Select "Java Application"
Netbeans
Netbeans
•C
Netbeans
Netbeans
•Viewpart: Createnew file
Netbeans
Netbeans
Netbeans
Netbeans
Netbeans
Netbeans
Netbeans
Netbeans
Netbeans
Netbeans
AtiLit
Exempleen UML : Fenêtrede login
Lo
g
inEvent
A
c
ti
on
Li
s
t
ene
r
g
+ LoginEvent(LoginControllerlc);
+ actionPerformed
(
A
ctionEvente
);
LoginController_loginController;
LoginController
LoginModel_loginModel;
Lo
g
inView
_
lo
g
inView
;
JF
(
);
LoginModel
Strin
g
 
_
nomFichier
;
+ LoginController();
+ voidstart();
id
btVlid
()
g_g
;
JF
rame
+ LoginModel(String nomFichier);
+ booleanestValide(String login, String mdp);
g
_
;
+ vo
id
b
ou
t
on
V
a
lid
e
r
()
;
LoginView
JTextField_login;
JPasswordField_ 
+ LoginView(LoginControllerlc);
+ getLogin();
+
getPassword
();
LoginRun

getPassword
();
+ voidafficherMessage(String msg);
+ voidafficher();
+ voidmain(String[] args);
TP
3
TP
 
3
•Netbeans

PartieModelavecJDBC
Partie
 
Model
?
avec
?
JDBC
TP
3
TP
 
3
•JDBC : Connexion à une base de donnée
TP
3
TP
 
3
Définitions•Base de donnée 
•Tables
•Champs 
•Enregistrements
TP
3
TP
 
3
Requêtes •CREATE
•INSERT
•UPDATE 
•SELECT
TP
3
TP
 
3
Connexion à la base
String
nomUser
=
"
root
";
String

nomUser
=

root
;

String passwd= "";
String url = "jdbc:mysql://localhost/";
String
nomBase
=
"
authentification
"
;
String

nomBase
=

authentification;

privateConnection_conn;
conn
nll
_
conn
=

n
u
ll
;
try
{
ClfN
("
ljdbDi
")
Cl
ass.
f
or
N
ame
("
c
om.mysq
l
.
jdb
c.
D
r
i
ver
")
;
_conn=DriverManager.getConnection(url+nomBase, nomUser,
passwd);
}
TP
3
TP
 
3
Requêtes 
SELECT login, motdepasseFROM utilisateurs
TP
3
TP
 
3
Requête: 1ère
solution (vérification par Java)
String requete= new String("SELECT login, motdepasse
FROM utilisateurs");
Statementstmt= _conn.createStatement();
ResultSetrs= stmt.executeQuery(requete);
trouve= false
while(rs.next())
{
{
if (......)
// tester res.getString("login") et mdp
trouve = true;
}
}
rs.close();
stmt.close();
TP
3
TP
 
3
Requêtes
SELECT login, motdepasseFROM utilisateurs
Requêtes
SELECT login,
m
otdepasse
F
ROM
u
tilisateurs WHERE
login='Thierry' AND motdepasse= 'Ofkefji'
TP
3
TP
 
3
Requête: 2ème
solution (vérification par MySQL)
String requete= new String("SELECT login, motdepasse
FROM utilisateurs WHERE login = '"+login+"' AND motdepasse=
'
"+
m
d
p
+"'"
);
p
);
Statementstmt= _conn.createStatement();
ResultSet
rs
=
stmt.executeQuery
(
requete
);
ResultSet
rs

stmt.executeQuery
(
requete
);
if (rs.next())
{
{
trouve = true;
}
rsclose
();
rs
.
close
();
stmt.close();
PartieModelplusélaboré
Partie
 
Model
?
plus
?
élaboré
•Définir la variable d'environnement 
CLASSPATH avec la valeur :
.;chemin_du_connector_mysql\mysql‐connector‐
java
?r
5.0.5
?r
bin.jar
java
5.0.5
bin.jar
•Elle est nécessaire pour accéder au driver de 
SGBD M
y
S
Q

p
our se connecter à la base de 
yQp
données.