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.
