Vous êtes sur la page 1sur 46

-Architectures logicielles &

outils graphique-

Salheddine KABOU 3ème année Licence


Kabou.salaheddine@yahoo.fr
Département Mathématiques et Informatique Durée: 01h30
Université d’Adrar

08/12/2019
Sommaire

1. Introduction

2. Modèles d’architecture

3. Outils graphiques

2
Introduction

Ce que l’on voit:


- Les sorties
Partie visible
Ce qu’on le fait: « Front end »
- Les entrées

Ce qu’il se passe:
- Traitement
Partie invisible
- Calcule
- Communication « Back end »
- Données (stockage et accès)
3
Introduction

Exemple

- Structure tabulaire
- Stockage et accès
aux données

« Front end » « Back end »


4
Introduction

Partie visible Partie invisible


« Front end » « Back end »

Liaison entre les deux parties

Programmation selon un modèle organisé.

- Organiser, structurer une application interactive en


séparant les deux parties
5
Sommaire

1. Introduction

2. Modèles d’architecture

3. Outils graphiques

6
Modèles d’architecture

Architecture, pourquoi faire ?

• Organiser le code
• Simplifier
• Modifier (une partie)
• Réutiliser
• Notion: Evolutivité, flexibilité

7
Modèles d’architecture

IHM et Architecture

• Séparation possible
- Code IHM
- Code métier

• Objectif
- Éviter de tout modifier si on change la partie
fonctionnel ou la partie IHM

8
Modèles d’architecture

IHM et Architecture

• Séparation IHM / NF
- Code IHM
- Code métier (Noyau fonctionnel)

9
Sommaire

1. Introduction

2. Modèles d’architecture

 Modèle de Seeheim
 Modèle MVC

3. Outils graphiques

10
Modèles de Seeheim

• Modèle d’architecture logicielle introduit en 1983 pour


structurer l’IHM dans un logiciel interactif.

• Seeheim est une ville d'Allemagne où s'est tenu un atelier


de travail sur le thème «Systèmes de Gestion d'Interface
Utilisateur »

• Le modèle de Seeheim a été proposé collectivement au


cours de cette réunion

• Le modèle de Seeheim est composé de trois parties


essentielles:
11
Modèles de Seeheim

1. la Présentation:
La couche qui gère les entrées et les sorties ; elle
représente les données et interprète les actions de
l'utilisateur.

2. Le contrôleur du Dialogue:
Gère la séquence des entrées et des sorties, par exemple
l'enchaînement des écrans dans une interface graphique.

3. le Modèle d'Interfaçage de l'Application:


La couche qui sert à relier les fonctions et les données du
noyau fonctionnel aux données et actions de l'IHM.
12
Modèles de Seeheim

13
Modèles de Seeheim

Avantages:

• Les problèmes de l'application et de l'interface


peuvent être isolés et traités séparément;

• L'application et l'interface peuvent évoluer


indépendamment

• L'interface peut être partagée par différentes


applications.

14
Sommaire

1. Introduction

2. Modèles d’architecture

 Modèle de Seeheim
 Modèle MVC

3. Outils graphiques

15
Modèles MVC

16
Modèles MVC

1. Modèle:

- Élément qui contient les données ainsi que de la logique en


rapport avec les données: validation, lecture et
enregistrement
- Une simple valeur / une structure de données
complexes
- Le modèle représente l'univers dans lequel s'inscrit
l'application

Ex: une application de banque, le modèle représente des


comptes, les opérations de dépôt et retraites
17
Modèles MVC

2. Vue

-Une vue contient des éléments visuels ainsi que la logique


nécessaire pour afficher les données provenant du modèle

- La vue se sert du modèle, et peut être un diagramme,


un formulaire, des boutons, etc

- Partie visible d'une interface graphique

Ex: Dans une application web, une Vue contient des


balises HTML.
18
Modèles MVC

3. Contrôleur

- Il contrôle les données

- Il transmet les informations entre le modèle et la vue (


lorsque l’utilisateur effectue une action)

Contrôleur permet de gérer les actions de l'utilisateur


sur une vue.

19
Modèles MVC

20
Modèles MVC

Exemple: Un lecteur mp3


- La vue: correspond à l’affichage, aux différentes interfaces
du lecteur
- Le modèle: c’est la logique de l’application, les états, les
données pour gérer et lire les mp3

- Le contrôleur:

-L’utilisateur clique sur le button « lire »


- Le contrôleur demande au modèle de jouer le MP3
- Le modèle informe la vue que ce MP3 est en cours de
lecture
- L’interface graphique se met à jours et l’user écoute son
MP3
21
Modèles MVC

Avantage

• La séparation de l'affichage, de la gestion des


événements utilisateur et de la représentation interne
des objets manipulés.

Ex:
- On peut passer d’une base de données de type SQL à
XML en changeant simplement les traitements
d’interaction avec la base

- Les Vues ne se trouvent pas affectés

22
Sommaire

1. Introduction

2. Modèles d’architecture

3. Outils graphiques

23
Outils graphiques (Java)

• Les programmes à interfaces graphiques en JAVA font


usage des classes awt (abstract windowing toolkit) et/ou
swing.

- Classe de base des awt : la classe abstraite


Component.

- Classe de base des composants swing : JComponent.

• Les classes graphiques en Java à importer sont:

- import java.awt.*; // package AWT


- import javax.swing.*; // package SWING
24
Sommaire

1. Introduction
2. Modèles d’architecture

3. Outils graphiques

 Généralités
 Les composants de SWING

25
Généralités (Historique)

• Au départ il avait AWT (Abstract Windowing Toolkit)

• Ensuite il a eu dans l’ordre chronologique:


 SWING par Sun/Oracle,
 SWT du projet Eclipse,
 JFace, GWT. (Récémment)

• Actuellement, SWING est souvent choisi car il est fourni


en standard dans le SDK

26
Généralités (AWT vs SWING)

• AWT utilise des composants "lourds", c'est à dire des


ressources du système d'exploitation.

• Swing utilise des composants "légers" qui ne se réfèrent


pas aux ressources système.

 Le Swing est plus robuste que l'AWT,


 Le Swing est plus portable, et plus facile à utiliser.
 Le Swing ne remplace pas complètement AWT
 Le Swing fournit des composants d'interface plus
performants.
27
Sommaire

1. Introduction
2. Modèles d’architecture

3. Outils graphiques

 Généralités
 Les composants de SWING

28
SWING: Composants

• Il y a trois principaux types de composants utilisés dans une


interface graphique :

- Les composants de haut niveaux (top-Level container) qui


sont destinés à contenir d’autres composants

- Les composant conteneurs intermédiaires (Simple


container) : qui contiennent d’autres composants.

- Les composant atomiques qui ne peuvent pas en contenir


d’autres

• Tous les composants SWING hérite de JComponent


29
Sommaire

1. Introduction
2. Modèles d’architecture

3. Outils graphiques

 Généralités
 Les composants de SWING

 Composants de haut niveau


 Composants intermédiaires
 Composants atomiques
30
SWING: Composants de haut niveau

• SWING propose trois composants de haut niveau

-JFrame
- JDialog
- JApplet

• Une application graphique doit avoir un composant top-


level comme composant racine (composant qui inclus tous
les autres composants)

31
SWING: Composants de haut niveau

Jframe:

• Une JFrame est une fenêtre avec un titre et une bordure

Méthodes:

- public JFrame();
- public JFrame(String name);
- public Container getContentPane();
- public void setJMenuBar(JMenuBar menu);
- public void setTitle(String title);
- public void setIconImage(Image image); 32
SWING: Composants de haut niveau

JDialog :

• Un JDialog est une fenêtre qui a pour but un échange


d’information

33
Sommaire

1. Introduction
2. Modèles d’architecture

3. Outils graphiques

 Généralités
 Les composants de SWING

 Composants de haut niveau


 Composants intermédiaires
 Composants atomiques
34
SWING: Conteneurs intermédiaires

• Les conteneur intermédiaire sont utilisés pour structurer


l’application graphique
• Le composant top-level contient des composants conteneur
intermédiaire
• Un conteneur intermédiaire peut contenir d’autre
conteneurs intermédiaire

• Swing propose plusieurs conteneurs intermédiaire:

- Jpanel
- JScrollPane
- JSplitPane
- …..
35
SWING: Conteneurs intermédiaires

JPanel:
• Un JPanel est un conteneur élémentaire destiné à contenir
d'autres composants. Il est muni d'un gestionnaire de
placement qui gère la stratégie de placement des différents
composants contenus dans le panneau.

Méthodes:

- public JPanel();
- public Component add(Component comp);
- public void setLayout(LayoutManager lm);
36
SWING: Conteneurs intermédiaires

JScrollPane:
• Un JScrollPane est un conteneur qui offre des ascenseurs, il
permet de visionner un composant plus grand que lui

Méthodes:

- public JScrollPane(Component comp);


- public void setCorner(String key,Component
comp);
37
SWING: Conteneurs intermédiaires

JSplitPane:
• Un JSplitPane est un panel coupé en deux par une barre de
séparation. Un JSplitPane accueil deux composants.

38
Sommaire

1. Introduction
2. Modèles d’architecture

3. Outils graphiques

 Généralités
 Les composants de SWING

 Composants de haut niveau


 Composants intermédiaires
 Composants atomiques
39
SWING: Composants atomiques

• Un composant atomique est considéré comme étant une


entité unique
• Java propose beaucoup de composants atomiques:

- boutons, CheckBox, Radio


- Combo box
- List, menu
- TextField, TextArea, Label
- FileChooser, ColorChooser
- ..
40
SWING: Composants atomiques

Les boutons:

• Les boutons classiques (JButton)

• JCheckBox pour les case à cocher

• JRadioBouton pour un ensemble de


bouton

41
SWING: Composants atomiques

Combo box :

• Un JComboBox est un composant permettant de faire un


choix parmi plusieurs propositions.

42
SWING: Composants atomiques

JList

• Une JList propose plusieurs éléments rangés en colonne.


• Une JList peut proposer une sélection simple ou multiple
• Les JList sont souvent contenues dans un srolled pane.

43
SWING: Composants atomiques

Texte:

44
SWING: Composants atomiques

Menu:

45
Merci pour votre attention…

Des questions?

46

09/12/2019