Overview

This sample demnostrates how to implement event-driven communication using HarmonyOS Emitter and how to create custom dialogs for displaying advertisement information.

Preview

The application showcases an e-commerce flow with the following functionality:

Usage Instructions

1. An advertisement dialog appears on app launch and can be dismissed by tapping.
2. Selecting a product from the list navigates to the product detail page.
3. From the detail page, users can return to the product list, acces the shopping cart, add items to cart, or proceed to checkout which increments the purchase count.
4. The shopping cart allows removing items via the minus button and clearing the purchase count to zero.

Project Structure

entry/src/main/ets/
├── components
│   ├── BottomNavigation.ets     // Bottom navigation bar
│   ├── Choice.ets               // Product variant selection
│   ├── EventsDialog.ets        // Advertisement dialog
│   ├── Information.ets          // Detail information page
│   └── Valueation.ets           // Pricing section
├── mock
│   ├── DetailData.ets           // Product detail mock data
│   └── ProductsData.ets         // Product list mock data
├── model
│   ├── DetailMode.ets           // Product detail data structure
│   └── GoodsModel.ets           // Product data structure
├── pages
│   ├── Detail.ets               // Product detail page
│   ├── Index.ets                // Home page
│   └── ShopCart.ets             // Shopping cart page
├── shoppingCart
│   ├── Cart.ets                 // Shopping cart component
│   └── FavorGoodlist.ets        // Recommended products list
└── util
    └── Logger.ets               // Logging utility

feature/emitter/src/main/ets/
├── common
│   └── EmitterConst.ts          // Event constants
└── components
    └── feature
        └── CustomEmitter.ets    // Wrapped Emitter utility class

Implementation Details

Event Subscription in CustomEmitter

The CustomEmitter component encapsulates the event publishing and subscription logic using HarmonyOS Emitter API.

Advertisement Dialog Display

Uses emitter.once(eventId, callback) for one-time subscription. The eventId is of type number. The CustomDialogController subscribes to the dialog display event and automaticallly unsubscribes after the dialog is shown.

Advertisement Dialog Dismissal

Uses emitter.once(eventId, callback) with eventId of type string. The dialog close event triggers one-time subscription, automatically unsubscribing after the dialog closes.

Adding Items to Cart

Uses emitter.on(eventId, callback) for persistent subscription. The eventId is of type number. When a product is added, the event is published and the shopping cart list updates accordingly.

Removing Items from Cart

Uses emitter.on(eventId, callback) for persistent subscription. The eventId is of type string. Product removal events update the shopping cart list in real-time.

Purchase Count Management

Uses emitter.getListenerCount() to retrieve the number of subscribers for purchase events. When entering the shopping cart page, the count is displayed. Clearing purchases unsubscribes all listeners, resulting in a count of zero.

Permissions

No special permissions required.

Dependencies

No external dependencies required.

Constraints

• Sample supports standard system operation on RK3568 devices only.
• Stage model with API version 11 (SDK 4.1.3.5).
• Requires DevEco Studio 3.1.1 Release (Build Version: 3.1.0.501) or later for compilation.

Download

git init
git config core.sparsecheckout true
echo code/BasicFeature/Notification/CustomEmitter/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master