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.

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.

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.

Next we will add a reference in our application to the control library project this will allow us to use the control in design time and add it to our form.
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.

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

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.

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.

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

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

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.
 

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.

image

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