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;

 

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.

• Sie können diesen Parameter verwenden, um programmatisch eine Selektion im Tree vorzunehmen.
• Dieser Parameter feuert das Event selectionChanged.
• Die Selektion erfolgt über ein Array aus den Ids der Nodes des Trees. Führen Sie bei der Verwendung des Trees daher eine lokale Struktur mit, in der Sie alle Einträge des Trees halten.

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.

• Der Tree kommuniziert mit den IDs der Nodes.
• Der Tree stellt ansonsten keine weitere Informationen bezüglich der Nodes zur Verfügung. Halten Sie daher die Struktur lokal vor, um alle weiteren Informationen, passend zu der ID, im Zugriff zu haben.

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:

 

 

// 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(
        'glyph:capital-r;color=#f77723;scale=0.8;translate=-0.27,0.06|glyph: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.

• Sie können diesen Wert nicht ändern, er steht lediglich für einen lesenden Zugriff zur Verfügung.
• Stellen Sie dem Tree per Data neue Werte und somit eine neue Root-Node zur Verfügung, wenn Sie die Root-Node des Trees ändern möchten.

Funktionen

keine

Beispiel

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

 

 

// 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;