The actual combat of XML volume (5): Structure tree diagram

Xml

Motivation:
The first thought of making a binary tree was the need to make a company chart. The previous practice is to directly use the image software to draw a picture. It's nice, but every time there's a change, you need to repaint a new one. On the other hand, the page on the display of lines, layout is quite limited. According to the dynamically generated data for typesetting, positioning is very difficult, but also unsatisfactory in appearance. After a variety of attempts, decided to use xml+xsl for data operations, using VML to beautify the line, using JavaScript to target objects.

Materials:
Structure tree diagram of XML volume
There are 2 files: Flow2.xml and flow2.xsl
Effect:
Browse here
Explain:
Two fork Tree ideas (1)

<STYLE>
V\:* {behavior:url (#default #vml)}
</STYLE>
<v:group id= "group1" name= "group1" coordsize = "100,100" >
...
</v:group>
These are the basic forms of VML and I will not explain them in detail.

XML is a tree structure, and we need to read each data to
XML data tree for traversal. Recursive operations are one of the XSL advantages.
I am also in many other ways to traverse the operation failed before
Determines the use of XSL.

<FlowRoot>
<vcTitle> two fork Tree--structure diagram </vcTitle>
<Author>Sailflying</Author>
<Email>sailflying@163.net</Email>
<FlowNode>
<iProcess>1</iProcess>
<vcCourse> first Node </vcCourse>
<iNextYes>
<FlowNode>
<iProcess>2</iProcess>
<vcCourse> second Node </vcCourse>
<iNextYes>...</iNextYes>
<iNextNo>...</iNextNo>
</FlowNode>
</iNextYes>
<iNextNo>
<FlowNode>
<iProcess>3</iProcess>
<vcCourse> Third Node </vcCourse>
<iNextYes>...</iNextYes>
<iNextNo>...</iNextNo>
</FlowNode>
</iNextNo>
</FlowNode>
</FlowRoot>

Logically, there are two child nodes (2,3) under the current node (1).
Just locate node 2 and node 3 in the lower left and lower right of node 1.
Here I will connect the left and right nodes with green and red respectively, for easy display.

We talked about the recursive function of XSL, in order to see more clearly each of the detailed
To display the steps, just follow the code below and add an alert statement.

<xsl:template match= "Flownode" >
...
<script language= "JavaScript1.2" >
...
Alert (' progressive display ');
...
</SCRIPT>
...
</xsl:template>

See the above slow motion, whether can let everybody understand my thought.

Two fork Tree ideas (2)
My idea is simple:
(1) Read the current node data, using VML to generate a new object.
Assign an initial value to an object (such as a name,id,style style)
(2) Using script control to position the current object
(3) Arrows and lines between the current node and its parent node.
(4) Continue to find the child node of the current node, loop to the end.
That is, all nodes are traversed, and the tree has been built.

<xsl:template match= "Flownode" >
...
<xsl:apply-templates/>
...
</xsl:template>
<xsl:template match= "Inextyes" >
<xsl:apply-templates select= "./flownode"/>
</xsl:template>

<xsl:template match= "Inextno" >
<xsl:apply-templates select= "./flownode"/>
</xsl:template>

The entire recursive process is done by the above three modules (template).
The first template to match the template for each child node in the current node
The following two template were invoked, and the following two template were executed in detail
Call the first template, which is the equivalent of a recursive function.

Grammar:

To match the template for each child node in the current node in turn, use the
The basic form of <xsl:apply-templates/>.
Otherwise, the matching node is determined by the value of the XPath expression in the Select argument
Fixed, such as <xsl:apply-templates select= "./flownode"/>

The function of (1) and (2) is to return the string value of an expression given by the Select parameter.
Their search criteria are the same, so the value returned is the same.
They are written in a different form than they use.

(1) <xsl:value-of select= "./iprocess/text ()"/>
(2) {./iprocess/text ()}

Some variables are defined here, and the location of the nodes is based on these variables to invoke the Operation formula.

Root_left//Root Left margin = allocation width of all leaves (y*10) + width of all leaves (y*50) + left margin base value (10)
Root_top//root top margin = Top margin base value (10)
Objoval//Current object, is an object
Objoval_iprocess//Current object's step value
Objparentoval//Current object's parent node, is an object
Objparentoval_iprocess//Current object parent node's step value
Objparent_name//The name of the current object's parent node
Number of left leaves in all child nodes of Leaf_left//current Object
Leaf_right//The right number of leaves in all child nodes of the current object
Number of leaves in all child nodes of leaf_sum//current Object

Leaf: means the current node has no child nodes

The location formula for the node:

(1) The current node is the root node

The location of the root
Sobjoval.style.left=parseint (Root_left);
Sobjoval.style.top=parseint (Root_top);
The parseint () function is to take an integer value, if it is Nan
The role of the isNaN () function is to determine whether the parseint obtained is an integer

(2) The current node is the left child node of the parent node

1 The condition of judgment is: the name of the current object's parent node = ' Inextyes '
...
2 If the right child leaves are present, the formula is:
Left of the current node's left= parent node-The total width of the right child leaf of the current node-the width of the current node

3 If there is no right child leaves, but the left child leaves, the formula is:
Left of the current node's left= parent node-The total width of the leaves of the current node

4 If the current node itself is a leaf, the formula is:
The left-current node width of the left= parent node of the current node
...

(3) The current node is the right child node of the parent node

1 The condition of judgment is: the name of the current object's parent node = ' Inextno '
...
2 If there is a left child leaf, the formula is:
The total width of the left of the current node's left= parent node, and the current node's width

3 If there is no left child leaf, but the right child leaves, the formula is:
The total width of the Left + right child leaves of the current node's left= parent node

4 If the current node itself is a leaf, the formula is:
The width of the left + current node of the left= parent node of the current node
...

(2) and (3) the formula is to get the current node left, we also need to get the current node top
Simple formula: Top + offset of the top= parent node of the current node (80)

Two fork Tree ideas (3)
Connecting line positioning Ideas:
(1) Find the location of the current node and the parent node
(2) Determine whether the current node is the left child node of the parent node or the right child node
(3) Draw the line

Some variables are defined here.

Objoval//Current node, is an object
Objparentoval//Current object's parent node, is an object
Objline//Current line, is an object

Position formula for line:

From= "X1,y1" to= "X2,y2" is the way to locate lines in VML.

The current node is the left child node of the parent node, the formula is:
From = left + offset of parent node (15), Top + offset of parent node (32)
to = left + offset of parent node (30), top-offset of parent node (2)

The current node is the right child node of the parent node, then the formula is:
From = left + offset of parent node (35), Top + offset of parent node (32)
to = left + offset of parent node (20), top-offset of parent node (2)

That's all I can think of.

It would be much simpler to simply make a corporate chart.
The following is the idea of Celeron, I also on his basis for a little bit more.

First, calculate the number of the lowest node, get the width,
You should then compute its upper node position based on the dependencies of the node, recursively.
Nodes at each level are sorted by dependencies first
First set "base value" = node should be offset to right
Each node that contains a child node has a left value equal to half the width of the node it owns plus a basic value

Something:

I don't know why the internet has been bad lately. There is more time to disconnect than online.
So not to simplify the code, in fact, to improve the function there are many, such as:
Need to add right button menu
The right menu contains new nodes, modifies node names, changes associations, and so on.
Right-click on each node to open this node's right-click menu

Explain:
1 Flow2.xml is a data file, I believe we will not have any problems.
2 flow2.xsl is a format file, there are several places to pay attention to.
(1) in the script:

(1) <xsl:value-of select= "./iprocess/text ()"/>;
(2) {./iprocess/text ()}

The function of (1) and (2) is to return the string value of an expression given by the Select parameter.
Their search criteria are the same, so the value returned is the same.
They are written in a different form than they use.
<xsl:apply-templates select= "Team" order-by= "blue_id"/>
For example, we want to generate the following code
<div name = "parameter value" > Content </div>

Let's assume the name is "name" and the value of the parameter is the value of the child node book under the current node in the XML data

The first is to add the attribute name, plus the parameter value
<div>
<xsl:attribute name= "Name" >
<xsl:value-of select= "./book/text ()"/> </xsl:attribute>
Content
</div>

The second way is to directly add attribute names and parameter values
<div name= "{./book/text ()}" > Content </div>

The specific use you can see in the code I wrote in the example.

XSL is in the formal xmlns:xsl= "http://www.w3.org/1999/XSL/Transform" standard.

<xsl:value-of select= "./book/text ()"/>
The effect is: just write out his text value, and
<xsl:value-of select= "./book"/>
is to display his text value and the contents of all of his child nodes.
You can experiment, output a child node, a child-free node of the
See if the results shown are the same.

(2) Need to note:

IE5 does not support <tag att= "{XPath}" >
To use
<tag><xsl:attribute name= "att" ><xsl:value-of select= "XPath" ></xsl:attribute>

namespace to use
Xmlns:xsl= "http://www.w3.org/TR/WD-xsl"

<?xml version= "1.0" encoding= "gb2312"?>
Another point:
Few of the code shown in most XML textbooks add encoding= "gb2312",
So when we use Chinese in XML, we get an error, because we don't write this statement.

Postscript:
Here is a way of thinking. If analogy, nature can be useful.