Building SharePoint WebParts in Chrome and Delphi

Before you read this post, my code highlighter, GeSHi, doesn’t support Pascal highlighting. So, it is highlighted in generic syntax. I am 100% interested in getting community contributions on this subject. If you want to contribute to this subject, regarding SharePoint development outside of C# or VB.NET, please contact me at my personal email through the feedback page on the main site. I am most likely going to start a new article thread on the main sharepointsecurity.com site, or create a step-by-step downloadable guide for, that I will give interested people complete access to for posting hints, tips, and tricks with full credit, because this subject is sorely missing for people bridging into SharePoint development.

Anyways, here is my first attempt…

You might be a Delphi developer, or maybe a Chrome developer, sitting in your organization, sneaking in a game of WarCraft or something else, and just got charged by management with doing an obscene amount of SharePoint WebPart development for your organization.

No problem you think, I can handle this, it all comes out to the same MSIL doesn’t it? When starting to get your project going through, you may find that researching how to build a simple example SharePoint WebPart done in Delphi, or any other language outside of VB.NET or C#, is only mildly more frustrating than trying to figure out the cure for world hunger.

I was in the same situation. Before switching to C#, I primarily did VC++ development (I still program a majority of my web service code in VC++ too, as well as my entire shared class library for SAML is in VC++). If you are doing your SharePoint programming in your native language of choice, you are going to be up a creek sans paddle when trying to start out coding a simple WebPart.

This is, to me, is one of the primary reasons that developers get turned off to SharePoint development. So, being one that likes to use other programming languages (ok, maybe it is just VC++ but whatever), I decided to write up how to code a simple WebPart in a variety of other languages. There are so many tools to use languages like Pascal and Delphi within .NET applications, such as Hydra, and entirely too much to cover in just one post. I will expand this concept further with a more complex sample WebPart for other .NET compatible languages when I think of a suitable example. Probably something that interacts with the SharePoint Object Model heavily like SharePoint list displays or the likes.

Anyways, out of the two pieces in this article, I only know Delphi a little bit, have dabbled in Chrome, and found the example WebPart upon compilation worked fine for rendering out text that is manageable directly from a WebPart persistent property. I won’t reveal how long it took me to figure out the proper compilation sequences, because frankly it’s embrassing. This also doesn’t mean it is the right or the best practice code, so please contact me if I can correct or expand this content, as it would be a fun subject to contribute to.

If you are completely new to SharePoint development, I would encourage you to read this article on the main sharepointsecurity.com site in order to gain an understanding of the standard class inheritance, method overrides, and other things that go on with the WebPart. If you use some other .NET compliant language in your organization that I haven’t covered, shoot me an email and I will add to these examples. I would like to improve the amount of documentation that is available for all types of developers, and I think this is a good start.

In these examples, I am going to show you how to render out a string that is entered via a WebPart property, demonstrated through two different methods. Here is a screenshot of the final product (yeah, its not very impressive, but hey, its a start on this subject):

Both of these WebParts regardless of methods will be inheriting from the ASP.NET 2.0 WebPart base class (System.Web.UI.WebControls.WebPart) as opposed to the SharePoint WebPart (Microsoft.SharePoint.WebPartPages.WebPart) base class as a better practice.

The first method that will be demonstrated directly writes to the control stream using the property defined text in the overridden Render Method. The second method that will be shown will use a literal control declared in the CreateChildControls method and then the RenderChildern method to output the stream within the Render method.

Building a Simple SharePoint WebPart in Chrome

Method 1: Directly Output in Render Method

[code]
namespace  Example_WebPart;
interface
type
Example_WebPart = public class(WebPart)

{ WebPart Fields }
private _exampleText: String;

{ WebPart Methods }
method Example_WebPart.Render(writer: HtmlTextWriter);
begin
writer.&Write(self._exampleText)
end;

{ WebPart Properties }
[Category(‘Example Properties’), Personalizable(PersonalizationScope.Shared), WebBrowsable(true), WebDescription(‘Adam”s Example Text’), WebDisplayName(‘Adam”s Example Text For Output’)]
property exampleText: String read get_exampleText write set_exampleText;
end;
[/code]

Method 2: Render Out Literal Control in CreateChildControls and Call RenderChildern

[code]
namespace  Example_WebPart;
interface
type
Example_WebPart = public class(WebPart)

{ WebPart Fields }
private _exampleText: String;

{ WebPart Methods }
method Example_WebPart.CreateChildControls;
begin
inherited CreateChildControls;
self.Controls.&Add(new LiteralControl(self._exampleText))
end;

method Example_WebPart.Render(writer: HtmlTextWriter);
begin
self.RenderChildren(writer)
end;

{ WebPart Properties }
[Category(‘Example Properties’), Personalizable(PersonalizationScope.Shared), WebBrowsable(true), WebDescription(‘Adam”s Example Text’), WebDisplayName(‘Adam”s Example Text For Output’)]
property exampleText: String read get_exampleText write set_exampleText;
end;
[/code]

Building a Simple SharePoint WebPart in Delphi

Method 1: Directly Output in Render Method

[Delphi]
unit  Example_WebPart;
interface
type
public Example_WebPart = class(WebPart)

// WebPart Fields
strict private _exampleText: string;

// WebPart Properties
[Category(‘Example Properties’), Personalizable(PersonalizationScope.Shared), WebBrowsable(true), WebDescription(‘Adam”s Example Text’), WebDisplayName(‘Adam”s Example Text For Output’)]
public property exampleText: string read get_exampleText write set_exampleText;

// WebPart Methods
procedure Example_WebPart.Render(writer: HtmlTextWriter);
begin
writer.Write(self._exampleText)
end;

end;
[/Delphi]

Method 2: Render Out Literal Control in CreateChildControls and Call RenderChildern

[Delphi]
unit  Example_WebPart;
interface
type
public Example_WebPart = class(WebPart)

// WebPart Fields
strict private _exampleText: string;

// WebPart Properties
[Category(‘Example Properties’), Personalizable(PersonalizationScope.Shared), WebBrowsable(true), WebDescription(‘Adam”s Example Text’), WebDisplayName(‘Adam”s Example Text For Output’)]
public property exampleText: string read get_exampleText write set_exampleText;

// WebPart Methods
procedure Example_WebPart.CreateChildControls;
begin
inherited CreateChildControls;
self.Controls.Add(LiteralControl.Create(self._exampleText))
end;

procedure Example_WebPart.Render(writer: HtmlTextWriter);
begin
self.RenderChildren(writer)
end;

end;
[/Delphi]

Once you have your WebPart compiled into an executable binary, you can exploit 4 other files to deploy and manage your new WebPart: a .WebPart file, a solution manifest, a Feature file, and an elementManifest file.

The first XML file that you will use to deploy your WebPart is the WebPart file which provides all the descriptive elements relating to your WebPart:

[XML]




Cannot import Example_WebPart Web Part.

Example_WebPart


[/xml]

The next two files are the Feature.xml file and the elementManifest.xml file. This will be used to deploy the WebPart as a SharePoint feature. You will see that in the Feature.XML file, the elementManfiest.xml file as well as the .webpart file are both referenced within the ElementManifest element.

Feature.XML

[xml]

elementManifest.XML

[xml]





[/xml]

The last file to consider is the solution manifest, which allows you to wrap your SharePoint WebPart within a deployable SharePoint solution file. The SharePoint solution file will reference objects such as your SharePoint feature and the executing assemblies that should be included with your WebPart deployment.

[xml]












[/xml]

Share

Using the Wizard Control In WebParts

The ASP.NET 2.0 WizardControl is pretty awesome, especially if you are building a WebPart that goes through a sequential period of steps while collecting information, either delegating that information to other sources, or aggregating the total data for a computation of some sort. In essence, the WizardControl is a way to build a WebPart that will contain several steps for user interaction by using familiar child controls, such as buttons that leverage the next/previous/final application architecture. I am using it pretty heavily when building form type scenarios when I don’t have the availability of Office Forms Server 2007 since I can accomplish some of the same kind of business optimization through electronic conversion benefits.

As you navigate throughout the net, you will find very little documentation on using the WizardControl outside of how to drag it from the toolbox onto the design surface for a WebForm, which is not particularly useful for control / WebPart developers. Since I had to use the WizardControl recently for my current project, I thought I would save some people the time of researching information and go over how to consume it in a basic WebPart. At the end of this post, you will see how to design the control, wire appropriate control delegates for master step output, as well as how to bind events to the particular buttons to really build a great sequential WebPart. If you are reading this, I am going to assume that you are already familiar with WebPart development, so am not going to go over the WebPart basics, however on the primary sharepointsecurity.com site, here is an article that details how to create a basic SharePoint 2007 WebPart.

First thing is first, and like I said, this post assumes you are familiar with settings up the WebPart class file. If you are targeting your WebPart to consume from the SharePoint WebPart base class, you are going to need a reference in your using statements to System.Web.UI.WebControls since the Wizard class derives from there, so the top of your WebPart class file should have the following references established:
[csharp]
using System.Web.UI.WebControls;
[/csharp]

Once you have the references prepared, you must declare that you are going to use a wizard control. Under class, prepare the following for use:

[csharp]
private Wizard _stepwizard;
[/csharp]

The assignment that you are making is going to be used throughout the rest of the code file for properties, attributes, and event wiring.

Navigate to your CreateChildControls() method in the WebPart class file, which should only currently have base.CreateChildControls() in it in order to ensure that the appropriate child controls are registered on the page by the WebPart.

[csharp]
protected override void CreateChildControls()
{
base.CreateChildControls();
}
[/csharp]

In this method you are going to add the appropriate code to create the Wizard, which can then parse out in the Render method using Control.RenderChildren out of the System.Web.UI namespace which allows the content to be parsed to an HtmlTextWriter object for display on the screen. We will look at this more later, but for a reference it will be something as simple as:
[csharp]
this.EnsureChildControls();
RenderChildren(output);
[/csharp]

Back to the Wizard functionality. In the CreateChildControl method where the Wizard is going to be instantiated from, you are going to perform two major tasks, design the overall Wizard, and design the Wizard steps that build up that aggregate Wizard control. The first thing to accomplish is to create the new Wizard object:

[csharp]
protected override void CreateChildControls()
{
base.CreateChildControls();
_stepwizard = new Wizard();
}
[/csharp]

Once you have assigned the _stepwizard, you can start to set some of the properties of the Wizard object. There are a lot of style properties, control templates, and misc. attributes that you can set for the parent Wizard control, but for the example I am building here is the relevant code to give you an idea of what you can do. Of course, you should design the control to appropriate assimilate into the design of your SharePoint master pages since the default is pretty plain.
[csharp]
protected override void CreateChildControls()
{
base.CreateChildControls();

// Create the New Wizard
_stepwizard = new Wizard();
// Set some general properties
_stepwizard.Width = Unit.Percentage(100);
_stepwizard.HeaderStyle.BackColor = Color.White;
_stepwizard.HeaderStyle.ForeColor = Color.White;
_stepwizard.HeaderStyle.HorizontalAlign = HorizontalAlign.Center;
_stepwizard.BackColor = Color.WhiteSmoke;

// Sidebar Styles
_stepwizard.SideBarStyle.HorizontalAlign = HorizontalAlign.Left;
_stepwizard.SideBarStyle.VerticalAlign = VerticalAlign.Top;
_stepwizard.SideBarStyle.BackColor = Color.LightGray;
_stepwizard.SideBarStyle.ForeColor = Color.DarkGray;
_stepwizard.SideBarStyle.Font.Underline = true;
_stepwizard.SideBarStyle.BorderColor = Color.Gray;
_stepwizard.SideBarStyle.BorderStyle = BorderStyle.Solid;
_stepwizard.SideBarStyle.BorderWidth = Unit.Pixel(2);
_stepwizard.SideBarStyle.Width = Unit.Pixel(200);
_stepwizard.SideBarStyle.Font.Bold = true;
_stepwizard.SideBarButtonStyle.Font.Bold = true;
_stepwizard.SideBarButtonStyle.ForeColor = Color.DarkSlateGray;
// Set the Button Style Properties
_stepwizard.NavigationButtonStyle.BackColor = Color.LightGray;
_stepwizard.NavigationButtonStyle.BorderColor = Color.Gray;
_stepwizard.NavigationButtonStyle.ForeColor = Color.Gray;
_stepwizard.NavigationButtonStyle.BorderStyle = BorderStyle.Solid;
_stepwizard.SideBarStyle.BorderWidth = Unit.Pixel(2);
// Start Button Properties
_stepwizard.StartNextButtonText = “Next”;
_stepwizard.StepNextButtonText = “Next”;
_stepwizard.StepPreviousButtonText = “Previous”;
// Button Finish Properties
_stepwizard.FinishPreviousButtonText = ” Previous”;
_stepwizard.FinishCompleteButtonText = “Im Done!”;
[/csharp]

Now that you have the actual Wizard Control being rendered, it doesn’t make much sense to the user if it doesn’t contain any steps! Therefore, you have to use the WizardStep class in order to make new Wizard steps. There are 5 types of steps that are offered by the Wizard control.

Auto – Wizard controsl how the step is proceeded
Complete – Basically a confirmation page displayed by the wizard
Finish – Contains the finish button, but no next button
Start – No previous button, just the next button
Step – Middle pages in the Wizard, those that have both next and previous

Getting your new steps going is pretty easy, and is really where the rubber hits the road. I am going to make three steps for my Wizard using the below code, named “one”, “two”, and “three”.

[csharp]
WizardStep firstStep = new WizardStep();
firstStep.ID = “One”;
firstStep.Title = “One”;
firstStep.SetRenderMethodDelegate(RenderOne);
_stepwizard.WizardSteps.Add(firstStep);
WizardStep secondStep = new WizardStep();
secondStep.ID = “Two”;
secondStep.Title = “Two”;
secondStep.SetRenderMethodDelegate(RenderTwo);
_stepwizard.WizardSteps.Add(secondStep);
WizardStep thirdStep = new WizardStep();
thirdStep.ID = “Three”;
thirdStep.Title = “Three”;
secondStep.SetRenderMethodDelegate(RenderThree);
_stepwizard.WizardSteps.Add(thirdStep);
[/csharp]

Every property for this seems pretty obvious like the ID and the Title stuff. There are a lot of misc. properties that you can set as well. However, there is one thing that is not entirely clear. What the hell is SetRenderMethodDelegate? SetRenderMethodDelegate from the control class is a great way that you can inject your own HTML code that will be called after the control rendering, therefore allows you to code for each specific Wizard step. For example, I have a method call to RenderOne, which in code I could make something as simple as:

[csharp]
protected void RenderOne(System.Web.UI.HtmlTextWriter output, System.Web.UI.Control Container)
{
output.WriteLine(“Testing Wizard”);
}
[/csharp]

which on the first page would render out the text “Testing Wizard”. Each of the steps could therefore have a delgate call to their relevant output method.
Lastly, the Wizard control has to be added by using the add method from the Controls property.

[csharp]
Controls.Add(_stepwizard);
[/csharp]

After you have the relevant control display in each Wizard step, you have to wire the relevant events into the Wizard. There are a total of six events that you can override to do whatever type of logic that you desire.

ActiveStepChanged – EventHandler delegate
CancelButtonClick – EventHandler delegate
FinishButtonClick – WizardNavigationEventHandler delegate
NextButtonClick – WizardNavigationEventHandler delegate
PreviousButtonClick – WizardNavigationEventHandler delegate
SideBarButtonClick – requires a WizardNavigationEventHandler delegate

You have to make sure you are using the right delegates for whatever event you are trapping and customizing. For example, the OnActiveStepChanged event requires an EventHandler delegate.

[csharp]
public void OnActiveStepChanged(object sender, EventArgs e)
{
}
[/csharp]

Whereas the NextButtonClick event requires a WizardNavigationEventHandler delegate.

[csharp]
public void OnNextButtonClick(object sender, WizardNavigationEventArgs e)
{
}
[/csharp]

When you have everything wired, just RenderChildern in your RenderWebPart or RenderContents method and you are ready to go!

This should have you pretty much all the way with getting the Wizard WebPart up and going. If you have any questions, feel free to post them in the comments and I will try my best to answer them.

Share