Mobile Platform as a Service:Customize plugins

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:

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.

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

Use the plugin

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

   

2. Add breakpoints in the handleEvent method to observe whether the monitored events can be correctly triggered.

   

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