Euro-Information Développements

DevWeb2
Démos
Document à destination des formateurs
DEVWEB2

EIDPDEVB
21/09/2015
Dé monstrations DevWeb2
1. DM 1.1 : Import d'une maquette MAQ
Préparation : Copier le fichier DemoMaq.sbproj présent à la racine de «DEVBFORMARTION_DEMO»
sur le bureau, et l'ouvrir.

NB : Il s'agit de la maquette initialement fournie par l'équipe ERGO, après adaptations pour l'import
DevBooster, mais avec l'ancienne version de MAQ et avant corrections. Elle ne correspond donc pas
totalement au projet sur lequel nous allons travailler par la suite.

Tour d'horizon dans MAQ

Objectif : montrer que certaines pages ne doivent pas être importées (celles dupliquées à des fins
d'animation), et indiquer quelles modifications sont à faire avant l'import.

Déroulement :
 Activer les outils Développeur (menu Fichier/Options/Préférences/Outils de
développement)

 Vérifier le paramétrage de la maquette (menu Fichier/Informations), notamment code

appli et code projet/produit

 Sélectionner le menu Edition, et la partie 1 Pages

 Afficher l'onglet Ecrans (fenêtre de gauche)

Certaines pages ont été renommées en PascalCase anglais : elles seront à importer dans
DevBooster

D'autres pages sont restées en français : il s'agit des pages qui ont été dupliquées à des fins
d'animation, qui ne seront pas importées.

 Fenêtre de droite : montrer les outils développeur

Parcourir les onglets Aperçu et code Xaml, Xml, C# (et DTO lorsqu'il sera disponible)

Montrer l'onglet propriétés : cliquer sur différents éléments de la page ; les propriétés
varient selon l'objet sélectionné, et il est possible de les modifier.

 Ouvrir la page ben1listedesactiver

Elle illustre une lightbox de confirmation. Il s'agit d'une copie de BeneficiaryList, il ne faudra
pas l'importer. Idem pour les pages Ben1liste*, qui illustrent les messages utilisateurs.
  Basculer sur la partie 3 Maquette

 Fenêtre de gauche

Permet de changer de page et de visualiser les liens de navigation

Fenêtre centrale et de droite

Cliquer sur un bouton et montrer les propriétés de navigation dans l'onglet Propriétés. Il est
important de contrôler/rectifier ces informations avant l'import :

Destination : page cible du bouton

Identifiant : nom de la méthode d'action déclenchée
Type : soumission ou navigation

Montrer les propriétés de différents éléments d'une page de liste et de création (ex :
BeneficiaryList et BeneficiaryCreate)

Import dans DevBooster

Objectif : montrer comment fonctionne l'import, et que le projet est immédiatement visualisable
avec LivePreview

Déroulement :

 Dans DevBooster, lancer "New DevBooster Project from Maquetteur"

- indiquer un code application et code produit au choix (ex: DEMO et DEMOMAQ ; l'appli ne
sera pas réutilisée)

- dans la liste des pages à importer, décocher les 4 pages Ben1listexxx et valider

 Dans Solution Explorer, montrer rapidement ce qui a été créé

 Dans LivePreview, activer la navigation et parcourir l'application pour montrer que tout
fonctionne dès l'import
(certains boutons sont inopérants, car les développements spécifiques restent à faire,
comme la LightBox ou l'affichage de documents PDF)

Pour la suite des TP

Nous partirons sur une base un peu différente, dont une partie est déjà codée, afin d'illustrer les
différentes parties du cours qui seront abordées.

2. DM 2.1 : Plier/déplier avec les composants ergo (10 minutes)

Créer au préalable une solution « DEMO » à partir de « DEVBFORMARTION_DEMO ».
Les fichiers sont dans le sous dossier « Demo_2_1 ». L’état final des pages est dans le sous dossier
« Final ».

Démonstration de e:FunctionBlock et e:InputBlock.

Sur la page Demo_2_1_1_FunctionBlock valoriser IsExpandable sur différents e:FunctionBlock (sauf le
e:FunctionBlock racine car cela n’est pas valide du point de vue ergo) et e:InputBlock.

Dans l’éditeur de code XAML, masquer les e:Table pour ne pas surcharger l’affichage.

Montrer le résultat de préférence dans LivePreview.

Valoriser également IsExpanded pour montrer qu’il est possible de définir l’état initial.

Montrer que l’ensemble du titre est cliquable (et pas seulement le bouton) pour éviter aux
utilisateurs de devoir viser le bouton.

Démonstration de e:Expander
Sur la page Demo_2_1_2_Expander montrer un e:Expander dans une cellule de donnée de la fiche.

<e:Expander IsExpanded="False">
<e:Expander.Header>
Titre de la valeur
</e:Expander.Header>
blabla
</e:Expander>
Valoriser dès le début IsExpanded à False. Préciser que cette propriété sera disponible sur tous les
composants capables de faire du plier/déplier.

Préciser que de manière identique à e:FunctionBlock et e:InputBlock, l’ensemble de la zone de titre

est cliquable.

Mettre un lien dans la zone de titre de e:Expander (avec un e:Link avec Href=http://www.e-i.com/).
Montrer que cela semble poser problème, car le clic sur le lien fait un plier/déplier au lieu de
naviguer normalement.

Valoriser la propriété ExpandOnButtonClickOnly à True pour corriger ce problème. Montrer que le

plier/déplier ne se fait plus que sur le bouton +/-, et que le lien va donc désormais fonctionner.

Note : Pour revenir à la page lorsque le site e-i.com est affiché dans LivePreview : Click droit, puis
« Précédent ».

Démonstration de e:TrRowGroup avec e:ThExpandButton

Sur la page Demo_2_1_3_TrRowGroup rendre une des ruptures pliable cette fois-ci sans utiliser un
IsExpandable, mais en transformant le premier e:Th en e:ThExpandButton.

Mettre un lien dans le contenu de e:ThExpandButton (avec un e:Link avec Href=http://www.e-

i.com/). Valoriser la propriété ExpandOnButtonClickOnly à True sur e:ThExpandButton pour la même
raison que précédemment.

(Optionnel) Sur la page Demo_2_1_4_TrTreeExpander, montrer le résultat équivalent avec le tableau

arborescent. Le fonctionnement est similaire, mais les balises clés sont différentes :
  e :TrTreeExpander à la place de e:TrRowGroup,
 e:TdExpandButton à la place de e:ThExpandButton.

Démonstration de ExpanderController
Revenir à la page Demo_2_1_3_TrRowGroup, rendre toutes les ruptures restantes pliables si ce n’est
pas déjà fait.

Ajouter un e:ExpanderControllerItem avec Id=ExpC dans le e:ActionsList en haut de page.

Sur les e:TrRowGroup, valoriser e:ExpanderController.IdRef="ExpC"

Montrer le fonctionnement via le « Tout plier | Tout déplier » qui apparait en haut de page.

(Optionnel) Revenir sur la page Demo_2_1_1_FunctionBlock, insérer un e:ActionsList avec un

e:ExpanderControllerItem avec Id=ExpC.

Sur les e:FunctionBlock et e:InputBlock, valoriser e:ExpanderController.IdRef="ExpC"

Préciser que cela est également possible sur les e:Expander et e:TrTreeExpander.

3. DM 2.2 : Messages utilisateur

La démo s'inspire de la page TP5, avec juste un bouton de validation qui est une copie de la méthode
d'action DoCheckNone. Elle s'intitule Demo_2_2, une entrée dans le menu.xaml a été ajoutée dans
DEVBFORMARTION_DEMO.

L'objectif est d'ajouter des messages Utilisateurs à celui déjà en place, pour explorer les cas
courants.

La page Demo_2_2_Finale contient la version avec les messages.

Démonstration de RichWarning
Dupliquer le message déjà en place, et remplacer RichInfo par RichWarning
Messages.Add(UserMessage.RichWarning(I18N.Translate("Le groupe 'none' est validé")));

Exécuter pour montrer le rendu des deux types de messages

Démonstration de RichInfo avec une restitution de donnée saisie

Restituer la donnée saisie dans A1 :

(Eventuellement, saisir la ligne en commentant les différentes propositions de l'IntelliSense)

Messages.Add(UserMessage.RichInfo(I18N.Translate("Vous avez saisi '{0}' dans '{1}'"),

Data.A1, "A1"));
 4. DM 4.1 :
L'objectif est de montrer les avantages de l'utilisation des DTO :

- Paramètres nommés (limite le risque de décalage entre les méthodes d'action et le Prepare)
- Paramètres optionnels (évite la multiplication des Prepare)
- IntelliSense (facilité de saisie : affichage de la description des données + contrôle visuel de
l'utilisation de toutes les propriétés)

Une page Demo_4_1 a été créée, avec une entrée dans le menu DEVBFORMARTION_DEMO.

Situation de départ : La page contient un bloc de quatre clés à saisir + bouton validation
(DoValidate), et un deuxième bloc avec seulement les deux premières clés (DoValidate2). Les deux
boutons naviguent vers la page Demo_4_1_Conf, qui contient une seule méthode Prepare recevant
quatre paramètres en entrée.

Demo_4_1_Final et Demo_4_1_Conf_Final contiennent l'intégralité du code.

Utilisation des clés

Cliquer sur l'entrée de menu 4_1 DTO navigation et utiliser dans un premier temps le bloc contenant
quatre clés, valider, les données sont bien transmises à la page de confirmation.

Revenez en arrière (ou cliquer sur Confirmer, dans ce cas il faudra refaire les saisies), et utiliser le
deuxième bouton. Cette fois le programme plante. Le Diagnostic montre qu'il faut créer un
deuxième step Prepare() pour le deuxième bouton.

Coder le deuxième Prepare() recevant deux paramètres. Cette fois cela fonctionne

Utilisation du DTO
 Montrer le DTO Demo_4_1Keys : Les deux dernières propriétés portent l'attribut
[OptionalParameter]

 Coder les deux méthodes d'action en utilisant le DTO ; montrer au passage que
l'IntelliSense propose les différentes propriétés du DTO, et élimine au fur et à mesure les
propriétés déjà codées.

Comme les objets sont nommés, cela limite les risques d'erreur, évite les décalages dans
l'ordre des paramètres.
  Coder ensuite le Prepare() recevant le DTO.

Exécuter l'application. Cette fois les deux boutons fonctionnent avec un seul Prepare().

Montrer le contenu de l'URL

En profiter pour montrer que l'URL disponible sur le bouton Confirmer

Ici, nous pouvons voir que le DTO a bien été sérialisé :

Clé Valeur

/devbooster.aspx?
_pid=Demo_4_1_Conf&k_Key1=1&k_Key2=2&k_Key3=3&k_Key4=4&_fid=DoConfirm&_contentita=
et%253dEmptyPag

5. DM 5.1 : Persistance des données

Objectif : montrer qu'en cas d'erreur détectée dans une méthode d'action, la page est réaffichée et
la méthode Prepare() est ré-exécutée. Il faut donc être capable de reconstruire les données,
notamment celles qui figurent dans les DropDownList, et de restituer les données qui ont pu être
saisies par l'utilisateur.

Preparation : la démo se fera sur la maquette, page ShortTransferCreateConf. Placer un point

d'arrêt sur les méthodes Prepare() et DoValidate().Lancer avec le debug.

Déroulement : Effectuer un virement rapide.

Sur la première page, indiquer un montant de virement supérieur au solde, afin d'afficher la ligne de
décision sur la page de confirmation.

Sur la page de confirmation, confirmer sans cocher la case, ce qui provoquera une erreur dans
DoValidate().

Débuguer pas à pas pour constater que l'on retourne dans le Prepare() et que toutes les infos sont
reconstruites.

Expliquer qu'il est important de prévoir un mécanisme de restauration des données, sinon les
données qui ont été saisies sur la page seront perdues (ici il n'y a pas de saisie, mais la reconstruction
est possible grâce au ClientData).

6. DM 5.2 : Session/CacheObject
Session object
Afficher la pageSession object
Afficher la page

• montrer qu’au premier chargement, lorsque l’objet de session n’est pas trouvé, la méthode
init est appelée
• montrer qu’aux chargements suivants, init n’est plus appelé car l’objet est présent en session
• faire expirer la session (ajout de _newsession=true sur l’url) (taper directement l’url
http://localhost-ni.cm-cic.fr:8080/devbooster.aspx?
_pid=Demo_5_2_SessionObject&_contentita=et%253dEmptyPage&_newsession=true)
• observer qu’on repasse alors à nouveau dans la méthode Init
• que la session expire ou non, notre session object est donc bien restauré, sans erreur
d’expiration

CacheObject
Afficher la page

• montrer qu’au premier chargement, lorsque l’objet de cache n’est pas trouvé, la méthode
Load est appelée
• montrer qu’aux chargements suivants, Load n’est plus appelé car l’objet est présent en
Cache
• montrer que la quantité reste la même car issue du cache
• cliquer sur purger le cache
• montrer qu’on est repassé par Load et que la quantité a changé

7. DM 5.3 : AlmostPreparedObject

• Afficher la page de démonstration 5.3

• Entrer un identifiant de tiers valide (tiers1, tiers2 ou tiers3) puis valider
• Montrer que les données du ViewModel ont été récupérées par la page
Demo_5_3_AlmostPrepareData et passées à Demo_5_3_ContractList au travers de la
méthode AlmostPreparedObject
• Cliquer sur Recharger la page
• Expliquer que l’erreur obtenue vient du fait que l’étape Demo_5_3_ContractList n’a pas
été appelée avec des clés, ainsi elle nécessite un Prepare vide pour se réafficher sans
clés.
• Décommenter la ligne de AlmostPreparedObject qui valorise la clé permettant de
récupérer l’identifiant du tier.
• Montrer que la page peut désormais se recharger.

Si il y a le temps : montrer les urls (sans portail) et montrer que la clé est absente de l’url lorsqu’il y a
l’erreur, et présente lorsque l’on n’a plus d’erreur
 8. DM 7.1 : Appel d'une activité externe

Preparation : la page Demo_7_1 contient le code xaml et le ViewModel finalisés. Le code C#

contient un Prepare() vide et une méthode DoCompute() vide qui réaffiche la page. Le menu
contient une entrée "7_1 Activité externe".

Objectif : ajouter un ActivitySstep permettant d'appeler l'activité externe DEVWEBNAV, à l'aide de la

fenêtre Navigation. Compléter l'activity step et la page Demo_7_1 pour pouvoir l'appeler avec les
valeurs saisies et afficher le résultat.

Le répertoire Final contient la page, l'activity step et l'activité complétés

Démonstration – Création de l’ActivityStep « ComputeActivityStep »

 Depuis la fenêtre Navigation, vue centrée sur l’étape « Demo_7_1 », faire un clic droit sur la
cible de DoCompute et sélectionner "Modifier la cible", puis sur "…" pour modifier la
transition. Cliquer sur Autre/Nouveau, et sélectionner "ActivityStep" que vous nommerez
"ComputeActivityStep". Dans la fenêtre de sélection de l’activité associée à l’ActivityStep :
1. Choisir « Import Remote Activity »
2. Entrer le Mnémonique DEVWEBNAV (site NI)
3. Cliquez sur GO
4. Choisir ComputeActivity
5. Cliquer sur OK
 - Regarder les fichiers générés par l’éditeur
- L’ActivityStep « ComputeActivityStep », qui pointe sur le RemoteActivityProxy
« ComputeActivity ». Il contient également autant de méthodes d’action que d’états de
sortie de l’activité
- Le RemoteActivityProxy « ComputeActivity » :
o Il contient la définition des DTO d’entrée et de sortie
o Il utilise le protocole EID2007, qui est le protocole par défaut de la plupart des
activités
o Il identifie le nom de l’activité distante « ComputeActivity »
o Il localise l’activité : RemoteLocalizer.CreateFromMnc

 Modifier la méthode d’action DoCompute de la page « Demo_7_1 » pour passer en

paramètre de l’ActivityStep les deux opérandes
return NextStepId.Default(Data.A, Data.B);

 Etant donné que ce sont des entiers qui sont manipulés il faut redéfinir les clés de
l’activityStep « ComputeActivityStep » afin d’éviter de devoir réaliser des conversions. Pour
cela créer une classe DTO « ComputeKeys » avec les propriétés Operand1 et Operand2 de
type int :
[DTO]
public class ComputeKeys
{
    [DTOKey("operand1")]
    public int Operand1 { get; set; }

    [DTOKey("operand2")]
    public int Operand2 { get; set; }
}
 Redéfinir les clés de « ComputeActivityStep » :
[Keys]
public new ComputeKeys Keys { get; set; }

 Modifier également la méthode Prepare de « ComputeActivityStep » pour qu’elle prenne en

paramètres les valeurs demandées par l’activité (contrairement à une activité interne, il n’est
pas possible de déterminer automatiquement les clés à partir de l’activité). Valoriser
également l’emplacement de l’activité afin qu’elle se charge dans la zone contenu.
public void Prepare(int operand1, int operand2)
{
Target = "content";
}

 Modifier la méthode d’action Success de l’ActivityStep « ComputeActivityStep » pour :

o récupérer le résultat de l’opération ainsi que l’opérateur utilisé.
o Transmettre les opérandes ainsi que le résultat à l’étape suivante
[DefaultNextStep(target:typeof(Demo_7_1))]
public NextStepId Success(ComputeActivity_Success successResult)
{
string result = string.Format("'{0}' ==> {1}", successResult.ChosenOperator,
successResult.Result);
return NextStepId.Default(Keys.Operand1, Keys.Operand2, result);
}

 Ajouter une nouvelle méthode Prepare dans la page « Demo_7_1» qui va recevoir le
paramètre ‘résultat’ ainsi que les opérandes afin de valoriser l’instance correctement
public void Prepare(int a, int b, string result)
{
Data.A = a;
Data.B = b;
Data.Result = result;
}

 Exécuter l’application
 Vérifier que l’activité est bien lancée en remplacement du contenu du portail
 Vérifier que les paramètres sont bien retournés et que le résultat de l’opération est correct
 Vérifier qu'en annulant l'opération, on revient bien à la page appelante

9. DM 8.1 : Utilisation de la gestion des suites

La démo portera uniquement sur les fichiers TransferList.cs et TransferList.xaml.

Gestion des suites

La première chose à faire est d’indiquer dans la configuration quelles sont les indicateurs globaux /
clés de suite utilisés par le service.

Pour cela il faut aller dans l’onglet pagination de la configuration du service « GetTransfersList dans
l’éditeur de configuration et lui ajouter :

- un indicateur global avec pour condition MDZLOTL/Cnt = 1 sans copie

- une clé de suite avec condition MDZLOTL/CntKey non vide avec copie dans MDZLITL/CntKey
Après, il faut ajouter / modifier le Pager dans la page XAML, il doit être présent tout en bas de la
page, juste avant la balise fermante « e :FunctionBlock :

<e:Pager CurrentPageExpr="Data/Pager/CurrentPage"
         PageNavigation="GoPageNavigation"
         TotalPageExpr="Data/Pager/TotalPages" 
         TargetPageParamName="targetPage" />

CurrentPageExpr : chemin XPath vers le numéro de la page courante.

PageNavigation : action déclenchée lors d’une navigation vers un des éléments du Pager, la
soumission est utilisée ici afin de transmettre le type de compte sélectionné.

TotalPageExpr : chemin XPath vers le nombre total de page s’il est connu, -1 par défaut.

TargetPageParamName : nom du paramètre qui contiendra le numéro de la page cible lors d’une
navigation.

Il faut ensuite modifier TransferList : étant donné que cette dernière a maintenant deux clés (le type
de compte sélectionné et la page visée), on va simplifier leurs utilisations en déterminant un DTO.

Ajouter un DTO comprenant les deux clés :

[DTO]
public class TransferListParameters
{
    [OptionalParameter]
    public string SelectedAccountType { get; set; }

    [OptionalParameter]
    public int? TargetPage { get; set; }
}

Remplacer ensuite le paramètre actuel du « Prepare » par « TransferListParameters » et déterminer

les valeurs par défaut :

public void Prepare(TransferListParameters parameters)
{
    if (string.IsNullOrEmpty(parameters.SelectedAccountType))
    {
        Keys.SelectedAccountType = "All";
    }
    if (!parameters.TargetPage.HasValue)
    {
        Keys.TargetPage = 1;
    }
...

Cela permet de s’assurer que les valeurs utilisées par la suite correspondront toujours à des valeurs
attendues.

Remplacer ensuite dans le « Prepare » l’utilisation de l’ancien paramètre :

Data.SelectedAccountType = Keys.SelectedAccountType;

Il faut à présent adapter la méthode d’action « DoAccountType » :

[DefaultNextStep(target: typeof(TransferList))]
[Submission]
public NextStepId DoAccountType()
{
    Keys.TargetPage = 1;
    Keys.SelectedAccountType = Data.SelectedAccountType;
    return NextStepId.Default(Keys);
}
La page visée est valorisée à 1 car la liste est réinitialisée lors du choix du type de compte : il n’est pas
utile de conserver la page 2 alors que le type de compte a changé.

Il faut également adapter la méthode d’action « GoPageNavigation » :

[DefaultNextStep(target: typeof(TransferList))]
public NextStepId GoPageNavigation(int targetPage)
{
    Keys.TargetPage = targetPage;
    return NextStepId.Default(Keys);
}
Elle valorise juste la page visée, le type de compte étant conservé d’une page à l’autre du Pager.

Créer ensuite un SessionObject Pagination :

public class Pagination : SessionObject
{
    /// <summary>
    /// Nombre de pages total
    /// </summary>
    public int MaxPage { get; set; }

    /// <summary>
    /// Liste des clés de suite (des ContinuationStructure)
    /// </summary>
    public List<ContinuationStructure> Continuation { get; set; }

    /// <summary>
    /// Initialisation de l'objet.
    /// </summary>
    /// <param name="involvedPartyId">identifiant de tiers qui servira de clé pour 
récupérer cet objet.</param>
    public void Init(string involvedPartyId)
    {
        MaxPage = -1;
        Continuation = new List<ContinuationStructure>();
    }
}
Il va service à stocker en session les informations nécessaire au bon fonctionnement du Pager.
Il faut ensuite modifier TransferList.

Ajouter un import sur IWebSessionObjects, c’est lui qui sera utilisé pour le stockage en session :

[Import]
public IWebSessionObjects SessionObjects { get; set; }

Ensuite, il faut préparer la continuation avant l’appel du service :

// Récupération des informations de pagination en session
var pagination = SessionObjects.GetOrInit<Pagination>(involvedParty.Id);

// Récupération des clés de suite en session
int currentPage = Keys.TargetPage.Value;
if (currentPage > 1)
{
}
    int previousPage = currentPage - 1;
    getTransfersList.FieldLocator.Continuation = pagination.Continuation[previousP
age - 1]);

La propriété Continuation de Pagination contient les informations de l’état et du fonctionnement de

la gestion des suites du service.

L’après-exécution du service doit s’occuper de la mise à jour des clés de suite :

// Mise à jour des clés de suite avec celle de la page
if (getTransfersList.HasNext)
{
    if (pagination.Continuation.Count == currentPage - 1)
    {
        // Si la continuation de la page suivante n'est pas encore connue,
        // on l'ajout à la liste
        pagination.Continuation.Add(getTransfersList.FieldLocator.Continuation);
    }
}
// Mise à jour du nombre total de pages
else
{
    pagination.MaxPage = currentPage;
}
La propriété HasNext de type bool indique si le service n’a pas encore renvoyé toutes les données.

La dernière étape est d’enregistrer les informations de paginations en session et de valoriser les
données du Pager, à la fin de la méthode Prepare :

// Enregistrement des informations de pagination en session
SessionObjects.Set(pagination);

// Valorisation des propriétés du composant Pager
Data.Pager = new PagerVM
{
    CurrentPage = currentPage,
    TotalPages = pagination.MaxPage
};

Bonus : gestion de l’expiration de session

Nous allons démontrer comment gérer l’expiration de session en retournant à la première page de la
liste.

Dans la méthode Prepare, au niveau de la récupération des clés de suite en session il ne faut
renseigner les informations de continuation au service que s'ils existent. Dans le cas contraire on va
afficher un message à l’utilisateur à revenir sur la première page.

// Récupération des clés de suite en session
int currentPage = Keys.TargetPage.Value;
if (currentPage > 1)
{
    int previousPage = currentPage - 1;
    if (pagination.Continuation.Count > previousPage - 1)
    {
        getTransfersList.FieldLocator.Continuation = new ContinuationStructure(pag
ination.Continuation[previousPage - 1].ToIData());
    }
    else
    {
        // Retour à la page 1, on a perdu les informations de la continuation
        Messages.Add(UserMessage.RichWarning(I18N.Translate("La session a expiré."
)));
        currentPage = 1;
        Keys.TargetPage = currentPage;
    }
}

Il est possible de tester cette modification en ajoutant « &_newsession=true » au lien récupéré via un
clic-droit sur la page 2 du pager.

10. DM9.1 : Autres fonctionnalités de l’objet Document

Préparation : Mettre dans le répertoire C:\appli\statro\DEVBFORMATION_DEMO le fichier TEST.pdf.

Récupération d’un flux binaire

Montrer la présence du document TEST.pdf dans le répertoire C:\appli\statro\
DEVBFORMATION_DEMO. Ouvrir le fichier DocumentFromStream.cs (dans Demo_9_1) pour
montrer le code de la fonction documentFromStatro.

Expliquer le code ci-dessous par rapport à ce qui est montré dans le PPT:

byte[] flux =
File.ReadAllBytes(Path.Combine(DptlEnvironment.GetFeatureArea("DEVBFORMATION_DEMO"
, "STATRO"), @"TEST.pdf"));

IData streamNode = DataToolkit.SetStream(flux, null, null);

return new Document(streamNode);

Présision : La première ligne permet de créer le chemin vers le fichier dans STATRO et de récupérer
un tableau de byte à partir de ce fichier pour simuler le flux binaire.

Exécution :

Exécuter le projet DEVBFORMATION_DEMO. Sélectionner l’entrée 9.1 Objet Document du Menu.

Dans le bloc fonctionnel Récupération d’un flux binaire, cliquer sur le lien Démonstration pour
afficher le fichier pdf à partir du flux binaire.

Envoi d’un document par mail

Ouvrir le fichier Demo_9_1.cs (dans Demo_9_1) pour montrer le code de la méthode d’action
GoDocumentMail.

Expliquer le code par rapport à ce qui est montré dans le PPT.

Modifier la ligne suivant avec votre email :

myDocContainer.MailTo("mon_mail@e-i.com");
Présision : Le document en pièce jointe a été renommé avec la ligne de code suivante :

myDoc.Filename = "File.pdf";

Exécution :

Exécuter le projet DEVBFORMATION_DEMO. Sélectionner l’entrée 9.1 Objet Document du Menu.

Dans le bloc fonctionnel Envoi d’un document par mail, cliquer sur le lien Démonstration. Aller dans
votre boite mail pour montrer le mail et sa pièce jointe File.pdf.

Upload d’un document

Ouvrir le fichier Demo_9_1.cs (dans Demo_9_1) pour montrer le code de la méthode d’action
GoDocumentUpload.

Expliquer le code par rapport à ce qui est montré dans le PPT.

Dire qu’on upload le fichier mais qu’on ne l’utilise que pour afficher son nom.

Exécution :

Exécuter le projet DEVBFORMATION_DEMO. Sélectionner l’entrée 9.1 Objet Document du Menu.

Dans le bloc fonctionnel Upload d’un document, cliquer OK pour montrer qu’aucun fichier n’a
encore été uploadé par un warning.
Cliquer sur Parcourir… puis choisir un fichier sur votre disque dur et cliquer sur OK pour montrer que
le fichier a bien été uploadé avec l’affichage de son nom dans l’information.

11. DM10.1 : Vérifier les ressources en anciennes navigations

Préparation : vérifier que vous avez les ressources TAR3001V et MVT2001G sur NI, sinon vous les
accorder. De même il faudrait que vous ne possédiez pas les ressources TAR3002G et TAR3003G, si
c’est le cas remplacer les ressources utilisées pour la démo.

Access list
Dans le projet DEVBFORMATION_DEMO_OLD, ouvrir le fichier devbappli.config.

Indiquer les ressources obligatoires et optionnelles de l’application, ainsi que la liste d’accès
positionnée sur le PID Demo_10_10 et le FID DoSomethingRestricted.

Lancer l’application et naviguer vers le PID Démo 10.1 via le menu, puis cliquer sur le bouton
« suivant » : un message d’erreur indique que vous ne possédez pas les ressources nécessaires.

Utilisation basique
Dans la méthode PreparePID du fichier Demo_10_1.cs ajouter le code suivant, qui récupère la liste
des autorisations possédées parmi celles déclarées dans le fichier devbappli.config et teste
explicitement l’autorisation TAR3002G :

var authorizations = data.Append(new Data("authorizations"));
foreach (IData authorization in GiveMe.Session.GetAuthorizations())
{
    authorizations.Append("authorization", authorization.Name.ToUpperInvariant());
}

bool hasTAR3002G = GiveMe.Session.GetAuthorization("TAR3002G");
data.Append("hasTAR3002G", hasTAR3002G.ToString());

Réactualiser la page Internet Explorer avec le l’application de démo : la liste des ressources testées
s’affichent.

Utilisation avancée
Dans la méthode PreparePID du fichier Demo_10_1.cs ajouter le code suivant, qui teste
explicitement les autorisations MVT2001G et TAR3003G :

IAuthorization myAuth = AuthorizationFactory.GetAuthorizationObject(GiveMe.Session
);
string furtherInfo1, furtherInfo2;
bool hasMVT2001G = myAuth.CheckAuthorization("MVT2001G", out furtherInfo1);
data.Append("hasMVT2001G", hasMVT2001G.ToString());
bool hasTAR3003G = myAuth.CheckAuthorization("TAR3003G", out furtherInfo2);
data.Append("hasTAR3003G", hasTAR3003G.ToString());

Réactualiser la page Internet Explorer avec le l’application de démo : la liste des ressources testées
s’affichent et comporte les informations des autorisations testées.

12. DM 11.1 : utiliser Visual Studio pour débuguer son projet

Rappel des fonctionnalités de Debug
Mettre un point d'arrêt (F9) dans TransferRepository. Regarder le comportement du F5, F10 et F11

Il existe la possibilité de mettre un point d'arrêt conditionnel. Faire clic-droit sur le point d'arrêt =>
"Condition".

Fenêtre Watch (uniquement en Debug)

Elle permet de consulter n'importe quelles variables, membres ou propriétés, facilement en faisant
clic droit AddWatch sur la variable que l'on souhaite accéder.
Il est possible d'éditer cette fenêtre pour saisir n'importe quelle propriété qui ne serait pas accessible
via un clic droit dans l'éditeur ou pour saisir des instructions simples (pas d'expression lambda et pas
de traitement trop long sous peine de provoquer un timeout).

Exemple :

Avec le point d'arrêt dans TransferRepository.GetTransferInfos saisir :

Le résultat ne sera pas le même entre la première et les deux dernières instructions. Mais le but de
cette démonstration est de donner un ordre d'idée de ce qu'on peut faire facilement.

Il est également possible de modifier des variables localement.

Exemple :

id = id +1

Si cette ligne est exécutée dans la fenêtre Watch avant l'initialisation du service dans
TransferRepository.GetTransferInfos, on se retrouve avec un mauvais identifiant et dans la majorité
des cas, l'appel du service tombera en erreur.

Cette fonctionnalité peut être très utile pour essayer de reproduire un problème signalé en
production avec des données que l'on a du mal à obtenir en test.

Fenêtre CallStack (uniquement en Debug)

Elle permet de voir la pile d'appel complète du Debug.

En double cliquant sur une ligne de la pile, il est possible de remonter dans la pile d'appel est de
disposer de la valeur des différentes variables, membres ou propriété contextuelles de chacune des
lignes de la pile d'appel
Fenêtre Locals (uniquement en Debug)
La fenêtre Locals permet de disposer de toutes les variables locales d'une méthode.

Cette fenêtre permet également de modifier des variables en double cliquant sur leurs valeurs

Cette fenêtre peut rapidement devenir illisible s'il y a beaucoup de variables locales.

13. DM 11.2 : Rappeler comment effectuer une trace

Trace
Lancer l’application de démo.

Activer la trace via la case à cocher dans le menu puis cliquer sur le menu « 11.2 Liste des comptes ».

Déplier l’indicateur des performances et le commenter : il indique le temps de la requête et détail

quelles étapes prennent le plus de temps. Il indique également la taille de la session.

Activer les différentes catégories / niveaux afin de détailler tout ce qu’il est possible de voir avec la
trace.

Cliquer sur les informations complémentaires de plusieurs champs, dont « GetAccounts|Input » et

« GetAccounts|Output ».
Log automatique des erreurs
Lancer l’application de démo et naviguer via le menu « 11.2 Exception ».

Une exception s’affiche.

Aller sur PFTL NI puis dans la recherche DEVBOOSTER et faire une recherche sur son IP avec une
recherche approximative sur la description avec les mots « Démo 11.2 ».

MNTR / METROLOGIE
Aller sur MNTR et montrer les erreurs de Strasbourg SI (ou autre site approprié).

Chercher la ligne avec le plus grand nombre d’erreurs dans les rapports DEVB.

Déplier le module afin de montrer les informations disponibles des erreurs puis cliquer sur le nombre
d’erreurs afin de pouvoir les détailler sur PFTL.

Erreurs DevBooster documentées

Une documentation recensant les erreurs DevBooster les plus communes et la façon de les corriger
est présente dans Pixis : Corriger les erreurs "Fatal" (0990029757).

14. DM 11.3 : Utiliser SoapUI, Fiddler et Service Preview

SoapUI

Préparation : récupérer le cookie SSON du jour même, voir doc 0990021527 « Tester un Web Service
à l'aide de SoapU », paragraphe « Ajout du cookie SSON ».

Lancer le projet de démo et naviguer sur calculus.svc.

Montrer le wsdl en cliquant sur le premier lien.

Lancer SoapUI, cliquer sur File / New SOAP Project et renseigner l'url du wsdl :
Cliquer sur « OK » puis une fois le projet généré déplier l'arbre « calculus » jusqu'à « Request 1 » et
double-cliquer dessus.

Vérifier que l'url pointe bien vers localhist-ni.cm-cic.fr et non uniquement vers localhost, la corriger
au besoin.

Remplacer les valeurs de a et b par des chiffres.

Rajouter un header nommé "Cookie" avec en valeur le cookie SSON préparé.

Lancer la requête : le résultat de l'addition apparaît dans la fenêtre correspondante.

Fiddler

Lié à SoapUI
Lancer Fiddler, faire F12 (ou cliquer sur le rectangle en bas à droite contenant "Capturing") afin
d'éviter les captures de requêtes non souhaitées.

Dans SoapUi aller dans File / Preferences puis dans l'onglet « Proxy Settings ».

Le configurer en « Manual », Host 127.0.0.1 et Port 8888 (port par défaut de Fiddler, à modifier si
vous en avez défini un autre).
Le bouton de proxy est passé en vert.

Relancer la requête : le résultat apparaît toujours dans SoapUI mais la requête et la réponse sont
également présentes dans Fiddler.

Cliquer sur la session dans Fiddler puis dans l'onglet « Inspectors » et cliquer sur les onglets « Raw »
de la requête et de la réponse afin de les détailler.

Cliquer sur le bouton proxy dans SoapUI afin de désactiver l'utilisation de Fiddler.

Scan du trafic HTTP

Revenir à Fiddler et faire F12 (ou cliquer sur le rectangle en bas à droite) afin de réactiver la capture
du trafic HTTP.

Lancer le projet de démo et naviguer sur un page puis étudier dans Fiidler les sessions capturées.

Arrêter le projet de démo et fermer Fiddler.

Service Preview

Dans le menu DevBooster cliquer sur « Service Preview screen ».

Sélectionner le projet de démo puis le service « GetAccounts » et le datasets « sample ».

Cliquer sur le bouton « Run » et le résultat s'affichera au bout de quelques secondes dans l'écran de
sortie.

15. DM 11.4 : Utiliser Web-Inclusion Gateway

Dans Visual Studio, veiller à mettre le projet de démo en startup project.

Puis dans le menu DevBooster cliquer sur « Web Inclusion test window ».
Une fois la fenêtre ouverte, noter que le lien « Help » mène directement vers le document détaillant
la configuration.

Fermer les fenêtres d’IE déjà ouverte.

Cliquer sur « Start » pour démarrer la Web-Inclusion Gateway » puis lancer le projet de démo via F5.

Se loguer puis appuyer sur le bouton retour du navigateur afin de parvenir avec un utilisateur
authentifié sur la première page de l’application.

16. DM 11.5 : Globaliser son projet

Clic-droit sur le projet de démo / DevBooster / Prepare translation of the project (WebXForms Xaml).
La fenêtre détaillant le process s’ouvre, tout finit par s’afficher en vert.

Fermer la fenêtre, le fichier App_GlobalResources/I18n/GlobalizationData.xml a été ajouté.

Il contient tous les textes marqués pour la globalisation.

Utilisation de GlobalString
Ouvrir le fichier EmptyPage.xaml et remplacer « Content » par le code suivant :

<GlobalString Key="12" MaxSize="150" Technical="False" Comments="Content of the pa
ge">
        Content
</GlobalString>

Relancer l’outil Prepare translation of the project.

Ouvrir le fichier GlobalizationData.xml et montrer que les valeurs saisies sont répercutées dans ce
fichier.
 17. DM12.1 Migrer une activité en nouvelle navigation
Reproduire le bug de navigation
Afficher la liste.

Clic droit, ouvrir une nouvel page sur un élément de la liste

Clic droit, ouvrir une nouvel page sur un autre élément de la liste

Dans la première page ouverte, cliquer sur le bouton Suivant. Vous serez sur l'onglet 2 du dernier
élément saisi.

Créer une activité en navigation par attributs

Lancer l'éditeur de cinématique

Cliquer sur "Add new Item.." en haut à droite

Sélectionner Empty Activity, entrer le nom "TransferView" puis faire OK.

Ajouter deux étapes dans l'activité, l'une nommée "TransferView1Account" et l'autre

"TransferView2Operation".

Modifier l'activité pour qu'elle ait la signature suivante :

/// <summary>
/// Activité permettant de consulter une carte
/// </summary>
[ReturnState(typeof(EmptyDTO), ActivityResult.Success, "Success")]
internal class TransferView : Activity
{

Modifier l'appel d'activité dans le GetNextPID de TransferList

case "GoDetail":
ActivityInputParams activityInputParams = new ActivityInputParams(processedRequest, renderInfo,
preparePIDParams);
activityInputParams.InputParams["transfer_id"] = processedRequest.Data["id"];
ActivityManager.StartActivity(
"CardTransfer",
true,
activityInputParams);
break;

Modifier le démarrage de l'activité TransferView

/// <summary>
/// Démarrage de l'activité
/// </summary>
/// <param name="transfer_id">identifiant du virement</param>
[DefaultNextStep(target: typeof(TransferView1Account))]
public NextStepId Start(string transfer_id)
{
return NextStepId.Default();
}

Supprimer les fichiers dans App_Render/TransferView

Déplacer les fichiers TransferView1Account.xaml et TransferView2Operation.xaml du dossier
App_Render dans le dossier App_Render/TransferView.

Supprimer les fichiers du répertoire App_GlobalResources/Models/TransferView

Déplacer les fichiers TransferView1Account.xml et TransferView2Operation.xml du dossier

App_GlobalResources/Models dans le dossier App_GlobalResources/Models/TransferView.

Supprimer les deux fichiers TransferView1Account et TransferView2Operation du répertoire

App_Code/Commands. Modifier les fichiers portant le même nom dans
App_Code/Commands/TransferView

internal class TransferView1Account : PageStep<TransferView>

{
public void Prepare()
{
Data = TransferRepository.GetTransferInfos(Activity.Keys["transfer_id"]);
}
}

Idem pour TransferView2Operation

Ajouter les méthodes d'action pour faire fonctionner GoCancel, GoTransferView1Account et

GoTransferView2Operation.

Tester (F5)

Vérifier que le bug de navigation présenté en début de démo est corrigé.