All Products
Search
Document Center

Mobile Platform as a Service:Customize plugins

Last Updated:Dec 01, 2021

To do something at a certain time, for example, to log events when you enter the page, you need to develop a plugin. When the plugin subscribes to the corresponding events, you can process the data carried with the events in handler.

To do something at a certain time, for example, to log events when you enter the page, you need to develop a plugin. When the plugin subscribes to the corresponding events, you can process the data carried with the events in handler.

About this task

The procedure of customizing a plugin falls into 3 steps:

  1. Create a plugin

  2. Register the plugin

  3. Use the plugin

See the code sample to learn how to customize a plugin which modifies the page navigation bar when the system loads H5 page.

Procedure

Create a plugin

Create a plugin class in the format as follows, and the following considerations apply:

  • Name: To keep consistence with the plugin name provided by the container by default, the name starts with XXPlugin4, in which the XX is your custom prefix.

  • Base class: All plugins inherit from NBPluginBase.

  • Implement basic methods: In the .m file, you need to override the following three methods:

    • - (void)pluginDidLoad: Required. To monitor events, see header file NBDefines.h for eventlist.

    • - (void)addJSApis: Optional. Communicate with H5, so it might register JSAPI.

    • - (void)handleEvent: Required. Process the logic when the monitored event is triggered.

.h file is as follows:

.m file is as follows:

Monitor events

Register the events that need to be monitored in - (void)pluginDidLoad method.

- (void)pluginDidLoad {
    self.scope = kPSDScope_Scene; // 1
    [self.target
    addEventListener:kNBEvent_Scene_TitleView_Title_Click // 2
                     withListener:self // 3
                       useCapture:NO]; // 4
    [super pluginDidLoad];
}

addEventListener method is used to monitor a certain event, and the description of each step is as follows:

Name

Definition

scope

Set the scope where the event works on. Currently, the supported scope from small to large is Scene, Session, and Service.

event

Set the event name, and the event constant is defined in NBDefines.h.

listener

Set the processor of the event, namely the object which provides - handleEvent:.

capture

Set whether to broadcast the event by capturing. It is generally NO.

Add JSAPI

In the process of registering the plugin, if you need to customize JSAPI to interact with the H5 page, you can register the JSAPI in the - (void)addJSApis method in codes, see Customize JSAPI > Register in codes. You can decide whether to implement this method on demand.

- (void)addJSApis
{
    [super addJSApis];
    // You can add the custom JSAPI realted to TitleView 
}

Process monitor

At last, process the logic in - (void)handleEvent when the monitored event is triggered.

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

    if([kNBEvent_Scene_TitleView_Create_Before isEqualToString:event.eventType]) {
        // If you customize the TitleView, the support from the default kNBEvent_Scene_TitleView_[Title_Set | Title_Click | Subtitle_Click] and other event will be lost
        NBNavigationTitleViewEvent *e = (NBNavigationTitleViewEvent *)event;
        H5WebViewController *currentViewController = (H5WebViewController *)event.context.currentViewController;
        UINavigationController *navi = currentViewController.navigationController ?:(UINavigationController *)APPDELEGATE.window.rootViewController;
        UINavigationBar *bar = navi.navigationBar;
        H5NavigationTitleView *newTitleView = [self createNavigationTitleView:bar.bounds];
        [newTitleView setMainTitle:@"Recreate" subtitle:nil];
        newTitleView.delegate = [e.titleView delegate];
        currentViewController.navigationItem.titleView = newTitleView;
        e.titleView = newTitleView;
        [e preventDefault];
    }
}
Note: Since when the events that have been monitored in the - (void)pluginDidLoad method are triggered, the logic upon event triggering is processed in - handleEvent: method, so if you have monitored multiple methods, you must process events differently according to the class or eventType of the event.

Register the plugin

After you create the plugin class, you must register this plugin in your custom plist file, see Customize JSAPI > Register JSAPI.

aaa

The registered plugin is of dictionary type, including the following 3 items:

Name

Definition

name

Name of the created plugin class

scope

The scope where the plugin works on

events

Name of the monitored event

Use the plugin

  • Add breakpoints in the pluginDidLoad method to observe whether the calling sequence of the triggering time stacks is correct.

    aaa
  • Add breakpoints in the handleEvent method to observe whether the monitored events can be correclty triggered.

    aaa
  • Observe whether the custom navigation bar style on the H5 page takes effect.

    H5