Guillaume André

Silverlight 4 Beta, les nouvelles fonctionnalités !

admin — Thu, 19 Nov 2009 08:11:55 +0000

Lors de la PDC qui se tient en ce moment même à Los Angeles Microsoft vient d’annoncer la sortie de Silverlight 4 Beta. Les équipes de Silverlight surprennent une fois de plus tend le rapprochement entre les versions est proche, cela prouve encore une fois la volonté de Microsoft d’investir dans les RIA/RDA.

Voici une liste non exhaustive des nouvelles fonctionnalités apportées par Silverlight 4 Beta.

Le retour du designer XAML pour Silverlight au sein de VS2010
API d’impression pour imprimer des écrans Silverlight
Gestion du click droit et donc du menu contextuel
Accès aux Webcams et Micros
Gestion du scroll de la souris (MouseWheel)
Contrôle de saisie de texte riche (RichTextArea)
Arrivée de l’ICommand sur ButtonBase et l’Hyperlink
Gestionnaire de copier / coller (Clipboard)
WebBrowserControl permet de load du HTML et donc avec un peu d’imagination avoir du flash au sein de Silverlight
Permmettre à Silverlight Out Of Browser d’avoir des droits plus élevés qu’à l’habitude
Permet d’accéder à des fichiers en local, dépendant directement de la fonctionnalité ci-dessus
Intérop COM : Gestion de fichiers Excel par exemple
Barre de notification pour Silverlight Out of Browser (Toast) à la AIR
TextTrimming ENFIN du texte lisible dans Silverlight
Gestion du text RTL (droite à gauche)
ViewBox controle déjà connu des utilisateurs des Toolkits
Gestion du H.264 PlayReady : DRM
DependencyObject Binding
Support de Google Chrome
Etc.

Silverlight fait un pas de plus vers la technologie WPF et tend à rompre la barrière RIA <=> RDA.

Pour débuter avec Silverlight 4 rendez-vous à cette adresse :
http://silverlight.net/getstarted/silverlight-4-beta/ vous y retrouverez les outils, mais aussi des vidéos d’accompagnement.

A venir bien entendu, quelques posts sur ces nouvelles fonctionnalités ! Stay tuned.

WPF, Optimisez les performances de vos applications

Guillaume Andre — Sun, 25 Oct 2009 21:19:27 +0000

Je ne vous apprend rien, l’optimisation des performances est une phase importante durant le développement d’une application WPF tant au niveau du code métier que de l’interface.

J’ai eu la chance, ou la malchance, de développer un projet WPF sur un device comportant une carte graphique très limitée (ou avec driver non mis à jour), j’ai nommée la Ultra Mobile 500 et cela m’a permis de me rappeler quelques notions de bases.
Voici une petite liste de conseils qu’il est bon d’appliquer et avec lesquels j’ai obtenu de très bon résultats en terme de performance et de réponse d’interface.

Le Canvas est le conteneur le moins gourmand
Eviter les stretchs videos / images
Les effets visuels proposés dans Blend sont extremement gourmands System.Windows.Media.Effects BlurEffect et DropShadowEffect il existe d’autres méthodes pour ce type d’effet.
Eviter les images trop grandes en terme de pixel
Ne pas appliquer de dégradés sur des zones trop importantes ou dynamiques
Eviter d’animer des panels avec une multitude de contrôles
Faire attention aux DataTemplate même si le graphiste est censé pouvoir appliqué tous les effets qu’il souhaite réduire le nombre de contrôle et dégradés est primordial.
Utiliser les DynamicResources seulement quand c’est nécessaire. Pour une utilisation classique des styles se rapprochant du mode d’utilisation des CSS utiliser uniquement les StaticResources.
Ne pas utiliser la balise Run
L’animation d’un Canvas.Left est plus rapide qu’un TranslateTransform de l’élément Canvas.

Cette liste peut paraître à une liste de bon sens, néanmoins il peut être bon de le rappeler. En appliquant ces méthodes de développement d’interface l’application que j’ai développée est passée d’un mode “non-utilisable” (avec un framerate de 1 image par/sec) à un mode tout à fait respectable (environ 10 image par/sec).
Pour plus de lecture sur l’optimisation WPF rien de tel que la MSDN

WygDay 2009

Guillaume Andre — Fri, 15 May 2009 07:08:50 +0000

Cette année j’aurais l’honneur d’animer deux présentations orientées RIA lors du WygDay 2009 qui se déroulera à Lille (EuraTechnologies) le 9 Juin.

La première présenation sera dédiée à Expression et Silverlight. Tout comme l’année dernière je l’animerais au côté de Yannick Lejeune. Cette année nous orienterons la présentation autour des version 3 d’Expression et Silverlight, le tout avec un tas de petite démo pratiques et réutilisables.
La seconde session quant à elle est dédiée exclusivement à la table Surface de Microsoft. J’aurais le plaisir de l’animer au côté de l’incontournable Mitsu Furuta de chez Microsoft France. Si vous vous posez des questions sur la table Surface, que vous soyez décideur, développeur ou designer c’est le moment de venir les poser !

Vous êtes intéressé par la RIA ? Vous vous posez des questions sur le devenir des technologies Microsoft dans ce domaine ? N’hésitez pas à venir participer à cette nouvelle édition du WygDay 2009 et ce, gratuitement !

Silverlight 3 : Spiral Flip Control 3D

Guillaume Andre — Tue, 21 Apr 2009 07:05:05 +0000

Au menu d’aujourd’hui un control Spiral Flip 3D !

Comme je vous avez pu le lire dans mes posts précédents dédiées aux animations et à la 3D il est à présent possible avec Silverlight 3 de réaliser quelques scénarios très simple en 3D. Voici un aperçu en vidéo.

View on Vimeo.

Quelques portions de code C# clés :

Storyboard.SetTargetProperty(sbNext, new PropertyPath("(UIElement.Projection).(PlaneProjection.RotationX)"));

PlaneProjection pj = new PlaneProjection();

pj.CenterOfRotationX = 0.5;

monImage.Projection = pj;

((FindName("img" + currentPhoto) as Image).Resources["sbPrev" + currentPhoto] as Storyboard).Begin();

Je compte packager ce contrôle dans les prochains jours, stay tuned !

Client Twitter : TweetToast v1.0 release !

Guillaume Andre — Sun, 19 Apr 2009 16:37:04 +0000

TweetToast est un client AIR dédié à Twitter que je viens de mettre en ligne. Il permet de mettre à jour son statut Twitter très simplement. C’est tout, pas de superflux. N’hésitez pas à consulter la page officielle et d’installer/tester cette application :

http://www.codeui.com/tweettoast/

Feedback bienvenus !

Surface : Personnaliser le contrôle ScatterView

Guillaume Andre — Thu, 16 Apr 2009 16:43:16 +0000

Le contrôle Scatterview de Surface permet de manipuler des éléments WPF ou Surface dans une zone qui lui est propre. Ainsi chaque enfant d’un Scatterview est manipulable et étirable à souhait pour autant que le développeur ai décidé de vous laisser cette possibilité. Il s’agit ni plus ni moins que du contrôle phare de la plateforme Surface.

En pratique, le contrôle Scatterview Surface propose comme tout contrôle WPF ou Surface un style par défaut. Nous allons voir comment le mettre à nu pour pouvoir profiter de la transparence du fond (background) des enfants : les ScatterViewItem.

View on Vimeo.

En redéfinissant le template d’un ScatterViewItem cela supprime tous les styles par défaut. Voyons comment appliquer cela aux enfants du ScatterView via XAML.

A présent voyons comment interdire la rotation d’un ScatterViewItem

Il en est de même pour la fonctionnalité de “redimensionnement”

Silverlight 3 : Création d’animations easing avec code C#

Guillaume Andre — Wed, 15 Apr 2009 12:42:22 +0000

En complément du post Silverlight 3 animations easing voici comment réaliser des animations Silverlight 3 entièrement côté code behind.

Le code ci-dessous permet d’animer la propriété “Canvas.Left” d’une Ellipse. Le but est uniquement d’apprendre à appliquer un effet de easing à une animation avec C#.

Création du Storyboard

Storyboard sb = new Storyboard();

Storyboard.SetTargetName(sb, "monEllipse");

Storyboard.SetTargetProperty(sb, new PropertyPath("(Canvas.Left)"));

Un Storyboard peut contenir une ou plusieurs animations.

Création d’une ou plusieurs animations

DoubleAnimation da = new DoubleAnimation();

da.Duration = new TimeSpan(0, 0, 2); // TimeSpan.FromSeconds()...

da.From = 0.0; // Facultatif, par défaut la valeur courante sera retenue

da.To = 180.0;

Application de l’effet Easing souhaité

ElasticEase ee = new ElasticEase(); // création de l'effet easing, ici Elastic

ee.EasingMode = EasingMode.EaseOut; // Choix du mode de easing : EaseIn, EaseInOut, ou EaseOut

da.EasingFunction = ee; // association de l'effet de easing à l'animation

Association des animations au Storyboard et ajout du storyboard aux ressources

sb.Children.Add(da);

LayoutRoot.Resources.Add("monStoryboard", sb);

Lancer l’animation, plus exactement, le Storyboard

(LayoutRoot.Resources["monStoryboard"] as Storyboard).Begin();

Animations Easing en resumé

void MainPage_Loaded(object sender, RoutedEventArgs e)

{

lireAnimation.Click += new RoutedEventHandler(lireAnimation_Click);

Storyboard sb = new Storyboard();

Storyboard.SetTargetName(sb, "monEllipse");

Storyboard.SetTargetProperty(sb, new PropertyPath("(Canvas.Left)"));

DoubleAnimation da = new DoubleAnimation();

da.Duration = new TimeSpan(0, 0, 2);

da.From = 0.0;

da.To = 180.0;

ElasticEase ee = new ElasticEase();

ee.EasingMode = EasingMode.EaseOut;

da.EasingFunction = ee;

sb.Children.Add(da);

LayoutRoot.Resources.Add("monStoryboard", sb);

}

void lireAnimation_Click(object sender, RoutedEventArgs e)

{

(LayoutRoot.Resources["monStoryboard"] as Storyboard).Begin();

}

Silverlight 3 : Cube 3D - Nuage de point

Guillaume Andre — Tue, 14 Apr 2009 19:38:21 +0000

Silverlight 3 incorpore la gestion de plan 3D (PlaneProjection) au sein de son plugin et ce nativement. Voici un petit exemple “coding4fun” d’implémentation de plan 3D. Le but de l’exercice est de créer un simili Cube 3D avec un nuage de point puis d’animer le cube en question.

Cube Silverlight en 3D :

View on Vimeo.

Côté code :

private int[] tabX = new int[] { 40, 120, 120, 40, 40, 120, 120, 40 };

private int[] tabY = new int[] { 40, 40, 120, 120, 40, 40, 120, 120 };

private int[] tabZ = new int[] { -40, -40, -40, -40, 40, 40, 40, 40 };

for(var i = 0 ; i &lt; 8 ; i++)

{

PlaneProjection pj = new PlaneProjection();

pj.LocalOffsetX = tabX[i];

pj.LocalOffsetY = tabY[i];

pj.LocalOffsetZ = tabZ[i];

pj.CenterOfRotationX = 0;

pj.CenterOfRotationY = 0;

pj.CenterOfRotationZ = 0;

el.Projection = pj;

Ellipse el = new Ellipse();

el.Width = 10;

el.Height = 10;

el.Fill = new SolidColorBrush(Colors.Cyan);

cube.Children.Add(el);

}

L’idée est donc d’avoir une Matrice de point et de créer chaque point du cube 3D à la volée. Pour animer le cube il faudra animer chaque point. Cela est bien entendu du à la gestion de la “3D” dans Silverlight et des projections de plans.

Flex & Flash : ExternalInterface et erreur javascript avec Internet Explorer

Guillaume Andre — Mon, 13 Apr 2009 10:20:22 +0000

Respectueux des standards j’ai toujours opté pour intégrer mes applications Flash/Flex dans les règles avec une balise OBJECT digne de ce nom en évitant les librairies externes Javascript (bien que très fonctionnelles) et balises embed. Néanmoins voici un petit retour d’expérience pour les intégrateurs.

Lors du déploiement d’une application Flex j’ai obtenu l’erreur Javascript suivante sous Internet Explorer uniquement :

Ligne : 1
Caractère : 102
Erreur : ‘null’ a la valeur Null ou n’est pas un objet.
Code : 0

Le debuggeur incorporé dans Internet Explorer 8 m’a très vite fait comprendre qu’il s’agissait de l’ExternalInterface API d’ActionScript :

3 possibilités pour résoudre cette problématique :

Utiliser une librairie Javascript type swfobject ;
Utiliser le JavaScript par défaut généré par les outils Adobe ;
Utiliser la balise OBJECT suivante, bien que non valide xHTML strict :

Ce problème a vu le jour avec l’arrivée de Flash player 10.

Flex & AIR : Styles, skins & thèmes à télécharger

Guillaume Andre — Tue, 07 Apr 2009 20:39:03 +0000

Après quelques recherches voici mon TOP 10 des Skins / Thèmes Flex que j’ai pu trouvé sur la toile. Orientées design et pro toutes ces skins graphiques sont téléchargeables gratuitement et installables dans vos propres applications AIR/Flex. N’hésitez pas à les télécharger pour les tester. Certaines sont d’ailleurs éditables, je pense notamment aux deux dernières qui pourront servir de bonne base de travail pour créer une Skin totalement personnalisée. Merci aux auteurs !

Guillaume André

Silverlight 4 Beta, les nouvelles fonctionnalités !

WPF, Optimisez les performances de vos applications

WygDay 2009

Silverlight 3 : Spiral Flip Control 3D

Au menu d’aujourd’hui un control Spiral Flip 3D !

Quelques portions de code C# clés :

Client Twitter : TweetToast v1.0 release !

Surface : Personnaliser le contrôle ScatterView

Silverlight 3 : Création d’animations easing avec code C#

Création du Storyboard

Création d’une ou plusieurs animations

Application de l’effet Easing souhaité

Association des animations au Storyboard et ajout du storyboard aux ressources

Lancer l’animation, plus exactement, le Storyboard

Animations Easing en resumé

Silverlight 3 : Cube 3D - Nuage de point

Cube Silverlight en 3D :

Côté code :

Flex & Flash : ExternalInterface et erreur javascript avec Internet Explorer

Flex & AIR : Styles, skins & thèmes à télécharger

Yahoo Flex Skin

Undefined Skin One

Darkroom

Brownie

Summer Sky

Vista Remix

Aqua

Kingnare

Granite

iCandy