Events

Einleitung

Events sind leistungsstark, wenn Sie Logik verarbeiten müssen, nachdem etwas in Ihrer Anwendung passiert ist. Das Event-System von Nylo ermöglicht es Ihnen, Events von überall in Ihrer Anwendung zu erstellen, auszulösen und auf sie zu lauschen, was den Aufbau reaktiver, eventgesteuerter Flutter-Anwendungen erleichtert.

Events verstehen

Eventgesteuerte Programmierung ist ein Paradigma, bei dem der Ablauf Ihrer Anwendung durch Events wie Benutzeraktionen, Sensorausgaben oder Nachrichten von anderen Programmen oder Threads bestimmt wird. Dieser Ansatz hilft, verschiedene Teile Ihrer Anwendung zu entkoppeln, wodurch Ihr Code wartbarer und leichter nachvollziehbar wird.

Gängige Event-Beispiele

Hier sind einige typische Events, die Ihre Anwendung verwenden könnte:

• Benutzerregistrierung abgeschlossen
• Benutzer angemeldet/abgemeldet
• Produkt zum Warenkorb hinzugefügt
• Zahlung erfolgreich verarbeitet
• Datensynchronisierung abgeschlossen
• Push-Benachrichtigung empfangen

Ein Event erstellen

Sie können ein neues Event entweder mit der Nylo-Framework-CLI oder Metro erstellen:

metro make:event PaymentSuccessfulEvent

Nach Ausführung des Befehls wird eine neue Event-Datei im Verzeichnis app/events/ erstellt.

Event-Struktur

Hier ist die Struktur einer neu erstellten Event-Datei (z.B. app/events/payment_successful_event.dart):

import 'package:nylo_framework/nylo_framework.dart';

class PaymentSuccessfulEvent implements NyEvent {
  final listeners = {
    DefaultListener: DefaultListener(),
  };
}

class DefaultListener extends NyListener {
  handle(dynamic event) async {
    // Handle the payload from event
  }
}

Events auslösen

Events können von überall in Ihrer Anwendung mit der event-Hilfsmethode ausgelöst werden.

Einfaches Event auslösen

Um ein Event ohne Daten auszulösen:

event<PaymentSuccessfulEvent>();

Auslösen mit Daten

Um Daten zusammen mit Ihrem Event zu übergeben:

event<PaymentSuccessfulEvent>(data: {
  'user': user,
  'amount': amount,
  'transactionId': 'txn_123456'
});

Events broadcasten

Standardmäßig werden Nylo-Events nur von den in der Event-Klasse definierten Listenern verarbeitet. Um ein Event zu broadcasten (es für externe Listener verfügbar zu machen), verwenden Sie den Parameter broadcast:

event<PaymentSuccessfulEvent>(
  data: {'user': user, 'amount': amount},
  broadcast: true
);

Auf Events lauschen

Nylo bietet mehrere Möglichkeiten, auf Events zu lauschen und darauf zu reagieren.

Den listenOn-Helfer verwenden

Der listenOn-Helfer kann überall in Ihrer Anwendung verwendet werden, um auf gebroadcastete Events zu lauschen:

NyEventSubscription subscription = listenOn<PaymentSuccessfulEvent>((data) {
  // Access event data
  final user = data['user'];
  final amount = data['amount'];

  // Handle the event
  showSuccessMessage("Payment of $amount received");
});

Den listen-Helfer verwenden

Der listen-Helfer ist in NyPage- und NyState-Klassen verfügbar. Er verwaltet Abonnements automatisch und meldet sich ab, wenn das Widget disposed wird:

class _CheckoutPageState extends NyPage<CheckoutPage> {
  @override
  get init => () {
    listen<PaymentSuccessfulEvent>((data) {
      // Handle payment success
      routeTo(OrderConfirmationPage.path);
    });

    listen<PaymentFailedEvent>((data) {
      // Handle payment failure
      displayErrorMessage(data['error']);
    });
  };

  // Rest of your page implementation
}

Events abbestellen

Bei Verwendung von listenOn müssen Sie sich manuell abmelden, um Speicherlecks zu vermeiden:

// Store the subscription
final subscription = listenOn<PaymentSuccessfulEvent>((data) {
  // Handle event
});

// Later, when no longer needed
subscription.cancel();

Der listen-Helfer behandelt die Abmeldung automatisch, wenn das Widget disposed wird.

Mit Listenern arbeiten

Listener sind Klassen, die auf Events reagieren. Jedes Event kann mehrere Listener haben, um verschiedene Aspekte des Events zu verarbeiten.

Mehrere Listener hinzufügen

Sie können mehrere Listener zu Ihrem Event hinzufügen, indem Sie die listeners-Eigenschaft aktualisieren:

class PaymentSuccessfulEvent implements NyEvent {
  final listeners = {
    NotificationListener: NotificationListener(),
    AnalyticsListener: AnalyticsListener(),
    OrderProcessingListener: OrderProcessingListener(),
  };
}

Listener-Logik implementieren

Jeder Listener sollte die handle-Methode implementieren, um das Event zu verarbeiten:

class NotificationListener extends NyListener {
  handle(dynamic event) async {
    // Send notification to user
    final user = event['user'];
    await NotificationService.sendNotification(
      userId: user.id,
      title: "Payment Successful",
      body: "Your payment of ${event['amount']} was processed successfully."
    );
  }
}

class AnalyticsListener extends NyListener {
  handle(dynamic event) async {
    // Log analytics event
    await AnalyticsService.logEvent(
      "payment_successful",
      parameters: {
        'amount': event['amount'],
        'userId': event['user'].id,
      }
    );
  }
}

Globales Event-Broadcasting

Wenn Sie möchten, dass alle Events automatisch gebroadcastet werden, ohne jedes Mal broadcast: true angeben zu müssen, können Sie globales Broadcasting aktivieren.

Globales Broadcasting aktivieren

Bearbeiten Sie Ihre Datei app/providers/app_provider.dart und fügen Sie die Methode broadcastEvents() zu Ihrer Nylo-Instanz hinzu:

class AppProvider implements NyProvider {
  @override
  boot(Nylo nylo) async {
    // Other configuration

    // Enable broadcasting for all events
    nylo.broadcastEvents();
  }
}

Mit aktiviertem globalem Broadcasting können Sie Events kompakter auslösen und auf sie lauschen:

// Dispatch event (no need for broadcast: true)
event<PaymentSuccessfulEvent>(data: {
  'user': user,
  'amount': amount,
});

// Listen for the event anywhere
listen<PaymentSuccessfulEvent>((data) {
  // Handle event data
});