====== Sidebar-Views ======

Die Seitenleiste ist der primäre Ort für navigierende und unterstützende Inhalte: Dateiexplorer, Suchpanels, Navigatorbäume und Übersichtslisten. Add-ins registrieren Views in der Seitenleiste, und der Host bettet sie als Panels ein. Mehrere Views können zu einem Accordion gruppiert werden, sodass verwandte Inhalte visuell zusammengehören.

Zurück zur [[start|Contributions-Übersicht]] oder zur [[..:start|Hauptübersicht]].

===== View-Orte =====

Der Host bietet vier Orte, an denen Views platziert werden können:

| **Ort** | **Schlüssel** | **Beschreibung** |
| Primäre Seitenleiste | ''sidebar'' | Die linke Seitenleiste. Standardort für Navigation und Übersichten. |
| Sekundäre Seitenleiste | ''secondary-sidebar'' | Eine optionale zweite Seitenleiste auf der rechten Seite. Geeignet für ergänzende Informationen. |
| Bottom-Panel | ''panel'' | Das Panel am unteren Rand. Typischerweise für Ausgaben, Terminals und Protokolle. |
| Editor-Bereich | ''editor'' | Innerhalb des Dokument-Bereichs. Selten verwendet, da hierfür der [[..:sdk:document-frame|TWvdSDocumentFrame]] besser geeignet ist. |

===== Manifest-Deklaration =====

<code javascript>
"contributes": {
  "views": {
    "sidebar": [
      {
        "id": "assets.navigator",
        "name": "Assets-Navigator",
        "icon": "media/navigator.svg",
        "containerId": "assets-explorer"
      },
      {
        "id": "assets.categories",
        "name": "Kategorien",
        "icon": "media/categories.svg",
        "containerId": "assets-explorer"
      }
    ],
    "panel": [
      {
        "id": "assets.log",
        "name": "Asset-Protokoll",
        "icon": "media/log.svg"
      }
    ]
  }
}
</code>

| **Feld** | **Pflicht** | **Beschreibung** |
| ''id'' | ja | Eindeutiger Bezeichner der View. Wird in ''view/title''- und ''view/item/context''-Menüs referenziert. |
| ''name'' | ja | Anzeigename, der als Panel-Überschrift erscheint. |
| ''icon'' | nein | Icon für die Activity-Bar (Seitenleiste links) und die Panel-Überschrift. |
| ''containerId'' | nein | Gruppierungs-Id für das Accordion. Views mit demselben ''containerId'' werden in einem gemeinsamen Container zusammengefasst. |

===== Accordion-Gruppierung =====

Wenn mehrere Views dieselbe ''containerId'' haben, fasst der Host sie zu einem Accordion zusammen. Im Beispiel oben bilden ''assets.navigator'' und ''assets.categories'' gemeinsam die Gruppe ''assets-explorer''. In der Seitenleiste erscheint ein einzelner Container mit zwei zusammenklappbaren Sektionen.

Dieses Verhalten ermöglicht es, dass verschiedene Add-ins Views in dieselbe Gruppe einfügen. Ein Basis-Add-in könnte den Navigator bereitstellen und ein Erweiterungs-Add-in eine zusätzliche Kategorie-Ansicht — beide landen im selben Accordion, weil sie dieselbe ''containerId'' verwenden.

Ohne ''containerId'' erhält jede View ihren eigenen Container in der Seitenleiste.

===== View-Inhalt =====

Eine View wird durch einen ''TWvdSDocumentFrame'' dargestellt, der über ''ISidebarService'' registriert wird:

<code pascal>
procedure TAssetPlugin.Activate(const AContext: IExtensionContext);
begin
  AContext.Subscribe(
    FHost.SideBar.RegisterPanel('assets.navigator', 'Assets-Navigator',
      'media/navigator.svg', TAssetNavigatorFrame)
  );
end;
</code>

Der Host erzeugt eine Instanz von ''TAssetNavigatorFrame'', wenn die Seitenleiste die View anzeigt. Die Frame-Klasse muss von ''TWvdSDocumentFrame'' erben.

Alternativ kann eine View über ''ITreeViewService'' mit einem ''ITreeDataProvider'' verbunden werden, wenn ein Baumstruktur-Panel genügt:

<code pascal>
AContext.Subscribe(
  FHost.TreeViews.RegisterTreeDataProvider('assets.navigator',
    TAssetTreeProvider.Create)
);
</code>

In diesem Fall erzeugt der Host automatisch ein TreeView-Control und füllt es mit den Daten des Providers.

===== Titelleisten-Aktionen =====

Jede View kann Aktionsbuttons in ihrer Titelleiste haben. Diese werden über den ''view/title''-Ort im [[menus|Menü-Merge]] deklariert:

<code javascript>
"menus": {
  "view/title": [
    {
      "command": "assets.refresh",
      "when": "view == assets.navigator",
      "group": "navigation"
    },
    {
      "command": "assets.add",
      "when": "view == assets.navigator",
      "group": "navigation"
    }
  ]
}
</code>

Der ''when''-Ausdruck ''view == assets.navigator'' stellt sicher, dass die Buttons nur in der Titelleiste der richtigen View erscheinen. Ohne diesen Filter würden sie in jeder View-Titelleiste auftauchen.

===== Welcome-Inhalte =====

Wenn eine View leer ist — etwa weil noch keine Daten geladen wurden —, kann ein Welcome-Inhalt angezeigt werden:

<code javascript>
"viewsWelcome": [
  {
    "viewId": "assets.navigator",
    "content": "Noch keine Anlagen vorhanden.\n[Erste Anlage erstellen](command:assets.create)",
    "when": "!hasAssets",
    "group": "main",
    "order": 1
  }
]
</code>

Der ''content'' unterstützt einfaches Markdown. Links im Format ''[Text](command:command.id)'' werden als Buttons gerendert, die beim Klick den referenzierten [[commands|Command]] auslösen. Der ''when''-Ausdruck bestimmt, ob der Welcome-Inhalt angezeigt wird.

===== Sichtbarkeit steuern =====

Views können programmatisch ein- und ausgeblendet werden:

<code pascal>
// View anzeigen
FHost.SideBar.ShowPanel('assets.navigator');

// View verstecken
FHost.SideBar.HidePanel('assets.navigator');
</code>

Das ist nützlich, wenn ein Add-in auf ein Ereignis reagieren und die Aufmerksamkeit des Benutzers auf ein bestimmtes Panel lenken möchte.

Weiter zur [[statusbar|StatusBar]] oder zurück zur [[start|Contributions-Übersicht]].