February 21, 2012

Creating an HTML 5 Timer, part 1

This week, we will be creating a functional timer using HTML 5 timer elements. For visualization, we will use the canvas element to visualize time elapsed as well as an overlay that displays a message when the time has expired.

As a first step, we will craft the HTML for the interface. At the top of the page, we will display elapsed time followed by a canvas element the represents the elapsed time.

<input id=”elapsedTime” value=”0:00:00″ readonly=”readonly” style=”border:none; vertical-align:middle text-align:center; width:120px; font-size:32px; font-weight:bold” >

<td>

<div id=”container”>

<canvas id=”canvas” width=”100″ height=”100″>

Your browser does not support the canvas tag

</canvas>

<div id=”timesUp” style=”position:absolute; top:95px; left:12px; color:red”></div>

</div>

</td>

You will notice that the canvas and has been wrapped in a container that includes the another div. This extra div will be used for an overlay message to be displayed when the time has expired.

Next, we’ll add some input boxes so users can specify hours, minutes, and seconds as well as some buttons for starting, stopping, and resetting the timer.

<td>

<input id=”hours” type=”text” value=”" style=”width:26px” onkeypress=”validate(event)” />

<input id=”minutes” type=”text” value=”" style=”width:26px” onkeypress=”validate(event)” />

<input id=”seconds” type=”text” value=”" style=”width:26px” onkeypress=”validate(event)” />

</td>

<td>

<input name=”starter” type=button value=”Start” style=”width:97px; font-weight:bold” onClick=”startClock()” >

</td>

<td>

<input name=”pauser” type=button value=”Pause” style=”width:97px; font-weight:bold” onClick=”pauseClock()” >

</td>

<td>

<input name=”resetter” type=button value=”Reset” style=”width:97px; font-weight:bold” onClick=”resetClock()” >

</td>

In our input boxes for hours, minutes, and seconds, we want to limit the input to integers. To do this, we’ll use the validate event and regular expressions.

function validate(evt) {

var theEvent = evt || window.event;

var key = theEvent.keyCode || theEvent.which;

key = String.fromCharCode( key );

var regex = /[0-9]|\./;

if( !regex.test(key) ) {

theEvent.returnValue = false;

if(theEvent.preventDefault) theEvent.preventDefault();

}

}

Now we will need to create the script that drives the timer. When the page is loaded, we will need to initialize some variables and render our canvas element.

var interval = 1000;

var limit = 0;

var canvas, ctx, size, startAngle, wedgeSize, fillClr, elapsed, intervalId, timerElement;

var hh=0, mm=0, ss=0;

var hInput, mInput, sInput, overlay;

$(document).ready(function() {

canvas = $(“#canvas”)[0];

ctx = canvas.getContext(’2d’);

size = Math.min(canvas.width, canvas.height);

startAngle = -Math.PI/2;

timerElement = document.getElementById(‘elapsedTime’);

hInput = document.getElementById(‘hours’);

mInput = document.getElementById(‘minutes’);

sInput = document.getElementById(‘seconds’);

overlay = document.getElementById(‘timesUp’);

initClock();

});

Notice the initClock function that is called. We don’t have that yet, so let’s create it. This function will be responsible for resetting variables as well as drawing the initial canvas element.

function initClock() {

timerElement.value = “0:00:00″;

overlay.innerHTML = “”;

elapsed = 0;

wedgeSize = (interval / limit) * Math.PI * 2;

fillClr = “#fff8dc”;

var bgClr = ctx.createLinearGradient( 0, 0, canvas.width, canvas.height );

bgClr.addColorStop( 0, “#000000″ );

bgClr.addColorStop( 1, “#999999″ );

fillClr = ctx.createLinearGradient( 0, 0, canvas.width, canvas.height );

fillClr.addColorStop( 0, “#AAAAAA” );

fillClr.addColorStop( 1, “#EEEEEE” );

var drawX = drawY = radius = size / 2;

var circle = canvas.getContext(“2d”);

circle.globalAlpha = 1;

circle.beginPath();

circle.arc(drawX, drawY, radius, 0, Math.PI * 2, true);

circle.fillStyle = bgClr;

circle.fill();

circle.lineWidth = 0.25;

circle.strokeStyle = “#000000″;

circle.stroke();

}

At this point, all that is left to do is to plug in the buttons that we defined earlier. So let’s start with getting the timer running. This function will parse the user input for hours, minutes, and seconds and kick off the timer using HTML5’s setInterval function. The setInterval function will repeatedly be called until it is cleared, so we can take advantage of this to advance our visual representations.

function startClock() {

limit = (parseInt(hInput.value == “” ? “0″ : hInput.value) * 3600)

+ (parseInt(mInput.value == “” ? “0″ : mInput.value) * 60)

+ parseInt(sInput.value == “” ? “0″ : sInput.value);

limit *= 1000;

intervalId = setInterval(function () {

elapsed = elapsed + interval;

wedgeSize = (elapsed / limit) * Math.PI * 2;

updateTime();

var drawX = drawY = radius = size / 2;

var endAngle = startAngle + wedgeSize;

var wedge = canvas.getContext(“2d”);

wedge.beginPath();

wedge.moveTo(drawX, drawY);

wedge.arc(drawX, drawY, radius, startAngle, endAngle, false);

wedge.closePath();

wedge.fillStyle = fillClr;

wedge.fill();

wedge.lineWidth = 0.25;

wedge.strokeStyle = “#eeeeee”;

wedge.stroke();

if (elapsed >= limit) {

clearInterval(intervalId);

finish();

}

}, interval);

}

You should notice a call to an updateTime() function. We’ll need to create this function as it is responsible for the text display of elapsed time.

function updateTime() {

var s,m;

ss += 1;

s = ss < 10 ? ’0′ + ss : ss;

if (ss > 59) {

ss = 0;

s = ’00′;

mm += 1;

}

m = mm < 10 ? ’0′ + mm : mm;

if (mm > 59) {

mm = 0;

m = ’00′;

hh += 1;

}

timerElement.value = hh + ‘:’ + m + ‘:’ + s;

}

Once the elapsed time has reached the limit, clearInterval () is called as well as a finish().  The finish() function is something we will need to create. Its purpose for now is to display some text in the overlay.

function finish(){

overlay.innerHTML = “Time is up!”;

}

Since we want our users to be able to pause the timer, we can attach the clearInterval() function to the Pause button.

function pauseClock() {

clearInterval(intervalId);

}

Finally, we will need to create a function for the Reset button. This function will stop the clock, zero out the elapsed time, and re-initialize the canvas.

function resetClock() {

pauseClock();

elapsed = hh = mm = ss = 0;

initClock();

}

You can see the demo in action here. Next week we will add a bit a polish to the interface as well as add some audio indicators for interval updates and an alarm when the time limit is hit.

Tags:
February 14, 2012

Multiple View Models with Knockout

In a recent project, I was required to create a form for user input in a web page. Each section of the form is distinct and serves a unique purpose, so I chose to use a tabbed layout . The order in which the forms are completed was not a strict requirement, so some visual indication of which sections were completed was also a requirement.

I decided to use Knockout js for the data binding to take advantage its easy data bindings as well as the ko.computed method to determine which sections are complete.  While creating a design for this, it became apparent that each section (tab) should be its own view model. The problem was that there really isn’t any documentation on how to create multiple view models on a single page. There is an obscure reference deep in the Knockout js documentation that does not clearly explain how to do it.

After a bit of googling, I could not find any clear instructions on how to solve the problem; only some single line answers. After getting small hints from several google search results and some trial and error, I was able to come up with a clean solution.

The solution is actually quite simple, but I thought I would share it with since having a clear example would have saved me a lot of time.

The first thing to do is to create your sections on the page with a unique id.

<section class=”tab” id=”firstSection”>

<h1>First Section</h1>

<p>First Name: <strong data-bind=”text: name”></strong></p>

<p>First name: <input data-bind=”value: name” /></p>

</section>

<section class=”tab” id=”secondSection”>

<h1>Second Section</h1>

<p>Second Name: <strong data-bind=”text: name”></strong></p>

<p>Second name: <input data-bind=”value: name” /></p>

</section>

One thing you may notice about this example is that it is using the same variable name called “name” in each section. This is one of the benefits of using multiple view models since those variables are only accessible in the scope of the view model.

Second, you will need to define your view models. There is nothing special about how these are defined for this particular solution.

function firstViewModel() {

var self = this;

self.name = ko.observable(“Enter Name”);

};

function secondViewModel() {

var self = this;

self.name = ko.observable(“Enter Name”);

};

 

Lastly, you will need to apply the bindings for the view models and assign them to the previously defined sections.

ko.applyBindings(new firstViewModel, $(“#firstSection”)[0]);

ko.applyBindings(new secondViewModel, $(“#secondSection”)[0]);

Take note of the second parameter passed to the applyBindings method as it does the magic of isolating the view model to a specific element on the page.  I am not sure why this isn’t clearly documented anywhere, but hopefully this post proves useful to anyone that is looking to add support for multiple view models on a single page.

A working demo can be found here

Tags:
January 31, 2012

Creating a simple pie chart with HTML5 Canvas Part 3

Over the last two weeks, we have created a simple pie chart and then added some functionality. This week we will focus on some design aspects to improve the presentation of the chart.

While contrasting colors for each slice of the pie can be used for a clear distinction between slices, using a border for each one generally looks nicer. This is easily accomplished using the .stroke method.

 

ctx.lineWidth = 1;

ctx.strokeStyle = “#fff”;

ctx.stroke();

 

Another simple way to improve the appearance of the chart is to add some color gradient for each slice. Using color gradients will give the chart a more modern look and are extremely simple to add. The first step is to define the gradient as follows.

 

var gradient = ctx.createLinearGradient( 0, 0, canvas.width, canvas.height );

gradient.addColorStop( 0, “#ddd” );

gradient.addColorStop( 1, colors[i] );

 

Once the gradient is defined, we can set it as the fillStyle for the context and call the fill method.

 

ctx.fillStyle = gradient;

ctx.fill();

 

Last week we added rendering of the pie slice values at the bottom of the screen. While that does the job of giving the user information about the slice, it forces them to look away from the chart. To improve on that, we will have the value of the slice be rendered at the position of the mouse. The effect will be that the value follows the user as they hover over the slices.

 

ctx.fillStyle = ‘#fff’;

ctx.font = ‘bold 10px verdana’;

ctx.fillText(pieData[slice]['value'], x, y, 20);

 

While adding these improvements may seem trivial, they are worth mentioning due to the fact that they transform what was a simple and dull chart into one that is more functional, intuitive, and professional.

For the full source and a working demo, please follow the link below.

 http://yojimbocorp.com/demos/pieChart3.html

Tags:
January 24, 2012

Creating a simple pie chart with HTML5 Canvas Part 2

Last week we created a pie chart using HTML5’s Canvas element. This week we will utilize jQuery to add some simple functionality.  For this exercise, we want to be able to visualize the exact values of each slice of the pie when the user positions the mouse over them. To do this, we will use the .mousemove event from jQuery to update text on the page.

The first step is to include jQuery.

 

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>

 

Next, we will need to refactor the script from last week a bit in order to reference it from the mousemove event. To do this, we will create an array to store the data for each slice.

 

var pieData = [];

for(var i in data) {

                pieData[i] = [];

                pieData[i]['value'] = data[i];

                pieData[i]['startAngle'] = 2 * Math.PI * lastPosition;

                pieData[i]['endAngle'] = 2 * Math.PI * (lastPosition + (data[i]/total));

                lastPosition += data[i]/total;

}

 

Now that the data is stored a bit differently than last week, we will need to update the script that renders the pie chart. Specifically, we will change the ctx.arc call to reference the data we just stored in the pieData array.

 

for(var i = 0; i < data.length; i++)

{

                ctx.beginPath();

                ctx.moveTo(center[0],center[1]);

                ctx.arc(center[0],center[1],radius,pieData[i]['startAngle'],pieData[i]['endAngle'],false);

                ctx.lineTo(center[0],center[1]);

                ctx.closePath();

                ctx.fillStyle = colors[i];

                ctx.fill();

}

 

Next we will add some text to the page that will be used to display the value of the pie chart that the user is currently hovering over with the mouse.

 

<div>

        Hover over a slice

</div>

 

Now that we have a placeholder for the text, we can add the mousemove event that will first evaluate whether the user is within the radius of the chart and then do a bit of math to determine which slice the mouse is over.

 

$(“#canvas”).mousemove(function(e) {

                var x = Math.floor((e.pageX-$(“#canvas”).offset().left));

                var y = Math.floor((e.pageY-$(“#canvas”).offset().top));

                var fromCenterX = x – center[0];

                var fromCenterY = y – center[1];

                var fromCenter = Math.sqrt(Math.pow(Math.abs(fromCenterX), 2) + Math.pow(Math.abs(fromCenterY), 2 ));

 

                if (fromCenter <= radius) {

                                var angle = Math.atan2(fromCenterY, fromCenterX);

                                if (angle < 0) angle = 2 * Math.PI + angle; // normalize

 

                                for (var slice in pieData) {

                                                if (angle >= pieData[slice]['startAngle'] && angle <= pieData[slice]['endAngle']) {

                                                                $(“div.sliceValue”).text(“The value for the slice is ” + pieData[slice]['value']);

                                                                return;

                                                }

                                }

                }

});

 

If all went well, you should now have a working demo. If not, you can view the source of the working demo linked below.

 

http://yojimbocorp.com/demos/pieChart2.html

Tags:
January 17, 2012

Creating a simple pie chart with HTML5 Canvas

This week we take a look at how to use the HTML5 canvas element to create a simple pie chart. To begin, we need to define the element using the canvas tag. Please note the id, height, and width are required.

<canvas id=”canvas” width=”400″ height=”300″></canvas>

In order to interact with this canvas through Java script, we will need to first get the element by Id and then create a context.


<script type="text/javascript">

var canvas = document.getElementById(‘canvas’);

var ctx = canvas.getContext(“2d”);

</script>

These two steps are essentially all that is required to start drawing to the canvas. For this example, we will be drawing a simple pie chart, so let’s add some data. We’ll use some hard coded values for data in the interest of simplicity.

 

var data = [75,68,32,95,20,51];

var colors = ["#7E3817", "#C35817", "#EE9A4D", "#A0C544", "#348017", "#307D7E"];

var center = [canvas.width / 2, canvas.height / 2];

var radius = Math.min(canvas.width, canvas.height) / 2;

var lastPosition = 0, total = 0;

 

Next we will need to get the total value of all the data being represented in the pie chart. This is required in order to scale the size of each slice correctly. To do this, we simply need to loop through the data array and add each value into the ‘total’ variable defined above.

 

for(var i in data) { total += data[i]; }

 

And finally, we are ready start using canvas to draw each slice of the pie. To do this, we will loop through the data array again and call the canvas methods to create and fill the shapes.

 

for (var i = 0; i < data.length; i++) {

ctx.fillStyle = colors[i];

ctx.beginPath();

ctx.moveTo(center[0],center[1]);

ctx.arc(center[0],center[1],radius,lastPosition,lastPosition+(Math.PI*2*(data[i]/total)),false);

ctx.lineTo(center[0],center[1]);

ctx.fill();

lastPosition += Math.PI*2*(data[i]/total);

}

 

Loading the page in an HTML5 enabled browser should result in our chart being rendered as follows.

 

pie_chart

 

Next week we will take a look at adding labels to the chart as well as adding some user interaction with animation.

January 12, 2012

Large WCF Requests, Don’t forget httpRuntime settings

Recently, I was working on a project where the client was passing an array of bytes (byte[]) into a WCF service method. The array represented a file the user wanted to upload to the server. The WCF service was throwing cryptic error messages when the user attempted to upload a large file. There are obvious issues with this approach, but without a redesign of the upload process, my client was looking for a quick fix. There are many articles that cover the various options that one has to adjust under serviceBehaviors for WCF (e.g. maxReceivedMessageSize), but increasing all of those to their maximum value DID NOT solve the problem.

After looking at the issue through a packet filter, I finally figured out that IIS was rejecting the request at a level above WCF and then I remember the httpRuntime config section. You can read about it here:

http://msdn.microsoft.com/en-us/library/e1f13641

The relevant attribute is maxRequestLength

The default is 4096KB as of the writing of this post.

Obviously, no matter what other settings you tweak, if you run into this limit, IIS will block the request.

This can also come up when writing plain old vanilla ASP.NET file upload if you’re not streaming the file to the server.

Streaming files to your server would avoid running into these problems, but if you’re in a pinch and working on an internal application used by a small number of users, this is the quick and dirty way to get around the limit.

January 11, 2012

Homegrown Dynamic IP Tracking

I often need to remotely access my home computer. Since dynamic DNS services are not always available to me, I needed a way to be notified when my ISP issued a new IP address. The first task was to choose one of the many services that happily provide your public address. The ideal candidate would be one that gives a relatively easy to parse response. After a bit of searching, I found that the nice folks over at http://dyndns.org offer just that with http://checkip.dyndns.org

The .Net WebClient provides an easy means to retrieve the response:

var client = new WebClient();

var response = client.DownloadString(“http://checkip.dyndns.org”);

 

After a bit of simple parsing, we have our public IP address:

const string startToken = “Current IP Address: “;

var startIndex = response.IndexOf(startToken);

startIndex += startToken.Length;

var endIndex = response.IndexOf(“</body>”);

var ip = response.Substring(startIndex, endIndex – startIndex);

 

Now that we have the public IP address, notification becomes a task for the .Net SmtpClient. Using email as the notification method certainly isn’t the only solution, but has the benefit of being private. For this particular project, I’m using an App.config to populate properties of the SmtpClient.

var appSettings = ConfigurationManager.AppSettings;

var email = Convert.ToString(appSettings["EmailAddress"]);

var displayName = Convert.ToString(appSettings["DisplayName"]);

var fromAddress = new MailAddress(email, displayName);

var toAddress = new MailAddress(email, displayName);

var fromPassword = Convert.ToString(appSettings["EmailPassword"]);

var smtp = new SmtpClient

{

Host = Convert.ToString(appSettings["EmailHost"]),

Port = Convert.ToInt32(appSettings["EmailPort"]),

EnableSsl = Convert.ToBoolean(appSettings["EnableSsl"]),

DeliveryMethod = SmtpDeliveryMethod.Network,

UseDefaultCredentials = false,

Credentials = new NetworkCredential(fromAddress.Address, fromPassword)

};

 

And now, sending the message is simply a matter of constructing a .Net MailMessage and passing it to the SmtpClient Send method.

var subject = “Current Home IP Address: ” + ip;

var body = subject;

using (var message = new MailMessage(fromAddress, toAddress)

{

Subject = subject,

Body = body

})

{

smtp.Send(message);

}

 

It is certainly feasible to schedule a daily task for this to run, but I decided to wrap it into a service so notification emails are only sent if the public IP changes. The entire project can be found in our brand new github repository linked below.

https://github.com/yojimbocorp/blog-posts

January 2, 2012

How to get the value of a custom attribute in C#

In a recent project, I needed to get the value of a custom attribute that was set on various class properties. More precisely, the custom attribute was a string that needed to be evaluated programmatically to see if it matched a given value. This particular case came up during unit testing of localized strings in a web application, but may be applicable to a wide variety of use cases involving custom attributes.

In this example, there is a class that sets a custom attribute like this:

public class UserAccount

{

[LocalizedDisplayName("SOME_RESOURCE_ID")]

public string UserAccountName { get; set; }

}

This attribute is referenced throughout the application to display the correct text for the current culture, but the problem is that there is no inherent mechanism to get the actual string value of the resource associated with the given class property for testing purposes. The solution was to create a utility method which does just that:

public static object GetAttributeValue(Type objectType, string propertyName, Type attributeType,

string attributePropertyName)

{

var propertyInfo = objectType.GetProperty(propertyName);

if (propertyInfo != null)

{

if (Attribute.IsDefined(propertyInfo, attributeType))

{

var attributeInstance = Attribute.GetCustomAttribute(propertyInfo, attributeType);

if (attributeInstance != null)

{

foreach (PropertyInfo info in attributeType.GetProperties())

{

if (info.CanRead &&

String.Compare(info.Name, attributePropertyName,

StringComparison.InvariantCultureIgnoreCase) == 0)

{

return info.GetValue(attributeInstance, null);

}

}

}

}

}

return null;

}

This method is in an AttributeUtil class. An example call to the method looks like this:

var value = AttributeUtil.GetAttributeValue(typeof(UserAccount), “UserAccountId”,

typeof(LocalizedDisplayNameAttribute),”DisplayName”);

It was surprisingly hard to find relevant information for this particular problem, so I hope you found this useful. A complete example project is available in our codeplex repository.

GetAttributeValue

As an exercise to the reader, you may choose to package GetAttributeValue as an extension method on the Attribute class itself. Also, beware that this will not work against attributes whose value is an array type, because we’re passing NULL as the second parameter to PropertyInfo.GetValue method.

Tags:
December 27, 2011

How to Show the Silverlight Busy Indicator When Your Task Has to Run on the UI Thread

Warning: this is a “hack” to be used when all other options have been exhausted

Recently, I was working on a project that required me to implement export to Excel from a third-party grid. The task was quite simple as the grid control already had a method for the purpose of creating a workbook. However, when using the method from a button click handler my entire UI would freeze for the duration of the export. The export had to be performed on the UI thread, because it relied on a method located on the control (which in turn touched other properties of the control). I knew I couldn’t get around the freeze, but wanted to display a busy indicator. After searching the web I failed to find a solution. The issue is that the busy indicator itself has to use the UI thread to begin animating and Silverlight queues user interface updates (to improve performance), so just because you set the ‘IsBusy’ property true, you’re not guaranteed that the user has seen the indicator.

I had some work to do before kicking off the export and was already spawning a background thread via the method ThreadPool.QueueUserWorkItem.

However, the only way to get the busy indicator to display was to add a Sleep operation as the first step of my thread and I wasn’t sure how long I needed to sleep before I had some indication that the busy indicator has displayed.

My final workaround consisted of the following steps:

1)      Implement the LayoutUpdated event on the BusyIndicator instance. Inside this event, I set a private bool field to true. The field is marked as volatile to prevent compiler optimizations which sometimes cause multiple threads to see a different value (the alternative would have been to use another field and lock on it when touching the bool).

2)      In my button click event, I set the private field to false anytime I set the ‘IsBusy’ property of the busy indicator to true.

3)      I then added this code block at the top of my background task (basically waiting for the busy indicator to update its layout – i.e. display itself) before doing any other work:

while (!_hasBusyIndicatorUpdatedLayout)
{
         Thread.Sleep(100);
}

After exiting this while loop, I kicked off the call to process my Excel export on the UI thread.

There are a couple of issues with this solution:

1)      It’s a hack

2)      The busy indicator’s animation will be frozen (along with the entire application)

However, the alternative was to have a frozen UI all around. I am attaching a sample project implementing all of the above. If you want to see what happens without the check, just comment out the ‘while’ loop shown above.

If anyone has come up with a more elegant solution or improves upon this, please comment below.

The complate click handler looks like this:

private void ButtonClick(object sender, RoutedEventArgs e)
        {
            SetBusy("Exporting data...");

            ThreadPool.QueueUserWorkItem((state) =>
                                             {
                                                 // this is how we check if the busy indicator has 
                                                 // started to display to the user
                                                 while (!_hasBusyIndicatorUpdatedLayout)
                                                 {
                                                     Thread.Sleep(100);
                                                 }

                                                 // now we can perform our busy task
                                                 DoBusyWorkOnUiThread();
                                                 RemoveBusy();
                                             });
        }

Download the project below for the full implementation. If you comment out the line in the constructor that does this:

busyIndicator.LayoutUpdated += BusyIndicatorLayoutUpdated;

You will see that the busy indicator no longer displays.

Download Project

Tags: , ,
September 10, 2011

Editing SSRS 2008 Projects in Visual Studio 2010

Microsoft has been releasing updates to Visual Studio at an ever faster pace. Unfortunately, one technology was left behind. The ability to edit SQL Server Reporting Services (SSRS) projects inside Visual Studio is actually provided by Business Intelligence Studio, which ships only when SQL Server rolls out an update. As a result, up until recently, one had to have a copy of Visual Studio 2008 (or rather the Business Intelligence portion of it that is installed by SQL Server 2008) to edit SSRS 2008 projects. It’s even worse for people who are still using SSRS 2005 (they have to have Visual Studio 2005 if they didn’t want to upgrade their projects). For those of you willing to move to SSRS 2008 and who would like to use a single editor (with the corresponding TFS integration), you now have the option to install Denali CTP 3 (or a more current version, depending on when you find this post) to get the update to Visual Studio 2010 that finally lets you edit SSRS project types. Don’t worry, you don’t have to install the entire CTP product, just the business intelligence portion of it.

The steps (as of 9/1/2011) are:

1) Make sure you’ve updated to Visual Studio 2010 Service Pack 1

2) Download the appropriate version of Denali CTP 3 (I ran the 1033\SQL Server Denali CTP 3 Install.html and followed the links to the version I wanted — x86 or x64). When you launch the installer you can choose the “Express” option and it will still let you install Business Intelligence Studio.

When you install Denali, only install Business Intelligence Studio as illustrated by the screeshot below (unless you want to play with all of it).

Denali Installer Options

Denali Installer Options

Warning: If after following the steps above Visual Studio 2010 warns you that you do not have the complete Service Pack 1 installed, you may have to re-apply Visual Studio 2010 Service Pack 1. Subsequently, the installer may prompt you for the MSI containing the latest Silverlight SDK. This page will help you deal with that error. This happened to me on one of my development machines, but not the other. Read this article for more: Visual studio 2010 sp1 error: silverlight_sdk.msi unavailable. This is one of the dangers of installing CTP products but a small price to pay for the convenience of editing SSRS 2008 projects inside Visual Studio 2010.

 

Follow

Get every new post delivered to your Inbox.