Plugin-Entwicklungs-Cheatsheet

Beim Schreiben von Plugins fragt man sich oft: „In welcher Datei und mit welcher API soll ich das tun?" Dieses Cheatsheet hilft Ihnen, schnell die richtige Stelle zu finden.

Plugin-Verzeichnisstruktur

Mit yarn pm create @my-project/plugin-name erstellen Sie ein Plugin, dabei wird automatisch die folgende Verzeichnisstruktur erzeugt. Erstellen Sie Verzeichnisse nicht manuell, da sonst Registrierungsschritte vergessen werden können und das Plugin nicht funktioniert. Details siehe Erstes Plugin schreiben.

plugin-name/
├── src/
│   ├── client-v2/              # Client-Code (v2)
│   │   ├── plugin.tsx          # Client-Plugin-Einstiegspunkt
│   │   ├── locale.ts           # useT / tExpr Übersetzungs-Hooks
│   │   ├── models/             # FlowModel (Block, Feld, Aktion)
│   │   └── pages/              # Seiten-Components
│   ├── client/                 # Client-Code (v1, kompatibel)
│   │   ├── plugin.tsx
│   │   ├── locale.ts
│   │   ├── models/
│   │   └── pages/
│   ├── server/                 # Server-Code
│   │   ├── plugin.ts           # Server-Plugin-Einstiegspunkt
│   │   └── collections/        # Datentabellen-Definitionen
│   └── locale/                 # Mehrsprachen-Übersetzungsdateien
│       ├── zh-CN.json
│       └── en-US.json
├── client-v2.js                # Stamm-Einstiegspunkt (verweist auf das Build-Ergebnis)
├── client-v2.d.ts
├── client.js
├── client.d.ts
├── server.js
├── server.d.ts
└── package.json

Client: Was tun → Wie schreiben

Was tun	In welcher Datei	Welche API	Dokumentation
Eine Seitenroute registrieren	`plugin.tsx` `load()`	`this.router.add()`	Router
Eine Plugin-Einstellungsseite registrieren	`plugin.tsx` `load()`	`pluginSettingsManager.addMenuItem()` + `addPageTabItem()`	Router
Einen benutzerdefinierten Block registrieren	`plugin.tsx` `load()`	`this.flowEngine.registerModelLoaders()`	FlowEngine → Block-Erweiterung
Ein benutzerdefiniertes Feld registrieren	`plugin.tsx` `load()`	`this.flowEngine.registerModelLoaders()`	FlowEngine → Feld-Erweiterung
Eine benutzerdefinierte Aktion registrieren	`plugin.tsx` `load()`	`this.flowEngine.registerModelLoaders()`	FlowEngine → Aktions-Erweiterung
Eine interne Tabelle in der Datentabellen-Auswahl eines Blocks anzeigen	`plugin.tsx` `load()`	`mainDS.addCollection()`	Collections
Plugin-Texte übersetzen	`locale/zh-CN.json` + `locale/en-US.json`	—	i18n Internationalisierung

Server: Was tun → Wie schreiben

Was tun	In welcher Datei	Welche API	Dokumentation
Eine Datentabelle definieren	`server/collections/xxx.ts`	`defineCollection()`	Collections
Eine vorhandene Datentabelle erweitern	`server/collections/xxx.ts`	`extendCollection()`	Collections
Eine benutzerdefinierte Schnittstelle registrieren	`server/plugin.ts` `load()`	`this.app.resourceManager.define()`	ResourceManager
Schnittstellen-Berechtigungen konfigurieren	`server/plugin.ts` `load()`	`this.app.acl.allow()`	ACL
Beim Plugin-Installieren Initialdaten einfügen	`server/plugin.ts` `install()`	`this.db.getRepository().create()`	Plugin

FlowModel-Schnellübersicht

Was tun	Welche Basisklasse erweitern	Wichtige API
Reinen Anzeige-Block	`BlockModel`	`renderComponent()` + `define()`
Datentabellen-gebundenen Block (benutzerdefiniertes Rendering)	`CollectionBlockModel`	`createResource()` + `renderComponent()`
Vollständigen Tabellenblock (auf Basis der eingebauten Tabelle anpassen)	`TableBlockModel`	`filterCollection()` + `customModelClasses`
Feld-Anzeige-Component	`ClickableFieldModel`	`renderComponent(value)` + `bindModelToInterface()`
Aktionsbutton	`ActionModel`	`static scene` + `registerFlow({ on: 'click' })`

Übersetzungsmethoden-Schnellübersicht

Szenario	Was verwenden	Woher importieren
In Plugin `load()`	`this.t('key')`	In der Plugin-Basisklasse enthalten
In React-Components	`const t = useT(); t('key')`	`locale.ts`
Statische FlowModel-Definition (`define()`, `registerFlow()`)	`tExpr('key')`	`locale.ts`

Schnellübersicht häufiger API-Aufrufe

Was tun	Im Plugin	Im Component
API-Anfrage senden	`this.context.api.request()`	`ctx.api.request()`
Übersetzung abrufen	`this.t()`	`useT()`
Logger abrufen	`this.context.logger`	`ctx.logger`
Route registrieren	`this.router.add()`	—
Zur Seite navigieren	—	`ctx.router.navigate()`
Modal öffnen	—	`ctx.viewer.dialog()`

#Plugin-Entwicklungs-Cheatsheet

#Plugin-Verzeichnisstruktur

#Client: Was tun → Wie schreiben

#Server: Was tun → Wie schreiben

#FlowModel-Schnellübersicht

#Übersetzungsmethoden-Schnellübersicht

#Schnellübersicht häufiger API-Aufrufe

#Verwandte Links