Render a card

Android

Create the configuration and set the required parameters.

/**
 * Assemble the card configuration information.
 * @return
 */
private CubeCardConfig assembleCubeCardConfig(){
    // Create the card configuration.
    CubeCardConfig cardConfig = new CubeCardConfig();
    // The card ID created on the server-side.
    cardConfig.setTemplateId("hello_cube");
    // The card version.
    cardConfig.setVersion("1.0.0.0");
    // The card width. This example uses the screen width.
    cardConfig.setWidth(MFSystemInfo.getPortraitScreenWidth());
    return cardConfig;
}

iOS

Create the configuration and set the required parameters.

- (void)createCubeConfig {
                // Set the card parameters.
    CubeCardConfig *cardConfig = [[CubeCardConfig alloc] init];
    // The card version.
    [cardConfig setVersion:@"1.0.0.0"];
    // The card ID created on the server-side.
    [cardConfig setTemplteId:@"987654321"];
    // The preset width.
    [cardConfig setWidth:MP_Screen_Width];
    // The preset height.
    [cardConfig setHeight:CGFLOAT_MAX];
}

HarmonyOS

let cardConfig:CubeCardConfig = CubeCardConfig
  .obtain()
  // The card ID.
  .setTemplateId(this.cardId)
  // The card version.
  .setVersion(this.cardVer)
  // The card width. This example uses the screen width.
  .setWidth(CKSystemInfo.getDisplayMetricsWidth())

Android

Request the card based on the specified configuration information. The DPI engine retrieves the card template information from the server-side. Use the createCard method to request one card at a time, or use the createCards method to request multiple cards at once.

/**
 * Request the card information.
 * @param cardConfig
 */
private void requestCubeCard(final CubeCardConfig cardConfig){
    // Create the card information.
    CubeService.instance().getEngine().createCard(cardConfig, new CCardCallback() {
        @Override
        public void onLoaded(final CubeCard cubeCard, CCardType cardType, CubeCardConfig cubeCardConfig, CubeCardResultCode resultCode) {
            renderCubeCard(cubeCard,cardType,cubeCardConfig,resultCode);
        }
    });
}

iOS

Request the card based on the specified configuration information. The DPI engine retrieves the card template information from the server-side. Use the createCard method to request one card at a time, or use the createCards method to request multiple cards at once.

[[[CubeService sharedInstance] getEngine] createCard:cardConfig callback:self];

HarmonyOS

Request the card based on the specified configuration information. The DPI engine retrieves the card template information from the server-side. Use the createCard method to request one card at a time, or use the createCards method to request multiple cards at once.

CubeEngine.getInstance().createCard(
  cardConfig
  ,
  {
    onLoaded: (card: CubeCard | null, cardType: CCardType, config: CubeCardConfig, code: CubeCardResultCode) => {
      if (CubeCardResultCode.CubeCardResultSucc == code) {
        this.instance = card;
      }
    }
  });

iOS

After you retrieve the card information, generate a card view and render it on the main thread. You must also handle exceptions to prevent failures when retrieving card information.

#pragma mark---CrystalCardCallback
- (void)onLoaded:(CubeCard *)card cardType:(CCardType)cardType config:(CubeCardConfig *)config erroCode:(CubeCardResultCode)erroCode {
    if (!card) {
        NSString *errMsg = [NSString stringWithFormat:@"Creation failed: templteId=%@,style=%d, error=%d", [config templteId], cardType, erroCode];
        NSLog(@"Error message:%@", errMsg); 
        return;
    }
    
    NSLog(@"Creation successful succ %@ style %d error %d", [config templteId], cardType, erroCode);

    dispatch_async(dispatch_get_main_queue(), ^{        
        // Refresh the UI on the main thread.
        CubeView *view = [[[CubeService sharedInstance] getEngine] createView];
        CGSize size = [card getSize];
        
        if (![view isEqual:[NSNull null]]) {
            [view setFrame:CGRectMake(0, 0, MP_Screen_Width - 40, size.height)];
            [card renderView:view];
        }
        
        [self.view addSubView:view];
    });
}

HarmonyOS

build() {
  Stack() {
    Column() {
      ···
      if (this.instance) {
        CubeCardComponent({ instance: this.instance })
      }
      ···
    }
    .justifyContent(FlexAlign.Start)
  }
}

Notification didApear

mCard.notifyState(CCardState.CCardStateAppear);

[card notifyState:CCardStateAppear];

this.instance.notify(CCardState.CCardStateAppear)

Notifications disappear

mCard.notifyState(CCardState.CCardStateDisappear);

[card notifyState:CCardStateDisappear];

this.instance.notify(CCardState.CCardStateDisappear)

Frontend Notifications

mCard.notifyState(CCardState.CCardStateForeGround);

[card notifyState:CCardStateForeGround];

this.instance.notify(CCardState.CCardStateForeGround)

Notification backend

mCard.notifyState(CCardState.CCardStateBackGround);

[card notifyState:CCardStateBackGround];

this.instance.notify(CCardState.CCardStateBackGround)

Android

When you finish using the card, you must release its memory resources. This is typically done in the page's onDestroy lifecycle method.

/**
 * Release the card resources.
 */
private void releaseCubeCard(){
    if (mCard != null) {
        mCard.recycle();
    }
    int chidrenCount = mWrapperLl.getChildCount();
    for (int i = 0; i < chidrenCount; i++) {
        if (mWrapperLl.getChildAt(i) instanceof CubeView) {
            ((CubeView) mWrapperLl.getChildAt(i)).destroy();
        }
    }
    mWrapperLl.removeAllViews();
}

iOS

When you finish using the card, you must release its memory resources. This is typically done in the page's dealloc lifecycle method or by explicitly destroying it.

- (void)destroyCubeService {
    // Destroy the card engine.
    if (![[[CubeService sharedInstance] getEngine] isEqual:[NSNull null]]) {
        [[CubeService sharedInstance] destroyEngine];
    }
    
    // Remove the card views.
    [self.view removeAllSubviews];
}

HarmonyOS

this.instance.destroy();