[Windows 8] Développez en HTML 5 pour Windows 8

29. April 2013 14:53 by Renaud in Windows 8  //  Tags: , , ,   //   Comments (0)

* Petite pub perso Tongue Out *


Ces derniers moi j'ai écrit un bouquin traitant de Windows 8 avec Loïc Bar et Simon Boigelot. Ce livre parle du développement d'applications pour le store Windows 8 à base de HTML 5 et de JavaScript !

Ce livre s'adresse aux débutants, aux personnes n'ayant pas nécessairement d'expérience avec les technologies du monde Microsoft. Vous n'avez jamais fait de .NET? Mais vous avez déjà bidouillé avec du HTML?

Si vous voulez passer à la vitesse supérieure, tirer profit du nouvel OS de Microsoft et pourquoi pas commencer à gagner un peu d'argent en vendant vos applications, ce livre est pour vous ! :)

Développez en HTML 5 pour Windows 8

[Windows 8] Créer un timer rond en XAML

15. April 2013 21:27 by Renaud in Expression Blend, Windows 8, XAML  //  Tags: , , , ,   //   Comments (0)

Pour le développement du jeu WordDefy pour Windows 8, Matthieu (@MatthieuVdh) et moi avons demandé l'aide d'une amie graphiste. Et comme elle nous a rapidement pondu un super truc, la moindre des choses c'était de tenter de le reproduire à l'identique ! Il y a plusieurs bons côtés à cela : premièrement on a une app avec un look plutôt sympa, et deuxièmement j'ai pu jouer avec Blend et m'amuser avec le XAML, ce qui fait que j'ai appris pas mal de choses!

Une des parties consistait à reproduire un Timer en forme de cercle. Pour que vous y voyez plus clair, voici le compteur original tel que designé et le résultat final (qui est assez ressemblant :)) en XAML :

Design original
Design original

Résultat en XAML
XAML

Conception d'un RoundedTimer

Il existe plein d'exemples de timer sur le web, mais aucun fonctionnant sous WinRT. Et évidemment, le XAML sur Windows 8 a quelques particularités qui font que l'exemple ne sont pas toujours utilisables. J'en ai donc recréé un avec Blend !

Générer un Path

La première étape consiste à créer le cercle du compteur. Ce cercle doit être transparent au milieu. Pour faire cela, on va utiliser deux Ellipses et les combiner (ou plus précisément les soustraire). Placez donc deux Ellipses de manière à ce qu'elles soient centrées sur le même point, et avec l'une d'elle légèrement plus petite que l'autre.

Le code jusqu'à présent:

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    	<Ellipse Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="200" Margin="160,240,0,0" Stroke="Black" VerticalAlignment="Top" Width="200"/>
    	<Ellipse Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="140" Margin="190,270,0,0" Stroke="Black" VerticalAlignment="Top" Width="140"/>
    </Grid>

Pour obtenir le résultat voulu, on peut donc soustraire la deuxième Ellipse à la première ou exclure les zones de chevauchement (lisez aussi Combiner des formes et des tracés (Blend pour Visual Studio)). Faites un clique droit sur l'arbre visuel et les Ellipses sélectionnées et choisissez l'opération qui vous convient dans le menu Combiner

Le résultat de cette opération est un Path généré en remplacement des deux Ellipses précédemment créées. Le résultat devrait ressembler à ceci:

Et le code correspondant : 

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    	<Path Data="M100,30.5 C61.6162,30.5 30.5,61.6162 30.5,100 C30.5,138.384 61.6162,169.5 100,169.5 C138.384,169.5 169.5,138.384 169.5,100 C169.5,61.6162 138.384,30.5 100,30.5 z M100,0.5 C154.952,0.5 199.5,45.0477 199.5,100 C199.5,154.952 154.952,199.5 100,199.5 C45.0477,199.5 0.5,154.952 0.5,100 C0.5,45.0477 45.0477,0.5 100,0.5 z" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="200" Margin="160,240,0,0" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Top" Width="200"/>
    </Grid>

Ce cercle est la base de notre RoundedTimer... Passons à l'étape suivante: le clipping ! :)

Clipping Path

Le principe du clipping path est d'utiliser un élément pour délimiter la zone visible d'un autre élément. Malheureusement dans les apps Windows Store on ne peut pas utiliser un Path pour "masquer" un autre élément. Par contre on peut utiliser des Ellipse et des Rectangle pour délimiter une zone. 

Ajoutons par exemple un Rectangle dans sur un coin de notre cercle : 

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Margin="160,240,1106,428" Width="100" Height="100"/>
    <Path Data="M100,30.5 C61.6162,30.5 30.5,61.6162 30.5,100 C30.5,138.384 61.6162,169.5 100,169.5 C138.384,169.5 169.5,138.384 169.5,100 C169.5,61.6162 138.384,30.5 100,30.5 z M100,0.5 C154.952,0.5 199.5,45.0477 199.5,100 C199.5,154.952 154.952,199.5 100,199.5 C45.0477,199.5 0.5,154.952 0.5,100 C0.5,45.0477 45.0477,0.5 100,0.5 z" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="200" Margin="160,240,0,0" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Top" Width="200"/>
</Grid>

 

Le résultat obtenu est le suivant : 

On se retrouve avec un quart de cercle, ce qui va en fait représenter un quart de notre RoundedTimer ! Ce qu'il reste à faire est d'animer ce quart de Timer pour représenter le temps qui s'écoule.

Animer le Timer

Pour cela on va utiliser une Transformation sur l'élément RectangleGeometry. A vrai dire il y a sans doute plusieurs façon d'arriver au même résultat ! Pour ma part j'y suis arrivé en utilisant un SkewTransform.

Si l'on reprend le quart de cercle précédent, on peut l'animer en utilisant la transformation correcte : 

<Path Data="M100,30.5 C61.6162,30.5 30.5,61.6162 30.5,100 C30.5,138.384 61.6162,169.5 100,169.5 C138.384,169.5 169.5,138.384 169.5,100 C169.5,61.6162 138.384,30.5 100,30.5 z M100,0.5 C154.952,0.5 199.5,45.0477 199.5,100 C199.5,154.952 154.952,199.5 100,199.5 C45.0477,199.5 0.5,154.952 0.5,100 C0.5,45.0477 45.0477,0.5 100,0.5 z" Fill="White" HorizontalAlignment="Left" Height="200" Margin="160,240,0,0" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Top" Width="200">
	<Path.Clip>
		<RectangleGeometry Rect="0,0,100,100">
			<RectangleGeometry.Transform>
                <!-- AngleY : De 0 à 90 -->
                <SkewTransform CenterX="100" CenterY="100" AngleY="0"/>
            </RectangleGeometry.Transform>
		</RectangleGeometry>
	</Path.Clip>
</Path>

En modifiant la valeur de la propriété AngleY, on peut animer joliment le timer ! Ainsi, avec un angle de 40°, on retrouve la forme suivante :

Il ne reste donc plus qu'à créer trois autres quarts du timer, et à les animer en changeant la valeur d'un des angles toutes les secondes grâce à un DispatcherTimer. L'important étant de voir comment appliquer la SkewTransformation, en jouant sur les propriétés Center et Angle !

Téléchargement / Sources

Vous pouvez télécharger le résultat final sous la forme d'une contrôle sur GitHub ! À vous de le customiser ! :)

Pour l'intégrer dans votre app, rien de plus simple :

<Page
    x:Class="TestApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:roundedTimer="using:RoundedTimer"
    mc:Ignorable="d">
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <roundedTimer:RoundedTimer x:Name="MyTimer" Width="200" Height="200" Duration="00:01:00" />
    </Grid>
</Page>

On instancie le timer dans le XAML, et on démarre le décompte avec un appel à la méthode Start() dans le code-behind :

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            MyTimer.Start();
        }

 

Spotlight : La coupe de Belgique de robotique 2013 à l'UMONS

13. April 2013 16:36 by Renaud in Robotic  //  Tags: , , ,   //   Comments (0)

Ce weekend, j'ai eu la chance d'être invité par les organisateurs de la Coupe de Belgique de Robotique 2013 pour participer à une mini-conférence ! C'était une première pour moi... j'avoue n'avoir jamais participé à ce genre d'événement auparavant. Mais je dois dire que l'ambiance y est plutôt sympathique. Globalement, on y retrouve la même faune que lors d'un hackathon, mais avec des super-pouvoirs un peu différents puisque les gens là-bas ne font pas qu'écrire du code mais manient également le tournevis ou le fer à souder!

Bref, ça se passait donc ce weekend à l'UMONS, (établissement où j'ai fait un arrêt durant mon cursus scolaire), et j'ai pu y parler de Nao (allez voir le Developer's program) et de la Kinect pour PC

Je me suis donc retrouvé de l'autre côté de l'auditoire dans lequel j'ai suivi de nombreux cours d'algèbre et d'analyse ! :)

L'amphi avant l'arrivée des gens!

Crédits : Tomas Gosselin

Donc en deux mots, après une légère introduction à la Kinect suivie d'une présentation de Nao, j'ai montré comment on peut fusionner les deux mondes pour faire un truc super cool : contrôler Nao en faisant le singe devant la Kinect !

Crédits : Tomas Gosselin

L'exemple en soit est un peu simpliste. Je commence par calibrer l'application pour définir une zone dans laquelle je peux commander Nao à distance. Ensuite j'active le contrôle, et Nao commence à reproduire les mouvements de mes bras. Grâce au dernier SDK Kinect pour Windows et à la nouvelle Interaction API, je peux également contrôler l'ouverture des mains de Nao très facilement! Et pour finir, je peux me déplacer en dehors de ma zone de contrôle pour que Nao se déplace également pas à pas.

Les slides sont dispos sur Slideshare :  

 
Quel est l'intérêt de cette démo ? Montrer que l'association des deux technologies pourraient être très intéressante. On pourrait imaginer envoyer des robots dans des zones qui ne soient pas accessibles à des humains, et contrôler ces robots à distance de manière simple et précise. Évidemment, ce n'est pas encore aujourd'hui que Nao remplacera des pompiers pour sauver une victime prisonnière d'un bâtiment en flammes, mais ce n'est peut-être pas aussi improbable que ça en a l'air!

A suivre

Vous connaissez peut-être déjà les Developer's First Monday, ces afterworks organisés tous les premiers lundis du mois. Sachez qu'une des prochaines sessions sera sur le thème de la robotique. Si cela vous intéresse, faites-le savoir sur notre uservoice : https://micbelgique.uservoice.com/forums/191395-general/suggestions/3688770-session-gadgeteer

Developer's First Monday 01x03

10. April 2013 14:31 by Renaud in Agile, Events  //  Tags: , , , , ,   //   Comments (0)

Le 08 avril dernier, nous avons accueilli la deuxième édition des Developer's First Monday (en photo). Pour cet évènement, nous avions souhaité (enfin, via notre Uservoice, vous aviez souhaité) parler un peu d'Infrastructure et pas toujours de Dev ! Nous nous sommes donc retrouvés à une petite vingtaine pour écouter Gokan Ozcifci nous parler de Sharepoint 2013, de ses nouveautés et des best-practices. Nous avons également eu droit à l'intervention d'Arnaud Jund, fondateur de la communauté myTIC Pour ce troisième épisode,  c'est encore vous qui décidez ! Et nous aurons le plaisir de recevoir Pierre-Emmanuel (MEET member) et Norman Deschauwer de DotNetHub)

Pour ceux qui n'ont pas suivi, de quoi s’agit-il ?

Si vous avez manqué la première et la deuxième soirée et que vous ne savez toujours ce qu'est le Developer's First Monday, voici un rappel : L’idée est de créer un rendez-vous récurrent pour les développeurs et autres professionnels de l’IT! Ce sera l’occasion de faire connaissance, mais aussi de partager notre noble savoir lors de courtes présentations. La soirée pourra évidemment se prolonger autour d’un verre pour les plus motivés ! Pour rendre la soirée encore plus intéressante, vous êtes invités à dire de quoi vous aimeriez parler ! Quels sont les sujets qui vous passionnent ? Dites-le nous, le UserVoice est là pour ça ! :)

Détails

Cette soirée se tiendra le 06 mai au MIC de Mons !

Lors de formations Agile, on se pose souvent la question des outils : quels outils pouvons-nous utiliser pour faire de l'agile ? Et si les agilistes promeuvent souvent des "outils" manuels (post-it, tableaux blanc, ...), il est parfois nécessaire de les accompagner d'outils informatiques. Depuis quelques années, Microsoft propose son outil TFS (Team Foundation Server) comme étant sa solution ALM (Application Lifecycle Management). Si les versions précédentes proposaient déjà des modules "agiles", ils proposent avec leur version TFS 2012, une solution complète pour la gestion de projet Agile, et intégrant les chefs de projet, les product owners, les développeurs, les testeurs, ... Cette session a pour but de démontrer les capacités de cet outil, et ce qu'il apporte dans le monde agile. Nous verrons entre autres :

  • l'analyse et le prototyping / storyboarding / sketching d'application
  • la définition et la priorisation du backlog
  • la planification des itérations et leur suivi (kanban, burndown chart)
  • le développement, et la traçabilité des exigences
  • le testing (TDD développement piloté par les tests, tests unitaires, tests d'acceptance)
  • l'intégration continue
  • le feedback client Toutes les démo se feront via les plate-formes Visual Studio 2012 et Team Foundation Server 2012.

Les exemple de code seront en C#.

Speaker

Pierre-Emmanuel Dautreppe, MEET Member et membre fondateur de DotNetHub !

Pierre-Emmanuel est un spécialiste .NET depuis 2002 et travaille actuellement comme expert technique et architecte agile dans des projets .NET. Il est passé dans le monde de l’agilité en 2005, et depuis ce jour, il partage ses expérience, recettes et déconevnues. Il essaye de partager les valeurs et la culture agile. Il donne des conférences et des formations en .NET (C#, testing, intégration continue, application lifecycle management, …) et en agile. En 2009, il a fondé le user group DotNetHub (www.dotnethub.be) pour promouvoir .NET et les méthodologies Agile au Bénélux et en France. Chaque année, il organisé la Journée Agile (Agile Tour francophone) en Belgique (www.journeeagile.be).

Inscriptions

En suivant ce lien : http://events.mic-belgique.be/event/developer-s-first-monday-3.

Ou directement sur cette page :

TextBox

About the author

I'm a developer, blog writer, and author, mainly focused on Microsoft technologies (but not only Smile). I'm Microsoft MVP Client Development since July 2013.

Microsoft Certified Professional

I'm currently working as an IT Evangelist with an awesome team at the Microsoft Innovation Center Belgique, where I spend time and energy helping people to develop their projects. I also give training to enthusiastic developers and organize afterworks with the help of the Belgian community.

MIC Belgique

Take a look at my first book (french only): Développez en HTML 5 pour Windows 8

Développez en HTML5 pour Windows 8

Membre de l'association Fier d'être développeur

TextBox

Month List