DEV Community: flfljh

Modal Dialogs in HarmonyOS: Usage and Interaction Modes

flfljh — Mon, 21 Jul 2025 05:43:32 +0000

Modal Dialogs in HarmonyOS: Usage and Interaction Modes

1. Overview

Modal dialogs in HarmonyOS restrict user interaction to the dialog itself until dismissed. ArkUI provides multiple modal components tailored for different scenarios:

AlertDialog: For alerts, confirmations, or prompts (supports titles, messages, up to 3 buttons, inputs, icons, checkboxes, etc.).
ActionSheet: For presenting lists of actionable items (e.g., menu choices).
CustomDialog: For fully customizable UIs.
Popup, Menu, ContextMenu: For lightweight contextual interactions.

2. Global Modal Dialogs

AlertDialog

Example with title, message, buttons, and optional features:

AlertDialog.show({
  title: 'Important Notice',
  subtitle: 'Subtitle Placeholder',
  message: 'This is a sample alert message.',
  autoCancel: true,
  alignment: DialogAlignment.Bottom,
  gridCount: 4,
  offset: { dx: 0, dy: -20 },
  primaryButton: {
    value: 'Cancel',
    action: () => console.info('Cancel button clicked')
  },
  secondaryButton: {
    enabled: true,
    defaultFocus: true,
    style: DialogButtonStyle.HIGHLIGHT,
    value: 'Confirm',
    action: () => console.info('Confirm button clicked')
  }
});

ActionSheet

Example for selecting an option from a list:

ActionSheet.show({
  title: 'Select a Fruit',
  subtitle: 'Choose your favorite',
  message: 'Available options:',
  autoCancel: true,
  confirm: {
    value: 'Confirm Selection',
    action: () => console.log('Selection confirmed')
  },
  alignment: DialogAlignment.Bottom,
  offset: { dx: 0, dy: -10 },
  sheets: [
    { title: 'Apples', action: () => console.log('Apples selected') },
    { title: 'Bananas', action: () => console.log('Bananas selected') },
    { title: 'Pears', action: () => console.log('Pears selected') }
  ]
});

CustomDialog

Example of a text input dialog:

// Define custom dialog content
@Builder
function CustomInputDialog() {
  Column() {
    TextInput({ placeholder: 'Enter new text' });
    Row() {
      Button('Save').onClick(() => {/* Save logic */});
      Button('Cancel').onClick(() => {/* Close dialog */});
    }
  }
}

// Show dialog
PromptAction.openCustomDialog({
  builder: CustomInputDialog,
  title: 'Edit Text',
  primaryButton: { value: 'Save' },
  secondaryButton: { value: 'Cancel' }
});

3. Popup (Tooltip-like Behavior)

Example of a popup triggered by a button click:

Button('Show Popup')
  .onClick(() => this.showPopup = !this.showPopup)
  .bindPopup(this.showPopup, {
    message: 'This is a popup message!',
    placementOnTop: true,
    showInSubWindow: false,
    primaryButton: {
      value: 'OK',
      action: () => {
        this.showPopup = false;
        console.info('OK clicked');
      }
    },
    secondaryButton: {
      value: 'Cancel',
      action: () => {
        this.showPopup = false;
        console.info('Cancel clicked');
      }
    },
    onStateChange: (event) => {
      console.info(`Popup visibility: ${event.isVisible}`);
      if (!event.isVisible) this.showPopup = false;
    }
  })
  .position({ x: 100, y: 150 });

4. Menu and ContextMenu

bindMenu (Standard Menu)

Attach a menu to a component (no preview image):

@Builder
function MyMenu() {
  Menu() {
    MenuItem({ content: 'Option 1' });
    MenuItem({ content: 'Option 2' });
    MenuItem({ content: 'Option 3' });
  }
}

Row() {
  Column() {
    Text('Click to show menu')
      .fontSize(50)
      .fontWeight(FontWeight.Bold);
  }
  .bindMenu(MyMenu)
  .width('100%');
}

bindContextMenu (Context Menu with Preview)

For long-press actions (e.g., desktop shortcuts):

Column() {
  Text('Long press for context menu')
    .width('100%')
    .margin({ top: 5 });
}
.bindContextMenu(() => MenuBuilder.create(), ResponseType.LongPress, {
  placement: Placement.Left,
  preview: MenuPreviewMode.IMAGE
});

5. Subwindow Support

For 2-in-1 devices, use showInSubWindow: true to display dialogs outside the main window:

CustomDialog.show({
  title: 'Subwindow Dialog',
  message: 'This dialog appears in a subwindow!',
  showInSubWindow: true
});

// Or via ContextMenu
.bindContextMenu(..., { showInSubWindow: true });

Summary

HarmonyOS offers flexible modal components for diverse use cases:

AlertDialog: Critical alerts/confirmations.
ActionSheet: List-based selections.
CustomDialog: Tailored UIs.
Popup/Menu: Contextual interactions.
Subwindow Support: Extend dialogs beyond app boundaries.

For advanced scenarios, combine with state management or custom animations.

HarmonyOS Next: Maintaining and Extending a Custom Rich Text Component

flfljh — Sat, 28 Jun 2025 01:33:07 +0000

HarmonyOS Next: Maintaining and Extending a Custom Rich Text Component

Our business currently uses HarmonyOS Next’s built-in HPRichText component. However, we encountered limitations such as missing max-width/max-height support and text rendering issues after upgrading from v2 to v3. To address these challenges, we decided to fork and customize the HPRichText component.

This customization is based on the v2.2.4 release of the community-maintained HPRichText.

Key Enhancements

1. Support for `maxWidth`, `maxHeight`, `minWidth`, `minHeight` Attributes

1-1. Add Constraint Sizing to `fancyImage`

.constraintSize({
  maxWidth: $$.maxWidth,
  maxHeight: $$.maxHeight,
  minWidth: $$.minWidth,
  minHeight: $$.minHeight,
})

1-2. Extend `ShapeAttr` Interface

export interface ShapeAttr {
  // Existing properties...
  maxWidth?: string | number;
  maxHeight?: string | number;
  minWidth?: string | number;
  minHeight?: string | number;
}

1-3. Update HTML Parser

this.assignArtUIStyleObject(node, {
  // Existing properties...
  maxWidth: node?.artUIStyleObject?.maxWidth,
  maxHeight: node?.artUIStyleObject?.maxHeight,
  minWidth: node?.artUIStyleObject?.minWidth,
  minHeight: node?.artUIStyleObject?.minHeight,
});

2. Auto-Set Original Width for Images on Load Completion

2-1. Rename `HPRichText` to `MyRichText`

2-2. Extract `Image` Logic into `ImageNode` Component

import type { FancyImageOptions } from './index';
import type { ArtStyleObject, Attr } from '../../common/types/htmlParser';
import { LogUtil } from '../../../../common/utils/LogUtil';

@Extend(Image)
function fancyImage($$: FancyImageOptions = {}, attrs: Attr = {}) {
  .width($$.width)
  .height($$.height)
  .constraintSize({
    maxWidth: $$.maxWidth,
    maxHeight: $$.maxHeight,
    minWidth: $$.minWidth,
    minHeight: $$.minHeight,
  })
  .margin($$.margin)
  .padding($$.padding)
  .alt(attrs.alt)
  .opacity($$.opacity)
  .objectFit($$.objectFit);
}

@Component
export struct ImageNode {
  @Prop src: string;
  @Prop artUIStyleObject: ArtStyleObject;
  @Prop attr: Attr;
  onClickEvent?: (event: ClickEvent) => void;

  build() {
    Image(this.src)
      .fancyImage(this.artUIStyleObject, this.attr)
      .onClick(event => {
        if (this.onClickEvent) this.onClickEvent(event);
      })
      .onComplete(event => {
        if (event && this.artUIStyleObject) {
          // Auto-set original width if not defined
          if (!this.artUIStyleObject.width) {
            this.artUIStyleObject.width = event.width;
            LogUtil.info("Auto-set original width:", this.artUIStyleObject.width);
          }
        }
      });
  }
}

Key Fixes and Improvements

Compatibility: Resolved text rendering regressions introduced in HPRichText v3.
Flexibility: Added explicit sizing constraints for images and text containers.
Performance: Optimized image loading by preserving original dimensions only when needed.

HarmonyOS Next: Implementing Photo Selection and Upload Functionality

flfljh — Sat, 28 Jun 2025 01:28:29 +0000

HarmonyOS Next: Implementing Photo Selection and Upload Functionality

Implementation Journey

Initially, we used the PickerUtil.selectPhoto method from the HarmonyUtils Library to select photos from the gallery, which returns a fileUri. However, this library lacks an upload API. To address this, we researched Huawei’s official documentation and forums and discovered the HarmonyOS File Upload API, which allows direct file uploads.

Code Implementation

1. Upload Function Wrapper

import { request, BusinessError } from '@kit.BasicServicesKit';
import { LogUtil } from '../common/utils/LogUtil';
import { PreferencesUtil } from '../common/utils/PreferencesUtil';
import UserCacheManager from '../common/utils/UserCacheManager';
import CommonHttp from './CommonHttp';
import Config from './Config';

// Normalize request URL
function requestSrc(val: string): string {
  return val.toLowerCase().startsWith('http') ? val : `${Config.api_hosts}${val}`;
}

// Convert params to FormData format
function reqParamsToData(params: Record<string, any> = {}): Array<request.RequestData> {
  const data: Array<request.RequestData> = [];
  Object.keys(params).forEach(key => {
    if (params[key]) {
      data.push({ name: key, value: params[key].toString() });
    }
  });
  LogUtil.info(`reqParamsToData: ${JSON.stringify(data)}`);
  return data;
}

// Upload API interface
export interface RequestUploadResp {
  uploadTask: request.UploadTask;
  err?: Error;
}

export interface RequestUploadConfig {
  files: Array<request.File>;
}

// Global upload function
export const globalRequestUpload = (
  url: string,
  params: Record<string, any> = {},
  config: RequestUploadConfig
): Promise<RequestUploadResp> => {
  // Fetch user context data
  const cateId = UserCacheManager.getSubjectCatId() || PreferencesUtil.getStringSync('_subjectCatId');
  const subjectId = UserCacheManager.getSubjectId() || PreferencesUtil.getStringSync('_subjectId');
  const goodAppType = UserCacheManager.getSubAppType() || PreferencesUtil.getStringSync('_subAppType');

  // Merge default params
  params.cate_id = params.cate_id || cateId;
  params.subject_id = params.subject_id || subjectId;
  params.good_app_type = params.good_app_type || goodAppType;

  // Construct request URL
  const urls = CommonHttp.requestMd5Params({});
  const reqUrl = requestSrc(`${url}${CommonHttp.formatGetUri(urls)}`);

  // Prepare headers and data
  const token = UserCacheManager.getLoginToken() || PreferencesUtil.getStringSync('access_token');
  const uploadConfig: request.UploadConfig = {
    url: reqUrl,
    header: {
      'Content-Type': 'multipart/form-data',
      Authorization: token
    },
    method: 'POST',
    files: config.files,
    data: reqParamsToData(params)
  };

  LogUtil.info(`uploadConfig: ${JSON.stringify(uploadConfig)}`);

  return new Promise((resolve, reject) => {
    try {
      request.uploadFile(getContext(), uploadConfig)
        .then((task: request.UploadTask) => resolve({ uploadTask: task }))
        .catch((err: BusinessError) => {
          LogUtil.error(`Upload failed. Code: ${err.code}, Message: ${err.message}`);
          reject({ err });
        });
    } catch (err) {
      LogUtil.error(`Upload error: ${JSON.stringify(err)}`);
      reject({ err });
    }
  });
};

2. Photo Selection and URI Conversion

// Convert image URI to sandbox path (required for upload)
static async toInternalCacheUrl(selImg: string, fileType: string = 'jpg'): Promise<string> {
  if (!selImg) throw new Error('Invalid image URI');

  // Copy file to internal cache
  const cacheDir = getContext().cacheDir;
  const fileName = `${Date.now()}.${fileType}`;
  const originImg = await fileIo.open(selImg); // Open original file
  const source = image.createImageSource(originImg.fd); // Convert to ImageSource
  const packer = image.createImagePacker(); // Initialize packer
  const arrayBuffer = await packer.packing(source, { quality: 10, format: 'image/jpeg' }); // Compress

  // Write to cache
  const newFile = fileIo.openSync(
    `${cacheDir}/${fileName}`,
    fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE
  );
  fileIo.writeSync(newFile.fd, arrayBuffer); // Save compressed file

  return `internal://cache/${fileName}`; // Return sandbox URI
}

Key Notes

Error Handling:

Uploading directly via fileUri returns a 404 error.
Use internal://cache/ prefixed URIs (e.g., from toInternalCacheUrl).

Workflow:

   selectPhoto → toInternalCacheUrl → globalRequestUpload

Dependencies:

Requires @pura/harmony-utils for photo selection.
Uses Huawei’s request.uploadFile API for file uploads.

HarmonyOS Next: Developing Custom Features Based on @xwf/image_preview (V1.0.1)

flfljh — Sat, 28 Jun 2025 01:27:50 +0000

HarmonyOS Next: Developing Custom Features Based on @xwf/image_preview (V1.0.1)

Library Link: https://ohpm.openharmony.cn/#/cn/detail/@xwf%2Fimage_preview/v/1.0.1

Background

We leverage the @xwf/image_preview library for image preview with gesture zooming. However, we need to display previews in a modal popup instead of navigating to a new page. Attempts to use the ImageItemView component failed due to its dependency on @Consumer, and we required single-click background dismissal (not grayscale mode switching). Thus, we forked and modified this version for our needs.

Using `MyImageItemView` Component

Rename Components

ImageItemView → MyImageItemView
ImagePreview → MyImagePreview

Remove @Consumer Code:
Delete dependency injection code from MyImageItemView.
Add onSingleClickBg Event:
Implement a callback for background clicks.

Full Code for `MyImagePreview`

import { CommonConstants } from '../constants/CommonConstants';
import { ImagePreviewOption, ImageType } from '../model/ImagePreviewOption';
import { MyImageItemView } from './MyImageItemView';

@Component
export struct MyImagePreview {
  // Image data
  option: ImagePreviewOption = { images: [], index: 0 };
  // Indicator style
  indicator: DotIndicator | DigitIndicator | boolean = new DotIndicator()
    .color(Color.Gray)
    .selectedColor(Color.Blue);
  // Page index change listener
  onChange: (index: number) => void = () => {};
  onSingleClickBg?: () => void;

  private DISPLAY_COUNT: number = 1;
  private MIN_SCALE: number = 0.75;
  @State private opacityList: number[] = [];
  @State private scaleList: number[] = [];
  @State private translateList: number[] = [];
  @State private zIndexList: number[] = [];
  @State private bgc: Color = Color.Black;

  aboutToAppear(): void {
    for (let i = 0; i < this.option.images.length; i++) {
      this.opacityList.push(1.0);
      this.scaleList.push(1.0);
      this.translateList.push(0.0);
      this.zIndexList.push(0);
    }
  }

  build() {
    Stack() {
      Swiper() {
        ForEach(this.option.images, (image: ImageType, index: number) => {
          MyImageItemView({ url: image, onSingleClickBg: this.onSingleClickBg })
            .width(CommonConstants.THOUSANDTH_1000)
            .height(CommonConstants.THOUSANDTH_1000)
            .opacity(this.opacityList[index])
            .scale({ x: this.scaleList[index], y: this.scaleList[index] })
            .translate({ x: this.translateList[index] })
            .zIndex(this.zIndexList[index]);
        });
      }
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
      .width(CommonConstants.THOUSANDTH_1000)
      .height(CommonConstants.THOUSANDTH_1000)
      .loop(false)
      .indicator(
        this.option.images.length > 1
          ? this.indicator
          : false
      )
      .displayCount(this.DISPLAY_COUNT, true)
      .index(this.option.index)
      .customContentTransition({
        // Timeout for removing pages from the render tree
        timeout: 1000,
        // Custom transition animation
        transition: (proxy: SwiperContentTransitionProxy) => {
          if (
            proxy.position <= proxy.index % this.DISPLAY_COUNT ||
            proxy.position >= this.DISPLAY_COUNT + proxy.index % this.DISPLAY_COUNT
          ) {
            // Reset properties for pages outside the viewport
            this.opacityList[proxy.index] = 1.0;
            this.scaleList[proxy.index] = 1.0;
            this.translateList[proxy.index] = 0.0;
            this.zIndexList[proxy.index] = 0;
          } else {
            // Animate adjacent pages into view
            if (proxy.index % this.DISPLAY_COUNT === 0) {
              this.opacityList[proxy.index] = 1 - proxy.position / this.DISPLAY_COUNT;
              this.scaleList[proxy.index] = this.MIN_SCALE +
                (1 - this.MIN_SCALE) * (1 - proxy.position / this.DISPLAY_COUNT);
              this.translateList[proxy.index] = -proxy.position * proxy.mainAxisLength +
                (1 - this.scaleList[proxy.index]) * proxy.mainAxisLength / 2.0;
            } else {
              this.opacityList[proxy.index] = 1 - (proxy.position - 1) / this.DISPLAY_COUNT;
              this.scaleList[proxy.index] = this.MIN_SCALE +
                (1 - this.MIN_SCALE) * (1 - (proxy.position - 1) / this.DISPLAY_COUNT);
              this.translateList[proxy.index] = -(proxy.position - 1) * proxy.mainAxisLength -
                (1 - this.scaleList[proxy.index]) * proxy.mainAxisLength / 2.0;
            }
            this.zIndexList[proxy.index] = -1;
          }
        },
      })
      .onChange((index) => {
        this.onChange(index);
      });
      // Additional event listeners can be added here
    }
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    .backgroundColor(this.bgc)
    .width(CommonConstants.THOUSANDTH_1000)
    .height(CommonConstants.THOUSANDTH_1000);
  }
}

Key Notes

Customization Focus:
- Modified gesture handling and animation logic.
- Removed grayscale mode and implemented single-click dismissal.
Technical Details:
- Uses Swiper for image carousel management.
- Implements custom transition animations via customContentTransition.
Dependencies:
- Requires @xwf/image_preview V1.0.1 (modified locally).

Let me know if you need further refinements or additional context!

HarmonyOS Next: Adding Push Notifications to Atomic Services

flfljh — Sat, 28 Jun 2025 01:27:23 +0000

HarmonyOS Next: Adding Push Notifications to Atomic Services

Official Documentation

Atomic Service Push: https://developer.huawei.com/consumer/cn/doc/atomic-guides-V5/atomic-push-development-V5
Subscription Template Setup: https://developer.huawei.com/consumer/cn/doc/atomic-guides-V5/push-as-service-noti-V5

Key Differences from App Push

Atomic services require additional configuration in AppGallery Connect:

Subscription Templates: Define notification templates via the official guide.

Code Implementation

1. `PushMsgUtils` Class

import { UIAbility } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';
import { serviceNotification } from '@kit.PushKit';
import { AppUtil } from './AppUtil';
import { LogUtil } from './LogUtil';
import { Want } from '@kit.AbilityKit';
import { AdUtils } from './AdUtils';
import { GlobalContext } from './GlobalContext';

interface MessageReceivedParams {
  want?: Want;
  method: "onCreate" | "onNewWant" | "enterDnTabBarPage";
}

export default class PushMsgUtils {
  /**
   * Request subscription to notification templates.
   * Replace `entityIds` with your actual template IDs.
   */
  static async requestSubscribeNotification() {
    try {
      LogUtil.info("Running requestSubscribeNotification...");
      const entityIds: string[] = ['13B6000E24008000', '13B90C82D3802680'];
      const type: serviceNotification.SubscribeNotificationType =
        serviceNotification.SubscribeNotificationType.SUBSCRIBE_WITH_HUAWEI_ID;

      const res: serviceNotification.RequestResult = await serviceNotification.requestSubscribeNotification(
        AppUtil.getContext(),
        entityIds,
        type
      );
      LogUtil.info(`Subscription succeeded: ${JSON.stringify(res.entityResult)}`);
    } catch (err) {
      const e: BusinessError = err as BusinessError;
      LogUtil.error(`Subscription failed: ${e.code} ${e.message}`);
    }
  }

  /**
   * Handle incoming push notifications.
   * @param params - Message context (`onCreate`, `onNewWant`, or `enterDnTabBarPage`).
   */
  static messageReceived(params: MessageReceivedParams) {
    if (params.want?.uri) {
      LogUtil.info(`Message received (${params.method}):`, JSON.stringify(params.want));

      // Extract target page from message data
      const routePage = params.want.parameters?.['page'] as string;

      if (params.method === "onNewWant") {
        // App is running (foreground/background)
        if (routePage) AdUtils.adClickJump(routePage);
        else LogUtil.error("Missing 'page' parameter for navigation");
      } else if (params.method === "onCreate") {
        // App is launching (cold start)
        if (routePage) 
          GlobalContext.getContext().setObject("messageReceived", routePage);
      }
    }

    if (params.method === "enterDnTabBarPage") {
      // Navigate after app initialization
      const routePage = GlobalContext.getContext().getObject("messageReceived") as string;
      if (routePage) {
        GlobalContext.getContext().deleteObject("messageReceived");
        AdUtils.adClickJump(routePage);
      }
    }
  }
}

Workflow Summary

Request Subscription: Call PushMsgUtils.requestSubscribeNotification() on app launch.

Handle Messages

Use onCreate() to handle cold starts.
Use onNewWant() to handle foreground/background notifications.
Use enterDnTabBarPage() to navigate after initialization.

Key Notes

Template ID: Replace entityIds in requestSubscribeNotification() with your actual subscription template IDs from AppGallery Connect.
Navigation: The routePage parameter in messages determines the target UI page.
Context Management: Use GlobalContext to persist navigation data across lifecycle events.

Let me know if you need further refinements!

HarmonyOS Flutter: Simulator Development and Debugging Steps

flfljh — Sat, 28 Jun 2025 01:26:53 +0000

HarmonyOS Flutter: Simulator Development and Debugging Steps

Development computer must be an M-series chip (ARM architecture) Mac computer
Currently, Flutter HarmonyOS development does not support X86 architecture simulators and requires an ARM architecture simulator.

Create a Project

After setting up the development environment, create a project using:

flutter create --platforms ohos ohos_app

Add HarmonyOS Support to Existing Projects

flutter create --platforms ohos .

Signing Configuration

Open the ohos directory (HarmonyOS project) in DevEco.
Navigate to File → Project Structure..., select Signing Configs, check Automatically generate signature, then click Sign In with your Huawei account.

> hvigor WARN: The current module 'ohos' has dependency which is not installed at its oh-package.json5.
> hvigor Finished :entry:init... after 1 ms
> hvigor Finished ::init... after 1 ms

Process finished with exit code 0

Create a Simulator

1.Open Device Manager in DevEco (dropdown next to the run button).

image.png

2.Click + New Emulator in the bottom-right corner.

If images are not downloaded, click the download button first.
After downloading, proceed to create the emulator.

image.png

3.Start the newly created emulator.

Run the Flutter Project

Ensure the simulator device (e.g., 127.0.0.1:5555(ohos-arm64)) appears in VSCode’s device list.
Run the Flutter project as usual.

Troubleshooting

1. App Crashes on Startup

X86 Simulators: Delete FloatingActionButton in main.dart.
Impeller Rendering Issues: Create ohos/entry/src/main/resources/rawfile/buildinfo.json5 with:

{
   "string": [
      {
         "name": "enable_impeller",
         "value": "true"
      }
   ]
}

2. Simulator Not Visible in VSCode

Restart DevEco or VSCode.
Ensure the ohos directory is open in DevEco.

3. Incorrect Flutter Version with FVM

Configure FVM in VSCode’s settings.json:

{
  "dart.flutterSdkPath": ".fvm/versions/custom_3.22.0"
}

{
  "flutter": "custom_3.22.0"
}

Verify Flutter version:

Flutter 3.22.0-ohos • channel oh-3.22.0 • https://gitee.com/harmonycommando_flutter/flutter.git
Framework • revision 85630b0330 (13 天前) • 2024-10-26 02:39:47 +0000
Engine • revision f6344b75dc
Tools • Dart 3.4.0 • DevTools 2.34.1

3.3 Disable global Flutter configuration in ~/.zshrc or ~/.bash_profile.

#export PATH="/Users/zacksleo/flutter/bin:$PATH"

Implementing Video Compression in HarmonyOS Flutter with ohos_videocompressor

flfljh — Sat, 28 Jun 2025 01:26:06 +0000

Implementing Video Compression in HarmonyOS Flutter with ohos_videocompressor

Introduction

ohos_videocompressor is a high-performance video compression library for HarmonyOS. It provides robust video compression capabilities optimized for HarmonyOS applications.

Key Features:

High-efficiency video compression
Support for multiple video formats
Quality level customization

Installation Methods

Method 1: Clone with Submodules

```bash
git clone https://gitee.com/openharmony-sig/ohos_videocompressor.git --recurse-submodules
```

Method 2: Manual Download

Download the main repository
Download third_party_bounds_checking_function
Place the downloaded files in videoCompressor/src/cpp/boundscheck

Install via OHPM

ohpm install @ohos/videocompressor

Usage Guide

Basic Compression Example

```javascript
import { VideoCompressor, CompressQuality, CompressorResponseCode } from '@ohos/videocompressor';

// Initialize compressor
const videoCompressor = new VideoCompressor();

// Execute compression
videoCompressor.compressVideo(getContext(), this.selectFilePath, CompressQuality.COMPRESS_QUALITY_HIGH)
  .then((data) => {
    if (data.code == CompressorResponseCode.SUCCESS) {
      console.log("Compression successful. Output path: " + data.outputPath);
    } else {
      console.error("Compression failed. Error: " + data.message);
    }
  })
  .catch((err) => {
    console.error("Compression error: " + err.message);
  });
```

Supported Specifications

Input Formats

MP4
MPEG-TS

Video Codecs

Decoding: AVC (H.264), HEVC (H.265)
Encoding: AVC (H.264), HEVC (H.265)

Audio Codecs

Decoding: AAC
Encoding: AAC

API Reference

`compressVideo(context: Context, inputFilePath: string, quality: CompressQuality): Promise<CompressionResult>`

Parameters:

| Parameter      | Type             | Description                          |
|----------------|------------------|--------------------------------------|
| `context`      | `Context`        | Application context                  |
| `inputFilePath`| `string`         | Path to source video file            |
| `quality`      | `CompressQuality`| Compression quality level            |

Quality Options:

```javascript
enum CompressQuality {
  COMPRESS_QUALITY_LOW,    // Fastest compression, lowest quality
  COMPRESS_QUALITY_MEDIUM, // Balanced speed and quality
  COMPRESS_QUALITY_HIGH    // Best quality, slower compression
}
```

**Return Object**:

```javascript
interface CompressionResult {
  code: CompressorResponseCode; // SUCCESS or error code
  message: string;              // Status message
  outputPath?: string;          // Path to compressed file (on success)
}

enum CompressorResponseCode {
  SUCCESS,                     // Operation successful
  ERR_INVALID_INPUT,           // Invalid input file
  ERR_UNSUPPORTED_FORMAT,      // Unsupported file format
  ERR_COMPRESSION_FAILED,      // General compression failure
  ERR_INSUFFICIENT_STORAGE,    // Storage space issue
  ERR_PERMISSION_DENIED        // Permission error
}
```

Best Practices

Check File Permissions: Ensure read/write access to source and destination paths
Handle Storage Space: Verify sufficient storage before compression
Quality Selection:
- Use COMPRESS_QUALITY_LOW for quick social media uploads
- Use COMPRESS_QUALITY_HIGH for archival purposes
Error Handling: Always implement .catch() for promise rejection handling

Performance Notes

Compression time varies by device capability and video length
HEVC encoding provides better compression but requires more processing power
Typical compression ratios:
- Low quality: 60-70% size reduction
- Medium quality: 40-50% size reduction
- High quality: 20-30% size reduction

This implementation provides a streamlined solution for adding video compression capabilities to HarmonyOS Flutter applications, balancing performance and quality while maintaining broad format compatibility.

HarmonyOS Flutter Performance Optimization: Slide Response Latency

flfljh — Sat, 28 Jun 2025 01:25:39 +0000

HarmonyOS Flutter Performance Optimization: Slide Response Latency

This article analyzes trace diagnostics for slide response latency in Flutter applications under touch interaction scenarios.

Finger Press (Initial Touch)

The finger press event establishes the foundation for all subsequent interactions, capturing:

Initial touch coordinates
Targeted UI controls
Interaction context

Event Flow:

mmi_service thread handles multimodal input events
Flutter application listens and responds to touch events

Trace Characteristics:

In mmi_service thread: "service report touchId:[id], type: down" immediately after "package touchEvent"
In application main thread: "DispatchTouchEvent" with coordinates and type: 0 (down event)

These traces correspond directly across threads:

Finger Slide (Movement)

Slide events follow a controlled delivery mechanism different from initial presses.

Key Differences:

Not immediate: Governed by vsync-app signal
Initial position: Matches press coordinates (first move event)
Type identifier: type: move (numerical value: 2)

Event Sequence:

mmi_service thread detects movement
VSyncGenerator produces synchronization signal
DVSync-app processes the signal
Application main thread receives event

Trace Flow:

Slide Threshold (TouchSlop)

The system-defined minimum recognition distance for slide gestures:

Default value: 18 units
Customizable: Developers can adjust per control

Calculation Method:

Capture touch coordinates from main thread traces
Compute coordinate offsets between events
Verify if offset exceeds threshold:

   const distance = Math.sqrt(
     Math.abs(x2 - x1)**2 + 
     Math.abs(y2 - y1)**2
   );
   const isSlide = distance > TOUCH_SLOP;

First Frame Rendering

When slide distance exceeds threshold:

Flutter triggers UI update operations
Actual rendering waits for next VSync signal
One-frame delay occurs before visual update

Trace Pattern:

First Frame Completion

Rendering completion identification:

Development tracing: RSHardwareThread in RS process
Automated testing: dpu_gfx_primary thread (hardware signal proxy)

Completion Trace:

Measuring Slide Response Latency

Total response duration spans:

```
Start: mmi_service "package touchEvent" (finger press)
End: RSHardwareThread/dpu_gfx_primary (first slide frame rendered)
```

Optimization Focus Areas:

Touch event propagation time
VSync signal generation latency
Frame scheduling efficiency
Render service processing time
Hardware composition duration

This analysis methodology enables precise identification of performance bottlenecks in Flutter slide interactions on HarmonyOS, providing actionable insights for latency reduction.

HarmonyOS ArkWeb Basics - Cross-Origin Requests

flfljh — Sat, 28 Jun 2025 01:25:16 +0000

HarmonyOS ArkWeb Basics - Cross-Origin Requests

ArkWeb kernel restricts cross-origin access for file and resource protocols by default due to security considerations. This means that if a Web component attempts to load resources from different domains using file or resource protocols, the request will be blocked, preventing resource loading.

For example, suppose your Web component is deployed on Domain A and you want to load local resources from Domain B, such as images or script files. Due to file and resource protocol restrictions, even if your Web component can access Domain B's URL, it cannot load local resources on Domain B.

This cross-origin issue may cause:

Limited functionality: Web components may fail to load necessary resources, resulting in restricted functionality.
Degraded user experience: Users may encounter page loading failures or non-functional features.
Security risks: Improper handling of cross-origin issues may lead to security vulnerabilities like Cross-Site Scripting (XSS).

Solutions

To address cross-origin issues in ArkWeb framework, consider these solutions:

1. Use HTTP/HTTPS protocols instead of file/resource protocols

This is the most direct and effective solution. Modify resource URLs from file/resource protocols to HTTP/HTTPS protocols, ensuring the resource server supports cross-origin access.

Example:

Change file://example.com/path/to/image.png to

http://example.com/path/to/image.png or

https://example.com/path/to/image.png

2. Use custom domains

Create a custom domain for your local resources and ensure it resolves to your local resources. This avoids triggering ArkWeb kernel's cross-origin restrictions for file/resource protocols.

Example:

Point custom domain example.com to your local resource path and access via:

http://example.com/path/to/image.png

3. Use onInterceptRequest for local resource interception

Use ArkWeb's onInterceptRequest interface to intercept local resource requests and provide custom responses, bypassing cross-origin restrictions.

Example:

Intercept file/resource protocol requests and return custom content responses.

Core Network Security Concepts

Beyond solving cross-origin issues, understand these fundamental security concepts:

1. CORS Policy

Cross-Origin Resource Sharing (CORS) controls resource sharing between different domains. Configure CORS policies to allow/block cross-origin requests from specific domains.

Example:

Set CORS policy on resource server to allow requests from Domain A while blocking others.

2. Same-Origin Policy

A browser security mechanism preventing malicious websites from stealing data from other sites. Requires identical protocol, domain, and port for resource access.

3. HTTPS Protocol

Secure version of HTTP using SSL/TLS encryption to protect data transmission security. Essential for sensitive data like personal information and passwords.

Code Example

This example demonstrates using onInterceptRequest to intercept local resource requests:

```javascript
import { webview } from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  responseResource: webview.WebResourceResponse = new webview.WebResourceResponse();

  build() {
    Column() {
      Web({ src: $rawfile("index.html"), controller: this.controller })
        .onInterceptRequest((event) => {
          if (event && event.request.getRequestUrl().startsWith("file://")) {
            // Intercept file protocol requests
            this.responseResource.setResponseData($rawfile("local.png"));
            this.responseResource.setResponseEncoding('utf-8');
            this.responseResource.setResponseMimeType('image/png');
            this.responseResource.setResponseCode(200);
            this.responseResource.setReasonMessage('OK');
            return this.responseResource;
          }
          return null;
        });
    }
  }
}
```

Summary

The ArkWeb framework provides powerful web application development capabilities but requires attention to network security, especially regarding cross-origin requests. By understanding common cross-origin issues and their solutions, along with fundamental network security knowledge, you can develop more secure and reliable web applications that protect user privacy and data security.

Frame Rendering Tracing for HarmonyOS Flutter Performance Optimization

flfljh — Sat, 28 Jun 2025 01:24:35 +0000

Frame Rendering Tracing for HarmonyOS Flutter Performance Optimization

Introduction

When analyzing Flutter application performance, developers need to capture and examine trace data using specialized tools. This document introduces a targeted approach for tracing individual frame rendering, particularly useful for diagnosing frame rate drops or frame loss issues.

Analysis Tools

Recommended performance analysis tools:

DevEco Studio Profiler Comprehensive performance analysis suite for HarmonyOS applications
SmartPerf Open-source performance monitoring solution

Usage Guide:

Refer to DevEco Profiler Tool Introduction for detailed instructions.

Frame Rendering Process

The frame rendering workflow consists of three key stages:

Understanding this workflow and identifying matching markers across stages is crucial for accurate frame tracing.

First Identifier: frame_number

The frame_number serves as the primary identifier linking the UI and rasterization threads:

Key observations:

The frame_number appears in both 1.ui and 1.raster threads
This identifier connects UI processing with rasterization
If missing, indicates non-Flutter rendering requiring further investigation

Second Identifier: ReuseBuffer/acquire buffer

The ReuseBuffer identifier connects rasterization with the render service:

Raster Thread (1.raster)

During flutter::SkCanvas::Flush:

Requests buffer memory from RS process
Stores rendered frame content
Visible in "binder transaction" trace

Render Service Thread (render_service)

During RSMainThread::DoComposition:

Retrieves frame content from buffer memory
Matching acquire buffer sequence ID confirms connection

Tracing Methodology

Identify frame_number:
- Locate matching values in UI and raster threads
- Confirm Flutter rendering context
Track Buffer Transfer:
- Match ReuseBuffer ID in raster thread
- Verify corresponding acquire buffer sequence in render service
- Confirm frame content transfer
Continuous Thread Tracing:
- Render service → RSUniRenderThread → RSHardwareThread
- Assumes sequential processing within the same frame

Practical Application

This tracing approach enables:

Precise identification of rendering bottlenecks
Isolation of frame-specific performance issues
Differentiation between Flutter and native rendering problems
Targeted optimization of critical rendering paths

Note: While the first two stages have clear identifiers, subsequent stages (RSUniRenderThread to RSHardwareThread) currently rely on continuous thread tracing assumptions due to lack of explicit markers.

Debugging Dart Code in HarmonyOS Flutter Applications

flfljh — Sat, 28 Jun 2025 01:23:40 +0000

Debugging Dart Code in HarmonyOS Flutter Applications

Debugging Approaches

ETS Code: Use DevEco Studio for debugging
Dart Code: Use VS Code or Android Studio for debugging

Important: When debugging HarmonyOS-adapted Flutter, include the local engine parameter:

--local-engine=/path/to/engine/build

VS Code Configuration

Create .vscode/launch.json in your project root

Add the following configurations:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Flutter (Debug)",
      "request": "launch",
      "type": "dart",
      "args": [
        "--local-engine=/Users/your_user/engine_build/src/out/ohos_debug_unopt_arm64"
      ]
    },
    {
      "name": "Flutter (Profile)",
      "request": "launch",
      "type": "dart",
      "flutterMode": "profile",
      "args": [
        "--local-engine=/Users/your_user/engine_build/src/out/ohos_profile_arm64"
      ]
    },
    {
      "name": "Flutter (Release)",
      "request": "launch",
      "type": "dart",
      "flutterMode": "release",
      "args": [
        "--local-engine=/Users/your_user/engine_build/src/out/ohos_release_arm64"
      ]
    }
  ]
}

Replace /Users/your_user/... with your actual engine build path
Start debugging using VS Code's debug panel

Android Studio Configuration

Open your Flutter project in Android Studio
Go to Run > Edit Configurations...
Create a new Flutter configuration

Add the engine parameter in "Additional arguments":

--local-engine=/Users/your_user/engine_build/src/out/ohos_debug_unopt_arm64

Apply changes and start debugging

Key Notes

Engine Paths:
- Debug: ohos_debug_unopt_arm64
- Profile: ohos_profile_arm64
- Release: ohos_release_arm64
Path Customization:
- Replace /Users/your_user/... with your actual build path
- Ensure the path points to a valid engine build
Debugging Workflow:
- Set breakpoints in Dart files
- Inspect variables during execution
- Use the debug console for runtime evaluation
- Analyze call stacks for error tracing

This setup enables full debugging capabilities for Dart code in HarmonyOS Flutter applications across different build modes.

Implementing an Exam Timer in HarmonyOS Next

flfljh — Fri, 27 Jun 2025 01:24:38 +0000

Implementing an Exam Timer in HarmonyOS Next

```typescript
@Entry
@Component
struct QuickTestMainPage {
  @State paperAllTime: number = 0; // Total exam duration (exam mode)
  @State remainTimeUi: string = "00:00"; // Formatted time display
  @State remainTime: number = 0; // Actual time value (countdown or stopwatch)

  private doExamTimer: number | null = null; // Timer reference

  aboutToAppear(): void { 
    this.timerInit(); // Initialize timer on component appearance
  }

  aboutToDisappear(): void {
    // Clean up timer when component disappears
    if (this.doExamTimer) {
      clearTimeout(this.doExamTimer);
      this.doExamTimer = null;
    }
  }

  // Initialize timer based on mode
  timerInit() {
    if (this.isTest) {
      // Exam mode: countdown from total time
      this.remainTime = this.paperAllTime - this.makeTime;
    } else {
      // Practice mode: stopwatch timing
      this.remainTime = this.makeTime;
    }
    this.updateTimeDisplay();
    this.startTimer();
  }

  // Update UI with formatted time
  updateTimeDisplay() {
    this.remainTimeUi = Utils.formatSeconds(this.remainTime);
  }

  // Core timer logic
  startTimer() {
    this.doExamTimer = setTimeout(() => {
      if (this.isTest) {
        // Exam countdown mode
        this.remainTime--;
        this.makeTime = this.paperAllTime - this.remainTime;

        // Stop timer when time expires
        if (this.remainTime <= 0) {
          this.handleTimeExpired();
          return;
        }
      } else {
        // Practice stopwatch mode
        this.remainTime++;
        this.makeTime = this.remainTime;
      }

      this.updateTimeDisplay();
      this.startTimer(); // Recursive call for continuous timing
    }, 1000);
  }

  // Handle exam time expiration
  handleTimeExpired() {
    // Implement exam submission logic here
    console.log("Exam time has expired!");
  }

  build() {
    Column() {
      // Timer icon
      CustomIcon({
        iconType: CustomIconType.icon_timer,
        iconSize: 19,
        iconColor: StyleRes.getStyleColor(StyleColor.textBoldColor, this.lightMode)
      })

      // Time display
      Text(this.remainTimeUi)
        .fontColor(StyleRes.getStyleColor(StyleColor.texSubColor, this.lightMode))
        .fontSize(11)
    }
  }
}
```

Key Implementation Details

Dual Mode Timer:
- Exam Mode: Countdown timer from total exam duration
- Practice Mode: Stopwatch tracking elapsed time
Lifecycle Management:
- Initializes timer in aboutToAppear()
- Cleans up resources in aboutToDisappear()
- Prevents memory leaks with proper timeout handling
Time Formatting:
- Uses Utils.formatSeconds() to convert seconds to "MM:SS" format
- Automatically updates UI display each second
Time Expiration Handling:
- Stops countdown when time reaches zero
- Triggers special handling for exam submission

Utility Function (formatSeconds)

```typescript
class Utils {
  static formatSeconds(seconds: number): string {
    const mins = Math.floor(seconds / 60).toString().padStart(2, '0');
    const secs = (seconds % 60).toString().padStart(2, '0');
    return `${mins}:${secs}`;
  }
}
```

Usage Notes

Exam Mode Setup:

   this.isTest = true;
   this.paperAllTime = 3600; // 60 minutes in seconds

Practice Mode Setup:

   this.isTest = false;
   this.makeTime = 0; // Start from zero

This implementation provides a robust exam timing solution for HarmonyOS Next applications, featuring both countdown and stopwatch functionality with proper resource management and UI updates.

DEV Community: flfljh

Modal Dialogs in HarmonyOS: Usage and Interaction Modes

Modal Dialogs in HarmonyOS: Usage and Interaction Modes

1. Overview

2. Global Modal Dialogs

AlertDialog

ActionSheet

CustomDialog

3. Popup (Tooltip-like Behavior)

4. Menu and ContextMenu

bindMenu (Standard Menu)

bindContextMenu (Context Menu with Preview)

5. Subwindow Support

Summary

HarmonyOS Next: Maintaining and Extending a Custom Rich Text Component

HarmonyOS Next: Maintaining and Extending a Custom Rich Text Component

Key Enhancements

1. Support for maxWidth, maxHeight, minWidth, minHeight Attributes

1-1. Add Constraint Sizing to fancyImage

1-2. Extend ShapeAttr Interface

1-3. Update HTML Parser

2. Auto-Set Original Width for Images on Load Completion

2-1. Rename HPRichText to MyRichText

2-2. Extract Image Logic into ImageNode Component

Key Fixes and Improvements

HarmonyOS Next: Implementing Photo Selection and Upload Functionality

HarmonyOS Next: Implementing Photo Selection and Upload Functionality

Implementation Journey

Code Implementation

1. Upload Function Wrapper

2. Photo Selection and URI Conversion

Key Notes

HarmonyOS Next: Developing Custom Features Based on @xwf/image_preview (V1.0.1)

HarmonyOS Next: Developing Custom Features Based on @xwf/image_preview (V1.0.1)

Background

Using MyImageItemView Component

Full Code for MyImagePreview

Key Notes

HarmonyOS Next: Adding Push Notifications to Atomic Services

HarmonyOS Next: Adding Push Notifications to Atomic Services

Official Documentation

Key Differences from App Push

Code Implementation

1. PushMsgUtils Class

Workflow Summary

Key Notes

HarmonyOS Flutter: Simulator Development and Debugging Steps

HarmonyOS Flutter: Simulator Development and Debugging Steps

Add HarmonyOS Support to Existing Projects

1. App Crashes on Startup

2. Simulator Not Visible in VSCode

3. Incorrect Flutter Version with FVM

Implementing Video Compression in HarmonyOS Flutter with ohos_videocompressor

Implementing Video Compression in HarmonyOS Flutter with ohos_videocompressor

Introduction

Installation Methods

Method 1: Clone with Submodules

Method 2: Manual Download

Install via OHPM

Usage Guide

Basic Compression Example

Supported Specifications

Input Formats

Video Codecs

Audio Codecs

API Reference

compressVideo(context: Context, inputFilePath: string, quality: CompressQuality): Promise<CompressionResult>

Best Practices

Performance Notes

HarmonyOS Flutter Performance Optimization: Slide Response Latency

HarmonyOS Flutter Performance Optimization: Slide Response Latency

Finger Press (Initial Touch)

Event Flow:

Trace Characteristics:

Finger Slide (Movement)

Key Differences:

Event Sequence:

Trace Flow:

Slide Threshold (TouchSlop)

Calculation Method:

1. Support for `maxWidth`, `maxHeight`, `minWidth`, `minHeight` Attributes

1-1. Add Constraint Sizing to `fancyImage`

1-2. Extend `ShapeAttr` Interface

2-1. Rename `HPRichText` to `MyRichText`

2-2. Extract `Image` Logic into `ImageNode` Component

Using `MyImageItemView` Component

Full Code for `MyImagePreview`

1. `PushMsgUtils` Class

`compressVideo(context: Context, inputFilePath: string, quality: CompressQuality): Promise<CompressionResult>`