Mashups and Microsoft SharePoint Part 1.4: Using Custom Web Parts to publish Mashlets into SharePoint

Posted 03/09/2009 - 10:42 by jeremy.pitten
0
Your rating: None

Mashups and Microsoft SharePoint Part 1.4: Using Custom Web Parts to publish Mashlets into SharePoint

This is the fourth in a many-part series about Mashups and Microsoft SharePoint.  You can read about the entire series at http://www.jackbe.com/enterprise-mashup/blog/mashing-sharepoint-introduction.

Introduction

This section will illustrate how SharePoint custom Web Parts can be used to access Presto Mashups. The section will detail the process of writing and deploying the Web Parts to a SharePoint Site.

The Presto User Documentation Section Using Presto Connect for C# provides a brief introduction to the Presto Connector API for C# which will be used in this section.

All of the sample Web Parts have been developed using standard ASP.NET 2.0 Web Part framework, rather than the SharePoint Web Part infrastructure, which is recommended practice.

The figure below provides an overview of the Presto Web Part architectural design. On the left we have a browser displaying a SharePoint site web page containing a pair of Presto web parts. In the center we have the SharePoint server and on the right we have the Presto Mashup Server.

2 Web Parts are shown:

  • The upper Web part represents an example of a simple Mashlet View Web Part, which connects directly back to the Presto Mashup Server to retrieve a Mashlet, the Mashlet is then displayed within the Web part frame.
  • The lower Web Part makes use of ASP.NET Server Controls to build a UI and connects back to Presto mashup Server using the Presto Connector for C#.

Prerequisites

The sample web parts were developed using Visual Studio 2008 and the Microsoft Office SharePoint Server SDK 1.4, which includes Windows SharePoint Services 3.0 SDK.

Presto Mashlet View Web Part

The intention with this first Presto Web Part is to provide a more user friendly version of the Page Viewer Web part previously discussed. It can be considered to be the most simple of Web Parts and is the easiest to install and use.

The screenshot below shows the installed Web Part in Edit Mode. Having added the Web part to a Web Part page, the user is required to specify the following Mashlet properties:

  1. hostname
  2. port number
  3. mashlet name

The Mashlet being rendered is a Sample.BubbleChart Mashlet, which is the subject of a blog entry, BubbleChart Sample Mashlet, where it is available for download, it should be available as a standard sample mashlet in the next Presto release.

Creating the Mashlet View Web Part

  • With the SharePoint Server SDK installed you should be able to create a new web part project by selecting the C# SharePoint Web Part Template, name the Project Jackbe.Samples.
  • Delete the default WebPart, WebPart1, and add a new WebPart named MashletView. Which should generate the following template class:

using System;
using System.Runtime.InteropServices;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Serialization;

using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using Microsoft.SharePoint.WebPartPages;

namespace Jackbe.Sample
{
    [Guid("9ea88355-c62b-4ddf-8775-e18c2a8b5304")]
    public class MashletView : System.Web.UI.WebControls.WebParts.WebPart
    {
        public MashletView()
        {
        }

        protected override void CreateChildControls()
        {
            base.CreateChildControls();
        }
    }
}
  • The template class includes the Microsoft.SharePoint namespaces, these can be removed as we will be using the standard ASP.NET 2.0 Web Part classes.
  • We'll define a number of Web Part Properties which we'll be able to edit in order to configure the Web Part:
    • MashletName, the name which identifies the Mashlet
    • Hostname, the Mashup Server IP Address
    • Port number, Mashup Server Port number
    • Show/Hide Mashlet Toolbar, to reduce screen clutter we'll hide the Mashlet Toolbar by default
  • For each property we annotate it so that it is:
    • WebBrowsable, viewable when Web Part is in Edit mode
    • WebDisplayName, the displayed name of the property
    • WebDescription, tooltip description for property
    • Personalizable, we set the Personalizable scope to shared so that all page users share the same web part properties.
        private string _MashletName;
        private string _Hostname;
        private string _Port;
        private bool   _Toolbar = false;


        [WebBrowsable(true)]
        [WebDisplayName("Mashlet Name")]
        [WebDescription("Name of Presto Mashlet")]
        [Personalizable(PersonalizationScope.Shared)]
        public String MashletName
        {
            get {    return _MashletName;   }
            set {    _MashletName = value;  }
        }

        [WebBrowsable(true)]
        [WebDisplayName("Hostname")]
        [WebDescription("Presto Hostname")]
        [Personalizable(PersonalizationScope.Shared)]
        public String Hostname
        {
            get {    return _Hostname; }
            set {   _Hostname = value; }
        }

        [WebBrowsable(true)]
        [WebDisplayName("Port")]
        [WebDescription("Presto mashlet host Port number")]
        [Personalizable(PersonalizationScope.Shared)]
        public string Port
        {
            get  {   return _Port;   }
            set  {   _Port = value;  }
        }

        [WebBrowsable(true)]
        [WebDisplayName("Show Mashlet Toolbar")]
        [WebDescription("Show/hide Mashlet header toolbar")]
        [Personalizable(PersonalizationScope.User)]
        public Boolean Toolbar
        {
            get  {    return _Toolbar;   }
            set  {   _Toolbar = value;   }
        }
  • Remove the CreateChildControls method, which we will not use in this case, and add the following Render method. The method checks to see that values have been assigned to each property before constructing an iframe element:
    • Iframe src attribute points to uwa-view.jsp, a utility JSP which expects to render a mashlet inside an iframe. We explicitly pass in the configured height of the Web Part together with the name of the mashlet (mid), and the toolbar property.
    • Iframe frameborder is hidden to remove clutter.
    • Iframe scrollers are disabled, to prevent the scrollbars appearing, which is the case with the default Page Viewer Web Part.
    • Explicitly set the height of the Iframe.
        protected override void Render(HtmlTextWriter writer)
        {

            if (String.IsNullOrEmpty(MashletName))
            {
                this.renderError(writer, "MashletName not specified");
            }
            else if (String.IsNullOrEmpty(Hostname))
            {
                this.renderError(writer, "Mashlet Hostname not specified");
            }
            else if (String.IsNullOrEmpty(Port.ToString()))
            {
                this.renderError(writer, "Mashlet Port not specified");
            }
            else
            {
                string showToolbar = Toolbar.ToString();
                string height = Height.Value.ToString();


                string iframeTag = "<iframe "
                    + "src='http://{0}:{1}/mashlets/uwa-view.jsp"

                    + "?mid={2}&height={3}&toolbar={4}' "
                    + "frameborder='0' scrolling='no' width='100%' height='{3}px' style='border:0px;' ></iframe>";

                writer.Write(iframeTag, new String[] { Hostname, Port, MashletName, height, showToolbar });
            }
        }
        private void renderError(HtmlTextWriter writer, string message)
        {
            writer.Write("<div style='color:red' >{0}</div>", message);
        }

Finally, a few minor presentation details, we'll override a couple of the standard IWebPart methods to further customize the Web Part:

  1. Display a Presto Icon
  2. Link to the mashlet in a standalone web page from the Web Part Title.
  3. Set a default height.
        public override string TitleUrl
        {
            get
            {
                return "http://" + Hostname + ":" + Port + "/mashlets/standalone.jsp?mashlet=" + MashletName;
            }
            set {   return;   }
        }
        public override string TitleIconImageUrl
        {
            get
            {
                if (String.IsNullOrEmpty(Hostname) || String.IsNullOrEmpty(Port)){
                    return base.TitleIconImageUrl;
                } else {
                    return "http://" + Hostname + ":" + Port + "/presto/images/presto.ico";
                }
            }
            set {  return;   }
        }
        public override System.Web.UI.WebControls.Unit Height
        {
            get{   return base.Height.IsEmpty ? 400 : base.Height;   }
            set{    base.Height = value;   }
        }

 

Deploying the Mashlet View Web Part

Having built the Web Part Assembly we will deploy it to the SharePoint bin directory, which is the recommended method of deployment.

Assuming a default Visual Studio 2008 installation, the dll should be:

C:\Documents and Settings\username\My Documents\Visual Studio 2008\Jackbe.Sample\MashletView\bin\Debug.

Assuming a default SharePoint installation, the destination bin should be:

C:\Inetpub\wwwroot\wss\VirtualDirectories\port number\bin

Finally, in order for SharePoint to recognise the new Web part as being safe to use, we must add a Safe Control entry in web.config for the new Web Part.

The web.config will be found in the bin parent directory:

C:\Inetpub\wwwroot\wss\VirtualDirectories\port number\web.config

Open the file with a text editor such as Notepad, locate the SafeControls section and add the following child element entry:

<SafeControl
    Assembly="Jackbe.Samples, Version=1.0.0.0, Culture=nuetral, PublicKeyToken=null"
    namespace="Jackbe.Samples"
    TypeName="MashletView"
    Safe="True"
    AllowRemoteDesigner="True"

/>

Now we are ready to add the new Web Part to the SharePoint Web Part gallery.

  1. From your SharePoint Site homepage, select Site Actions->Site Settings
  2. In Site Settings, select Web Parts from the Galleries column, which will display the Web Part Gallery.
  3. Select *New to add a new Web Part, this will display a list of all available New Web Parts.
  4. Select the checkbox for the Jackbe.Sample.MashletView and click the Populate Gallery button, this will return you to the Web Part Gallery where you should see the new Web part listed as MashletView.webPart!NEW.

  1. The mashlet can now be added to any Web Part page. We could change the mashlet settings so that it appears in a new Grouping, by default it will appear under Miscellaneous Web Parts.

Rendering the Mashlet View Web Part

  1. Navigate to the Web Part page where you want to add the MashletView Web Part, select Site Actions-> Edit Page.
  2. Click Add a Web Part in the zone you wish to add the Web Part, this should pop up the Add Web Parts dialog where you should find the new MashletView Web Part listed in the Miscellaneous section. Select the checkbox and click Add, this should add the web Part to the current page.
  3. Select Web Part Edit-> Modify Shared Web Part to configure the mashlet properties.

The screenshot below shows the final rendered Mashlet.

Attachment

A Visual Studio 2008 Project which includes the 2 sample Web Part implementations is attached at the bottom of this article, Jackbe.Sample.zip. In order to open the project file Visual Studio 2008 should have Microsoft Office SharePoint Server SDK 1.4 installed, or you can always just look at the source code or copy it into your own development environment.

 

This post is part of a many-part series about Mashups and Microsoft SharePoint.  You can read about the entire series at http://www.jackbe.com/enterprise-mashup/blog/mashing-sharepoint-introduction.

 

Groups: