Understanding Silverlight  319 The code behind for the previous application calls the btnGreeting_Click event handler, as you can see by the following bolded code: using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; namespace ASimpleSilverlightApplication { public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); } private void btnGreeting_Click(object sender, RoutedEventArgs e) { string yourName = txtbxName.Text; MessageBox.Show(“Hello “ + yourName); } } } 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 .NET Framework, see http://msdn.microsoft.com/en-us/library/ cc838194(VS.96).aspx . FIGURE 91 Simple Silverlight application 584637c09.indd 319 5/2/10 7:13:57 PM 320  CHAPTER 9 Creating enhanCed User experienCes for sharepoint with silverlight 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. 584637c09.indd 320 5/2/10 7:13:58 PM Understanding Silverlight  321 NOTE To learn more about Silverlight, see http://silverlight.net. Let’s create a simple Silverlight application. Creating a Simple Silverlight ApplicationTRY 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. 584637c09.indd 321 5/2/10 7:13:58 PM 322  CHAPTER 9 Creating enhanCed User experienCes for sharepoint with silverlight 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 Label lblName, lblTitle Textbox txtbxName Button btnName 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 584637c09.indd 322 5/2/10 7:13:58 PM Understanding Silverlight  323 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: <UserControl x:Class=”SilverlightApplication1.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:DesignHeight=”204” d:DesignWidth=”400” xmlns:dataInput= “clr-namespace:System.Windows.Controls;assembly= System.Windows.Controls.Data.Input”> <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: using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; namespace SilverlightApplication1 584637c09.indd 323 5/2/10 7:13:58 PM 324  CHAPTER 9 Creating enhanCed User experienCes for sharepoint with silverlight { public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); } private void btnName_Click(object sender, RoutedEventArgs e) { string myNamePrefix = “Length of Name: “; string myName = txtbxName.Text; int myNameLength = 0; myNameLength = myName.Length; MessageBox.Show(myNamePrefix + myNameLength.ToString()); btnName.Content = “Goodbye”; } } } 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, to say “Goodbye.” … private void btnName_Click(object sender, RoutedEventArgs e) { string myNamePrefix = “Length of Name: “; string myName = txtbxName.Text; int myNameLength = 0; FIGURE 95 Debugging the simple Silverlight application 584637c09.indd 324 5/2/10 7:13:58 PM Why Integrate Silverlight and SharePoint?  325 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. 584637c09.indd 325 5/2/10 7:13:58 PM 326  CHAPTER 9 Creating enhanCed User experienCes for sharepoint with silverlight 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  but doesn’t integrate with the SharePoint object model — SharePoint simply plays host to the Silverlight application Complex business applications, where the Silverlight application pulls in external data  sources and integrates them with SharePoint to, for example, update a SharePoint list, or cus- tomize the navigation system Branding applications that leverage the animation and storyboard features of Silverlight, and  build counting logic that enable video swapping along timelines and keeping count of click- throughs on advertisements Multi-touch applications that leverage the Silverlight UI with multi-touch capabilities to  browse and view thumbnail representations of the underlying documents in SharePoint document libraries 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. Silverlight Web 2.0 Azure Services . . . ASPX/HTML Windows 7Windows Server SharePoint FIGURE 96 High-level architectural integration 584637c09.indd 326 5/2/10 7:13:58 PM Integrating Silverlight with SharePoint  327 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. No Touch <html/> Low Touch Consistent Tools and Application Model High Touch SharePoint Artifact SharePoint Artifact OM, Web 2.0, Service, . . . Microsoft® Visual Studio Microsoft® ASP.NET .NET Microsoft® Windows Presentation Foundation .NET Microsoft® Expression Studio FIGURE 97 Dierent 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 render- 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. 584637c09.indd 327 5/2/10 7:13:59 PM 328  CHAPTER 9 Creating enhanCed User experienCes for sharepoint with silverlight 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 integration. 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. The first example is a community example from Dave LaVigne’s blog at http://franksworld.com/ 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 SharePointTRY IT OUT 1. Navigate to LaVigne’s blog and, first, copy the code that he provides in his blog entry: <iframe src=”http://www.franksworld.com/silverlight/meeting/” frameborder=”0” style=”width: 512px; height: 299px; border:0px” ></iframe> 2. Next, go to your SharePoint site and select Site Actions  Edit Page. 3. Click “Add a web part,” and click the “Media and Content” category. 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 6. Click the HTML drop-down menu and select Edit HTML Source. 584637c09.indd 328 5/2/10 7:13:59 PM [...]... 3.2 3.4 3 .8 Kelly Jackson 983 011 2 .8 2.9 3.0 Sam Sheppard 10290 4.2 4.3 4.5 Lamont Smyth 129775 3 .8 3.6 3.2... Beth Canyon 389 21 2.1 2.2 2.0 Barry McCathry 201 982 3.3 2.9 3.7 Steve Denn 290122 4.5 4.6 4.5 584 637c09.indd 333 5/2/10 7:13:59 PM 334  ❘  Chapter... object 584 637c09.indd 332 5/2/10 7:13:59 PM Integrating Silverlight with SharePoint 6 ❘  333 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 John Doe 83 7901 3.2 3.4... string tempEmpID = ““; string tempFY 08 = ““; string tempFY09 = ““; string tempFY10 = ““; var employees = 584 637c09.indd 3 38 5/2/10 7:14:00 PM Integrating Silverlight with SharePoint ❘  339 from emp in employee.Elements(“Employee”) select new { tempEmpName = (string)emp.Element(“Name”), tempEmpID = (string)emp.Element(“EmpID”), tempFY 08 = (string)emp.Element(“FY 08 ), tempFY09 = (string)emp.Element(“FY09”),... productName}”/> 584 637c09.indd 347 5/2/10 7:14:01 PM 3 48 ❘  Chapter 9   Creating Enhanced User Experiences for SharePoint with Silverlight . encoding=”utf -8 ?> <Employees> <Employee> <Name>John Doe</Name> <EmpID> ;83 7901</EmpID> <FY 08& gt;3.2</FY 08& gt; <FY09>3.4</FY09> <FY10>3 .8& lt;/FY10> . . ASPX/HTML Windows 7Windows Server SharePoint FIGURE 96 High-level architectural integration 584 637c09.indd 326 5/2/10 7:13: 58 PM Integrating Silverlight with SharePoint  327 Furthermore, what. are explicitly leveraging the SharePoint object model in some capacity. 584 637c09.indd 327 5/2/10 7:13:59 PM 3 28  CHAPTER 9 Creating enhanCed User experienCes for sharepoint with silverlight