DEV Community: zhongcx

HarmonyOS NEXT Meta Services: How to Rapidly Publish Your Work for Free

zhongcx — Sun, 11 May 2025 04:25:23 +0000

Introduction: In the realm of martial arts, speed reigns supreme.
This article discusses how to publish your work for free and at maximum speed. The author shares a two-hour workflow from project initiation to submission for review as a reference.

Project Selection Conclusion: Choose "Meta Service," standalone tools (non-gaming). Reason: Standalone meta services avoid software copyright ("soft著") and regulatory filings ("备案"). Tool-type apps meet this requirement. Note: Avoid game development for fast approval—game licenses are notoriously difficult to obtain.

Code Implementation Conclusion: Use simple utilities (e.g., counters). Reason: Select code from non-network, non-gaming templates. For example, repurpose educational tools like "Schulte Grid" (focus training) or "24-Point Math" (arithmetic practice). Sample Code Repositories:

Temperature Converter: Link
Text-to-Pinyin: Link
QR Code Generator: Link
Counter: Link
(Full list retained in original structure)

App Naming Conclusion: Verify unregistered names via MIIT (Ministry of Industry and IT). Reason: Reusing registered names triggers rejection within 36 hours. Note: Search for "APP" type names here: MIIT Query Portal.

Logo Design Conclusion: Create a 1024x102px gradient/square image with minimal text. Use HarmonyOS’s Image Asset tool. Note: Custom logos risk rejection—strictly follow official guidelines.

Build Configuration: Multi-Target Output Conclusion: Configure debug and release profiles in build-profile.json5. Steps:

Set default for debugging and release for publishing.
Update applyToProducts to ["default", "release"].
Switch profiles before testing/publishing.

{
  "app": {
    "signingConfigs": [...],
    "products": [
      { "name": "default", "signingConfig": "default" },
      { "name": "release", "signingConfig": "release" }
    ],
    "buildModeSet": [...]
  },
  "modules": [...]
}

Privacy Policy Conclusion: Use Huawei’s template in AppGallery Connect. Steps: Create a new agreement under "Protocol Services" and link it during submission.

User Agreement Conclusion: Host on Gitee (free Markdown-based repository). Template: Counter App Agreement.

Final Steps Check "Disclaimer" and select "Standalone App." Disable tablet compatibility if unoptimized. Submit the .app file (generated via Build > Build APP). Ensure "Test & Official Release" is selected— not "Test Only."

Submit & Pray Cross your fingers, hit "Submit," and wait for approval! 🚀

All images and links retained as per original structure.

Blood and Tears Summary! From Permission Errors to Cross-Platform Compatibility: These Pitfalls You MUST Avoid!

zhongcx — Sun, 11 May 2025 04:19:23 +0000

☁️ Cloud Database Practical Guide

Beginner Zone: The "Excel Worldview" of Cloud Databases Official Documentation Portal

👉 One Sentence to Master It All:
Treat cloud databases as Excel workbooks in the cloud!

📂 Storage Zone = Excel Sheet (e.g., UserDB, OrderDB)
📑 Object Type = Sheet headers (defining field rules)
📝 Data = Cell contents (Zhang San's age, Li Si's order)
Quick Start Guide:

Log in to AGC Platform → Left menu 【My Projects】
Enter【Cloud Database】→ Right-side trio (Storage Zone/Object Types/Data)
Create structures visually (refer to config guide)

Tablet Developers Alert! Hidden Bugs in Official Demos Painful Lesson: Official demos default to phone-only! Tablets will show blank screens!

Emergency Fix:

Locate src/main/module.json5
Modify deviceTypes:

// Wrong: Phone-only  
"deviceTypes": ["phone"]  
// Correct: Support both  
"deviceTypes": ["phone", "tablet"]  // Don’t forget the comma!

Critical! Run Build → Rebuild Project

Hidden Workflow for Schema Modifications Rule: Cloud schema changes MUST sync locally!

Workflow:

Export schema as JSON from AGC → Object Types
Rename to schema.json
Save to AppScope/resources/rawfile/schema.json (create dir if missing)
Deadly Detail: Recompile after every schema update!

403 Permission Error: Ultimate Fix

When seeing this error:

Failed to upsert...403:205525004  // Translation: You have no permissions!

Check signature guide for solutions.

Cross-Platform Nuclear Option Make CloudDB work on Android/iOS? Two approaches:

Method 1: SDK Integration (Native Devs)

// Android Example  
AGConnectCloudDB cloudDB = AGConnectCloudDB.getInstance();  
CloudDBZoneConfig config = new CloudDBZoneConfig("YourZone");  
cloudDB.openCloudDBZone(config);

Method 2: REST API (Cross-Platform)

# Query Example  
curl -X POST "https://your-api-endpoint" \  
-H "Authorization: Bearer <token>" \  
-d '{"query":"SELECT * FROM User"}'

Read-Only Data? Permission Minefield Classic Fail: Can query but not modify data!

Checklist:

Object Type ACL:
AGC → Object Types → Permissions → Enable "Allow other users to write"
User Whitelist Config
Cloud Function Permissions

Upsert 101: Dual-Purpose Operation Existing primary key → Update New primary key → Insert 📱 Local Database Survival Guide
Debugging God Mode: Visualize Your DB Replace console.log with:

ohpm install @hadss/debug-db  # One command to rule them all

Usage:

import {DebugDB} from '@hadss/debug-db';  
DebugDB.initialize(context);  // Get console URL

Visit http://localhost:8080/debug-db to:

Inspect RDB schemas
Edit Preferences/KVStore

CRUD Pitfall Cheatsheet

Transaction Kung Fu Deadlock Scenario:

// WRONG! Nested transactions  
rdbStore.beginTransaction();  
rdbStore.beginTransaction();  // Throws error!

Correct Approach:

try {  
  rdbStore.beginTransaction();  
  // Operation 1...  
  // Operation 2...  
  await rdbStore.commit();  
} catch (e) {  
  rdbStore.rollback();  
  throw new Error("Transaction failed: " + e.message);  
}

Database Upgrade Strategies

💡 FAQ Nuclear Defense Manual
Three Golden Rules:

Design cloud DB permissions early
Wrap local operations in transactions
Check official FAQs first – save 2 hours!
Like this guide? ❤️ Like | ⭐ Bookmark
Share your pitfalls in comments! Let’s improve this together!

HarmonyOSDev #DatabaseBattle #DevSurvivalGuide

HarmonyOS NEXT Development Case: Programmer Calculator - HarmonyOS Developer Community

zhongcx — Sun, 11 May 2025 04:08:22 +0000

Environment Preparation
• OS: Windows 10
• Dev Tool: DevEco Studio 5.0.1 Release Build Version: 5.0.5.306
• Target Device: Huawei Mate60 Pro
• Language: ArkTS
• Framework: ArkUI
• API Version: API 13

Project Background & Value
In daily development, programmers often need to perform complex mathematical operations (e.g., trigonometric functions, complex numbers, exponentiation). However, traditional calculators face the following limitations:

Limited expression support: Most lack nested parentheses or multi-function combinations.
Disorganized scientific functions: Require repetitive button clicks.
This project leverages HarmonyOS NEXT's Web component capabilities and JavaScript's eval function to create a professional calculator supporting arbitrary mathematical expressions. Typical use cases:

// Complex number operations
Math.sqrt(-4) * 2 → 4i  
// Trigonometric combinations  
Math.sin(Math.PI/2) + Math.cos(0) → 2  
// Complex expressions  
(2+3)*Math.pow(2,5)/Math.sqrt(9) → 53.333

Technical Implementation

System Architecture
Three-layer architecture:
Presentation Layer: ArkUI for UI construction
Logic Layer: Web component for JavaScript execution
Communication Layer: JavaScriptProxy for bidirectional data flow
Key Technologies

Core Code Analysis

Communication Bridge

// Calculator service class  
class CalculatorService {  
  // Result callback  
  postResult = (result: string) => {  
    this.context.eventHub.emit('formulaEvaluated', result);  
  }  
}  

// Web component configuration  
Web({  
  src: $rawfile('eval.html'),  
  controller: this.webController  
})  
.javaScriptProxy({  
  name: "harmonyBridge",  
  object: this.calculatorService,  
  methodList: ['postResult']  
})

Key points:

Use javaScriptProxy for bidirectional communication
Expose native methods via harmonyBridge namespace
Expression Evaluation

<!-- eval.html -->  
<script>  
function evaluateExpression(expr) {  
  try {  
    const result = eval(expr);  
    harmonyBridge.postResult(String(result));  
  } catch (e) {  
    harmonyBridge.postResult(`Error: ${e.message}`);  
  }  
}  
</script>

Invocation:

// On calculation button click  
this.webController.runJavaScript(`evaluateExpression('${this.formulaInput}')`);

Security mechanisms:

try-catch wrapping for eval
Error message standardization
Result type conversion
Input Optimization

// Smart expression insertion  
Text(' Math.sin() ')  
.onClick(() => {  
  const pos = this.inputController.getCaretOffset().index;  
  this.formulaInput =  
    this.formulaInput.slice(0, pos) +  
    ' Math.sin() ' +  
    this.formulaInput.slice(pos);  
})

Interaction highlights:

Preserve function parameter placeholders ()
Automatic cursor positioning
Conclusion
This solution innovatively addresses the challenge of dynamic expression evaluation in ArkTS by leveraging HarmonyOS Web components. Key advantages:

Powerful functionality: Full JavaScript math library support
Excellent UX: Developer-friendly input design
Extensible architecture: Modular implementation
Open-source code: https://gitee.com/zhong-congxu/calculator20250322

HarmonyOS NEXT Development Case: Latitude and Longitude Distance Calculation

zhongcx — Sun, 11 May 2025 04:03:27 +0000

The following example demonstrates how to implement a distance calculator between geographic coordinates using HarmonyOS NEXT's declarative development paradigm. This case leverages ArkUI components and the MapKit module to create a responsive interface with real-time distance calculation capabilities.

Key Features

Dual-column input for coordinates (longitude/latitude)
Real-time distance calculation using MapKit APIs
Example preset (Beijing to Shanghai)
Responsive UI with focus states
Data clearing functionality
Kilometer-based distance display

Code Implementation (with English Comments)

import { mapCommon } from '@kit.MapKit'; // Import map common module
import { map } from '@kit.MapKit'; // Import map module

@Entry // Entry decorator for application entry component
@Component // Component decorator
struct DistanceCalculator { // Distance calculator component structure
  @State private primaryColor: string = '#fea024'; // Primary theme color
  @State private fontColor: string = "#2e2e2e"; // Main text color
  @State private isStartFocused: boolean = false; // Start point input focus state
  @State private isEndFocused: boolean = false; // End point input focus state
  @State private isSecondStartFocused: boolean = false; // Second start point focus
  @State private isSecondEndFocused: boolean = false; // Second end point focus
  @State private baseSpacing: number = 30; // Base spacing unit
  @State @Watch('onInputChange') private startLongitude: string = ""; // Start longitude
  @State @Watch('onInputChange') private startLatitude: string = ""; // Start latitude
  @State @Watch('onInputChange') private endLongitude: string = ""; // End longitude
  @State @Watch('onInputChange') private endLatitude: string = ""; // End latitude
  @State distance: number = 0; // Calculated distance

  aboutToAppear(): void { // Component lifecycle hook
    this.onInputChange(); // Initial calculation
  }

  onInputChange() { // Input change handler
    let fromLatLng: mapCommon.LatLng = { // Start coordinate object
      latitude: Number(this.startLatitude),
      longitude: Number(this.startLongitude)
    };
    let toLatLng: mapCommon.LatLng = { // End coordinate object
      latitude: Number(this.endLatitude),
      longitude: Number(this.endLongitude)
    };
    this.distance = map.calculateDistance(fromLatLng, toLatLng); // Calculate distance
  }

  build() { // UI construction
    Column() { // Main vertical layout
      // Header section
      Text("Coordinate Distance Calculator")
        .width('100%')
        .height(54)
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .backgroundColor(Color.White)
        .textAlign(TextAlign.Center)
        .fontColor(this.fontColor);

      // Input area
      Column() {
        Row() { // Example presets row
          Text('Example (Beijing->Shanghai)')
            .fontColor("#5871ce")
            .fontSize(18)
            .padding(`${this.baseSpacing / 2}lpx`)
            .backgroundColor("#f2f1fd")
            .borderRadius(5)
            .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.8 })
            .onClick(() => { // Preset coordinates
              this.startLongitude = "116.4074"; // Beijing longitude
              this.startLatitude = "39.9042"; // Beijing latitude
              this.endLongitude = "121.4737"; // Shanghai longitude
              this.endLatitude = "31.2304"; // Shanghai latitude
            });

          Blank(); // Spacer

          Text('Clear All')
            .fontColor("#e48742")
            .fontSize(18)
            .padding(`${this.baseSpacing / 2}lpx`)
            .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.8 })
            .backgroundColor("#ffefe6")
            .borderRadius(5)
            .onClick(() => { // Clear inputs
              this.startLongitude = "";
              this.startLatitude = "";
              this.endLongitude = "";
              this.endLatitude = "";
            });
        }.height(45)
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%');

        Divider().margin({ top: 5, bottom: 5 });

        // Start point inputs
        Row() {
          Text('Start Point')
            .fontWeight(FontWeight.Bold)
            .fontSize(18)
            .fontColor(this.fontColor);
        }.margin({ bottom: `${this.baseSpacing}lpx`, top: `${this.baseSpacing}lpx` });

        Row() { // Longitude/Latitude inputs
          TextInput({ text: $$this.startLongitude, placeholder: 'Longitude' })
            .caretColor(this.primaryColor)
            .layoutWeight(1)
            .type(InputType.NUMBER_DECIMAL)
            .placeholderColor(this.isStartFocused ? this.primaryColor : Color.Gray)
            .fontColor(this.isStartFocused ? this.primaryColor : this.fontColor)
            .borderColor(this.isStartFocused ? this.primaryColor : Color.Gray)
            .borderWidth(1)
            .borderRadius(10)
            .backgroundColor(Color.White)
            .showUnderline(false)
            .onBlur(() => this.isStartFocused = false)
            .onFocus(() => this.isStartFocused = true);

          Line().width(10);

          TextInput({ text: $$this.startLatitude, placeholder: 'Latitude' })
            .caretColor(this.primaryColor)
            .layoutWeight(1)
            .type(InputType.NUMBER_DECIMAL)
            .placeholderColor(this.isEndFocused ? this.primaryColor : Color.Gray)
            .fontColor(this.isEndFocused ? this.primaryColor : this.fontColor)
            .borderColor(this.isEndFocused ? this.primaryColor : Color.Gray)
            .borderWidth(1)
            .borderRadius(10)
            .backgroundColor(Color.White)
            .showUnderline(false)
            .onBlur(() => this.isEndFocused = false)
            .onFocus(() => this.isEndFocused = true);
        }

        // End point inputs
        Text('End Point')
          .fontWeight(FontWeight.Bold)
          .fontSize(18)
          .fontColor(this.fontColor)
          .margin({ bottom: `${this.baseSpacing}lpx`, top: `${this.baseSpacing}lpx` });

        Row() {
          TextInput({ text: $$this.endLongitude, placeholder: 'Longitude' })
            .caretColor(this.primaryColor)
            .layoutWeight(1)
            .type(InputType.NUMBER_DECIMAL)
            .placeholderColor(this.isSecondStartFocused ? this.primaryColor : Color.Gray)
            .fontColor(this.isSecondStartFocused ? this.primaryColor : this.fontColor)
            .borderColor(this.isSecondStartFocused ? this.primaryColor : Color.Gray)
            .borderWidth(1)
            .borderRadius(10)
            .backgroundColor(Color.White)
            .showUnderline(false)
            .onBlur(() => this.isSecondStartFocused = false)
            .onFocus(() => this.isSecondStartFocused = true);

          Line().width(10);

          TextInput({ text: $$this.endLatitude, placeholder: 'Latitude' })
            .caretColor(this.primaryColor)
            .layoutWeight(1)
            .type(InputType.NUMBER_DECIMAL)
            .placeholderColor(this.isSecondEndFocused ? this.primaryColor : Color.Gray)
            .fontColor(this.isSecondEndFocused ? this.primaryColor : this.fontColor)
            .borderColor(this.isSecondEndFocused ? this.primaryColor : Color.Gray)
            .borderWidth(1)
            .borderRadius(10)
            .backgroundColor(Color.White)
            .showUnderline(false)
            .onBlur(() => this.isSecondEndFocused = false)
            .onFocus(() => this.isSecondEndFocused = true);
        }
      }.width('650lpx')
      .padding(`${this.baseSpacing}lpx`)
      .margin({ top: 20 })
      .backgroundColor(Color.White)
      .borderRadius(10)
      .alignItems(HorizontalAlign.Start);

      // Result display
      Column() {
        Text() {
          Span(`Distance: `)
          Span(`${(this.distance / 1000).toFixed(2)} `).fontColor(this.primaryColor)
          Span(`kilometers`)
        }
        .fontWeight(FontWeight.Bold)
        .fontSize(18)
        .fontColor(this.fontColor);
      }.width('650lpx')
      .backgroundColor(Color.White)
      .borderRadius(10)
      .padding(`${this.baseSpacing}lpx`)
      .margin({ top: `${this.baseSpacing}lpx` })
      .alignItems(HorizontalAlign.Start);
    }
    .height('100%')
    .width('100%')
    .backgroundColor("#eff0f3");
  }
}

Implementation Details

State Management:
Uses @State decorators for reactive UI updates
@Watch decorator triggers recalculation on input changes
Manages focus states for visual feedback
Map Integration:
Utilizes map.calculateDistance() from MapKit
Converts string inputs to numeric coordinates
Returns distance in meters (converted to kilometers)
UI Features:
Responsive layout using percentage-based widths
Visual feedback for input focus states
Clean material design-inspired aesthetics
Adaptive color schemes
Smooth animations for user interactions
Validation:
Input type restricted to decimal numbers
Automatic handling of invalid inputs (returns 0 distance)
Empty state management

This implementation demonstrates HarmonyOS NEXT's capabilities in creating sophisticated location-based applications with clean, maintainable code. The declarative UI approach combined with reactive programming patterns enables efficient development of complex interactive applications.

HarmonyOS NEXT Development Case: Emoticon Searcher

zhongcx — Sun, 11 May 2025 03:59:56 +0000

// Import necessary utility libraries for text decoding
import { util } from '@kit.ArkTS'
// Import BusinessError class for handling business logic errors
import { BusinessError } from '@kit.BasicServicesKit'
// Import inputMethod module for managing input method behavior
import { inputMethod } from '@kit.IMEKit'

// Define observable data model EmoticonBean representing single emoticon information
@ObservedV2
class EmoticonBean {
  // Style property with default empty string
  style: string = ""
  // Type property with default empty string
  type: string = ""
  // Emoticon symbol with default empty string
  emoticon: string = ""
  // Meaning property with default empty string
  meaning: string = ""

  // Constructor allowing property initialization during object creation
  constructor(style: string, type: string, emoticon: string, meaning: string) {
    this.style = style
    this.type = type
    this.emoticon = emoticon
    this.meaning = meaning
  }

  // Visibility state flag with @Trace decorator for change tracking
  @Trace isShown: boolean = true
}

// Define Index component as application entry using @Entry and @Component decorators
@Entry
@Component
struct Index {
  // State variable for search input content
  @State private textInput: string = ''
  // State variable for storing emoticon list
  @State private emoticonList: EmoticonBean[] = []

  // Style configuration properties
  private lineColor: string = "#e6e6e6"
  private titleBackground: string = "#f8f8f8"
  private textColor: string = "#333333"
  private basePadding: number = 4
  private lineWidth: number = 2
  private cellHeight: number = 50
  private weightRatio: number[] = [1, 1, 5, 4]
  private baseFontSize: number = 14

  // Method for splitting and highlighting search keywords
  private splitAndHighlight(item: EmoticonBean, keyword: string): string[] {
    let text = item.meaning
    if (!keyword) {
      item.isShown = true
      return [text]
    }
    let segments: string[] = [];
    let lastMatchEnd: number = 0;
    while (true) {
      const matchIndex = text.indexOf(keyword, lastMatchEnd);
      if (matchIndex === -1) {
        segments.push(text.slice(lastMatchEnd));
        break;
      } else {
        segments.push(text.slice(lastMatchEnd, matchIndex));
        segments.push(text.slice(matchIndex, matchIndex + keyword.length));
        lastMatchEnd = matchIndex + keyword.length;
      }
    }
    item.isShown = (segments.indexOf(keyword) != -1)
    return segments;
  }

  // Lifecycle method for loading data when component appears
  aboutToAppear() {
    getContext().resourceManager.getRawFileContent("emoticons.json", (err: BusinessError, data) => {
      if (err) {
        console.error('getRawFileContent error: ' + JSON.stringify(err))
        return
      }
      let textDecoder = util.TextDecoder.create('utf-8', { ignoreBOM: true })
      let jsonString = textDecoder.decodeToString(data, { stream: false })
      let jsonObjectArray: object[] = JSON.parse(jsonString)
      for (let i = 0; i < jsonObjectArray.length; i++) {
        let item = jsonObjectArray[i]
        this.emoticonList.push(new EmoticonBean(item['s'], item['t'], item['e'], item['m']))
      }
      try {
        console.info(`this.emoticonList:${JSON.stringify(this.emoticonList, null, '\u00a0\u00a0')}`)
      } catch (err) {
        console.error('parse error: ' + JSON.stringify(err))
      }
    })
  }

  // Build method for UI construction
  build() {
    Column({ space: 0 }) {
      Search({ value: $$this.textInput })
        .margin(this.basePadding)
        .fontFeature("\"ss01\" on")

      Column() {
        Row() {
          Text('Style')
            .height('100%')
            .layoutWeight(this.weightRatio[0])
            .textAlign(TextAlign.Center)
            .fontSize(this.baseFontSize)
            .fontWeight(600)
            .fontColor(this.textColor)
          Line().height('100%').width(this.lineWidth).backgroundColor(this.lineColor)
          Text('Type')
            .height('100%')
            .layoutWeight(this.weightRatio[1])
            .textAlign(TextAlign.Center)
            .fontSize(this.baseFontSize)
            .fontWeight(600)
            .fontColor(this.textColor)
          Line().height('100%').width(this.lineWidth).backgroundColor(this.lineColor)
          Text('Emoticon')
            .height('100%')
            .layoutWeight(this.weightRatio[2])
            .textAlign(TextAlign.Center)
            .fontSize(this.baseFontSize)
            .fontWeight(600)
            .fontColor(this.textColor)
          Line().height('100%').width(this.lineWidth).backgroundColor(this.lineColor)
          Text('Meaning')
            .height('100%')
            .layoutWeight(this.weightRatio[3])
            .textAlign(TextAlign.Center)
            .fontSize(this.baseFontSize)
            .fontWeight(600)
            .fontColor(this.textColor)
        }.height(this.cellHeight).borderWidth(this.lineWidth).borderColor(this.lineColor)
        .backgroundColor(this.titleBackground)
      }.width(`100%`).padding({ left: this.basePadding, right: this.basePadding })

      Scroll() {
        Column() {
          ForEach(this.emoticonList, (item: EmoticonBean) => {
            Row() {
              Text(item.style)
                .height('100%')
                .layoutWeight(this.weightRatio[0])
                .textAlign(TextAlign.Center)
                .fontSize(this.baseFontSize)
                .fontColor(this.textColor)
              Line().height('100%').width(this.lineWidth).backgroundColor(this.lineColor)
              Text(item.type)
                .height('100%')
                .layoutWeight(this.weightRatio[1])
                .textAlign(TextAlign.Center)
                .fontSize(this.baseFontSize)
                .fontColor(this.textColor)
              Line().height('100%').width(this.lineWidth).backgroundColor(this.lineColor)
              Text(item.emoticon)
                .height('100%')
                .layoutWeight(this.weightRatio[2])
                .textAlign(TextAlign.Center)
                .fontSize(this.baseFontSize)
                .fontColor(this.textColor)
                .copyOption(CopyOptions.LocalDevice)
              Line().height('100%').width(this.lineWidth).backgroundColor(this.lineColor)
              Text() {
                ForEach(this.splitAndHighlight(item, this.textInput), (segment: string, index: number) => {
                  ContainerSpan() {
                    Span(segment)
                      .fontColor(segment === this.textInput ? Color.White : Color.Black)
                      .onClick(() => {
                        console.info(`Highlighted text clicked: ${segment}`);
                        console.info(`Click index: ${index}`);
                      });
                  }.textBackgroundStyle({
                    color: segment === this.textInput ? Color.Red : Color.Transparent
                  });
                });
              }
              .height('100%')
              .layoutWeight(this.weightRatio[3])
              .textAlign(TextAlign.Center)
              .fontSize(this.baseFontSize)
              .fontColor(this.textColor)
              .padding({ left: this.basePadding, right: this.basePadding })
            }
            .height(this.cellHeight)
            .borderWidth({ left: this.lineWidth, right: this.lineWidth, bottom: this.lineWidth })
            .borderColor(this.lineColor)
            .visibility(item.isShown ? Visibility.Visible : Visibility.None)
          })
        }.width(`100%`).padding({ left: this.basePadding, right: this.basePadding })
      }.width('100%').layoutWeight(1).align(Alignment.Top)
      .onTouch((event) => {
        if (event.type == TouchType.Down) {
          inputMethod.getController().stopInputSession()
        }
      })
    }.width('100%').height('100%').backgroundColor(Color.White);
  }
}

Technical Features

Reactive Data Model

The @ObservedV2 decorator enables automatic UI updates when data changes, while @Trace tracks property-level modifications.
Dynamic Search Highlighting

The splitAndHighlight method implements real-time keyword matching with visual feedback using color differentiation.
Optimized User Experience
- Automatic keyboard dismissal on blank area touch
- Copy-to-clipboard support for emoticons
- Responsive layout with weighted columns
Performance Considerations
- Virtualized list rendering through ForEach and Scroll
- JSON data lazy loading
- Visibility control instead of conditional rendering
Error Handling

Comprehensive error catching mechanisms for both file operations and JSON parsing.

Implementation Notes

Data Loading

Emoticon data is loaded from emoticons.json during aboutToAppear lifecycle phase, using ArkTS's resource management system.
UI Structure
- Search component at top
- Fixed header row
- Scrollable content area
- Four-column layout with proportional weights
Accessibility
- Clear visual hierarchy
- Touch-friendly dimensions
- High contrast color scheme

This implementation demonstrates HarmonyOS NEXT's capabilities in building responsive, data-driven applications with clean architecture and optimal performance characteristics.

HarmonyOS NEXT Development Case: World Clock Application

zhongcx — Sun, 11 May 2025 03:55:16 +0000

The following case demonstrates how to build a world clock application using HarmonyOS NEXT. This application supports dynamic time updates for multiple cities, search filtering, and highlighted text matching. Below is the code implementation with detailed explanations and optimized English comments.

Core Code Implementation

1. Data Model Class

import { i18n } from '@kit.LocalizationKit'; // Import localization module  
import { inputMethod } from '@kit.IMEKit'; // Import input method module  

@ObservedV2 // Observer decorator for state management  
class CityTimeInfo {  
  @Trace cityName: string = ""; // City name  
  @Trace currentTime: string = ""; // Current formatted time string  
  timeZone: i18n.TimeZone; // Time zone object  

  constructor(cityName: string, timeZone: i18n.TimeZone) {  
    this.cityName = cityName;  
    this.timeZone = timeZone;  
  }  

  @Trace isVisible: boolean = true; // Visibility flag for filtering  
}

2. Main Component Structure

@Entry // Entry component decorator  
@Component // Component decorator  
struct WorldClockApp {  
  @State private searchText: string = ''; // Search keyword  
  @State private cityTimeList: CityTimeInfo[] = []; // List of city time data  
  private lineColor: string = "#e6e6e6"; // Border color  
  private titleBackgroundColor: string = "#f8f8f8"; // Header background color  
  private textColor: string = "#333333"; // Text color  
  private basePadding: number = 4; // Base padding  
  private lineWidth: number = 2; // Border width  
  private rowHeight: number = 50; // Row height  
  private ratio: number[] = [1, 1]; // Column width ratio  
  private textSize: number = 14; // Base font size  
  private updateIntervalId = 0; // Timer ID for updates  

  // Update time for all cities  
  updateAllCityTimes() {  
    const locale = i18n.System.getSystemLocale(); // Get system locale  
    for (const cityTime of this.cityTimeList) {  
      const timeZoneId: string = cityTime.timeZone.getID();  
      const calendar = i18n.getCalendar(locale);  
      calendar.setTimeZone(timeZoneId);  

      // Format time components  
      const year = calendar.get("year").toString().padStart(4, '0');  
      const month = (calendar.get("month") + 1).toString().padStart(2, '0');  
      const day = calendar.get("date").toString().padStart(2, '0');  
      const hour = calendar.get("hour_of_day").toString().padStart(2, '0');  
      const minute = calendar.get("minute").toString().padStart(2, '0');  
      const second = calendar.get("second").toString().padStart(2, '0');  

      cityTime.currentTime = `${year}-${month}-${day} ${hour}:${minute}:${second}`;  
    }  
  }  

  // Timer control for updates  
  onPageShow(): void {  
    clearInterval(this.updateIntervalId);  
    this.updateIntervalId = setInterval(() => {  
      this.updateAllCityTimes();  
    }, 1000);  
  }  

  onPageHide(): void {  
    clearInterval(this.updateIntervalId);  
  }  

  // Highlight search text and filter cities  
  private highlightSearchText(cityTime: CityTimeInfo, keyword: string) {  
    let text = cityTime.cityName;  
    if (!keyword) {  
      cityTime.isVisible = true;  
      return [text];  
    }  

    let segments: string[] = [];  
    let lastMatchEnd: number = 0;  
    while (true) {  
      const matchIndex = text.indexOf(keyword, lastMatchEnd);  
      if (matchIndex === -1) {  
        segments.push(text.slice(lastMatchEnd));  
        break;  
      } else {  
        segments.push(text.slice(lastMatchEnd, matchIndex));  
        segments.push(text.slice(matchIndex, matchIndex + keyword.length));  
        lastMatchEnd = matchIndex + keyword.length;  
      }  
    }  
    cityTime.isVisible = segments.includes(keyword);  
    return segments;  
  }  

  // Initialize city data  
  aboutToAppear() {  
    const timeZoneIds: Array<string> = i18n.TimeZone.getAvailableIDs();  
    this.cityTimeList.push(new CityTimeInfo('Beijing (China)', i18n.getTimeZone()));  

    for (const id of timeZoneIds) {  
      const cityDisplayName = i18n.TimeZone.getCityDisplayName(id.split('/')[1], "zh-CN");  
      if (cityDisplayName) {  
        this.cityTimeList.push(new CityTimeInfo(cityDisplayName, i18n.getTimeZone(id)));  
      }  
    }  
    this.updateAllCityTimes();  
  }  

  // UI Layout  
  build() {  
    Column({ space: 0 }) {  
      Search({ value: $$this.searchText })  
        .margin(this.basePadding)  
        .fontFeature("\"ss01\" on");  

      Column() {  
        Row() {  
          Text('City')  
            .layoutWeight(this.ratio[0])  
            .textAlign(TextAlign.Center)  
            .fontSize(this.textSize)  
            .fontWeight(600);  
          Line().width(this.lineWidth).backgroundColor(this.lineColor);  
          Text('Time')  
            .layoutWeight(this.ratio[1])  
            .textAlign(TextAlign.Center)  
            .fontSize(this.textSize)  
            .fontWeight(600);  
        }  
        .height(this.rowHeight)  
        .borderWidth(this.lineWidth)  
        .backgroundColor(this.titleBackgroundColor);  
      }.width('100%').padding({ left: this.basePadding, right: this.basePadding });  

      Scroll() {  
        Column() {  
          ForEach(this.cityTimeList, (item: CityTimeInfo) => {  
            Row() {  
              Text() {  
                ForEach(this.highlightSearchText(item, this.searchText), (segment: string) => {  
                  ContainerSpan() {  
                    Span(segment)  
                      .fontColor(segment === this.searchText ? Color.White : Color.Black)  
                      .textBackgroundStyle({  
                        color: segment === this.searchText ? Color.Red : Color.Transparent  
                      });  
                  };  
                });  
              }  
              .layoutWeight(this.ratio[0]);  

              Line().width(this.lineWidth).backgroundColor(this.lineColor);  
              Text(item.currentTime)  
                .layoutWeight(this.ratio[1]);  
            }  
            .height(this.rowHeight)  
            .visibility(item.isVisible ? Visibility.Visible : Visibility.None);  
          });  
        }.width('100%');  
      }  
      .onScrollStart(() => this.onPageHide())  
      .onScrollStop(() => this.onPageShow())  
      .onTouch((event) => {  
        if (event.type == TouchType.Down) {  
          inputMethod.getController().stopInputSession();  
        }  
      });  
    }  
  }  
}

Key Features Explained

1. Dynamic Time Updates

The updateAllCityTimes method fetches the current time for each city using the i18n module.
A timer updates all cities every second, triggered by onPageShow and paused by onPageHide.

2. Search & Highlight

The highlightSearchText method splits city names into segments, highlighting matches with red backgrounds.
Visibility of cities is toggled based on search results.

3. Performance Optimization

Timer updates are paused during scrolling (onScrollStart/onScrollStop).
Input sessions are closed on touch events to improve responsiveness.

4. UI Layout

Uses Row and Column components for responsive layouts.
Styled borders and spacing to enhance readability.

HarmonyOS NEXT Development Case: Expiry Date Calculator

zhongcx — Sun, 11 May 2025 03:51:11 +0000

@Entry
@Component
struct ExpiryDateCalculator {
  // State variable for text color, initialized to dark gray
  @State private textColor: string = "#2e2e2e";
  // State variable for shadow border color, initialized to light gray
  @State private shadowColor: string = "#d5d5d5";
  // State variable for base padding value, initialized to 30
  @State private basePadding: number = 30;
  // State variable indicating expiration status, initialized to false
  @State private isExpired: boolean = false;
  // State variable for production date, initialized as empty string
  @State private productionDate: string = "";
  // State variable for expiration date, initialized as empty string
  @State private expiryDate: string = "";
  // State variable for remaining valid days, initialized to 0
  @State private remainingDays: number = 0;
  // Theme color variable, initialized to orange
  @State private themeColor: string | Color = Color.Orange;
  // State variable tracking input focus status
  @State isInputFocused: boolean = false;
  // Watched state variable for input text changes
  @State @Watch('inputChanged') private inputText: string = "9";
  // Watched state variable for selected date
  @State @Watch('inputChanged') private selectedDate: Date = new Date()

  // Lifecycle hook before component appears
  aboutToAppear(): void {
    this.inputChanged()
  }

  // Method to format date as YYYY-MM-DD
  getYearMonthDay(date: Date) {
    const year: string = date.getFullYear().toString().padStart(4, '0');
    const month: string = (date.getMonth() + 1).toString().padStart(2, '0');
    const day: string = date.getDate().toString().padStart(2, '0');
    return `${year}年${month}月${day}日`;
  }

  // Input change handler
  inputChanged() {
    console.info(`selectedDate:${this.selectedDate}`);
    this.productionDate = this.getYearMonthDay(this.selectedDate);
    let expiryDate: Date = new Date(this.selectedDate);
    expiryDate.setDate(expiryDate.getDate() + Number(this.inputText));
    this.expiryDate = this.getYearMonthDay(expiryDate);
    this.isExpired = expiryDate.getTime() < new Date().getTime();
    const timeDifference = expiryDate.getTime() - new Date().getTime();
    this.remainingDays = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));
  } 

  // UI construction
  build() {
    Column() { 
      Text('Expiry Date Calculator')
        .fontColor(this.textColor)
        .fontSize(18)
        .width('100%')
        .height(50)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.White)
        .shadow({
          radius: 2,
          color: this.shadowColor,
          offsetX: 0,
          offsetY: 5
        });

      Scroll() {
        Column() {
          // Statistics Display
          Column() {
            Row() {
              Text() {
                Span(`Status: `)
                Span(`${this.isExpired ? 'Expired' : 'Valid'}`)
                  .fontColor(this.isExpired ? "#e74c3c" : "#3ace7d")
              }
              .fontColor(this.textColor)
              .fontSize(16)
              .layoutWeight(1);
            }
            .constraintSize({ minHeight: 45 })
            .justifyContent(FlexAlign.SpaceBetween)
            .width('100%');

            Divider();

            Row() {
              Text() {
                Span(`Days Left: `)
                Span(`${this.remainingDays < 0 ? 0 : this.remainingDays} `).fontColor(Color.Orange)
                Span(' days')
              }
              .fontColor(this.textColor)
              .fontSize(16)
              .layoutWeight(1);
            }
            .constraintSize({ minHeight: 45 })
            .justifyContent(FlexAlign.SpaceBetween)
            .width('100%');

            Divider();

            Row() {
              Text() {
                Span(`Production Date: `)
                Span(`${this.productionDate} `)
              }
              .fontColor(this.textColor)
              .fontSize(16)
              .layoutWeight(1);
            }
            .constraintSize({ minHeight: 45 })
            .justifyContent(FlexAlign.SpaceBetween)
            .width('100%');

            Divider();

            Row() {
              Text() {
                Span(`Expiry Date: `)
                Span(`${this.expiryDate} `)
              }
              .fontColor(this.textColor)
              .fontSize(16)
              .layoutWeight(1);
            }
            .constraintSize({ minHeight: 45 })
            .justifyContent(FlexAlign.SpaceBetween)
            .width('100%');
          }
          .alignItems(HorizontalAlign.Start)
          // ... (remaining UI components with similar translations)
        }
      }
      .scrollBar(BarState.Off)
      .clip(false);
    }
    .height('100%')
    .width('100%')
    .backgroundColor("#f4f8fb");
  }
}

Technical Implementation Details

1. State Management

@State Decorator: Manages component-level state changes
@Watch Decorator: Automatically triggers inputChanged() on variable updates
Reactive UI: Automatic UI refresh on state changes

2. Date Calculation

getYearMonthDay(): Formats Date object to localized string
inputChanged():
- Calculates expiration date
- Determines expiration status
- Computes remaining days

3. UI Features

Responsive Layout:
- Adaptive spacing using basePadding
- Percentage-based width/height
Visual Feedback:
- Dynamic color changes for expiration status
- Input focus highlighting
- Interactive shadow effects
Form Components:
- TextInput with number validation
- Calendar picker integration
- Clear button functionality

4. Styling System

Theme color management
Dynamic shadow effects
Consistent spacing system
Conditional styling based on state

Key Features

Real-time calculation updates
Cross-platform compatibility
Interactive date selection
Input validation
Responsive design

Usage Scenarios

Food industry quality control
Pharmaceutical expiration tracking
Retail inventory management
Consumer product maintenance

This implementation demonstrates HarmonyOS ArkUI's capabilities in building responsive, data-driven applications with clean state management and modern UI components.

HarmonyOS NEXT Development Case: Randomized 9-Cell Grid

zhongcx — Sun, 11 May 2025 03:47:27 +0000

This article demonstrates a lottery system implementation using HarmonyOS NEXT's reactive programming capabilities and component-based architecture. The solution features a dynamic 9-cell grid with configurable prizes and smooth animation effects.

Implementation Highlights

1. Reactive Data Model

// Observable Prize class with traceable properties
@ObservedV2
class Prize {
  @Trace title: string    // Prize title with reactive tracking
  @Trace color: string    // Color property for UI styling
  @Trace description: string // Prize description

  constructor(title: string, color: string, description: string = "") {
    this.title = title
    this.color = color
    this.description = description
  }
}

2. State Management Components

// Prize editor component with shared state
@Component
struct MyPrizeUpdate {
  @Consume selectedIndex: number      // Currently selected index
  @Consume private selectionOrder: number[] // Lottery sequence
  @Consume private prizeArray: Prize[]     // Prize collection

  build() {
    Column({ space: 20 }) {
      // UI elements for editing prize properties
    }
  }
}

3. Core Lottery Logic

@Entry
@Component
struct LotteryPage {
  @Provide private selectedIndex: number = 0
  private isAnimating: boolean = false
  @Provide private selectionOrder: number[] = [0, 1, 2, 5, 8, 7, 6, 3]
  // ...other properties

  // Multi-stage animation control
  startLottery(speed: number = 500) {
    // Acceleration phase
  }

  runAtConstantSpeed() {
    // Constant-speed phase with random duration
  }

  slowDown(speed = 50) {
    // Deceleration phase with result display
  }
}

Key Features

Dynamic Grid Layout

Flex({ wrap: FlexWrap.Wrap }) {
  ForEach(this.prizeArray, (item: Prize, index: number) => {
    // Responsive cell rendering with click effects
  })
}

Three-Phase Animation
Acceleration: Gradual speed increase (500ms → 50ms)
Constant Speed: Random duration (40ms + n×50ms)
Deceleration: Progressive slowdown until stop
Interactive Configuration

TextInput({ text: this.prizeArray[...].title })
  .onChange((value) => {
    // Directly update reactive properties
  })

Visual Feedback
Dynamic color schemes
Click effects with scaling
Real-time selection highlighting
Shadow effects for depth perception

Complete Implementation

View full translated code with English comments on GitHub

Conclusion

This implementation showcases HarmonyOS NEXT's powerful capabilities in:

Reactive state management (@ObservedV2/@trace)
Component-based architecture
Smooth animation control
Responsive UI updates

The solution can be extended with additional features like network synchronization or prize probability configurations, demonstrating the flexibility of HarmonyOS application development.

HarmonyOS NEXT Development Case Study: Temperature Conversion Application

zhongcx — Sun, 11 May 2025 03:44:40 +0000

The following implementation demonstrates how to create a cross-temperature unit conversion application using HarmonyOS NEXT's declarative development paradigm. This application supports real-time conversion between five temperature units: Celsius, Fahrenheit, Kelvin, Rankine, and Réaumur.

Implementation Highlights

Modular Temperature Conversion: Utilizes a dedicated temperature conversion module
Reactive UI Architecture: Implements observable data models and state management
Dynamic Unit Handling: Supports flexible extension of temperature units
Input Validation: Ensures numeric input compliance
Visual Feedback: Provides real-time UI status indication

// Import temperature converter module
import { TemperatureConverter } from "@nutpi/temperature-converter"

// Define temperature unit type object to store names of each unit
const TemperatureUnitType: object = Object({
  Celsius: 'Celsius',       // Celsius
  Fahrenheit: 'Fahrenheit', // Fahrenheit
  Kelvin: 'Kelvin',         // Kelvin
  Rankine: 'Rankine',       // Rankine
  Reaumur: 'Réaumur'        // Réaumur
})

// Define temperature unit class using decorator
@ObservedV2
class TemperatureUnit {
  title: string             // Unit display name
  @Trace value: string = "" // Current temperature value with trace
  @Trace isInputFocused: boolean = false // Input focus state tracking

  constructor(title: string) {
    this.title = title
  }

  // Method to set temperature value with three decimal places
  setValue(value: number) {
    this.value = `${parseFloat(value.toFixed(3))}`
    console.info(`Current value:${this.value}`)
  }
}

// Main application entry component
@Entry
@Component
struct TemperatureConverterApp {
  // Style configuration states
  @State private primaryColor: string = "#080808"
  @State private secondaryColor: string = "#f7f7f7"
  @State private bgColor: string = "#f4f8fb"
  @State private placeholderColor: string = "#2f9b6c"
  @State private textColor: string = "#a3a3a3"
  @State private fontSizeSmall: number = 16
  @State private fontSizeLarge: number = 18
  @State private basePadding: number = 30

  // Initialize temperature unit instances
  @State private temperatureUnits: TemperatureUnit[] =
    Object.keys(TemperatureUnitType).map(unit => new TemperatureUnit(TemperatureUnitType[unit]))

  build() {
    Column() {
      // Application title
      Text('Temperature Converter')
        .fontColor(this.primaryColor)
        .fontSize(this.fontSizeSmall)
        .width('100%')
        .height(50)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.White)
        .shadow({
          radius: 2,
          color: this.secondaryColor,
          offsetX: 0,
          offsetY: 5
        });

      // Dynamic input fields
      Column() {
        ForEach(this.temperatureUnits, (unit: TemperatureUnit, index: number) => {
          Row() {
            Text(`${unit.title}`).fontSize(this.fontSizeSmall).fontColor(this.primaryColor)

            Row() {
              TextInput({
                text: unit.value,
                placeholder: !unit.isInputFocused ? `Enter ${unit.title}` : ''
              })
                .inputFilter('[0-9.-]', (e) => console.log(JSON.stringify(e)))
                .fontSize(this.fontSizeSmall)
                .backgroundColor(Color.Transparent)
                .padding(0)
                .width('100%')
                .height('100%')
                .placeholderColor(unit.isInputFocused ? this.placeholderColor : this.textColor)
                .fontColor(unit.isInputFocused ? this.placeholderColor : this.primaryColor)
                .caretColor(this.placeholderColor)
                .borderRadius(0)
                .onBlur(() => unit.isInputFocused = false)
                .onFocus(() => unit.isInputFocused = true)
                .onChange((value: string) => {
                  if (!unit.isInputFocused) return
                  if (unit.value == value) return

                  const tempValue = Number(value);
                  unit.setValue(tempValue)

                  // Conversion logic
                  switch (index) {
                    case 0:
                      this.temperatureUnits[1].setValue(TemperatureConverter.celsiusToFahrenheit(tempValue))
                      this.temperatureUnits[2].setValue(TemperatureConverter.celsiusToKelvin(tempValue))
                      this.temperatureUnits[3].setValue(TemperatureConverter.celsiusToRankine(tempValue))
                      this.temperatureUnits[4].setValue(TemperatureConverter.celsiusToReaumur(tempValue))
                      break;
                    // Other conversion cases...
                  }
                });
            }
            .padding(`${this.basePadding / 2}lpx`)
            .backgroundColor(unit.isInputFocused ? this.bgColor : Color.Transparent)
            .layoutWeight(1)
            .height(40)
            .borderWidth(1)
            .borderRadius(10)
            .borderColor(unit.isInputFocused ? this.placeholderColor : this.secondaryColor)
            .margin({ left: `${this.basePadding / 2}lpx`, right: `${this.basePadding / 2}lpx` });
          }.margin({ top: `${this.basePadding / 2}lpx`, bottom: `${this.basePadding / 2}lpx` });
        })
      }
      // UI styling continues...
    }
  }
}

Key Technical Features

Reactive Data Binding:
@ObservedV2 decorator enables automatic UI updates
@Trace implements fine-grained state tracking
Conversion Logic:
Centralized conversion methods from TemperatureConverter module
Chain updating mechanism for dependent units
Input Management:
Focus state tracking for visual feedback
Numeric input validation with regex filter
Styling System:
Centralized style configuration states
Responsive layout using logical pixels (lpx)
Shadow effects and border animations

Usage Scenario

This implementation demonstrates HarmonyOS NEXT's capabilities in:

Building complex conversion logic
Implementing responsive UI components
Managing multi-state interactions
Creating professional-grade measurement tools

The architecture allows easy extension to support additional units or conversion types while maintaining clean separation between business logic and UI presentation.

HarmonyOS NEXT Development Case: Converting Text to Pinyin

zhongcx — Sun, 11 May 2025 03:41:15 +0000

This article demonstrates how to implement a Chinese-to-pinyin conversion feature using HarmonyOS NEXT and the ArkUI framework. The solution leverages the pinyin-pro library to achieve accurate phonetic conversion while showcasing HarmonyOS' declarative UI development capabilities.

Implementation Code (with English Comments)

// Import pinyin function from pinyin-pro library for Chinese-to-pinyin conversion
import { pinyin } from "pinyin-pro";

// Define a class to store character and its corresponding pinyin
class PinyinBean {
  pinyin: string; // Pinyin result
  character: string; // Corresponding Chinese character

  // Constructor to initialize pinyin and character
  constructor(pinyin: string, character: string) {
    this.pinyin = pinyin;
    this.character = character;
  }
}

// Define component using decorator for pinyin conversion feature
@Entry
@Component
struct PinyinConverter {
  // Default user input content
  @State private defaultInput: string = "混沌未分天地乱,茫茫渺渺无人见。自从盘古破鸿蒙,开辟从兹清浊辨。";
  // Component theme color
  @State private themeColor: string | Color = Color.Orange;
  // Text color
  @State private fontColor: string = "#2e2e2e";
  // Border color
  @State private lineColor: string = "#d5d5d5";
  // Base padding value
  @State private basePadding: number = 30;
  // User input with conversion watcher
  @State @Watch('convertToPinyin') userInput: string = "";
  // Conversion result storage
  @State conversionResult: PinyinBean[] = [];
  // Input field focus state
  @State isInputFocused: boolean = false;

  // Convert text to pinyin
  convertToPinyin() {
    const pinyinArray: string[] = pinyin(this.userInput, { type: "array" });
    const charArray: string[] = this.userInput.split("");
    this.conversionResult.length = 0;

    for (let i = 0; i < pinyinArray.length; i++) {
      this.conversionResult.push(new PinyinBean(pinyinArray[i], charArray[i]));
    }
  }

  // UI construction
  build() {
    Column() {
      // Title bar
      Text('Text to Pinyin Converter')
        .fontColor(this.fontColor)
        .fontSize(18)
        .width('100%')
        .height(50)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.White)
        .shadow({
          radius: 2,
          color: this.lineColor,
          offsetX: 0,
          offsetY: 5
        });

      // Main content container
      Column() {
        // Control buttons row
        Row() {
          Text('Example')
            .fontColor("#5871ce")
            .fontSize(18)
            .padding(`${this.basePadding / 2}lpx`)
            .backgroundColor("#f2f1fd")
            .borderRadius(5)
            .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.8 })
            .onClick(() => {
              this.userInput = this.defaultInput;
            });

          Blank();

          Text('Clear')
            .fontColor("#e48742")
            .fontSize(18)
            .padding(`${this.basePadding / 2}lpx`)
            .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.8 })
            .backgroundColor("#ffefe6")
            .borderRadius(5)
            .onClick(() => {
              this.userInput = "";
            });
        }.height(45)
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%');

        // Input area
        Row() {
          TextArea({
            text: $$this.userInput,
            placeholder: !this.isInputFocused ? `Input text here. E.g.: ${this.defaultInput}` : ''
          })
            .backgroundColor(Color.Transparent)
            .padding(0)
            .height('100%')
            .placeholderColor(this.isInputFocused ? this.themeColor : Color.Gray)
            .fontColor(this.isInputFocused ? this.themeColor : this.fontColor)
            .caretColor(this.themeColor)
            .borderRadius(0)
            .onBlur(() => this.isInputFocused = false)
            .onFocus(() => this.isInputFocused = true)
            .width('100%');
        }
        .padding(`${this.basePadding / 2}lpx`)
        .backgroundColor("#f2f1fd")
        .width('100%')
        .height(120)
        .borderWidth(1)
        .borderRadius(10)
        .borderColor(this.isInputFocused ? this.themeColor : Color.Gray)
        .margin({ top: `${this.basePadding / 2}lpx` });
      }
      .alignItems(HorizontalAlign.Start)
      .width('650lpx')
      .padding(`${this.basePadding}lpx`)
      .margin({ top: `${this.basePadding}lpx` })
      .borderRadius(10)
      .backgroundColor(Color.White)
      .shadow({
        radius: 10,
        color: this.lineColor,
        offsetX: 0,
        offsetY: 0
      });

      // Result display area
      Column() {
        Row() {
          Flex({ wrap: FlexWrap.Wrap }) {
            ForEach(this.conversionResult, (item: PinyinBean, index: number) => {
              Column() {
                Text(`${item.pinyin}`).fontColor(this.fontColor).fontSize(18);
                Text(`${item.character}`).fontColor(this.fontColor).fontSize(18);
              }.padding(3);
            })
          }
        }.justifyContent(FlexAlign.SpaceBetween)
        .width('100%');
      }
      .visibility(this.conversionResult.length != 0 ? Visibility.Visible : Visibility.None)
      .alignItems(HorizontalAlign.Start)
      .width('650lpx')
      .padding(`${this.basePadding}lpx`)
      .margin({ top: `${this.basePadding}lpx` })
      .borderRadius(10)
      .backgroundColor(Color.White)
      .shadow({
        radius: 10,
        color: this.lineColor,
        offsetX: 0,
        offsetY: 0
      });
    }
    .height('100%')
    .width('100%')
    .backgroundColor("#f4f8fb");
  }
}

Key Implementation Points

Dependency Integration

Utilizes pinyin-pro library for accurate Chinese phonetic conversion through its array output mode.
Data Model

PinyinBean class maintains 1:1 correspondence between Chinese characters and their pinyin.
State Management
- @State decorator manages component states
- @Watch triggers automatic conversion on input changes
- ForEach dynamically renders conversion results
UI Features
- Adaptive layout with percentage-based width
- Interactive elements with visual feedback
- Clean visual hierarchy using shadows and spacing
- Responsive input states (focus/blur)
User Experience
- One-click example input
- Instant clear functionality
- Visual placeholder hints
- Smooth transition animations

Conclusion

This implementation demonstrates HarmonyOS NEXT's capabilities in handling complex text processing tasks while maintaining smooth UI interactions. The solution can be extended with additional features like pinyin tone display, copy-to-clipboard functionality, or speech synthesis integration.

HarmonyOS NEXT Development Case: Relative Relationship Calculator

zhongcx — Sun, 11 May 2025 03:37:31 +0000

This article demonstrates how to build a Relative Relationship Calculator using HarmonyOS NEXT's ArkUI framework. The application allows users to input kinship descriptions (e.g., "father's cousin") and calculates corresponding relational titles based on gender and direction selection. Below is the implementation analysis and code walkthrough.

Core Features

Kinship Calculation: Utilizes the @nutpi/relationship library for kinship logic.
Gender Selection: Toggle between male/female to adjust calculation results.
Direction Control: Supports bidirectional relationships ("I call them" ↔ "They call me").
Example/Clear Functions: Predefined examples and input reset capabilities.

Key Code Implementation

1. Component Structure & Imports

// Import relationship calculation module
import relationship from "@nutpi/relationship";
// Import segmented button component and configuration types
import { SegmentButton, SegmentButtonItemTuple, SegmentButtonOptions } from '@kit.ArkUI';

@Entry
@Component
struct RelationshipCalculator {
  // User-input relationship description (default: "father's cousin")
  @State private userInputRelation: string = "爸爸的堂弟";
  // Theme color (orange)
  @State private themeColor: string | Color = Color.Orange;
  // Text/border colors
  @State private textColor: string = "#2e2e2e";
  @State private lineColor: string = "#d5d5d5";
  // Base padding size
  @State private paddingBase: number = 30;
  // Gender/call method options
  @State private genderOptions: object[] = [{ text: 'Male' }, { text: 'Female' }];
  @State private callMethodOptions: object[] = [{ text: 'I call them' }, { text: 'They call me' }];
  // Segmented button configurations
  @State private genderButtonOptions: SegmentButtonOptions | undefined;
  @State private callMethodButtonOptions: SegmentButtonOptions | undefined;
  // Selection indices with watchers
  @State @Watch('updateSelections') selectedGenderIndex: number[] = [0];
  @State @Watch('updateSelections') selectedCallMethodIndex: number[] = [0];
  // Input & results
  @State @Watch('updateSelections') userInput: string = "";
  @State calculationResult: string = "";
  @State isInputFocused: boolean = false;

2. Calculation Logic

// Update results when selections change
updateSelections() {
  const gender = this.selectedGenderIndex[0] === 0 ? 1 : 0; // 1=Male, 0=Female
  const reverse = this.selectedCallMethodIndex[0] !== 0; // Reverse direction
  const result: string[] = relationship({
    text: this.userInput,
    reverse: reverse,
    sex: gender
  });

  this.calculationResult = result?.length > 0 
    ? `${reverse ? 'Their term for me' : 'My term for them'}: ${result[0]}`
    : this.userInput ? 'No matching relationship found' : '';
}

3. UI Components

build() {
  Column() {
    // Title bar
    Text('Relative Relationship Calculator')
      .fontColor(this.textColor)
      .fontSize(18)
      .width('100%')
      .height(50)
      .textAlign(TextAlign.Center)
      .backgroundColor(Color.White)
      .shadow({ radius: 2, color: this.lineColor, offsetY: 5 });

    // Settings panel
    Column() {
      // Gender selection
      Row() {
        Text('My Gender').fontColor(this.textColor).fontSize(18);
        SegmentButton({
          options: this.genderButtonOptions,
          selectedIndexes: this.selectedGenderIndex
        }).width('400lpx');
      }.justifyContent(FlexAlign.SpaceBetween);

      // Call direction selection
      Row() {
        Text('Direction').fontColor(this.textColor).fontSize(18);
        SegmentButton({
          options: this.callMethodButtonOptions,
          selectedIndexes: this.selectedCallMethodIndex
        }).width('400lpx');
      }.justifyContent(FlexAlign.SpaceBetween);

      // Example/Clear buttons
      Row() {
        Text('Example')
          .style({ color: "#5871ce", backgroundColor: "#f2f1fd" })
          .onClick(() => this.userInput = this.userInputRelation);
        Blank();
        Text('Clear')
          .style({ color: "#e48742", backgroundColor: "#ffefe6" })
          .onClick(() => this.userInput = "");
      }.height(45);

      // Input field
      TextInput({
        text: $$this.userInput,
        placeholder: !this.isInputFocused ? `Input term (e.g., ${this.userInputRelation})` : ''
      })
        .style({
          borderColor: this.isInputFocused ? this.themeColor : Color.Gray,
          caretColor: this.themeColor
        })
        .onFocusChange((focused) => this.isInputFocused = focused);
    }
    .cardStyle(this.paddingBase); // Custom card styling

    // Result display
    Column() {
      Text(this.calculationResult).fontSize(18);
    }.visibility(this.calculationResult ? Visibility.Visible : Visibility.None)
     .cardStyle(this.paddingBase);
  }
  .fullScreenStyle("#f4f8fb"); // Full-screen background
}

Technical Highlights

Reactive State Management:
- @State and @Watch decorators enable automatic UI updates.
- Bidirectional data binding via $$this.userInput.
Customizable UI Components:
- SegmentButton with capsule styling for option selection.
- Shadow effects and rounded corners for modern aesthetics.
Cross-Device Adaptation:
- Uses responsive units (lpx) for layout scaling.
- Focus state management for input fields.

Conclusion

This implementation showcases HarmonyOS NEXT's capabilities in building responsive, data-driven applications. Key strengths include clean state management and modular component design. Future enhancements could integrate voice input or expanded kinship databases.

Complete code available on [GitHub Repository Link].

Note: Requires @nutpi/relationship v1.2.0+ and HarmonyOS SDK 4.0+.

HarmonyOS NEXT Development Case: QR Code Generation and Recognition

zhongcx — Sun, 11 May 2025 03:34:07 +0000

This article demonstrates how to implement QR code generation and recognition in HarmonyOS NEXT using ArkUI components and system capabilities. The solution leverages multiple HarmonyOS Kits including ScanKit, MediaLibraryKit, and ImageKit to achieve core functionalities.

Code Structure Overview

import {
  componentSnapshot, // Component snapshot
  promptAction, // System prompt actions
  SegmentButton, // Segmented control component
  SegmentButtonItemTuple, // Type for segment items
  SegmentButtonOptions // Segmented control options
} from '@kit.ArkUI'; // Import ArkUI component library

import { photoAccessHelper } from '@kit.MediaLibraryKit'; // Media library access
import { common } from '@kit.AbilityKit'; // Common abilities
import { fileIo as fs } from '@kit.CoreFileKit'; // File system operations
import { image } from '@kit.ImageKit'; // Image processing
import { BusinessError, pasteboard } from '@kit.BasicServicesKit'; // Clipboard services
import { hilog } from '@kit.PerformanceAnalysisKit'; // Logging system
import { detectBarcode, scanBarcode } from '@kit.ScanKit'; // Barcode handling

@Entry // Application entry
@Component // Custom component
struct QrCodeGeneratorAndScanner {
  // Component state management
  @State private buttonOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({
    buttons: [{ text: 'Generate QR' }, { text: 'Scan QR' }] as SegmentButtonItemTuple,
    multiply: false, // Single selection
    fontColor: Color.White,
    selectedFontColor: Color.White,
    selectedBackgroundColor: Color.Orange,
    backgroundColor: "#d5d5d5",
    backgroundBlurStyle: BlurStyle.BACKGROUND_THICK
  })
  @State private sampleText: string = 'hello world';
  @State private inputText: string = "";
  @State private scanResult: string = "";
  @State @Watch('selectIndexChanged') selectIndex: number = 0
  @State @Watch('selectedIndexesChanged') selectedIndexes: number[] = [0];
  private qrCodeId: string = "qrCodeId"
  @State private scanResultObject: scanBarcode.ScanResult = ({} as scanBarcode.ScanResult)
  //... Other state variables

  // Event handlers
  selectedIndexesChanged() {
    this.selectIndex = this.selectedIndexes[0]
  }

  selectIndexChanged() {
    this.selectedIndexes[0] = this.selectIndex
  }

  private copyToClipboard(text: string): void {
    const pasteboardData = pasteboard.createData(pasteboard.MIMETYPE_TEXT_PLAIN, text);
    pasteboard.getSystemPasteboard().setData(pasteboardData);
    promptAction.showToast({ message: 'Copied' });
  }

  build() {
    Column() {
      SegmentButton({
        options: this.buttonOptions,
        selectedIndexes: this.selectedIndexes
      }).width('400lpx').margin({ top: 20 })

      Tabs({ index: this.selectIndex }) {
        // QR Generation Tab
        TabContent() {
          Scroll() {
            Column() {
              // Input section with sample/clear buttons
              QRCode(this.inputText)
                .width('300lpx')
                .aspectRatio(1)
                .id(this.qrCodeId)

              SaveButton().onClick(async () => {
                // Save QR to photo library
                const context = getContext(this) as common.UIAbilityContext;
                let helper = photoAccessHelper.getPhotoAccessHelper(context);
                //... Image capture and saving logic
              })
            }
          }
        }

        // QR Scanning Tab
        TabContent() {
          Scroll() {
            Column() {
              // Camera scan and gallery picker buttons
              Row() {
                Text('Scan').onClick(() => {
                  scanBarcode.startScanForResult(getContext(this), {
                    enableMultiMode: true,
                    enableAlbum: true
                  }, (error, result) => {
                    // Handle scan results
                  });
                })

                Text('Gallery').onClick(() => {
                  // Image selection and decoding logic
                  detectBarcode.decode(inputImage, (error, result) => {
                    // Handle decoding results
                  });
                })
              }

              // Result display sections
              Text(`Result: ${this.scanResult}`)
              Text(JSON.stringify(this.scanResultObject))
            }
          }
        }
      }
    }
    .backgroundColor("#f4f8fb");
  }
}

Key Features Implementation

1. QR Code Generation

Dynamic Input Handling: Uses TextArea with state management for real-time QR updates
Image Export:

  componentSnapshot.get(this.qrCodeId).then((pixelMap) => {
    const imagePacker = image.createImagePacker();
    imagePacker.packToFile(pixelMap, file.fd, {
      format: 'image/png',
      quality: 100
    });
  });

Media Library Integration: Leverages photoAccessHelper for secure storage

2. QR Code Recognition

Camera Scanning:

  scanBarcode.startScanForResult(context, {
    enableMultiMode: true,
    enableAlbum: true
  }, (error, result) => {
    // Error handling and result processing
  });

Image Decoding:

  detectBarcode.decode({ uri: imageUri }, (error, results) => {
    if (results.length > 0) {
      this.scanResult = results[0].originalValue;
    }
  });

Best Practices

Permission Handling: Implement proper permission requests for camera and storage access
Error Logging: Use hilog for detailed error tracking
Performance Optimization:
- Use component visibility control instead of conditional rendering
- Implement proper resource cleanup in finally blocks
User Experience:
- Provide visual feedback with click effects
- Use system clipboard for data sharing
- Implement loading states for long operations

Conclusion

This implementation demonstrates HarmonyOS NEXT's powerful capabilities in handling modern mobile development requirements. The solution combines:

ArkUI's responsive UI components
ScanKit's robust scanning features
MediaLibraryKit's secure storage access
ImageKit's efficient processing capabilities

Developers can extend this foundation with additional features like batch processing, history tracking, or custom QR code styling based on specific application requirements.