Tutorials

Visual WebGui allows simple & fast development & deployment of Web/Cloud applications while providing full flexibility & extensibility of other ASP.NET components. This article shows how to leverage 3rd party controls and use them within Visual WebGui projects which will be done by demonstrating the wrapping process of ComponentOne C1Calendar control into Visual WebGui. 

Introduction

Visual WebGui allows developers to place ASP.NET controls inside their application and interact with those controls, as if they were ordinary Visual WebGui controls. This is done in Visual WebGui by a tool that is called the ‘Wrapping tool’. This tool is included within the Visual WebGui installation that integrates it into MS Visual Studio. This tool creates a wrapper for a selected ASP.NET control. The wrapper that is created is a Visual WebGui control that is used as some proxy between the ASP.NET control and the Visual WebGui application. The wrapper gets proxies to the public methods, properties and events of the control that is wrapped, exposing them to the developer at Visual WebGui server-side.

This article assumes that you are either using a Visual WebGui installation of VWG v6.3.9 or newer or VWG v6.4 Preview 2 or newer. Important changes have been made in those versions in the wrapping tool and underlying wrapper infrastructure. 

First Steps

Some ASP.NET controls require a System.Web.UI.ScripManager and a System.Web.UI.UpdatePanel, in order to work. Since these two components are located in the .NET3.5 System.Web.Extensions assembly, we will be working in MS Visual Studio 2008, with .NET3.5 and .NET3.5 assemblies of the controls themselves.

It may be a good practice for you to create your control wrappers in a separate library assembly and not on in the Visual WebGui Application project.
For simplicity, I will explain to you guys how to create these controls on the main application project.
To create a wrapper in a separate library assembly, the assembly references for this control need to be on the library and you need to register the control from the library assembly. If you are not familiar with these two steps, don’t worry. We will go over them in the next sections. 

Wrapping the ComponentOne C1Calendar Control

References

First of all we need to create a new Visual WebGui Application project.

Now we need to add the references relevant to this control into our project.
These are the assemblies that I found that are needed for this control:
C1.Web.UI.3
C1.Web.UI.Controls.3
System.Web.Extensions (.NET 3.5)

Wrapper Tool

In order to create a wrapper for this control Now we need to use the Visual WebGui Wrapping Tool. To launch the Wrapping Tool we need to right click on the project item in the solution explorer and select Add –> ASP.NET Control Wrapper.





A “Choose ASP.NET Control” dialog window will now open. You need to select the C1Calendar control from this list, name your wrapper “C1CalendarWrapper” in the TextBox below for example and click OK.
A new class is created in the project that is a proxy and place-holder for the C1Calendar control.

.

Fix Properties and Methods that Return Value Types

There are some properties and methods that return value types in the newly create wrapper class. These methods and properties get their values from the AspControlBoxBase.GetProperty Gizmox method, that retrieves the value from the C1Calendar itself.
When the GetProperty method gets a value that is not valid or does not get a value, it returns ‘null’ instead. Since value types cannot be null, an exception is thrown in both design-time and run-time when using this wrapper.
To fix this, we created an issue VWG-3161 that is now already completed in version VWG v6.3.10 and v6.4 Preview3.
As described in that issue, if we are using an earlier VWG version, we need to implement the following:

public object returnSafeValue<T>(object objValue)
{
    if (objValue == null)
    {
        return default(T);
    }

    return objValue;
}

Next we need to replace any such code (when the return value if that property or method is a value type):
return (ValueType)this.GetProperty(“PropertyName”);
with this kind of code:
return (ValueType)returnSafeValue<ValueType>(this.GetProperty(“PropertyName”));

Handle Warnings

There are properties and methods in the wrapper class that was just now created that have names that match exactly names of properties and methods of classes it derives from, like the Gizmox.WebGUI.Forms.Control.
You need to manually change the names of these properties and methods by adding a prefix like “wrp” to their names. For example change ‘BackColor’ to ‘WrpBackColor’.
You can find those properties and methods by building your project at this point and looking in the Warnings sections of the Error List tab.

 

Build again when you finish to make sure there are no more such warnings.

Create Form

Now we need a Visual WebGui Form to place this control into, so we can use it.
Let’s create a new Visual WebGui Form by right clicking on the project in the Solution Explorer and selecting  Add –> Form… .
An “Add new Item” dialog will open. Enter the name you want for the Form, for example “C1CalendarForm”.
The new Form is created and added to the project.

Since we want the C1Calendar on this Form, we need to open this Form in the Visual WebGui Form Designer and drag the C1CalendarWrapper control from the ToolBox into the Form.
To complete this stem, let’s save the Form and Build the project.

Get Control Markup

Next we need to create an ASP.NET Web User Control, so let’s right click on the project item in the Solution Explorer, Add –> New Item –> Web User Control, and name it for example “C1CalendarControl”.



The new Control is created and added to our project.
Now that we have our control let’s open it in designer and drag the ComponentOne C1Calendar from the ToolBox into the designer window.
If you cannot find it in the ToolBox, right click on the ToolBox, select “Choose Items” and select the C1Calendar control.

You will now see this control in designer, giving you options to make modifications to layout and data etc.
For this example we will just leave it as it is (don’t forget to save).

Now we need to open the markup-view on this control and copy it’s contents other than the first line, that defines the control itself. We need the ‘@ Register’ directive markup, and the entire cc1:c1calendar control markup.

 

Next, we need to open the C1CalendarForm.resx file in designer-view and open the “mobjC1CalendarWrapper.ControlCode” string item for editing.
Remove the contents of the this item other than the first line (“<%@ Control Language="C#"%>”) and paste the markup we copied from the C1CalendarControl.ascx control, after that line.

Markup modifications

Change the ID of the cc1:c1calendar in Markup to “hosted_control_id”.

Add this element right after the current ‘@ Register’ directive:
<%@ Register Assembly="System.Web.Extensions" Namespace="System.Web.UI" TagPrefix="asp" %>

Add a ScriptManager element before the cc1:c1calendar element:
<asp:ScriptManager id="SM1" runat="server" />

Place the cc1:c1calendar element inside a ContentTemplate contained in an UpdatePanel:
<asp:UpdatePanel id="UP1" runat="server" UpdateMode="Conditional"><ContentTemplate>
<cc1:c1calendar …
</cc1:c1calendar>
</ContentTemplate></asp:UpdatePanel>

Conclusion

At this point, our C1Calendar is wrapped and ready to be used.

 

You can now the styling and customizations you need to make the control look and behave the way you want it to.
This control would give you the same usability the ComponentOne C1Calendar would give you when used in pure ASP.NET, only this this time it would be contained inside your Visual WebGui application. 

Summary

We have gone through wrapping the ComponentOne C1Calendar control and set it up to be fully functional.
The C1Calendar control required a ScriptManager component, so we added a ScriptManager and an UpdatePanel to allow for Ajax communication of this control with the control’s server-side.
The C1Calendar control required some changes to be made to properties and methods that return value-types.

At this point we can interact with our wrapped control using the methods and properties of the wrapper that we created both in design-time and in run-time.

This article showed how to wrap the ComponentOne C1Calendar control in a few simple and quick steps.

Enjoy.

Download Files