Dot.Blog

C#, XAML, Xamarin, UWP/Android/iOS

Silverlight 3 : Styles Cascadés (BasedOn Styles)

Toujours dans ma petite série sur les nouveautés de Silverlight 3 je vais vous présenter aujourd'hui une feature plaisante : les styles cascadés.

En soi rien de nouveau à l'ouest puisque c'est le principe même des feuilles de styles CSS (qui y puisent d'ailleurs leur nom). Mais le CSS s'applique à quelques éléments simples HTML alors que là nous parlons de styles Silverlight, c'est à dire d'objet complexes pouvant définir tout un visuel, animations comprises.

[silverlight:source=/SLSamples/BasedOnStyle/BasedOnStyle.xap;width=405;height=150]

Dans l'application Sivlerlight 3 ci-dessus (fonctionnelle, ce n'est pas une capture écran), vous voyez 4 boutons. Tous sont des boutons standard du framework.

  • Le premier, intitulé "Base SL" possède le style Silverlight par défaut
  • Le second, "Normal" est décoré par le style "BoutonNormal"
  • Le troisième "Gros" est décoré par le style "BoutonGros"
  • Et le quatrième "Alarme" est décoré par le style "BoutonGrosAlarme"

Visuellement c'est plutôt moche, je vous l'accorde, mais le but du jeu est de voir l'effet du cascading styling...

Le style "BoutonNormal" est défini comme suit :

<Style x:Key="BoutonNormal" TargetType="Button">
     <Setter Property="Width" Value="90" />
     <Setter Property="Height" Value="30" />
     <Setter Property="HorizontalAlignment" Value="Left" />
     <Setter Property="VerticalAlignment" Value="Bottom" />
     <Setter Property="BorderThickness" Value="2"/>
</Style>

Là où les choses deviennent plus intéressantes, c'est dans le style "BoutonGros" ci-dessous où l'on voit apparaître l'attribut BasedOn qui permet de fonder le style courant sur celui qu'on indique :

<Style x:Key="BoutonGros" 
         BasedOn="{StaticResource BoutonNormal}"
         TargetType="Button">
  <Setter Property="Width" Value="180" />
  <Setter Property="Height" Value="60" />
  <Setter Property="FontFamily" Value="Comic Sans MS"/>
</Style>

Enfin, le dernier style se fonde lui-même sur le précédent par le même mécanisme, le niveau de cascading n'étant pas limité. On peut voir notamment que le changement de famille de fonte introduit dans le style "BoutonGros" s'est propagé au style "BoutonGrosAlarme" (fonte Comic).

<Style x:Key="BoutonGrosAlarme" 
         BasedOn="{StaticResource BoutonGros}"
         TargetType="Button">
  <Setter Property="Width" Value="160" />
  <Setter Property="Height" Value="40" />
  <Setter Property="FontSize" Value="18"/>
  <Setter Property="FontWeight" Value="Bold"/>
  <Setter Property="Foreground" Value="Red"/>
  <Setter Property="BorderThickness" Value="4"/>
  <Setter Property="BorderBrush" Value="#FFFF0202"/>
</Style>

Voilà, c'est tout simple, mais cela peut radicalement simplifier la création de gros templates pour des applications. Tous les avantages du Cascading Style Sheet de HTML dont l'intérêt ne se démontre plus, mais appliqué à des objets et à la sophistication de Silverlight. Que du bonheur...

Bon Styling,

...Et Stay Tuned !

Silverlight 3 : L'Element Binding

L’Element Binding est une nouvelle feature de Silverlight 3 déjà présente sous WPF.

L’Element Binding définit la capacité de lier les propriétés des objets entre eux sans passer par du code intermédiaire. Cette possibilité existait déjà sous WPF, on la retrouve désormais sous SL3.

Pour simplifier prenons l’exemple d’un panneau d’information, par exemple un Border avec un texte à l’intérieur. Imaginons que l’utilisateur puisse régler l’opacité de cette fenêtre par le biais d’un Slider. (ci-dessous l'application exemple pour jouer en live).

[silverlight:source=/SLSamples/EBinding/EBinding.xap;width=452;height=240]

On place quelques éléments visuels sous le Border (ici des rectangles) afin de mieux voir l’effet du changement d’opacité.

Trois méthodes s'offre à nous pour régler le lien entre le Slider et l'opacité du Border. J'appellerai la première "méthode à l'ancienne", la seconde "méthode du certifié" et la troisième "méthode Silverlight 3". Les trois ont leur intérêt mais si vous êtes très pressé vous pouvez directement vous jeter sur la 3eme solution :-)

Méthode 1 dite « à l’ancienne »

Le développeur Win32 habitué aux MFC ou à des environnements comme Delphi aura comme réflexe immédiat d’aller chercher l’événement ValueChanged du Slider et de taper un code behind de ce type :

MonBorder.Opacity = MonSlider.Value ;

Ça a l’avantage d’être simple, efficace, de répondre (apparemment) au besoin et de recycler les vielles méthodes de travail sans avoir à se poser de questions…

Méthode 2 dite « du certifié »

Ici nous avons affaire à un spécialiste. Son truc c’est la techno, suivre les guide-lines et écrire un code qui suit tous les dogmes de l’instant est un plaisir intellectuel. Parfois ses solutions sont un peu complexes mais elles sont belles et à la pointe de la techno !

Conscient que la solution « à l’ancienne » a un petit problème (en dehors d’être trop simple pour être « belle », elle est one way, le slider modifie l'opacité du border mais l'inverse ne fonctionne pas) il va chercher une solution objet élégante répondant à l’ensemble des cas possibles couvrant ainsi le two way, considération technique trop technophile pour le développeur du cas précédent.

Ici forcément ça se complique. C’est techniquement et intellectuellement plus sexy que la méthode « à l’ancienne » mais cela réclame un effort de compréhension et de codage :

Il faut en fait créer un objet intermédiaire. Cet objet représente la valeur du Slider auquel il est lié lors de son instanciation. Quant à l’objet Border, sa propriété Opacity sera liée par Data Binding standard à l’objet valeur.

Voici le code de la classe de liaison :

public class ValueBinder : INotifyPropertyChanged
       {
             public event PropertyChangedEventHandler PropertyChanged;
             private Slider boundSlider;
             public ValueBinder(Slider origine)
             {
                    boundSlider = origine;
             }
 
             public double Value
             {
                    get { return boundSlider==null?0:boundSlider.Value; }
                    set {
                           if (PropertyChanged!=null)
                                  PropertyChanged(this,
                                    new PropertyChangedEventArgs("Value"));
                           boundSlider.Value = value;
                    }
             }
       }

Cette classe, ou plutôt l’une de ses instances, servira a représenter la valeur courante du Slider. Ce dernier est lié à l’instance lors de la création de cette dernière (voir le constructeur de la classe ValueBinder ci-dessus).

Comment utiliser cette classe ?

La première chose est qu’il faut en créer une instance, cela peut se faire dans le code XAML ou bien dans le code behind de la façon suivante (dans le constructeur de la page par exemple) :

var valueBinder = new ValueBinder(slider);

Maintenant il suffit dans le code XAML de lier les deux objets à la valeur de la classe intermédiaire, par Data Binding :

Côté Slider, le code est :

<Slider x:Name="slider"Value="{Binding Value, Mode=TwoWay}"/> 

Côté Border :

<Border x:Name="borderInfo"Opacity="{Binding Value, Mode=TwoWay}"> 

Ne reste plus qu’à rendre visible l’objet intermédiaire par exemple en en faisant la valeur courante du DataContext de l’objet LayoutRoot :

LayoutRoot.DataContext = valueBinder;

Et voilà ! Ne reste plus qu’à compiler et vous le plaisir de voir que l’opacité du Border change bien lorsque le Slider est déplacé.

La chaîne est la suivante : la modification de la position du Thumb entraîne dans le composant Slider la modification de la valeur de la propriété Value. Comme celle-ci est liée par Data Binding TwoWay à la propriété Value de l’objet intermédiaire cette propriété va se trouver modifiée dans le même temps. Comme le Setter de la propriété notifie le changement de valeur de la propriété (la classe implémente INotifyPropertyChanged) et comme la propriété Opacity du Border est elle aussi liée par Data Binding à la propriété Value de l’objet intermédiaire, le Border sera « prévenu » du changement de valeur et sa propriété Opacité sera immédiatement modifiée pour recevoir la valeur courante de Value de l’objet intermédiaire ! C’est pas fun tout ça ? (hmmm j’en vois un qui suit pas là bas au fond… !).

Vous allez me dire, TwoWay, on veut bien te croire mais on ne le voit pas là … Pour l’instant cela se comporte exactement comme la première solution, juste qu’il faut avoir un niveau de certifié pour comprendre…

C’est pas faux. C’est pourquoi je vais maintenant ajouter un petit bout de code pour faire varier la valeur de la propriété Opacity du Border. Le plus simple est de gérer la roulette de la souris dans le Border :

<Border x:Name="borderInfo"MouseWheel="Border_MouseWheel"> 

Et dans le code behind :

private void Border_MouseWheel(object sender, System.Windows.Input.MouseWheelEventArgs e) 
             { 
                    borderInfo.Opacity += e.Delta/1000d; 
                    e.Handled = true;
             }

Il suffit maintenant de faire rouler la molette au dessus du Border pour en changer l’opacité. Le TwoWay ? Regardez bien : le curseur du Slider avance ou recule tout seul… Pour éviter que la page HTML contenant le plugin Silverlight ne se mette à scroller il faut bien entendu indiquer que l'événement est géré (Handled=true) ce qui est fait dans le code ci-dessus.

Cette solution est élégante, complète mais complexe. Elle reste l’approche à préconiser dans tous les cas du même type car, on le voit bien, si la première solution est simple, elle n’est pas complète. Complexifier par plaisir est un mauvais réflexe, mais ne pas voir qu’une solution est trop simpliste est aussi un défaut qu’il faut fuir !

Bref, sous Silverlight 2 la solution présentée ici est une bonne solution. Sous Silverlight 3 qui supporte le Binding direct entre éléments (comme WPF) nous allons pouvoir faire plaisir à la fois au développeur du premier cas et à celui du second :

Méthode 3 dite « Silverlight 3 »

Comment marier le reflexe (plutôt sain) du premier développeur de notre parabole de vouloir faire vite et simple avec l’exigence intellectuelle (tout aussi saine) du second qui implique de faire « complet » ?

Pour illustrer l’Element Binding de façon simple, prenons un Scrollbar en mode horizontal et un Slider en mode vertical.

Et regardons le code XAML de leur déclaration :

<ScrollBar x:Name="scrollA"Value="{Binding Value, ElementName=sliderB, Mode=TwoWay}"/> 
 
<Slider x:Name="sliderB"Value="{Binding Value, ElementName=scrollA, Mode=TwoWay}" /> 

Et c’est tout ce qu’il y a à faire pour obtenir une solution complète, élégante, sans code behind et très facile à mettre en œuvre ! Merci Silverlight 3 !

En début de billet vous pouvez jouer avec les deux dernières implémentations (je n’ai pas implémenté la méthode 1) .

Vous pouvez aussi télécharger le code du projet (Blend 3 ou VS2008 avec les extensions SL3) : elementBinding.zip (61,43 kb)

Pour d'autres nouvelles, Stay Tuned !

Silverlight 3 : Nouveau contrôle DataForm et Validation des données

Je continue ma petite série sur les nouveautés de Silverlight 3. Au menu un composant des plus intéressant et un nouveau système de validation.

Le composant s'appelle DataForm, il est en quelque sorte le pendant mono enregistrement du composant DataGrid. Avec cette dernière on montre plusieurs enregistrements à la fois, avec la DataForm on présente les données d'une seule fiche. On conserve malgré tout la possibilité de navigueur de fiche en fiche, et le composant est hautement personnalisable grâce aux styles et templates.

Imaginons une petite fiche permettant de créer un login : pseudo, e-mail et mot de passe sont le lot de ce genre de cadres de saisie. Pour les besoins de la démo commençons par créer une classe représentant l'ensemble des informations à saisir (voir le code en fin de billet).

Rien d'exceptionnel ici donc, juste une petite classe. Mais vous remarquerez plusieurs choses :

  • Les propriétés sont décorées d'attributs qui permettent de modifier notamment l'affichage des labels dans la DataForm, un nom interne de propriété n'est pas forcément adapté pour une lecture par l'utilisateur final.
  • Les propriétés sont décorées de l'attribut Required. Autre particularité pour la DataForm : certains champs peuvent être obligatoires.      

Dans le code ci-dessous chaque propriété prend en charge sa validation : elle lève une exception dès que la valeur passée n'est pas conforme à celle attendue. Il existe d'ailleurs un doublon fonctionnel dans ce code : la présence de la méthode CheckNull qui s'assure qu'une propriété n'est pas vide, et l'attribut Required. En l'état c'est la méthode CheckNull qui prend le dessus, on pourrait donc supprimer l'attribut.


Il existe bien d'autres attributs pour la DataForm et le propos de ce billet n'est pas de tous les détailler, mais il est important de noter comment le code peut prévoir certains comportements qui seront reportés sur l'interface utilisateur sans réellement interférer avec elle... subtile.

Regardons maintenant le code XAML de la page affichée par Silverlight (en fin de billet). 

Tout d'abord vous remarquerez que l'instance de LoginInfo n'est pas créée dans le code C# mais sous forme de ressource dans la fiche, en XAML.
Ensuite nous définissions une balise DataForm dont l'item courrant est lié à l'instance de LoginInfo.

Et c'est tout. Pour la décoration j'ai ajouté un bouton "ok" qui accessoirement lance la valitation totale de la fiche. Ne saisissez rien et cliquez dessus : vous verrez apparaître le cadre des erreurs avec la liste de toutes les validations qui ont échouées. Bien entendu l'aspect de ce cadre est templatable aussi.

Le mieux est de jouer avec l'application de test ci-dessous:



Vous pouvez aussi télécharger le code du projet (à utiliser sous Blend 3 ou VS2008 avec les extensions SL3): SL3DataValidation.zip (60,40 kb)


[silverlight:source=/SLSamples/Validation/DataValidation.xap;width=400;height=320]

A noter : la présence du petit symbole info, il répond à l'attribut Description prévu dans le code de la classe et permet d'informer l'utilisateur.
Vous remarquerez aussi qu'en passant d'un champ à un autre les champs invalidés sont décorés par une lisière rouge dont un coin est plus marqué : cliquez sur ce dernier et vous obtiendrez le message d'erreur avec sa petite animation. L'aspect de ce cadre ainsi que l'animation sont bien entendu modifiables à souhait.

Stay Tuned pour d'autres nouveautés de SL3 !

 

Code de la classe LogInfo :

 

   1:  public class LoginInfo : INotifyPropertyChanged
   2:      {
   3:          private string loginName;
   4:          
   5:          [Required()]
   6:          [Display(Name="Login name:",Description="Votre login personnel.")]
   7:          public string LoginName
   8:          {
   9:              get { return loginName; }
  10:              set 
  11:              {
  12:                  checkNull(value);
  13:                  loginName = value.Trim();
  14:                  dochange("LoginName");
  15:              }
  16:          }
  17:          
  18:          
  19:          private string email;
  20:          
  21:          [Required()]
  22:          [Display(Name="e-mail:",Description="Adresse mail pour vous joindre.")]
  23:          public string Email
  24:          {
  25:              get { return email; }
  26:              set 
  27:              {
  28:                  checkNull(value);
  29:                  checkMail(value);
  30:                  email = value.Trim();
  31:                  dochange("Email");
  32:              }
  33:          }
  34:          
  35:          private string password;
  36:          
  37:          [Required()]
  38:          [Display(Name="Mot de passe:",Description="Votre mot de passe de connexion.")]
  39:          public string Password
  40:          {
  41:              get { return password; }
  42:              set 
  43:              {
  44:                  checkNull(value);
  45:                  password = value.Trim();
  46:                  dochange("Password");
  47:              }
  48:          }
  49:          
  50:          private string passwordCheck;
  51:          
  52:          [Required()]
  53:          [Display(Name="Contrôle:",Description="Retapez ici votre mot de passe.")]
  54:          public string PasswordCheck
  55:          {
  56:              get { return passwordCheck; }
  57:              set 
  58:              {
  59:                  checkNull(value);
  60:                  passwordCheck = value.Trim();
  61:                  if (string.Compare(password,passwordCheck)!=0)
  62:                      throw new Exception("Les mots de passe diffèrent !");
  63:                  dochange("PasswordCheck");
  64:              }
  65:          }
  66:          
  67:          private void checkMail(string value)
  68:          {
  69:              string pattern = @"^(([^<>()[\]\\.,;:\s@\""]+" 
  70:                          + @"(\.[^<>()[\]\\.,;:\s@\""]+)*)|(\"".+\""))@" 
  71:                          + @"((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}" 
  72:                          + @"\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+" 
  73:                          + @"[a-zA-Z]{2,}))$";
  74:                    Regex regMail = new Regex(pattern);
  75:                   if (!regMail.IsMatch(value)) throw new Exception("E-mail non valide !");
  76:          }
  77:          
  78:          private void checkNull(string value)
  79:          { 
  80:              if (string.IsNullOrEmpty(value)) throw new Exception("Ne peut être vide !");
  81:          }
  82:   
  83:          #region INotifyPropertyChanged Members
  84:   
  85:          public event PropertyChangedEventHandler PropertyChanged;
  86:          private void dochange(string property)
  87:          {
  88:              if (PropertyChanged!=null) PropertyChanged(this,new PropertyChangedEventArgs(property));
  89:          }
  90:   
  91:          #endregion
  92:      }

le code XAML de la fiche :

 

   1:  <UserControl
   2:      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:      xmlns:dataFormToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm.Toolkit"
   5:      xmlns:local="clr-namespace:DataValidation"
   6:      x:Class="DataValidation.MainPage"
   7:      Width="300" Height="320">
   8:   
   9:      <UserControl.Resources>
  10:       <local:LoginInfo x:Key="loginRec"  />
  11:      </UserControl.Resources>
  12:   
  13:      <StackPanel x:Name="LayoutRoot">
  14:          <dataFormToolkit:DataForm 
  15:              x:Name="PwForm" 
  16:              CurrentItem="{StaticResource loginRec}" 
  17:              Foreground="Black" 
  18:              Height="292" 
  19:              VerticalAlignment="Top" 
  20:              TabNavigation="Cycle"/>
  21:          <Button 
  22:              Content="Ok" 
  23:              VerticalAlignment="Center" 
  24:              HorizontalAlignment="Center" 
  25:              Click="Button_Click"/>
  26:      </StackPanel>
  27:  </UserControl>

Silverlight 3 Releasé !

Ca y est, Silverlight 3 est releasé ! Avec Blend 3 RC (la finale dans 1 mois) et son nouveau système Sketchflow et des tonnes de nouveautés.

Silverlight 3 est une release d'importance qui pousse un cran plus loin encore le niveau des performances et de services rendus. On trouve parmi les nouveautés (sans ordre de préférence et avec des oublis) :

  • La vidéo HD avec accélérateur GPU d'une fluidité à couper le souffle ! Surtout cela permet de libérer le CPU et de tirer parti de la puissance de la carte graphique, donc d'avoir une qualité plus grande sur des PC moins puissants. Bien entendu, sur les plus puissants le gain est nettement visible aussi. De nouveaux Codec viennent s'ajouter avec le support H.264, l'audio AAC et le MPEG-4. Une API permet de créer de nouveaux Codec dans tout langage .NET ! Microsoft propose dans le même temps IIS Media Service, une application de streaming gratuite à installer sous IIS pour offrir un service de diffusion fluide et efficace.
  • L'accélération vidéo via le matériel (GPU) profite aussi et bien entendu à tous les logiciels développés en Silverlight pour une plus grande fluidité graphique. Ce qui permet au passage d'ajouter à Silverlight 3 le support des effets bitmap tant attendus comme le drop shadow ou le blur. Une interface ouverte permettant de créer soi-même de nouveaux effets.
  • De Nouveaux composants arrivent aussi. Avec Silverlight 3 et son SDK ce sont plus de 100 contrôles qui sont livrés pour concevoir des applications innovantes et fonctionnelles. L'accès aux données est largement amélioré avec la présence de la DataForm qui complète la DataGrid en fournissant une vision fiche de saisie plus orientée business.
  • Silverlight 3 améliore aussi la navigation en permettant l'exploitation des touches avance/recul du navigateur. La nouvelle fonction des bookmarks internes permet aussi de créer des liens mémorisables par les navigateurs qui peuvent alors plonger à l'intérieur d'une application Sliverlight.
  • Les styles deviennent héritables, on retrouve ainsi tout l'intérêt du cascading de CSS appliqué non pas à quelques styles HTML mais à des graphiques, des templates et des animations !
  • Les applications Silverlight peuvent désormais vivre en dehors du navigateur et être installées "sans installation" dans les menus de Windows. Les applications sont exécutables directement sans même plus avoir conscience qu'il s'agit, au départ, d'une application internet. Le tout en un clic...
  • En matière de communication la partie WCF est aussi améliorée avec une meilleure propagation des erreurs, la possibilité d'utiliser du XML binaire, c'est à dire compressé pour diminuer la taille des paquets échangés entre l'application et le serveur WCF.
  • Les Services .NET RIA permettent d'écrire du code de validation plus efficacement agissant à la fois sur la couche de présentation et celle du code métier, le tout sans avoir besoin de réécrire les mêmes régles dans plusieurs codes différents.
  • Visual Studio 2010 supportera bien entendu toutes les nouveautés mais il est déjà possible de bénéficier de tous les avantages cités depuis VS 2008.
  • Blend 3, évoqué en introduction est fourni en RC avant sa sortie officielle dans 1 mois. On y trouve de très nombreuses améliorations sur lesquelles je reviendrai prochainement dont le Sketchflow qui méritera à lui seul tout un article tellement le concept est génial pour faciliter le maquettage tant sous Silverlight que WPF.
  • Blend 3 introduit aussi des notions nouvelles comme les comportements (behaviors), sortes d'automates logiciels qu'on peut poser par drag-and-drop sur tout contrôle ou graphique pour lui permettre d'agir sans aucune programmation en code behind. Par exemple il existe un comportement de changement de propriété : déposez-le sur un cercle, et vous pourrez régler quel événement sera la source (le mouse enter par exemple), et quel autre objet sera la cible (couple objet / propriété). Fixer la nouvelle valeur (par exemple changer la couleur d'un autre contrôle). Le tout peut se faire immédiatement ou avec une timelime automatique pour un effet visuel plus "smooth" (on entre la durée voulue) !
  • Silverlight 3 supporte la 3D perspective, c'est à dire qu'on n'est pas encore arrivé au niveau de WPF qui sait manipuler des scènes 3D (objets 3D, lumières, caméras...) mais qu'il est possible de donner un effet de perspective à tout objet en application des rotations sur les 3 axes de l'espace. Cela ouvre de nouvelles ... perspectives pour créer par exemple des effets de transition novateurs sans une ligne de code.
  • Que dire aussi des Ease-in/out complexes qui permettent facilement de changer une animation un peu trop rigide en quelque chose de plus "organique", comme l'impression de rebond ou celle du comportement d'un elastique...
  • Blend 3 supporte aussi Intellisense dans le code XAML ce qui manquait cruellement.
  • Il permet aussi d'importer des graphiques PhotoShop ou Illustrator en conservant les layers, avec sélection des parties à importer.
  • Le templating inversé est aussi une nouveauté fantastique : vous partez d'un dessin fait par le graphiste et vous expliquez à Blend qu'il va devenir un bouton, un slider.. et Blend vous guide pour indiquer quel bout du dessin joue le rôle de piste, de curseur, etc. Réellement bluffant !
  • Les données manquent souvent lors de la conception d'un écran, et il est parfois difficile de templater une listbox ou une grille sans voir des exemples réalistes de contenu (un nom, une adresse mail, un numéro de téléphone etc). Blend 3 propose un mini générateur de données aléatoire typées (dans l'esprit de DataGen, le générateur de données que j'ai conçu, mais la fonction de Blend est de loin moins puissante). En tout cas cela permet d'immédiatement disposer de données assez réalistes pour mettre au point les écrans. On peut aussi charger des données de test depuis un fichier XML externe (généré par DataGen par exemple ? !).
  • Blend supporte l'intégration des projets au système de versionning. Cette évolution tombe sous le sens puisque Blend et VS sont conçus pour travailler de concert sur les mêmes projets et que dans ce cadre les deux produits doivent pouvoir gérer les changements dans un repository centralisé. Cette option s'entend pour le travail en équipe principalement.
  • Media Encoder 3 est lui aussi releasé dans la même vague, avec Design 3. Encoder permet de supporter les nouveaux modes videos de streaming HD de Silverlight 3.

Bref, je m'arrête là, c'est une moisson extraordinaire. Des outils de plus en plus puissants, de plus en plus agréables à utiliser, une gamme cohérente.

J'ai forcément oublié plein de choses, mais j'aurai forcément l'occasion de revenir sur toutes ces nouveautés dans des papiers à venir.

Entre temps, vous pouvez télécharger tout le nécessaire en vous rendant sur http://www.silverlight.net/ (téléchargements, tutors...), http://expression.microsoft.com/en-us/default.aspx (le site de la communauté Expression), ou encore http://www.microsoft.com/silverlight (le site de base de Silverligth avec des démos des nouveautés de la V3)

Amusez-vous bien !

Et Stay tuned, car des nouveaux papiers, il va forcément y en avoir d'ici quelques temps !

 

 

Xaml, l'ami des artistes

XAML, comme le savez, est au coeur de WPF et de Silverlight. Sa puissance, doublée par celle du Framework et de langages comme C#, en fait une machine de guerre sans équivalent pour qui veut développer des applications modernes, c'est à dire efficaces techniquement mais "lookées". 

Mais si XAML est l'ami des développeurs, il est aussi celui des artistes !
Il créé un lien entre deux mondes parallèles : celui des métiers IT et celui des métiers de l'art, graphisme, vidéo, son et musique.

Démontrer une nouvelle technologie est généralement assez facile, il suffit de se former et d'écrire un article et des exemples. Mais comment "démontrer" et rendre tangible ce lien immatériel entre informatique et art créé par XAML ?

Car une application aujourd'hui, en plus du fonctionnel, c'est aussi de l'image et du son. De l'interface, mais aussi de la "promo" visuelle, des vidéos, de la musique, des logos.

Evoquer ce lien entre art et technique, c'est la finalité de E-Naxos Art, une démo Silverlight 2 qui permettra peut-être de réveiller l'artiste qui sommeille en vous et vous inciter à vous lancer dans WPF et Silverlight si vous hésitez encore !

Pour l'instant l'application est en bêta et elle n'est pas encore très fournie. Il y a tout de même à voir des vidéos en 3D, des dessins et des bouts de sons ou de musiques. Tout cela sera complété au fil du temps.

Alors pour mieux comprendre le mariage entre "art" et technologie que matérialise XAML, bonne visite sur E-Naxos Art !

Et Stay tuned ! 

 

Article : Créer des Splash Screens sous Silverlight

Encore un article tout chaud à peine démoulé ! Le sujet aussi est brûlant : Avec l'arrivée prochaine de la version 3 Silverlight est un environnement qui a le vent en poupe... Puissant et hyper agréable à programmer, surtout accompagné de la suite Expression, Silverlight est un vrai plaisir.

Raison de plus pour savoir comment enrichir vos belles applications avec des Splash Screens originaux !

Comment ? Vous saurez tout en lisant ce nouvel article que je vous ai concocté : Conception de Splash Screens sous Silverlight (PDF 22 pages avec source des exemples VS 2008/Blend 2 sp1)

Bonne lecture !

 

(voir aussi le billet sur la façon de centrer un splash)

Outlook qui ne met pas à jour les flux RSS, solution...

[EDIT 1/2011] La solution proposée fonctionnait avec Outlook 2007 mais ne semble plus avoir d'effet avec la version 2010... supprimer les flux et les recréer semble l'unique issue. Too bad..[/EDIT]

Les flux RSS de votre outlook ne se mettent plus à jour ? Peut-être que la solution que je vais vous proposer va débloquer la situation, en tout chez moi ça a marché...

Fermez outlook, puis trouver le dossier suivant :

Sous Vista : C:\Users\{username}\AppData\Local\Microsoft\Outlook

Sous XP: C:\Documents and Settings\{username}\Local Settings\Application Data\Microsoft\Outlook

A l'intérieur de ce dossier vous allez trouver plusieurs fichiers, dont un qui s'appelle : ~last~.sharing.xml.obi

Il suffit de le supprimer et de relancer outlook. Et tous vos flux RSS qui semblaient stagner depuis quelques temps vont se remettre à vivre et vous aurez plein de lecture pour la journée !

 Bonne lecture !

Centrer un splash screen personnalisé avec Silverlight

Silverlight... ma seconde passion avec LINQ... Faire de belles application sous SL est un plaisir, mais une belle application n'est terminée que lorsqu'elle dispose de son splash screen personnalisé. La "final touch" qui fait voir au monde que vous n'êtes pas du genre à vous contenter des comportements par défaut et que vous êtes un vrai développeur, un dur, un tatoué !

Je reviendrai dans un tutor sur la façon de créer un splash screen sous Silverlight [EDIT]voir l'article créer des splash screen sous Silverlight[/EDIT], ce n'est pas très compliqué mais il y a quelques étapes à bien comprendre. Partons du principe que vous avez déjà un beau splash screen. Donc une présentation sous la forme d'un fichier Xaml contenant la définition d'un Canvas avec plein de jolis choses dedans. C'est le format Silverlight 1.0 utilisé pour les splash screens.

Tout va bien, vous avez fait tout ce qu'il faut, mais quand vous lancez votre application le splash est affiché en haut à gauche ! Damned ! Alors on commence à bricoler. Certains vont tenter de fixer une taille plus grande au Canvas de base et de centrer les objets dedans. Pas glop! ça ne s'adapte que très mal à la largeur réelle du browser... D'autres vont plonger les mains dans JavaScript pour calculer dynamiquement la position du Canvas. Compliqué et fatiguant...

Je vais vous donner une astuce. Plus facile à mettre en oeuvre j'ai pas en stock. Le truc consiste simplement à englober votre Canvas dans une balise Grid sans paramètres !

Et oui, la Grid est utilisable dans un splash sous Silverlight 2. Voilà comment faire :

   1: <Grid>
   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
   4:     >
   5:     <Canvas x:Name="MonSpash" ....... >
   6:     </Canvas>
   7:     </Grid>
   8: </Grid>

 C'est tout ! Votre splash, originellement dans le Canvas "MonSplash" (lignes 5 et 6) se trouve entourré par un Grid. Et le tour est joué, le splash apparait bien centré sur le browser quelle que soit ses dimensions.

Attention à un détail : Le fichier Xaml du splash est placé dans le l'application Web et non dans le projet Xap de Silverlight (normal sinon il serait chargé avec l'appli et ne pourrait plus servir de splash). Mais dans cette configuration Expression Blend ne reconnaît le fichier que comme un source Silverlight 1.0, du coup si vous voulez rouvrir le splash sous Blend ce dernier affiche une erreur, Grid étant du SL 2 et ne pouvant être root d'un fichier Xaml SL 1.0. Je vous recommande donc de placer le Grid une fois que vous aurez terminé la conception du splash sous Blend... Dans le pire des cas vous pouvez toujours supprimer la balise Grid, travailler sur le splash, et remettre la balise. C'est tellement simple que cela ne devrait vraiment pas gêner.

Pour voir un splash personnalisé centré, regardez l'application de démo : les Codes Postaux Français sous Silverlight. L'application a été mise à jour pour intégrer un splash.

 Et .. Splashhhh !

BING ! Enfin une alternative à Google

Ca aurait pu être BONG ! PAN! ZOING ! ou SVISHHHH ! façon comic strip de Gainsbourg. Non, ça sera BING !

Le bruit de la poelle à frire qui s'écrase sur la tête de Google, toujours façon BD ?

En tout cas, www.bing.com est la réponse de Microsoft à Google. Dès aujourd'hui accessible en France, en bêta, j'en ai déjà fait ma page d'accueil.

Ce qui ne gâche rien, la vue sur les îles grecques en fond est plutôt agréable et me rappelle les racines de www.e-naxos.com (naxos est une des îles des cyclades, à l'époque de la création de la société j'avais cherché une façon de faire écho aux consonnances grecques utilisée par Delphi... de plus les cyclades sont un endroit magnifique !). [EDIT] L'image change tous les jours vous avez peut-être loupé la grèce alors...[/EDIT]

Les nombreuses améliorations par rapport à Google ne sautent pas immédiatement aux yeux, on retrouve une présentation des résultats très proche. Mais on note déjà des petites choses qui changent les recherches : par exemple si vous cherchez des images vous pouvez choisir de filtrer celles qui sont en noir & blanc ou couleur, celles qui ont des visages humains ou non... La recherche devient plus intelligente. Mais Bing est en bêta chez nous et je ne n'ai pas encore vu toutes les avancées présentées par Microsoft, il va falloir attendre un peu je pense. [EDIT]Confirmé. La version bêta française va prendre de l'ampleur avec le temps. La sortie officielle aux USA se situant en juillet visiblement et aucune raison que nous soyons en avance sur les States... donc patience pour les grosses différences avec Google.[/EDIT]

Dans tous les cas Bing est parmi nous, il est plus agréable que Google, il cherche au moins aussi bien et aussi vite, voire mieux, propose des filtrages absents de Google et ce dernier quelles que soient ses qualités devient un véritable danger pour nos vies privées.

Il est temps de rééqilibrer le marché et de faire en sorte qu'une concurrence saine se mette en place. Beaucoup de mes lecteurs, je le sais, ont un jour où l'autre crié avec les loups contre l'hégémonie de Microsoft. Ne le le niez pas c'est arrivé à tout le monde, même si c'était "il y a longtemps". Et pendant ce temps là nous nous sommes tous fait dévorer par le monstre Google lui offrant nos clics et les sous des annonceurs, le laissant espionner nos recherches pour mieux nous cibler, fermant les yeux sur ses lectures de nos mails privés pour nous gaver de publicité. Nous avons été trop laxistes et nous nous sommes trompés de cible.  

Alors plutôt que de verser dans les regrets, il est temps de réagir, de redresser la barre, pendant qu'on diabolisait MS à une certaine époque (ce que certains font toujours, mais à qui profite le crime...), le monstre Google s'est insinué dans nos vies, l'acte rebelle aujourd'hui c'est pas d'écrire M$ pour MS, c'est de taper un grand coup sur la tête de Google pour qu'il reste à sa place, un bon moteur, un bon mail et des outils sympas, mais pas un Big Brother qui peut tomber un jour entre des mains mal intentionnées, frappons un grand coup qui va faire ... BING!

Bonnes recherches sur le Web !

Silverlight 3 beta disponible !

La bêta de Silverlight 3 est disponible ! De nombreuses améliorations promises sont là et bien plus...

On trouve bien sur l'accélération matériel pour les video HD, le support de la 3D, le binding direct entre objets dans le code XAML, les effets Pixel Shader (flous, ombrage, plus création d'effets custom par le développeur), application des thèmes plus pratique et theme cascading, effets supplémentaires pour les animations (custom effect programmable), une soixantaine de contrôles supportant les thèmes (grille de données et plein de choses !), le nouveau contrôle Data Form pour simplifier la gestion des fiches de saisie et la validation des données, communication entre plusieurs plugin SL sur une page directement sans passer par le serveur, mode de fonctionnement hors browser permettant à une appli SL d'être installée comme une appli desktop, possibilité de stockage local, de mode hors connexion, de contrôle automatiquement de nouvelles versions, etc, etc. J'en oublie plein...

Bref, un déferlement de nouveautés toutes plus importantes les unes que les autres, et bien entendu un Blend 3 en vue, mieux intégré à VS 2010, avec la nouvelle fonction de Sketchflow pour modéliser rapidement des maquettes d'appli par exemple, l'importation Photoshop/Illustrator...

Si 2008 a été un cru d'exception avec VS 2008, SQL Server 2008, Silverlight 2 et j'en passe, Microsoft nous réserve une année 2009 fantastique avec VS 2010, Blend 3, et Silverlight 3 !

Pour goûter tout de suite aux plaisirs de SL3, vous pouvez télécharger tout le nécessaire dès maintenant :

Bon Dev, et Stay Tuned !