agorum.composite.jsonView

Dieses Widget stellt einen interaktiven JSON-Viewer und -Editor dar. Es ermöglicht die übersichtliche Darstellung und Bearbeitung von JSON-Strukturen.

• Auf der linken Seite wird eine Baumansicht angezeigt, die die hierarchische Struktur des JSON-Objekts abbildet.
• Auf der rechten Seite befindet sich ein Detail-Editor, der je nach Datentyp des ausgewählten Knotens einen passenden Editor anzeigt (Textfeld, Zahlenfeld, Boolean-Schalter, Datumsfeld oder JSON-Code-Editor).
• Verschiedene Datentypen werden durch farbige Icons in der Baumansicht unterschieden.
• Änderungen an einzelnen Werten werden automatisch in die Gesamtstruktur übernommen und über das Event valueChanged gemeldet.

Unterstützte Datentypen

Datentyp	Icon-Farbe	Beschreibung
Object	Blau	Verschachtelte Objekte mit Schlüssel-Wert-Paaren. Einträge werden alphabetisch sortiert.
Array	Orange	Listen mit nummerierten Einträgen. Die Anzahl der Elemente wird angezeigt.
String	Grün	Textwerte. Lange Texte werden in der Baumansicht gekürzt dargestellt.
Number	Hellblau	Numerische Werte (Ganzzahlen und Dezimalzahlen).
Boolean	Gelb (true) / Grau (false)	Wahrheitswerte. Das Icon zeigt den aktuellen Zustand an.
Date	Rot	Datumswerte. Werden mit vollständiger Zeitzone angezeigt.
null	Grau	Leere Werte (null).
undefined	Grau	Undefinierte Werte.

Verwendung

---

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

let jsonView = aguila.create({
  type: 'agorum.composite.jsonView'
});

jsonView;

Events

---

valueChanged

Wird ausgelöst, wenn der Wert des Widgets geändert wird (z. B. durch Bearbeitung im Detail-Editor).

jsonView.on('valueChanged', value => {
  console.log('Neuer Wert:', value);
});

Parameter

---

value (Object)

Die JSON-Struktur, die im Widget angezeigt und bearbeitet werden soll.

jsonView.value = {
  name: 'Max Mustermann',
  age: 42,
  active: true
};

Funktionen

---

keine

Beispiele

---

Einfaches Beispiel

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

// Create JSON view widget
let jsonView = aguila.create({
  type: 'agorum.composite.jsonView'
});

// Set a value
jsonView.value = {
  name: 'Max Mustermann',
  age: 42,
  isActive: true,
  address: {
    street: 'Hauptstraße 123',
    city: 'München',
    zipCode: '80331'
  },
  hobbies: ['Lesen', 'Sport', 'Kochen']
};

// Listen for changes
jsonView.on('valueChanged', value => {
  console.log('valueChanged', value);
});

// Return the widget to the user
jsonView;

Beispiel mit komplexen Datentypen

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

// Create JSON view widget
let jsonView = aguila.create({
  type: 'agorum.composite.jsonView'
});

// Set a complex value with various data types
jsonView.value = {
  // Simple data types
  name: 'Max Mustermann',
  age: 42,
  isActive: true,
  salary: null,

  // Date objects
  createdAt: new Date(),

  // Nested objects
  address: {
    street: 'Hauptstraße 123',
    city: 'München',
    coordinates: {
      latitude: 48.1351,
      longitude: 11.582
    }
  },

  // Arrays with objects
  contacts: [
    { type: 'email', value: 'max@example.com', primary: true },
    { type: 'phone', value: '+49 89 123456', primary: false }
  ]
};

// Listen for changes
jsonView.on('valueChanged', value => {
  console.log('valueChanged', value);
});

// Return the widget to the user
jsonView;