Bonjour à tous,
Microsoft et certains de ces partenaires organisent un nouvel après-midi du développement au menu : Design et nouvelles interfaces naturelles. C'est après les fêtes et c'est gratuit, si vous vous posez des questions ou êtes curieux à propos du développement d'interfaces tactiles, vous trouverez pas mal de réponse durant ces conférences.

9 Janvier 2012 – 14h00 – 18h00 - Campus Microsoft Issy Les Moulineaux - A partir de 18h00 : Bière Pizza Party !
Au programme de ce nouvel Après-midi du dev :

· Les nouvelles interactions digitales et naturelles
o Dick Lantim - Sensorit
· Gérer et développer une application tactile
o Nicolas Calvi et Johanna Rowe - Winvise
· Application Blend : Le pipeline de création et de réalisation. Revue de la conception et de la mise en production d'une application WPF depuis son maquettage (Sketchflow) jusqu'à sa réalisation (Blend)
o Michel Rousseau - Bewise
· Réaliser des présentations efficaces en utilisant la norme METRO
o David Catuhe - Microsoft

Pour vous inscrire c'est ici

Voici une première bonne nouvelle pour tous les concepteurs d'applications Surface, vous pouvez désormais télécharger le SDK Surface 2 en version finale.

L'autre bonne nouvelle : ce SDK remplace le précédent Windows Touch beta SDK, il n'est donc plus nécessaire d'installer deux plateformes différentes. Que vous soyez dans l’environnement Windows 7 ou Surface, la conception d'applications tactiles devient moins chronophage. Par exemple, bon nombres de contrôles sont fournis par défaut et il ne sera plus nécessaire de tous les re-développer. Du coup, un certain nombre d'ajustements a été réalisé pour supporter les différents types de hardware. Pour ma part, le premier test que je vais faire consiste à tester les performances sur les tablettes tactiles Windows 7. Le sdk beta était assez lourd et peu performant sur les tablettes tactiles, cela a-t-il évolué ?

Voici, dans les grandes lignes, les améliorations apportées :

• Possibilité de définir les spécificités du matériel hardware :
  • Modification de la résolution
  • Définition du nombre de points de contact simultanés
  • Activation de la détection d'objets tag
  • Activation de la détection de blob
  • Activation de la récupération de la bounding box de contact
  • Activation de la récupération de l'orientation
  • Définition de la surface de contact allouée.
• Les contrôles Surface bénéficie via l'héritage des contrôles WPF standard, des événements souris, stylus ou tactiles. Cela est très pratique lorsque l'on développe en environnement desktop Window 7.
• Simplification de l'arbre visuel et logique des contrôles pour faciliter le personnalisation.
• Les événements de type gesture, comme Tap, ne sont plus implémentés directement dans la classe SurfaceControl mais sont dorénavant attachés. Le concept d'évènement attaché existe depuis .Net 3 mais c'est une utilisation vraiment pertinente que nous propose Microsoft.
• La classe UserControl est enrichie par défaut avec les nouveaux événements et gestionnaires de capture tactiles, la classe SurfaceUserControl est donc supprimée.
• Le simulateur Surface a été énormément enrichi avec notament le support de l'orientation.

Il y aurait encore beaucoup à dire, le mieux est de tester directement en développant des applications...

J'ai récemment eu besoin d'un Datagrid avec lignes dépliables, c'est une demande classique de nos clients et des éditeurs comme Telerik propose cette fonctionnalité en standard. Toutefois les clients ne souhaite pas toujours dépenser 1000$ de licence. Du coup, je suis parti d'une ListBox que j'ai configuré pour qu'elle prenne la forme d'un Datagrid, déplier une ligne se révèle assez simple dans ce cas. Pourtant je suis tombé sur un bug du Panel Grid auquel je ne m'attendais pas vraiment. Chaque colonne de ma grille au sein de mon ItemTemplate possède une valeur relative, chacune d'entre elles possède un FrameworkElement dans le cas présent un TextBlock.

Toutefois lorsque le contenu d'un TextBlock (par exemple) au sein d'une colonne est trop important, cela décale chaque colonne, du coup on perd l'effet Datagrid. Ce comportement du Layout est illogique si l'on considère qu'en mode Stretch horizontal, chaque TextBlock ne devrait pas dépasser la largeur de la colonne dans laquelle il se trouve. Le résultat est affiché ci-dessous.

Pour remédier à cela, j'ai codé une propriété attachée qui force chaque élément au sein d'une colonne à respecter les limites de cette dernière. Le code est relativement simple :

class FrameworkElementExtension
{
 
    private static Dictionary<frameworkelement , GridLength> FrameworkElementToGridLength = new Dictionary</frameworkelement><frameworkelement , GridLength>();
 
    public static bool GetForceColumnBoundary(DependencyObject obj)
    {
        return (bool)obj.GetValue(ForceColumnBoundaryProperty);
    }
 
    public static void SetForceColumnBoundary(DependencyObject obj, bool value)
    {
 
            obj.SetValue(ForceColumnBoundaryProperty, value);
    }
 
    // Using a DependencyProperty as the backing store for EnsureColumnBoundary.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty ForceColumnBoundaryProperty =
        DependencyProperty.RegisterAttached("ForceColumnBoundary", typeof(bool), typeof(FrameworkElement), new PropertyMetadata(new PropertyChangedCallback(OnEnsureColumnBoundary)));
 
    private static void OnEnsureColumnBoundary(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
 
        bool b = System.Convert.ToBoolean(e.NewValue);
 
        FrameworkElement fe = d as FrameworkElement;
 
        if (fe == null)
        {
            return;
        }
 
        Grid g = fe.Parent as Grid;
 
        ColumnDefinition cd = g.ColumnDefinitions[Grid.GetColumn(fe)];
 
        if (g == null || cd == null || DesignerProperties.GetIsInDesignMode(fe))
        {
            return;
        }
 
        if (b)
        {
            if (!FrameworkElementToGridLength.ContainsKey(fe))
            {
                FrameworkElementToGridLength.Add(fe, cd.Width);
 
                g.SizeChanged -= new SizeChangedEventHandler(g_SizeChanged);
                g.SizeChanged += new SizeChangedEventHandler(g_SizeChanged);
            }
        }
        else
        {
            FrameworkElementToGridLength.Remove(fe);
 
            g.SizeChanged -= new SizeChangedEventHandler(g_SizeChanged);
        }
    }
 
    static void g_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        Grid g = sender as Grid;
 
        foreach (FrameworkElement fe in g.Children)
        {
            bool b = GetForceColumnBoundary(fe);
 
            if (b)
            {
                GridLength gl = FrameworkElementToGridLength[fe];
 
                ColumnDefinition cd = g.ColumnDefinitions[Grid.GetColumn(fe)];
 
                cd.Width = gl;
 
                fe.Width = gl.Value*g.ActualWidth;
            }
        }
    }
}
</frameworkelement>

Le résultat est immédiat et fonctionne qu'elle soit le type de colonne dans votre DataGrid.

Il suffit d'appliquer la propriété attachée à l'objet que vous souhaitez contraindre dans votre grille de cette manière :

Text="{Binding Client}" TextWrapping="Wrap" Grid.Column="1"  
		local:FrameworkElementExtension.ForceColumnBoundary="True"

Laurent Bugnion propose au téléchargement un kit facilitant la conception Model View View Model. Pour rappel, MVVM est une déclinaison du design pattern MVC. Vous pouvez en trouver une explication ici : http://msdn.microsoft.com/en-us/magazine/dd419663.aspx

Une autre librairie MVVM performante est disponible à cette adresse pour les projets WPF : http://wpf.codeplex.com/Wiki/View.aspx?title=WPF%20Model-View-ViewModel%20Toolkit.

Laurent propose quant à lui un mini framework qui s'accorde plus facilement aux développements s'appuyant sur Expression Blend tant pour les projets Silverlight que pour les projets WPF. De ce point de vue, nous manquions cruellement de framework car les solutions existantes sont pour la majeure partie orientée vers des développements WPF et éloignés des contraintes liées à l'utilisation de Blend en production...

La version release candidate de windows seven est accessible aux abonnés MSDN depuis ce matin. J'avais assez envie de changer mon bon vieux Windows Xp, j'ai donc installé 7 sur deux postes dont un mac book pour le tester. Première bonne chose, je n'ai aucun problème de compatibilité, tout fonctionne directement sans heurts. Deuxième bonne nouvelle, sur VMWare, sur un simple macbook c'est rapide et efficace pourtant j'utilise de nombreux logiciels en même temps, Expression Blend, Visual Studio, Office, Photoshop, Flash, etc... On ressent l'effort de Microsoft pour apporter un maximum de performances et de stabilité au système. Seven s'annonce prometteur avec de nombreuses améliorations sur l'ergonomie notamment sans toutefois mimer MacOs, son grand concurrent. La grande nouveauté est l'intégration d'une machine virtuelle XP directement au sein de 7 ce qui permettra de faire tourner n'importe quel programme compatible avec XP. Il faudra tout de même attendre la version finale pour avoir une idée de ce système. La version RC quant à elle devrait être accessible dans le courant du mois de mai pour le grand public...

En tant que développeur ou même intégrateur vous avez sans déjà entendu parler de modèle événementiel. Le modèle événementiel d'un langage logique comme par exemple C# est crucial car c'est lui qui permet les interactions utilisateur.

Le modèle événementiel repose sur deux principes importants :

• Le premier est le principe de diffusion d’événements, par exemple lorsque vous cliquez sur un bouton celui-ci diffuse un évènement Click

• Le second principe est celui d’écouteur. Il est bien beau de pouvoir diffuser des évènements, cependant il faut être à l’écoute de ceux-ci pour déclencher une action adéquate. L’objet qui réagit aux événements diffusés est appelé écouteur. En générale, l’écouteur est une méthode comme par exemple la méthode Page_Loaded.

On retrouve ces deux principes dans la vie réelle, voici un exemple :

• Vous décidez de prendre un abonnement à un site Web d’annonces immobilières, le fait de vous abonner fait de vous un écouteur. En effet, à chaque nouvelle annonce, vous recevrez un email d’information concernant le bien immobilier. Vous écoutez le site Web qui agit en tant que diffuseur de l’évènement « nouvelle annonce mise en ligne ». A chaque nouvelle annonce reçue vous décidez ou non de visiter le bien. Ce qui correspond bien à une action en retour.

• Importante mais souvent oubliée cette phase est pourtant très importante : lorsque vous avez trouvé le bien le plus approprié, vous décidez d’arrêter la souscription à ce site, dès lors vous ne recevrez plus d’email. Autrement dit vous supprimez l’écouteur

C’est exactement ce qui arrive lorsque vous développez pour Silverlight. C# voici les deux mêmes méthodes écrites différemment, vous remarquerez que l’écriture est nettement plus appropriée et claire, de plus vous aurez une aide à la complétion via l’IntelliSense :

• souscription :

//Diffuseur.Événement += écouteur ;
 
monRectangle.MouseLeftButtonDown += monRectangle_MouseLeftButtonDown;

• désinscription :

//Diffuseur.Événement -= écouteur ;
 
monRectangle.MouseLeftButtonDown -= monRectangle_MouseLeftButtonDown;

Il est important de connaitre au moins ces bases car nous allons aborder un point assez spécifique aux langages de haut niveaux. En fait lorsqu'un objet graphique diffuse un événement ce n'est pas forcément l'objet auquel on a souscrit un écouteur. Je m'explique : lorsqu'on crée une série de menus au sein d'une boucle, on ne souhaite peut-être pas à chaque fois ajouter l'écoute du click sur chacun de ces menus. Pourquoi ?

1 - parce que cela est assez gourmant en performance et en mémoire
2 - parce que pour chaque menu il faudra supprimer l'écoute si besoin

Pour éviter de mettre un écouteur sur chaque menu, il suffit simplement de mettre un écouteur sur le conteneur de ceux-ci. En fait lorsque vous souscrivez un écouteur à un conteneur d'objet lorsque l'événement est diffusé vous avez la possibilité de réupérer l'objet source diffusant l'événement au sein du conteneur. je vous ai fait un joli schéma tout en haut.

Je vous donne également un exemple d'utilisation ici :

private void CreateMenu()
{
      var i = 0;
      foreach (string menu in myMenus)
      {
            Debug.WriteLine(menu);
            var monMenu = new Menu();
            //monButton.Content = menu;
            monMenu.Name = menu + "_btn";
            monMenu.Titre = menu;
            monMenu.num = i;
            monMenu.Height = 22;
            monMenu.Margin = new Thickness(0, 10, 0, 0);
            i++;
            myStack.Children.Add(monMenu);
 
            //ici on évite d'écrire la chose en dessous ::
            //monMenu.MouseLeftButtonUp += new MouseButtonEventHandler(monMenu_MouseLeftButtonUp);
 
      }
 
      myStack.MouseLeftButtonUp += new MouseButtonEventHandler(monMenu_MouseLeftButtonUp);
}
 
void monMenu_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
      //en premier je teste si je clique bien sur un objet de type Menu
      Debug.WriteLine(e.OriginalSource);
 
      //e.OriginalSource renvoie bien l'objet source qui diffuse l'événement
      Debug.WriteLine("le nom :: " + (e.OriginalSource as Menu).Name);
 
      int actualMenu = (e.OriginalSource as Menu).num;
      rubTo.ContinueTo((double)(actualMenu * -215));
      rubTween.Start();
 
}

Il est à noter qu'il est possible d'arrêter la propagation événementielle dans certains cas cela est vraiment pratique car la propriété MouseChildren n'existe pas à priori en C#. Pour arrêter la propagation événementiel il suffira simplement de faire :

void monMenu_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
      //là j'arrête la propagation
      e.Handled = true;
}

Le project Moonlight 1 est disponible depuis le 20 janvier au téléchargement. Pour rappel Moonlight est un portage du lecteur Silverlight sur des systèmes non supportés nativement. Ce projet repose sur le framework Mono qui est un portage de .Net sur plusieurs distributions du système Linux dont MacOS X. Ce projet a trois objectifs :

• Donner un environnement de développement Silverlight sur d'autres plate-forme que Windows
• Porter le lecteur Silverlight sur Linux
• permettre la création d'applications Desktop Silverlight sur linux un peu comme Air.

Il est clair que pour un lecteur multi-système comme Silverlight, proposer un environnement de développement autre que Windows pourrait être judicieux. Ainsi l'application du Times ' Reader ressemble comme deux goutte d'eau à une application traditionnelle. Le moteur de texte de Silverlight étant vraiment très performant, celle-ci a été réalisable simplement et l'affichage de pavés de texte animés est fluide et vraiment agréable.vous pouvez la télécharger ici.

Il devrait subsister toujours cette période d'un an entre une version de Silverlight et une version de moonlight, voici la roadMap actuelle pour Moonlight 2 :

J'ai dernièrement eu besoin de récupérer toutes les méthodes static d'une classe afin d'afficher le résultat visuel de celles-ci. En fait l'idée était d'afficher la courbe correspondante à chaque équation de mouvement contenues dans la classe TweenedEquations. Pour cela il suffit dans le framework Silverlight d'utiliser l'Api de Reflection contenue dans le package System.Reflection. Je mets ici en ligne la portion du code que j'ai utilisé afin d'automatiser l'instanciation automatisée d'un UserControl (composant) personnalisé.

Voici tout d'abord le code logique du contrôle personnalisé :

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Tweened;
using System.Diagnostics;
 
namespace TweenEquationSlideShow
{
	public partial class TweenedEquationThumb : UserControl
	{
        public Func TweenEquation;
        double EndValue;
        double StartValue;
        double BaseValue;
        Tween showTween = new Tween();
 
        public TweenedEquationThumb(Func tweenEquation, double endValue, double startValue, double baseValue)
        {
                // Required to initialize variables
                InitializeComponent();
                TweenEquation = tweenEquation;
                StartValue = startValue;
                EndValue = endValue;
                BaseValue = baseValue;
                TweenDoubleDescription tdc = new TweenDoubleDescription(animPath,         TweenableProperties.Left, TweenEquation, 2, 180, 20);
                 tdc.Definition = 200;
                showTween.AddSequences(tdc);
                showTween.TweenCompleted += new Tween.StoryboardComplete(showTween_TweenCompleted);
                Loaded += new RoutedEventHandler(TweenedEquationThumb_Loaded);
 
        }
 
        void showTween_TweenCompleted(Tween sender, object freeReference)
        {
            sender.Stop();
        }
 
        void TweenedEquationThumb_Loaded(object sender, RoutedEventArgs e)
        {
            MouseLeftButtonDown += new MouseButtonEventHandler(TweenedEquationThumb_MouseLeftButtonDown);
            DrawCurve();
        }
 
        void TweenedEquationThumb_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            showTween.Start();
        }
 
        private void DrawCurve()
        {
 
            double ecart = Math.Round((double)1/200, 3);
            Debug.WriteLine("ecart :: "+ecart);
 
            for (int i = 0; i < 200; i++)
            {
                double currentTime = ecart * i;
                double XTimeValue = currentTime * 180;
                double YValue = BaseValue + (double)Math.Round(this.TweenEquation(currentTime, StartValue, EndValue, 1) * 1000) / 1000;
 
                Ellipse bulle = new Ellipse();
                bulle.Width = 1.2;
                bulle.Height = 1.2;
                bulle.Fill = new SolidColorBrush(Color.FromArgb(0xff, 0xff, 0xff, 0xff) );
                Curve.Children.Add(bulle);
                Canvas.SetLeft(bulle, 20+XTimeValue);
                Canvas.SetTop(bulle, YValue);
 
                EquationName.Text = TweenEquation.Method.Name;
 
            }
        }
     }
}

Voici maintenant le code logique du côté de la Page.xaml pour instancier ce composant dynamiquement.

namespace TweenEquationSlideShow
{
	public partial class Page : UserControl
	{
		public Page()
		{
			// Required to initialize variables
			InitializeComponent();
			Loaded += new RoutedEventHandler(Page_Loaded);
		}
 
		void Page_Loaded(object sender, RoutedEventArgs e)
		{
			//dans un premier temps je récupère la classe TweenedEquations en tant que Type
			Type myTypeEq = typeof(Tweened.TweenedEquations);
 
			var b = true;
			//dans un second temps, je parcours les méthodes de ce type
			foreach (MemberInfo memberInfo in myTypeEq.GetMethods())
			{
				//si le nom de celles-ci commence par Ease 
				if (memberInfo.Name.IndexOf("Ease", 0) != -1)
				{
					//alors je récupère la méthode sous forme d'objet MethodInfo
					MethodInfo myMethod = myTypeEq.GetMethod(memberInfo.Name);
					//je crée une nouvelle délégation à partir de cet objet
					var myD = Delegate.CreateDelegate(typeof (Func<double ,double,double,double,double>),myMethod);
					//cela revient à récupérer la référence de cette fonction, pas à l'appeler
					//j'instancie le UserControl personnalisé en lui passant en premier paramêtre l'équation récupérée dynamiquement
                    			TweenedEquationThumb tetb = new TweenedEquationThumb((Func</double><double ,double,double,double,double>)myD, -55, 0, 65);
                    			//par la suite vous pourriez même 
                    			if (b) CurveIn.Children.Add(tetb); 
                    			else CurveOut.Children.Add(tetb); 
                    			b = !b
                		}
            		}
        	}
	}
}</double>

Salut à tous,

il n'y a pas si longtemps j'écrivais un article sur comment embarquer des polices au sein de WPF. A l'époque(1an en arrière), cela était très fastidieux car l'intégrateur devait passer par Visual Studio 2005 pour effectuer cette tâche en générale réservé aux graphistes. Aujourd'hui tout cela est oublié grâce au FontManager : un nouvel onglet directement accessible depuis l'interface de Blend 2. Il vous suffira simplement de sélectionner la ou les polices puis de cocher ou d'entrer les glyphes que vous souhaiter embarquer. Voici le petit screenShot de cet outil :

C'est quand même une très bonne nouvelle, franchement WPF est une bonne technologie et prend une bonne tournure. Je suis également Flasheur et ça serait bien sympa si la version 10 de Flash (cs4) avait ce genre de petit panneau au lieu de gérer ça dans des champs textes différents, vous pensez pas ? On pourrait me répondre que la bibliothèque de Flash le gère... Oui mais non car tous les glyphes de la polices sont embarqués et du coup le poids du swf est énorme... Quand à Silverlight peut-être Blend intègrera ce panneau pour la version 3 on sait jamais...