Exercise 1: Compile and Deploy a Custom Web Part

In this exercise, you will compile and deploy a custom visual Web Part. This is a fundamental skill for SharePoint developers. This Web Part will serve as the basis for the rest of the lab. In later exercises, you will add additional functionality to the Web Part to change the rendering for mobile browsers.

Task 1 – Beginning the Exercise

In this task, you will open the lab solution in Visual Studio 2010.

1. Make sure that you have downloaded and installed the items listed in System Requirements above prior to beginning this exercise.
2. Launch Visual Studio 2010 as administrator and open the lab project by selecting File » Open » Project.
3. Browse to the WP7.SP.MobileWebPart.sln file located at %TrainingKitPath%\Labs\CreatingMobileWebParts\Source\Before and select it.
4. Click Open to open the solution.

Task 2 – Preparing the Project for Deployment

In this task, you will ensure that the deployment address for the project is correct.

1. In the WP7.SP.MobileWebPart project click on the Project node in the Solution Explorer.
2. In the Properties pane, set the Site Url property to the URL of your test site, for example https://fbawp7.

Task 3 – Creating a Visual Web Part

In this task, you will create a visual Web part that will render text on the page. You will test the web part in normal and mobile browsing mode.

1. In the WP7.SP.MobileWebPart project, in the MobileWebPart folder, open the MobileWebPartUserControl.ascx file.

2. Add the following code below the //TODO: 3.2.1 Comment:

   ASP.Net

   <asp:Literal ID="Literal1" runat="server" Text="Hello from the mobile web part rendered in a regular browser."></asp:Literal>

3. Save the project and press F5 to run the project in debug mode. The browser should open to the address you configured in Task 2.

Task 4 – Adding the Web Part to a SharePoint Page

In this task, you will add the new custom Web Part to the home page of your site.

1. In the browser, choose Site Actions | Edit Page.
2. With the cursor at the top of the page, choose the Insert tab on the Editing Tools Ribbon menu.
3. Choose Web Part from the Web Parts group.
4. In the Web Part Categories section, choose Windows Phone 7.
5. In the Web Parts section, select SharePoint Mobile Web Part.
6. Ensure that the Add Web Part to: selector is set to Rich Content. Click Add. After a moment, the web part should appear on the page.

7. On the Page tab click Save and Close.

   Figure 1

   The SharePoint Mobile Web part rendered on the page

Task 5 – Testing the Web Part

In this task, you will test the default behavior of Web Parts in mobile view.

1. Notice the location of your Web Part on the page in the browser.
2. In the browser address bar add the query string ?mobile=1 to change the site into mobile view. (For the site https://fbawp7 the full URL would be: https://fbawp7/SitePages/Home.aspx?mobile=1)

3. Notice in the mobile view the custom Web Part does not render in the user interface.

   Figure 2

   The mobile view of the site is missing the Web Part