A Guide to Diagram – Introduction
By Duncan Mills-Oracle on Jun 26, 2014
Starting With The Basics
So the key point about the DVT diagram is that the layouts are not picked from a fixed set. We ship a set of demo layouts that you can re-use, but in most cases we expect that you'll want to create your own. Rest assured, this is a topic that I'll be covering in some detail later in this series of articles. The good news is that this ability to precisely control layout just makes the component even more useful and powerful!
Here's a screen shot of one of the diagram demos, just to wet your appetite. This example embodies a classic diagram style of visualization, however, it's just the start of what you are able to acheive.
What Diagram is Not
What the Diagram Can Show
You can go away and have a play for yourself with the online diagram demos at http://jdevadf.oracle.com to get a feel for the component in action, but the basics are simple. The user can pan around the diagram using the mouse or the thumbnail view, and zoom, using the specialist zoom bar or mouse. Of course if the user is on a tablet then they can use their fingers with standard drag and pinch gestures to pan and zoom as well.
Diagram nodes themselves can be grouped and stacked in various ways, something that we'll cover in later articles, but when you click on a particular node you may well see an activity icon which allows you to carry out some additional operations. Here's a quick summary for reference:
|Isolate||Allows you to "zoom in" to just view this node (and it's containees) and hide all other nodes|
|Additional Links||When you have isolated a node clicking this icon will pull in other nodes that are directly linked to this node|
|Restore||When you have isolated a node, this icon appears at the top is the diagram and undoes the isolation, restoring the previous view|
|Drill||Used when nodes contain other nodes this icon allows you to drill into the container and just focus on it's contents. The diagram renders a breadcrumb trail for you to navigate back up through the hierarchy.|
|Delete||if your diagram node is marked as editiable (ie. readOnly="false") then this icon will appear and will trigger the nodeDeleteListener associated with the diagram|
|Preview Stack||When several nodes of the same type are "stacked together", this icon will overlay an exploded version of the stack so that you can see the individual members|
|Close Stack||loses the preview overlay of the stacked node and returns back to the main diagram view|
|Unstack||Explodes the stack to show each node individually|
|Control Panel||Located in the top / left of the diagram clicking this icon will reveal or hide the zoom controls|
|Overviewl Panel||Located in the bottom / left of the diagram clicking this icon will reveal or hide the thumbnail view|
|Legend Panel||Located in the top / right of the diagram clicking this icon will reveal or hide the legend for the diagram|
|Palette Panel||Located in the top / right of the diagram clicking this icon will reveal or hide the palette that you can use for node types and links to drag onto an updatable diagram|
How it works
In the Next Article
Hopefully this introductory article has ignited your interest in diagram and opened your mind to some of the potential uses for it within your applications. In the next article in this series I'll start to look at diagram from the technical perspective, by looking at the basic data structures required to make diagram tick.
The Learning Diagram Series