Komposition in Aurelia.io: Erstellen eines Berichts Builder

In diesem Artikel wird die visuelle Komposition von Aurelia untersucht, ein leistungsstarkes Merkmal für den Aufbau komplexer Benutzeroberflächen unter Verwendung wiederverwendbarer Komponenten. Anstelle der üblichen trivialen Demos erstellen wir eine Report Builder -Anwendung, die diese Fähigkeit zeigt. Eine Live -Demo und ein Quellcode sind verfügbar (Links für Kürze weggelassen).

Schlüsselkonzepte:

• Visuelle Zusammensetzung: Aurelia ermöglicht das Erstellen komplexer Ansichten, indem kleinere, wiederverwendbare Unteransichten kombiniert werden. Dies unterscheidet sich von der traditionellen Routing-basierten Zusammensetzung.
• compose Element: Dieses benutzerdefinierte Element vereinfacht das Einbetten von Ansichtsmodellpaaren in eine übergeordnete Ansicht, steigern Sie die Modularität und Wiederverwendbarkeit.
• EventAggregator: Ermöglicht eine nahtlose Kommunikation zwischen den Komponenten ohne enge Kopplung, was die Interaktion zwischen Elementen wie Toolbox und Bericht erleichtert.
• externe Bibliotheken: Integrieren Bibliotheken wie sortable.js für Drag-and-Drop-Funktionen, die die Flexibilität von Aurelia präsentieren.
• Animationen: Aurelia's Animationsbibliothek und CSS -Animationen bieten visuelles Feedback, Verbesserung der Benutzererfahrung.
• Plugin -System: unterstützt wiederverwendbare benutzerdefinierte Code und saubere Codebasen, indem gemeinsam genutzte Funktionen in Pakete getrennt werden.

Visuelle Komposition verstehen:

visuelle Komposition kombiniert im Wesentlichen kleinere Ansichten zu größeren, komplexeren. Dies unterscheidet sich zwischen homogener Zusammensetzung (Wiederholungselemente desselben Typs) und heterogenes -Komposition (Kombination von Ansichten verschiedener Typen). Traditionelles Routing behandelt dies oft, aber Aurelia bietet einen flexibleren, erstklassigeren Ansatz über das compose Element, das Modularität und Wiederverwendbarkeit fördert.

visuelle Zusammensetzungstypen

Verwenden von Aurelia compose Element:

Das Element compose vereinfacht das Einbetten eines Ansichtsmodellpaars (Ansicht und Ansichtsmodell, häufig als "Seite" bezeichnet). Sie geben den Dateinamen des Ansichtsmodels mithilfe des Attributs view-model an. Daten können mit dem Attribut model übergeben werden. Das View-Model kann optional eine activate -Methode zum Empfangen dieser Daten definieren und möglicherweise ein Versprechen für asynchrone Operationen zurückgeben. Darüber hinaus können Sie eine alternative Ansicht mithilfe des Attributs view angeben und die Ansicht dynamisch basierend auf den Eigenschaften des übergeordneten Ansichtsmodells oder sogar eine Funktion innerhalb des untergeordneten Ansichtsmodells (getViewStrategy) auswählen.

Projekt -Setup:

Der Berichtsbauer basiert auf der Aurelia Skeleton Navigation App (GitHub Link weggelassen). Der Router wird entfernt; Die App verwendet eine einzelne komplexe Ansicht, die aus Unteransichten besteht. Installationsanweisungen finden Sie im Readme des Projekts.

Berichtsstruktur der Berichtsansicht:

app.html fungiert als Hauptbehälter und komponiert die Ansichten toolbox und report. toolbox.html Zeigt verfügbare Widgets und Schaltflächen zum Drucken oder Löschen des Berichts an. Jedes Widget (z. B. logo.html, textblock.html) ist eine in sich geschlossene Komponente. Die report.html -Ansicht zeigt Widgets an, die sowohl homogene als auch heterogene Zusammensetzung verwendet werden. Die removeWidget -Funktion in der Berichtsansicht verarbeitet das Entfernen von Widgets.

Kommunikation zwischen Komponenten:

Die EventAggregator erleichtert die lose Kopplung zwischen den Komponenten. Die Schaltfläche clearReport in der Toolbox veröffentlicht ein "ClearReport" -Event, das das Berichtsansichtsmodell anschließt und um seine Widgets zu löschen.

externe Bibliotheken und Plugins:

sortable.js (über JSPM installiert) übernimmt Drag & Drop-Funktionalität. Aurelia Animator CSS (über JSPM installiert) bietet Animationen. Das Plugin -System ermöglicht das Erstellen von wiederverwendbaren benutzerdefinierten Komponenten und Funktionen.

Animationen:

Die Klassen au-stagger und au-animate in den Ansichten, kombiniert mit CSS -Animationen, erstellen Sie visuelles Feedback während der Komposition und Widgetentfernung.

Drag & Drop -Implementierung:

sortable.js wird sowohl im toolbox als auch in report View-Modelle verwendet. Der onAdd -Handler im report View-Model fügt dem Bericht neue Widgets hinzu, die Texteingaben für Textblocks verarbeiten.

Schlussfolgerung:

Die visuelle Zusammensetzung von

Aurelia, kombiniert mit dem EventAggregator und dem Plugin -System, bietet einen leistungsstarken und flexiblen Ansatz zum Aufbau einer komplexen, modularen Benutzeroberfläche. Das Beispiel für Berichtsbauer zeigt dies effektiv.

(häufig gestellte Fragen der Kürze weggelassen, da er angesichts der detaillierten Erklärung oben weitgehend überflüssig ist.)

Das obige ist der detaillierte Inhalt vonKomposition in Aurelia.io: Erstellen eines Berichts Builder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!