Nevron .NET Vision Documentation
Integrating In WebForms

This topic describes the steps needed to create a simple ASP.NET Web Form application or Website project using the Nevron Diagram ThinWeb control.

1. Open Microsoft Visual Studio .NET.

2. On the File / New Project select "Visual C# projects" and then select "ASP .NET Web application" from the list on the right side.

3. Click OK.

4. If the current page view is Source, switch to Design.

5. Open the Toolbox. If it's not visible open it from the View\Toolbox menu item.

6. Locate the Nevron Diagram Web Form tab and expand it.

7. Select "NThinDiargamControl" and drop it on the form.

8. Check whether the following assemblies are referenced by the project:

- Nevron.System
- Nevron.Presentation
- Nevron.ThinWeb
- Nevron.Diagram
- Nevron.Diagram.ThinWeb
- Nevron.Diagram.Shapes (optional in case you use predefined shapes)
- Nevron.Diagram.Templates (optional in case you use predefined templates)
- Nevron.Diagram.Visio (optional in case you use Visio import)

9. Check if the following configuration xml exists in your web.config file:

web.config
Copy Code

<system.web>
<httpHandlers>
<add path="NThinDiagramControlHttpHandler.axd" verb="*" type="Nevron.Diagram.ThinWeb.NThinDiagramControlHttpHandler" validate="false" />
<add path="NAspNetThinWebControlHttpHandler.axd" verb="*" type="Nevron.ThinWeb.NAspNetThinWebControlHttpHandler" validate="false" />
</httpHandlers>
</system.web>

<system.webServer>
<handlers>
<remove name="NThinDiagramControlHttpHandler" />
<remove name="NAspNetThinWebControlHttpHandler" />
<add name="NThinDiagramControlHttpHandler" preCondition="integratedMode" verb="*" path="NThinDiagramControlHttpHandler.axd" type="Nevron.Diagram.ThinWeb.NThinDiagramControlHttpHandler" />
<add name="NAspNetThinWebControlHttpHandler" preCondition="integratedMode" verb="*" path="NAspNetThinWebControlHttpHandler.axd" type="Nevron.ThinWeb.NAspNetThinWebControlHttpHandler" />
</handlers>
</system.webServer>

10. Open the source code for WebForm1.aspx - from the Solution explorer right click on Default.aspx and select "View code".

11. Modify the source code so that it looks like:

C#
Copy Code

using System;
using System.Drawing;
using Nevron.Diagram;
using Nevron.Diagram.Shapes;
using Nevron.Diagram.ThinWeb;
using Nevron.Dom;
using Nevron.GraphicsCore;
using Nevron.ThinWeb;

namespace WebApplication1

{

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!NThinDiagramControl1.Initialized)

{

// add the client mouse event tool
NDrawingDocument document = NThinDiagramControl1.Document;
document.BeginInit();
document.BackgroundStyle.FrameStyle.Visible =
false;
document.AutoBoundsPadding =
new Nevron.Diagram.NMargins(10f, 10f, 10f, 10f);
document.Style.FillStyle =
new NColorFillStyle(Color.White);

// create a circle
NBasicShapesFactory factory = new NBasicShapesFactory(document);
NShape circle = factory.CreateShape(BasicShapes.Circle);
circle.Bounds =
new NRectangleF(10f, 10f, 100f, 100f);
circle.Style.FillStyle =
new NColorFillStyle(Color.Blue);
document.ActiveLayer.AddChild(circle);
NThinDiagramControl1.SizeToContent();

// create a rectangle
NShape rect = factory.CreateShape(BasicShapes.Rectangle);
rect.Bounds = new NRectangleF(120f, 120f, 100f, 100f);
rect.Style.FillStyle =
new NColorFillStyle(Color.Blue);
document.ActiveLayer.AddChild(rect);
NThinDiagramControl1.SizeToContent();

NServerMouseEventTool serverMouseEventTool = new NServerMouseEventTool();
serverMouseEventTool.MouseDown =
new DiagramMouseDownCallback();
// configure the controller

NThinDiagramControl1.Controller.Tools.Add(serverMouseEventTool);

}

}

/// <summary>
/// Mouse down callback called when the user presses a mouse button
/// </summary>
[Serializable]
class DiagramMouseDownCallback : INMouseEventCallback

{

#region INMouseEventCallback Members

public void OnMouseEvent(NAspNetThinWebControl control, NBrowserMouseEventArgs e)

{

if (e.MouseButton == MouseButton.Left)
{
NThinDiagramControl diagramControl = (NThinDiagramControl)control;
NNodeList allShapes = diagramControl.Document.ActiveLayer.Children(Nevron.Diagram.Filters.NFilters.Shape2D);
NNodeList affectedNodes = diagramControl.HitTest(new NPointF(e.X, e.Y));
NNodeList affectedShapes = affectedNodes.Filter(Nevron.Diagram.Filters.NFilters.Shape2D);
int length;
length = allShapes.Count;

for (int i = 0; i < length; i++)
{

NShape shape = allShapes[i] as NShape;

if (shape != null)
{
shape.Style.FillStyle =
new NColorFillStyle(Color.Blue);
}
}

length = affectedShapes.Count;
for (int i = 0; i < length; i++)
{
NShape shape = affectedShapes[i] as NShape;
if (shape != null)
{

shape.Style.FillStyle = new NColorFillStyle(Color.Red);
}

}

diagramControl.Update();

}

}

#endregion

}

}

}

Visual Basic
Copy Code

Imports Microsoft.VisualBasic
Imports System
Imports System.Drawing
Imports Nevron.Diagram
Imports Nevron.Diagram.Shapes
Imports Nevron.Diagram.ThinWeb
Imports Nevron.Dom
Imports Nevron.GraphicsCore
Imports Nevron.ThinWeb

Partial Public Class _Default

Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load

If (Not NThinDiagramControl1.Initialized) Then
' add the client mouse event tool

Dim document As NDrawingDocument = NThinDiagramControl1.Document
document.BeginInit()
document.BackgroundStyle.FrameStyle.Visible =
False
document.AutoBoundsPadding = New Nevron.Diagram.NMargins(10.0F, 10.0F, 10.0F, 10.0F)
document.Style.FillStyle =
New NColorFillStyle(Color.White)

' create a circle
Dim factory As NBasicShapesFactory = New NBasicShapesFactory(document)
Dim circle As NShape = factory.CreateShape(BasicShapes.Circle)
circle.Bounds =
New NRectangleF(10.0F, 10.0F, 100.0F, 100.0F)
circle.Style.FillStyle =
New NColorFillStyle(Color.Blue)
document.ActiveLayer.AddChild(circle)
NThinDiagramControl1.SizeToContent()

' create a rectangle
Dim rect As NShape = factory.CreateShape(BasicShapes.Rectangle)
rect.Bounds =
New NRectangleF(120.0F, 120.0F, 100.0F, 100.0F)
rect.Style.FillStyle =
New NColorFillStyle(Color.Blue)
document.ActiveLayer.AddChild(rect)
NThinDiagramControl1.SizeToContent()

Dim serverMouseEventTool As NServerMouseEventTool = New NServerMouseEventTool()
serverMouseEventTool.MouseDown =
New DiagramMouseDownCallback()
' configure the controller
NThinDiagramControl1.Controller.Tools.Add(serverMouseEventTool)
End If

End Sub

''' <summary>
''' Mouse down callback called when the user presses a mouse button
''' </summary>
<Serializable()> _

Private Class DiagramMouseDownCallback

Implements INMouseEventCallback

#Region "INMouseEventCallback Members"

Public Sub OnMouseEvent(ByVal control As NAspNetThinWebControl, ByVal e As NBrowserMouseEventArgs) Implements INMouseEventCallback.OnMouseEvent

If e.MouseButton = MouseButton.Left Then
Dim diagramControl As NThinDiagramControl = CType(control, NThinDiagramControl)
Dim allShapes As NNodeList = diagramControl.Document.ActiveLayer.Children(Nevron.Diagram.Filters.NFilters.Shape2D)
Dim affectedNodes As NNodeList = diagramControl.HitTest(New NPointF(e.X, e.Y))
Dim affectedShapes As NNodeList = affectedNodes.Filter(Nevron.Diagram.Filters.NFilters.Shape2D)
Dim length As Integer

length = allShapes.Count
Dim i As Integer = 0

Do While i < length
Dim shape As NShape = TryCast(allShapes(i), NShape)
If Not shape Is Nothing Then
shape.Style.FillStyle = New NColorFillStyle(Color.Blue)
End If

i += 1

Loop

length = affectedShapes.Count

i = 0

Do While i < length
Dim shape As NShape = TryCast(affectedShapes(i), NShape)
If Not shape Is Nothing Then
shape.Style.FillStyle = New NColorFillStyle(Color.Red)
End If

i += 1
Loop

diagramControl.Update()

End If

End Sub

#End Region

End Class

End Class


12. Start the application - the page must display a clickable diagram containing a circle and rectangle.


 

 


©2017. Nevron Software LLC.

Send Feedback