Atelier 4

Développons notre
application en
utilisant le pattern
MVC.

Le modèle de composants Page 1

 Création de l interface :

Layout
horizontale
Layout Verticale

3 Sous Layout Verticale

Layout

Ce modele se presente sous android studio ainsi :

Le modèle de composants Page 2

Et pour finir voici le code du layout :

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:orientation="vertical">
<RadioGroup
android:id="@+id/grpRadioSexe"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RadioButton
android:id="@+id/rdHomme"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Homme" />
<RadioButton
android:id="@+id/rdFemme"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Femme" />
</RadioGroup>
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:orientation="vertical">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:orientation="horizontal">

<TextView
android:id="@+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Poids" />

<EditText
android:id="@+id/txtPoids"
android:layout_width="0dp"

Le modèle de composants Page 3

 android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:inputType="number" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:orientation="horizontal">

<TextView
android:id="@+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Taille" />

<EditText
android:id="@+id/txtTaille"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:inputType="number" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:orientation="horizontal">

<TextView
android:id="@+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Age" />

<EditText
android:id="@+id/txtAge"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:inputType="number" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="398dp"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:orientation="horizontal">

Le modèle de composants Page 4

 <Button
android:id="@+id/btnCalc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Calculer" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:orientation="horizontal">

<ImageView
android:id="@+id/ImgSmiley"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
/>

<TextView
android:id="@+id/lblIMG"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>

Le design graphique : le design et l'ergonomie sont 2 points très importants dans le

développement d'une application mobile. C est pour cette raison que je vais vous proposer
des liens utiles qui vont vous aider dans le design de votre application.

https://icones8.fr

https://www.flaticon.com/

https://coolors.co/browser/latest/1/

Rappel sur le MVC :

L'architecture MVC consiste à découper son code pour qu'il appartienne à l'une des trois
composantes du MVC. Lorsque vous créez une nouvelle classe ou un nouveau fichier, vous
devez donc savoir à quelle composante il appartient :

 Modèle : contient les données de l'application et la logique métier. Par exemple, les
comptes des utilisateurs, les produits que vous vendez, un ensemble de photos, etc.
La composante modèle n'a aucune connaissance de l'interface graphique.
 Vue : contient tout ce qui est visible à l'écran et qui propose une interaction avec
l'utilisateur. Par exemple, les boutons, les images, les zones de saisie, etc.

Le modèle de composants Page 5

  Contrôleur : c'est la "colle" entre la vue et le modèle, qui gère également la logique
de l'application. Le contrôleur permet de réagir aux interactions de l'utilisateur et de
lui présenter les données qu'il demande. Et ces données, où les récupère-t-il ? Dans
le modèle bien entendu !.

Structurer notre projet :

On commence par créer 3 package :

 Mode
 Vue
 Controller

N’oubliez pas que MainActivity est une classe d’affichage, don ou on va la mettre ?

Dans le package Vue bien évidemment !

Etape1 :Création de la classe Profil

1. On commence par créer la classe Profil dans le package controleur

Et n’oubliez pas de générer les getters.

Avant tout, on va définir la formule de IMG

Le modèle de composants Page 6

C’est pour cette raison on a besoin de définir ces constantes :

Rq : ce sont constantes static parce qu il s’agit des attributs de classe et final pour ne pas
pouvoir les modifier

2. On va aussi créer une méthode qui permet de calculer le IMG

3. Reste à développer la méthode qui nous retourne le message indiquant le résultat de

calcul

Le modèle de composants Page 7

 4. Et si on teste notre code maintenant ?

Rappel sur les tests unitaires :

Les tests unitaires permettant de vérifier le bon fonctionnement d'une partie précise d'un
logiciel ou d'une portion d'un programme.

Allez sur Navigate- test : on va faire un test unitaire

Rq1 :assertsEquals permet de comparer le retour réel avec une valeur qu’ on a initialisé.

Le modèle de composants Page 8

Rq2 : une fois que vous avez terminez votre test unitaire n’oubliez pas de reinitialiser le run et
le faire pointer sur app.

Etape2 :Création du controlleur

Rappelons que le point de départ de notre application est définis dans le manifest par une
activity. Donc on demarre toujours par une activité qui elle va instancier le controleur.

Mais il faut faire attention car le controleur utilisé dans toute l application doit etre unique.

Ca ne vous rappelle pas le Singleton ?

Rappel sur le design pattern singleton

Le singleton est un patron de conception dont l'objet est de restreindre l'instanciation d'une
classe à un seul objet (ou bien à quelques objets seulement). Il est utilisé lorsque l'on a besoin
d'exactement un objet pour coordonner des opérations dans un système.

Commencer par créer la classe Contrôle dans la package Model et cette classe ne doit
s’instancier qu’une seule fois.

Le modèle de composants Page 9

  Cette classe doit être final pour ne pas l hériter ;-)
 Le constructeur doit être privé pour ne pas pouvoir l instancier
 Le constructeur est final pour ne pas pouvoir le modifier

 Dans cette classe on va créer une méthode qui va recevoir les informations passés à la
vue :

(n oubliez pas de déclarer l attribut profil)

 On ajoutera les deux méthodes getImg() et getMessage()

Le modèle de composants Page 10

Etape3 :Coder la View

 On pointe sur le MainActivity et on commence a récuperer dans des propriétés les

objets graphiques.

 On fait le lien entre ces propriétés et les objets graphiques dans une méthode init()

 Cette methode est appelé dans la methode onCreate()

On va aussi instancier notre controleur

 Je vais gérer l évènement de click sur le bouton

N’oublier pas d’appeler cette methode dans init()

Tester maintenant
 Je dois récupérer les données saisis et les contrôler

Le modèle de composants Page 11

  Et si tout vas bien ?
Je vais faire appel a une autre méthode responsable de l affichage que je nommerai :

Qui sera

Donc si je resume, lorsque OnCreate() est appelé on doit recuperer les champs saisies ( cest la
methode init() )et passer a l évenement de click du bouton (cest la methode onClick() )et si les
champs sont saisie, on appelle une autre methode afficheResultat() qui communique avec le

Le modèle de composants Page 12

controleur qui lui aussi communique avec le model Profil afin de lui retourner le calcul de IMG
et retourner a la vue.

Le modèle de composants Page 13