Wrox Beginning SharePoint 2010 Development phần 8 pps

You’ll be prompted with a checkbox to host the Silverlight application in a new Web site, as shown in Figure 9-3.. So, the code in this example maps to the XAML, calculates the length of

The code behind for the previous application calls the btnGreeting_Click event handler, as you can see by the following bolded code:

public partial class MainPage : UserControl {

public MainPage() {

When you press F5, you can test the Silverlight application from within Visual Studio Running this sample application

in debug mode will result in something similar to Figure 9-1

Even though Silverlight is a Web-based experience, it is also NET-based What this means is that you will use Visual Studio or Expression Blend to build your applica-tions and then deploy them to a Web property where

a “light” NET runtime will enable you to execute the Silverlight applications you build Specifically, the appli-cations execute within an ActiveX browser plug-in that runs inside of your browser This results in dynamic managed-code applications that leverage the strength of the NET framework The “light” means that not every class library you have in the standard NET Framework ships with the NET Framework that Silverlight leverages

NOTE To understand the classes that Silverlight 4 leverages within the

cc838194(VS.96).aspx

FIgure 9-1 Simple Silverlight application

When it comes to developer skills, this also means that those who have programmed using NET

before have the capability to quickly translate those skills into real development This means

lever-aging C# or VB.NET, LINQ, WCF, and so on However, Silverlight is not limited to just NET You

can also integrate dynamic languages, such as JavaScript, Ajax, Ruby, and Python with Silverlight,

along with Web 2.0 technologies, services (for example, ASP.NET Web services, WCF, and REST),

and much more The types of applications you can build with Silverlight vary quite

dramati-cally — from the simple Web banner application to the fully featured business application

There are countless examples of Silverlight being used on the Web today, and the number of

applications is growing daily For example, Figure 9-2 shows a Netflix movie player that is a

Silverlight-enabled way to watch movies over the Web For those who don’t have Netflix, it

deliv-ers a Web-based experience for viewing movies, and the Silverlight viewer enables you to load

and navigate across a movie you want to watch

FIgure 9-2 Netflix Silverlight movie viewer

However, media management is but one example of Silverlight’s applications As it has evolved as

a technology, it has become much richer; and with Silverlight 4, the possibility of building

busi-ness applications that are hosted on the Web is now a reality Some of the major enhancements to

Silverlight 4 include richer media management, a wider set of controls, better business application

features, and much, much more

NOTE To learn more about Silverlight, see http://silverlight.net.

Let’s create a simple Silverlight application

Creating a Simple Silverlight Application

trY It out

Code file [SilverlightApplication1.zip] available for download at Wrox.com

Silverlight is a great new way to build dynamic and compelling RIAs To create a simple Silverlight

application, follow these steps:

1. Click File ➪ New ➪ Project In the Silverlight templates, select the Silverlight application template

(which provides you with the capability to create a Silverlight application with or without a Web site associated with it)

2. Provide a name for the application and click OK

3. You’ll be prompted with a checkbox to host the Silverlight application in a new Web site, as shown

in Figure 9-3 You don’t need to do this unless you want to have a separate Web site for your application, where, for example, you might deploy Web services that you want to leverage within your Silverlight application So, uncheck the box next to “Host the Silverlight application in a new Web site” and then click OK

FIgure 9-3 New Silverlight Application dialog

4. After you create a new Silverlight application, the project structure that Visual Studio creates

includes a number of project files in your Solution Explorer, as shown in Figure 9-4

FIgure 9-4 Simple Silverlight UI

5. Drag and drop four controls from the Toolbox (two labels, a textbox, and a button), and arrange

the UI as shown in Figure 9-4 Note that right beneath the Designer is the XAML view; as you add

controls to the Designer, the XAML is updated within the XAML view

Table 9-1 provides an overview of the control types and the corresponding names you’ll use in the

Silverlight application

table 9-1 Control Types and Names

Control tYpe Control name

6. You’ve worked with XAML before in Chapter 3, but as a refresher, there are some important

properties that you’ll want to be sure you pay attention to when building out your Silverlight

applications One of the properties is the x:Name property, which represents the name (or ID) of

a Silverlight control If you want to code against an object within Silverlight, having the name is essential You can see these properties in the following boldfaced code Other properties within the XAML are the layout properties, which are updated as you move the controls about on the Designer Also note that if you have dependent assemblies that you require (for example, leverag-ing the Silverlight toolkit would require you to have dependent assemblies associated with your Silverlight application), you may need to ensure that there is a namespace reference to these listed within the opening UserControl element within the XAML code Ensure that the XAML in your new application reflects the following bolded code:

<Grid x:Name=”LayoutRoot” Background=”White” Height=”186”>

<dataInput:Label Content=”My First Silverlight App” Height=”21”

HorizontalAlignment=”Left” Margin=”42,32,0,0” Name=”lblTitle”

VerticalAlignment=”Top” Width=”225” FontWeight=”Bold” />

<Button Click=”btnName_Click” Content=”Greeting”

Height=”23” HorizontalAlignment=”Left”

Margin=”42,115,0,0” Name=”btnName” VerticalAlignment=”Top”

Width=”75” />

<TextBox Height=”23” HorizontalAlignment=”Left”

Margin=”104,72,0,0” Name=”txtbxName” VerticalAlignment=”Top”

Width=”163” />

<dataInput:Label Content=”Name:” Height=”21”

HorizontalAlignment=”Left” Margin=”42,72,0,0” Name=”lblName”

VerticalAlignment=”Top” Width=”56” />

</Grid>

</UserControl>

7. Right-click the MainPage.xaml file, and select View Code

8. Add the following bolded code to your Silverlight application:

string myNamePrefix = “Length of Name: “;

string myName = txtbxName.Text;

9. After you’ve added the code, press F5 to test out the application

Visual Studio will invoke an instance of your default browser

and then launch the Silverlight application, which should look

similar to Figure 9-5 The Silverlight application leverages the

built-in test harness (there is an HTML page that launches and

hosts the Silverlight application) to run the application

How It Works

You’re now likely somewhat familiar with the XAML code, as

you’ve seen a couple of examples The important takeaway from

the XAML discussion is that you create objects with properties

you can code against

For example, when you add code behind in Silverlight, it’s much like other NET experiences You are

building code against the objects that you’ve created and added to your project As shown in this

exam-ple, the objects are UI controls (such as labels and buttons), and examples of the properties of those

controls are content, text, height, and width

So, the code in this example maps to the XAML, calculates the length of the string that is entered

into the textbox, and then changes the Content property of the btnName button after you click OK,

string myNamePrefix = “Length of Name: “;

string myName = txtbxName.Text;

int myNameLength = 0;

FIgure 9-5 Debugging the simple Silverlight application

myNameLength = myName.Length;

MessageBox.Show(myNamePrefix + myNameLength.ToString());

btnName.Content = “Goodbye”;

}

…

As you move throughout this chapter, you’ll see how you can integrate Silverlight with SharePoint

But, for now let’s talk briefly about why you should integrate the two technologies.

WhY Integrate sIlverlIght and sharepoInt?

If you look at the momentum across SharePoint and Silverlight, it is pretty incredible to see the growing center of gravity around each of them For example, at the 2009 SharePoint Conference

in Las Vegas, Steve Ballmer, CEO of Microsoft, announced that the developer community for SharePoint would soon be at “1 million developers.” Also, he noted that the business around SharePoint was stable and growing, with more than $1 billion in revenue, 100 million enterprise licenses, a network of more than 4,000 partners, and a strong opportunity for post-deployment cus-tomizations What this means for you (and, more generally, for software development firms) is that there is a great opportunity to build and leverage SharePoint development skills

With Silverlight, there is similar growth As mentioned, the product is now in its fourth release, with quicker go-to-market cycles than other products at Microsoft As of this writing, Silverlight had more than 500 million downloads, 500,000 developers worldwide, many partners using the technol-ogy, and thousands of applications being built worldwide

Also, where developers have used Adobe Flash, they can now use Silverlight within the NET and Microsoft stack This translates into vastly improved integration across the different technologies

For example, the tools support and NET class library support provide great integration across the applications you’re trying to build This support also makes building these applications a much easier proposition This is evidenced by, for example, the integration between Visual Studio and Expression Blend to more closely tie together the developer and designer experiences

So, taken separately, these two technologies are doing very well However, there are some great opportunities when you bring these two technologies together

For example, they are both Web-based technologies They are both based on NET and can support some level of scripting and dynamic language integration Furthermore, SharePoint is a platform, so naturally it plays host to interoperable technologies such as Silverlight, and, within this light, supports Silverlight out of the box in SharePoint 2010 And, lastly, the developer story is solid Not only do you have SharePoint project templates out of the box with Visual Studio 2010 (along with the Silverlight templates), but as mentioned earlier you also have a seamless integration with Expression Blend

All this translates into great things for these two technologies coming together, not only for the end consumer of Silverlight applications in SharePoint, but also for the developers and designers working together to create and deploy them

The opportunities for applications within the convergence of these two technologies are equally

compelling For example, you can build the following:

Simple self-contained applications, where the code resides within the Silverlight application

And the list goes on Literally, if you look at the opportunity space here, it’s as far as it is wide And,

again, the developer and designer story is so complementary and compelling that companies will

naturally gravitate toward using these tools

With that in mind, let’s now dig a bit deeper into how SharePoint and Silverlight integrate

IntegratIng sIlverlIght WIth sharepoInt

If you were to think at a very high architectural level about how SharePoint integrates with

Silverlight, you might envisage something like what is shown in Figure 9-6 This figure shows that,

while SharePoint is built upon a foundation of a server or a client (depending on your OS

installa-tion), at the top end of the experience, SharePoint is rendering pages as aspx and HTML pages (and,

of course, embedded scripts) SharePoint also supports the integration of Silverlight (in or out of

browser) as an enhanced user experience, or a deeper-level integration with the underlying artifacts

within SharePoint Note that, while Silverlight applications are ultimately hosted within the aspx

pages within SharePoint, you can also integrate Silverlight applications that are hosted outside of

SharePoint — as you will see in one of the exercises later in this chapter

Azure Services

ASPX/HTML

Windows 7 Windows Server

SharePoint

FIgure 9-6 High-level architectural integration

Furthermore, what Figure 9-6 also represents is the fact that you can integrate other technologies within Silverlight (or directly with SharePoint), such as Web 2.0 technologies, Azure service end-points, third-party services, and so on Thus, there is a wide berth for the integration that can drive

at a superficial level (for example, simply hosting an application) or drive much deeper (for example,

a Silverlight application integrating with the underlying SharePoint object model) And, in both of these cases, you could also integrate other Microsoft or non-Microsoft technologies, services, or data sources to further complement the integrated solutions

You can sensibly classify the integrations with SharePoint in three primary ways, as is illustrated in Figure 9-7 These classifications are not necessarily hard and fast, but they have helped developers in the past quickly distinguish the different types and levels of integration

SharePoint Artifact

OM, Web 2.0, Service,

FIgure 9-7 Different types of integration

The first is essentially a no-touch option What this means is that you have a Silverlight application

hosted outside of your SharePoint domain (for example, on the Web), and SharePoint provides a way to host that application A practical example might be a stock widget that you can simply point

to by creating a Content Editor Web part, and then adding an <iframe> object to reference the Silverlight application to load on page load

The second classification, the low-touch integration, is where you have code that is executing, but

it may either be self-contained or have a light touch with SharePoint This might be where you’ve deployed a Web part that is hosting a Silverlight application to SharePoint, or you’re leveraging the out-of-the-box Silverlight Web part to host your Silverlight application

The high-touch classification is where you would see integration with the SharePoint object model

This is, for example, where you might leverage the Lists Web service to provide a Silverlight ing of a list, or where you might leverage the SharePoint client object model to read and update por-tions of a list Either way, you are explicitly leveraging the SharePoint object model in some capacity

render-For the remainder of this chapter, you’ll walk through examples of each of the three types of

inte-gration to better understand how to accomplish this inteinte-gration

no-touch Integration

The no-touch integration should simply be the easiest way to integrate Silverlight into your

SharePoint site What’s great is that you can integrate anything from community Silverlight widgets

to third-party consumer widgets to applications that you leverage within the enterprise, using this

type of classification In fact, with only a few steps, you should be able to set up and render this type

of application

Let’s try a couple of examples

blog/archive/2009/10/07/11739.aspx He created a simple Silverlight application that you can

reference using some straightforward <iframe> code (which he provides for you)

Leveraging Community Hosted Silverlight Applications in SharePoint

2. Next, go to your SharePoint site and select Site Actions ➪ Edit Page

4. Select the Content Editor Web part and click Add

5. After the Content Editor Web part has been added (Figure 9-8), click the “Click here to add new

content” link

FIgure 9-8 Using the Content Editor Web part as a host

7. In the HTML source window, add the <iframe> code you copied from the blog and click OK

Then, click Apply in the Tools pane The community Silverlight application should now render in your SharePoint site, as shown in Figure 9-9

FIgure 9-9 Community Silverlight application

How It Works

The way this integration works is that LaVigne provides the hosting mechanism for the Silverlight

application, and all you’re doing is borrowing a link to that hosted application to effectively render it

within an out-of-the-box Web part The Web part, which enables you to infuse HTML source into the

page rendering, loads the <iframe> code on page load and then displays the Silverlight application

With this approach, you leveraged mostly a hosted community example to integrate a no-touch

inte-gration with SharePoint However, this is just one way of achieving a no-touch example Another way

might be for you to leverage a hosting service that can host a Silverlight application

One such service is a new Azure offering that hosts Silverlight applications and videos Using this type

of hosted service, you can host Web-based Silverlight applications inside your SharePoint Web parts

(using the same <iframe> method that you used here) Figure 9-10 shows a weather widget hosted in

the “cloud.” (You can find out more

informa-tion about the new Windows Azure offering

for Silverlight at http://silverlight.live

.com/quickstart.htm.)

Similar to the first example, this example

also relies on a separate domain to host the

Silverlight application However, what’s

interesting here is that you can not only host

third-party Silverlight applications on

host-ing services like Azure, but you can also host

your own This bodes well for when you

want to reuse the Silverlight application in

multiple places within your SharePoint site For example, think about a scenario where you’re

surfac-ing company data within a Silverlight application, and you want to leverage the application across the

SharePoint farm You add the Silverlight application at a farm-level document library and then you can

consume this application across multiple site collections

NOTE If for some reason you cannot load Dave LaVigne’s blog and you are

unable to complete the previous exercise, you can also use the <iframe> code approach with other types of hosted Silverlight applications that you build (for example, replace the reference to LaVigne's blog with a reference to test the HTML page you build and deploy to your local machine), or use the <object>

tag to reference a Silverlight application that you host in a document library in SharePoint While the code is slightly different, the concept of referencing an external Silverlight application using the Content Editor Web part is consistent across these approaches You’ll see an exercise that uses the <object> tag reference later in this chapter

Note that, as an example of adding your own Silverlight application for local hosting, you could

take the Silverlight application you created in the earlier walkthrough and add that to SharePoint

You could then add code within <object> tags to the Content Editor Web part The difference is

the fact that you're now using code within an <object> tag and the domain that hosts the Silverlight

application is your SharePoint domain, as opposed to an external, Web-facing domain.

Let’s take a look at an example of this

Hosting the Silverlight Application Locally

trY It out

Hosting your Silverlight application locally is also a lightweight option To host the application locally,

follow these steps:

1. Navigate to your SharePoint site, and click All Site Content ➪ Create

2. In the Create options, select Document Library Provide a name for your document library (for

example, XAPS), and click Create

3. Navigate to the new document library, and then click “Add new document.” Upload the .xap file

you created in the earlier walkthrough to the document library, as shown in Figure 9-11

FIgure 9-11 Adding the XAP to a document library

4. Right-click the .xap file and select Copy Shortcut

5. Now navigate to a site collection or Web part page and click Site Actions ➪ Edit Page, and then

click “Add a web part” in one of the Web part zones

6. Select the Media and Content category, and click Content Editor Web Part

HTML Source

8. Add the following snippet of JavaScript code to the HTML Source window Add the shortcut you

copied to the value property, and click OK

<div id=”mySLApp” />

<script type=”text/javascript”>

var slDivObj = document.getElementById(‘mySLApp’);

slDivObj.appendChild(slDivObj);

slDivObj.innerHTML = ‘<object data=”data:application/x-silverlight,”

type=”application/x-silverlight” width=”400” height=”400”>

<param name=”source” value=” http://fabrikamhockey/sl/

XAPS/SilverlightApplication1.xap “/></object>’;

</script>

(When you add this code, ensure that you have no line breaks with the line of code that begins with slDivObj.innerHTML You may find that this will cause your Silverlight application to not load properly.)

9. Click Stop Editing to exit Edit mode Your Hello

World Silverlight application will be rendered dynamically as a part of the HTML source in the SharePoint site, as shown in Figure 9-12

Thus far, you have learned a couple of different ways to host Silverlight applications in SharePoint

within a no-touch classification One of the ways

leveraged remote hosting, and the other aged SharePoint (that is, hosting the Silverlight application in a SharePoint document library) and JavaScript — but both used the Content Editor Web part as the way in which the application was dynamically loaded on page load

lever-There are also other ways to host a Silverlight cation in SharePoint Let’s now take a look at the low-touch integration classification as you begin to leverage the out-of-the-box SharePoint Web part

appli-low-touch Integration

Having worked with the no-touch integration, you’ll see that the low-touch integration is a little

more involved In some cases, you won’t need to write code (Think back to Chapter 3, where you

created a wiki site collection and then integrated a WMV video with the Silverlight Media Web part.) However, there are other cases where you will write some code — as you will in the walk-through in this section The writing code part, though, will mainly execute code within the context

of the Silverlight application and not reach into the SharePoint infrastructure to, for example, get or put data into a SharePoint artifact such as a list

FIgure 9-12 Silverlight application hosted locally

In this section, you’ll walk through an example that will leverage an in-memory data source, and

then use Language Integrated Query (LINQ) to manage that data across a set of Silverlight controls

The scenario is loading a person’s employee review scores from an external data structure When the

data is loaded, you can then see what the person’s employee review scores are, as well as what the

ultimate reward and promotion potential is going to be Based on the level of rewards, the Silverlight

application will then change the thermometer graphic to indicate the level of reward

Creating a Low-Touch Integration

trY It out

Code file [LowIntegrationSLApp.zip] available for download at Wrox.com

You can create self-contained, low-touch integrations with SharePoint To do this, follow these steps:

1. Open Visual Studio 2010 Click File ➪ New ➪ Project Select the Silverlight Application template

and provide a name for your project (for example, LowIntegrationSLApp) and click OK

2. When prompted, uncheck the “Host the Silverlight application in a new Web site” checkbox

3. After Visual Studio creates the new solution, right-click the project and click Add ➪ New Item

5. Provide a name for the XML file (for example, Employee.xml), as shown at the bottom of

Figure 9-13

FIgure 9-13 XML data object

6. After the new XML file has been added to the project, add the following XML code to the new file This code represents the data records that you’ll load into the Silverlight application

7. With the XML file complete, you’ll now want to add a custom class to the project To do

this, right-click the project and select Add ➪ Class Provide a name for the class (for example,

Employees.cs), and click OK, as shown at the bottom of Figure 9-14

FIgure 9-14 Adding a class to Silverlight

8. Add the following bolded code to the new class, which you’ll use to load the XML data and then

use LINQ to populate the properties in this object:

using System.Windows.Shapes;

namespace LowIntegrationSLApp {

public class Employees {

public string empName { get; set; } public string empID { get; set; } public string empFY08 { get; set; } public string empFY09 { get; set; } public string empFy10 { get; set; }

} }

9. At this point, the data portions of your application are complete You will now work on the UI for the application To do this, right-click the MainPage.xaml file and select View Designer

10. Add ten labels, two buttons, one listbox, one image, three rectangles, and seven textboxes to the

Designer surface and arrange them, as shown in Figure 9-15

FIgure 9-15 Employee Scorecard application in Visual Studio

Table 9-2 provides an overview of the control types and the corresponding names you’ll use in the Silverlight application

table 9-2 Control Types and Names

Control tYpe Control name

lblSummary, lblFastTrack, lblPromotion, lblMessage

<GradientStop Color=”PowderBlue” Offset=”0”/>

<GradientStop Color=”White” Offset=”1”/>

</LinearGradientBrush>

</Grid.Background>

<dataInput:Label x:Name=”lblName” Height=”13”

HorizontalAlignment=”Left” Margin=”32,57,0,0”

VerticalAlignment=”Top” Width=”78” Content=”Name:”/>

<dataInput:Label x:Name=”lblEmplID” Height=”13”

HorizontalAlignment=”Left” Margin=”32,92,0,0”

VerticalAlignment=”Top” Width=”78” Content=”Emp ID:”/>

<dataInput:Label x:Name=”lblFY08” Height=”13”

HorizontalAlignment=”Left” Margin=”32,122,0,0”

VerticalAlignment=”Top” Width=”78” Content=”FY 08:”/>

<dataInput:Label x:Name=”lblFY09” HorizontalAlignment=”Left”

Margin=”32,150,0,0” Width=”78” Content=”FY 09:” Height=”22”

VerticalAlignment=”Top”/>

<dataInput:Label x:Name=”lblFY10” HorizontalAlignment=”Left”

Margin=”32,0,0,156” Width=”78” Content=”FY 10:”

Height=”13” VerticalAlignment=”Bottom”/>

<dataInput:Label x:Name=”lblSummary” Height=”13”

HorizontalAlignment=”Left” Margin=”32,0,0,122”

VerticalAlignment=”Bottom” Width=”78” Content=”AVG Score:”/>

<dataInput:Label x:Name=”lblPromotion” Height=”13”

HorizontalAlignment=”Left” Margin=”32,0,0,91” VerticalAlignment=”Bottom”

Width=”78” Content=”Promotion:”/>

<dataInput:Label x:Name=”lblFastTrack” Height=”13”

HorizontalAlignment=”Left” Margin=”32,0,0,59” VerticalAlignment=”Bottom”

Width=”78” Content=”Fast Track:”/>

<TextBox x:Name=”txtbxEmplID” IsEnabled=”False” Height=”22”

Margin=”110,87,122,0” VerticalAlignment=”Top” TextWrapping=”Wrap”/>

<TextBox x:Name=”txtbxFY08” IsEnabled=”False” Height=”22”

Margin=”110,118,122,0” VerticalAlignment=”Top” TextWrapping=”Wrap”/>

<TextBox x:Name=”txtbxFY09” IsEnabled=”False” Margin=”110,147,122,0”

TextWrapping=”Wrap” Height=”22” VerticalAlignment=”Top”/>

<TextBox x:Name=”txtbxFY10” IsEnabled=”False” Margin=”110,0,122,151”

TextWrapping=”Wrap” Height=”22” VerticalAlignment=”Bottom”/>

<TextBox x:Name=”txtbxAVGScore” IsEnabled=”False”

Height=”22” Margin=”110,0,122,118” VerticalAlignment=”Bottom” TextWrapping=”Wrap”/>

<TextBox x:Name=”txtbxPromo” IsEnabled=”False” Height=”22” Margin=”110,0,122,86”

VerticalAlignment=”Bottom” TextWrapping=”Wrap”/>

<TextBox x:Name=”txtbxFastTrack” IsEnabled=”False” Height=”22”

Margin=”110,0,122,55” VerticalAlignment=”Bottom” TextWrapping=”Wrap”/>

<ListBox Margin=”0,46,122,0” Height=”32” VerticalAlignment=”Top”

x:Name=”lstbxEmployeeNames” HorizontalAlignment=”Right”

Width=”168” SelectionChanged=”lstbxEmployeeNames_SelectionChanged” />

<Button x:Name=”btnRefresh” Height=”25” HorizontalAlignment=”Left”

Margin=”110,0,0,12” VerticalAlignment=”Bottom” Width=”79”

Content=”Load” Background=”#FF0689FA” Click=”btnRefresh_Click”/>

<dataInput:Label x:Name=”lblTitle” Margin=”29,13,130,0”

VerticalAlignment=”Top” Content=”Employee Scorecard” FontWeight=”Bold”

FontSize=”18” FontFamily=”Verdana”/>

<Button Background=”#FF0689FA” Content=”Calc.” Height=”25”

HorizontalAlignment=”Left” Margin=”199,0,0,12” Name=”btnCalc”

VerticalAlignment=”Bottom” Width=”79” Click=”btnCalc_Click” />

<Image x:Name=”imgThermo” Source=”Images/Thermometer.png”

Margin=”300,42,25,58” Height=”250” Width=”75”/>

<Rectangle Height=”0” HorizontalAlignment=”Left”

Margin=”310,112,0,0” Name=”shapeRectanglePromo” Stroke=”Green”

StrokeThickness=”2” VerticalAlignment=”Top” Width=”53” />

<Rectangle Height=”0” HorizontalAlignment=”Left”

Margin=”310,177,0,0” Name=”shapeRectangleNoPromo” Stroke=”Orange”

StrokeThickness=”2” VerticalAlignment=”Top” Width=”53” />

<Rectangle Height=”0” HorizontalAlignment=”Left”

Margin=”310,235,0,0” Name=”shapeRectangleLowScore” Stroke=”Red”

StrokeThickness=”2” VerticalAlignment=”Top” Width=”53” />

<dataInput:Label Height=”22” HorizontalAlignment=”Left”

Margin=”300,271,0,0” Name=”lblMessage” VerticalAlignment=”Top” Width=”75” />

</Grid>

</UserControl>

If you copy and paste the code (or type in the boldfaced code), you’ll need to manually add a

automatically adds this reference when you drag and drop the label control, but it does not add

this reference if you simply copy and paste, or type in, the code

12. With the UI complete, you can now add the code behind The events that you want to manage

within this application map to the user changing a selection in the listbox, and clicking one of the

two available buttons To add the code behind, right-click the MainPage.xaml file and then select

View Code Add the following bolded code into the code behind:

from emp in employee.Elements(“Employee”) select new

{ tempEmpName = (string)emp.Element(“Name”), tempEmpID = (string)emp.Element(“EmpID”), tempFY08 = (string)emp.Element(“FY08”), tempFY09 = (string)emp.Element(“FY09”), tempFY10 = (string)emp.Element(“FY10”) };

foreach (var item in employees) {

Employees tempEmployee = new Employees();

{ resetThermometer();

{ emp.empName, emp.empID, emp.empFY08, emp.empFY09, emp.empFy10 };

foreach (var item in expr) {

if (item.empName == empFilter) {

txtbxEmplID.Text = item.empID;

txtbxFY08.Text = item.empFY08;

double rvwFY08 = Double.Parse(txtbxFY08.Text);

double rvwFY09 = Double.Parse(txtbxFY09.Text);

double rvwFY10 = Double.Parse(txtbxFY10.Text);

avgScore = Math.Round(((rvwFY08 + rvwFY09 + rvwFY10) /

txtbxPromo.Text = ““;

lblMessage.Content = ““;

}

} }

13. With the Silverlight application complete, build the project to ensure that it builds successfully

14. After it builds, click the Show All Files button at the top of the Solution Explorer and navigate to

the Bin directory You’ll notice that there is an .xap file in that folder, which is the built Silverlight application (To see what’s inside of this file, you can copy the .xap file to a separate location and then replace the .xap file extension with .zip and open it to see what’s contained inside.)

15. Right-click the Bin directory and select “Open Folder

in Windows Explorer,” as shown in Figure 9-16

Copy the file path to your Clipboard

16. Open your SharePoint site and click All Site Content

17. Click Create ➪ Sites to create a new test site for the

20. In your site, create a new document library called

XAPS Then, click “Add new document” and click Browse

21. Paste the file path to the .xap file into the Browse

dia-log, and then click OK This will add your Silverlight application to your document library

22. Right-click the .xap file and select Copy Shortcut

23. Navigate to an existing (or create a new) Web part page Click Site Actions ➪ Edit Page, and then

click the “Add a web part” in the top Web part zone

24. Navigate to the “Media and Content” Web part category, and select Silverlight Web Part

25. Click Add, and you will be prompted for the link to the .xap file Paste the shortcut to the .xap

file you added to the XAPS document library, and click OK

26. The Silverlight application is now rendered in the SharePoint page, as shown in Figure 9-17 This

figure also shows another example of a Silverlight application that illustrates some charting bilities (another example of a low-touch integration with SharePoint)

capa-FIgure 9-16 Opening a folder in Solution Explorer

FIgure 9-17 Employee Scorecard Silverlight application in SharePoint

How It Works

The low-touch walkthrough is a more complex application because it has some processing built into the

Scorecard application For example, three primary events drive the application: two button clicks and a

selection changed event on the list When the user clicks the Load button, it loads the XML data from

the Employee.xml file and then feeds that into the in-memory list collection

Again, LINQ is an important aspect of how you query the data For example, LINQ queries show up

in two out of the three events, as is shown in the following bolded code Interestingly, the queries are

issued against two different types of objects — one is an XML object, and the other is a list collection

} private void lstbxEmployeeNames_SelectionChanged(object sender, SelectionChangedEventArgs e)

{ … string empFilter = lstbxEmployeeNames.SelectedItem.ToString();

var expr = from emp in myEmployeeList select new

{ emp.empName, emp.empID, emp.empFY08, emp.empFY09, emp.empFy10 };

… }

…

There is also a straightforward helper function that resets the data fields (the resetThermometer

method) and, depending on what employee is selected, varied and calculated data will be displayed

What’s interesting about the low-touch scenario is that you can have very powerful applications that may not necessarily reach inside the SharePoint object model but still accomplish quite a lot (espe-cially if SharePoint is your collaboration portal) Think about the opportunity here for employee self-service applications in this context (for example, updating vacation or personal information)

Now that you’ve seen the no-touch and the low-touch alternatives, let’s examine the high-touch classification

high-touch Integration

The high-touch integration is more involved than the other two classifications, but it is more ful and has a deeper relationship with the SharePoint object model You could think of the high-touch integration as having two major pivots:

➤

➤Using the new SharePoint client object model

➤

➤