Oct.21

[WPF] S’amuser avec le MediaElement sous WPF

Le contrôle MediaElement que j’ai decouvert au cours de cette semaine a revolutionné ma petite vie de developpeur 🙂 Ce contrôle permet de contenir des images, sons ou videos.
Pour charger un media, rien de plus simple :

Sachant que mon Uri peut pointer sur un fichier local (c:\….) ou distant (http://…..) que se soit une video, une image ou un son….

Le media sera joué immédiatement. Bien que vous disposez des methodes Play(), Stop() et Pause() pour contrôler le media, utilisez plutot la proprieté LoadedBehavior qui permet de definir et/ou obtenir l’etat du media :

A ce sujet, pour pouvoir jouer une video (ou son) en boucle, la seule doc que j’avais trouvé sur le msdn2 était de mettre un MediaTimeline. Chose un peu tordu dans le code alors qu’il y a une solution toute simple :
1) Abonnez-vous à l’evenement MediaEnded (fin du media) :

2) Remettez la position du media à zero (debut) et relancez le media :

Ce qui est quand même beaucoup plus simple 🙂

C’est bien beau tout ca, mais la vous n’avez aucun apercu à l’ecran ce qui est quand meme un peu dommage ^^ Mais là où ca devient fort bien interressant, c’est qu’un VisualBrush peut prendre en parametre un MediaElement pour pouvoir remplir un rectangle par exemple :

Et hop la, votre video (par exemple) sera joué dans ce rectangle. Enfin pour rajouter votre rectangle à un canvas que vous aurez au préalable placé dans votre code XAML :

A partir de la on peut vraiement s’amuser et aller plus loin dans la démarche.. Par exemple, les rectangles ont une proprieté Clip qui va nous permettre de clipper notre media, OpacityMask pour appliquer un masque d’opacité, et bien d’autre chose pour appliquer differents effets a notre rectangle/video, … Et encore je ne parle que des rectangles, a partir du moment où votre controle pourra etre remplit par un VisualBrush on pourra tout y mettre 🙂
Je ne vais pas vous devoiler sur ce quoi je travaille en ce moment, mais il faut bien se rendre compte de tout ce qu’on peut faire avec car c’est carrement dément…

Dev,WPF

Oct.18

[JS] Le scrolling : Plein de scrollers prêt à l’emploi

Bon je ne vais pas revenir sur ce qu’est le scrolling ou un scroller mais rapidement c’est qu’il vous permez de faire défiler du contenu (texte, image, etc…) à l’ecran 🙂
Certe votre navigateur préféré vous offrent de belles barres grises pour pouvoir faire défiler les pages mais dans certains sitse, pour mieux intégrer le design, l’on developpe notre propre systeme de scrolling… C’est ce que je fais nottament avec un site d’un client où je propose de belles petites fleches (qui ne sont ni plus ni moins que des images) pour pouvoir faire defiler le contenu (en fait je deplace juste un div).

J’avais déjà developpé un petit systeme de scrolling pour mon projet SUPINFO DotNet l’an dernier, mais devant souvent reprendre le code pour l’integrer dans mes developpements en cours j’ai décidé de faire un script complet et générique pour pouvoir l’intégrer dans n’importe quel site.

Je vous met donc ici à disposition mon code (vive l’open source 🙂 ). Bon biensur, merci vous faire connaitre si vous l’utilisez dans vos developpements ^_^

Mon script contient (entre autre) :

  • RegisterScroller(name,parentSize,initial_position,reload_postback). Le 1er parametre est le nom (id) du DIV a scroller, le parentSize est un objet Point qui definit la taille du parent (partie visible), initial_position est aussi un Point qui définit les coordonnées initiales du DIV et reload_postback est un booléan qui défini si le DIV doit etre remplacé à sa derniere position lors de l’appel de la fonction refixPosition (que nous verrons ci-après)
  • refixPosition() : permet de repositionner les scrollers marqués de reload_postback à True. (Utile dans le cas d’une utilisation avec Atlas. cf ce post)
  • resetPosition(sender) : où sender est l’id du DIV/Scroller à remettre à sa position d’origine (initial_position)
  • startScroll(sender, direction) : sender etant l’ID du DIV/Scroller et direction peut etre UP, DN, GT, LT. La fonction permet donc de demarrer le scrolling (à placer sur le click de la fleche)
  • stopScroll(sender) : permet d’arreter le scroll (à placer sur le mouseout de la fleche)
  • scroll(sender, direction) : fonction qui vient scroller le sender en fonction de sa direction. (à placer sur le mouseover de la fleche).

Exemple dans mon load de ma page je retrouve :

Qui me permet d’enregistrer le sroller sur le DIV pellicule_content qui sera visible dans un rectangle de 275x65px, qui démarre à 13px du bord gauche et qui est repositionné à sa derniere postion lors de l’appel de la fonction refixPostion()
Puis dans mon code HTML je retrouve quelque chose du type :

Bon biensur à vous de vous débrouillez avec le CSS et les ZIndex pour faire quelque chose potable 🙂

Donc vous voila parrez pour faire pleins de scrollers dans vos sites, en haut/bas, gauche/droite. Elles est pas belle la vie ? ^_^

Télécharger mon script Scroll.js

Tous commentaires sont les bienvenues 🙂

Perso,Dev

Oct.18

[JS] Surcharge de parametres JavaScript

C’est en lisant le code source JS d’Atlas que j’ai decouvert la surcharge de parametres Javascript. Ok cela vous parrez peut être idiot mais comme dirait un certain B.Watterson : L’idiotie est l’essence des hommes et je n’ai d’honte à apprendre 🙂

Alors voila, je lisais le code et un moment donné je vois une fonction du type :

Qui était appellé par une ligne de type :

A ce moment j’ai senti mes petits neuronnes s’exciter dans tous les sens avec la question : Je ne comprends pas, ma fonction attend deux arguments et moi je lui en passe quatre.. Qu’est ce qu’il se passe ? 🙂
Dans le code de la fonction j’ai vu à plusieurs reprises le mot arguments. En fouillant un peu plus, impossible de trouver la déclaration de cette variable. Serait-ce une variable propre à JS ???
J’ai donc créé une page html entierement vide pour faire un alert() dans une fonction de cette fameuse variable arguments. Suspense jusqu’a l’execution de la page : vais-je tomber sur un undefined ?? => Et ben non, une belle alerte avec inscrit [object Object] et mes petits neuronnes reprirent une activité normale 🙂

En effet, tous les parametres passés à une fonction javascript sont contenu dans un tableau (Array) nommé arguments.
Exemple simple :

Vous affichera un beau message :

Et pourtant ma fonction ne prend aucun parametre explicitement 🙂 Genial non ?

Dev

Oct.09

[Atlas] Appeller une fonction JS après un UpdatePanel

J’ai passé ma journée d’hier a chercher comment appeler une fonction JS (coté client donc) après l’update d’un UpdatePanel avec un rendu partiel du ScriptManager (enablepartialrendering= »True »).

J’ai enfin trouvé et en fait c’est vraiment tout bête. Il suffit d’ajouter dans votre Page_Load la ligne :

Exemple :

Et surtout n’oubliez pas le dernier parametre à True dans le cas d’un enablepartialrendering= »True » à votre ScriptManager, car c’est lui que j’avais oublié et qui m’a fait chercher de longues heures 🙂

Dev,Atlas

Sep.13

S’amuser avec MSN et .NET : DotMSN

DotMSN est un projet OpenSource proposé par la socièté Xih Solutions disponnible à l’adresse : http://www.xihsolutions.net/dotmsn/.
DotMSN est une assembly .NET écrite en C# qui implémente la quasi-totalité du protocole MSN dans sa version 9.
Vous pourrez grâce à DotMSN:

  • gérer les connexions à MSN, les status, données personnels et images perso
  • gérer la ContactList (ajout, suppression, bloquer, autoriser)
  • gérer de multiples conversations, les emoticones, texte décoré, etc…
  • interface avec Hotmail (connexion, avertissement des nouveaux mail, etc..)
  • gestion des transferts (fichiers, emoticones, images perso des contacts)

Bref, grâce à DotMSN vous pouvez redevelopper entierement votre propre client MSN. La seule chose à la limite qu’il manque, c’est la gestion du Wizz 🙂

Toutes les specs de l’assembly sont disponnible à l’adresse: http://www.xihsolutions.net/dotmsn/api
DotMSN contient 3 espaces de nom :

  • XihSolutions.DotMSN : classes de base pour la connexion/deconnexion, conversation, parametres persos, etc…
  • XihSolutions.DotMSN.Core : c’est le moteur, là où se trouve toute l’implémentation du protocole. Nous n’avons pas besoin d’utiliser les classes qu’il renferme.
  • XihSolutions.DotMSN.DataTransfer : toutes les classes en rapport avec le transfert de fichiers, images, emoticones, etc..

Pour démarrer, commencez par instancier la classe Messenger (dans XihSolutions.DotMSN) puis remplir la propriété Credentials avec comme Account et Password votre compte MSN et le ClientID = « msmsgs@msnmsgr.com » et ClientCode = « Q1P7W2E4J9R8U3S5 » pour enfin lancer la méthode Connect

Vous êtes maintenant connecté au service MSN mais pas encore en ligne. Pour cela abonnez-vous à l’évenement SignedIn dans Nameserver de votre objet MSN (AddHandler msn.Nameserver.SignedIn, AddressOf ….). L’évenement sera appellé dès que votre connexion sera effective. En reponse à l’appel de cet evenement, placez le code :

Le code aura pour but de définir votre pseudo ainsi que votre status.

La proprièté Owner permet donc de definir votre profil, nom, image perso, status, etc… Vous trouverez aussi la propriété ContactList pour la liste de vos contacts. Exemple pour afficher votre ContactList :

Il faudra aussi vous abonnez à l’évenement ConversationCreated de la classe Messenger qui averti qu’une nouvelle conversation est crée. Vous recuperez alors l’objet Conversation qui contient la propriété Switchboard pour pouvoir lire les messages, en envoyer, lancer des invitations de transfert de fichiers, etc… A ce titre, dès qu’une conversation est crée, n’oubliez pas aussi de vous abonnez à l’événement Conversation.Switchboard.TextMessageReceived permettant d’être averti de l’arrivée d’un message.

Enfin pour finir, après la connexion du service MSN, oubliez pas non plus de vous abonnez à l’évenement TransferInvitationReceived de l’objet Messenger permettant d’être averti de l’envoi d’une invitation de transfert. Vous pourrez alors l’accepter en mettant True à la propriété Accept de MSNSLPInvitationEventArgs et démarrer le transfert dans TransferSession.StartDataTransfer(False) (False pour un transfert non direct et True pour direct).
Encore une fois, il faudra vous abonnez à l’évenement TransferFinished de la propriété TransferSession pour être averti de la fin du téléchargement.
Pour enregistrer le fichier transferé en dur dans un fichier :

Voila, vous êtes maintenant paré pour ecrire votre propre client MSN ^_^ Le mieux, pour bien comprendre, est de regarder les specs de l’assembly pour trouver tous les evenements et methodes dont vous aurez besoin. Vous trouverez de toute facon, un client de démo avec les sources fournis en téléchargeant l’assembly DotMSN. Si avez des soucis, n’hesitez pas à me contacter 🙂

Dev,.NET

Aug.06

Persistance&Tracking avec Workflow Foundation

Windows Workflow Foundation propose deux services fort utile qui sont le Tracking et la Persistance.

La persistance va permettre d’enregistrer l’instance d’un workflow en dur dans un serveur SQL. On va pouvoir grace a cela, demarrer une instance de workflow depuis une application host, la quitter, puis la reprendre a tout moment. La persistance devient alors très utile, imaginez un workflow de gestion d’article qui demarre au moment où un article serait posté et attendrait la validation des admins pour etre publié. Il serait alors fort utile de pouvoir enregistrer et reprendre le workflow quand on le souhaite pour que les admins puissent donner leur reponse à tout moment.

La persistance sous WF est très simple a mettre en oeuvre :
Il faut d’abord préparer la base de données en executant les scripts SQL qui se trouvent dans C:\WINDOWS\WinFX\v3.0\Windows Workflow Foundation\SQL\EN. Il y a 4fichiers : 2 pour les schémas et 2 pour la logique pour la persistance et le tracking. Executez les schémas en 1er biensûr 🙂
Ensuite pour activer la persistance dans votre workflow, ajoutez le service SqlWorkflowPersistenceService à votre runtime. ex:

A tout moment vous allez pouvoir recuperer les instances persistées par le code :

Vous recuperez une collection de SqlPersistenceWorkflowInstanceDescription où vous allez pouvoir recuperer des informations comme son status, son ID d’instance, etc…
Enfin pour récupérer une instance :

_instanceID est un Guid qui correspond à l’ID de l’instance à resumer.

Le Tracking quant à lui, permet de « traquer » un workflow en enregistrant des tas de parametres sur son déroulement. Pour le mettre en place, c’est aussi facile que pour la persistance. Assurez-vous d’avoir bien créé les tables (scripts Tracking_Logic et Tracking_Shema). Ensuite tout comme la persistance, il faudra ajouter le service tracking à la runtime par le code :

Vous pourrez ensuite recuperer un tas de parametres pour toutes les instances par le code :

Ce code vous retournera une List(Of SqlTrackingWorkflowInstance) (autopub: explication des List ici) :))

L’objet SqlTrackingQueryOptions permet quant à lui, d’imposer des conditions de recherche. L’exemple ci-dessous permet de recuperer seulement les instances en cours (running) :

L’objet SqlTrackingWorkflowInstance contient toutes les informations sur une instance de Workflow. On y trouve les propriètés ActivityEvents (evenement des Activity), Status, UserEvents (evenement des utilisateurs comme par exemple les traces laissées par les TrackData dans le workflow), WorkflowInstanceId, etc…

Toutes les specs du SqlTrackingWorkflowInstance : http://windowssdk.msdn.microsoft.com/en-us/lib…

Conclusion : ca devient un vrai jeu d’enfant, sous WF, de persister et tracer un workflow. Moi j’adore 🙂

Dev,Workflow Foundation

Aug.06

HandleExternalEvent & CallExternalMethod sous Workflow Foundation

Les Activity HandleExternalEvent & CallExternalMethod, sont tout deux indispensable dans le developpement de workflow. Ce sont en quelque sorte les entrées-sorties entre le workflow et le programme host.

Le HandleExternalEventActivity va pemettre de marquer une pause dans le deroulement d’un workflow en attendant le déclement d’un evenement. Le CallExternalMethodActivity va quand à lui effectuer en quelque sorte l’opération inverse, à savoir, déclencher l’appel d’une methode externe au workflow.

Les methodes et evenement vont devoir etre défini dans une interface marquée par l’attribut ExternalDataExchange. Le programme host, lui, devra ajouter le service ExternalDataExchangeService

Mission 1 : Création du projet DTO pour les objets communs

1) Créons donc un nouveau projet de type Class Library en VB.net. Nous allons commencer tout d’abord par ajouter une référence au Workflow Foundation qui est : System.Workflow.Activities

2) Ensuite créons une classe nommé MyEventArgs qui nous pemettra de passer des arguments dans notre evenement. Nous allons, dans cette classe, stocker un petit message, il faudra donc créer un champ et une propriété de type String nommé Message.
Cette classe doit être Serializable et doit hériter de la classe System.Workflow.Activities.ExternalDataEventArgs. Il faudra donc dans le code du constructeur ajouter un MyBase.New(instanceId) avec comme instanceId, l’instance de notre workflow en Guid pour que l’evenement puisse etre mappé sur la bonne instance de workflow.
Notre classe pourrait ressembler à cela :

3) Créons maintenant notre Interface de communication que l’on nommera dans notre exemple : ICommunication.
L’interface doit être marquée par l’attribut System.Workflow.Activities.ExternalDataExchange().
Nous allons définir une methode nomme MaMethode qui prendra en argument un message en string et un evenement nommé MonEvenement de type MyEventArgs créé juste avant :). Le code pourrait être :

4) Pour finir, compiler votre projet DTO et passons à la création du workflow

Mission 2 : Création du workflow

1) Commencons par créer un nouveau projet dans notre solution de type Sequential Workflow Library et ajouter la référence au projet DTO.

Notre workflow va ressembler à ca :

Au démarrage, il attend l’evenement MonEvenement (Activity HandleExternalEvent) qui contient un message via la classe MyEventArgs , puis quand l’evenement est recu, appel MaMethode (Activity CallExternalMethod) en passant en parametre le message contenu dans notre evenement.

Plutot qu’un long baratin, la démo en video :

Mission 3 : Création de la couche service

Il ne vous plus qu’a créer la couche service qui s’occupera de démarrer le runtime et les instances de votre workflow. C’est elle aussi qui implémentra l’interface ICommunication.

Ici, notre couche service sera tres simple. Elle disposera des methodes StartRuntime et StartInstance pour demarrer le runtime du WF et l’instance de notre workflow. La methode DeclencherEvent s’occupera de declencher l’evenement. De plus, elle implementra notre interface ICommunication (methode MaMethode et evenement MonEvenement). A noter que lors de la creation de notre runtime, nous avons ajouter le service ExternalDataExchangeService pour pouvoir communiquer avec notre workflow via notre Interface.

Mission 4 : Création de la GUI

Ici dans notre projet notre GUI sera en mode console. Elle doit juste faire reference à notre couche service et l’instancier. Le code peut être :

Ce qui donne à l’ecran :

Conclusion

C’est certe un exemple très simple et qui ne sert a rien, mais j’espere avoir pu vous donner quelques tips pour l’utilisation des HandleExternalEvent & CallExternalMethod au sein d’un workflow sous Worfkflow Foundation.

**UPDATE** : les sources du projet ICI

Dev,Workflow Foundation