zkDiagram is an integration of the young (but already great) draw2d library by Andreas Hertz (http://draw2d.org/draw2d). The library allows Visio-style diagramming and Yahoo Pipes-style interactive visual programming on the web. The only problem is that AJAX server integration is of course not part of the library, so programming any significant application that can exploit such complex and highly interactive functionalities is a fairly major task.

Our ZK integration tries to address this problem. Along with standard diagramming functions, we support the zknode component that allows wrapping a ZK component in a diagram node, so that it can be given "ports" and connected to others in an editable diagram. Events are sent when users modify the diagram in any way (such as connecting ports). We have also added a still rather primitive "workflow" functionality, which notifies each component of input available coming from the connections and allows it to react by making output available through its output ports. We will use this extension to develop bayesian network and dynamic model editors for the web, but the possibilities are endless for the creative mind. Both draw2d and zkDiagram are very young projects, so even alpha state is an overstatement at this stage.

The following is a basic example of an editable workspace where a few shapes are created, one of which wraps a complex ZK component. Please be patient while we develop better examples and write documentation! The jar and source code can be downloaded using the links on the right. Please write us at ecoinformatics(at)uvm.edu if you have any questions or would like to help.

NOTE: if you're using IE and the frame below says "Processing..." and does not change, please try reloading. If this still doesn't fix it, try this page with Firefox.

Example editable workspace

Here is the source code of this example:

<?xml version="1.0" encoding="utf-8"?>
<?page title="ZK::First Draw2D Workspace"?>
<window border="none">
 
	<vbox id="map">
		<workspace width="600px" height="600px" router="bezier">
			<textnode fillColor="#bbbbbb" x="10" y="90" width="240"
				height="50" text="This is a simple demo. Try moving and connecting shapes." />
			<imagenode img="flow.gif" x="100" y="200" width="48"
				height="40">
				<port position="left" />
				<port position="right" />
			</imagenode>
			<imagenode img="variable.gif" x="100" y="250" width="48"
				height="40">
				<port position="top" />
				<port position="bottom" />
			</imagenode>
			<imagenode img="flow.gif" x="200" y="300" width="48"
				height="40">
				<port position="top" />
				<port position="bottom" />
			</imagenode>
			<zknode x="200" y="175" width="300" height="60">
				<!--  any ZK component... -->
				<window border="none">
					<listbox id="box" width="300px" multiple="true"
						checkmark="true">
						<listhead>
							<listheader label="Name" />
							<listheader label="Gender" />
							<listheader label="Age" />
							<listheader label="Description" />
						</listhead>
						<listitem>
							<listcell label="Mary" />
							<listcell label="FEMALE" />
							<listcell label="18" />
							<listcell label="A young lady." />
						</listitem>
						<listitem>
							<listcell label="John" />
							<listcell label="MALE" />
							<listcell label="20" />
							<listcell label="A college student." />
						</listitem>
					</listbox>
				</window>
				<!-- and as many ports as we want -->
				<port position="left" />
				<port position="left" />
				<port position="right" />
			</zknode>
		</workspace>
	</vbox>
</window>