Development Using the Expression Blend Suite  119 table 3-2 Control Types and Names Control tYPeS Control nameS Label lblTitle, lblDate Textbox txtbxDate Button btnDate Calendar clndrControl 3. Arrange the controls so that they look like Figure 3-40. Note that you can add some gradient to the control by clicking the control and then clicking different areas of the color palette in the Properties window. FiGure 3-40 Designing controls in Expression Blend 4. You could add more sophisticated behaviors, but, for now, save the application and close Expression Blend. You’ll add some event handlers for the application — but you’re going to do this using Visual Studio. 5. Open Visual Studio 2010 and then open the Silverlight project. Note that when you open it, the project structure will look like Figure 3-41. However, the look and feel of the UI that you designed in Expression remains intact. 584637c03.indd 119 5/2/10 7:12:31 PM 120  ChaPter 3 SharePoint 2010 DeveloPer toolS FiGure 3-41 Silverlight application in Visual Studio 6. Inspect the XAML that makes up the UI (see the following code snippet). Note the gradient ele- ments that provide the richer brush strokes for the calendar and button controls. This was a result of your clicking within the color palette. <UserControl xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/ presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” xmlns:controls=”clr-namespace: System.Windows.Controls;assembly= System.Windows.Controls” xmlns:d=”http://schemas.microsoft.com/expression/ blend/2008” xmlns:mc=”http://schemas.openxmlformats.org/ markup-compatibility/2006” xmlns:dataInput=”clr-namespace:System.Windows.Controls; assembly=System.Windows.Controls.Data.Input” x:Class=”MyFirstSilverlightApp.MainPage” Width=”640” Height=”480” mc:Ignorable=”d”> <Grid x:Name=”LayoutRoot” Background=”White”> 584637c03.indd 120 5/2/10 7:12:31 PM Development Using the Expression Blend Suite  121 <Button x:Name=”btnDate” HorizontalAlignment=”Left” Margin=”51,0,0,160” VerticalAlignment=”Bottom” Width=”75” Content=”Get Date” Background=”#FFF81911”/> <controls:Calendar x:Name=”clndrControl” HorizontalAlignment=”Left” Margin=”51,61,0,0” VerticalAlignment=”Top”> <controls:Calendar.Background> <LinearGradientBrush EndPoint=”0.5,1” StartPoint=”0.5,0”> <GradientStop Color=”#FFD3DEE8” Offset=”0”/> <GradientStop Color=”#FFD3DEE8” Offset=”0.16”/> <GradientStop Color=”#FFFCFCFD” Offset=”0.16”/> <GradientStop Color=”#FFE01A1A” Offset=”1”/> </LinearGradientBrush> </controls:Calendar.Background> </controls:Calendar> <dataInput:Label x:Name=”lblTitle” HorizontalAlignment=”Left” Margin=”51,29,0,0” VerticalAlignment=”Top” Width=”200” Content=”Simple Silverlight Application” FontWeight=”Bold”/> <TextBox x:Name=”txtbxDate” Margin=”106,0,0,212” TextWrapping=”Wrap” HorizontalAlignment=”Left” VerticalAlignment=”Bottom” Height=”25” Width=”124”/> <dataInput:Label x:Name=”lblDate” HorizontalAlignment=”Left” Margin=”51,0,0,212” VerticalAlignment=”Bottom” Width=”51” Content=”Date:”/> </Grid> </UserControl> 7. You currently have no events tied to the UI that you created in Expression Blend. So, navigate to the button element and place your cursor right before the end of the element. Press the space bar. 584637c03.indd 121 5/2/10 7:12:31 PM 122  ChaPter 3 SharePoint 2010 DeveloPer toolS This will invoke the IntelliSense. Find the Click event and then click and accept the default event handler name to add a Click event to the application, as shown in Figure 3-42. FiGure 3-42 Adding Click event to Button control The resulting XAML will be amended as shown in the following bolded addition: … <Button x:Name=”btnDate” HorizontalAlignment=”Left” Margin=”51,0,0,160” VerticalAlignment=”Bottom” Width=”75” Content=”Get Date” Background=”#FFF81911” Click=”btnDate_Click”/> … 8. Right-click MainPage.xaml and select View Code. This opens the code-behind view — much the same experience you went through earlier in this chapter when creating the banner ad for use within SharePoint Designer. Add the following bolded code in the code behind: using System; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Ink; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; namespace MyFirstSilverlightApp { public partial class MainPage : UserControl { string strSelectedDate = ““; DateTime userSelectedDate = new DateTime(); public MainPage() 584637c03.indd 122 5/2/10 7:12:31 PM Development Using the Expression Blend Suite  123 { // Required to initialize variables InitializeComponent(); txtbxDate.IsEnabled = false; } private void btnDate_Click(object sender, RoutedEventArgs e) { userSelectedDate = (DateTime)clndrControl.SelectedDate; strSelectedDate = userSelectedDate.ToString(); if (strSelectedDate.Contains(“12/25/2009”)) { MessageBox.Show(“Voice of Reason: You shouldn’t be working!”); } else { txtbxDate.Text = strSelectedDate; } } } } 9. After you’ve added the code, press F5 to debug the application in your default browser. The result should look similar to Figure 3-43. 10. After you’ve successfully tested the application, click Build  Build Solution to build the application one last time. 11. In the Solution Explorer, click the Show All Files button to show all of the solution files in the Solution Explorer. 12. Navigate to the Bin/Debug folder and right-click. Select Open Folder in Windows Explorer. 13. Copy the file path, and then open SharePoint. 14. Navigate to the XAPS document library you created earlier in the chapter. (If you didn’t create a document library called XAPS, you can do that now.) Click Add Document and then click Browse. 15. Paste the folder path to your Silverlight application, and then select the .xap file that is in that folder (for example, MyFirstSilverlightApp.xap) and click OK. When the file has been added to the folder, right-click and select Copy Shortcut. 16. Click All Site Content and then click Create. Select the Pages option along the left-hand side, and then select Web Part Page. FiGure 3-43 Testing the Silverlight application 584637c03.indd 123 5/2/10 7:12:31 PM 124  ChaPter 3 SharePoint 2010 DeveloPer toolS 17. Provide a name for the page (for example, BlendTest), and click Create. 18. Click Site Actions  Edit Page, and in one of the Web part zones, click "Add a web part." 19. Select the Media Content Web part, and then select Silverlight Web Part and click Add. SharePoint will prompt you for a URL to the .xap file, so paste the shortcut to the .xap file you added to the XAPS directory. 20. Click Stop Editing to test your new Silverlight application in SharePoint. The result should look similar to Figure 3-44. FiGure 3-44 Adding a Silverlight application to SharePoint How It Works Congratulations! You have built another Silverlight application, but you added a little design to it by starting out in Expression Blend and providing some enhancements to the UI. You next opened that same Silverlight application in Visual Studio and added some code behind. You then added the Silverlight application, using SharePoint’s built-in Silverlight Web part — a native Web part that acts as a container for Silverlight applications. Expression Blend 3 is compatible with Visual Studio 2010, which is one of the nice integrations for designers and developers working together on Silverlight projects. However, with the new project tem- plates in Visual Studio 2010, the integration across these two developer tools is even more important. The integration in this exercise was illustrated through the creation of a Silverlight application using the more feature-rich design environment of Expression Blend, and then opening that application in Visual Studio (you can right-click the .xaml file and select Open in Expression Blend from Visual Studio or, alter- natively, as you did in this walkthrough, open the project in Visual Studio 2010). You created the XAML- based UI using Expression Blend, and then added the code behind for the XAML in Visual Studio. The btnDate button is associated with an event handler called btnDate_Click. The event handler is triggered, or “fires,” when the button is clicked. 584637c03.indd 124 5/2/10 7:12:32 PM Development Using the Expression Blend Suite  125 In the code behind, you set two class-level variables called strSelectedDate and userSelectedDate. These variables were used to store a string representation of the date that the user selected on the cal- endar control and a DateTime object that would also be used to store the date the user selected (casting the return variable from the selection to a DateTime object). Finally, the code behind asserts a condi- tional statement (the if statement) to see if you’re working on Christmas day. Note that the Contains method is used because the complete string that is returned from selecting the date in the calendar con- trol includes a time element as well (so a direct string comparison would not work in this case). … namespace MyFirstSilverlightApp { public partial class MainPage : UserControl { string strSelectedDate = ““; DateTime selectedDate = new DateTime(); public MainPage() { InitializeComponent(); txtbxDate.IsEnabled = false; } private void btnDate_Click(object sender, RoutedEventArgs e) { userSelectedDate = (DateTime)clndrControl.SelectedDate; strSelectedDate = userSelectedDate.ToString(); if (strSelectedDate.Contains(“12/25/2009”)) { MessageBox.Show(“Voice of Reason: You shouldn’t be working!”); } else { txtbxDate.Text = strSelectedDate; } } } } And, if you did select December 25, 2009, then a message would be issued to you via the MessageBox.Show event. Expression Blend enables you to tap into your design and creative juices to begin to build out a com- pelling and rich UI for SharePoint. It can be applied to WPF applications that run on the client, or it can be used (as was shown here) in the context of Silverlight applications. In Chapter 9, you will have an opportunity to explore Expression Blend a little more. You should spend some time with this tool, because it can dramatically enhance the design of your UI. 584637c03.indd 125 5/2/10 7:12:32 PM 126  ChaPter 3 SharePoint 2010 DeveloPer toolS SummarY This chapter provided an overview of the major development environments that you will work in as a SharePoint developer. You saw Web-based development (or what some might call “developer configuration” or “power-user tasks”), development within SharePoint Designer 2010, development using Visual Studio 2010, and then development integrating Expression Blend with Visual Studio 2010. You’ll see more of each of these as you make your way through the book, but at this point, you should have a baseline understanding of the types of things that you can do within each of the environments. Also, hopefully you’re beginning to see how much power there is with the new tooling with SharePoint 2010 — much more than ever before. And, given the evolution in the design tools as well, there are great opportunities here, not only for the designers and developers to work together but also for generating some dynamic and rich Silverlight experiences for SharePoint. In this chapter, you were introduced to the different ways of developing for SharePoint. You also had a chance to get some coding practice in with these different tools. In Chapter 4, you will learn about some common developer tasks to further put these tools into practice. exerCiSeS 1. What are the types of developer tasks you might manage through the browser? 2. What are the major differences in the way you would use SharePoint Designer over Visual Studio? Can you think of places where they might be complementary? 3. In what ways can you see Expression Blend contributing to your overall solution design experience? 584637c03.indd 126 5/2/10 7:12:32 PM Recommended Reading  127 What You learneD in thiS ChaPter ⊲ item DeSCriPtion Ways to develop for SharePoint You will typically use tools such as SharePoint Designer and Visual Studio to develop for SharePoint. However, there are also some higher-level develop- ment tools built into the Web-based experience (for example, inline text, HTML and script editing, and developer dashboard). SharePoint Designer 2010 SharePoint Designer is a free tool that enables developers to edit site pages, create master pages, workflows, and all sorts of SharePoint objects such as lists or content types. Visual Studio 2010 Visual Studio is a professional-grade developer tool that provides a number of in-box project and item templates with a full F5 experience. Expression Blend Expression Blend is a suite of tools that can be used to design and custom- ize the user experience. For SharePoint, you can build advanced and custom Silverlight UIs. reCommenDeD reaDinG SharePoint Development Center on MSDN at  http://msdn.microsoft.com/en-us/ sharepoint/default.aspx Channel 9 SharePoint Developer Learning Center at  http://channel9.msdn.com/learn/ courses/SharePoint2010Developer/ SharePoint Designer Home Page at  http://sharepoint2010.microsoft.com/product/ related-technologies/Pages/SharePoint-Designer-2010.aspx Visual Studio 2010 Home Page at  http://www.microsoft.com/visualstudio/en-us/ products/2010/default.mspx Expression Blend Home Page at  http://www.microsoft.com/expression/products/ Blend_Overview.aspx 584637c03.indd 127 5/2/10 7:12:32 PM 584637c03.indd 128 5/2/10 7:12:32 PM [...]... you should have something similar to Figure 4- 4 Figure 4- 3  Selecting the Sales list Figure 4- 4  Data View of list in SharePoint Designer 9 10 Save the Web part page Open SharePoint, and navigate to the Web part page The list should look similar to Figure 4- 5 5 846 37c 04. indd 1 34 5/2/10 7:12 :42 PM Creating Lists, Site Columns, and Content Types  ❘  135 Figure 4- 5  Completed Data View Web part 1 1 To... xmlns=”http://schemas.microsoft.com /sharepoint/ ”> Premier Gold Silver 5 846 37c 04. indd 137 5/2/10 7:12 :42 PM 138  ❘  Chapter 4   Common Developer Tasks in SharePoint 2010. .. find yourself doing quite a bit is querying SharePoint data This book outlines a few ways to do this, such as CAML queries, conditionals, and Language Integrated Query (LINQ) statements LINQ is a very effective way to query data, which is supported in SharePoint 2010 5 846 37c 04. indd 143 5/2/10 7:12 :43 PM 144   ❘  Chapter 4   Common Developer Tasks in SharePoint 2010 The following LINQ statement is a simple... simple event receiver, follow these steps: 1 5 846 37c 04. indd 147 Open your SharePoint site and create a new list called TestList Leave the new list with only the default Title column 5/2/10 7:12 :43 PM 148   ❘  Chapter 4   Common Developer Tasks in SharePoint 2010 2 Open Visual Studio 2010 and click File ➪ New Project Select Event Receiver in the SharePoint 2010 project template folder 3 Provide a name... MasterPageFile=”~masterurl/default.master” Inherits=”Microsoft .SharePoint. WebPartPages.WebPartPage, Microsoft .SharePoint, Version= 14. 0.0.0,Culture=neutral, PublicKeyToken=71e9bce111e 942 9c” meta:webpartpageexpansion=”full” meta:progid= SharePoint. WebPartPage.Document” %> … 5 846 37c 04. indd 153 5/2/10 7:12 :43 PM 1 54 ❘  Chapter 4   Common Developer Tasks in SharePoint 2010 A master page is characterized by the master... customer entries, as shown in Figure 4- 11 5/2/10 7:12 :42 PM 140   ❘  Chapter 4   Common Developer Tasks in SharePoint 2010 Figure 4- 11  Leveraging the custom site column in Sales list 1 5 Your newly amended list should now look similar to Figure 4- 12 Figure 4- 12  Final list with new Customer Type site column How It Works In much the same way that you created a site column with SharePoint Designer, you created... Microsoft .SharePoint, Version= 14. 0.0.0,Culture=neutral,PublicKeyToken =71e9bce111e 942 9c” meta:webpartpageexpansion=”full” meta:progid= SharePoint. WebPartPage.Document” %> . types, and lists  Accessing and managing data  4 5 846 37c 04. indd 129 5/2/10 7:12 :41 PM 130  CHAPTER 4 Common Developer Tasks in sharepoinT 2010 Creating Event receivers  Creating  aspx. user control ( ascx file) that FIGURE 4 1 Deployed Web part 5 846 37c 04. indd 131 5/2/10 7:12 :42 PM 132  CHAPTER 4 Common Developer Tasks in sharepoinT 2010 represents the UI with a code-behind. through how you create the Data View Web part. 5 846 37c 04. indd 133 5/2/10 7:12 :42 PM 1 34  CHAPTER 4 Common Developer Tasks in sharepoinT 2010 Creating a Data View Web PartTRY IT OUT A Data