속성 목록은 모든 사람에게 친숙해야 합니다. 일반적으로 HTML5를 사용하여 만든 속성 목록은 드롭다운 메뉴일 수 있으며, 드롭다운 목록만으로는 충분하지 않은 경우가 많습니다. 속성 표시줄의 버튼을 클릭하여 다기능 선택 상자를 팝업하고 들어오는 데이터를 선택하는 기능을 구현하기 위해 HT for Web을 사용해 보았습니다. 전반적인 실습이 비교적 간단하고 편리하다고 생각되어 공유하겠습니다. 여기 당신과 함께 있어요.
렌더링http://www.hightopo.com/demo/propertyEditor/index.html
코드 구현 토폴로지 맵위의 렌더링을 보면 전체 페이지가 왼쪽의 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 설정 오른쪽 구성 요소는 너비가 400borderPane.setCenterView(gv)인 rightView입니다.//borderPane 중간 구성 요소를 gv borderPane.addToDOM()으로 설정합니다.//borderPane 구성 요소를 본문에 추가합니다.
위 코드의 새로운 부분은 모두 클래스와 동일한 HT 캡슐화 구성 요소입니다. 다음은 SplitView 분할 구성 요소에 대한 설명입니다. 분할 구성 요소는 두 개의 하위 구성 요소를 왼쪽과 오른쪽 또는 위쪽과 아래쪽으로 분할하는 데 사용됩니다. -구성 요소는 HT 프레임워크에서 제공하는 구성 요소일 수도 있고 HTML의 기본 구성 요소일 수도 있습니다. 하위 구성 요소는 위치가 절대값으로 절대 위치에 있습니다. 이 구성 요소의 매개 변수는 (왼쪽 구성 요소 또는 상위 구성 요소 또는 오른쪽 구성 요소 또는)입니다. 하위 구성 요소, h는 왼쪽 및 오른쪽 나누기 v를 의미합니다. 분할 위치의 기본값은 0.5이며, 설정값이 0~1인 경우 1보다 큰 경우 왼쪽 구성요소 또는 상단 구성요소의 절대 너비 또는 높이를 나타냅니다. 1 미만은 오른쪽 구성 요소 또는 아래쪽 구성 요소의 절대 너비 또는 높이를 나타냅니다. BorderPane 패널 구성 요소는 하위 구성 요소를 위쪽, 아래쪽, 왼쪽, 오른쪽 및 가운데에 배치할 수 있습니다. 하위 구성 요소는 HT 프레임워크에서 제공하는 구성 요소이거나 구성 요소가 배치된 HTML 기본 구성 요소일 수 있습니다. 절대 모드에서는 절대 위치 결정을 수행합니다. 여기에서는 SplitView와 BorderPane을 결합하여 장면을 세 부분으로 나눕니다. 마지막으로 인터페이스에 표시될 수 있도록 최종 레이아웃 컨테이너를 본문이나 HTML 태그에 추가해야 합니다. addToDOM의 정의는 다음과 같습니다.
addToDOM = function(){ var self = this, view = self.getView(), //이 구성요소의 기본 div 가져오기 style = view.style //기본 div의 스타일 속성 가져오기 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/computer room/server.json'); root.setName('서버'); root.s('label.position', 3); gv.sm().ss(root);//기본적으로 루트 노드가 선택됩니다. for (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 + (++개수)); createEdge(iNode, jNode) } }}createNode 함수의 선언은 다음과 같습니다.
function createNode(name, tag){//노드 노드 생성 플래그++; var node = new node.setName(name) node.setImage('./symbols/computer room) / XX 하위 시스템.json'); node.a('숨김', false);//사용자 정의 속성, node.a('hidden')을 제어하여 노드의 가시성을 제어할 수 있습니다 node.a('인터페이스 유형', 'SATA') node.a('그래픽 카드', 'Nvidia ') ; if(flag % 2 === 0){ node.a('인터페이스 유형', 'IDE') node.a('그래픽 카드', 'ATI') } node.s('label. 위치', 11); gv.dm().add(node);//데이터 컨테이너 DataModel에 노드 추가 node.tablePane1 = createTableView(serviceType, dataModel1);//테이블 패널 생성 node.tablePane2 = createTableView(serviceSize, dataModel2); tablePane3 = createTableView(version, dataModel3); node.formPane1 = createFormPane(node.tablePane1);//양식 패널 만들기 node.formPane1.title = 'Type';//다음 대화 상자의 제목을 준비하려면 node.formPane2 = createFormPane(node.tablePane2) node.formPane2; title = '메모리'; node.formPane3 = createFormPane(node.tablePane3) = '모델'; 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;}이 노드의 숨겨진 속성을 제어하고 graphView의 시각적 필터 setVisibleFunc 함수를 사용하여 노드의 가시성을 제어합니다.
gv.setVisibleFunc(function(data){ if(data.a('hidden')){ return false; } return true;}); 속성 패널노드를 사용하면 아래 tablePane 테이블 패널의 값과 함께 속성을 표시하는 것이 당연하며 총 7가지 속성이 추가됩니다.
function createProperty(){//속성 생성 propertyView.addProperties([ { name: 'name',//accessType 속성과 결합된 name 속성을 가져오면 최종적으로 노드 속성에 액세스할 수 있습니다. accessType의 기본값은 null입니다. 이름은 나이이므로 getAge() 및 setAge(98)의 get/set 또는 is/set 메소드를 사용하여 액세스합니다(여기서 이름은 이름이므로 getName()을 통해 가져옵니다).displayName: 'Name'//속성 이름의 표시 텍스트 값 설정}, { name: 'hidden',//숨겨진 속성 가져오기 displayName: 'Hide this node', accessType: 'attr',//If name is hided, 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: '인터페이스 유형', accessType: 'attr', displayName : '인터페이스 유형' }, { name: '그래픽 카드', accessType: 'attr', displayName: '그래픽 카드' }, { name: '모델', accessType: 'attr', 디스플레이 이름: '모델', } ]);}세 번째와 네 번째 속성의 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 내장 구성 요소일 수 있습니다.}, { 버튼:{//이 속성을 설정한 후 HT는 속성 값 ht.widget.Button 객체를 기반으로 자동으로 생성되고 요소 속성 라벨에 저장됩니다:'...',//버튼의 텍스트 내용 onClicked: function(){//(var에 대한 버튼 클릭 이벤트) 나는 = 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]);//첫 번째 요소와 두 번째 요소의 표시 비율을 설정합니다. 테이블 구성 요소. 이 테이블 구성 요소에는 텍스트 상자와 버튼이라는 총 두 개의 요소만 있으며 비율은 각각 0.5와 0.1로 formPane을 반환합니다.}createDialog 함수를 생성하는 과정도 간단하고 명확합니다. 대화 상자의 제목, 크기, 내용 등은 setConfig(config) 메소드를 통해 구성되며, 이는 createDialog에 매개변수로 사용됩니다. 대화 상자에 표시되는 내용:
function createDialog(tPane){//팝업 상자 만들기Dialog.setConfig({ title: gv.sm().ld().getName()++formPane.title,//대화 상자 내용의 제목: tPane, // 팝업 상자의 내용을 테이블 패널 너비로 직접 설정: 400, //대화 상자 높이의 너비 지정: 200, 드래그 가능: true, // 대화 상자를 드래그하고 조정할 수 있는지 여부를 지정합니다. closable: true, // 닫기 버튼을 표시할지 여부를 나타냅니다. maximized: true, // resizeMode를 사용할 수 있는지 여부를 나타냅니다. 대화 상자의 오른쪽으로 마우스를 이동하면 하단 모서리에서 대화 상자의 크기를 변경할 수 있습니다. 즉, 너비와 높이를 조정할 수 있습니다. 버튼: [//두 개의 버튼 추가 { label: 'Cancel', action: function(){Dialog.hide() } }, { label: 'OK', } ] }); Dialog.show();//대화상자 표시}네 번째 매개변수 tableP 테이블 구성요소는 특별한 것이 아닙니다. 이는 단지 양식 구성요소를 생성한 다음 양식 구성요소에 열을 추가하는 것뿐입니다. 단계도 간단하고 코드도 매우 간단합니다.
function createTableView(arr, dm){//테이블 구성요소 생성 var tableView = new ht.widget.TableView(dm); tableView.addColumns([//json 배열 매개변수를 사용하여 일괄적으로 열 정보 추가{ displayName: 'ID', / /테이블 헤더의 열 이름 내용 가져오기 drawCell: function(g, data, selected, column, 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 , 텍스트 수평 정렬 정렬, vAlign 텍스트 수직 정렬) } }, { displayName: 'Name', drawCell: function(g, data, selected, column, x, y, w, h, tableView){ var id = tableView.getRowIndex(data); var info = arr[id]; ht.Default.drawText(g, info, null, null, x, y, w, 'center') } } ]); }fillFormPane의 매개변수를 설명한 후 이 함수가 어떻게 정의되는지 살펴보겠습니다. 기본적으로 마지막 단계는 tablePane 테이블 구성 요소의 요소를 클릭하고 이 요소를 formPane 양식 구성 요소의 textField 텍스트 상자에 반환하는 것입니다.
function fillFormPane(formP, w, h, tableP, arr, cb){//formpane if(formP === undefine){ return; } formP.setHeight(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);//id에 따라 해당 항목 요소 값을 설정합니다. 이는 setValue의 약어입니다. 태그의 ID를 가진 요소는 텍스트 상자입니다. ); 만약에 (cb){cb(v);} //cb 매개변수가 전달되면 data.a('number')/data.a('helloName') 값을 더블클릭한 행의 값으로 설정합니다. 즉, 세 번째와 네 번째 속성에 할당됨} tableP.onDataClicked = function(data){//CallbackDialog.getConfig().buttons[1].action = 테이블 구성 요소의 데이터 행을 클릭할 때 function(){//다음 작업을 진행하려면 확인을 클릭하세요. var v = arr[data.a('index')] formP.v('tag', v) if (cb) { cb(v);} } }; 반환 formP.getView();} function fillFormPane(formP, w, h, tableP, arr, cb){//formpane if(formP === undefine){ return; } formP.setHeight(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);//id에 따라 해당 항목 요소 값을 설정합니다. 이는 setValue의 약어입니다. 태그의 ID를 가진 요소는 텍스트 상자입니다. ); 만약에 (cb){cb(v);} //cb 매개변수가 전달되면 data.a('number')/data.a('helloName') 값을 더블클릭한 행의 값으로 설정합니다. 즉, 세 번째와 네 번째 속성에 할당됨} tableP.onDataClicked = function(data){//CallbackDialog.getConfig().buttons[1].action = 테이블 구성 요소의 데이터 행을 클릭할 때 function(){//다음 작업을 진행하려면 확인을 클릭하세요. var v = arr[data.a('index')] formP.v('tag', v) if (cb) { cb(v);} } }; 반환 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.setHeight(80); document.body.appendChild(form.getView()); form .getView().style.ground = '#fff'; form.getView().style.boxShadow = '4px 16px 16px rgba(0, 0, 0, 0.1)';//그림자 스타일 설정 form.addRow([//이 줄은 제목 { 요소: '자동 레이아웃:',//표시된 텍스트}]로 별도로 가져옵니다. , [0.1]);//배열에는 개체가 하나만 있습니다. 개체 하나의 너비를 설정하면 됩니다. form.addRow([ { 버튼: { 아이콘: 'Layout/South Layout.json', onClicked: function(){ 레이아웃('towardsouth', true) }, background: null, labelColor: '#fff', groupId: 'btn', toolTip: 'southlayout', borderColor: null } }, //.. . .다음으로 나머지 6개 버튼], [0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1]);//배열에는 객체가 7개 있으므로 객체 7개의 너비를 반환 형식으로 설정해야 합니다.}읽어주신 모든 분들께 감사드립니다. 여러분의 학습에 도움이 되기를 바랍니다. 또한 VeVb Martial Arts Network를 지원해 주시기 바랍니다.