How to Create a User Symbol That Acts as a Container

Eric Durocher — Wed, 30 Jul 2008 16:37:31 +0000

With ILOG Diagrammer for .NET, you can create user symbols very easily, and this is covered extensively in the user manual and this post, among others.

ILOG Diagrammer for .NET also provides several built-in container classes, for example the Canvas class, that is very useful to create composite graphic objects.

Something that you may need to do is to combine these two features, that is, create a user symbol that acts as a container. This is pretty easy to do, but there is no sample that shows it, so here we go. We will implement a very simple ContainerSymbol that looks like this:

The ContainerSymbol is a simple rectangular symbol with a title, and it can contain children (two rectangles in the picture above).

As usual, we will use Visual Studio to build our symbol. It is made of a DockPanel that contains a title and a nested Canvas:

Now, we need to add a bit of code to make sure that our symbol will accept children.

First, the symbol must have a property that will hold the collection of children.We will call this property SymbolChildren (not Children, because this is an existing property of the UserSymbol class):

        [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
        public Collection SymbolChildren
        {
            get { return canvas1.Objects; }
        }

As you can see the SymbolChildren property just returns the Objects property of the nested Canvas, so when a graphic object is added to the SymbolChildren collection, it will really be added to the nested Canvas. Note the DesignerSerializationVisibility attribute: it makes sure the collection’s contents will be serialized even though the property is read-only.

OK, now we can already add children to our symbol by writing code like this:

        containerSymbol.SymbolChildren.Add(new Rect(0, 0, 100, 100));

But we want our symbol to behave like a fully functional container, that is, we want to be able to drag-and-drop children into it when we use the Visual Studio designer. For this, let’s add this other piece of code:

        protected override GraphicContainer GetContainerForLogicalChildren()
        {
            return canvas1;
        }

This override tells the user symbol that it has a special element that will contain the “logical” children of the symbol, which means that the children will appear to be added to the symbol, whereas in fact they will be added to the nested Canvas.

Finally, one last piece of code is necessary to make sure that the children of the container symbol are correctly serialized in XML. For this, we need to define a custom designer for our symbol:

   [Designer(typeof(ParentSymbolDesigner))]
    public partial class ContainerSymbol : UserSymbol
    {

...

    public class ParentSymbolDesigner : UserSymbolDesigner
    {
        protected override PropertyDescriptor GetChildrenPropertyDescriptor()
        {
            return TypeDescriptor.GetProperties(Component)["SymbolChildren"];
        }
    }

The GetChildrenPropertyDescriptor virtual method tells ILOG Diagrammer for .NET which property to use to serialize the children of the container symbol.

We are done! Our container symbol acts as a basic container, you can add or remove children to it in the Visual Studio designer, select and move the children, etc.

Here is the full source code of the sample.

Creating Bezier Curves in an Ajax DiagramView (Part 2)

Patrick Ruzand — Fri, 20 Jun 2008 09:32:20 +0000

In the previous article, I have explained the fundations of the Ajax interaction framework of ILOG Diagrammer for .NET. It is now time to dive into the implementation details.

From the first article, we know an AjaxDiagramView interactor inherits from the System.Web.UI.ExtenderControl class. As such, it is composed of two parts: an ASP.NET server control and a JavaScript client control.

The server control

The ASP.NET server control is responsible for describing the client resources to the underlying ASP.NET framework (the script resources to deploy, the optional initialization tasks to perform on the client, etc.), and for handling the possible actions coming from the client control. In our case, the server control implementation handles the client action (i.e. create an ILOG.Diagrammer.Graphic.BezierCurve instance and add it to the view content) via an asynchronous callback. Let’s first begin with the implementation of the client resources description.

For this purpose, the ILOG.Diagrammer.Web.UI.ViewInteractor class defines the following methods:

ScriptBehaviorDescriptor CreateScriptBehaviorDescriptor(Control targetControl)
IEnumerable GetScriptReferences()

The CreateScriptBehaviorDescriptor method must be overriden to return a ScriptBehaviorDescriptor instance that specifies the name of the client-side class of the interactor (in other words the name of the JavaScript class).
The GetScriptReferences method returns the script resources needed by your client control. This is needed by ASP.NET to be able to automatically deploy the required client resources.

Here is a first implementation of the MakeBezierCurveInteractor class that illustrates the implementation of these methods :

public class MakeCurveInteractor : ViewInteractor {        

  protected override ScriptBehaviorDescriptor CreateScriptBehaviorDescriptor(Control targetControl) {
    return new ScriptBehaviorDescriptor("AjaxBezierSample.MakeCurveBehavior",
                                        targetControl.ClientID);
  }                

  protected override IEnumerable GetScriptReferences() {
    IEnumerable references = base.GetScriptReferences();
    List list = new List(references);
    list.Add(new ScriptReference("AjaxBezierSample.script.MakeCurveBehavior.js",
                                 Assembly.GetExecutingAssembly().FullName));
    return list;
  }

which means the client control implementation is the AjaxBezierSample.MakeCurveBehavior class defined in the MakeCurveBehavior.js file, packaged as an embedded resource in the application assembly (packaging a script resource in the assembly requires the .js file be built with the Embedded Resource build action, and the resource declared in the AssemblyInfo.cs).

The next step, and it completes the server control implementation, is to handle the action. As explained above, we made the choice to process the interaction via an asynchronous ASP.NET callback, which is possible because the ViewInteractor base class implements the ASP.NET 2.0 ICallbackEventHandler interface. Therefore, our custom interactor must override the ViewInteractor.RaiseCallBackEvent method that is called when a callback request is received by our control.

The implementation is quite straightforward: it first reads the curve definition points from the method parameter (passed by the client control as a JSON string), converts these points from the view coordinate system to the view graphic container coordinate system, then creates the corresponding Diagrammer for .NET graphic object (a BezierCurve instance) and finally adds it to the view graphic container.

Here is the code:

        protected override void RaiseCallbackEvent(string eventArgument) {
            ProcessRequest(eventArgument);
            base.RaiseCallbackEvent(eventArgument);
        }
        protected virtual void ProcessRequest(string eventArgument) {
            if (string.IsNullOrEmpty(eventArgument))
                return;
            DataContractJsonSerializer serializer = new DataContractJsonSerializer(typeof(BezierArg));
            BezierArg args = null;
            using (Stream input = new MemoryStream(Encoding.Unicode.GetBytes(eventArgument))) {
                args = serializer.ReadObject(input) as BezierArg;
            }
            if (args != null) {
                Point2D[] points = args.points;
                if (points.Length == 0)
                    return;
                Transform t = View.Transform.Inverse();
                t.TransformPoints(points);
                BezierCurve curve = new BezierCurve(points);
                IManageChildren container = View.Content as IManageChildren;
                if (container != null) {
                    container.AddChildren(new GraphicObject[] { curve });
                }
            }
        }

The server control implementation is done. It’s now time to wear our JavaScript developer suit for the client side control implementation. From now on, all class names refer to the Microsoft JavaScript Library.

The client control

Implementing the client part of a ViewInteractor consists on writing a JavaScript class inheriting from the ILOG.Diagrammer.Web.UI.ViewBehavior class which offers the basic services to communicate with the server control. In the Microsoft JavaScript world, writing a new class consists on :

defining the namespace
defining the class object
implementing the class methods via the class object prototype
registering the class in the class hierarchy

In terms of code, it means:

defining the name space:

Type.registerNamespace(‘AjaxBezierSample’);

This line of code creates a new namespace called ‘AjaxBezierSample’ and registers it in the Type object.

defining the class object:

AjaxBezierSample.MakeCurveBehavior = function(element) {
  …
  AjaxBezierSample.MakeCurveBehavior.initializeBase(this, [element]);
};

The namespace object being created, we define the MakeCurveBehavior class object (the constructor) and call the initializeBase() method to initialize the base class. Latter, we will add to the constructor the fields initialization code.

implementing the class methods via the class object prototype

AjaxBezierSample.MakeCurveBehavior.prototype = {
  initialize : function() {
    AjaxBezierSample.MakeCurveBehavior.callBaseMethod(this, ‘initialize’);
  },
  dispose : function() {
    AjaxBezierSample.MakeCurveBehavior.callBaseMethod(this, ‘dispose’);
  },
  …
}

The methods of the class are defined on the prototype following the prototype model. For more information on the prototype model, see the title=”Prototype model”>MSDN documentation. For the time being, we only need to call the initialize() and dispose() methods of the base class.

registering the class in the class hierarchy

AjaxBezierSample.MakeCurveBehavior.registerClass(‘AjaxBezierSample.MakeCurveBehavior’, ILOG.Diagrammer.Web.UI.ViewBehavior);

Finally, we register our new class in the class hierarchy, specifying its fully qualified name (that is the class name prefixed with the namespace) and the base class it inherits from. This skeleton is the minimum code required to fully define a new ViewBehavior subclass.

The last step is to eventually implement the code needed to create bezier curves.

Drawing Bezier curves in DHTML

As explained in the first part of this article, the interaction ghost of the bezier curves will be implemented either in VML or SVG depending on the browser. The ghost will be composed of three primitive objects:

a circle that represents the edited passage point.
two rectangles that represent the control points.

These primitives will be added to a parent container positionned in absolute above the image. To ease the primitives update, both the primitives and the container will have a corresponding class field (a reference to the corresponding node in the DOM).

The code below shows the updated constructor (with the primitive fields) and the DOM initialization :

AjaxBezierSample.MakeCurveBehavior = function(element) {
    this._ghostContainer = null;
    this._ptMarker = null;
    this._ctrl1 = null;
    this._ctrl2 = null;
    this._useVML = Sys.Browser.agent == Sys.Browser.InternetExplorer;
    this._curveCount = 0;
    this._svg  = null;
    ...
    AjaxBezierSample.MakeCurveBehavior.initializeBase(this, [element]);
};        

AjaxBezierSample.MakeCurveBehavior.prototype = {        

    initialize : function() {
        AjaxBezierSample.MakeCurveBehavior.callBaseMethod(this, 'initialize');
        ...
        this.initDOM();
    },
    initDOM : function() {
        this._ghostContainer = document.createElement("div");
        this.get_element().appendChild(this._ghostContainer);
        this._ghostContainer.style.zIndex = 3;
        this._ghostContainer.style.position = "absolute";
        this._ghostContainer.style.left="0px";
        this._ghostContainer.style.top="0px";
        this._ghostContainer.style.width="100%";
        this._ghostContainer.style.height="100%";
        if (!this._useVML) {
            this._svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
            this._ghostContainer.appendChild(this._svg);
        }
        var parentNode = this._useVML ? this._ghostContainer : this._svg;
        // passage point marker
        this._ptMarker = this.createMarker(parentNode);
        // control points markers
        this._ctrl1 = this.createControlPt(parentNode, 'ctrl1');
        this._ctrl2 = this.createControlPt(parentNode, 'ctrl2');
    },        

    createMarker : function(parentNode) {
        var marker = this._useVML ? this._createMarkerVML(parentNode) : this._createMarkerSVG(parentNode);
        return marker;
    },        

    _createMarkerVML : function(parentNode) {
        var marker = document.createElement("oval");
        parentNode.appendChild(marker);
        marker.id = "ptmarker";
        marker.style.behavior = "url(#default#VML)";
        marker.strokeweight = 1;
        marker.filled = 'true';
        marker.fillcolor = 'black';
        marker.style.position = "absolute";
        marker.style.width = "7px";
        marker.style.height = "7px";
        marker.style.display='none';
        return marker;
    },        

    _createMarkerSVG : function(parentNode) {
        var marker = document.createElementNS("http://www.w3.org/2000/svg", "circle");
        parentNode.appendChild(marker);
        marker.style.display = 'none';
        marker.setAttributeNS(null, 'id', "ptmarker");
        marker.setAttributeNS(null, 'r', 3);
        marker.setAttributeNS(null, "fill", 'black');
        marker.setAttributeNS(null, "stroke", "none");
        return marker;
    },        

    createControlPt : function(parentNode, id) {
        var ctrl = this._useVML ? this._createControlVML(parentNode, id) : this._createControlSVG(parentNode, id);
        return ctrl;
    },        

    _createControlVML : function(parentNode, id) {
        var ctrl = document.createElement("rect");
        parentNode.appendChild(ctrl);
        ctrl.id = id;
        ctrl.style.behavior = "url(#default#VML)";
        ctrl.strokeweight = 1;
        ctrl.filled = 'false';
        ctrl.style.position = 'absolute';
        ctrl.style.width = '11px';
        ctrl.style.height = '11px';
        ctrl.style.display='none';
        return ctrl;
    },        

    _createControlSVG : function(parentNode, id) {
        var ctrl = document.createElementNS("http://www.w3.org/2000/svg", "rect");
        parentNode.appendChild(ctrl);
        ctrl.id = id;
        ctrl.setAttributeNS(null, "width", "11px");
        ctrl.setAttributeNS(null, "height", "11px");
        ctrl.setAttributeNS(null, "stroke-width", 1);
        ctrl.setAttributeNS(null, "fill", "none");
        ctrl.setAttributeNS(null, "stroke", "black");
        ctrl.style.display='none';
        return ctrl;
    },

Handling interactions

The interaction process follows the following sequences:

When the left mouse button is pressed, a new passage point and two control points are created.
When the mouse is dragged, the position of the control points is adjusted accordingly.
On a double-click, the curve is validated and a request is sent to the server with the curve points.
When the ESC key is pressed, the interaction is cancelled.

Therefore, the interactor has to listen the mousedown, mousemove, mouseup and keydown events. For this purpose, we define four handlers that will be wired/unwired depending on the value of the active property.

The code below shows the handler initialization and the required methods to wire/unwire the handlers on a active property change:

AjaxBezierSample.MakeCurveBehavior = function(element) {        

    this._mouseDownHandler = null;
    this._mouseMoveHandler = null;
    this._mouseUpHandler = null;
    this._keyDownHandler = null;
    this._propertyChangedHandler = null;
    this._startPoint = null;
    this._points = null;
    this._size = 0;
    ...        

    AjaxBezierSample.MakeCurveBehavior.initializeBase(this, [element]);
};
AjaxBezierSample.MakeCurveBehavior.prototype = {        

    initialize : function() {
        ///