agorum.brick

Mit diesem Widget können Sie Bricks verwenden.

• Bricks sind die Vorgänger-Oberflächen-Komponenten von agorum core, bevor es aguila gab.
• Einige Elemente sind derzeit nur als Bricks verfügbar, etwa die Ordnerliste oder Suchergebnisliste.
• Im Laufe der Zeit werden diese Bricks durch aguila-Komponenten ausgetauscht.

Für gängige Bricks existieren bereits aguila-Widgets, etwa:

• agorum.composite.search.result (für eine Suchergebnisliste)
• agorum.composite.details (Detail-Ansicht)
• agorum.composite.details.view (Anzeige verschiedener Dokumententypen)

Verwendung

---

Das folgende Beispiel verwendet die Ordnerliste, um den Inhalt von Dateien aufzulisten.

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

let widget = aguila.create({
  type: 'agorum.brick',
  width: 800,
  height: 500,
  brick: 'Explorer.List',
  config: {}
});

aguila.fork(() => objects.find('/agorum/roi/Files').ID)
.then(id => {
  widget.raise('show', {
    provider: 'folder',
    toolbar: true,
    select:  true,
    custom: true,
    source: id
  });
});

widget.on('selected', ([ id ]) => {
  console.log('selected: ' + id);
});

widget.on('open', ([ id ]) => {
  console.log('open: ' + id);
});

widget;

Events

---

Die jeweiligen Events hängen vom jeweiligen Brick ab. In den Beispielen existiert das Event selected, sobald ein Benutzer ein Element der Liste wählt.

Parameter

---

brick

Definiert den Namen des Bricks, etwa explorer.list.

config

Gibt dem Brick Konfigurationsparameter mit.

Funktionen

---

raise

Löst ein Event auf Brick-Seite aus.

• Ein gängiges Event lautet show.
• Welche Events existieren, ist vom jeweiligen Brick abhängig.

Beispiele

---

Beispiel für explorer.list

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

let widget = aguila.create({
  type: 'agorum.brick',
  width: 800,
  height: 500,
  brick: 'explorer.list',
  config: {}
});

aguila.fork(() => {
  return objects.find('/agorum/roi/Files').ID;
}).then(id => {
  widget.raise('show', {
    // provder: folder=Darstellunge eines Ordners
    provider: 'folder',
    
    // Anzeige der toolbar unten
    toolbar: true,
    
    // Listenkonfiguration, definiert im smart assistant konfigurator
    list: 'Standard',
    
    // wird bei select eine ID übergeben und ist die ID in der Liste vorhanden, wird diese ausgewählt
    // select:  'id-of-object',
    
    // sortable=true bedeutet, die einzelnen Spalten sind sortierbar, ansonsten nicht
    sortable: true,
    
    // autoSelectOnLoad=true bedeutet, dass das erste Element in der Liste automatisch ausgewählt wird
    
    autoSelectOnLoad: false,
    
    // refreshInterval in Millisekunden definiert, dass die Liste automatisch nach diesem Intervall neu geladen wird
    // refreshInterval: 60000,

    // Wird custom auf true gesetzt, dann behandelt die Liste Doppelklicks nicht mehr selbst, sondern erzeugt stattdessen ein 'open'-Event
    // custom: true,
    
    // source gibt die Ordner ID an, dessen Inhalt angezeigt werden soll.
    source: id
  });
});

// selected wird aufgerufen für eine oder mehrere ausgewählte IDs
widget.on('selected', ([ id ]) => {
  console.log('selected: ' + id);
});

// open wird aufgerufen für eine ID, die geöffnet werden soll
widget.on('open', ([ id ]) => {
  console.log('open: ' + id);
});

widget;

Beispiel für explorer.main

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

let widget = aguila.create({
  type: 'agorum.brick',
  width: 800,
  height: 500,
  brick: 'explorer.main',
  
  // in config wird der Name des Einsprungspunkt definiert, wie im smart assistant konfigurator definiert.
  // wird kein Name in config angegeben, wird der Einsprungspunkt der Standardkonfiguration genommen.
  config: 'Einstieg'
});

aguila.fork(() => {
  return objects.find('/agorum/roi/Files').ID;
}).then(id => {
  // öffnen des Ordners
  widget.raise('open', [ id ]);
});

// selected wird aufgerufen, wenn ein Ordner im Baum oder ein Element in der Liste gewählt wird.
widget.on('selected', ([ id ]) => {
  console.log('selected: ' + (Array.isArray(id) ? id.join(', ') : id));
});  

widget;

Beispiel für Home.DetailList

Dieses Beispiel zeigt einen Ordner mit der Detailliste an. Für die Suche existiert bereits das Widget agorum.composite.search.result, Sie müssen daher die Suche nicht mehr über einen Brick ausführen.

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

let widget = aguila.create({
  type: 'agorum.brick',
  width: 800,
  height: 500,
  brick: 'Home.DetailList',
  
  config: {
    // timeline=true zeigt eine Timeline neben den Einträgen
    timeline: true,

    // provider=folder bedeutet: den Inhalt eines Ordners zeigen
    provider: 'folder',
    
    // das Attribute, das für die timeLine genutzt werden soll als Datum
    // default ist lastModifyDate
    timelineTime: 'updateDate',
    
    // thumbnails=true es werden Vorschaubilder mit angezeigt rechts neben den Elementen
    thumbnails: false
  }
});

aguila.fork(() => {
  return objects.find('/agorum/roi/Files').ID;
}).then(id => {
  
  // definieren der Sortierung
  // default ist lastModifyDate absteigen (DESC)
  let sort = property.from([{
    property: 'updateDate',
    direction: 'DESC'
  }]).toString();
  
  // Anzeigen des Ordners
  widget.raise('show', {
    provider: 'folder',
    sort: sort,
    source: id
  });
});

// selected wird aufgerufen, wenn ein Ordner im Baum oder ein Element in der Liste gewählt wird.
widget.on('selected', ([ id ]) => {
  console.log('selected: ' + id);
});  

widget;