Create an ILOG Dojo Diagrammer application for touch-enabled mobile devices

Developing with Dojo Mobile and the WebSphere Application Server Feature Pack for Web 2.0 and Mobile

This article introduces both Dojo Mobile and IBM® ILOG® Dojo Diagrammer, and explains how you can create a diagram application for mobile devices with the Dojo Toolkit and IBM ILOG Dojo Diagrammer. In addition, you'll see how the application can add custom actions invoked by a touch gesture. This content is part of the IBM WebSphere Developer Technical Journal.

Stéphane Lizeray (lizeray@fr.ibm.com), Advisory Software Engineer, IBM

Stéphane Lizeray is an Advisory Software Engineer at IBM France. He leads the IBM ILOG GraphLayout for Eclipse project and contributes to IBM ILOG Dojo Diagrammer. Before joining IBM, Stéphane worked for ILOG during several years developing advanced graphical user interface components for ILOG JViews.



21 September 2011

Also available in Chinese

Introduction

IBM ILOG Dojo Diagrammer provides a set of services and user interface components for writing interactive diagrams for both the Web and for mobile devices. To demonstrate this, this article describes how you can use the IBM ILOG Dojo Diagrammer library to create a simple organizational chart application for touch-enabled mobile devices. To make things easy and focus on the process, the sample application developed here will be kept very simple, with an organization chart that represents employees and their managerial relationships.

This exercise uses the IBM WebSphere® Application Server Feature Pack for Web 2.0 and Mobile V1.1. The feature pack is a set of components, libraries, and tools for helping you build applications for these platforms. The feature pack includes an early release of Dojo 1.7 and IBM ILOG Dojo Diagrammer.


Dojo Mobile

There are essentially three main approaches to writing applications for mobile devices. One possibility is to use the proprietary toolkit of the mobile device. A second approach is to use web standards. Today’s major smartphones support the Web 2.0 stack (HTML5/CSS3 and Ajax). With this approach, there is nothing to install on the device. A third, hybrid approach (such as PhoneGap) that combines web development and SDK programming, uses a framework that enables you to author native applications with web technologies and get access to the native APIs. Each of these approaches has its own advantages and disadvantages.

Dojo Mobile belongs to the second approach. It is a JavaScript™ framework, part of the Dojo Toolkit, which enables you to easily write applications with a native iPhone, iPad, or Android look and feel. It provides lightweight widgets optimized for mobile devices using advanced CSS3 features, such as animations and transformations. This approach requires only web programming knowledge, and there is no deployment. You get access to your application through the browser that’s available on the mobile device.

Views and widgets

Dojo Mobile provides widgets for creating device-like applications. This example uses:

  • dojox.mobile.View: A container widget that fits the entire screen of the device. It is a "virtual page," because several views can be defined within the same HTML page.
  • dojox.mobile.Heading: The typical navigation bar of mobile applications that displays on the top of screen, just below the status bar of the device. It can contain a back button to go back to the previous view.
  • dojox.mobile.TabBar: The typical bar at the bottom of the screen, it is a container widget that contains buttons.
  • dojox.mobile.TabBarButton: A button widget designed for the Tab Bar widget.
  • dojox.mobile.RoundRectList: A widget container that contains items.
  • dojox.mobile.ListItem: Items for a list container widget.

CSS3 animations

Dojo Mobile makes an extensive use of CSS3, leveraging all the latest CSS3 features, such as transformation, transition, and animation implemented in browsers such as Safari or Chrome. A compatibility module is offered so that if CSS3 is not supported, the older browser versions degrade gracefully.

Mobile themes

At the time of this writing (the current release of Dojo is version 1.6.1), Dojo Mobile provides iOS (iPhone and iPad) and Android themes. Other themes, such as Blackberry 6 and WebOS are in progress. Changing from an iOS look and feel to an Android look and feel is simply a matter of changing the CSS.


IBM ILOG Dojo Diagrammer

IBM ILOG Dojo Diagrammer is a Dojo widget with advanced diagramming and graph layout capabilities. The purpose of ILOG Dojo Diagrammer is to provide a solution for Ajax applications to display graphs (or networks) of nodes connected by links. The diagramming component includes sophisticated graph layout algorithms which position the nodes and route the links automatically.

IBM ILOG Dojo Diagrammer also provides a set of services (interactors) that enable you to interact with the nodes and the links. The basic interactions are selection, panning, and zooming. Before the appearance of the touch-based screens, these interactions were done either with the mouse or with the keyboard. With the latest release, IBM ILOG Dojo Diagrammer automatically detects touch-enabled devices, enabling the user to interact with the diagram with touch gestures such as tap, pan, or pinch.

Touch support

IBM ILOG Dojo Diagrammer automatically detects touch-based devices. The Diagram widget supports these touch gestures:

  • Simple tap: User can select the nodes or the links simply by touching them.
  • Panning: User can move the entire diagram by putting a finger on the screen and moving it around while keeping contact with the screen.
  • Pinching in and out: User can zoom progressively in or out by moving apart the thumb and the forefinger.

Event handling

The event handling for touch-enabled devices uses mouse events already provided by the Diagram widget. For example, to add an action when the user double taps on a node, you use the event that is triggered for mouse double click events through a dojo.connect on the onNodeDblClick event, as shown in Listing 1.

Listing 1. Connecting a touch event to a custom action
diagram = dijit.byId("diagram");
dojo.connect(diagram, "onNodeDblClick", null, function(node,event){
// your action
});

Table 1 shows all the events that can be triggered by the Dojo Diagram widget.

Table 1
GestureAssociated event in a nodeAssociated event in a link
Touch downonNodeMouseDownonLinkMouseDown
PanningonNodeMouseMoveonLinkMouseMove
Touch uponNodeMouseUponLinkMouseUp
Simple taponNodeMouseClickonLinkMouseClick
Double taponNodeMouseDblClickonLinkMouseDblClick

Creating the sample application

This section explains how to write a basic organization chart application based on Dojo Diagrammer. Figure 1 shows the high level architecture of the sample application that will be used throughout this article.

Figure 1. Overall architecture of an application with Dojo Mobile and IBM ILOG Dojo diagrammer
Figure 1. Overall architecture of an application with Dojo Mobile and IBM ILOG Dojo diagrammer

In this sample application :

  • IBM ILOG Dojo Diagrammer displays the nodes and the links of the organization chart.
  • Each item of the data store will be represented by a graphical node. The hierarchical relationships between items defined in the data store will be represented as links.
  • Dojo Mobile displays views with the native look and feel of the mobile device it is running on.

This organizational chart application will provide two different views:

  • Organization chart view: Displays only a given employee, his manager, and his direct reports, if any.
  • Detail view: Displays detail information for the selected employee, such as e-mail address, position, and location

A button bar will enable switching between the different views. When complete, the sample application will look similar to Figure 2.

Figure 2. Organization chart application
Figure 2. Organization chart application

By touching the Information button on the button bar, you switch to the detail view (Figure 3).

Figure 3. The detail view
Figure 2. Organization chart application

To build this sample application, perform the steps that follow.

  1. Configure HTML page

    Start building the application by the configuring the HTML page.

    1. Choose the DOCTYPE.

      The HTML page should have the HTML 5 DOCTYPE (Listing 2) so that it triggers the standard HTML rendering mode (as opposed to the old “quirks” mode).

      Listing 2. HTML5 DOCTYPE
      <!DOCTYPE html>
    2. Configure the viewport.

      Most mobile browsers like iOS Safari or the Android default browser support the <meta name=”viewport”> tag. What is the purpose of this tag? On a desktop browser, the viewport is the visible part of you HTML page and has the width and the height of the browser window. The width of the viewport determines the layout of the HTML page. The user can resize the viewport by resizing the browser window.

      On mobile devices, browsers have a fixed size. The user can pan the page or zoom in/out. Most web sites are optimized for 1024 x 768 or 800 x 600 screen sizes, whereas a typical mobile device size is 320 x 480 or 640 x 960. Therefore, most web sites wouldn’t render properly on mobile devices if the HTML layout was using the mobile device size. Instead, the HTML layout uses a much larger area and scales the page to fit it on the device screen. This is where the meta viewport tag comes into action. You can define the width that is used for the HTML layout and the initial scale.

      Dojo Mobile widgets are optimized for mobile devices and designed to behave like a native mobile application. Therefore, the default mobile browser behaviour should be disabled by adding the element shown in Listing 3 to the head section of your web page.

      Listing 3. Viewport configuration
      <meta name="viewport" content="width=device-width,initial-scale=1,
      maximum-scale=1,minimum-scale=1,user-scalable=no"/>
    3. Hide Safari UI components.

      iOS Safari provides a special meta tag to run your application in full-screen mode; that is, without the address bar, which consumes 60 pixels of real estate, and the button bar at the bottom of the screen, which consumes 44 pixels. Web-app-capable mode (Listing 4) enables your web application to be launched from the Home screen of your iOS device.

      Listing 4. Webapp mode
      <meta name="apple-mobile-web-app-capable" content="yes" />

      After you have set the DOCTYPE and the meta tags, your resulting HTML page should look like Listing 5.

      Listing 5. HTML head of the organization chart application
      <!DOCTYPE html">
      <html lang="en">
      <head>
      	<title>Dojo Diagrammer Demos</title>
      	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      	<meta name="viewport" content="width=device-width,initial-scale=1,
      		maximum-scale=1,minimum-scale=1,user-scalable=no"/>
       	<meta name="apple-mobile-web-app-capable" content="yes" /> 
      </head>
      </html>
  2. Configure Dojo

    Because you define statically with HTML tags your widgets, the Dojo parser must be enabled while loading the HTML page with djConfig.parseOnLoad. The code for configuring Dojo is shown in Listing 6.

    Listing 6. Dojo configuration
    <script type="text/javascript">
    	var djConfig = {
    		parseOnLoad : true
    	};
    </script>
  3. Load modules

    In this step, you need to load Dojo Mobile modules, Dodjo modules, amnd the mobile device theme into the applications. To load the Dojo Mobile modules, include the code shown in Listing 7.

    Listing 7. Loading Dojo Mobile modules
    <script type="text/javascript">
    // Load the lightweight Dojo Mobile parser
    dojo.require("dojox.mobile.parser");
    // Load the Dojo Mobile lib
    dojo.require("dojox.mobile");
    // Load the Dojo Mobile Tab Bar
    dojo.require("dojox.mobile.TabBar");
    // Load the modules for non webkit browsers
    dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");
    dojo.requireIf(!dojo.isWebKit, "dojo.fx");
    dojo.requireIf(!dojo.isWebKit, "dojo.fx.easing");
    </script>

    The modules listed in the code shown in Listing 8 are required for the organization chart example.

    Listing 8. Loading Dojo modules
    <script type="text/javascript">
         dojo.require("dojo.data.ItemFileWriteStore");
         dojo.require("ibm_ilog.diagram.widget.Diagram");
         dojo.require('ibm_ilog.graphlayout.tree.TreeLayout');
    </script>

    It’s possible that in the future, Dojo Mobile might be able to detect automatically the appropriate CSS to be loaded for your device. Until then, you need to add the JavaScript code shown in Listing 9 to the application. This code checks the user agent for the type of device and adds the corresponding CSS.

    Listing 9. Loading CSS theme for the mobile device
    <script type="text/javascript">
          var loadCSS = function(theme){
             var addcss = function(path) {
               var e = document.createElement("link");
               e.setAttribute("href", path);
               e.setAttribute("rel", "stylesheet");
               e.setAttribute("type", "text/css");
               document.getElementsByTagName("head")[0].appendChild(e);
             };
             if (theme == "auto"){
               var device = navigator.userAgent.toLowerCase();
              
               if (device.search("android") > -1) {
                 addcss("../../../dojox/mobile/themes/android/android.css");
               } else {
                 addcss("../../../dojox/mobile/themes/iphone/iphone.css");
               }
             }
             else if (theme == "iphone"){
                 addcss("../../../dojox/mobile/themes/iphone/iphone.css");
             }
             else if (theme == "android"){
                 addcss("../../../dojox/mobile/themes/android/android.css");
             }
          }
        
        loadCSS("auto");
        
        </script>
  4. Define the data

    The standard pattern with Dojo for accessing data is to use the Dojo Data Store API. More precisely, this example will use the ItemFileWriteStore data store that is provided by Dojo out of the box (Listing 10). This data store reads JSON files.

    Listing 10. Data Store creation
    <div jsId="graphModel" dojoType="dojo.data.ItemFileWriteStore" 
    	url="./mycompany.json">
    </div>

    Listing 11 lists the contents of the JSON file mycompany.json, which defines the hierarchy of the employees. For the sake of simplicity, only three employees are defined.

    Listing 11. JSON file for the graph model
    	"identifier": "Name",
    	"label": "Name",
    	"items": [
    	{
    		"ManagerName": "",
    		"children": [{
    			"_reference": "Margaretha Blaise"
    		},
    		{
    			"_reference": "Helena Camp"
    		}],
    		"Layout": "rightHanging",
    		"Name": "Maurice Conners",
    		"EMail": "mconners@my.com",
    		"Position": "Developer",
    		"Location": "San Francisco",
    		"Picture": "male"
    	},
    	{
    		"ManagerName": "Maurice Conners",
    		"Layout": "standard",
    		"Name": "Margaretha Blaise",
    		"EMail": "mblaise@my.com",
    		"Position": "Developer",
    		"Location": "San Francisco",
    		"Picture": "female"
    	},
    	{
    		"ManagerName": "Maurice Conners",
    		"Layout": "standard",
    		"Name": "Helena Camp",
    		"EMail": "hcamp@my.com",
    		"Position": "Developer",
    		"Location": "San Francisco",
    		"Picture": "female"
    	}
    	
    	]
    }

    The employees are items of a JSON array. The JSON objects for the managers have a children property which is an array of objects, each of them has a _reference property whose value is the name of a manager employee.

    For exemple, the children property of the employee "Maurice Conners" contains only one subordinate: "Margaretha Blaise." The other properties are displayed by the organization chart application.

    Why should you use the ItemFileWriteStore and not ItemFileReadStore? For the local view, you want to display only a small subset of the employees depending on the selected node. To do this, the query feature of the Dojo data store is used to filter the nodes with a visible Boolean property. Therefore, you must be able to set or unset this visible property, which is only possible with the ItemFileWriteStore.

  5. Define the graphical representation of the nodes and bindings to data store items

    The IBM ILOG Diagrammer makes extensive use of GFX, the Dojo Toolkit cross-platform vector graphics API, for the rendering of the nodes and links in a diagram (Figure 4).

    Figure 4. Dojo GFX
    Figure 4. Dojo GFX

    IBM ILOG Dojo Diagrammer provides a template mechanism for defining the graphical representation of the nodes. The template format is based on the dojox.gfx serialization specification. IBM ILOG Dojo Diagrammer also provides a binding mechanism that enables initializing properties of the GFX shapes from the objects of the data store. For example, the name of an employee in the data store can be bound to a text label in the graphic representation.

    The data property of the node always refers to the corresponding item in the data store. Inside a template, you can use this property to define bindings to properties of the data store item.

    The node template for the organizational chart is shown in Listing 12. It defines a rectangle with a size of 200 x 80 pixels (shape of type rect), an icon whose name is bound to the Picture property of the items of the data store (shape of type image), and three text fields (shape of type text) bound to the Name, Position and EMail properties of the items. The graphical result is shown in Figure 5.

    Listing 12. Node template
    var orgChartNodeTemplate = [{
    		'shape': {
    			'r': 10,
    			'height': 80,
    			'width': 200,
    			'y': 10,
    			'x': 10,
    			'type': 'rect'
    		},
    		'stroke': {
    			'type': 'stroke',
    			'color': 'gray',
    			'width': 2
    		},
    		'fill': '#FFEFF4F8',
           selectedStyle: { fill: '#FF4974C8' }
    	}, {
    		'shape': {
    			'src': './images/{{data.Picture}}.png',
    			'height': 65,
    			'width': 48,
    			'y': 20,
    			'x': 10,
    			'type': 'image'
    		}
    	}, {
    		'shape': {
    			'align': 'start',
    			'text': '{{data.Name}}',
    			'y': 30,
    			'x': 70,
    			'type': 'text'
    		},
    		'fill': {
    			'r': 0,
    			'g': 0,
    			'b': 0,
    			'a': 1
    		},
    		'font': {
    			'type': 'font',
    			'weight': 'bold',
    			'size': '10pt',
    			'family': 'sans-serif'
    		}
    	}, {
    		'shape': {
    			'align': 'start',
    			'text': '{{data.Position}}',
    			'y': 50,
    			'x': 70,
    			'type': 'text'
    		},
    		'fill': {
    			'r': 0,
    			'g': 0,
    			'b': 0,
    			'a': 1
    		},
    		'font': {
    			'type': 'font',
    			'weight': 'normal',
    			'size': '9pt',
    			'family': 'sans-serif'
    		}
    	}, {
    		'shape': {
    			'align': 'start',
    			'text': '{{data.EMail}}',
    			'y': 75,
    			'x': 70,
    			'type': 'text'
    		},
    		'fill': {
    			'r': 0,
    			'g': 0,
    			'b': 0,
    			'a': 1
    		},
    		'font': {
    			'type': 'font',
    			'weight': 300,
    			'size': '9pt',
    			'family': 'sans-serif'
    		}
    	}];
    Figure 5. Node representation
    Figure 5. Node representation

    This node template is defined in the file orgcharnode.js that you import in the HTML page with a script tag (Listing 13).

    Listing 13. Node template import
    <script type="text/javascript" src="orgchartnode.js"></script>
  6. Define the Organization Chart view

    The Organization Chart view is the main view of your application (Listing 14). It displays the organizational chart with the Dojo Diagram widget.

    Listing 14. Organization Chart view
    <div id="orgchartView" dojoType="dojox.mobile.View" selected="true">
    	<h1 dojoType="dojox.mobile.Heading">Mobile Org Chart Demo</h1>
    	<div class="diagramView">
    		<div id="diagram" class="diagram"
    			dojoType='ibm_ilog.diagram.widget.Diagram'
    			childBinding="children"
    			nodesStore="graphModel"
    			nodesQuery="{visible:'true'}"
    			linkStyle="{ strokeWidth: 2, strokeColor: '#65B4D2' }"
    			createLinksForHierarchy="true"
    		>
    		</div>
    	</div>
    			
    	<ul dojoType="dojox.mobile.TabBar" >
    		<li id = "info" dojoType="dojox.mobile.TabBarButton" 
    			icon1="../../../dojox/mobile/tests/images/tab-icon-12.png" 
    			icon2="../../../dojox/mobile/tests/images/tab-icon-12h.png" 
    			moveTo="infoView">
    			Info
    		</li>
    	</ul>
    </div>

    The childBinding attribute indicates that the hierarchical relationships of the graph is defined by a property (in this example, children) that links a node to all the nodes referenced in the children array. If you remember the structure of the JSON file, each employee has a children property that represents the array of subordinates.

    The createLinksForHierarchy attribute indicates that the hierarchical relationships are represented as links.

    The nodesQuery attribute is used to filter the nodes that should be displayed. At any moment, you display an employee, his manager, and his direct reports; all other nodes are hidden. As you move though the employees of the company, you change the visible property of the items of the data store in order to show only the required nodes.

  7. Define the Details view

    The Details view displays some detail information for the selected employee (Listing 15). You access this view by touching the “Info” button of the Tab Bar at the bottom of the screen.

    Listing 15. Details view
    <div id="infoView" dojoType="dojox.mobile.View">
    <h1 dojoType="dojox.mobile.Heading" back="Org Chart" 
    	moveTo="orgchartView">Details</h1>
    		<ul dojoType="dojox.mobile.RoundRectList">
    			<li id="name" dojoType="dojox.mobile.ListItem" >
    			Name	
    			</li>	
    			<li id="manager" dojoType="dojox.mobile.ListItem">
    			Manager
    			</li>
    			<li id="mail" dojoType="dojox.mobile.ListItem">
    			Mail
    			</li>
    			<li id="position" dojoType="dojox.mobile.ListItem">
    			Position
    			</li>
    			<li id="location" dojoType="dojox.mobile.ListItem">
    			Location
    			</li>
    			</ul>
    </div>
  8. Apply CSS rules

    You need to add styling instructions in order to layout all the widgets properly and resize them when the mobile devices change their orientation (Listing 16).

    Listing 16. CSS rules
    <style type="text/css">
    	html, body {
    		height: 100%;
    		width:100%;
    	}
    	.mblView {
    		height: 100%;
    	}
    	.mblTabBar {
    		position: absolute;
    		bottom:0;
            width:100%;
    	}
    	.diagramView {
    		position:absolute;
    		top:44px;
    		bottom:49px;
    		left:0;
    		right:0;
    	}
        .diagram {
            width:100%;
            height:100%;
        }
    </style>

    You must set the width and the height of the HTML and body elements such that the nested div elements (in this example, the Dojo Mobile views) can be given a proportional size, otherwise the Dojo Mobile view won’t fit the whole screen. Here, the height of all the elements of class mblView (that is, Dojo Mobile views) are set.

    An absolute position is given to the Tab Bar to attach its bottom border to the bottom of the screen (or more precisely to the bottom of the first parent that has a position other than static; in this case, a dojox.mobile.view widget which itself fits the entire screen).

    An absolute position is also given to the diagramView to attach its top border at 44 pixels from the top border of the Dojo Mobile view, because the heading bar is 44 pixel high. The bottom border of the diagramView is attached at 49 pixels from the bottom border of the Dojo Mobile view because the Tab Bar is 49 pixel high. The left and right borders are attached to the corresponding borders of the Dojo Mobile view so the Diagram widget will fit the entire width of the screen.

    Finally, the Dojo Diagram widget is styled so that it fits its parent div with the diagramView class.

  9. Implement JavaScript code

    All the code of the application is defined in a file named orgchart.js (Listing 17). The code is embedded in a self invoking function; this is a common JavaScript pattern to avoid creating global variables.

    Listing 17. JavaScript application code
    (function (){
    // diagram: ibm_ilog.diagram.widget.Diagram
    	var diagram = null;
    	
    	// The items of the data store of the Diagram widget
    	var allItems = null;
    	
    // Returns the parent of the given item
    var getParent = function(nodesStore,items,item){
    
    	for ( var i = 0; i < items.length; i++) {
    		var children = nodesStore.getValues(items[i], "children");
    		if (dojo.some(children, function(child) {
    			return item === child;
    		}))
    			return items[i];
    	}
    	
    	return null;
    	
    };
    
    // Show the selected node, its parent and its children
    var showGraph = function(event){
    	var selection = diagram.getSelection().get();
    	var selectedItem = null;
    	var parentItem = null;
    	var nodesStore = diagram.nodesStore;
    	// If several selected nodes, take the first one
    	if (selection.count > 0) {
    		selectedItem = selection.item(0);
    	} 
    	
    	dojo.forEach(allItems,function(item){
    		nodesStore.unsetAttribute(item, "visible");
    		var managerName = nodesStore.getValue(item,"ManagerName");
    		// If there is no seleced item, take the first item we find
    		if (!managerName && !selectedItem)
    			selectedItem = item;
    	});
    	
    	// All the children of the selected item should be visible
    	var children = nodesStore.getValues(selectedItem, "children");
    	dojo.forEach(children,function(child){
    		nodesStore.setValue(child, "visible","true");
    	});
    	
    	// The selected item should be visible
    	nodesStore.setValue(selectedItem, "visible", "true");
    	
    	// Get the parent of the selected node
    	parentItem = getParent(nodesStore,allItems,selectedItem);
    	
    	// The parent item, if any, should be visible
    	if (parentItem != null)
    		nodesStore.setValue(parentItem, "visible", "true");
    	
    	
    	// When the Diagram is loaded
    	// reselect the previously selected item
    	// Perform the layout
    	var handle = dojo.connect(diagram,"onLoaded",function(){
    	  
    		diagram.getSelection().add(selectedItem);
    		
    	var graph = diagram.getGraph();
    	graph.performGraphLayout();
    		dojo.disconnect(handle);
    	});
    	
    	
    	// Loads the data store and creates the diagram
    	diagram.load();
    
    };
    
    // Handle the navigation through the hierarchy
    // of employees
    // when the user double tap on a node
    // show that node, its parent and its children
    var onNodeDblClick = function(entity, event){
    // Prevent the default action and stop the bubbling
      dojo.stopEvent(event);
      // Show the new graph
      showGraph();
    };
    
    
    // When the layout is finished, perform a fitToContents
    var onLayoutStepPerformed = function(layoutStarted, layoutFinished){
    	if (layoutFinished){
    	  //Changes the transform of the diagram 
    	  //so that the whole graph is visible in its parent surface.
    	  diagram.fitToContents(20,false);
    	}
    };
    
    // Show the detail information for the selected employee
    var showInfo = function(event){
    
      // deselect the tab bar button "info"
      dijit.byId("info").deselect();
      
      
      // get the selection object
    	var selection = diagram.getSelection().get();
    	// get the data store
    	var nodesStore = diagram.nodesStore;
    	var selectedItem = null;
    	// If no selected item, reset the list items
    	if (selection.count == 0) {
    	  dijit.byId("name").set("rightText","");
    	  dijit.byId("manager").set("rightText","");
    	  dijit.byId("mail").set("rightText","");
    	  dijit.byId("position").set("rightText","");
    	  dijit.byId("location").set("rightText","");
    	  return;
    	} else
    		selectedItem = selection.item(0);
    	
    	// get the attributes of the selected item 
    	// set them to the list item widgets
    	
    	var value = nodesStore.getValue(selectedItem,"Name");
    	dijit.byId("name").set("rightText",value);
    	
    	value = nodesStore.getValue(selectedItem,"ManagerName");
    	dijit.byId("manager").set("rightText",value);
    	
    	value = nodesStore.getValue(selectedItem,"EMail");
    	dijit.byId("mail").set("rightText",value);
    	
    	value = nodesStore.getValue(selectedItem,"Position");
    	dijit.byId("position").set("rightText",value);
    	
    	value = nodesStore.getValue(selectedItem,"Location");
    	dijit.byId("location").set("rightText",value);
    	
    };
    
    var orgchartViewHeight = function(){
      var orgChartView = dojo.byId("orgchartView");
      orgChartView.style.height = 
    	(dojo.global.innerHeight||dojo.doc.documentElement.clientHeight) + "px";
    
    };
    
    // initialization function, invoked once dojo is loaded
    var init = function() {
    	
      // initialization of the diagram variable defined in the closure
    	diagram = dijit.byId("diagram");
    
    	dojo.connect(diagram, "onNodeDblClick", null, onNodeDblClick);
    	
    	
    	dojo.connect(dijit.byId("infoView"),"onBeforeTransitionIn", null, showInfo);
    	if(dojo.config["mblHideAddressBar"] !== false && 
    		navigator.appVersion.indexOf("Mobile") != -1){
          dojo.subscribe("/dojox/mobile/resizeAll", function(){
            orgchartViewHeight();
            dijit.byId("orgchartView").resize();
          });
    	    
    	}
    
      var layout = new ibm_ilog.graphlayout.tree.TreeLayout();
      dojo.connect(layout, "onLayoutStepPerformed", null, onLayoutStepPerformed);
      
      // Layout configuration
      layout
          .setGlobalLinkStyle(ibm_ilog.graphlayout.tree.TreeLayout.ORTHOGONAL_STYLE);
      layout.setFlowDirection(ibm_ilog.graphlayout.Direction.BOTTOM);
      layout.setLayoutMode(ibm_ilog.graphlayout.tree.TreeLayout.TIP_LEAVES_OVER);
      layout.setGlobalAlignment(ibm_ilog.graphlayout.tree.TreeLayout.CENTER);
    
      var graph = diagram.getGraph();
      graph.setNodeLayout(layout);
    
      
      var onCompleteFetch = function(items, request) {
        // remembers all the items of the data store 
        allItems = items;
        // Show the graph
        showGraph();
      };
      
      // load the data store
      var nodesStore = diagram.nodesStore;
      nodesStore.fetch({
        query : {},
        onComplete : onCompleteFetch
      });
      
    	
    };
    
    
    dojo.addOnLoad(init);
    })();

    Refer to the comments in the above self-documented code for further programmatic explanations.


Conclusion

This article described how to write a simple application for mobile devices, such as iPhone, iPad, or Android devices using Web 2.0 technologies; namely the Dojo Mobile library that comes with the Dojo Toolkit and IBM ILOG Diagrammer, which is part of the WebSphere Application Server Feature Pack for Web 2.0 and Mobile V1.1. Out of the box, IBM ILOG Dojo Diagrammer automatically detects touch-enabled devices and provides standard touch interactions (such as selection, panning, zooming) with common touch gestures (such as simple tap, double tap, panning). This article demonstrated how to add custom actions by connecting application code to mouse events provided by the IBM ILOG Dojo Diagrammer widget. These mouse events are triggered by the native touch events of the mobile device. With Dojo Mobile, the diagram application has the native look and feel of the mobile device.

Resources

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into WebSphere on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=WebSphere, Web development, Agile transformation
ArticleID=758671
ArticleTitle=Create an ILOG Dojo Diagrammer application for touch-enabled mobile devices
publish-date=09212011