agorum.imageList

Dieses Widget stellt eine Liste von Bildern dar.

Verwendung

Das folgende Beispiel sucht PDF-Dateien im System und zeigt von der ersten 10 gefundenen Dokumenten die erste Seite als Vorschaubild an:

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

let widget = aguila.create(
  {
    type: 'agorum.vbox',
    width: 500,
    height: 300,
    items: [
      {
        type: 'agorum.imageList',
        name: 'imageList',
        flexible: true
      },
      {
        type: 'agorum.textDisplay',
        name: 'log',
        label: 'Ausgabe'
      }
    ]
  }
);

let listData;

let log = widget.down('log');
let imageList = widget.down('imageList');

// Löst aus, wenn sich die Auswahl ändert
imageList.on('selectionChanged', item => {  
  let rowNumber = item[0];
  log.text = 'selectionChanged: ' + rowNumber + ', ' + listData[rowNumber].id;
});

// Sucht alle PDF-Dokumente im System und zeigt die ersten 10 an
aguila.fork(() => {
  // Sucht nach PDF-Dokumenten
  let docs = objects.query('nameextension:pdf').limit(10).search('id').rows;
  
  // Erstellung des Datenblocks mit dem Vorschaubild der ersten Seite
  // als _nc (noCache) wird das letzte Änderungsdatum verwendet, um
  // Browsercaching bei Änderung des Dokuments zu vermeiden
  return docs.map(doc => {
    doc = objects.find(doc.id);
    return {
      src: 'https://agorumdocproxy.agorum.com/api/rest/object/preview/' + doc + '.jpg?page=' + 1 + 
        '&size=' + 120 + '&_nc=' + doc.lastModified,
      text: doc.name,
      id: doc.ID
    };
  });
  
}).then(data => {
  imageList.data = listData = data;
  imageList.selection = [ 0 ];
});

widget;

Events

hovered

Löst aus, sobald ein Benutzer auf die imageList (außerhalb eines Bilds) mit der Maus fährt.

itemClicked

Löst aus, sobald ein Benutzer auf ein Element in der Liste mit der linken Maustaste klickt.

Das System gibt als Parameter die selektierte Zeilennummer zurück, beginnend mit 0.

Beispiel

imageList.on('itemClicked', item => {  
  let rowNumber = item;
  console.log('itemClicked: ' + rowNumber + ', ' + listData[rowNumber].col1;
});

itemDblClicked

Löst aus, sobald ein Benutzer auf ein Element in der Liste doppelklickt.

Das System gibt als Parameter die selektierte Zeilennummer zurück, beginnend mit 0.

Beispiel

imageList.on('itemDblClicked', item => {  
  let rowNumber = item;
  console.log('itemDblClicked: ' + rowNumber + ', ' + listData[rowNumber].col1;
});

itemRightClicked

Löst aus, sobald ein Benutzer auf ein Element in der Liste mit der rechten Maustaste klickt.

Das System gibt als Parameter die selektierte Zeilennummer zurück, beginnend mit 0.

Beispiel

imageList.on('itemRightClicked', item => {  
  let rowNumber = item;
  console.log('itemRightClicked: ' + rowNumber + ', ' + listData[rowNumber].col1;
});

itemHovered

Löst aus, sobald die Maus über ein Element fährt.

Das System gibt als Parameter die selektierte Zeilennummer zurück, beginnend mit 0.

Beispiel

imageList.on('itemHovered', item => {  
  let rowNumber = item;
  console.log('itemHovered: ' + rowNumber + ', ' + listData[rowNumber].col1;
});

selectionChanged

Löst aus, sobald sich die Auswahl in der Liste ändert, d. h. immer dann, wenn der Benutzer einen neuen Eintrag aus der Liste wählt.

Das System übergibt als Parameter ein Array der selektierten Nummern, beginnend mit 0.

Beispiel

imageList.on('selectionChanged', item => {  
  let rowNumber = item[0];
  console.log('selectionChanged: ' + rowNumber + ', ' + listData[rowNumber].id;
});

Parameter

data (nur schreiben)

Übergibt die Daten für die angezeigten Bilder als Array, wobei ein Element im Array einem Bild entspricht.

Wert innerhalb des Arrays	Beschreibung
group	Fasst Bilder in Gruppen zusammen. Das System stellt diese Gruppen mit einem Trennstrich in der Liste dar und gibt den Gruppentitel in dem Trennstrich aus.
tint	Definiert den Hintergrund-Style eines Bilds (null, coral oder lightgray).
src	Definiert die URL des Bilds.
text	Definiert den Text unterhalb des Bilds.
id	Definiert eine eindeutige ID des Bilds, in der Regel die ID des zugehörigen Dokuments.
angle	Stellt das Bild um den angegebenen Winkel rotiert dar.

Beispiel

{
  group: 'Gruppentitel',
  tint: null, // 'coral', 'lightgray'
  src: 'url des Bildes',
  text: 'Text unter dem Bild',
  id: 'ID des Bildes',
  angle: 90
}

selection

Verwendung	Beschreibung
Lesend	Definiert ein Array aus Zeilennummern, das die Nummer des gewählten Listenelements enthält. Benutzer hat erste Zeile gewählt [ 0 ]
Schreibend	Wählt ein Element in der Liste vom Programm her. Erste Zeile wählen basicGrid.selection = [ 0 ];

Funktionen

keine