Tutorial: Activity Bar & Panes

In diesem Tutorial erstellen Sie ein Activity Bar Icon mit einer zugehörigen Pane — dem typischen Pattern für Seitenleisten-Funktionen.

Was Sie lernen

Activity Bar Item registrieren
Pane Group mit Pane Provider erstellen
React-Komponente als Pane-Inhalt
Pane-Bereiche (links, rechts, unten)

Übersicht

Projektstruktur

- index.ts
- package.json
- - MeinePaneContent.tsx

Schritt 1: Pane-Komponente erstellen

Erstellen Sie die Datei panes/MeinePaneContent.tsx:


import React, { useState } from 'react';
import { PaneProvider } from '@5minds/processcube_studio_sdk';
 
function MeinePaneContentComponent(): JSX.Element {
  const [count, setCount] = useState(0);
 
  return (
    <div style={{ padding: '12px' }}>
      <h3>Meine Pane</h3>
      <p>Dies ist eine eigene Pane-Komponente.</p>
      <p>Zähler: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Erhöhen
      </button>
    </div>
  );
}
 
export const paneProvider: PaneProvider = {
  getPaneTitle: () => 'Meine Pane',
  Pane: MeinePaneContentComponent,
  PaneContent: MeinePaneContentComponent,
};

Ein PaneProvider muss drei Eigenschaften exportieren:

getPaneTitle() — Titel der Pane im Header
Pane — Die vollständige Pane-Komponente (mit Header)
PaneContent — Nur der Inhalt (ohne Header-Wrapper)

Schritt 2: Entry-Point erstellen

Erstellen Sie die Datei index.ts:


import { Studio } from '@5minds/processcube_studio_sdk';
 
const PANE_GROUP_ID = 'meineExt/pane-group';
const PANE_ID = 'meineExt/hauptpane';
const ACTIVITY_ID = 'meineExt/activity';
 
export function onLoad(studio: Studio): void {
  // 1. Icon registrieren
  studio.icons.registerIcons({
    'meineExt/activity-icon': 'fad fa-puzzle-piece',
  });
 
  // 2. Pane Group mit Pane Provider registrieren
  studio.panes.registerPaneGroup('left', PANE_GROUP_ID, [
    studio.panes.getPaneViaPaneProvider(
      PANE_ID,
      'meineExt/pane-provider',
      require('./panes/MeinePaneContent'),
    ),
  ]);
 
  // 3. Activity Bar Item registrieren
  studio.activityBar.registerActivityBarItem('top', ACTIVITY_ID, () => {
    return [
      {
        type: 'button',
        id: ACTIVITY_ID,
        icon: 'meineExt/activity-icon',
        command: 'meineExt.toggleActivity',
        tooltip: 'Meine Extension',
      },
    ];
  });
 
  // 4. Toggle-Command registrieren
  studio.commands.register('meineExt.toggleActivity', () => {
    studio.activityBar.toggleActivity(ACTIVITY_ID);
  });
}

Pane-Bereiche

Panes können in drei Bereichen registriert werden:


// Links (typisch für Navigation/Explorer)
studio.panes.registerPaneGroup('left', 'group-id', panes);
 
// Rechts (typisch für Inspector/Properties)
studio.panes.registerPaneGroup('right', 'group-id', panes);
 
// Unten (typisch für Output/Logs)
studio.panes.registerPaneGroup('bottom', 'group-id', panes);

Mehrere kollabierbare Panes

Sie können mehrere Panes in einer Gruppe registrieren. Jede Pane ist einzeln auf- und zuklappbar:


export function onLoad(studio: Studio): void {
  studio.icons.registerIcons({
    'meineExt/icon': 'fad fa-puzzle-piece',
  });
 
  // Mehrere Panes in einer Gruppe
  studio.panes.registerPaneGroup('left', 'meineExt/pane-group', [
    studio.panes.getPaneViaPaneProvider(
      'meineExt/pane-uebersicht',
      'provider-uebersicht',
      require('./panes/UebersichtPane'),
    ),
    studio.panes.getPaneViaPaneProvider(
      'meineExt/pane-details',
      'provider-details',
      require('./panes/DetailsPane'),
    ),
    studio.panes.getPaneViaPaneProvider(
      'meineExt/pane-aktionen',
      'provider-aktionen',
      require('./panes/AktionenPane'),
    ),
  ]);
 
  // Activity Bar Item
  studio.activityBar.registerActivityBarItem('top', 'meineExt/activity', () => [
    {
      type: 'button',
      id: 'meineExt/activity',
      icon: 'meineExt/icon',
      command: 'meineExt.toggle',
      tooltip: 'Meine Extension',
    },
  ]);
 
  studio.commands.register('meineExt.toggle', () => {
    studio.activityBar.toggleActivity('meineExt/activity');
  });
}

Activity Bar Bereiche

Activity Bar Items können oben oder unten platziert werden:


// Oben (typisch für Hauptfunktionen)
studio.activityBar.registerActivityBarItem('top', id, factory);
 
// Unten (typisch für Settings/Hilfe)
studio.activityBar.registerActivityBarItem('bottom', id, factory);

Activity Bar Item-Typen

Button


{
  type: 'button',
  id: 'mein-button',
  icon: 'icon-key',
  command: 'command-id',
  tooltip: 'Tooltip-Text',
}

Menü


{
  type: 'menu',
  id: 'mein-menu',
  icon: 'icon-key',
  menuId: 'meineExt/context-menu',   // Verweis auf registriertes Menü
  tooltip: 'Tooltip-Text',
}

Trenner


{
  type: 'divider',
}

Nächste Schritte

Custom Editor — Eigene Editor-Dokumenttypen erstellen
Datei-Editor — Editor für Dateitypen