Evenements

Introduction

Les evenements sont puissants lorsque vous avez besoin de gerer une logique apres qu'un evenement se produit dans votre application. Le systeme d'evenements de Nylo vous permet de creer, dispatcher et ecouter des evenements depuis n'importe ou dans votre application, facilitant ainsi la construction d'applications Flutter reactives et pilotees par evenements.

Comprendre les evenements

La programmation evenementielle est un paradigme ou le flux de votre application est determine par des evenements tels que les actions de l'utilisateur, les sorties de capteurs ou les messages d'autres programmes ou threads. Cette approche aide a decoupler les differentes parties de votre application, rendant votre code plus maintenable et plus facile a raisonner.

Exemples courants d'evenements

Voici quelques evenements typiques que votre application pourrait utiliser :

• Inscription d'un utilisateur terminee
• Connexion/deconnexion de l'utilisateur
• Produit ajoute au panier
• Paiement traite avec succes
• Synchronisation des donnees terminee
• Notification push recue

Creer un evenement

Vous pouvez creer un nouvel evenement en utilisant soit le CLI du framework Nylo, soit Metro :

metro make:event PaymentSuccessfulEvent

Apres avoir execute la commande, un nouveau fichier d'evenement sera cree dans le repertoire app/events/.

Structure d'un evenement

Voici la structure d'un fichier d'evenement nouvellement cree (par exemple, 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
  }
}

Dispatcher des evenements

Les evenements peuvent etre dispatches depuis n'importe ou dans votre application en utilisant la methode helper event.

Dispatch basique d'un evenement

Pour dispatcher un evenement sans donnees :

event<PaymentSuccessfulEvent>();

Dispatcher avec des donnees

Pour passer des donnees avec votre evenement :

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

Diffuser des evenements

Par defaut, les evenements Nylo ne sont geres que par les ecouteurs definis dans la classe d'evenement. Pour diffuser un evenement (le rendre disponible aux ecouteurs externes), utilisez le parametre broadcast :

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

Ecouter les evenements

Nylo fournit plusieurs facons d'ecouter et de reagir aux evenements.

Utiliser le helper listenOn

Le helper listenOn peut etre utilise n'importe ou dans votre application pour ecouter les evenements diffuses :

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

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

Utiliser le helper listen

Le helper listen est disponible dans les classes NyPage et NyState. Il gere automatiquement les abonnements, se desabonnant lorsque le widget est dispose :

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
}

Se desabonner des evenements

Lorsque vous utilisez listenOn, vous devez vous desabonner manuellement pour eviter les fuites de memoire :

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

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

Le helper listen gere automatiquement le desabonnement lorsque le widget est dispose.

Travailler avec les ecouteurs

Les ecouteurs sont des classes qui reagissent aux evenements. Chaque evenement peut avoir plusieurs ecouteurs pour gerer differents aspects de l'evenement.

Ajouter plusieurs ecouteurs

Vous pouvez ajouter plusieurs ecouteurs a votre evenement en mettant a jour la propriete listeners :

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

Implementer la logique d'un ecouteur

Chaque ecouteur doit implementer la methode handle pour traiter l'evenement :

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,
      }
    );
  }
}

Diffusion globale d'evenements

Si vous souhaitez que tous les evenements soient diffuses automatiquement sans specifier broadcast: true a chaque fois, vous pouvez activer la diffusion globale.

Activer la diffusion globale

Editez votre fichier app/providers/app_provider.dart et ajoutez la methode broadcastEvents() a votre instance Nylo :

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

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

Avec la diffusion globale activee, vous pouvez dispatcher et ecouter les evenements de maniere plus concise :

// 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
});