Ink on the Web (Cont.) 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
inkO.DefaultDrawingAttributes.Color=Color.Red
End Sub
On the Web page, such as in Figure 3, 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 3: 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()
{
inkForm.MyInkControl.ChangeInktoRed;
}
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. 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 2 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. 
Figure 2: 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. 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
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. 
Figure 4: This 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.To test out how this works, rebuild the control and then re-add the resulting dll 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. |