Erstellen eines Projekts für die Erweiterbarkeit der Benutzeroberfläche

Öffnen Sie ein Terminal.

Verschieben Sie im Terminal in den Ordner, in dem Sie die Projekte ablegen.

Durchgang:

aio app init my-fusion-extension --standalone-app

• my-fusion-extension ist der Ordner-/App-Name. Sie können diesen Namen auswählen, jedoch Kleinbuchstaben, Bindestriche und keine Leerzeichen verwenden.
• --standalone-app weist die CLI an, ein -Anwendungsskelett zu erstellen anstatt Sie zu bitten, eine Produktvorlage auszuwählen. Dies ist der Schlüssel, um die AEM-Vorlage (oder eine andere) zu vermeiden.

Wenn Sie dazu aufgefordert werden wählen Sie Ihre Organisation (wenn Sie zu mehreren gehören).

Wenn Sie dazu aufgefordert werden, wählen Neues Projekt erstellen und akzeptieren Sie den vorgeschlagenen Namen oder wählen Sie ein vorhandenes leeres Projekt aus.

Der Befehl richtet die Arbeitsbereiche Staging und Produktion automatisch ein.

Der Befehl generiert auch Dateien im my-fusion-extension Ordner und führt npm install aus.

Fahren Sie Projekterstellung bestätigen fort.

Wechseln Sie im Terminal in den erstellten Ordner:

cd my-fusion-extension

Es sollte eine ähnliche Struktur angezeigt werden (einige Dateien ausgelassen):

my-fusion-extension/
|--- app.config.yaml   // main configuration (you will edit this)
|---  package.json   //dependencies and scripts
|---  src/    // your source code
|---  web-src/  or  src/.../web-src/  // front-end files (HTML/JS)

Die beiden Dateien, die Sie am meisten interessieren, sind:

• app.config.yaml: Die zentrale Konfiguration. Später werden Sie hier einen extensions: Abschnitt hinzufügen, der Ihre App mit einem Fusion-Erweiterungspunkt verbindet.
• package.json: Listet die Bibliotheken auf, die Ihre App verwendet. Sie fügen hier die Gastbibliothek der Erweiterbarkeit der Adobe-Benutzeroberfläche hinzu.

Fahren Sie mit Hinzufügen erforderlicher Bibliotheken fort.

Führen Sie im Terminal Folgendes aus:

npm install @adobe/uix-guest @adobe/react-spectrum

(Bedingt) Wenn das generierte Projekt React nicht bereits enthält, installieren Sie es auch:

npm install react react-dom react-router-dom

Fahren Sie mit Bestätigen der Projekt-Builds fort.

Führen Sie im Terminal Folgendes aus:

aio app build

Wenn dies fehlerfrei abgeschlossen wird, sind Ihre Tools und Ihr Projekt korrekt konfiguriert. Sie sind bereit, das Projekt mit Fusion zu verbinden.

Fahren Sie fort Konfigurieren des Projekts für Fusion.

Erstellen Sie Ihre Dateien, sodass das Projekt wie folgt aussieht:

my-fusion-extension/
|-- app.config.yaml
|-- src/
       |-- fusion-nav-organization-1/          // one folder per extension point
          |-- ext.config.yaml
          |-- web-src/
             |-- src/
                |-- components/
                   |-- App.js
                   |-- ExtensionRegistration.js
                   |-- DashboardWidget.js
                   |-- Constants.js

Es wird empfohlen, den Ordner nach dem Erweiterungspunkt (fusion-nav-organization-1) zu benennen. Der genaue Name liegt bei Ihnen, er muss jedoch mit dem übereinstimmen, auf den Sie in app.config.yaml verweisen.

Fahren Sie fort​ den Erweiterungspunkt in app.config.yaml zu deklarieren.

Öffnen Sie app.config.yaml und aktualisieren Sie seinen Inhalt wie folgt:

extensions:
  fusion/nav-organization/1:
    $include: src/fusion-nav-organization-1/ext.config.yaml

Dieser Inhalt beschreibt Folgendes:

• extensions:: Diese App implementiert einen oder mehrere Erweiterungspunkte.
• fusion/nav-organization/1: Der Fusion-Steckplatz, an den Sie sich anschließen. Der Name muss genau übereinstimmen einschließlich Version 1.
• $include:: Dies verweist auf eine zweite Konfigurationsdatei (die im nächsten Schritt erstellt wurde), die den Inhalt dieser Erweiterung beschreibt. Wenn Sie sie in einer separaten Datei speichern, bleibt app.config.yaml sauber und Sie können später weitere Erweiterungspunkte hinzufügen.

extensions:
        fusion/nav-organization/1:
            $include: src/fusion-nav-organization-1/ext.config.yaml
        fusion/nav-team/1:
            $include: src/fusion-nav-team-1/ext.config.yaml

1. Fahren Sie fortBeschreiben Sie die Erweiterung in ext.config.yaml

src/fusion-nav-organization-1/ext.config.yaml erstellen mit:

operations:
   view:
    - type: web
      impl: index.html
web: web-src
hooks:
  pre-app-build: node node_modules/@adobe/uix-guest/scripts/generate-metadata.js
   pre-app-run: node node_modules/@adobe/uix-guest/scripts/generate-metadata.js

Dieser Inhalt beschreibt Folgendes:

• operations.view: Deklariert, dass Ihre Erweiterung eine Ansicht (eine sichtbare Benutzeroberfläche) bereitstellt, die von index.html bereitgestellt wird. Dadurch wird Ihre Erweiterung zu einem Bildschirm, anstatt nur im Hintergrund ausgeführt zu werden.
• web: web-src: Der Ordner, der Ihre Frontend-Dateien enthält. App Builder erstellt alles hier unter und hostet es im Content Delivery Network (CDN) von Adobe.
• hooks: Kleine Befehle, die automatisch zur Build-/Laufzeit ausgeführt werden. Das generate-metadata.js-Skript wird mit @adobe/uix-guest ausgeliefert und erzeugt eine app-metadata.json-Datei, die Ihr Registrierungs-Code benötigt (siehe Schritt 4). Sie schreiben dieses Skript nicht, Sie verweisen nur darauf.

Fahren Sie fort Festlegen einer stabilen Erweiterungs-ID.

src/fusion-nav-organization-1/web-src/src/components/Constants.js erstellen:

module.exports = {
  extensionId: 'my-fusion-extension'
};

Verwenden Sie denselben Wert überall dort, wo Ihr Code auf die Erweiterungs-ID verweist.

Fahren Sie fort Widget registrieren.

src/fusion-nav-organization-1/web-src/src/components/ExtensionRegistration.js erstellen.
Der wichtige Teil ist der register(...):

import { register } from "@adobe/uix-guest";
import metadata from "../../../../app-metadata.json";
import { extensionId } from "./Constants";

async function init() {
  await register({
    id: extensionId,
    metadata,
    methods: {
      dashboard: {
        getWidget() {
          return {
            id: extensionId,
            title: "My Fusion tool",        // shown on the Fusion nav button
            description: "What this tool does",
            url: "/index.html#/my-widget",  // route to your visible UI
            hideWidgetHeader: false          // false = Fusion shows the title
          };
        }
      }
    }
   });
}

init().catch(console.error);

Wichtigste Punkte:

• title ist die Bezeichnung, die Fusion auf die Navigationsschaltfläche setzt. Wenn hideWidgetHeader false ist, zeigt Fusion den Titel auch als Kopfzeile über der Benutzeroberfläche an.
• url ist der Weg zu Ihrer sichtbaren Benutzeroberfläche innerhalb derselben App. Hier finden Sie eine Hash-Route (#/my-widget), die von Ihrem Frontend-Router (auf der nächsten Seite eingerichtet) verarbeitet wird. Sie muss auf die Komponente aufgelöst werden, die den Bildschirm rendert.
• metadata stammt aus app-metadata.json, das der generate-metadata-Hook zum Zeitpunkt der Erstellung für Sie erstellt. Importieren Sie sie wie gezeigt.
• Der dashboard.getWidget Methodenname ist der vereinbarte Vertrag mit Fusion-Aufrufen zur Ermittlung Ihres Widgets. Behalten Sie den dashboard Namespace und den getWidget bei.