Rapid Development of HTML5-based Network Topology Map Application--Introduction (1)

The topology of a computer network is a method of citing topology to study the relationship between points and lines that are independent of size and shape. The computer and communication equipment in the network are abstracted as a point, and the transmission medium is abstracted as a line. The geometric figure composed of points and lines is the topology of the computer network. The topology of the network reflects the structural relationship of the entities in the network. It is the first step in building a computer network and the basis for implementing various network protocols. It has a significant impact on network performance, system reliability and communication costs. Topology in computer network refers to the form and method of connecting nodes; network units such as workstations and servers in the network are abstracted as "points"; cables in the network are abstracted as "lines". Affect network performance, system reliability, and communication costs.

Topology is also divided into: bus topology, star topology, ring topology tree topology and mesh topology. The case written in this article is a branch in the bus topology. We will build this topology graph step by step.

 

Example image:

 

The topology graph component ht.graph.GraphView (hereinafter referred to as GarphView) is the most abundant 2D component in the HT framework, and its related class libraries are all under the ht.graph package. GarphView has basic graphics presentation and editing functions, topology node connection and automatic layout functions, predefined objects in industries such as power and telecommunications, and special effects such as animation rendering. Therefore, it has a wide range of applications and can be used as a drawing tool and human The computer interface can be used as a general graphical editing tool, and can be extended to enterprise applications such as workflow and organizational charts.

The components of the HT framework refer to visual and interactive view controls. The HT framework is based on HTML5 technology, so HTthe visual part of the component is essentially an HTML element. Most of the HT components are bound to the DataModel data model. Can drive visual components, which shields the technical complexity of HTML underlying graphics. The purpose of HT’s encapsulation of HTML5 technology is to improve development efficiency and maintainability, but it does not mean that users are not allowed to directly operate HTML native elements. Programmers with HTML5 development experience, on the premise of understanding the HT system mechanism, can use it Various HTML5 technologies make custom extensions to HT components.

We use the ht.graph.GraphView component as the scene, and the specific code is only two lines:

graphView = new ht.graph.GraphView();
graphView.addToDOM();

First declare the variable, then add the component instance variable to the body. The root layer of all HT components is a div component, which can be obtained through the getView() function of the component. Default and custom interaction event listeners are generally added on this div (getView().addEventListener(type, func, false)), The rendering layer is generally provided by canvas. Users can directly set styles such as CSS background on the root div and canvas layer, and can also add new HTML components to the root div layer and present them together as sibling components of canvas. HT components generally use absolute positioning with position set to absolute. HT components are generally embedded in containers such as BorderPane, SplitView, and TabView, while the outermost HT component requires the user to manually add the underlying div element returned by getView() to the DOM element of the page. It should be noted here that, When the size of the parent container changes, if the parent container is a HT predefined container component such as BorderPane and SplitView, the HT container will automatically recursively call the invalidate function of the child component to notify the update. However, if the parent container is a native html element, the HT component cannot know that it needs to be updated. Therefore, the outermost HT component generally needs to monitor the window size change event of the window and call the invalidate function of the outermost component to update.

For the convenience of loading the outermost component to fill the window, all components of HT have the addToDOM function. The implementation logic is as follows, where iv is the abbreviation of invalidate:

addToDOM = function(){   
    var self = this,
        view = self.getView(),   // get the underlying div 
        style = view.style;
    document.body.appendChild(view); // Add the underlying div of the component to the body            
    style.left = '0'; // The component of ht sets the position to absolute by default 
    style.right = '0' ;
    style.top = '0';
    style.bottom = '0';      
    window.addEventListener('resize', function () { self.iv(); }, false);            
}

Next, we will introduce the concept of "data container". As the name suggests, it is the container for loading data. The data container ht.DataModel (hereinafter referred to as DataModel), as the model that carries the data data, manages the addition and deletion of data data and the dispatch of change events. The HT framework All components are presented to the user interface in different forms by binding the DataModel. The data container can be obtained through view.getDataModel() (abbreviated as view.dm()); at the same time, the component will also monitor the change event of the DataModel model ( view.getSelectionModel(), abbreviated as view.sm()), updates the interface data information synchronously in real time, mastering the operation of DataModel will master the model-driven method of all components.

We need to create two nodes ht.Node (inherited from the ht.Data class), a server, a client, two intermediate connections and a self-loop connection, these are all Data data, which need to be added to the DataModel data in the container. But we have to create this data node first. It only takes two sentences to add the node to the data container with HT. The method is very similar to the method of creating the topology component above. The topology component is added to the body, and the node is Add to the data container:

var server = new ht.Node(); // Create a "server" data node 
graphView.dm().add(server); // Add the node to the data container graphView.dm()

The client is also created in the same way, and the node name is client. For the sake of beauty, I set pictures for both the server and client nodes. There are two ways to set pictures:

• Directly set the relative or absolute path of the image to the corresponding attribute of the data model, server.setImage('images/server.png')

• First register through ht.Default.setImage('server', 'images/server.png'), and then set the registration name to the model server.setImage('server')


Directly setting the path method is convenient for development, and there is no need to register images in advance, but the image path occupies a lot of memory when the data model is serialized, and it is not conducive to management and maintenance after the image path changes in the future. Both methods are correct use methods and can be selected according to the project situation different or mixed. If the path method of url is adopted, the image will be automatically loaded inside the HT, and the corresponding view component will be automatically updated after onload.

Under the framework of HT, pictures are given a wider meaning, HTproviding a vector description form in a custom JSON format. The JSON vector format defined by the HT standard can also be registered and used as a picture. The vector format of HT is better than the traditional picture format. It is more space-saving, and the scaling is not distorted. The most powerful thing is that all the graphic parameters of the vector can be dynamically bound with the data on the Data model. For details, please refer to the vector manual . Now my explanation here has not reached this step. Those who are interested can find out by themselves.

Next is to create a connection between the two nodes. The ht.Edge type is used to connect the start and target Node nodes. There can be multiple Edges between the two nodes, and the start and target are also allowed to be the same node. The case of the same node is the case of forming a self-loop~ There are three connections here. Since there are two similarities, I will only paste the connection code of the straight line and the self-loop for explanation:

var edge = new ht.Edge(server, client); // Create a connection node, the parameters are the start node and the target node 
graphView.dm().add(edge); // Add the connection node to the data container

var cirEdge = new ht.Edge(server, server); // The start node and target node of this connection are the same node, forming a self-loop 
graphView.dm().add(cirEdge);

Wire nodes also inherit from the Data class, so they are added to the data container in the same way. As for the word above the connection, it is achieved through the setStyle method.

The data of HT can be divided into three attribute types:

• get/set or is/set types, such as getName(0/setName('ht') and isExpanded(), for common property operations
• attr type, accessed through getAttr(name) and setAttr(key, value), this type is reserved by HT for users to store business data
• The style type is operated through getStyle(name) and setStyle(key, value), and the primitive style on GraphView is controlled by this type attribute

Here I add the text description through the style type, and set the displayed text through the 'label' attribute:

edge.s({ // shorthand for setStyle 
    'label': 'request', // set text 
    'label.position': 3 // set text position 
});

The final display text is determined by the GraphView.getLabel function:

getLabel: function (data) {
     var label = data.getStyle('label'); // Get the value of the label attribute in the style style 
    return label === undefined ? data.getName() : label;
}

There is also a text position above, which is the position of the HT package. The specific display position is as follows:

Among them, 17 is the center position. You can adjust it according to this position to see the effect. For the specific description of the position, please refer to the  HT for Web Position Manual .

At this point, all the code analysis is completed. In the next section, I will show you how to add flow in the connection. Remember to watch~