Exemple de code pour créer rapidement un diagramme de topologie de réseau de télécommunications HTML5 Canvas

Les listes d'attributs doivent être familières à tout le monde. Normalement, la liste d'attributs créée avec HTML5 est probablement un menu déroulant. Et dans de nombreux cas, la liste déroulante n'est pas assez jolie. J'ai essayé d'utiliser HT for Web pour réaliser la fonction consistant à cliquer sur un bouton dans la barre de propriétés pour faire apparaître une boîte de sélection multifonction et sélectionner les données entrantes. Je pense que la pratique globale est relativement simple et pratique, je vais donc partager. avec vous ici.

http://www.hightopo.com/demo/propertyEditor/index.html

D'après le rendu ci-dessus, nous pouvons voir que la page entière est divisée en 3 parties, la partie topologie graphView à gauche, la partie table tableView dans le coin inférieur droit et la partie attribut propertyView dans le coin supérieur droit. Nous divisons d'abord la scène entière, puis ajoutons un contenu spécifique à chaque partie :

 gv = new ht.graph.GraphView();var tablePane = new ht.widget.TablePane(gv.dm());//Composant du panneau de table propertyView = new ht.widget.PropertyView(gv.dm());/ /formPane est dans propertyView, vous devez donc d'abord définir var rightView = new ht.widget.SplitView(propertyView, tablePane, 'v', 0,4);//Diviser le composant, v est divisé en couches supérieure et inférieure, le rapport est de 0,4:0,6rightView.getView().style.borderLeft = '1px solid #000';var borderPane = new ht .widget.BorderPane( );//Composant du panneau de bordure borderPane.setRightView(rightView, 400);//Définir borderPane Le composant de droite est rightView avec une largeur de 400borderPane.setCenterView(gv);//Définissez le composant central borderPane sur gv borderPane.addToDOM();//Ajoutez le composant borderPane dans le corps

Les nouvelles parties du code ci-dessus sont toutes des composants encapsulés HT, qui sont équivalents aux classes. Voici une explication du composant divisé SplitView. Le composant divisé est utilisé pour diviser deux sous-composants gauche et droit ou haut et bas. -les composants peuvent être des composants fournis par le framework HT, ou ils peuvent. Il s'agit d'un composant natif de HTML. Le sous-composant est positionné de manière absolue avec une position absolue. Les paramètres de ce composant sont (composant gauche ou composant supérieur, composant droit ou). composant inférieur, h signifie division gauche et droite v Indique la division supérieure et inférieure. La valeur par défaut de la position de division est 0,5. Si la valeur de réglage est 0~1, elle sera divisée en pourcentage. Plus de 1 représente la largeur ou la hauteur absolue du composant gauche ou du composant supérieur. Moins de 1 représente la largeur ou la hauteur absolue du composant droit ou du composant inférieur ); et le composant du panneau BorderPane est un conteneur de mise en page, qui peut placer des sous-composants dans cinq zones : haut, bas, gauche, droite et centre. . Les sous-composants peuvent être des composants fournis par le framework HT, ou bien des composants natifs HTML. Le composant est positionné. Effectuer un positionnement absolu pour le mode absolu. Ici, je combine SplitView et BorderPane pour diviser la scène en trois parties. Enfin, pensez à ajouter le conteneur de mise en page final au corps ou à n'importe quelle balise HTML afin qu'il puisse être affiché sur l'interface. La définition de addToDOM est la suivante :

 addToDOM = function(){ var self = this, view = self.getView(), //Obtenir le div sous-jacent de ce composant style = view.style; //Obtenir l'attribut de style du div sous-jacent document.body.appendChild( view) ; //Ajouter le div sous-jacent dans le corps style.left = '0'; //HT définit par défaut les composants pour déterminer le positionnement absolu, donc la position doit être définie style.right = '0' style. haut = '0' ; style.bottom = '0'; window.addEventListener('resize', function () { self.iv(); }, false });

Les composants HT sont généralement intégrés dans des conteneurs tels que BorderPane, SplitView et TabView. Le composant HT le plus externe nécessite que l'utilisateur ajoute manuellement l'élément div sous-jacent renvoyé par getView() à l'élément DOM de la page. , Lorsque la taille du conteneur parent change, si le conteneur parent est constitué de composants de conteneur prédéfinis par HT tels que BorderPane et SplitView, le conteneur HT appellera automatiquement la fonction d'invalidation du composant enfant de manière récursive pour notifier la mise à jour. Mais si le conteneur parent est un élément HTML natif, le composant HT ne peut pas savoir qu'il doit être mis à jour. Par conséquent, le composant HT le plus externe doit généralement écouter l'événement de changement de taille de la fenêtre et appeler la fonction d'invalidation du composant le plus externe. composant à mettre à jour.

La scène est créée. Afin de montrer les différences d'attributs correspondant aux différents nœuds, nous avons ajouté sept nœuds à la carte topologique :

 function initModel(){ var name = device; var count = 0; var root = createNode(name + count++, name + (++count));//Le paramètre 1 est le nom, le paramètre 2 est la balise root.setImage('. /symboles/salle informatique/server.json'); root.setName('server'); gv.sm().ss(root);//Le nœud racine est sélectionné par défaut pour (var i = 0; i < 2; i++) { var iNode = createNode(name + count++, name + (++count) );/ /Le paramètre 1 est le nom, le paramètre 2 est la balise createEdge(root, iNode); for (var j = 0; j < 2; j++) { var jNode = createNode(name + count++, name + (++compte)); createEdge(iNode, jNode);

La déclaration de la fonction createNode est la suivante :

 function createNode(name, tag){//Create Node node flag++; var node = new ht.Node(); node.setTag(tag); /XX sous-système.json'); node.a('caché', false);//Attributs personnalisés, vous pouvez contrôler node.a('hidden') pour contrôler la visibilité des nœuds node.a('Type d'interface', 'SATA'); ') ; if(flag % 2 === 0){ node.a('type d'interface', 'IDE'); node.a('carte graphique', 'ATI' } node.s('label. poste', 11); gv.dm().add(node);//Ajouter des nœuds au conteneur de données DataModel node.tablePane1 = createTableView(serviceType, dataModel1);//Créer un panneau de table node.tablePane2 = createTableView(serviceSize, dataModel2); tablePane3 = createTableView (version, dataModel3); node.formPane1 = createFormPane(node.tablePane1);//Créer un panneau de formulaire node.formPane1.title = 'Type';//Pour préparer le titre de la boîte de dialogue suivante node.formPane2 = createFormPane(node.tablePane2); title = 'Mémoire'; node.formPane3 = createFormPane(node.tablePane3); node.formPane3.title = 'Modèle'; if(flag % 3 === 0){ node.formPane3.v('tag', 'Lenovo Server X3650M5 8871' }else{ node.formPane3.v('tag', 'Lenovo IBM X3250 5458I21 '); } node.a('model', node.formPane3.v('tag')); return node;}

Nous contrôlons la visibilité du nœud en contrôlant l'attribut caché de ce nœud et en utilisant la fonction de filtre visuel setVisibleFunc dans graphView :

 gv.setVisibleFunc(function(data){ if(data.a('hidden')){ return false; } return true;});

Avec les nœuds, il est naturel d'afficher les attributs. Avec les valeurs dans le panneau de table tablePane ci-dessous, un total de sept attributs sont ajoutés :

 function createProperty(){//Créer des propriétés propertyView.addProperties([ { name: 'name',//Obtenir l'attribut name, combiné avec l'attribut accessType pour enfin accéder aux attributs du nœud. La valeur par défaut de accessType est null, par exemple comme le nom est l'âge, utilisez la méthode get/set ou is/set de getAge() et setAge(98) pour accéder (le nom ici est le nom, donc obtenez-le via getName()) displayName : 'Name'//Définir la valeur du texte d'affichage du nom de l'attribut}, { name : 'hidden',//Obtenir l'attribut caché displayName : 'Masquer ce nœud', accessType : 'attr',//Si le nom est masqué, utilisez getAttr( 'hidden') et setAttr('hidden', false) pour accéder à l'icône : 'images/alert.gif', //Définissez l'icône valueType affichée à gauche du nom de l'attribut : 'boolean', //Utilisé pour inviter le composant à fournir un type booléen de rendu de rendu approprié, affiché sous forme de case à cocher editable: true //Définir si la propriété est modifiable}, { name: 'grade', displayName: 'Type' , accessType : 'attr', drawPropertyValue : function(g, property, value, rowIndex, x, y, w, h, data, view){//Fonction de rendu de valeur d'attribut personnalisé var cb = function(v) { data.a('grade', v); } return fillFormPane(data.formPane1, w, h, data.tablePane1, serviceType, cb } }, { nom : 'numéro', displayName : 'memory', accessType ); 'attr', drawPropertyValue : function(g, propriété, valeur, rowIndex, x, y, w, h, data, view){ var cb = function(v) { data.a('number', v); } return fillFormPane(data.formPane2, w, h, data.tablePane2, serviceSize, cb } }, { nom : 'Type d'interface', accessType : 'attr', displayName); : 'Type d'interface' }, { nom : 'Carte graphique', accessType : 'attr', displayName : 'Carte graphique' }, { nom : 'Modèle', accessType : 'attr', displayName : 'Modèle', } ]);}

La valeur de retour de l'attribut drawPropertyValue dans les troisième et quatrième attributs est la fonction fillFormPane. Les paramètres de cette fonction sont (composant de formulaire formP, largeur du composant de formulaire w, hauteur du composant de formulaire h, cliquez sur le bouton dans le composant de formulaire pour générer le tableau. composant tableP dans la boîte contextuelle, le contenu du tableau arr dans le composant table, la fonction cb attribue la valeur renvoyée en double-cliquant sur la ligne du composant table à la zone de texte ht.widget.TextField du formulaire).

Le premier paramètre formP est la création du composant formulaire. La création du composant formulaire consiste à créer un composant formulaire et à ajouter une zone de texte et un bouton au composant formulaire. Cette étape est également assez simple en HT :

 function createFormPane(tPane) {//Créer un panneau de formulaire var formPane = new ht.widget.FormPane(); formPane.setPadding(0);//Définir l'espacement autour du formulaire et le contenu du composant var tField = new ht.widget.TextField();//Créer une zone de texte tField.setText('');//Le contenu de la zone de texte est vide tField.setDisabled(true);//La zone de texte est inutilisable formPane.addRow( [// Ajouter une ligne au formulaire { id: 'tag', // L'attribut d'identification unique peut être obtenu via formPane.getItemById(id) et ajouté à l'élément objet item correspondant : Le tField//La valeur de l'attribut peut être constituée d'éléments HTML natifs, d'informations textuelles auto-dessinées dans FormPane et de composants intégrés HT tels que Button, CheckBox et ComboBox, etc.}, { Button :{//Après avoir défini cet attribut, HT être automatiquement construit en fonction de la valeur d'attribut ht.widget.Button et enregistré dans l'étiquette d'attribut de l'élément :'...',//Le contenu du texte sur le bouton onClicked : function(){//Événement de clic sur le bouton pour(var je = 0; je < tPane.dm().size(); i++){//Définissez tablePane pour sélectionner la valeur correspondant à formPane par défaut var data = tPane.dm().getDatas().get(i); 'value' ) === formPane.v('tag')){ tPane.sm().ss(data } } return createDialog(tPane, formPane);//Ce qui est renvoyé est de créer une boîte de dialogue dont le contenu est le panneau de table} } }], [0.5, 0.1]);//Définir le rapport d'affichage du premier élément et du deuxième élément dans le composant table. Ce composant tableau ne comporte que deux éléments au total, une zone de texte et un bouton, avec des proportions de 0,5 et 0,1 respectivement return formPane;}

Le processus de création de la fonction createDialog est également simple et clair. Le titre, la taille, le contenu, etc. de la boîte de dialogue sont configurés via la méthode setConfig(config) J'ai passé un paramètre de composant de table tPane à createDialog, qui est utilisé comme. le contenu affiché dans la boîte de dialogue :

 function createDialog(tPane){//Créer une boîte pop-up dialog.setConfig({ title: gv.sm().ld().getName()++formPane.title,//Le titre du contenu de la boîte de dialogue : tPane, // Définissez directement le contenu de la boîte de dialogue sur la largeur du panneau du tableau : 400, // Spécifiez la largeur de la hauteur de la boîte de dialogue : 200, déplaçable : true, // Spécifiez si la boîte de dialogue peut être déplacée et ajustée : true, // Indique s'il faut afficher le bouton de fermeture maximisable : true, // Indique si la boîte de dialogue peut être agrandie. Déplacez la souris vers la droite de la boîte de dialogue. La taille de la boîte de dialogue peut être modifiée dans le coin inférieur, ce qui signifie que la largeur et la hauteur des boutons peuvent être ajustées : [//Ajouter deux boutons { label : 'Annuler', action : function(){ dialog.hide() } }, { label: 'OK ', } ] }); dialog.show();//Afficher la boîte de dialogue}

Le quatrième paramètre du composant tableP n'a rien de spécial. Il crée simplement un composant de formulaire puis ajoute des colonnes au composant de formulaire. Les étapes sont simples et le code est également assez simple :

 function createTableView(arr, dm){//Créer un composant de table var tableView = new ht.widget.TableView(dm); tableView.addColumns([//Ajouter des informations sur les colonnes par lots à l'aide des paramètres du tableau json{ displayName : 'ID', / /Obtenir le contenu du nom de colonne de l'en-tête du tableau drawCell : function(g, data, selected, column, x, y, w, h, tableView){//Méthode de rendu de cellule personnalisée var id = tableView.getRowIndex(data);//Renvoyer l'index de ligne où se trouve l'objet de données ht.Default.drawText(g, 'row' + (id + 1), null, null, x, y, w, h, 'center');//Paramètres du texte de dessin (objet pinceau g, contenu du texte de valeur, police du texte, couleur de la couleur du texte, coordonnée x au début du dessin, coordonnée y lorsque le dessin commence sur y, largeur lors du dessin w, hauteur lors du dessin h , aligner l'alignement horizontal du texte, vAlign alignement vertical du texte) } }, { displayName : 'Name', drawCell : function(g, data, selected, column, x, y, w, h, tableView){ var id = tableView.getRowIndex(data); var info = arr[id]; }

Après avoir expliqué les paramètres de fillFormPane, regardons comment cette fonction est définie. Fondamentalement, la dernière étape consiste à cliquer sur l'élément dans le composant de table tablePane et à renvoyer cet élément dans la zone de texte textField dans le composant de formulaire formPane :

 function fillFormPane(formP, w, h, tableP, arr, cb){//formpane à droite if(formP === undefined){ return } formP.setWidth(w); setHGap (0); if(formP.v('tag') === 'indéfini' || formP.v('tag') === '') { formP.v('tag', arr[0]); } tableP.onDataDoubleClicked = function(data){//Rappel lorsque la ligne de données du composant table est double-cliquée var v = arr[data.a('index ') ]; formP.v('tag', v);//Définissez la valeur de l'élément d'élément correspondant en fonction de l'identifiant, qui est l'abréviation de setValue. L'élément avec l'identifiant de tag est la zone de texte dialog.hide(. ); si (cb){cb(v);} //Si le paramètre cb est passé, définissez la valeur de data.a('number')/data.a('helloName') sur la valeur de la ligne double-cliquée dans le tableau, c'est-à-dire attribué aux troisième et quatrième attributs} tableP.onDataClicked = function(data){//Callback dialog.getConfig().buttons[1].action = lorsque l'on clique sur la ligne de données du composant tableau function(){//Cliquez sur OK pour procéder aux opérations suivantes var v = arr[data.a('index')]; { cb(v);} } } ; retourner formP.getView();}

 function fillFormPane(formP, w, h, tableP, arr, cb){//formpane à droite if(formP === undefined){ return } formP.setWidth(w); setHGap (0); if(formP.v('tag') === 'indéfini' || formP.v('tag') === '') { formP.v('tag', arr[0]); } tableP.onDataDoubleClicked = function(data){//Rappel lorsque la ligne de données du composant table est double-cliquée var v = arr[data.a('index ') ]; formP.v('tag', v);//Définissez la valeur de l'élément d'élément correspondant en fonction de l'identifiant, qui est l'abréviation de setValue. L'élément avec l'identifiant de tag est la zone de texte dialog.hide(. ); si (cb){cb(v);} //Si le paramètre cb est passé, définissez la valeur de data.a('number')/data.a('helloName') sur la valeur de la ligne double-cliquée dans le tableau, c'est-à-dire attribué aux troisième et quatrième attributs} tableP.onDataClicked = function(data){//Callback dialog.getConfig().buttons[1].action = lorsque l'on clique sur la ligne de données du composant tableau function(){//Cliquez sur OK pour procéder aux opérations suivantes var v = arr[data.a('index')]; { cb(v);} } } ; retourner formP.getView();}

L'affichage de la barre de propriétés en haut à droite se termine ici. Le panneau de tableau en bas à droite est créé de la même manière. Vous pouvez lire le code pour le comprendre par vous-même.

Enfin, parlons de la disposition des nœuds dans l'ensemble de l'interface. Le composant de disposition automatique de mise en page automatique dans HT fournit plusieurs types d'algorithmes pour organiser automatiquement les positions des nœuds en fonction de la relation entre les nœuds et les connexions. La mise en page automatique est souvent utilisée dans les scènes comportant de nombreux éléments graphiques ou des relations de connexion complexes, ce qui rend difficile leur déplacement et leur placement manuels. Je présente chaque méthode de mise en page via des boutons. Cliquez sur le bouton correspondant, et la méthode de mise en page sera automatiquement disposée en fonction de la méthode de mise en page définie par le bouton enfoncé :

Tout d'abord, créez une nouvelle instance, transmettez l'objet qui nécessite une mise en page automatique, qui peut être DataModel, graphView et graph3dView, puis définissez la méthode de mise en page par défaut :

 autoLayout = new ht.layout.AutoLayout(gv);setTimeout(function(){ layout('towardsouth', true);//Car avant le chargement de l'image, la mise en page automatique est disposée en fonction de la taille par défaut du nœud} , 200);

Créez ensuite un panneau de formulaire formPane, ajoutez-le au corps et placez-le dans le coin supérieur gauche du corps. Je ne collerai pas tout le code, afficherai simplement le bouton de la première mise en page :

 function createDirectionForm(){ var form = new ht.widget.FormPane(); form.setWidth(200);//Définir la largeur du formulaire form.setHeight(80); document.body.appendChild(form.getView()); formulaire .getView().style.background = '#fff'; formulaire.getView().style.boxShadow = '4px 16px 16px rgba(0, 0, 0, 0.1)';//Définissez le style d'ombre form.addRow([//Cette ligne est supprimée séparément comme titre { element: 'Auto Layout:',//Texte affiché}] , [0.1]);//Il n'y a qu'un seul objet dans le tableau, définissez simplement la largeur d'un objet form.addRow([ { bouton : { icône : 'Layout/South Layout.json', onClicked : function(){ layout('vers le sud', true); }, background : null, labelColor : '#fff', groupId : 'btn', toolTip : 'disposition sud', borderColor : null } }, //.. . .Ajoutez ensuite les 6 boutons restants], [0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1]);//Il y a sept objets dans le tableau, donc la largeur des sept objets doit être définie return form;}

Ce sont les parties les plus intéressantes. Merci à tous d’avoir lu. J’espère que cela sera utile à votre étude. J’espère également que tout le monde soutiendra le réseau d’arts martiaux VeVb.