Getting started with the front end: rapid development based on HTML5 network topology diagram application

The topological structure of computer network is a method to study the relationship between the point and line in the topological research and the size, shape-independent. The computer and communication equipment in the network is abstracted as a point, and the transmission medium is abstracted as a line, and the geometry composed of dots and lines is the topological structure of the computer network. Network topology reflects the structure of each entity in the network, is the first step in building a computer network, is the basis for the realization of various network protocols, it has a significant impact on network performance, system reliability and communication costs. Topology is the form and method of connecting nodes in computer network, the network elements such as workstations and servers in the network are abstracted as "points"; the cables in the network are abstracted as "lines". Affect network performance, system reliability, communication costs.

Topology is also divided into: Bus topology, star topology, Ring topology tree topology, and mesh topology. The case in this article is one of the branches in the bus topology, and we build this topological graph step-by-step.

Example Picture:

The Topology Graphics component Ht.graph.GraphView (hereinafter referred to as Garphview) is the most versatile 2D component in the HT framework, and its associated class libraries are under the Ht.graph package. Garphview has the basic graphics rendering and editing functions, topology node wiring and automatic layout function, power and telecommunications industries, such as pre-defined objects, with animation rendering and other special effects, so its application surface is very broad, can be used as a monitoring area of the drawing tools and human-machine interface, as a general graphical editing tools, It can be expanded into enterprise applications such as workflows and org charts.

The components of the HT framework refer to Visual interactive view controls, the HT framework is based on HTML5 technology, so HT the visual part of the component is essentially an element of HTML, and most of the HT components are bound to the Datamodel data model, and the user can drive the visual component by manipulating the pure JS language. This masks the complexity of the HTML underlying graphics technology. HT's HTML5 Technology package is designed to improve development efficiency and maintainability, but does not mean that users are not allowed to manipulate HTML native elements directly, and programmers with HTML5 development experience can use a variety of HTML5 technologies to customize the HT components in the context of understanding the HT system mechanism.

We are using the Ht.graph.GraphView component as the scene with only two lines of code:

New Ht.graph.GraphView (); Graphview.addtodom ();

Declare the variable first, and then add the component instance variable into the body body. The root layer of all HT components is a div component that can be obtained through the component's GetView () function, with default and custom interactive event listeners added to the Div (GetView (). AddEventListener (Type, Func, false)), Render layer Typically provided by canvas. You can set the CSS background style directly to the root div and the canvas layer, or you can add a new HTML component to the root div layer and render it together as a sibling component of the canvas. HT components are typically set to the absolute positioning of the position as absolute. HT components are typically 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, where it is important to note that When the parent container size changes, if the parent container is a pre-defined container component such as Borderpane and SplitView, the HT container automatically calls the child component invalidate function to notify the update. However, if the parent container is a native HTML element, the HT component is not aware of the need for updates, so the outermost HT component generally needs to listen for window size change events and call the outermost component invalidate function to update.

In order for the outermost component to fill the window-filled convenience, all HT components have the Addtodom function, the implementation logic is as follows, where IV is shorthand for invalidate:

Addtodom =function () {var self = this, view = self.getview (), //gets the underlying div style = View.style; Document.body.appendChild (view); //add the component underlying div into the body body Style.left =  ' 0 ';  ' 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 implies, is the container to load data, data container ht. Datamodel (hereinafter referred to as Datamodel) as a model to carry data, manage the data deletion and change event distribution, all components of the HT framework are presented to the user interface in different forms through binding datamodel, which can be View.getdatamodel () (abbreviated as VIEW.DM ()) Gets the data container, and the component listens to the Datamodel model's change events (View.getselectionmodel (), abbreviated VIEW.SM ()), Real-time synchronization update interface data information, master the operation of Datamodel to master all the components of the model-driven mode.

We're going to create two node ht. Node (inherited from Ht. Data Class), a server, a client, an intermediate connection, and a self-loop connection, all data, that need to be added into the Datamodel data container. But we have to create this data node first, with HT only two sentences can be added to the data container, the method is similar to the method of creating the topology component above, the topology component is added into the body body, and the node is added into the data container:

New HT. Node (); //create "Server" Data node graphview.dm (). Add (server); //Add a node to the data container graphview.dm () 

The client is also created in the same way that the node is named client. For the sake of aesthetics, I have set the picture to the server and the client node, and there are two ways of setting up the picture:

• Set the image relative or absolute path directly to the corresponding property of the data model, Server.setimage (' Images/server.png ')
• First through HT. Default.setimage (' server ', ' images/server.png ') to register, and then set the registration name to the Model server.setimage (' server ')

Directly set the path of the development of convenient, no need to register the picture in advance, but the data model serialization when the picture path takes up more memory, in the future, the picture path changes are not conducive to management maintenance, both methods are the correct use, according to the project situation can be selected in different ways or mixed use. If a URL path is used, the image is automatically loaded inside HT, and the corresponding view component is automatically updated after onload.

HT's frames are given a broader meaning, HT providing a vector description of the custom JSON format, a JSON vector format defined by the HT standard, and can also be registered and used as a picture, with HT vectors that are more space-saving than traditional image formats, with no distortion in scale, The most powerful thing is that all the graphics parameters of the vector can be dynamically bound to the data model, see the vector manual, and now my side of the explanation has not yet reached this step, interested can be self-understanding.

Next is to create a connection between two nodes, Ht. The edge type is used to connect the starting and target two node nodes, there can be multiple edge between two nodes, and the start and target are allowed to be the same node. For the same node is the case of the formation of the self-ring situation ~ There are three lines, because there are two similar, I will only direct line and self-loop wiring code to explain:

New HT. Edge (server, client); //Create a connection node with the parameters starting node and target node graphview.dm (). Add (Edge); //Add the connection node to the data container in the new HT. Edge (server, server); //The starting and target nodes of this connection are the same node, forming a self-loop graphview.dm (). Add (Ciredge);   

The connection node also inherits from the data class, so the same way it is added into the container. As for the line above the word, it is through the SetStyle method to achieve.

Data for HT can be divided into three types of attributes:

• Get/set or Is/set types, such as GetName (0/setname (' HT ') and isexpanded (), for common attribute operations
• attr type, accessed via getAttr (name) and setAttr (key, value), which is HT reserved for the user to store business data
• Style type, operated by GetStyle (name) and SetStyle (key, value), Graphview meta style controlled by the Type property

Here I am adding the text description through the style type, setting the displayed text through the ' label ' property:

EDGE.S ({//setstyle's shorthand    ' request ',//Set text    3//Set text position});    

The final display text is determined by the Graphview.getlabel function:

(data) {    var label = Data.getstyle (' label ');  Undefined? Data.getname (): label; }

There is also a text position above, which is the location of the HT package, which shows the following location:

Where 17 is the central location, you can adjust the effect according to this position, the location of the specific instructions please refer to the HT for Web location manual. Learning Web Front End: http://www.zhihaijiangku.com

Getting started with the front end: rapid development based on HTML5 network topology diagram application