Browse DevX
Sign up for e-mail newsletters from DevX


Using Ink on the Web : Page 2

One of the more interesting and challenging places to use Ink is in Web applications. But how can this technology, which is dependent on the physical relationship between the stylus, the digitizer, and the operating system, work over the Internet?

Why a Custom Control?
You may be wondering why you are building a custom control rather than using the InkEdit or InkPicture controls that are in the Tablet PC SDK. This is an issue related to embedding the Windows Forms control and not specific to the Ink. The control needs to be served up by the Web application, which means the server must have access to it. If you use the InkEdit or InkPicture controls, those are managed code and live on the client computer. Your Web application will not be able to find them. The Web application needs to have local access to the control on the server. By creating a custom control and deploying it along with the Web application, this is possible.

Once you have compiled this project, you can move over to ASP.NET for the Web site.

Just a Regular Web Site with a Twist
The next step is to create a simple page that contains the ink-enabled control. Add a new Web project to the solution. Once the project has been created, you need to add the dll that was created when you compiled the Windows Form control. Although you may be used to adding dlls to projects as a reference, this time, you add this dll as a file just the way you would do with an image, for example. This is an important concept to understand, because helps you to understand how all of the puzzle pieces work together. And as you know from your programming experience, this kind of knowledge is invaluable when you find yourself in a troubleshooting mode.

After adding the dll, which you should find in the bin directory of the control's project folder, the control is embedded on the Web page with HTML tags. Remember that it is not a Web server control, but will be downloaded to the client's computer. Your Web page merely needs to know how to find it, but the .NET Framework on the client's computer does the actual interaction with it. The key to embedding a control on the page is to use the <object> tag with a classid parameter containing a pointer to the assembly file, a number (#) sign, a separator, and a pointer to the fully qualified class name of the control.

The sample control's project was named CoDe_InkControl and the resulting assembly is CoDe_InkControl.dll. If you look at the code above, you will see that the class name is InkWebControl and is contained in a namespace called InkontheWeb. The last parameter that <object> requires is VIEWASTEXT. Therefore, the resulting HTML tag, which also contains an ID and some dimensions, looks like this:

   <object id="MyInkControl" height="100" width="100"
The control cannot be dragged and dropped onto the design surface of the Web page. In fact, you don't have access to the control, only to the dll. You must hand-code the HTML. Once you have added the HTML as above, you will see the control on the design surface. I generally start out with the height and width values equal to 100 and then I can move and resize the control on the design surface as needed.

If you have embedded the control properly, you will see the image icon in the control on the design surface, as shown in Figure 1.

Figure 1. Embedded Windows Form: A Windows Form control that is correctly embedded into your Web page should look something like this in the Design view.
If you have the object tag entered incorrectly, it is possible that when you go from the design surface to the HTML, you will see a data parameter with a string of text. You can delete that parameter and its value.

At this point, you should be able to run the Web project and draw in the area of the control on the Web page. If the project runs but you cannot draw on the control, the most likely problem is within the object tag. Check the spelling of your control information and be sure that you are using the fully qualified name of the class. This means the assembly name, any namespace names, and the class name. See the above sample for a reference.

Add Format and Functionality
So, now you can draw on a Web page, but there's not really very much that you can do with this. You only have a black pen to play with and when the page is gone, so is your Ink. Let's add some more functionality to this inkable page.

This is a great time to remember that the ink-enabled control is getting downloaded to the client computer. Because of this, it is impossible to interact with the control from the Web server. Normally, you put all kinds of functionality in the code behind the Web page. But code behind is server-side code. The control is not on the server. Any interaction you need to do between the page and the control must be done in client-side code. And because client-side scripting can be extremely cumbersome, it is advantageous to build as much of the control's functionality as you can into the control itself.

Let's say that you wanted to allow your users to use additional pen colors, erase their Ink using the stroke erase method, and also move Ink using the lasso tool. All of this functionality will be part of the control itself. You have two ways to expose it to the end user interacting with the Web page: create public methods inside of the control that are called by the client side script and create internal functions that are completely handled by the control.

As an example of the first approach, you could have a method in the control to change the pen's Ink color to red.

   Public Sub ChangeInktoRed
   End Sub
On the Web page, such as in Figure 2, you may have a button to allow the user to change the pen color to red. The onclick method of the button calls a client-side function called RedInk.

Figure 2. A Simple Example: This Web page contains an inkable Windows Forms control with no additional user interface built in. The Web page itself contains a button whose onclick event interacts with public methods in the control.
   <INPUT onclick="RedInk()" type="button"
   value="Red" >
The client-side RedInk function, here written with JavaScript, calls into the control's exposed method. Note that in the sample Web page, the control, which was given the ID of MyInkControl, is inside a <form> tag with an ID of inkForm.

   function RedInk()      
Everything here is case-sensitive-a demand that could have you scratching your head for quite some time if you haven't met it.

If you are designing a Web page where the Web UI elements are an important part of the design, you will most likely want to use the above method. My recommendation is to do as much of the work as you can inside the control and keep the JavaScript interaction minimal. The reason for this recommendation is three-fold.

The first is that if you have problems with the control, you could easily drop the control into a Windows Form to debug it. It will be more useful if the functionality you need to test and debug is in the control. The second reason is that client-side coding is cumbersome and difficult to debug. The third is that any end user can see your client-side code. You can hide your intellectual property if you have it compiled into your dll. There are fewer people who know how to find the dll and how to get at the code that is inside.

Figure 3. Docked Panel: This control in Design view shows a panel (Panel 1) that is docked to the top of the control and a panel (Panel 2) with its Dock property set to fill.
The other way to enable users to interact with your control is to build additional UI elements directly into the control. The button for turning the pen color to red can be part of the control itself. Rather than having a public method to change the Ink color, this can be a private method or part of an event handler.

Remember that the current example control has its entire surface Ink enabled. If you would like to have additional controls, you also want to have a defined area, such as a panel control or a picture control that has the Ink overlay attached to it.

Let's go back to the custom control and make some changes. Drop two panel controls onto the control changing the dock parameter of the first to top and of the second to fill. Figure 3 shows what the control should look like with the panels. Drop a button onto the top panel and then resize it to 24 x 24. Next, change the background color to red. This will be an obvious visual element for users. I didn't use a toolbar because you cannot affect the background color of the toolbar buttons. In the Load method, modify the InkOverlay instantiation to attach the InkOverlay to the panel.

   Private Sub MyInkControl_Load _
   (ByVal sender As Object, ByVal e As _
   System.EventArgs) Handles MyBase.Load
     inkO = New Microsoft.Ink.InkOverlay(InkPanel)
     inkO.Enabled = True
   End Sub
Figure 4. Inkable Web Page in Action: The red button that lets the user select red Ink is part of the Windows Form control. The control is entirely responsible for the functionality, which means that nothing extra is required in the Web page.
Now add a click handler to the red button and move the line of code that changes the Ink color into this method.

   Private Sub RedPen_Click(ByVal sender As _
   System.Object, ByVal e As System.EventArgs) _
   Handles RedPen.Click
     inkO.DefaultDrawingAttributes.Color = Color.Red
   End Sub
This is a simple take on this method. A more realistic control might have a variety of colored buttons to choose from and possibly one event handler written to accommodate changing all of the colors. This is no different than you would do for any other Tablet PC application that you write for a Windows application, and there are many examples of this type of coding elsewhere in this issue.

Figure 4 shows the inkable Web page in action. Note that I put borders around the two panels so that I can see where my inkable region is on the Web page.

To test out how this works, rebuild the control and then re-add the resulting dll file to the Web application. You don't have to do anything to the Web page because the Ink functionality is completely contained in the control.

Thanks for your registration, follow us on our social networks to keep up-to-date