Cross-Device Dragging in HarmonyOS Next: Seamless File and Text Transfer

HarmonyOS Next introduces a groundbreaking feature: cross-device dragging. This allows for the effortless transfer of files and text between devices, significantly enhancing the user experience. Imagine a seamless flow of information, bridging the gap between your tablet, phone, and PC. This post delves into the technical underpinnings of this innovative capability.

Basic Principle of Cross-device Dragging

Cross-device dragging in HarmonyOS Next relies on two core technologies: keyboard and mouse traversal and a robust data transmission mechanism.

Keyboard and mouse traversal effectively extends the reach of your input devices. Mouse movements on one device are seamlessly synchronized to another, as if directly connected. This involves sophisticated device communication and input synchronization, leveraging Wi-Fi or Bluetooth (optimal performance within the same local area network). Input instructions are transmitted in real time, ensuring a fluid user experience.

The data transmission mechanism handles the transfer of dragged data. The system captures the data, packages it into a specific format, and transmits it to the target device using the distributed system's capabilities. The target device unpacks this data and places it in the designated location, all without noticeable delay for the user.

Core APIs for Implementing Cross-device Dragging

draggable Property

The draggable property is fundamental to enabling cross-device dragging. Setting this property to true for a component makes it draggable. For instance:

TextInput()
  .draggable(true)
  .width('200vp')
  .height('50vp')

onDragStart Event

The onDragStart event fires when a draggable component is selected and dragging begins. Here, developers define the data to be transferred and other drag-related parameters:

import { DragEvent } from '@ohos.arkui';

Column() {
    Text('Draggable Text')
      .draggable(true)
      .onDragStart((event: DragEvent) => {
            // Set the text data to be transmitted
            event.data.setData(pasteboard.MIMETYPE_TEXT_PLAIN, 'This is a piece of text to be dragged');
        })
}

onDrop Event

The onDrop event is triggered when the dragging action ends on the target device. This event receives the transferred data for processing. For example, to receive and display dragged text:

import { DropEvent } from '@ohos.arkui';

Column() {
    Text('Drop Area')
      .onDrop((event: DropEvent) => {
            let data = event.data;
            let text = data.getPrimaryText();
            if (text) {
                console.log('Received Text:', text);
                // Display the text or perform other actions
            }
        })
}

Practical Case: Dragging Images and Texts Between Tablet and PC

Let's illustrate cross-device dragging with a practical example involving image and text transfer between a tablet (source) and a PC (target).

Tablet (Source Device) Code

import pasteboard from '@ohos.pasteboard';
import { DragEvent } from '@ohos.arkui';

@Entry
@Component
struct SourceDevicePage {
    build() {
        Column() {
            // Draggable text
            Text('Example of Text Dragged across Devices')
              .draggable(true)
              .onDragStart((event: DragEvent) => {
                    event.data.setData(pasteboard.MIMETYPE_TEXT_PLAIN, 'Text content dragged across devices');
                })
            // Draggable image (assuming imageResource exists)
            Image($r('app.media.imageResource'))
              .width(100)
              .height(100)
              .draggable(true)
              .onDragStart((event: DragEvent) => {
                    // getImageBinaryData is assumed to exist
                    let imageData = getImageBinaryData(); 
                    event.data.setData(pasteboard.MIMETYPE_IMAGE_PNG, imageData);
                })
        }
    }
}

PC (Target Device) Code

import pasteboard from '@ohos.pasteboard';
import { DropEvent } from '@ohos.arkui';

@Entry
@Component
struct TargetDevicePage {
    build() {
        Column() {
            // Drop area
            Text('Drag the content here')
              .width('200vp')
              .height('100vp')
              .onDrop((event: DropEvent) => {
                    let data = event.data;
                    let mimeType = data.getPrimaryMimeType();
                    if (mimeType === pasteboard.MIMETYPE_TEXT_PLAIN) {
                        let text = data.getPrimaryText();
                        console.log('Received Text:', text);
                        // Display text
                    } else if (mimeType === pasteboard.MIMETYPE_IMAGE_PNG) {
                        let imageData = data.getPrimaryImage();
                        if (imageData) {
                            // displayImage function is assumed to exist
                            displayImage(imageData); 
                        }
                    }
                })
        }
    }
}

This example showcases cross-device dragging for images and text. Remember that production-ready applications require more robust error handling and user experience considerations.

Conclusion

Cross-device dragging in HarmonyOS Next represents a significant leap forward in distributed user interfaces. By mastering the core APIs, developers can create intuitive and efficient applications that take full advantage of this innovative feature. Further exploration of the HarmonyOS documentation will provide additional insights and best practices.