Tutorial 1: Loading Graph Data

This tutorial shows how to load graph data from XML and create diagram objects corresponding to the graph nodes and edges.

1. Follow the Eclipse or Android Studio guide to create a new Android project and add a DiagramView to its main Activity.

2. Right-click the project's assets folder and choose New -> File from the context menu (If using Android Studio, you might have to create assets folder first by selecting New -> Folder -> Assets Folder from app's context menu). Create a new XML file called SampleGraph.xml and add to it content in the following form:

XML

<?xml version="1.0" encoding="utf-8" ?>
<Graph>
    <Nodes>
        <Node id="0" name="start" />
        <Node id="1" name="activity 1" />
        <Node id="2" name="task 1" />
        <Node id="3" name="task 2" />
        <Node id="4" name="activity 2" />
        <Node id="5" name="task 3" />
        <Node id="6" name="task 4" />
        <Node id="7" name="activity 3" />
        <Node id="8" name="task 5" />
        <Node id="9" name="task 6" />
        <Node id="10" name="end" />
    </Nodes>
    <Links>
        <Link origin="0" target="1" />
        <Link origin="1" target="2" />
        <Link origin="1" target="3" />
        <Link origin="2" target="4" />
        <Link origin="3" target="4" />
        <Link origin="4" target="5" />
        <Link origin="4" target="6" />
        <Link origin="5" target="10" />
        <Link origin="6" target="10" />
        <Link origin="0" target="7" />
        <Link origin="7" target="8" />
        <Link origin="8" target="9" />
        <Link origin="2" target="6" />
        <Link origin="9" target="10" />
    </Links>
</Graph>

3. Open MainActivity.java and navigate to the onCreate override.

4. Add the following variables to the onCreate handler. "nodeMap" maps diagram nodes to their identifiers, and "bounds" contains the default node size.

Java

HashMap<String, DiagramNode> nodeMap = new HashMap<String, DiagramNode>();
RectF bounds = new RectF(0, 0, 16, 8);

5. Load SampleGraph.xml and its root element using the XML DOM API:

Java

// load the graph xml
DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
DocumentBuilder builder = factory.newDocumentBuilder();
Document xml = builder.parse(
    getAssets().open("SampleGraph.xml"));
Element graph = (Element)xml.getFirstChild();

6. Load the graph node elements and create their corresponding ShapeNode objects by calling the createShapeNode method of the Factory class. createShapeNode is just a shortcut to creating a ShapeNode instance using the "new" operator and adding it to the Nodes collection of the diagram. Additionally, this code maps the new node to the "id" attribute of the XML element, and sets the node's Text to the value of the "name" attribute.

Java

// load node data
NodeList nodes = graph.getElementsByTagName("Node");
for (int n = 0; n < nodes.getLength(); n++)
{
    Element node = (Element)nodes.item(n);
    ShapeNode diagramNode = diagram.getFactory().createShapeNode(bounds);
    nodeMap.put(node.getAttribute("id"), diagramNode);
    diagramNode.setText(node.getAttribute("name"));
}

7. Load the graph links and create corresponding DiagramLink objects. The Origin and Destination of the links are accessed by their ids through the "nodeMap" dictionary.

Java

// load link data
NodeList links = graph.getElementsByTagName("Link");
for (int l = 0; l < links.getLength(); l++)
{
    Element link = (Element)links.item(l);
    diagram.getFactory().createDiagramLink(
        nodeMap.get(link.getAttribute("origin")),
        nodeMap.get(link.getAttribute("target")));
}

8. Arrange the diagram using the LayeredLayout class.

Java

// arrange the graph
LayeredLayout layout = new LayeredLayout();
layout.setLayerDistance(16);
layout.arrange(diagram);

9. Build and run the project. If everything is fine, you should see this representation of the graph: