Nevron .NET Vision
Diagram for .NET / Getting Started / Integrating ThinWeb Diagram / Integrating In WebForms
In This Topic
    Integrating In WebForms
    In This Topic

    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.