Travail pratique #4- WCF RIA Service

Transcription

1 Travail pratique #4- WCF RIA Service Techniques de l informatique - Informatique de gestion 420.AA Dans ce travail, vous utilisez WCF (Windows Communication Foundation) de RIA (Rich Internet Application) Service pour mettre en place des services Web de manière plus rapide que WCF. L interface graphique est sur une nouvelle page Silverlight nommée CommandesItems.xaml : La première grille de données affiche les commandes et la deuxième les items de la commande sélectionnée (à des fins pédagogique, le numéro de commande dans la grille des items s affiche pour confirmer que les items sont bien synchronisés avec la commande sélectionnée. Il y a trois (3) services Web : un premier fournit les données des commandes, un deuxième fournit les données des items et un dernier permet de sauvegarder les modifications (bouton en bas à droite).

2 Page 2 Des modifications peuvent être apportées dans les différentes zones : Puis ici :

3 Page 3 Finalement, les mises à jour sont versées dans la base de données sur le serveur Web en cliquant sur le bouton Sauvegarder les modifications. Les changements ne sont pas sauvegarder au fur et à mesure mais seulement sur le clique du bouton (traitement en lot comme un guichet automatique) : Après avoir appuyé sur Sauvegarder les modifications, les éléments graphiques sont désactivés durant la transaction avec le serveur WEB : Lorsque le serveur WEB a retourné le statut de la demande (callback) ce message se présente :

4 Page 4 Si aucune modification est apportée, ce message s affiche : 1) Mise en place du service Web côté serveur (application Web) 1. Dans le modèle AlimentsDuMondeBD.edmx, ajouter la table tblitems (les tables tblclients et tblcommandes devraient déjà y être). Assurez-vous que la relation se fait automatiquement. 2. Ajouter un service nommé CommandesItemsService qui inclut les entités tblclients, tblcommandes et tblitems. Autoriser l édition sur tblcommandes et tblitems. 3. Dans CommandesItemsService.cs, modifier le code LINQ au besoin (pour afficher seulement les items d une commande spécifique). 2) Mise en place des éléments visuels et autre côté client (application Silverlight) 4. Ajouter une page nommée CommandesItems (Width="1024" et Height="500") et ajouter un lien en haut à droite qui pointe sur cette nouvelle page. 5. Développer l interface graphique des pages précédentes en vous aidant des bouts de code XAML suivants (les images se trouvent sur Public).

5 Page 5 Ressources il reste à placer l image dans le bouton Sauvegarder <UserControl.Resources> <!-- Style pour le titre --> <Style x:key="styletitre" TargetType="TextBlock"> <Setter Property="FontSize" Value="18" /> <Setter Property="Foreground" Value="Brown" /> <Setter Property="FontWeight" Value="Normal" /> <Setter Property="Height" Value="30" /> <Setter Property="HorizontalAlignment" Value="Left" /> <Setter Property="VerticalAlignment" Value="Center" /> </Style> <Style x:key="stylesoustitre" TargetType="TextBlock"> <Setter Property="FontSize" Value="12" /> <Setter Property="Foreground" Value="White" /> <Setter Property="FontWeight" Value="Normal" /> <Setter Property="Height" Value="15" /> <Setter Property="HorizontalAlignment" Value="Left" /> <Setter Property="VerticalAlignment" Value="Center" /> </Style> <!-- Gris avec un dégradé de gris --> <LinearGradientBrush x:key="headercontentbackgroundbrush" StartPoint="0,0" EndPoint="0,1"> <GradientStop Offset="0" Color="#FFD5D5D5" /> <GradientStop Offset="1" Color="#FFAFAFAF" /> </LinearGradientBrush> <!-- Style pour les informations des clients dans la zone de liste déroulante des clients --> <Style x:key="styletexteboutonsauvegarder" TargetType="TextBlock"> <Setter Property="FontSize" Value="12" /> <Setter Property="HorizontalAlignment" Value="Left" /> <Setter Property="VerticalAlignment" Value="Center" /> <Setter Property="Foreground" Value="Black" /> </Style> <!-- Gabarit pour le contenu de la zone de liste déroulante des clients --> <DataTemplate x:key="datatemplateboutonsauvegarder"> <StackPanel Orientation="Horizontal" > <!-- Mettre l'image sauvegarder ici. Dimension 35 x 35 --> <!-- Mettre un espace entre l'image et le texte à droite --> <TextBlock Text="Sauvegarder les modifications" Style="{StaticResource StyleTexteBoutonSauvegarder}" /> </StackPanel> </DataTemplate> </UserControl.Resources> Contenu du LayoutRoot à compléter <Grid x:name="layoutroot" HorizontalAlignment="Center" > <Grid.RowDefinitions> <RowDefinition Height="50" /> <RowDefinition Height="250" /> <RowDefinition Height="10" /> <RowDefinition Height="50" /> <RowDefinition Height="120" /> <RowDefinition Height="10" /> <RowDefinition Height="50" /> </Grid.RowDefinitions>

6 Page 6 <Grid.ColumnDefinitions> <ColumnDefinition Width="900" /> </Grid.ColumnDefinitions> <Border CornerRadius=" " Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Background="{StaticResource HeaderContentBackgroundBrush}" BorderBrush="DarkGray" BorderThickness=" " > <StackPanel Orientation="Horizontal"> <! Mettre l image commande.png ici. Dimension : 45 x > <StackPanel Orientation="Vertical"> <TextBlock x:name="textblocktitrecommandes" Text="Liste des commandes" Style="{StaticResource StyleTitre}" /> <TextBlock x:name="textblocksoustitrecommandes" Text="Cliquez sur l'en-tête de la colonne pour trier en ordre croissant ou décroissant" Style="{StaticResource StyleSousTitre}" /> </StackPanel> </StackPanel> </Border> <sdk:datagrid Name="DataGridCommandes" Grid.Row="1" Grid.Column="0" AutoGenerateColumns="False" > <sdk:datagrid.columns> <sdk:datagridtextcolumn Header="# Commande" Binding="{Binding NoCommande}" CanUserReorder="True" CanUserResize="True" CanUserSort="True" Width="Auto" /> <sdk:datagridtextcolumn Header="Code client" Binding="{Binding CodeClient}" CanUserReorder="True" CanUserResize="True" CanUserSort="True" Width="Auto" /> <!-- compléter les autres colonnes ici. --> <!-- Pour les dates : Binding="{Binding DateCommande, StringFormat='yyyy-MM-dd'}" --> <!-- Pour les dollars : Binding="{Binding Port, StringFormat=C}" --> <sdk:datagridtextcolumn Header="# Emp." Binding="{Binding NoEmploye}" CanUserReorder="True" CanUserResize="True" CanUserSort="True" Width="Auto" /> <sdk:datagridtextcolumn Header="Date commande" Binding="{Binding DateCommande, StringFormat='yyyy- MM-dd'}" CanUserReorder="True" CanUserResize="True" CanUserSort="True" Width="Auto" /> </sdk:datagrid.columns> </sdk:datagrid> <Border CornerRadius=" " Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" Background="{StaticResource HeaderContentBackgroundBrush}" BorderBrush="DarkGray" BorderThickness=" "> <StackPanel Orientation="Horizontal"> <! Mettre l image items.png ici. Dimension : 40 x > <TextBlock x:name="textblocktitreitems" Text="Items de la commande sélectionnée" Style="{StaticResource StyleTitre}" /> </StackPanel> </Border> <sdk:datagrid Name="DataGridItemsCommandes" Grid.Row="4" Grid.Column="0" AutoGenerateColumns="False" Width="900" > <sdk:datagrid.columns> <sdk:datagridtextcolumn Header="# Commande" Binding="{Binding NoCommande}" CanUserReorder="True" CanUserResize="True" CanUserSort="True" Width="Auto" IsReadOnly="True" /> </sdk:datagrid.columns> </sdk:datagrid> <Button Grid.Row="6" Grid.Column="0" ContentTemplate="{Binding Source={StaticResource DataTemplateBoutonSauvegarder}}" Width="250" HorizontalAlignment="Right"/> </Grid>

7 Page 7 6. Développer le code C# pour alimenter les grilles de données et le bouton Sauvegarder en utilisant le contexte fournit par le service Web. 7. Pour le bouton Sauvegarder les modifications, faites afficher les messages suivants selon le cas : Contexte Message à afficher Des données ont été modifiées dans les commandes ou les items Aucune donnée modifiée 8. S assurer que les données dans les 2 grilles sont valides lorsque l utilisateur appuie sur le bouton Sauvegarder. 9. Empêcher l utilisateur d avoir accès aux grilles de données en attendant la réponse du service web (Busy Indicator). Technique pour insérer correctement l indicateur d activité <Grid x:name="layoutroot" HorizontalAlignment="Center" > <!-- Insérer l'indicateur d'activité ici --> <my:busyindicator x:name="busyindicatortransferedonnees"> <Grid>... </Grid> <!-- Fermer l'indicateur d'activité ici --> </my:busyindicator> </Grid>

8 3) Mise en place des validations des données côté serveur et côté client (classe shared) Page 8 Les libellés des messages de validation ne sont pas codés en dur. Les mettre dans les ressources côté serveur et nommer le fichier CommandesItemsResources.res et CommandesItemsResources.fr-CA.resx. Ne pas oublier de faire un lien sous forme de raccourcis dans les ressources côté client. Deux (2) méthodes de validation sur mesure doivent être développées pour supporter 2 règles d afffaire. Nommez-les ValiderDate et VerifierDateExpedition. Implanter les deux méthodes dans la classe CommandesItemsReglesAffaires.shared.cs dans le répertoire Services. Nom de la zone Destinataire DateEnvoi Toutes les zones avec une date Validations à mettre en place Nom à donner au nom dans la ressource DestinataireLongueurMaximum DateExpeditionInvalide DateInférieureAnnéeCourante Port FraisPortRequis Valeur obligatoire. PrixUnitaire Quantite PlagePrixUnitaire PlageQuantitéItems Règle à respecter Voir le message à afficher. Ne pas coder la valeur 40 en dur dans le libellé. Utiliser la codification {}. Voir le message à afficher. Développer une méthode nommée VerifierDateExpedition de validation sur mesure dans CommandesItemsReglesAffaires.shared.cs Bloquer toutes les dates dont l année est supérieure à l année courante. Utiliser DateTime.Now.Year pour obtenir la date du système.. Développer une méthode nommée ValiderDate de validation sur mesure dans CommandesItemsReglesAffaires.shared.cs Le prix unitaire doit être entre 0$ et 2000$. Utiliser {} La quantité saisie doit être dans la plage 0 et 200 inclusivement. Utiliser {} Message à afficher Le destinataire doit comporter 40 caractères maximum. Corriger ou appuyer sur la touche Échap pour annuler. La date d'expédition doit être égale ou supérieure à la date de la commande. Corriger ou appuyer sur la touche Échap pour annuler. Cette date doit être égale ou inférieure à l'année courante. Corriger ou appuyer sur la touche Échap pour annuler. Une valeur est exigée pour les frais de port. Corriger ou appuyer sur la touche Échap pour annuler. Le prix unitaire doit être entre 0$ et 2000$. Corriger ou appuyer sur la touche Échap pour annuler. La quantité doit être entre 0 et ) Correction Point à vérifier Fait 1 Les 3 images sont présentes : commande, item et sur le bouton Sauvegarder 2 Tous les messages de validation sont dans les ressources des langues. Rien de coder en dur. 3 Dans les ressources, les libellés DestinataireLongueurMaximum, PlagePrixUnitaire et PlageQuantitéItems contiennent des codes {1} et {2} si nécessaire.

9 Page 9 4 La classe CommandesItemsReglesAffaires.shared.cs est dans le répertoire Services et comporte les deux méthodes ValiderDate et VerifierDateExpedition. 5 Vérifier la classe CommandesItemsService.metadata.cs : appels des ressources et appels des méthodes personnelles pour valider les dates 6 Le message La mise à jour s'est effectuée avec et le titre Mises à jour de la base de données s affichent après la modification des données et après avoir cliqué sur le bouton Sauvegarder les modifications. 7 Les données modifiées le sont réellement dans la base de données. Ouvrir les 2 tables et vérifier. 8 Le message Aucune donnée modifiée. Rien n'est envoyé sur le serveur via le service web! et le titre Statut de votre demande s affichent si aucune modification des données et après avoir cliqué sur le bouton Sauvegarder les modifications. 9 Le bouton Sauvegarder les modifications ne provoque aucune erreur si une date est dans un état invalide 10 Les éléments graphiques sont inaccessibles durant la transaction avec le service wb Validations Merci d effectuer tous ces tests avant de demander une correction 11 Destinataire n autorise pas plus que 40 caractères a) Entrer un dentinaire avec 50 caractères exactement 12 Expédiée le est toujours égale ou supérieure à la date de la commande a) Entrer une date égale à la date de commande b) Entrer une date + 1 jour à la date de la commande c) Entrer une date 1 jour à la date de la commande 13 Toutes les dates ne permettent pas l année prochaine ou supérieure a) Entrer une date de commande de l année prochaine b) Entrer une date de commande de cette année c) Entrer une date Livrée avant le de l année prochaine d) Entrer une date Livrée avant le de cette année e) Entrer une date Expédiée le de l année prochaine f) Entrer une date Expédiée le de cette année 14 Port doit contenir une valeur a) Vider la zone b) Entrer une valeur dans 15 Prix unitaire doit être entre 0 et 2000 a) Entrer un prix unitaire -1 b) Entrer un prix unitaire 0 c) Entrer un prix unitaire 1500 d) Entrer un prix unitaire de 2000 e) Entrer un prix unitaire de Quantité doit être entre 0 et 200 a) Entrer une quantité de 0 b) Entrer une quantité de -1 c) Entrer une quantité de 200 d) Entrer une quantité de 201