Composition dans Aurelia.io: Création d'un constructeur de rapports

Cet article explore la composition visuelle d'Aurelia, une fonctionnalité puissante pour construire des UIS complexes en utilisant des composants réutilisables. Au lieu des démos triviales habituelles, nous allons construire une application de générateur de rapport présentant cette capacité. Une démo en direct et un code source sont disponibles (liens omis pour la concision).

Concepts clés:

• Composition visuelle: Aurelia permet de construire des vues complexes en combinant des sous-vues plus petites et réutilisables. Cela diffère de la composition traditionnelle basée sur le routage.
• compose Élément: Cet élément personnalisé simplifie les paires de modèle de vue d'intégration dans une vue parent, augmentant la modularité et la réutilisabilité.
• eventAggregator: permet une communication inter-composants transparente sans couplage serré, facilitant l'interaction entre des éléments comme la boîte à outils et le rapport.
• Bibliothèques externes: Intégrer facilement des bibliothèques comme Sortable.js pour les fonctionnalités de glisser-déposer, présentant la flexibilité d'Aurelia.
• Animations: La bibliothèque d'animation d'Aurelia et les animations CSS fournissent des commentaires visuels, améliorant l'expérience utilisateur.
• Système de plugin: prend en charge le code personnalisé réutilisable et nettoie les bases de code en séparant les fonctionnalités partagées en packages.

Comprendre la composition visuelle:

La composition visuelle, en substance, combine des vues plus petites en plus grandes et plus complexes. Cela diffère entre Homogène Composition (répétitif des éléments du même type) et Composition hétérogène (combinant des vues de différents types). Le routage traditionnel gère souvent cela, mais Aurelia fournit une approche plus flexible et de première classe via l'élément compose, favorisant la modularité et la réutilisabilité.

Types de composition visuelle

en utilisant l'élément compose d'Aurelia:

L'élément compose simplifie l'intégration d'une paire de modèles de vue (vue et modèle de vue, souvent appelée "page"). Vous spécifiez le nom de fichier du modèle de vue à l'aide de l'attribut view-model. Les données peuvent être transmises à l'aide de l'attribut model. Le modèle de vue peut éventuellement définir une méthode activate pour recevoir ces données, renvoyant potentiellement une promesse d'opérations asynchrones. De plus, vous pouvez spécifier une vue alternative à l'aide de l'attribut view, en choisissant dynamiquement la vue en fonction des propriétés du modèle de vue parent ou même d'une fonction dans le modèle de vue d'enfant (getViewStrategy).

Configuration du projet:

Le constructeur de rapports est basé sur l'application Aurelia Skeleton Navigation (lien github omis). Le routeur est supprimé; L'application utilise une seule vue complexe composée de sous-vues. Les instructions d'installation sont disponibles dans la lecture du projet.

Structure de la vue de rapport:

app.html agit comme le récipient principal, composant les vues toolbox et report. toolbox.html Affiche les widgets et boutons disponibles pour l'impression ou la compensation du rapport. Chaque widget (par exemple, logo.html, textblock.html) est un composant autonome. La vue report.html affiche des widgets qui y sont ajoutés, en utilisant à la fois une composition homogène et hétérogène. La fonction removeWidget dans le rapport de vue du rapport de vue de la vue en supprimant les widgets.

Communication inter-composants:

Le EventAggregator facilite le couplage lâche entre les composants. Le bouton clearReport de la boîte à outils publie un événement «ClearReport», auquel le modèle de vue du rapport abonne et utilise pour effacer ses widgets.

bibliothèques et plugins externes:

sortable.js (installé via jspm) gère les fonctionnalités de glisser-déposer. Aurelia Animator CSS (installé via JSPM) fournit des animations. Le système de plugin permet de créer des composants et des fonctionnalités personnalisés réutilisables.

Animations:

Les classes au-stagger et au-animate dans les vues, combinées avec des animations CSS, créent une rétroaction visuelle pendant la composition et la suppression du widget.

Implémentation de glisser-déposer:

sortable.js est utilisé dans les modèles de vue toolbox et report. Le gestionnaire onAdd dans le modèle de vue report Affichage ajoute de nouveaux widgets au rapport, gérer l'entrée de texte pour TextBlocks.

Conclusion:

La composition visuelle d'Aurelia, combinée avec le système

et le système de plugin, fournit une approche puissante et flexible pour construire des UIS complexes et modulaires. L'exemple de générateur de rapport le démontre efficacement. EventAggregator

(Section des questions fréquemment posées omises pour la concision, car elle est largement redondante compte tenu de l'explication détaillée ci-dessus.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!