属性リストは誰もがよく知っているはずですが、HTML5 を使用して作成される属性リストは多くの場合、十分ではありません。 HT for Web を使用して、プロパティ バーのボタンをクリックして多機能選択ボックスをポップアップ表示し、受信データを選択する機能を実現してみました。全体的な実践が比較的簡単で便利だと感じたので共有します。ここであなたと一緒に。
レンダリングhttp://www.hightopo.com/demo/propertyEditor/index.html
コードの実装トポロジーマップ上のレンダリングから、ページ全体が 3 つの部分に分割されていることがわかります。左側のgraphView トポロジ部分、右下隅の tableView テーブル部分、右上隅の propertyView 属性部分です。まずシーン全体を分割し、次に各部分に特定のコンテンツを追加します。
gv = new ht.graph.GraphView();var tablePane = new ht.widget.TablePane(gv.dm());//テーブル パネル コンポーネント propertyView = new ht.widget.PropertyView(gv.dm());/ /formPane は propertyView にあるため、最初に var rightView = new ht.widget.SplitView(propertyView, tablePane, 'v', 0.4);//コンポーネントを分割します。v は上下のレイヤーに分割され、比率は 0.4:0.6rightView.getView().style.borderLeft = '1px Solid #000';var borderPane = new ht .widget.BorderPane( );// ボーダーパネルコンポーネント borderPane.setRightView(rightView, 400);// borderPane を設定します右側のコンポーネントは幅 400 の rightView ですborderPane.setCenterView(gv);//borderPane の中央のコンポーネントを gv borderPane.addToDOM() に設定します;//borderPane コンポーネントを本文に追加します
上記のコードの新しい部分はすべて HT でカプセル化されたコンポーネントであり、クラスに相当します。 SplitView 分割コンポーネントは、2 つのサブコンポーネントを左右または上下に分割するために使用されます。 -components は、HT フレームワークによって提供されるコンポーネントであることも、HTML のネイティブ コンポーネントであることもできます。サブコンポーネントは、position を絶対として指定して絶対的に配置されます。このコンポーネントのパラメータは、(左のコンポーネントまたは上のコンポーネント、または右のコンポーネント) です。下の成分、h は左右の除算を意味します v分割位置のデフォルト値は 0.5 で、1 より大きい場合は左コンポーネントまたは上コンポーネントの絶対的な幅または高さを表します。 1 未満は、右側のコンポーネントまたは下部のコンポーネントの絶対的な幅または高さを表し、BorderPane パネル コンポーネントは、上、下、左、右、中央の 5 つの領域にサブコンポーネントを配置できます。サブコンポーネントは、HT フレームワークによって提供されるコンポーネントにすることも、HTML ネイティブ コンポーネントにすることもできます。絶対モードでは絶対位置決めを行います。ここでは SplitView と BorderPane を組み合わせて、シーンを 3 つの部分に分割します。最後に、インターフェイスに表示できるように、最終レイアウト コンテナーを本文または任意の HTML タグに追加することを忘れないでください。 addToDOM の定義は次のとおりです。
addToDOM = function(){ var self = this, view = self.getView(), //このコンポーネントの基礎となる div を取得します style = view.style //基礎となる div の style 属性を取得します document.body.appendChild( view) ; //基礎となる div を本体に追加します style.left = '0'; //HT は絶対位置を決定するためにコンポーネントを定義するため、位置を設定する必要があります style.right = '0';トップ = '0' ; style.bottom = '0'; window.addEventListener('resize', function () { self.iv(); }, false);HT コンポーネントは通常、BorderPane、SplitView、TabView などのコンテナに埋め込まれます。最も外側の HT コンポーネントでは、getView() によって返される基礎となる div 要素をページの DOM 要素に手動で追加する必要があります。 , 親コンテナのサイズが変更されたとき、親コンテナが BorderPane や SplitView などの HT の定義済みコンテナ コンポーネントの場合、HT コンテナは自動的に子コンポーネントの無効化関数を再帰的に呼び出して更新を通知します。しかし、親コンテナがネイティブ HTML 要素である場合、HT コンポーネントはそれを更新する必要があることを認識できないため、通常、最も外側の HT コンポーネントはウィンドウのウィンドウ サイズ変更イベントをリッスンし、最も外側の無効化関数を呼び出す必要があります。更新するコンポーネント。
シーンが作成されます。さまざまなノードに対応する属性の違いを示すために、トポロジ マップに 7 つのノードを追加しました。
function initModel(){ var name = device; var count = 0; var root = createNode(name + count++, name + (++count));//パラメータ 1 は名前、パラメータ 2 はタグ root.setImage('. /symbols/コンピューター室/server.json'); root.setName('server'); gv.sm().ss(root);//ルート ノードはデフォルトで選択されます (var i = 0; i < 2; i++) { var iNode = createNode(name + count++, name + (++count) );/ /パラメータ 1 は名前、パラメータ 2 はタグ createEdge(root, iNode); for (var j = 0; j < 2; j++) { var jNode = createNode(name + count++, name + (++カウント));createNode 関数の宣言は次のとおりです。
function createNode(name, tag){// ノードの作成 flag++; node.setName(name); / XX サブシステム.json'); node.a('hidden', false);//カスタム属性。node.a('hidden') を制御してノードの可視性を制御できます。node.a('Interface type', 'SATA'); ') ; if(フラグ % 2 === 0){ ノード.a('インターフェイス タイプ', 'ATI'); ノード.s('ラベル。位置」、11); gv.dm().add(node);//データ コンテナーにノードを追加します。 DataModel node.tablePane1 = createTableView(serviceType, dataModel1);//テーブル パネルを作成します。 tablePane3 = createTableView(バージョン、dataModel3); createFormPane(node.tablePane1);//フォームパネルを作成しますnode.formPane1.title = 'Type';//後続のダイアログボックスのタイトルを準備しますnode.formPane2 = createFormPane(node.tablePane2); title = 'メモリ'; ノード.formPane3 = createFormPane(node.tablePane3); ノード.formPane3.title = 'モデル'; if(flag % 3 === 0){ node.formPane3.v('tag', 'Lenovo Server X3650M5 8871') }else{ node.formPane3.v('tag', 'Lenovo IBM X3250 5458I21 '); node.a('モデル', node.formPane3.v('タグ')); }このノードの非表示属性を制御し、graphView の視覚フィルター setVisibleFunc 関数を使用することで、ノードの可視性を制御します。
gv.setVisibleFunc(function(data){ if(data.a('hidden')){ return false; } return true;});プロパティパネルノードを使用すると、以下の tablePane テーブル パネルの値と合わせて、合計 7 つの属性が表示されるのが自然です。
function createProperty(){//プロパティの作成 propertyView.addProperties([ { name: 'name',//name 属性を取得し、accessType 属性と組み合わせて、最終的にノード属性へのアクセスを実現します。accessType のデフォルト値は null です。名前が age であるため、getAge() および setAge(98) の get/set メソッドまたは is/set メソッドを使用して、displayName にアクセスします (ここでの name は name なので、getName() を通じて取得します)。 'Name'//属性名の表示テキスト値を設定します}, { name: 'hidden',//非表示属性を取得しますdisplayName: 'このノードを隠す', accessType: 'attr',//名前が非表示の場合、 getAttr( 'hidden') と setAttr('hidden', false) を使用してアイコンにアクセスします: 'images/alert.gif', // 属性名の左側に表示されるアイコンの valueType を設定します: 'boolean', //適切なレンダラーレンダリングのブール型を提供するようにコンポーネントにプロンプトを表示するために使用され、チェックボックスとして表示されます editable: true //プロパティが編集可能かどうかを設定します}, { name: 'grade', displayName: 'Type' 、accessType : 'attr'、drawPropertyValue: function(g, property, value, rowIndex, x, y, w, h, data, view){//カスタム属性値レンダリング関数 var cb = function(v) { data.a('grade', v); } return fillFormPane(data.formPane1, w, h, data.tablePane1, serviceType, cb) } }, { name: 'number', displayName: 'memory', accessType: 'attr'、drawPropertyValue: function(g, property, value, 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) } }, { name: 'Interface Type', accessType: 'attr', displayName : 'インターフェイス タイプ' }, { name: 'グラフィック カード', accessType: 'attr', displayName: 'グラフィック カード' }, { name: 'モデル', accessType: 'attr',表示名: 'モデル', } ]);}3 番目と 4 番目の属性のdrawPropertyValue 属性の戻り値は fillFormPane 関数です。この関数のパラメーターは (フォーム コンポーネント formP、フォーム コンポーネントの幅 w、フォーム コンポーネントの高さ h、フォーム コンポーネントのボタンをクリックしてテーブルを生成します) です。ポップアップ ボックスのコンポーネント tableP、テーブル コンポーネントの配列コンテンツ arr、cb 関数は、テーブル コンポーネントの行をダブルクリックして返された値をフォームの ht.widget.TextField テキスト ボックスに割り当てます。
最初のパラメータ formP はフォーム コンポーネントの作成です。フォーム コンポーネントの作成では、フォーム コンポーネントを作成し、テキスト ボックスとボタンをフォーム コンポーネントに追加します。この手順も HT では非常に簡単です。
function createFormPane(tPane) {//フォーム パネルを作成します var formPane = new ht.widget.FormPane(); formPane.setPadding(0);//フォームとコンポーネント コンテンツの周囲の間隔を設定します var tField = new ht.widget.TextField();//テキスト ボックスを作成します tField.setText('');//テキスト ボックスの内容は空です tField.setDisabled(true);//テキスト ボックスは操作できません formPane.addRow( [// フォームに行を追加 { id: 'tag', // 一意の識別属性は、formPane.getItemById(id) を通じて取得でき、対応する項目オブジェクト要素に追加できます。 tField//属性値には、HTML ネイティブ要素、FormPane 内の自己描画テキスト情報、Button、CheckBox、ComboBox などの HT 組み込みコンポーネントを指定できます。}, { button:{//この属性を設定すると、HT は属性値 ht.widget.Button オブジェクトに基づいて自動的に構築され、要素属性に保存されます。 label:'...',//ボタン上のテキスト コンテンツ onClicked: function(){//ボタン クリック イベント for(var i = 0; tPane.dm().size(); i++){//デフォルトで formPane に対応する値を選択するように tablePane を設定します。 var data = tPane.dm().getDatas().get(i); '値' ) === formPane.v('tag')){ tPane.sm().ss(data) } } return createDialog(tPane, formPane);//返される内容はテーブル パネルであるダイアログ ボックスの作成です。} } }], [0.5, 0.1]);//最初の要素と 2 番目の要素の表示比率を設定しますテーブルコンポーネント。このテーブル コンポーネントにはテキスト ボックスとボタンの合計 2 つの要素しかなく、それぞれ 0.5 と 0.1 の比率で formPane を返します。}createDialog 関数を作成するプロセスもシンプルかつ明確で、ダイアログ ボックスのタイトル、サイズ、コンテンツなどは setConfig(config) メソッドを通じて設定され、パラメータ tPane テーブル コンポーネントを createDialog に渡します。ダイアログボックスに表示される内容:
function createDialog(tPane){//ポップアップ ボックスを作成します。dialog.setConfig({ title: gv.sm().ld().getName()++formPane.title,//ダイアログ ボックスの内容のタイトル: tPane, // ポップアップ ボックスの内容をテーブル パネルに直接設定します width: 400, // ダイアログ ボックスの幅を指定します height: 200, ドラッグ可能: true, // ダイアログ ボックスをドラッグして調整できるかどうかを指定します。 closeable: true, // 閉じるボタンを表示するかどうかを示します。 maximizable: true, // ダイアログ ボックスを最大化できるかどうかを示します。マウスをダイアログ ボックスの右側に移動すると、ダイアログ ボックスのサイズが下隅で変更できます。これは、ボタンの幅と高さを調整できることを意味します。 [//ボタンを 2 つ追加 { label: 'Cancel',アクション: function(){ ダイアログ.非表示() } }, { ラベル: 'OK ', } ] }); Dialog.show();//ダイアログボックスを表示}4 番目のパラメーター tableP テーブル コンポーネントは特別なものではなく、フォーム コンポーネントを作成し、そのフォーム コンポーネントに列を追加するだけです。手順は簡単で、コードも非常に単純です。
function createTableView(arr, dm){//テーブル コンポーネントの作成 var tableView = new ht.widget.TableView(dm); tableView.addColumns([//json 配列パラメータを使用して列情報を一括追加{ displayName: 'ID', / /テーブルヘッダーの列名の内容を取得しますdrawCell: function(g, data, selected, columns, x, y, w, h, tableView){//カスタマイズされたセルレンダリングメソッド var id = tableView.getRowIndex(data);//データ オブジェクトが配置されている行インデックスを返します。 ht.Default.drawText(g, 'row' + (id + 1), null, null, x, y, w, h, 'center');//描画テキストパラメータ(g ブラシオブジェクト、値テキストコンテンツ、フォントテキストフォント、カラーテキストカラー、描画開始時のx座標、yで描画開始時のy座標、描画時の幅w、描画時の高さh , テキストの水平方向の配置、v テキストの垂直方向の配置) } }, { displayName: '名前',drawCell: function(g, data, selected, columns, x, y, w, h, tableView){ var id = tableView.getRowIndex(data); var info = ht.Default.drawText(g, info, null, x, y, w, h, 'center'); }fillFormPane のパラメーターを説明した後、この関数がどのように定義されているかを見てみましょう。基本的に、最後のステップは、tablePane テーブル コンポーネントの要素をクリックし、この要素を formPane フォーム コンポーネントの textField テキスト ボックスに返すことです。
function fillFormPane(formP, w, h, tableP, arr, cb){// 右側の formpane if(formP === unknown){ return; formP.setWidth(h); setHGap (0); if(formP.v('tag') === '未定義' || formP.v('tag') === '') { formP.v('tag', arr[0]); } tableP.onDataDoubleClicked = function(data){//テーブル コンポーネント内のデータ行がダブルクリックされたときのコールバック var v = arr[data.a('index ') ]; formP.v('tag', v);//setValue の略称である id に従って、対応する item 要素の値を設定します。この要素はテキスト ボックスです。 ）; もし(cb){cb(v);} //cb パラメータが渡された場合、data.a('number')/data.a('helloName') の値をダブルクリックした行の値に設定しますtable 内、つまり 3 番目と 4 番目の属性に割り当てられます} tableP.onDataClicked = function(data){//Callback Dialog.getConfig().buttons[1].action = テーブル コンポーネント内のデータ行がクリックされたときfunction(){//「OK」をクリックして次の操作を続行します。 var v = arr[data.a('index')]; formP.v('tag', v); { cb(v);} } }; return formP.getView();} function fillFormPane(formP, w, h, tableP, arr, cb){// 右側の formpane if(formP === unknown){ return; formP.setWidth(h); setHGap (0); if(formP.v('tag') === '未定義' || formP.v('tag') === '') { formP.v('tag', arr[0]); } tableP.onDataDoubleClicked = function(data){//テーブル コンポーネント内のデータ行がダブルクリックされたときのコールバック var v = arr[data.a('index ') ]; formP.v('tag', v);//setValue の略称である id に従って、対応する item 要素の値を設定します。この要素はテキスト ボックスです。 ）; もし(cb){cb(v);} //cb パラメータが渡された場合、data.a('number')/data.a('helloName') の値をダブルクリックした行の値に設定しますtable 内、つまり 3 番目と 4 番目の属性に割り当てられます} tableP.onDataClicked = function(data){//Callback Dialog.getConfig().buttons[1].action = テーブル コンポーネント内のデータ行がクリックされたときfunction(){//「OK」をクリックして次の操作を続行します。 var v = arr[data.a('index')]; formP.v('tag', v); { cb(v);} } }; return formP.getView();}右上のプロパティバーの表示はここで終わります。右下のテーブルパネルも同様に作成します。コードを読んで理解してください。
自動レイアウト最後に、インターフェース全体におけるノードの配置について説明します。HT の自動レイアウト コンポーネントには、ノードと接続の関係に基づいてノードの位置を自動的に配置するための複数種類のアルゴリズムが用意されています。 自動レイアウトは、多くのグラフィック要素や複雑な接続関係があり、手動でドラッグして配置することが難しいシーンでよく使用されます。各レイアウト方法をボタンで表示します。対応するボタンをクリックすると、押されたボタンで設定されたレイアウト方法に従って自動的にレイアウトされます。
まず、新しいインスタンスを作成し、自動レイアウトが必要なオブジェクト (DataModel、graphView、graph3dView など) を渡して、デフォルトのレイアウト メソッドを設定します。
autoLayout = new ht.layout.AutoLayout(gv);setTimeout(function(){layout('towardsouth', true);//画像がロードされる前に、自動レイアウトはノードのデフォルトのサイズに従ってレイアウトされるため} 、200);次に、formPane フォーム パネルを作成し、本体に追加して、本体の左上隅に配置します。すべてのコードを貼り付けるのではなく、最初のレイアウトのボタンを表示するだけです。
function createDirectionForm(){ var form = new ht.widget.FormPane(); form.setWidth(200);//フォームの幅を設定します form.body.appendChild(form.getView());フォーム .getView().style.background = '#fff'; form.getView().style.boxShadow = '4px 16px 16px rgba(0, 0, 0, 0.1)';//影のスタイルを設定します form.addRow([//この行はタイトルとして別途取り出されます { element: 'Auto Layout:',// 表示されるテキスト}] , [0.1]);//配列にはオブジェクトが 1 つだけあり、1 つのオブジェクトの幅を設定するだけです form.addRow([ { button: { icon: 'Layout/South Layout.json', onClicked: function(){layout('towardsouth', true); }、背景: null、labelColor: '#fff'、groupId: 'btn'、toolTip: 'south レイアウト'、borderColor: null } }、//..次に残りの 6 つのボタンを追加します]、[0.1、0.1、0.1、0.1、0.1、0.1、 0.1]);//配列には 7 つのオブジェクトがあるため、7 つのオブジェクトの幅を return form で設定する必要があります;}これらはさらに興味深い部分です。読んでいただきありがとうございます。また、皆さんが VeVb Martial Arts Network をサポートしていただけることを願っています。