Design Custom Controls With the New Point & Click Web Design Tool in Visual WebGUI 6.4

In this how-to we are going to learn how to create a Visual WebGui custom control with the use of the new visual Control & Theme Designer introduced in version 6.4.

This “How to” will be divided to two parts. In the first part we will create the programmatic part of the water mark text box control and in the second part we will add the design time of the control.

The WatermarkTextBox is a plain TextBox control, with one added feature of showing a default text when no content was entered or when the content was deleted.

We will start by creating a new Visual WebGui (VWG) application.
Open Visual Studio and create a new project and select a Visual WebGui application this application will display our new control.

Next add a second project that will hold the new control. Select a Visual WebGui library project template.

Our control will inherit the regular TextBox and we will add the water mark message to it. Let’s right click on the control library project and select the “Add inherited control” option. in the filter text box start entering the word “TextBox” until the filter narrows down the options and you can select the TextBox control.

And this is our water mark textbox control.

namespace MyControls
{
    public partial class WaterMarkTextBox : TextBox
    {
        public WaterMarkTextBox()

        {

        }       

    }
}

In the Constructor we’ll set the CustomStyle to “Watermark”. This property sets the style that the control will use to draw itself. We will see later how we use this in the XSLT.

public WatermarkTextBox()
{
    this.CustomStyle = "Watermark";
}

Next let’s add a property that will hold the message that will appear in the water mark.

private string mstrMessage;
public string Message
{
    get {
     return mstrMessage;
   }
    
   set
    {
        if (mstrMessage != value)
        {
            mstrMessage = value;
            this.Update();
        }
    }
}

Now we will register our property as an attribute this way we will have access to the value in run time. Override the Render Attributes function and add a message attribute. You will also have to add “using Gizmox.WebGUI.Common.Interfaces;” to the class.

protected override void RenderAttributes(IContext context, IAttributeWriter writer)
{
    base.RenderAttributes(context, writer);
    writer.WriteAttributeString("Message", this.Message);
}

Right click on the project and select the add reference option. Once you do that you can open the Form1 in design mode and use the control.

And this concludes the part of creating a custom control.

The second part will be using the Control designer to design the look of the control and add java scripts and XSLT files to add client side abilities.

Let’s add a new class to our control library called WaterMarkTextBoxSkin this class will inherit from the TextBoxSkin class. It will give our new control (that inherits from text box) all the text box skin resources and we will add and override abilities in it.

using Gizmox.WebGUI.Forms.Skins;
namespace MyControls
{
    class WaterMarkTextBoxSkin : TextBoxSkin
    {

    }
}

Before we start creating the control skin let’s add in the control an attribute that will reference the control skin.

[Gizmox.WebGUI.Forms.Skins.Skin(typeof(MyControls.WatermarkTextBoxSkin)), Serializable()]

public class WatermarkTextBox : TextBox,
{

Now open WaterMarkTextBoxSkin in design mode.
Let’s add a new java script file. Select in the resource type scripts and select add a new resource. A new file will be created as part of the skin with a default name of the control and the associated file extension.

Set the new resource properties. This Resource is for our DHTML presentation layer so we will set the presentation to Browser, And the presentation role to Browser code so it will be add to the kernel that is downloaded to the client.

Add also a new XSLT file named WatermarkTextBox.xslt.
Set the resource properties. The presentation role is set to browser templates so it will be gathered to the general control templates.

Let’s open the WatermarkTextBox.js file and add 2 methods Focus,Blur. These methods will be fired when the control gets focus or loses focuse and will show or hide the watermark message. I’ve posted the code of the functions below with our naming convention.

registry
avatar
function WatermarkTextBox_Focus(strGuid,objInput,objWindow)
{
    if(Web_IsAttribute(objInput,"vwgiswatermark","1",true))
    {
        objInput.value = "";
        objInput.setAttribute("vwgiswatermark","0");
    }
}
function WatermarkTextBox_Blur(strGuid,objInput,objWindow)
{
    if(objInput.value=="")
    {
        objInput.value = Data_GetAttribute(strGuid,"Message","");
        objInput.setAttribute("vwgiswatermark","1");
        TextBox_Change(strGuid,"",objWindow);
    }
    else
    {
        TextBox_Change(strGuid,objInput.value,objWindow);
    }
}

Now open the WatermarkTextBox.xslt file and create the xslt template that will draw the text box and add the water mark ability. I’ve copied the template from the text box xslt and made a few changes. I’ve posted the entire xslt here.

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:WC="wgcontrols">
  <xsl:template match="WC:Tags.TextBox[@Attr.CustomStyle='Watermark']" mode="modContent">
    <xsl:attribute name="Class">TextBox-Control</xsl:attribute>
    <INPUT type="text"
          onkeydown="mobjApp.TextBox_KeyPress('{@Id}','{@Attr.CharacterValidationMask}','{@Attr.CharacterValidationExpression}',window,this,event)"
          onblur="mobjApp.WatermarkTextBox_Blur('{@Id}',this,window)"
          onfocus="mobjApp.WatermarkTextBox_Focus('{@Id}',this,window)"
      dir="{$dir}" tabindex="{@Attr.TabIndex}" class="TextBox-Input Common-FontData" id="TRG_{@Id}" maxlength="{@Attr.MaxLength}" value="{@Attr.Value}" vwgiswatermark="0" vwgeditable="1" vwgfocus="1">
      <xsl:if test="not(@Value)">
        <xsl:attribute name="value">
          <xsl:value-of select="@Message"/>
        </xsl:attribute>
        <xsl:attribute name="vwgiswatermark">1</xsl:attribute>
      </xsl:if>
      <xsl:call-template name="tplSetDisabled" />
      <xsl:call-template name="tplTextBoxStyle" />
      <xsl:if test="@Attr.ReadOnly='1'">
        <xsl:attribute name="readonly">true</xsl:attribute>
      </xsl:if>
      <xsl:call-template name="tplAttachTextBoxEvents" />
    </INPUT>
  </xsl:template>
</xsl:stylesheet>

The xslt is based on the xslt from the textbox class (a few things where removed because they are not needed for the example) but let me point you to the main changes.

The first <xsl:template match="WC:Tags.TextBox[@Attr.CustomStyle='Watermark']" mode="modContent">

I’ve set the template to work only when the custom style of the control is set to Watermark and we’ve set the custom style of our control to be Watermark in the constructor as you recall.

The secound onblur="mobjApp.WatermarkTextBox_Blur('{@Id}',this,window)"
                   onfocus="mobjApp.WatermarkTextBox_Focus('{@Id}',this,window)"

I’ve set the event’s onblur,onfocus to use the new functions that we added in the WatermarkTextBox.js file.

Our control is ready and now we need to add its skin to our theme. To do so we need to create a new theme that will inherit the default VWG theme (But it can inherit from any costume theme) and add to it our new control.

The easiest way to do so is to add a new class to our application because it already has a reference to Gizmox.WebGUI.Forms assembly and to our control library assembly and our theme class will group all the skins in those assembles to one theme. So right click on the application and add a new class named MyTheme that will inherit from Gizmox.WebGUI.Forms.Skins.Theme.

namespace WaterMarkDemoApp
{
    public class MyTheme : Theme
    {
    }
}

Lets open My Theme in design and see our watermark textbox control skin in it.

Now let’s set our theme as the selected theme. Right click on the project and select the project’s properties option. Open the registration tab and click on the add button in the Themes section and select MyTheme. After adding our theme to the list of themes in the project use the check box next to it to set it as the current theme in the application.

The last thing we need to do is to register the control in our application.and In the controls section in the registration tab click on the “Add” button. In the dialog that opens filter the controls by typing the namespace or the control name and select our new watermark control.

Now that our control is registered we can run the application set form1 as the starting form of the application. And run the application.

 In this “How to” we’ve seen how to create our own Visual WebGui custom control by using the new Visual WebGui Theme & Control designer.

-- Eyal Albert @ Eyal.Albert (at) Gizmox.com