Article Rating

  • 0 Rating(s)
  • 0
  • 0
  • 0
  • 0
  • 0

Create a simple diagram in ASP.NET application

Applies to: Nevron Diagram for .NET

How to create a simple diagram in ASP.NET application from scratch in Visual Studio?

The following getting started guide will help you create a ASP.NET application, which displays the following diagram:


Create a new ASP.NET application:
  1. Open Microsoft Visual Studio for .NET
  2. Select the File - New - Project command - the new project dialog will be displayed
  3. Select Visual C# Projects - ASP.NET Web Application
  4. Click the OK button
  5. If the current page view is Source, switch to Design

Insert Nevron Diagram component:

  1. The Nevron .NET Vision installation must register the NDrawingView component in the Nevron Diagram WebForm toolbox group. In case this group is created go to step 6.
  2. Right click on the Toolbox background. Select the "Choose Items…" command.
  3. In the "Customize Toolbox Items" dialog select the ".NET Framework Components" tab.
  4. Click on the "Browse..." button and select the Nevron.Diagram.WebForm.dll assembly located in the Nevron .NET Vision installation directory.
  5. The NDrawingView should appear at the end of the toolbox list.
  6. Drag and drop the NDrawingView on the page.
  7. Open the solution explorer and make sure to add references to the following Nevron assemblies: Nevron.Diagram.dll; Nevron.Diagram.Shapes.dll; Nevron.Diagram.WebForm.dll; Nevron.Presentation.dll; Nevron.System.dll; and Nevron.UI.WebForm.Controls.dll;
  8. From the Solution explorer right click on Default.aspx and select "View code".
  9. Use the following code example to programmatically create the diagram:

[C#]
using System;
using System.Drawing;
using Nevron.Diagram;
using Nevron.Diagram.Shapes;
using Nevron.GraphicsCore;
...
protected void Page_Load(object sender, EventArgs e)
{
    NDrawingDocument Document = new NDrawingDocument();
    Document = NDrawingView1.Document;
    Document.BackgroundStyle.FrameStyle.Visible = false;
  
    // do not show ports 
    NDrawingView1.GlobalVisibility.ShowPorts = false;
  
    Document.BeginInit();
    Document.Width = 1000;
    Document.Height = 1000;
    NDrawingView1.ViewLayout = CanvasLayout.Fit;
  
    // apply padding to the document bounds 
    NDrawingView1.DocumentPadding = new Nevron.Diagram.NMargins(10);
  
    // create the flowcharting shapes factory 
    NFlowChartingShapesFactory factory = new NFlowChartingShapesFactory(Document);
      
    // modify the connectors style sheet 
    NStyleSheet styleSheet = (Document.StyleSheets.GetChildByName(NDR.NameConnectorsStyleSheet, -1) as NStyleSheet);
  
    NTextStyle textStyle = new NTextStyle();
    textStyle.BackplaneStyle.Visible = true;
    textStyle.BackplaneStyle.StandardFrameStyle.InnerBorderWidth = new NLength(0);
    styleSheet.Style.TextStyle = textStyle;
  
    styleSheet.Style.StrokeStyle = new NStrokeStyle(1, Color.Black);
    styleSheet.Style.StartArrowheadStyle.StrokeStyle = new NStrokeStyle(1, Color.Black);
    styleSheet.Style.EndArrowheadStyle.StrokeStyle = new NStrokeStyle(1, Color.Black);
  
    // create the begin shape 
    NShape begin = factory.CreateShape(FlowChartingShapes.Termination);
    begin.Bounds = new NRectangleF(100, 100, 100, 100);
    begin.Text = "BEGIN";
    Document.ActiveLayer.AddChild(begin);
  
    // create the step1 shape 
    NShape step1 = factory.CreateShape(FlowChartingShapes.Process);
    step1.Bounds = new NRectangleF(100, 400, 100, 100);
    step1.Text = "STEP1";
    Document.ActiveLayer.AddChild(step1);
  
    // connect begin and step1 with bezier link 
    NBezierCurveShape bezier = new NBezierCurveShape();
    bezier.StyleSheetName = NDR.NameConnectorsStyleSheet;
    bezier.Text = "BEZIER";
    bezier.FirstControlPoint = new NPointF(100, 300);
    bezier.SecondControlPoint = new NPointF(200, 300);
    Document.ActiveLayer.AddChild(bezier);
    bezier.FromShape = begin;
    bezier.ToShape = step1;
  
    // create question1 shape 
    NShape question1 = factory.CreateShape(FlowChartingShapes.Decision);
    question1.Bounds = new NRectangleF(300, 400, 100, 100);
    question1.Text = "QUESTION1";
    Document.ActiveLayer.AddChild(question1);
  
    // connect step1 and question1 with line link 
    NLineShape line = new NLineShape();
    line.StyleSheetName = NDR.NameConnectorsStyleSheet;
    line.Text = "LINE";
    Document.ActiveLayer.AddChild(line);
    line.FromShape = step1;
    line.ToShape = question1;
  
    // create the step2 shape 
    NShape step2 = factory.CreateShape(FlowChartingShapes.Process);
    step2.Bounds = new NRectangleF(500, 100, 100, 100);
    step2.Text = "STEP2";
    Document.ActiveLayer.AddChild(step2);
  
    // connect step2 and question1 with HV link 
    NStep2Connector hv1 = new NStep2Connector(false);
    hv1.StyleSheetName = NDR.NameConnectorsStyleSheet;
    hv1.Text = "HV1";
    Document.ActiveLayer.AddChild(hv1);
    hv1.FromShape = step2;
    hv1.ToShape = question1;
  
    // connect question1 and step2 and with HV link 
    NStep2Connector hv2 = new NStep2Connector(false);
    hv2.StyleSheetName = NDR.NameConnectorsStyleSheet;
    hv2.Text = "HV2";
    Document.ActiveLayer.AddChild(hv2);
    hv2.FromShape = question1;
    hv2.ToShape = step2;
  
    // create a self loof as bezier on step2 
    NBezierCurveShape selfLoop = new NBezierCurveShape();
    selfLoop.StyleSheetName = NDR.NameConnectorsStyleSheet;
    selfLoop.Text = "SELF LOOP";
    Document.ActiveLayer.AddChild(selfLoop);
    selfLoop.FromShape = step2;
    selfLoop.ToShape = step2;
    selfLoop.Reflex();
  
    // create step3 shape 
    NShape step3 = factory.CreateShape(FlowChartingShapes.Process);
    step3.Bounds = new NRectangleF(700, 600, 100, 100);
    step3.Text = "STEP3";
    Document.ActiveLayer.AddChild(step3);
  
    // connect question1 and step3 with an HVH link 
    NStep3Connector hvh1 = new NStep3Connector(false, 50, 0, true);
    hvh1.StyleSheetName = NDR.NameConnectorsStyleSheet;
    hvh1.Text = "HVH1";
    Document.ActiveLayer.AddChild(hvh1);
    hvh1.FromShape = question1;
    hvh1.ToShape = step3;
  
    // create end shape 
    NShape end = factory.CreateShape(FlowChartingShapes.Termination);
    end.Bounds = new NRectangleF(300, 700, 100, 100);
    end.Text = "END";
    Document.ActiveLayer.AddChild(end);
  
    // connect step3 and end with VH link 
    NStep2Connector vh1 = new NStep2Connector(true);
    vh1.StyleSheetName = NDR.NameConnectorsStyleSheet;
    vh1.Text = "VH1";
    Document.ActiveLayer.AddChild(vh1);
    vh1.FromShape = step3;
    vh1.ToShape = end;
  
    // connect question1 and end with curve link (uses explicit ports) 
    NRoutableConnector curve = new NRoutableConnector(RoutableConnectorType.DynamicCurve);
    curve.StyleSheetName = NDR.NameConnectorsStyleSheet;
    curve.Text = "CURVE";
    Document.ActiveLayer.AddChild(curve);
    curve.StartPlug.Connect(question1.Ports.GetChildAt(3) as NPort);
    curve.EndPlug.Connect(end.Ports.GetChildAt(1) as NPort);
    curve.InsertPoint(1, new NPointF(500, 600));
  
    // set a shadow to the nDrawingDocument1. Since styles are inheritable all objects will reuse this shadow 
    Document.Style.ShadowStyle = new NShadowStyle(
        ShadowType.GaussianBlur,
        Color.Gray,
        new NPointL(5, 5),
        1,
        new NLength(3));
  
    // shadows must be displayed behind document content 
    Document.ShadowsZOrder = ShadowsZOrder.BehindDocument;
  
    // resize document to fit all shapes 
    NDrawingView1.Document.SizeToContent(); 
  
    // end nDrawingDocument1 init 
    Document.EndInit();
}

[VB.NET]
Imports System
Imports System.Drawing
Imports Nevron.Diagram
Imports Nevron.Diagram.Shapes
Imports Nevron.GraphicsCore
...
Protected Sub Page_Load(sender As Object, e As EventArgs)
    Dim Document As New NDrawingDocument()
    Document = NDrawingView1.Document
    Document.BackgroundStyle.FrameStyle.Visible = False
  
    ' do not show ports 
    NDrawingView1.GlobalVisibility.ShowPorts = False
  
    Document.BeginInit()
    Document.Width = 1000
    Document.Height = 1000
    NDrawingView1.ViewLayout = CanvasLayout.Fit
  
    ' apply padding to the document bounds 
    NDrawingView1.DocumentPadding = New Nevron.Diagram.NMargins(10)
  
    ' create the flowcharting shapes factory 
    Dim factory As New NFlowChartingShapesFactory(Document)
  
    ' modify the connectors style sheet 
    Dim styleSheet As NStyleSheet = TryCast(Document.StyleSheets.GetChildByName(NDR.NameConnectorsStyleSheet, -1), NStyleSheet)
  
    Dim textStyle As New NTextStyle()
    textStyle.BackplaneStyle.Visible = True
    textStyle.BackplaneStyle.StandardFrameStyle.InnerBorderWidth = New NLength(0)
    styleSheet.Style.TextStyle = textStyle
  
    styleSheet.Style.StrokeStyle = New NStrokeStyle(1, Color.Black)
    styleSheet.Style.StartArrowheadStyle.StrokeStyle = New NStrokeStyle(1, Color.Black)
    styleSheet.Style.EndArrowheadStyle.StrokeStyle = New NStrokeStyle(1, Color.Black)
  
    ' create the begin shape 
    Dim begin As NShape = factory.CreateShape(FlowChartingShapes.Termination)
    begin.Bounds = New NRectangleF(100, 100, 100, 100)
    begin.Text = "BEGIN"
    Document.ActiveLayer.AddChild(begin)
  
    ' create the step1 shape 
    Dim step1 As NShape = factory.CreateShape(FlowChartingShapes.Process)
    step1.Bounds = New NRectangleF(100, 400, 100, 100)
    step1.Text = "STEP1"
    Document.ActiveLayer.AddChild(step1)
  
    ' connect begin and step1 with bezier link 
    Dim bezier As New NBezierCurveShape()
    bezier.StyleSheetName = NDR.NameConnectorsStyleSheet
    bezier.Text = "BEZIER"
    bezier.FirstControlPoint = New NPointF(100, 300)
    bezier.SecondControlPoint = New NPointF(200, 300)
    Document.ActiveLayer.AddChild(bezier)
    bezier.FromShape = begin
    bezier.ToShape = step1
  
    ' create question1 shape 
    Dim question1 As NShape = factory.CreateShape(FlowChartingShapes.Decision)
    question1.Bounds = New NRectangleF(300, 400, 100, 100)
    question1.Text = "QUESTION1"
    Document.ActiveLayer.AddChild(question1)
  
    ' connect step1 and question1 with line link 
    Dim line As New NLineShape()
    line.StyleSheetName = NDR.NameConnectorsStyleSheet
    line.Text = "LINE"
    Document.ActiveLayer.AddChild(line)
    line.FromShape = step1
    line.ToShape = question1
  
    ' create the step2 shape 
    Dim step2 As NShape = factory.CreateShape(FlowChartingShapes.Process)
    step2.Bounds = New NRectangleF(500, 100, 100, 100)
    step2.Text = "STEP2"
    Document.ActiveLayer.AddChild(step2)
  
    ' connect step2 and question1 with HV link 
    Dim hv1 As New NStep2Connector(False)
    hv1.StyleSheetName = NDR.NameConnectorsStyleSheet
    hv1.Text = "HV1"
    Document.ActiveLayer.AddChild(hv1)
    hv1.FromShape = step2
    hv1.ToShape = question1
  
    ' connect question1 and step2 and with HV link 
    Dim hv2 As New NStep2Connector(False)
    hv2.StyleSheetName = NDR.NameConnectorsStyleSheet
    hv2.Text = "HV2"
    Document.ActiveLayer.AddChild(hv2)
    hv2.FromShape = question1
    hv2.ToShape = step2
  
    ' create a self loof as bezier on step2 
    Dim selfLoop As New NBezierCurveShape()
    selfLoop.StyleSheetName = NDR.NameConnectorsStyleSheet
    selfLoop.Text = "SELF LOOP"
    Document.ActiveLayer.AddChild(selfLoop)
    selfLoop.FromShape = step2
    selfLoop.ToShape = step2
    selfLoop.Reflex()
  
    ' create step3 shape 
    Dim step3 As NShape = factory.CreateShape(FlowChartingShapes.Process)
    step3.Bounds = New NRectangleF(700, 600, 100, 100)
    step3.Text = "STEP3"
    Document.ActiveLayer.AddChild(step3)
  
    ' connect question1 and step3 with an HVH link 
    Dim hvh1 As New NStep3Connector(False, 50, 0, True)
    hvh1.StyleSheetName = NDR.NameConnectorsStyleSheet
    hvh1.Text = "HVH1"
    Document.ActiveLayer.AddChild(hvh1)
    hvh1.FromShape = question1
    hvh1.ToShape = step3
  
    ' create end shape 
    Dim [end] As NShape = factory.CreateShape(FlowChartingShapes.Termination)
    [end].Bounds = New NRectangleF(300, 700, 100, 100)
    [end].Text = "END"
    Document.ActiveLayer.AddChild([end])
  
    ' connect step3 and end with VH link 
    Dim vh1 As New NStep2Connector(True)
    vh1.StyleSheetName = NDR.NameConnectorsStyleSheet
    vh1.Text = "VH1"
    Document.ActiveLayer.AddChild(vh1)
    vh1.FromShape = step3
    vh1.ToShape = [end]
  
    ' connect question1 and end with curve link (uses explicit ports) 
    Dim curve As New NRoutableConnector(RoutableConnectorType.DynamicCurve)
    curve.StyleSheetName = NDR.NameConnectorsStyleSheet
    curve.Text = "CURVE"
    Document.ActiveLayer.AddChild(curve)
    curve.StartPlug.Connect(TryCast(question1.Ports.GetChildAt(3), NPort))
    curve.EndPlug.Connect(TryCast([end].Ports.GetChildAt(1), NPort))
    curve.InsertPoint(1, New NPointF(500, 600))
  
    ' set a shadow to the nDrawingDocument1. Since styles are inheritable all objects will reuse this shadow 
    Document.Style.ShadowStyle = New NShadowStyle(ShadowType.GaussianBlur, Color.Gray, New NPointL(5, 5), 1, New NLength(3))
  
    ' shadows must be displayed behind document content 
    Document.ShadowsZOrder = ShadowsZOrder.BehindDocument
  
    ' resize document to fit all shapes 
    NDrawingView1.Document.SizeToContent()
  
    ' end nDrawingDocument1 init 
    Document.EndInit()
End Sub

Article ID: 123, Created On: 11/9/2010, Modified: 12/1/2010

Comments (1)

Lyubo Karadashkov

If you're writing the code manually (and not using "Design" view), then it is important to remember to add the following to you web.config file:

<system.web>
<httpHandlers>
<add verb="*" path="NevronDiagram.axd" type="Nevron.Diagram.WebForm.NDiagramImageResourceHandler" validate="false"/>
<add verb="GET,HEAD" path="NevronScriptManager.axd" type="Nevron.UI.WebForm.Controls.NevronScriptManager" validate="false"/>
</httpHandlers>
</system.web>

Otherwise, you will get a "Failed to load resource: NevronDiagram.axd".

4/10/2012 at 3:40 PM