®
Building Advanced Desktop and Web
User Interfaces for the .NET Platform
A Technical Introduction to ILOG Diagrammer for .NET
© 2008 ILOG, All rights reserved.
ILOG Worldwide Information Center – Tel: 1–800–FOR–ILOG (US only) or +1 775 881 2800 (International) • URL: http://www.ilog.com
Australia – ILOG Australia Pty. Ltd. – Sydney – Tel. +61 2 82 48 28 00 – E-mail: [email protected]
China – ILOG (S) Pte. Ltd. – Beijing Representative Office – Tel. +86 10 8518 1080 – E-mail: [email protected]
France – ILOG S.A. – Gentilly – Tel: +33 (0)1 49 08 35 00 – E-mail: [email protected]
Germany – ILOG Deutschland GmbH – Bad Homburg v.d.H. – Tel: +49 6172 40 60 – 0 – E-mail: [email protected]
Japan – ILOG Co., Ltd – Tokyo – Tel: +81 3 5211 5770 – E-mail: [email protected]
Singapore – ILOG (S) Pte. Ltd. – Singapore – Tel: +65 67 73 06 26 – E-mail: [email protected]
Spain – ILOG S.A. – Madrid – Tel: +34 91 710 2480 – E-mail: [email protected]
UK – ILOG Ltd. – Bracknell – Tel: +44 (0) 1344 66 16 00 – E-mail: [email protected]
USA – ILOG, Inc. – Sunnyvale, CA – Tel: +1 408-991-7000 – E-mail: [email protected]
Representatives and distributors in other countries
ILOG, CPLEX, LogicTools and the ILOG logotype are registered trademarks, and all ILOG product names are trademarks of ILOG. All other brand, product and company names are trademarks or registered trademarks
of their respective holders. The information presented in this brochure is summary in nature, subject to change, non-contractual, and intended only for general information.
-1-
A Technical Introduction to ILOG Diagrammer for .NET
Microsoft Visual Studio and the underlying services included in the .NET framework enable the development of user
interfaces that are based on standard controls and interactive gadgets. But every time developers need to manage
information based on sophisticated visual schemes and interactions, the amount of work becomes very important and
requires expertise that is often beyond the capabilities of typical projects. In order to fill the gap between what the
standard .NET environment natively provides and the advanced visualization applications that developers need to create,
ILOG offers ILOG Diagrammer for .NET, a comprehensive set of tools, components and C# class libraries for building
graphical editing, visualization, supervision and monitoring displays. The following article describes the different services
offered with ILOG Diagrammer for .NET, and how they can be used within the standard development cycle to create
advanced user desktop and Web interfaces.
Diagrams, dashboards and editors
ILOG Diagrammer for .NET is particularly well-suited to creating two broad categories of user interface displays, namely
diagrams and dashboards, both of which present and permit interaction with business data through highly-custom visual
representations. Diagrams present interconnections between objects in displays such as entity-relational diagrams,
communications networks, PERT charts and process flowcharts. These types of displays can represent either physical or
logical views. Dashboard and monitoring panels are important for realistic or symbolic displays. These displays are often
referred to as business dashboards in the business intelligence domain, and used to oversee the key performance
indicators (KPIs) of business processes. They are displayed in graphic objects such as gauges and charts. In industrial
domains, these displays are used to show industrial schematics and process control or supervisory control and data
acquisition (SCADA) applications.
Examples of displays and editors created with ILOG Diagrammer for .NET:
A business process modeler using
standard BPMN notation
An interactive Web/Ajax editor
for automatic or manual creation
of UML schemas
A monitoring panel for process
control activities
A core graphical librar y
The foundation of ILOG Diagrammer for .NET is an object-oriented library of lightweight vector graphic objects that can
be defined and manipulated like other standard controls. This library defines dozens of graphic objects and containers,
panels, connections between objects and custom graphics that can be assembled together to create appropriate
representations. Through dedicated viewing controls, these graphic objects can be displayed and manipulated in
Windows Forms and Web Forms applications.
Individual classes of graphic objects offer the following primary services:
•
•
•
•
•
•
They implement visual primitives such as shapes, text, images and paths.
They also implement objects such as links to display connections between other graphic objects (which can
have anchor points).
They have a long list of properties used to specify their appearance, such as colors, fill types, strokes, textures,
opacity, and transformations.
They notify the framework of events when their appearance or properties have changed.
They handle other kinds of events, in particular those related to user interactions.
In the case of containers, they manage their children with a set of placement constraints and display policies.
-2-
A Technical Introduction to ILOG Diagrammer for .NET
The framework adds the following services for general operations:
•
When used to create a graphical editing tool, the framework handles the management of user interactions
(including selection, resizing, reshaping, drag and drop, and palettes.)
•
Import services such as the Scalable Vector Graphics (SVG) from W3C and other popular image formats
•
Animation engine used to define and control time-based animation
•
Ready-to-use symbols that implement common representations such as flow charts, business processes, UML
entities and connectors, and gauges
•
XML persistence of all objects of a given diagram or a container
•
Printing services
•
Advanced Graph Layout algorithms for automatic organization of diagrams (as called “graphs”)
Typical C# code to create these objects looks like:
public class TestForm : Form
{
public TestForm() : base()
{
// Create a view control
DiagramView view = new DiagramView();
view.Dock = System.Windows.Forms.DockStyle.Fill;
// Create and configure a graphical object and place it in a container
Group container = new Group();
Ellipse ellipse = new Ellipse(0, 0, 100, 100);
ellipse.Stroke = new Stroke(Color.Blue, 3);
ellipse.Fill = new LinearGradientFill(……);
container.Objects.Add(ellipse);
// Put all together
view.Content = container;
Controls.Add(view);
Size = new Size(200, 200);
}
}
ILOG Diagrammer for .NET’s application programming interface (API) can be used to create any kind of graphical
representation built up from the basic shapes. But more commonly, the API is used to add specific behavior or fine-tune
user interface graphics that have been defined with another tool, such as Adobe Illustrator or InkScape, and imported into
a Diagrammer for .NET container (using the SVG import service).
Developing desktop and Web applications w ith MS Visual Studio
ILOG Diagrammer for .NET is completely integrated with Visual Studio, and the development process is familiar to .NET
developers. Diagrams and graphic objects can be created from Visual Studio’s design view using any of several
predefined graphic parts present in the toolbox. Alternately, the static parts of the graphic object can be defined in another
graphics tool, as mentioned above. The product is written entirely in C#, enabling integrated code editing and generation,
and event handlers are defined as with traditional .NET controls. Property editors and configuration panels allow
developers to configure an object’s properties and events, including graphical attributes and visual effects. Graph Layout
parameters, which affect a set of graphic objects, can also be set from Visual Studio.
This development process is similar for both desktop and Web applications. The Web/Ajax features of Diagrammer for
.NET leverage the recent ASP.NET Ajax 1.0 extensions from Microsoft, and a pre-built list of ASP.NET controls shipped
with the product enables the creation of monitoring and Web editors using the same underlying diagramming technology.
The following services are directly available from Visual Studio:
•
•
•
•
Wizards for creating applications: Application templates are available from the “New Project” dialogs to create
Winform applications or a library of new visual symbols. From the “New Web Site” menu, templates are available
to create traditional or Ajax-enabled websites.
Design mode: When loading an ILOG Diagrammer for .NET container, a dedicated editor appears in Visual
Studio to visually design new symbols, diagrams or dashboards. What is drawn and customized in this designer
is simultaneously translated into corresponding code and resource files. A “Smart tag” icon of the selected
graphic object is available to access the common design-time actions specific to this object.
Toolboxes: Dedicated palettes of commonly-needed graphics are provided with different types of graphic
objects such as basic shapes, flowchart objects, business process objects, connectors, container panels,
controls, scales objects, and gauges.
Event Management: Events and property changes can be directly configured and implemented.
-3-
A Technical Introduction to ILOG Diagrammer for .NET
•
•
Additional wizards: For more complex properties, such as advanced visual effects or graph layout parameters,
dedicated wizards are available to specify parameters and preview the effect of the new settings.
Online help: From the source code editor and the design view, it is possible to invoke the help function by
pressing F1, displaying the corresponding contextual online help.
The following pictures illustrate how Visual Studio is used to create graphical applications.
The Visual Studio design environment
Implementing event handlers on graphics objects
Automatic Graph Layout
As mentioned earlier, many types of data can be visualized as a set of nodes and interconnecting links, which we refer to
as a “diagram” (but that is also referred to as a graph or network). Examples of graphs include business organizational
charts, workflow diagrams, telecom network displays and genealogical trees. Whenever these graphs become large or
heavily interconnected, it becomes difficult to see the relationships between the various nodes and links (also known as
“edges”). Although the nodes and links can be manually repositioned by the users, it becomes quite difficult to do this as
the diagram becomes large. This is where the graph layout algorithms built into ILOG
Diagrammer for .NET can help.
Example of a network topology using automatic
hierarchical layout
Example of a radial topology
-4-
A Technical Introduction to ILOG Diagrammer for .NET
ILOG Diagrammer for .NET’s graph layout algorithms take a list of existing graphic objects and their connections, and
apply a given placement scheme to automatically choose new positions for the nodes and to route the interconnecting
links. The goal of the algorithms is to produce a new configuration of the graph that is optimally readable by the human
user. Different applications require different “topologies” of diagrams, however, and , for this reason, ILOG Diagrammer
for .NET provides a collection of the most commonly used graph layout algorithms, including hierarchical (for “flow” type
diagrams), tree, radial tree, grid and force directed (used, for example, in communication network topology displays).
The algorithm can be chosen either via the API or through interactive wizards. The following example shows how to
create an instance of the TreeLayout class, set some of its parameters, and associate it with a graphic container:
TreeLayout treeLayout = new TreeLayout();
// Create a “top down” (org chart-like) tree
treeLayout.FlowDirection = TreeLayoutFlowDirection.Bottom;
treeLayout.GlobalLinkStyle = TreeLayoutGlobalLinkStyle.OrthogonalStyle;
Group group;
group.GraphLayout = treeLayout;
The container can be either a complete drawing or a smaller number of objects that have been grouped together. To
execute a Graph Layout algorithm attached to a graphic container:
group.PerformGraphLayout();
Each algorithm implements many options for standard and advanced use cases, as well as constraints that can be
defined globally or locally on the objects. Once specified, the algorithms can be invoked several times or even
automatically applied every time objects have been changed in the drawing.
Algorithms like the Tree Layout illustrated above compute the placement of nodes and connections. Another case
happens when nodes have already been placed or cannot be moved. Here the application can call a link layout algorithm
(also included in Diagrammer for .NET) to route the links, while trying to reduce the number of link crossings without
moving the nodes again.
In the code, a Link Layout algorithm is specified by the LinkLayout property, and can be cumulated with a GraphLayout
property:
Group group = new Group();
// Fill the group with nodes and links here
ShortLinkLayout layout = new ShortLinkLayout();
group.LinkLayout = layout;
group.PerformGraphLayout();
One example of the degree of control that ILOG
Diagrammer for .NET gives the developer is in the
manner in which intersecting lines are displayed.
Options include a “tunnel crossing” or “bridge
crossing”, both of which makes the display more
readable by not implying a line “fork” where two
lines intersect. See the example at right.
Display using “Bridge” link crossings
-5-
A Technical Introduction to ILOG Diagrammer for .NET
Interacti ve w izards
When it makes sense for an application, the layout algorithms can be chosen through interactive wizards. With the help of
a preview mode, node and link layouts can be selected and their parameters can be tweaked based on the excepted
results.
Example of wizards:
Interactive wizards to select graph layout algorithms and their settings
These wizards give access to all the parameters available for each algorithm, helping developers set the properties for
optimal results. This information set by the wizards is persistent, meaning that when a graph is saved, the layout
parameters are kept and can be retrieved for the next session.
Conclusion
ILOG Diagrammer for .NET is a complete and comprehensive solution for creating many types of graphical and
interactive applications for the desktop and the Web. The product is packaged with a large number of examples, including
several full-featured graphics editors that can be used as good starting points for new applications. The programmer’s
documentation has been carefully written and illustrated by a team of top technical writers, and is over 500 pages long,
not counting the extensive API documentation integrated with Visual Studio. In the end, ILOG Diagrammer for .NET is a
good complement to the standard .NET platform, and gives developers a great way to visualize the concepts and data in
their applications.
Next Steps
•
•
•
•
Product information:
Introductory movies:
Online demonstrations:
Free evaluation:
http://www.ilog.com/products/diagrammernet
http://www.ilog.com/products/diagrammernet/ondemand.cfm
http://www.ilog.com/products/diagrammernet/demos/index.cfm
http://www.ilog.com/products/diagrammernet/eval/index.cfm
-6-