Dot.Blog

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

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 !

Les coachs Microsoft pour passer au concret plus vite !

Apprendre une nouvelle techno ce n'est pas toujours facile, savoir par où commencer, où trouver des ressources devient vite un jeu de piste.

Hier je vous donnais déjà une liste de ressources indispensables et pas toujours bien connues mais savez-vous que Microsoft a mis aussi en place des "coachs", et en frenchy en plus !

Des "coachs" ce sont des séries de petites formations très orientées pratique pour débuter rapidement avec une techno. Il en existe plusieurs :

De quoi se faire une idée rapide et mettre les mains dans le moteur !

Amusez-vous bien (en vous formant)

 A noter aussi les forums développement de MSDN dont certains sont directement connectés aux coachs (comme celui sur Silverlight)

Et Stay Tuned !

Les propriétés de dépendance et les propriétés jointes sous WPF (article à télécharger)

En voilà un beau sujet ! Vous allez me dire qui irait investir deux jours à taper 25 pages sur ce sujet, il faut être totalement givré ! Et bien vous en avez un devant vous (par blog interposé) ... donc pas de remarques désobligeantes sur ma santé mentale, hein !

Certes les propriétés de dépendance et les propriétés jointes de WPF et Silverlight ne semblent pas être un sujet aussi exitant que quelques astuces LINQ ou la meilleure façon d'intégrer de la 3D dans Silverlight 3 (miam!)... Je vous le concède. Mais en revanche c'est un sujet capital car derrière ces propriétés bien particulières se cache l'un des piliers de la puissance de WPF, un mécanisme qui autorise la gestion des styles, des animations, du Data Binding et de bien d'autres choses sans lesquelles WPF ne serait pas ce qu'il est.

Savoir ce qu'est une propriété de dépendance ou une propriété jointe, savoir en déclarer et savoir les utiliser représente une base impossible à zapper.

Alors, pour tout savoir sur le sujet, téléchargez mon dernier article "Propriétés de dépendance et propriétés jointes (WPF/Silverlight)" !

L'article est fourni en PDF avec les sources du projet exemple (utilisable sous VS 2008 ou Blend 2).

NB: Pour mieux comprendre cet article si vous n'êtes pas encore un expert de WPF, je vous conseille la lecture de mon précédent article "10 bonnes raisons de préférer WPF".

Bonne lecture,

... Et Stay Tuned !

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 !

Silverlight : quelques liens intéressants

Voici rapidement quelques ressources autour de Silverlight qui pourront vous intéresser :

Bonne Lecture !

 

Silverlight, Blend et Design, 11 vidéos et un manuel

Microsoft vient de mettre en ligne une nouvelle série de 11 vidéos et un guide pour présenter Silverlight et le processus de création d'application, notamment au travers de Expression Blend et Expression Design.

Orienté designer ce nouvel ensemble est toutefois utilisable par tout le monde et consiste en une mini formation assez complète permettant de mieux comprendre Silverlight, les outils qui tournent autour, et la façon dont le processus d'élaboration d'une application se déroule.

Les vidéos couvrent les domaines suivants :

  • What is Silverlight? An Overview (this video)
  • Understanding and Working with XAML Code in Expression Blend
  • Creating Vector-Based Artwork with Expression Design
  • Applying Color and Effects to Projects using Expression Design
  • Organizing Your Project using Layout Containers in Expression Blend
  • Editing the Appearance of Your Project Items using Expression Blend
  • Exploring the Objects and Timeline Task Pane in Expression Blend
  • Customizing Silverlight Video Players using Expression Blend
  • Optimizing Video for Silverlight Playback using Expression Encoder
  • Adding Interactivity to Silverlight Projects using Expression Blend
  • Publishing Silverlight Projects to the Web using Expression Blend

 Ces videos sont complétées par un starter kit (document Word).

Un bon moyen pour se faire rapidemment une idée de Silverlight. Le tout est en anglais, comme d'habitude, sorry.

Bonnes vidéos !

 

Un exemple d'application Silverlight "bien de chez nous" !

Le nombre des applications Silverlight augmente de jour en jour mais il est vrai que les exemples de réalisation en français ne sont pas encore légion. J'ai donc décidé de mettre en ligne une petite application de démonstration !

Comme c'est avec les vieux pots, parait-il, qu'on fait les meilleurs soupes, je pense que celle-ci va être délicieuse ! En effet, je suis reparti de l'idée d'un ancien exemple réalisé à cette époque lointaine sous Delphi Win32, un Web Service des codes postaux français qui avait eu un très grand succès (Microsoft l'avait d'ailleurs utilisé pour des Techdays afin de montrer la compatibilité entre un Web Service Delphi et le framework .NET qui venait tout juste d'émerger...).

Il était donc finalement naturel de reprendre cette bonne idée mais en la modernisant radicalement. C'est ainsi que j'ai le plaisir de vous annoncer que la démonstration "Les Codes Postaux Français" est ligne aujourd'hui. Bien entendu il ne s'agit plus seulement d'un Web Service (aujourd'hui réalisé avec WCF), mais aussi d'un frontal réalisé avec Silverlight 2.

Pour jouer avec l'application suivant ce lien : les Codes Postaux Français sous Silverlight.

Vous pouvez aussi consulter ce petit PDF de présentation (dont le texte se retrouve dans la about box de l'application): Codes Postaux Français.pdf (482,07 kb)

Amusez-vous bien !

[EDIT] Le titre de ce billet doit s'entendre dans le sens "enfin une démo en français sur un thème français" ce qui était rarissime au moment de l'écriture de celui-ci, et certainement pas comme une quelconque exaltation de sentiments nationalistes ou franchouillards. Personne ne me l'a dit, mais c'est moi qui, en ce jour de janvier 2010, en relisant le post hors de son contexte me fait la réflexion à moi-même... Citoyen du monde plus que français, ayant en horreur le nationalisme et les débats sur l'identité nationale, qui ne signifie rien en tant que terrien, je tenais à apporter cette petite précision pour lever toute forme d'ambiguité ! [/EDIT]

10 bonnes raisons de choisir WPF (nouvel article à télécharger)

WPF cet inconnu... Alors que cette technologie est disponible depuis deux ans elle semble peiner à s'imposer parmi les développeurs. Je me suis demandé pourquoi et je crois que WPF paye un peu son image du "tout graphique hyper looké de la mort", des démos où l'on voit des vidéos danser en l'air sous forme de carrousel, de pages qui se plient comme un livre pour passer d'une fiche à l'autre et autres débauches d'effets spéciaux.

En réalité le développeur "moyen" ne s'y retrouve pas. L'image renvoyée ressemble plus à celle du jeu vidéo qu'à de l'informatique de gestion qui fait le gros des applications "de tous les jours".

Je ne blâme pas ceux qui, par trop enthousiastes, ont pêché par excès en créant et en montrant de telles démonstrations. Après tout lorsqu'une nouvelle technologie vient de sortir on a par force envie de faire voir ce qu'elle sait faire de mieux, c'est naturel. Non, je pense plutôt que c'est sur le plan psychologique que l'erreur a été commise, la même que pour Vista d'ailleurs. Un décalage trop fort, trop rapide, avec une devanture trop graphique qui a fait oublier que derrière tout cela il y a une vraie révolution technique, de vraies avancées.

J'ai donc eu envie d'écrire un article qui montre les grands points forts de WPF et surtout pourquoi cette technologie est de loin supérieure à toutes les autres, dont les Windows Forms encore trop utilisées alors qu'elles se fondent sur des mécanismes interactifs dépassés déjà en place du temps de Delphi 1 Win32 ! Il y a presque 15 ans...

Choisir 10 bonnes raisons d'utiliser WPF a quelque chose d'arbitaire. Mais ce n'est pas grave, cet article se destine à tous ceux qui ne savent pas encore que WPF est parfaitement taillé pour faire des applications "normales", à tous ceux qui pensent que ce n'est "pas fait pour eux" ou pour le style de programme qu'ils écrivent. Il s'adresse aussi à tous ceux qui ont envie de savoir quels sont les points forts de WPF, les nouveaux mécanismes et la nouvelle façon de penser les interfaces.

En un peu plus de 40 pages, ce qui est beaucoup pour un simple article, inutile d'attendre un tour d'horizon complet et ultra technique de WPF, le moindre livre sur la question compte 20 fois plus de pages... Mais si vous voulez rapidement faire un point sérieux sur WPF qui ne soit pas qu'un simple survol, si vous voulez voir du code mais trop, alors cet article est fait pour vous.

Pour le téléchargement (PDF + code source), suivez le lien : 10 bonnes raisons de choisir WPF.

A lire aussi un billet plus récent "9 raisons de plus de choisir WPF"

A voir : Une application exemple sous Silverlight 2.0 

Bonne lecture

Et Stay Tuned !

Quels outils et quelle chaîne graphique pour WPF et Silverlight ?

WPF, Silverlight, 2D, 3D, le monde des nouvelles interfaces desktop et Web réclame désormais de fortes compétences en infographie. S'il semble évident que la présence d'un graphiste soit devenue indispensable en phase de conception des interfaces, savoir quels outils utiliser est en soi déjà un parcours du combattant !

Pour e-naxos je forme une infographiste afin d'offrir très prochainement un service de design pour les applications WPF et Silverlight. Avant de former, il faut savoir de quoi on parle, c'est toute la difficulté pour un bon formateur : avoir la connaissance "livresque" mais surtout la connaissance pratique.

Cela fait donc de long mois que je m'entraîne. je n'ai pas forcément beaucoup évolué niveau dessin, je ne serai jamais Dali ni Da Vinci, je m'y suis fait depuis mes premiers essais en maternelle, et même si les courbes de bézier et autres splines n'ont plus beaucoup de secret, l'investigation en monde 3D n'a pas été un chemin de santé !

Bref, pour produire une application "graphisée" c'est beaucoup plus simple à dire qu'à faire, je peux vous l'assurer ! Gérer un ou plusieurs graphistes, leur faire comprendre ce qu'est une application, la différence entre une listbox et un combobox n'est pas forcément non plus la chose la plus simple. Et pourtant, c'est essentiel. Depuis des mois j'engrange donc une expérience à la fois nouvelle et exitante, car ce qui se profile est l'avènement de nouveaux logiciels conçus autrement. Et j'aime le changement.

Je ne vais pas ici vous détailler l'ensemble du processus de création d'une application WPF ou Silverlight, mais vous proposer un petit tour dans les outils qui peuvent (et doivent) être utilisés pour produire une logiciel designé.

Tour d'horizon des outils

Un dessin valant mieux qu'un long discours, regardons d'abord ce "petit" diagramme que j'ai fait rapidement sur la base de mon expérience :

 

Pour voir l'image en 100% téléchargez-la : 2D3DProduction.png (43,20 kb)

J'ai testé tous les chemins dessinés et tous les softs présentés et même bien plus... Ce qui reste sur ce diagramme sont les principaux chemins que peut prendre un objet graphique et les principaux softs qu'il faut connaître et maîtriser pour produire une solution professionnelle. Certaines personne se limiteront à des portions du diagramme, ce qui reste possible, mais seule la connaissance de la totalité des logiciels et chemins de celui-ci permet de "tout" faire.

Partons de la fin

A l'arrivée nous désirons obtenir une application WPF ou Silverlight. Sous WPF nous avons besoin de composants templatés, d'image PNG ou Jpeg et d'objets visuels en 2D ou 3D. Pour Silverlight nous avons les mêmes besoins sauf en ce qui concerne la 3D qui ne sera supportée que dans Silverlight 3 en 2009.

Chaque éléments graphique impose certains chemins incontournables:

Par exemple, Silverlight gère très bien les objets 2D créé par Expression Design, mais les effets de Expression Design ne sont pas gérés, comme le Drop Shadow. Moralité, un objet 2D créé en Xaml avec E.Design ne peut être utilisé tel quel sous Silverlight, il faudra le transformer en PNG. Sous WPF il est possible d'ajouter des effets comme le Drop Shadow et il sera donc possible d'exploiter directement l'objet 2D Xaml. Objet Xaml ou PNG on voit tout de suite que les chemins de production diffèrent légèrement et que les possibilités pour le développeurs seront très différentes...

Pour produire des objets 3D il y a un goulot d'étranglement : aucun outil Microsoft ne produit d'objets 3D. Le seul logiciel qui permet de faire cela est Zam 3D d'Electric Rain. Il est plutôt agréable à utiliser et pas très cher (environ 200 euros avec le change actuel du dollar). Seulement voilà, parfois vous avez envie d'utiliser un objet 3D un peu compliqué ou mis en scène. Et chez Electric Rain ils sont malins, ou un peu mesquin au choix, et Zam 3D ne possède pas de moteur de rendu ! Il est juste capable de sortir du code Xaml. Et si vous voulez créer un PNG d'un objet 3D ? Pas de solution sauf à acquérir en plus Swift 3D du même éditeur qui dispose d'un moteur de rendu (EMO) qui ne peut pas concurrencer les gros moteurs de ray tracing comme on en trouve sur 3DS Max ou Blender, mais on peut produire des images de belle qualité malgré tout.

On le voit le chemin se complique.. J'ai un objet 3D, pour une application WPF je vais le réutilisé directement, pour une application Silverlight je vais le "prendre en photo" en faisant un PNG, du coup j'ai besoin de Xam 3D pour créer l'objet 3D Xaml et de Swift 3D pour réimporter mon projet Xam 3D et utiliser le moteur de rendu pour créer le PNG ! Vous allez me dire autant acheter tout de suite Swift 3D ! Et bien non... Ce dernier a bien un mode d'export en Xaml mais c'est plutôt pour les animations comme en Flash, par exemple une animation de 20 images créera 20 fois l'objet Xaml sur 20 couches différentes dont l'opacité est à 0% et il y aura 20 timelime générée chacune s'activant à la suite de la précédente pour passer l'opacité de l'image numéro x à 100%. C'est un peu le principe d'animation des petits livres qu'on doit feuilleter à toute vitesse pour avoir l'impression d'un dessin animé.

Bien entendu en bout de course il faut avoir Expression Blend, c'est obligatoire. Et puis ensuite viennent Visual Studio ou Expression Web.

Produire des modèles 2D avec Expression Design c'est sympa, le soft est agréable. Mais il n'a pas le niveau d'un Illustrator CS. Si on veut créer une image 2D un peu "léchée" il faut donc posséder Illustrator CS. On exporte en Xaml directement grâce à un petit plugin gratuit, ou bien on importe le fichier AI dans Expression Design (le copier coller entre Illustrator et E.Design fonctionne aussi et c'est très pratique).

Pour produire de la 3D c'est un peu pareil... Swift 3D ou Xaml 3D sont bien sympathiques, mais le mesh editor est un peu limité, et dès qu'on entre dans l'animation on voit bien que ces logiciels sont parfaits pour produire des banners de pub à la Flash mais pas pour créer des séquences animées à la Maya !

Bref, pour de beaux objets 3D, le mieux est d'utiliser Blender (gratuit mais une vraie usine à gaz) ou 3DS Max, le meilleur que je connaisse et le plus agréable à utiliser. Un peu cher c'est tout. Surtout si on ajoute cela au budget de la quinzaine de logiciels présents sur mon diagramme !

Avec 3DS Max vous allez créer des objets 3D que vous sauvegarderez en format 3DS, pas au format Max ni Dxf ! Et oui.. Swift 3D et Xaml 3D ne savent importer que le format 3DS... Au passage vous perdrez certains éléments ou certaines textures. Rien ne sert donc de trop compliquer. Il faut finir le travail sous Xaml 3D pour être sûr que ce qui est fait est supporté par l'export 3D en Xaml.

Si vous voulez faire des animations, cela se corse ! On a vu que les animations Xaml produites par Swift 3D ne sont pas du Xaml 3D mais des séries de plans 2D en couche, en revanche Swift 3D sait produire des AVI, comme 3DS Max. Un petit AVI peut souvent être bien plus joli qu'une animation d'objets 3D faites à la main dans Expression Blend. Dans certain cas c'est donc une alternative intéressante.

Reste que l'AVI devra être encodé correctement. C'est là qu'intervient Expression Media Encoder. Il peut même produire une page Web avec lecteur Silverlight intégré. Cela est intéressant pour une longue séquence présentée comme un petit film.

Bien entendu qui dit petit film dit montage... Le montage peut être réalisé avec Windows Movie Maker, simple et gratuit. Mais simple... Il faudra certainement passer à Adobe Première pour produire un vrai petit film bien monté.

Qui dit film dit son. vous pouvez facilement prendre un MP3 et le coller dans le projet Movie Maker. Mais, droits de diffusion mis à part, cela va rester très sommaire.

Pour produire une bande son synchronisée avec les images je travaille personnellement avec Cubase. Les synthés et la musique c'est mon "vrai truc" c'est donc la partie que je préfère :-) Créer l'image puis créer le son pour cette dernière est une expérience vraiment intéressante. Si vous êtes musicien vous vous éclaterez dans cette phase ! Sinon, pensez à engager un compositeur (tarifs sur demande !).

Etc !

Je vais m'arrêter là, car il est impossible de décrire ici tous les chemins du diagrammes, toutes les justifications de prendre tel ou tel chemin pour tel ou tel résultat. Et puis c'est aussi la valeur ajoutée que je suis en train de créer pour E-naxos, j'aime partager, la preuve ce billet, mais je ne vais pas vous livrer plus d'un an d'expérimentation et d'expérience comme ça non plus :-)

J'espère en tout cas que ce petit tour d'horizon et le diagramme vous aideront à vous faire une idée du cycle de production d'interfaces professionnelles "graphisées". Si vous êtes développeur cela vous aidera à envisager votre collaboration avec des infographistes, et si vous êtes clients cela vous aidera à mieux comprendre le prix qui vous sera demandé ;-)

Dans tous les cas, bon voyage au pays des logiciels de la prochaine génération !

..Et Stay Tuned !

De la 3D pour Silverlight 3 !

On commence à avoir une petite idée de ce que va être Silverlight 3 qui sera diffusé l'année prochaine et il semble que nos attentes seront comblées...

Au menu, pour ce qui est révélé aujourd'hui :

  • Support étendu pour les médias de tout type notamment le H.264 video utilisé de plus en plus,
  • Grandes avancées en matière graphique avec notamment le support de la 3D et l'accélération matériel par accès automatique au GPU (comme WPF donc),
  • Avancées importantes côté développement avec notamment de nouveaux contrôles et un data-binding encore plus riche

C'est tout ce que l'on sait vraiment sur cette nouvelle version, mais déjà nos principales préoccupations semblent avoir été entendues. De la 3D comme WPF, accélération matérielle graphique comme WPF, et plus de contrôles que demande le peuple n'est ce pas...

Mais selon le billet de Scott Guthrie tout cela n'est qu'une petite partie des nouveautés... Scott est un vicieux, en disant cela notre attente devient un vrai suplice ! :-)

Autre grande nouvelle, Visual Studio et Visual Web Developper Express supporteront un designer interactif pour Silverlight autorisant l'édition complète des pages. Le data-binding sera lui aussi amélioré et disposera de commandes dans ces EDI pour simplifier son utilisation.

Tout ça est vraiment alléchant, vivement l'année prochaine !

Et pour des nouvelles fraîches : Stay Tuned !