Gestion d'évènement et Commandes - Sommaire - Version 1.0
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
Gestion d’évènement et
Commandes
Version 1.0
Sommaire
2 Les évènements et commandes en Silverlight 17/05/09
1 Les Événements ............................................................................................................................... 3
1.1 Les événements d’entrées ...................................................................................................... 3
1.1.1 Gestion d’évènement d’entrée ....................................................................................... 3
1.1.1.1 La souris ………………………………………………………………………………………………………………………3
1.1.2 Gestionnaire d’évènement ............................................................................................ 13
1.1.3 Les données d’événement spécialisée .......................................................................... 13
1.1.4 Utilisation du gestionnaire d’événement ...................................................................... 13
1.1.5 Les évènements routés ................................................................................................. 15
1.1.6 Les évènements routés personnalisés. ......................................................................... 20
1.1.7 Exemples d’évènement des plus courant...................................................................... 21
1.2 Evènement de non-entrée .................................................................................................... 23
1.2.1 FrameworkElement:Loaded .......................................................................................... 24
2 Les commandes ............................................................................................................................. 25
3 Conclusion ..................................................................................................................................... 26
Dotnet France Association
3 Les évènements et commandes en Silverlight 17/05/09
1 Les Événements
Pour rendre notre programme intéressant, la gestion des évènements semble indispensable.
Les évènements peuvent être définis comme un message envoyé par un Objet pour signaler une
action (telle que le clic de la souris ou encore le passage à une valeur inférieure d’une variable).
Silverlight (ainsi que WPF) utilise une gestion propre à ces technologies pour les gérer. Nous allons
voir dans ce chapitre comment traiter les événements.
1.1 Les événements d’entrées
Les événements d’entrées sont définis comme des interactions avec l’utilisateur. Ce sont
généralement des clics de souris, déplacements de souris, ou encore des états de certaines touches
du clavier (état haut ou état bas). Ces évènement sont faciles à traiter et permettent d’améliorer l’UI
(l’User Interface). Il faut préciser que ce n’est pas Silverlight qui reçoit directement les évènements,
mais bien le navigateur internet qui héberge le plug-in. Le navigateur envoie ensuite l’information à
l’API de Silverlight (une API managée).
1.1.1 Gestion d’évènement d’entrée
Pour gérer la gestion d’évènements d’entrée, Silverlight (comme le WPF) utilise le code XAML
et le code-behind, en parallèle. Pour mieux comprendre, prenons l’exemple d’un contrôle simple, le
bouton. Souvent utilisé dans les programmes, il est l’un des contrôles de base. Son évènement
principal est bien sur le clic sans lequel il serait inutile. Voyons comment gérer cet évènement.
Voici la balise d’un simple bouton prenant comme attribut la taille est le nom du contrôle.
Dotnet France Association
4 Les évènements et commandes en Silverlight 17/05/09
Pour traiter le clic sur le bouton, il nous faut utiliser l’attribut suivant entre les balises.
L’attribut que portera la propriété Click détermine en fait le nom de l’évènement qui sera ensuite
géré en code-behind.
Une fois l’attribut Click inséré dans le code XAML, il faut rajouter la fonction
Button1_Click dans son code-behind de la façon suivante. Cependant, il est possible de le créer
automatiquement lorsque l’on va insérer la propriété Click. Tout cela est rendu possible grâce à
l’IntelliSense de Visual Studio qui va nous proposer de créer automatiquement un nouvel évènement
qui se traduira automatiquement par le code-behind ci-dessous. Il n’est donc pas obligatoire de tout
rentrer à la main.
Voici donc le code automatiquement créer lors de la création de l’évènement. C’est entre les
accolades que nous allons rentrer toutes les méthodes et action qui vont être réalisées lors de
l’activation de l’évènement.
//C#
namespace SilverlightApplication4
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}
private void Button1_Click(object sender, RoutedEventArgs e)
{
}
}
}
Dotnet France Association
5 Les évènements et commandes en Silverlight 17/05/09
Bien sûr, notre clic ne sert à rien ici mais avec un peu d’imagination on peut rendre un
bouton bien plus intéressant.
//C#
private void Button1_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Bouton Cliqué");
}
Ici, l’ajout de la MessageBox permet de vérifier le bon fonctionnement de notre contrôle.
Après compilation vous devriez vous retrouver avec une page internet semblable à celle-ci. Certes ici,
le design est très limité mais nous nous intéressons plus à la partie fonctionnelle qu’à l’aspect visuel
de notre interface.
Remarque : Vous avez surement noté l’auto complétion qu’effectue Visual Studio. Dans
celui-ci, les évènements tels que le clic sont signalés par un éclair jaune orange.
Dotnet France Association
6 Les évènements et commandes en Silverlight 17/05/09
Bien sûr nous avons seulement traité un évènement simple sur un bouton mais les
possibilités sont bien plus grandes avec des contrôles tels que les sliders ou les autres contrôles.
Silverlight permet donc de prendre en charge un grand nombre d’entrées que fournit
l’utilisateur. Dans ces entrées, j’entends tous les évènements qui seront géré par l’utilisateur (ou
plutôt provoqué par l’utilisateur) grâce à la souris, au clavier ou au focus.
1.1.1.1 La souris
Comme en WPF le FrameWork nous fournit un panel d’évènements avec la souris :
MouseMove
MouseEnter
MouseLeave
MouseLeftButtonDown / MouseLeftButtonUp
Bien entendu, je ne pense pas qu’il soit sorcier de savoir à quoi sert chaque évènement
présenté précédemment étant donné qu’il suffit juste d’avoir de petite connaissance en anglais.
Dotnet France Association
7 Les évènements et commandes en Silverlight 17/05/09
Cependant Silverlight ne peut pas encore prendre en compte le Click droit à cause du fait
qu’il soit un plugin utilisé par le navigateur. De plus, sous les interfaces Silverlight on n’en aura pas la
même utilité qu’en WPF avec ButtonState. Ensuite, afin de gérer ces évènements, nous avons à
notre disposition deux classes MouseEventArgs et MouseButtonEventArgs. La différence principale
entre ces deux classes est que la seconde gère les évènements de bouton de la souris contrairement
à la première. On pourrait ainsi faire un regroupement de la sorte :
MouseEventArgs MouseButtonEventArgs
MouseMove MouseLeftButtonDown
MouseEnter MouseLeftButtonUp
MouseLeave
Voici ce que donne L’IntelliSense quand on utilise
des évènements d’entrées se référant à la souris. Enfin, nous
allons voir dans les deux bout de code suivant que nous
avons simplement définit un évènement lorsque la souris
survole le bouton pour qu’elle puisse afficher un message
box. C’est la même chose que l’exemple de l’introduction,
seulement nous avons modifié le type d’évènement de la
souris.
//C#
private void Button1_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Bouton Cliqué");
}
Il sera possible de développer d’avantage les évènements de souris en développement plus
l’utilisation des deux classes et en considérant les évènements vus comme des évènements routés.
Ainsi que développer la capture de la souris ou même le drag and drop.
Dotnet France Association
8 Les évènements et commandes en Silverlight 17/05/09
1.1.1.2 Le clavier
Précédemment, nous avons vu que la souris est prise en compte par Silverlight. Cependant, il
existe un autre outil tout le temps utilisé : le clavier. Et bien Silverlight prend aussi en charge les
évènements générés par une action sur le clavier.
On considère deux évènements qui organisent toute la gestion du clavier :
KeyDown
KeyUp
Il existe bien entendu des évènements de clavier pour les navigateurs comme par exemple pour
rafraîchir une page ou ouvrir un nouvel onglet. Et aussi pour le mode plein écran, la touche Echap
permet de quitter ce mode. C’est pour ça que suivant le type de focus, les évènements de clavier
sont donnés en priorité à l’application que l’utilisateur a en cour d’utilisation.
Tout comme pour la souris, les évènements du clavier on recourt à KeyEventArgs.
//C#
private void Grid_KeyUp(object sender, KeyEventArgs e)
{
if (e.Key == Key.M)
{
MessageBox.Show("touche appuyé");
}
}
Dotnet France Association
9 Les évènements et commandes en Silverlight 17/05/09
Ainsi, notre programme affichera une MessageBox indiquant que la touche M a été relâché.
Grace à cet exemple, on voit comment choisir quelle touche du clavier a été pressé.
Dotnet France Association
10 Les évènements et commandes en Silverlight 17/05/09
1.1.1.3 Le Focus
Le Focus est un concept visuel abstrait qui ne concerne que les contrôles Silverlight. Le focus
peut être assimilé à un système de fenêtre, dans le sens ou les différents contrôles telle que KeyUp
ne s’applique que sur la fenêtre active. Ici, le focus utilise le même système : les contrôles clavier
sont utilisables uniquement dans l’élément qui le contient.
Bien sûr, Silverlight a un comportement par défaut qui fournit un système spécifique de focus pour
des programmes simples.
On remarque que le focus est sur un contrôle tel que le bouton grâce à un liseré bleu clair
sur celui-ci.
Pour utiliser le Focus il suffit simplement de rajouter le contrôle GotFocus.
//C#
private void Grid_GotFocus(object sender, RoutedEventArgs e)
{
}
Dotnet France Association11 Les évènements et commandes en Silverlight 17/05/09
Ici, lorsque le Grid obtiendra le contrôle, le code behind correspondant sera exécuté.
Il existe le même contrôle pour la perte du Focus : LostFocus.
Pour qu’un contrôle reçoive le Focus, il est important qu’il respecte trois conditions :
IsEnabled a la valeur true.
Visibility a la valeur Visible.
Le focus ne doit pas être entièrement en dehors de la zone de contenu
Silverlight.
Enfin, le passage du focus peut se faire par la touche tabulation. Par défaut, la touche
tabulation passe d’un contrôle au suivant dans l’ordre logique le plus direct. On peut donc
décomposer cette action, en appuyant sur la touche TAB le contrôle possédant le focus perd celui-ci,
déclenchent le contrôle LostFocus par la même occasion, et le Focus passe au contrôle suivant, et le
code-behind correspondant au GotFocus du contrôle.
Il est possible de modifier les paramètres de tabulation avec TabIndex et TabNavigation. Le type de
valeur est System.int32. Sa modification demande une grande connaissant non abordée dans ce
chapitre.
Voici un exemple avec le focus :
Dotnet France Association12 Les évènements et commandes en Silverlight 17/05/09
Et le code-behind :
//C#
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}
private void Button2_GotFocus(object sender, RoutedEventArgs e)
{
MessageBox.Show("Contrôle qui a obtenu le focus");
}
}
Ici, notre exemple affichera une MessageBox quand le focus sera sur le contrôle Button2.
Dotnet France Association13 Les évènements et commandes en Silverlight 17/05/09
1.1.2 Gestionnaire d’évènement
Maintenant que vous avez vu la pratique, nous allons voir un peu plus en détail les
différentes étapes, en commençant par le gestionnaire d’évènement. Le gestionnaire d’événement,
c’est tout simplement les classes publiques, ou avec un niveau d’accès privée dans notre code-
behind. Cette classe contient les différentes méthodes correspondant aux événements définis dans
le XAML. Il est impératif de leur donner le même nom. Il est important de souligner que pour les
nombreux évènements Silverlight, le gestionnaire d’évènement Silverlight ne référence que deux
paramètres dans sa signature :
L’object sender
Les données de l’évènement (EventArgs)
1.1.3 Les données d’événement spécialisée
Les données d’évènements sont très importantes. Elles dérivent toute de EventArgs, mais
doivent correspondre à l’évènement. Cela est particulièrement vrai pour les évènements d’entrée
tels que les évènements souris ou les évènements clavier. En effet, il est important de connaitre la
position au moment de l’évènement de la touche. Par exemple, pour une combinaison de plusieurs
touches clavier, il est important de savoir quelle touche a été actionnée car chaque touche déclenche
le même KeyDown. Vous devez pour cela accéder au KeyEventArgs pour identifier la touche qui a été
actionnée. (Voir donc la partie sur le clavier et la souris dans les évènements d’entrées.)
1.1.4 Utilisation du gestionnaire d’événement
Pour utiliser le gestionnaire d’évènement, deux choix s’offrent à vous. Dans les deux cas, le
résultat sera le même et aucune des deux méthodes n’est à proscrire. Je vous laisse donc faire le
choix entre la première méthode plus simple et pratique, et la seconde, plus appropriée et
conventionnelle (fortement conseillée pour des programmes lourds multi programmateurs).
Dotnet France Association14 Les évènements et commandes en Silverlight 17/05/09
1.1.4.1 Première méthode
Comme dit précédemment cette méthode est la plus simple et la plus pratique, Visual Studio
permettant même une astuce pour son utilisation. Cette méthode est celle utilisée dans l’exemple du
bouton. Il s’agit de créer un évènement et une méthode correspondante.
//C#
private void Button1_Click(object sender, RoutedEventArgs e)
{
}
Simple à mettre en œuvre et d’utilisation, elle reste plus limitée que la seconde.
De plus, Visual Studio propose une astuce d’utilisation. En effet, après avoir créé votre code
XAML, il est possible de faire un clic droit sur l’événement et de choisir l’option « Naviguer vers le
gestionnaire d’événements », celui-ci vous créera la méthode correspondante à votre évènement
dans la classe appropriée. A noter aussi qu’il vous mettra automatiquement les paramètres dans la
signature (et donc les paramètres spécialisée si besoins est).
Ici, on remarque que le paramètre KeyEventArgs (paramètre correspondant à KeyDown) a
été ajouté par votre IDE dans le code behind.
Dotnet France Association15 Les évènements et commandes en Silverlight 17/05/09
1.1.4.2 Seconde méthode
Cette méthode, plus conseillée, consiste à utiliser un évènement routé Loaded (voir la suite
du cours). En effet, grâce à cette méthode on peut rajouter un gestionnaire d’évènement tout en
vérifiant la disponibilité de notre programme (vérifier que le chargement est terminé et que
l’affichage est prêt). Cette solution, plus d’usage en Silverlight, est à préconiser pour la
programmation à plusieurs sur un même projet. (Je conseille de revoir cette partie après avoir vu la
partie FrameworkElement:Loaded)
//C#
void Rec1_Loaded(object sender, RoutedEventArgs e)
{
Rectangle Rec1 = sender as Rectangle;
Rec1.MouseLeftButtonDown += new
MouseButtonEventHandler(OnMouseLeftButtonDown);
}
1.1.5 Les évènements routés
Silverlight prend en charge deux types d’évènement. Les évènements dit classiques qui reste
similaire aux évènements .NET et les éléments routés introduit par le WPF. Ces évènements routés
ressemblent beaucoup à ceux classiques dans le sens où leur utilisation et leurs déclarations sont
similaires. La principale différence entre la gestion de ces évènements est le chemin qu’empreinte
celle-ci pour être traitée. En effet, les actions générées vont parcourir l’ensemble des contrôles de la
fenêtre Silverlight jusqu'à ce qu’il soit marqué comme traité.
Pour éviter certaines confusions avec le WPF, il est important de préciser qu’il existe
certaines différences entre ces deux langages.
Les différentes stratégies de routage sont :
La stratégie « directe » qui correspond en tout point à la gestion d’évènement
classique. L’action part du contrôle source jusqu'à être marquée comme traitée.
La stratégie « Par le bas » ou Bubbling, ici l’action part du contrôle d’origine pour
ensuite être remonté et être marqué comme traité.
En WPF, il existe aussi la stratégie « par le haut » ou Tuneling qui n’est pas applicable
en Silverlight.
Dotnet France Association16 Les évènements et commandes en Silverlight 17/05/09
Les évènements routés sont les suivant :
Nom de l’évènement Code C# Description
KeyDown public event KeyEventHandler Se produit lorsqu’une touche
KeyDown est enfoncée
KeyUp public event KeyEventHandler Se produit lorsqu’une touche
KeyUp est relâchée
GotFocus public event RoutedEventHandler Se produit lorsque l’UIElement
GotFocus reçoit le Focus
LostFocus public event RoutedEventHandler Se produit lorsque l’UIElement
LostFocus perd le focus
MouseLeftButtonDown public event Se produit lorsque le bouton
MouseButtonEventHandler gauche de la souris est
MouseLeftButtonDown
enfoncé
MouseLeftButtonUp public event Se produit lorsque le bouton
MouseButtonEventHandler gauche de la souris est relâché
MouseLeftButtonUp
MouseMove public event MouseEventHandler Se produit lorsque la position
MouseMove (coordonnées) de la souris
changement
BindingValidationError public event Se produit lorsqu'une erreur
EventHandler BindingValidationError
signalée par une source de
liaison
J’aimerai attirer votre attention sur les méthodes appelées lors du début de l’évènement. En
effet, bien que celle-ci ressemble beaucoup à un évènement classique, elle comporte quelques
différences. En effet, celle-ci prend deux paramètres :
Object
RoutedEventArgs (ou un dérivé tels que MouseButtonEventArgs)
Ces deux paramètres, similaires aux évènements non routés, se voient ajoutés deux propriétés :
OriginalSource : qui permet de récupérer le contrôle à l’origine de la source.
Handled : est un booléen. Si ça valeur est positive, cela indique que l’évènement à été
traité et la recherche s’arrêtera.
Dotnet France Association17 Les évènements et commandes en Silverlight 17/05/09
Le principe des éléments routés est que l’action commence par l’origine. Pour bien vous faire
comprendre cette notion un peu abstraite, je vous propose un exemple qui permet de bien se
représenter la chose.
Pour commencer, avec notre système d’affichage, j’utilise une simple ListBox.
De cette sorte, j’ai un affichage clair et simple pour montrer les différentes couches de l’arbre
graphique par lequel l’action va passer.
Ensuite, je vais construire l’environnement de test et déclarer les différents évènements.
Ici, on remarque que Grid3 est contenu dans Grid2 lui-même contenu dans Grid1. Ainsi, on
peut facilement deviner l’arbre graphique de ce simple exemple.
Enfin, on créé le code-behind pour que les contrôles génèrent le nom de la Grid à chaque clic
de souris. Ainsi, on pourra voir sur quel grid on clique, mais aussi par où l’action passe.
Dotnet France Association18 Les évènements et commandes en Silverlight 17/05/09
Voici le code XAML entier :
Dotnet France Association19 Les évènements et commandes en Silverlight 17/05/09
Voici ensuite le code-behind de cet exemple :
//C#
namespace SilverlightApplication5
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}
private void Grid_MouseButtonDown(object sender,
MouseButtonEventArgs e)
{
Results.Items.Clear();
e.Handled = true;
}
private void Grid1_MouseLeftButtonUp(object sender,
MouseButtonEventArgs e)
{
ListBoxItem item = new ListBoxItem();
item.Content = "Grid1";
Results.Items.Add(item);
}
private void Grid2_MouseLeftButtonUp(object sender,
MouseButtonEventArgs e)
{
ListBoxItem item = new ListBoxItem();
item.Content = "Grid2";
Results.Items.Add(item);
}
private void Grid3_MouseLeftButtonUp(object sender,
MouseButtonEventArgs e)
{
ListBoxItem item = new ListBoxItem();
item.Content = "Grid3";
Results.Items.Add(item);
}
}
}
Dotnet France Association20 Les évènements et commandes en Silverlight 17/05/09
Si vous compilez ce code vous obtiendrez une fenêtre similaire à celle-ci :
Je vous invite maintenant à cliquer sur les
différents carrés pour voir ce qui ce passe dans la
ListBox.
On remarque facilement les différents Grid
qui, suivant leur sélection, modifie les items de la
ListBox. Aussi, on observe bien que l’ordre des Grid
est respecté en fonction des évènements traités.
1.1.6 Les évènements routés personnalisés.
Une des notions apportées avec le WPF et les évènements routés, était la possibilité de
personnaliser ceux-ci. Malheureusement, à l’heure actuelle, il est impossible avec Silverlight 2.0 et
3.0, de créer des évènements routés personnalisés. Les seuls évènements routés disponibles sont
ceux cités précédemment dans le tableau.
Dotnet France Association21 Les évènements et commandes en Silverlight 17/05/09
1.1.7 Exemples d’évènement des plus courant
1.1.7.1 Exemple de gestion de la souris
Pour montrer un autre exemple de gestion de la souris, je propose cette simple application
Web, qui montre l’évènement MouseMove (un des plus compliqués et qui peut demander beaucoup
de ressources. Il est conseillé de l’utiliser raisonnablement). Ici, notre application fera bouger une
ellipse en fonction des mouvements de la souris. Cet exemple sera un peu plus développé que le
précédent
Dotnet France Association22 Les évènements et commandes en Silverlight 17/05/09
Voici le code behind :
//C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightApplication6
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}
private void UC_MouseMove(object sender, MouseEventArgs e)
{
Point mouse = e.GetPosition(this);
TransformGroup group =
(TransformGroup)this.Grid1.RenderTransform;
TranslateTransform translate =
(TranslateTransform)group.Children[3];
translate.X = this.Width /5 - (mouse.X) *0.5 ;
translate.Y = this.Height /5 - (mouse.Y) *0.5 ;
}
}
}
Nous n’expliciterons pas ici chaque ligne du code behind car cela reviendrai à faire un cours
orienté sur le C#. Mais néanmoins, nous utilisons l’évènement MouseMove qui bien entendu
concerne le déplacement de la souris.
Dotnet France Association23 Les évènements et commandes en Silverlight 17/05/09
Ci-dessous, le rendu visuel de notre exemple
Dotnet France Association24 Les évènements et commandes en Silverlight 17/05/09
1.2 Evènement de non-entrée
Nous avons vu l’utilisation d’évènements d’entrée, c'est-à-dire une interaction avec
l’utilisateur. Mais il existe aussi des évènements de non-entrée, c'est-à-dire des évènements qui ne
sont pas dus à l’utilisateur. En général, ces évènements correspondent à des modifications d’états
d’objet (pour exemple, un MediaElement (cf. chapitre Multimédia) à plusieurs évènements pour
gérer le transport du media). Pour voir les principaux évènements je conseillerais de regarder l’auto
complétion ou la documentation msdn. Nous allons par contre nous intéresser à
FrameworkElement:Loaded. Cet évènement de non –entrée est un peu spécial.
1.2.1 FrameworkElement:Loaded
Cet évènement fait partie des évènements FramworkElement, qui fournit l’infrastructure d’API
pour les objets Silverlight. On y retrouve les évènements d’entrée Key et Mouse. Il utilise donc,
comme les autres éléments d’entrée Silverlight, RoutedEventHandler comme délégué. Mais celui-ci
ne se propage pas comme les autres évènements routés.
Nom de l’évènement Code C# Description
FrameworkElement:Lo public event RoutedEventHandler Se produit lorsqu'un
aded Loaded FrameworkElement a terminé
les passes de disposition, a
procédé à l'affichage et est
prêt pour l'interaction.
Il permet donc de vérifier l’état d’affichage et de permettre au programme de commencer ses
différentes interactions. Il n’est bien sûr pas obligatoire (il n’est en effet sur aucun des exemples
précédent) mais permet pour des programmes lourds de vérifier la disponibilité du programme.
Il est conseillé de le rajouter dans des programmes avec animation grâce à une ligne Xaml
similaire à celle-ci.
Dotnet France Association25 Les évènements et commandes en Silverlight 17/05/09
2 Les commandes
Le WPF avait introduit le concept de commandes qui permettait de créer des commandes
(permettant entre autre la gestion du copier, coller, couper et supprimer).Malheureusement cette
notion n’a pas été retenue en Silverlight 3.0. Elle sera peut-être ajouté dans des versions futures.
Dotnet France Association26 Les évènements et commandes en Silverlight 17/05/09
3 Conclusion
Dans ce chapitre, nous avons vu une des bases fondamentale à toute application Silverlight. Les
évènements sont en effet obligatoires dans toute application, que ce soit un lecteur vidéo (bouton
play, pause …) ou encore dans d’autres applications riches.
Dotnet France AssociationVous pouvez aussi lire
