Mobile Platform as a Service：Custom plugins

Tentang tugas ini

Proses pembuatan custom plugin mencakup langkah-langkah berikut:

1. Buat plugin

2. Daftarkan plugin

3. Gunakan plugin

Topik ini menggunakan demo H5 container and offline package untuk menunjukkan cara membuat custom plugin yang memodifikasi navigation bar saat halaman H5 dimuat.

Prosedur

Buat plugin

Kode berikut menunjukkan contoh format umum untuk kelas plugin baru:

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

Perhatikan poin-poin berikut:

• Pemberian nama: Untuk menjaga konsistensi dengan penamaan plugin bawaan yang disediakan oleh container, awali nama dengan XXPlugin4, di mana XX adalah awalan kustom.

• Kelas dasar: Semua plugin harus mewarisi dari NBPluginBase.

• Implementasikan metode dasar: Di file .m, Anda harus meng-override metode berikut:

  • - (void)pluginDidLoad: Wajib. Metode ini digunakan untuk berlangganan ke event H5. Daftar event tersedia di file header NBDefines.h.

  • - (void)handleEvent: Wajib. Metode ini menangani logika setelah event yang telah berlangganan dipicu.

  • - (**int**) priority: Wajib. Menentukan prioritas event, yang harus diatur ke PSDPluginPriority_High + 1.

  • - (void)addJSApis: Opsional. Metode ini digunakan untuk mendaftarkan JSAPI guna berkomunikasi dengan halaman H5.

Dengarkan event

Di metode - (void)pluginDidLoad, daftarkan pendengar untuk event yang ingin Anda tangani.

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

    [self.target addEventListener:kNBEvent_Scene_NavigationItem_Left_Back_Create_After withListener:self useCapture:NO];
    // -- Modifikasi gaya navigation bar.
    [self.target addEventListener:kH5Event_Scene_NavigationBar_ChangeColor withListener:self useCapture:NO];

    [super pluginDidLoad];
}

Metode addEventListener mendaftarkan pendengar untuk suatu event. Parameter-parameter tersebut dijelaskan sebagai berikut:

Atur prioritas plugin

Untuk mencegah custom plugin Anda ditimpa, atur prioritasnya menjadi tinggi.

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

Tangani pendengar

Terakhir, dalam metode -handleEvent:, terapkan logika yang dijalankan setelah event berlangganan dipicu.

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

    if ([kNBEvent_Scene_NavigationItem_Left_Back_Create_After isEqualToString:event.eventType]){
        // Modifikasi gaya berdasarkan tombol back default.
        NSArray *leftBarButtonItems = event.context.currentViewController.navigationItem.leftBarButtonItems;
        if ([leftBarButtonItems count] == 1) {
            if (leftBarButtonItems[0] && [leftBarButtonItems[0] isKindOfClass:[AUBarButtonItem class]]) {
                // Modifikasi warna panah back dan teks berdasarkan tombol back default.
                AUBarButtonItem *backItem = leftBarButtonItems[0];
                backItem.backButtonColor = [UIColor greenColor];
                backItem.titleColor = [UIColor colorFromHexString:@"#00ff00"];

                // Sembunyikan panah back.
                //                backItem.hideBackButtonImage = YES;

                // Sembunyikan teks back: Atur teks menjadi transparan tetapi pertahankan area klik tombol back.
                //                backItem.titleColor = [UIColor clearColor];
            }
        }
        [event preventDefault];
        [event stopPropagation];
    }else if([kH5Event_Scene_NavigationBar_ChangeColor isEqualToString:event.eventType]) {

        // Nonaktifkan gaya navigation bar default dari container.
        [event preventDefault];
        [event stopPropagation];
    }
}

Tambahkan JSAPI

Untuk mendefinisikan JSAPI kustom guna berinteraksi dengan halaman H5, Anda dapat mendaftarkannya di metode opsional - (void)addJSApis. Untuk informasi lebih lanjut, lihat Custom JSAPIs > Register using code.

- (void)addJSApis
{
    [super addJSApis];
    // Anda dapat menambahkan JSAPI kustom terkait TitleView di sini.
}

Daftarkan plugin

Setelah membuat kelas plugin, Anda harus mendaftarkan plugin tersebut di file Plist kustom Anda. Untuk informasi lebih lanjut, lihat Custom JSAPIs > Register a JSAPI.

Plugin yang didaftarkan berupa dictionary yang berisi tiga item berikut:

Gunakan plugin

1. Di metode pluginDidLoad, tambahkan breakpoint untuk memeriksa apakah tumpukan panggilan benar saat event dipicu.

   

2. Dalam metode handleEvent, tambahkan titik istirahat untuk memverifikasi apakah event yang telah berlangganan dipicu dengan benar.

   

3. Periksa apakah gaya navigation bar kustom pada halaman HTML5 berfungsi sebagaimana mestinya.