Creating Bezier curves in an Ajax DiagramView (Part 1)
In this series of two articles, I am going to show how to create a new interactor for the ILOG Diagrammer for .NET 1.5 AjaxDiagramView web control. To illustrate this, we will write an interactor to be able to create Bezier curves within the browser. I will first introduce the concepts involved in the Ajax interactions implementation (in the part 1) and then explain the implementation following a step-by-step approach. The latter will be the purpose of the second part.
ILOG Diagrammer for .NET 1.5 supports Ajax editing capabilities by means of a set of predefined interaction tools (called interactor) and provides an extensible framework to implement your own interactor. The interactor framework is based on Microsoft ASP.NET AJAX, the Microsoft Ajax extension which is now part of the .NET framework since the 3.5 release. This new extension introduces new ASP.NET classes that allow to easily attach client-side behaviors (implemented in JavaScript) to a web control. Such client-side extensions of a web control are called Extender Control and described by the System.Web.UI.ExtenderControl class (from the System.Web.Extensions dll).
The purpose of this abstract class is to “enable you to programmatically add AJAX functionality to an ASP.NET server control.” (from the MSDN documentation). Basically, this class which inherits from the System.Web.UI.Control class defines new methods whose purpose is to register the required JavaScript resources to be deployed on the client. It also provides a description of the client-side class and the possible initialization tasks (the purpose of the GetScriptDescriptors() method).
To implement the client-side control of an ExtenderControl, the ASP.NET AJAX extension (and the .NET Framework 3.5) provides a very rich JavaScript class hierarchy by means of the Microsoft Ajax Library. From this class hierarchy, the Sys.UI.Behavior class is the base class for ExtenderControl client implementations.
So, how does all this work in ILOG Diagrammer for .NET ? In fact, interactors are implemented as Extender controls (they inherits from System.Web.UI.ExtenderControl) via the ILOG.Diagrammer.Web.UI.ViewInteractor class. In addition to implementing the ExtenderControl abstract class, this class provides facilities to process the interaction on the server either via a postback (it implements IPostBackEventHandler) or an async callback (it implements also ICallbackEventHandler).
Now the foundations are cristal-clear :-), let’s focus on our interactor. As initially mentioned, the goal is to be able to create Bezier curves within the browser. That means the user will define the passage points and control points by clicking within the AjaxDiagramView and once the interaction ends, the points will be sent to the server so that our interactor server implementation processes the data and creates a new ILOG.Diagrammer.Graphic.Curve objects and adds it to the view graphic container. Also, to reduce flickering effects, the request will be performed via an async callback.
Finally, one last point before we start coding. To improve the user experience, we want to draw a visual feedback of the curve being edited. So how to render bezier curves in a browser ? The idea is to use a vector graphic rendering engine from the browser. There are several solutions for that but unfortunately none are cross-browser so we will have to make browser-specific implementations. Under IE, we will use inline VML which is natively supported by IE. Under Firefox, we will use inline SVG. Now we have our inline vector graphic APIs for the browsers, we are ready to start the implementation.
Note: the second article can be found here.
