Hello guys,

We've been working hard on a diagramming ASP.NET server control, and it's now pretty close to first beta version. For those of you that wish to try out a preview build, here it is -

https://mindfusion.org/_beta/NetDiagram.zip

This first version of NetDiagram requires Sun's Java 1.5 runtime on the client side in order to implement user interaction. We have chosen to use a Java applet as a front end because applets have wide support among browsers and OSes, and in the same time give us a lot of nice features related to drawing and user input. In next releases we will implement SVG and Flash based front-ends, without changing the server side API.

To test the control, create or open an ASP.NET Site project, add a form, and drag the NetDiagram.dll to the Visual Studio toolbox. The FlowChart control should appear somewhere in the toolbox, so drag it to your form, and set its ID to 'fc'.

Add the other two files from the zip file to your project. JDiagram.jar contains the Java applet that implements interaction on the client side. The .js file contains some scripts used by NetDiagram.

Now drag a Submit button too, so you can see how postback works. Create a Page_Load event handler, and add the following code:

if (!IsPostBack)
{
  fc.DocExtents = new RectangleF(0, 0, 400, 800);

  // create some boxes
  for (int i = 0; i < ShapeTemplate.Shapes.Count; ++i)
  {
    Box box = fc.CreateBox((i % 6) * 40, (i / 6) * 40, 20, 20);
    box.Style = BoxStyle.Shape;
    box.Shape = ShapeTemplate.Shapes[i];

    if (i > 0)
    {
      // and some arrows
      Arrow arrow = fc.CreateArrow(fc.Boxes[i - 1], box);
      if (i % 6 == 0)
      {
      RectangleF boxRect = fc.Boxes[i - 1].BoundingRect;
      arrow.Style = ArrowStyle.Cascading;
      arrow.ControlPoints[0] = new PointF(
        boxRect.X + boxRect.Width / 2, boxRect.Bottom);
      arrow.Route();
      }
    }
  }
}
else
{
  // postback works too!
  foreach (Box box in fc.Boxes)
  {
    box.Brush = new MindFusion.Diagramming.WebForms.LinearGradientBrush(
      Color.Blue, Color.LightBlue, 33);
  }
}
 

Open the page in a browser, and if you have the Java 1.5 runtime installed, you should see the nice stuff appear. It is completely interactive too - you can move items around, draw new boxes and arrows, etc. Don't forget to try how posting back the page works!

We don't have any documentation yet, but you might use the FlowChart.NET one - the programming interface is quite the same. We'd be happy to hear any comments or suggestions regarding this new product of ours - please post them in this board.

In a day or two I'll post a short tutorial showing how you could implement AJAX stuff with NetDiagram. Stay tuned!

g.

A new build uploaded here -
https://mindfusion.org/_beta/NetDiagram.zip

fixes an exception that was thrown when posting back grouped items.

g.