Exercise 2: Add a Mobile Adapter to the Web Part

In this exercise, you will add a mobile adapter to the custom web part so you can control the rendering of your web part in both the standard browser and mobile browser. This powerful capability enables developers to manage the presentation of their content on different platforms.

Task 1 – Adding a Mobile Adapter Class

1. In the WP7.SP.MobileWebPart project, in the Adapters folder, open the MobileWebPartMobileAdapter.cs file.

2. After the //TODO: 3.2.2 comment insert the following method:

   C#

   protected override void CreateControlsForDetailView() { //Make this arrowhead a toggle switch on devices whose //browsers support CSS and ECMAScript 1.0 or greater. Image iconImage = this.CreateWebPartIcon(WebPartIconLink.LinkToSummaryView); iconImage.BreakAfter = false; this.Controls.Add(iconImage); //Render the default title of the Web Part Label titleLabel = this.CreateWebPartLabel(); this.Controls.Add(titleLabel); LiteralText litHello = new LiteralText(); litHello.Text = "Hello World. This is the Mobile Device version of the SharePoint web part."; this.Controls.Add(litHello); }

   The code above executes when the page renders in Mobile mode. This code displays an image next to the Title of the Web part. Clicking the image will display the Hello World content in the litHello LiteralText control.

Task 2 – Adding a Feature Receiver to Update the Browser Compatibility File

1. In the WP7.SP.MobileWebPart project, expand the Features folder until you can see the MobileWebPartFeature.EventReceiver.cs file. Open the MobileWebPartFeature.EventReceiver.cs file.

2. After the //TODO: 3.2.3 comment add the following constants:

   C#

   string webPartFQN = "WP7.SP.MobileWebPart.MobileWebPart, WP7.SP.MobileWebPart, Version=1.0.0.0, Culture=neutral, PublicKeyToken=1c80951372585dee"; string MobileAdapterFQN = "WP7.SP.MobileWebPart.MobileWebPartMobileAdapter, WP7.SP.MobileWebPart, Version=1.0.0.0, Culture=neutral, PublicKeyToken=1c80951372585dee";

3. After the comment //TODO : 3.2.4 add the following Feature Activated method:

   C#

   public override void FeatureActivated(SPFeatureReceiverProperties properties) { // Add the Mobile Web Part Adapter to the compat.browser file SPWebApplication webApp = null; if (properties.Feature.Parent is SPSite) { SPSite spSite = properties.Feature.Parent as SPSite; webApp = spSite.WebApplication; } else if (properties.Feature.Parent is SPWebApplication) { webApp = properties.Feature.Parent as SPWebApplication; } String pathToCompatBrowser = webApp.IisSettings[SPUrlZone.Default].Path + @"\App_Browsers\compat.browser"; XElement compatBrowser = XElement.Load(pathToCompatBrowser); // Get the node for the default browser. XElement controlAdapters = compatBrowser.XPathSelectElement("./browser[@refID = \"default\"]/controlAdapters"); // Create and add the markup. XElement newAdapter = new XElement("adapter"); //Web Part FQN newAdapter.SetAttributeValue("controlType", webPartFQN); //Web Part Mobile Adapter FQN newAdapter.SetAttributeValue("adapterType", MobileAdapterFQN); controlAdapters.Add(newAdapter); // Overwrite the old version of compat.browser with your new version. compatBrowser.Save(pathToCompatBrowser); }

   The code above runs when the Feature is activated. It determines the IIS directory based on the SPWebApplication and then locates the compat.browser file associated with the Web Application. Using Linq and XPath the code inserts the necessary line into the file to register the mobile adapter for the Web Part, replacing the MobileWebPart class with the MobileWebPartMobileAdapter class.

4. After the comment //TODO : 3.2.5 add the following Feature Deactivated method:

   C#

   public override void FeatureDeactivating( SPFeatureReceiverProperties properties) { SPWebApplication webApp = null; if (properties.Feature.Parent is SPSite) { SPSite spSite = properties.Feature.Parent as SPSite; webApp = spSite.WebApplication; } else if (properties.Feature.Parent is SPWebApplication) { webApp = properties.Feature.Parent as SPWebApplication; } String pathToCompatBrowser = webApp.IisSettings[SPUrlZone.Default].Path + @"\App_Browsers\compat.browser"; XElement compatBrowser = XElement.Load(pathToCompatBrowser); // Get the node for the default browser. XElement mobileAdapter = compatBrowser.XPathSelectElement( String.Format( "./browser[@refID = \"default\"]/controlAdapters/adapter[@controlType = \"{0}\"]", webPartFQN) ); //Delete the Mobile Adapter node mobileAdapter.Remove(); // Overwrite the old version of compat.browser with your new version. compatBrowser.Save(pathToCompatBrowser); }

   The Feature Deactivated method rolls back the changes to the compat.browser file made in the Feature Activated method.

5. Open a command window and enter IISREST. This will clear the cache and ensure that later testing will proceed smoothly.
6. Save all files and press F5 to compile and deploy the changes.