Both of these systems are constantly updated and improved by a core team of developers. They both have plugins that are constantly updated and bugs are routinely squashed. So what are the fundamental differences?

DotNetNuke

DotNetNuke is currently the most popular .NET CMS with a user base in the hundreds of thousands and millions of downloads. Some key points around DotNetNuke are:

- Written in VB.Net which is an easy-to-learn programming language.
- Easy installation process – using the Web Platform Installer makes this process even easier. It’s also easy to install on shared hosting providers.
- User friendly – this really is a very easy to use system with tooltips and help options.
- Largest .NET CMS user base (700,000+) and a dedicated group of developers developing modules, fixing bugs etc. With a community that develops plugins, shares knowledge and is willing to help, DotNetNuke has an unrivaled user base.
- Multiple website support – you can have one installation of DotNetNuke and have multiple portals with separate user lists, content and skins.

Extensible and skinnable.

Umbraco

Umbraco is becoming increasingly popular and has a community that is growing day by day. It’s written in C# and is currently being rewritten for .NET MVC2. Some key points around Umbraco are:

- Written in C# which is a powerful and flexible programming language.
- Total freedom and flexibility – Umbraco gives the developer the chance to customize and tweak everything about the installation.
- Interface and design – Umbraco effectively gives you a blank page in which to create your website. As such, you can make the website look however you want.
- Seperation of code and presentation.
- Growing user base – umbraco is rapidly gaining a dedicated user base.

So which one?

Ultimately, there’s no silver bullet for a CMS. You have to take everything in to consideration. What are the business needs? Who is going to use the system? Do you have technical ability to develop things on your own? Where are you hosting this?

Umbraco provides a very flexible and powerful framework, but requires some considerable technical ability to successfully implement. It also has very high hosting requirements which rules out a lot of shared hosting providers.

DotNetNuke provides a fairly solid framework and requires no technical ability once it’s installed. It has a simple module and skin installation system. It is also easier to install on shared hosting. You lose a bit of flexibility, but gain more ease of use for the end user.

There are many more platforms out there and either way you go, you’ll still have a fully functional CMS and a great looking website!

Ever wondered how games achieve that really cool cartoony looking effect? With the bold, blocky lighting and the big black borders? It’s quite a neat look and helps make games look really eye-catching! It’s easier and more effective to make a game look stylized, than to make a game look extremely realistic! This article will introduce you to the High Level Shader Language (HLSL) and show you how to implement a fully working Cel Shader in XNA.

Getting Started

So in order to get started, you’ll need to have XNA Game Studio installed. It also helps if you have a model to test this on – you can find some models in the starter kits over at http://creators.xna.com

Go ahead and open up Visual Studio and start a new XNA project.

Introduction to the HLSL

The High Level Shader Language (HLSL) is a shading language for use with the Direct3D API. This means it’s not just used in XNA Game Studio but for Direct3D shaders in general. It has 3 main areas: vertex shader, geometry shader and pixel shader.

So let’s add our Cel Shading code. Right-click Content in the Solution Explorer and then add two new folders. One called Effects, one called Models. Right-click the Effects folder and select Add -> New Item…. Select the Effect File option and name it CelShader.fx

Editing the Effect File

Now we have our shader file, if you open it, you’ll notice lots of code already there. This has a basic technique called Technique1. We don’t need that right now, so just delete it all. We need to add some basic variables that our shader will make use of, such as the camera variables (world, view and projection matrices), light direction (vector3). So add the following to your new effect file:

float4x4 world;

float4x4 view;

float4x4 projection;

float3 lightDirection = normalize(float3(1, 1, 1));

Now we have our basic variables, we need to add some variables specific to our cel shader. These help manage the banded lighting on the models.

float toonThresholds[2] = { 0.8, 0.4 };

float toonBrightnessLevels[3] = { 1.3, 0.9, 0.5 };

We also need a variable to store whether or not texturing is enabled, along with the texture being applied and a Sampler. So lets add that now.

bool textureEnabled;

texture Texture;

sampler Sampler = sampler_state

{

Texture = (Texture);

MinFilter = Linear;

MagFilter = Linear;

MipFilter = Linear;

AddressU = Wrap;

AddressV = Wrap;

};

The sampler helps us read the texture that is being stored in our texture variable.

Now that we have our initial variables set up, we need to construct some structs to hold some data for our inputs / outputs. These will hold the position, texture co-ordinates, the normal of the texture and the amount of light.

struct VertexShaderInput

{

float4 Position : POSITION0;

float3 Normal : NORMAL0;

float2 TextureCoordinate : TEXCOORD0;

};

struct LightingPixelShaderInput

{

float2 TextureCoordinate : TEXCOORD0;

float LightAmount : TEXCOORD1;

};

struct LightingVertexShaderOutput

{

float4 Position : POSITION0;

float2 TextureCoordinate : TEXCOORD0;

float LightAmount : TEXCOORD1;

};

struct NormalDepthVertexShaderOutput

{

float4 Position : POSITION0;

float4 Color : COLOR0;

};

Now that we have our structures, we can start creating our functions that will enable us to create some cool effects (in our case, cel shading). So lets create a function that allows us to create the banded lighting effect on our model.

LightingVertexShaderOutput LightingVertexShader(VertexShaderInput input)

{

LightingVertexShaderOutput output;

output.Position = mul(mul(mul(input.Position, world), view), projection);

output.TextureCoordinate = input.TextureCoordinate;

float3 worldNormal = mul(input.Normal, world);

output.LightAmount = dot(worldNormal, lightDirection);

return output;

}

As you can see, this function is using the structures we setup earlier. It uses the variables we initially setup for world, view and projection to get the idea of where the camera is so that the correct matrices are being used before we start applying light. Otherwise, the light direction would be stuck on top of the camera. We then use the dot product to find out the amount of light that is hitting that vertex by using the worldNormal and the lightDirection.

Now we have our vertex shader, let’s create our toon shader to give it that blocky lighting effect. The way cel shading works best, is when it only has 1 or 2 bands of shading. So there’s no gradient effect, but rather just big chunks of shading, like you see in regular cartoons. So if a light value falls within a particular range, let’s just use one value instead of the normal light value. This is specified in the variables we declared above (toonThresholds and toonBrightnessLevels).

float4 ToonPixelShader(LightingPixelShaderInput input) : COLOR0

{

float4 color = TextureEnabled ? tex2D(Sampler, input.TextureCoordinate) : 0;

float light;

if (input.LightAmount > toonThresholds[0])

light = toonBrightnessLevels[0];

else if (input.LightAmount > toonThresholds[1])

light = toonBrightnessLevels[1];

else

light = toonBrightnessLevels[2];

color.rgb *= light;

return color;

}

As you can see in the code, we’re just producing 3 light values all depending upon what value the LightAmount is. This creates that banded lighting effect.

Now that we have our toon shaders, we also need to add some other shaders which we’ll discuss a little more later. These are used to draw the model the first time so that we can enable edge detection (this helps us create the black border.

NormalDepthVertexShaderOutput NormalDepthVertexShader(VertexShaderInput input)

{

NormalDepthVertexShaderOutput output;

// Apply camera matrices to the input position.

output.Position = mul(mul(mul(input.Position, world), view), projection);

float3 worldNormal = mul(input.Normal, world);

// The output color holds the normal, scaled to fit into a 0 to 1 range.

output.Color.rgb = (worldNormal + 1) / 2;

// The output alpha holds the depth, scaled to fit into a 0 to 1 range.

output.Color.a = output.Position.z / output.Position.w;

return output;

}

float4 NormalDepthPixelShader(float4 color : COLOR0) : COLOR0

{

return color;

}

Now that we have all of our shader code for the lighting effects, we can go ahead and create the techniques to use in our code!

technique Toon

{

pass P0

{

VertexShader = compile vs_1_1 LightingVertexShader();

PixelShader = compile ps_2_0 ToonPixelShader();

}

}

technique NormalDepth

{

pass P0

{

VertexShader = compile vs_1_1 NormalDepthVertexShader();

PixelShader = compile ps_1_1 NormalDepthPixelShader();

}

}

There we have our lighting code! That’s great, but we don’t have our black borders yet. So before we continue, let’s add our Post Process effect (the black borders).

Post Processing Effects

So let’s do the same thing we did before to create an effect file, and call this one PostProcess.fx

Same as the last effect file, delete everything we have there and we’ll start from scratch! We need to add some variables for use in the file, so lets add those now. We need one to control how thick the border will be and how dark the stroke will be:

float edgeWidth = 1;

float edgeIntensity = 1;

float normalSensitivity = 1;

float depthSensitivity = 10;

We also need a variable to store how accurate the edge detection is. The higher the number, the less it will pick up. This is good for getting rid of unwanted edges on really detailed models.

float normalThreshold = 0.5;

float depthThreshold = 0.1;

We also need a variable to store the screen resolution (WxH).

float2 screenResolution;

As with the last effect file, we need to store the texture and create a Sampler – both for the scene (edge detection filter will be written over this) and the normal depth scene.

texture sceneTexture;

sampler SceneSampler : register(s0) = sampler_state

{

Texture = (sceneTexture);

MinFilter = Linear;

MagFilter = Linear;

AddressU = Clamp;

AddressV = Clamp;

};

texture normalDepthTexture;

sampler NormalDepthSampler : register(s1) = sampler_state

{

Texture = (normalDepthTexture);

MinFilter = Linear;

MagFilter = Linear;

AddressU = Clamp;

AddressV = Clamp;

};

Now is a good time to sit and think a bit about how cel shading works. We’re going to render a scene with edge detection, so that we can gather the edges of the models. This allows us to determine where we need to draw the lines. We then map a texture of the scene which gives us an idea about where to draw the line. If it’s an edge, we then add a line (thickness and intensity are determined by our variables above).

float4 PixelShader(float2 texCoord : TEXCOORD0) : COLOR0

{

float3 scene = tex2D(SceneSampler, texCoord);

float2 edgeOffset = edgeWidth / screenResolution;

float4 n1 = tex2D(NormalDepthSampler, texCoord + float2(-1, -1) * edgeOffset);

float4 n2 = tex2D(NormalDepthSampler, texCoord + float2( 1, 1) * edgeOffset);

float4 n3 = tex2D(NormalDepthSampler, texCoord + float2(-1, 1) * edgeOffset);

float4 n4 = tex2D(NormalDepthSampler, texCoord + float2( 1, -1) * edgeOffset);

float4 diagonalDelta = abs(n1 - n2) + abs(n3 - n4);

float normalDelta = dot(diagonalDelta.xyz, 1);

float depthDelta = diagonalDelta.w;

normalDelta = saturate((normalDelta - normalThreshold) * normalSensitivity);

depthDelta = saturate((depthDelta - depthThreshold) * depthSensitivity);

float edgeAmount = saturate(normalDelta + depthDelta) * edgeIntensity;

scene *= (1 - edgeAmount);

return float4(scene, 1);

}

Now we just need to map this function to a technique and we can start implementing these in our XNA game code!

technique EdgeDetect

{

pass P0

{

PixelShader = compile ps_2_0 PixelShader();

}

}

Implementing the Effects in XNA

We’re not done yet! We still need to add these to our code. So let’s do some initialisation and add our content. So add these variables at the top:

Effect celShader;
Effect postProcessEffect;

Model myModel;
RenderTarget2D sceneRenderTarget;
RenderTarget2D normalRenderTarget;

Here, we’re simply declaring our two effect files we’ve already created, our model that we’ll be using and 2 render targets (used for our post process effect – check above).

In the initialization function, add the following code:

celShader = Content.Load<Effect>(@"Effects\CelShader");
postProcessEffect = Content.Load<Effect>(@"Effects\PostProcess");

We also need to initialise our render targets, so add the following code just below the above:

PresentationParameters pp = graphics.GraphicsDevice.PresentationParameters;

normalRenderTarget = new RenderTarget2D(graphics.GraphicsDevice,

pp.BackBufferWidth, pp.BackBufferHeight, 1,

pp.BackBufferFormat, pp.MultiSampleType, pp.MultiSampleQuality);

sceneRenderTarget = new RenderTarget2D(graphics.GraphicsDevice,

pp.BackBufferWidth, pp.BackBufferHeight, 1,

pp.BackBufferFormat, pp.MultiSampleType, pp.MultiSampleQuality);

Now that we’ve initialised out effects and render targets, we need to load in our model. Go to the LoadContent function and add the following line (change the name depending upon your model name):

myModel = Content.Load<Model>(@"Models\Human");

Now we’ve initialised and loaded our content we can start doing stuff with it. However, we need to do some logic on our model before we start rendering. This is so that we can store the textures for our models whilst manipulating effects on it. Add the following function call after you have loaded your model:

ChangeEffectUsedByModel(myModel, celShader);

Now for the actual function – declare this function as follows:

static void ChangeEffectUsedByModel(Model model, Effect replacementEffect)

{

Dictionary<Effect, Effect> effectMapping = new Dictionary<Effect, Effect>();

foreach (ModelMesh mesh in model.Meshes)

{

foreach (BasicEffect oldEffect in mesh.Effects)

{

if (!effectMapping.ContainsKey(oldEffect))

{

Effect newEffect = replacementEffect.Clone( replacementEffect.GraphicsDevice);

newEffect.Parameters["Texture"].SetValue(oldEffect.Texture);

newEffect.Parameters["TextureEnabled"].SetValue( oldEffect.TextureEnabled);

effectMapping.Add(oldEffect, newEffect);

}

}

foreach (ModelMeshPart meshPart in mesh.MeshParts)

{

meshPart.Effect = effectMapping[meshPart.Effect];

}

}

}

Now we can draw the models and apply the post processing effects. As we’re going to be drawing the model more than once, it’s cleaner to create our own DrawModel function. Declare a new DrawModel function:

void DrawModel(Matrix world, Matrix view, Matrix projection,

string effectTechniqueName, Model model)

{

RenderState renderState = graphics.GraphicsDevice.RenderState;

renderState.AlphaBlendEnable = false;

renderState.AlphaTestEnable = false;

renderState.DepthBufferEnable = true;

Matrix[] transforms = new Matrix[model.Bones.Count];

model.CopyAbsoluteBoneTransformsTo(transforms);

foreach (ModelMesh mesh in model.Meshes)

{

foreach (Effect effect in mesh.Effects)

{

effect.CurrentTechnique = effect.Techniques[effectTechniqueName];

Matrix localWorld = transforms[mesh.ParentBone.Index] * world * Matrix.CreateScale(40.0f);

effect.Parameters["world"].SetValue(localWorld);

effect.Parameters["view"].SetValue(view);

effect.Parameters["projection"].SetValue(projection);

}

mesh.Draw();

}

}

Here, we’re drawing the model with the effect technique that we’re passing in. If you remember, we created two techniques in our CelShader, Toon and NormalDepth. Toon does the toon shading, NormalDepth handles the edge detection. We’re also passing in the model, view, world and projection matrices.

Now we have a draw function, we need to add a post process function to handle our post processing. To do this, we pass in our effect technique name (in this case, EdgeDetect) and it then renders the scene texture. So lets declare our post processing function and implement our post processing effect:

void ApplyPostProcess(string effectTechniqueName)

{

EffectParameterCollection parameters = postProcessEffect.Parameters;

Vector2 resolution = new Vector2(sceneRenderTarget.Width,

sceneRenderTarget.Height);

Texture2D normalDepthTexture = normalRenderTarget.GetTexture();

parameters["edgeWidth"].SetValue(1);

parameters["edgeIntensity"].SetValue(1);

parameters["screenResolution"].SetValue(resolution);

parameters["normalDepthTexture"].SetValue(normalDepthTexture);

postProcessEffect.CurrentTechnique = postProcessEffect.Techniques[effectTechniqueName];

spriteBatch.Begin(SpriteBlendMode.None,

SpriteSortMode.Immediate,

SaveStateMode.None);

postProcessEffect.Begin();

postProcessEffect.CurrentTechnique.Passes[0].Begin();

spriteBatch.Draw(sceneRenderTarget.GetTexture(), Vector2.Zero, Color.White);

spriteBatch.End();

postProcessEffect.CurrentTechnique.Passes[0].End();

postProcessEffect.End();

}

As you can see, it’s fairly simple. We’re passing in some parameters for our post processing effect (in this case, edge width, intensity, resolution and the depth texture) and then drawing that effect to the screen.

We’re almost done! Now we have these functions, but they aren’t currently being called. So let’s go to our Draw function and use the functions! First, we need to add some variables and logic around the view, world and projection matrices. These would usually be done by a camera class of some sort, but we’re just going to put some static values that all us to see our model. In the Draw function, add the following code:

Viewport viewport = graphics.GraphicsDevice.Viewport;

float aspectRatio = (float)viewport.Width / (float)viewport.Height;

Matrix rotation = Matrix.CreateRotationY(1.0f);

Matrix view = Matrix.CreateLookAt(new Vector3(3000, 3000, 0),

new Vector3(0, 1500, 0),

Vector3.Up);

Matrix projection = Matrix.CreatePerspectiveFieldOfView(MathHelper.PiOver4, aspectRatio, 1000, 10000);

Now we have our camera set up, we can go ahead and start drawing stuff (finally!) – first, we need to do the normal depth drawing. Add the following code just below the above:

graphics.GraphicsDevice.SetRenderTarget(0, normalRenderTarget);

graphics.GraphicsDevice.Clear(Color.Black);

DrawModel(rotation, view, projection, "NormalDepth", myModel);

Now we need to draw with the toon effect. This is on a different render target, so use the following code:

graphics.GraphicsDevice.SetRenderTarget(0, sceneRenderTarget);

graphics.GraphicsDevice.Clear(Color.CornflowerBlue);

DrawModel(rotation, view, projection, "Toon", myModel);

Now we just need to call our post processing effect – if we don’t call our post processing effect, we’ll get this screen:

Which we clearly don’t want! So let’s call that now – underneath the code we just added in our Draw function, add the following:

graphics.GraphicsDevice.SetRenderTarget(0, null);

ApplyPostProcess("EdgeDetect");

If you compile and run the application now, you should see your model in all it’s cartoony glory!

Of course, if you don’t want the lines you can just take out the call DrawModel where we use NormalDepth – that will give you the toon shading like this:

Or – if you just want the lines, you can comment out the call to the Toon effect draw and get this:

Hope this provided decent insight to the HLSL and some cool things that can be done with it! Let us know what cool effects you can come up with!

More information

If you’re looking for more resources, information or help, there’s a great community built up around XNA that you can find over at http://creators.xna.com There’ll you’ll find a whole bunch of starter kits, demos and tutorials to help you out!

Using these for the final student project is a great way to learn in a productive way and is potentially a great way to show how proficient one is when having interviews especially if this is with one of the many Microsoft partners who build and sell products built on top of the Microsoft stack.

And for those of you who are new to our tools and products, I decided to start this small series of blog posts that will take you through a complete project and show you how to use Microsoft technologies end-to-end the “Student Project Express” which will guide you through all the steps needed to complete the project, allowing you to focus on delivering a great solution and write-up!”

During the duration of the series I will cover a few different aspects:

1. Reading the project brief and defining the solution architecture
2. Getting hold of the software, install and configure it so you have a fully functional development environment
3. Designing the database schema
4. Creating your system back end using Web Services
5. Creating a user interface for multiple devices (both end user and admin interface)
6. Integrating 3rd party services and/or connecting with social networks
7. Debug and deploy the solution in a production environment

The brief for this coursework has been taken almost entirely from one used in a the real MSc in Internet Applications Development by the London Metropolitan University.

So… let’s start by taking a quick look at the project brief.

The full project brief is available here as a Word document. Make sure as a first thing you download and read it carefully as understanding the brief fully is a key part of then being able to develop the solution!

While the next post in the series will go into details into reading the brief and translating it into a solution architecture, I want to just spend a few words about it now.

The objective of the application we will need to design and the develop is…

You must develop an application to provide the students with information regarding the modules in the courses that are currently offered at your University. The web pages must integrate some web services and allow users to view information via a desktop and a mobile browser.

So, we can see right away that we will need to create a set of web services that will be “consumed” by a web interface either on our computer desktop and on a mobile device.

While this is not an extremely complex brief, it will require the use of a number of different technologies and the integration of these which I think makes it the perfect candidate for this type of blog series.

One thing which is worth noticing is that I am not aiming to teach you to program! In order to follow this blog posts you need to understand the basics of database design, object oriented programming, web services, HTML and CSS.

I will provide links to reference material that you can use to learn more about the individual technologies I will be using but having a sound understanding of the fundamental concepts is definitely going to be needed.

This is it for now… feel free to download the brief and try thinking how you would go about creating your solution. And let me know if there are any aspects you would like to see me cover in addition to the ones I mentioned above!

See you in January for a detailed analysis of the brief!

What are Web Slices?

A Web Slice is a new feature within IE8 that allows a user to subscribe (favourite) just a portion of that web page. It behaves just like RSS, but for just that portion of the web page. This means, you can put images, text and Rich Internet Applications like Silverlight in them.

How do they work?

A Web Slice is some really simple HTML that can easily be added to any existing code on your web pages. There are two versions you can have – a piece from an entire page, or a special display page that can constantly be updated (sort of like an RSS page). This looks like:

Here, the Basic.html is where the Web Slice is embedded. You “discover” the Web Slice at that location. It then refers to the Update.html file, which is where it updates and provides notification. This is then stored and displayed in your Web Slice.

Implementing Web Slices

Now we get to the good part – implementing our Silverlight application in to a Web Slice. First, we need to create our two files, Basic.html and Update.html.

Basic.html Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Silverlight Application</title>

</head>

<body>

<div class="hslice" id="SilverlightApplication">

<span class="entry-title">Silverlight Application</span>

<a rel=”entry-content” href="Update.html"/>

</div>

</body>

</html>

Explanation

As you can see, we have some “special” class tags. The class tag “hslice” is the class used by Internet Explorer to register a Web Slice. It uses the hAtom micro format. To ensure the Web Slice works correctly, we need to assign it a unique ID. Inside this <div> element, we have the title of the Web Slice – “entry-title”. We also have our Update page, Update.html, which will display our Silverlight application and other display logic for our Web Slice.

Now let’s add our Update.html page.

Update.html Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>StudentZine</title>

<style type="text/css">

html, body {

height: 100%;

overflow: auto;

}

body {

padding: 0;

margin: 0;

}

#silverlightControlHost {

height: 100%;

text-align:center;

}

</style>

<script type="text/javascript" src="Silverlight.js"></script>

<script type="text/javascript">

function onSilverlightError(sender, args) {

var appSource = "";

if (sender != null && sender != 0) {

appSource = sender.getHost().Source;

}

var errorType = args.ErrorType;

var iErrorCode = args.ErrorCode;

if (errorType == "ImageError" || errorType == "MediaError") {

return;

}

var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n" ;

errMsg += "Code: "+ iErrorCode + " \n";

errMsg += "Category: " + errorType + " \n";

errMsg += "Message: " + args.ErrorMessage + " \n";

if (errorType == "ParserError") {

errMsg += "File: " + args.xamlFile + " \n";

errMsg += "Line: " + args.lineNumber + " \n";

errMsg += "Position: " + args.charPosition + " \n";

}

else if (errorType == "RuntimeError") {

if (args.lineNumber != 0) {

errMsg += "Line: " + args.lineNumber + " \n";

errMsg += "Position: " + args.charPosition + " \n";

}

errMsg += "MethodName: " + args.methodName + " \n";

}

throw new Error(errMsg);

}

</script>

</head>

<body>

<form id="form1" runat="server" style="height:100%">

<div id="silverlightControlHost">

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100" height="100">

<param name="initParams" value="environment=WebSlice" />

<param name="source" value="ClientBin/StudentZine.xap"/>

<param name="onError" value="onSilverlightError" />

<param name="background" value="white" />

<param name="minRuntimeVersion" value="3.0.40624.0" />

<param name="autoUpgrade" value="true" />

<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration:none">

<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>

</a>

</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>

</form>

</body>

</html>

Explanation

As you can see, this is a huge chunk of code, but really… it’s only displaying some HTML data. It is pretty much the same HTML page as any default pages that have been put in when generating the project file by Visual Studio. The key to this would be the following line:

<param name="initParams" value="environment=WebSlice" />

If you remember from the Parameters article last month, this lets our Silverlight application know it’s in the Web Slice. As such, we can ensure that it displays correctly within a Web Slice with the same Silverlight application code.

Important Note

There are some very slight limitations with Web Slices. The size of the Web Slice is something to take in to consideration. You can resize them, but they initially drop down with a size of 320x240 – which is certainly a design element to take in to consideration. No-one wants to have to resize the Web Slice just to see some content, when the whole idea is to have that information displayed presentably and quickly.

Result

The end result is that you should now have an application that looks a little bit like this:

Basic.html

Web Slice (Update.html)

As you can see, we now have a green outline around our web slice code. I added the Silverlight application to the Basic.html inside the <div class=”hslice” id=”SilverlightApplication”> tags, underneath the <a rel=””> tag. You can add anything you like within the tag.

We now also have a fully working Web Slice, which adds a link to your Favourites bar. If you click on it, you’ll have the drop down box with our Web Slice Silverlight button! It also provides a link to the page it’s on.

Next time, we’ll be looking at the Windows Gadget framework and how to put a Silverlight application in there!

Microsoft’s Professional Developers Conference (PDC) is often mentioned in revered tones around the water-cooler. Not just because it’s notoriously difficult to get a ticket (usually the conference is a sell-out), or hard to get to (Los Angeles is not, by any stretch of the imagination, near the UK), but because this is the place where Microsoft’s best speakers make the biggest announcements, and lift the lid on the company’s technical strategy and evolution.

Actually, the real buzz is around the “goods”: delegates receive stacks of DVDs loaded with pre-beta code and early releases. In fact in 2008, there was so much code distributed, that delegates received a whole hard-drive full of fun.

So, on with the sunglasses, and off to the Los Angeles Convention Centre. Who said what, and what does it mean?

Keynotes and Sessions

As is usual with this kind of giant conference, the days are split into keynotes, and technical sessions. This year, keynotes were delivered on two days (with queues snaking around the convention centre by 8am).

Day 1 saw Ray Ozzie announce the public launch of Windows Azure. The platform itself has been around in trial form for a little under a year, and has evolved considerably over this time. As well as a mature developer model, there was a lot of attention given to SQL Azure, and to tools for data migration or partitioning between on-premise data, and Azure-hosted data. This is an area to watch and skill up in – it’ll take a couple of years before our customers untangle the options available to them and decide on an implementation strategy, but one thing is sure, no-one will ignore the cloud-hosted option.

Also announced on Day 1 was codename “Dallas” – a project making massive datasets available to companies and developers, and a set of tools to take advantage of this data. We also got a glimpse of the latest Live Labs project: Pivot – a tool for visually searching and organising data from large datasets. It’s a wonderful demonstration of Seadragon integration.

Day 2 keynotes saw a focus on Windows 7 – building up strongly differentiated applications is key to Microsoft’s success here – and Steven Sinofsky took to the stage with some remarkable statistics around the development of this product. Over 800,000 applications were compatibility tested, and 500,000,000 pieces of telemetry data were received from the CTP and beta releases. It’s a staggering piece of engineering involving thousands of developers – and the progress of Windows 7 can be read over at the Engineering Windows 7 blog. We also got a peek at IE9, which was only a couple of weeks old. Key changes at this early stage include a massive increase in rendering performance, and some wonderful use of the DirectX platform to ensure smooth and performant display.

Next, enter Scott Guthrie, who wowed the audience by announcing the beta of SilverLight 4 – less than six months after SilverLight 3 went live. A full list of improvements can be seen on the SilverLight team blog, but highlights include:

· A full set of visual form controls, and Visual Studio 2010 tooling support

· Printing and localisation support

· Multi-touch support

· Trusted application support – allowing COM automation and full desktop integration

So, what of the rest of the sessions? Really, there were too many to mention, but a couple of off-the-beaten track highlights for me included

· DryadLINQ – scalable search for distributed datasets

· Convergence of Windows 7 touch and the Surface touch APIs

· UML tooling support in Visual Studio 2010

· A debate on the Future of Programming (Don Box prediction – EMACs won’t be going away soon!)

Oh – and what of the “goods” this year? Well, the conference exceeded last year by giving attendees a whole laptop! A snappy little Acer touch-enabled tablet in a very cool PDC box – how cool is that?

Where to find out more?

The good news is that the whole conference is available online, broken down into ppts, webcasts and streaming media (indeed smooth streaming media) – check out http://www.microsoftpdc.com. However, here are some links to the tech I’ve mentioned above:

· Day 1 Keynote

· Day 2 Keynote

· A Lap around Windows Azure

· Bridging the Gap from on Premises to the Cloud

· SQL Azure

· Microsoft Project Codename Dallas

· DryadLINQ

· The Future of Programming

· F# Parallel and Asynchronous Programming

So far in my role I have been involved with the editing of the EPG SharePoint which is the internal workspace for file sharing and news press amongst the team. It is used internally for the posting of necessary reports and relevant documentation for the whole of EPG. I have also pulled together reports to analyse how much of the sales data is derived from each product Microsoft sells. I am also involved in a Bid Management project along with the Licensing team which enables me to put together proposals to be sent to big companies in order to win their contract. I am also responsible for the EPG weekly newsletter and send this out across the team including industry news, cross company news, upcoming events, and any win stories from each sector.

Whilst at Microsoft I have the opportunity to complete Certified Application courses for free as part of my employment, so far I have taken up all of the Licensing Fundamentals courses which enables me to be a Licensing Specialist, I can then go on to be licensing Engineer – allowing me to move across to the Licensing Team and work customer facing. I have also completed all the necessary Office Application Specialist exams, meaning I am a certified specialist in Office applications. I am also going to upgrade my university certificates and become an engineer in SQL Server 2008 and Windows Server 2005 allowing me to go into companies and implement this software; I also have a developing background and can then use this to develop coding for these applications.

User Interface

With the new Bing Maps, the user interface has changed quite a lot. It’s now cleaner, more responsive and much richer than the AJAX version. This is because the beta version of Bing Maps is now using Silverlight. Because of this, the experience is now much more intuitive and a lot more user friendly, offering a seamless experience and great immersion.

Streetside

Bing Maps now offers multiple view modes. Streetside is one of these new view modes.

Streetside is a collection of ground level photographs that are stitched together to create an immersive experience at street level. It allows a full 360 panoramic view of the street, along with the ability to zoom in and out of locations. The mini map displays where abouts on the map you actually are, along with facing direction and street information.

Enhanced Birdseye

Enhanced Birdseye is the traditional Birdseye view with a twist. As we’re now using Silverlight 3, we have more tools at our disposal. As such, we now have “urban-view” and “non-urban-view”.

Photosynth

Photosynth allows you to take a bunch of photos of the same scene or object and automagically stitch them all together into one big interactive 3D viewing experience that you can share with anyone on the web.

Bing Maps adds functionality to add custom Photosynth’s to landmarks and places. To view a Photosynth, you just click on the green blob, click Dive In and you’ll zoom straight in to the Photosynth. Here’s one someone in the office threw together and put up on Bing Maps!

What’s Nearby

With Bing Maps, you can zoom in to the location you want and check for nearby services, such as cinemas, restaurants and hotels.

Integrated Controls

There’s also other integrated information in the left hand side of the map, including Weather, Images, Directions and traffic information – all easy to access and at a glance!

Applications

With the new Bing Maps, there is also a variety of integrated applications within Bing Maps.

This includes geo-tagged tweets – you can see who’s tweeting near you and what they’re tweeting! A great feature for organizing your Tweetups and Twestivals!

Want to try it?

If you want to try it out, just point your browser to http://www.bing.com/maps/explore/ and check out all the new features for yourself!

I work in the Server department marketing software that allows data to come alive. My main focus is on a product called SQL Server, it is a database tool that turns data into information and allows you to manage that information in order to make use of it. One of the most recent projects I finished was working with another member in my team to organise an event for the people who already use SQL to demonstrate the new features they can expect from the next release. With 600 people invited to the event the responsibility that came with helping to organise the event was no intern admin job, I was a fully-fledged member of the team!   

My long term project for the year is to reduce the leakage and increase the return on investment of marketing spends. The first part of this is to have a set procedure of how marketing generated leads are dealt with by our sales force. However in investigating the current process and the frustrations this provides varying stakeholders it has proved not to be an easy task. Challenges are good though; with the support of the team I have around me here at Microsoft I’m sure we’ll get there in the end.

One great thing we get at Microsoft is to have access to a lot of new technology. Windows 7 is one of them. We’ve been using it during the Beta stage but in case you haven’t upgraded yet have a look at the following website, with your .ac.uk email address you can get it for 90% discount, that’s only £30!

http://www.ultimatesteal.co.uk/student11

Good luck with the rest of your degree and I hope the applications go well whether they are for internships or grad roles.

Take it easy, Colin   

Create a new Silverlight application:

After this screen, you will be asked if you want to host this in a new Web Site – host is in a new ASP.NET web project and click OK:

Now we have a project to work with, we need to add our basic framework to allow the application to know where it’s being run from. The way we do this is with parameters that are passed from HTML to the Silverlight application.

Let’s start with the Silverlight code. First, we need to allow our project to get the Parameters from the HTML file. Open up your App.xaml.cs file and go to the Application_Startup function. Before the line “this.RootVisual = new MainPage();”, add the following code so that your Application_Startup function looks like this:

private void Application_Startup(object sender, StartupEventArgs e)

{

if (e.InitParams != null)

{

foreach (var item in e.InitParams)

{

this.Resources.Add(item.Key, item.Value);

}

}

this.RootVisual = new MainPage();

}

Now we have the code to read the parameters from the HTML page and add them to our Silverlight resources dictionary, we need to add some code to make sure the MainPage has fully loaded before trying to read the parameters. The way we do this, is to add an event handler to the MainPage, so that when it has fully loaded, it calls our loaded function. Add the following lines of code so that your MainPage() function looks like the following:

public MainPage()

{

InitializeComponent();

this.Loaded += new RoutedEventHandler(MainPage_Loaded);

}

Add the following function also, for the event handler:

void MainPage_Loaded(object sender, RoutedEventArgs e)

{

throw new NotImplementedException();

}

Now that we have the parameters being added to the global dictionary, we can start to use them in our code. So, for this project, we’re going to use an environment key that will allow us to get some information about the environment the Silverlight application is running from.

Let’s go to our MainPage.xaml and add a simple button:

<UserControl x:Class="StudentZine.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

<Grid x:Name="LayoutRoot">

<Button x:Name="ClickMe" Content="ClickMe" />

</Grid>

</UserControl>

For this project, we’ll just change the button to display the text of whatever environment we’re in. In the MainPage.xaml, in the MainPage_Loaded function, delete the current line of code for the not implemented exception and add the following code:

void MainPage_Loaded(object sender, RoutedEventArgs e)

{

string Environment = App.Current.Resources["environment"].ToString();

string ButtonText = "";

switch (Environment)

{

case "Gadget":

ButtonText = "Gadget";

break;

case "WebSlice":

ButtonText = "WebSlice";

break;

default:

ButtonText = "Browser";

break;

}

if (App.Current.IsRunningOutOfBrowser)

ButtonText = "Out Of Browser";

ClickMe.Content = ButtonText;

}

So let’s break this down – the Environment string is storing the value of the “environment” key in our global dictionary. This is the string that will be passed in through the parameters. We then have a select case, where it checks if it has a Gadget or WebSlice value. If so, it sets it to the appropriate value. Otherwise, it assumes it’s in the web browser. The last line of code checks if the application is installed and running out of browser.

On this note, to add OutOfBrowser functionality, right click the Silverlight project and go to properties. Check Enable Running Out Of Browser:

That’s it for our Silverlight code! Now we just need to add some html pages to our web project. For this part of the series, we’ll be covering simply passing in some parameters using the HTML page we already have. So let’s have a look at that code. Open the TestPage.aspx file and add the following line to your Silverlight object code:

<param name=”initParams” value=”environment=Gadget” />

So your code should now look like:

<div id="silverlightControlHost">

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">

<param name="source" value="ClientBin/StudentZine.xap"/>

<param name="initParams" value="environment=Gadget" />

<param name="onError" value="onSilverlightError" />

<param name="background" value="white" />

<param name="minRuntimeVersion" value="3.0.40624.0" />

<param name="autoUpgrade" value="true" />

<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration:none">

<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>

</a>

</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>

And that’s all there is to passing in parameters to a Silverlight application! Next time, we’ll be looking at adding to this project to create an IE8 Web Slice using the same Silverlight code as the Browser piece, as well as fleshing out the application to be something a little more interesting!

What is Windows Azure?

Windows Azure is a cloud computing platform. It allows the deployment of cloud based applications that are managed at Microsoft datacenters.

How do I get Azure?

In order to start building Azure applications, you need to have Visual Studio 2008 or higher to install the SDK and tools.

Windows Azure SDK and tools: http://go.microsoft.com/fwlink/?LinkId=128752

In order for Azure to install correctly, you may need to enable IIS 7.0 ASP.NET application development components – you will receive an error if you have it disabled. To enable it, go to Control Panel -> Programs -> Programs and Features - > Turn Windows Features On or Off.

Enable Windows Communication Foundation HTTP Activation.

Enable IIS -> WWWS -> ASP.NET and CGI.

Building Your First Azure Application

Now you have the runtime and fabric installed, we can build our first application! To begin with, create a new Cloud Service project:

Next, you’ll get a screen asking you about Web and Worker roles. These are the types of applications you can create with Windows Azure. Web roles act as your web user interface (ASP.NET) and the worker role is a console application that deals with intensive background processing. For our demo, go ahead and add a Web Role and a Worker Role.

Now we have our Azure solution, we can start building the application. One great thing about the Windows Azure Platform Kit is that is comes with a solution that allows you to immediately make use of Tables, Queues and Blobs. Add the StorageClient solution (found with the Platform Kit) to your project.

Now that we have our solution setup, we need to configure the ServiceConfiguration.cscfg and the ServiceDefinition.csdef.  Open the ServiceConfiguration.cscfg and change it to look like the following:

<?xml version="1.0"?>

<ServiceConfiguration serviceName="StudentZineApp" xmlns="http://schemas.microsoft.com/ServiceHosting/2008/10/ServiceConfiguration">

  <Role name="StudentZineWebRole">

    <Instances count="1" />

    <ConfigurationSettings>

      <Setting name="QueueStorageEndpoint" value="http://127.0.0.1:10001"/>

      <Setting name="AccountName" value="devstoreaccount1"/>

      <Setting name="AccountSharedKey" value="Eby8vdM02xNOcqFlqUwJPLlmEtlCDXJ1OUzFT50uSRZ6IFsuFq2UVErCz4I6tq/K1SZFPTOtr/KBHBeksoGMGw=="/>

    </ConfigurationSettings>

  </Role>

  <Role name="StudentZineWorkerRole">

    <Instances count="1" />

    <ConfigurationSettings>

      <Setting name="QueueStorageEndpoint" value="http://127.0.0.1:10001"/>

      <Setting name="AccountName" value="devstoreaccount1"/>

      <Setting name="AccountSharedKey" value="Eby8vdM02xNOcqFlqUwJPLlmEtlCDXJ1OUzFT50uSRZ6IFsuFq2UVErCz4I6tq/K1SZFPTOtr/KBHBeksoGMGw=="/>

    </ConfigurationSettings>

  </Role>

</ServiceConfiguration>

If you were accepted on to the CTP for Windows Azure and have an account, you can replace the AccountName and AccountSharedKey with your own details and deploy it to your Azure account. After you have configured the ServiceConfiguration.cscfg, you need to configure the ServiceDefinition.csdef to look like the following:

<?xml version="1.0" encoding="utf-8"?>

<ServiceDefinition name="StudentZineApp" xmlns="http://schemas.microsoft.com/ServiceHosting/2008/10/ServiceDefinition">

  <WebRole name="StudentZineWebRole" enableNativeCodeExecution="false">

    <InputEndpoints>

      <!-- Must use port 80 for http and port 443 for https when running in the cloud -->

      <InputEndpoint name="HttpIn" protocol="http" port="80" />

    </InputEndpoints>

    <ConfigurationSettings>

      <Setting name="QueueStorageEndpoint"/>

      <Setting name="AccountName"/>

      <Setting name="AccountSharedKey"/>

    </ConfigurationSettings>

  </WebRole>

  <WorkerRole name="StudentZineWorkerRole" enableNativeCodeExecution="false">

    <ConfigurationSettings>

      <Setting name="QueueStorageEndpoint"/>

      <Setting name="AccountName"/>

      <Setting name="AccountSharedKey"/>

    </ConfigurationSettings>

  </WorkerRole>

</ServiceDefinition>

Configuration is out of the way! Now what about the application? We’re going to create a simple application that allows you to enter some text on the WebRole ASP.NET page, adds that to the queue and then the worker role is going to process the information from that queue and output it to the development fabric! Sounds easy, right? So let’s begin!

Creating the ASP.NET page

Open the default.aspx pagein the StudentZineWebRole solution. Add an <asp:TextBox> control and an <asp:Button> control. Label these txtMessage and btnSubmit.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="StudentZineWebRole._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:TextBox ID="txtMessage" runat="server" />

        <asp:Button ID="btnSubmit" runat="server" Text="Submit" />

    </div>

    </form>

</body>

</html>

Now we’ve added our controls, we need to add some logic to take the submitted data and add that to the queue. Open up the Default.aspx.cs file. First, we need to add our StorageClient using namespace. To do this, right-click References -> Add  Reference...

Add this line of code to your using namespace directive:

using Microsoft.Samples.ServiceHosting.StorageClient;

On the design page, double-click the button control. This will bring up the code behind with a function called btnSubmit_Click(). In that function, add the following line so that the function looks like the following:

protected void btnSubmit_Click(object sender, EventArgs e)

{

StorageAccountInfo account = StorageAccountInfo.GetDefaultQueueStorageAccountFromConfiguration();

}

This initializes the account information and uses the configuration information you provided previously. Now, you need to create the queue. This is a simple if statement to check if the queue is already there:

QueueStorage service = QueueStorage.Create(account);

       MessageQueue queue = service.GetQueue("messages");

       if (!queue.DoesQueueExist())

       {

              queue.CreateQueue();

       }

Now that we have a queue, we need to add things to it. To do this, add the following lines of code within the same function:

Message msg = new Message(txtMessage.Text);

       queue.PutMessage(msg);

       txtMessage.Text = string.Empty;

This takes the information from the Textbox control and puts this on to the queue. It then empties the Textbox control text. Your completed function should now look like this:

protected void btnSubmit_Click(object sender, EventArgs e)

{

StorageAccountInfo account = StorageAccountInfo.GetDefaultQueueStorageAccountFromConfiguration();

QueueStorage service = QueueStorage.Create(account);

MessageQueue queue = service.GetQueue("messages");

if (!queue.DoesQueueExist())

{

queue.CreateQueue();

}

Message msg = new Message(txtMessage.Text);

queue.PutMessage(msg);

txtMessage.Text = string.Empty;

}

Now that we have a queue and the ability to add items to that queue, we need to process them and report them to the development fabric. In the StudentZineWorkerRole solution, open up WorkerRole.cs and add the StorageClient reference in the same way you did for the WebRole.

For the WorkerRole, you’ll notice two functions. Start() and GetHealthStatus(). Start() works like the Main() function in normal console applications and GetHealthStatus() returns the current state of the WorkerRole. For this demonstration, you can delete all the code within the Start() function, so that it looks like the following:

public override void Start()

{

}

Similar to the WebRole, we need initialize our storage account. Add the following line to the Start() function:

StorageAccountInfo account = StorageAccountInfo.GetDefaultQueueStorageAccountFromConfiguration();

Now we need to add some code to reference the queue we created in the WebRole:

QueueStorage service = QueueStorage.Create(account);

MessageQueue queue = service.GetQueue("messages");

As you can see, it’s pulling the same queue, “messages”, that was created by our WebRole. Now that we have that, we need to pull the messages from the queue. We do this by creating an infinite loop to check the queue. Once we have a message in the queue, we pull that from the queue, report it and then delete it from the queue. Remember, queues work in a FIFO prioritisation!

while (true)

{

Thread.Sleep(10000);

if (queue.DoesQueueExist())

{

Message msg = queue.GetMessage();

if (msg != null)

{

RoleManager.WriteToLog("Information",

string.Format("Message '{0}' processed.", msg.ContentAsString()));

queue.DeleteMessage(msg);

}

}

}

So now, you’re completed WorkerRole Start() function should look like the following:

public override void Start()

{

StorageAccountInfo account = StorageAccountInfo.GetDefaultQueueStorageAccountFromConfiguration();

QueueStorage service = QueueStorage.Create(account);

MessageQueue queue = service.GetQueue("messages");

while (true)

{

Thread.Sleep(10000);

if (queue.DoesQueueExist())

{

Message msg = queue.GetMessage();

if (msg != null)

{

RoleManager.WriteToLog("Information",

string.Format("Message '{0}' processed.", msg.ContentAsString()));

queue.DeleteMessage(msg);

}

}

}

}

And that’s all there is to it! A fully working WebRole and WorkerRole communicating with a queue!