Module #XX: Silverlight Lab #02 (Optional) : Course: Estimated Time To Complete: 45 Minutes Objectives

SilverLight
Module #xx: SilverLight Lab #02 (Optional)
Course: Advanced SharePoint 2007 Development
Estimated Time to Complete: 45 minutes
Objectives:
• Use SilverLight in your SharePoint Sites
Operating Notes:
• In order to use SilverLight in your projects, you need to download

SilverLight Client(http://silverlight.net/GetStarted/)
• Download the SilverLight SDK
(http://www.microsoft.com/downloads/details.aspx?FamilyId=8D933343-
038F-499C-986C-C3C7E87A60B3&displaylang=en)
• Download and install .NET 3.5
(http://www.microsoft.com/downloads/details.aspx?FamilyId=333325FD-
AE52-4E35-B531-508D977D32A6&displaylang=en)
• Download and install the SP2 of WSS
(http://www.microsoft.com/downloads/details.aspx?FamilyId=79BADA8
2-C13F-44C1-BDC1-D0447337051B&displaylang=en)
• Download and install the SP2 of MOSS
(http://www.microsoft.com/downloads/details.aspx?familyid=B7816D90-
5FC6-4347-89B0-A80DEB27A082&displaylang=en)
Deliverables:
• None
Overview: In this activity, we will make a web part that uses SilverLight!
Exercise 1 – Setup SilverLight Client/Server Files
Purpose: Install SilverLight binaries on your client so you can create and use
SilverLight applications.
Result: SilverLight enabled client and server
Task 1 – Install SilverLight Client
1. Run the D:\Lab Files\xx_Lab02\SilverLight.2.0.exe

SilverLight
Module #xx Lab #02 Page 1 of 22
www.architectingconnectedsystems.com
SilverLight
Task 2 – Install SilverLight SDK
1. Run the D:\Lab Files\xx_Lab02\SilverLight_sdk.exe
2. Click “Next”
SilverLight
SilverLight
3. Click “Next”
4. Click “Next”
SilverLight
SilverLight
5. Click “Install”
Task 3 – Install SilverLight files
1. Drag the “C:\Program Files\Microsoft

SDKs\Silverlight\v2.0\Libraries\Server\System.Web.SilverLight.dll” to
“C:\Windows\Assembly”
o NOTE: Sometimes simply copying to the GAC doesn’t work for SP
You will need to copy to local bin directory of the web application
2. Copy the “C:\Program Files\Microsoft
SDKs\Silverlight\v2.0\Libraries\Server\System.Web.SilverLight.dll” to the
“C:\inetpub\wwwroot\wss\virtualdirectories\100\bin”
Exercise 2 – Setup SharePoint Web Application
Purpose: Setup your SharePoint Web Application to be able to host SilverLight
Result: SilverLight enabled SharePoint web application
Task 1 – Setup ClientBin directory
1. Create a folder called “ClientBin” in the

“C:\Inetpub\wwwroot\wss\VirtualDirectories\100” directory
2. Open IIS Manager
3. Expand SHAREPOINT2007
SilverLight
SilverLight
4. Expand “Web Sites”

5. Right click “SharePoint – 100”, select “New->Virtual Directory”
6. Click “Next”
7. For “Alias”, type “ClientBin”
SilverLight
SilverLight
8. Click “Next”
9. For path, type “C:\Inetpub\wwwroot\wss\VirtualDirectories\100\ClientBin”
10. Click “Next”
11. Click “Run scripts (such as ASP)” checkbox
12. Click “Next”

13. Click “Finish”
Task 2 – Setup MIME Types
1. Right click “ClientBin”, select “Properties”

2. Select “HttpHeaders” tab
3. Click “MIME Types”
SilverLight
SilverLight
4. Add three MIME types:

o Click “New”
o Set Extension and MIME Type for each of the following:
1. .xaml application/xaml+xml
2. .xap application/x-silverlight-app
3. .xbap application/x-ms-xbap
o Click “Ok”
Task 3 – Copy SilverLight JavaScript Files
1. Copy the “C:\Program Files\Microsoft

SDKs\Silverlight\v2.0\Tools\SilverLight.js” file to
“C:\Inetpub\wwwroot\wss\VirtualDirectories\100\ClientBin”
Task 4 – Configure web.config
1. Open the “C:\Inetpub\wwwroot\wss\VirtualDirectories\100\web.config” file

2. Add the folloing sectionGroup to the \Configuration\configSections element
SilverLight
SilverLight
<sectionGroup name="system.web.extensions"
type="System.Web.Configuration.SystemWebExtensionsSectionGroup,
System.Web.Extensions, Version=3.5.0.0, Culture=neutral,
PublicKeyToken=31BF3856AD364E35">
<sectionGroup name="scripting"
type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions,
Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
<section name="scriptResourceHandler"
type="System.Web.Configuration.ScriptingScriptResourceHandlerSection,
PublicKeyToken=31BF3856AD364E35" requirePermission="false"
allowDefinition="MachineToApplication" />
<sectionGroup name="webServices"
type="System.Web.Configuration.ScriptingWebServicesSectionGroup,
PublicKeyToken=31BF3856AD364E35">
<section name="jsonSerialization"
type="System.Web.Configuration.ScriptingJsonSerializationSection,
allowDefinition="Everywhere" />
<section name="profileService"
type="System.Web.Configuration.ScriptingProfileServiceSection,
<section name="authenticationService"
type="System.Web.Configuration.ScriptingAuthenticationServiceSection,
<section name="roleService"
type="System.Web.Configuration.ScriptingRoleServiceSection, System.Web.Extensions,
Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"
requirePermission="false" allowDefinition="MachineToApplication" />
</sectionGroup>
</sectionGroup>
</sectionGroup>
3. Add the following to the SafeControls section:
<SafeControl Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral,

PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TypeName="*"
Safe="True" />
<SafeControl Assembly="System.Web.Silverlight, Version=2.0.5.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.SilverlightControls"
TypeName="*" Safe="True" />
4. Add the following HttpHandlers to the end of the \system.web\httpHandler

section:
<remove verb="*" path="*.asmx" />

<add verb="*" path="*.asmx" validate="false"
type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions,
Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<add verb="*" path="*_AppService.axd" validate="false"
<add verb="GET,HEAD" path="ScriptResource.axd"
type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions,
SilverLight
SilverLight
Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"

validate="false" />
5. Add the following assemblies to \system.web\compliation\assemblies:
<add assembly="System.Core, Version=3.5.0.0, Culture=neutral,

PublicKeyToken=B77A5C561934E089" />
<add assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral,
PublicKeyToken=31BF3856AD364E35" />
<add assembly="System.Data.DataSetExtensions, Version=3.5.0.0, Culture=neutral,
<add assembly="System.Xml.Linq, Version=3.5.0.0, Culture=neutral,
<add assembly="System.Web.Silverlight, Version=2.0.5.0, Culture=neutral,
6. Add the following to the \system.web\pages\ element:
<controls>
<add tagPrefix="asp" namespace="System.Web.UI"
assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral,
<add tagPrefix="asp" namespace="System.Web.UI.WebControls"
assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral,
</controls>
7. Add the following after the end element of “system.net”
<system.webServer>
<validation validateIntegratedModeConfiguration="false" />
<modules>
<remove name="ScriptModule" />
<add name="ScriptModule" preCondition="managedHandler"
type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0,
Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
</modules>
<handlers>
<remove name="WebServiceHandlerFactory-Integrated" />
<remove name="ScriptHandlerFactory" />
<remove name="ScriptHandlerFactoryAppServices" />
<remove name="ScriptResource" />
<add name="ScriptHandlerFactory" verb="*" path="*.asmx"
preCondition="integratedMode"
<add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd"
preCondition="integratedMode"
<add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD"
path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler,
</handlers>
<security>
<authorization>
<add accessType="Allow" users="" />
<add accessType="Allow" users="?" />
SilverLight
SilverLight
</authorization>
</security>
</system.webServer>
Task 5 – Reset IIS
1. Open a command prompt, run the following:
iisreset
Exercise 3 – Use SilverLight (via JavaScript)!
Purpose: Create a SilverLight Control for your SharePoint site. This is done via
JavaScript rather than compiling managed assemblies into XAP files.
Result: SilverLight enabled control
Task 1 – Create a SilverLight application
1. Create a calculator.xaml file with the following:
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="calc"
Width="166"
Height="166"
RenderTransformOrigin="0,0"
>
<Canvas.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FF111479" Offset="0"/>
<GradientStop Color="#FFA9AACE" Offset="1"/>
</LinearGradientBrush>
</Canvas.Background>
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="2" ScaleY="2"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Canvas.RenderTransform>
<Canvas x:Name="n7" Canvas.Top="39.75" Canvas.Left="12" >
<ScaleTransform ScaleX="1.2" ScaleY="1.2" />
<Rectangle Fill="#FFFFFFFF" RadiusX="4" RadiusY="4" Width="26.875" Height="23"
/>
<Rectangle x:Name="buttonBG" Canvas.Top="1.5" Canvas.Left="1.5"
Fill="#FF808080" RadiusX="4" RadiusY="4" Width="23.25" Height="20"/>
<TextBlock Canvas.Top="2.1" Canvas.Left="8.833" FontFamily="Arial"
FontSize="14" FontWeight="bold" Text="7" RenderTransformOrigin="-0.091,0.499" />
<Rectangle Canvas.Top="4" Canvas.Left="1.5" RadiusX="4" RadiusY="4"
Width="23.25" Height="16">
SilverLight
SilverLight
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.535,2.329" EndPoint="0.535,-1.989">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#00FFFFFF" Offset="0.392"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle Canvas.Top="1.5" Canvas.Left="1.5" RadiusX="4" RadiusY="4"
Width="23.25" Height="16.7">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.516,-1.46" EndPoint="0.516,3.018">
</Rectangle.Fill>
</Rectangle>
</Canvas>
<Canvas x:Name="n8" Canvas.Top="40" Canvas.Left="48.75" >
<Rectangle Fill="#FFFFFFFF" RadiusX="4" RadiusY="4" Width="26.875"
Height="23" />
<Rectangle x:Name="buttonBG1" Canvas.Top="1.5" Canvas.Left="1.5"
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.535,2.329" EndPoint="0.535,-
1.989">
</Rectangle.Fill>
</Rectangle>
Width="23.25" Height="16.7">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.516,-1.46"
EndPoint="0.516,3.018">
</Rectangle.Fill>
</Rectangle>
</Canvas>
<Canvas x:Name="fequals" Canvas.Top="131" Canvas.Left="84" >
/>
FontSize="14" FontWeight="bold" Text="=" RenderTransformOrigin="-0.091,0.499" />
<Rectangle.Fill>
</Rectangle.Fill>
</Rectangle>
Width="23.25" Height="16.7">
<Rectangle.Fill>
SilverLight
SilverLight

</Rectangle.Fill>
</Rectangle>
</Canvas>
<Canvas x:Name="fplus" Canvas.Top="39.5" Canvas.Left="119.5" >
Height="23" />
FontSize="14" FontWeight="bold" Text="+" RenderTransformOrigin="-0.091,0.499" />
<Rectangle.Fill>
1.989">
</Rectangle.Fill>
</Rectangle>
Width="23.25" Height="16.7">
<Rectangle.Fill>
EndPoint="0.516,3.018">
</Rectangle.Fill>
</Rectangle>
</Canvas>
<Canvas x:Name="n0" Canvas.Top="130.5" Canvas.Left="11.75" >
/>
<Rectangle.Fill>
</Rectangle.Fill>
</Rectangle>
Width="23.25" Height="16.7">
<Rectangle.Fill>
</Rectangle.Fill>
</Rectangle>
</Canvas>
SilverLight
SilverLight
Height="23" />
<Rectangle.Fill>
1.989">
</Rectangle.Fill>
</Rectangle>
Width="23.25" Height="16.7">
<Rectangle.Fill>
EndPoint="0.516,3.018">
</Rectangle.Fill>
</Rectangle>
</Canvas>
/>
<Rectangle.Fill>
</Rectangle.Fill>
</Rectangle>
Width="23.25" Height="16.7">
<Rectangle.Fill>
</Rectangle.Fill>
</Rectangle>
</Canvas>
Height="23" />
<TextBlock x:Name="tB1" Canvas.Top="2.1" Canvas.Left="8.833"
FontFamily="Arial" FontSize="14" FontWeight="bold" Text="1"
RenderTransformOrigin="-0.091,0.499" />
<Rectangle.Fill>
1.989">
SilverLight
SilverLight

</Rectangle.Fill>
</Rectangle>
Width="23.25" Height="16.7">
<Rectangle.Fill>
EndPoint="0.516,3.018">
</Rectangle.Fill>
</Rectangle>
</Canvas>
/>
<Rectangle.Fill>
</Rectangle.Fill>
</Rectangle>
Width="23.25" Height="16.7">
<Rectangle.Fill>
</Rectangle.Fill>
</Rectangle>
</Canvas>
Height="23" />
<Rectangle.Fill>
1.989">
</Rectangle.Fill>
</Rectangle>
Width="23.25" Height="16.7">
<Rectangle.Fill>
EndPoint="0.516,3.018">
SilverLight
SilverLight

</Rectangle.Fill>
</Rectangle>
</Canvas>
/>
<Rectangle.Fill>
</Rectangle.Fill>
</Rectangle>
Width="23.25" Height="16.7">
<Rectangle.Fill>
</Rectangle.Fill>
</Rectangle>
</Canvas>
Height="23" />
<Rectangle.Fill>
1.989">
</Rectangle.Fill>
</Rectangle>
Width="23.25" Height="16.7">
<Rectangle.Fill>
EndPoint="0.516,3.018">
</Rectangle.Fill>
</Rectangle>
</Canvas>
<Canvas x:Name="fminus" Canvas.Top="69.75" Canvas.Left="120.25" >
/>
SilverLight
SilverLight

FontSize="14" FontWeight="bold" Text="-" RenderTransformOrigin="-0.091,0.499" />
<Rectangle.Fill>
</Rectangle.Fill>
</Rectangle>
Width="23.25" Height="16.7">
<Rectangle.Fill>
</Rectangle.Fill>
</Rectangle>
</Canvas>
<Canvas x:Name="fdivide" Canvas.Top="131.25" Canvas.Left="120.25" >
Height="23" />
FontSize="14" FontWeight="bold" Text="/" RenderTransformOrigin="-0.091,0.499" />
<Rectangle.Fill>
1.989">
</Rectangle.Fill>
</Rectangle>
Width="23.25" Height="16.7">
<Rectangle.Fill>
EndPoint="0.516,3.018">
</Rectangle.Fill>
</Rectangle>
</Canvas>
<Canvas x:Name="fmultiply" Canvas.Top="101" Canvas.Left="120" >
Height="23" />
FontSize="14" FontWeight="bold" Text="*" RenderTransformOrigin="-0.091,0.499" />
<Rectangle.Fill>
1.989">
SilverLight
SilverLight
</Rectangle.Fill>
</Rectangle>
Width="23.25" Height="16.7">
<Rectangle.Fill>
EndPoint="0.516,3.018">
</Rectangle.Fill>
</Rectangle>
</Canvas>
<Rectangle Stroke="#FF000000" RadiusX="4" RadiusY="4" Width="138.75"
Height="23.75" Canvas.Left="12" Canvas.Top="9">
<Rectangle.Fill>
<GradientStop Color="#FF808080" Offset="0.586"/>
</Rectangle.Fill>
</Rectangle>
<Canvas>
<TextBlock x:Name="result" Width="132.75" Height="18.75" Canvas.Left="18"
Canvas.Top="12.5" FontFamily="Arial" FontSize="16" FontWeight="Bold" Text="11111"
TextWrapping="Wrap"/>
</Canvas>
</Canvas>
2. Upload the file to the “Shared Documents” document library

3. Create a new javascript file with the following:
function errorHandler(sender, args)

{
alert(args._error.errorType);
alert(args._error.errorCode);
alert(args._error.errorMessage);
}
designerCalc = function() {
this.host = null;
this.n7 = null;
this.buttonBG = null;
this.n8 = null;
this.buttonBG1 = null;
this.fequals = null;
this.fplus = null;
this.n0 = null;
this.n3 = null;
this.n2 = null;
this.n1 = null;
this.n6 = null;
this.n5 = null;
this.n4 = null;
this.n9 = null;
SilverLight
SilverLight
this.fminus = null;
this.fdivide = null;
this.fmultiply = null;
this.result = null;
this.tb1 = null;
}
designerCalc.prototype = {
initializeComponent: function(slhost) {
var host = slhost.content;
this.host = host;
this.n0 = host.findName("n0");
this.buttonBG = host.findName("buttonBG");
this.buttonBG1 = host.findName("buttonBG1");
this.fequals = host.findName("fequals");
this.fplus = host.findName("fplus");
this.fminus = host.findName("fminus");
this.fdivide = host.findName("fdivide");
this.fmultiply = host.findName("fmultiply");
this.result = host.findName("result");
}
}
Type.registerNamespace("Custom");
Custom.Calculator = function(element) {
Custom.Calculator.initializeBase(this, [element]);
this._designer = new designerCalc();

this._value1 = "";
this._operator = "=";
this._recentOperator = true;
}
Custom.Calculator.prototype = {
_events: null,
onPluginLoaded : function(args) {
Custom.Calculator.callBaseMethod(this, 'onPluginLoaded', new Array(args));
// Call on the component initialized to get the specific component's XAML

element fields.
this._designer.initializeComponent(this.get_element());
// Hookup event handlers as required in this custom type.

var f = Function.createDelegate(this, this._numClick);
SilverLight
SilverLight
this.addEventListener(this._designer.n0, "mouseLeftButtonUp", f);

this.addEventListener(this._designer.fplus, "mouseLeftButtonUp", f);
this.addEventListener(this._designer.fminus, "mouseLeftButtonUp", f);
this.addEventListener(this._designer.fmultiply, "mouseLeftButtonUp", f);
this.addEventListener(this._designer.fequals, "mouseLeftButtonUp", f);
this.addEventListener(this._designer.fdivide, "mouseLeftButtonUp", f);
// Set initial value

this._designer.result.Text = "0";
},
_numClick : function(sender, e) {
var s = sender.children.getItem(2).Text;
if ("=-+/*".indexOf(s) !== -1) {

if (!this._recentOperator) {
if (this._operator === "=") {
this._value1 = this._designer.result.Text;
}
else {
if ((this._operator === "/") &&
(parseFloat(this._designer.result.Text) === 0)) {
this._designer.result.Text = "Error";
this._value1 = "0";
s = "=";
}
else {
var value = eval("parseFloat(this._value1) " +
this._operator + " parseFloat(this._designer.result.Text);");
value = String(value).substr(0, 12);
this._value1 = value;
this._designer.result.Text = this._value1;
}
}
}
this._operator = s;
this._recentOperator = true;
return;
}
if (this._recentOperator) {
this._designer.result.Text = s;
this._recentOperator = false;
}
else {
this._designer.result.Text += s;
}
}
}
Custom.Calculator.registerClass('Custom.Calculator', Sys.UI.Silverlight.Control);
4. Upload the js file to the “Shared Documents” document library
Task 1 – Open your Team Site
1. Open http://servername:100
2. Using SharePoint Designer, open the default.aspx page,
SilverLight
SilverLight
3. Replace (or Add) the ScriptManager with the following:
<asp:ScriptManager ID="ScriptManager1" runat="server">

<Scripts>
<asp:ScriptReference Name="SilverlightControl.js"
Assembly="System.Web.Silverlight"/>
<asp:ScriptReference Path="../Shared Documents/calculator.js" />
</Scripts>
</asp:ScriptManager>
4. Modify the Silverlight control to:
<asp:Silverlight runat="server" ID="Silverlight1"

Height="340"
Width="320"
Source="../Shared Documents/calculator.xaml"
ScriptType="Custom.Calculator"
OnPluginError="errorHandler"/>
5. Add the following script tag above the silverlight control:
<script>
function errorHandler(sender, args)
{
alert(args._error.errorType);
alert(args._error.errorCode);
alert(args._error.errorMessage);
}
</script>
6. Add the following register directive to the top of the page:
<%@ Register Assembly="System.Web.Silverlight"

Namespace="System.Web.UI.SilverlightControls" TagPrefix="asp" %>
7. Refresh the page in the browser, you should see your new silverlight application!
SilverLight
SilverLight
Exercise 4 – Use SilverLight (via XAP files)!
Purpose: Learn to use Xap files on your SharePoint Site.
Result: SilverLight enabled site
Task 1 – Download any Xap file from the internet
1. You can download .xap files from the SharePoint Blueprint

http://www.codeplex.com/SL4SP
2. Upload the .xap file to your “Shared Documents” library
3. Change the SilverLight control to point to the .xap file
<asp:Silverlight runat="server" ID="Silverlight1"

Height="340"
Width="320"
Source="./Shared Documents/SL.XAML.HelloWorldRTM.xap"
ScriptType="Custom.Calculator"
OnPluginError="errorHandler"/>
4. Refresh the sharepoint site!
SilverLight
SilverLight
SilverLight

Module #XX: Silverlight Lab #02 (Optional) : Course: Estimated Time To Complete: 45 Minutes Objectives

Încărcat de

Informații document

Descriere originală:

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Module #XX: Silverlight Lab #02 (Optional) : Course: Estimated Time To Complete: 45 Minutes Objectives

Încărcat de

Drepturi de autor:

Formate disponibile

SilverLight

Module #xx: SilverLight Lab #02 (Optional)

Course: Advanced SharePoint 2007 Development

Estimated Time to Complete: 45 minutes

• Use SilverLight in your SharePoint Sites

• In order to use SilverLight in your projects, you need to download

Exercise 1 – Setup SilverLight Client/Server Files

Result: SilverLight enabled client and server

Task 1 – Install SilverLight Client

1. Run the D:\Lab Files\xx_Lab02\SilverLight.2.0.exe

Task 2 – Install SilverLight SDK

1. Run the D:\Lab Files\xx_Lab02\SilverLight_sdk.exe

Task 3 – Install SilverLight files

1. Drag the “C:\Program Files\Microsoft

Exercise 2 – Setup SharePoint Web Application

Purpose: Setup your SharePoint Web Application to be able to host SilverLight

Result: SilverLight enabled SharePoint web application

Task 1 – Setup ClientBin directory

1. Create a folder called “ClientBin” in the

4. Expand “Web Sites”

12. Click “Next”

Task 2 – Setup MIME Types

1. Right click “ClientBin”, select “Properties”

4. Add three MIME types:

Task 3 – Copy SilverLight JavaScript Files

1. Copy the “C:\Program Files\Microsoft

Task 4 – Configure web.config

1. Open the “C:\Inetpub\wwwroot\wss\VirtualDirectories\100\web.config” file

3. Add the following to the SafeControls section:

<SafeControl Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral,

4. Add the following HttpHandlers to the end of the \system.web\httpHandler

<remove verb="*" path="*.asmx" />

Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"

5. Add the following assemblies to \system.web\compliation\assemblies:

<add assembly="System.Core, Version=3.5.0.0, Culture=neutral,

6. Add the following to the \system.web\pages\ element:

7. Add the following after the end element of “system.net”

Task 5 – Reset IIS

1. Open a command prompt, run the following:

Exercise 3 – Use SilverLight (via JavaScript)!

Result: SilverLight enabled control

Task 1 – Create a SilverLight application

1. Create a calculator.xaml file with the following:

<GradientStop Color="#FFFFFFFF" Offset="0"/>

<GradientStop Color="#FFFFFFFF" Offset="0"/>

<GradientStop Color="#00FFFFFF" Offset="0.586"/>

<Rectangle x:Name="buttonBG12" Canvas.Top="1.5" Canvas.Left="1.5"

2. Upload the file to the “Shared Documents” document library

function errorHandler(sender, args)

this._designer = new designerCalc();

// Call on the component initialized to get the specific component's XAML

// Hookup event handlers as required in this custom type.

this.addEventListener(this._designer.n0, "mouseLeftButtonUp", f);

// Set initial value

if ("=-+/*".indexOf(s) !== -1) {

4. Upload the js file to the “Shared Documents” document library

Task 1 – Open your Team Site

3. Replace (or Add) the ScriptManager with the following:

<asp:ScriptManager ID="ScriptManager1" runat="server">

4. Modify the Silverlight control to:

<asp:Silverlight runat="server" ID="Silverlight1"

5. Add the following script tag above the silverlight control:

<remove verb="" path=".asmx" />