Guillaume André

Apprentissage, étude et approfondissement des nouvelles technologies

16 Apr, 2009

Surface : Personnaliser le contrôle ScatterView

Posted by: Guillaume Andre In: Surface

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.

<s:ScatterView>
     <s:ScatterView.ItemContainerStyle>
          <Style TargetType=”{x:Type s:ScatterViewItem}”>
               <Setter Property=”Template”>
                    <Setter.Value>
                         <ControlTemplate TargetType=”{x:Type s:ScatterViewItem}”>
                              <ContentPresenter HorizontalAlignment=”{TemplateBinding HorizontalContentAlignment}” VerticalAlignment=”{TemplateBinding VerticalContentAlignment}” SnapsToDevicePixels=”{TemplateBinding SnapsToDevicePixels}”/>
                         </ControlTemplate>
                     </Setter.Value>
                 </Setter>
             </Style>
        </s:ScatterView.ItemContainerStyle>
     <s:ScatterViewItem />
     <s:ScatterViewItem />
     <s:ScatterViewItem />
</s:ScatterView>

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

<s:ScatterViewItem CanRotate=”False” />

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

<s:ScatterViewItem CanScale=”False” />

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();
}

14 Apr, 2009

Silverlight 3 : Cube 3D - Nuage de point

Posted by: Guillaume Andre In: Silverlight

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.

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 :

 ExternalInterface Internet Explorer error

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 :

ExternalInterface Internet Explorer error 

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 :

<object width=”400″ height=”300″>
     <param name=”allowscriptaccess” value=”always” />
     <param name=”movie” value=”mon.swf” />
     <embed src=”mon.swf” type=”application/x-shockwave-flash” allowscriptaccess=”always” width=”400″ height=”300″>
</embed>
</object>

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

07 Apr, 2009

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

Posted by: Guillaume Andre In: Flex| News

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 !

Yahoo Flex Skin

Flex Yahoo Skin

Yahoo - Voir un aperçu - Télécharger le thème (skin)

Undefined Skin One


Undefined - Voir un aperçuTélécharger le thème (skin)

Darkroom


Juan Sanchez - Voir un aperçu - Télécharger le thème (skin)

Brownie


Nahuel ForondaVoir un aperçu - Télécharger le thème (skin)

Summer Sky


Erick Ghaumez - Voir un aperçu - Télécharger le thème (skin)

Vista Remix


Jerry Don - Voir un aperçuTélécharger le thème (skin)

Aqua

 
Nahuel Foronda - Voir un aperçuTélécharger le thème (skin)

Kingnare

Jin XinVoir un aperçu - Télécharger le thème (skin)

Granite


Dan White - Voir un aperçuTélécharger le thème (skin)

iCandy

Phil ChungVoir un aperçu - Télécharger le thème (skin)