Le Post de MCNEXT

Les articles des consultants de MCNEXT

[Visual Studio] Raccourcis clavier pour archiver et récupérer les dernières versions depuis TFS

Archiver souvent est une bonne pratique qui permet de sauvegarder son travail et de faciliter les retours en arrière. Pour optimiser les opérations d’archivage et de récupération des dernières versions depuis TFS, il est intéressant de pouvoir y associer des raccourcis clavier. Pour ceux qui ont déjà essayé la manœuvre, vous avez dû vous apercevoir que les commandes disponibles dans le menu « Tools / Options / Environment / Keyboard » agissent uniquement sur le fichier courant, alors que généralement nous aimerions archiver tous les fichiers extraits dans la solution.

Checkin solution

Les macros comme solution
Afin de piloter programmatiquement Visual Studio généralement nous utilisons les macros, cependant les macros ne sont plus disponibles dans Visual Studio depuis la version 2012 !
Microsoft ayant trouvé cette fonctionnalité lourde à maintenir pour seulement 1% d’utilisateurs intéressés (Source).

Pour combler ce manque, il existe l’add in Visual Commander qui permet d’exécuter des macros de façon identique aux anciennes versions de Visual Studio. Il est disponible ici.
La version gratuite de l’add in est limitée à 5 commandes, mais c’est largement suffisant pour nos 2 macros.
Remarque : Pensez à relancer Visual Studio après l’installation.

Pour créer une nouvelle commande avec Visual Commander via le menu « VCMD / Commands » puis cliquez sur « Add » et insérez dans le corps de la méthode les codes qui suivent.

VisualCommander macro

Pour exécuter une action « Get latest version (recursive) » sur l’item solution :

DTE.Windows.Item(EnvDTE.Constants.vsWindowKindSolutionExplorer).Activate()
Dim itemName = System.IO.Path.GetFileNameWithoutExtension(DTE.Solution.FileName)
DTE.ActiveWindow.Object.GetItem(itemName).Select(vsUISelectionType.vsUISelectionTypeSelect)
DTE.ExecuteCommand("File.TfsGetLatestVersion")

Pour exécuter une action « Check In… » au niveau de la solution :

DTE.Windows.Item(EnvDTE.Constants.vsWindowKindSolutionExplorer).Activate()
Dim itemName = System.IO.Path.GetFileNameWithoutExtension(DTE.Solution.FileName)
DTE.ActiveWindow.Object.GetItem(itemName).Select(vsUISelectionType.vsUISelectionTypeSelect)
DTE.ExecuteCommand("File.TfsCheckIn")

Si vous souhaitez associer un raccourci clavier à vos commandes, rendez vous dans le menu « Tools / Options / Environment / Keyboard », trouver les commandes « VCmd.Command0x » et associez-y les raccourcis clavier désirés sachant que les numéros correspondent à l’ordre des commandes créées dans Visual Commander.

 

En complément, si vous souhaitez archiver entièrement au clavier, vous pouvez procéder ainsi :

  1. [Raccourci que vous aurez défini]
  2. [Saisissez votre commentaire de check in]
  3. [Alt+I]

[TFS] Configuration de Team Foundation Serveur Proxy

Lorsqu’une équipe de développeurs travaille sur un site distant, l’utilisation du contrôleur de source de TFS peut requérir de la bande passante. Pour pallier à ce problème, on peut utiliser un TFS proxy.

Celui-ci va garder en cache les fichiers et les pièces jointes de test, afin de pouvoir les servir plus rapidement et libérer de la bande passante.

Cependant la configuration matérielle pour ce serveur TFS proxy est plus élevée que celle du serveur TFS.

Configuration Matérielle

Le TFS proxy est donc installé sur un serveur qui se trouve sur le même emplacement que l’équipe distante. Il n’est pas conseillé de l’installer sur me même serveur que le serveur TFS Applicatif.

Voici la configuration matérielle préconisée par Microsoft pour le serveur TFS proxy, en fonction de la taille de l’équipe

Installation et Configuration de Team Foundation Serveur Proxy

Pour installer le TFS proxy, il faut d’abord installer TFS , il s’agit de la même procédure d’installation que TFS

Pour le configurer :

Dans la console d’administration de TFS, cliquez sur Serveur Proxy, puis sur Configurer les fonctionnalités

 

Lire la suite

[TFS] Supprimer définitivement une build

Dans cet article j’aimerai expliquer comment supprimer définitivement une build, que ce soit:

  • pour libérer de l’espace dans la base de TFS (comme expliqué dans mon autre article)
  • pour résoudre un problème que je rencontre souvent, c’est celui auquel une build échoue , lorsque je la relance , celle ci echoue directement car son numéro existe déjà. La solution consiste à supprimer la 1ere build échouée (soit manuellement soit par la rétention), puis à la supprimer définitivement.

Voici donc le détails des étapes pour effectuer cette suppression définitive

Etape 1 : La suppression

Par la rétention

Dans la configuration de la définition de la build, le dernier onglet permet de configurer la rétention, c’est-à-dire le nombre de builds à conserver selon leurs statuts.

Lire la suite

SSRS – DESIGN LAYOUT FOR EXECUTIVE DASHBOARD

A year ago I had the opportunity to work on an executive dashboard re-design project. The current dashboard was developed few years back using SSRS 2005; it was quiet basic and only included small tables to show KPIs without any nice layout. The project was therefore to keep the existing KPIs but produce a “modern design” dashboard using SSRS 2012.

Before starting I’d like to mention that this article is not meant to be technical; it’s mostly my thoughts about report design after working on this project.

I must say that I was skeptical about being able to produce good looking dashboard with SSRS – I am talking here not only about showing a fancy gauge and a graph, but being able to see the whole report as a smooth and modern design layout. Ok we are developers, design is not our job but when working on a dashboard project, I think that is becoming part of the job.
I also often hear these days that SSRS is a dying tool as there is no much development made by Microsoft in the last year(s); the focus being mostly on Power BI. I agree with the fact that SSRS needs a bit of a refresh but having worked with it for a while I know that with a bit of work you can archive a lot.

So I started to look around SSRS blogs to see what actually people can archive visually with this technology. There are a lot of SSRS Blogs out there with good examples. Going through the reading I found a great article from Jason Thomas on how he managed to reproduce a Dundas dashboard. I must say that this article was a relief for me, seeing that you can reproduce all those Dundas chart convinced me that “modern” design dashboard with SSRS was feasible!
So I downloaded the .rdl file from his article, I realized that all the charts were somehow complex or needed lots of expressions to be managed properly, nevertheless it was still possible.

 

PROJECT
I first started to draft with my client how they wanted the dashboard to look like. This is a crucial step in order to get a good visualization of what is expected from the customers / users. Very often the customers don’t really know what they want until this step is done so it does help to get an overall picture for both the client and the developer.

We came up with this result:

  • 6 different parts, each of them including a main KPI (with an arrow for value trend comparing to last year value
  • Couple of graph to show the value trend for the last 4 years, all charts must use the same Vertical axis range, not starting from 0.
  • Maximum of 4 seconds for rendering
  • Good looking report and easily readable
  • Readable on Ipad

1stDraftOfTheDashBoard
1st draft of the Dashboard

 

GENERAL DESIGN
What I mostly realized when working on the design of this report is that you should change most of the default SSRS layout setting. And first of all, do not use black color, use a nice gray. I know that this seems like a detail but black color is aggressive for the eye and you will not have a smooth report with black in it (unless it’s your main color like using a black background). So go to properties and change all the text color, font color, line color, border color, etc… to Dim Gray + Bold instead of Black. This is also/mostly valuable for chart: change the label, data label, Axis line, background line, Tick Marks color, etc… to Dim Gray or even Silver color. You can also use report properties custom code in order to write a function to assign a default color.
For colors, use light colors and colors that match, I know that seems logical but how many reports I have seen that looks sooo terrible only because of wrong colors chosen. You can go on internet and check for colors on website you like and you can get the color code using some of the nice and free tools on the internet like instant Eye dropper or ColorZilla. This will save you a bit of time to find the right colors. I’m sure you have already some websites in mind!

InstantEyeDropper

Instant Eye dropper selecting a green color on a webpage

Then in order to make the report easily readable, I started removing all the visual pollutions => exit the huge logo, decorative lines or background color “for decoration”. The actual trend for website design is “flat design” so we should also use this technique, and it makes a dashboard much more readable! Take a minute and read the Top 10 web design trends 2014, especially the number 1.
Therefore exit also the 3D chart that looks like 1995… It is better to use a nice flat 2D chart. No, SSRS cannot render properly 3D …
I found a lot of nice dashboards on the internet very complicated or with black background, I definitely think that when working daily with numbers you need an as clean as possible visualization. Demos are one thing, daily work is another… (The wow effect does not work every day…

 

KPI BOX
I do not like the default KPI box in SSRS so I used Jason’s article way to build my own box. It does take a bit of time but it looks better at the end. Simply draw something first and then reproduce it inside a table by hiding the unnecessary lines and borders. Hide as much lines as possible, keep only the necessary.

Here is an example of KPI boxes created from a table:

Design:
Design View
Rendering :
RenderingView
For the trend arrow I use my own image and added a custom code property to display the correct image depending on the percent increased vs. last year (Percent already calculated in the query).

CustomCodeWindow

PropertiesChart

 

You can also implement the logic directly as an expression for the Image value, however for good practice and future references it is better to add all code in one place so the custom code window is a good candidate.

 

CHARTS
One of the requirements was to use the same vertical axis range for all charts in order to compare them easily. The best way I found was to calculate the Min, Max and intervals in advance in the T-SQL query using this logic:
Take the Max value +20% and round it up: 3012621 + 20%= 3615146, rounded up= 4000000
Take the Min value -20% and round it down: 1087495 – 20%= 906246, rounded down= 900000
Take the difference divided by 4 (for 4 intervals) then round it up: 4000000 – 900000 =3100000 / 4 = 775000, rounded up = 800000.
So the interval will have a value of 800000.

SELECT
*
,ROUND( (MaxTotalModifiedRound – MinTotalModifiedRound) /4 , – (LEN((MaxTotalModifiedRound – MinTotalModifiedRound) /4)-1)) as interval — Dif Min and Max value then divided by 4 then rounded up

FROM (
SELECT
id, YearNum, Total

,CAST( Min(Total) OVER() as int) as MinTotal
,CAST( MAX(Total) OVER() as int) as MaxTotal

,CAST( Min(Total) OVER() / 1.2 as int) as MinTotalModified
,CAST( MAX(Total) OVER() * 1.2 as int) as MaxTotalModified

,ROUND( CAST( Min(Total) OVER() / 1.2 as int) , -(len( CAST((Min(Total) OVER())/1.2 as int))-1) ) as MinTotalModifiedRound — Min Total rounded : Total – 20% then rounded down
,ROUND( CAST( MAX(Total) OVER() * 1.2 as int) , -(len( CAST((MAX(Total) OVER())*1.2 as int))-1) ) as MaxTotalModifiedRound — Max Total rounded : Total + 20% then rounded up

FROM …

DataChartAxis

You can then add these values into the vertical axis properties of the charts:

ChartAxisProperties

It will then display like this:

ChartView

 

PERFORMANCE
The goal was a maximum of 4 seconds for rendering. Having lots of dataset and going back until 4 years of data, I decided to create Indexed views that will include only the grouping level necessary for the report.
There are 2 parameters in the report to choose the team and the date of analyze, I have therefore grouped my data this way in the indexed view. You can get a very high increase of performance with indexed views (x10+) ; however there is a lot of drawback with these particular views. See recommendation here.

 

IPAD
One of the goals of the dashboard was to be able to visualize it from an Ipad. With SQL Server 2012 SP1, you can now view SSRS reports on the Ipad and Windows surface device, however the report will not necessary be resized correctly. One of the options is to use a command in the URL which will resize the report: &rc:Zoom=Whole%20Page. Using this command the report will render in full page weather you use your Ipad vertically or horizontally. « Whole Page » will attempt to zoom the report to such a level that the entire page is displayed at once in your report viewing frame – whether than means scaling it up or down.
Being able to visualize report from an Ipad is a great improvement, however it is still not easy to navigate or change parameters in small devises. I did a bit or research on internet and found that there are a lot of app. or tools to help visualized SSRS reports on mobile devises.

Here are my best 3:

  • Forerunners, they basically redeveloped the Report Manager in HTML5 so you can visualize SSRS reports on all devises. It is also much easier to use the parameters on small screen. It has been created by Jason Carlson, previous SSRS architect in MS (read interview here) and the new V3 seems promising:
    – Allowing designers to add client side JavaScript on text boxes or images
    – Define fixed size tables and matrixes
    – Scroll within a fixed region instead of expanding the page size
    – Enable editing of data with updatable controls
    – Easily post data to another application using HTML forms in your reports
    – Include information from other applications in your report via an IFrame
  • MobiWave, This App display SSRS report and also SharePoint documents
  • SSRS Report Viewer, This App display SSRS report and also SharePoint documents

My best bet is Forerunners so far as the license cost is low comparing to other products, and implementation very simple – no need to install any app. on each devises. There is also lots of other good tools, maybe better, but usually much more expensive. My goal here was only to display existing reports on mobile devises without any extra development.
Please let me know if you tried other / better tools!

 

FINAL REPORT
Finally here is a screenshot of the dashboard:

DashBoard

 

Overall it is not a complicated dashboard to produce, it only takes some time to build the table/boxes for your KPIs (and make them rendering correctly and in-line once deployed!). I also add to work with the requirement of the customer which does not seem logical to me sometimes… like using histograms instead of line chart for sales trend…

What I mostly wanted to show here is that you can show data that does not look like simple tables with only few tricks in SSRS.

You will find the .rdl file here for VS 2010, I have modified and hardcoded all values so simply point the DataSource to the master db and you should be able to execute the report.

Let me know what you think and if you have other ideas please share with me!

[TFS] Accessibilité à Team Foundation Server

Lorsque l’on veut accéder à une fonctionnalité de Team Foundation Server (TFS), on se demande quel est l’outil le mieux adapté.

Je vous propose une liste des différents outils disponibles ainsi que leurs fonctionnalités.

Visual Studio

L’accès à TFS se fait via la fenêtre Team Explorer

Cette fenêtre donnes accès à toutes les fonctionnalités nécessaires à un développeur :

  • Accès aux Work items (My Works)
  • Ces modifications en attentes
  • Les reports
  • Les Builds
  • Et le Control de sources

Lire la suite

Intégrer Beyond Compare à Visual Studio

L’outil de comparaison et de fusion de fichiers fourni de base avec TFS est vraiment très basique et ne permet pas d’être efficace.

« Beyond Compare » est beaucoup plus convivial et complet que l’outil de base de TFS.

Il est disponible sur www.scootersoftware.com mais une licence est nécessaire à son utilisation.

C’est un outil recommandé à tous ceux qui ont besoin de :

  • Comparer le contenu d’un fichier, d’un dossier ou d’une arborescence
  • Synchroniser des dossiers avec une mise à jour en miroir, une mise à jour uni ou bidirectionnelle

Nous allons donc remplacer l’outil de comparaison et de fusion de TFS par Beyond Compare 3 qui propose beaucoup plus de fonctionnalités :

  • Utilisation des couleurs pour un meilleur suivi
  • Mise en valeur uniquement du texte qui a changé sur la ligne (et non toute la ligne)
  • Suivi évolué des modifications en superposant toutes les versions d’une même ligne
  • Et plein d’autres fonctionnalités

Lire la suite

Comment réduire la taille de la base de données de TFS

Lorsque l’on est administrateur TFS (Team foundation server), il convient de s’assurer d’une bonne maintenance des bases de données TFS.

Je vous propose dans cet article quelques bonnes pratiques et la procédure pour réduire et optimiser la taille de la base de données de Team foundation server.

En effet, j’ai récemment été confronté à ce problème, la taille de la base étant de 23 Go elle était donc difficile de maintenir.

Voici les propriétés de la base Tfs_DefaultCollection:

Le principe est de supprimer tout ce qui est de type : workspace , shelvset,et builds, puis les résultats de test et enfin de libérer l’espace disponible à la fin.
Pour commencer nous allons supprimer les workspaces inutiles, les shelvest, les builds, et les éléments du contrôle de sources qui sont en état de suppression. Lire la suite

Build 2014 – Migration d’une application Windows Phone et Windows 8 vers les Universal Apps (Channel 9) : Stéphanie Hertrich, expert technique Microsoft France, reçoit John Thiriet, MVP client dev chez MCNEXT – via @ch9

Build 2014 – Applications Windows Phone 8.1 en HTML et en Javascript (Channel 9) : David Rousset, Microsoft France, reçoit Guillaume Leborgne, MCNEXT – http://bit.ly/1pX4SDs via @ch9

Best practices for WinJS applications

It’s a very exciting time for writing HTML5 native apps for Windows 8, and now for Windows Phone 8.1. WinJS is a very powerful framework but when you start using it, you may experience some trouble. This article will try to give you some advices on how to design your code, and how to avoid the most common pitfalls.

it’s HTML5 and javascript, but it’s not web

This is my first advice and you should take it very seriously ! You are using HTML5 to build native apps. It requires a different mindset, both in coding and user experience. If you are a web veteran, you might have some habits that you will have to lose. In such an application things are stateful, and you are composing screens based on fragments of html/javascript/CSS that should be independant. If you are familiar with single page applications, you are probably familiar with this mindset.
Another point to keep in mind is the security context. In a Windows application, you will not have to deal with CORS concerns, but you will have to be aware of other security or platform restrictions. Let’s name a few :

  • you are not able to use « alert » or « confirm », use system dialogs instead.
  • you are not allowed to inject anything through « innerHTML », HTML is fine, but adding scripts may trigger an error.

learn javascript

Many developpers, especially in the .NET world, tends to consider javascript as a 2nd rank language, something dirty. Others may think they know it because it ressemble C# or java (look, it has curly brackets…), and because they have used a jQuery plugin long ago.
The truth is that javascript is a very powerful language, and that it’s totally different from languages like C# or java (static, strongly typed, object oriented). Javascript is ascripting, functional, prototyped language.
There is beauty and horsepower in this language, but you also have some horrible things. A book like « javascript the good parts » from Douglas Crockford may help you understand which parts to use and why.

learn promises

If you enter Windows 8 and/or Windows Phone 8.1 application, you enter a world of asynchronous programming. In javascript asynchronous means callbacks and promises, at least until EXCMAScript 6 (which should introduce an equivalent of C# async/await). Many libraries uses promises to manage asynchronous calls, it is a very common pattern (jQuery, Angular, Node.js, …).

The principle is dead simple. When you call for an asynchronous operation, you don’t get a direct result like you would in an arythmetic operation :

var a = 12 + 42;

Instead, when calling an asynchronous operation you will get a promise that you will be notified for the result when it becomes available. To get notified, you will have to tell that promise what you want to do when the operation will succeed, or what to do if it fails. You will end up with something like this :

myFunkyAsynchronousCall().done(function successCallback(result){
  //what to do when successfull
}, function errorCallback(error){
  //what to do on error
});

In WinJS you can build promises with « done » or with « then ». Both functions has the same parameters (complete, error, and progress callbacks). The difference is that « then » is returning a promise, it’s a continuation operation, while « done » returns nothing and it’s the end of the asynchronous pipeline. The « then » is pipelining errors but not « done ». Be mindfull that pipelining errors make them hard to debug…

Generally speaking use « then » for chaining promises. Otherwise, use « done ». Just like this :

myFunkyAsynchronousCall().then(function successCallback(result){
  return anotherFunkyAsyncCall();
}).done(function secondSuccessCallback(2ndAsyncCallResult){
  //pipeline success
}, function pipelineErrorCallback(error){
  //what to do on error
});

benefit from HTML5, CSS3, and ECMAScript 5

You are in a place where you know which features you can use. Embrace it ! this is especially true for CSS3 layouts capabilities like flexbox, CSS grid, and properties like « box-sizing ». If all that does not sound familiar, go learn the benefits of CSS3. CSS grid alone can saves you hours of margin+padding nightmares.

you have fragments, use them to store your variables

If you look at what you get when you create a new WinJS project with Visual Studio, you will see a bunch of variables floating around. The Windows 8 samples are no better for that matter. Remember that those code portions are there to demonstrate Windows or WinJS capabilities, not javascript best practices.

You will compose your UI through independent peaces of HTML and javascript. With « WinJS.UI.Pages.define » or WinJS controls, you will define controllers attached to a fragment of HTML. If a variable belongs to a piece of UI, put it inside the code of this fragment.

For exemple, please, please, DON’T write code like this :

(function () {
    "use strict";
    var myvariable;

    WinJS.UI.Pages.define("/pages/home/home.html", {
        ready: function(element, options){
        	myvariable = options.someNavigationParameter;
        }
    });
})();

In the exemple above « myvariable » clearly belongs to the page itself but it is static. Using it like this is bad for several reasons. I will just detail two of them :

  • if you have closure relying on this variable, you may end up with memory leaks because the variable will retain the whole page in memory.
  • you may end up with strange behaviors when you will navigate back and forth to this page, because the variable will still exist with a previous value. Combined with a few asynchronous calls, you will have a very exciting time debugging this kind of issues.

Avoiding those troubles is as easy as this :

(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {
        ready: function(element, options){
        	this.myvariable = options.someNavigationParameter;
        }
    });
})();

scope your DOM selectors

This one is also related to the fragment based approach. Imagine that you have a page called « detail ». From this « detail » page you navigate to the same « detail » page but with different parameters. If you are using DOM selectors based on document like « document.getElementById » you will end up with strange behaviors.
The reason is quite simple. When navigating to the second page, getElementById will return the first node with that Id. Depending on your code, the first instance of the page may still be in DOM at that point in time, so your selector will give you a soon to die DOM element. Another case when non-scoping DOM selectors can hurt you is when you are navigating fast in the application. For example opening a page and clicking as fast as possible on the back button. If your page use asynchronous call, and you leave the page before the asynchronous call returns, all your global selectors will return nothing.

Scoping your selector is very easy. First, the « init », « load » and « ready » functions are taking the fragment element as an argument. Secondly, the page object itself has a property called « element » that points to the DOM element of that specific page. Just call « page.element.querySelector(‘#myDomElement’) ». If you are using jQuery for your selectors, remember that jQuery allows you to use scope : « $(‘#myDomElement’, page.element).css(‘display’, ‘none’);

scope your CSS

For better maintainability, we tend to have a CSS document for each fragment. Those CSS are loaded on the fly when WinJS loads each fragment, but they are loaded only once. If you don’t scope your CSS selectors, you may end up with naming collisions. Let’s take an example : fragment A define a CSS class « .myButton » with color red, and fragment B define a CSS class « .myButton » with color green. You navigate to fragment A, the engine loads the associated CSS and the button is red. Now you navigate to fragment B. The engine loads the corresponding CSS and the button green. So far so good. Now if you return to fragment A, the button will stay green because the CSS for fragment A is already loaded and overriden with the one from fragment B. What is funny with this problems is that the resulting behavior will come after some time, and it will depends on the order in which you navigate. Fortunately, the DOM explorer in Visual Studio will help you to find out because you could see the file owning the styles applyed to an element.

As well as what we described for javascript selectors, the best thing to do is to scope your CSS. If you use something like « .fragmentA .myButton { background-color: red } », you lower considerably the risk for namespace collisions.
Using a CSS preprocessor like « .less » may help a lot because you will be able to nest elements instead of cloning selectors. For example, you will write :

.fragmentA {
  .myButton {
    background-color: red
  }
}

The good news is that you could use less today within Visual Studio, and enforce it with Visual Studio extensions like « Web essentials »

use javascript’s bind

The « this » context in javascript is something that is not always fun. Fortunately there are helpers that could help a lot, and the « bind » function is among the most interesting. It’s a function of the function object, that returns a function bound to a specific « this » context.
Well… it’s probably better to take an example :

(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {
        ready: function(element, options){
        	var page = this;
        	page.myButton = element.querySelector('#myButton');
        	page.myButton.addEventListener('click', page.buttonClicked.bind(page));
        }

        buttonClicked: function(arg){
        	var page = this;
        	//do something with your page
        }
    });
})();

The « .bind(page) » used when registering the event forces the « this » context to the page object inside the « buttonClicked » function. Without it, the « this » variable Inside « buttonClicked » would correspond to the button itselt.

use libraries

A Windows or Windows Phone apps written with WinJS is not web but it is still HTML / CSS / javascript. There are tons of libraries and jQuery plugins out there that will help you make great apps. There are also some librairies dedicated to WinJS, like WinJS Contrib that could help you a lot.

have fun !

WinJS is not perfect but I have a lot of fun writing applications with it, I hope you will have too.

Suivre

Recevez les nouvelles publications par mail.

Rejoignez 27 autres abonnés