GIF Color Setting, Custom Decorators, Split-Screen Switching, Bottom Margin, Window Acquisition on Pages

#harmonyosnext

[Daily HarmonyOS Next Knowledge] GIF Color Setting, Custom Decorators, Split-Screen Switching, Bottom Margin, Window Acquisition on Pages

1. Does HarmonyOS support setting colors for GIFs?

The GIF is red, and the requirement is to change the red color of the GIF to the client's theme color, which can be any color.

For specific matrix rules, refer to the colorFilter description in the link: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-image-V5#colorfilter9

Set a color filter effect for the image through the colorFilter property. Refer to the following demo:

@Entry
@Component
struct ImageExample1 {
  build() {
    Column() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
        Row() {
          // Load a GIF format image
          Image($r('app.media.ic_audio_album_playing'))
            .width(110).height(110).margin(15)
            .overlay('gif', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
            .colorFilter(
              [
                0, 0, 0, 0, 1, // Red channel
                1, 0, 0, 0, 0, // Green channel
                0, 0, 0, 0, 0, // Blue channel
                0, 0, 0, 1, 0// Transparency channel
              ]
            )
        }.backgroundColor('#ffff')
      }
    }.height(320).width(360).padding({ right: 10, top: 10 })
  }
}

2. How to implement custom decorators in HarmonyOS ArkTS?

How to implement custom decorators in ArkTS? For example, adding a universal function to pages.

Refer to the demo for custom decorators:

/**
 * Custom class decorator
 * @param params Decorator parameters
 * @returns
 */
function CustomerDecorator(params: string) {
  // targetClass is the context of the class
  return (targetClass: Function) => {
    console.log(params);
    targetClass.prototype.buy();
  }
}

@CustomerDecorator('Parameterized class decorator')
class CustomerServeice {
  constructor() {
  }

  buy() {
    console.log(`Purchase`);
  }
}

// Creating a new object triggers the custom class decorator
let customerService = new CustomerServeice();

3. When using Window in HarmonyOS, after switching to split-screen mode, returning to the app, closing the window, and reopening it, events in the sub-window do not respond?

When the app pops up a sub-window, switches to split-screen with app B, enters the background, closes the sub-window, returns to the app, and pops up the sub-window again, the click events in the sub-window do not respond.

Refer to the following code:

EntryAbility.ets

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

  onDestroy(): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    AppStorage.setOrCreate("windowStage", windowStage);
    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
    });
  }

  onWindowStageDestroy(): void {
    // Main window is destroyed, release UI related resources
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground(): void {
    // Ability has brought to foreground
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground(): void {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}

Index.ets

import window from '@ohos.window';

@Entry
@Component
struct Index {
  aboutToAppear() {
    let windowStage_: window.WindowStage = AppStorage.get("windowStage") as window.WindowStage;
    windowStage_.createSubWindow("subWindow", (err, win) => { // Create and open a transparent sub-window
      win.setUIContent('pages/Page1');
      win.resize(600, 600)
      win.moveWindowTo(300, 300)
      win.showWindow();
    })
  }
  aboutToDisappear(){
    window.findWindow("subWindow").destroyWindow()
  }
  build() {
    Row() {
      Column() {
        Button("Sub-window pop-up")
          .margin({ top: 20 })
          .onClick(() => {

          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

Page1.ets

@Entry
@Component
struct Page1 {
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('Page1HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(()=>{
          console.log('===================>Click event')
        })
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Pink)
  }
}

4. Can the bottom margin of a HarmonyOS page be filled to make the page full-screen?

Refer to the immersive layout documentation: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-develop-apply-immersive-effects-V5

5. How to get the windowClass in a HarmonyOS Page?