Customize your TFS build process to run StyleCop

/2 Comments/in /by

This will be a short guide on how to get StyleCop to run for every check-in as a part of your build process in TFS or VisualStudio Online. You may also integrate stylecop with the project’s MSBuild file, see StyleCop docs for how to do so.

 
Start off by downloading and installing StyleCop and TFS build extensions.

Build controller changes

First you’ll need to set the custom assemblies path for your build controller. I created a new folder Custom Assemblies in the BuildProcessTemplate folder directly under the team project root folder. Also download a copy of the default template.
 

build_process_templates

Add the following assemblies to Custom Assemblies:
  • StyleCop.dll
  • StyleCop.CSharp.dll
  • StyleCop.CSharp.Rules.dll
  • TFSBuildExtensions.Activites.dll
  • TFSBuildExtensions.Activites.StyleCop.dll
Next Manage Build Controllers and set Version control path to custom assemblies to your Custom Assemblies folder from Build Controller Properties.

build_controller_custom_assemblies

 

 

Custom Build Templates

Create a custom build process solution with a Workflow Activity Library project. I created a BuildProcess solution in the BuildProcessTemplates folder and named the workflow project Templates.

build_process_solution

Next rename the DefaultTemplate.11.1.xaml template you downloaded earlier to CustomTemplate.xaml and add it to the project. Make sure you set the Build Action to Content.

build_action_content

Now let’s add the StyleCop activity to the Toolbox window. Add a new tab TFS Build Extensions, right-click and select Choose items. Browse to the assembly TfsBuildExtensions.Activites.Stylecop.dll and click OK.
We want to run StyleCop early in the build process for the build to fail quickly if there are any violations, the first place where StyleCop can be executed is after the Initialize Workspace sequence within the Run on Agent sequence.

build_sequence

Add a new sequence activity right after Initialize Workspace and name it Run StyleCop. Add the following variables with a scope of the Run StyleCop sequence.
  • StyleCopFiles – IEnumerable<string>
  • StyleCopSettingsFile – string
  • StyleCopResults – bool
  • StyleCopViolations – Int32
Now add the following activities:
  1. FindMatchingFiles – Set the result to StyleCopFiles and the MatchPattern to String.Format(“{0}\**\*.cs”, BuildDirectory)
  2. Assign – Set the StyleCopSettingsFile variable to String.Format(“{0}\Settings.StyleCop”, SourcesDirectory)
  3. StyleCop – Set the following properties
    • SettingsFile to StyleCopSettingsFile
    • SourceFiles to SyleCopFiles.ToArray()
    • Succeeded to StyleCopResults
    • ViolationCount to StyleCopViolations.
  4. WriteBuildMessage – Change the Importance level to High and format the message to something like String.Format(“StyleCop was completed with {0} violations”, StyleCopViolations)
My final sequence activity looks like this:

build_sequence_details

Commit the solution if you haven’t done so already.
commit_custom_template

Running the Build

Now edit the build definition you want to run StyleCop for and use the custom template.

use_custom_template

Trigger a new build and violá, you’ll probably have an unsuccessful build.

stylecop_result

Personally I prefer using TeamCity with NAnt for the build process and JIRA for issue tracking, TFS is way behind imho, but the choice isn’t always up to me. ;-)
Cheers!

AngularJS Loading Indicator / Splash screen

/2 Comments/in /by

How do we prevent the flash of unrendered content (FOUC)? We don’t want to simply hide the unrendered content from the user since the user may think that the app is broken, especially if they’re on a slow connection. The browser will start to render elements as soon as it encounters them, we can use this to our advantage to display a full-screen block of HTML while the page is loading, i.e. a splash screen.

Full working sample can be found at http://jsfiddle.net/45EfF/.
Let’s start with the markup, I’ve added a splash div at the top of the body-tag and the css is loaded inline in the head-tag. This way, when the browser starts parsing the body-tag it will lay out the splash screen elements and style them before it starts to load any other files.

  
Loading


	




  Name 
  


  {{greeting}} {{name}}

We want to make sure that the splash screen goes away after the page is loaded, we can do this using the ngCloak directive. The ngCloak directive will add a CSS class that sets a display: none !important on the element and then remove the display: none once the page has been loaded. We can hijack this ngCloak directive for the splash screen and invert the style for the splash element only.


.splash {
	display: none;
}

[ng-cloak].splash {
	display: block !important;
}
		
.splash {
  position: absolute;
	top: 0;
	left: 0;
	height:100%;
	width:100%;	
	filter: alpha(opacity=60);
	opacity: 0.6;
	background: #000;
}

.splash h2 {
	text-align: center;
	font-size: 4em;
	color:white;			
}
Finally, I’ve manually bootstrapped angular to simulate slow loading.

 

It’s as simple as that, hope it helped, cheers!