Zlatan Dzinic Principal Consultant Microsoft Most Valuable Professional - SharePoint Business Connexion

About This Session Audience Solution Architects Developers Level 400 Session In Scope: deep architectural patterns and code Out of Scope: simple display of Silverlight in the page viewer web part Free Source Code for the Demos! A good 'starting place' for building your own applications

Agenda Silverlight on SharePoint Architectural Pattern #1: Silverlight Proxy on SharePoint Web Services Architectural Pattern #2: Silverlight WebClient on Custom Runtime Services Architectural Pattern #3: Custom Client Adapter on SharePoint Web Services Architectural Pattern #4: Custom Client Adapter on Custom Runtime Services Setup and deployment

Agenda Silverlight on SharePoint Benefits Challenges Getting started Architectural Pattern #1: Silverlight Proxy on SharePoint Web Services Architectural Pattern #2: Silverlight WebClient on Custom Runtime Services Architectural Pattern #3: Custom Client Adapter on SharePoint Web Services Architectural Pattern #4: Custom Client Adapter on Custom Runtime Services Setup and deployment

Silverlight on SharePoint Benefits Build compelling, rich internet applications (RIA) on the SharePoint platform Silverlight: provides rich user interfaces SharePoint: provides collaborative data Out-of-band communication between Silverlight and the SharePoint platform Example: rendering list items in Silverlight can be magnitudes faster than viewing the list in SharePoint pages Let the power of.NET run in the browser Silverlight: provides access to.NET libraries, such as: System, System.Net, System.Windows, System.Windows.Media, System.Xml, etc.

Silverlight on SharePoint Challenges Communication Issues Silverlight applications (.xap) run in the client browser SharePoint objects are accessed on the server Challenge: Provide a two-way mechanism for passing SharePoint data between the server and Silverlight Deployment Issues Web.config entries for Silverlight Web.config entries for other components (such as database connection strings) MIME-type settings for IIS Challenge: Include non-SharePoint configuration changes in a deployment package

Silverlight on SharePoint Getting Started Build a simple Silverlight application (.xap) as a proof-of-concept Plumb the Silverlight hosting control into your SharePoint Web Parts Example code on next slide Select a communication architecture for transferring data between the SharePoint platform and Silverlight Architectural patterns described in the remainder of this presentation Build out the entire solution

Silverlight Hosting Control in a Web Part //Class-level variable System.Web.UI.SilverlightControls.Silverlight silverlightControl; //Web Part's OnLoad event procedure: //Ensure there is a ScriptManager on the page protected override void OnLoad(EventArgs e) { base.OnLoad(e); ScriptManager scriptManager = ScriptManager.GetCurrent(this.Page); if (scriptManager == null) { scriptManager = new ScriptManager(); this.Controls.Add(scriptManager); } //continued on next slide

Silverlight Hosting Control in a Web Part protected override void CreateChildControls() { SPWeb = SPControl.GetContextWeb(Context); silverlightControl = new System.Web.UI.SilverlightControls.Silverlight(); silverlightControl.ID = "TechEdXaml"; silverlightControl.Source = thisWeb.Url + "/_layouts/TechEd/MyXap.xap"; silverlightControl.Width = new System.Web.UI.WebControls.Unit(700); silverlightControl.Height = new System.Web.UI.WebControls.Unit(500); silverlightControl.AutoUpgrade = true; silverlightControl.Enabled = true; silverlightControl.Visible = true; silverlightControl.HtmlAccess = HtmlAccess.Enabled; this.Controls.Add(silverlightControl); thisWeb.Dispose(); } protected override void Render(HtmlTextWriter writer) { silverlightControl.RenderControl(writer); }

Agenda Silverlight on SharePoint Architectural Pattern #1: Silverlight Proxy on SharePoint Web Services Architectural details Advantages/disadvantages Code samples and demo Architectural Pattern #2: Silverlight WebClient on Custom Runtime Services Architectural Pattern #3: Custom Client Adapter on SharePoint Web Services Architectural Pattern #4: Custom Client Adapter on Custom Runtime Services Setup and deployment

Client Browser SharePoint Platform Fully-Rendered Web Part Proxy on SharePoint Web Services Architectural Details Silverlight Application Lists.asmxSearch.asmxDWS.asmxetc. Web Service Proxy User Interface Components SharePoint Web Services

Proxy on SharePoint Web Services Advantages/Disadvantages Advantages Least amount of 'plumbing' code Utilizes built-in objects and Web services Asynchronous Web service calls These calls do not block the Silverlight UI thread Disadvantages SharePoint functionality is limited to the operations supported by the built-in Web services Your Silverlight code must parse raw responses Possible cross-domain issues Asynchronous Web service calls

Proxy on SharePoint Web Services // Silverlight Client Code private void Pattern1_Click(object sender, RoutedEventArgs e) { // SPLists is the Service Reference to.../_vti_bin/lists.asmx SPLists.ListsSoapClient client = new SPLists.ListsSoapClient(); // Wire up the completed event handler client.GetListItemsCompleted += new EventHandler (client_GetListItemsCompleted); // Invoke the Web method client.GetListItemsAsync ("Customers", "", null, null, null, null, null); } void client_GetListItemsCompleted(object sender, Bonneville.SPLists.GetListItemsCompletedEventArgs e) { // ServiceResponse is a text block used to show the raw method response ServiceResponse.Text = e.Result.ToString(); }

Architectural Pattern #1: Silverlight Proxy on SharePoint Web Services Zlatan Dzinic Principal Consultant Microsoft Most Valuable Professional - SharePoint Business Connexion

Agenda Silverlight on SharePoint Architectural Pattern #1: Silverlight Proxy on SharePoint Web Services Architectural Pattern #2: Silverlight WebClient on Custom Runtime Services Architectural details Advantages/disadvantages Code samples and demo Architectural Pattern #3: Custom Client Adapter on SharePoint Web Services Architectural Pattern #4: Custom Client Adapter on Custom Runtime Services Setup and deployment

Non-SharePoint Platform WebClient on Custom Runtime Services Architectural Details Client Browser SharePoint Platform Fully-Rendered Web Part Silverlight Application Custom Web Services: MySPService1.asmxMySPService2.asmx WebClient Object User Interface Components Other 'Receivers': \_layouts\Receiver.aspx\_layouts\Receiver.ashx* * Requires Administrator Intervention Other Web Services: MyService1.asmxMyService2.asmx

WebClient on Custom Runtime Services Advantages/Disadvantages Advantages Provides full access to SharePoint and other line-of-business server applications Simple development in Silverlight Utilizes the built-in WebClient object No need to parse raw XML – the response is in your control Probably more efficient than pattern #1 Asynchronous Web service calls Disadvantages More server-side development effort required Possible cross-domain issues Asynchronous Web service calls

WebClient on Custom Runtime Services //Silverlight Client Code private void Pattern2_Click(object sender, RoutedEventArgs e) { // Build the Uri for the custom runtime service UriBuilder uriBldr = new UriBuilder(" +"/_layouts/techEd/techEdSharePointServerAdapter.aspx"); // Create a simple WebClient and wire up the Completed event handler WebClient wClient = new WebClient(); wClient.DownloadStringCompleted += new DownloadStringCompletedEventHandler(wClient_DownloadStringCompleted); //Call the runtime service wClient.DownloadStringAsync(uriBldr.Uri); } void wClient_DownloadStringCompleted (object sender, DownloadStringCompletedEventArgs e) { // ServiceResponse is a text block used to show the runtime response ServiceResponse.Text = e.Result; }

WebClient on Custom Runtime Services //Runtime Services Server Code --- Simple ASPX Example protected void Page_Load(object sender, EventArgs e) { this.Page.Response.Clear(); this.Page.Response.Expires = 0; string formattedCustomerNames = string.Empty; SPWeb thisWeb = SPControl.GetContextWeb(Context); SPList itemList = thisWeb.Lists["Customers"]; foreach (SPListItem customer in itemList.Items) { formattedCustomerNames += customer.ID.ToString() + ": " + customer["Title"].ToString() + "\n"; } thisWeb.Dispose(); this.Page.Response.Write(formattedCustomerNames); }

Architectural Pattern #2: Silverlight WebClient on Custom Runtime Services Zlatan Dzinic Principal Consultant Microsoft Most Valuable Professional - SharePoint Business Connexion

Agenda Silverlight on SharePoint Architectural Pattern #1: Silverlight Proxy on SharePoint Web Services Architectural Pattern #2: Silverlight WebClient on Custom Runtime Services Architectural Pattern #3: Custom Client Adapter on SharePoint Web Services Architectural details Advantages/disadvantages Architectural Pattern #4: Custom Client Adapter on Custom Runtime Services Setup and deployment

Adapter on SharePoint Web Services Architectural Details Client Browser SharePoint Platform Fully-Rendered Web Part Silverlight Application Lists.asmxSearch.asmxDWS.asmxEtc. User Interface Components SharePoint Web Services Custom JavaScript Object

Adapter on SharePoint Web Services Advantages/Disadvantages Advantages No cross-domain issues Otherwise, no real advantages over pattern #1 Disadvantages SharePoint functionality is limited to the operations supported by the built-in Web services Slower than pattern #2 Roughly equivalent to pattern #1 in terms of performance Calling SharePoint Web Services from JavaScript is not impossible, but it's not easy Significantly more development effort required on the client: Calling the adapter is simple but developing the adapter is much more complex

Agenda Silverlight on SharePoint Architectural Pattern #1: Silverlight Proxy on SharePoint Web Services Architectural Pattern #2: Silverlight WebClient on Custom Runtime Services Architectural Pattern #3: Custom Client Adapter on SharePoint Web Services Architectural Pattern #4: Custom Client Adapter on Custom Runtime Services Architectural details Advantages/disadvantages Code samples and demo Setup and deployment

Adapter on Custom Runtime Services Architectural Details Client Browser Fully-Rendered Web Part Silverlight Application User Interface Components Custom JavaScript Object * Requires Administrator Intervention Non-SharePoint Platform SharePoint Platform Custom Web Services: MySPService1.asmxMySPService2.asmx Other 'Receivers': \_layouts\Receiver.aspx\_layouts\Receiver.ashx* Other Web Services: MyService1.asmxMyService2.asmx

Adapter on Custom Runtime Services Advantages/Disadvantages Advantages Ultimate flexibility on the client and on the server Asynchronous or synchronous – you choose... Ultimate performance No cross-domain Issues Disadvantages More development effort, but not too much Minimal Extra Effort = Ultimate Power and Flexibility

Adapter on Custom Runtime Services // AssemblyInfo.cs entry [assembly: System.Web.UI.WebResource ("TechEdWebPart.TechEdSharePointAdapter.js", "text/javascript")] // Web Part Code protected override void OnLoad(EventArgs e) { base.OnLoad(e); ScriptManager scriptManager = ScriptManager.GetCurrent(this.Page); if (scriptManager == null) { scriptManager = new ScriptManager(); this.Controls.Add(scriptManager); } // TechEdSharePointAPI.js is an embedded resource in the Web Part this.Page.ClientScript.RegisterClientScriptResource (this.GetType(), "TechEdWebPart.TechEdSharePointAdapter.js"); }

Adapter on Custom Runtime Services // JavaScript Object Code function techEdClientAdapter() { function findCustomer(wildCard) { var xHttp; //getXmlHttpObject() is a helper function --- see demo for details xHttp = getXmlHttpObject(); xHttp.open("GET", " +"/_layouts/techEd/techEdSharePointServerAdapter.aspx" +"?techEdOp=findCustomer&wildCard="+wildCard, false); xHttp.send(null); var xHttpResult; xHttpResult = xHttp.responseText; return (xHttpResult.toString()); } this.findCustomer = findCustomer; } var techEdAdapter = new techEdClientAdapter();

Adapter on Custom Runtime Services // Silverlight Client Code private void Pattern4_Click(object sender, RoutedEventArgs e) { System.Windows.Browser.ScriptObject script = (System.Windows.Browser.ScriptObject) System.Windows.Browser.HtmlPage.Window.GetProperty("techEdAdapter"); string adapaterResponse = string.Empty; try { adapaterResponse = script.Invoke("findCustomer", WildCardCharacter.Text).ToString(); } catch (Exception ex) { adapaterResponse = ex.Message; } finally { Pattern4Response.Text = adapaterResponse; }

Adapter on Custom Runtime Services //Runtime Services Server Code --- Simple ASPX Example protected void Page_Load(object sender, EventArgs e) { string wildCard = this.Page.Request.QueryString["wildCard"].ToString(); SPWeb thisWeb = null; string foundCustomerNames = string.Empty; thisWeb = SPControl.GetContextWeb(Context); SPList itemList = thisWeb.Lists["Customers"]; SPQuery listQuery = new SPQuery(); listQuery.Query = " " + wildCard + " "; SPListItemCollection customerItems = itemList.GetItems(listQuery); foreach (SPListItem customer in customerItems) { foundCustomerNames += customer.ID.ToString() + ": " + customer["Title"].ToString() + "\n"; } return (foundCustomerNames); }

Architectural Pattern #4: Custom Client Adapter on Custom Runtime Services Zlatan Dzinic Principal Consultant Microsoft Most Valuable Professional - SharePoint Business Connexion

Agenda Silverlight on SharePoint Architectural Pattern #1: Silverlight Proxy on SharePoint Web Services Architectural Pattern #2: Silverlight WebClient on Custom Runtime Services Architectural Pattern #3: Custom Client Adapter on SharePoint Web Services Architectural Pattern #4: Custom Client Adapter on Custom Runtime Services Setup and Deployment Deployment Requirements Entries in Web.config

Setup and Deployment Deployment Requirements Requirements WSS Service Pack 1 Microsoft Office SharePoint Server 2007 Service Pack 1 (if in a MOSS environment) Silverlight 2.0 Browser plug-in (server and client) IIS MIME-type mapping:.xap  application/x-silverlight-app (requires an iisreset) Four entries in Web.config (see next slide)

Entries in Web.config......

Summary Silverlight on SharePoint Architectural Pattern #1: Silverlight Proxy on SharePoint Web Services Architectural Pattern #2: Silverlight WebClient on Custom Runtime Services Architectural Pattern #3: Custom Client Adapter on SharePoint Web Services Architectural Pattern #4: Custom Client Adapter on Custom Runtime Services Setup and Deployment

Win! LifeCam Show Ultra-Thin Mobile Design World-Class High Definition Optics Question: {Enter the qualifying question here / or find another way to select your winner} Please attend other business productivity sessions Office and SharePoint track (OFC) Unified Communications (UNC)

© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.