How to render a card on an Android client - Mobile Platform as a Service

Assemble card information

Android

Create the configuration and set the parameters.

/**
 * Assemble card configuration.
 * @return
 */
private CubeCardConfig assembleCubeCardConfig(){
    // Create card configuration.
    CubeCardConfig cardConfig = new CubeCardConfig();
    // Card ID created on the backend.
    cardConfig.setTemplateId("hello_cube");
    // Card version.
    cardConfig.setVersion("1.0.0.0");
    // Card width. Set to the screen width.
    cardConfig.setWidth(MFSystemInfo.getPortraitScreenWidth());
    return cardConfig;
}

iOS

Create the configuration and set the parameters.

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

Create a card

Android

Request the card based on its configuration. The card engine retrieves the card template from the server. Use the createCard method to request a single card and the createCards method to request multiple cards.

/**
 * Request card information.
 * @param cardConfig
 */
private void requestCubeCard(final CubeCardConfig cardConfig){
    // Request the card.
    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

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

Render the card

Android

After obtaining the card information, a card View is generated and rendered on the main thread. This step also requires exception handling to prevent situations where card information is not successfully obtained.

/**
 * Render the card.
 * @param cubeCard
 * @param cardType
 * @param cubeCardConfig
 * @param resultCode
 */
private void renderCubeCard(final CubeCard cubeCard, CCardType cardType, CubeCardConfig cubeCardConfig, CubeCardResultCode resultCode) {
    if (resultCode == CubeCardResultCode.CubeCardResultSucc) {
        // Must run on the main thread.
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                mCard = cubeCard;
                // Create the card View.
                CubeView view = CubeService.instance().getEngine().createView(FastActivity.this);
                // Add to the outer ViewGroup.
                mWrapperLl.addView(view);
                // Render the card.
                cubeCard.renderView(view);
            }
        });
        MPLogger.info(TAG, "succ " + cubeCardConfig.getTemplateId() + " style " + cardType);
    } else {
        MPLogger.info(TAG, "fail " + cubeCardConfig.getTemplateId() + " style " + cardType + " error " + resultCode);
    }
}

iOS

After obtaining the card information, a card View is generated and then rendered on the main thread. Exception handling is necessary at this stage to prevent situations where card information is not successfully obtained.

#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];
    });
}

Notification Card Lifecycle

Notification didAppear

Android

mCard.notifyState(CCardState.CCardStateAppear);

iOS

[card notifyState:CCardStateAppear];

Notification disApear

Android

mCard.notifyState(CCardState.CCardStateDisappear);

iOS

[card notifyState:CCardStateDisappear];

Notify frontend

Android

mCard.notifyState(CCardState.CCardStateForeGround);

iOS

[card notifyState:CCardStateForeGround];

Notify backend

Android

mCard.notifyState(CCardState.CCardStateBackGround);

iOS

[card notifyState:CCardStateBackGround];

Release the card

Android

After you finish using the card, release its memory resources. Typically, call this in the page's onDestroy lifecycle method.

/**
 * Release 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

After you finish using the card, release its memory resources. Typically, call this in the page's dealloc lifecycle method or destroy it manually.

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