Applies to: Nevron Diagram for .NET
How to create ASP.NET diagram with tooltips and clickable nodes?
The following example creates a relationship diagram with applied spring layout. By using the Nevron AJAX tools, we have set interactive cursor style, tooltips and URL redirection to the diagram nodes.
1. Create a new ASP.NET application.
2. If the current page view is Source, switch to Design.
3. Drag and drop the NDrawingView on the page.
4. Open the solution explorer and make sure to add references to the following Nevron assemblies: Nevron.Diagram.dll; Nevron.Diagram.Shapes.dll; Nevron.Diagram.Templates.dll; Nevron.Diagram.WebForm.dll; Nevron.Presentation.dll; Nevron.System.dll; and Nevron.UI.WebForm.Controls.dll;
5. From the Solution explorer select all Nevron references and set Copy Local property to True.
6. From the Solution explorer open the Web.config and make sure the following configuration exists in your web.config file:
<
httpHandlers
>
<
remove
path
=
"*.asmx"
verb
=
"*"
/>
<
add
path
=
"NevronDiagram.axd"
verb
=
"*"
type
=
"Nevron.Diagram.WebForm.NDiagramImageResourceHandler"
validate
=
"false"
/>
<
add
path
=
"NevronScriptManager.axd"
verb
=
"GET,HEAD"
type
=
"Nevron.UI.WebForm.Controls.NevronScriptManager"
validate
=
"false"
/>
<
add
path
=
"NevronScriptManager.axd"
verb
=
"*"
type
=
"Nevron.UI.WebForm.Controls.NevronScriptManager"
validate
=
"false"
/>
</
httpHandlers
>
7. From the Solution explorer open the Default.aspx Source and make sure the following configuration exists:
<%@ Register assembly="Nevron.Diagram.WebForm, Version=10.10.14.12, Culture=neutral, PublicKeyToken=95bcc3d41b0512e9" namespace="Nevron.Diagram.WebForm" tagprefix="ndwc" %>
<
ndwc:NDrawingView
ID
=
"NDrawingView1"
runat
=
"server"
Height
=
"381px"
Width
=
"480px"
AjaxEnabled
=
"True"
AsyncCallbackTimeout
=
"10000"
AjaxImageMapMode
=
"Auto"
OnQueryAjaxTools
=
"NDrawingView1_QueryAjaxTools"
AsyncRequestWaitCursorEnabled
=
"False"
>
</
ndwc:NDrawingView
>
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
Nevron.Diagram;
using
Nevron.Diagram.DataStructures;
using
Nevron.Diagram.Filters;
using
Nevron.Diagram.Layout;
using
Nevron.Diagram.Shapes;
using
Nevron.Dom;
using
Nevron.GraphicsCore;
using
Nevron.UI.WebForm.Controls;
...
protected
void
Page_Load(
object
sender, EventArgs e)
{
// display the document in the view
NDrawingDocument Document =
new
NDrawingDocument();
Document = NDrawingView1.Document;
Document.BackgroundStyle.FrameStyle.Visible =
false
;
Document.BeginInit();
Document.Width = 1200;
Document.Height = 1200;
NDrawingView1.ViewLayout = CanvasLayout.Fit;
Document.Style.TextStyle.TextFormat = TextFormat.XML;
Document.Style.TextStyle.Offset =
new
NPointL(0, 50);
Document.Style.StartArrowheadStyle.Shape = ArrowheadShape.None;
Document.Style.EndArrowheadStyle.Shape = ArrowheadShape.None;
// configure shadow (inherited by all objects)
Document.Style.ShadowStyle =
new
NShadowStyle(
ShadowType.GaussianBlur,
Color.FromArgb(150, Color.Black),
new
Nevron.GraphicsCore.NPointL(3, 3),
1,
new
NLength(4)
);
Document.ShadowsZOrder = ShadowsZOrder.BehindDocument;
// end document initialization
Document.EndInit();
// we will be using symbol shapes for this example
NSymbolShapesFactory symbolShapesFactory =
new
NSymbolShapesFactory();
symbolShapesFactory.DefaultSize =
new
NSizeF(100, 100);
List<NPerson> persons =
new
List<NPerson>();
// create persons
NPerson personEmil =
new
NPerson(
"Emil Moore"
, @
"http://www.nevron.com"
, symbolShapesFactory.CreateShape(SymbolShapes.MaleFigure));
NPerson personAndre =
new
NPerson(
"Andre Smith"
, @
"http://www.nevron.com"
, symbolShapesFactory.CreateShape(SymbolShapes.NewActor2));
NPerson personRobert =
new
NPerson(
"Robert Johnson"
, @
"http://www.nevron.com"
, symbolShapesFactory.CreateShape(SymbolShapes.NewActor4));
NPerson personBob =
new
NPerson(
"Bob Williams"
, @
"http://www.nevron.com"
, symbolShapesFactory.CreateShape(SymbolShapes.MaleFigure));
NPerson personPeter =
new
NPerson(
"Peter Brown"
, @
"http://www.nevron.com"
, symbolShapesFactory.CreateShape(SymbolShapes.NewActor2));
NPerson personSilvia =
new
NPerson(
"Silvia Moore"
, @
"http://www.nevron.com"
, symbolShapesFactory.CreateShape(SymbolShapes.FemaleFigure));
NPerson personEmily =
new
NPerson(
"Emily Smith"
, @
"http://www.nevron.com"
, symbolShapesFactory.CreateShape(SymbolShapes.NewActor));
NPerson personMonica =
new
NPerson(
"Monica Johnson"
, @
"http://www.nevron.com"
, symbolShapesFactory.CreateShape(SymbolShapes.NewActor3));
NPerson personSamantha =
new
NPerson(
"Samantha Miller"
, @
"http://www.nevron.com"
, symbolShapesFactory.CreateShape(SymbolShapes.FemaleFigure));
NPerson personIsabella =
new
NPerson(
"Isabella Davis"
, @
"http://www.nevron.com"
, symbolShapesFactory.CreateShape(SymbolShapes.NewActor));
persons.Add(personEmil);
persons.Add(personAndre);
persons.Add(personRobert);
persons.Add(personBob);
persons.Add(personPeter);
persons.Add(personSilvia);
persons.Add(personEmily);
persons.Add(personMonica);
persons.Add(personSamantha);
persons.Add(personIsabella);
// create family relationships
personEmil.m_Family = personSilvia;
personAndre.m_Family = personEmily;
personRobert.m_Family = personMonica;
// create friend relationships
personEmily.m_Friends.Add(personBob);
personEmily.m_Friends.Add(personMonica);
personAndre.m_Friends.Add(personPeter);
personAndre.m_Friends.Add(personIsabella);
personSilvia.m_Friends.Add(personBob);
personSilvia.m_Friends.Add(personSamantha);
personSilvia.m_Friends.Add(personIsabella);
personEmily.m_Friends.Add(personIsabella);
personEmily.m_Friends.Add(personPeter);
personPeter.m_Friends.Add(personRobert);
// create tooltip, URL redirect and cursor InteractivityStyle
for
(
int
i = 0; i < persons.Count; i++)
{
NTooltipAttribute tooltipAttribute =
new
NTooltipAttribute(persons[i].m_Name,
true
);
NUrlLinkAttribute redirectAttribute =
new
NUrlLinkAttribute(persons[i].m_Url,
false
);
NCursorAttribute cursorAttribute =
new
NCursorAttribute(CursorType.Hand);
NInteractivityStyle style =
new
NInteractivityStyle(
true
);
style.InteractivityAttributes.Add(tooltipAttribute);
style.InteractivityAttributes.Add(redirectAttribute);
style.InteractivityAttributes.Add(cursorAttribute);
persons[i].m_Shape.Style.InteractivityStyle = style;
NDrawingView1.Document.ActiveLayer.AddChild(persons[i].m_Shape);
}
// create the family relations
for
(
int
i = 0; i < persons.Count; i++)
{
NPerson currentPerson = persons[i];
if
(currentPerson.m_Family !=
null
)
{
NLineShape connector =
new
NLineShape();
NDrawingView1.Document.ActiveLayer.AddChild(connector);
connector.FromShape = currentPerson.m_Shape;
connector.ToShape = currentPerson.m_Family.m_Shape;
connector.LayoutData.SpringStiffness = 2;
connector.LayoutData.SpringLength = 100;
connector.Style.StrokeStyle =
new
NStrokeStyle(3, Color.Coral);
}
}
for
(
int
i = 0; i < persons.Count; i++)
{
NPerson currentPerson = persons[i];
for
(
int
j = 0; j < currentPerson.m_Friends.Count; j++)
{
NLineShape connector =
new
NLineShape();
NDrawingView1.Document.ActiveLayer.AddChild(connector);
connector.FromShape = currentPerson.m_Shape;
connector.ToShape = currentPerson.m_Friends[j].m_Shape;
connector.LayoutData.SpringStiffness = 1;
connector.LayoutData.SpringLength = 200;
connector.Style.StrokeStyle =
new
NStrokeStyle(3, Color.Green);
}
}
// get the shapes to layout
NNodeList shapes = Document.ActiveLayer.Children(NFilters.Shape2D);
// create a layout context
NLayoutContext layoutContext =
new
NLayoutContext();
layoutContext.GraphAdapter =
new
NShapeGraphAdapter();
layoutContext.BodyAdapter =
new
NShapeBodyAdapter(Document);
layoutContext.BodyContainerAdapter =
new
NDrawingBodyContainerAdapter(Document);
NSpringLayout layout =
new
NSpringLayout();
// configure the optional forces
layout.BounceBackForce.Padding = 80f;
layout.GravityForce.AttractionCoefficient = 0.1f;
layout.Layout(Document.ActiveLayer.Children(
null
), layoutContext);
layout.Layout(shapes,
new
NDrawingLayoutContext(NDrawingView1.Document));
// resize document to fit all shapes
NDrawingView1.Document.SizeToContent();
}
protected
void
NDrawingView1_QueryAjaxTools(
object
sender, EventArgs e)
{
// configure the client side tools
NDrawingView1.AjaxTools.Add(
new
NAjaxTooltipTool(
true
));
NDrawingView1.AjaxTools.Add(
new
NAjaxRedirectTool(
true
));
NDrawingView1.AjaxTools.Add(
new
NAjaxDynamicCursorTool(
true
));
}
public
class
NPerson
{
public
NPerson(
string
name,
string
url, NShape shape)
{
m_Shape = shape;
m_Shape.Text = name;
m_Name = name;
m_Friends =
new
List<NPerson>();
m_Family =
null
;
m_Url = url;
}
public
NShape m_Shape;
public
string
m_Name;
public
List<NPerson> m_Friends;
public
NPerson m_Family;
public
string
m_Url;
}
[VB.NET]
Imports
Nevron.Diagram
Imports
Nevron.Diagram.DataStructures
Imports
Nevron.Diagram.Filters
Imports
Nevron.Diagram.Layout
Imports
Nevron.Diagram.Shapes
Imports
Nevron.Dom
Imports
Nevron.GraphicsCore
Imports
Nevron.UI.WebForm.Controls
...
Protected
Sub
Page_Load(
ByVal
sender
As
Object
,
ByVal
e
As
System.EventArgs)
Handles
Me
.Load
' display the document in the view
Dim
Document
As
New
NDrawingDocument()
Document = NDrawingView1.Document
Document.BackgroundStyle.FrameStyle.Visible =
False
Document.BeginInit()
Document.Width = 1200
Document.Height = 1200
NDrawingView1.ViewLayout = CanvasLayout.Fit
Document.Style.TextStyle.TextFormat = TextFormat.XML
Document.Style.TextStyle.Offset =
New
NPointL(0, 50)
Document.Style.StartArrowheadStyle.Shape = ArrowheadShape.None
Document.Style.EndArrowheadStyle.Shape = ArrowheadShape.None
' configure shadow (inherited by all objects)
Document.Style.ShadowStyle =
New
NShadowStyle(ShadowType.GaussianBlur, Color.FromArgb(150, Color.Black),
New
Nevron.GraphicsCore.NPointL(3, 3), 1,
New
NLength(4))
Document.ShadowsZOrder = ShadowsZOrder.BehindDocument
' end document initialization
Document.EndInit()
' we will be using symbol shapes for this example
Dim
symbolShapesFactory
As
New
NSymbolShapesFactory()
symbolShapesFactory.DefaultSize =
New
NSizeF(100, 100)
Dim
persons
As
New
List(Of NPerson)()
' create persons
Dim
personEmil
As
New
NPerson(
"Emil Moore"
,
"http://www.nevron.com"
, symbolShapesFactory.CreateShape(SymbolShapes.MaleFigure))
Dim
personAndre
As
New
NPerson(
"Andre Smith"
,
"http://www.nevron.com"
, symbolShapesFactory.CreateShape(SymbolShapes.NewActor2))
Dim
personRobert
As
New
NPerson(
"Robert Johnson"
,
"http://www.nevron.com"
, symbolShapesFactory.CreateShape(SymbolShapes.NewActor4))
Dim
personBob
As
New
NPerson(
"Bob Williams"
,
"http://www.nevron.com"
, symbolShapesFactory.CreateShape(SymbolShapes.MaleFigure))
Dim
personPeter
As
New
NPerson(
"Peter Brown"
,
"http://www.nevron.com"
, symbolShapesFactory.CreateShape(SymbolShapes.NewActor2))
Dim
personSilvia
As
New
NPerson(
"Silvia Moore"
,
"http://www.nevron.com"
, symbolShapesFactory.CreateShape(SymbolShapes.FemaleFigure))
Dim
personEmily
As
New
NPerson(
"Emily Smith"
,
"http://www.nevron.com"
, symbolShapesFactory.CreateShape(SymbolShapes.NewActor))
Dim
personMonica
As
New
NPerson(
"Monica Johnson"
,
"http://www.nevron.com"
, symbolShapesFactory.CreateShape(SymbolShapes.NewActor3))
Dim
personSamantha
As
New
NPerson(
"Samantha Miller"
,
"http://www.nevron.com"
, symbolShapesFactory.CreateShape(SymbolShapes.FemaleFigure))
Dim
personIsabella
As
New
NPerson(
"Isabella Davis"
,
"http://www.nevron.com"
, symbolShapesFactory.CreateShape(SymbolShapes.NewActor))
persons.Add(personEmil)
persons.Add(personAndre)
persons.Add(personRobert)
persons.Add(personBob)
persons.Add(personPeter)
persons.Add(personSilvia)
persons.Add(personEmily)
persons.Add(personMonica)
persons.Add(personSamantha)
persons.Add(personIsabella)
' create family relationships
personEmil.m_Family = personSilvia
personAndre.m_Family = personEmily
personRobert.m_Family = personMonica
' create friend relationships
personEmily.m_Friends.Add(personBob)
personEmily.m_Friends.Add(personMonica)
personAndre.m_Friends.Add(personPeter)
personAndre.m_Friends.Add(personIsabella)
personSilvia.m_Friends.Add(personBob)
personSilvia.m_Friends.Add(personSamantha)
personSilvia.m_Friends.Add(personIsabella)
personEmily.m_Friends.Add(personIsabella)
personEmily.m_Friends.Add(personPeter)
personPeter.m_Friends.Add(personRobert)
' create tooltip, URL redirect and cursor InteractivityStyle
For
i
As
Integer
= 0
To
persons.Count - 1
Dim
tooltipAttribute
As
New
NTooltipAttribute(persons(i).m_Name,
True
)
Dim
redirectAttribute
As
New
NUrlLinkAttribute(persons(i).m_Url,
False
)
Dim
cursorAttribute
As
New
NCursorAttribute(CursorType.Hand)
Dim
style
As
New
NInteractivityStyle(
True
)
style.InteractivityAttributes.Add(tooltipAttribute)
style.InteractivityAttributes.Add(redirectAttribute)
style.InteractivityAttributes.Add(cursorAttribute)
persons(i).m_Shape.Style.InteractivityStyle = style
NDrawingView1.Document.ActiveLayer.AddChild(persons(i).m_Shape)
Next
' create the family relations
For
i
As
Integer
= 0
To
persons.Count - 1
Dim
currentPerson
As
NPerson = persons(i)
If
currentPerson.m_Family IsNot
Nothing
Then
Dim
connector
As
New
NLineShape()
NDrawingView1.Document.ActiveLayer.AddChild(connector)
connector.FromShape = currentPerson.m_Shape
connector.ToShape = currentPerson.m_Family.m_Shape
connector.LayoutData.SpringStiffness = 2
connector.LayoutData.SpringLength = 100
connector.Style.StrokeStyle =
New
NStrokeStyle(3, Color.Coral)
End
If
Next
For
i
As
Integer
= 0
To
persons.Count - 1
Dim
currentPerson
As
NPerson = persons(i)
For
j
As
Integer
= 0
To
currentPerson.m_Friends.Count - 1
Dim
connector
As
New
NLineShape()
NDrawingView1.Document.ActiveLayer.AddChild(connector)
connector.FromShape = currentPerson.m_Shape
connector.ToShape = currentPerson.m_Friends(j).m_Shape
connector.LayoutData.SpringStiffness = 1
connector.LayoutData.SpringLength = 200
connector.Style.StrokeStyle =
New
NStrokeStyle(3, Color.Green)
Next
Next
' get the shapes to layout
Dim
shapes
As
NNodeList = Document.ActiveLayer.Children(NFilters.Shape2D)
' create a layout context
Dim
layoutContext
As
New
NLayoutContext()
layoutContext.GraphAdapter =
New
NShapeGraphAdapter()
layoutContext.BodyAdapter =
New
NShapeBodyAdapter(Document)
layoutContext.BodyContainerAdapter =
New
NDrawingBodyContainerAdapter(Document)
Dim
layout
As
New
NSpringLayout()
' configure the optional forces
layout.BounceBackForce.Padding = 80F
layout.GravityForce.AttractionCoefficient = 0.1F
layout.Layout(Document.ActiveLayer.Children(
Nothing
), layoutContext)
layout.Layout(shapes,
New
NDrawingLayoutContext(NDrawingView1.Document))
' resize document to fit all shapes
NDrawingView1.Document.SizeToContent()
End
Sub
Protected
Sub
NDrawingView1_QueryAjaxTools(sender
As
Object
, e
As
EventArgs)
' configure the client side tools
NDrawingView1.AjaxTools.Add(
New
NAjaxTooltipTool(
True
))
NDrawingView1.AjaxTools.Add(
New
NAjaxRedirectTool(
True
))
NDrawingView1.AjaxTools.Add(
New
NAjaxDynamicCursorTool(
True
))
End
Sub
Public
Class
NPerson
Public
Sub
New
(name
As
String
, url
As
String
, shape
As
NShape)
m_Shape = shape
m_Shape.Text = name
m_Name = name
m_Friends =
New
List(Of NPerson)()
m_Family =
Nothing
m_Url = url
End
Sub
Public
m_Shape
As
NShape
Public
m_Name
As
String
Public
m_Friends
As
List(Of NPerson)
Public
m_Family
As
NPerson
Public
m_Url
As
String
End
Class
Article ID: 118, Created On: 11/9/2010, Modified: 12/1/2010