Many types of complex business data can best be visualized as a set of nodes and interconnecting links, more commonly called a graph or a diagram. Examples of graphs include business organization charts, workflow diagrams, telecom network displays, and genealogical trees. The mathematical concept of graphs is so general that it is used as a modeling tool in almost any domain. When we need to get a visual understanding of the graph data, there is a need for the automatic visualization of graphs. The purpose is to optimize the display by obeying common rules in a given field and by maximizing the readability.

Among the new visualization components included in the WebSphere Application Server Feature Pack for Web 2.0 & Mobile v1.1, Dojo Diagrammer allows applications to display and edit graphs (diagrams)and provides a comprehensive set of graph layout algorithms for the automaticplacement of the nodes and/or to ensure the links have optimal shapes.

For a flexible adaptation to various deployment requirements, the graph layoutalgorithms are available both client-side and server-side. In theclient-side case, the Dojo implementation of the algorithms runs inside thebrowser. In the server-side case, a RESTfull/JAX-RS service provided by DojoDiagrammer executes the Java implementation of the algorithms on the server, andthe data passed between the browser and the server is serialized in JavaScript ObjectNotation (JSON). Whether you choose the client-side algorithms, or have a server available to run them, the result is available on all types of devices, including mobile.

Now, we may wonder: with automatic arrangement of diagrams, humans, that isdevelopers or end-users, have no role to play anymore? Well, there is stillplace for humans taking decisions... The following decisions are in the handsof the developer (if appropriate, the developer can offer these choices to theend-user thanks to configuration GUI):

The choice of the graph layout algorithm among those available: Hierarchical, Tree, Force-Directed, Circular, Grid, Short and Long Link layouts (the framework also allows you to develop your own custom algorithm).

The configuration of each graph layout algorithm, thanks to a wide range of options to fine-tune the display according to specific needs or taste.

The present post focuses on the first point: how to choose the graph layoutalgorithm that fits better. In some cases, this choice is quitestraight-forward, in other cases it is a bit trickier, and to guide your choiceyou can find below a short synthesis of information present at various placesin the Feature Pack documentation (Reference Manual and Infocenter), enrichedwith additional hints.

Hierarchical layout

This algo organizes the nodes in horizontal or vertical levels, in such away that the majority of the links flow uniformly in the same direction. Typical examples:

This algo is the obvious choice for representing hierarchies, that is forhierarchically-structured data (graphs) such as process flows, workflowdiagrams, and so on. The key point about the data is whether the links(connections between nodes) are oriented, that is whether the directionof the link matters. If it matters, it is very likely that Hierarchical layoutfits (however, in some cases the Tree layout might fit better, see below).

Tree layout

The obvious choice for representing trees (such as organization charts),where each node has one single ancestor. Typical examples:

The Tree layout can also be used if the graph is not a (pure) tree, howeverin this case it only takes care of the shape of part of the links, those thatcontribute to the pure tree part of the graph, the so-called "spanningtree" of the graph.

Force-directed layout

Your graph does not represent a hierarchy, is not a tree and the orientationof links does not matter? Then Force-Directed layout is likely to fit. An example: This algo is slower than Hierarchical or Tree layouts, therefore it is notrecommended for very large graphs.

Circular layout

The Circular Layout is mostly designed for Telecom applications where nodes arepartitioned into clusters. The clusters are displayed as rings or stars andpositioned in a radial tree-like fashion. An example:

In most Telecom applications, the nodes represent network devices that have predefinedcluster ids. Hence, the layout algorithm allows specifying the clusters as inputdata. For cases when no cluster ids are available, the layout algorithm is alsoable to automatically calculate appropriate clusters from the graph topology.

Grid layout

Obvious choice when your graph has no links, or you want nodes to be placedon a grid or matrix while ignoring the links. An example:

Short and Long link layout

Both are pure link layouts, that is they do not move the nodes, they onlyreshape the links in such a way that crossings and overlaps are reduced oravoided. But why two different algos, Short link layout and Long link layout?The answer is that they have different (mostly complementary) characteristics,and, depending on the case, one or the other provides results that fit betterthe aesthetic and performance requirements. How to choose one or the other? Thedumb rule is to try any of them; if it does not fit, try the other one (andexplore the multiple options of each).

That said, it is also useful to be aware of some characteristics of each,which help making the choice. In very brief, the names "Short Linklayout" and "Long Link layout" refer to the fact that the firstone fits better when most links are "short", that is they interconnectrelatively close nodes, without too many other nodes placed as obstacles thatwould need to be avoided by the path of the link. It is the converse for"Long Link layout": it usually fits better when links connect distantnodes with many obstacles in-between.

A more in-depth comparison follows:

Short link layout

Links are placed freely in the space.

Link-to-link and link-to-node crossings are reduced, if this is possible with link shapes that have a maximum of 4 bends.

Crossing and overlapping of links with other links and nodes cannot always be avoided because the algorithm uses link shapes with a limited number of bends. This happens in particular when there are many obstacles between the end points of a link.

Links of different width are supported.

Link bundles between the same pair of nodes are supported. Optionally, the algorithm can ensure that multiple links are bundled together by giving them parallel shapes.

Fast algorithm with low memory footprint.

An example:

Long link layout

Links are placed on a grid.

Link-to-node crossings of orthogonal links are avoided, even if this introduces many bends.

Overlapping of nodes and links is always avoided, while link crossing cannot always be avoided.

Slower and uses more memory depending on how small is the grid spacing.

An example:

The two screenshots above hold for the same graph data. At a quick look, theresults of the two link layouts are relatively equivalent, but at a closerlook, they differ in terms of link-link crossings, link-node overlaps, symmetryof connection points with respect to the node box, number of link bends (howmany turns). Each of these two link layout algorithms is useful in various use-casesand for various application requirements.

Nested layouts

All layout algorithms can be applied to nested graphs, that is graphs with nodes that contain another graph. Most often, the best results for such graphs are obtained using the Hierarchical layout.

For the Business Process applications, Dojo Diagrammer also provides support for a special case of nested graphs, called swimlanes. An example:

Finally, all layout algorithms are provided with many configuration parametersto cover a wide range of needs. As a quick guidance, a future publication will providehints about the parameters that matter the most and their impact onperformance, in particular for the deployment on mobile devices. Stay tuned...

Veryearly on while developing one of the Web 2.0 & Mobile servicessamples, I got a quick lesson on web security. Cesar, a colleague ofmine at the time, decided to run the IBM Rational AppScan toolagainst my service & sample. He very quickly found severalcross-site scripting vulnerabilities built into the service itself. Who was to know that echo'ing values back to the user (somethingusually considered helpful in app dev), would prove to be sodangerous when dealing with a web application? Apparently, everyoneelse who was not a newbie like me ;-). Just by scanning the sampleapp, AppScan was not only able to show (very quickly) exactly werethose vulnerabilities resided, but the tool also created examples toshow how those vulnerabilities could be exploited.

CesarE. Santiago and Maryann Hondo, discuss some of the most commonattacks directed at web applications today in this newdeveloperWorks article. They cover things like cross-site scripting, SQL injection,parameter tampering, cookie poisoning, and information leakage. They give examples of each and also provide steps on how to bestprevent them.

Thearticle also covers what considerations need to be made in thedevelopment cycle of mobile solutions and unique challenges that we,the web & mobile community faces. There is also mention, on howthe IBM Rational AppScan tools can help automate security into ourdevelopment processes. (Something we found to be very useful.)

FrankHaynes, IBM Manager of the WebSphere Technology Institute and DianaSteinmetz, IBM Release Manager for the Web 2.0 and Mobile FeaturePack answer a few questions about the Web 2.0 and Mobile Feature Pack.

Rational Application Developer 8.0.3 includes Mobile Tooling(Beta) in support of the WebSphere Web 2.0 & Mobile FeP.This includes tooling for mobile web applications, Dojo 1.7 (Alpha), and a newvisual editor for web pages that provides “what you see is what you get”development. Let’s review these new features

Mobile Web Application Project setup and Page Creation

The first thing you will want to do is create a project anda mobile web page. The mobile tooling allows you to:

create a Dojo project to develop a mobile web application

select only the Dojo folders you need, or use the provided configuration for mobile web application development

Construct a mobile web page

Now that we have a project and a mobile web page, let’sconstruct more of the page by using the Rich Page Editor and the palette fordrag and drop WYSIWYG development. We will also refine the web page with directediting in Rich Page Editor’s design pane, use property views, or sourceediting. Let’s watch a demo, and this time it’s a double feature!

It’s time to test your mobile web page

Now that you have a mobile web page, the next step is to runit, and do we have an exciting new feature for you. It’s called the MobileBrowser Simulator, and it allows you to simulate the web browsers in multiplemobile devices at the same time. In the following demo we’ll show you how to:

Run a mobile page with dynamic device detection on the Mobile Browser Simulator (Beta)

Demonstrate multiple device simulators running at the same time

Scale the device simulators to their actual device size

Enable useragent switching in the simulator

Demonstrate interacting with a page in the simulator

Rotate a simulator into landscape mode

Edit the mobile page and refresh the simulator

Using the simulator, show the difference between a mobile page using dynamic device detection and one designed for a specific device

Thisarticle highlights and walks you through some of the most interestingfeatures of DojoMobile 1.6, while also making mention of a few of the features inthe upcoming DojoMobile 1.7 release (both of which are already part of our Web 2.0& Mobile Feature Pack). The article also includes a very easyexample, demonstrating how to build a native application usingPhoneGap, an open source mobile framework that works with various SDKs for building nativeapplications, leveraging familiar technologies like HTML andJavaScript.

With this release, we have taken theexisting Web 2.0 Feature Pack and expanded it to include capabilitiesfor creating mobile applications. Developers will now be able to useopen standards such as JavaScript, CSS and HTML to build applicationsthat can run on both desktop and mobile browsers. With significantadditions to the Dojo Toolkit for mobile support as well as key valueadds such as the Dojo Visualization component and new applicationserver building blocks that provide an end to end programming modelfor developers, this feature pack will make it easier for developersto write once and run on multiple platforms. Because of the addedfocus on mobile, we’ve renamed the feature pack to “Web 2.0 andMobile Feature Pack”.

Here are some of the highlights of thisFeature Pack...

Dojo Toolkit

In the prior version of the FeaturePack, the version of the DojoToolkit that was supported was based on Dojo 1.5. Since Dojo1.5, the community has been actively focusing on improving thedeveloper experience and options when developing web & mobileapplications. In this current release of the Web 2.0 and MobileFeature Pack, we have upgraded to the latest version of Dojo which isbased on an early pre-released version of Dojo 1.7.

The Dojo Toolkit is an opensource JavaScript Framework that IBM actively participates in andcontributes to. With this framework, developers can quickly buildrich interactive applications leveraging well known standards such asJavaScript, CSS and HTML to build applications that leverage a set offeature rich functions such as charts, gauges, graphs, grids andforms.

Some of the key Dojo featuresintroduced in this current release of the Feature Pack are:

Mobile Themes (Android/BlackBerry/iOS/custom). In this release, we provide default themes for Android, BlackBerry and iOS which allow developers to quickly build cross platform applications that with a simple change to the CSS theme, can provide the application developer the ability to build native like look and feel across a series of devices. In addition, with it's recent support of LESS.js, developers can quickly modify these default themes to create their own branded themes or write completely new themes with ease.

Enhanced Mobile Widget Support. With the increased focus on mobile, Dojo now provides native like support for animations, containers and lists that are common building blocks for mobile applications.

Improved Module Loader Support based on AMD. Since the last release of the Feature Pack, the Dojo runtime has switched from a proprietary module loader to an open standards based module loader. In addition to an improvement in performance of loading and having a standard based API for defining dependencies, one of the key benefits of this migration is improved compatibility with other frameworks.

Improved Gauges and Charting. With the improved charts and gauges, developers will have a common API for building both charts and gauges while leveraging common Dojo datastores that are compatible with previously existing widgets such as Grid.

Dojo Model View Controller (Dojo MVC). Having the ability to write client side applications has surfaced the need to be able to extend MVC to the client. With Dojo MVC, developers can quickly build form base applications leveraging the model support that is included in the latest version of the Feature Pack.

In addition, included with eachrelease, Dojo provides a list of new features that were added. Atthe time of this writing, the latest version of Dojo that has beenofficially released is Dojo 1.6. To view the latest content thatis included in the Dojo 1.6 release please refer to this linkNote that once Dojo 1.7 is officially released, this page will beupdated with the new features that will be included in Dojo 1.7.

IBM Dojo Diagrammer

This new feature pack comes with IBMILOG Dojo Diagrammer, a new widget with advanceddiagramming and graph layout capabilities built on top of the opensource Dojo Toolkit. The purpose of Dojo Diagrammer is toprovide a solution for Ajax applications to display graphs, ornetworks, of nodes connected by links. The diagramming componentincludes sophisticated graph layout algorithms that can be runthrough a server-side REST service or locally on the client usingJavaScript algorithms.

JAX-RS

The feature pack provides support forboth Java API for RESTful Web Services(JAX-RS) 1.1 (JAX-RS) and RPCAdapter for accessing services. JAX-RS is now part ofthe Java Enterprise Edition 6 (JEE6) specification, which is includedin IBMWebSphere Application Server v8 release. For WebSphereApplication Server v6.1 and v7.0 installations, the Web 2.0 andMobile Feature Pack provides the JAX-RS version 1.1 based upon theIBM Apache Wink version that is included in WebSphere v8.0.

Leveraging open standards based methodssuch as JAX-RS will provide a simplified programming model consistingof "Plain Old Java Objects" (POJOs) and JEE Annotations,allowing developers to quickly expose their services when buildingenterprise applications. When used in conjunction with JavaScriptObject Notations (JSON) it provides a simple RESTful programmingmodel that client applications can be wired to.

Application ServerBuilding Blocks

New mobile and rich Internetapplication (RIA) building blocks were added, including directorylisting service,fileupload service,graphicsconversion service,logging/debug/analyticscapture service,device/browserdetection service. Samples are also provided tohelp developers quickly learn how to tie these RESTful services toclient side Dojo widgets and build end to end solutions leveragingour feature pack.

As was the case with the previousversions of the Web 2.0 Feature Pack, this feature pack can beinstalled on a variety of different versions of the WebSphereApplication Server, allowing most of our customers to get their handson the latest cutting edge web 2.0 & mobile features. The Web2.0 and Mobile Feature Pack can be installed on WebSphere 6.1, 7.0and the recently released WebSphere8.0. In addition, we also provide support for the Web 2.0 andMobile Feature Pack on WebSphere CE 2.0 and CE 2.1 and on WebSphereApplication Server Hypervisor Edition.

For more information visit the FeaturePack for Web 2.0 and Mobile documentation.