Durchsuchbare Dokumentation aufrufen | Zurück zur Dokumentationsübersicht

Navigation: Dokumentationen agorum core > agorum core aguila


agorum.basicTree

Der basicTree stellt die zur Verfügung gestellten Informationen in einer Baumstruktur dar.

Verwendung

let aguila = require('common/aguila');

let basicTree = aguila.create({
  height: 300,
  width: 300,
  type: 'agorum.basicTree',
  data: {
    text: 'Root',
    id: 'Root',
    items: [
      {
        text: 'Element 1',
        id: 'Element 1',
        items: [
          {
            text: 'Element 1.1',
            id: 'Element 1.1'
          },
          {
            text: 'Element 1.2',
            id: 'Element 1.2'
          }
        ]
      },
      {
        text: 'Element 2',
        id: 'Element 2',
        items: [
          {
            text: 'Element 2.1',
            id: 'Element 2.1'
          },
          {
            text: 'Element 2.2',
            id: 'Element 2.2'
          }
        ]
      }
    ]
  }
});

basicTree;

 

Screenshot zum Verwendungsbeispiel

Events

nodeClicked (String)

Löst aus, wenn ein Benutzer eine Node innerhalb des Trees einmalig anklickt.

Das System übergibt die Id der Node.


Beispiel

basicTree.on('nodeClicked', id => {
  // TODO Implement NodeClick logic
});

nodeDblClicked (String)

Löst aus, wenn ein Benutzer eine Node innerhalb des Trees doppelt anklickt.

Das System übergibt die Id der Node.


Beispiel

basicTree.on('nodeDblClicked', id => {
  // TODO Implement NodeDblClick logic
});

nodeRightClicked (String)

Löst aus, wenn ein Benutzer eine Node innerhalb des Trees mit der rechten Maustaste anklickt.

Das System übergibt die Id der Node.


Beispiel

basicTree.on('nodeRightClicked', id => {
  // TODO Implement NodeRightClick logic
});

nodeExpanded (String)

Löst aus, wenn ein Benutzer eine Node im Tree aufklappt, um die Kindelemente der Node anzeigen zu lassen.

Das System übergibt die Id der Node.


Beispiel

basicTree.on('nodeExpanded', id => {
  // TODO Implement NodeExpanded logic
});

nodeCollapsed (String)

Löst aus, wenn ein Benutzer eine Node im Tree zuklappt, um die Kindelemente der Node zu verbergen.

Das System übergibt die Id der Node.


Beispiel

basicTree.on('nodeCollapsed', id => {
  // TODO Implement NodeCollapsed logic
});

selectionChanged (Array)

Löst aus, wenn sich die Selektion der Nodes innerhalb des Trees geändert hat.

Das System übergibt ein Array aus Ids der Nodes.


Beispiel

basicTree.on('selectionChanged', ids => {
  // TODO Implement SelectionChanged logic
});

Parameter

border (Boolean)

Wert Beschreibung
true Erzwingt die Darstellung eines Rahmens um das Widget (sofern unterstützt).
false Unterdrückt die Darstellung eines Rahmens um das Widget (sofern unterstützt).

hideRoot (Boolean, default: false)

Wert Beschreibung
true Blendet die erste definierte Node des Trees in der Darstellung des Trees aus.
false (Standard) Blendet die erste definierte Node des Trees in der Darstellung des Trees ein.


Beispiel

let aguila = require('common/aguila');

let basicTree = aguila.create({
  height: 300,
  width: 300,
  hideRoot: true,
  type: 'agorum.basicTree',
  data: {
    text: 'Root',
    id: 'Root',
    items: []
  }
});

basicTree;

selection (Array)

Enthält die Information der selektierten Nodes des Trees.


Beispiel

// Set a new selection for the tree
basicTree.selection = [ 'Root' ];

// Read the selection of the tree
let selectedIds = basicTree.selection;

data (Propertystruktur)

Enthält die Informationen, die im Tree erscheinen.

Die Propertystruktur baut sich folgendermaßen auf:

Parameter Beschreibung
text Definiert den Wert, der im Tree erscheint.
id Definiert die ID der Node, um diese im Tree eindeutig identfizieren zu können.
items Definiert die Kindelemente der Node.
icon Definiert ein spezielles Icon, das im Tree erscheint. Sie können dafür mit der Icons-Bibliothek definierte Icons verwenden, auch unterschiedliche Icons für auf- und zugeklappte Strukturen, siehe icons.tree.
expanded true
Klappt einen Knoten mit Unterknoten aus.

false (Standard)
Klappt einen Knoten mit Unterknoten ein.


Beispiel für die grundsätzliche Verwendung

let aguila = require('common/aguila');

let basicTree = aguila.create({
  height: 300,
  width: 300,
  type: 'agorum.basicTree',
  data: {
    text: 'Root',
    id: 'Root',
    items: [
      {
        text: 'Element 1',
        id: 'Element 1',
        items: []
      },
      {
        text: 'Element 2',
        id: 'Element 2',
        items: []
      }
    ]
  }
});

basicTree;

 

Beispiel für die Verwendung von Icons

Das folgende Beispiel zeigt, wie Sie mit der Icons-Bibliothek definierte Icons im basicTree verwenden können:

 

Verwendung unterschiedlicher Icons für eingeklappte und ausgeklappte Strukturen
 
// Requirements
let aguila = require('common/aguila');
let icons = require('/agorum/roi/customers/agorum.icons/js/icons');

// Variables
// Data for the tree with additional information which have to be kept locally outside of the tree
let data = {
  root: {
    text: 'Root',
    value: 'Value Root',
    id: 'root',
    childNodes: ['element1', 'element2'],
  },
  element1: {
    text: 'Element 1',
    value: 'Value Element 1',
    id: 'element1',
    childNodes: ['element11', 'element12'],
  },
  element11: {
    text: 'Element 1.1',
    id: 'element11',
    value: 'Value Element 1.1',
  },
  element12: {
    text: 'Element 1.2',
    id: 'element12',
    value: 'Value Element 1.2',
  },
  element2: {
    text: 'Element 2',
    value: 'Value Element 2',
    id: 'element2',
    childNodes: ['element21', 'element22'],
  },
  element21: {
    text: 'Element 2.1',
    id: 'element21',
    value: 'Value Element 2.1',
  },
  element22: {
    text: 'Element 2.2',
    id: 'element22',
    value: 'Value Element 2.2',
  },
};

// aon
let aon = {
  type: 'agorum.vbox',
  height: 250,
  width: 300,
  items: [
    {
      flexible: true,
      type: 'agorum.basicTree',
      name: 'basicTree',
    },
  ],
};

// dialog
let dialog = aguila.create(aon);

// Ui elements
let basicTree = dialog.down('basicTree');

// Fill tree with information
function fillTree(nodeValue, currentNode) {
  let newNode;
  if (!currentNode) {
    newNode = {
      text: nodeValue.text,
      id: nodeValue.id,
      items: [],
      // Only one icon is used (same icon will be used for expanded state)
      icon: icons.tree(
        'letter:capital-r;color=#f77723;scale=0.8;translate=-0.27,0.06|letter:o;scale=0.51;translate=0.17,0.16'
      ),
    };
  } else {
    newNode = {
      text: nodeValue.text,
      id: nodeValue.id,
      items: [],
      // A different icon is used for the expanded state
      icon: icons.tree(
        'ionicon:arrow-forward-outline;color=#0069b5',
        'ionicon:arrow-forward-outline;color=#0069b5;rotate=31'
      ),
    };
    currentNode.items.push(newNode);
  }
  if (nodeValue.childNodes && nodeValue.childNodes.length > 0) {
    nodeValue.childNodes.forEach(childNode => {
      fillTree(data[childNode], newNode);
    });
  }
  return newNode;
}

// Give data to tree
let dataFill = fillTree(data.root);
console.log('dataFill', dataFill);

basicTree.data = fillTree(data.root);
// Select root node
basicTree.selection = ['root'];

// Provide dialog to user
dialog;

root

Stellt die Root-Node des Trees zur Verfügung.

Funktionen

keine

Beispiel

Das Beispiel zeigt, wie sich die Events verhalten, indem es Event-Informationen direkt im Dialog ausgibt.

 

Screenshot zum Beispiel

 

// Requirements
let aguila = require('common/aguila');

// Variables
// Data for the tree with additional information which has to be kept locally outside the tree
let data = {
  root: {
    text: 'Root',
    value: 'Value Root',
    id: 'root',
    childNodes: [ 'element1', 'element2' ]
  },
  element1: {
    text: 'Element 1',
    value: 'Value Element 1',
    id: 'element1',
    childNodes: [ 'element11', 'element12' ]
  },
  element11: {
    text: 'Element 1.1',
    id: 'element11',
    value: 'Value Element 1.1'
  },
  element12: {
    text: 'Element 1.2',
    id: 'element12',
    value: 'Value Element 1.2'
  },
  element2: {
    text: 'Element 2',
    value: 'Value Element 2',
    id: 'element2',
    childNodes: [ 'element21', 'element22' ]
  },
  element21: {
    text: 'Element 2.1',
    id: 'element21',
    value: 'Value Element 2.1'
  },
  element22: {
    text: 'Element 2.2',
    id: 'element22',
    value: 'Value Element 2.2'
  },
};

// aon
let aon = {
  type: 'agorum.vbox',
  height: 250,
  width: 300,
  items: [
    {
      flexible: true,
      type: 'agorum.basicTree',
      name: 'basicTree'
    },
    {
      type: 'agorum.textDisplay',
      name: 'idDisplay',
      label: 'Id:'
    },
    {
      type: 'agorum.textDisplay',
      name: 'eventDisplay',
      label: 'Event:'
    },
    {
      type: 'agorum.textDisplay',
      name: 'valueDisplay',
      label: 'Nodevalue:'
    }
  ]
};

// dialog
let dialog = aguila.create(aon);

// Ui elements
let basicTree = dialog.down('basicTree');
let eventDisplay = dialog.down('eventDisplay');
let valueDisplay = dialog.down('valueDisplay');
let idDisplay = dialog.down('idDisplay');

// Events
basicTree.on('nodeClicked', id => {
  idDisplay.value = id;
  eventDisplay.value = 'Node clicked';
  valueDisplay.value = data[id].value;
});

basicTree.on('nodeDblClicked', id => {
  idDisplay.value = id;
  eventDisplay.value = 'Node dbl clicked';
  valueDisplay.value = data[id].value;
});

basicTree.on('nodeRightClicked', id => {
  idDisplay.value = id;
  eventDisplay.value = 'Node right clicked';
  valueDisplay.value = data[id].value;
});

basicTree.on('nodeExpanded', id => {
  idDisplay.value = id;
  eventDisplay.value = 'Node expanded';
  valueDisplay.value = data[id].value;
});

basicTree.on('nodeCollapsed', id => {
  idDisplay.value = id;
  eventDisplay.value = 'Node collapsed';
  valueDisplay.value = data[id].value;
});

basicTree.on('selectionChanged', ids => {
  idDisplay.value = ids[0];
  eventDisplay.value = 'selectionChanged';
  valueDisplay.value = data[ids[0]].value;
});

// Fill tree with information
function fillTree(nodeValue, currentNode) {
  let newNode;
  if (!currentNode) {
    newNode = {
      text: nodeValue.text,
      id: nodeValue.id,
      items: []
    };
  }
  else {
    newNode = {
      text: nodeValue.text,
      id: nodeValue.id,
      items: []
    };
    currentNode.items.push(newNode);
  }
  if (nodeValue.childNodes && nodeValue.childNodes.length > 0) {
    nodeValue.childNodes.forEach(childNode => {
      fillTree(data[childNode], newNode);
    });
  }
  return newNode;
}

// Give data to tree
basicTree.data = fillTree(data.root);
// Select root node
basicTree.selection = [ 'root' ];

// Provide dialog to user
dialog;