Le modèle de programmation MVC (Model, View, Control) est une solution trés élégante pour créer des composants réutilisables pour ses développements BSP et créer une couche d'abstraction entre les aspects graphiques et les comportements des composants. Histoire de vous initier à cela je vous propose un premier tuto dans ma série Hello World, histoire de découvrir l'environnement BSP MVC....
Mots clés : BSP, WebAS, HTML, web, SAP, MVC
Création de l'application SAP BSP
Lancer la transaction SE80 et créer une application BSP. Pour cela sélectionner BSP application dans la section
Repository Browser, tapez ZMVCDEMO, pui ENTREE.
Une fenêtre popup apparait …
Cliquez sur YES (ou OUI) pour créer l’objet ZMVCDEMO
Une seconde fenêtre s’ouvre
Tapez une description par exemple "Demo d’une application BSP en MVC"
Puis tapez sur ENTREE ou le bouton 
Après quelques secondes une nouvelle fenêtre popup s’ouvre
Cliquez sur le bouton Local Object
SE80 créer le projet ZMVCDEMO
Notez sur ZMVCDEMO est coloré en bleu, indiquant qu’il n’est ni actif ni sauvegarder. Pour régler cela double
cliquez sur ZMVCDEMO…
L’écran affiche la table de navigation BSP…
Puis cliquez sur la baquette magique 
(ou CTRL+F3) pour sauver et activer votre projet qui ne contient
rien pour l’instant.
Après quelques secondes, dans la barre de statut le texte suivant apparait
Voila notre projet BSP est vide mais prêt à l’ouvrage….
Création d'une page HTML de base
Faites un clique-droite sur ZMVCDEMO, puis Create puis Page
Une fenêtre Popup s’ouvre…
Tapez les valeurs suivantes :
Page : default.htm
Description : Page BSP par défaut
Page type : Page with Flow Logic.
Pour avoir cela
puis tapez sur la touche ENTREE ou sur 
Une page par défaut est créée…
Puis cliquez sur la baquette magique (ou CTRL+F3) pour sauver et activer votre page…
Après quelques secondes, dans la barre de statut le texte suivant apparait
Remarquez qu’un folder Page with flow logic est créé et contient default.htm
Editez vous code HTML de default.htm pour avoir cela
<%@page language="abap"%>
<html>
<head>
<link rel="stylesheet" href="../../sap/public/bc/bsp/styles/sapbsp.css">
<title> Page BSP par défaut </title>
</head>
<body class="bspBody1">
<H1>Demo d'insertion d'un controle</H1>
</body>
</html>
Puis cliquez sur la baquette magique (ou CTRL+F3) pour sauver et activer votre page…
Après quelques secondes, dans la barre de statut le texte suivant apparait
Et exécuter l’application (pour vérifier que cela va)…en tapant sur F8 ou sur le bouton 
Une popup dans votre navigateur Internet s’ouvre. Tapez votre login et password SAP. Puis OK
Notre page BSP fonctionne on va pouvoir créer un contrôle… coool
Création d'un contrôleur dans notre projet MVC
Nous allons maintenant créer un contrôle… Pour cela fait un clique droite sur ZMVCDEMO puis Create Puis
Controller
Une popup de création d’objet s’affiche. Remplissez la de cette manière puis Entrée ou cliquez sur
L’écran suivant apparait
Puis saisissez ZHELLOWORLD dans le champs Controller Class
Puis cliquez sur la disquette 
ou CTRL+S pour sauver sans activer votre contrôleur.
Nous allons maintenant implémenter la classe du contrôleur… Pour cela double-cliquez sur ZHELLOWORD dans
Controller Class.
MVC utilise ABAP OO et est donc objet. Quand on implémente une classe d’un contrôleur en fait on surcharge
(on améliore) des méthodes standards qui définissent les différents comportements du contrôleur.
On a donc la fenêtre ainsi…
Cliquez sur DO_REQUEST et passez en mode édition en cliquant sur 
ou CTRL+F1.
Puis cliquez sur le bouton 
redefine
Editer la surcharge de DO_REQUEST comme suit :
Puis cliquez sur la baquette magique (ou CTRL+F3) pour sauver et activer votre controller.
Après quelques secondes, dans la barre de statut le texte suivant apparait
Votre controller est maintenant prêt !!!!
Insérer votre controller dans votre page web
Il ne nous reste plus qu’à insérer notre contrôle dans la page BSP default.htm
Pour cela double-cliquez sur Default.htm dans le dossier Pages with flow logic. Puis cliquez sur ou
CTRL+F1 pour passer en mode éditeur.
<%@page language="abap"%>
<%@extension name="bsp" prefix="bsp"%>
<html>
<head>
<link rel="stylesheet" href="../../sap/public/bc/bsp/styles/sapbsp.css">
<title> Page BSP par défaut </title>
</head>
<body class="bspBody1">
<H1>Demo d'insertion d'un controle</H1>
<bsp:call url="helloworld.do" />
</body>
</html>
En surligné les lignes à ajouter….
Voila vous n’avez plus qu’à activer et lancer le programme (F8) et ça marche….
Voilou... Un exemple simple.
Jerome Fortias
