Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Arnaud Auroux


Silverlight, let there be light...
[Silverlight] Effectuer du DataBinding entre une application Silverlight et des éléments HTML

La puissance du moteur de DataBinding de Silverlight fournit un gain de productivité certain sur le développement d’un projet. De plus, il peut arrivé qu’une application Silverlight ait besoin de communiquer avec l’environnement dans lequel elle est hébergée, i.e la page web, afin de répercuter sur le site certains messages, notifications, etc.

Grâce à l’interopérabilité DOM/code managé disponible avec Silverlight, voir cet article pour une première approche assez complète, il est possible d’effectuer du DataBinding avec en cible des éléments Web.

Pour cela je propose la classe suivante :

   1: public string HtmlElementId
   2: {
   3:     get { return (string)GetValue(HtmlElementIdProperty); }
   4:     set { SetValue(HtmlElementIdProperty, value); }
   5: }
   6:  
   7: public string HtmlElementPropertyName
   8: {
   9:     get { return (string)GetValue(HtmlElementPropertyNameProperty); }
  10:     set { SetValue(HtmlElementPropertyNameProperty, value); }
  11: }
  12:  
  13: public string HtmlElementValue
  14: {
  15:     get { return (string)GetValue(HtmlElementValueProperty); }
  16:     set { SetValue(HtmlElementValueProperty, value); }
  17: }
  18:         
  19: public static readonly DependencyProperty HtmlElementIdProperty =
  20:     DependencyProperty.Register("HtmlElementId", typeof(string), typeof(HtmlBinder), null);
  21:  
  22: public static readonly DependencyProperty HtmlElementPropertyNameProperty =
  23:     DependencyProperty.Register("HtmlElementPropertyName", typeof(string), typeof(HtmlBinder), null);
  24:  
  25: public static readonly DependencyProperty HtmlElementValueProperty =
  26:             DependencyProperty.Register("HtmlElementValue",
  27:                                         typeof(string),
  28:                                         typeof(HtmlBinder),
  29:                                         new PropertyMetadata(new PropertyChangedCallback((s, e) =>
  30:                                         {
  31:                                             HtmlBinder htmlBinder = (HtmlBinder)s;
  32:                                             HtmlPage.Window.Eval(String.Format("document.getElementById('{0}')['{1}'] = {2}",
  33:                                                                                htmlBinder.HtmlElementId,
  34:                                                                                htmlBinder.HtmlElementPropertyName,
  35:                                                                                htmlBinder.HtmlElementValue));
  36:                                         })));
  37: }

Ici nous héritons de DependencyObject pour tout simplement pouvoir définir 3 DependencyProperties :

  • HtmlElementId : pour l’id de l’élement HTML qui va être la cible du DataBinding.
  • HtmlElementPropertyName : pour le nom de la propriété de l’élément HTML sur laquelle on veut effectuer du DataBinding.
  • HtmlElementValue : pour la valeur sur laquelle on va se binder côté Silverlight et qui sera reportée sur l’élement HTML grâce à l’interopérabilité DOM / Code managé et plus précisément la méthode HtmlPage.Window.Eval permettant directement d’évaluer du code Javascript.

Un exemple d’utilisation,

Côté XAML :

   1: <UserControl x:Class="HtmlBinder.MainPage"
   2:              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:              xmlns:local="clr-namespace:HtmlBinder">
   5:     <UserControl.Resources>
   6:         <local:HtmlBinder x:Key="HtmlBinder"
   7:                           HtmlElementPropertyName="value"
   8:                           HtmlElementId="test" />
   9:     </UserControl.Resources>
  10:     <Grid>
  11:         <Slider Value="{Binding HtmlElementValue, Mode=TwoWay, Source={StaticResource HtmlBinder}}" />
  12:     </Grid>
  13: </UserControl>

Côté HTML :

   1: <div>
   2:     <input id=test type="text"  />
   3: </div>

 

Les sources sont disponibles ici :

Enjoy :)

Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
Posted: jeudi 25 mars 2010 14:12 par Arnaud Auroux

Commentaires

Pas de commentaires

Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Conf’SharePoint : 10 bonnes raisons pour ne pas la rater par Le petit blog de Pierre / Pierre's little blog le 05-14-2013, 02:24

- [Event] Soirée de lancement Agile .NET France à Lyon par Blog Agile/ALM de Vincent THAVONEKHAM le 05-13-2013, 01:29

- .NET / Debug : inspection de la mémoire d'applications .NET (dump ou processus live) : première livraison d'une librairie .NET par Microsoft par CoqBlog le 05-11-2013, 22:21

- SharePoint : Incompatibilité avec Internet Explorer 10 (IE10) par Blog Technique de Romelard Fabrice le 05-08-2013, 16:29

- AutoSPInstaller pour SharePoint 2013 maintenant disponible en “RTM” par Julien Chable le 05-06-2013, 23:30

- [TFS2010] A la recherche du Shelveset perdu par Blog de Jérémy Jeanson le 05-03-2013, 21:46

- .NET / Debug post-mortem : obtenir le fichier mscordacwks.dll correspondant à un dump quand on n'a plus d'accès direct à ce fichier par CoqBlog le 04-28-2013, 19:57

- [W8] Afficher un graphe par CPU dans le gestionnaire des tâches par Blog de Jérémy Jeanson le 04-28-2013, 17:48

- [WCF] Limiter proprement l’accès à vos ressources serveur par Blog de Jérémy Jeanson le 04-26-2013, 22:59

- Event : Je serai speaker à la Conf’SharePoint par Blog Technique de Romelard Fabrice le 04-26-2013, 12:00