Appboard/2.5/builder/widgets/diagrammer/tutorial - Revision history

imported>Mike.berman: added more detail about link shape which was hard to figure out without more instruction

2014-10-10T13:18:19Z

added more detail about link shape which was hard to figure out without more instruction

← Older revision		Revision as of 13:18, 10 October 2014
Line 131:		Line 131:

	# Click the ''Link creation tool'' in the diagrammer palette (right-most icon). You can click-and-hold to present a drop-down list of line styles such as solid or dashed.		# Click the ''Link creation tool'' in the diagrammer palette (right-most icon). You can click-and-hold to present a drop-down list of line styles such as solid or dashed.
	# With this mode enabled an additional icon is now available on the right to select the segment style such as 90-degree sharp corners, 90-degree rounded corners, free-form angles, or curved.		# With this mode enabled an additional icon is now available on the right to select the link shape (segment style) such as 90-degree sharp corners, 90-degree rounded corners, free-form angles, or curved.
	# Select the ''Basic Link'' from the ''Link Types'' palette on the left side.		# Select the ''Basic Link'' from the ''Link Types'' palette on the left side.
	# Now click on a node to start a link.		# Now click on a node to start a link.
	# Click on another node to complete the link (minimum number of segments).		# Click on another node to complete the link. (This is the minimum number of segments. You can optionally click in the empty space between the nodes while drawing the segment, to create advanced links using the link shape).
	# Repeat the above using different line styles and segment styles, and connect up different nodes.		# Repeat the above using different line styles and segment styles, and connect up different nodes.

imported>Mike.berman: minor grammatical changes

2014-10-10T13:06:18Z

minor grammatical changes

← Older revision		Revision as of 13:06, 10 October 2014
Line 21:		Line 21:
	* Adding a Diagrammer Widget		* Adding a Diagrammer Widget

	=== Log ~~into~~ AppBoard ===		=== Log in to AppBoard ===

	The first step is to log ~~into~~ AppBoard as an administrator. If using a clean install on your local system then the default access and credentials are as follows:		The first step is to log in to AppBoard as an administrator. If using a clean install on your local system then the default access and credentials are as follows:

	* URL: http://localhost:8080		* URL: http://localhost:8080
Line 71:		Line 71:
	##* Click the ''Next'' button.		##* Click the ''Next'' button.
	## On the ''Visualization'' step:		## On the ''Visualization'' step:
	##* ''Diagram Model'': Click the ''Add'', set ''Name'' to <tt>Network Topology</tt> and click the ''Save'' button.		##* ''Diagram Model'': Click the ''Add'' button, set ''Name'' to <tt>Network Topology</tt> and click the ''Save'' button.
	##* Click the ''Next'' button.		##* Click the ''Next'' button.
	## No need to do anything on the ''Options'' step, just click ''Finish'' to complete the wizard.		## No need to do anything on the ''Options'' step, just click ''Finish'' to complete the wizard.
	# You should now see a Diagrammer widget showing our empty diagram.		# Select the ''Builder'' builder mode. You should now see a Diagrammer widget showing our empty diagram.

	=== Creating Nodes ===		=== Creating Nodes ===
Line 114:		Line 114:

	# Click and drag the <tt>Network Node</tt> item from the palette onto the diagram canvas (the big empty space).		# Click and drag the <tt>Network Node</tt> item from the palette onto the diagram canvas (the big empty space).
	# A ''Edit Data Source'' dialog will pop up, select one of the records and click the ''Select Record'' button. Take note of the <tt>Type</tt> and <tt>Status</tt>		# An ''Edit Data Source'' dialog will pop up, select one of the records and click the ''Select Record'' button. Take note of the <tt>Type</tt> and <tt>Status</tt>
	# The dialog should go away and a new icon for the selected record should now appear in the diagram. The icon and color should reflect the rules as configured when setting up the <tt>Network Node</tt> palette item.		# The dialog should go away and a new icon for the selected record should now appear in the diagram. The icon and color should reflect the rules as configured when setting up the <tt>Network Node</tt> palette item.
	# Repeat this process making sure to pick a variety of types and statuses.		# Repeat this process making sure to pick a variety of types and statuses.

imported>Jason.nicholls: /* Create Data Source */

2014-09-23T13:46:16Z

Create Data Source

← Older revision		Revision as of 13:46, 23 September 2014
Line 42:		Line 42:
	## Click the ''Add Data Source'' button.		## Click the ''Add Data Source'' button.
	# The ''Data Source Wizard'' will now display the ''Connect'' step, complete the following fields:		# The ''Data Source Wizard'' will now display the ''Connect'' step, complete the following fields:
	## ''Directory'': click the magnifying glass and select <tt>examples/training</tt>.		## ''Directory'': click the magnifying glass and select <tt>/examples/training</tt>.
	## ''Header Meta Delimiter'': ''Asterisk''		## ''Header Meta Delimiter'': ''Asterisk''
	## Click the ''Next'' button.		## Click the ''Next'' button.

imported>Jason.nicholls: /* Create Data Source */

2014-09-23T13:32:06Z

Create Data Source

← Older revision		Revision as of 13:32, 23 September 2014
Line 41:		Line 41:
	## ''Select an adapter type'': ''File'' -> ''CSV Directory''		## ''Select an adapter type'': ''File'' -> ''CSV Directory''
	## Click the ''Add Data Source'' button.		## Click the ''Add Data Source'' button.
	# The Data Source Wizard will now display the ''Connect'' step, complete the following fields:		# The ''Data Source Wizard'' will now display the ''Connect'' step, complete the following fields:
	## ''Directory'': click the magnifying glass and select <tt>examples/training</tt>.		## ''Directory'': click the magnifying glass and select <tt>examples/training</tt>.
	## ''Header Meta Delimiter'': ''Asterisk''		## ''Header Meta Delimiter'': ''Asterisk''

imported>Jason.nicholls: /* Conclusion */

2014-09-23T10:09:18Z

Conclusion

← Older revision		Revision as of 10:09, 23 September 2014
Line 145:		Line 145:
	== Conclusion ==		== Conclusion ==

	That's it~~. You~~ should now have your first diagram and Diagrammer Widget. Although this ~~was~~ a basic tutorial the process of creating more complex diagrams is a matter of repeating the steps, i.e. creating appropriate data sources, node types, link types, filters, and placing things onto the diagram.		That's it, you should now have your first diagram and Diagrammer Widget! Although this is intended as a basic tutorial the process of creating more complex diagrams is a matter of repeating the steps, i.e. creating appropriate data sources, node types, link types, filters, and placing things onto the diagram.

	Some additional ~~steps~~ are recommended to become more familiar with this widget:		Some additional exercises are recommended to become more familiar with this widget:

	* Create your own data driven ''Link Type''		* Create your own data driven ''Link Type''
	* Create some widget ''Actions'' to show mouse-over (hover) data-tips		* Create some widget ''Actions'' to show mouse-over (hover) data-tips
	* Create multiple diagrams and switch them using widget ''Actions''		* Create multiple diagrams and switch them using widget ''Actions''

imported>Jason.nicholls at 10:08, 23 September 2014

2014-09-23T10:08:12Z

← Older revision		Revision as of 10:08, 23 September 2014
Line 142:		Line 142:

	[[File:appboard-2.5-diagrammer-tutorial-links.png\|frame\|center\|Adding links to the diagram]]		[[File:appboard-2.5-diagrammer-tutorial-links.png\|frame\|center\|Adding links to the diagram]]

			== Conclusion ==

			That's it. You should now have your first diagram and Diagrammer Widget. Although this was a basic tutorial the process of creating more complex diagrams is a matter of repeating the steps, i.e. creating appropriate data sources, node types, link types, filters, and placing things onto the diagram.

			Some additional steps are recommended to become more familiar with this widget:

			* Create your own data driven ''Link Type''
			* Create some widget ''Actions'' to show mouse-over (hover) data-tips
			* Create multiple diagrams and switch them using widget ''Actions''

imported>Jason.nicholls: /* Overview */

2014-09-23T10:02:05Z

Overview

← Older revision		Revision as of 10:02, 23 September 2014
Line 3:		Line 3:
	== Overview ==		== Overview ==

	The Diagrammer Widget is used to provide custom layouts with data driven nodes and links. Refer to the [appboard/2.5/builder/widgets/diagrammer\|Diagrammer Widget] page for complete documentation.		The Diagrammer Widget is used to provide custom layouts with data driven nodes and links. Refer to the [[appboard/2.5/builder/widgets/diagrammer\|Diagrammer Widget]] page for complete documentation.

			This tutorial runs through the basics for setting up a diagrammer widget and creating your first data driven diagram.


	{{Note\|The Diagrammer widget can only make use of Data Source entities that have a primary key(s) defined. This is because of the way the nodes and links must be uniquely identified for update purposes.}}		{{Note\|The Diagrammer widget can only make use of Data Source entities that have a primary key(s) defined. This is because of the way the nodes and links must be uniquely identified for update purposes.}}

	~~Now that we have an idea of what a Diagrammer Widget is and why we would use one, let's try to create and use one.~~

	== Exercise ==		== Exercise ==

imported>Jason.nicholls: /* Overview */

2014-09-23T10:01:09Z

Overview

← Older revision		Revision as of 10:01, 23 September 2014
Line 3:		Line 3:
	== Overview ==		== Overview ==

	The Diagrammer Widget is ~~a powerful tool that allows for the diagramming of~~ nodes and links ~~in custom layouts that are directly referencing data from adapters~~. ~~The referenced data can be run through filters or rules that provide icons, status icons, colors, and labels~~. ~~The~~ Diagrammer Widget does not use Data Collections to display data. Instead, it accesses data directly from configured adapters. By accessing the data directly from the adapters the widget can ensure that it gets the exact reference to a row of data that is unaffected by client side sorting, filtering, or grouping.		The Diagrammer Widget is used to provide custom layouts with data driven nodes and links. Refer to the [appboard/2.5/builder/widgets/diagrammer\|Diagrammer Widget] page for complete documentation.

	{{Note\|The Diagrammer widget can only make use of Data Source entities that have a primary key(s) defined. This is because of the way the nodes and links must be uniquely identified for update purposes.}}		{{Note\|The Diagrammer widget can only make use of Data Source entities that have a primary key(s) defined. This is because of the way the nodes and links must be uniquely identified for update purposes.}}


	Now that we have an idea of what a Diagrammer Widget is and why we would use one, let's try to create and use one.		Now that we have an idea of what a Diagrammer Widget is and why we would use one, let's try to create and use one.

imported>Jason.nicholls: /* Creating Link Types */

2014-09-23T09:58:00Z

Creating Link Types

@@ Line 124: / Line 124: @@
 [[File:appboard-2.5-diagrammer-tutorial-nodes.png|frame|center|Adding nodes to the diagram]]
-== Creating Link Types ==
+=== Creating Links ===
-In this section we will learn to use Basic Links and Custom Type Links.
+Links must connect one node to another. When placing links start on a node and end on a node, clicks in between are used to create extra segments which allow the line to be routed along a particular path.
-[[File:Linkexample.JPG]]
+To create data driven links you would need to create a new ''Link Type'' in a similar process to creating ''Node Types''. No icons apply but the default color can be set along with a Color Filter to drive the colors based on data.
-# Click the Create Link button (the horizontal arrow) on the Toolbar, and choose a link style from the button that appears to the right.
+[[File:appboard-2.5-diagrammer-tutorial-links.png|frame|center|Adding links to the diagram]]

imported>Jason.nicholls: /* Creating Nodes */

2014-09-23T09:26:42Z

Creating Nodes

← Older revision		Revision as of 09:26, 23 September 2014
Line 123:		Line 123:

	[[File:appboard-2.5-diagrammer-tutorial-nodes.png\|frame\|center\|Adding nodes to the diagram]]		[[File:appboard-2.5-diagrammer-tutorial-nodes.png\|frame\|center\|Adding nodes to the diagram]]


	~~[[File:Createnodes.JPG]]~~


	~~# In the Builder, click the Add New Node Type button (Green + sign beneath the Node Types Palette).~~
	~~# Type “State Node” in the Palette Label field.~~
	~~# Choose any icon to represent the node.~~
	~~# Choose sample.USA_States.stateCapitals as the DataSource to use.~~
	~~# Click Next.~~
	~~# Observe the "Available Tokens" section. Put “${Capital}” in the label field.~~
	~~# Click Next.~~
	~~# Press “Add” button next to "Color Filter".~~
	~~# In the "Color Filter Rules" window, name the rule set "Population Color Rules".~~
	~~# Click the "Add Color" button twice.~~
	~~# On the first color rule, pick a red color, pick Population in the green drop down, the greater than symbol ‘>’ in the grey drop down, and type 3000000 as the value.~~
	~~# On the second color rule, pick a green color, pick Population in the green drop down, use the less than ‘<’ symbol in the grey drop down, and type 3000000.~~
	~~# Close the window. Confirm that the "Population Color Rules" set is selected under "Color Filter".~~
	~~# Click Next.~~
	~~# Press “Add” button next to "Icon Filter".~~
	~~# Now in the "Icon Filter Rules" window, name the new rule set "Latitude Icon Rules".~~
	~~# Click the "Add" button twice.~~
	~~# Choose Router under "Available Icons", Latitude in the green drop down, > for the operator, and 36 for the value.~~
	~~# Choose Server 1 under "Available Icons", Latitude property in the green drop down, < for the operator, and 36 for the value.~~
	~~# Close the window. Confirm that the "Latitude Icon Rules" set is selected under "Icon Filter".~~
	~~# Click Finish.~~
	~~# Drag and drop the “State Node” type to the blank diagram.~~
	~~# Choose Montgomery as the item you would like to drop in the popup table.~~
	~~# Repeat for Austin, Hartford, Juneau until you get a diagram displaying four nodes with different icons and colors.~~

	== Creating Link Types ==		== Creating Link Types ==