The sample code will show several features of Diagram control:<\/p>\n
- \n
- TableNode API<\/li>\n
- in-place edit<\/li>\n
- work with groups<\/li>\n
- graph traversal<\/li>\n<\/ul>\n
Questions or IVR messages and their possible answers \/ responses will be displayed respectively in caption area and cells of TableNode objects. Helper nodes at table bottom will let users add or remove rows. DiagramLink objects connecting table rows to other tables will define the dialogue flow, i.e. what next question \/ message to display after user selects option from current message.<\/p>\n
Let’s start by creating a new .NET Windows Forms project. If you have installed MindFusion diagram control and selected toolbox integration from setup wizard screen, you should now see a Diagram component and DiagramView control in the toolbox. If they are not available, right click and select Choose Items, navigate to installation folder and select the mindfusion.diagramming and mindfusion.diagramming.winforms assemblies. Now drag a Diagram component to the form, and set its name to “diagram”. This automatically adds a diagramming.dll reference to the project. Drag a DiagramView (which add diagramming.winforms reference) and name it diagramView. Set its Diagram property to “diagram”, selecting it from the drop-down in property grid.<\/p>\n
We will allow creation only of tables and links, so let’s set DiagramView.Behavior property to LinkTables. Now if users draw on the diagram canvas, the component will create TableNode if the mouse pointer is over unoccupied part of the diagram, or a DiagramLink if the mouse points a table. If we wanted to support more type of nodes, we could add their prototypes to a NodeListView instance and let users create new instances via drag-and-drop.<\/p>\n
Add the following fields and constructor code to set up appearance and behavior of diagram elements.<\/p>\n
public MainForm()\n{\n\tInitializeComponent();\n\n\t\/\/ set up initial table appearance\n\tdiagram.TableNodeStyle.Brush = new MindFusion.Drawing.SolidBrush(Color.LightGray);\n\tdiagram.TableRowCount = 1;\n\tdiagram.TableColumnCount = 1;\n\tdiagram.TableCaption = \"question\";\n\tdiagram.NodeEffects.Add(new GlassEffect());\n\n\t\/\/ highlight a row when clicked\n\tdiagram.AutoHighlightRows = true;\n\n\t\/\/ find link routes automatically\n\tdiagram.RouteLinks = true;\n\n\t\/\/ allow edit texts by double click\n\tdiagramView.AllowInplaceEdit = true;\n\n\t\/\/ row anchor points\n\trightOutput = new AnchorPattern(\"Right\");\n\trightOutput.Points.Add(new AnchorPoint(100, 50, false, true));\n\n\t\/\/ table anchor points\n\tinput = new AnchorPattern(\"Input\");\n\tinput.Points.Add(new AnchorPoint(50, 0, true, false));\n\tinput.Points.Add(new AnchorPoint(50, 100, true, true));\n}\n\nAnchorPattern rightOutput;\nAnchorPattern input;\n<\/pre>\nSelect the diagram component in form editor and double click its NodeCreated event to add event handler. NodeCreated is raised when the user draws a new node. Add following code to associate a question \/ IVR message with the table, and initialize some default texts. The BeginEdit method automatically opens in-place editor to let user edit caption text immediately after drawing. We also create + and – ShapeNodes that will act as button widgets attached to the table’s bottom-right corner.<\/p>\n
private void OnNodeCreated(object sender, MindFusion.Diagramming.NodeEventArgs e)\n{\n\tvar table = e.Node as TableNode;\n\tif (table != null)\n\t{\n\t\tint tableId = (1 + diagram.Nodes.Count \/ 3);\n\t\ttable.Id = tableId;\n\t\ttable.RowAnchorPattern = rightOutput;\n\t\ttable.AnchorPattern = input;\n\t\ttable.ConnectionStyle = TableConnectionStyle.Both;\n\t\ttable[0, 0].Text = \"option 1\";\n\t\ttable.Caption = \"question \" + tableId;\n\t\tdiagramView.BeginEdit(table);\n\n\t\t\/\/ create + button for adding new rows\n\t\tvar r = table.Bounds;\n\t\tvar p = new PointF(r.Right - 14, r.Bottom - 8);\n\t\tvar s = new SizeF(6, 6);\n\t\tvar plus = diagram.Factory.CreateShapeNode(p, s, Shapes.Cross);\n\t\tplus.Brush = new MindFusion.Drawing.SolidBrush(Color.Green);\n\t\tplus.AttachTo(table, AttachToNode.BottomRight);\n\t\tplus.Tag = \"+\";\n\n\t\t\/\/ create - button for deleting selected row\n\t\tp.X += 7;\n\t\tp.Y += 2;\n\t\ts.Height -= 4;\n\t\tvar minus = diagram.Factory.CreateShapeNode(p, s, Shapes.Rectangle);\n\t\tminus.Brush = new MindFusion.Drawing.SolidBrush(Color.Red);\n\t\tminus.AttachTo(table, AttachToNode.BottomRight);\n\t\tminus.Tag = \"-\";\n\n\t\tplus.Locked = minus.Locked = true;\n\t\ttable.SubordinateGroup.AutoDeleteItems = true;\n\t}\n}\n<\/pre>\nNow add a NodeClicked handler that adds or deletes rows. If the + button is clicked, the code inserts a new row before current highlighted row. If the – button is clicked, the handler deletes current highlighted row.<\/p>\n
private void OnNodeClicked(object sender, NodeEventArgs e)\n{\n\tif (\"+\".Equals(e.Node.Tag))\n\t{\n\t\tvar table = (TableNode)e.Node.MasterGroup.MainItem;\n\t\tif (table.HighlightedRow == -1)\n\t\t\ttable.RowCount++;\n\t\telse\n\t\t\ttable.InsertRow(table.HighlightedRow);\n\t}\n\n\tif (\"-\".Equals(e.Node.Tag))\n\t{\n\t\tvar table = (TableNode)e.Node.MasterGroup.MainItem;\n\t\tif (table.HighlightedRow != -1)\n\t\t\ttable.DeleteRow(table.HighlightedRow);\n\t}\n}\n<\/pre>\nFinally, lets create export function that will traverse the dialogue graph and export it to a custom-format XML file, which could then be passed on to a system processing the dialogues, such as IVR service.<\/p>\n
private void btnExport_Click(object sender, EventArgs e)\n{\n\tvar fileDlg = new SaveFileDialog();\n\tif (fileDlg.ShowDialog() == DialogResult.OK)\n\t{\n\t\tvar doc = new XmlDocument();\n\t\tvar root = doc.CreateElement(\"Dialogue\");\n\t\tdoc.AppendChild(root);\n\n\t\tforeach (var node in diagram.Nodes)\n\t\t{\n\t\t\tvar table = node as TableNode;\n\t\t\tif (table != null)\n\t\t\t{\n\t\t\t\tvar questionElement = doc.CreateElement(\"Question\");\n\t\t\t\troot.AppendChild(questionElement);\n\n\t\t\t\tint id = (int)table.Id;\n\t\t\t\tquestionElement.SetAttribute(\"Id\", table.Id.ToString());\n\t\t\t\tquestionElement.SetAttribute(\"Text\", table.Caption);\n\n\t\t\t\tfor (int r = 0; r < table.Rows.Count; r++)\n\t\t\t\t{\n\t\t\t\t\tstring answer = table[0, r].Text;\n\t\t\t\t\tvar answerElement = doc.CreateElement(\"Answer\");\n\t\t\t\t\tquestionElement.AppendChild(answerElement);\n\t\t\t\t\tanswerElement.SetAttribute(\"Text\", answer);\n\t\t\t\t\tif (table.Rows[r].OutgoingLinks.Count > 0)\n\t\t\t\t\t{\n\t\t\t\t\t\tvar link = table.Rows[r].OutgoingLinks[0];\n\t\t\t\t\t\tvar nextQuestion = (TableNode)link.Destination;\n\t\t\t\t\t\tanswerElement.SetAttribute(\"Text\", answer);\n\t\t\t\t\t\tanswerElement.SetAttribute(\"NextId\", nextQuestion.Id.ToString());\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tdoc.Save(fileDlg.FileName);\n\t}\n}\n<\/pre>\nIf you run the application now and draw several tables and links, you should see a similar screen:<\/p>\n
![\"dialogue](\"http:\/\/mindfusion.dev\/_samples\/dialogue_editor.png\")
<\/p>\nThe code above uses MindFusion\u2019s .NET API and can be used with Windows Forms, WPF, Silverlight and ASP.NET diagramming components. The Java API for Android and desktop Swing application will look similar, with setter method calls instead of property assignments.<\/p>\n
You can download the trial version of any MindFusion.Diagramming component from this page<\/a>.<\/p>\n
Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"
In this post we’ll demonstrate how to create a graphical interface for editing dialogues using MindFusion diagramming API. The sample could be used as a module in different kinds of applications, such as software for creating and conducting surveys, editing … Continue reading