Using Custom Web Parts to publish Mashlets into SharePoint: Example 1

• 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 Rendermethod. 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; }
}