The application first asks you to login using your Google Analytics  email/password (the login screen uses the new AutoCompleteBox and PasswordBox controls from the Silverlight Toolkit). Then, you can select the account to use and the web site to analyze. You can also choose the start and end dates of the report, and filter the web pages according to a minimum number of page views. When you click Load, the application sends HTTP requests to Google Analytics and receives an XML report containing the traffic data for your web site.

Then, the application displays a diagram that shows the hierarchy of your web pages. The size of the nodes reflects the number of page views, so you can see what areas of your site are most visited. Like in the Org Chart,the diagram is arranged by a tree layout algorithm, and you can zoom and pan, select a page to view its details, expand/collapse branches, etc.

Have fun!

START THE DEMO

This new sample uses the same Diagram control as the one used in this post, but it uses a tree layout algorithm instead of a hierarchical layout. The Diagram control offers several other layout algorithms, and each algorithm has tons of options to fit a large range of application.

Some of the things to note in this demo:

• Each branch of the tree can be collapsed and re-expanded by double-clicking the parent node (you can also use the tree view on the left to collapse/expand).
• When you zoom in (using the mouse wheel for example), more details appear in each node, and these details disappear again when you zoom out. This gives a clearer view at small zoom levels.

To run the demo you will need the Silverlight2 beta 2 plugin.

UPDATE: the demo has been updated to use the final release of Silverlight 2.

START THE DEMO

Overview

START THE DEMO 

Overview

The meat of the sample is the DecoratedLink class. It is a subclass of Link with a new Decorations property that contains a collection of LinkDecoration objects. Each LinkDecoration has an Image property (the icon to display), a Position property (Start, Middle or End) and an Offset property that shifts the icon by the specified number of pixels along the link path.

Here is the source code: in C#, and in Visual Basic.

Feel free to use (and adapt) the DecoratedLink class if you need this functionality in your applications.

In part 1 and part 2 of this series, we explained some common techniques for creating complex ILOG Diagrammer for .NET user symbols, and we used a UMLType symbol as an example.

This post will focus on the description of the List user symbol that is used to display the attributes and operations of the UML type. This List symbol is pretty general, and could be reused in other situations.

You can look at the same source code as in the previous post to follow the explanations, since the List symbol was already there.

Here are the graphic elements of the List symbol:

The symbol is made of a DockPanel that contains a StackPanel (which will in turn contain the list items), and three groups of graphic objects that make up a scrollbar (the ‘up’ button, the thumb and the ‘down’ button). We do not want to use a predefined ILOG Diagrammer for .NET VScrollBar object here because it is a little too big for including it in our UMLType symbol.

Let’s look at the code to see how the List symbol works. First, we need a property to add items to the list:

        [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
        public Collection<GraphicObject> Items
        {
            get
            {
                return stacker.Objects;
            }
        }

The Items property just returns the Objects property of the nested StackPanel, so the items of the list will be added directly to the stacker. Note the DesignerSerializationVisibility attribute that makes sure the items will be serialized even though the collection property itself is read-only.

Now, we want our list to be scrollable (vertically only to keep it simple). For this, we add another property that will define the scroll position:

        [DefaultValue(0)]
        public int ScrollPosition
        {
            get
            {
                return scrollPosition;
            }
            set
            {
                if (value != scrollPosition)
                {
                    scrollPosition = value;
                    InvalidateLayout();
                }
            }
        }

The ScrollPosition is an integer, as it specifies a number of items (not a position in pixels): this is simpler since we always want to scroll one whole item at a time.

As you can see, the ScrollPosition does not do much by itself, it just sets an internal member variable to the specified value and calls InvalidateLayout(). The idea is to use the built-in layout mechanism of Diagrammer for .NET to really do the scrolling. The InvalidateLayout() call tells Diagrammer for .NET to call the DoLayout() method of our symbol just before the symbol is next painted on the screen. This makes sure that the scrolling logic will not be executed several times unnecessarily.The DoLayout() method is overridden as follows:

        protected override void DoLayout()
        {
            dockPanel1.SuspendLayout();
            Rectangle2D bounds = new Rectangle2D(0, 0, Rectangle.Width, dockPanel1.Height);
            stacker.Bounds = bounds;
            stacker.PerformLayout();
            if (Items.Count != 0)
            {
                int pos = scrollPosition;
                if (pos >= Items.Count)
                    pos = Items.Count - 1;
                if (pos < 0)
                    pos = 0;
                bounds.Y = -Items[pos].Y;
                stacker.Bounds = bounds;
            }
            dockPanel1.ResumeLayout(true);
            UpdateArrows();
        }

What we do here is to move and resize the StackPanel that contains the items according to the ScrollPosition property and to the size of the List symbol. Basically, the top of the stacker is shifted vertically so that the item whose index is ScrollPosition is just at the top of the list. Note the SuspendLayout()/ResumeLayout() calls on the DockPanel that make sure that the parent’s layout is re-computed only once during this process. Finally, a method called UpdateArrows() is called: it enables or disables the up/down arrows according to the scroll position.

Let’s talks about the scrollbar now. The idea is simple: the ‘up’ bottom will decrease the ScrollPosition by 1, the ‘down’ button will increase it, and the thumb will modify the ScrollPosition proportionally to the move.If you look at the code,you will see that it is actually more complex than that:

•  We added timers so that, when you keep the left mouse button pressed in the ‘up’ or ‘down’ arrows, the list continues to scroll.
• We must ‘capture’ the mouse to make sure that, when we click in the thumb for instance, the mouse events will continue to move the thumb even if the mouse is not over it any more.

Just a final word: as it is, the List symbol is good enough as an element of the UMLType symbol, but it would need a little more polishing before it can be used as a standalone, general list object. In particular, it should behave as a container when it is used in the Visual Studio designer: see this other post that explains how to do this.

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<GraphicObject> 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.

Note: this article requires the ILOG Diagrammer for .NET Patch 14 available on the ILOG Diagrammer for .NET support site.

What are Smart Tags

In short, Smart Tags are shortcuts for PropertySheet items accessible from the Visual Studio Design surface and specific to the current selected item. They are natively supported in the Visual Studio WinForms designer through the little arrow icon located at the top-right corner of the current selected object. Clicking on this icon pops up a menu (the Smart Tags panel) populated with items (the Smart Tags items). These items expose a reduced set of design-time configuration entries like properties or verbs (a verb describes a specific action to perform accessible from the PropertySheet). The following image shows the ListBox Smart Tags panel :

In Visual Studio, Smart Tags are exposed by means of DesignerActionItem instances. A DesignerActionItem defines the action to perform when the item is activated. It can be a simple property setter like what the Property Sheet provides, or a more advanced action handled through a method invocation. DesignerActionItem’s are accessible from the component’s ComponentDesigner through its DesignerActionList. When a component is selected, the Design environment asks the component designer for its DesignerActionList and populates the Smart Tags panel with the DesignerActionItem’s.

Smart Tags in ILOG Diagrammer for .NET

ILOG Diagrammer for .NET extends the Smart Tags support to GraphicObject instances, which means that you can define Smart Tags the same way you do in a WinForms custom control. For example, the following pictures shows the Smart Tags items of a ClosedCurve :

To illustrate the article, we will use the UMLType user symbol described in the “Diagrammer Tips and Tricks” series and the following VS2008 Project.

As for a WinForms control, adding support for Smart Tags to an ILOG Diagrammer for .NET UserSymbol first requires a ComponentDesigner associated with the UserSymbol. For GraphicObject instances, the ILOG Diagrammer for .NET framework provides the GraphicObjectDesigner class that provides a set of services for GraphicObject design-time support. It is the base class we inherit from to implement our UMLType designer.

We then need to define the action items we want to add to the Smart Tag panel. For the UMLType user symbol, the TypeName, Attributes and Operations properties are good candidates. To show the different kind of possible action items, the TypeName property (which is of type String) will be exposed in the Smart Tags panel as a standard property in the same way it is exposed in a Property Sheet (that is as a description-textbox pair). The two others (which are specialized Collection) will be exposed as Verbs, which on the UI side are similar to hyperlinks that perform some actions (in our case, it pops up the Collection editor).

In term of implementation, it translates into the following steps :

• subclass DesignerActionList
• override the GetSortedActionItems() method to populate the list with the action items.
• handles the actions corresponding to the action items.
• Subclass GraphicObjectDesigner
• override the CreateActionList method to return an instance of the DesignerActionList subclass.

Implementing the DesignerActionList

The purpose of a DesignerActionList is to provide a list of Smart Tags items to the user symbol designer and to handle the action defined by the items. Populating the list of Smart Tags items is the purpose of the DesignerActionList.GetSortedActionItems() method which should be overriden to return the items that apply to the component. Let’s start with the TypeName property we want to expose since it is the simplest Smart Tags item type.

A property Smart Tags item is defined by the DesignerActionPropertyItem class in the System.ComponentModel.Design namespace. This class easily allows to expose a property in the Smart Tags panel so that it can be edited in-place. The constructor signature is defined as:

public DesignerActionPropertyItem(
    string memberName,
    string displayName,
    string category,
    string description)

The most important parameter is the memberName argument, which refers to the associated property of the DesignerActionList subclass. It means that the UMLType TypeName property must be duplicated on the DesignerActionList as a facade to the underlying UMLType component. Here is a first draft of the UMLTypeActionList implementation:

    class UMLTypeActionList : DesignerActionList {
        public UMLTypeActionList(IComponent component)
            : base(component) {
        }          

        public string TypeName {
            get { return ((UMLType)Component).TypeName; }
            set { UMLTypeDesigner.SetProperty(GetService(typeof(IDesignerHost)) as IDesignerHost,
                                              Component,
                                              value,
                                              "TypeName",
                                              "The name of the UML type.");
            }
        }          

        public override DesignerActionItemCollection GetSortedActionItems() {
            DesignerActionItemCollection items = new DesignerActionItemCollection();
            // The "TypeName" property
            items.Add(new DesignerActionPropertyItem("TypeName",
                                                     "Type name",
                                                     "UML",
                                                     "The name of the UML type."));
            return items;
        }
    }

In the code above, the TypeName property setter invokes the UMLTypeDesigner.SetProperty method, which is a convenient method allowing to perform an undoable property setting.

In order to be able to test our action list implementation, we need to implement the UMLType designer and associate it with the UMLType component so that the Design-time API supports it. As mentioned above, the UMLType designer inherits from the GraphicObjectDesigner class and in this simple use case, the only method we need to override is the CreateActionList() factory method that returns an instance of the UMLTypeActionList class. Here is the implementation:

    public class UMLTypeDesigner : GraphicObjectDesigner {
        protected override System.ComponentModel.Design.DesignerActionList CreateActionList() {
            return new UMLTypeActionList(this.Component);
        }
    }

Finally, the last step is to associate this designer class to the UMLType class by means of the DesignerAttribute class attribute:

    [Designer(typeof(UMLTypeDesigner), typeof(IDesigner))]
    public partial class UMLType : UserSymbol
    {
      ...
    }

Running the sample at this stage gives the following result (after having added our assembly to the Visual Studio Toolbox while in diagram editing mode) :

Ok. But what about use cases where you need more than just editing a property value ? For example, you may need to define complex actions like defining a data binding-like wizard-driven process that can be started from the Smart Tags panel. To address these use cases, the design-time API provides the DesignerActionMethodItem class which instead of relying on a property invokes a specified method that will handle the action. This is what we are going to use for the Operations and Attributes UMLType members. Instead of being exposed as a Property action item, they will be displayed as an “HyperLink”. When clicked, a modal dialog displaying the associated UITypeEditor (here the standard collection editor) will be shown.

Invoking the UITypeEditor from a Smart Tags item.

In the WinForms design-time API documentation, a UITypeEditor is defined as an editor “that can provide a user interface for representing and editing the values of objects of the supported data types”. In the sample we are writing, we will use the UITypeEditor associated with the Operations and Attributes properties and invoke its EditValue() method to edit the object’s value. Typical UITypeEditor implementations are meant to work with a PropertyGrid component, and as such are (in most cases) expecting an IWindowsFormsEditorService, as explains the Microsoft documentation (”This service is typically used to display a form from the EditValue method of a UITypeEditor”). Since a IWindowsFormsEditorService instance is available only from the PropertyGrid control, we have to write our own implementation. Let’s name it EditorService, and for convenient reasons, it will also implements the ITypeDescriptorContext and the ServiceProvider interfaces since the UITypeEditor.EditValue method expects such services.

As previously mentioned, the corresponding Attributes or Operations DesignerActionMethodItem’s should display a modal dialog holding the associated UITypeEditor (the CollectionEditor in this case). For this purpose, our IWindowsFormsEditorService implementation (the EditorService class) must implement the ShowDialog(Form dialog) method to basically invoke the Form.ShowDialog method on the dialog parameter. This method allows to specify the dialog owner via the owner’s Win32 HWND. In our case, the dialog owner to specify is simply the Smart Tags window that is exposed in the ILOG Diagrammer for .NET library by means of the ILOG.Diagrammer.Design.IDropDownOwner interface (introduced in patch 14). This interface is implemented by the DesignerHost RootComponent’s designer and represents a possible candidate for dialog ownership.

While it may appear quite complex, the following piece of code will clear up everything:

        DialogResult IWindowsFormsEditorService.ShowDialog(Form dialog) {
            IDesignerHost host =
              (IDesignerHost)((IServiceProvider)this).GetService(typeof(IDesignerHost));
            IDropDownOwner rootDesigner = null;
            if (host != null)
                rootDesigner = host.GetDesigner(host.RootComponent) as IDropDownOwner;
            if (rootDesigner == null) {
                IUIService srv =
                  (IUIService)((IServiceProvider)this).GetService(typeof(IUIService));
                if (srv != null)
                    return srv.ShowDialog(dialog);
            }
            if (rootDesigner != null) {
                IWin32Window owner = rootDesigner.DropDownOwner;
                if (owner != null)
                    return dialog.ShowDialog(owner);
            }
            return dialog.ShowDialog(_component as IWin32Window);
        }

The implementation first retrieves the IDesignerHost, then tries to get the RootComponent’s designer as a IDropDownOwner. Then, if successful, it invokes dialog.ShowDialog() method passing the Smart Tags window HWND as the dialog owner (the return value of rootDesigner.DropDownOwner).

So, with this EditorService class, we now have everything we need to write the Attributes and Operations DesignerActionMethodItem instances.

The DesignerActionMethodItem constructor is defined as:

public DesignerActionMethodItem(
    DesignerActionList actionList,
    string memberName,
    string displayName,
    string category,
    string description,
    bool includeAsDesignerVerb
)

where memberName specifies the method to invoke on the DesignerActionList instance.

The following code shows the implementation corresponding to the Attributes property (you can refer to the full source code for the Operations property and the complete EditorService implementation).

    class UMLTypeActionList : DesignerActionList {
        ...
        public void EditAttributes() {
            EditorService.EditValue(Component.Site, Component, "Attributes");
        }
        public override DesignerActionItemCollection GetSortedActionItems() {
            DesignerActionItemCollection items =
                new DesignerActionItemCollection();
            // The "TypeName" property
            ...
            // The 'Edit Attributes...' verb
            items.Add(new DesignerActionMethodItem(this,
                                    "EditAttributes",
                                    "Edit Attributes...",
                                    "UML",
                                    "The attributes of the UML type.",
                                    true));
        }
    }

And here is the final result:

In this article, we have seen how to support Smart Tags from a custom ILOG Diagrammer for .NET User Symbol. Using the same design-time API as the Windows Forms controls, it integrates seamlessly with the Visual Studio design surface and greatly improves the user experience of your symbols.

First, we need to make sure that we know what anchors and user symbols are. Let’s briefly define these two notions:

• A user symbol is a graphic object built with the ILOG Diagrammer for .NET Diagram Designer. This designer, fully integrated into Visual Studio, is a WYSIWYG editor that produces C# or VB.NET code. Using this editor, you can build complex interactive symbols by assembling available shapes and symbols.
• An anchor is a point on a graphic object where a link can be connected. Each graphic object has a collection of anchors on which it’s possible to connect links.

Now that we know what we’re talking about, we can imagine the following scenario: A user has created a custom user symbol using our designer, and he wants to specify the exact location where links could be connected to this symbol. For example, when designing an electrical symbol, one need to specify that wires can be connected to the component terminals. Here is an example of such a symbol:

Let’s create this symbol in Visual Studio:

1. Launch Visual Studio 2005 or 2008.
2. Select File->New->Project->ILOG Diagrammer Symbol Library and name the project ElectricalSymbolsLibrary.
3. In the solution explorer, right click on the project, and choose Add New Item->UserSymbol (ILOG Diagrammer) and name the symbol Transistor.cs.
4. Choose Diagrammer->Import File and import transistor.ivn after extracting it from the following archive. Click Yes in the dialog asking if you want to import the file as vector graphics.

You should now have your transistor symbol visible in the designer:

Let’s now use this new symbol in a diagram so that we can try to connect links to it. To add a diagram to the project, right-click in the solution explorer on the project and choose Add->New Item->Diagram (ILOG Diagrammer). Compile the project (Build->Build Solution) to update the toolbox. Open the toolbox, your new transistor symbol should be available:

Drag a transistor symbol from the toolbox to the design surface. Repeat the operation to have several symbols in the diagram. You should now have something like this:

Let’s now try to connect the transistors together by creating links between them. Open the toolbox and locate the Connectors tab. Click on one of the links available in the tab, then move the mouse over one of the transistors. The anchors where the link can be connected are highlighted:

We can see that by default a user symbol has four anchors, each one located at the middle of the bounding box sides. Obviously, that’s not what we want here. One way to get the right anchors is to edit each transistor instance by modifying its anchors collection: After removing the default anchors (set the UseDefaultAnchors property to false), add three BoundsAnchor to the anchors collection (right-click on the transistor, and choose Edit Anchors…). Then, we need to move each anchor at the desired location. To do this, choose the Edit Anchors () icon from the Diagrammer toolbar and move the mouse over the transistor. It’s now possible to move the three anchors previously added to their right location by clicking each anchor and dragging it to its desired location. Then, if we go back to the link mode connection by clicking on a link in the toolbox Connectors tab, we can see by passing the mouse over it, that our transitor has now its anchors placed at their right location:

The main drawbacks of this approach are:

• The anchors are not part of the symbol itself, since they have been added after the symbol creation. If you create an instance of this symbol by code, your new anchors will not be available.
• We’re not using the default anchors feature of the graphic objects, and thus, anchors are created and added to the component model even though there are no links connected to them. This can be a performance issue if you have many objects with many anchors.

An alternative to this approach is to define the default anchors directly when designing the transistor. How can we do this ? Let’s go back to the designer view of our transistor by double clicking the Transistor.cs file in the Solution Explorer. The trick is that all the real anchors (not the default ones) defined in the sub objects of our transistor will be exposed as default anchors for our user symbol. Thus, we simply need to add three anchors on the sub objects composing our transistor. Let’s see how to do it.

If you look at the Document Outline view in Visual Studio, you will see that our transistor is composed of several shapes:

The interesting objects are the polyline1, polyline2 and line1 objects. On each one, we will add a new PolyPointsAnchor, which is a type of anchor whose location is bound to a vertex of a polyline object. Right-click on the polyline1 object in the designer view, and choose  Edit Anchors. Add a PolyPointsAnchor and click the OK button. Repeat the operation for the polyline2 and line1 objects. Note that in our example, the anchors are located on the first vertex of each polyline, which is the default for PolyPointsAnchor objects.

Let’s compile the project and switch back to our diagram view to test our transistor by double clicking the Diagram1.cs file in the Solution Explorer. To start with a fresh diagram, remove existing instances of the transistors. Then drag and drop a new transistor from the toolbox and try to connect a link to see that the highlighted anchors are the expected ones:

We’ve successfully changed the default anchors of our transistor, without having to write a single line of code.

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<ScriptReference> 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<scriptreference> GetScriptReferences() {
    IEnumerable<ScriptReference> references = base.GetScriptReferences();
    List<ScriptReference> list = new List<ScriptReference>(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() {
        /// 

        /// Initializes a MakeCurveBehavior instance.
        ///         

        AjaxBezierSample.MakeCurveBehavior.callBaseMethod(this, ‘initialize’);        

        this._mouseDownHandler = Function.createDelegate(this, this._onMouseDown);
        this._mouseMoveHandler = Function.createDelegate(this, this._onMouseMove);
        this._mouseUpHandler = Function.createDelegate(this, this._onMouseUp);
        this._keyDownHandler = Function.createDelegate(this, this._onKeyDown);
        this._doubleClickHandler = Function.createDelegate(this, this._onDoubleClick);
        if (this.get_active()) {
            this._wireHandlers();
        }
        this._propertyChangedHandler = Function.createDelegate(this, this._onPropertyChanged);
        this.add_propertyChanged(this._propertyChangedHandler);
        …
    },        

    dispose : function() {
        this._imgElt = null;
        $clearHandlers(this.get_element());
        AjaxBezierSample.MakeCurveBehavior.callBaseMethod(this, ‘dispose’);
    },        

    _wireHandlers : function() {
        $addHandler(this.get_element(), ‘mousedown’, this._mouseDownHandler);
        $addHandler(this.get_element(), ‘mousemove’, this._mouseMoveHandler);
        $addHandler(this.get_element(), ‘mouseup’, this._mouseUpHandler);
        $addHandler(this.get_element(), ‘keydown’, this._keyDownHandler);
        $addHandler(this.get_element(), ‘dblclick’, this._doubleClickHandler);
        this.ensureFirefoxKeyEvents();
    },        

    _unwireHandlers : function() {
        $removeHandler(this.get_element(), ‘mousedown’, this._mouseDownHandler);
        $removeHandler(this.get_element(), ‘mousemove’, this._mouseMoveHandler);
        $removeHandler(this.get_element(), ‘mouseup’, this._mouseUpHandler);
        $removeHandler(this.get_element(), ‘keydown’, this._keyDownHandler);
        $removeHandler(this.get_element(), ‘dblclick’, this._doubleClickHandler);
    },        

    _onPropertyChanged : function(sender, args) {
        if (’active’ == args.get_propertyName()) {
            if (this.get_active()) {
                this._wireHandlers();
            } else {
                this._unwireHandlers();
            }
        }
    },

Next, we need to handle the points and create the ghost curve. For this purpose, all the points (the passage points and the control points) are stored in an array in the following sequence : the passage point, the first control point, the second control point. We hence have three indices per point.

The code below illustrates this (for the sake of readability, the method updateCurveGhostPoints() that updates the ghost position is not shown. Please refer to the source code for more details). When the mouse is pressed, the addPoint() method is invoked to add a new passage point and two control points. The three points have initially the same coordinates until the next mouse drag. Then, when the mouse is dragged, the control points position is adjusted proportionally (in the react() method) :

    _onMouseDown : function(e) {
        if (e.button == Sys.UI.MouseButton.leftButton) {        

            if (this._points == null) {
                this._points = [];
                this._size = 0;
            }
            this._dragging = true;
            var loc = Sys.UI.DomElement.getLocation(this.get_element());
            var p = {'x':e.clientX - loc.x, 'y':e.clientY - loc.y };
            // Add the new point
            this._addPoint(p);
            // ... and compute the control points
            this._react(p);
            // update ghost
            if (this._size == 0) {
                this.updateCurveGhostPoints();
            } else {
                this._points[this._size-1] = p;
                this.addNewCurve();
            }
            this.updateMarkerPos(p);
            this.onStartInteraction();        

            e.stopPropagation();
            e.preventDefault();
        }
    },        

    _onMouseMove : function(e) {
        if (this._size > 0 && this._dragging) {
            var loc = Sys.UI.DomElement.getLocation(this.get_element());
            var p = {'x':e.clientX - loc.x, 'y':e.clientY - loc.y };
            if (this._size == 1) {
                // If user is dragging the starting point, add the second point.
                this._addPoint(p);
                // and compute the control points
                this._react(p);
            } else {
                // computes the control points position
                this._react(p);
                this._points[this._size-1] = p;
            }
            // update ghost
            this.updateCurveGhostPoints();        

            e.stopPropagation();
            e.preventDefault();
        }
    },        

    _addPoint : function(p) {
        if (this._size > 1) {
            this._points[(++this._size)-1] = p;
            this._points[(++this._size)-1] = p;
            this._points[(++this._size)-1] = p;
        } else {
            this._points[(++this._size)-1] = p; // start point
        }
    },        

    _react : function(p) {
        if (this._size > 3) {
           // Updates the position of the control point.
           var prevp = this._size - 3; // previous left handle
           var pivot = this._size - 2; // previous end point
           this._points[prevp] = this.symmetric(this._points[pivot], p);
        }
    },        

    _onMouseUp : function(e) {
        this._dragging = false;        

    },        

    _onDoubleClick : function(e) {
        if (this._points != null) {
            // Commit the action.
            this.doCreateCurve();
            this.onEndInteraction();
            this.reset();        

            e.stopPropagation();
            e.preventDefault();
        }
    },        

    _onKeyDown : function(e) {
        if (this._points != null && e.keyCode == Sys.UI.Key.esc) {
            // Cancel interaction
            this.onEndInteraction();
            this.reset();
            e.stopPropagation();
            e.preventDefault();
        }
    },

Commit the new curve to the server

Finally, the points defining the new curve are sent to the server-side part of our interactor to create the corresponding ILOG.Diagrammer.Graphic.BezierCurve object and add it to the view GraphicContainer. To do this, we create an asynchronous ASP.NET callback invoking the ViewBehavior.callServerAsync method passing the points array as parameter. At this time, the request has been processed but the image has not been updated to show the new content. In order to fix this, we override the ViewBehavior.onCallbackReceived method to refresh the view when the callback response is received :

    doCreateCurve : function() {
        var args = {};
        if (this._size > 4) {
            // get rid of the extra passage point coming from the double-click.
            if (this._useVML)
                args.points = this._points.slice(0, this._points.length-1-3);
            else // under FF, we get one more mouse-down from the double-click
                args.points = this._points.slice(0, this._points.length-1-2*3);
        } else {
            args.points = this._points.slice(0);
        }
        this.callServerAsync(args);
    },        

    onCallbackReceived : function(args) {
        this.updateView();
    },

You can find the VS2008 project here: AjaxBezierSample VS2008 Project. Do not hesitate to look at the MakeCurveBehavior.js file to see how the the primitives points are updated.

The purpose of this implementation being a tutorial, many improvements are still to be done. For example, you could add properties to be able to customize the ghost rendering (the stroke color, the stroke style, etc.), an optional PostBack behavior (see ViewBehavior.doPostBack() method), additional editing capabilities (add/supress points or closed curves support).

As you can see, writing a new interactor for an AjaxDiagramView is essentially a client-side task. Fortunately, the Microsoft JavaScript Library and the ILOG.Diagrammer.Web.UI.ViewBehavior class provide a rich set of functionalities and services that make the JavaScript implementation easier and poweful. Also, the use of asynchronous callbacks to handle the interaction allows a very smooth user experience avoiding the annoying cost of a PostBack.