Mobile Platform as a Service:Custom plugins

About this task

Creating a custom plugin involves these steps:

1. Create a plugin

2. Register the plugin

3. Use the plugin

The following example uses the H5 container and offline package demo to create a plugin that modifies the navigation bar when an H5 page loads.

Procedure

Create a plugin

General format for a plugin class:

#import <NebulaSDK/NBPluginBase.h>

@interface MPPlugin4TitleView : NBPluginBase

@end

@implementation MPPlugin4TitleView

- (void)pluginDidLoad
{
}

- (void)handleEvent:(PSDEvent *)event
{
   [super handleEvent:event];
}

- (int)priority
{
    return PSDPluginPriority_High +1;
}

Key points:

• Naming: Start the name with XXPlugin4, where XX is a custom prefix, to match the container's default plugin naming convention.

• Base class: All plugins must inherit from NBPluginBase.

• Implement basic methods: In the .m file, you must override the following methods:

  • - (void)pluginDidLoad: Required. Subscribes to H5 events. Events are listed in the NBDefines.h header file.

  • - (void)handleEvent: Required. Handles logic when a subscribed event triggers.

  • - (**int**) priority: Required. Sets the event priority to PSDPluginPriority_High + 1.

  • - (void)addJSApis: Optional. Registers a JSAPI for communication with the H5 page.

Listen for events

Register event listeners in the - (void)pluginDidLoad method.

- (void)pluginDidLoad {
    self.scope = kPSDScope_Scene; // 1

    [self.target addEventListener:kNBEvent_Scene_NavigationItem_Left_Back_Create_After withListener:self useCapture:NO];
    // -- Modify the navigation bar style.
    [self.target addEventListener:kH5Event_Scene_NavigationBar_ChangeColor withListener:self useCapture:NO];

    [super pluginDidLoad];
}

The addEventListener parameters:

Name	Description
scope	Event scope. From smallest to largest: Scene, Session, and Service.
event	Event name. Constants are defined in NBDefines.h.
listener	Event handler object that provides - handleEvent:.
capture	Whether to use event capture. Typically set to NO.

Set the plugin priority

Set a high priority to prevent the plugin from being overwritten.

- (int)priority
{
    return PSDPluginPriority_High +1;
}

Handle the listener

Implement event-handling logic in the -handleEvent: method.

- (void)handleEvent:(NBNavigationTitleViewEvent *)event
{
    [super handleEvent:event];

    if ([kNBEvent_Scene_NavigationItem_Left_Back_Create_After isEqualToString:event.eventType]){
        // Modify the style based on the default back button.
        NSArray *leftBarButtonItems = event.context.currentViewController.navigationItem.leftBarButtonItems;
        if ([leftBarButtonItems count] == 1) {
            if (leftBarButtonItems[0] && [leftBarButtonItems[0] isKindOfClass:[AUBarButtonItem class]]) {
                // Modify the color of the back arrow and text based on the default back button.
                AUBarButtonItem *backItem = leftBarButtonItems[0];
                backItem.backButtonColor = [UIColor greenColor];
                backItem.titleColor = [UIColor colorFromHexString:@"#00ff00"];

                // Hide the back arrow.
                //                backItem.hideBackButtonImage = YES;

                // Hide the back text: Set the text to transparent but keep the clickable area of the back button.
                //                backItem.titleColor = [UIColor clearColor];
            }
        }
        [event preventDefault];
        [event stopPropagation];
    }else if([kH5Event_Scene_NavigationBar_ChangeColor isEqualToString:event.eventType]) {

        // Disable the default navigation bar style of the container.
        [event preventDefault];
        [event stopPropagation];
    }
}

Add a JSAPI

Register a custom JSAPI in the optional - (void)addJSApis method. Custom JSAPIs > Register using code.

- (void)addJSApis
{
    [super addJSApis];
    // You can add custom JSAPIs related to TitleView here.
}

Register the plugin

Register the plugin class in your custom Plist file. Custom JSAPIs > Register a JSAPI.

The registered plugin dictionary contains these items:

Name	Description
name	Plugin class name.
scope	Plugin scope.
events	Events to listen for.

Use the plugin

1. Add a breakpoint in the pluginDidLoad method to verify the call stack when the event triggers.

   

2. Add a breakpoint in the handleEvent method to verify that subscribed events trigger correctly.

   

3. Verify that the custom navigation bar style takes effect on the H5 page.