Composition in Aurelia.io: Creating a Report Builder

This article explores Aurelia's visual composition, a powerful feature for building complex UIs using reusable components. Instead of the usual trivial demos, we'll build a report builder application showcasing this capability. A live demo and source code are available (links omitted for brevity).

Key Concepts:

• Visual Composition: Aurelia allows building complex views by combining smaller, reusable sub-views. This differs from traditional routing-based composition.
• compose Element: This custom element simplifies embedding view-model pairs into a parent view, boosting modularity and reusability.
• EventAggregator: Enables seamless inter-component communication without tight coupling, facilitating interaction between elements like the toolbox and report.
• External Libraries: Easily integrate libraries like Sortable.js for drag-and-drop functionality, showcasing Aurelia's flexibility.
• Animations: Aurelia's animation library and CSS animations provide visual feedback, enhancing user experience.
• Plugin System: Supports reusable custom code and clean codebases by separating shared functionalities into packages.

Understanding Visual Composition:

Visual composition, in essence, combines smaller views into larger, more complex ones. This differs between homogeneous composition (repeating items of the same type) and heterogeneous composition (combining views of different types). Traditional routing often handles this, but Aurelia provides a more flexible, first-class approach via the compose element, promoting modularity and reusability.

Visual Composition Types

Using Aurelia's compose Element:

The compose element simplifies embedding a view-model pair (view and view-model, often referred to as a "page"). You specify the view-model's file name using the view-model attribute. Data can be passed using the model attribute. The view-model can optionally define an activate method to receive this data, potentially returning a Promise for asynchronous operations. Furthermore, you can specify an alternative view using the view attribute, dynamically choosing the view based on the parent view-model's properties or even a function within the child view-model (getViewStrategy).

Project Setup:

The report builder is based on the Aurelia Skeleton Navigation App (GitHub link omitted). The router is removed; the app uses a single complex view composed of sub-views. Installation instructions are available in the project's README.

Report View Structure:

app.html acts as the main container, composing the toolbox and report views. toolbox.html displays available widgets and buttons for printing or clearing the report. Each widget (e.g., logo.html, textblock.html) is a self-contained component. The report.html view displays widgets added to it, using both homogeneous and heterogeneous composition. The removeWidget function in the report view-model handles removing widgets.

Inter-Component Communication:

The EventAggregator facilitates loose coupling between components. The clearReport button in the toolbox publishes a 'clearReport' event, which the report view-model subscribes to and uses to clear its widgets.

External Libraries and Plugins:

Sortable.js (installed via JSPM) handles drag-and-drop functionality. Aurelia Animator CSS (installed via jspm) provides animations. The plugin system allows for creating reusable custom components and features.

Animations:

The au-stagger and au-animate classes in the views, combined with CSS animations, create visual feedback during composition and widget removal.

Drag & Drop Implementation:

Sortable.js is used in both the toolbox and report view-models. The onAdd handler in the report view-model adds new widgets to the report, handling text input for textblocks.

Conclusion:

Aurelia's visual composition, combined with the EventAggregator and plugin system, provides a powerful and flexible approach to building complex, modular UIs. The report builder example demonstrates this effectively.

(Frequently Asked Questions section omitted for brevity, as it's largely redundant given the detailed explanation above.)

The above is the detailed content of Composition in Aurelia.io: Creating a Report Builder. For more information, please follow other related articles on the PHP Chinese website!