Introduction to the IBM ILOG Dojo Diagrammer

Among the visualization components that are part of the Web 2.0 and Mobile Feature Pack for IBM® WebSphere® Application Server, Version 1.1, the IBM® ILOG® Dojo Diagrammer is a set of components and services for creating interactive diagram displays for the web. Diagrams or graphs made of nodes interconnected by links are used in many types of application, such as in industrial supervision with telecom or energy network displays or for enterprise business representations, including business process or workflow diagrams. Figures 1 and 2 show examples of graph displays created with Dojo Diagrammer.

Larger view of Figure 1.

This article demonstrates how developers can use the IBM® WebSphere® Application Server Feature Pack for Web 2.0 and Mobile (see Resources) to create a web application that displays another type of commonly used graph display: an organization chart that represents the structure of an organization and the relationships between the positions, or roles.

The IBM ILOG Dojo Diagrammer is not dedicated to rendering a particular type of diagrams and is not tied to a particular type of data. You will see how to configure it to render an organization chart through the style and template features of the component. We will also show you how easily the component can be connected to the data on the server.

Throughout this article, you can follow the main steps required for the development of this web application by using IBM® Rational® Application Developer tools. The data displayed in the organization chart will be served from a dedicated RESTful service that you will also create with Rational Application Developer.

Back to top

Software requirements for this project

To follow the steps of this article, you need to have these installed:

• WebSphere Application Server Version 7.0
• WebSphere Application Server Feature Pack for Web 2.0 and Mobile, Version 1.1
• Rational Application Developer for WebSphere Software Version 8.03

The feature pack allows creating RESTful services in Rational Application Developer and also contains Version 1.7 of the Dojo Toolkit and the Dojo Diagrammer component that you will use to render the organization chart.

Back to top

Create the server-side part of the application

You start by creating a very simple RESTful service with IBM Rational Application Developer.

After the Web 2.0 and Mobile Feature Pack is installed, you can easily create a RESTful service with Rational Application Developer by using JAX-RS, the Java API for RESTful services. For this example, it will be a very simple REST service for listing all employees who are part of the organization. The service will return the data in the JavaScript Object Notation (JSON) format, which is the format that is the most suitable for the JavaScript application to use on the client (see Resources for a link to JSON details).

Implement the RESTful service

Start by creating the project in Rational Application Developer.

1. In Rational Application Developer, click File > New > Dynamic Web Project
2. In the New Dynamic Web Project window, type OrgChart_Service for the project name.
3. Verify that the Add project to an EAR check box is selected.

1. In the Configuration section, click Modify to open the Project Facets window.

5. In the Project Facets window, click JAX-RS to add the REST services capability to the project and Web 2.0/server side technologies to add the support of JSON4J.
   Note:JSON4J is the Java library that you can use to manipulate the JSON notation within the RESTful service.
6. Then click OK.
7. Now, click Next several times in the New Dynamic Web Project window until you reach the JAX-RS Capabilities window (Figure 5).

8. For the URL mapping patterns field, replace the default /jaxrs/* with this: /*
9. Click Finish to finishing creating the OrgChar_Service project.

JAX-RS implementation of the service

Implementation of the service starts by creating an Employee class that represents an employee in the organization chart.

1. In the Enterprise Explorer window, right-click the project and select New > Class.

The Employee class is very simple. It regroups the information that you want to display in the final organization chart, such as the names of the people, their titles in the organization, and their email addresses. Each employee has a unique identifier, the id property, and each manager is identified uniquely through the managerId property.

The RESTful service uses the JSON notation for the format of the response; therefore, the Employee class must also be able to be converted to the JSON notation. This is done by the JSON method. The code in Listing 1 shows the essential part of the Employee class.

package orgchart.service.http; 
import com.ibm.json.java.JSONObject; 

public class Employee {

     private String name = ""; 
    private String gender = ""; 
    private String email = ""; 
    private String title = ""; 
    private int managerId; 
    private int id; 
                
    public Employee(int id, String name, String 
    gender, String email, String title, int managerId){ 
        this.name = name; 
        this.gender = gender; 
                this.id = id; 
                this.email = email; 
                this.title = title; 
                this.managerId = managerId; 
    } 
    
    public JSONObject toJSON() {
        JSONObject obj = new JSONObject(); 
        obj.put("name", this.name); 
                obj.put("gender ", this.gender); 
                obj.put("email", this.email); 
                obj.put("title", this.title); 
                obj.put("id", this.id); 
                obj.put("managerId", this.managerId); 
                return obj; 
    }
}

Another class, named OrgChartDataManager, is created to hold all of the data of the organization chart. To keep this example simple, the organization data is here created by this class in the init method (see Listing 2). But in a real situation, the data would come from a database or an enterprise directory.

package orgchart.service.http; 

import java.util.Iterator; 
import java.util.List; 

public class OrgChartDataManager {
    private static final OrgChartDataManager manager = new OrgChartDataManager();
    
    private List<Employee> allEmployees = new java.util.ArrayList<Employee>();
    
    private OrgChartDataManager() 
    { 
        init();
    }
    
    public static OrgChartDataManager getInstance() {
    
        return manager; 
    }
    
    public List<Employee> getEmployees() {
    
        return allEmployees;
    }
    
    private void init() {
        allEmployees.add(new Employee(1,"Friedrich Azaretto", "M", 
        "fazaretto@my.com", "Manager", -1)); 
        allEmployees.add(new Employee(2,"Peter Courcelle","M", 
        "pcourcelle@my.com", Principal Architect", 1)); 
        allEmployees.add(new Employee(3,"August Fitzpatrick", "M", 
        afitzpatrick@my.com", "Architect", 2));
        … 
    }
}

We can now implement the service class itself using JAX-RS. The service will respond to and HTTP GET request and return the list of employees in the organization.

As we discussed previously, the service will return data in the JSON format. To simplify the connection of this data to our Dojo Diagrammer component, we will return a JSON structure that can be easily consumed by the Dojo application on the client.

On the JavaScript side, the Dojo client code will use a Dojo data store object called ItemFileReadStore. This implementation of Dojo data store allows reading JSON structure content and requires a particular structure for the data.

The data must be a JSON object with the following properties:

• An items attribute that contains the items in the store, which is employees, in this example.
• A label property that identifies some attribute of the item that can be used as a human-readable label for display purposes. In this case, that's the name of the employee.
• An identifier property to specify an attribute of the item that can act as a unique identifier for the item, which is the id property in this example.

With three employees, the JSON structure for the ItemFileReadStore looks like Listing 3.

{ 
    "label":"name", 
    "identifier":"id", 
    "items": 
        [ 
            { 
                "id":1, 
                "name":"Friedrich Azaretto", 
                "gender":"M", 
                "email":"fazaretto@my.com", 
                "title":"Manager", 
                "managerId":-1 
            }, 
            { 
                "id":2, 
                "name":"Peter Courcelle", 
                "gender":"M", 
                "email":"pcourcelle@my.com" 
                "title":"Principal Architect", 
                "managerId":1, 
            }, 
            { 
                "id":3, 
                "name":"August Fitzpatrick", 
                "gender":"M", 
                "email:"afitzpatrick@my.com, 
                "title":"Architect", 
                "managerId":2, 
            }
        ]
}

The implementation of the service class itself is very simple and has only one resource path: the /employees path implemented by the getEmployees method.

package orgchart.service.http;

import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.core.MediaType;
import javax.ws.rs.Produces;

import java.util.List;
import java.util.Iterator;
import com.ibm.json.java.JSONArray;
import com.ibm.json.java.JSONObject;

@Path("/")
public class OrgChartService {

    OrgChartDataManager orgChartData = OrgChartDataManager.getInstance(); 
    
    public OrgChartService() {} 
    
    @Produces(MediaType.APPLICATION_JSON)
    @GET 
    @Path("/employees")
    public JSONObject getEmployees() {
        List<Employee> employees = orgChartData.getEmployees();
        JSONObject data = new JSONObject();
        JSONArray items = new JSONArray();
        data.put("identifier", "id"); 
        data.put("label", "name"); 
        Iterator<Employee> it = employees.iterator();
        while (it.hasNext()) 
            items.add(it.next().toJSON()); 
        data.put("items", items); 
        return data;
    }
}

Several JAX-RS annotations are specified on the getEmployees method to indicate how JAX-RS will handle this resource.

• The @Path annotation's value is the relative path to the resource implemented by the method.
• The @Produces annotation indicates the Mime type of the data that the resource produces and sends to the client. For this resource, it is JSON.
• The @GET annotation indicates that the method will process HTTP GET requests.

The service application

JAX-RS provides a deployment Application abstract class that must be sub classed to describe to the runtime environment the list of service providers available in the JAX-RS application. The application class is implemented as Listing 5 shows.

package orgchart.service.http; 

import java.util.HashSet; 
import java.util.Set; 
import javax.ws.rs.core.Application; 

public class OrgChartServiceApplication extends Application {

@Override 
    public Set<Class<?>> getClasses() {
        Set<Class<?>> classes = new HashSet<Class<?>>(); 
        classes.add(OrgChartService.class); 
        return classes; 
    }
}

Deploy the service

The service is now ready and can be deployed to the WebSphere Application Server. In order to indicate to the runtime the service application class that implements our service, edit the web.xml descriptor:

1. In the Enterprise Explorer window, right-click the WebContent/WEB-INF/web.xml file to open the Web Application Deployment Descriptor Editor.
2. In the Web Application Deployment Descriptor Editor, select Servlet (JAX-RS Servlet) and click Add.
3. In the Add Item window, select Initialization Parameter and click OK to add a new initialization parameter is added.
4. Enter javax.ws.rs.Application for the Name field.
5. Enter orgchart.service.http.OrgChartServiceApplication in the Value field.

This Rational Application Developer project contains a dynamic web project, called the OrgChart_Service project, and an EAR application project. You will now deploy this EAR project to the WebSphere application server.

6. In the Servers window of Rational Application Developer, right-click WebSphere Application Server v7, and choose Add and Remove.
7. In the Add and Remove window, select OrgChart_ServiceEAR, and click Add.
8. Click Finish.

The service is now deployed to the WebSphere Application server and is ready to be used by the client-side Dojo Diagrammer component.

Back to top

Create the client-side part of the application

Now that your service is ready to provide data, you will start creating the client-side part of your web application.

The client part is basically an HTML page that will use the Dojo Toolkit. In particular, it will use the IBM ILOG Dojo Diagrammer widget to display the data sent by the service described previously as a node-link diagram.

Create the user interface client project

1. Start by creating a new dynamic web project in Rational Application Developer, and call it OrgChart_Client. It will be included in the same EAR project as the server part, for easier deployment.

Note:
The client project will not really be a dynamic project since it will not contain any Java code, so we could have used a Static Web project, but using a dynamic web project is easier to include it in an EAR for easier deployment.

Because you want to use Dojo widgets and, especially, the Dojo Diagrammer widget in your client code, you must add the appropriate facet to the project.

2. To do this, click the Modify button in the Configuration section to display the Project Facets dialog window in Figure 9.

3. Expand the Web 2.0 item, check Dojo Toolkit, and click OK.
4. Click Next on the pages that follow until you get to the Dojo Project Setup page, which is shown in Figure 10.

You must use the version of Dojo that is provided in the Web 2.0 and Mobile Feature Pack so you can use the Dojo Diagrammer widget.

5. For this, click Change these setup options to get the dialog window shown in Figure 11.

6. Leave the default choice selected so you will have a copy of Dojo Tookit (and Dojo Diagrammer) added to your project.
7. Click Next to get the Dojo Project Setup Options dialog window shown in Figure 12.

8. In the Dojo section, choose Dojo Toolkit 1.7 Alpha.
9. Expand the Dojo Components section, and check the ibm_ilog item, which is the module that contains the Dojo Diagrammer component. You can deselect the other ibm_ modules if you want to include less code in your project. These are the minimum components to check:
   • dijit
   • dojo
   • dojox
   • ibm_ilog
10. Click Finish.

Your client-side project is now ready.

Create the web page

The client side will be very simple and contain only one HTML page.

1. Create a new web page, and call it orgchart.html.

2. You want to use Dojo, so click Options, select Dojo Toolkit, and make sure that the Use Dojo technology check box is checked:

Add the Dojo Diagrammer widget

1. After the new web page is created, open the Palette view if it is not open already (Window > Show View > Palette).

The palette contains the Dojo widgets, split into several categories. The Diagram widget (which is the main widget of the Dojo Diagrammer component) is in the Dojo IBM Widgets category.

2. Drag-and-drop the Diagram widget from the palette to the body of the page.

As Listing 6 shows, this will create a <div> element with the appropriate Dojo type. It will also automatically add the dojo.require call to import the diagram widget.

<script type="text/javascript"> 
dojo.require("dojo.parser"); 
dojo.require("ibm_ilog.diagram.widget.Diagram"); 
</script>
... 
<body class="claro"> 
<div data-dojo-type="ibm_ilog.diagram.widget.Diagram">
 </div> 
</body>

Add the Dojo data store

You will now connect your Diagram widget to the service. The Dojo Toolkit provides objects called data stores that connect widgets to data. Because the service sends data in JSON format, you will use a simple data store class that reads JSON data: dojo.data.ItemFileReadStore.

Data stores can also be created by dragging from the palette, in the Dojo Data Widgets category.

1. Drag an ItemFileReadStore to the HTML view (for example, just before the diagram).

Now you need to set a few attributes in the markup to connect everything together.

2. First, you must specify the URL from which the ItemFileReadStore will fetch its data. It is the URL of your REST service: .../OrgChart_Service/employees.
3. Also, set the jsId attribute, so you can reference your data store object from the diagram widget. The jsId attribute is interpreted by Dojo. The result will be the creation of a global variable named employees that contains the ItemFileReadStore instance.
4. Then, set the nodesStore attribute of the diagram widget to employees to tell the widget to load its data from this data store.
5. Finally, the diagram widget also requires a nodesQuery attribute that specifies the query to use to retrieve the data store. Queries can be used to load only a subset of data items by specifying wildcard or regular expressions on data attributes. In this case, you want all of the items, so use this simple query that means "items with any id:" {id:'*'}

The <div> elements for the data store and the diagram now look like Listing 7.

<div data-dojo-type="dojo.data.ItemFileReadStore"
url="../OrgChart_Service/employees" jsId="employees"></div> 
<div data-dojo-type="ibm_ilog.diagram.widget.Diagram" jsId="diagram"
     nodesStore="employees" nodesQuery="{id:'*'}"> 
</div>

Create links between nodes

Your Diagram widget is now minimally connected to the service. But, so far, it will not display a very useful graph because you did not tell it how the employees are connected to each other, so it will not display any links.

The Diagram widget provides different ways to specify links between the data store items. One of them is to specify the parentBinding attribute, which defines a parent/child relationship between items in the data store. The parentBinding attribute can have two types of values:

• You can specify the name of a value of the data store item, which will contain the parent of the item.
• Or you can also specify a function that will compute the parent of the item. You will use this option here. The JSON sent by the service contains a managerId value for each item, which as you might guess, is the ID of the manager (represented as the parent in the graph). You need a little piece of code to look up the parent by its ID. So, you specify the name of a JavaScript function (getManager), and you define this function in a <script> tag of your web page.

The markup now looks like Listing 8:

<div data-dojo-type="ibm_ilog.diagram.widget.Diagram" jsId="diagram"
    nodesStore="employees" nodesQuery="{id:'*'}" 
    parentBinding="getManager" createLinksForHierarchy="true"> 
</div>

Listing 9 shows the getManager function. It is called with two arguments: the data store and the data item. It must return an array containing the parents of the item (an item could have several parents, so there would then be one link between each parent and the item). The function uses the fetchItemByIdentity function of the data store API to retrieve the parent item from its ID.

function getManager(store, item) {
    var managerId = store.getValue(item, "managerId"); 
    var manager = null; 
    store.fetchItemByIdentity({identity: managerId, onItem: 
        function(it) { manager = it; }}); 
    return manager ? [ manager ] : null; 
}

Define a graph layout

Our organization chart diagram now has nodes and links created from the data sent by the service, but the nodes do not have any specific position on the screen, so the Diagram widget would just put them at a default location which is not what we want of course. We will now add a graph layout algorithm that will arrange the diagram nicely for us.

Like widgets or other Dojo objects, graph layout algorithms are represented by JavaScript classes. Because this data has a tree structure, the TreeLayout class is a natural choice. Add the code shown in Listing 10 in the <script> tag to import the class:

 dojo.require("ibm_ilog.graphlayout.tree.TreeLayout");

Add the following (Listing 11) in the HTML to create the TreeLayout object:

<div data-dojo-type="ibm_ilog.graphlayout.tree.TreeLayout" 
jsId="treeLayout"></div> 

And finally, add these attributes (Listing 12) to the Diagram div:

nodeLayout="treeLayout" automaticNodeLayout="true"

The automaticNodeLayout attribute tells the Diagram widget to execute the graph layout automatically, as soon as the graph is created.

The Dojo Diagrammer graph layout algorithms are powerful and have many parameters that you can set, using JavaScript coding. Add the piece of code in Listing 13 to your page to set a few parameters on the TreeLayout so the graph will look better as an organization chart.

var treeLayout = diagram.nodeLayout; 
    treeLayout.setGlobalLinkStyle(ibm_ilog.graphlayout.tree.TreeLayout.ORTHOGONAL_STYLE);
    treeLayout.setFlowDirection(ibm_ilog.graphlayout.Direction.BOTTOM);
    treeLayout.setLayoutMode(ibm_ilog.graphlayout.tree.TreeLayout.TIP_LEAVES_OVER); 
    treeLayout.setGlobalAlignment(ibm_ilog.graphlayout.tree.TreeLayout.CENTER);

We will not describe these parameters in detail here. Please see the Dojo Diagrammer documentation, cited in Resources, for more details.

Create a custom node template with data bindings

You now have a good-looking graph with links and nodes arranged nicely by a graph layout. The final step is to refine the look of the nodes.

The default nodes created by the Diagram widget are simple rectangular shapes with the default label of the nodes in them. Although this is useful as a starting point, most applications need to display more data in nodes or to show it differently.

To change this default look, you will define a custom node template. A node template is a basically a JavaScript object that describes a group of GFX shapes, based on the simple format used by dojox.gfx to describe shapes (see Resources for a link to the dojox.gfx.utils documentation. This format is fairly straightforward. As an example, Listing 14 shows the custom node template that you will define (you can add it directly to the <script> tag of the HTML page, or you can define it in a separate .js file and import it in the main HTML page).

var orgChartNodeTemplate = [
{
    shape: { type: 'rect', r: 10, height: 80, width: 200, y: 10, x: 10 }, 
    stroke: { 'color': 'gray', width: 2 }, 
    fill: '#FFEFF4F8' 
 }, { 
    shape: { type: 'image', src: './images/{{data.gender}}.png', 
        height: 65, width: 48, y: 20, x: 10 } 
 }, { 
    shape: { type: 'text', align: 'start', text: '{{data.name}}', y: 30, x: 70 }, 
    fill: 'black', 
    font: { weight: 'bold', size: '10pt', family: 'sans-serif' } 
 }, { 
    shape: { type: 'text', align: 'start', text: '{{data.title}}', y: 50, x: 70}, 
    fill: 'black', 
    font: { weight: 'normal', size: '9pt', family: 'sans-serif' } 
 }, { 
    shape: { type: 'text', align: 'start', text: 
        '{{data.email}}', y: 75, x: 70 }, 
    fill: 'black', 
    font: { weight: 300, size: '9pt', family: 'sans-serif' } 
 } 
]; 

The template description is basically an array of objects, which means that it is a group of shapes. Each element of the array defines a shape (it could also include nested arrays to define subgroups of shapes). Each shape description has a shape attribute that defines the attributes of the shape. The type attribute defines the type of the shape (for example: rect, image, text). Other attributes of the shape object are specific to each kind of shape. Shapes can also have fill and stroke properties, and a text "shape" can have a font property.

In this example, the node is made of these elements

• A background rectangle with rounded corners (specified by the r: 10 shape property)
• An image, representing the gender of the employee
• Several text shapes used to display the different values of the data item

The important things to note are the special values between {{…}} pairs, for example {{data.name}}. These are called data bindings and will be replaced by a value of the data item represented by the node. For example, the text shape that contains {{data.name}} will display the name value of the data item. If you look back at the JSON data sent by your service, you will see that each employee item has the following properties: gender, name, title, email. You are using data bindings to these properties in your custom template. Notice the binding to the gender value in Listing 15 (extract of Listing 14):

src: './images/{{data.gender}}.png'

You use the data item value to build a URL that will load an image showing the employee's gender. This example shows that data bindings can be used inside of more complex strings.

Finally, you must tell the diagram widget to use your custom node template. You do this as shown in Listing 16 by setting the nodeTemplate attribute to the name of the JavaScript variable that holds the template description (see Listing 16).

nodeTemplate="orgChartNodeTemplate"

Launch the organization chart application

Your application is now finished. If you did not do it already, deploy the EAR file on your WebSphere Application Server, as explained previously. Because the client part is included in the same EAR as the service part, this will automatically deploy the client part.

You can now load the orgchart.html page in your browser. The URL will be something like http://localhost:9080/OrgChart_Client/orgchart.html (the port number might be different, depending on your WebSphere configuration).

Figure 17 shows what our final organization chart looks like.

Larger view of Figure 17.

Back to top

Summary

This article demonstrated how you can use the WebSphere Application Server Feature Pack for Web 2.0 and Mobile, and especially a new Dojo component, IBM ILOG Dojo Diagrammer, together with the web tools of Rational Application Developer 8.0.3, to easily create a full web application consisting of a server-side RESTful service and a client-side Dojo-based web page.

Back to top

Download

Information about download methods

Resources

Learn

• See the WebSphere Application Server Feature Pack for Web 2.0 and Mobile and Getting started with IBM ILOG Dojo Diagrammer to learn more. Also, read the dojox.gfx.utils documentation on the Dojo Toolkit website.
  
  
• See the JavaScript Object Notation (JSON) definition in IBM Multilingual Terminology for a few more details.
  
  
• Browse the Rational Application Developer for WebSphere Software page on developerWorks for links to technical articles and many related resources and explore the Information Center.
  
  
• Visit the Rational software area on developerWorks for technical resources and best practices for Rational Software Delivery Platform products.
  
  
• Stay current with developerWorks technical events and webcasts focused on a variety of IBM products and IT industry topics. Attend a free developerWorks Live! briefing to get up-to-speed quickly on IBM products and tools, as well as IT industry trends. Watch developerWorks on-demand demos, ranging from product installation and setup demos for beginners to advanced functionality for experienced developers.
  
  
• Improve your skills. Check the Rational training and certification catalog, which includes many types of courses on a wide range of topics. You can take some of them anywhere, any time, and many of the "Getting Started" ones are free.
  
  

Get products and technologies

• Try Rational Application Developer for WebSphere Software, free.
  
  
• Evaluate IBM software in the way that suits you best: Download it for a trial, try it online, use it in a cloud environment, or spend a few hours in the SOA Sandbox learning how to implement service-oriented architecture efficiently.
  
  

Discuss

• Join the Web 2.0 and Mobile Development Community on developerWorks, where you can check the Web 2.0 and Mobile Blog and wiki.
  
  
• Check Rational Application Developer wiki to keep up with news and to contribute.
  
  
• Join the Development Tools forum to ask questions and participate in discussions.
  
  
• Rate or review Rational software. It's quick and easy. Really.
  
  
• Share your knowledge and help others who use Rational software by writing a developerWorks article. You'll get worldwide exposure, RSS syndication, a byline and a bio, and the benefit of professional editing and production on the developerWorks Rational website. Find out what makes a good developerWorks article and how to proceed.
  
  
• Follow Rational software on Facebook and Twitter (@ibmrational), and add your comments and requests.
  
  
• Ask and answer questions and increase your expertise when you get involved in the Rational forums, cafés, and wikis.
  
  
• Connect with others who share your interests by joining the developerWorks community and responding to the developer-driven blogs.
  
  

About the authors

Emmanuel Tissandier is a senior technical staff member for IBM, in France. He has been a member of the ILOG Visualization team since 1995. His expertise in Web 2.0 technologies includes Microsoft .NET and Silverlight, Adobe Flex, and Ajax and Dojo technologies.

Eric Durocher is a senior software developer for IBM, in France. He has been a member of the ILOG Visualization team since 1997 and is currently the technical leader of the Dojo Diagrammer development team. Eric has previously worked as developer and architect on most ILOG visualization products: Views, JViews, .NET visualization, and Elixir.

Rate this article

Comments

Back to top

Table of contents

• Introduction to the IBM ILOG Dojo Diagrammer
• Software requirements for this project
• Create the server-side part of the application
• Create the client-side part of the application
• Summary
• Download
• Resources
• About the authors
• Comments

Next steps from IBM

• Try: Rational Application Developer for WebSphere Software
• Buy: Rational Application Developer for WebSphere Software

Dig deeper into Rational on developerWorks

Try IBM PureSystems. No charge.

Experience today!

---

Get started with the cloud-based trial and pattern development kit.

Special offers