MindFusion Diagramming Trick 1 - Create transparent brush

As I wasn't able to find a way to create a transparent brush for the mindfusion diagrams, I thought this may be helpful for someone struggling to do the same thing.
Here is a code you can use in the code behind to create a transparent brush (in the following example I am setting the brushes for all tables to be transparent).

Here is the magic line:

DiagramView1.Diagram.TableBrush = DiagramView1.Diagram.ScriptHelper.CreateSolidBrush(System.Drawing.Color.Transparent.A, System.Drawing.Color.Transparent.R, System.Drawing.Color.Transparent.G, System.Drawing.Color.Transparent.B);

(it is kind of long but I think you will get the idea - i tought if I assign the Transparent color properties in the brush constructor, it may produce a transparent brush for me).

Note: this is for the code behind, not in JavaScript, but I think there is a way to do the same thing with JavaScript.

I think the System.Drawing.Color.Transparent.A is the field that makes the magic, this field carries the alpha channel value.

MindFusion diagramming Part 5 - Changing pen colors with JavaScript (ClientMode)

In order to change the pen (borders) of a shape you first need to instantiate a pen class.
It is in the com.mindfusion.diagramming namespace (Java class).

So you need to do the following:


var pen = new Packages.com.mindfusion.diagramming.Pen();


Now, to set the color of the pen we need a java.awt.Color instance. Luckily there are static properties which will return a color instance for the most used colors. See what I mean:

var blackColor = Packages.java.awt.Color.black;
var greenColor = Packages.java.awt.Color.green;

Now, to set the pen color to the color we will use setColor() method:

pen.setColor(Packages.java.awt.Color.green);

To set the width to be 1 pixel we need to use the floating point 0.1, not 1:

pen.setWidth(0.1);

Here is the function return a pen with 1 px border and green color:
function getGreenPen()
{
var pen = new Packages.com.mindfusion.diagramming.Pen();
pen.setWidth(0.1);
pen.setColor(Packages.java.awt.Color.green);
return pen;
}

You can now use an instance of a shape and set its pen. For example, you can use the OnNodeActivatedScript and add the following function:

function onNodeActivated(diagram, args)
{
var node = args.getNode();
node.setPen(getGreenPen());
}


Hope it helps a bit.

Instantiate Java class in JavaScript

I know I am mostly writing about C# and .NET and so on and you may wonder way do I write about java but I found this interesting and useful even in .NET projects.
I was playing with the mindfusion diagram latelly (you can check my posts under the Mind Fusion Diagramming in the blog categories) and found myself in a situation where I needed to instantiate a class from the mindfusion package (i think it was table cell but this doesn't matter right now).

So in order to instantiate Java class in JavaScript you may do this from the Packages object.
For example if you have a class like:
java.MyClass

you can instantiate it this way in javascript:

var myClass = Packages.java.MyClass();

Let's suppose the class has Name property, you can call it like this:

alert(myClass.Name); // If the class has a property "Name", call it ...

Hope this helps somebody out there...
So long and thanks for al the fish ;)

NOTE : I haven't tested this under browsers other than Internet Explorer 7. Hopefully it will work ...

To shim or not to shim, or why telerik radContextMenu will not show over applet in FireFox?

It was a nightmare last night.
I have a Java applet in my pages and needed to display telerik context menu over it when the user right clicks it. So far so good, the component had nice JS events to attach to. I was able to atach to its Click event, find the telerik radContextMenu and call it's showAt(x, y) method. It worked like a charm. I was very happy to have done this in less than 20 minutes as I know mixing different technologies often cause headaches.
I started the project in IE 8, worked just as expected ...
... until I run it in FireFox to see how it looks there.

The telerik radContextMenu wasn't displaying. It take me about an hour to understand that it is displaying but under the Applet DOM object (an hour is relatively fast for me ;). No problems, I will kick some z-indexes and everything will be just fine.
This didn't worked either. So I googled. And google told me what I consider one of the worst news a developer can read - the Applet object is something like the browse button - it exist there and only there and only the way it is and the way the browser developers decided. Or in other words - it will be on top of everything no matter what z-Index will you put there ...
I decided to search for some hacks to apply. And guess what? I found. And guess what the hack is? (it is known as "shim IFrame" or "Shim" or "IFrame shim" not quite sure)
1. You add an IFrame the size of the div you will display over the applet, the IFrame is the only element which respects the z-Index style ...
2. Then you put a div with greater z-Index over the IFrame and this DOM mess should fly ...

Do I look kind of angry? That's ok, because I want to look like I am angry, because I am ...

3-4 hours and still couldn't make it work. I suppose this may have something to do with the layout of my page. When I have some spare time I will try to fix this thing.
One more time - this works perfectly in IE ...
And one more time - it is not Telerik fault too ...

MindFusion diagramming Part 4 - Cancel link creation between specific kinds of shapes

You can check between what kind of shapes the link is created and remove it if you need to do so. I will give you an example on how to cancel the connection between Actor and Actor shapes.

First - add LinkCreatedScript to your diagram and make it point a JavaScript function, here is mine declaration:

     <ndiag:DiagramView ID="diagramView" runat="server" Style="left: 0px; width: 800px;
        position: absolute; top: 0px; height: 505px" Behavior="DrawControls" BackColor="White"
        AllowInplaceEdit="true" LinkCreatedScript="onLinkCreated" />

Now add the onLinkCreated function in the page head :

   <script type="text/javascript">
     function onLinkCreated(diagram, args) {
        var link = args.getLink();
        var shapeOrigin = link.getOrigin().getShape();
        var shapeDestination = link.getDestination().getShape();
        if (shapeDestination.getDisplayName() == 'Actor' && shapeOrigin.getDisplayName() == 'Actor') {
           diagram.getLinks().remove(link);
           alert('Cannot crate link between ' + shapeOrigin.getDisplayName() + ' and ' + shapeDestination.getDisplayName());
        }
     }
   </script>

1. What we did is - we get the link that was just created from the args.
2. We get the Origin and Destination shapes from the link.
3. We then checked their display names and verify they are Actor and Actor.
4. We asked the diagarm object to remove a link, to be more specific - our link, the one that was just created.


I think there may be more elegant ways to achieve this, but currently this is the only I could think of.
Hope it helps somebody out there ...

MindFusion diagramming Part 3 - adding Overview control to the form.

Here is the third part of the tutorial.
Adding overview isn't realy a big deal. You only need to add the following markup in your page (the solution we created in the previous two samples):

<ndiag:Overview Style="position:absolute; top: 320px; height: 180px; left:810px; width:160px;" runat="server" DiagramViewID="diagramView" />

The thing you need to obey here is to give the diagram overview control a correct DiagramViewID property, which should be the ID of the DiagramView control you have on your form.

Here is what we have so far (the tree tutorials combined):

MindFusion diagramming Part 2 - adding shapes list

In the previous example, I show you how to add simple diagram to your web forms. Now I am going to show you how to add a simple shapes list, containing all the shapes that comes with the MindFusion product.

It is very simple, actually, only 1-2 lines of markup:

<ndiag:ShapeListBox ID="shapeList" runat="server" Style="left: 810px; width: 160px; position: absolute; top: 1px; height: 320px; background-color: white" />

This should be added to the code you built in the previous example : http://donchevp.blogspot.com/2009/04/mindfusion-diagramming-part-1-adding.html.

Let's see what we got now:

MindFusion diagramming Part 1 - adding simple diagram to the form.

We worked quite a bit with this product and I must say it is a good one.
It can be used to easilly draw diagrams. It has a lot of built-in shapes and a designer to draw new one.
Let's add a digaram on the form.
First of all, download the product from here : http://mindfusion.eu/download-netdiagram.html and install them.
Add the following lines to your web.config:

In page / controls section, add the following:
<add tagPrefix="ndiag" namespace="MindFusion.Diagramming.WebForms" assembly="MindFusion.Diagramming.WebForms"/>

Then add reference to :
MindFusion.Common
MindFusion.Diagramming
MindFusion.Diagramming.WebForms

Open your page and add the following markup to create a diagram:

<ndiag:DiagramView ID="diagramView" runat="server" Style="left: 0px; width: 800px;
position: absolute; top: 0px; height: 505px" Behavior="DrawControls" BackColor="White" AllowInplaceEdit="true" />

I added few additional properties to decorate and set behaviours. We will discuss them later. I also allowed InplaceEdit, which means that when you double click on a shape, you will be able to edit the text.
Finally, copy the JDiagram.jar into your root directory (you can place it in a directory of your choice, but you will need to set the JarLocation property to point to this file.

Let's see what we did so far:





Pretty nice for 1 minute of work, huh?
There is more ;). This product seems to come from Bulgaria, so there will be no problem with it :).