HTML 5に基づくネットワークトポロジアプリケーションの迅速な開発--入門編(一)

コンピュータネットワークのトポロジー構造は,トポロジーにおいてサイズ,形状に関係のない点,線関係を研究する方法を参照する.ネットワーク内のコンピュータと通信装置を1つの点に抽象化し、伝送媒体を1つの線に抽象化し、点と線からなる幾何学的図形がコンピュータネットワークのトポロジー構造である.ネットワークのトポロジー構造はネットワーク中の各エンティティの構造関係を反映し、コンピュータネットワークを建設する第一歩であり、各種ネットワークプロトコルを実現する基礎であり、ネットワークの性能、システムの信頼性と通信費用に重大な影響を及ぼす.トポロジーはコンピュータネットワークにおいて、各ノードを接続する形式と方法を指す.ネットワーク内のワークステーションやサーバなどのネットワークユニットは抽象的に「ポイント」である.ネットワーク内のケーブルなどは抽象的に「線」です.ネットワーク性能、システム信頼性、通信費用に影響します.トポロジは、バストポロジ、スタートポロジ、リングトポロジツリートポロジ、および網状トポロジにも分けられます.この文章で書いた例はバストポロジーの分岐であり,このトポロジーパターンを構築するために一歩一歩進みます.
サンプル画像:
トポロジーコンポーネントht.graph.GraphView(以下、GarphViewと略す)はHTフレームワークの中で2 D機能が最も豊富なコンポーネントであり、その関連クラスライブラリはhtにある.graphで包みます.GarphViewは基本的なグラフィックの表示と編集機能、トポロジーノードの接続と自動レイアウト機能、電力と電気通信などの業界の事前定義オブジェクト、アニメーションレンダリングなどの特効を持っているため、その応用面は広く、監視分野の図形描画ツールとヒューマン・インターフェースとして、一般的な図形化編集ツールとして、ワークフローや組織図などのエンタープライズアプリケーションに拡張できます.
HTフレームワークのコンポーネントは可視化インタラクティブなビューコントロールを指し、HTフレームワークはHTML 5技術に基づいているため、HTコンポーネントの可視化部分の本質はHTMLの要素であり、大部分のHTコンポーネントはDataModelデータモデルにバインドされ、ユーザーは純粋なjsの言語を操作することによって可視化コンポーネントを駆動することができ、このようにHTMLの下層グラフィック技術の複雑さを遮蔽している.HTはHTML 5技術のパッケージ化の目的は開発効率とメンテナンス性を高めることであるが、ユーザーが直接HTML原生要素を操作することを許さないという意味ではなく、HTML 5開発経験のあるプログラマーは、HTシステムのメカニズムを理解する前提の下で、各種HTML 5の技術を用いてHTコンポーネントをカスタマイズすることができる.
htを使いますgraph.GraphViewコンポーネントはシーンとして使用され、具体的なコードは2行しかありません.

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

まず変数を宣言し、このコンポーネントインスタンス変数をbodyボディに追加します.すべてのHTコンポーネントの最ルート層は1つのdivコンポーネントであり、コンポーネントのgetView()関数によって得ることができ、デフォルトおよびカスタムインタラクティブイベントリスニングは一般的にこのdivに追加される(getView().addEventListener(type,func,false))は、レンダリングレイヤがcanvasによって一般的に提供される.ユーザーは、ルートdivとcanvasレイヤにcssバックグラウンドなどのスタイルを直接設定したり、新しいHTMLコンポーネントをルートdivレイヤに追加したりして、canvasの兄弟コンポーネントとして一緒に表示することができます.HTコンポーネントは一般的にpositionをabsoluteに設定する絶対位置決め方式である.HTのコンポーネントは一般的にBorderPane、SplitView、TabViewなどのコンテナに埋め込まれて使用されますが、最外層のHTコンポーネントではgetView()で返された下位div要素をページのDOM要素に手動で追加する必要があります.ここでは、親コンテナのサイズが変化した場合、親コンテナがBorderPaneやSplitViewなどのHTで事前定義されたコンテナコンポーネントである場合、HTのコンテナは、自動的に子供コンポーネントinvalidate関数を呼び出して更新を通知します.しかし、親コンテナが元のhtml要素である場合、HTコンポーネントは更新が必要であることを知ることができないため、最外層のHTコンポーネントは一般的にwindowのウィンドウサイズの変化イベントを傍受し、最外層コンポーネントinvalidate関数を呼び出して更新する必要がある.
最外層コンポーネントのロードがウィンドウに満ちている利便性のために、HTのすべてのコンポーネントにはaddToDOM関数があり、ivはinvalidateの略記である.

addToDOM = function(){   
    var self = this,
        view = self.getView(),  //     div 
        style = view.style;
    document.body.appendChild(view); //      div     body              
    style.left = '0';//ht        position     absolute     
    style.right = '0';
    style.top = '0';
    style.bottom = '0';      
    window.addEventListener('resize', function () { self.iv(); }, false);            
}

次に、「データコンテナ」の概念を導入する.その名の通り、データをロードするコンテナ、データコンテナhtである.DataModel(以下、DataModelと略す)は、Dataデータを担持するモデルとして、Dataデータの削除及び変更イベントの配布を管理する、HTフレームワークのすべてのコンポーネントは、DataModelをバインドすることにより、異なる形式でユーザインタフェースに提示され、view.getDataModel()(view.dm()と略記)方式でデータコンテナを取得する.また、コンポーネントはDataModelモデルの変更イベント(view.getSelectionModel()をリスニングし、viewと略記する.sm()は,インタフェースデータ情報をリアルタイムで同期更新し,DataModelの操作を把握することですべてのコンポーネントのモデル駆動方式を把握する.
2つのノードhtを作成します.Node(ht.Dataクラスに継承)、1つのサーバ、1つのクライアント、中間配線の2つと1つのループの配線で、これらはすべてDataデータであり、DataModelデータコンテナに追加する必要があります.しかし、私たちはまずこのデータノードを作成しなければなりません.HTで2つの言葉だけでノードをデータコンテナに追加することができます.方法は、上にトポロジーコンポーネントを作成する方法と似ています.トポロジーコンポーネントはbody体に追加され、ノードはデータコンテナに追加されます.

var server = new ht.Node();//  “   ”    
graphView.dm().add(server);//           graphView.dm()  

クライアントも同様に作成され、ノード名はclientです.美しくするために、私はサーバーとクライアントのノードに画像を設定しました.画像を設定するには2つの方法があります.

直接画像の相対または絶対パスをデータモデルの対応する属性に設定server.setImage('images/server.png')

htを先に通過する.Default.setImage('server','images/server.png')を登録し、モデル上のserverに登録名を設定します.setImage('server')

直接経路を設定する方式の開発は便利で、事前に画像を登録する必要はありませんが、データモデルのシーケンス化時に画像経路がメモリを占有することが多く、将来の画像経路が変化した後、管理メンテナンスに不利で、両方の方式は正しい使用方式で、プロジェクトの状況によって異なる方式を選択したり、混合したりすることができます.urlのパスを使用するとHT内部に画像が自動的にロードされ、onload後に対応するビューコンポーネントが自動的に更新されます.
HTのフレームワークの下で画像は更に広範な意味を与えられて、HTはカスタムJSONフォーマットのベクトル記述形式を提供して、HT標準で定義したJSONベクトルフォーマットで、画像として登録して使用することができて、HTのベクトル方式は伝統的な画像フォーマットより更に空間を節約して、スケーリングは歪みがなくて、最も強大な点はベクトルのすべてのグラフィックパラメータにありますデータモデル上のデータとダイナミックにバインドすることができます.具体的な説明はベクトルマニュアルを参照してください.今、私の説明はまだこのステップに着いていません.興味のある人は自分で理解することができます.
次に、2つのノード間の接続線、htを作成する.Edgeタイプは、開始ノードとターゲットノードの2つを接続するために使用され、2つのノード間に複数のEdgeが存在してもよいし、開始ノードとターゲットが同じノードであることも可能である.同じノードの場合は自環を形成する場合です~ここには3本の連線がありますが、2本の類似があるので、直線連線と自環の連線コードだけを貼り付けて説明します.

var edge = new ht.Edge(server, client);//      ，            
graphView.dm().add(edge);//             

var cirEdge = new ht.Edge(server, server);//                     ，    
graphView.dm().add(cirEdge);

接続ノードもDataクラスに継承されているので、データコンテナに追加する方法も同じです.線の上の字については、setStyleメソッドで実現されます.
HTのデータデータデータは3種類の属性タイプに分けられる.

get/setまたはis/setタイプ、たとえばgetName(0/setName('ht')およびisExpanded()は、一般的なプロパティ操作

に使用されます.

attrタイプは、HTがユーザに記憶するトラフィックデータ

であるgetAttr(name)およびsetAttr(key,value)を介してアクセスする.

styleタイプはgetStyle(name)とsetStyle(key,value)によって操作され、GraphView上のシンボルスタイルはこのタイプのプロパティによって

を制御する.
ここではstyleタイプで追加したテキストの説明です.「label」プロパティで表示されるテキストを設定します.

edge.s({//setStyle    
    'label': '  ',//    
    'label.position': 3//      
});

最終表示文字はGraphView.getLabel関数の決定:

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

上にもう一つの文字位置があります.HTパッケージの位置です.具体的な表示位置は以下の通りです.
このうち17を中心とした位置は、この位置に合わせて自分で調整して効果を見ることができます.位置の具体的な説明はHT for Web位置マニュアルを参照してください.
これで、すべてのコードの解析が終わりました.次の節では、連線の流れを追加する方法を紹介します.周りを見てください.