Archive for the ‘Technical’ Category

Author: Tobias Zimmergren
http://www.zimmergren.net | http://www.tozit.com | @zimmergren

Introduction

A while back an announcement was made that TFSPreview.com had been made available for general testing. Various bloggers at Microsoft put an invitation token in their MSDN blogs so everyone can have a go at it.

In this article series we’ll take a very quick look at what the hosted TFS solution by Microsoft looks like.

Articles currently in the series:

Part 1: Getting Started
Part 2: Connect your development rig (This post)

Connect Visual Studio 2010 to your new hosted team project

In order to be able to connect to the hosted TFSPreview team project, you’ll need to comply with the prerequisites I’m listing here.

Prerequisites

• Make sure you’re running Visual Studio 2010 SP1
• Install KB2581206 – (KB2581206 – Visual Studio 2010 SP1 TFS Compatibility GDR)

Hook up Visual Studio to your new repository/project

Alright, if you’ve downloaded and installed KB2581206 (which means you’re spinning VS2010 SP1 already) you are read to connect. The procedure to connect to the hosted TFS service is basically the same as if you were to connect to any other TFS repository, which is easy and awesome.

In Visual Studio 2010 SP1, simply make these smooth ninja moves and you’re done:

Make sure to fetch the URL of your account (As seen in your dashboard, like depicted below):

Enter this URL in the Visual Studio 2010 dialogs and we’re ready to kick off:

It’ll ask you for your credentials which you need to use to verify your account details:

You should now be authenticated and your repository should be available:

You’ll go ahead as you normally do and choose the projects that interests you and then you’re basically done:

Your Team Explorer should contain your TFS project and you should be able to work with it as you normally would from Visual Studio 2010:

This means you’ve got all of your standard tasks and operations available straight from VS 2010 (So you don’t have to go to the website to make changes …):

Summary

Easy enough. As soon as you’ve downloaded the required tooling to get connected, you can hook up your new cloud-hosted team project in Visual Studio 2010 without any problems. Give it a spin, it flows quite nicely!

Enjoy.

• Posted in Technical
• 3 Comments
• Tags: Cloud, SharePoint, SharePoint 2010, SP2010, TFS, Visual Studio

Author: Tobias Zimmergren | www.tozit.com | @zimmergren

Introduction

Sometimes when you’re in a development project you can feel the pain of debugging. If there’s a lot of code floating around it may be hard to sort out the method calls and how the depend on each other if it’s a very complex solution. To ease the task of debugging there’s a great VS 2010 plugin called Debugger Canvas, which will help you to sort out a lot of the hassle while debugging.

In this article we’ll just take a quick look at what Debugger Canvas is and how it can assist us in our daily debugging adventures.

Getting Started with Debugger Canvas

Firstly, you obviously need to download the extension for Visual Studio 2010, which can be done HERE.

Please note: The Debugger Canvas Extensions are only available for VS 2010 Ultimate

Debugger Canvas in Action

When you’ve installed the extension, there’s a few new opportunities presented when debugging. Your new “F5” experience will be based on the new Debugger Canvas UI instead of the traditional debugging experience which means you’ll be able to more easily follow the calls within your code, like this:

When you step into the code deeper, you’ll see how the calls were made quite easily:

Summary

You should definitely take a look at Debugger Canvas if you haven’t already as it’ll be most helpful for you in your development adventures.

Get a better overview here and watch the introductory video!

Enjoy.

• Posted in Technical
• 3 Comments
• Tags: Debugging, Development, SharePoint 2010, VS2010

Author: Tobias Zimmergren
http://www.zimmergren.net | http://www.tozit.com | @zimmergren

Introduction

In most of my recent projects I’ve been required to hook up some custom functionality and add custom forms, pages and Web Parts. Some of the forms and pages I designed needed to be launched from the Ribbon menu, which of course is contextual. This basically means that when you visit a specific list which inherits from a specific content type, we can choose to display our custom Ribbon controls. One of the most common requirements I bumped into was having some kind of conditional check whether to enable or disable the button based on a set of conditions.

In your Ribbon XML for the CommandUIHandler there’s a property called “EnabledScript” which is a tag that enables you to enter a validation script to determine whether or not the ribbon button should be enabled. In my case I need to disable the custom Ribbon-controls if one item is selected, but otherwise always disable it.

Use the following snippet from the SP.ListOperation, which contains the Selection.getSelectedItems method:

<CommandUIHandler
Command=”Ribbon.Awesome.NavButton_CMD”
CommandAction=”javascript:Alert(‘My Awesome Button Was Clicked’);
          EnabledScript=”javascript:SP.ListOperation.Selection.getSelectedItems().length == 1;” />

It’s really only the last line that is of interest here since that’s where the script magic happens to determine if the control should be enabled or not.

MSDN have some nice samples in one of their articles over here.

Results

If you select one (and only one) item in the list, your custom command will be enabled:

If you didn’t select or selected more than one item, the command will be disabled as such:

Summary

I know many people have been struggling with the Ribbon and making it behave. In this article I simply wanted to highlight one of the very common tasks I’ve seen developers looking for and trying to achieve in some of the last few projects I’ve been involved.

Since my awesome mate Wictor covered a bunch of awesome posts about the Ribbon, I’m not going to dive into any more details than so

Enjoy.

• Posted in Technical
• 5 Comments
• Tags: Development, Ribbon, SharePoint 2010, VS2010

Author: Tobias Zimmergren
http://www.zimmergren.net | http://www.tozit.com | @zimmergren

Introduction

A while back an announcement was made that TFSPreview.com had been made available for general testing. Various bloggers at Microsoft put an invitation token in their MSDN blogs so everyone can have a go at it.

In this article series we’ll take a very quick look at what the hosted TFS solution by Microsoft looks like.

Articles currently in the series:

Part 1: Getting Started (This post)
Part 2: Connect your development rig

What we need to know before getting started…

Firstly you’ll need to get an invitation token from someone who already have an account on tfspreview.com and then you’re good to go. In this post I’ll assume that you’ve got that already.

Sign in to the TFSpreview account you just acquired:

This should give you access to the Team Foundation Service Preview console:

From here you have a few options for proceeding:

• Create a team project – The first step to create a new TFS site and project
• Download software – You’ll want to visit this link so you can download the required software for connecting from VS 2010, if you haven’t already.

To guide you through the process of getting up and running, I’ll create a new project and call it "TOZIT AB Project 42" so you can follow the sample this article through.

Getting Started – Step by step

Right, so you’ve got your account set up and want to create a project. Follow along and I’ll take you through the entire process. Hang on.

Click "Create a team project":

Next you’ll get a dialog telling you the progress of setting the new project up:

When this is done you can navigate directly to the project or click close. I pressed close and made sure I could see the team project in my project list when I press "Browse all…":

Simply click on the "Navigate" button to navigate to the project and you should see your team project dashboard, similar to this:

What you get here is the intro to your Project. You can see in the top menu that you’ve got options for these things:

• Home (This is what you see above)
• Work
• Source
• Build

HOME

As depicted in the screenshot above, this is the welcome screen of the currently selected project. From here you can control your Product Backlog, Product Backlog Items, Sprints, Work Items and so on. Think of this as your online control panel for the Scrum project. Pretty neat, if you ask me.

WORK

Under the "backlog" tab:

You’ll get a more detailed overview over you current situation in the project including the Product Backlog, Sprints and Work Items with an overview as well as detailed information about each item you select. From here you can control, create and modify your current project quite easily from the Web Browser.

For example, you can create a new PBI (Product Backlog Item) from here:

and it’ll immediately appear in the list below, and you can start working with it:

I’m obviously not going to walk you through each and every button on these pages, that’s for you yourself to try out, but this should give you an overview and idea of what’s available.

Under the "board" tab, you can easily get a really awesome overview of your current status in the project with all your Product Backlog Items in the selected sprint. You can easily drag and drop these items from one to the other section:

(Pretty awesome…)

Of course you can edit everything from the browser UI here as well:

Under the "work items" tab you can get a more familiar overview of the current work items, and even create you own queries in the section to the left – much like you would do from Visual Studio otherwise:

SOURCE

Under the Source tab you can see (perhaps one of the most important things) the source code of your project including the history, changesets, shelvesets and so on:

BUILD

An overview of your current build configurations. In this post I haven’t set up any build configurations yet, but keep your eyes out for that soon enough.

Summary

This was intended to be a short introduction of what capabilities and features you’ll see in the hosted Team Foundation Services 2010 hosted service. More on this subject to follow!

Enjoy.

• Posted in Misc, Technical
• 4 Comments
• Tags: Cloud, Source Control, TFS

Author: Tobias Zimmergren
http://www.zimmergren.net | http://www.tozit.com | @zimmergren

Introduction

SharePoint 2010 developing for performance article series:
In this series of articles I will briefly introduce you to some key concepts when it comes to developing for performance in our SharePoint 2010 applications.

Related articles in this article series

Part 1 – SP 2010: Developing for performance Part 1 – Developer Dashboard
Part 2 – SP 2010: Developing for performance Part 2 – SPMonitoredScope
Part 3 – SP 2010: Developing for performance Part 3 – Caching in SharePoint 2010
Part 4 – SP 2010: Developing for performance Part 4 – Logging
Part 5 – SP 2010: Developing for performance Part 5 – Disposal patterns and tools
Part 6 – SP 2010: Developing for performance Part 6 – CSS Sprites
Part 7 – SP 2010: Developing for performance Part 7 – Crunching those scripts
Part 8 – SP 2010: Developing for performance Part 8 – Control that ViewState

Part 8 (this article):
As most of you know, in any ASP.NET project (SharePoint included) there’s something you know as ViewState.  With the ViewState we can persist state of our properties in the page controls and objects across postbacks that happen in our solutions. If we are not careful and plan the usage of ViewState properly, we can end up with a performance hit that will slightly decrease the performance in the page rendering process.

In this article we will take a look at what impact the ViewState can have if we “forget about it”, and of course how we can prevent our pages from being unnecessarily big in page size.

ViewState in our SharePoint projects

If you’ve been developing SharePoint projects of any type, you’ve most certainly been doing some kind of asp.net UI development as well. (Application Pages, Web Parts, User Controls and so on) that are inheriting the asp.net capabilities and hence the ViewState.

What you should know as an ASP.NET developer: Be sure to know when you should, or shouldn’t use the ViewState. You can disable the usage of ViewState for certain components, or the entire page.

Performance considerations

With an increased ViewState you get an increased Page Size which in turn obviously means that the page will take a bit longer to render.

We’ll take a quick look at how the performance can differ when we’re using ViewState and when we’re disabling the ViewState in a SharePoint project.

Taking a look: ViewState

In order for us to really understand what impact the ViewState can have on the page rendering process, we’ll dig into the details of the what the ViewState looks like. To do this we can check out the source of the rendered page, and of course we’ll rely on our faithful squire; Fiddler2.

Before we’ll start digging with the Fiddler2-application, we can simply check the Page Source of any given page being rendered and we’ll most likely find a heap of ViewState madness going on in there.

In my sample application that only consist of a simple GridView control and a few rows of data – the ViewState is turned into this:

 <input type= "hidden "

 

  name= "__VIEWSTATE "

 

  id= "__VIEWSTATE "

 

  value= "/wEPDwULLTE5NjIxMzI1MDIPZBYCZg9kFgICAQ9kFgQCAQ9kFgICDw9kFgJmD2QWAgIBD

 

  w8WAh4HVmlzaWJsZWdkZAIDD2QWBgIRD2QWBGYPZBYEAgEPZBYCZg9kFgQCAg9kFgYCAQ8WAh8Aa

 

  GQCAw8WCB4TQ2xpZW50T25DbGlja1NjcmlwdAVdamF2YVNjcmlwdDpDb3JlSW52b2tlKCdUYWtlT

 

  2ZmbGluZVRvQ2xpZW50UmVhbCcsMSwgMSwgJ2h0dHA6XHUwMDJmXHUwMDJmc3BmJywgLTEsIC0xL

 

  CAnJywgJycpHhhDbGllbnRPbkNsaWNrTmF2aWdhdGVVcmxkHihDbGllbnRPbkNsaWNrU2NyaXB0Q

 

  29udGFpbmluZ1ByZWZpeGVkVXJsZB4MSGlkZGVuU2NyaXB0BSFUYWtlT2ZmbGluZURpc2FibGVkK

 

  DEsIDEsIC0xLCAtMSlkAhUPFgIfAGhkAgMPDxYKHglBY2Nlc3NLZXkFAS8eD0Fycm93SW1hZ2VXa

 

  WR0aAIFHhBBcnJvd0ltYWdlSGVpZ2h0AgMeEUFycm93SW1hZ2VPZmZzZXRYZh4RQXJyb3dJbWFnZ

 

  U9mZnNldFkC6wNkZAIDD2QWAgIBD2QWAgIDD2QWAgIBDzwrAAUBAA8WAh4PU2l0ZU1hcFByb3ZpZ

 

  GVyBRFTUFNpdGVNYXBQcm92aWRlcmRkAgEPZBYCAgUPZBYCAgEPEBYCHwBoZBQrAQBkAjMPZBYCA

 

  gcPZBYCAgEPDxYCHwBoZBYCAgMPZBYCAgMPZBYCAgEPPCsACQEADxYCHg1OZXZlckV4cGFuZGVkZ

 

  2RkAkcPZBYCAgEPZBYCAgEPPCsADQIADxYEHgtfIURhdGFCb3VuZGceC18hSXRlbUNvdW50AukHZ

 

  AEQFgNmAgECAhYDPCsABQEAFgQeCkhlYWRlclRleHQFAklEHglEYXRhRmllbGQFAklEPCsABQEAF

 

  gQfDgUFVGl0bGUfDwUFVGl0bGU8KwAFAQAWBB8OBQtEZXNjcmlwdGlvbh8PBQtEZXNjcmlwdGlvb

 

  hYDZmZmFgJmD2QWNAIBD2QWBmYPDxYCHgRUZXh0BQEwZGQCAQ8PFgIfEAUNU2FtcGxlIEl0ZW0gM

 

  GRkAgIPDxYCHxAFIVppbW1lcmdyZW4ncyBQZXJmb3JtYW5jZSBTYW1wbGUgMGRkAgIPZBYGZg8PF

 

  gIfEAUBMWRkAgEPDxYCHxAFDVNhbXBsZSBJdGVtIDFkZAICDw8WAh8QBSFaaW1tZXJncmVuJ3MgU

 

  GVyZm9ybWFuY2UgU2FtcGxlIDFkZAIDD2QWBmYPDxYCHxAFATJkZAIBDw8WAh8QBQ1TYW1wbGUgS

 

  XRlbSAyZGQCAg8PFgIfEAUhWmltbWVyZ3JlbidzIFBlcmZvcm1hbmNlIFNhbXBsZSAyZGQCBA9kF

 

  gZmDw8WAh8QBQEzZGQCAQ8PFgIfEAUNU2FtcGxlIEl0ZW0gM2RkAgIPDxYCHxAFIVppbW1lcmdyZ

 

  W4ncyBQZXJmb3JtYW5jZSBTYW1wbGUgM2RkAgUPZBYGZg8PFgIfEAUBNGRkAgEPDxYCHxAFDVNhb

 

  XBsZSBJdGVtIDRkZAICDw8WAh8QBSFaaW1tZXJncmVuJ3MgUGVyZm9ybWFuY2UgU2FtcGxlIDRkZ

 

  AIGD2QWBmYPDxYCHxAFATVkZAIBDw8WAh8QBQ1TYW1wbGUgSXRlbSA1ZGQCAg8PFgIfEAUhWmltb

 

  WVyZ3JlbidzIFBlcmZvcm1hbmNlIFNhbXBsZSA1ZGQCBw9kFgZmDw8WAh8QBQE2ZGQCAQ8PFgIfE

 

  AUNU2FtcGxlIEl0ZW0gNmRkAgIPDxYCHxAFIVppbW1lcmdyZW4ncyBQZXJmb3JtYW5jZSBTYW1wb

 

  GUgNmRkAggPZBYGZg8PFgIfEAUBN2RkAgEPDxYCHxAFDVNhbXBsZSBJdGVtIDdkZAICDw8WAh8QB

 

  SFaaW1tZXJncmVuJ3MgUGVyZm9ybWFuY2UgU2FtcGxlIDdkZAIJD2QWBmYPDxYCHxAFAThkZAIBD

 

  w8WAh8QBQ1TYW1wbGUgSXRlbSA4ZGQCAg8PFgIfEAUhWmltbWVyZ3JlbidzIFBlcmZvcm1hbmNlI

 

  FNhbXBsZSA4ZGQCCg9kFgZmDw8WAh8QBQE5ZGQCAQ8PFgIfEAUNU2FtcGxlIEl0ZW0gOWRkAgIPD

 

  xYCHxAFIVppbW1lcmdyZW4ncyBQZXJmb3JtYW5jZSBTYW1wbGUgOWRkAgsPZBYGZg8PFgIfEAUCM

 

  TBkZAIBDw8WAh8QBQ5TYW1wbGUgSXRlbSAxMGRkAgIPDxYCHxAFIlppbW1lcmdyZW4ncyBQZXJmb

 

  3JtYW5jZSBTYW1wbGUgMTBkZAIMD2QWBmYPDxYCHxAFAjExZGQCAQ8PFgIfEAUOU2FtcGxlIEl0Z

 

  W0gMTFkZAICDw8WAh8QBSJaaW1tZXJncmVuJ3MgUGVyZm9ybWFuY2UgU2FtcGxlIDExZGQCDQ9kF

 

  gZmDw8WAh8QBQIxMmRkAgEPDxYCHxAFDlNhbXBsZSBJdGVtIDEyZGQCAg8PFgIfEAUiWmltbWVyZ

 

  3JlbidzIFBlcmZvcm1hbmNlIFNhbXBsZSAxMmRkAg4PZBYGZg8PFgIfEAUCMTNkZAIBDw8WAh8QB

 

  Q5TYW1wbGUgSXRlbSAxM2RkAgIPDxYCHxAFIlppbW1lcmdyZW4ncyBQZXJmb3JtYW5jZSBTYW1wb

 

  GUgMTNkZAIPD2QWBmYPDxYCHxAFAjE0ZGQCAQ8PFgIfEAUOU2FtcGxlIEl0ZW0gMTRkZAICDw8WA

 

  h8QBSJaaW1tZXJncmVuJ3MgUGVyZm9ybWFuY2UgU2FtcGxlIDE0ZGQCEA9kFgZmDw8WAh8QBQIxN

 

  WRkAgEPDxYCHxAFDlNhbXBsZSBJdGVtIDE1ZGQCAg8PFgIfEAUiWmltbWVyZ3JlbidzIFBlcmZvc

 

  m1hbmNlIFNhbXBsZSAxNWRkAhEPZBYGZg8PFgIfEAUCMTZkZAIBDw8WAh8QBQ5TYW1wbGUgSXRlb

 

  SAxNmRkAgIPDxYCHxAFIlppbW1lcmdyZW4ncyBQZXJmb3JtYW5jZSBTYW1wbGUgMTZkZAISD2QWB

 

  mYPDxYCHxAFAjE3ZGQCAQ8PFgIfEAUOU2FtcGxlIEl0ZW0gMTdkZAICDw8WAh8QBSJaaW1tZXJnc

 

  mVuJ3MgUGVyZm9ybWFuY2UgU2FtcGxlIDE3ZGQCEw9kFgZmDw8WAh8QBQIxOGRkAgEPDxYCHxAFD

 

  lNhbXBsZSBJdGVtIDE4ZGQCAg8PFgIfEAUiWmltbWVyZ3JlbidzIFBlcmZvcm1hbmNlIFNhbXBsZ

 

  SAxOGRkAhQPZBYGZg8PFgIfEAUCMTlkZAIBDw8WAh8QBQ5TYW1wbGUgSXRlbSAxOWRkAgIPDxYCH

 

  xAFIlppbW1lcmdyZW4ncyBQZXJmb3JtYW5jZSBTYW1wbGUgMTlkZAIVD2QWBmYPDxYCHxAFAjIwZ

 

  GQCAQ8PFgIfEAUOU2FtcGxlIEl0ZW0gMjBkZAICDw8WAh8QBSJaaW1tZXJncmVuJ3MgUGVyZm9yb

 

  WFuY2UgU2FtcGxlIDIwZGQCFg9kFgZmDw8WAh8QBQIyMWRkAgEPDxYCHxAFDlNhbXBsZSBJdGVtI

 

  DIxZGQCAg8PFgIfEAUiWmltbWVyZ3JlbidzIFBlcmZvcm1hbmNlIFNhbXBsZSAyMWRkAhcPZBYGZ

 

  g8PFgIfEAUCMjJkZAIBDw8WAh8QBQ5TYW1wbGUgSXRlbSAyMmRkAgIPDxYCHxAFIlppbW1lcmdyZ

 

  W4ncyBQZXJmb3JtYW5jZSBTYW1wbGUgMjJkZAIYD2QWBmYPDxYCHxAFAjIzZGQCAQ8PFgIfEAUOU

 

  2FtcGxlIEl0ZW0gMjNkZAICDw8WAh8QBSJaaW1tZXJncmVuJ3MgUGVyZm9ybWFuY2UgU2FtcGxlI

 

  DIzZGQCGQ9kFgZmDw8WAh8QBQIyNGRkAgEPDxYCHxAFDlNhbXBsZSBJdGVtIDI0ZGQCAg8PFgIfE

 

  AUiWmltbWVyZ3JlbidzIFBlcmZvcm1hbmNlIFNhbXBsZSAyNGRkAhoPDxYCHwBoZGQYAgUfY3RsM

 

  DAkUGxhY2VIb2xkZXJNYWluJEdyaWRWaWV3MQ88KwAKAQgCKWQFR2N0bDAwJFBsYWNlSG9sZGVyV

 

  G9wTmF2QmFyJFBsYWNlSG9sZGVySG9yaXpvbnRhbE5hdiRUb3BOYXZpZ2F0aW9uTWVudVY0Dw9kB

 

  QRIb21lZGnihW5zRhNmmnQef2E5KXJlKgIU" />

 

If you compare the aforementioned ViewState with the very same page but with the ViewState disabled, it would look like this:

 <input type="hidden"

 

  name="__VIEWSTATE"

 

  id="__VIEWSTATE"

 

  value="/wEPDwULLTE5NjIxMzI1MDJkGAIFH2N0bDAwJFBsYWNlSG9sZGVy

 

  TWFpbiRHcmlkVmlldzEPPCsACgEIAilkBUdjdGwwMCRQbGFjZUhvbGRlclR

 

  vcE5hdkJhciRQbGFjZUhvbGRlckhvcml6b250YWxOYXYkVG9wTmF2aWdhdG

 

  lvbk1lbnVWNA8PZAUESG9tZWTEsK7AlAZmIZYt/bke1dmkbPKxhg=="/>

 

What impact can these few lines of markup have on the page rendering process anyway, you say? Well, in order to find out – let’s summon our good friend Fiddler2 and do a quick comparison.

	ViewState Enabled	ViewState Disabled
Body size (bytes)	14 534 bytes	12 883 bytes
Load time (seconds)	0.3765430 seconds	0.2031263 seconds

A visual comparison of the same page with versus without ViewState enabled:

Body Size comparison (bytes)	Load Time comparison (seconds)

So what can I do to tune and tweak the ViewState?

There’s generally two good initial tips for tuning the ViewState.

• Disable ViewState for the entire page
• Disable ViewState for selected components

The first option is good if you don’t need to use ViewState in any of the components on your page. Then you can simply disable ViewState by setting the ViewStateEnabled property to false:

  <%@ Page Language="C#"

 

     AutoEventWireup="true"

 

     CodeBehind="ViewStateSample.aspx.cs"

 

     Inherits="Zimmergren.Samples.ViewState.ViewStateSample"

 

     DynamicMasterPageFile="~masterurl/default.master"

 

     EnableViewState="false"  %>

 

The second option is good if you need the ViewState for certain components, but you want to disable it for others. You can disable the ViewState for specific components;

     <asp:GridView ID="GridView1"

 

         runat="server"

 

         AutoGenerateColumns="False"

 

         AllowSorting="true"

 

         AllowPaging="true"

 

         PageSize="25"

 

 EnableViewState="false"

 

         />

 

Additional Tip: Take a look at HTTP compression

In addition to being aware of the ViewState in any asp.net project, you should take a look at HTTP Compression that you can enable in IIS.

Read more on HTTP Compression

Summary

Alright – the summer is officially over (at least of you take a look at the recent weather) and I’m back in the saddle. In this article I’ve been talking a bit about how the ViewState can impact your performance in any asp.net project (hence SharePoint project). The reason for talking about it is that I’ve seen quite the amount of projects as of late that doesn’t think about the impact a huge ViewState can have on the time it takes to download and render a page on the client.

An important consideration that I’ve learned throughout all our projects to create Internet-facing sites based on SharePoint (or plain old ASP.NET) is to measure the performance in different scenarios, including some stress testing and load tests. In most of these projects we’ve seen an increased performance if we take time to select what components or pages should disable ViewState. It might be worth considering.

Note that this is a minimal sample with minimal impact. Consider when you’ve got a huge page with 10+ Web Parts and all using the ViewState, even if they don’t really need to – can you imagine the page load times increasing? The answer is probably yes

Enjoy.

• Posted in Technical
• No Comments
• Tags: ASP.NET, Performance, SharePoint, SharePoint 2010

     public partial class VisualProductSalesUserControl : UserControl

     {

         private const string connectionString = "Server=tcp:YOURSERVER.database.windows.net;Database=ZimmergrenDemo;User ID=Username@YOURSERVER;Password=myAwesomePassword++;Trusted_Connection=False;Encrypt=True;" ;

         private string selectCommand = "select * from ZimmergrenDemo.dbo.ProductSales;" ;

         private DataTable productSalesData = new DataTable ("ProductSales" );

         protected void FetchAndFill(string connectionString, string selectCommand)

         {

             using (var connection = new SqlConnection (connectionString))

             {

                 var adaptor = new SqlDataAdapter

                 {

                     SelectCommand = new SqlCommand (selectCommand, connection),

                 };

                 adaptor.Fill(productSalesData);

                 salesGrid.DataSource = productSalesData;

                 salesGrid.DataBind();

             }

         }

         protected void Button1_Click(object sender, System.EventArgs e)

         {

             FetchAndFill(connectionString, selectCommand);

         }

     }

• Posted in Technical
• 4 Comments
• Tags: Featured, SharePoint, SharePoint 2010, Windows Azure

• Posted in Business, Technical
• No Comments
• Tags: Office 365

• Posted in Technical
• No Comments
• Tags: Performance, Scripts, SharePoint, SharePoint 2010

Author: Tobias Zimmergren
http://www.zimmergren.net | http://www.tozit.com | @zimmergren

Introduction

SharePoint 2010 developing for performance article series:
In this series of articles I will briefly introduce you to some key concepts when it comes to developing for performance in our SharePoint 2010 applications.

Related articles in this article series

Part 1 – SP 2010: Developing for performance Part 1 – Developer Dashboard
Part 2 – SP 2010: Developing for performance Part 2 – SPMonitoredScope
Part 3 – SP 2010: Developing for performance Part 3 – Caching in SharePoint 2010
Part 4 – SP 2010: Developing for performance Part 4 – Logging
Part 5 – SP 2010: Developing for performance Part 5 – Disposal patterns and tools
Part 6 – SP 2010: Developing for performance Part 6 – CSS Sprites
Part 7 – SP 2010: Developing for performance Part 7 – Crunching those scripts
Part 8 – SP 2010: Developing for performance Part 8 – Control that ViewState

Part 6 (this article):
In web development today its very important to keep performance in mind – this is especially important in any site that is published externally or for whatever reason will have heavy traffic. In this article I will briefly cover the area of CSS Sprites, how they are implemented in SharePoint 2010 and of course how you can create them yourself.

Introduction to CSS Sprites

What are CSS sprites anyway?

CSS sprites is a technique used to reduce the number of requests for images on a site when visiting it. Normally when you see a web site today there’s plenty of files being requested and loaded upon the request made. With the use of CSS sprites we can reduce the amount of files that we need to request from the server by consolidating many image files into one file and use CSS to display the correct part of that consolidated image when it needs to depict your specific image.

Short in short: Take a bunch of separate images and smack them together to one single file. Voila, you’ll only need to request one file from the server.

SharePoint 2010 and CSS Sprites

So why are we talking about CSS sprites here anyway, isn’t this supposed to be all about SharePoint and awesomeness? But of course, and that’s exactly why we’re talking about it – CSS sprites are a natural part of a normal SharePoint 2010 installation. By default, there’s CSS sprite techniques used to render and display images in (for example) the Ribbon menu.

These are some samples of images used with CSS sprites in SharePoint 2010:

FGIMG.PNG	jsgridcluster.png

As you can see in any of the two images above the many small images/icons have been smashed together into one single image file and then there’s some CSS magic to position it. This is basically what it’s all about.

Why should I bother learning to use CSS sprites?

This would be like asking yourself the question "Why would I develop something that is of great performance" or "Why would I do something awesome". No more rhetorical questions please

Of course the reasoning behind creating CSS sprites are that you can develop web applications that can reduce the page load and enhance the performance of your sites and make them load quicker and be more responsive.

Creating CSS sprites for my applications? How?

There’s a few ways to create CSS sprites for you own applications.

• Do it manually.
  • This approach requires a lot from you (the designer) in order to hack it up properly and make sure it’s pixel-correct.
• Do it using a tool
  • This approach is what I normally use.
  • With any of the tools on the market to create CSS sprites you’re better off than doing it manually – all you have to do is dump you images into an application and it’ll output one single image along with the CSS markup for that. Awesome.

For obvious reasons mentioned above I will not be demonstrating how to do this manually but will rather be using any of the hundreds of tools out there to create the sprites.

In this example I’m going to use my main man Waldek’s tool called SpriteGenerator.

There’s a bunch of other tools available to create and generate these sprites as well of course, bing.com is thy friend.

How to: Generate CSS sprites using a tool

In this section I’ll talk you through our current application and what it looks like, what we want to achieve and finally how to achieve it.

Our current application, a visual sample

This is my current sample application before we start using sprites.

Control Panel Web Part (dummy):

This is the Visual Studio project, containing all the images and resources:

As you can see there’s quite some images being loaded. The images used in the application (my Web Part) will be fetched using a normal HTTP-request and that’s when one could realize how quickly those small requests can add up to impact performance.

This application uses some generic HTML markup like this:

         <div  class="width300p"> 

             <div  class="leftalign floatleft width30"> 

                 <div  class="height70p"><asp:Image  ID="Image2"  runat="server"  ImageUrl="/_layouts/images/TOZIT.CSSSprites/mail.png"  /></div> 

                 <div  class="height70p"><asp:Image  ID="Image3"  runat="server"  ImageUrl="/_layouts/images/TOZIT.CSSSprites/message.png"  /></div> 

                 <div  class="height70p"><asp:Image  ID="Image4"  runat="server"  ImageUrl="/_layouts/images/TOZIT.CSSSprites/more.png"  /></div> 

             </div> 

             <div  class="centeralign floatleft width30"> 

                 <div  class="height70p"><asp:Image  ID="Image5"  runat="server"  ImageUrl="/_layouts/images/TOZIT.CSSSprites/notebook.png"  /></div> 

                 <div  class="height70p"><asp:Image  ID="Image9"  runat="server"  ImageUrl="/_layouts/images/TOZIT.CSSSprites/search.png"  /></div> 

                 <div  class="height70p"><asp:Image  ID="Image13"  runat="server"  ImageUrl="/_layouts/images/TOZIT.CSSSprites/favorites.png"  /></div> 

             </div> 

             <div  class="width30 floatright"> 

                 <div  class="height70p"><asp:Image  ID="Image6"  runat="server"  ImageUrl="/_layouts/images/TOZIT.CSSSprites/info.png"  /></div> 

                 <div  class="height70p"><asp:Image  ID="Image7"  runat="server"  ImageUrl="/_layouts/images/TOZIT.CSSSprites/logoff.png"  /></div> 

                 <div  class="height70p"><asp:Image  ID="Image8"  runat="server"  ImageUrl="/_layouts/images/TOZIT.CSSSprites/question.png"  /></div> 

             </div> 

         </div>

Now, in order for us to utilize the CSS sprites instead, and not have to make a request for each of the images separately – we’ll use the SpriteGenerator and create us some nice CSS sprite magic.

Using the Sprite Generator to make some magic

Like I said before, we’ll be using Waldek’s SpriteGenerator for this sample.

Just open it, put in the images you’d like for it to make some magic with and then simply hit the magic button.

Tip: Check out how to use the SpriteGenerator here

The result of using the SpriteGenerator can look something like this:

This is one consolidated image containing all the graphic from my application. But instead of having about 30 different icons in my project, I now have only one.

The generator will create the CSS needed as well, and it can look something like this:

.sprite { background: url(‘/_layouts/images/TOZIT.CSSSprites/TOZIT_Sprite.png’) no-repeat top left; }
.pc { background-position: -0px 0; width: 47px; height: 64px; }
.question { background-position: -47px 0; width: 53px; height: 64px; }
.info { background-position: -100px 0; width: 54px; height: 64px; }
.mail { background-position: -154px 0; width: 54px; height: 64px; }
.more { background-position: -208px 0; width: 54px; height: 64px; }
.user { background-position: -262px 0; width: 55px; height: 64px; }
.world { background-position: -317px 0; width: 55px; height: 64px;  }
.video { background-position: -372px 0; width: 56px; height: 64px; }
.favorites { background-position: -428px 0; width: 57px; height: 64px; }
.edit { background-position: -485px 0; width: 60px; height: 64px; }
.date { background-position: -545px 0; width: 64px; height: 57px; }
.file { background-position: -609px 0; width: 64px; height: 64px; }
.group { background-position: -673px 0; width: 64px; height: 58px; }
.home { background-position: -737px 0; width: 64px; height: 62px; }
.left_arrow { background-position: -801px 0; width: 64px; height: 59px; }
.logoff { background-position: -865px 0; width: 64px; height: 78px; }
.notebook { background-position: -929px 0; width: 64px; height: 51px; }
.rigth_arrow { background-position: -993px 0; width: 64px; height: 57px; }
.search { background-position: -1057px 0; width: 64px; height: 61px; }
.sound { background-position: -1121px 0; width: 64px; height: 58px; }
.stop { background-position: -1185px 0; width: 64px; height: 59px; }
.vault { background-position: -1249px 0; width: 64px; height: 53px; }
.message { background-position: -1313px 0; width: 66px; height: 64px; }
.image { background-position: -1379px 0; width: 84px; height: 84px; }
.tozitlogo { background-position: -1463px 0; width: 250px; height: 101px; }

Now, what this really means is that you now have the ability to actually use only one single image to portray several.

New Visual Studio structure

Obviously, with the new update and only using one single image – the Visual Studio project might look something like this:

New HTML markup

And finally, there needs to be some changes in the HTML markup to reflect the changes with the images. The markup could look something like this:

         <div  class="leftalign floatleft width30"> 

             <div  class="height70p sprite mail">&nbsp;</div> 

             <div  class="height70p sprite message"  >&nbsp;</div> 

             <div  class="height70p sprite more"  >&nbsp;</div> 

         </div>

How does using CSS Sprites affect requests, hence performance?

Dealing with sprites isn’t very hard to get started with as you saw in the previous short samples. But what’s more interesting from a performance perspective is of course how it can affect the performance of the requests being made towards the server.

Let’s do some generic Fiddler-magic to see what the requests look like without using sprites and then what the requests look like with the use of sprites.

Fiddler test 1: NOT using CSS sprites

Request Count	17 total requests made to the server!
Bytes Sent	8 137 bytes
Bytes Received	76 164 bytes

Fiddler test 2: Using CSS sprites

Request Count	3 total requests made to the server!
Bytes Sent	1 722 bytes
Bytes Received	139 369 bytes

What you can easily conclude from the initial tests is that there’s more requests without the CSS sprites, while the size can be slightly larger for a consolidated image when using the sprites.
It’ll load and render quicker by downloading only the 3 files instead of the 17 files due to the aggregation time it takes to render the content.

Visualize the results, please!

Using CSS sprites (Time in seconds to load the data)	NOT using CSS sprites (Time in seconds to load the data)
RESPONSE BYTES image/png:    120 250 text/html:    16 593 ~headers~:    1 748 text/css:    778	RESPONSE BYTES image/png:    52 417 text/html:    16 709 ~headers~:    6 260 text/css:    778
ACTUAL PERFORMANCE Aggregate Session time:    00:00:00.531 (0.5 seconds) Sequence (clock) time: 00:00:00.4281250 (0.4 seconds)	ACTUAL PERFORMANCE Aggregate Session time: 00:00:01.390 (1.3 seconds) Sequence (clock) time: 00:00:00.5625000 (0.5 seconds)

I did some tests with two machines, two different projects and a couple of clients to request the pages and the results (on average) was something like this in rendering time. The chart below is a relative visualization of the results per average.

Summary

The impact of a system with a lot more requests for data than these samples, more users and in generally more traffic would differ a bit more than the charts here. Using sprites in combination with caching the data is a good practice to keep the amount of requests to the server to a minimum.

Even if this minor change don’t have any critical impact on improving the performance it’s important to consider. "All improvements are good improvements".

• Posted in Technical
• 1 Comment
• Tags: Branding, CSS, Performance, SharePoint, SP2010

 SPSite  site = new  SPSite ("http://zimmergren/");

 // Do stuff 

 site.Dispose();

     using (SPSite  site = new  SPSite ("http://zimmergren"));

     {

         // Do stuff 

     } 

     SPSite  site = null ;

     try 

     {

         site = new  SPSite ("http://zimmergren");

         // do stuff 

     }

     finally 

     {

         if (site!=null ) site.Dispose(); 

     }

     SPSite  site = null ;

     try 

     {

         site = new  SPSite ("http://zimmergren");

         // do stuff 

     }

     catch (Exception  ex)

     {

         // Handle the exception 

         // Possibly send it to the logs 

     }

     finally 

     {

         if (site!=null ) site.Dispose();

     }

     using (SPSite  site = new  SPSite ("http://zimmergren"))

     {

         foreach (SPSite  oSite in  site.WebApplication.Sites)

         {

             try 

             {

                 // Do stuff 

             }

             catch (Exception  ex)

             {

                 // Log and handle exceptions 

             }

             finally 

             {

                 if (oSite!=null ) oSite.Dispose();

             }

         }

     }

 using  System;

 namespace  Zimmergren.SP2010.DisposePatterns

 {

     public  enum  SPDisposeCheckID 

     {

         // SPDisposeCheckIDs. 

         SPDisposeCheckID_000 = 0,  

         SPDisposeCheckID_100 = 100,

         SPDisposeCheckID_110 = 110,

         SPDisposeCheckID_120 = 120,

         SPDisposeCheckID_130 = 130,

         SPDisposeCheckID_140 = 140,

         SPDisposeCheckID_150 = 150,

         SPDisposeCheckID_160 = 160,

         SPDisposeCheckID_170 = 170,

         SPDisposeCheckID_180 = 180,

         SPDisposeCheckID_190 = 190,

         SPDisposeCheckID_200 = 200,

         SPDisposeCheckID_210 = 210,

         SPDisposeCheckID_220 = 220,

         SPDisposeCheckID_230 = 230,

         SPDisposeCheckID_240 = 240,

         SPDisposeCheckID_300 = 300,

         SPDisposeCheckID_310 = 310,

         SPDisposeCheckID_320 = 320,

         SPDisposeCheckID_400 = 400,

         SPDisposeCheckID_500 = 500,

         SPDisposeCheckID_999 = 999 

     }

     [AttributeUsage (AttributeTargets .Method | AttributeTargets .Assembly, 

         Inherited = false , AllowMultiple = true )]

     public  class  SPDisposeCheckIgnore  : Attribute 

     {

         public  SPDisposeCheckIgnore(SPDisposeCheckID  Id, string  Reason)

         {

             _id = Id;

             _reason = Reason;

         }

         protected  SPDisposeCheckID  _id;

         protected  string  _reason;

         public  SPDisposeCheckID  Id

         {

             get  { return  _id; }

             set  { _id = Id; }

         }

         public  string  Reason

         {

             get  { return  _reason; }

             set  { _reason = Reason; }

         }

     }

 }

         [SPDisposeCheckIgnore (SPDisposeCheckID .SPDisposeCheckID_110, 

             "False Positive, nothing to see here, move along!" )]

         private  static  void  MyAwesomeMethod()

         {

             // Your method code with false positives 

         }

• Posted in Technical
• 1 Comment
• Tags: Featured, How-To, Performance, SharePoint, SP2010